MediaWiki:Common.less/interface.less
Jump to navigation
Jump to search
/* =====================
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;
--vector-tab-background--hover: var(--body-light) !important;
--vector-tab-link-color: var(--link-color) !important;
}
// 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-border);
padding: 8px 15px;
box-shadow: @box-shadow;
li {
border-color: var(--body-mid);
}
}
// 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(--body-border);
}
// line number hover
a:hover .linenos,
.hll a .linenos {
color: var(--body-dark);
}
}
.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: 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.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
------------------------*/
.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);
border-color: var(--ooui-accent);
box-shadow: inset 0 0 0 1px var(--ooui-accent),inset 0 0 0 2px #fff;
}
// there's an override for it
&:visited {
color: var(--ooui-text);
}
}
&.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&-destructive:not( :disabled ) {
color: #fff;
}
&-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: #36c;
// box-shadow: inset 0 0 0 1px #36c,inset 0 0 0 2px #fff
}
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);
}
}
}
/* ------------------------
Redirects
------------------------*/
// convert to mask
.mw-content-ltr .redirectText li {
&:first-child {
padding: 0;
background: 0;
&::before {
content:'';
background: currentcolor;
.mask("filepath://Redirect-arrow.svg");
display: inline-block;
width: 47px;
height: 20px;
}
}
}
/* -------------------------------------------------------------
HEADER bits because I'm not sure where I can put this
------------------------------------------------------------ */
/* Search bar */
.vector-search-box-inner {
background: var(--body-main) !important;
box-shadow: inset 0 -7px 7px -7px rgba(0,0,0,0.15) !important;
}
/* "More" button */
.vector-menu-dropdown {
.vector-menu-heading {
color: var(--vector-tab-link-color) !important;
&:hover {
color: var(--vector-tab-link-color) !important;
}
&:focus {
color: var(--vector-tab-link-color) !important;
}
}
}
/* Sidebar */
.vector-menu-portal {
.vector-menu-heading {
color: var(--background-text-color) !important;
font-weight: bold !important;
background: none !important;
}
.vector-menu-content {
li {
a, a:visited {
color: var(--background-link-color) !important;
}
}
}
}