diff options
Diffstat (limited to 'MLEB/UniversalLanguageSelector/resources/css')
12 files changed, 647 insertions, 0 deletions
diff --git a/MLEB/UniversalLanguageSelector/resources/css/ext.uls-vector.less b/MLEB/UniversalLanguageSelector/resources/css/ext.uls-vector.less new file mode 100644 index 00000000..f9e129d5 --- /dev/null +++ b/MLEB/UniversalLanguageSelector/resources/css/ext.uls-vector.less @@ -0,0 +1,22 @@ +@import 'mediawiki.mixins'; + +// We need higher specificity due to loading order of LESS files and jQuery.ULS +.skin-vector { + .uls-menu { + border-color: #c8ccd1; + .box-shadow( 0 2px 2px 0 rgba( 0, 0, 0, 0.25 ) ); // Overwrite lib/jquery.uls + font-size: 0.875em; // not inherited from `.mw-body-content`, as we insert at `body` + } + + .uls-search { + border-bottom-color: #c8ccd1; + } + + .uls-filtersuggestion { + color: #72777d; + } + + .uls-lcd-region-title { + color: #54595d; + } +} diff --git a/MLEB/UniversalLanguageSelector/resources/css/ext.uls.compactlinks.less b/MLEB/UniversalLanguageSelector/resources/css/ext.uls.compactlinks.less new file mode 100644 index 00000000..7266b90f --- /dev/null +++ b/MLEB/UniversalLanguageSelector/resources/css/ext.uls.compactlinks.less @@ -0,0 +1,34 @@ +@import 'mediawiki.mixins'; +@import 'ext.uls.mixins.less'; + +/* stylelint-disable selector-max-id */ +#p-lang .body ul .uls-trigger, +#p-lang .pBody ul .uls-trigger { + background-image: none; + padding: 0; +} +/* stylelint-enable selector-max-id */ + +.mw-interlanguage-selector, +.mw-interlanguage-selector:active { + cursor: pointer; + padding: 4px 6px 4px 25px; + font-size: 13px; + font-weight: normal; + .background-image-svg( '../images/compact-links-trigger.svg', '../images/compact-links-trigger.png' ); + background-size: 18px; + background-repeat: no-repeat; + background-position: left 4px center; + margin: 4px 0; + text-align: left; +} + +.mw-interlanguage-selector:active, +.mw-interlanguage-selector.selector-open { + background-color: #c8ccd1; + color: #54595d; +} + +.interlanguage-uls-menu { + .caret(); +} diff --git a/MLEB/UniversalLanguageSelector/resources/css/ext.uls.displaysettings.less b/MLEB/UniversalLanguageSelector/resources/css/ext.uls.displaysettings.less new file mode 100644 index 00000000..a15c31ef --- /dev/null +++ b/MLEB/UniversalLanguageSelector/resources/css/ext.uls.displaysettings.less @@ -0,0 +1,56 @@ +@import 'mediawiki.mixins'; + +.uls-display-settings-tab-switcher { + text-align: center; +} + +.uls-button-group { + display: inline-block; + position: relative; + padding: 0 0 0 0; + left: -20px; + z-index: 1; +} + +.ext-uls-sub-panel { + border-top: 1px solid #eaecf0; + padding-top: 25px; + top: -20px; + position: relative; + min-height: 150px; +} + +.uls-display-settings-font-selectors { + margin: 5px 0 15px 0; +} + +.uls-font-item { + border-bottom: 1px solid #eaecf0; + background: #f8f9fa; + padding: 10px 0; + + &:first-child { + border-top: 1px solid #eaecf0; + } +} + +/* stylelint-disable selector-max-id */ +.uls-font-label, +.uls-font-select, +#uls-display-settings-anon-log-in-cta { + font-size: 10pt; +} +/* stylelint-enable selector-max-id */ + +.uls-font-label { + color: #54595d; + font-size: 10pt; +} + +.uls-font-label strong { + color: #222; +} + +.uls-display-settings-anon-label { + font-weight: bold; +} diff --git a/MLEB/UniversalLanguageSelector/resources/css/ext.uls.inputsettings.less b/MLEB/UniversalLanguageSelector/resources/css/ext.uls.inputsettings.less new file mode 100644 index 00000000..36094e55 --- /dev/null +++ b/MLEB/UniversalLanguageSelector/resources/css/ext.uls.inputsettings.less @@ -0,0 +1,133 @@ +@import 'mediawiki.mixins'; + +.imelabel { + display: block; + padding-bottom: 10px; + font-size: 10pt; + line-height: 16pt; +} + +.imelabel span { + padding-left: 5px; +} + +.imelabel input { + float: left; +} + +.uls-ime-menu-settings-item { + background-color: #f8f9fa; + color: #222; + border-top: 1px solid #c8ccd1; + border-radius: 0 0 2px 2px; + margin-top: 6px; + padding: 4px 2px; + position: relative; +} + +.uls-ime-disable-link { + background: transparent no-repeat left top; + .background-image-svg( '../images/remove-input.svg', '../images/remove-input.png' ); + background-size: auto 16px; + padding-left: 22px; + padding-right: 26px; + padding-bottom: 10px; + cursor: pointer; +} + +.uls-ime-more-settings-link { + background: transparent no-repeat center top; + .background-image-svg( '../images/cog.svg', '../images/cog.png' ); + background-size: auto 14px; + border-left: 1px solid #c8ccd1; + width: 22px; + height: 14px; + position: absolute; + right: 0; + cursor: pointer; +} + +.uls-ime-menu-settings-item > a:hover { + background-color: #f8f9fa; + color: #000; +} + +.ext-uls-input-settings-imes-title:empty { + display: none; +} + +.uls-input-settings-disable-info, +.uls-input-settings-no-inputmethods { + color: #54595d; + padding-top: 10px; + padding-bottom: 15px; + font-size: 11pt; +} + +.down + .uls-input-settings-caret { + display: inline-block; + width: 0; + height: 0; + border-top: 0; + border-right: 8px solid transparent; + border-left: 8px solid transparent; + border-bottom: 8px solid #f8f9fa; + content: ''; + position: relative; + vertical-align: bottom; + top: 12px; + left: -16%; + margin: 0 -8px; +} + +.uls-input-settings-toggle { + padding-top: 10px; + margin-bottom: 10px; +} + +.uls-input-settings .uls-input-settings-inputmethods-list { + margin: 12px 0; + padding: 6px 10px; + background: #f8f9fa; + + .uls-input-settings-name { + unicode-bidi: -moz-isolate; + unicode-bidi: isolate; + } +} + +.uls-input-settings-inputmethods-list .mw-ui-radio { + display: block; +} + +.uls-ime-notification-bubble .link { + color: #36c; + cursor: pointer; +} + +.uls-input-settings .uls-ime-help { + margin-left: 10px; +} + +/* Ime menu customizations */ +.ime-perime-help { + display: none; +} + +.ime-checked .ime-perime-help { + display: inline-block; + width: 20px; + height: 100%; + position: absolute; + top: 0; + bottom: 0; + right: 0; + opacity: 0.75; + padding: 0; + background: transparent no-repeat left center; + .background-image-svg( '../images/help.svg', '../images/help.png' ); +} + +.ime-checked .ime-perime-help:hover { + opacity: 1; +} diff --git a/MLEB/UniversalLanguageSelector/resources/css/ext.uls.interface.less b/MLEB/UniversalLanguageSelector/resources/css/ext.uls.interface.less new file mode 100644 index 00000000..d8003ad3 --- /dev/null +++ b/MLEB/UniversalLanguageSelector/resources/css/ext.uls.interface.less @@ -0,0 +1,37 @@ +/* stylelint-disable selector-max-id */ +@import 'mediawiki.mixins'; + +#uls-settings-block { + background-color: #f8f9fa; + border-top: 1px solid #c8ccd1; + 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: #54595d; + display: inline-block; + // Normalize the button + margin: 8px 15px; + border: 0; + padding: 0 0 0 26px; + font-size: medium; + cursor: pointer; + + &:hover { + color: #222; + } + + &.display-settings-block { + .background-image-svg( '../images/display.svg', '../images/display.png' ); + } + + &.input-settings-block { + .background-image-svg( '../images/input.svg', '../images/input.png' ); + } + } +} diff --git a/MLEB/UniversalLanguageSelector/resources/css/ext.uls.interlanguage.less b/MLEB/UniversalLanguageSelector/resources/css/ext.uls.interlanguage.less new file mode 100644 index 00000000..5829292b --- /dev/null +++ b/MLEB/UniversalLanguageSelector/resources/css/ext.uls.interlanguage.less @@ -0,0 +1,30 @@ +/* stylelint-disable selector-max-id */ +@import 'mediawiki.mixins'; + +#p-lang .uls-settings-trigger { + background: transparent no-repeat center top; + .background-image-svg( '../images/cog-sprite.svg', '../images/cog-sprite.png' ); + border: 0; + min-height: 16px; + min-width: 16px; + float: right; + cursor: pointer; + + // Remove the dotted border for Firefox + &::-moz-focus-inner { + border: 0; + } + + &:focus { + outline: 1px solid #36c; + } +} + +.skin-vector #p-lang .uls-settings-trigger { + /* Put it in the middle of the first row of the section title */ + margin-top: 8px; +} + +#p-lang .uls-settings-trigger:hover { + background-position: center -16px; +} diff --git a/MLEB/UniversalLanguageSelector/resources/css/ext.uls.languagesettings.less b/MLEB/UniversalLanguageSelector/resources/css/ext.uls.languagesettings.less new file mode 100644 index 00000000..9996e480 --- /dev/null +++ b/MLEB/UniversalLanguageSelector/resources/css/ext.uls.languagesettings.less @@ -0,0 +1,170 @@ +@import 'mediawiki.mixins'; + +/* stylelint-disable selector-max-id */ +.uls-menu h3 { + border-bottom: medium none; + 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: #000; + 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: #222; + padding: 5px 0 5px 42px; + border: 1px solid 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 { + color: #000; + background-color: #fff; + padding-left: 40px; + background-position: left 13px top 6px; + border-left-width: 3px; + border-left-color: #36c; + } + + &:hover { + background-color: #fff; + } + + &:focus { + border-color: #36c; + } + + .settings-title { + font-size: 13pt; + } + + .settings-text { + color: #54595d; + font-size: 9pt; + } + + &:hover .settings-text { + color: #222; + } + + &.display-settings-block { + .background-image-svg( '../images/display.svg', '../images/display.png' ); + } + + &.input-settings-block { + .background-image-svg( '../images/input.svg', '../images/input.png' ); + } + } +} + +#languagesettings-settings-panel { + padding: 0 15px; + color: #222; + background: #fff; +} + +#languagesettings-settings-panel h3 { + color: #222; + padding-top: 15px; + margin-top: 1pt; + line-height: 20pt; + font-size: 16pt; +} + +#languagesettings-settings-panel h4 { + color: #222; + 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: #fff; +} + +.language-settings-buttons { + border-top: 1px solid #eaecf0; + margin-top: 25px; + padding: 15px; + width: auto; + text-align: right; +} + +.language-settings-buttons button { + margin-left: 15px; +} + +.uls-ui-languages p, +.checkbox { + color: #54595d; + font-size: 10pt; +} + +/* mediawiki.ui does not have a pressed state style. */ +#languagesettings-panels .mw-ui-pressed { + background-color: #2a4b8d; + color: #fff; + border-color: #2a4b8d; +} + +.checkbox input[ type='checkbox' ] { + margin-left: 0; +} + +.checkbox strong { + color: #222; +} + +label.checkbox input[ type='checkbox' ] { + float: left; +} + +.waiting { + cursor: progress; +} + +.uls-icon-close { + background: transparent no-repeat center center; + .background-image-svg( '../images/close.svg', '../images/close.png' ); + background-size: 16px 16px; // Support: Android Browser <= 4.3, doesn't accept it as part of `background` shorthand + float: right; + padding: 16px; + cursor: pointer; +} diff --git a/MLEB/UniversalLanguageSelector/resources/css/ext.uls.less b/MLEB/UniversalLanguageSelector/resources/css/ext.uls.less new file mode 100644 index 00000000..1bd0bdce --- /dev/null +++ b/MLEB/UniversalLanguageSelector/resources/css/ext.uls.less @@ -0,0 +1,70 @@ +@import 'ext.uls.mixins.less'; + +/* Overrides to follow MediaWiki style */ +.uls-menu { + border-radius: 2px; + /* Ensure base font size is same in different skins */ + font-size: medium; +} + +.uls-search, +.uls-language-settings-close-block { + border-top-right-radius: 2px; + border-top-left-radius: 2px; +} + +.uls-language-list { + border-bottom-right-radius: 2px; + border-bottom-left-radius: 2px; +} + +.uls-menu.callout { + .caret(); +} + +.uls-ui-languages button { + margin: 5px 15px 5px 0; + white-space: nowrap; + overflow: hidden; +} + +.uls-search-wrapper-wrapper { + position: relative; + padding-left: 40px; + margin-top: 5px; + margin-bottom: 5px; +} + +.uls-icon-back { + background: transparent url( ../images/back-grey-ltr.png ) no-repeat scroll center center; + background-image: -webkit-linear-gradient( transparent, transparent ), url( ../images/back-grey-ltr.svg ); + /* @embed */ + background-image: linear-gradient( transparent, transparent ), url( ../images/back-grey-ltr.svg ); + background-size: 28px; + background-position: center center; + height: 32px; + width: 40px; + display: block; + position: absolute; + left: 0; + border-right: 1px solid #c8ccd1; + opacity: 0.8; +} + +.uls-icon-back:hover { + opacity: 1; + cursor: pointer; +} + +.uls-menu .uls-no-results-view { + .uls-no-found-more { + background-color: #fff; + } + h3 { + padding: 0 28px; + margin: 0; + color: #54595d; + font-size: 1em; + font-weight: normal; + } +} diff --git a/MLEB/UniversalLanguageSelector/resources/css/ext.uls.mixins.less b/MLEB/UniversalLanguageSelector/resources/css/ext.uls.mixins.less new file mode 100644 index 00000000..db770a0d --- /dev/null +++ b/MLEB/UniversalLanguageSelector/resources/css/ext.uls.mixins.less @@ -0,0 +1,42 @@ +// Generate a caret by embedding in the callout. +// Expects callout to have either selector-right or selecter-left class on it to determine directionality. +.caret() { + &:before, + &:after { + border-top: 10px solid transparent; + border-bottom: 10px solid transparent; + display: inline-block; + /* 17px aligns nicely with the size of the search row in language selection */ + top: 17px; + position: absolute; + content: ''; + } + &.selector-right { + &:before { + /* @noflip */ + border-left: 10px solid #c8ccd1; + /* @noflip */ + right: -11px; + } + &:after { + /* @noflip */ + border-left: 10px solid #f8f9fa; + /* @noflip */ + right: -10px; + } + } + &.selector-left { + &:before { + /* @noflip */ + border-right: 10px solid #c8ccd1; + /* @noflip */ + left: -11px; + } + &:after { + /* @noflip */ + border-right: 10px solid #f8f9fa; + /* @noflip */ + left: -10px; + } + } +} diff --git a/MLEB/UniversalLanguageSelector/resources/css/ext.uls.preferencespage.less b/MLEB/UniversalLanguageSelector/resources/css/ext.uls.preferencespage.less new file mode 100644 index 00000000..fb69a216 --- /dev/null +++ b/MLEB/UniversalLanguageSelector/resources/css/ext.uls.preferencespage.less @@ -0,0 +1,3 @@ +.client-nojs .uls-preferences-link-wrapper { + display: none; +} diff --git a/MLEB/UniversalLanguageSelector/resources/css/ext.uls.pt-monobook.less b/MLEB/UniversalLanguageSelector/resources/css/ext.uls.pt-monobook.less new file mode 100644 index 00000000..eaf2070f --- /dev/null +++ b/MLEB/UniversalLanguageSelector/resources/css/ext.uls.pt-monobook.less @@ -0,0 +1,6 @@ +/* stylelint-disable selector-max-id */ + +#pt-uls a.uls-trigger { + // Use same padding-left as #pt-userpage + padding-left: 20px; +} diff --git a/MLEB/UniversalLanguageSelector/resources/css/ext.uls.pt.less b/MLEB/UniversalLanguageSelector/resources/css/ext.uls.pt.less new file mode 100644 index 00000000..f5b1dbe6 --- /dev/null +++ b/MLEB/UniversalLanguageSelector/resources/css/ext.uls.pt.less @@ -0,0 +1,44 @@ +@import 'mediawiki.mixins'; + +/* stylelint-disable selector-max-id */ + +/* + * The trigger can be placed in the personal toolbar near the username + * or near the interlanguage links. + */ + +/* + * A hack to load the icon before the rest of the module is lazy-loaded. + * Copied from jquery.uls.css with the path changed. + */ +.uls-trigger { + background: transparent no-repeat scroll left center; + .background-image-svg( '../../lib/jquery.uls/images/language.svg', '../../lib/jquery.uls/images/language.png' ); + // Let the SVG image fit without cropping or stretch + background-size: contain; + padding-left: 24px; +} + +#pt-uls a.uls-trigger { + padding-left: 18px; + // Let the SVG image fit without cropping or stretch + background-size: contain; + /* Fix alignment in vector: https://phabricator.wikimedia.org/T61239 */ + line-height: 1; +} + +/* Opera for some inexplicable reason confuses right and left padding with */ +/* RTL text direction here (bug T47142). x:-o-prefocus won't match anything, */ +/* but will make other browsers ignore this rule. */ +/* stylelint-disable selector-type-no-unknown */ +x:-o-prefocus, +body.rtl li#pt-uls { + /* @noflip */ + direction: ltr; +} +/* stylelint-enable selector-type-no-unknown */ + +/* Don't show it to users who disabled JS */ +.client-nojs #pt-uls { + display: none; +} |