MediaWiki:Timeless.css
From Portals of Phereon Wiki
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.
/* Warning: Imports must go in Common.css since it loads first in a combined stylesheet */
/* COLORS ASSIGNMENTS */
body.skin-timeless {
--link: var(--accent-dark);
--link-alt: var(--link);
--link-dark: var(--accent-darker);
--body-color: var(--primary-darker);
--bg: var(--tertiary-darkish);
--toolbar-color: var(--primary);
--toolbar-color2: var(--accent-dark);
--content-color: var(--secondary);
--sidebar-color: var(--secondary-desaturated);
--sidebar-color2: var(--secondary-desaturatedish);
--border-color: var(--gray);
--border-mid: var(--accent-dark);
--border-left: var(--border-mid);
--border-right: var(--border-mid);
--footer-border: var(--accent-dark);
--search-color: var(--sidebar-color);
--heading-border: var(--accent-saturatedish);
--highlight: var(--accent-saturateder);
--mp-border: var(--tertiary-lightish);
color: var(--text);
background-color: var(--body-color);
}
/* Wordmark */
#p-logo-text a {
font-family: 'Linux Libertine','Times New Roman','Liberation Serif','Nimbus Roman','Noto Serif','Times',serif;
}
/* Logo adjustment */
#p-logo {
height: 105px;
}
.mw-wiki-logo, .mw-wiki-logo.fallback {
background-size: auto;
background-position: center 6px;
}
/* Edit icon override */
#ca-edit#ca-edit a {
background-image: url(/w/skins/Timeless/resources/images/pencil-grey.png?23255);
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 height=%2220%22 width=%2220%22%3E%3Cpath d=%22M12.879 2.165l-9.465 9.471 4.95 4.95 9.465-9.471zm0 2.829L15 7.115l-6.636 6.643-2.121-2.122zM6.95 18H2v-4.95z%22 opacity=%22.33%22/%3E%3C/svg%3E");
border: 0;
background-color: transparent;
background-repeat: no-repeat;
background-position: left top;
display: inline-block;
margin-bottom: -0.35em;
padding: 0 2px 0 20px
}
/* More reliable content box */
@media screen and (min-width: 851px) {
#mw-content-container,
#mw-content-block {
position: relative;
}
}
@media screen and (min-width:1100px) {
#mw-content-container {
background-color: var(--bg);
background-image: linear-gradient(transparent, transparent 1900px, var(--bg) 2000px, transparent 2000px),
url(https://static.miraheze.org/phereonwiki/7/79/Background.jpeg);
background-repeat: no-repeat;
background-position: center top;
border-bottom-color: var(--footer-border);
}
#mw-site-navigation .sidebar-chunk, #mw-related-navigation .sidebar-chunk {
background-color: var(--sidebar-color);
border-color: var(--border-color);
border-radius: 4px;
}
#mw-content {
border-radius: 0 0 6px 6px;
}
#mw-content-container {
min-height:calc(100vh - 150px);
}
}
@media screen and (min-width:2000px) {
#mw-content-container {
background-image:linear-gradient(transparent,transparent calc(100vw - 100px),var(--bg) 100vw,transparent 100vw),
url(https://static.miraheze.org/phereonwiki/7/79/Background.jpeg);
background-size:100% auto;
}
}
@media screen and (max-width:1099px) {
.sidebar-chunk .sidebar-inner {
background-color:var(--sidebar-color)!important;
border-color: var(--border-color) !important;
border-radius: 4px;
color: var(--text);
}
.sidebar-chunk {
color: var(--text-alt);
}
#mw-content-container {
padding-bottom:unset;
}
#mw-content {
min-height:calc(100vh - 250px);
}
}
#mw-content {
background-color: var(--content-color);
border-color: var(--border-color)!important;
}
#mw-header-container,#mw-header-nav-hack {
background-color: var(--toolbar-color);
color: var(--text-alt);
}
#mw-header-nav-hack {
border-top-color: var(--toolbar-color2);
}
#mw-header-hack {
background-color: var(--toolbar-color)!important;
}
.color-middle {
background-color: var(--border-mid);
}
.color-left {
background-color: var(--border-left);
}
.color-right {
background-color: var(--border-right);
}
#simpleSearch {
background-color: var(--search-color);
border-color: var(--body-color);
border-radius: 17px;
}
#searchInput:focus {
outline: none;
border-radius: 17px;
box-shadow: 0px 0px 3px 1px var(--highlight);
}
#searchInput::placeholder {
color: var(--text);
opacity: 0.8;
}
#searchButton, #mw-searchButton {
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2221.333%22 height=%2221.333%22 viewBox=%220 0 20 20%22%3E %3Cg fill=%22%23111%22 stroke=%22none%22 transform=%22translate%28-121 -16.362%29%22%3E %3Cpath d=%22M129.5 17.363a7.501 7.501 0 1 0 5.303 12.803 7.501 7.501 0 0 0-5.304-12.803zm.066 3a4.5 4.5 0 0 1 3.115 1.316 4.5 4.5 0 0 1 0 6.365 4.5 4.5 0 0 1-6.363 0 4.5 4.5 0 0 1 0-6.365 4.5 4.5 0 0 1 3.248-1.316z%22/%3E %3Crect width=%223%22 height=%229%22 x=%2272.49%22 y=%22114.15%22 ry=%221.5%22 transform=%22rotate%28-45%29%22/%3E %3C/g%3E %3C/svg%3E");
opacity: 0.6;
}
.mw-parser-output a.external,a {
color: var(--link);
}
a:hover,a:visited {
color: var(--link-alt);
}
.mw-parser-output a.extiw, .mw-parser-output a.extiw:active {
color: var(--link-alt);
}
.mw-parser-output a.external {
color: var(--link-alt);
}
a:hover {
text-decoration: underline;
}
#mw-page-header-links a:hover,#p-logo-text a {
text-decoration: inherit;
}
#p-logo-text a {
color: var(--text-alt);
text-align: center !important;
}
#mw-page-header-links li.selected,.mw-body h1.firstHeading {
border-color: var(--heading-border);
}
.mw-echo-notifications-badge:before {
opacity: 0.8 !important;
filter: invert(100%);
}
#mw-page-header-links li.selected a {
color: var(--link-dark);
}
#personal .dropdown {
background-color: var(--sidebar-color) !important;
border-color: var(--border-color) !important;
color: var(--text);
}
#personal h2 {
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Cpath fill=%22%23fff%22 d=%22M3.64 9.453c-1.756 2.388-1.955 4.995-1.226 6.723.489 1.179 1.179 1.87 1.988 2.289.792.428 1.749.517 2.598.52h6.324c.92 0 1.85-.208 2.649-.674.799-.467 1.459-1.198 1.798-2.288.49-1.548.266-4.027-1.478-6.455-.008.012-.021.019-.03.03A7.5 7.5 0 0 1 10 12.984a7.5 7.5 0 0 1-6.36-3.53z%22 transform=%22scale%281.00079%29%22/%3E %3Cpath fill=%22%23fff%22 d=%22M10.008.992a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9z%22/%3E %3C/svg%3E") !important;
opacity: 0.87;
}
#personal h2:after,
#mw-site-navigation h2:after,
#mw-related-navigation h2:after {
background-image:linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2222%22 height=%2216%22%3E %3Cpath fill=%22%23fff%22 d=%22M15.5 6l-5 5-5-5z%22/%3E %3C/svg%3E");
opacity: 0.87;
}
@media screen and (max-width: 850px){
#site-tools h2 {
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2226.667%22 height=%2226.667%22 viewBox=%220 0 25.02 25.02%22%3E %3Cpath fill=%22%23fff%22 stroke=%22none%22 d=%22M12.099 1a1.64 1.64 0 0 0-1.644 1.645v1.07A9.043 9.043 0 0 0 7.732 4.84l-.744-.744a1.639 1.639 0 0 0-2.325 0l-.581.582a1.64 1.64 0 0 0 0 2.325l.75.75a9.043 9.043 0 0 0-1.12 2.702H2.646A1.64 1.64 0 0 0 1 12.099v.822c0 .91.733 1.644 1.644 1.644h1.07a9.043 9.043 0 0 0 1.125 2.723l-.758.758a1.642 1.642 0 0 0 0 2.327l.581.58a1.64 1.64 0 0 0 2.325 0l.766-.765a9.043 9.043 0 0 0 2.7 1.119v1.068c0 .91.734 1.644 1.645 1.644h.822a1.64 1.64 0 0 0 1.644-1.644v-1.07a9.043 9.043 0 0 0 2.704-1.114l.763.763a1.642 1.642 0 0 0 2.326 0l.581-.581a1.642 1.642 0 0 0 0-2.327l-.762-.763a9.043 9.043 0 0 0 1.13-2.718h1.068a1.64 1.64 0 0 0 1.644-1.644v-.822a1.64 1.64 0 0 0-1.644-1.644h-1.07a9.043 9.043 0 0 0-1.114-2.704l.748-.748a1.64 1.64 0 0 0 0-2.325l-.58-.582a1.642 1.642 0 0 0-2.327 0l-.747.747a9.043 9.043 0 0 0-2.72-1.13V2.645A1.64 1.64 0 0 0 12.921 1h-.822zm.53 6.577a4.814 4.932 0 0 1 4.813 4.933 4.814 4.932 0 0 1-4.813 4.932 4.814 4.932 0 0 1-4.814-4.932 4.814 4.932 0 0 1 4.814-4.933z%22/%3E %3C/svg%3E");
opacity: 0.87;
}
#site-navigation h2 {
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2226.667%22 height=%2226.667%22 viewBox=%220 0 25.02 25.02%22%3E %3Crect width=%2223.018%22 height=%225.004%22 x=%221.001%22 y=%2219.015%22 fill=%22%23fff%22 stroke=%22none%22 ry=%221.648%22/%3E %3Crect width=%2223.018%22 height=%225.004%22 x=%221.001%22 y=%2210.008%22 fill=%22%23fff%22 stroke=%22none%22 ry=%221.648%22/%3E %3Crect width=%2223.018%22 height=%225.004%22 x=%221.001%22 y=%221.001%22 fill=%22%23fff%22 stroke=%22none%22 ry=%221.648%22/%3E %3C/svg%3E");
opacity: 0.87;
}
#user-tools h2:after, .sidebar-chunk h2:after {
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2222%22 height=%2216%22%3E %3Cpath fill=%22%23fff%22 d=%22M15.5 6l-5 5-5-5z%22/%3E %3C/svg%3E");
opacity: 0.87;
}
}
.oo-ui-icon-bell,.mw-ui-icon-bell:before {
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E bell %3C/title%3E%3Cg fill=%22%23fff%22%3E %3Cpath d=%22M16 7a5.38 5.38 0 0 0-4.46-4.85C11.6 1.46 11.53 0 10 0S8.4 1.46 8.46 2.15A5.38 5.38 0 0 0 4 7v6l-2 2v1h16v-1l-2-2zm-6 13a3 3 0 0 0 3-3H7a3 3 0 0 0 3 3z%22/%3E %3C/g%3E%3C/svg%3E");
opacity: 0.87;
}
.oo-ui-icon-tray,.mw-ui-icon-tray:before {
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E tray %3C/title%3E%3Cg fill=%22%23fff%22%3E %3Cpath d=%22M3 1a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm14 12h-4l-1 2H8l-1-2H3V3h14z%22/%3E %3C/g%3E%3C/svg%3E");
opacity: 0.87;
}
.tools-inline li:hover {
border-bottom-color: var(--accent-lighter);
}
hr {
border-color: var(--mp-border,black);
}
.mw-body .mw-parser-output h1:after,
.mw-body .mw-parser-output h2:after {
border-bottom: solid 2px var(--secondary-dark, #c8ccd1);
}
