From 808f7b1cb07e7281cabcc04a074b22b922ff1c64 Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Wed, 22 Jan 2025 19:13:48 -0500 Subject: [PATCH] =?UTF-8?q?feat(WikiEditor):=20=E2=9C=A8=20update=20styles?= =?UTF-8?q?=20to=201.43?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- .../extensions/WikiEditor/ext.wikiEditor.less | 192 +++++------------- .../ext.wikiEditor.realtimepreview.less | 72 +------ 3 files changed, 53 insertions(+), 213 deletions(-) diff --git a/README.md b/README.md index 32a8e2524..9321aec74 100644 --- a/README.md +++ b/README.md @@ -162,7 +162,7 @@ Name | Version [VEForAll](https://www.mediawiki.org/wiki/Extension:VEForAll) | REL1_39 `0de7158` [VisualEditor](https://www.mediawiki.org/wiki/Extension:VisualEditor) | REL1_39 `65d89c9` [Wikibase](https://www.mediawiki.org/wiki/Extension:Wikibase) | REL1_35 `7bb503b` -[WikiEditor](https://www.mediawiki.org/wiki/Extension:WikiEditor) | REL1_39 `02e1c70` +[WikiEditor](https://www.mediawiki.org/wiki/Extension:WikiEditor) | REL1_43 [WikiHiero](https://www.mediawiki.org/wiki/Extension:WikiHiero) | REL1_39 `3a2be51` [WSSearchFront](https://www.mediawiki.org/wiki/Extension:WSSearchFront) | 3.5.4 `c27ebcb5` diff --git a/skinStyles/extensions/WikiEditor/ext.wikiEditor.less b/skinStyles/extensions/WikiEditor/ext.wikiEditor.less index ea5745bd6..e4da81c00 100644 --- a/skinStyles/extensions/WikiEditor/ext.wikiEditor.less +++ b/skinStyles/extensions/WikiEditor/ext.wikiEditor.less @@ -3,15 +3,18 @@ * * SkinStyles for Extension:WikiEditor * Module: ext.wikiEditor - * Version: REL1_39 02e1c70 - * - * Date: 2023-06-03 + * Version: REL1_43 */ @import '../../../resources/mixins.less'; @wikieditor-button-size: 42px; +.skin-citizen .mw-editform:has( .ext-WikiEditor-ResizingDragBar ) .editOptions { + border-top-left-radius: 0; + border-top-right-radius: 0; +} + /* jquery.wikiEditor.less */ .wikiEditor-ui { .wikiEditor-ui-view { @@ -23,44 +26,6 @@ border-bottom: 0; /* Bottom border is implemented with box shadow */ .mixin-citizen-sticky-header; } - - .wikiEditor-ui-right { - background: var( --color-surface-2 ); - } -} - -.wikiEditor-ui-controls { - background-color: var( --color-surface-0 ); -} - -.wikiEditor-ui-tabs { - background-color: var( --color-surface-0 ); - border-top-color: var( --border-color-base ); - border-left-color: var( --border-color-base ); - - div { - background-color: var( --color-surface-2 ); - border-right-color: var( --border-color-base ); - border-bottom-color: var( --border-color-base ); - - a { - color: var( --color-progressive ); - } - - &.current { - background-color: var( --color-surface-0 ); - border-bottom-color: var( --color-surface-0 ); - - a { - color: var( --color-base ); - } - } - } -} - -.wikiEditor-ui-buttons { - background-color: var( --color-surface-0 ); - border-top-color: var( --border-color-base ); } /* jquery.wikiEditor.toolbar.less */ @@ -68,53 +33,51 @@ background-color: var( --color-surface-0 ); box-shadow: none; - .group, - .section-secondary .group { - border-color: var( --border-color-base ); - } - .tabs, .section-main, .section-secondary { min-height: @wikieditor-button-size; /* Align with VE */ } - /* Expandable Sections */ - .sections { - .section { - border-top-color: var( --border-color-base ); + .tabs span.tab a, + .group .tool-select .label { + display: flex; + column-gap: var( --space-xxs ); + align-items: center; + height: @wikieditor-button-size; /* Align with VE */ + padding-inline: var( --space-xs ); + font-weight: var( --font-weight-medium ); + color: var( --color-emphasized ); + text-decoration: none; + filter: none; + + &::before, + &::after { + position: relative; + inset: unset; + opacity: var( --opacity-icon-base ); + filter: var( --filter-invert ); + } + + &:hover { + color: var( --color-emphasized ); + background-color: var( --background-color-button-quiet--hover ); + } + + &:active { + color: var( --color-emphasized ); + background-color: var( --background-color-button-quiet--active ); } } /* Top Level Containers */ /* Tabs */ .tabs { - margin: 0 8px; + margin-inline: 0; span.tab { line-height: @wikieditor-button-size; /* Align with VE */ - a { - height: @wikieditor-button-size; /* Align with VE */ - font-weight: var( --font-weight-medium ); - color: var( --color-emphasized ); - filter: none; - - &::before { - height: 100%; /* Align with VE */ - opacity: var( --opacity-icon-base ); - filter: var( --filter-invert ); - } - - &:hover { - color: var( --color-progressive--hover ); - } - - &:active { - color: var( --color-progressive--active ); - } - } - a:visited { color: var( --color-emphasized ); } @@ -122,7 +85,7 @@ a.current, a.current:visited { color: var( --color-progressive ); - border-bottom: var( --border-width-thick ) solid var( --color-progressive ); + box-shadow: inset 0 -2px 0 0 var( --color-progressive ); } } } @@ -141,20 +104,11 @@ .tool-select { height: @wikieditor-button-size; - background-color: var( --color-surface-0 ); - border-color: var( --border-color-base ); .label { - height: @wikieditor-button-size; /* Align with VE */ font-size: inherit; - font-weight: var( --font-weight-medium ); line-height: @wikieditor-button-size; /* Align with VE */ - color: var( --color-emphasized ); letter-spacing: inherit; - - &:hover { - background-color: var( --background-color-button-quiet--hover ); - } } .menu .options .option:hover { @@ -162,9 +116,6 @@ } .options { - background-color: var( --color-surface-0 ); - border-color: var( --border-color-base ); - .option { color: var( --color-emphasized ); @@ -196,63 +147,34 @@ } } - .group-search { - border-left-color: var( --border-color-base ); - } - - /* Booklet */ - .booklet { - > .index { - .wikiEditor-character-highlighted { - color: var( --color-emphasized ); - background-color: var( --background-color-button-quiet--hover ); - } - - > :hover { - background-color: var( --background-color-button-quiet--hover ); - } - - > .current { - color: var( --color-progressive ); - background-color: var( --background-color-progressive-subtle ); - } - } - } - - /* Help Pages */ - .page-table { - th { - color: var( --color-subtle ); - } - - td { - color: var( --color-emphasized ); - border-top-color: var( --border-color-base ); - } - } - /* Characters Pages */ .page-characters { div { + display: flex; + flex-wrap: wrap; + gap: var( --space-xxs ); + padding: var( --space-xxs ); + span { - color: var( --color-base ); - border-color: var( --border-color-base ); + display: flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + padding: 0; + margin: 0; + font-family: var( --font-family-monospace ); + border: 0; + border-radius: var( --border-radius-base ); &:hover { background-color: var( --background-color-button-quiet--hover ); - border-color: var( --border-color-base ); } - // Added active state &:active { background-color: var( --background-color-button-quiet--active ); } } - - .wikiEditor-character-highlighted { - color: var( --color-progressive ); - background-color: var( --background-color-progressive-subtle ); - } } } @@ -298,18 +220,6 @@ } } -.ui-widget { - table { - td.wikieditor-toolbar-table-preview-wrapper { - background: var( --color-surface-2 ); - } - - .wikieditor-toolbar-table-preview-frame { - background: var( --color-surface-0 ); - } - } -} - .wikiEditor-toolbar-dialog { .ui-dialog-content { padding: var( --space-md ) !important; diff --git a/skinStyles/extensions/WikiEditor/ext.wikiEditor.realtimepreview.less b/skinStyles/extensions/WikiEditor/ext.wikiEditor.realtimepreview.less index 0823e4fc1..544275788 100644 --- a/skinStyles/extensions/WikiEditor/ext.wikiEditor.realtimepreview.less +++ b/skinStyles/extensions/WikiEditor/ext.wikiEditor.realtimepreview.less @@ -3,9 +3,7 @@ * * SkinStyles for Extension:WikiEditor * Module: ext.wikiEditor.realtimepreview - * Version: REL1_39 02e1c70 - * - * Date: 2023-06-03 + * Version: REL1_43 */ /* RealtimePreview.less */ @@ -23,71 +21,3 @@ margin-left: 6px; } } - -.ext-WikiEditor-realtimepreview-button.oo-ui-toggleWidget-on .oo-ui-labelElement-label { - color: var( --color-progressive ); -} - -.ext-WikiEditor-ResizingDragBar-ns { - border-top-color: var( --border-color-base ); -} - -.ext-WikiEditor-realtimepreview-loadingbar div { - background-color: var( --color-progressive ); -} - -// Cancel out padding added in action.edit to avoid textarea overflow -.ext-WikiEditor-realtimepreview-textbox#wpTextbox1, -.mw-editform .ext-WikiEditor-realtimepreview-textbox#wpTextbox1 { - padding-bottom: 0; -} - -/* ResizingDragBar.less */ -.ext-WikiEditor-ResizingDragBar { - background-color: var( --color-surface-2 ); -} - -.ext-WikiEditor-ResizingDragBar-ew { - background-color: var( --color-surface-2 ); -} - -.ext-WikiEditor-ResizingDragBar span { - background-color: var( --color-subtle ); -} - -.ext-WikiEditor-ResizingDragBar:hover span { - background-color: var( --color-base ); -} - -/* TwoPaneLayout.less */ -.ext-WikiEditor-twopanes-TwoPaneLayout { - .ext-WikiEditor-twopanes-pane1, - .ext-WikiEditor-twopanes-pane2 { - border-color: var( --border-color-base ); - } -} - -/* ErrorLayout.less */ -.ext-WikiEditor-realtimepreview-ErrorLayout { - background-color: var( --color-surface-2 ); -} - -/* ManualWidget.less */ -.ext-WikiEditor-ManualWidget { - background-color: var( --color-surface-2 ); - border-color: var( --border-color-base ); - - .ext-WikiEditor-realtimepreview-manual-reload { - color: var( --color-progressive ); - } - - &.oo-ui-widget-disabled .ext-WikiEditor-realtimepreview-manual-reload { - color: var( --color-subtle ); - } -} - -// Merge dragbar with editoptions -.skin-citizen .mw-editform .editOptions { - border-top-left-radius: 0; - border-top-right-radius: 0; -}