MediaWiki:Timeless.css
From Sherlock Holmes Encyclopaedia
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* 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; }
/* 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: #000000 !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: #333333; }
#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 */
#mw-content-container {
background: #170926; /* This also hides black block on backdrop? */
border-bottom: solid 3px #826249; }
#mw-content {
background: #ffe1cf;
border: 3px 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 */
}
/** Headings **/
/* Page title */
.mw-body h1.firstHeading {
border-color: #000000;
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: #000000;
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 {
background: #dbab88;
border: 2px 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); }
/********* Portable infobox theme *********/
.portable-infobox {
--pi-border-color: #754836;
border: 2px solid #754836;
border-radius: 8px;
padding: 6px;
font-size: 12px;
background-color: #cfa07c;
line-height: 1.5;
width: 22em;
}
.portable-infobox .pi-data,
.portable-infobox .pi-group {
border: "333333;
}
.portable-infobox .pi-header {
background: #754836;
opacity:0.8;
text-align: center;
color: black;
}
.portable-infobox .pi-navigation {
background-color: #171717;
font-size: 12px;
text-align: center;
text-color: darkred;
}
.portable-infobox .pi-title {
background:#754836;
opacity:0.9;
color:black;
border: 1px solid;
border-color: var(--theme-box-border-color-inner);
border-radius: var(--theme-box-border-radius-inner);
text-align: center;
}
.portable-infobox .pi-title {
font-weight: bold;
box-shadow: 0 0 6px rgba(0,0,0,0.20);
font-size: 15px;
padding: 6px 3px;
line-height: 1.2;
text-align: center;
}
ol.references {margin: 0.3em 0 0 1.5em !important;}
#catlinks-sidebar {display: none !important;}
#catlinks {display: block !important;}
#mw-normal-catlinks {
border : 1px dashed #aaaaaa !important;
background : #e1dac8 !important;
width : 83% !important;
margin : 0 auto !important;
padding : 10px !important;
}
/* [[Category:Styling pages]] */