MediaWiki:Timeless.css
From Jenny Everywhere 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.
/* All CSS here will be loaded for users of the Timeless skin */
:root {
--background-color: #4a8db7; /*only visible if background image doesn't load. It is the shade of blue used in the background image*/
--accent-color-1: #4a8db7;
--accent-color-2: #000000;
--accent-contrast-1: #FFFFFF;
--font-family: 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif;
--border-thickness: 5px;
--border-no-style: var(--accent-color-1) var(--border-thickness);
--border-dashed: dashed var(--border-no-style);
--border-solid: solid var(--border-no-style);
--border: var(--border-dashed);
}
/* background */
@media screen {
#mw-content-container {
background: var(--background-color);
background-image: url(https://jennyeverywhere.wikifederation.org/images/JennyEverywhere_Images/b/b0/Site-background-light.png);
background-repeat: repeat;
border-bottom-color: var(--accent-color-1);
}
}
/* main content block */
@media screen {
#mw-content {
border: 5px solid var(--accent-color-2);
}
.mw-body h1.firstHeading,
.tools-inline li.selected,
.mw-body h2 {
border-bottom-color: var(--accent-color-1);
}
ul#filetoc, .toc, .toccolours, .mw-warning {
background: var(--accent-color-1);
border: var(--border);
color: var(--accent-contrast-1);
}
.toctogglelabel,
.toggleSymbol,
.tocnumber,
.toc a,
.toc a:visited,
.toc a:hover,
.toc a:active {
color: var(--accent-contrast-1);
}
.toggleSymbol:hover {
text-decoration: underline;
}
#catlinks {
display: inherit !important;
}
#content-bottom-stuff {
background: var(--accent-color-1);
color: var(--accent-contrast-1);
margin-left: var(--border-thickness);
}
#content-bottom-stuff a,
#content-bottom-stuff a:hover,
#content-bottom-stuff a:visited,
#content-bottom-stuff a:active,
#content-bottom-stuff a.new,
#content-bottom-stuff a.new:hover,
#content-bottom-stuff a.new:visited,
#content-bottom-stuff a.new:active {
color: var(--accent-contrast-1);
}
#content-bottom-stuff a:hover,
#content-bottom-stuff a.new:hover {
text-decoration: underline;
}
.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6, .mw-body dt {
font-family: var(--font-family);
}
}
/* top bar */
@media screen {
.color-left,
.color-middle,
.color-right {
background: var(--accent-color-1);
}
#p-logo-text a, #personal h2 {
font-family: var(--font-family);
}
}
/* navigation menus */
@media screen and (min-width: 1100px) {
#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk {
background: var(--accent-contrast-1);
outline: var(--border-solid);
margin-bottom: calc(1em + var(--border-thickness) * 2);
}
}
@media screen and (min-width: 851px) and (max-width: 1099px) {
#mw-site-navigation .sidebar-inner,
#mw-related-navigation .sidebar-inner {
background: var(--accent-contrast-1);
outline: var(--border-solid);
}
#mw-site-navigation .sidebar-chunk h2 span::before,
#mw-site-navigation .sidebar-chunk h2 span::after {
border-bottom-color: var(--accent-contrast-1);
}
#mw-related-navigation .sidebar-inner::before,
#mw-related-navigation .sidebar-inner::after {
border-bottom-color: var(--accent-contrast-1);
}
}
@media screen and (min-width: 851px) {
#personal .dropdown {
background: var(--accent-contrast-1);
outline: var(--border-solid);
}
#personal .dropdown label,
#personal .dropdown h3,
#personal .dropdown a,
#personal .dropdown a:visited,
#personal .dropdown a.new,
#personal .dropdown a.new:visited {
color: var(--accent-color-2);
}
#personal .dropdown::before,
#personal .dropdown::after {
border-bottom-color: var(--accent-contrast-1);
}
}
@media screen and (max-width: 850px) {
.sidebar-inner, .dropdown {
background: var(--accent-contrast-1);
outline: var(--border-solid);
}
}
@media screen {
#mw-site-navigation .sidebar-chunk a,
#mw-related-navigation .sidebar-chunk a,
#mw-site-navigation .sidebar-chunk a:visited,
#mw-related-navigation .sidebar-chunk a:visited,
#mw-site-navigation .sidebar-chunk label,
#mw-related-navigation .sidebar-chunk label,
#mw-site-navigation .sidebar-chunk h3,
#mw-related-navigation .sidebar-chunk h3,
#personal .dropdown label,
#personal .dropdown h3,
#personal .dropdown a,
#personal .dropdown a:visited,
#personal .dropdown a.new,
#personal .dropdown a.new:visited {
color: var(--accent-color-2);
}
}
/* infoboxes */
:root {
--pi-background: var(--accent-contrast-1);
--pi-secondary-background: var(--accent-color-1);
--pi-border-color: var(--accent-color-2);
}
.portable-infobox {
border: var(--border);
}
.skin-timeless #mw-content-text .pi-title {
background: var(--accent-color-1);
color: var(--accent-contrast-1);
text-align: center;
border-bottom: var(--border);
font-weight: 600;
}
.skin-timeless #mw-content-text .pi-header {
border-bottom: var(--border);
border-top: var(--border);
color: var(--accent-contrast-1);
}
.portable-infobox .pi-header a,
.portable-infobox .pi-header a:visited,
.portable-infobox .pi-header a.new,
.portable-infobox .pi-header a.new:visited {
color: var(--accent-contrast-1);
text-decoration: underline;
}
.portable-infobox .pi-header a:hover {
color: var(--accent-contrast-1);
text-decoration: none;
}
.pi-section-navigation .pi-section-tab.pi-section-active,
.pi-section-navigation .pi-section-tab.current,
.pi-media-collection .pi-tab-link.current {
color: var(--accent-contrast-1);
}
.portable-infobox .pi-data-value p,
.portable-infobox .pi-data-label p {
margin: auto 0;
}
.portable-infobox h2 {
border-bottom: none;
}
