WebFonts integration with ULS display settings.

This does not add much functionality. That will come in
future commits.

This commit has many cleanup, refactoring on the display settings,
language settings code.

Change-Id: I7fbc3ebb9b67c1afd80f159c2d82cd2a1c6bea74
This commit is contained in:
Santhosh Thottingal
2012-08-14 15:05:47 +05:30
committed by Amir E. Aharoni
parent 3f4b5e4540
commit e62b50c9d8
11 changed files with 228 additions and 75 deletions

View File

@@ -1,44 +1,14 @@
#uls-current-language-nav {
/* @embed */
background: url('../images/cog-16x16-ltr.png') no-repeat scroll right top transparent;
#uls-current-language-nav { /* @embed */
background: url('../images/cog-16x16-ltr.png') no-repeat scroll right
top transparent;
cursor: pointer;
}
#language-settings-dialog {
display: none; /* hidden initially */
/* XXX pretty random position values, just to make it visible */
bottom: 100px;
left: 200px;
/* From here on - from .uls-menu */
position: fixed;
z-index: 1000;
display: none;
min-width: 800px; /* changed */
margin-top: 1px;
width: 45%;
/* Styling */
background-color: #ffffff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
/* From uls-menu, unchanged */
#uls-current-language-nav a {
color: #0088CC;
}
#uls-current-language-nav h1 {
font-weight: normal;
padding-top: 1.25em;
@@ -49,6 +19,7 @@
padding-left: 15px;
color: #777;
}
#uls-current-language-nav h2 {
font-size: 16pt;
line-height: 1.5em;
@@ -58,6 +29,7 @@
border-bottom: none;
color: #777;
}
.uls-menu h3 {
font-size: 14pt;
line-height: 1.5em;
@@ -78,12 +50,45 @@
border-left: 3px solid transparent;
display: block;
font-size: 12pt;
background: url(http://dl.dropbox.com/u/30377416/i18n/icons/WMF-Agora-Display_settings-grey.png) no-repeat scroll 15px center transparent;
}
.menu-section.active{
.menu-section.active {
color: black;
background-color: #F6F6F6;
border-left-color: #3366BB;
background-image: url(http://dl.dropbox.com/u/30377416/i18n/icons/WMF-Agora-Display_settings-blue.svg);
}
button.toggle.button {
background: #eee;
color: black;
cursor: pointer;
border-top: solid 2px #eaeaea;
border-left: solid 2px #eaeaea;
border-bottom: solid 2px #777;
border-right: solid 2px #777;
padding: 5px 5px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
button.toggle.button.down {
background: #bbb;
border-top: solid 2px #777;
border-left: solid 2px #777;
border-bottom: solid 2px #eaeaea;
border-right: solid 2px #eaeaea;
}
.language-settings-buttons {
border-top: solid 2px #aaa;
padding: 10px;
margin-top: 10px;
}
label.checkbox input[type="checkbox"] {
padding-left: -20px;
float: left;
}

View File

@@ -2,18 +2,80 @@ div#settings-block {
border-left: 1px solid #C9C9C9;
padding-left: 10px;
}
div#display-settings-block {
div#display-settings-block {
/* @embed */
background: url('../images/display.png');
background-repeat: no-repeat;
background-size: 20px auto;
padding-left: 25px;
cursor: pointer;
background-color: #F6F6F6;
}
.settings-title {
font-size: 11pt;
}
.settings-text {
color: #555555;
font-size: 9pt;
}
button.button {
display: inline-block;
padding: 0.4065em 1.2195em 0.4065em;
font: bold 0.813em Arial, sans-serif;
line-height: 1;
color: black;
text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
cursor: pointer;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
button.button.blue {
background-color: #3366bb;
color: white;
background-image: -moz-linear-gradient(top, #3670c8, #3366bb);
background-image: -ms-linear-gradient(top, #3670c8, #3366bb);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3670c8),
color-stop(100%, #3366bb) );
background-image: -webkit-linear-gradient(top, #3670c8, #3366bb);
background-image: linear-gradient(#3670c8, #3366bb);
border: 1px #33589f solid;
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(startColorstr='#3670c8', endColorstr='#3366bb', GradientType=0)";
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#3670c8',
endColorstr='#3366bb', GradientType=0 );
}
button.button.blue:hover {
background-color: #3f77d7;
background-image: -moz-linear-gradient(top, #4c84da, #3f77d7);
background-image: -ms-linear-gradient(top, #4c84da, #3f77d7);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4c84da),
color-stop(100%, #3f77d7) );
background-image: -webkit-linear-gradient(top, #4c84da, #3f77d7);
background-image: linear-gradient(#4c84da, #3f77d7);
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c84da', endColorstr='#3f77d7', GradientType=0)";
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#4c84da',
endColorstr='#3f77d7', GradientType=0 );
}
button.button.blue:active {
background-color: #2a549c;
background-image: -moz-linear-gradient(top, #2d5ea9, #2a549c);
background-image: -ms-linear-gradient(top, #2d5ea9, #2a549c);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2d5ea9),
color-stop(100%, #2a549c) );
background-image: -webkit-linear-gradient(top, #2d5ea9, #2a549c);
background-image: linear-gradient(#2d5ea9, #2a549c);
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(startColorstr='#2d5ea9', endColorstr='#2a549c', GradientType=0)";
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#2d5ea9',
endColorstr='#2a549c', GradientType=0 );
}