/* * 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-semibold ); color: var( --color-emphasized ); } &-subtitle { color: var( --color-subtle ); } }