f5ce066c80
In the "interlanguage" position ULS is shown after 2 clicks, so don't load it initially. In the "personal" position ULS is shown immediately after the language icon click, so load it, but conditionally. The new RL module ext.uls.mediawiki is added for setting jquery.uls defaults in a way that will lazy-load the language names. Change-Id: Ic33ef034c794a523b5403867196c6098a58eb5b1
152 lines
3.9 KiB
CSS
152 lines
3.9 KiB
CSS
/*
|
|
* 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 jquuery.uls.css with the path changed.
|
|
*/
|
|
.uls-trigger {
|
|
/* @embed */
|
|
background: transparent url('../../lib/jquery.uls/images/icon-language.png') no-repeat scroll left center;
|
|
background-image: -webkit-linear-gradient(transparent, transparent), url('../../lib/jquery.uls/images/icon-language.svg');
|
|
background-image: -moz-linear-gradient(transparent, transparent), url('../../lib/jquery.uls/images/icon-language.svg');
|
|
background-image: linear-gradient(transparent, transparent), url('../../lib/jquery.uls/images/icon-language.svg');
|
|
padding-left: 30px;
|
|
}
|
|
|
|
#pt-uls a.uls-trigger {
|
|
padding-left: 30px;
|
|
}
|
|
|
|
#p-lang .uls-settings-trigger {
|
|
/* @embed */
|
|
background: transparent url('../images/cog-sprite.png') no-repeat right top;
|
|
background-image: -webkit-linear-gradient(transparent, transparent), url('../images/cog-sprite.svg');
|
|
background-image: -moz-linear-gradient(transparent, transparent), url('../images/cog-sprite.svg');
|
|
background-image: linear-gradient(transparent, transparent), url('../images/cog-sprite.svg');
|
|
height: 16px;
|
|
width: 14px;
|
|
float: right;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.skin-vector #p-lang .uls-settings-trigger {
|
|
/* Put it in the middle of the first row of the section title */
|
|
margin-top: 3px;
|
|
}
|
|
|
|
#p-lang .uls-settings-trigger:hover {
|
|
background-position: right -16px;
|
|
}
|
|
|
|
/* Opera for some inexplicable reason confuses right and left padding with */
|
|
/* RTL text direction here (bug 45142). x:-o-prefocus won't match anything, */
|
|
/* but will make other browsers ignore this rule. */
|
|
x:-o-prefocus, body.rtl li#pt-uls {
|
|
/* @noflip */
|
|
direction: ltr;
|
|
}
|
|
|
|
#settings-block {
|
|
border-top: 1px solid #C9C9C9;
|
|
background: #f8f8f8;
|
|
background: -webkit-gradient(linear, left top, left bottom, from(#FBFBFB), to(#F0F0F0));
|
|
background: -webkit-linear-gradient(top, #FBFBFB, #F0F0F0);
|
|
background: -moz-linear-gradient(top, #FBFBFB, #F0F0F0);
|
|
background: -o-linear-gradient(top, #FBFBFB, #F0F0F0);
|
|
background: linear-gradient(#FBFBFB, #F0F0F0);
|
|
padding-left: 10px;
|
|
line-height: 1.2em;
|
|
-webkit-border-radius: 0 0 5px 5px;
|
|
-moz-border-radius: 0 0 5px 5px;
|
|
border-radius: 0 0 5px 5px;
|
|
}
|
|
|
|
.uls-menu a {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.uls-menu.callout .caret-before {
|
|
border-top: 20px solid transparent;
|
|
border-right: 20px solid #AAA;
|
|
border-bottom: 20px solid transparent;
|
|
display: inline-block;
|
|
left: -21px;
|
|
top: 30px;
|
|
position: absolute;
|
|
}
|
|
|
|
.uls-menu.callout .caret-after {
|
|
border-top: 20px solid transparent;
|
|
border-right: 20px solid #FCFCFC;
|
|
border-bottom: 20px solid transparent;
|
|
display: inline-block;
|
|
left: -20px;
|
|
top: 30px;
|
|
position: absolute;
|
|
}
|
|
|
|
#settings-block div.display-settings-block,
|
|
#settings-block div.input-settings-block {
|
|
display: inline-block;
|
|
margin: 8px 15px;
|
|
color: #565656;
|
|
}
|
|
|
|
#settings-block div.display-settings-block:hover,
|
|
#settings-block div.input-settings-block:hover {
|
|
color: #252525;
|
|
}
|
|
|
|
.uls-ui-languages button {
|
|
width: 23%;
|
|
text-overflow: ellipsis;
|
|
margin-right: 4%;
|
|
}
|
|
|
|
button.uls-more-languages {
|
|
width: auto;
|
|
}
|
|
|
|
.settings-title {
|
|
font-size: 11pt;
|
|
}
|
|
|
|
.settings-text {
|
|
color: #555555;
|
|
font-size: 9pt;
|
|
}
|
|
|
|
div.display-settings-block:hover .settings-text {
|
|
color: #252525;
|
|
}
|
|
|
|
/* 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;
|
|
/* @embed */
|
|
background: transparent url('../images/help.png') left center no-repeat;
|
|
/* @embed */
|
|
background-image: -webkit-linear-gradient(transparent, transparent), url('../images/help.svg');
|
|
/* @embed */
|
|
background-image: linear-gradient(transparent, transparent), url('../images/help.svg');
|
|
}
|
|
|
|
.ime-checked .ime-perime-help:hover {
|
|
opacity: 1;
|
|
}
|