a6a338c0f7
Currently, inside the page language selector of multilingual wikis (like Commons), the user can access the language settings by clicking the display and input setting buttons that are provided at the bottom of the language selector. However, instead of these buttons, the quick actions trigger should be used instead for a consistent user experience. The trigger will only provide access to the language settings, and other quick action items won't have any effect in this case. Bug: T314021 Change-Id: Iaaf61c85518b4d3d44d4a92dbf5dc7fdb96282fa
100 lines
2.1 KiB
Plaintext
100 lines
2.1 KiB
Plaintext
/* stylelint-disable selector-max-id */
|
|
@import 'mediawiki.mixins';
|
|
@import 'mediawiki.ui/variables.less';
|
|
|
|
#uls-settings-block {
|
|
// set default background color to #fcfcfc, to match ULS-LCD background color (inside jquery.uls.lcd.ss)
|
|
// TODO: There is no design token for this color. We should fix to use a design token here.
|
|
background-color: #fcfcfc;
|
|
|
|
&.uls-settings-block--vector-2022 {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 8px 12px;
|
|
|
|
// override grid styles, as we use flexbox here
|
|
&.row {
|
|
&::before,
|
|
&::after {
|
|
content: none;
|
|
}
|
|
}
|
|
|
|
&.uls-settings-block--with-add-languages {
|
|
background-color: @colorGray15;
|
|
border-top: 1px solid @colorGray12;
|
|
}
|
|
|
|
> button {
|
|
&.uls-add-languages-button {
|
|
background: transparent url( ../images/add.svg ) no-repeat left center;
|
|
margin-right: 32px;
|
|
padding-left: 32px;
|
|
}
|
|
|
|
&.uls-language-settings-button {
|
|
background: transparent url( ../images/cog.svg ) no-repeat center;
|
|
margin-left: auto;
|
|
min-width: unset;
|
|
border: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:not( .uls-settings-block--vector-2022 ) {
|
|
background-color: @colorGray15;
|
|
border-top: 1px solid @colorGray12;
|
|
padding-left: 10px;
|
|
line-height: 1.2em;
|
|
border-radius: 0 0 2px 2px;
|
|
|
|
> button {
|
|
background: left top transparent no-repeat;
|
|
// Support: Safari 3.1-6.1 & Android browser 3-4.3
|
|
// Don't support `background-size` values in `background` shorthand
|
|
background-size: 20px auto;
|
|
color: @colorGray5;
|
|
display: inline-block;
|
|
margin: 8px 15px;
|
|
border: 0;
|
|
padding: 0 0 0 26px;
|
|
font-size: medium;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
color: @colorGray2;
|
|
}
|
|
|
|
&.display-settings-block {
|
|
background-image: url( ../images/display.svg );
|
|
}
|
|
|
|
&.input-settings-block {
|
|
background-image: url( ../images/input.svg );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.uls-tipsy.uls-tipsy {
|
|
z-index: 1000;
|
|
}
|
|
|
|
.uls-empty-state {
|
|
padding: 28px;
|
|
|
|
.uls-empty-state__header,
|
|
.uls-empty-state__desc {
|
|
color: @colorGray5;
|
|
}
|
|
|
|
.uls-language-action-items {
|
|
list-style: none;
|
|
margin: 1em 0;
|
|
}
|
|
}
|
|
|
|
.empty-language-selector__language-settings-button {
|
|
margin: 12px;
|
|
}
|