8f5be106f5
upstream: http://github.com/wikimedia/jquery.ime changes: * Support for contenteditable, like the VisualEditor surfaces. This support is very minimal now. Because of VE bugs on IME support, many things are broken. But one-one keyboard mappings should work with less issues. The UI of jquery.ime is not integrated with VE toolbar * More input methods - IPA-X-SAMPA by Amir - Armenian keymaps by Aleksey Chalabyan - Kurdish keymaps by Ghybu - Кыргыз keymap by Amir - Central Kurdish keyboards by Çalak * A lot of input method bug fixes multiple contributors * Minor UX fixes Introduces Rangy library. A module named rangy is defined in VisualEditor extension with more features of rangy. Here we need only the core library. This module is loaded dynamically from client when rangy is undefined. If VE is present rangy will be defined, the module defined in VE will be used. ie, This get loaded only when VE is not present and user trying to type in a contenteditable. Bug: 49569 Bug: 50849 Bug: 50220 Change-Id: Iadad5a4e5972fbd1359847526d28e9dbbe00a7c4
218 lines
4.3 KiB
CSS
218 lines
4.3 KiB
CSS
.imeselector {
|
|
position: absolute;
|
|
/* @embed */
|
|
background: url('../images/ime-active.png') no-repeat left center;
|
|
background-image: -webkit-linear-gradient(transparent, transparent), url('../images/ime-active.svg');
|
|
background-image: -moz-linear-gradient(transparent, transparent), url('../images/ime-active.svg');
|
|
background-image: linear-gradient(transparent, transparent), url('../images/ime-active.svg');
|
|
background-color: rgba(255,255,255,0.75);
|
|
background-position: left 3px center;
|
|
height: 15px;
|
|
font-size: small;
|
|
padding: 2px 2px 1px 20px;
|
|
box-shadow: 0 1px 3px 0 #777;
|
|
margin-top: 0;
|
|
text-align: left;
|
|
font-family: sans-serif;
|
|
white-space: nowrap;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.imeselector:hover {
|
|
box-shadow: 0 1px 3px 0 #565656;
|
|
border-top: none;
|
|
background-color: rgba(255,255,255,0.85);
|
|
}
|
|
|
|
.imeselector a,
|
|
.ime-disable {
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
outline: none;
|
|
color: #222222;
|
|
line-height: 1em;
|
|
padding-top: 4px;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.ime-setting-caret {
|
|
margin-left: 2px;
|
|
margin-top: 8px;
|
|
border-left: 4px solid transparent;
|
|
border-right: 4px solid transparent;
|
|
border-top: 4px solid #565656;
|
|
content: "";
|
|
display: inline-block;
|
|
height: 0;
|
|
vertical-align: top;
|
|
width: 0;
|
|
|
|
}
|
|
|
|
span.ime-disable-link {
|
|
padding-left: 20px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
span.ime-disable-shortcut {
|
|
text-align: right;
|
|
margin-left: 10px;
|
|
color: #888;
|
|
font-size: smaller;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.ime-list-title,
|
|
.ime-lang-title {
|
|
color: #39d;
|
|
border-bottom: solid 1px #39d;
|
|
text-align: left;
|
|
font-size: larger;
|
|
font-weight: normal;
|
|
padding-bottom: 5px;
|
|
padding-left: 20px;
|
|
padding-top: 9px;
|
|
margin: 0 0 1px;
|
|
}
|
|
|
|
.ime-language-list-wrapper {
|
|
position: relative;
|
|
padding: 0;
|
|
display: block;
|
|
overflow-y: auto;
|
|
max-height: 150px;
|
|
}
|
|
|
|
.imeselector-menu {
|
|
position: absolute;
|
|
top: 14px;
|
|
right: 0;
|
|
z-index: 1000;
|
|
display: none;
|
|
float: left;
|
|
margin-top: 13px;
|
|
min-width: 160px;
|
|
padding: 0;
|
|
border: 1px solid #888;
|
|
background-color: #FFFFFF;
|
|
-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;
|
|
text-align: left;
|
|
}
|
|
|
|
.imeselector-menu.ime-right {
|
|
right: auto;
|
|
}
|
|
|
|
.imeselector-menu ul {
|
|
width: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
/* The triangle shaped callout */
|
|
.imeselector-menu:before {
|
|
border-bottom: 7px solid #888;
|
|
border-left: 7px solid transparent;
|
|
border-right: 7px solid transparent;
|
|
content: "";
|
|
display: inline-block;
|
|
right: 9px;
|
|
position: absolute;
|
|
top: -7px;
|
|
}
|
|
|
|
.imeselector-menu.ime-right:before {
|
|
right: auto;
|
|
left: 9px;
|
|
}
|
|
|
|
.imeselector-menu:after {
|
|
border-bottom: 6px solid #FFFFFF;
|
|
border-left: 6px solid transparent;
|
|
border-right: 6px solid transparent;
|
|
content: "";
|
|
display: inline-block;
|
|
right: 10px;
|
|
position: absolute;
|
|
top: -6px;
|
|
}
|
|
|
|
|
|
.imeselector-menu.ime-right:after {
|
|
right: auto;
|
|
left: 10px;
|
|
}
|
|
|
|
.imeselector-menu.ime-position-top:before {
|
|
border-bottom: 0 none;
|
|
border-top: 7px solid #888;
|
|
top: auto;
|
|
bottom: -7px;
|
|
}
|
|
|
|
.imeselector-menu.ime-position-top:after {
|
|
border-bottom: 0 none;
|
|
border-top: 6px solid #FFFFFF;
|
|
top: auto;
|
|
bottom: -6px;
|
|
}
|
|
|
|
.imeselector-menu .ime-checked {
|
|
/* @embed */
|
|
background: url(../images/tick.png) no-repeat left 4px center;
|
|
background-image: -webkit-linear-gradient(transparent, transparent), url('../images/tick.svg');
|
|
background-image: -moz-linear-gradient(transparent, transparent), url('../images/tick.svg');
|
|
background-image: linear-gradient(transparent, transparent), url('../images/tick.svg');
|
|
}
|
|
|
|
.imeselector-menu .ime-help-link {
|
|
background-color: #f0f0f0;
|
|
border-radius: 0 0 5px 5px;
|
|
border-top: 1px solid #ddd;
|
|
margin-top: 6px;
|
|
padding: 2px 0;
|
|
color: #444;
|
|
}
|
|
|
|
.imeselector-menu .ime-help-link > a:hover {
|
|
background-color: #f0f0f0;
|
|
color: #000;
|
|
}
|
|
|
|
.imeselector-menu .selectable-row-item {
|
|
display: block;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
font-weight: normal;
|
|
color: #333333;
|
|
outline: none;
|
|
white-space: nowrap;
|
|
position: relative;
|
|
}
|
|
|
|
.imeselector-menu .selectable-row {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.imeselector-menu .selectable-row:hover {
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
.ime-open {
|
|
*z-index: 1000;
|
|
display: block;
|
|
}
|
|
|
|
.imeselector-menu li {
|
|
position: relative;
|
|
}
|