bryce/mediawiki-extensions-UniversalLanguageSelector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update jquery.uls and adapt styling

Browse Source 
jquery.uls.compact module is kept for now as some other
extensions depend on it. But it does not do anything
anymore.

There are some styles which should be in jquery.uls
upstream, but given the current state that is easiest
done in a follow-up later.

The main change is that language selection is now
compact by default: no heading etc.

Includes style changes for the dialogs, and especially
for the new position of the callout caret.

Bug: T85519
Change-Id: Iade8005439b4f58ab241752f69a5365d8bb88d2c
This commit is contained in:
Niklas Laxström
2016-04-27 08:45:42 +02:00
parent cbac4d18f6
commit a19e8c0dba
18 changed files with 148 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
resources/css/ext.uls.css
View File

@@ -1,25 +1,43 @@
/* Overrides to follow MediaWiki style */
.uls-menu {
border-radius: 4px;
}
.uls-search,
.uls-language-settings-close-block {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
.uls-language-list {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
.uls-menu a {
cursor: pointer;
}
.uls-menu.callout .caret-before {
border-top: 20px solid transparent;
border-right: 20px solid #C9C9C9;
border-bottom: 20px solid transparent;
.uls-menu.callout .caret-before,
.uls-menu.callout .caret-after {
border-top: 10px solid transparent;
border-right: 10px solid #C9C9C9;
border-bottom: 10px solid transparent;
display: inline-block;
left: -21px;
top: 30px;
left: -11px;
/* 17px aligns nicely with the size of the search row in language selection */
top: 17px;
position: absolute;
}
.uls-menu.callout .caret-after {
border-top: 20px solid transparent;
border-right: 20px solid #FCFCFC;
border-bottom: 20px solid transparent;
border-right: 10px solid #FCFCFC;
display: inline-block;
left: -20px;
top: 30px;
position: absolute;
left: -10px;
}
.uls-menu.callout--languageselection .caret-after {
border-right: 10px solid #FFF;
}
.uls-ui-languages button {
@@ -47,3 +65,47 @@ button.uls-more-languages {
div.display-settings-block:hover .settings-text {
color: #252525;
}
.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 #C9C9C9;
opacity: 0.8;
}
.uls-icon-back:hover {
opacity: 1;
cursor: pointer;
}
/* TODO: move to jquery.uls */
.grid .uls-search {
padding-left: 0px;
}
.uls-search-label {
background-size: 28px;
opacity: 0.8;
}
.uls-filterinput {
padding-left: 0px;
}

16
resources/css/ext.uls.languagesettings.css
View File

@@ -63,11 +63,6 @@
font-size: 12pt;
}
#languagesettings-settings-panel h5 {
color: #252525;
font-size: 10pt;
}
/* Buttons in the selector panel */
.menu-section {
color: #777;
@@ -83,7 +78,6 @@
.uls-language-settings-close-block {
background: #FFFFFF;
border-top-right-radius: 5px;
}
#languagesettings-panels .menu-section.active,
@@ -140,3 +134,13 @@ label.checkbox input[type="checkbox"] {
.waiting {
cursor: progress;
}
.uls-icon-close {
background: transparent url('../images/close.png') no-repeat scroll center center;
background-image: -webkit-linear-gradient(transparent, transparent), url('../images/close.svg');
/* @embed */
background-image: linear-gradient(transparent, transparent), url('../images/close.svg');
float: right;
padding: 15px;
cursor: pointer;
}