mediawiki-skins-Citizen/skinStyles/extensions/Echo/ext.echo.special.less
alistair3149 c88df2d194
feat(tokens): deprecate old font-weight-semibold variables
Old variables are being deprecated to align naming convention with Codex.
They will be hard-deprecated on the next major Citizen version.
2024-10-23 17:34:41 -04:00

149 lines
3.3 KiB
Plaintext

/*
* Citizen
*
* SkinStyles for Extension:Echo
* Module: ext.echo.special
* Version: REL1_35 347c30e
*
* Date: 2023-06-29
*/
// Disable sticky header since it collides with Echo sticky header
#citizen-page-header-sticky-sentinel {
display: none;
}
/* mw.echo.ui.DatedSubGroupListWidget.less */
.mw-echo-ui-subGroupListWidget {
&-header-row {
// More aligned
display: flex;
align-items: center;
&-markAllReadButton {
// Revert responsive font size tweak from Echo
// As it breaks alignment
font-size: revert !important;
}
}
}
.mw-echo-ui-datedSubGroupListWidget {
.mw-body-content &-title {
margin: 0;
&-primary {
font-size: var( --font-size-small );
// Align with Citizen label styles
color: var( --color-subtle );
letter-spacing: 0.05em;
}
&-secondary {
color: var( --color-subtle );
}
}
}
/* mw.echo.ui.NotificationsInboxWidget.less */
.mw-echo-ui-notificationsInboxWidget {
max-width: none;
&-sidebar {
padding-top: var( --space-sm ); // align with toolbarWrapper
padding-right: var( --space-lg );
}
&-main {
&-toolbar-top {
margin-bottom: 0 !important;
.mw-echo-ui-notificationsInboxWidget-row {
display: table-row !important;
// Fix misalign
text-align: left;
}
}
.mw-echo-ui-notificationItemWidget {
border-radius: var( --border-radius-base );
}
}
&-toolbarWrapper {
max-width: ~'calc( 100vw - var(--padding-page) * 2 )';
height: auto;
padding: var( --space-sm ) 0;
// Mimic Citizen sticky header
margin: 0;
margin-bottom: var( --space-md );
overflow-x: auto;
background-color: var( --color-surface-0 );
filter: opacity( 0.9 );
-webkit-backdrop-filter: saturate( 50% ) blur( 16px );
backdrop-filter: saturate( 50% ) blur( 16px );
border-bottom: var( --border-width-base ) solid var( --border-color-base );
box-shadow: none;
}
}
.mw-echo-ui-notificationsInboxWidget-cell-placeholder,
.mw-echo-ui-notificationsInboxWidget-main-toolbar-settings,
.mw-echo-ui-notificationsInboxWidget-main-toolbar-pagination {
display: table-cell !important;
}
/* mw.echo.ui.PageNotificationsOptionWidget.less */
.mw-echo-ui-pageNotificationsOptionWidget {
&.oo-ui-optionWidget {
padding: var( --space-xs ) var( --space-sm );
border-radius: var( --border-radius-base );
&-highlighted {
color: var( --color-emphasized );
background-color: var( --color-surface-3 );
}
&-selected {
color: var( --color-progressive );
background-color: var( --background-color-progressive-subtle );
}
&-selected&-highlighted,
&-pressed&-highlighted {
color: var( --color-progressive--hover );
background-color: var( --background-color-progressive-subtle );
}
}
&-label-count {
color: var( --color-subtle );
background-color: var( --color-surface-3 );
.oo-ui-optionWidget-selected & {
color: var( --color-progressive );
}
}
}
/* mw.echo.ui.CrossWikiUnreadFilterWidget.less */
.mw-echo-ui-crossWikiUnreadFilterWidget {
// HACK: Make it sticky
position: -webkit-sticky;
position: sticky;
top: var( --space-sm );
padding: var( --space-md );
border-color: var( --border-color-base );
border-radius: var( --border-radius-medium );
&-title {
font-size: var( --font-size-x-large );
font-weight: var( --font-weight-semi-bold );
color: var( --color-emphasized );
}
&-subtitle {
color: var( --color-subtle );
}
}