MediaWiki:Common.css: Difference between revisions
Added lazy loading image background and first Token try |
First try of using the new tokens. Let's pray... |
||
| Line 8: | Line 8: | ||
#pagehistory li.selected { | #pagehistory li.selected { | ||
color: | color: var(--iopw-sys-palette-gray-70); | ||
} | } | ||
| Line 18: | Line 18: | ||
#pt-notifications-notice .mw-echo-notifications-badge::before, | #pt-notifications-notice .mw-echo-notifications-badge::before, | ||
#pt-notifications-alert .mw-echo-notifications-badge::before { | #pt-notifications-alert .mw-echo-notifications-badge::before { | ||
background-color: | background-color: var(--iopw-sys-palette-gray-99); | ||
} | } | ||
| Line 24: | Line 24: | ||
.mw-editsection { display:none!important; } | .mw-editsection { display:none!important; } | ||
.mw-editform .editOptions { | .mw-editform .editOptions { | ||
color: | color: var(--iopw-sys-palette-gray-99); | ||
background-color: #8a8a8a2b; | background-color: #8a8a8a2b; | ||
} | } | ||
| Line 33: | Line 33: | ||
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle { | .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle { | ||
background-color: | background-color: color-mix(in srgb, var(--iopw-sys-palette-gray-50) var(--iopw-sys-transparency-75), transparent); | ||
} | } | ||
| Line 41: | Line 41: | ||
.oo-ui-tagItemWidget.oo-ui-widget-enabled { | .oo-ui-tagItemWidget.oo-ui-widget-enabled { | ||
color: var(--iopw-sys-palette-gray-90); | |||
} | } | ||
.oo-ui-tagItemWidget.oo-ui-widget-enabled:hover { | .oo-ui-tagItemWidget.oo-ui-widget-enabled:hover { | ||
color: var(--iopw-sys-palette-gray-80); | |||
} | } | ||
.oo-ui-tagItemWidget { | .oo-ui-tagItemWidget { | ||
border: var(--iopw-sys-border-width) var(--iopw-sys-border-style) var(--iopw-sys-palette-gray-50); | |||
} | } | ||
| Line 59: | Line 59: | ||
.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title { | .mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title { | ||
color: | color: var(--iopw-sys-palette-gray-90); | ||
} | } | ||
.mw-rcfilters-ui-filterTagMultiselectWidget-views-select { | .mw-rcfilters-ui-filterTagMultiselectWidget-views-select { | ||
background-color: | background-color: color-mix(in srgb, var(--iopw-sys-palette-gray-90) var(--iopw-sys-transparency-75), transparent); | ||
} | } | ||
.rcfilters-container .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button { | .rcfilters-container .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button { | ||
background-color: | background-color: var(--iopw-sys-palette-primary-darker); | ||
color: | color: var(--iopw-sys-palette-on-primary); | ||
border: none; | border: none; | ||
text-shadow: none; | text-shadow: none; | ||
| Line 74: | Line 74: | ||
.tabstabber > .tabber ul.tabbernav li a:link { | .tabstabber > .tabber ul.tabbernav li a:link { | ||
background-color: | background-color: var(--iopw-sys-palette-surface-dim); | ||
color: | color: var(--iopw-sys-palette-primary); | ||
} | } | ||
.tocnumber { | .tocnumber { | ||
color: var(--iopw-sys-palette-gray-99); | |||
} | } | ||
.toctogglelabel { | .toctogglelabel { | ||
color: var(--iopw-sys-palette-primary-darker); | |||
} | } | ||
.references-section h2:last-child { | .references-section h2:last-child { | ||
display: none; | |||
} | } | ||
| Line 294: | Line 294: | ||
polygon { | polygon { | ||
stroke-width: 3pt; | stroke-width: 3pt; | ||
fill-opacity: | fill-opacity: var(--iopw-sys-transparency-50); | ||
} | } | ||
.graph-orange { | .graph-orange { | ||
| Line 316: | Line 316: | ||
.charactertabber { | .charactertabber { | ||
width: 100%; | width: 100%; | ||
border-bottom: | border-bottom: var(--iopw-ref-border-width-thick) var(--iopw-ref-border-style) var(--iopw-sys-palette-gray-50); | ||
} | } | ||
.charactertabber td { | .charactertabber td { | ||
padding: | padding: 0.5rem; | ||
background-color: | background-color: var(--iopw-sys-palette-gray-50); | ||
font-weight: bold; | font-weight: bold; | ||
opacity: 0.45; | opacity: 0.45; | ||
| Line 332: | Line 332: | ||
.charactertabber td.active { | .charactertabber td.active { | ||
background-color: | background-color: var(--iopw-sys-palette-primary); | ||
font-weight: bold; | font-weight: var(--iopw-sys-font-weight-bold); | ||
color: | color: var(--iopw-sys-palette-on-surface); | ||
opacity: 1; | opacity: 1; | ||
} | } | ||
| Line 362: | Line 362: | ||
.hoc-matrix .hoc-matrix-element.hoc-matrix-element-type-0 { | .hoc-matrix .hoc-matrix-element.hoc-matrix-element-type-0 { | ||
background-color: var(--iopw-sys-palette-gray-50); | |||
} | } | ||
.hoc-matrix.chipcolor-blue .hoc-matrix-element.hoc-matrix-element-type-1 { | .hoc-matrix.chipcolor-blue .hoc-matrix-element.hoc-matrix-element-type-1 { | ||
background-color: var(--gfl-sys-palette-hoc-chip-blue); | |||
} | } | ||
.hoc-matrix.chipcolor-blue .hoc-matrix-element.hoc-matrix-element-type-2 { | .hoc-matrix.chipcolor-blue .hoc-matrix-element.hoc-matrix-element-type-2 { | ||
background-color: var(--gfl-sys-palette-hoc-chip-blue-alt); | |||
} | } | ||
.hoc-matrix.chipcolor-orange .hoc-matrix-element.hoc-matrix-element-type-1 { | .hoc-matrix.chipcolor-orange .hoc-matrix-element.hoc-matrix-element-type-1 { | ||
background-color: var(--gfl-sys-palette-hoc-chip-orange); | |||
} | } | ||
.hoc-matrix.chipcolor-orange .hoc-matrix-element.hoc-matrix-element-type-2 { | .hoc-matrix.chipcolor-orange .hoc-matrix-element.hoc-matrix-element-type-2 { | ||
background-color: var(--gfl-sys-palette-hoc-chip-orange-alt); | |||
} | } | ||
| Line 388: | Line 388: | ||
.upgradeablestattable .header { | .upgradeablestattable .header { | ||
color: | color: var(--iopw-sys-palette-on-primary); | ||
font-size: 110%; | font-size: 110%; | ||
background-color: | background-color: var(--iopw-sys-palette-primary); | ||
text-align: center; | text-align: center; | ||
padding: 5px; | padding: 5px; | ||
| Line 990: | Line 990: | ||
/* standard link colors */ | /* standard link colors */ | ||
.mw-body a, .mw-body a.extiw { color: | .mw-body a, .mw-body a.extiw { color: var(--iopw-sys-palette-primary); } /* normal unvisited links */ | ||
.mw-body a.external { color: | .mw-body a.external { color: var(--iopw-sys-palette-primary); } /* normal unvisited links */ | ||
.mw-body a:visited, .mw-body a.external:visited, .mw-body a.extiw:visited { color: | .mw-body a:visited, .mw-body a.external:visited, .mw-body a.extiw:visited { color: var(--iopw-sys-palette-primary-darker); } /* visited links */ | ||
.mw-body a.new { color: | .mw-body a.new { color: var(--iopw-sys-palette-primary-lighter); } /* new links */ | ||
.mw-body a.extiw, .mw-body a.external { | .mw-body a.extiw, .mw-body a.external { | ||
background-position: center right; | background-position: center right; | ||
