mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-09-23 10:19:05 +00:00
6f98cc6460
Remove direct usage of CSS variables in Minerva, and replace them with codex design tokens again. Document this decision in the original ADR Note: there are still a small number of CSS variables in use, including most notably the --color-link-red fix, which broke when I removed it, but this change takes care of all the ones that could be easily replaced Bug: T363743 Change-Id: I7d3a9dceb908167078987de1733774c8bd4bea2f
100 lines
2.2 KiB
Plaintext
100 lines
2.2 KiB
Plaintext
@import 'minerva.variables.less';
|
|
|
|
.editor-textarea() {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
// Note if a textarea has a .mw-ui-input class, this may be overridden
|
|
padding: 10px @padding-content 10px @padding-content;
|
|
// stylelint-disable-next-line plugin/no-unsupported-browser-features
|
|
resize: none;
|
|
}
|
|
|
|
.clearfix() {
|
|
display: block;
|
|
content: '';
|
|
clear: both;
|
|
}
|
|
|
|
// Mixins for history, contributions, watchlist and recent changes' changes list
|
|
.changeslist-minor-edit() {
|
|
background-color: @background-color-interactive;
|
|
position: absolute;
|
|
bottom: 10px;
|
|
left: 85px;
|
|
border-radius: @border-radius-base;
|
|
padding: 0 6px 1px;
|
|
font-size: @font-size-minerva-small;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.changeslist-make-row-linkable() {
|
|
position: absolute;
|
|
right: 0;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
color: transparent;
|
|
z-index: @z-index-above-content;
|
|
}
|
|
|
|
.changeslist-meta() {
|
|
position: absolute;
|
|
left: 0;
|
|
font-size: @font-size-minerva-small;
|
|
}
|
|
|
|
.changeslist-row() {
|
|
font-size: 0.85em;
|
|
list-style: none;
|
|
position: relative;
|
|
min-height: 80px;
|
|
width: 100%;
|
|
/* !important to override the too-specific rule .content ol li, .content ul li */
|
|
margin: 0 !important;
|
|
padding: 12px 0;
|
|
border-bottom: @border-width-base @border-style-base @border-color-muted;
|
|
|
|
&::before,
|
|
&::after {
|
|
.clearfix();
|
|
}
|
|
}
|
|
|
|
.changeslist-row-item() {
|
|
color: #72777d;
|
|
margin: 0.5em 0;
|
|
padding-left: 85px;
|
|
font-size: @font-size-minerva-small;
|
|
}
|
|
|
|
.changeslist-header() {
|
|
background-color: @background-color-interactive;
|
|
color: @color-subtle;
|
|
display: block;
|
|
width: 100%;
|
|
padding: 0.5em 16px 0.4em;
|
|
font-size: 0.85em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
// Generic mixin for applying styles to text that accompanies/adds context to workflows
|
|
.secondary-text() {
|
|
font-size: @font-size-minerva-small;
|
|
color: #72777d;
|
|
margin-top: 0.5em;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.night-mode-invert-image() {
|
|
filter: invert( 1 ) hue-rotate( 180deg );
|
|
}
|
|
|
|
/** This mixin should only be used where it's safe to do so. It should not be applied
|
|
to content which may have important information. */
|
|
.night-mode-strip-all-colors-when-safe() {
|
|
background: inherit !important;
|
|
color: inherit !important;
|
|
/* If a border is defined retain it but make it black. If no border this won't do anything. */
|
|
border-color: @border-color-subtle !important;
|
|
}
|