MediaWiki:Timeless.css: Difference between revisions
From Sherlock Holmes Encyclopaedia
Content deleted Content added
No edit summary |
No edit summary |
||
| (88 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* All CSS here will be loaded for users of the Timeless skin */ |
/* All CSS here will be loaded for users of the Timeless skin */ |
||
/** General styling **/ |
/** General styling **/ |
||
body { |
body { |
||
| Line 10: | Line 11: | ||
background-size: cover !important; |
background-size: cover !important; |
||
background-attachment: fixed !important; } |
background-attachment: fixed !important; } |
||
/* Icons */ |
|||
/* Taken from Zelda Wiki [ https://zeldawiki.wiki/wiki/MediaWiki:Timeless.css ] */ |
|||
@media screen and (max-width: 850px) { |
|||
#site-navigation h2 { |
|||
background-image: url("https://static.miraheze.org/softcellwiki/b/b1/Wiki_Icon_Timeless_Menu_Large_Dark.svg"); } |
|||
#site-tools h2 { |
|||
background-image: url("https://static.miraheze.org/softcellwiki/b/b6/Wiki_Icon_Timeless_Gear_Large_Dark.svg"); } |
|||
#user-tools h2 { |
|||
background-image: url("https://static.miraheze.org/softcellwiki/e/e3/Wiki_Icon_Timeless_User_Large_Dark.svg"); } |
|||
} |
|||
@media screen and (min-width: 851px) { |
|||
#personal h2 { |
|||
background-image: url("https://static.miraheze.org/softcellwiki/4/48/Wiki_Icon_Timeless_User_Dark.svg"); } |
|||
} |
|||
.tools-inline li[id^='ca-nstab-'] a { |
|||
background-image: url("https://static.miraheze.org/softcellwiki/4/44/Wiki_Icon_Timeless_Page_Dark.svg"); } |
|||
#ca-talk a { |
|||
background-image: url("https://static.miraheze.org/softcellwiki/4/48/Wiki_Icon_Timeless_Talk_Dark.svg"); } |
|||
#ca-watch a { |
|||
background-image: url("https://static.miraheze.org/softcellwiki/a/a9/Wiki_Icon_Timeless_Star_Dark.svg"); } |
|||
#ca-unwatch a { |
|||
background-image: url("https://static.miraheze.org/softcellwiki/5/5e/Wiki_Icon_Timeless_Star_Filled_Dark.svg"); } |
|||
.tools-inline li a { |
|||
background-image: url("https://static.miraheze.org/softcellwiki/0/0a/Wiki_Icon_Timeless_Page_Misc_Dark.svg"); } |
|||
#ca-edit a, .client-js #ca-ve-edit a, .mw-editsection { |
|||
background-image: url("https://static.miraheze.org/softcellwiki/e/eb/Wiki_Icon_Timeless_Pencil_Dark.svg"); } |
|||
.client-js #ca-edit a { |
|||
background-image: url("https://static.miraheze.org/softcellwiki/7/7c/Wiki_Icon_Timeless_Pencil_Source_Dark.svg"); } |
|||
#ca-viewsource a { |
|||
background-image: url("https://static.miraheze.org/softcellwiki/7/72/Wiki_Icon_Timeless_Brackets_Dark.svg"); } |
|||
#ca-history a { |
|||
background-image: url("https://static.miraheze.org/softcellwiki/b/bb/Wiki_Icon_Timeless_Clock_Dark.svg"); } |
|||
#ca-more span { |
|||
background-image: url("https://static.miraheze.org/softcellwiki/8/88/Wiki_Icon_Timeless_Gear_Dark.svg"); } |
|||
.dropdown-toggle:after, |
|||
#user-tools h2:after, |
|||
.sidebar-chunk h2:after, |
|||
#mw-site-navigation h2:after, |
|||
#mw-related-navigation h2:after { |
|||
background-image: url("https://static.miraheze.org/softcellwiki/2/29/Wiki_Icon_Timeless_Arrow_Down_Dark.svg"); } |
|||
#t-contributions a { |
|||
background-image: url("https://static.miraheze.org/softcellwiki/d/d3/Wiki_Icon_Timeless_Puzzle_Dark.svg"); } |
|||
/** Banner (search and user toolbar) **/ |
|||
#mw-header-container { |
|||
color: #000; |
|||
background: #826249; } |
|||
#mw-header-hack { |
|||
box-shadow: none; } |
|||
.color-left, .color-middle, .color-right { |
|||
background: #826249; } |
|||
/* Title in banner */ |
|||
#p-logo-text { |
|||
margin-top: 10px; |
|||
font-weight: bold; } |
|||
#p-logo-text a { |
|||
color: #000 !important; |
|||
text-decoration: none; |
|||
font-family: 'Volkhov', serif; } |
|||
/** Changes on mobile **/ |
|||
@media only screen and (max-width: 440px) { |
|||
#personal-extra { |
|||
top: 0.2em; } |
|||
#personal-extra ul { |
|||
margin: 0.5em 0 !important; } |
|||
#personal-extra #pt-notifications-notice { |
|||
margin-right: 0; } |
|||
#user-tools h2, .sidebar-chunk h2 { |
|||
width: 27px !important; |
|||
height: 27px !important; |
|||
top: 0.5em !important; } |
|||
#p-logo-text { |
|||
margin-top: 2px; } |
|||
#p-search { |
|||
margin-top: -1em; } |
|||
} |
|||
@media only screen and (max-width:440px) and (min-width:385px) { |
|||
#p-logo-text { |
|||
margin-top: 3px; |
|||
left: 4em; |
|||
font-size: 85%; } |
|||
} |
|||
@media only screen and (max-width:385px) { |
|||
#personal-extra ul { |
|||
margin: 0.7em 0 !important; } |
|||
#user-tools h2, .sidebar-chunk h2 { |
|||
top: 0.7em !important; } |
|||
#p-logo-text { |
|||
position: absolute; |
|||
margin: 0; |
|||
width: 150px !important; |
|||
font-size: 85%; |
|||
text-align: center; } |
|||
#p-logo-text a.long { |
|||
line-height: 1; } |
|||
#p-search { |
|||
margin-top: unset; } |
|||
} |
|||
/* Username */ |
|||
#personal h2 { |
|||
font-family: 'Volkhov', serif; } |
|||
/* User dropdown */ |
|||
.dropdown { |
|||
background: #6F4E96 !important; |
|||
border: none !important; } |
|||
.dropdown::before, #personal .dropdown::after { /* Arrows */ |
|||
border-bottom: 11px solid #6F4E96 !important; } |
|||
/** Search bar **/ |
|||
#simpleSearch { |
|||
background: #800649; |
|||
border: solid 2px #826249; } |
|||
#searchInput { |
|||
color: #000; } |
|||
.suggestions .suggestions-results { |
|||
background-color: #5F0A3B; |
|||
border: 2px solid #826249; } |
|||
.suggestions .suggestions-result { |
|||
color: #E6E6E6; } |
|||
.suggestions .suggestions-special { |
|||
background-color: #1D0832; |
|||
border: 2px solid #826249; } |
|||
.suggestions .suggestions-special .special-query, .suggestions-special .special-label { |
|||
color: #000 !important; } |
|||
.suggestions .suggestions-result-current { /* Hover */ |
|||
background-color: #826249; } |
|||
#searchButton, #mw-searchButton { /* Icon */ |
|||
background-color: transparent !important; |
|||
filter: invert(1); } |
|||
/* Logo */ |
|||
.mw-wiki-logo.fallback { |
|||
background-color: #1d0832; |
|||
border: 2px solid #826249; |
|||
padding: 13px; } |
|||
/* Sidebars */ |
|||
/** Desktop styling **/ |
|||
@media only screen and (min-width: 1100px) { |
|||
#mw-site-navigation .sidebar-chunk, #mw-related-navigation .sidebar-chunk { |
|||
background: #dec4af; |
|||
border: 2px solid #826249; } |
|||
#mw-related-navigation { |
|||
width: 14em; |
|||
flex: 0 0 14em; } |
|||
} |
|||
/** Headings **/ |
|||
.sidebar-inner h3, #personal-inner h3 { |
|||
font-family: 'Volkhov', serif; |
|||
font-size: 115% !important; |
|||
border-color: #826249 !important; |
|||
padding-bottom: 5px !important; |
|||
margin-bottom: 0.6em !important; } |
|||
/** Dropdown headings **/ |
|||
@media only screen and (max-width: 1109px) and (min-width: 850px) { |
|||
#mw-site-navigation h2, #mw-related-navigation h2 { |
|||
font-family: 'Volkhov', serif; } |
|||
#mw-header-nav-hack { |
|||
border-top: solid 2px transparent; |
|||
background: #1D0832; } |
|||
#mw-site-navigation .sidebar-chunk, #mw-related-navigation .sidebar-chunk { |
|||
border: none !important; } |
|||
} |
|||
/** Dropdowns content **/ |
|||
@media only screen and (max-width: 1109px) { |
|||
#mw-site-navigation .sidebar-inner, #mw-related-navigation .sidebar-inner { |
|||
border: none; |
|||
background: #4D3667; |
|||
box-shadow: none; |
|||
padding: 1.5em; |
|||
line-height: 0.7; } |
|||
#mw-site-navigation .sidebar-chunk h2 span::before, #mw-site-navigation .sidebar-chunk h2 span::after { |
|||
top:33px; |
|||
border-bottom:10px solid #79DEFF; } |
|||
#mw-related-navigation .sidebar-inner::before,#mw-related-navigation .sidebar-inner::after { |
|||
top:-10px; |
|||
border-bottom-color:#79DEFF !important; } |
|||
} |
|||
/* User dropdown */ |
|||
#personal .dropdown { |
|||
border: none; |
|||
background: #6f4e96; |
|||
box-shadow: none; |
|||
padding: 1.5em; } |
|||
#personal .dropdown::after { |
|||
border-bottom-color: #79DEFF; |
|||
top: -10px; } |
|||
#personal .dropdown .mw-portlet-body { |
|||
margin-bottom: 0 !important; } |
|||
/* Content */ |
/* Content */ |
||
#mw-content-container { |
#mw-content-container { |
||
background: #170926; /* This also hides black block on backdrop? */ |
background: #170926; /* This also hides black block on backdrop? */ |
||
border-bottom: solid |
border-bottom: solid 2px #826249; } |
||
#mw-content { |
#mw-content { |
||
background: #ffe1cf; |
background: #ffe1cf; |
||
border: |
border: 2px solid #826249; |
||
border-top: none; |
border-top: none; |
||
box-shadow: none; } |
box-shadow: none; } |
||
| Line 220: | Line 30: | ||
/* #content-bottom-stuff - category block */ |
/* #content-bottom-stuff - category block */ |
||
} |
} |
||
/** Headings **/ |
|||
/* Page title */ |
|||
.mw-body h1.firstHeading { |
|||
border-color: #826249; |
|||
margin: 0 0 0.3em; |
|||
padding-bottom: 5px; } |
|||
.mw-body h1 { |
|||
font-family: 'Volkhov', serif; } |
|||
/* Heading general */ |
|||
.mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6, .mw-body dt { |
|||
font-family: 'Helvetica Neue','Helvetica','Arial',sans-serif; } |
|||
.mw-body h2, /* Normal heading */ |
|||
#mw-subcategories h2, #mw-pages h2, #mw-category-media h2 { /* Content headings in categories */ |
|||
border-color: #826249; |
|||
padding-bottom: 3px; } |
|||
.mw-body h3 { |
|||
margin: 0.5em 0 0.5em; |
|||
font-weight: bold; } |
|||
/** Divider **/ |
|||
hr { |
|||
border-color: #826249; } |
|||
/** Page tabs **/ |
|||
.tools-inline li.selected { /* Selected tab */ |
|||
border-bottom-color: #826249; } |
|||
.tools-inline li.selected a { |
|||
color: #79DEFF; } /* Normal color */ |
|||
/** Footer **/ |
|||
.mw-footer-container { |
|||
border: none; |
|||
box-shadow: none; |
|||
font-size: 90%; } |
|||
@media only screen and (min-width: 850px) { |
|||
.mw-footer-container { |
|||
line-height: 1.2; } |
|||
} |
|||
.mw-footer-container a { /* Links color */ |
|||
color: #79DEFF; } |
|||
.mw-footer-container a:visited { |
|||
color: #03BBF8; } |
|||
/* ToC */ |
/* ToC */ |
||
#toc { |
#toc { |
||
background: # |
background: #dbab88; |
||
border: |
border: 1px solid #826249 !important; |
||
border-width: 1px; |
border-width: 1px; |
||
padding: 1em 1.3em; } |
padding: 1em 1.3em; } |
||
| Line 287: | Line 54: | ||
filter: invert(1); } |
filter: invert(1); } |
||
/* Sidebars */ |
|||
/********* Portable infobox theme *********/ |
|||
/** Desktop styling **/ |
|||
.portable-infobox { |
|||
@media only screen and (min-width: 1100px) { |
|||
--pi-border-color: #754836; |
|||
#mw-site-navigation .sidebar-chunk, #mw-related-navigation .sidebar-chunk { |
|||
border: 2px solid #754836; |
|||
background: #dec4af; |
|||
border-radius: 8px; |
|||
border: 2px solid #826249; } |
|||
padding: 6px; |
|||
#mw-related-navigation { |
|||
font-size: 12px; |
|||
width: 14em; |
|||
background-color: #cfa07c; |
|||
flex: 0 0 14em; } |
|||
line-height: 1.5; |
|||
width: 22em; |
|||
} |
} |
||
#mw-header-hack { |
|||
.portable-infobox .pi-data, |
|||
box-shadow: none; } |
|||
.portable-infobox .pi-group { |
|||
.color-left, .color-middle, .color-right { |
|||
border: "333333; |
|||
background: #826249; } |
|||
#catlinks-sidebar {display: none !important;} |
|||
#catlinks {display: block !important;} |
|||
#mw-normal-catlinks { |
|||
border : 1px dashed #aaaaaa !important; |
|||
background : #f0b599 !important; |
|||
width : 98% !important; |
|||
margin : 0 auto !important; |
|||
padding : 10px !important; |
|||
} |
} |
||
a.new:hover, .new a:hover, a.new:visited, .new a:visited { |
|||
.portable-infobox .pi-header { |
|||
color: #7d593c; |
|||
background: #754836; |
|||
opacity:0.8; |
|||
text-align: center; |
|||
color: black; |
|||
} |
} |
||
.mw-plusminus-neg { |
|||
.portable-infobox .pi-navigation { |
|||
color: #FF0000; |
|||
} |
|||
font-size: 12px; |
|||
#searchButton, #mw-searchButton { |
|||
text-align: center; |
|||
border: 0 !important; |
|||
text-color: darkred; |
|||
left: 38vw; |
|||
right: 0; |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
} |
} |
||
#mw-footer-container a:hover { |
|||
.portable-infobox .pi-title { |
|||
color: #ffff33; |
|||
background:#754836; |
|||
} |
|||
opacity:0.9; |
|||
#mw-footer-container a:visited { |
|||
color:black; |
|||
color: #A1805F; |
|||
border-color: var(--theme-box-border-color-inner); |
|||
border-radius: var(--theme-box-border-radius-inner); |
|||
text-align: center; |
|||
} |
} |
||
/* unvisited link */ |
|||
.portable-infobox .pi-title { |
|||
a:link { |
|||
font-weight: bold; |
|||
color: #874118; |
|||
box-shadow: 0 0 6px rgba(0,0,0,0.20); |
|||
} |
|||
font-size: 15px; |
|||
padding: 6px 3px; |
|||
/* visited link */ |
|||
line-height: 1.2; |
|||
a:visited { |
|||
text-align: center; |
|||
color: #a1562a; |
|||
} |
|||
/* mouse over link */ |
|||
a:hover { |
|||
color: hotpink; |
|||
} |
|||
/* selected link */ |
|||
a:active { |
|||
color: blue; |
|||
} |
|||
/** Banner (search and user toolbar) **/ |
|||
#mw-header-container:before { |
|||
content:""; |
|||
position:absolute; |
|||
width: 100%; |
|||
height:100%; |
|||
top:0; |
|||
pointer-events:none; |
|||
z-index:-1; |
|||
filter: blur(1px); |
|||
background:#232741; |
|||
background-image: url(https://static.miraheze.org/sherlockholmeswiki/8/8a/Art-crew-london-mood-wallpaper-preview.jpg); |
|||
opacity: 0.7; |
|||
background-repeat:no-repeat; |
|||
background-attachment: fixed !important; |
|||
} |
} |
||
Revision as of 15:28, 21 June 2024
/* All CSS here will be loaded for users of the Timeless skin */
/** General styling **/
body {
color: #000000;
background: #800649; } /* affects vertical scrolbar and footer background */
/* Backdrop */
#mw-content-container {
background-color:#fcc8a9 !important;
background-size: cover !important;
background-attachment: fixed !important; }
/* Content */
#mw-content-container {
background: #170926; /* This also hides black block on backdrop? */
border-bottom: solid 2px #826249; }
#mw-content {
background: #ffe1cf;
border: 2px solid #826249;
border-top: none;
box-shadow: none; }
/** Changes for smaller screens **/
@media only screen and (max-width: 1100px) {
#mw-content { /* Content area */
border-right: none;
border-left: none; }
#mw-content-block {
background: #1D0832 }
/* #content-bottom-stuff - category block */
}
/* ToC */
#toc {
background: #dbab88;
border: 1px solid #826249 !important;
border-width: 1px;
padding: 1em 1.3em; }
.toctitle {
border-color: #826249 !important; }
.toctogglelabel {
color: #79DEFF !important; }
.tocnumber {
color: #E9E6E8 !important; }
/** Image thumbnail (|thumb|) **/
.thumbinner {
background: transparent;
border: none;
box-shadow: none; }
.thumbinner .thumbimage {
border: none; }
div.magnify a { /* Icon */
filter: invert(1); }
/* Sidebars */
/** Desktop styling **/
@media only screen and (min-width: 1100px) {
#mw-site-navigation .sidebar-chunk, #mw-related-navigation .sidebar-chunk {
background: #dec4af;
border: 2px solid #826249; }
#mw-related-navigation {
width: 14em;
flex: 0 0 14em; }
}
#mw-header-hack {
box-shadow: none; }
.color-left, .color-middle, .color-right {
background: #826249; }
#catlinks-sidebar {display: none !important;}
#catlinks {display: block !important;}
#mw-normal-catlinks {
border : 1px dashed #aaaaaa !important;
background : #f0b599 !important;
width : 98% !important;
margin : 0 auto !important;
padding : 10px !important;
}
a.new:hover, .new a:hover, a.new:visited, .new a:visited {
color: #7d593c;
}
.mw-plusminus-neg {
color: #FF0000;
}
#searchButton, #mw-searchButton {
border: 0 !important;
left: 38vw;
right: 0;
margin-left: auto;
margin-right: auto;
}
#mw-footer-container a:hover {
color: #ffff33;
}
#mw-footer-container a:visited {
color: #A1805F;
}
/* unvisited link */
a:link {
color: #874118;
}
/* visited link */
a:visited {
color: #a1562a;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
/** Banner (search and user toolbar) **/
#mw-header-container:before {
content:"";
position:absolute;
width: 100%;
height:100%;
top:0;
pointer-events:none;
z-index:-1;
filter: blur(1px);
background:#232741;
background-image: url(https://static.miraheze.org/sherlockholmeswiki/8/8a/Art-crew-london-mood-wallpaper-preview.jpg);
opacity: 0.7;
background-repeat:no-repeat;
background-attachment: fixed !important;
}
/* [[Category:Styling pages]] */
