MediaWiki:Common.less/interface.less

/* =====================

     Common MediaWiki
  elements inside .mw-body
  ===================== */

root {

--errorbox-bg: @bridesmaid; --errorbox-border: @flamingo; --warningbox-bg: @half-dutch; --warningbox-border: @supernova; --successbox-bg: @frost; --successbox-border: @lima; }

// core mw messagebox .mw-message-box-error, .errorbox, .mw-message-box-warning, .warningbox, .mw-message-box-success, .successbox, // anon talk page message alert .usermessage { box-shadow: @box-shadow; }

.mw-message-box-error, .errorbox { background-color: var(--errorbox-bg); border-color: var(--errorbox-border); }

.mw-message-box-warning, .warningbox, .usermessage { background-color: var(--warningbox-bg); border-color: var(--warningbox-border); }

.mw-message-box-success, .successbox { background-color: var(--successbox-bg); border-color: var(--successbox-border); }

.catlinks { background: var(--body-light); border: 1px solid var(--body-dark); padding: 8px 15px; box-shadow: @box-shadow;

li { border-color: var(--body-mid); } }

// checkered background in file pages .filehistory a img,

1. file img {

background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 0h8v16h8V8H0z' opacity='.13'/%3E%3C/svg%3E") repeat; }

1. file img:hover {

background: none; }

// Prevents undesired background showing when next to expanded toc .mw-highlight { background: none;

.linenos { background-color: var(--mw-code-background-color); // line number color: var(--byline-color); }

// line number hover a:hover .linenos, .hll a .linenos { color: var(--text-color); } }

.mw-content-ltr.mw-highlight-lines pre, .mw-content-ltr.content .mw-highlight-lines pre { box-shadow: inset 2.75em 0 0 var(--mw-code-background-color); }

// page history

1. pagehistory {

ul { list-style: none; margin: 0; }

li { border: 1px solid transparent; padding: 1px 10px; margin: 2px 0;

&.selected { background-color: var(--body-light); color: inherit; border: 1px dashed var(--body-border); outline: none; } } }

// Sticky compare rev

1. mw-history-compare > div:first-of-type {

position: -webkit-sticky; position: sticky; top: 0; background-color: var(--body-main); border-bottom: 1px solid @BODY_DARK; padding: .25em 0;

.wgl-stickyheader & { top: 2.5rem; // = height of stickyheader } }

// auto section edit summaries .autocomment, .autocomment a, .autocomment a:visited { color: var(--link-color); }

// revdeleted logs: "(log details removed)" li span.deleted, span.history-deleted { color: var(--byline-color); }

// redlinked contribs page for users without edits .mw-usertoollinks-contribs-no-edits, .mw-usertoollinks-contribs-no-edits:visited { color: var(--redlink-color); }

.CategoryTreeToggle { color: var(--link-color); }

/* --------------------------------------

     fix section heading being hidden
     underneath sticky header
  -------------------------------------- */

// technique from <https://css-tricks.com/hash-tag-links-padding/>

body.wgl-stickyheader.action-view .mw-headline:target::before { display: block; content: ; margin-top: -3rem; height: 3rem; visibility: hidden; pointer-events: none; }

/* ------------------------

      MultimediaViewer
  ------------------------*/

// main lightbox .mw-mmv-post-image { color: var(--text-color); background-color: var(--body-main); }

// metadata panel .mw-mmv-image-metadata { border-top-color: var(--body-mid); background-color: var(--body-light); }

// download box and etc .mw-mmv-dialog, .mw-mmv-dialog .mw-mmv-dialog-down-arrow, .mw-mmv-options-dialog .mw-mmv-dialog-down-arrow { background-color: var(--body-light); box-shadow: none; }

// activation box header .mw-mmv-options-enable-alert { background-color: var(--body-light); color: var(--text-color); }

// use consistent text color for all for simplicity .mw-mmv-options-dialog-header, .mw-mmv-options-text-header, .mw-mmv-options-text-body,

// activation box .mw-mmv-options-enable-alert, // deactivation box .mw-mmv-options-dialog .mw-mmv-disable-confirmation .mw-mmv-options-dialog-header, .mw-mmv-options-dialog .mw-mmv-disable-confirmation .mw-mmv-options-text-header { color: var(--text-color); }

/* ------------------------

      RevisionSlider
  ------------------------*/

.mw-revslider-container { border-color: var(--sidebar); }

.mw-revslider-slider-wrapper { border-top-color: var(--sidebar); }

/* ------------------------

    mediawiki.ui and codex
  ------------------------*/

// theres a lot of nesting here that could be reduced, but could be a hassle .mw-ui-button { background-color: var(--ooui-normal); color: var(--ooui-text); border-color: var(--ooui-normal-border); }

.cdx, .mw-ui { &-button:not( :disabled ), // this for mwui &-button:enabled, // and this for codex &-button.cdx-button--fake-button--enabled { background-color: var(--ooui-normal); color: var(--ooui-text); border-color: var(--ooui-normal-border);

&:focus:not(:active):not(.cdx-button--is-active) { color: var(--ooui-text); border-color: var(--ooui-accent); box-shadow: inset 0 0 0 1px var(--ooui-accent),inset 0 0 0 2px #fff; }

&:hover, &:active { background-color: var(--ooui-normal--hover); color: var(--ooui-text); border-color: var(--ooui-normal-border); }

// theres an override for it &:visited { color: var(--ooui-text); }

&.cdx-button--weight-primary.cdx-button--action-progressive, &.mw-ui-progressive:not(:disabled) { background-color: var(--ooui-progressive); color: #fff; border-color: var(--ooui-progressive);

&:hover { background-color: var(--ooui-progressive--hover); border-color: var(--ooui-progressive--hover); }

&:focus { box-shadow: inset 0 0 0 1px var(--ooui-accent),inset 0 0 0 2px #fff; }

&:active, &.is-on { background-color: var(--ooui-progressive--hover); border-color: var(--ooui-progressive--hover); box-shadow: none; } } }

// a lot of these need to be redefined since they have the same specificity // as the above &-button&-button--action-destructive:not( :disabled ) { color: #fff; }

&-button&-button--weight-quiet, &-button&-button--weight-quiet&-button--action-progressive, &-button&-button--weight-quiet&-button--action-destructive { // background-color: transparent; color: var(--text-color); }

&-checkbox__input:enabled { &:checked, &:indeterminate { & + .cdx-checkbox__icon { background-color: var(--ooui-progressive); border-color: var(--ooui-progressive); }

&:hover + .cdx-checkbox__icon { background-color: var(--ooui-progressive--hover); border-color: var(--ooui-progressive--hover); }

&:active + .cdx-checkbox__icon { background-color: var(--ooui-progressive--hover); border-color: var(--ooui-progressive--hover); box-shadow: inset 0 0 0 1px var(--ooui-progressive--hover); }

&:focus { &:not(:active) { background-color: var(--ooui-progressive--hover); border-color: var(--ooui-accent); box-shadow: inset 0 0 0 1px var(--ooui-accent), inset 0 0 0 2px #fff;

&:not(:hover) + .cdx-checkbox__icon { background-color: var(--ooui-progressive--hover); border-color: var(--ooui-accent); box-shadow: inset 0 0 0 1px var(--ooui-accent), inset 0 0 0 2px #fff; } } } }

&:hover + .cdx-checkbox__icon { border-color: var(--ooui-accent); }

&:active + .cdx-checkbox__icon { background-color: var(--ooui-progressive--hover); border-color: var(--ooui-progressive--hover); box-shadow: inset 0 0 0 1px var(--ooui-progressive--hover); } }

input[type='checkbox']:hover + &-button&-button--weight-quiet, input[type='checkbox']:hover + &-button&-button--weight-quiet&-button--action-progressive, input[type='checkbox']:hover + &-button&-button--weight-quiet&-button--action-destructive, &-button&-button--weight-quiet:hover, &-button&-button--weight-quiet&-button--action-progressive:hover, &-button&-button--weight-quiet&-button--action-destructive:hover { background-color: rgba(0,24,73,0.02745098); color: var(--text-color); border-color: transparent }

input[type='checkbox']:focus + &-button&-button--weight-quiet, input[type='checkbox']:focus + &-button&-button--weight-quiet&-button--action-progressive, input[type='checkbox']:focus + &-button&-button--weight-quiet&-button--action-destructive, &-button&-button--weight-quiet:focus, &-button&-button--weight-quiet&-button--action-progressive:focus, &-button&-button--weight-quiet&-button--action-destructive:focus { color: var(--text-color); // border-color: #3366cc; // box-shadow: inset 0 0 0 1px #3366cc,inset 0 0 0 2px #fff }

input[type='checkbox']:active + &-button&-button--weight-quiet, input[type='checkbox']:active + &-button&-button--weight-quiet&-button--action-progressive, input[type='checkbox']:active + &-button&-button--weight-quiet&-button--action-destructive, &-button&-button--weight-quiet:active, &-button&-button--weight-quiet&-button--action-progressive:active, &-button&-button--weight-quiet&-button--action-destructive:active { background-color: rgba(0,36,73,0.08235294); color: var(--text-color); border-color: #72777d; // box-shadow: none } }

.mw-ui-input:not(:disabled), .cdx-text-input__input:enabled { background-color: var(--ooui-input); color: var(--text-color); border-color: var(--ooui-input-border);

&:hover { border-color: var(--ooui-input-border--hover); }

&:focus { border-color: var(--ooui-accent); box-shadow: inset 0 0 0 1px var(--ooui-accent); }

&::placeholder { color: var(--byline-color); } }

/* ------------------------

        Redirects
  ------------------------*/

// convert to mask .mw-content-ltr .redirectText li { &:first-child { padding: 0; background: 0;

&::before { content:; background: currentcolor; .mask("/images/rss/Redirect-arrow.svg"); display: inline-block; width: 47px; height: 20px; } } }