mediawiki-skins-Citizen/skinStyles/extensions/Echo/ext.echo.special.less
2023-07-27 21:19:27 -04:00

147 lines
3.2 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-body-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: 0.875rem;
// Align with Citizen label styles
color: var( --color-base--subtle );
letter-spacing: 0.05em;
}
&-secondary {
color: var( --color-base--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--small );
}
}
&-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: var( --background-color-overlay );
backdrop-filter: saturate( 50% ) blur( 16px );
border-bottom: 1px 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--small );
&-highlighted {
color: var( --color-base--emphasized );
background-color: var( --color-surface-3 );
}
&-selected {
color: var( --color-primary );
background-color: var( --background-color-primary--hover );
}
&-selected&-highlighted,
&-pressed&-highlighted {
color: var( --color-primary--hover );
background-color: var( --background-color-primary--hover );
}
}
&-label-count {
color: var( --color-base--subtle );
background-color: var( --color-surface-3 );
.oo-ui-optionWidget-selected & {
color: var( --color-primary );
}
}
}
/* 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-h3 );
font-weight: var( --font-weight-semibold );
color: var( --color-base--emphasized );
}
&-subtitle {
color: var( --color-base--subtle );
}
}