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 .errorbox, .warningbox, .successbox, // anon talk page message alert .usermessage { box-shadow: @box-shadow; }
.errorbox { background-color: var(--errorbox-bg); border-color: var(--errorbox-border); }
.warningbox, .usermessage { background-color: var(--warningbox-bg); border-color: var(--warningbox-border); }
.successbox { background-color: var(--successbox-bg); border-color: var(--successbox-border); }
// "(Redirected from X)"
- contentSub,
- contentSub2 {
color: var(--byline-color); }
.catlinks { background: var(--body-light); border: 1px solid var(--body-dark); padding: 8px 15px; box-shadow: @box-shadow; li { border-color: var(--body-mid); } }
// img background in pages
- file img,
table.filehistory img { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAIElEQVQ4jWNoaGj4jw8TAgyjBgwLAwgpIGTBqAHDwgAA83w9rjOB4XgAAAAASUVORK5CYII=) repeat; }
// 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
- pagehistory {
ul { list-style: none; margin-left: 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
- 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.75em; }
}
// auto section edit summaries .autocomment, .autocomment a, .autocomment a:visited { 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); }
/* ------------------------
RevisionSlider ------------------------*/
.mw-ui { &-button { background-color: var(--ooui-normal); color: var(--ooui-text); border-color: var(--ooui-normal-border);
&:not(:disabled) { &:hover, &:active { background-color: var(--ooui-normal--hover); color: var(--ooui-text); border-color: var(--ooui-normal-border); }
&:focus { color: var(--ooui-text); }
// there's an override for it &:visited { color: var(--ooui-text); } } }
&-button&-progressive:not( :disabled ), &-button&-destructive:not( :disabled ) { color: #fff; }
// a lot of these need to be redefined since they have the same specificity // as the above &-button&-quiet, &-button&-quiet&-progressive, &-button&-quiet&-destructive { // background-color: transparent; color: var(--text-color); }
input[type='checkbox']:hover + &-button&-quiet, input[type='checkbox']:hover + &-button&-quiet&-progressive, input[type='checkbox']:hover + &-button&-quiet&-destructive, &-button&-quiet:hover, &-button&-quiet&-progressive:hover, &-button&-quiet&-destructive:hover { background-color: rgba(0,24,73,0.02745098); color: var(--text-color); border-color: transparent }
input[type='checkbox']:focus + &-button&-quiet, input[type='checkbox']:focus + &-button&-quiet&-progressive, input[type='checkbox']:focus + &-button&-quiet&-destructive, &-button&-quiet:focus, &-button&-quiet&-progressive:focus, &-button&-quiet&-destructive:focus { color: var(--text-color); // border-color: #3366cc; // box-shadow: inset 0 0 0 1px #3366cc,inset 0 0 0 2px #ffffff }
input[type='checkbox']:active + &-button&-quiet, input[type='checkbox']:active + &-button&-quiet&-progressive, input[type='checkbox']:active + &-button&-quiet&-destructive, &-button&-quiet:active, &-button&-quiet&-progressive:active, &-button&-quiet&-destructive:active { background-color: rgba(0,36,73,0.08235294); color: var(--text-color); border-color: #72777d; // box-shadow: none }
&-input { background-color: var(--ooui-input); color: var(--text-color); border-color: var(--ooui-input-border);
&:hover { border-color: var(--ooui-input-border--hover); }
&::placeholder { color: var(--byline-color); } } }