MediaWiki:Common.less/interface.less: Difference between revisions

Jump to navigation Jump to search

MediaWiki:Common.less/interface.less (view source)

Revision as of 17:12, 17 October 2024

406 bytes removed ,  17 October
no edit summary
VisualWikitext
(Created page with "→‎===================== 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 {...")
 
No edit summary
Line 1:
/* ===================== 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,#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;}#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#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 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; } }}
/* =====================
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 mw.pages
.filehistory a img,
#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;
}
 
#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
#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 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("filepath://Redirect-arrow.svg");
display: inline-block;
width: 47px;
height: 20px;
}
}
}
Retrieved from "https://wiki2.runerealm.org/w/Special:MobileDiff/38835"

Navigation menu