mediawiki-skins-MinervaNeue/resources/skins.minerva.base.styles/pageactions.less
Jan Drewniak 59fd0cd5dc Convert all color related Less variables to CSS custom properties
All colors used in Minerva are converted from Less variables
into CSS custom properties. A new file called CSSCustomProperties.less
is created in the skins.minerva.base.styles module to store
these custom properties and an ADR is provided on the rationale for
dropping support for browsers that don't support custom properties.

The new CSS custom properties follow Codex design token conventions
where possible (and noted when not).

Link colors are unique because their styles are defined in core,
so in that case the Less variables values are set to custom properties.
Those values are then fed back into MediaWiki core for core link
styling.

Also adds a temporary night-mode color palette under the
.skin-nightmode-1 class on the <html> element.

Bug: T356074
Change-Id: Ida1f14138f12bd3c600c264bde7b5100f9dbf4ff
2024-02-02 17:57:27 +00:00

98 lines
2.1 KiB
Plaintext

/* stylelint-disable selector-max-id */
@import '../../minerva.less/minerva.variables.less';
.heading-holder {
padding: @top-spacing-title-section 0 0;
position: relative;
.tagline {
color: var( --color-subtle );
font-size: @font-size-tag-line;
}
}
.page-heading {
margin-bottom: 12px;
}
// used to disable the languages icon.
.language-selector.disabled {
cursor: default;
opacity: 0.25;
}
#p-views {
position: relative;
}
.page-actions-menu {
box-sizing: border-box;
border-top: @border-width-base @border-style-base #eaecf0;
border-bottom: @border-subtle;
margin-top: -@border-width-base; // Offset top border.
}
.page-actions-menu__list {
display: flex;
height: @size-icon * 2;
justify-content: space-between;
}
.page-actions-menu__list-item {
display: flex;
justify-content: flex-end;
align-items: center;
min-width: 0;
overflow: hidden;
.cdx-button {
color: var( --color-subtle ) !important;
font-weight: 500;
}
}
// Layout for less than 5 items - one item at the beginning, rest at the end.
// |1-----2--3--4|
.page-actions-menu__list-item:first-child {
flex-grow: 1;
justify-content: flex-start;
.cdx-mixin-button-layout-flush( 'start', true );
}
// position the last icon with the edge of the content container
.page-actions-menu__list-item:last-child {
.cdx-mixin-button-layout-flush( 'end', true );
}
// Watchstar is hidden for anonymous no-js users
// While we could link the icon to the login/signup form, this is not
// a perfect experience and could be confusing.
// In JavaScript this icon will be converted to a watch icon and will point
// to a Call to action to sign up/login and explain why that's a good idea.
// Thus, anonymous users without JS will never see this icon.
// This is a small % of our users, so deemed okay.
.client-nojs {
.watch-this-article {
visibility: hidden;
}
.is-authenticated {
.watch-this-article {
visibility: visible;
}
}
}
// On small devices that don't support Javascript, hide the page actions bar
@media all and ( max-width: @width-breakpoint-mobile - 1 ) {
.client-nojs {
#p-views {
display: none;
}
.mw-first-heading {
border: 0;
}
}
}