resources/css/ext.uls.languagesettings.less
// TODO: Replace with @import 'mediawiki.skin.variables.less'; with MW core LTS v1.42 dependency.
@import '../../lib/codex-design-tokens/theme-wikimedia-ui-legacy.less';
@import 'mediawiki.mixins';
/* stylelint-disable selector-max-id */
.uls-menu h3 {
border-bottom: 0;
font-size: 14pt;
line-height: 1.5em;
margin-bottom: 10px;
margin-top: 0;
padding-left: 0;
}
.languagesettings-menu {
/* Override grid padding */
.grid & {
padding-left: 0;
padding-right: 0;
}
h1 {
color: @color-emphasized;
font-size: 16pt;
line-height: 20pt;
margin-top: 0;
font-weight: normal;
border: 0;
padding: 8px 0 3px 15px;
}
.menu-section {
/* Unstyle the button. Other properties seem already overriden. */
text-align: left;
width: 100%;
/* Using border instead of outline for focus (outline doesn't have enough space) */
outline: 0;
color: @color-base;
padding: 5px 0 5px 42px;
border: @border-width-base @border-style-base @border-color-transparent;
background: left 15px top 6px transparent no-repeat;
background-size: 20px auto;
cursor: pointer;
// Remove the dotted border for Firefox
&::-moz-focus-inner {
border: 0;
}
/* Active "tab" has thicker always visible left border. background-position
* and padding must be tweaked to avoid the image from moving */
&.active {
background-color: #fff;
color: @color-emphasized;
padding-left: 40px;
background-position: left 13px top 6px;
border-left-width: 3px;
border-left-color: @border-color-progressive;
}
&:hover {
background-color: #fff;
}
&:focus {
border-color: @background-color-progressive--focus;
}
.settings-title {
font-size: 13pt;
}
.settings-text {
color: @color-subtle;
font-size: 9pt;
}
&:hover .settings-text {
color: @color-base;
}
&.display-settings-block {
background-image: url( ../images/display.svg );
}
&.input-settings-block {
background-image: url( ../images/input.svg );
}
}
}
#languagesettings-settings-panel {
background-color: @background-color-base;
color: @color-base;
padding: 0 15px;
}
#languagesettings-settings-panel h3 {
color: @color-base;
padding-top: 15px;
margin-top: 1pt;
line-height: 20pt;
font-size: 16pt;
}
#languagesettings-settings-panel h4 {
color: @color-base;
font-size: 12pt;
}
.language-settings-dialog {
background: #f8f9fa;
/* Ensure base font size is same in different skins */
font-size: medium;
}
.uls-language-settings-close-block {
background: @background-color-base;
}
.language-settings-buttons {
border-top: @border-width-base @border-style-base #eaecf0;
margin-top: 25px;
padding: 15px;
width: auto;
text-align: right;
}
.language-settings-buttons button {
margin-left: 15px;
}
.uls-ui-languages p,
.checkbox {
color: @color-subtle;
font-size: 10pt;
}
/*
* @todo: ULS settings dialog uses buttons as tabs. Amend to use Tabs component
* from Codex when 1.39 support is no longer needed.
*/
#languagesettings-panels .uls-cdx-button-pressed {
background-color: @background-color-progressive--active;
color: @color-inverted;
border-color: @border-color-progressive--active;
}
.checkbox input[ type='checkbox' ] {
margin-left: 0;
}
.checkbox strong {
color: @color-base;
}
label.checkbox input[ type='checkbox' ] {
float: left;
}
.waiting {
cursor: progress;
}
.uls-icon-close {
background: transparent url( ../images/close.svg ) no-repeat center center;
// Support: Android Browser <= 4.3, doesn't accept `background-size` as part of `background` shorthand.
background-size: 16px 16px;
float: right;
padding: 16px;
cursor: pointer;
}