MediaWiki:Timeless.css
From Come Together 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{
--color-primary: #9c9cdd;
--color-secondary: #4b4b5a;
--color-tertiary: #5f5f78;
--text-color: #efeff2;
--text-faded-color: rgb(190 190 190);
--text-link-color: #dc96e1;
--text-link-visited-color: #aa74ad;
--text-link-hover-color: #a26fa6;
--text-link-visited-hover-color: var(--text-link-hover-color);
--text-link-new-color: #ff7d7d;
--text-link-new-visited-color: #eb5050;
--background-color: #1e1e2d;
--content-background-color: #323241;
--content-border-color: #c8c8d7;
--sidebar-background-color: #414150;
--sidebar-border-color: #a5a5b4;
--search-background-color: rgb(235 235 240);
--search-border: solid 2px rgb(185 185 190);
--transition-default: 0.15s cubic-bezier(0,0,0,1);
/* Infobox */
--ib-background-color: var(--color-secondary);
--ib-text-color: var(--text-color);
--ib-border: 2px solid white;
--ib-title-background-color: #A6786F;
--ib-data-background-color: #59413C;
}
body{
background-color: var(--background-color);
color: var(--text-color);
}
.error{
color: #ff6d6d;
}
#mw-header-container{
background: var(--background-color);
color: var(--text-color);
}
@media screen and (min-width: 851px) {
#mw-header-container {
color: var(--text-color);
}
#mw-content-wrapper{
margin-top: 1.5em;
}
}
.color-middle, .color-right, .color-left{
background: var(--text-color);
}
#p-logo-text a{
color: var(--text-color);
}
@media screen and (max-width: 850px) {
#user-tools h2::after, .sidebar-chunk h2::after {
left: 27px;
}
}
#simpleSearch {
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
background: var(--search-background-color);
border: var(--search-border);
}
.search-types .current a {
color: var(--text-color);
}
.oo-ui-textInputWidget.oo-ui-indicatorElement > .oo-ui-indicatorElement-indicator{
max-height: none;
}
#mw-content-container {
border-bottom: solid 4px var(--text-color);
}
#mw-content{
background: var(--content-background-color);
border: solid var(--content-border-color) 2px;
}
#mw-content-container {
background: url(resources/assets/background.png) center center / cover no-repeat fixed;
}
@media screen and (max-width: 1099px) {
#mw-content {
border: none;
}
}
#mw-related-navigation .sidebar-chunk, #mw-site-navigation .sidebar-chunk{
background: var(--sidebar-background-color);
border: var(--sidebar-border-color) solid 2px;
border-width: 2px;
}
@media screen and (min-width: 1340px) {
#mw-related-navigation .sidebar-chunk{
margin: 1.575em 0;
}
}
#mw-site-navigation .sidebar-chunk h3, #mw-related-navigation .sidebar-chunk h3{
background-color: var(--color-tertiary);
padding: 0 0 0.15em 2px;
}
@media screen and (min-width: 851px) and (max-width: 1099px) {
#mw-header-nav-hack {
border-top: solid 2px var(--text-color);
background: var(--color-secondary);
}
#mw-related-navigation .sidebar-chunk, #mw-site-navigation .sidebar-chunk {
background: none;
border: none;
}
#mw-wrapper .dropdown-active .pokey, #mw-wrapper .dropdown-active .dropdown, #mw-wrapper .dropdown-active .sidebar-inner {
background: var(--sidebar-background-color);
border: solid 2px var(--sidebar-border-color);
}
}
#mw-site-navigation .sidebar-chunk h2 span::before, #personal .dropdown::before, #mw-related-navigation .sidebar-inner::before {
border-bottom: 10px solid var(--sidebar-border-color);
}
#mw-site-navigation .sidebar-chunk h2 span::after, #personal .dropdown::after, #mw-related-navigation .sidebar-inner::after {
border-bottom-color: var(--sidebar-background-color);
}
a, .mw-parser-output a.extiw, .mw-parser-output a.extiw:active, .mw-parser-output a.external{
color: var(--text-link-color);
transition: var(--transition-default);
}
a:visited, .mw-parser-output a.external:visited {
color: var(--text-link-visited-color);
}
a:hover, .mw-parser-output a.external:hover {
color: var(--text-link-hover-color);
}
a:visited:hover, .mw-parser-output a.external:visited:hover {
color: var(--text-link-visited-hover-color);
}
.mw-parser-output a.extiw:visited, .mw-parser-output a.extiw:visited {
color: var(--text-link-color);
}
.mw-parser-output a.extiw:hover, .mw-parser-output a.extiw:hover {
color: var(--text-link-hover-color);
}
.mw-parser-output a.extiw:visited:hover, .mw-parser-output a.extiw:active:visited:hover {
color: var(--text-link-hover-color);
}
a.new, .new a {
color: var(--text-link-new-color);
}
a.new:visited, .new a:visited {
color: var(--text-link-new-visited-color);
}
.mw-body h1.firstHeading {
border-bottom: solid 4px var(--color-primary);
}
.mw-body .mw-heading2, .mw-body h2 {
border-bottom: solid 2px var(--text-color);
}
.mw-editsection {
background-position: left center;
padding-left: 16px;
padding-top: 0;
background-size: 14px;
}
.mw-indicator {
margin: 0 0 0 0.25em;
background-color: var(--color-tertiary);
padding: 4px;
}
#mw-indicator-mw-helplink a {
color: var(--text-color);
}
#p-views li, #p-more li, #p-namespaces li {
display: inline-flex;
padding: 3px 5px 6px 5px;
background-color: var(--color-secondary);
}
.tools-inline li.selected {
border-bottom-color: var(--color-primary);
border-bottom: solid 3px var(--text-color);
}
.tools-inline li{
transition: var(--transition-default);
}
.tools-inline li a {
color: var(--text-color);
}
.tools-inline li.selected a {
color: var(--text-color);
}
.tools-inline li a:hover {
color: lightgray;
}
.client-js #ca-ve-edit a, .client-js #ca-edit a, #ca-history a, .tools-inline li[id^='ca-nstab-'] a, #ca-talk a, #ca-watch a, #ca-addsection a, #ca-viewsource a, #t-contributions a{
background-position: left center;
}
@media screen and (min-width: 851px){
.client-js #ca-ve-edit a, .client-js #ca-edit a, #ca-history a, #ca-talk a, #ca-addsection a, #ca-viewsource a, #t-contributions a{
padding: 0 2px 0 24px;
}
.tools-inline li[id^='ca-nstab-'] a{
padding: 0 2px 0 22px;
}
}
@media screen and (max-width: 850px) {
#ca-more span {
max-height: 17px;
}
#ca-more::after, #ca-languages::after {
margin-left: 0;
}
.dropdown-toggle::after {
height: 16px;
background-position: center 1.5px;
background-size: 24px;
}
}
.mw-ui-button:not(:disabled):hover {
color: var(--text-color);
}
.oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-top > .oo-ui-menuLayout-content {
background: var(--color-secondary);
}
.oo-ui-labelWidget.oo-ui-inline-help {
color: var(--text-faded-color);
}
.oo-ui-tabSelectWidget-framed {
background-color: var(--content-background-color);
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget .oo-ui-labelElement-label {
color: var(--text-faded-color);
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
background-color: var(--color-secondary);
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected .oo-ui-labelElement-label {
border-bottom-color: #fff;
color: #fff;
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected:hover {
background-color: var(--color-tertiary);
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled:active {
background-color: rgb(125, 125, 140);
}
#preferences .mw-htmlform-submit-buttons {
background-color: var(--color-tertiary);
border-top: 2px solid var(--text-color);
margin: -1px 0 -1em 0;
}
div.editOptions {
background: var(--color-secondary);
color: var(--text-color);
}
.codeEditor-status {
background-color: var(--content-background-color);
color: var(--text-color);
}
.codeEditor-status .codeEditor-status-worker-cell.ace_gutter-cell {
color: var(--text-color);
}
.wikiEditor-ui-toolbar .booklet > .index > div {
color: #555555;
}.oo-ui-popupToolGroup-tools .oo-ui-tool-link .oo-ui-tool-title {
display: table-cell;
vertical-align: middle;
color: black;
}
.oo-ui-popupToolGroup-tools .oo-ui-tool-link .oo-ui-tool-title {
color: black;
}
#contentSub {
color: var(--text-faded-color);
}
.cdx-field:not(.cdx-field--disabled) .cdx-field__help-text {
color: var(--text-faded-color);
}
.mw-body-content .mw-number-text h3 {
color: var(--text-color);
}
.mw-number-text {
color: var(--text-faded-color);
}
.mw-rcfilters-ui-valuePickerWidget-title, .mw-rcfilters-ui-datePopupWidget-title, .mw-rcfilters-ui-changesLimitPopupWidget {
color: black;
}
.mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend, .mw-changeslist-legend, .mw-body .mw-search-profile-tabs, .mw-body fieldset#mw-searchoptions, .mw_metadata, .wikitable, .mw-datatable {
color: var(--text-color);
background: var(--color-secondary);
}
.wikitable > tr > th, .wikitable > * > tr > th {
background-color: var(--color-tertiary);
}
@media screen and (min-width: 851px) {
#personal .dropdown {
background: var(--sidebar-background-color);
border: solid var(--sidebar-border-color);
border-width: 2px;
}
}
@media screen and (max-width: 850px) {
.sidebar-inner, .dropdown {
border: solid var(--sidebar-border-color);
border-width: 2px;
background: var(--sidebar-background-color);
}
}
#menus-cover {
background: var(--color-secondary);
opacity: 0.75;
}
.oo-ui-icon-expand, .mw-ui-icon-expand:before {
background-image: url(data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 fill=%22white%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E expand %3C/title%3E%3Cpath d=%22m17.5 4.75-7.5 7.5-7.5-7.5L1 6.25l9 9 9-9z%22/%3E%3C/svg%3E);
}
.oo-ui-icon-collapse, .mw-ui-icon-collapse:before {
background-image: url(data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 fill=%22white%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E collapse %3C/title%3E%3Cpath d=%22m2.5 15.25 7.5-7.5 7.5 7.5 1.5-1.5-9-9-9 9z%22/%3E%3C/svg%3E);
}
.cdx-button:enabled:hover {
color: var(--text-color);
}
.oo-ui-window-content {
color: black;
}
.oo-ui-popupWidget-popup {
color: black;
}
.mw-plusminus-pos {
color: #3BAE5C;
}
.mw-plusminus-neg {
color: #CC0000;
}
@supports (-webkit-mask-image:none) or (mask-image:none) {
.mw-enhancedchanges-checkbox:not(:checked) + * .mw-enhancedchanges-arrow {
background-color: var(--text-faded-color);
transition: var(--transition-default);
}
}
@supports (-webkit-mask-image:none) or (mask-image:none) {
.mw-enhancedchanges-checkbox:checked + * .mw-enhancedchanges-arrow {
background-color: var(--text-faded-color);
transition: var(--transition-default);
}
}
.mw-datatable th {
background: var(--color-tertiary);
}
.mw-datatable td {
background-color: var(--color-secondary);
transition: var(--transition-default);
}
.mw-datatable tr:hover td {
background-color: rgb(95 95 110);
}
.toc {
background: var(--sidebar-background-color);
border: solid var(--sidebar-border-color);
}
.toctogglelabel {
color: var(--text-link-color);
}
.tocnumber {
color: var(--text-faded-color);
}
#mw-infoboxbuilder .oo-ui-menuLayout-content .oo-ui-panelLayout{
color: black;
}
.oo-ui-icon-info, .mw-ui-icon-info:before {
background-image: url(data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 fill=%22white%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E info %3C/title%3E%3Cpath d=%22M4 10a6 6 0 1 0 12 0 6 6 0 0 0-12 0m6-8a8 8 0 1 1 0 16 8 8 0 0 1 0-16m1 7v5H9V9zm0-1V6H9v2z%22/%3E%3C/svg%3E);
}
.mw-htmlform-ooui .mw-htmlform-matrix tbody tr:nth-child(even) td {
background-color: unset;
}
.mw-htmlform-ooui .mw-htmlform-matrix tbody tr:hover td {
background-color: var(--color-tertiary);
}
.oo-ui-icon-tray, .mw-ui-icon-tray:before {
background-image: url(data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 fill=%22white%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E tray %3C/title%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/svg%3E);
}
.oo-ui-icon-bell, .mw-ui-icon-bell:before {
background-image: url(data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 fill=%22white%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E bell %3C/title%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 3%22/%3E%3C/svg%3E);
}
.mw-echo-ui-crossWikiUnreadFilterWidget-subtitle {
color: var(--text-faded-color);
}
.mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-selected {
background-color: var(--color-tertiary);
color: var(--text-color);
}
.mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-selected.mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-highlighted {
background-color: var(--color-secondary);
color: var(--text-faded-color);
}
.oo-ui-optionWidget-selected .mw-echo-ui-pageNotificationsOptionWidget-label-count {
color: var(--text-color);
}
.mw-echo-ui-notificationsInboxWidget-toolbarWrapper {
background-color: var(--sidebar-background-color);
padding: 10px 10px 0 10px;
border: 1px solid var(--sidebar-border-color);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button {
background-color: var(--color-primary);
color: var(--text-color);
border-color: var(--color-primary);
}
#pagehistory li.selected {
background-color: var(--color-secondary);
color: var(--text-color);
}
.thumbinner {
background: var(--color-secondary);
color: var(--text-color);
}
ul#filetoc, .toc, .toccolours, .mw-warning {
background: var(--color-secondary);
border-width: 2px;
}
.mw_metadata th, .wikitable th {
background: var(--color-secondary);
color: var(--text-color);
}
.mw_metadata td {
background-color: var(--color-tertiary);
}
.mw-mmv-post-image {
color: var(--text-color);
background-color: var(--content-background-color);
}
.mw-mmv-image-metadata {
background-color: var(--background-color);
}
.portable-infobox {
background: var(--ib-background-color);
color: var(--ib-text-color);
border: var(--ib-border);
}
.portable-infobox .pi-title {
background-color: var(--ib-title-background-color);
font-weight: bold;
text-align: center;
}
.portable-infobox .pi-data {
background: var(--ib-data-background-color);
}
.license-messagebox {
background: var(--background-color);
border: solid var(--color-secondary);
border-width: 2px 2px 2px 8px;
padding: 12px;
}
.license-messagebox h2, .license-messagebox p {
color: var(--text-color);
margin: 0;
text-decoration: none;
border: none;
font-family: inherit;
}
.license-messagebox h2 {
font-weight: bold;
font-size: 16px;
margin-bottom: 2px;
}
.license-messagebox p {
font-size: 14px;
}
.ctw-panel {
background: #434351;
border: solid 2px rgb(100 100 120);
border-left: solid 4px var(--text-color);
border-right: solid 4px var(--text-color);
margin: 4px;
}
.ctw-panel h2, .ctw-panel p {
border-bottom: none;
margin: 0;
font-family: inherit;
}
.ctw-panel h2 {
background: #555566;
font-weight: 600;
font-size: 16pt;
padding: 6px;
}
.ctw-panel-content {
padding: 6px;
display: flow-root;
}
.mw-templatedata-doc-muted {
color: var(--text-faded-color);
}
.diff-deletedline .diffchange {
color: black;
}
.diff-addedline .diffchange {
color: black;
}
.mw-body li.gallerybox div.thumb {
background: var(--color-tertiary);
border: solid var(--sidebar-border-color);
}
