Skip to content

Commit

Permalink
feat(WikiEditor): ✨ update styles to 1.43
Browse files Browse the repository at this point in the history
  • Loading branch information
@alistair3149
alistair3149 committed Jan 23, 2025
1 parent 41c0ef4 commit 808f7b1
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 213 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`

Expand Down
192 changes: 51 additions & 141 deletions skinStyles/extensions/WikiEditor/ext.wikiEditor.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -23,106 +26,66 @@
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 */
.wikiEditor-ui-toolbar {
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 );
}

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 );
}
}
}
Expand All @@ -141,30 +104,18 @@

.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 {
background-color: var( --background-color-button-quiet--hover );
}

.options {
background-color: var( --color-surface-0 );
border-color: var( --border-color-base );

.option {
color: var( --color-emphasized );

Expand Down Expand Up @@ -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 );
}
}
}

Expand Down Expand Up @@ -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;
Expand Down
72 changes: 1 addition & 71 deletions skinStyles/extensions/WikiEditor/ext.wikiEditor.realtimepreview.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand All @@ -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;
}

0 comments on commit 808f7b1

Please sign in to comment.