From 9f5c687aa4c785867bf05d0b9b0b0ee2ea877ae3 Mon Sep 17 00:00:00 2001 From: Laura van Helvoort Date: Mon, 9 Mar 2026 14:23:32 +0100 Subject: [PATCH 01/32] add tabs styling --- stylesheets/commons/Tabs.scss | 70 +++++++++++++++++++++++++++++++++-- 1 file changed, 66 insertions(+), 4 deletions(-) diff --git a/stylesheets/commons/Tabs.scss b/stylesheets/commons/Tabs.scss index fbc71ed55df..c38220c62a2 100644 --- a/stylesheets/commons/Tabs.scss +++ b/stylesheets/commons/Tabs.scss @@ -92,6 +92,7 @@ html.client-nojs .tabs-content > div:not( .active ) { border: unset !important; margin: 0 !important; list-style: none; + gap: 0; &::-webkit-scrollbar { display: none; @@ -347,24 +348,72 @@ html.client-nojs .tabs-content > div:not( .active ) { .nav-tabs { margin-bottom: 0; + border-bottom: 0.125rem solid; + display: flex; + flex-wrap: wrap; + gap: 0.125rem; + + .theme--light & { + border-bottom-color: var(--clr-secondary-90); + } + + .theme--dark & { + border-bottom-color: var(--clr-secondary-16); + } + + @at-root .mw-content-ltr &, + .mw-content-rtl .mw-content-ltr & { + margin: 0.25rem 0; + } li { float: left; - border: 2px solid; - border-bottom: 0 !important; cursor: pointer; + margin: 0.125rem 0 0 0; + border: 0.125rem solid; + border-bottom: 0 !important; + height: 2.125rem; + + .theme--light & { + background-color: var(--clr-primary-96); + border-color: var(--clr-secondary-90); + } + + .theme--dark & { + background-color: var(--clr-secondary-9); + border-color: var(--clr-secondary-16); + } &:not( .active ) { cursor: pointer; } + .tabs-portal & { + height: 2.875rem; + } + + &:last-of-type { + margin-right: 0; + } + a { display: block; padding: 0.3125rem 0.625rem; - line-height: 1.42857143; border: 1px solid transparent; outline: 0; position: relative; + height: 2rem; + + &:focus-visible { + text-decoration: underline; + } + + @media (hover: hover) { + &:hover, + &:visited:hover { + text-decoration: none; + } + } } // Specific alignment for team templates in static tabs @@ -386,7 +435,19 @@ html.client-nojs .tabs-content > div:not( .active ) { } &.active { - background-color: var( --clr-background ); + margin-bottom: -0.125rem; + height: 2.25rem; + font-weight: bold; + + .theme--light & { + background-color: var(--clr-secondary-100); + color: var(--clr-secondary-8); + } + + .theme--dark & { + background-color: var(--clr-secondary-7); + color: var(--clr-secondary-100); + } .selflink { background-color: unset !important; @@ -394,6 +455,7 @@ html.client-nojs .tabs-content > div:not( .active ) { a { background-color: unset !important; + color: currentColor; } } } From 3ce3d6f61e8d640aa9b07b1d05abaecd4f40d9fd Mon Sep 17 00:00:00 2001 From: Laura van Helvoort Date: Mon, 9 Mar 2026 16:54:09 +0100 Subject: [PATCH 02/32] add breadcrumb styling --- stylesheets/commons/Breadcrumb.scss | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 stylesheets/commons/Breadcrumb.scss diff --git a/stylesheets/commons/Breadcrumb.scss b/stylesheets/commons/Breadcrumb.scss new file mode 100644 index 00000000000..b3eb584c92c --- /dev/null +++ b/stylesheets/commons/Breadcrumb.scss @@ -0,0 +1,15 @@ +/* hide subpages (breadcrumbs) in mainspace and templatespace */ +body.ns-0, +body.ns-10 { + .content-sub .subpages { + display: none; + } +} + +ol.breadcrumb { + margin-left: -0.75rem; + + .breadcrumb-item + .breadcrumb-item:before { + color: var( --clr-on-background ); + } +} \ No newline at end of file From 193d0df6180ae7248693b9cfca58fb1b732181f0 Mon Sep 17 00:00:00 2001 From: Laura van Helvoort Date: Mon, 9 Mar 2026 16:54:18 +0100 Subject: [PATCH 03/32] add catlinks --- stylesheets/commons/Miscellaneous.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/stylesheets/commons/Miscellaneous.scss b/stylesheets/commons/Miscellaneous.scss index 2369d5af2a7..7775ff270da 100644 --- a/stylesheets/commons/Miscellaneous.scss +++ b/stylesheets/commons/Miscellaneous.scss @@ -2893,3 +2893,12 @@ Slightly transparent imagelabel on POIDraft background-color: rgba( 0, 25, 51, 0.75 ); } } + +/******************************************************************************* +Author(s): Elysienna +Styling moved from skin lakesideview +*******************************************************************************/ +.catlinks { + background-color: transparent; + border: 0.0625rem solid var( --clr-border ); +} From 01cc7291baa008449c05e4431fe579a6bb69b384 Mon Sep 17 00:00:00 2001 From: Laura van Helvoort Date: Mon, 9 Mar 2026 16:55:31 +0100 Subject: [PATCH 04/32] add changelist --- stylesheets/commons/Miscellaneous.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/stylesheets/commons/Miscellaneous.scss b/stylesheets/commons/Miscellaneous.scss index 7775ff270da..38ff7101e09 100644 --- a/stylesheets/commons/Miscellaneous.scss +++ b/stylesheets/commons/Miscellaneous.scss @@ -2902,3 +2902,9 @@ Styling moved from skin lakesideview background-color: transparent; border: 0.0625rem solid var( --clr-border ); } + +body { + .mw-changeslist-legend { + background-color: var( --clr-surface ); + } +} \ No newline at end of file From 701fd26e48933d6adbf96f6e64ec97f59df5efcd Mon Sep 17 00:00:00 2001 From: Laura van Helvoort Date: Mon, 9 Mar 2026 16:57:06 +0100 Subject: [PATCH 05/32] add datepicker --- stylesheets/commons/Form.scss | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 stylesheets/commons/Form.scss diff --git a/stylesheets/commons/Form.scss b/stylesheets/commons/Form.scss new file mode 100644 index 00000000000..7fb0b9b69fc --- /dev/null +++ b/stylesheets/commons/Form.scss @@ -0,0 +1,33 @@ +// Datepicker + +body { + .mw-widget-dateInputWidget-handle { + background-color: var( --clr-surface ); + color: var( --clr-on-surface ); + border-radius: 0.25rem; + } + + .mw-widget-calendarWidget-body-outer-wrapper { + background-color: var( --clr-surface-1 ); + } + + .mw-widget-calendarWidget-header { + background-color: var( --clr-surface-3 ); + } + + .mw-widget-calendarWidget-item.mw-widget-calendarWidget-day { + color: var( --clr-on-surface ); + } + + .mw-widget-calendarWidget-item.mw-widget-calendarWidget-day.mw-widget-calendarWidget-day-additional { + color: var( --clr-secondary-70 ); + } + + .mw-widget-calendarWidget-item.mw-widget-calendarWidget-day.mw-widget-calendarWidget-item-selected { + color: var( --clr-primary-100 ); + } + + .mw-widget-dateInputWidget-calendar { + background-color: var( --clr-surface ); + } +} \ No newline at end of file From 5eceab5b1213fc28d24d4c8c1f3b37ab158c2d39 Mon Sep 17 00:00:00 2001 From: Laura van Helvoort Date: Fri, 20 Mar 2026 12:47:19 +0100 Subject: [PATCH 06/32] extensions css --- .../commons/Extensions/ExtensionsMisc.scss | 62 ++++ .../commons/Extensions/Flaggedrevs.scss | 128 ++++++++ stylesheets/commons/Extensions/Jquery.scss | 128 ++++++++ stylesheets/commons/Extensions/Ooui.scss | 71 +++++ .../commons/Extensions/OouiButtons.scss | 265 ++++++++++++++++ .../commons/Extensions/OouiCheckboxes.scss | 39 +++ .../commons/Extensions/OouiInputFields.scss | 40 +++ stylesheets/commons/Extensions/OouiModal.scss | 64 ++++ stylesheets/commons/Extensions/OouiPopup.scss | 40 +++ .../commons/Extensions/OouiSelect.scss | 290 ++++++++++++++++++ 10 files changed, 1127 insertions(+) create mode 100644 stylesheets/commons/Extensions/ExtensionsMisc.scss create mode 100644 stylesheets/commons/Extensions/Flaggedrevs.scss create mode 100644 stylesheets/commons/Extensions/Jquery.scss create mode 100644 stylesheets/commons/Extensions/Ooui.scss create mode 100644 stylesheets/commons/Extensions/OouiButtons.scss create mode 100644 stylesheets/commons/Extensions/OouiCheckboxes.scss create mode 100644 stylesheets/commons/Extensions/OouiInputFields.scss create mode 100644 stylesheets/commons/Extensions/OouiModal.scss create mode 100644 stylesheets/commons/Extensions/OouiPopup.scss create mode 100644 stylesheets/commons/Extensions/OouiSelect.scss diff --git a/stylesheets/commons/Extensions/ExtensionsMisc.scss b/stylesheets/commons/Extensions/ExtensionsMisc.scss new file mode 100644 index 00000000000..2365063b950 --- /dev/null +++ b/stylesheets/commons/Extensions/ExtensionsMisc.scss @@ -0,0 +1,62 @@ +// resources/styles/extensions/_box.scss +.messagebox, +.errorbox, +.warningbox, +.successbox { + color: var( --clr-on-surface ); +} + +.errorbox { + background-color: var( --clr-error-container ); + border-color: var( --clr-on-error ); + color: var( --clr-on-error-container ); +} + +.messagebox { + background-color: var( --clr-surface-variant ); + border-color: var( --clr-border ); + color: var( --clr-on-surface-variant ); +} + +.successbox { + background-color: var( --clr-confirmed-container ); + border-color: var( --clr-on-confirmed ); + color: var( --clr-on-confirmed-container ); +} + +/* TODO: Needs a better color in the future */ +.warningbox { + background-color: var( --clr-on-gold ); + color: #000000; +} + +// resources/styles/extensions/_interwiki.scss +table.mw-interwikitable.body { + td.mw-interwikitable-local-yes { + background: var( --clr-elm-90 ); + + .theme--dark & { + background: var( --clr-elm-10 ); + } + } +} + +// resources/styles/extensions/_liquipediaads.scss +#top-ad { + top: calc( 3.125rem + 2.25rem ); +} + +// resources/styles/extensions/_patrol.scss +/* hide patrolling link */ +.patrollink { + display: none; +} + +// resources/styles/extensions/_scribunto.scss +.mw-scribunto-input { + background: var( --clr-on-surface ); + + .theme--dark & { + background: var( --clr-surface ); + } +} diff --git a/stylesheets/commons/Extensions/Flaggedrevs.scss b/stylesheets/commons/Extensions/Flaggedrevs.scss new file mode 100644 index 00000000000..e6cf7227711 --- /dev/null +++ b/stylesheets/commons/Extensions/Flaggedrevs.scss @@ -0,0 +1,128 @@ +.flaggedrevs_reviewform { + background-color: transparent; + + @include media-breakpoint-down( md ) { + #mw-fr-confirmreview, + span { + white-space: break-spaces; + } + + select, + input[ type='text' ], + input:not( [ type ] ) { + width: 100%; + } + } +} + +body .flaggedrevs_editnotice { + background-color: var( --clr-surface-3 ); + border: 0; + display: block; + border-radius: 0.625rem; + margin-bottom: 0.5rem; + padding: 0.5rem; +} + +body .flaggedrevs-pending { + background-color: var( --clr-tertiary-container ); + color: var( --clr-on-tertiary-container ); + + > a, + > a:hover, + > a:visited { + color: var( --clr-on-tertiary-container ); + } +} + +body .flaggedrevs_preview { + background-color: var( --clr-surface-3 ); + border: 0.0625rem solid var( --clr-border ); + color: var( --clr-on-surface ); + padding: 0.5rem; +} + +body .flaggedrevs_short { + background-color: var( --clr-surface-3 ); + border: 0.0625rem solid var( --clr-border ); + color: var( --clr-on-surface ); +} + +body .flaggedrevs_short_details { + background-color: var( --clr-surface-4 ); + border: 0.0625rem solid var( --clr-border ); + color: var( --clr-on-surface ); + z-index: 1; +} + +body .flaggedrevs-unreviewed { + color: var( --clr-on-background ); + + .theme--light & { + background-color: var( --clr-sun-90 ); + } + + .theme--dark & { + background-color: var( --clr-sun-90 ); + } +} + +body .flaggedrevs-icon { + .theme--light & { + filter: brightness( 0 ) saturate( 100% ) invert( 28% ) sepia( 77% ) saturate( 1826% ) hue-rotate( 188deg ) brightness( 80% ) contrast( 90% ); + } + + .theme--dark & { + filter: brightness( 0 ) saturate( 100% ) invert( 72% ) sepia( 31% ) saturate( 628% ) hue-rotate( 185deg ) brightness( 101% ) contrast( 102% ); + } +} + +#pagehistory li.selected { + background-color: var( --clr-surface ); + color: var( --clr-on-surface ); + outline: 0.0625rem dashed var( --clr-on-surface-variant ); +} + +body .flaggedrevs-color-0 { + background-color: var( --clr-surface-1 ); +} + +.flaggedrevs-color-1 { + background-color: var( --clr-surface-1 ); +} + +.mw-plusminus-null { + color: var( --clr-on-surface ); +} + +.mw-plusminus-pos { + color: var( --clr-confirmed ); +} + +.mw-plusminus-neg { + color: var( --clr-error ); +} + +.mw-changeslist-links { + margin-right: 0.5rem; +} + +#mw-history-compare { + margin: 1rem 0; +} + +.mw-history-compareselectedversions { + margin-bottom: 1rem; +} + +.updatedmarker { + color: var( --clr-on-background ); + + .theme--light & { + background-color: var( --clr-semantic-positive-80 ); + } + + .theme--dark & { + background-color: var( --clr-semantic-positive-30 ); + } +} \ No newline at end of file diff --git a/stylesheets/commons/Extensions/Jquery.scss b/stylesheets/commons/Extensions/Jquery.scss new file mode 100644 index 00000000000..6e439e702f5 --- /dev/null +++ b/stylesheets/commons/Extensions/Jquery.scss @@ -0,0 +1,128 @@ +div.ui-widget { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-size: 0.9375rem; +} + +.theme--dark div.ui-widget-header span.ui-icon { + filter: invert( 100% ) sepia( 100% ) saturate( 0% ) hue-rotate( 47deg ) brightness( 103% ); +} + +div.ui-widget-header { + background: transparent; + border: 0; + color: var( --clr-on-surface ); + + .ui-state-hover, + .ui-widget-content .ui-state-hover, + .ui-widget-header .ui-state-hover, + .ui-state-focus, + .ui-widget-content .ui-state-focus, + .ui-widget-header .ui-state-focus { + background: transparent; + + .theme--light & { + border-color: var( --clr-secondary-44 ); + } + + .theme--dark & { + border-color: var( --clr-secondary-70 ); + } + } +} + +div.ui-widget-content { + background-color: var( --clr-surface-3 ); + color: var( --clr-on-surface ); + background-image: none; + + .theme--light & { + border-color: var( --clr-on-surface-light-primary-8 ); + } + + .theme--dark & { + border-color: var( --clr-on-surface-dark-primary-8 ); + } + + div.ui-dialog-buttonpane { + /* stylelint-disable-next-line declaration-no-important */ + .theme--light & { + border-color: var( --clr-on-surface-light-primary-8 ) !important; + } + + .theme--dark & { + border-color: var( --clr-on-surface-dark-primary-8 ) !important; + } + } + + input { + background-color: var( --clr-surface ); + color: var( --clr-on-surface ); + border-radius: 0.25rem; + min-height: 2rem; + + .theme--light & { + border: 0.0625rem solid var( --clr-secondary-44 ); + } + + .theme--dark & { + border: 0.0625rem solid var( --clr-secondary-70 ); + } + } + + select { + background-color: var( --clr-surface ); + color: var( --clr-on-surface ); + border-radius: 0.25rem; + min-height: 2rem; + } + + button.ui-button { + border-radius: 6.25rem; + font-size: 0.875rem; + padding-left: 1.5rem; + padding-right: 1.5rem; + border-width: 0.0625rem; + background: transparent; + color: var( --clr-primary ); + min-height: 2.5rem; + + .theme--light & { + border-color: var( --clr-secondary-44 ); + } + + .theme--dark & { + border-color: var( --clr-secondary-70 ); + } + + &:hover { + color: var( --clr-primary ); + + .theme--light & { + background-color: var( --clr-on-surface-light-primary-8 ); + } + + .theme--dark & { + background-color: var( --clr-on-surface-dark-primary-8 ); + } + } + } +} + +.client-js .sortable:not( .jquery-tablesorter ) > * > tr:first-child > th:not( .unsortable ), +.jquery-tablesorter th.headerSort { + .theme--dark & { + background-image: url( data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjEiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDIxIDkiPg0KCTxwYXRoIGQ9Im0xNC41IDUtNCA0LTQtNHptMC0xLTQtNC00IDR6IiBmaWxsPSIjZmZmZmZmIi8+DQo8L3N2Zz4= ); + } +} + +.jquery-tablesorter th.headerSortUp { + .theme--dark & { + background-image: url( data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjEiIGhlaWdodD0iNCIgdmlld0JveD0iMCAwIDIxIDQiPg0KCTxwYXRoIGQ9Im02LjUgNCA0LTQgNCA0eiIgZmlsbD0iI2ZmZmZmZiIvPg0KPC9zdmc+ ); + } +} + +.jquery-tablesorter th.headerSortDown { + .theme--dark & { + background-image: url( data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjEiIGhlaWdodD0iNCIgdmlld0JveD0iMCAwIDIxIDQiPg0KCTxwYXRoIGQ9Im0xNC41IDAtNCA0LTQtNHoiIGZpbGw9IiNmZmZmZmYiLz4NCjwvc3ZnPg== ); + } +} diff --git a/stylesheets/commons/Extensions/Ooui.scss b/stylesheets/commons/Extensions/Ooui.scss new file mode 100644 index 00000000000..b77065b4b0e --- /dev/null +++ b/stylesheets/commons/Extensions/Ooui.scss @@ -0,0 +1,71 @@ +.oo-ui-textInputWidget.oo-ui-indicatorElement input, +.oo-ui-textInputWidget.oo-ui-indicatorElement textarea { + /* stylelint-disable-next-line declaration-no-important */ + padding-right: 2.4875em !important; +} + +.oo-ui-textInputWidget.oo-ui-iconElement input, +.oo-ui-textInputWidget.oo-ui-iconElement textarea { + /* stylelint-disable-next-line declaration-no-important */ + padding-left: 2.875em !important; +} + +.mw-widgets-datetime-dateTimeInputWidget-editField { + /* stylelint-disable-next-line declaration-no-important */ + width: auto !important; +} + +// OOUI Tabs +div.mw-prefs-tabs-wrapper.oo-ui-panelLayout-framed, +div.mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout { + border-color: var( --clr-border ); +} + +div.oo-ui-tabSelectWidget-framed { + background-color: var( --clr-surface-2 ); + color: var( --clr-on-surface ); +} + +div.oo-ui-tabOptionWidget { + color: var( --clr-on-surface ); +} + +div.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected { + color: var( --clr-on-surface ); + + .theme--light & { + background-color: rgba( #0d61a4, 12% ); + } + + .theme--dark & { + background-color: rgba( #9fc9ff, 12% ); + } +} + +div.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover { + color: var( --clr-on-surface ); + + .theme--light & { + background-color: rgba( #0d61a4, 12% ); + } + + .theme--dark & { + background-color: rgba( #9fc9ff, 12% ); + } +} + +label.oo-ui-labelWidget.oo-ui-inline-help { + .theme--light & { + background-color: rgba( #1b1b1b, 70% ); + } + + .theme--dark & { + background-color: rgba( #e2e2e6, 70% ); + } +} + +div.mw-prefs-buttons { + background-color: var( --clr-surface-2 ); + color: var( --clr-on-surface ); + border-color: var( --clr-border ); +} diff --git a/stylesheets/commons/Extensions/OouiButtons.scss b/stylesheets/commons/Extensions/OouiButtons.scss new file mode 100644 index 00000000000..bac4c53b97e --- /dev/null +++ b/stylesheets/commons/Extensions/OouiButtons.scss @@ -0,0 +1,265 @@ +/** + * Button primary + */ + +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button { + border-radius: 0.5rem; + background-color: var( --clr-primary-44 ); + border-color: var( --clr-primary-44 ); + color: var( --clr-primary-100 ); +} + +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover { + background-color: var( --clr-primary-30 ); + border-color: var( --clr-primary-30 ); + color: var( --clr-primary-100 ); +} + +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus { + background-color: var( --clr-primary-44 ); + box-shadow: inset 0 0 0 0.125rem var( --clr-primary-80 ); + color: var( --clr-primary-100 ); +} + +/** + * Button destructive (cancel) + */ + +.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button { + background-color: transparent; + border-radius: 0.5rem; + font-size: 0.875rem; + padding: 0 1.25rem; + border-width: 0.0625rem; + min-height: 2.5rem; + display: flex; + align-items: center; + + .theme--light & { + color: var( --clr-semantic-negative-40 ); + border-color: var( --clr-semantic-negative-40 ); + } + + .theme--dark & { + color: var( --clr-semantic-negative-90 ); + border-color: var( --clr-semantic-negative-90 ); + } + + &:hover { + .theme--light & { + background-color: var( --clr-semantic-negative-96 ); + color: var( --clr-semantic-negative-40 ); + border-color: var( --clr-semantic-negative-40 ); + } + + .theme--dark & { + background-color: var( --clr-on-surface-dark-primary-4 ); + color: var( --clr-semantic-negative-90 ); + border-color: var( --clr-semantic-negative-90 ); + } + } + + &:focus { + .theme--light & { + border-color: var( --clr-semantic-negative-40 ); + box-shadow: inset 0 0 0 0.1875rem var( --clr-semantic-negative-40 ); + } + + .theme--dark & { + border-color: var( --clr-semantic-negative-90 ); + box-shadow: inset 0 0 0 0.1875rem var( --clr-semantic-negative-90 ); + } + } +} + +/** + * Button default + */ + +body .oo-ui-processDialog .oo-ui-actionWidget > a.oo-ui-buttonElement-button, +body .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button { + border-radius: 0.5rem; + font-size: 0.875rem; + padding: 0 1.25rem; + border: 0.0625rem solid; + display: flex; + align-items: center; + min-height: 2.5rem; + + .theme--light & { + border-color: var( --clr-secondary-80 ); + color: var( --clr-secondary-25 ); + } + + .theme--dark & { + border-color: var( --clr-on-surface-dark-primary-40 ); + color: var( --clr-secondary-90 ); + } +} + +body .oo-ui-buttonElement-framed.oo-ui-labelElement > .oo-ui-buttonElement-button { + padding-top: 0; + padding-bottom: 0; +} + +body .oo-ui-buttonElement-framed.oo-ui-widget-enabled > a.oo-ui-buttonElement-button, +body .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button { + background-color: transparent; + border-radius: 0.5rem; + + .theme--light & { + border-color: var( --clr-secondary-80 ); + color: var( --clr-secondary-25 ); + } + + .theme--dark & { + border-color: var( --clr-on-surface-dark-primary-40 ); + color: var( --clr-secondary-90 ); + } +} + +body .oo-ui-buttonElement-framed.oo-ui-widget-enabled > a.oo-ui-buttonElement-button:hover, +body .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover { + text-decoration: none; + + .theme--light & { + background-color: var( --clr-on-surface-light-primary-4 ); + border-color: var( --clr-secondary-80 ); + color: var( --clr-secondary-25 ); + } + + .theme--dark & { + background-color: var( --clr-on-surface-dark-primary-4 ); + border-color: var( --clr-on-surface-dark-primary-40 ); + color: var( --clr-secondary-90 ); + } +} + +body .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus { + background-color: transparent; + + .theme--light & { + border-color: var( --clr-primary-80 ); + box-shadow: inset 0 0 0 0.1875rem var( --clr-primary-80 ); + color: var(--clr-primary-44); + } + + .theme--dark & { + border-color: var( --clr-primary-80 ); + box-shadow: inset 0 0 0 0.1875rem var( --clr-primary-80 ); + color: var(--clr-secondary-90); + } +} + +body .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active, +body .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active:focus, +body .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button { + .theme--light & { + background-color: var( --clr-on-surface-light-primary-8 ); + border-color: var( --clr-secondary-80 ); + color: var( --clr-secondary-25 ); + } + + .theme--dark & { + background-color: var( --clr-on-surface-dark-primary-8 ); + border-color: var( --clr-on-surface-dark-primary-40 ); + color: var( --clr-secondary-90 ); + } +} + +body .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button { + background-color: var( --clr-primary-44 ); + border-color: var( --clr-primary-44 ); + color: var(--clr-primary-100); +} + +/** + Button disabled + */ + +body span.oo-ui-buttonElement-framed.oo-ui-widget-disabled > a.oo-ui-buttonElement-button, +body .oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button { + opacity: 0.4; + background-color: transparent; +} + +.oo-ui-buttonElement-framed.oo-ui-widget-disabled > a.oo-ui-buttonElement-button:hover { + text-decoration: none; +} + +/** + * Button icon + */ + +body :not( .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive ) > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon { + .theme--light & { + filter: brightness( 0 ) saturate( 100% ) invert( 28% ) sepia( 77% ) saturate( 1826% ) hue-rotate( 188deg ) brightness( 80% ) contrast( 90% ); + } + + .theme--dark & { + filter: brightness( 0 ) saturate( 100% ) invert( 72% ) sepia( 31% ) saturate( 628% ) hue-rotate( 185deg ) brightness( 101% ) contrast( 102% ); + } +} + +.theme--dark .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button { + .oo-ui-iconElement-icon { + filter: invert( 100% ); + } +} + +// disable filter for highlight +body .oo-ui-buttonElement-framed.oo-ui-iconElement.oo-ui-indicatorElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon.oo-ui-icon-highlight.mw-rcfilters-ui-filterItemHighlightButton-circle { + filter: none; +} + +.theme--dark .oo-ui-indicatorElement-indicator { + filter: invert( 100% ) sepia( 100% ) saturate( 0% ) hue-rotate( 47deg ) brightness( 103% ); +} + +/** + * Button frameless + */ + +body .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button, +body .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button { + color: var( --clr-primary-44 ); + + &:hover { + .theme--light & { + color: var( --clr-primary-40 ); + } + + .theme--dark & { + color: var( --clr-primary-80 ); + } + } + + &:active { + .theme--light & { + color: var( --clr-primary-40 ); + } + + .theme--dark & { + color: var( --clr-primary-80 ); + } + } +} + +/** + Grouped buttons + */ + +body .oo-ui-buttonSelectWidget > .oo-ui-buttonElement-framed.oo-ui-widget-enabled:not( :first-child ):not( :last-child ) > .oo-ui-buttonElement-button { + border-radius: 0; + padding: 0 0.5rem; +} + +body .oo-ui-buttonSelectWidget > .oo-ui-buttonElement-framed.oo-ui-widget-enabled:first-child > .oo-ui-buttonElement-button { + border-radius: 0.625rem 0 0 0.625rem; + padding: 0 0.5rem; +} + +body .oo-ui-buttonSelectWidget > .oo-ui-buttonElement-framed.oo-ui-widget-enabled:last-child > .oo-ui-buttonElement-button { + border-radius: 0 0.625rem 0.625rem 0; + padding: 0 0.5rem; +} diff --git a/stylesheets/commons/Extensions/OouiCheckboxes.scss b/stylesheets/commons/Extensions/OouiCheckboxes.scss new file mode 100644 index 00000000000..0719f9a4c71 --- /dev/null +++ b/stylesheets/commons/Extensions/OouiCheckboxes.scss @@ -0,0 +1,39 @@ +body .oo-ui-checkboxInputWidget [ type='checkbox' ] + span { + background-color: transparent; + + .theme--light & { + border-color: var( --clr-secondary-44 ); + } + + .theme--dark & { + border-color: var( --clr-secondary-70 ); + } +} + +body .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [ type='checkbox' ]:hover + span { + border-color: var( --clr-primary-44 ); +} + +body .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [ type='checkbox' ]:focus + span { + border-color: var( --clr-primary-44 ); + box-shadow: inset 0 0 0 0.0625rem var( --clr-primary-44 ); +} + +body .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [ type='checkbox' ]:checked + span, +body .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [ type='checkbox' ]:indeterminate + span { + background-color: var( --clr-primary-44 ); + border-color: var( --clr-primary-44 ); +} + +body .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [ type='checkbox' ]:checked:hover + span, +body .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [ type='checkbox' ]:indeterminate:hover + span { + background-color: var( --clr-primary-44 ); + border-color: var( --clr-primary-44 ); +} + +body .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [ type='checkbox' ]:checked:focus + span, +body .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [ type='checkbox' ]:indeterminate:focus + span { + background-color: var( --clr-primary-44 ); + border-color: var( --clr-primary-44 ); + box-shadow: inset 0 0 0 0.0625rem var( --clr-primary-44 ), inset 0 0 0 0.125rem var( --clr-primary-44 ); +} diff --git a/stylesheets/commons/Extensions/OouiInputFields.scss b/stylesheets/commons/Extensions/OouiInputFields.scss new file mode 100644 index 00000000000..7e450ef3496 --- /dev/null +++ b/stylesheets/commons/Extensions/OouiInputFields.scss @@ -0,0 +1,40 @@ +body .oo-ui-textInputWidget .oo-ui-inputWidget-input { + background-color: var( --clr-surface ); + color: var( --clr-on-surface ); + border-radius: 0.25rem; + + .theme--light & { + border-color: var( --clr-secondary-44 ); + } + + .theme--dark & { + border-color: var( --clr-secondary-70 ); + } +} + +body .oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input::placeholder { + color: var( --clr-on-surface ); + opacity: 1; +} + +body .oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input, +body .oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input:focus { + border-color: var( --clr-primary ); +} + +body .oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus { + border-color: var( --clr-primary ); + box-shadow: inset 0 0 0 0.0625rem var( --clr-primary ); +} + +body .oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-input .oo-ui-widget.oo-ui-textInputWidget > .oo-ui-inputWidget-input { + border-radius: 0.25rem; + + .theme--light & { + border-color: var( --clr-secondary-44 ); + } + + .theme--dark & { + border-color: var( --clr-secondary-70 ); + } +} \ No newline at end of file diff --git a/stylesheets/commons/Extensions/OouiModal.scss b/stylesheets/commons/Extensions/OouiModal.scss new file mode 100644 index 00000000000..daac19137c6 --- /dev/null +++ b/stylesheets/commons/Extensions/OouiModal.scss @@ -0,0 +1,64 @@ +div.oo-ui-windowManager-modal > .oo-ui-dialog { + background-color: rgba( var( --clr-surface ), 0.5 ); +} + +div.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame { + background-color: var( --clr-surface-3 ); +} + +div.oo-ui-windowManager-modal.oo-ui-windowManager-floating > .oo-ui-dialog > .oo-ui-window-frame { + box-shadow: var( --box-shadow-elevation-1 ); + + .theme--light & { + border: 0.0625rem solid var( --clr-on-surface-light-primary-8 ); + } + + .theme--dark & { + border: 0.0625rem solid var( --clr-on-surface-dark-primary-8 ); + } +} + +div.oo-ui-processDialog-content .oo-ui-window-head, +div.oo-ui-processDialog-content .oo-ui-window-foot { + outline: 0; +} + +label.oo-ui-processDialog-title { + font-size: 0.875rem; + line-height: normal; + display: flex; + align-items: center; + min-height: 3rem; + justify-content: center; +} + +div.oo-ui-processDialog-location { + min-height: 3.25rem; +} + +div.oo-ui-processDialog-actions-safe, +div.oo-ui-processDialog-actions-primary { + top: 0.5rem; +} + +div.oo-ui-processDialog-actions-safe { + left: 0.5rem; +} + +div.oo-ui-processDialog-actions-primary { + right: 0.5rem; +} + +div.oo-ui-processDialog-actions-safe .oo-ui-actionWidget > .oo-ui-buttonElement-button, +div.oo-ui-processDialog-actions-other .oo-ui-actionWidget > .oo-ui-buttonElement-button { + border-right: 0; +} + +/** + * Specific overwrite for buttons in processDialog + */ +.oo-ui-processDialog .oo-ui-actionWidget:not( .oo-ui-flaggedElement-progressive ):not( .oo-ui-flaggedElement-destructive ) > a.oo-ui-buttonElement-button:hover, +.oo-ui-processDialog .oo-ui-actionWidget:not( .oo-ui-flaggedElement-progressive ):not( .oo-ui-flaggedElement-destructive ) > a.oo-ui-buttonElement-button:active { + border: 0.0625rem solid var( --clr-outline ); + text-decoration: none; +} diff --git a/stylesheets/commons/Extensions/OouiPopup.scss b/stylesheets/commons/Extensions/OouiPopup.scss new file mode 100644 index 00000000000..3e5c32c0f34 --- /dev/null +++ b/stylesheets/commons/Extensions/OouiPopup.scss @@ -0,0 +1,40 @@ +body .oo-ui-popupWidget-popup { + background-color: var( --clr-surface-2 ); + color: var( --clr-on-surface ); + + .theme--light & { + border: 0.0625rem solid var( --clr-on-surface-light-primary-8 ); + } + + .theme--dark & { + border: 0.0625rem solid var( --clr-on-surface-dark-primary-8 ); + } +} + +body .oo-ui-popupWidget-head > .oo-ui-iconElement-icon { + .theme--light & { + filter: brightness( 0 ) saturate( 100% ) invert( 28% ) sepia( 77% ) saturate( 1826% ) hue-rotate( 188deg ) brightness( 80% ) contrast( 90% ); + } + + .theme--dark & { + filter: brightness( 0 ) saturate( 100% ) invert( 72% ) sepia( 31% ) saturate( 628% ) hue-rotate( 185deg ) brightness( 101% ) contrast( 102% ); + } +} + +body .mw-rcfilters-ui-tagItemWidget-popup-content { + color: var( --clr-on-surface ); +} + +body .oo-ui-popupWidget-anchored-bottom .oo-ui-popupWidget-anchor:before { + .theme--light & { + border-top-color: var( --clr-on-surface-light-primary-8 ); + } + + .theme--dark & { + border-top-color: var( --clr-on-surface-dark-primary-8 ); + } +} + +body .oo-ui-popupWidget-anchored-bottom .oo-ui-popupWidget-anchor:after { + border-top-color: var( --clr-surface-2 ); +} \ No newline at end of file diff --git a/stylesheets/commons/Extensions/OouiSelect.scss b/stylesheets/commons/Extensions/OouiSelect.scss new file mode 100644 index 00000000000..6402efdae9c --- /dev/null +++ b/stylesheets/commons/Extensions/OouiSelect.scss @@ -0,0 +1,290 @@ +body .oo-ui-menuSelectWidget { + background-color: var( --clr-surface-2 ); + box-shadow: var( --box-shadow-elevation-2 ); + color: var( --clr-on-surface ); + z-index: 22; + + .theme--light & { + border-color: var( --clr-on-surface-light-primary-8 ); + } + + .theme--dark & { + border-color: var( --clr-on-surface-dark-primary-8 ); + } +} + +body .oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted { + color: var( --clr-on-surface ); + + .theme--light & { + background-color: var( --clr-on-surface-light-primary-12 ); + } + + .theme--dark & { + background-color: var( --clr-on-surface-dark-primary-12 ); + } +} + +body .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected { + color: var( --clr-on-surface ); + + .theme--light & { + background-color: var( --clr-on-surface-light-primary-12 ); + } + + .theme--dark & { + background-color: var( --clr-on-surface-dark-primary-12 ); + } +} + +body .oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget { + color: var( --clr-on-surface ); +} + +/** + * Dropdown widget + */ + +body .oo-ui-dropdownInputWidget.oo-ui-widget-enabled, +body .oo-ui-dropdownInputWidget.oo-ui-widget-enabled:hover { + background-color: transparent; +} + +body .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle { + background-color: var( --clr-surface ); + color: var( --clr-on-surface ); + border-radius: 0.25rem; +} + +body .oo-ui-dropdownWidget.oo-ui-widget-enabled.oo-ui-dropdownWidget-open .oo-ui-dropdownWidget-handle, +body .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover { + color: var( --clr-on-surface ); + + .theme--light & { + background-color: var( --clr-on-surface-light-primary-12 ); + } + + .theme--dark & { + background-color: var( --clr-on-surface-dark-primary-12 ); + } +} + +/** + * Saved links + */ + +body .mw-rcfilters-ui-savedLinksListWidget-placeholder span.oo-ui-iconElement-icon { + .theme--light & { + filter: brightness( 0 ) saturate( 100% ) invert( 28% ) sepia( 77% ) saturate( 1826% ) hue-rotate( 188deg ) brightness( 80% ) contrast( 90% ); + } + + .theme--dark & { + filter: brightness( 0 ) saturate( 100% ) invert( 72% ) sepia( 31% ) saturate( 628% ) hue-rotate( 185deg ) brightness( 101% ) contrast( 102% ); + } +} + +body .mw-rcfilters-ui-savedLinksListWidget-placeholder.oo-ui-optionWidget .oo-ui-labelElement-label { + color: var( --clr-on-surface ); +} + +/** + * MultiTagSelectWidget + */ + +body .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined { + background-color: transparent; + color: var( --clr-on-surface ); + + .oo-ui-iconElement-icon { + .theme--light & { + filter: brightness( 0 ) saturate( 100% ) invert( 28% ) sepia( 77% ) saturate( 1826% ) hue-rotate( 188deg ) brightness( 80% ) contrast( 90% ); + } + + .theme--dark & { + filter: brightness( 0 ) saturate( 100% ) invert( 72% ) sepia( 31% ) saturate( 628% ) hue-rotate( 185deg ) brightness( 101% ) contrast( 102% ); + } + } +} + +body .mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle { + background-color: var( --clr-surface-2 ); + border-radius: 0.625rem; + color: var( --clr-on-surface ); + padding: 0 1rem 1rem; + + .theme--light & { + border: 0.0625rem solid var( --clr-on-surface-light-primary-8 ); + } + + .theme--dark & { + border: 0.0625rem solid var( --clr-on-surface-dark-primary-8 ); + } +} + +body .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-inputWidget-input { + background-color: var( --clr-surface-2 ); + + .theme--light & { + border-color: var( --clr-on-surface-light-primary-8 ); + } + + .theme--dark & { + border-color: var( --clr-on-surface-dark-primary-8 ); + } +} + +body .oo-ui-tagMultiselectWidget .mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget { + background-color: var( --clr-surface-2 ); + + .theme--light & { + border: 0.0625rem solid var( --clr-on-surface-light-primary-8 ); + } + + .theme--dark & { + border: 0.0625rem solid var( --clr-on-surface-dark-primary-8 ); + } +} + +body .mw-rcfilters-ui-filterMenuHeaderWidget-title { + color: var( --clr-on-surface-variant ); +} + +body .mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title { + color: var( --clr-on-surface ); +} + +body .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled { + background-color: var( --clr-secondary-container ); + color: var( --clr-on-secondary-container ); +} + +body .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .mw-rcfilters-ui-tagItemWidget-selected.oo-ui-tagItemWidget.oo-ui-widget-enabled { + background-color: var( --clr-secondary-container ); + color: var( --clr-on-secondary-container ); +} + +body .mw-rcfilters-ui-tagItemWidget.oo-ui-flaggedElement-muted.oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-labelElement-label { + color: var( --clr-on-secondary-container ); +} + +body .oo-ui-tagItemWidget { + min-height: 2rem; + border-radius: 0.5rem; + border: 0; + display: inline-flex; + align-items: center; + + &.oo-ui-widget-enabled:not( .oo-ui-tagItemWidget-fixed ) { + padding-right: 1.75rem; + } + + &.oo-ui-widget-enabled > .oo-ui-buttonElement { + top: 50%; + transform: translateY( -50% ); + right: 0.25rem; + + &:hover { + background-color: var( --clr-surface ); + } + } +} + +body .mw-rcfilters-ui-filterMenuHeaderWidget-header { + background-color: transparent; + + .theme--light & { + border-bottom: 0.0625rem solid var( --clr-on-surface-light-primary-8 ); + } + + .theme--dark & { + border-bottom: 0.0625rem solid var( --clr-on-surface-dark-primary-8 ); + } +} + +body .mw-rcfilters-ui-menuSelectWidget-footer { + background-color: transparent; + + .theme--light & { + border-top: 0.0625rem solid var( --clr-on-surface-light-primary-8 ); + } + + .theme--dark & { + border-top: 0.0625rem solid var( --clr-on-surface-dark-primary-8 ); + } +} + +body .mw-rcfilters-ui-filterMenuSectionOptionWidget { + background-color: transparent; +} + +body .mw-rcfilters-ui-filterMenuSectionOptionWidget-header-title.oo-ui-labelElement-label { + color: var( --clr-on-surface-variant ); +} + +body .mw-rcfilters-ui-itemMenuOptionWidget:not( :last-child ):not( .mw-rcfilters-ui-itemMenuOptionWidget-identifier-talk ) { + .theme--light & { + border-bottom: 0.0625rem solid var( --clr-on-surface-light-primary-8 ); + } + + .theme--dark & { + border-bottom: 0.0625rem solid var( --clr-on-surface-dark-primary-8 ); + } +} + +body .mw-rcfilters-ui-itemMenuOptionWidget.oo-ui-optionWidget-selected { + .theme--light & { + background-color: var( --clr-on-surface-light-primary-12 ); + } + + .theme--dark & { + background-color: var( --clr-on-surface-dark-primary-12 ); + } +} + +body .mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted:not( .oo-ui-optionWidget-selected ) { + background-color: var( --clr-surface-variant-3 ); +} + +body .mw-rcfilters-ui-itemMenuOptionWidget-label-title { + color: var( --clr-on-surface ); +} + +body .mw-rcfilters-ui-itemMenuOptionWidget-label-desc { + color: var( --clr-on-surface-variant ); +} + +body .mw-rcfilters-ui-viewSwitchWidget label.oo-ui-labelWidget { + color: var( --clr-on-surface-variant ); +} + +/** + * Labels + */ + +body .select2-dropdown { + background-color: var( --clr-surface-2 ); + box-shadow: var( --box-shadow-elevation-2 ); + color: var( --clr-on-surface ); + + .theme--light & { + border-color: var( --clr-on-surface-light-primary-8 ); + } + + .theme--dark & { + border-color: var( --clr-on-surface-dark-primary-8 ); + } +} + +body .select2-container--default .select2-selection--multiple .select2-selection__choice { + background-color: var( --clr-secondary-container ); + border: 0.0625rem solid var( --clr-secondary-container ); + color: var( --clr-on-secondary-container ); +} + +body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { + color: var( --clr-primary ); + + &:hover { + color: var( --clr-on-surface ); + } +} \ No newline at end of file From 2ab821a3252e53596eece76b29f2aa45e43babb3 Mon Sep 17 00:00:00 2001 From: Laura van Helvoort Date: Fri, 20 Mar 2026 16:37:38 +0100 Subject: [PATCH 07/32] components css --- .../commons/Components/BreadCrumbs.scss | 23 ++ stylesheets/commons/Components/Buttons.scss | 253 +++++++++++++++++ .../commons/Components/ComponentsMisc.scss | 267 ++++++++++++++++++ .../commons/Components/DatePicker.scss | 31 ++ stylesheets/commons/Components/DiffView.scss | 53 ++++ .../commons/Components/Documentation.scss | 23 ++ stylesheets/commons/Components/Editor.scss | 225 +++++++++++++++ stylesheets/commons/Components/Forms.scss | 211 ++++++++++++++ stylesheets/commons/Components/Gallery.scss | 64 +++++ stylesheets/commons/Components/Headings.scss | 128 +++++++++ stylesheets/commons/Components/Images.scss | 62 ++++ stylesheets/commons/Components/Jexel.scss | 69 +++++ .../commons/Components/MobileSearch.scss | 29 ++ stylesheets/commons/Components/NavBox.scss | 43 +++ stylesheets/commons/Components/Popup.scss | 30 ++ .../commons/Components/SearchSuggestions.scss | 56 ++++ stylesheets/commons/Components/Tables.scss | 161 +++++++++++ .../Extensions/OouiMultiSelectWidget.scss | 35 +++ 18 files changed, 1763 insertions(+) create mode 100644 stylesheets/commons/Components/BreadCrumbs.scss create mode 100644 stylesheets/commons/Components/Buttons.scss create mode 100644 stylesheets/commons/Components/ComponentsMisc.scss create mode 100644 stylesheets/commons/Components/DatePicker.scss create mode 100644 stylesheets/commons/Components/DiffView.scss create mode 100644 stylesheets/commons/Components/Documentation.scss create mode 100644 stylesheets/commons/Components/Editor.scss create mode 100644 stylesheets/commons/Components/Forms.scss create mode 100644 stylesheets/commons/Components/Gallery.scss create mode 100644 stylesheets/commons/Components/Headings.scss create mode 100644 stylesheets/commons/Components/Images.scss create mode 100644 stylesheets/commons/Components/Jexel.scss create mode 100644 stylesheets/commons/Components/MobileSearch.scss create mode 100644 stylesheets/commons/Components/NavBox.scss create mode 100644 stylesheets/commons/Components/Popup.scss create mode 100644 stylesheets/commons/Components/SearchSuggestions.scss create mode 100644 stylesheets/commons/Components/Tables.scss create mode 100644 stylesheets/commons/Extensions/OouiMultiSelectWidget.scss diff --git a/stylesheets/commons/Components/BreadCrumbs.scss b/stylesheets/commons/Components/BreadCrumbs.scss new file mode 100644 index 00000000000..89a3cc7f0ac --- /dev/null +++ b/stylesheets/commons/Components/BreadCrumbs.scss @@ -0,0 +1,23 @@ +/* hide subpages (breadcrumbs) in mainspace and templatespace */ +body.ns-0, +body.ns-10 { + .content-sub .subpages { + display: none; + } +} + +ol.breadcrumb { + margin-left: -0.75rem; + + .theme--light & { + background-color: var(--clr-surface-5); + } + + .theme--dark & { + background-color: var( --clr-secondary-16 ); + } + + .breadcrumb-item + .breadcrumb-item:before { + color: var( --clr-on-background ); + } +} diff --git a/stylesheets/commons/Components/Buttons.scss b/stylesheets/commons/Components/Buttons.scss new file mode 100644 index 00000000000..926fb87b929 --- /dev/null +++ b/stylesheets/commons/Components/Buttons.scss @@ -0,0 +1,253 @@ +// Button mixin +@mixin button-style-ghost { + /* stylelint-disable-next-line declaration-property-value-disallowed-list */ + outline-style: none; + + .theme--light & { + color: var(--clr-primary-44); + } + + .theme--dark & { + color: var(--clr-primary-80); + } + + @media ( hover: hover ) { + &:hover { + .theme--light & { + background-color: var(--clr-on-surface-light-primary-4); + } + + .theme--dark & { + background-color: var(--clr-on-surface-dark-primary-4); + } + } + } + + &:active, + &.btn--active { + .theme--light & { + background-color: var(--clr-on-surface-light-primary-8); + } + + .theme--dark & { + background-color: var(--clr-on-surface-dark-primary-8); + } + } + + &:focus, + &:focus-within, + &:focus-visible { + outline-style: solid; + } +} + +.main-content-container, +.brkts-match-info-popup { + & .btn, + & button { + display: inline-flex; + justify-content: center; + align-items: center; + gap: 0.25rem; + border-radius: 0.5rem; + font-weight: bold; + text-align: center; + border: 0; + outline-offset: -0.0625rem; + outline-width: 0.0625rem; + outline-style: solid; + text-wrap: nowrap; + + &:disabled { + opacity: 0.4; + } + + /* Medium / Default button */ + padding: 0.75rem 1rem; + line-height: 1.25rem; + font-size: 0.875rem; + height: calc( 1.25rem + 0.75rem * 2 ); /* 1.25rem is line-height, 0.75 is the padding */ + min-width: calc( 1.25rem + 0.75rem * 2 ); + + &.btn-extrasmall { + padding: 0.25rem 0.5rem; + font-size: 0.688rem; + line-height: 1rem; + border-radius: 0.25rem; + height: calc( 1rem + 0.25rem * 2 ); + min-width: calc( 1rem + 0.25rem * 2 ); + } + + &.btn-small { + padding: 0.375rem 0.75rem; + height: calc( 1.25rem + 0.375rem * 2 ); + min-width: calc( 1.25rem + 0.375rem * 2 ); + } + + &.btn-large { + padding: 0.75rem 1.25rem; + line-height: 1.5rem; + font-size: 1rem; + height: calc( 1.5rem + 0.75rem * 2 ); + min-width: calc( 1rem + 0.75rem * 2 ); + } + + &:focus, + &:focus-within, + &:focus-visible { + outline-offset: 0; + outline: 0.25rem solid var(--clr-primary-80); + /* Needed to override the bootstrap default */ + box-shadow: unset; + } + + &.button--primary, + &.btn-primary { + color: var(--clr-primary-100); + background-color: var(--clr-primary-44); + /* stylelint-disable-next-line declaration-property-value-disallowed-list */ + outline-style: none; + + @media ( hover: hover ) { + &:hover { + background-color: var(--clr-primary-30); + } + } + + /* First one is needed to override the bootstrap default */ + &:not( :disabled ):not( .disabled ):active, + &:active, + &.btn--active { + background-color: var(--clr-primary-20); + } + + &:focus, + &:focus-within, + &:focus-visible { + outline-style: solid; + } + } + + &.button--secondary, + &.btn-secondary { + background-color: transparent; + + .theme--light & { + outline-color: var(--clr-secondary-80); + color: var(--clr-secondary-25); + } + + .theme--dark & { + outline-color: var(--clr-on-surface-dark-primary-40); + color: var(--clr-secondary-90); + } + + @media ( hover: hover ) { + &:hover { + .theme--light & { + background-color: var(--clr-on-surface-light-primary-4) + } + + .theme--dark & { + background-color: var(--clr-on-surface-dark-primary-4); + } + } + } + + /* First one is needed to override the bootstrap default */ + &:not( :disabled ):not( .disabled ):active, + &:active, + &.btn--active { + .theme--light & { + background-color: var(--clr-on-surface-light-primary-8); + } + + .theme--dark & { + background-color: var(--clr-on-surface-dark-primary-8); + } + } + + &:focus, + &:focus-within, + &:focus-visible { + outline-color: var(--clr-primary-80); + color: var(--clr-primary-44); + } + } + + &.button--themed, + &.btn-themed { + color: var( --clr-primary-100 ); + background-color: var(--clr-wiki-theme-40); + /* stylelint-disable-next-line declaration-property-value-disallowed-list */ + outline-style: none; + + @media ( hover: hover ) { + &:hover { + background-color: var(--clr-wiki-theme-30); + } + } + + /* First one is needed to override the bootstrap default */ + &:not( :disabled ):not( .disabled ):active, + &:active, + &.btn--active { + background-color: var(--clr-wiki-theme-20); + } + + &:focus, + &:focus-within, + &:focus-visible { + outline-color: var(--clr-wiki-theme-80); + outline-style: solid; + } + } + + &.button--ghost, + &.btn-ghost { + @include button-style-ghost; + } + + &.button--destructive, + &.btn-destructive { + .theme--light & { + outline-color: var( --clr-semantic-negative-40 ); + color: var( --clr-semantic-negative-40 ); + } + + .theme--dark & { + outline-color: var( --clr-semantic-negative-90 ); + color: var( --clr-semantic-negative-90 ); + } + + @media ( hover: hover ) { + &:hover { + .theme--light & { + background-color: var( --clr-semantic-negative-96 ); + } + + .theme--dark & { + background-color: var( --clr-on-surface-dark-primary-4 ); + } + } + } + + &:active, + &.btn--active { + .theme--light & { + background-color: var( --clr-semantic-negative-90 ); + } + + .theme--dark & { + background-color: var( --clr-on-surface-dark-primary-8 ); + } + } + + &:focus, + &:focus-within, + &:focus-visible { + outline-style: solid; + } + } + } +} diff --git a/stylesheets/commons/Components/ComponentsMisc.scss b/stylesheets/commons/Components/ComponentsMisc.scss new file mode 100644 index 00000000000..3e3276871b8 --- /dev/null +++ b/stylesheets/commons/Components/ComponentsMisc.scss @@ -0,0 +1,267 @@ +/******************************************************************************* +Author(s): Elysienna +Various styling moved from components folder from lakesideview skin +*******************************************************************************/ + +// resources/styles/components/_catlinks.scss +.catlinks { + background-color: transparent; + + .theme--light & { + border: 0.0625rem solid var( --clr-on-surface-light-primary-8 ); + } + + .theme--dark & { + border: 0.0625rem solid var( --clr-on-surface-dark-primary-8 ); + } +} + +// resources/styles/components/_changeslist.scss +body { + .mw-changeslist-legend { + background-color: var( --clr-surface ); + } +} + +// resources/styles/components/_debug.scss +/* Debug Mode needs some line breaks */ +ul#mw-debug-html > li > code { + overflow-wrap: break-word; +} + +// resources/styles/components/_dropdown.scss +body { + .oo-ui-dropdownWidget.oo-ui-widget-disabled .oo-ui-dropdownWidget-handle { + background-color: var( --clr-surface-2 ); + text-shadow: none; + } +} + +// resources/styles/components/_fieldbox.scss +body { + .fieldBox { + background: var( --clr-surface-2 ); + color: var( --clr-on-surface ); + } +} + +// resources/styles/components/_flaggedrevbox.scss +body { + .cdx-card__text__title { + color: var( --clr-on-surface ); + } + + .mw-data-after-content { + padding-top: 1rem; + } + + .cdx-message { + background-color: var( --clr-surface-3 ); + color: var( --clr-on-surface ); + + .cdx-message__icon { + -webkit-mask-image: url( 'data:image/svg+xml;utf8,' ); + mask-image: url( 'data:image/svg+xml;utf8,' ); + background-color: var( --clr-on-surface ); + } + } +} + +// resources/styles/components/_link-images.scss +a.feedlink { + background-image: none; + padding-left: unset; + + &.dropdown-item { + display: block; + width: 100%; /* For `