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: #bbb;
     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: white;
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: white;
     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: #8080803b;
     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: #f5f5f5;
  color: var(--iopw-sys-palette-gray-90);
}
}


.oo-ui-tagItemWidget.oo-ui-widget-enabled:hover {
.oo-ui-tagItemWidget.oo-ui-widget-enabled:hover {
color: #e4e4e4;
  color: var(--iopw-sys-palette-gray-80);
}
}


.oo-ui-tagItemWidget {
.oo-ui-tagItemWidget {
border: 1px solid #777;
  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: #ededed;
     color: var(--iopw-sys-palette-gray-90);
}
}


.mw-rcfilters-ui-filterTagMultiselectWidget-views-select {
.mw-rcfilters-ui-filterTagMultiselectWidget-views-select {
     background-color: #e3e3e380;
     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: #edb23a;
     background-color: var(--iopw-sys-palette-primary-darker);
     color: #4E443C;
     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: #4E443C;
     background-color: var(--iopw-sys-palette-surface-dim);
     color: #F0b000;
     color: var(--iopw-sys-palette-primary);
}
}


.tocnumber {
.tocnumber {
color: white;
  color: var(--iopw-sys-palette-gray-99);
}
}


.toctogglelabel {
.toctogglelabel {
    color: #dbba6c;
  color: var(--iopw-sys-palette-primary-darker);
}
}


.references-section h2:last-child {
.references-section h2:last-child {
display: none;
  display: none;
}
}


Line 294: Line 294:
polygon {
polygon {
   stroke-width: 3pt;
   stroke-width: 3pt;
   fill-opacity: 0.5;
   fill-opacity: var(--iopw-sys-transparency-50);
}
}
.graph-orange {
.graph-orange {
Line 316: Line 316:
.charactertabber {
.charactertabber {
   width: 100%;
   width: 100%;
   border-bottom: 2px solid #808080;
   border-bottom: var(--iopw-ref-border-width-thick) var(--iopw-ref-border-style) var(--iopw-sys-palette-gray-50);
}
}


.charactertabber td {
.charactertabber td {
   padding: 8px;
   padding: 0.5rem;
   background-color: #808080;
   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: #f0b000;
   background-color: var(--iopw-sys-palette-primary);
   font-weight: bold;
   font-weight: var(--iopw-sys-font-weight-bold);
   color: white;
   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: #888;
  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: #6c6cdd;
  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: #4c4c79;
  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: #dd786c;
  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: #79644c;
  background-color: var(--gfl-sys-palette-hoc-chip-orange-alt);
}
}


Line 388: Line 388:


.upgradeablestattable .header {
.upgradeablestattable .header {
   color: #322300;
   color: var(--iopw-sys-palette-on-primary);
   font-size: 110%;
   font-size: 110%;
   background-color: #f0b000;
   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: #FFCC00; } /* normal unvisited links */
.mw-body a, .mw-body a.extiw { color: var(--iopw-sys-palette-primary); } /* normal unvisited links */
.mw-body a.external  { color: #FFCC00; } /* normal unvisited links */
.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: #EEAA00; } /* visited links */
.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: #DD0000; } /* new links */
.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;