mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-09-26 19:56:49 +00:00
59079978ff
This is the language inspector UI engine with ULS core. The Language Inspector works alongside ULS to choose and change language blocks in text. The inspector was based on ve.ui.TextInputWidget and now changed to inherit ve.ui.Widget and display details in a table instead of an input textbox. Added jQuery.ULS module: * Repository: https://github.com/wikimedia/jquery.uls * Latest Commit 728f112ffc90b03b50c0109487886a2647f12020 * Taken 'src' / 'images' and 'css' folders into modules/jquery.uls Bug: 47759 Change-Id: I3c9fd6c135c05a54f6c7fc28c5962fc0a6677806
261 lines
6.5 KiB
CSS
261 lines
6.5 KiB
CSS
.uls-trigger {
|
|
/* @embed */
|
|
background: transparent url('../images/icon-language.png') no-repeat scroll left center;
|
|
background-image: -webkit-linear-gradient(transparent, transparent), url('../images/icon-language.svg');
|
|
background-image: -moz-linear-gradient(transparent, transparent), url('../images/icon-language.svg');
|
|
background-image: linear-gradient(transparent, transparent), url('../images/icon-language.svg');
|
|
padding-left: 30px;
|
|
}
|
|
|
|
.uls-menu {
|
|
position: absolute;
|
|
z-index: 1000;
|
|
display: none;
|
|
margin-top: 1px;
|
|
/* Styling */
|
|
background-color: #ffffff;
|
|
border: 1px solid #ccc;
|
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
-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;
|
|
}
|
|
|
|
.uls-wide {
|
|
min-width: 715px;
|
|
width: 45%;
|
|
}
|
|
|
|
.uls-title-region a {
|
|
padding-left: 15px;
|
|
}
|
|
|
|
.uls-menu .uls-title {
|
|
font-weight: normal;
|
|
border: none;
|
|
padding-top: 1.25em;
|
|
padding-left: 15px;
|
|
padding-bottom: 3px;
|
|
font-size: 18pt;
|
|
line-height: 1.25em;
|
|
color: #555;
|
|
}
|
|
|
|
.uls-menu .uls-no-results-found-title {
|
|
font-size: 16pt;
|
|
font-weight: bold;
|
|
line-height: 1.5em;
|
|
padding-left: 6px;
|
|
padding-top: 10px;
|
|
margin-top: 0;
|
|
margin-bottom: 15px;
|
|
border-bottom: none;
|
|
color: #555;
|
|
}
|
|
|
|
.uls-menu .uls-lcd-region-section .uls-lcd-region-title {
|
|
color: #777;
|
|
font-size: 14pt;
|
|
font-weight: lighter;
|
|
line-height: 1.5em;
|
|
padding-left: 0;
|
|
margin-top: 0;
|
|
margin-bottom: 10px;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.uls-worldmap {
|
|
/* @embed */
|
|
background: transparent url('../images/world_map.png') no-repeat scroll right top;
|
|
background-image: -webkit-linear-gradient(transparent, transparent), url('../images/world_map.svg');
|
|
background-image: -moz-linear-gradient(transparent, transparent), url('../images/world_map.svg');
|
|
background-image: linear-gradient(transparent, transparent), url('../images/world_map.svg');
|
|
background-size: 100%;
|
|
}
|
|
|
|
div.uls-region {
|
|
cursor: pointer;
|
|
padding: 0;
|
|
margin: 0;
|
|
height: 120px;
|
|
border-bottom-color: transparent;
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 2px;
|
|
}
|
|
|
|
.uls-worldmap .uls-region { /* The map doesn't flip */
|
|
/* @noflip */
|
|
float: left;
|
|
}
|
|
|
|
.uls-region a {
|
|
bottom: 2px;
|
|
left: 2px;
|
|
padding: 0;
|
|
position: absolute;
|
|
font-size: 13px;
|
|
line-height: 1.2em;
|
|
text-decoration: none;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
width: 99%;
|
|
}
|
|
|
|
.uls-region:hover {
|
|
/*Cross-browser background transparency*/
|
|
background: #3366bb;
|
|
background: rgba(51, 102, 187, 0.1);
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#253366bb,
|
|
endColorstr=#253366bb );
|
|
-ms-filter:
|
|
"progid:DXImageTransform.Microsoft.gradient(startColorstr=#253366bb, endColorstr=#253366bb)";
|
|
}
|
|
|
|
.map-block .active {
|
|
border-bottom-color: #3366bb;
|
|
border-bottom-style: solid;
|
|
}
|
|
|
|
.uls-menu .row .map-block {
|
|
top: 1px;
|
|
margin-right: 0;
|
|
padding-right: 0;
|
|
float: right;
|
|
overflow: hidden;
|
|
opacity: 0.7;
|
|
-moz-transition: opacity 0.2s linear;
|
|
-o-transition: opacity 0.2s linear;
|
|
-webkit-transition: opacity 0.2s linear;
|
|
transition: opacity 0.2s linear;
|
|
}
|
|
|
|
.map-block a {
|
|
color: #333;
|
|
opacity: 0;
|
|
-moz-transition: opacity 0.15s linear;
|
|
-o-transition: opacity 0.15s linear;
|
|
-webkit-transition: opacity 0.15s linear;
|
|
transition: opacity 0.15s linear;
|
|
}
|
|
|
|
.uls-menu .map-block:hover,
|
|
.uls-menu .map-block:hover a {
|
|
opacity: 1;
|
|
color: #333;
|
|
}
|
|
|
|
.map-block .uls-region-1 {
|
|
border-color: transparent;
|
|
}
|
|
|
|
.map-block:hover .active {
|
|
border-color: #3366bb;
|
|
}
|
|
|
|
.map-block .active a {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.icon-close {
|
|
/* @embed */
|
|
background: transparent url('../images/close.png') no-repeat scroll center center;
|
|
background-image: -webkit-linear-gradient(transparent, transparent), url('../images/close.svg');
|
|
background-image: -moz-linear-gradient(transparent, transparent), url('../images/close.svg');
|
|
background-image: linear-gradient(transparent, transparent), url('../images/close.svg');
|
|
float: right;
|
|
padding: 15px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.uls-menu .languagefilter {
|
|
background-color: transparent;
|
|
border: 1px solid #c9c9c9;
|
|
border-radius: 2px 2px 2px 2px;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
|
|
color: #333;
|
|
display: block;
|
|
padding: 6px;
|
|
-moz-transition: border 0.15s linear 0s;
|
|
-o-transition: border 0.15s linear 0s;
|
|
-webkit-transition: border 0.15s linear 0s;
|
|
transition: border 0.15s linear 0s;
|
|
}
|
|
|
|
.uls-menu .languagefilter:focus {
|
|
border: 1px solid #3366bb;
|
|
}
|
|
|
|
.uls-menu .search {
|
|
position: relative;
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F0F0F0', endColorstr='#FBFBFB');
|
|
background: #f8f8f8;
|
|
background: -webkit-gradient(linear, left top, left bottom, from(#F0F0F0), to(#FBFBFB));
|
|
background: -webkit-linear-gradient(top, #F0F0F0, #FBFBFB);
|
|
background: -moz-linear-gradient(top, #F0F0F0, #FBFBFB);
|
|
background: -ms-linear-gradient(top, #F0F0F0, #FBFBFB);
|
|
background: -o-linear-gradient(top, #F0F0F0, #FBFBFB);
|
|
background: linear-gradient(#F0F0F0, #FBFBFB);
|
|
border-top-color: #AAA;
|
|
border-top-style: solid;
|
|
border-top-width: 1px;
|
|
padding: 0.8em 0;
|
|
border-bottom-width: 1px;
|
|
border-bottom-style: solid;
|
|
border-bottom-color: #DDD;
|
|
}
|
|
|
|
.uls-menu .search-label {
|
|
/* @embed */
|
|
background: transparent url('../images/search.png') no-repeat scroll right center;
|
|
background-image: -webkit-linear-gradient(transparent, transparent), url('../images/search.svg');
|
|
background-image: -moz-linear-gradient(transparent, transparent), url('../images/search.svg');
|
|
background-image: linear-gradient(transparent, transparent), url('../images/search.svg');
|
|
background-size: 30px;
|
|
height: 32px;
|
|
width: 32px;
|
|
float: right;
|
|
}
|
|
|
|
.uls-menu .languagefilter-clear {
|
|
/* @embed */
|
|
background: transparent url('../images/clear.png') no-repeat scroll left center;
|
|
background-image: -webkit-linear-gradient(transparent, transparent), url('../images/clear.svg');
|
|
background-image: -moz-linear-gradient(transparent, transparent), url('../images/clear.svg');
|
|
background-image: linear-gradient(transparent, transparent), url('../images/clear.svg');
|
|
cursor: pointer;
|
|
height: 32px;
|
|
position: absolute;
|
|
width: 32px;
|
|
margin-left: -32px;
|
|
}
|
|
|
|
.uls-menu .filterinput {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
font-size: 14px;
|
|
height: 32px;
|
|
width: 100%;
|
|
text-align: left;
|
|
}
|
|
|
|
.uls-menu .filtersuggestion {
|
|
padding: 6px;
|
|
background-color: white;
|
|
color: #888;
|
|
border: 1px transparent;
|
|
border-radius: 2px 2px 2px 2px;
|
|
box-shadow: 0 1px 2px transparent inset;
|
|
left: 1px;
|
|
}
|
|
|
|
.uls-menu .search-input-block {
|
|
position: relative;
|
|
}
|