fix(WikiEditor): 🐛 align toolbar buttons

This commit is contained in:
alistair3149 2024-06-24 15:09:49 -04:00
parent 7fb35f90f5
commit 84d58be232
No known key found for this signature in database
3 changed files with 32 additions and 18 deletions

View file

@ -10,6 +10,8 @@
@import '../../../resources/mixins.less';
@wikieditor-button-size: 42px;
/* jquery.wikiEditor.less */
.wikiEditor-ui {
.wikiEditor-ui-view {
@ -73,7 +75,7 @@
.tabs,
.section-main,
.section-secondary {
min-height: 42px; /* Align with VE */
min-height: @wikieditor-button-size; /* Align with VE */
}
/* Expandable Sections */
@ -89,10 +91,10 @@
margin: 0 8px;
span.tab {
line-height: 42px; /* Align with VE */
line-height: @wikieditor-button-size; /* Align with VE */
a {
height: 42px; /* Align with VE */
height: @wikieditor-button-size; /* Align with VE */
font-weight: var( --font-weight-medium );
color: var( --color-base--emphasized );
@ -136,15 +138,15 @@
}
.tool-select {
height: 42px;
height: @wikieditor-button-size;
background-color: var( --color-surface-0 );
border-color: var( --border-color-base );
.label {
height: 42px; /* Align with VE */
height: @wikieditor-button-size; /* Align with VE */
font-size: inherit;
font-weight: var( --font-weight-medium );
line-height: 42px; /* Align with VE */
line-height: @wikieditor-button-size; /* Align with VE */
color: var( --color-base--emphasized );
letter-spacing: inherit;
@ -251,11 +253,20 @@
}
}
}
.ve-init-mw-editSwitch .oo-ui-popupToolGroup.oo-ui-iconElement {
height: @wikieditor-button-size; /* Align with VE */
.oo-ui-popupToolGroup-handle {
padding-top: @wikieditor-button-size;
border-radius: var( --border-radius--small );
}
}
}
.tool.oo-ui-buttonElement-frameless.oo-ui-iconElement > .oo-ui-buttonElement-button {
min-width: 42px; /* Align with VE */
min-height: 42px; /* Align with VE */
min-width: @wikieditor-button-size; /* Align with VE */
min-height: @wikieditor-button-size; /* Align with VE */
border-radius: var( --border-radius--small );
> .oo-ui-iconElement-icon {

View file

@ -9,19 +9,22 @@
*/
/* RealtimePreview.less */
.ext-WikiEditor-realtimepreview-button {
&.oo-ui-buttonElement-frameless.oo-ui-labelElement > .oo-ui-buttonElement-button {
padding-right: 12px;
}
/* Fix incorrect hover color */
.ext-WikiEditor-realtimepreview-button:hover {
background-color: transparent;
}
&:hover {
background-color: var( --background-color-quiet--hover );
.ext-WikiEditor-realtimepreview-button > .oo-ui-buttonElement-button {
display: flex;
align-items: center;
> .oo-ui-labelElement-label {
margin-right: 8px;
margin-left: 6px;
}
}
.ext-WikiEditor-realtimepreview-button.oo-ui-toggleWidget-on .oo-ui-labelElement-label {
margin-left: 6px;
line-height: 2em; /* Align with VE */
color: var( --color-primary );
}

View file

@ -62,10 +62,10 @@
color: var( --color-base--subtle );
}
// HACK: Restore view button on revision page
// HACK: Restore view button on revision page (#845)
// There are no good way to target revision page
// The :not selector is needed because Extension:DiscussionTools loads the diff styles inline
body:not(.ns-talk) .action-view #ca-view {
body:not( .ns-talk ) .action-view #ca-view {
position: relative !important;
width: auto;
height: auto;