MediaWiki:Timeless.css: Difference between revisions

From IdleOn MMO Wiki
imported>Blackwolfe
(Created page with "→‎All CSS here will be loaded for users of the Timeless skin: →‎Left Sidebar: #mw-site-navigation .sidebar-chunk { color:white; background: rgba(0,0,0,0.8); border:1; b...")
 
m (Adjusted the color bar at the top to match the content width.)
 
(62 intermediate revisions by 4 users not shown)
Line 1: Line 1:
/* All CSS here will be loaded for users of the Timeless skin */
/* ------ TIMELESS ------ */
/*Left Sidebar*/
 
#mw-site-navigation .sidebar-chunk {
.skin-timeless {
color:white;
    background: var(--base-0);
background: rgba(0,0,0,0.8);
}
border:1;
 
border-color:black;
#mw-header-container{
border-radius: 10px;
background: var(--base-0);
    color: var(--contrast-1);  
}
 
#mw-content-container {
    background: var(--page-background);
}
}


/*Main Content*/
#mw-content {
#mw-content {
color:white;
    background: var(--base-1);
background: rgba(0,0,0,0.8);
    box-shadow: var(--box-shadow);
border: 1;
    border: 0 solid var(--contrast-3);
border-color:black;
}
-webkit-border-bottom-right-radius: 10px;
 
-webkit-border-bottom-left-radius: 10px;
@media screen and (min-width: 1100px) {
-moz-border-radius-bottomright: 10px;
    #mw-content {
-moz-border-radius-bottomleft: 10px;
        border-width: 0 1px 1px;
border-bottom-right-radius: 10px;
        border-radius: 0 0 3px 3px;
border-bottom-left-radius: 10px;
    }
}
 
@media screen and (max-width: 1099px) {
    #mw-content-block {
        background: var(--base-1);
    }
}
 
#menus-cover {
    background: var(--modal-overlay);  
    opacity: 1;
}
}
/*Right sidebar*/
 
/* --- GENERAL --- */
 
.mw-body h2,
.mw-body .mw-parser-output h1:after,
.mw-body .mw-parser-output h2:after {
border-color: var(--accent-2);
}
 
@media screen and (min-width:851px) {
.color-middle-container,
    .ts-inner {
        max-width: 118rem;
    }
}
 
/* --- TOP BAR --- */
 
@media screen and (max-width: 850px) {
#p-logo-text {
top: 1em;
}
}
 
#simpleSearch #searchButton,
#simpleSearch #mw-searchButton{
    height: 2.1em;
    opacity: .6;
}
 
/* --- 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 {
#mw-related-navigation .sidebar-chunk {
color:white;
    background: 0;
background: rgba(0,0,0,0.8);
    border: 0;
border:1;
    padding: 0;
border-color:black;
}
color:white;
 
border-radius: 10px;
#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);
}
}


/* Logo image border */
#mw-site-navigation .sidebar-chunk h3:empty {
#p-logo {
display: none
     background: rgba(0,0,0,0.8);
}
border:1;
 
border-color:black;
#personal .dropdown h3 {
color:white;
    margin: 0 0 0.5em;
border-radius: 10px;
    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);
}
}
 
 
/* --- 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;
}
}


/* unvisited link */
.sidebar-collapsible.open+.sidebar-collapsible-content {
a:link {
display: block;
  color: #5EBCFF;
}
}


/* visited link */
/* --- FOOTER --- */
a:visited {
 
  color: #0094FF;
.mw-footer-container {
    color: var(--contrast-1);
}
}


/* mouse over link */
.mw-footer-container a,
a:hover {
.mw-footer-container a:visited {
  color: red;
    color: var(--link);
}
}


/* selected link */
.mw-footer-container a:hover,
a:active {
.mw-footer-container a:visited:hover {
  color: blue;
    color: var(--link-hover);
}
}


/* Background Image */
/* --- TOOL ICONS --- */
#mw-content-container {
.skin-timeless .mw-portlet.tools-inline li.selected a {
     background: url('https://static.miraheze.org/idleonwiki/9/9f/Background_Beach.png') no-repeat center center fixed;
    color: var(--contrast-1);
     -webkit-background-size: cover;
}
     -moz-background-size: cover;
.skin-timeless .mw-portlet.tools-inline a,
     -o-background-size: cover;
.skin-timeless #mw-indicator-mw-helplink a,
     background-size: cover;
.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;
}
}

Latest revision as of 04:49, 6 August 2024

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

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

#mw-header-container{
	background: var(--base-0);
    color: var(--contrast-1); 
}

#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;
    }
}

@media screen and (max-width: 1099px) {
    #mw-content-block {
        background: var(--base-1);
    }
}

#menus-cover { 
    background: var(--modal-overlay); 
    opacity: 1;
}

/* --- GENERAL --- */

.mw-body h2,
.mw-body .mw-parser-output h1:after, 
.mw-body .mw-parser-output h2:after {
	border-color: var(--accent-2);
}

@media screen and (min-width:851px) {
	.color-middle-container,
    .ts-inner {
        max-width: 118rem;
    }
}

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

@media screen and (max-width: 850px) {
	#p-logo-text {
		top: 1em;
	}
}

#simpleSearch #searchButton,
#simpleSearch #mw-searchButton{
    height: 2.1em;
    opacity: .6;
}

/* --- 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);
	}
}


/* --- 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 --- */

.mw-footer-container {
    color: var(--contrast-1);
}

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

.mw-footer-container a:hover,
.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;
}
Retrieved from "https://idleon.wiki/wiki/index.php?title=MediaWiki:Timeless.css&oldid=78227"