MediaWiki:Timeless.css

/* ------ TIMELESS ------ */

.skin-timeless {
    background:var(--base-0);
} 

.skin-timeless #mw-content-container {
    background: var(--page-background);
}

#mw-content {
    background: var(--base-1);
    box-shadow: var(--box-shadow);
    border: 0 solid var(--contrast-3);
}

@media screen and (min-width: 1100px) {
    #mw-content {
        border-width: 0 1px 1px;
        border-radius: 0 0 3px 3px;
    }
}

/* --- TOP BAR --- */

@media screen and (max-width: 550px) {
	#p-logo-text {
		position: absolute;
	}
}

/* --- SIDEBAR LOGO --- */

#p-logo {
	border-radius: 3px;
	border: 1px solid #191924;
	box-shadow: var(--box-shadow);
	margin-top: 1em;
	padding: 0;
	image-rendering: -webkit-optimize-contrast;
	overflow: hidden;
}

@media screen and (min-width: 851px) {
	.mw-wiki-logo.fallback {
		width: 13em;
		height: 13em;
		background-size: cover;
		margin: 0;
		max-width: 100%;
	}
}

/* --- NAVIGATION --- */

#mw-site-navigation .sidebar-chunk, 
#mw-related-navigation .sidebar-chunk {
    background: 0;
    border: 0;
    padding: 0;
}

#mw-site-navigation .sidebar-inner,
#mw-related-navigation .sidebar-inner,
#personal .dropdown {
    background: var(--base-2);
    border: 1px solid var(--contrast-3);
    box-shadow: var(--box-shadow);
    border-radius: 3px;
    padding: 1.5em 1.5em 0;
    color: var(--contrast-1);
}

@media screen and (min-width: 1100px) {
    #mw-site-navigation .sidebar-inner,
    #mw-related-navigation .sidebar-inner {
        background: var(--sidebar-base);
    }
}

#mw-site-navigation .sidebar-inner .mw-portlet,
#mw-related-navigation .sidebar-inner .mw-portlet,
#personal .dropdown .mw-portlet {
    margin-bottom: 1.6em;
}

#mw-site-navigation .sidebar-inner .mw-portlet-body, 
#mw-related-navigation .sidebar-inner .mw-portlet-body,
#personal .dropdown .mw-portlet-body {
    margin-bottom: 0;
}

#mw-site-navigation .sidebar-chunk h3, 
#mw-related-navigation .sidebar-chunk h3 {
    font-family: 'Idleon';
    font-size: 16px;
    padding: 0 0 0.5em;
    margin: 0 0 0.5em;
    border-bottom-color: var(--accent-2);
}

#mw-site-navigation .sidebar-chunk h3:empty {
	display: none
}

#personal .dropdown h3 {
    margin: 0 0 0.5em;
    border-bottom-color: var(--accent-2);
}

#personal .dropdown h3 b {
    font-family: 'Idleon';
    font-size: 16px;
    font-weight: 400;
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
}

#mw-site-navigation h2, 
#mw-related-navigation h2,
#personal h2 {
    font-family: 'Idleon';
    font-weight: normal;
    font-size: 18px;
    color: #000;
    filter: var(--filter);
}

#personal .dropdown:before, 
#page-tools .sidebar-inner:before {
	border-bottom-color:var(--contrast-3);
}

#personal .dropdown:after,
#page-tools .sidebar-inner:after {
	border-bottom-color:var(--base-2);
}

@media screen and (min-width: 851px) and (max-width: 1099px) {
    
	#mw-site-navigation .sidebar-chunk h2 span:before,
    #mw-related-navigation .sidebar-chunk h2 span:before {
		border-bottom-color: var(--contrast-3);
	}
    
    #mw-site-navigation .sidebar-chunk h2 span:after,
    #mw-related-navigation .sidebar-chunk h2 span:after {
        border-bottom-color: var(--base-2);
    }

	#mw-header-nav-hack { 
		background:var(--base-1); 
		border-color:var(--base-0);
        box-shadow: var(--box-shadow);
	}
}

@media screen and (min-width: 851px) and (max-width: 1099px) {

	#mw-site-navigation .sidebar-chunk h2 span:before,
    #mw-related-navigation .sidebar-chunk h2 span:before {
		border-bottom-color: var(--contrast-3);
	}
    
    #mw-site-navigation .sidebar-chunk h2 span:after,
    #mw-related-navigation .sidebar-chunk h2 span:after {
        border-bottom-color: var(--base-2);
    }

	#mw-header-nav-hack { 
		background:var(--base-1); 
		border-color:var(--base-0);
        box-shadow: var(--box-shadow);
	}
}


/* --- SIDEBAR COLLAPSIBLE --- */

.sidebar-collapsible {
	cursor: pointer;
}

div#sidebar-collapsible-toggle {
	text-align: right;
	font-size: .95em;
	color: var(--link);
	cursor: pointer;
	margin: -0.5em 0 1em;
}

div#sidebar-collapsible-toggle:hover {
	color: var(--link-hover);
	text-decoration: underline;
}

.sidebar-collapsible:after {
    float: right;
    content: "";
    display: block;
    height: 15px;
    width: 15px;
    background: transparent url(/wiki/resources/lib/ooui/themes/wikimediaui/images/icons/expand.svg) center center / cover;
    filter: var(--filter);
}

.sidebar-collapsible.open:after {
    transform: rotate(-90deg);
}

.sidebar-collapsible.closed+.sidebar-collapsible-content {
	display: none;
}

.sidebar-collapsible.open+.sidebar-collapsible-content {
	display: block;
}

/* --- FOOTER --- */

.client-darkmode .mw-footer-container {
	color: var(--contrast-1);
	background: var(--base-1);
}

.client-darkmode .mw-footer-container a,
.client-darkmode .mw-footer-container a:visited {
	color: var(--link);
}

.client-darkmode .mw-footer-container a:hover,
.client-darkmode .mw-footer-container a:visited:hover {
	color: var(--link-hover);
}

/* --- TOOL ICONS --- */
.skin-timeless .mw-portlet.tools-inline li.selected a {
    color: var(--contrast-1);
}
.skin-timeless .mw-portlet.tools-inline a,
.skin-timeless #mw-indicator-mw-helplink a,
.skin-timeless .mw-editsection,
.client-js .skin-timeless .mw-portlet.tools-inline a,
.client-js .skin-timeless #mw-indicator-mw-helplink a,
.client-js .skin-timeless .mw-editsection{
    background: transparent;
    position: relative;
}
.skin-timeless .tools-inline li:hover{
    border-bottom-color: var(--contrast-3);
}
.skin-timeless .mw-portlet.tools-inline a:before,
.skin-timeless #mw-indicator-mw-helplink a:before,
.skin-timeless .mw-editsection:before {
    content: "";
    display: block;
    height: 20px;
    width: 20px;
    position: absolute;
    top: 0;
    left: 0;
    filter: var(--filter);
}
.skin-timeless .mw-editsection:before {
    top: unset;
    bottom: 0;
}
.skin-timeless .mw-portlet.tools-inline li a:before {
    background-image: url(/wiki/skins/Timeless/resources/images/page-misc-grey.svg);
}
.skin-timeless .mw-portlet.tools-inline #ca-ve-edit a:before,
.skin-timeless .mw-editsection:before {
    background-image: url(/wiki/skins/Timeless/resources/images/pencil-grey.svg);
}
.skin-timeless .mw-portlet.tools-inline #ca-watch a:before {
    background-image: url(/wiki/skins/Timeless/resources/images/star.svg);
}
.skin-timeless .mw-portlet.tools-inline #ca-unwatch a:before {
    background-image: url(/wiki/skins/Timeless/resources/images/star-filled.svg);
}
.skin-timeless .mw-portlet.tools-inline #ca-edit a:before {
    background-image: url(/wiki/skins/Timeless/resources/images/pencil-source-grey.svg);
}
.skin-timeless .mw-portlet.tools-inline #ca-history a:before {
    background-image: url(/wiki/skins/Timeless/resources/images/clock-grey.svg);
}
.skin-timeless .mw-portlet.tools-inline #ca-talk a:before {
    background-image: url(/wiki/skins/Timeless/resources/images/talk-grey.svg);
}
.skin-timeless .mw-portlet.tools-inline #t-contributions a:before {
    background-image: url(/wiki/skins/Timeless/resources/images/puzzle-grey.svg);
}
.skin-timeless .mw-portlet.tools-inline #ca-addsection a:before {
    background-image: url(/wiki/skins/Timeless/resources/images/plus-grey.svg?f5373);
}
.skin-timeless .mw-portlet.tools-inline #ca-viewsource a:before {
    background-image: url(/wiki/skins/Timeless/resources/images/brackets-grey.svg);
}
.skin-timeless .mw-portlet.tools-inline #ca-view a:before,
.skin-timeless .mw-portlet.tools-inline #ca-view-foreign a:before{
    background-image: url(/wiki/skins/Timeless/resources/images/eyeball-grey.svg);
}
.skin-timeless .mw-portlet.tools-inline li[id^='ca-nstab-'] a:before {
    background-image: url(/wiki/skins/Timeless/resources/images/page-grey.svg);
}
.skin-timeless #mw-indicator-mw-helplink a:before {
    background-image: url(/wiki/resources/src/mediawiki.helplink/images/helpNotice.svg);
}
.skin-timeless #ca-more span {
    background-image: url(/wiki/skins/Timeless/resources/images/gear-grey.svg);
}
.skin-timeless #ca-more span,
.skin-timeless #ca-more:after {
    filter: var(--filter);
}
.skin-timeless #mwe-lastmodified {
    display: inline;
}