third_party/google_input_tools/src/chrome/os/inputview/common.css

   1 .inputview-layoutview {
   2   position: relative;
   3   -webkit-user-select: none;
   4 }
   5 .inputview-view {
   6   border-left: 1px solid rgba(55, 71, 79, 0.1);
   7   border-right: 1px solid rgba(55, 71, 79, 0.1);
   8   border-top: 1px solid rgba(255, 255, 255, 0.6);
   9 }
  10 .inputview-space-wrapper {
  11   display: table-cell;
  12   vertical-align: middle;
  13   text-align: center;
  14   position: relative;
  15   font-size: 18px;
  16   color: rgba(55, 71, 79, 0.7);
  17 }
  18 .inputview-space-grey-bg {
  19   background-color: rgba(55, 71, 79, 0.15);
  20 }
  21 .inputview-space-grey-bg.inputview-element-highlight {
  22   background-color: rgba(55, 71, 79, 0.6);
  23 }
  24 .inputview-canvasview,
  25 .inputview-skv {
  26   display: inline-block;
  27   overflow: hidden;
  28 }
  29 .inputview-sk {
  30   margin: 6px;
  31   position: relative;
  32 }
  33 .inputview-a11y .inputview-sk {
  34   margin: 2px 3px 3px 2px;
  35 }
  36 #us-compact-symbol .inputview-sk,
  37 #us-compact-more .inputview-sk,
  38 #us-compact-qwerty .inputview-sk {
  39   margin: 8px;
  40 }
  41 .inputview-small-keyboard .inputview-sk,
  42 .inputview-small-keyboard #us-compact-symbol .inputview-sk,
  43 .inputview-small-keyboard #us-compact-more .inputview-sk,
  44 .inputview-small-keyboard #us-compact-qwerty .inputview-sk {
  45   margin: 1px;
  46 }
  47 #us-compact-qwerty #Globe {
  48   margin: 5px 0 5px 0;
  49 }
  50 .inputview-character {
  51   position: absolute;
  52   text-align: center;
  53   color: rgba(55, 71, 89, 0.6);
  54   font-size: 12px;
  55   display: inline-block;
  56 }
  57 .inputview-a11y .inputview-character {
  58   font-size: 10px;
  59 }
  60 .inputview-ch {
  61   color: #37474f;
  62   font-size: 23px;
  63 }
  64 .inputview-digit-character.inputview-ch {
  65   font-size: 20px;
  66 }
  67 .inputview-font-small.inputview-special-key-name,
  68 .inputview-font-small.inputview-compact-key,
  69 .inputview-a11y .inputview-digit-character.inputview-ch {
  70   font-size: 17px;
  71 }
  72 .inputview-small-keyboard .inputview-font-small.inputview-special-key-name,
  73 .inputview-small-keyboard .inputview-font-small.inputview-compact-key,
  74 .inputview-small-keyboard .inputview-a11y .inputview-digit-character.inputview-ch {
  75   font-size: 12px;
  76 }
  77 .inputview-a11y .inputview-ch {
  78   font-size: 17px;
  79 }
  80 .inputview-vertical {
  81   display: inline-block;
  82   overflow: hidden;
  83 }
  84 .inputview-linear {
  85   display: inline-block;
  86 }
  87 .inputview-extended-transition {
  88   transition: margin-left 0.2s;
  89 }
  90 .inputview-container {
  91   position: fixed;
  92   bottom: 0;
  93   left: 0;
  94   border: 1px solid #eeeeee;
  95   background-color: #ECEFF1;
  96   -webkit-user-select: none;
  97   cursor: default;
  98 }
  99 .inputview-font {
 100   font-family: Roboto2, Roboto, Noto Sans, Sans-Serif;
 101 }
 102 .inputview-font[lang=am] {
 103   font-family: Roboto2, Roboto, Noto Sans Armenian, Sans-Serif;
 104 }
 105 .inputview-font[lang=il] {
 106   font-family: Roboto2, Roboto, Noto Sans Hebrew, Sans-Serif;
 107 }
 108 .inputview-font[lang=jp] {
 109   font-family: Roboto2, Roboto, MotoyaG04Gothic, IPAGothic, Sans-Serif;
 110 }
 111 .inputview-font[lang=ar] {
 112   font-family: Roboto2, Roboto, Noto Arabic Naskh ui, Sans-Serif;
 113 }
 114 .inputview-font[lang=bn] {
 115   font-family: Roboto2, Roboto, Noto Sans Bengali, Sans-Serif;
 116 }
 117 .inputview-font[lang=ethi] {
 118   font-family: Roboto2, Roboto, Noto Sans Ethiopic, Sans-Serif;
 119 }
 120 .inputview-font[lang=fa] {
 121   font-family: Roboto2, Roboto, Noto Arabic Naskh ui, Sans-Serif;
 122 }
 123 .inputview-font[lang=gu] {
 124   font-family: Roboto2, Roboto, Noto Sans Gujarati, Lohit Gujarati, Sans-Serif;
 125 }
 126 .inputview-font[lang=kn] {
 127   font-family: Roboto2, Roboto, Noto Sans Kannada, Lohit Kannada, Sans-Serif;
 128 }
 129 .inputview-font[lang=ml] {
 130   font-family: Roboto2, Roboto, Noto Sans Malayalam, Lohit Malayalam, Sans-Serif;
 131 }
 132 .inputview-font[lang=ta] {
 133   font-family: Roboto2, Roboto, Noto Sans Tamil, Lohit Tamil, Sans-Serif;
 134 }
 135 .inputview-font[lang=te] {
 136   font-family: Roboto2, Roboto, Noto Sans Telugu, Lohit Telugu, Sans-Serif;
 137 }
 138 .inputview-font[lang=th] {
 139   font-family: Roboto2, Roboto, Noto Sans Thai, Sans-Serif;
 140 }
 141 .inputview-font[lang=zh-CN] {
 142   font-family: Roboto2, Roboto, MYingHeiGB18030, Droid Sans Fallback, Sans-Serif;
 143 }
 144 .inputview-font[lang=zh-TW],
 145 .inputview-font[lang=zh-HK] {
 146   font-family: Roboto2, Roboto, MYingHeiB5HK, Droid Sans Fallback, Sans-Serif;
 147 }
 148 .inputview-font[lang=kr] {
 149   font-family: Roboto2, Roboto, NanumGothic, Sans-Serif;
 150 }
 151 .inputview-emoji-font {
 152   font-family: Noto Color Emoji, Noto Sans Emoji, Droid Emoji;
 153 }
 154 .inputview-emoticon {
 155   font-family: Noto Sans Emoji, Droid Emoji;
 156 }
 157 .inputview-modifier {
 158   display: table-cell;
 159   vertical-align: middle;
 160   color: rgba(55, 71, 89, 0.8);
 161   font-size: 16px;
 162   text-align: center;
 163   position: relative;
 164 }
 165 .inputview-a11y .inputview-modifier {
 166   font-size: 17px;
 167 }
 168 .inputview-menu-list-indicator {
 169   background-position: center;
 170   background-repeat: no-repeat;
 171   background-size: 25px;
 172   width: 20%;
 173 }
 174 .inputview-checked-menu-list {
 175   background-image: url('images/check_in_menu.png');
 176   background-position: 10px center;
 177   background-repeat: no-repeat;
 178   background-size: 18px 15px;
 179   box-sizing: border-box;
 180   font-weight: bold;
 181 }
 182 .inputview-checked-menu-list .inputview-menu-list-name {
 183   color: #37474f;
 184   font-weight: bold;
 185   font-size: 16px;
 186 }
 187 .inputview-menu-list-name {
 188   height: 100%;
 189   width: 80%;
 190   font-size: 14px;
 191   color: rgba(55, 71, 89, .6);
 192   overflow: hidden;
 193 }
 194 .inputview-menu-list-indicator-name {
 195   height: 90%;
 196   text-align: center;
 197 }
 198 .inputview-menu-list-indicator-name,
 199 .inputview-menu-list-name div {
 200   line-height: 3;
 201 }
 202 .inputview-ime-list-container {
 203   -webkit-box-orient: vertical;
 204   display: -webkit-box;
 205   width: 100%;
 206   overflow-y: auto;
 207   overflow-x: hidden;
 208 }
 209 .inputview-ime-list-container .inputview-menu-list-item {
 210   border-bottom: solid 1px rgba(55, 71, 89, .2);
 211   box-sizing: border-box;
 212 }
 213 .inputview-menu-list-item {
 214   -webkit-box-orient: horizontal;
 215   padding-left: 25px;
 216   display: -webkit-box;
 217   font-size: 16px;
 218   width: 100%;
 219 }
 220 .inputview-menu-footer-item {
 221   position: relative;
 222 }
 223 .inputview-menu-footer-item:not(:last-child):after {
 224   background-color: #cccccc;
 225   content: '';
 226   height: 70%;
 227   position: absolute;
 228   right: 0;
 229   top: 15%;
 230   width: 1px;
 231 }
 232 .inputview-menu-footer-emoji-button {
 233   background: url('images/emoji.png') no-repeat center;
 234   background-size: 18px;
 235   height: 100%;
 236 }
 237 .inputview-menu-footer-handwriting-button {
 238   background: url('images/handwriting_access.png') no-repeat center;
 239   background-size: 18px;
 240   height: 100%;
 241 }
 242 .inputview-menu-footer-setting-button {
 243   background: url('images/setting.png') no-repeat center;
 244   background-size: 18px;
 245   height: 100%;
 246 }
 247 .inputview-menu-footer-floating-button {
 248   /* TODO: replace floating.png with a proper image. */
 249   background: url('images/floating.png') no-repeat center;
 250   background-size: 18px;
 251   height: 100%;
 252 }
 253 .inputview-menu-footer-docking-button {
 254   /* TODO: replace docking.png with a proper image. */
 255   background: url('images/docking.png') no-repeat center;
 256   background-size: 18px;
 257   height: 100%;
 258 }
 259 .inputview-menu-footer {
 260   -webkit-box-orient: horizontal;
 261   background: rgba(55, 71, 89, .08);
 262   display: -webkit-box;
 263 }
 264 .inputview-gesture-canvas-view {
 265   /* Overlap */
 266   position: absolute;
 267   left: 0;
 268   top: 0;
 269   width: 100%;
 270   height: 100%;
 271   z-index: 1;
 272   pointer-events: none;
 273 }
 274 .inputview-gesture-editing-finger-tracker {
 275   background: url('images/gesture_handle_200.png') no-repeat center;
 276   background-size: 64px;
 277   position: fixed;
 278   z-index: 1000;
 279 }
 280 .inputview-gesture-ripple {
 281   background: white;
 282   border-radius: 50%;
 283   width: 44px;
 284   height: 44px;
 285   opacity: 0;
 286   position: fixed;
 287   z-index: 998;
 288 }
 289 .inputview-small-keyboard .inputview-globe-icon {
 290   background-size: 10px 10px;
 291   height: 10px;
 292   width: 10px;
 293 }
 294 .inputview-globe-icon {
 295   background: transparent url('images/globe.png') 0 0 / 20px 20px no-repeat;
 296   display: inline-block;
 297   width: 20px;
 298   height: 20px;
 299 }
 300 .inputview-menu-view,
 301 .inputview-altdata-view {
 302   -webkit-box-shadow: 0 0 6px rgba(204, 204, 204, 0.65),
 303                       0 0 2px rgba(136, 136, 136, 0.65),
 304                       0 0 6px rgba(204, 204, 204, 0.65),
 305                       0 0 6px rgba(204, 204, 204, 0.65);
 306   background-color: white;
 307   cursor: default;
 308   position: fixed;
 309   z-index: 999;
 310 }
 311 .inputview-altdata-separator {
 312   height: 20px;
 313   border-left: 1px solid #ddd;
 314   position: relative;
 315   display: inline-block;
 316 }
 317 .inputview-swipe-view {
 318   background-color: rgba(0, 0, 0, 0);
 319   display: inline-flex;
 320   position: fixed;
 321   z-index: 999;
 322 }
 323 .inputview-swipe-separator {
 324   display: inline;
 325   opacity: 0;
 326   position: relative;
 327 }
 328 .inputview-small-keyboard .inputview-swipe-key {
 329   font-size: 12px;
 330 }
 331 .inputview-swipe-key {
 332   display: inline;
 333   vertical-align: middle;
 334   opacity: 0;
 335   position: relative;
 336 }
 337 .inputview-altdata-key {
 338   display: table-cell;
 339   font-size: 23px;
 340   color: #111111;
 341   vertical-align: middle;
 342   text-align: center;
 343 }
 344 .inputview-small-keyboard .inputview-altdata-key {
 345   font-size: 20px;
 346 }
 347 .inputview-a11y .inputview-altdata-key {
 348   font-size: 18px;
 349 }
 350 .inputview-candidate.inputview-candidate-default {
 351   color: #111111;
 352 }
 353 .inputview-candidate.inputview-candidate-autocorrect {
 354   font-weight: bold;
 355   color: #111111;
 356 }
 357 .inputview-candidate.inputview-candidate-number {
 358   font-size: 25px;
 359 }
 360 .inputview-small-keyboard .inputview-candidate.inputview-candidate-number {
 361   font-size: 20px;
 362 }
 363 .inputview-candidate-view {
 364   overflow: hidden;
 365   display: table-cell;
 366 }
 367 .inputview-candidate {
 368   display: table-cell;
 369   font-size: 18px;
 370   color: #555555;
 371   vertical-align: middle;
 372   text-align: center;
 373   text-overflow: ellipsis;
 374 }
 375 .inputview-a11y .inputview-candidate {
 376   font-size: 12px;
 377 }
 378 .inputview-toolbar-separator,
 379 .inputview-candidate-separator {
 380   border-left: 1px solid #ddd;
 381   position: relative;
 382   display: inline-block;
 383 }
 384 .inputview-table-cell {
 385   display: table-cell;
 386   vertical-align: middle;
 387   text-align: center;
 388 }
 389 .inputview-small-keyboard .inputview-title {
 390   font-size: 10px;
 391 }
 392 .inputview-title {
 393   font-size: 16px;
 394   color: #AAAAAA;
 395 }
 396 .inputview-special-key-name {
 397   display: block;
 398 }
 399 .inputview-modifier-state-icon {
 400   background-image: url('images/modifier-off.png');
 401   background-repeat: no-repeat;
 402   background-size: 16px 4px;
 403   display: inline-block;
 404   width: 16px;
 405   height: 4px;
 406 }
 407 .inputview-modifier-state-icon.inputview-modifier-on {
 408   background: url('images/modifier-on.png');
 409 }
 410 .inputview-modifier-state-icon.inputview-hold {
 411   -webkit-box-shadow: 0 0 5px 1px #397FFB;
 412   opacity: 0.9;
 413 }
 414 .inputview-track-cover,
 415 .inputview-floating-cover,
 416 .inputview-altdata-cover {
 417   position: fixed;
 418   bottom: 0;
 419   left: 0;
 420   background-color: white;
 421   opacity: 0.5;
 422   z-index: 1;
 423 }
 424 .inputview-track-cover {
 425   background-color: #eceff1;
 426   backface-visibility: hidden;
 427   opacity: 0.9;
 428   overflow: hidden;
 429   top: 43px;
 430   z-index: 998;
 431 }
 432 .inputview-arrow-key {
 433   display: inline-block;
 434   height: 13.5px;
 435 }
 436 .inputview-up-key {
 437   background-image: transparent url('images/up.png') 0 0/16px 13.5px no-repeat;
 438   width: 16px;
 439 }
 440 .inputview-down-key {
 441   background: transparent url('images/down.png') 0 0/16px 13.5px no-repeat;
 442   width: 16px;
 443 }
 444 .inputview-left-key {
 445   background: transparent url('images/left.png') 0 0/8.5px 13.5px no-repeat;
 446   width: 9px;
 447 }
 448 .inputview-right-key {
 449   background: transparent url('images/right.png') 0 0/9px 13.5px no-repeat;
 450   width: 9px;
 451 }
 452 .inputview-page-up-icon {
 453   background: transparent url('images/arrow_up_active.png') 0 0 no-repeat;
 454   background-size: 10px 6.5px;
 455   width: 10px;
 456   height: 6.5px;
 457   display: inline-block;
 458 }
 459 .inputview-page-navi-inactive .inputview-page-up-icon {
 460   background: transparent url('images/arrow_up_inactive.png') 0 0 no-repeat;
 461   background-size: 10px 6.5px;
 462 }
 463 .inputview-page-down-icon {
 464   background: transparent url('images/arrow_down_active.png') 0 0 no-repeat;
 465   background-size: 10px 6.5px;
 466   width: 10px;
 467   height: 6.5px;
 468   display: inline-block;
 469 }
 470 .inputview-page-navi-inactive .inputview-page-down-icon {
 471   background: transparent url('images/arrow_down_inactive.png') 0 0 no-repeat;
 472   background-size: 10px 6.5px;
 473 }
 474 .inputview-small-keyboard .inputview-menu-icon {
 475   background: transparent url('images/3dots.png') 0 0/2px 9px no-repeat;
 476   width: 2px;
 477   height: 9px;
 478 }
 479 .inputview-menu-icon {
 480   background: transparent url('images/3dots.png') 0 0/4px 17px no-repeat;
 481   display: inline-block;
 482   width: 4px;
 483   height: 17px;
 484 }
 485 .inputview-small-keyboard .inputview-hide-keyboard-icon {
 486   background-size: 16px 16px;
 487   height: 16px;
 488   width: 16px;
 489 }
 490 .inputview-hide-keyboard-icon {
 491   background: transparent url('images/hidekeyboard.png') 0 0/32px 32px no-repeat;
 492   display: inline-block;
 493   width: 32px;
 494   height: 32px;
 495 }
 496 .inputview-candidate.inputview-candidate-highlight,
 497 .inputview-toolbar-button.inputview-candidate-highlight,
 498 .inputview-element-highlight,
 499 .inputview-candidate.inputview-candidate-highlight {
 500   background-color: #dddddd;
 501 }
 502 .inputview-menu-footer-item.inputview-element-highlight {
 503   background-color: #cccccc;
 504 }
 505 .inputview-small-keyboard .inputview-backspace-icon,
 506 .inputview-small-keyboard .inputview-shift-icon {
 507   background-size: 14px 14px;
 508   height: 14px;
 509   width: 14px;
 510 }
 511 .inputview-backspace-icon {
 512   background: transparent url('images/backspace.png');
 513   background-size: 24px 24px;
 514   display: inline-block;
 515   height: 24px;
 516   width: 24px;
 517 }
 518 .inputview-small-keyboard .inputview-enter-icon {
 519   background-size: 20px 20px;
 520   height: 20px;
 521   width: 20px;
 522 }
 523 .inputview-enter-icon {
 524   background: transparent url('images/enter.png');
 525   background-size: 40px 40px;
 526   display: inline-block;
 527   width: 40px;
 528   height: 40px;
 529 }
 530 .inputview-special-key-highlight .inputview-enter-icon {
 531   background: transparent url('images/enter_pressed.png');
 532   background-size: 40px 40px;
 533 }
 534 .inputview-space-icon {
 535   background: transparent url('images/space-key.png');
 536   background-size: 30px 7.5px;
 537   display: inline-block;
 538   width: 30px;
 539   height: 7.5px;
 540 }
 541 .inputview-small-keyboard .inputview-shift-icon {
 542   background-size: 14px 14px;
 543   width: 14px;
 544   height: 14px;
 545 }
 546 .inputview-shift-icon {
 547   background: transparent url('images/shift.png');
 548   background-size: 25px 22px;
 549   display: inline-block;
 550   width: 25px;
 551   height: 22px;
 552 }
 553 .inputview-special-key-highlight,
 554 .inputview-special-key-highlight .inputview-compact-key,
 555 .inputview-element-highlight {
 556   background-color: rgba(55, 71, 79, 0.15);
 557 }
 558 .inputview-element-highlight.inputview-container {
 559   background-color: #ECEFF1;
 560 }
 561 .inputview-special-key-disable-bg-hl.inputview-special-key-highlight {
 562   background-color: transparent;
 563 }
 564 .inputview-small-keyboard .inputview-special-key-highlight .inputview-shift-icon {
 565   background-size: 12px 11px;
 566 }
 567 .inputview-special-key-highlight .inputview-shift-icon {
 568   background: transparent url('images/shift-pressed.png');
 569   background-size: 25px 22px;
 570 }
 571 .inputview-small-keyboard .inputview-functional-key-sticky .inputview-shift-icon {
 572   background-size: 12px 11px;
 573 }
 574 .inputview-functional-key-sticky .inputview-shift-icon {
 575   background: transparent url('images/shift-press-hold.png');
 576   background-size: 25px 22px;
 577 }
 578 .inputview-tab-icon {
 579   background: transparent url('images/tab_in_fullsize.png');
 580   background-size: 21px 12px;
 581   display: inline-block;
 582   width: 21px;
 583   height: 12px;
 584 }
 585 .inputview-capslock-dot {
 586   background-color: #ccc;
 587   width: 6px;
 588   height: 6px;
 589   position: absolute;
 590   top: 8px;
 591   right: 8px;
 592 }
 593 .inputview-capslock-dot-highlight {
 594   background-color: #4285f4;
 595 }
 596 .inputview-small-keyboard .inputview-hint-text {
 597   font-size: 8px;
 598 }
 599 .inputview-hint-text {
 600   font-size: 16px;
 601   color: rgba(55, 71, 89, 0.6);
 602 }
 603 .inputview-inline-div {
 604   display: inline-block;
 605 }
 606 .inputview-compact-key {
 607   font-size: 28px;
 608   color: #37474f;
 609 }
 610 .inputview-small-keyboard .inputview-compact-key {
 611   font-size: 19px;
 612 }
 613 .inputview-small-keyboard .inputview-compact-switcher {
 614   background-size: 10px 7px;
 615   height: 7px;
 616   width: 10px;
 617 }
 618 .inputview-compact-switcher {
 619   background: transparent url('images/compact.png');
 620   background-size: 19px 14px;
 621   display: inline-block;
 622   width: 19px;
 623   height: 14px;
 624 }
 625 .inputview-regular-switcher {
 626   background: transparent url('images/regular_size.png');
 627   background-size: 19px 14px;
 628   display: inline-block;
 629   width: 19px;
 630   height: 14px;
 631 }
 632 #Space {
 633   color: rgba(55, 71, 89, 0.6);
 634   font-size: 18px;
 635 }
 636 .inputview-small-keyboard #Space {
 637   font-size: 9px;
 638 }
 639 #Menu {
 640   font-weight: bold;
 641   margin-left: 0 !important;
 642 }
 643 .inputview-a11y #Globe {
 644   margin: 2px 0 3px 0;
 645 }
 646 #Globe {
 647   margin: 3px 0 4px 0;
 648 }
 649 #Globe:after {
 650   background-color: #cccccc;
 651   content: '';
 652   height: 50%;
 653   position: absolute;
 654   right: 0;
 655   top: 25%;
 656   width: 1px;
 657 }
 658 .inputview-three-candidates {
 659   text-align: center;
 660   vertical-align: middle;
 661 }
 662 .inputview-candidate-ic {
 663   display: inline-block;
 664 }
 665
 666 .inputview-shrink-candidates-icon {
 667   background: transparent url('images/hide_candidates.png') 0 0/17px 16.5px no-repeat;
 668   height: 17px;
 669   width: 16.5px;
 670 }
 671
 672 .inputview-expand-candidates-icon {
 673   background: transparent url('images/show_candidates.png') 0 0/17px 16.5px no-repeat;
 674   height: 17px;
 675   width: 16.5px;
 676 }
 677
 678 .inputview-copy-icon {
 679   background: transparent url('images/copy.png') 0 0/17px 16.5px no-repeat;
 680   height: 17px;
 681   width: 16.5px;
 682 }
 683
 684 .inputview-cut-icon {
 685   background: transparent url('images/cut.png') 0 0/17px 16.5px no-repeat;
 686   height: 17px;
 687   width: 16.5px;
 688 }
 689
 690 .inputview-paste-icon {
 691   background: transparent url('images/paste.png') 0 0/17px 16.5px no-repeat;
 692   height: 17px;
 693   width: 16.5px;
 694 }
 695
 696 .inputview-bold-icon {
 697   background: transparent url('images/bold.png') 0 0/17px 16.5px no-repeat;
 698   height: 17px;
 699   width: 16.5px;
 700 }
 701
 702 .inputview-italics-icon {
 703   background: transparent url('images/italic.png') 0 0/17px 16.5px no-repeat;
 704   height: 17px;
 705   width: 16.5px;
 706 }
 707
 708 .inputview-underline-icon {
 709   background: transparent url('images/underline.png') 0 0/17px 16.5px no-repeat;
 710   height: 17px;
 711   width: 16.5px;
 712 }
 713
 714 .inputview-select-all-icon {
 715   background: transparent url('images/select_all.png') 0 0/17px 16.5px no-repeat;
 716   height: 17px;
 717   width: 16.5px;
 718 }
 719
 720 .inputview-redo-icon {
 721   background: transparent url('images/redo.png') 0 0/17px 16.5px no-repeat;
 722   height: 17px;
 723   width: 16.5px;
 724 }
 725
 726 .inputview-undo-icon {
 727   background: transparent url('images/undo.png') 0 0/17px 16.5px no-repeat;
 728   height: 17px;
 729   width: 16.5px;
 730 }
 731
 732 /**
 733  * The following css style is for handwriting panel,
 734  * please keep it in the end of the file
 735  */
 736 .inputview-small-keyboard .inputview-handwriting {
 737   font-size: 8px;
 738 }
 739 .inputview-handwriting {
 740   font-size: 16px;
 741 }
 742
 743 .inputview-a11y.inputview-handwriting .inputview-modifier {
 744   font-size: 16px;
 745 }
 746
 747 .inputview-handwriting-switcher {
 748   background: url('images/handwriting-circle.png');
 749   background-size: 12px 12px;
 750   display: inline-block;
 751   width: 12px;
 752   height: 12px;
 753 }
 754
 755 .inputview-handwriting-back {
 756   float: right;
 757   color: #111111;
 758   text-align: center;
 759 }
 760
 761 .inputview-canvas {
 762   cursor: url('images/handwriting-circle.png') 12 12, auto;
 763 }
 764 #candidateView {
 765   background-color: #E4E7E9;
 766 }
 767 .inputview-handwriting-network-error {
 768   background: no-repeat url('images/error.png');
 769   padding: 0 0 0 50px;
 770   position: absolute;
 771   width: 600px;
 772   height: 100px;
 773 }
 774
 775 .inputview-handwriting-privacy-cover {
 776   position: relative;
 777   bottom: 0;
 778   left: 0;
 779   opacity: 0.5;
 780   z-index: 1;
 781 }
 782
 783 .inputview-voice-privacy-info,
 784 .inputview-handwriting-privacy-info {
 785   position: absolute;
 786   z-index: 2;
 787   box-shadow: 0 4px 16px rgba(0,0,0,0.2);
 788   background-color: white;
 789   padding: 20px;
 790 }
 791
 792 .inputview-voice-privacy-info > :first-child,
 793 .inputview-handwriting-privacy-info > :first-child {
 794   color: #37474f;
 795   font-size: 16px;
 796   display: block;
 797   margin-bottom: 15px;
 798 }
 799
 800 .inputview-voice-got-it,
 801 .inputview-handwriting-got-it {
 802   color: #ffffff;
 803   background-color: #4285f4;
 804   float: right;
 805   padding: 10px 25px;
 806   border-radius: 6px;
 807   font-size: 16px;
 808   cursor:pointer;
 809 }
 810
 811 .inputview-handwriting-privacy-info-hidden {
 812   visibility: hidden;
 813   opacity: 0;
 814   transition: all 2s ease;
 815 }
 816
 817 .inputview-jp-ime-switch {
 818   text-align: left;
 819   font-size: 12px;
 820   display: inline-block;
 821 }
 822 .inputview-small-keyboard .inputview-switcher-chinese,
 823 .inputview-small-keyboard .inputview-switcher-english {
 824   background-size: 14px 7px;
 825   height: 7px;
 826   width: 14px;
 827 }
 828 .inputview-switcher-chinese {
 829   display: inline-block;
 830   background: url('images/cn.png') no-repeat center;
 831   background-size: 50px 20px;
 832   height: 20px;
 833   width: 50px;
 834 }
 835 .inputview-switcher-english {
 836   display: inline-block;
 837   background: url('images/en.png') no-repeat center;
 838   background-size: 50px 20px;
 839   height: 20px;
 840   width: 50px;
 841 }
 842 .inputview-pinyin .inputview-en-switcher-default {
 843   display: inline-block;
 844   background: url('images/cn.png') no-repeat center;
 845   background-size: 40px 16px;
 846   height: 16px;
 847   width: 40px;
 848 }
 849 .inputview-pinyin .inputview-en-switcher-english {
 850   display: inline-block;
 851   background: url('images/en.png') no-repeat center;
 852   background-size: 40px 16px;
 853   height: 16px;
 854   width: 40px;
 855 }
 856 .inputview-portrait .inputview-select-knob-left div,
 857 .inputview-portrait .inputview-select-knob-right div {
 858   opacity: 0;
 859 }
 860 .inputview-select-knob-left,
 861 .inputview-select-knob-right {
 862   position: absolute;
 863   top: 0;
 864   margin: 0;
 865   padding: 0;
 866   z-index: 1;
 867 }
 868 .inputview-select-knob-left {
 869   left: 0px;
 870 }
 871 /* Anchor to the center of the column */
 872 .inputview-select-knob-right > div,
 873 .inputview-select-knob-left > div {
 874   width: 100%;
 875   position: relative;
 876   height: 1px;
 877   top: 50%;
 878   left: 0;
 879 }
 880 /* Semi-circular knob */
 881 .inputview-select-knob-left > div > div,
 882 .inputview-select-knob-right > div > div {
 883   width : 100%;
 884   height: 75px;
 885   background-position-y: center;
 886   background-repeat: no-repeat;
 887   background-size: 12px;
 888   -webkit-transform: translateY(-37.5px);
 889 }
 890 .inputview-select-knob-left > div > div {
 891   background-image: url(images/select_right.png);
 892   background-position-x: 12px;
 893 }
 894 .inputview-select-knob-right > div > div {
 895   background-image: url(images/select_left.png);
 896   background-position-x: 14px;
 897 }
 898
 899 .inputview-candidate-internal-wrapper {
 900   text-overflow: ellipsis;
 901   overflow-x: hidden;
 902   white-space: nowrap;
 903   display: inline-block;
 904 }
 905 .inputview-candidate-tooltip .inputview-candidate-internal-wrapper {
 906   font-size: 20px;
 907   color: #4285f4;
 908 }
 909 .inputview-small-keyboard .inputview-switcher-key-name {
 910   font-size: 10px;
 911 }
 912 .inputview-switcher-key-name {
 913   font-size: 20px;
 914   color: rgba(55, 71, 89, .8);
 915 }
 916 .inputview-small-keyboard .inputivew-switcher-key-name {
 917   font-size: 8px;
 918 }
 919 .inputview-back-to-keyboard {
 920   background: url('images/back_to_keyboard.png') no-repeat center;
 921   background-size: 26px 15px;
 922   width: 26px;
 923   height: 15px;
 924   display: inline-block;
 925 }
 926 #hwt {
 927   border-left: 1.5px solid rgba(55, 71, 79, 0.1);
 928   border-right: 1.5px solid rgba(55, 71, 79, 0.1);
 929 }
 930 .inputview-toolbar-button {
 931   float: right;
 932 }
 933 .inputview-toolbar-button.float-left {
 934   float: left;
 935 }
 936 .inputview-voice-btn {
 937   float: right;
 938 }
 939 .inputview-ime-list-container::-webkit-scrollbar-thumb {
 940   background-color: #c9ced1;
 941 }
 942 .inputview-ime-list-container::-webkit-scrollbar {
 943   width: 12px;
 944 }
 945 .inputview-drag-button {
 946   background: transparent url('images/draggable_area.png') 0 0/17px 16.5px no-repeat;
 947   height: 17px;
 948   width: 16.5px;
 949 }
 950 .inputview-resize-button {
 951   background: transparent url('images/resize.png') 0 0/17px 16.5px no-repeat;
 952   height: 17px;
 953   width: 16.5px;
 954 }
 955