mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-12-22 19:12:50 +00:00
ac204fd3a9
This should make zero difference in most situations. Except you navigate a list of parameters with the keyboard. In this case the SelectWidget gets a dark blue outline which overlaps with the light blue selection bar, but the outline disappears behind the bar. This looks odd. Making the color transparent fixes this without the need to fiddle with z-index or such. Bug: T311204 Change-Id: I7049eb60dc0ea72c2c4620f4351525fe447e0f46
178 lines
3.8 KiB
Plaintext
178 lines
3.8 KiB
Plaintext
@import 'mediawiki.mixins.less';
|
|
|
|
// Copied from wikimedia-ui-base.less
|
|
@wmui-color-accent50: #36c;
|
|
@color-base--subtle: #72777d;
|
|
|
|
@selected-text-color: @wmui-color-accent50;
|
|
// This shade on a white background results in #eaf3ff a.k.a. @wmui-color-accent90
|
|
@selected-shading: rgba( 0, 109, 255, 21/255 );
|
|
|
|
// This shade on a white background results in #eaecf0 a.k.a. @background-color-base--hover a.k.a.
|
|
// @wmui-color-base80
|
|
@hover-shading: rgba( 0, 24, 73, 21/255 );
|
|
|
|
@on-click-text-color: @wmui-color-accent50;
|
|
// Same as .oo-ui-optionWidget-pressed, a.k.a. @background-color-primary--hover
|
|
@on-click-shading: rgba( 41, 98, 204, 0.1 );
|
|
|
|
.ve-ui-mwTransclusionOutlineWidget {
|
|
.ve-ui-mwTransclusionOutline-ariaHidden {
|
|
display: none;
|
|
}
|
|
|
|
.ve-ui-mwTransclusionOutlinePartWidget {
|
|
margin-top: 24px;
|
|
margin-bottom: 24px;
|
|
|
|
&:first-child .ve-ui-mwTransclusionOutlineButtonWidget {
|
|
margin-top: -24px;
|
|
}
|
|
|
|
/* no margin for labels and wikitext */
|
|
&:last-child {
|
|
margin-bottom: -24px;
|
|
|
|
/* margin for last text */
|
|
.ve-ui-mwTransclusionOutlineTemplateWidget-no-template-parameters {
|
|
margin-bottom: 48px;
|
|
}
|
|
|
|
/* margin for last checkbox in the sidebar */
|
|
.ve-ui-mwTransclusionOutlineParameterWidget:last-child {
|
|
margin-bottom: 48px;
|
|
}
|
|
}
|
|
|
|
.ve-ui-mwTransclusionOutlineButtonWidget {
|
|
display: block;
|
|
margin-top: -10px;
|
|
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
> .oo-ui-buttonElement-button {
|
|
display: block;
|
|
overflow: hidden;
|
|
padding: 8px 0 8px 36px;
|
|
text-overflow: ellipsis;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background-color: @hover-shading;
|
|
}
|
|
|
|
/* click */
|
|
&:active {
|
|
background-color: @on-click-shading;
|
|
color: @on-click-text-color;
|
|
}
|
|
|
|
> .oo-ui-iconElement-icon {
|
|
left: 10px;
|
|
}
|
|
}
|
|
|
|
/* selected */
|
|
&.oo-ui-optionWidget-selected > .oo-ui-buttonElement-button {
|
|
background-color: @selected-shading;
|
|
|
|
&:hover {
|
|
background-color: @selected-shading;
|
|
color: @selected-text-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ve-ui-mwTransclusionOutlineTemplateWidget {
|
|
&-sticky {
|
|
background-color: #fff;
|
|
.position-sticky();
|
|
top: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
&-no-template-parameters {
|
|
font-style: italic;
|
|
color: @color-base--subtle;
|
|
margin: 8px 24px 24px 24px;
|
|
}
|
|
|
|
&-searchWidget {
|
|
margin: 8px 24px;
|
|
width: auto;
|
|
|
|
&:last-child {
|
|
/* Workaround to override oo-ui-inputWidget:last-child rule */
|
|
margin-right: 24px;
|
|
}
|
|
}
|
|
|
|
&-no-match {
|
|
font-style: italic;
|
|
color: @color-base--subtle;
|
|
margin: 8px 24px;
|
|
}
|
|
|
|
.ve-ui-mwTransclusionOutlineToggleUnusedWidget {
|
|
margin: -4px 24px 0 24px;
|
|
|
|
.oo-ui-labelElement-label {
|
|
word-break: break-word;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
white-space: normal;
|
|
}
|
|
}
|
|
|
|
.ve-ui-mwTransclusionOutlineParameterSelectWidget:focus {
|
|
border-radius: 2px;
|
|
box-shadow: inset 0 0 0 1px @wmui-color-accent50;
|
|
outline: 0;
|
|
}
|
|
|
|
.ve-ui-mwTransclusionOutlineParameterWidget {
|
|
overflow: hidden;
|
|
padding-bottom: 8px;
|
|
padding-left: 30px;
|
|
padding-top: 8px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
|
|
/* click */
|
|
&:active {
|
|
background-color: @on-click-shading;
|
|
color: @on-click-text-color;
|
|
}
|
|
|
|
&.ve-ui-mwTransclusionOutlineParameterWidget-activePage,
|
|
&.ve-ui-mwTransclusionOutlineParameterWidget-activePage:hover,
|
|
&.ve-ui-mwTransclusionOutlineParameterWidget-activePage.oo-ui-optionWidget-highlighted {
|
|
background-color: @selected-shading;
|
|
color: @selected-text-color;
|
|
}
|
|
|
|
&.oo-ui-optionWidget-highlighted {
|
|
background-color: @hover-shading;
|
|
color: #000;
|
|
}
|
|
|
|
&-hasValue {
|
|
font-weight: bold;
|
|
}
|
|
|
|
> .oo-ui-labelElement-label {
|
|
cursor: pointer;
|
|
display: inline;
|
|
}
|
|
|
|
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [ type='checkbox' ]:hover + span {
|
|
/* Stronger :hover effect to make the different checkbox/label click regions more obvious */
|
|
border-width: 2px;
|
|
}
|
|
}
|
|
}
|