1.ripple-pointer-location { 2 width: 48px; 3 height: 48px; 4 border-radius: 24px; 5 background-color: rgba(217, 217, 217, 0.3); 6 box-shadow: 0 0 2px 2px #bfbfbf; 7} 8 9.pie-timer { 10 width: 60px; 11 height: 60px; 12 -pie-border-width: 3px; 13 -pie-border-color: #8C8C8C; 14 -pie-background-color: rgba(242, 242, 242, 0.3); 15} 16 17.magnifier-zoom-region { 18 border: 2px solid #8C8C8C; 19} 20 21.magnifier-zoom-region.full-screen { 22 border-width: 0; 23} 24 25/* App Icons */ 26.show-apps, 27.app-well-app, 28.grid-search-result { 29 font-size: 9.75pt; 30 font-weight: 400; 31} 32 33.show-apps .overview-icon, 34.app-well-app .overview-icon, 35.grid-search-result .overview-icon { 36 color: rgba(255, 255, 255, 0.85); 37 border-radius: 12px; 38 padding: 8px; 39 border: none; 40 transition-duration: 100ms; 41 text-align: center; 42} 43 44.show-apps:hover .overview-icon, .show-apps:focus .overview-icon, .show-apps:selected .overview-icon, 45.app-well-app:hover .overview-icon, 46.app-well-app:focus .overview-icon, 47.app-well-app:selected .overview-icon, 48.grid-search-result:hover .overview-icon, 49.grid-search-result:focus .overview-icon, 50.grid-search-result:selected .overview-icon { 51 background-color: rgba(255, 255, 255, 0.15); 52 border-image: none; 53 background-image: none; 54} 55 56.show-apps:active .overview-icon, .show-apps:checked .overview-icon, 57.app-well-app:active .overview-icon, 58.app-well-app:checked .overview-icon, 59.grid-search-result:active .overview-icon, 60.grid-search-result:checked .overview-icon { 61 background-color: rgba(255, 255, 255, 0.3); 62 box-shadow: none; 63} 64 65.app-folder { 66 background: none; 67} 68 69.app-folder .overview-icon { 70 background-color: rgba(255, 255, 255, 0.15); 71 border-radius: 10px; 72} 73 74.app-folder:hover .overview-icon { 75 background-color: rgba(255, 255, 255, 0.2); 76} 77 78.app-folder-dialog { 79 border-radius: 32px; 80 border: 0 solid rgba(255, 255, 255, 0.15); 81 padding: 12px; 82 background-color: rgba(51, 51, 51, 0.9); 83} 84 85.app-folder-dialog .folder-name-container { 86 padding: 24px 36px 0; 87 spacing: 12px; 88 /* FIXME: this is to keep the label in sync with the entry */ 89} 90 91.app-folder-dialog .folder-name-container .folder-name-label, .app-folder-dialog .folder-name-container .folder-name-entry { 92 font-size: 18pt; 93 font-weight: bold; 94} 95 96.app-folder-dialog .folder-name-container .folder-name-entry { 97 width: 300px; 98} 99 100.app-folder-dialog .folder-name-container .folder-name-label { 101 padding: 5px 7px; 102 color: rgba(255, 255, 255, 0.85); 103} 104 105.app-folder-dialog .folder-name-container .edit-folder-button { 106 background-color: rgba(255, 255, 255, 0.15); 107 color: rgba(255, 255, 255, 0.85); 108 border: none; 109 padding: 0; 110 width: 36px; 111 height: 36px; 112 border-radius: 18px; 113} 114 115.app-folder-dialog .folder-name-container .edit-folder-button > StIcon { 116 icon-size: 16px; 117} 118 119.app-folder-dialog .folder-name-container .edit-folder-button:hover { 120 background-color: rgba(255, 255, 255, 0.15); 121} 122 123.app-folder-dialog .folder-name-container .edit-folder-button:checked, .app-folder-dialog .folder-name-container .edit-folder-button:active { 124 background-color: rgba(255, 255, 255, 0.3); 125} 126 127.app-folder-dialog .icon-grid { 128 row-spacing: 12px; 129 column-spacing: 30px; 130 page-padding-top: 0; 131 page-padding-bottom: 0; 132 page-padding-left: 0; 133 page-padding-right: 0; 134} 135 136.app-folder-dialog .page-indicators { 137 margin-bottom: 18px; 138} 139 140.app-folder-dialog-container { 141 padding: 6px; 142 width: 620px; 143 height: 620px; 144} 145 146.app-well-app-running-dot { 147 width: 5px; 148 height: 5px; 149 border-radius: 3px; 150 background-color: rgba(255, 255, 255, 0.85); 151 margin-bottom: 0; 152} 153 154StWidget.focused .app-well-app-running-dot { 155 background-color: #8C8C8C; 156} 157 158.page-indicator { 159 padding: 16px 20px; 160} 161 162.page-indicator .page-indicator-icon { 163 width: 12px; 164 height: 12px; 165 border-radius: 9999px; 166 background-image: none; 167 color: transparent; 168 border: none; 169 box-shadow: none; 170 background-color: rgba(255, 255, 255, 0.35); 171} 172 173.page-indicator:hover .page-indicator-icon { 174 background-image: none; 175 background-color: rgba(255, 255, 255, 0.45); 176} 177 178.page-indicator:active .page-indicator-icon { 179 background-image: none; 180 color: transparent; 181 border: none; 182 box-shadow: none; 183 background-color: rgba(255, 255, 255, 0.85); 184} 185 186.page-indicator:checked .page-indicator-icon { 187 background-image: none; 188 background-color: rgba(255, 255, 255, 0.85); 189} 190 191.page-indicator:checked:active { 192 background-image: none; 193} 194 195.app-menu, 196.app-well-menu { 197 max-width: 27.25em; 198} 199 200.rename-folder-popup .rename-folder-popup-item { 201 spacing: 6px; 202} 203 204.rename-folder-popup .rename-folder-popup-item:ltr, .rename-folder-popup .rename-folder-popup-item:rtl { 205 padding: 0 12px; 206} 207 208.system-action-icon { 209 box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); 210 background-color: rgba(0, 0, 0, 0.6); 211 color: white; 212 border-radius: 100px; 213 icon-size: 48px; 214} 215 216.shell-link { 217 border-radius: 5px; 218 color: #3484e2; 219} 220 221.shell-link:hover { 222 color: #3484e2; 223 background-color: rgba(52, 132, 226, 0.15); 224} 225 226.shell-link:active { 227 color: #3484e2; 228 background-color: rgba(52, 132, 226, 0.3); 229} 230 231.lowres-icon { 232 icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); 233} 234 235.icon-dropshadow { 236 icon-shadow: 0 1px 5px rgba(0, 0, 0, 0.8); 237} 238 239/* Buttons */ 240.button { 241 min-height: 32px; 242 padding: 0 16px; 243 border-radius: 5px; 244} 245 246.button, .popup-menu .button { 247 color: #424242; 248 background-color: transparent; 249 border-color: transparent; 250 box-shadow: none; 251 text-shadow: none; 252 icon-shadow: none; 253 border: none; 254} 255 256.button:hover, .popup-menu .button:hover { 257 color: #242424; 258 background-color: rgba(0, 0, 0, 0.12); 259 border-color: transparent; 260 box-shadow: none; 261 text-shadow: none; 262 icon-shadow: none; 263} 264 265.button:active, .popup-menu .button:active { 266 color: #242424; 267 background-color: rgba(0, 0, 0, 0.2); 268 border-color: transparent; 269 box-shadow: none; 270 text-shadow: none; 271 icon-shadow: none; 272} 273 274.button:insensitive, .popup-menu .button:insensitive { 275 color: rgba(36, 36, 36, 0.45); 276 background-color: transparent; 277 border-color: transparent; 278 box-shadow: none; 279 text-shadow: none; 280 icon-shadow: none; 281} 282 283.button:focus, .popup-menu .button:focus { 284 color: #242424; 285 text-shadow: none; 286 icon-shadow: none; 287 box-shadow: none; 288} 289 290/* Date/Time Menu */ 291.popup-menu .message, .world-clocks-button, 292.weather-button, 293.events-button { 294 border-radius: 8px; 295 border: 1px solid rgba(0, 0, 0, 0.12); 296 color: #424242; 297 background-color: #ffffff; 298 box-shadow: 0 1px 1px 0 rgba(16, 16, 16, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.05); 299 text-shadow: none; 300} 301 302.popup-menu .message:hover, .world-clocks-button:hover, 303.weather-button:hover, 304.events-button:hover, .popup-menu .message:focus, .world-clocks-button:focus, 305.weather-button:focus, 306.events-button:focus { 307 color: #242424; 308 background-color: white; 309 box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); 310} 311 312.popup-menu .message:active, .world-clocks-button:active, 313.weather-button:active, 314.events-button:active { 315 color: #242424; 316 background-color: rgba(255, 255, 255, 0.65); 317 box-shadow: none; 318} 319 320.clock-display-box { 321 spacing: 2px; 322} 323 324.clock-display-box .clock { 325 padding-left: 12px; 326 padding-right: 12px; 327} 328 329#calendarArea { 330 padding: 6px 0 0 0; 331} 332 333.datemenu-calendar-column { 334 spacing: 6px; 335 border: 0 solid rgba(0, 0, 0, 0.15); 336 padding: 0 12px; 337} 338 339.datemenu-calendar-column:ltr { 340 margin-right: 8px; 341 border-left-width: 0; 342} 343 344.datemenu-calendar-column:rtl { 345 margin-left: 8px; 346 border-right-width: 0; 347} 348 349.datemenu-calendar-column .datemenu-displays-section { 350 padding-bottom: 0; 351} 352 353.datemenu-calendar-column .datemenu-displays-box { 354 spacing: 6px; 355} 356 357.world-clocks-header, 358.weather-header, 359.events-section-title { 360 color: #424242; 361 font-weight: bold; 362} 363 364.datemenu-today-button, 365.datemenu-displays-box, 366.message-list-sections { 367 margin: 4px 8px; 368} 369 370/* today button (the date) */ 371.datemenu-today-button { 372 border: none; 373 box-shadow: none; 374 background: none; 375 padding: 6px; 376 margin: 0 12px; 377 text-shadow: none; 378 color: #424242; 379 border-radius: 6px; 380} 381 382.datemenu-today-button:hover, .datemenu-today-button:focus { 383 color: #242424; 384 background-color: white; 385} 386 387.datemenu-today-button:active { 388 color: #242424; 389 background-color: #fcfcfc; 390} 391 392.datemenu-today-button .day-label { 393 font-size: 15pt; 394 font-weight: 500; 395 font-weight: bold; 396} 397 398.datemenu-today-button .date-label { 399 font-size: 18pt; 400 font-weight: 400; 401} 402 403/* Calendar */ 404.calendar { 405 padding: 6px !important; 406 margin: 0 12px !important; 407 border-radius: 8px; 408 border: 1px solid rgba(0, 0, 0, 0.12); 409 color: #424242; 410 background-color: #ffffff; 411 box-shadow: 0 1px 1px 0 rgba(16, 16, 16, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.05); 412 text-shadow: none; 413} 414 415.calendar .calendar-month-label { 416 margin: 0; 417 padding: 6px 0; 418 color: #242424; 419 font-weight: bold; 420 font-size: 1em !important; 421 text-align: center; 422 text-shadow: none; 423} 424 425.calendar .calendar-month-label:focus { 426 background-color: rgba(0, 0, 0, 0.12); 427} 428 429.calendar .calendar-change-month-back, 430.calendar .calendar-change-month-forward { 431 padding: 2px !important; 432 margin: 0 !important; 433} 434 435.calendar .calendar-change-month-back StIcon, 436.calendar .calendar-change-month-forward StIcon { 437 icon-size: 16px !important; 438} 439 440.calendar .pager-button { 441 width: 28px; 442 height: 28px; 443 margin: 2px; 444 border-radius: 9999px; 445 background-color: transparent; 446 color: #242424; 447} 448 449.calendar .pager-button:hover, .calendar .pager-button:focus { 450 background-color: rgba(0, 0, 0, 0.12); 451} 452 453.calendar .pager-button:active { 454 background-color: rgba(0, 0, 0, 0.2); 455} 456 457.calendar .calendar-day-base { 458 font-size: 9pt; 459 font-weight: 400; 460 text-align: center; 461 width: 28px; 462 height: 28px; 463 padding: 2px; 464 margin: 2px; 465 border-radius: 9999px; 466 color: #424242; 467 font-feature-settings: "tnum"; 468} 469 470.calendar .calendar-day-base:hover, .calendar .calendar-day-base:focus { 471 background-color: rgba(0, 0, 0, 0.12); 472} 473 474.calendar .calendar-day-base:active { 475 color: #424242; 476 background-color: rgba(0, 0, 0, 0.2); 477 border-color: transparent; 478} 479 480.calendar .calendar-day-base:selected { 481 color: #242424; 482 background-color: rgba(0, 0, 0, 0.2); 483 border-color: transparent; 484} 485 486.calendar .calendar-day-base.calendar-day-heading { 487 width: 28px; 488 height: 21px; 489 margin-top: 2px; 490 padding: 7px 0 0; 491 border-radius: 9999px; 492 background-color: transparent; 493 color: #565656; 494 font-size: 9pt; 495 font-weight: 400; 496 font-weight: bold; 497 text-align: center; 498} 499 500.calendar .calendar-day { 501 border-width: 0; 502} 503 504.calendar .calendar-day-top { 505 border-top-width: 0; 506} 507 508.calendar .calendar-day-left { 509 border-left-width: 0; 510} 511 512.calendar .calendar-nonwork-day { 513 color: rgba(36, 36, 36, 0.45); 514} 515 516.calendar .calendar-today { 517 font-weight: bold; 518 color: #424242 !important; 519 background-color: rgba(36, 36, 36, 0.1); 520 border: none; 521} 522 523.calendar .calendar-today:hover, .calendar .calendar-today:focus { 524 background-color: rgba(36, 36, 36, 0.15); 525 color: #242424 !important; 526} 527 528.calendar .calendar-today:active { 529 background-color: #7f7f7f; 530 color: white !important; 531} 532 533.calendar .calendar-today:selected { 534 background-color: #8C8C8C; 535 color: white !important; 536} 537 538.calendar .calendar-today:selected:hover, .calendar .calendar-today:selected:focus { 539 background-color: #a0a0a0; 540 color: white !important; 541} 542 543.calendar .calendar-day-with-events { 544 color: #565656; 545 background-image: url("assets/calendar-today.svg"); 546} 547 548.calendar .calendar-day-with-events.calendar-work-day { 549 color: #565656; 550 font-weight: bold; 551} 552 553.calendar .calendar-other-month-day { 554 color: rgba(36, 36, 36, 0.45); 555 opacity: 0.5; 556} 557 558.calendar .calendar-week-number { 559 width: 22px; 560 height: 16px; 561 margin: 6px 6px 6px 4px; 562 padding: 0 0; 563 border-radius: 5px; 564 background-color: rgba(0, 0, 0, 0.05); 565 color: #565656; 566 font-size: inherit; 567 font-weight: bold; 568 text-align: center; 569} 570 571.world-clocks-button, 572.weather-button, 573.events-button { 574 padding: 12px !important; 575 margin: 2px 4px !important; 576} 577 578.events-button .events-box { 579 spacing: 6px; 580} 581 582.events-button .events-list { 583 spacing: 12px; 584 text-shadow: none; 585} 586 587.events-button .events-title { 588 color: #565656; 589 font-weight: bold; 590 text-shadow: none; 591} 592 593.events-button .event-time { 594 color: #565656; 595 font-feature-settings: "tnum"; 596 font-size: 9pt; 597} 598 599.world-clocks-button .world-clocks-city { 600 color: #565656; 601 font-weight: bold; 602 font-size: 10pt; 603} 604 605.world-clocks-button .world-clocks-time { 606 color: #565656; 607 font-feature-settings: "tnum"; 608 font-size: 10pt; 609} 610 611.world-clocks-button .world-clocks-time:ltr { 612 text-align: right; 613} 614 615.world-clocks-button .world-clocks-time:rtl { 616 text-align: left; 617} 618 619.world-clocks-button .world-clocks-timezone { 620 color: #565656; 621 font-feature-settings: "tnum"; 622 font-size: 9pt; 623} 624 625.world-clocks-grid, 626.weather-grid { 627 spacing-rows: 0.4em; 628 spacing-columns: 0.8em; 629} 630 631.weather-button { 632 margin-bottom: 6px !important; 633} 634 635.weather-button .weather-box { 636 spacing: 10px; 637} 638 639.weather-button .weather-header-box { 640 spacing: 6px; 641} 642 643.weather-button .weather-header { 644 color: #424242; 645 font-weight: bold; 646} 647 648.weather-button .weather-header.location { 649 font-weight: normal; 650 color: #565656; 651 font-size: 9pt; 652} 653 654.weather-button .weather-grid { 655 spacing-rows: 6px; 656 spacing-columns: 12px; 657} 658 659.weather-button .weather-forecast-time { 660 color: #424242; 661 font-feature-settings: "tnum"; 662 font-size: 8pt; 663 font-weight: normal; 664 padding-top: 0.2em; 665 padding-bottom: 0.4em; 666} 667 668.weather-button .weather-forecast-icon { 669 icon-size: 32px; 670} 671 672.weather-button .weather-forecast-temp { 673 font-weight: bold; 674} 675 676/* Check Boxes */ 677.check-box StBoxLayout { 678 spacing: .8em; 679} 680 681.check-box StBin { 682 width: 24px; 683 height: 24px; 684 padding: 4px; 685 border-radius: 100px; 686 background-image: url("assets/checkbox-off.svg"); 687} 688 689.check-box:focus StBin { 690 background-image: url("assets/checkbox-off.svg"); 691} 692 693.check-box:hover StBin { 694 background-color: rgba(0, 0, 0, 0.12); 695} 696 697.check-box:active StBin { 698 background-color: rgba(0, 0, 0, 0.2); 699} 700 701.check-box:checked StBin { 702 background-image: url("assets/checkbox.svg"); 703} 704 705.check-box:focus:checked StBin { 706 background-image: url("assets/checkbox.svg"); 707} 708 709.check-box:hover:checked StBin { 710 background-color: rgba(140, 140, 140, 0.15); 711} 712 713.check-box:active:checked StBin { 714 background-color: rgba(140, 140, 140, 0.3); 715} 716 717/* Activities Ripple */ 718.ripple-box { 719 background-color: rgba(140, 140, 140, 0.35); 720 box-shadow: 0 0 2px 2px #bfbfbf; 721 width: 52px; 722 height: 52px; 723 border-radius: 0 0 52px 0; 724} 725 726.ripple-box:rtl { 727 border-radius: 0 0 0 52px; 728} 729 730/* Dash */ 731#dash { 732 font-size: 9.75pt; 733 font-weight: 400; 734} 735 736#dash .empty-dash-drop-target { 737 width: 32px; 738 height: 32px; 739} 740 741.dash-label { 742 color: rgba(255, 255, 255, 0.9); 743 background-color: rgba(34, 34, 34, 0.95); 744 border-radius: 5px; 745 padding: 6px 12px; 746 box-shadow: none; 747 border: none; 748 text-align: center; 749 -y-offset: 12px; 750 -x-offset: 8px; 751 font-size: 9.75pt; 752 font-weight: 400; 753} 754 755/* Modal Dialogs */ 756.candidate-popup-content, .modal-dialog { 757 background-color: #f5f5f5; 758 border-radius: 6px; 759 border: solid rgba(0, 0, 0, 0.75); 760 border-width: 0; 761 box-shadow: 3px 3px 8px -3px rgba(0, 0, 0, 0.65); 762} 763 764.modal-dialog-linked-button:last-child { 765 color: white; 766 background-color: #8C8C8C; 767 box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1); 768} 769 770.modal-dialog-linked-button:hover:last-child { 771 color: white; 772 background-color: #a3a3a3; 773} 774 775.modal-dialog-linked-button:active:last-child { 776 color: white; 777 background-color: #7f7f7f; 778} 779 780.modal-dialog-linked-button:insensitive:last-child { 781 background-color: rgba(140, 140, 140, 0.05); 782 color: rgba(140, 140, 140, 0.35); 783} 784 785.headline { 786 font-size: 15pt; 787 font-weight: 500; 788} 789 790.modal-dialog { 791 color: #242424; 792 padding: 0 5px 6px 5px; 793} 794 795.modal-dialog-linked-button { 796 min-height: 40px; 797 padding: 0 16px; 798 margin: 3px 3px; 799 border: none !important; 800 border-radius: 5px; 801 font-size: 9.75pt; 802 font-weight: 500; 803 color: #424242; 804 background-color: transparent; 805 border-color: transparent; 806 box-shadow: none; 807 text-shadow: none; 808 icon-shadow: none; 809} 810 811.modal-dialog-linked-button:hover { 812 color: #242424; 813 background-color: rgba(0, 0, 0, 0.12); 814 border-color: transparent; 815 box-shadow: none; 816 text-shadow: none; 817 icon-shadow: none; 818} 819 820.modal-dialog-linked-button:active { 821 color: #242424; 822 background-color: rgba(0, 0, 0, 0.2); 823 border-color: transparent; 824 box-shadow: none; 825 text-shadow: none; 826 icon-shadow: none; 827} 828 829.modal-dialog-linked-button:insensitive { 830 color: rgba(36, 36, 36, 0.45); 831 background-color: transparent; 832 border-color: transparent; 833 box-shadow: none; 834 text-shadow: none; 835 icon-shadow: none; 836} 837 838.modal-dialog-linked-button:focus { 839 color: #242424; 840 text-shadow: none; 841 icon-shadow: none; 842 box-shadow: none; 843} 844 845.modal-dialog-linked-button:first-child { 846 background: #ffffff; 847} 848 849.modal-dialog-linked-button:first-child:hover { 850 color: #242424; 851 background-color: rgba(0, 0, 0, 0.12); 852 border-color: transparent; 853 box-shadow: none; 854 text-shadow: none; 855 icon-shadow: none; 856} 857 858.modal-dialog-linked-button:first-child:active { 859 color: #242424; 860 background-color: rgba(0, 0, 0, 0.2); 861 border-color: transparent; 862 box-shadow: none; 863 text-shadow: none; 864 icon-shadow: none; 865} 866 867.modal-dialog .modal-dialog-content-box { 868 margin: 32px 40px; 869 spacing: 32px; 870 max-width: 28em; 871} 872 873.end-session-dialog { 874 width: 30em; 875} 876 877.end-session-dialog .end-session-dialog-battery-warning, 878.end-session-dialog .dialog-list-title { 879 color: #F27835; 880} 881 882.message-dialog-content { 883 spacing: 18px; 884} 885 886.message-dialog-content .message-dialog-title { 887 text-align: center; 888 font-size: 18pt; 889 font-weight: 800; 890} 891 892.message-dialog-content .message-dialog-title.lightweight { 893 font-size: 13pt; 894 font-weight: 800; 895} 896 897.message-dialog-content .message-dialog-description { 898 text-align: center; 899} 900 901.dialog-list { 902 spacing: 18px; 903} 904 905.dialog-list .dialog-list-title { 906 text-align: center; 907 font-weight: bold; 908} 909 910.dialog-list .dialog-list-scrollview { 911 max-height: 200px; 912} 913 914.dialog-list .dialog-list-box { 915 spacing: 1em; 916} 917 918.dialog-list .dialog-list-box .dialog-list-item { 919 spacing: 1em; 920} 921 922.dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-title { 923 font-weight: bold; 924} 925 926.dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-description { 927 color: #424242; 928 font-size: 15pt; 929 font-weight: 500; 930} 931 932.run-dialog .modal-dialog-content-box { 933 margin-top: 24px; 934 margin-bottom: 14px; 935} 936 937.run-dialog .run-dialog-entry { 938 width: 20em; 939} 940 941.run-dialog .run-dialog-description { 942 text-align: center; 943 color: #424242; 944 font-size: 15pt; 945 font-weight: 500; 946} 947 948.prompt-dialog { 949 width: 28em; 950} 951 952.prompt-dialog .modal-dialog-content-box { 953 margin-bottom: 24px; 954} 955 956.prompt-dialog-password-grid { 957 spacing-rows: 8px; 958 spacing-columns: 4px; 959} 960 961.prompt-dialog-password-grid .prompt-dialog-password-entry { 962 width: auto; 963} 964 965.prompt-dialog-password-grid .prompt-dialog-password-entry:ltr { 966 margin-left: 20px; 967} 968 969.prompt-dialog-password-grid .prompt-dialog-password-entry:rtl { 970 margin-right: 20px; 971} 972 973.prompt-dialog-password-grid { 974 spacing-rows: 8px; 975 spacing-columns: 4px; 976} 977 978.prompt-dialog-password-grid .prompt-dialog-password-entry { 979 width: auto; 980} 981 982.prompt-dialog-password-grid .prompt-dialog-password-entry:ltr { 983 margin-left: 20px; 984} 985 986.prompt-dialog-password-grid .prompt-dialog-password-entry:rtl { 987 margin-right: 20px; 988} 989 990.prompt-dialog-password-layout { 991 spacing: 8px; 992} 993 994.prompt-dialog-password-entry { 995 width: 20em; 996} 997 998.prompt-dialog-error-label, 999.prompt-dialog-info-label, 1000.prompt-dialog-null-label { 1001 text-align: center; 1002 font-size: 15pt; 1003 font-weight: 500; 1004 margin: 6px; 1005} 1006 1007.prompt-dialog-error-label { 1008 color: #FC4138; 1009} 1010 1011.prompt-dialog-info-label, 1012.prompt-dialog-null-label { 1013 color: #565656; 1014} 1015 1016.polkit-dialog-user-layout { 1017 text-align: center; 1018 spacing: 8px; 1019 margin-bottom: 6px; 1020} 1021 1022.polkit-dialog-user-layout .polkit-dialog-user-root-label { 1023 color: #F27835; 1024} 1025 1026.audio-device-selection-dialog .modal-dialog-content-box { 1027 margin-bottom: 28px; 1028} 1029 1030.audio-device-selection-dialog .audio-selection-box { 1031 spacing: 20px; 1032} 1033 1034.audio-selection-device { 1035 border: 1px solid rgba(0, 0, 0, 0.15); 1036 border-radius: 5px; 1037} 1038 1039.audio-selection-device:hover, .audio-selection-device:focus { 1040 background-color: rgba(0, 0, 0, 0.16); 1041} 1042 1043.audio-selection-device:active { 1044 background-color: #8C8C8C; 1045 color: white; 1046} 1047 1048.audio-selection-device-box { 1049 padding: 20px; 1050 spacing: 20px; 1051} 1052 1053.audio-selection-device-icon { 1054 icon-size: 64px; 1055} 1056 1057.welcome-dialog-image { 1058 background-image: url("resource:///org/gnome/shell/theme/gnome-shell-start.svg"); 1059 background-size: contain; 1060 height: 300px; 1061 width: 300px; 1062} 1063 1064/* Entries */ 1065StEntry, .popup-menu .search-entry { 1066 min-height: 28px; 1067 padding: 2px 10px; 1068 margin: 2px; 1069 border-radius: 5px; 1070 color: #242424; 1071 caret-color: #242424; 1072 selection-background-color: #8C8C8C; 1073 selected-color: rgba(255, 255, 255, 0.85); 1074 font-size: 11.25pt; 1075 font-weight: 400; 1076 color: #242424; 1077 background-color: #fafafa; 1078 border-radius: 8px; 1079 border: 2px solid transparent; 1080 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); 1081} 1082 1083StEntry:focus, .popup-menu .search-entry:focus { 1084 color: #242424; 1085 border: 2px solid #b2b2b2; 1086 box-shadow: none; 1087} 1088 1089StEntry:insensitive, .popup-menu .search-entry:insensitive { 1090 color: rgba(36, 36, 36, 0.35); 1091 box-shadow: none; 1092} 1093 1094StEntry StIcon.capslock-warning, .popup-menu .search-entry StIcon.capslock-warning { 1095 icon-size: 16px; 1096 warning-color: #F27835; 1097 padding: 0 0; 1098} 1099 1100StEntry StIcon.peek-password, .popup-menu .search-entry StIcon.peek-password { 1101 icon-size: 16px; 1102 padding: 0 4px; 1103} 1104 1105StEntry StLabel.hint-text, .popup-menu .search-entry StLabel.hint-text { 1106 margin-left: 2px; 1107 color: rgba(36, 36, 36, 0.7); 1108} 1109 1110.hotplug-notification-item { 1111 color: #242424; 1112 background-color: #ffffff; 1113 border: 1px solid rgba(0, 0, 0, 0.15); 1114 text-shadow: none; 1115 icon-shadow: none; 1116 padding: 12px; 1117 border-style: solid; 1118 border-width: 0; 1119 border-left-width: 0; 1120 border-bottom-width: 0; 1121} 1122 1123.hotplug-notification-item:insensitive { 1124 color: rgba(36, 36, 36, 0.45); 1125 background-color: rgba(0, 0, 0, 0.12); 1126 border-color: rgba(0, 0, 0, 0.15); 1127 text-shadow: none; 1128 icon-shadow: none; 1129} 1130 1131.hotplug-notification-item:hover { 1132 color: #242424; 1133 border-color: rgba(0, 0, 0, 0.15); 1134 background-color: #f7f7f7; 1135 text-shadow: none; 1136 icon-shadow: none; 1137} 1138 1139.hotplug-notification-item:focus { 1140 color: #242424; 1141 text-shadow: none; 1142 icon-shadow: none; 1143} 1144 1145.hotplug-notification-item:active { 1146 color: white; 1147 background-color: #8C8C8C; 1148 border-color: #848484; 1149 text-shadow: none; 1150 icon-shadow: none; 1151} 1152 1153.hotplug-notification-item:first-child { 1154 border-radius: 0 0 0 5px; 1155} 1156 1157.hotplug-notification-item:last-child { 1158 border-right-width: 0; 1159 border-radius: 0 0 5px 0; 1160} 1161 1162.hotplug-notification-item:first-child:last-child { 1163 border-radius: 0 0 5px 5px; 1164} 1165 1166.hotplug-notification-item-icon { 1167 icon-size: 24px; 1168 padding: 0 4px; 1169} 1170 1171.candidate-popup-boxpointer { 1172 -arrow-border-radius: 2px; 1173 -arrow-background-color: transparent; 1174 -arrow-border-width: 0; 1175 -arrow-border-color: transparent; 1176 -arrow-base: 64px; 1177 -arrow-rise: 12px; 1178 background-color: transparent; 1179 color: #565656; 1180} 1181 1182.candidate-popup-content { 1183 color: #565656; 1184 box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.25); 1185 border: 1px solid rgba(0, 0, 0, 0); 1186 margin: 3px 12px 18px; 1187 padding: 8px; 1188 spacing: 6px; 1189} 1190 1191.candidate-index { 1192 padding: 0 0.5em 0 0; 1193 color: #565656; 1194} 1195 1196.candidate-box:selected .candidate-index { 1197 color: rgba(255, 255, 255, 0.5); 1198} 1199 1200.candidate-box { 1201 padding: 0.3em 0.5em 0.3em 0.5em; 1202 margin-right: 2px; 1203 border-radius: 5px; 1204 color: #565656; 1205} 1206 1207.candidate-box:hover { 1208 background-color: rgba(0, 0, 0, 0.12); 1209 color: #242424; 1210} 1211 1212.candidate-box:active { 1213 background-color: rgba(0, 0, 0, 0.2); 1214 color: #242424; 1215} 1216 1217.candidate-box:selected { 1218 background-color: #8C8C8C; 1219 color: rgba(255, 255, 255, 0.85); 1220} 1221 1222.candidate-box:last-child { 1223 margin-right: 0; 1224} 1225 1226.candidate-page-button-box { 1227 height: 2em; 1228} 1229 1230.vertical .candidate-page-button-box { 1231 padding-top: 0.5em; 1232} 1233 1234.horizontal .candidate-page-button-box { 1235 padding-left: 0.5em; 1236} 1237 1238.candidate-page-button { 1239 padding: 4px; 1240} 1241 1242.candidate-page-button-previous, 1243.candidate-page-button-next { 1244 border-radius: 5px; 1245 box-shadow: none; 1246} 1247 1248.candidate-page-button-icon { 1249 icon-size: 1em; 1250} 1251 1252/* On-screen Keyboard */ 1253#keyboard { 1254 background-color: rgba(0, 0, 0, 0.25); 1255 box-shadow: none; 1256} 1257 1258#keyboard .page-indicator { 1259 padding: 6px; 1260} 1261 1262#keyboard .page-indicator .page-indicator-icon { 1263 width: 8px; 1264 height: 8px; 1265} 1266 1267.key-container, 1268.keyboard-layout { 1269 padding: 4px; 1270 spacing: 4px; 1271} 1272 1273.keyboard-key { 1274 font-size: 16pt; 1275 font-weight: bold; 1276 min-height: 1.2em; 1277 min-width: 1.2em; 1278 border-radius: 6px; 1279 border: none; 1280 color: #424242; 1281 background-color: #FAFAFA; 1282 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); 1283} 1284 1285.keyboard-key:focus, .keyboard-key:hover { 1286 color: #242424; 1287 background-color: white; 1288} 1289 1290.keyboard-key:checked, .keyboard-key:active { 1291 color: #242424; 1292 background-color: #e1e1e1; 1293} 1294 1295.keyboard-key:grayed { 1296 background-color: rgba(0, 0, 0, 0.3); 1297 color: rgba(255, 255, 255, 0.85); 1298 border-color: rgba(0, 0, 0, 0.3); 1299} 1300 1301.keyboard-key.default-key { 1302 background-color: #E0E0E0; 1303 box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15); 1304} 1305 1306.keyboard-key.default-key:focus, .keyboard-key.default-key:hover { 1307 color: #242424; 1308 background-color: #fafafa; 1309} 1310 1311.keyboard-key.default-key:checked, .keyboard-key.default-key:active { 1312 color: #242424; 1313 background-color: #c7c7c7; 1314} 1315 1316.keyboard-key.enter-key { 1317 color: white; 1318 background-color: #8C8C8C; 1319 box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15); 1320} 1321 1322.keyboard-key.enter-key:focus, .keyboard-key.enter-key:hover { 1323 color: white; 1324 background-color: #999999; 1325} 1326 1327.keyboard-key.enter-key:checked, .keyboard-key.enter-key:active { 1328 color: white; 1329 background-color: #737373; 1330} 1331 1332.keyboard-key.shift-key-uppercase, .keyboard-key.shift-key-uppercase:focus, .keyboard-key.shift-key-uppercase:hover, .keyboard-key.shift-key-uppercase:checked, .keyboard-key.shift-key-uppercase:active { 1333 color: #8C8C8C; 1334} 1335 1336.keyboard-key StIcon { 1337 icon-size: 1.125em; 1338} 1339 1340.keyboard-subkeys { 1341 color: inherit; 1342 -arrow-border-radius: 5px; 1343 -arrow-background-color: rgba(0, 0, 0, 0.45); 1344 -arrow-border-width: 0; 1345 -arrow-border-color: transparent; 1346 -arrow-base: 20px; 1347 -arrow-rise: 10px; 1348 -boxpointer-gap: 5px; 1349 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); 1350} 1351 1352.emoji-page .keyboard-key { 1353 background-color: transparent; 1354 border: none; 1355 color: initial; 1356} 1357 1358.emoji-panel .keyboard-key:latched { 1359 border-color: #999999; 1360 background-color: #8C8C8C; 1361} 1362 1363.word-suggestions { 1364 font-size: 14pt; 1365 spacing: 12px; 1366 min-height: 20pt; 1367} 1368 1369/* Login Dialog */ 1370#lockDialogGroup { 1371 background: url("assets/background.png"); 1372 background-size: cover; 1373} 1374 1375.login-dialog-banner-view { 1376 padding-top: 24px; 1377 max-width: 23em; 1378} 1379 1380.login-dialog, 1381.unlock-dialog { 1382 border: none; 1383 background-color: transparent; 1384} 1385 1386.login-dialog StEntry, 1387.unlock-dialog StEntry { 1388 selection-background-color: #8C8C8C; 1389 selected-background-color: #8C8C8C; 1390 selected-color: white; 1391 padding: 4px 8px; 1392 min-height: 20px; 1393 border-radius: 9999px; 1394 caret-color: #242424; 1395} 1396 1397.login-dialog StEntry StLabel.hint-text, 1398.unlock-dialog StEntry StLabel.hint-text { 1399 color: rgba(255, 255, 255, 0.45); 1400} 1401 1402.login-dialog .modal-dialog-button-box, 1403.unlock-dialog .modal-dialog-button-box { 1404 spacing: 3px; 1405} 1406 1407.login-dialog .modal-dialog-button, 1408.unlock-dialog .modal-dialog-button { 1409 padding: 0 16px; 1410 border: none; 1411 color: rgba(255, 255, 255, 0.85); 1412 background-color: transparent; 1413 border-color: transparent; 1414 box-shadow: none; 1415 text-shadow: none; 1416 icon-shadow: none; 1417} 1418 1419.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus, 1420.unlock-dialog .modal-dialog-button:hover, 1421.unlock-dialog .modal-dialog-button:focus { 1422 color: white; 1423 background-color: rgba(255, 255, 255, 0.15); 1424 border-color: transparent; 1425 box-shadow: none; 1426 text-shadow: none; 1427 icon-shadow: none; 1428} 1429 1430.login-dialog .modal-dialog-button:active, 1431.unlock-dialog .modal-dialog-button:active { 1432 color: white; 1433 background-color: rgba(255, 255, 255, 0.3); 1434 border-color: transparent; 1435 box-shadow: none; 1436 text-shadow: none; 1437 icon-shadow: none; 1438} 1439 1440.login-dialog .modal-dialog-button:insensitive, 1441.unlock-dialog .modal-dialog-button:insensitive { 1442 color: rgba(36, 36, 36, 0.45); 1443 background-color: transparent; 1444 border-color: transparent; 1445 box-shadow: none; 1446 text-shadow: none; 1447 icon-shadow: none; 1448} 1449 1450.login-dialog .modal-dialog-button:default, 1451.unlock-dialog .modal-dialog-button:default { 1452 color: white; 1453 background-color: #ffffff; 1454 border: 1px solid rgba(0, 0, 0, 0.15); 1455 text-shadow: none; 1456 icon-shadow: none; 1457} 1458 1459.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus, 1460.unlock-dialog .modal-dialog-button:default:hover, 1461.unlock-dialog .modal-dialog-button:default:focus { 1462 color: white; 1463 border-color: rgba(0, 0, 0, 0.15); 1464 background-color: #f7f7f7; 1465 text-shadow: none; 1466 icon-shadow: none; 1467} 1468 1469.login-dialog .modal-dialog-button:default:active, 1470.unlock-dialog .modal-dialog-button:default:active { 1471 color: white; 1472 background-color: #8C8C8C; 1473 border-color: #848484; 1474 text-shadow: none; 1475 icon-shadow: none; 1476} 1477 1478.login-dialog .modal-dialog-button:default:insensitive, 1479.unlock-dialog .modal-dialog-button:default:insensitive { 1480 color: rgba(255, 255, 255, 0.45); 1481 background-color: rgba(0, 0, 0, 0.12); 1482 border-color: rgba(0, 0, 0, 0.15); 1483 text-shadow: none; 1484 icon-shadow: none; 1485} 1486 1487.login-dialog .cancel-button, 1488.login-dialog .switch-user-button, 1489.login-dialog .login-dialog-session-list-button, 1490.unlock-dialog .cancel-button, 1491.unlock-dialog .switch-user-button, 1492.unlock-dialog .login-dialog-session-list-button { 1493 padding: 0; 1494 border-radius: 100px; 1495 width: 32px; 1496 height: 32px; 1497 border: none; 1498 background-color: rgba(0, 0, 0, 0.1); 1499 color: white; 1500} 1501 1502.login-dialog .cancel-button StIcon, 1503.login-dialog .switch-user-button StIcon, 1504.login-dialog .login-dialog-session-list-button StIcon, 1505.unlock-dialog .cancel-button StIcon, 1506.unlock-dialog .switch-user-button StIcon, 1507.unlock-dialog .login-dialog-session-list-button StIcon { 1508 icon-size: 16px; 1509} 1510 1511.login-dialog .login-dialog-message-warning, 1512.unlock-dialog .login-dialog-message-warning { 1513 color: rgba(255, 255, 255, 0.85); 1514} 1515 1516.login-dialog-logo-bin { 1517 padding: 24px 0px; 1518} 1519 1520.login-dialog-banner { 1521 color: rgba(255, 255, 255, 0.85); 1522} 1523 1524.login-dialog-button-box { 1525 spacing: 5px; 1526} 1527 1528.login-dialog-message { 1529 text-align: center; 1530} 1531 1532.login-dialog-message-warning { 1533 color: #F27835; 1534} 1535 1536.login-dialog-message-hint { 1537 padding-top: 0; 1538 padding-bottom: 20px; 1539} 1540 1541.login-dialog-user-selection-box { 1542 padding: 100px 0px; 1543} 1544 1545.login-dialog-not-listed-label { 1546 padding-left: 2px; 1547} 1548 1549.login-dialog-not-listed-button:focus .login-dialog-not-listed-label, .login-dialog-not-listed-button:hover .login-dialog-not-listed-label { 1550 color: white; 1551} 1552 1553.login-dialog-not-listed-label { 1554 font-size: 1em; 1555 font-weight: bold; 1556 color: rgba(255, 255, 255, 0.85); 1557 padding-top: 1em; 1558} 1559 1560.login-dialog-not-listed-label:hover { 1561 color: rgba(255, 255, 255, 0.85); 1562} 1563 1564.login-dialog-not-listed-label:focus { 1565 background-color: rgba(255, 255, 255, 0.15); 1566} 1567 1568.login-dialog-user-list-view { 1569 -st-vfade-offset: 1em; 1570} 1571 1572.login-dialog-user-list { 1573 spacing: 12px; 1574 padding: .2em; 1575 width: 23em; 1576} 1577 1578.login-dialog-user-list:expanded .login-dialog-user-list-item:selected { 1579 background-color: rgba(255, 255, 255, 0.15); 1580 color: rgba(255, 255, 255, 0.85); 1581} 1582 1583.login-dialog-user-list:expanded .login-dialog-user-list-item:hover { 1584 background-color: rgba(255, 255, 255, 0.15); 1585 color: rgba(255, 255, 255, 0.85); 1586} 1587 1588.login-dialog-user-list:expanded .login-dialog-user-list-item:active { 1589 background-color: rgba(255, 255, 255, 0.3); 1590 color: rgba(255, 255, 255, 0.85); 1591} 1592 1593.login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in { 1594 border-right: 2px solid #8C8C8C; 1595} 1596 1597.login-dialog-user-list-item { 1598 border-radius: 6px; 1599 padding: 6px; 1600 color: rgba(255, 255, 255, 0.85); 1601} 1602 1603.login-dialog-user-list-item:ltr .user-widget { 1604 padding-right: 1em; 1605} 1606 1607.login-dialog-user-list-item:rtl .user-widget { 1608 padding-left: 1em; 1609} 1610 1611.login-dialog-user-list-item:focus { 1612 background-color: rgba(0, 0, 0, 0.05) !important; 1613} 1614 1615.login-dialog-user-list-item:hover, .login-dialog-user-list-item:focus:hover { 1616 background-color: rgba(0, 0, 0, 0.12) !important; 1617 color: rgba(255, 255, 255, 0.85); 1618} 1619 1620.login-dialog-user-list-item:active, .login-dialog-user-list-item:focus:active { 1621 background-color: rgba(0, 0, 0, 0.2) !important; 1622 color: rgba(255, 255, 255, 0.85); 1623} 1624 1625.login-dialog-user-list-item .login-dialog-timed-login-indicator { 1626 height: 2px; 1627 margin: 6px 0 0 0; 1628 background-color: rgba(0, 0, 0, 0.16) !important; 1629} 1630 1631.user-widget-label { 1632 color: rgba(255, 255, 255, 0.85); 1633} 1634 1635.user-widget.horizontal .user-widget-label { 1636 font-size: 13pt; 1637 font-weight: bold; 1638 padding-left: 15px; 1639} 1640 1641.user-widget.horizontal .user-widget-label:ltr { 1642 padding-left: 14px; 1643 text-align: left; 1644} 1645 1646.user-widget.horizontal .user-widget-label:rtl { 1647 padding-right: 14px; 1648 text-align: right; 1649} 1650 1651.user-widget.vertical .user-widget-label { 1652 font-size: 16pt; 1653 text-align: center; 1654 font-weight: normal; 1655 padding-top: 16px; 1656} 1657 1658.login-dialog-prompt-layout { 1659 padding-top: 24px; 1660 padding-bottom: 12px; 1661 spacing: 12px; 1662 width: 23em; 1663} 1664 1665.login-dialog-prompt-entry { 1666 height: 1.5em; 1667} 1668 1669.login-dialog-prompt-label { 1670 color: rgba(255, 255, 255, 0.5); 1671 font-size: 12pt; 1672 padding-top: 1em; 1673} 1674 1675/* Looking Glass */ 1676#LookingGlassDialog { 1677 background-color: #ffffff; 1678 spacing: 4px; 1679 padding: 0; 1680 border: none; 1681 border-radius: 5px; 1682 box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.25); 1683 color: #242424; 1684} 1685 1686#LookingGlassDialog > #Toolbar { 1687 color: #242424; 1688 padding: 0 8px; 1689 border: none; 1690 border-radius: 0; 1691 background-color: rgba(255, 255, 255, 0.01); 1692 box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); 1693} 1694 1695#LookingGlassDialog .labels { 1696 spacing: 0; 1697} 1698 1699#LookingGlassDialog .notebook-tab { 1700 -natural-hpadding: 12px; 1701 -minimum-hpadding: 6px; 1702 font-weight: bold; 1703 color: #424242; 1704 padding-left: 16px; 1705 padding-right: 16px; 1706 min-height: 32px; 1707 padding: 0 32px; 1708 transition-duration: 100ms; 1709 border-bottom-width: 0; 1710} 1711 1712#LookingGlassDialog .notebook-tab:hover { 1713 border-bottom-width: 0; 1714 box-shadow: inset 0 -2px 0px #8C8C8C; 1715 color: #242424; 1716 text-shadow: none; 1717} 1718 1719#LookingGlassDialog .notebook-tab:selected { 1720 border-bottom-width: 0; 1721 border-color: transparent; 1722 background-color: rgba(255, 255, 255, 0.01); 1723 box-shadow: inset 0 -2px 0px #8C8C8C; 1724 color: #242424; 1725 text-shadow: none; 1726} 1727 1728#LookingGlassDialog StBoxLayout#EvalBox { 1729 padding: 4px; 1730 spacing: 4px; 1731} 1732 1733#LookingGlassDialog StBoxLayout#ResultsArea { 1734 spacing: 4px; 1735} 1736 1737.lg-dialog StEntry { 1738 min-height: 22px; 1739 selection-background-color: #8C8C8C; 1740 selected-color: rgba(255, 255, 255, 0.85); 1741} 1742 1743.lg-dialog .shell-link { 1744 color: #3484e2; 1745} 1746 1747.lg-dialog .shell-link:hover { 1748 color: #619fe8; 1749} 1750 1751.lg-dialog .shell-link:active { 1752 color: #1c6bc7; 1753} 1754 1755.lg-dialog .actor-link { 1756 color: #424242; 1757} 1758 1759.lg-dialog .actor-link:hover { 1760 color: #757575; 1761} 1762 1763.lg-dialog .actor-link:active { 1764 color: #0f0f0f; 1765} 1766 1767.lg-completions-text { 1768 font-size: .9em; 1769 font-style: italic; 1770} 1771 1772.lg-obj-inspector-title { 1773 spacing: 6px; 1774} 1775 1776.lg-obj-inspector-button { 1777 padding: 0 16px; 1778 border: none; 1779 border-radius: 5px; 1780 font-size: 9.75pt; 1781 font-weight: 500; 1782} 1783 1784.lg-obj-inspector-button:hover { 1785 border: none; 1786} 1787 1788#lookingGlassExtensions { 1789 padding: 4px; 1790} 1791 1792.lg-extensions-list { 1793 padding: 4px; 1794 spacing: 6px; 1795} 1796 1797.lg-extension { 1798 border: 1px solid rgba(0, 0, 0, 0.15); 1799 border-radius: 5px; 1800 background-color: #ffffff; 1801 box-shadow: 0 3px 5px rgba(0, 0, 0, 0.06); 1802 padding: 6px; 1803 text-shadow: none; 1804} 1805 1806.lg-extension-name { 1807 font-weight: bold; 1808} 1809 1810.lg-extension-meta { 1811 spacing: 6px; 1812} 1813 1814#LookingGlassPropertyInspector { 1815 background: #ffffff; 1816 border: none; 1817 border-radius: 5px; 1818 padding: 6px; 1819 box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.25); 1820} 1821 1822/* Message List */ 1823.message-list { 1824 width: 31.5em; 1825 padding: 0 12px; 1826 text-shadow: none; 1827} 1828 1829.message-list .message-list-placeholder { 1830 spacing: 12px; 1831} 1832 1833.message-list-sections { 1834 margin: 0 16px; 1835} 1836 1837.message-list-section, 1838.message-list-sections, 1839.message-list-section-list { 1840 spacing: 6px; 1841} 1842 1843.message-list-controls { 1844 margin: 8px 16px 0; 1845 padding: 4px; 1846 spacing: 12px; 1847} 1848 1849.message { 1850 margin: 0 4px 6px; 1851} 1852 1853.message .message-icon-bin { 1854 margin: 8px 0; 1855 padding: 8px 0px 8px 8px; 1856} 1857 1858.message .message-icon-bin:rtl { 1859 padding: 8px 8px 8px 0px; 1860} 1861 1862.message .message-icon-bin > StIcon { 1863 icon-size: 32px; 1864 -st-icon-style: symbolic; 1865} 1866 1867.message .message-icon-bin > .fallback-app-icon { 1868 width: 16px; 1869 height: 16px; 1870} 1871 1872.message .message-secondary-bin { 1873 padding: 0 8px; 1874} 1875 1876.message .message-secondary-bin > .event-time { 1877 min-height: 18px; 1878 color: #565656; 1879 font-size: 1em; 1880 text-align: right; 1881 /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */ 1882 padding-bottom: 0.13em; 1883} 1884 1885.message .message-title { 1886 min-height: 18px; 1887 padding-top: 2px; 1888 color: #242424; 1889 font-weight: bold; 1890 font-size: 1em; 1891} 1892 1893.message .message-content { 1894 min-height: 40px; 1895 padding: 8px; 1896 color: #565656; 1897 font-size: 1em; 1898} 1899 1900.message .message-close-button { 1901 color: #424242; 1902 padding: 0; 1903 height: 24px; 1904 width: 24px; 1905 border-radius: 100px; 1906} 1907 1908.message .message-close-button:hover, .message .message-close-button:active { 1909 color: #242424; 1910} 1911 1912.message .message-close-button:hover, .message .message-close-button:focus { 1913 background-color: rgba(0, 0, 0, 0.12); 1914} 1915 1916.message .message-close-button:active { 1917 background-color: rgba(0, 0, 0, 0.2); 1918} 1919 1920.message .message-body { 1921 color: #565656; 1922} 1923 1924.url-highlighter { 1925 link-color: #3484e2; 1926} 1927 1928.message-media-control { 1929 margin: 16px 4px; 1930 padding: 8px; 1931 border-radius: 100px; 1932 color: #424242; 1933} 1934 1935.message-media-control:hover, .message-media-control:focus { 1936 color: #242424; 1937 background-color: rgba(0, 0, 0, 0.12); 1938} 1939 1940.message-media-control:active { 1941 color: #242424; 1942 background-color: rgba(0, 0, 0, 0.2); 1943} 1944 1945.message-media-control:insensitive { 1946 color: rgba(36, 36, 36, 0.45); 1947} 1948 1949.message-media-control:last-child:ltr { 1950 margin-right: 16px; 1951 padding-right: 8px; 1952} 1953 1954.message-media-control:last-child:rtl { 1955 margin-left: 16px; 1956 padding-left: 8px; 1957} 1958 1959.media-message-cover-icon { 1960 icon-size: 32px !important; 1961 margin: 0 0px 0 4px !important; 1962} 1963 1964.media-message-cover-icon:rtl { 1965 margin: 0 4px 0 0px !important; 1966} 1967 1968.media-message-cover-icon.fallback { 1969 icon-size: 16px !important; 1970 padding: 8px; 1971 border: none; 1972 border-radius: 5px; 1973 background-color: rgba(0, 0, 0, 0.12); 1974 color: #565656; 1975} 1976 1977.select-area-rubberband { 1978 background-color: rgba(140, 140, 140, 0.3); 1979 border: 1px solid #8C8C8C; 1980 border-radius: 3px; 1981} 1982 1983.user-icon { 1984 background-size: contain; 1985 color: rgba(255, 255, 255, 0.85); 1986 border-radius: 9999px; 1987 border: none; 1988 box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); 1989 icon-size: 64px; 1990} 1991 1992.user-icon:hover { 1993 color: white; 1994} 1995 1996.user-icon StIcon { 1997 background-color: rgba(255, 255, 255, 0); 1998 border-radius: 9999px; 1999 padding: 12px; 2000 width: 40px; 2001 height: 40px; 2002} 2003 2004.user-icon.user-avatar { 2005 border: 2px #dadada; 2006} 2007 2008.user-widget.vertical .user-icon { 2009 icon-size: 96px; 2010} 2011 2012.user-widget.vertical .user-icon StIcon { 2013 padding: 20px; 2014 padding-top: 18px; 2015 padding-bottom: 22px; 2016 width: 88px; 2017 height: 88px; 2018} 2019 2020.lightbox { 2021 background-color: black; 2022} 2023 2024.flashspot { 2025 background-color: white; 2026} 2027 2028.hidden { 2029 color: rgba(0, 0, 0, 0); 2030} 2031 2032.caps-lock-warning-label { 2033 text-align: center; 2034 padding-bottom: 8px; 2035 font-size: 9.75pt; 2036 font-weight: 400; 2037 color: #F27835; 2038} 2039 2040/* Network Dialogs */ 2041.nm-dialog { 2042 max-height: 34em; 2043 min-height: 31em; 2044 min-width: 32em; 2045} 2046 2047.nm-dialog-content { 2048 spacing: 20px; 2049 padding: 24px; 2050} 2051 2052.nm-dialog-header-hbox { 2053 spacing: 10px; 2054} 2055 2056.nm-dialog-airplane-box { 2057 spacing: 12px; 2058} 2059 2060.nm-dialog-airplane-headline { 2061 font-weight: bold; 2062 text-align: center; 2063} 2064 2065.nm-dialog-airplane-text { 2066 color: #242424; 2067} 2068 2069.nm-dialog-header { 2070 font-weight: bold; 2071} 2072 2073.nm-dialog-header-icon { 2074 icon-size: 32px; 2075} 2076 2077.nm-dialog-header-hbox { 2078 spacing: 10px; 2079} 2080 2081.nm-dialog-scroll-view { 2082 border: 1px solid rgba(0, 0, 0, 0.15); 2083 padding: 0; 2084 background-color: rgba(0, 0, 0, 0.05); 2085 border-radius: 5px; 2086} 2087 2088.nm-dialog-item { 2089 font-size: 11pt; 2090 border-bottom: 1px solid rgba(0, 0, 0, 0.15); 2091 padding: 12px; 2092 spacing: 0px; 2093} 2094 2095.nm-dialog-item:selected { 2096 background-color: #8C8C8C; 2097 color: rgba(255, 255, 255, 0.85); 2098} 2099 2100.nm-dialog-item:hover, .nm-dialog-item:focus { 2101 background-color: rgba(0, 0, 0, 0.12); 2102} 2103 2104.nm-dialog-item:active { 2105 background-color: rgba(0, 0, 0, 0.2); 2106} 2107 2108.nm-dialog-icon { 2109 icon-size: 16px; 2110} 2111 2112.nm-dialog-icons { 2113 spacing: 12px; 2114} 2115 2116.no-networks-label { 2117 color: #565656; 2118} 2119 2120.no-networks-box { 2121 spacing: 6px; 2122} 2123 2124/* Notifications & Message Tray */ 2125.notification-banner { 2126 font-size: 1em; 2127 width: 34em; 2128 min-height: 56px; 2129 margin: 5px; 2130 border-radius: 5px; 2131 color: #242424; 2132 background-color: #ffffff; 2133 border: none; 2134 text-shadow: none; 2135 box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25); 2136} 2137 2138.notification-banner:hover { 2139 background-color: white; 2140 box-shadow: 0 5px 12px rgba(0, 0, 0, 0.25); 2141} 2142 2143.notification-banner:focus { 2144 background-color: #ffffff; 2145} 2146 2147.notification-banner .notification-icon { 2148 padding: 5px; 2149} 2150 2151.notification-banner .notification-content { 2152 padding: 5px; 2153 spacing: 5px; 2154} 2155 2156.notification-banner .secondary-icon { 2157 icon-size: 1.2307692308em; 2158} 2159 2160.notification-banner .notification-actions { 2161 background-color: transparent; 2162 padding-top: 0; 2163 border-top: 1px solid rgba(0, 0, 0, 0.15); 2164 spacing: 1px; 2165} 2166 2167.notification-banner .notification-button { 2168 min-height: 40px; 2169 padding: 0 16px; 2170 background-color: transparent; 2171 color: #424242; 2172 font-weight: 500; 2173 border-width: 0; 2174} 2175 2176.notification-banner .notification-button:first-child { 2177 border-radius: 0 0 0 5px; 2178} 2179 2180.notification-banner .notification-button:last-child { 2181 border-radius: 0 0 5px 0; 2182} 2183 2184.notification-banner .notification-button:only-child, .notification-banner .notification-button:first-child:last-child { 2185 border-radius: 0 0 5px 5px; 2186} 2187 2188.notification-banner .notification-button:focus { 2189 background-color: transparent; 2190 color: #424242; 2191 box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.12); 2192} 2193 2194.notification-banner .notification-button:hover, .notification-banner .notification-button:focus:hover { 2195 background-color: rgba(0, 0, 0, 0.12); 2196 color: #242424; 2197 box-shadow: none; 2198} 2199 2200.notification-banner .notification-button:active { 2201 background-color: rgba(0, 0, 0, 0.2); 2202 color: #242424; 2203} 2204 2205.summary-source-counter { 2206 font-size: 10pt; 2207 font-weight: bold; 2208 height: 1.6em; 2209 width: 1.6em; 2210 -shell-counter-overlap-x: 3px; 2211 -shell-counter-overlap-y: 3px; 2212 background-color: #8C8C8C; 2213 color: rgba(255, 255, 255, 0.85); 2214 border: 2px solid #8C8C8C; 2215 box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); 2216 border-radius: 0.9em; 2217} 2218 2219.chat-body { 2220 spacing: 5px; 2221} 2222 2223.chat-response { 2224 margin: 5px; 2225} 2226 2227.chat-log-message { 2228 color: #242424; 2229} 2230 2231.chat-new-group { 2232 padding-top: 1em; 2233} 2234 2235.chat-received { 2236 padding-left: 4px; 2237} 2238 2239.chat-received:rtl { 2240 padding-left: 0px; 2241 padding-right: 4px; 2242} 2243 2244.chat-sent { 2245 padding-left: 18pt; 2246 color: #424242; 2247} 2248 2249.chat-sent:rtl { 2250 padding-left: 0; 2251 padding-right: 18pt; 2252} 2253 2254.chat-meta-message { 2255 padding-left: 4px; 2256 font-size: 9pt; 2257 font-weight: 400; 2258 color: #565656; 2259} 2260 2261.chat-meta-message:rtl { 2262 padding-left: 0; 2263 padding-right: 4px; 2264} 2265 2266/* OSD */ 2267.workspace-switcher-container, .switcher-list, .resize-popup, .osd-window { 2268 color: #242424; 2269 background-color: #ffffff; 2270 border: 1px solid rgba(0, 0, 0, 0); 2271 box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.25); 2272 border-radius: 5px; 2273 padding: 12px; 2274} 2275 2276.osd-window { 2277 text-align: center; 2278 font-weight: bold; 2279 spacing: 1em; 2280 margin: 32px; 2281 min-width: 64px; 2282 min-height: 64px; 2283} 2284 2285.osd-window StIcon { 2286 icon-size: 96px; 2287} 2288 2289.osd-window .osd-monitor-label { 2290 font-size: 3em; 2291} 2292 2293.osd-window .level { 2294 height: 4px; 2295 border-radius: 3px; 2296 background-color: rgba(0, 0, 0, 0.1); 2297 color: #242424; 2298 -barlevel-height: 4px; 2299 -barlevel-background-color: rgba(0, 0, 0, 0.1); 2300 -barlevel-active-background-color: #8C8C8C; 2301 -barlevel-overdrive-color: #f8464c; 2302 -barlevel-overdrive-separator-width: 2px; 2303 -barlevel-border-width: 0; 2304 -barlevel-border-color: rgba(0, 0, 0, 0.15); 2305} 2306 2307.osd-window .level-bar { 2308 background-color: white; 2309 border-radius: 16px; 2310} 2311 2312.pad-osd-window { 2313 padding: 32px; 2314 background-color: rgba(0, 0, 0, 0.6); 2315} 2316 2317.pad-osd-window .pad-osd-title-box { 2318 spacing: 12px; 2319} 2320 2321.pad-osd-window .pad-osd-title-menu-box { 2322 spacing: 6px; 2323} 2324 2325.combo-box-label { 2326 width: 15em; 2327} 2328 2329.overview-controls { 2330 padding-bottom: 32px; 2331} 2332 2333/* Top Bar */ 2334#panel { 2335 background-color: #f1f1f1; 2336 font-weight: normal; 2337 height: 28px; 2338 box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); 2339 color: #363636; 2340 transition-duration: 250ms; 2341 text-shadow: none; 2342 font-size: 9.75pt; 2343 font-weight: 400; 2344} 2345 2346#panel:overview, #panel.unlock-screen, #panel.login-screen, #panel.lock-screen { 2347 background-color: transparent; 2348 box-shadow: none; 2349} 2350 2351#panel:overview StLabel, #panel:overview StIcon, #panel.unlock-screen StLabel, #panel.unlock-screen StIcon, #panel.login-screen StLabel, #panel.login-screen StIcon, #panel.lock-screen StLabel, #panel.lock-screen StIcon { 2352 color: rgba(255, 255, 255, 0.85); 2353} 2354 2355#panel:overview .panel-button:hover, #panel.unlock-screen .panel-button:hover, #panel.login-screen .panel-button:hover, #panel.lock-screen .panel-button:hover { 2356 color: white; 2357 background-color: rgba(255, 255, 255, 0.15); 2358 text-shadow: none; 2359} 2360 2361#panel:overview .panel-button:active, #panel:overview .panel-button:active:hover, #panel:overview .panel-button:overview, #panel:overview .panel-button:overview:hover, #panel:overview .panel-button:focus, #panel:overview .panel-button:focus:hover, #panel:overview .panel-button:checked, #panel:overview .panel-button:checked:hover, #panel.unlock-screen .panel-button:active, #panel.unlock-screen .panel-button:active:hover, #panel.unlock-screen .panel-button:overview, #panel.unlock-screen .panel-button:overview:hover, #panel.unlock-screen .panel-button:focus, #panel.unlock-screen .panel-button:focus:hover, #panel.unlock-screen .panel-button:checked, #panel.unlock-screen .panel-button:checked:hover, #panel.login-screen .panel-button:active, #panel.login-screen .panel-button:active:hover, #panel.login-screen .panel-button:overview, #panel.login-screen .panel-button:overview:hover, #panel.login-screen .panel-button:focus, #panel.login-screen .panel-button:focus:hover, #panel.login-screen .panel-button:checked, #panel.login-screen .panel-button:checked:hover, #panel.lock-screen .panel-button:active, #panel.lock-screen .panel-button:active:hover, #panel.lock-screen .panel-button:overview, #panel.lock-screen .panel-button:overview:hover, #panel.lock-screen .panel-button:focus, #panel.lock-screen .panel-button:focus:hover, #panel.lock-screen .panel-button:checked, #panel.lock-screen .panel-button:checked:hover { 2362 color: white; 2363 background-color: rgba(255, 255, 255, 0.3); 2364 text-shadow: none; 2365} 2366 2367#panel:overview .panel-corner, #panel.unlock-screen .panel-corner, #panel.login-screen .panel-corner, #panel.lock-screen .panel-corner { 2368 -panel-corner-radius: 0; 2369 -panel-corner-background-color: transparent; 2370 -panel-corner-border-color: transparent; 2371} 2372 2373#panel .panel-corner { 2374 -panel-corner-radius: 0; 2375 -panel-corner-background-color: #f1f1f1; 2376 -panel-corner-border-width: 2px; 2377 -panel-corner-border-color: transparent; 2378 -panel-corner-opacity: 1; 2379 transition-duration: 250ms; 2380} 2381 2382#panel .panel-button { 2383 -natural-hpadding: 8px; 2384 -minimum-hpadding: 8px; 2385 font-weight: normal; 2386 color: #363636; 2387 text-shadow: none; 2388 transition-duration: 150ms; 2389 border-radius: 0; 2390} 2391 2392#panel .panel-button StLabel { 2393 padding: 0 2px; 2394} 2395 2396#panel .panel-button:hover { 2397 color: #363636; 2398 background-color: rgba(255, 255, 255, 0.15); 2399 text-shadow: none; 2400} 2401 2402#panel .panel-button:active, #panel .panel-button:active:hover, #panel .panel-button:overview, #panel .panel-button:overview:hover, #panel .panel-button:focus, #panel .panel-button:focus:hover, #panel .panel-button:checked, #panel .panel-button:checked:hover { 2403 background-color: #8C8C8C; 2404 color: rgba(255, 255, 255, 0.85); 2405 text-shadow: none; 2406 box-shadow: none; 2407} 2408 2409.unlock-screen #panel .panel-button, .login-screen #panel .panel-button, .lock-screen #panel .panel-button { 2410 color: #363636; 2411} 2412 2413.unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen #panel .panel-button:active, .login-screen #panel .panel-button:focus, .login-screen #panel .panel-button:hover, .login-screen #panel .panel-button:active, .lock-screen #panel .panel-button:focus, .lock-screen #panel .panel-button:hover, .lock-screen #panel .panel-button:active { 2414 color: #363636; 2415} 2416 2417#panel .panel-button.clock-display .clock { 2418 border: none; 2419 border-radius: 0; 2420 background: none; 2421 box-shadow: none; 2422} 2423 2424#panel .panel-button:hover, #panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked { 2425 box-shadow: none; 2426} 2427 2428#panel .panel-button.clock-display:hover, #panel .panel-button.clock-display:active, #panel .panel-button.clock-display:overview, #panel .panel-button.clock-display:focus, #panel .panel-button.clock-display:checked { 2429 box-shadow: none; 2430} 2431 2432#panel .panel-button.clock-display:hover .clock, #panel .panel-button.clock-display:active .clock, #panel .panel-button.clock-display:overview .clock, #panel .panel-button.clock-display:focus .clock, #panel .panel-button.clock-display:checked .clock { 2433 box-shadow: none; 2434} 2435 2436#panel .panel-button .system-status-icon { 2437 icon-size: 16px; 2438 padding: 5px; 2439 margin: 0 4px; 2440} 2441 2442#panel .panel-button .panel-status-indicators-box .system-status-icon, 2443#panel .panel-button .panel-status-menu-box .system-status-icon { 2444 margin: 0; 2445} 2446 2447#panel .panel-button .app-menu-icon { 2448 -st-icon-style: symbolic; 2449} 2450 2451#panel #panelActivities.panel-button { 2452 -natural-hpadding: 18px; 2453} 2454 2455#panel.unlock-screen .panel-button:hover, #panel.unlock-screen .panel-button:active, #panel.unlock-screen .panel-button:overview, #panel.unlock-screen .panel-button:focus, #panel.unlock-screen .panel-button:checked, #panel.login-screen .panel-button:hover, #panel.login-screen .panel-button:active, #panel.login-screen .panel-button:overview, #panel.login-screen .panel-button:focus, #panel.login-screen .panel-button:checked, #panel:overview .panel-button:hover, #panel:overview .panel-button:active, #panel:overview .panel-button:overview, #panel:overview .panel-button:focus, #panel:overview .panel-button:checked { 2456 box-shadow: none; 2457} 2458 2459#panel.unlock-screen .panel-button.clock-display:hover, #panel.unlock-screen .panel-button.clock-display:active, #panel.unlock-screen .panel-button.clock-display:overview, #panel.unlock-screen .panel-button.clock-display:focus, #panel.unlock-screen .panel-button.clock-display:checked, #panel.login-screen .panel-button.clock-display:hover, #panel.login-screen .panel-button.clock-display:active, #panel.login-screen .panel-button.clock-display:overview, #panel.login-screen .panel-button.clock-display:focus, #panel.login-screen .panel-button.clock-display:checked, #panel:overview .panel-button.clock-display:hover, #panel:overview .panel-button.clock-display:active, #panel:overview .panel-button.clock-display:overview, #panel:overview .panel-button.clock-display:focus, #panel:overview .panel-button.clock-display:checked { 2460 box-shadow: none; 2461} 2462 2463#panel.unlock-screen .panel-button.clock-display:hover .clock, #panel.unlock-screen .panel-button.clock-display:active .clock, #panel.unlock-screen .panel-button.clock-display:overview .clock, #panel.unlock-screen .panel-button.clock-display:focus .clock, #panel.unlock-screen .panel-button.clock-display:checked .clock, #panel.login-screen .panel-button.clock-display:hover .clock, #panel.login-screen .panel-button.clock-display:active .clock, #panel.login-screen .panel-button.clock-display:overview .clock, #panel.login-screen .panel-button.clock-display:focus .clock, #panel.login-screen .panel-button.clock-display:checked .clock, #panel:overview .panel-button.clock-display:hover .clock, #panel:overview .panel-button.clock-display:active .clock, #panel:overview .panel-button.clock-display:overview .clock, #panel:overview .panel-button.clock-display:focus .clock, #panel:overview .panel-button.clock-display:checked .clock { 2464 box-shadow: none; 2465} 2466 2467#panel .panel-status-indicators-box, 2468#panel .panel-status-menu-box { 2469 spacing: 2px; 2470} 2471 2472#panel .power-status.panel-status-indicators-box { 2473 spacing: 0; 2474} 2475 2476#panel .screencast-indicator, 2477#panel .remote-access-indicator { 2478 color: #F27835; 2479} 2480 2481#panel #panelActivities.panel-button > * { 2482 background-image: url("assets/activities.svg"); 2483 background-position: center top; 2484 width: 24px; 2485 height: 24px; 2486 background-color: transparent !important; 2487 background-gradient-direction: none !important; 2488 border: none; 2489 color: transparent; 2490} 2491 2492#panel #panelActivities.panel-button:active, #panel #panelActivities.panel-button:overview, #panel #panelActivities.panel-button:focus, #panel #panelActivities.panel-button:checked { 2493 background-color: transparent; 2494 border: none; 2495} 2496 2497#panel #panelActivities.panel-button:overview > * { 2498 background-image: url("assets/activities-white.svg"); 2499} 2500 2501/* Popovers/Menus */ 2502.popup-menu-boxpointer { 2503 -arrow-border-radius: 2px; 2504 -arrow-background-color: transparent; 2505 -arrow-border-width: 0; 2506 -arrow-border-color: transparent; 2507 -arrow-base: 64px; 2508 -arrow-rise: 0; 2509 -arrow-box-shadow: none; 2510 background: transparent; 2511} 2512 2513.popup-menu { 2514 min-width: 12em; 2515 color: #242424; 2516 font-weight: normal; 2517 padding: 3px 0; 2518 font-size: 9.75pt; 2519 font-weight: 400; 2520 border-image: url("assets/menu-solid.svg") 24 32 28 28; 2521} 2522 2523.popup-menu .popup-menu-content { 2524 padding: 10px 0; 2525 font-weight: normal; 2526} 2527 2528.popup-menu .popup-menu-item { 2529 spacing: 12px; 2530 padding: 6px; 2531 color: #424242; 2532 text-shadow: none; 2533 border-radius: 2px; 2534 font-weight: normal; 2535} 2536 2537.popup-menu .popup-menu-item:ltr { 2538 padding-right: 1.5em; 2539 padding-left: 0; 2540} 2541 2542.popup-menu .popup-menu-item:rtl { 2543 padding-right: 0; 2544 padding-left: 1.5em; 2545} 2546 2547.popup-menu .popup-menu-item:checked { 2548 font-weight: normal; 2549 background: none; 2550 box-shadow: none; 2551 border-image: url("assets/submenu-open.svg") 28 28 2 2; 2552} 2553 2554.popup-menu .popup-menu-item.selected:checked { 2555 color: rgba(255, 255, 255, 0.85); 2556 background: none; 2557 background-color: transparent; 2558 border-image: url("assets/menu-hover.svg") 28 28 2 2; 2559 transition-duration: 0ms; 2560 animation: none; 2561 box-shadow: none; 2562} 2563 2564.popup-menu .popup-menu-item:checked:active { 2565 color: rgba(255, 255, 255, 0.85); 2566 background: none; 2567 background-color: transparent; 2568 border-image: url("assets/menu-active.svg") 28 28 2 2; 2569 transition-duration: 100ms; 2570 animation: none; 2571 box-shadow: none; 2572} 2573 2574.popup-menu .popup-menu-item:checked:insensitive { 2575 color: rgba(255, 255, 255, 0.45); 2576} 2577 2578.popup-menu .popup-menu-item.selected { 2579 color: rgba(255, 255, 255, 0.85); 2580 background: none; 2581 background-color: transparent; 2582 border-image: url("assets/menu-hover.svg") 28 28 2 2; 2583 transition-duration: 0ms; 2584 animation: none; 2585 box-shadow: none; 2586} 2587 2588.popup-menu .popup-menu-item:active, .popup-menu .popup-menu-item.selected:active { 2589 color: rgba(255, 255, 255, 0.85); 2590 background: none; 2591 background-color: transparent; 2592 border-image: url("assets/menu-active.svg") 28 28 2 2; 2593 transition-duration: 100ms; 2594 animation: none; 2595 box-shadow: none; 2596} 2597 2598.popup-menu .popup-menu-item:insensitive { 2599 color: rgba(36, 36, 36, 0.45); 2600} 2601 2602.popup-menu .popup-sub-menu { 2603 background: none; 2604 box-shadow: none; 2605 border-image: url("assets/submenu.svg") 28 28 2 2; 2606} 2607 2608.popup-menu .popup-inactive-menu-item { 2609 color: #424242; 2610} 2611 2612.popup-menu .popup-inactive-menu-item:insensitive { 2613 color: rgba(36, 36, 36, 0.45); 2614} 2615 2616.popup-menu.panel-menu { 2617 -boxpointer-gap: 4px; 2618 margin-bottom: 1.75em; 2619} 2620 2621.popup-menu StEntry { 2622 selection-background-color: rgba(255, 255, 255, 0.85); 2623 selected-background-color: rgba(255, 255, 255, 0.85); 2624 selected-color: #8C8C8C; 2625 caret-color: #242424; 2626} 2627 2628.popup-menu StEntry StLabel.hint-text { 2629 margin-left: 2px; 2630 color: rgba(36, 36, 36, 0.7); 2631} 2632 2633.popup-menu .search-entry { 2634 border-radius: 9999px; 2635} 2636 2637.popup-menu-arrow, 2638.popup-menu-icon { 2639 icon-size: 16px; 2640} 2641 2642.popup-menu-ornament { 2643 width: 1.2em; 2644} 2645 2646.popup-menu-ornament:ltr { 2647 text-align: right; 2648} 2649 2650.popup-menu-ornament:rtl { 2651 text-align: left; 2652} 2653 2654.popup-separator-menu-item { 2655 margin: 0; 2656 padding: 0 0; 2657 background: none; 2658 border: none; 2659 height: 1px; 2660} 2661 2662.popup-separator-menu-item .popup-separator-menu-item-separator { 2663 height: 1px; 2664 margin: 0 40px; 2665 background-color: rgba(0, 0, 0, 0.15); 2666 padding: 0 0; 2667} 2668 2669.popup-sub-menu .popup-separator-menu-item .popup-separator-menu-item-separator { 2670 padding: 0 0; 2671 margin: 0 58px 0 24px; 2672} 2673 2674.background-menu { 2675 -boxpointer-gap: 4px; 2676 -arrow-rise: 0px; 2677} 2678 2679.aggregate-menu { 2680 min-width: 21em; 2681} 2682 2683.aggregate-menu .popup-menu-icon { 2684 padding: 0; 2685 margin: 0 0; 2686 -st-icon-style: symbolic; 2687} 2688 2689.aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:ltr { 2690 /* 12px spacing + 2*4px padding */ 2691 padding-left: 16px; 2692 margin-left: 1em; 2693} 2694 2695.aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:rtl { 2696 /* 12px spacing + 2*4px padding */ 2697 padding-right: 16px; 2698 margin-right: 1em; 2699} 2700 2701/* Screen Shield */ 2702.unlock-dialog-clock { 2703 color: white; 2704 font-weight: 300; 2705 text-align: center; 2706 spacing: 24px; 2707 padding-bottom: 2.5em; 2708} 2709 2710.unlock-dialog-clock-time { 2711 font-size: 64pt; 2712 padding-top: 42px; 2713 font-feature-settings: "tnum"; 2714} 2715 2716.unlock-dialog-clock-date { 2717 font-size: 16pt; 2718 font-weight: normal; 2719} 2720 2721.unlock-dialog-clock-hint { 2722 font-weight: normal; 2723 padding-top: 48px; 2724} 2725 2726.unlock-dialog-notifications-container { 2727 margin: 12px 0; 2728 spacing: 6px; 2729 width: 23em; 2730 background-color: transparent; 2731} 2732 2733.unlock-dialog-notifications-container .summary-notification-stack-scrollview { 2734 padding-top: 0; 2735 padding-bottom: 0; 2736} 2737 2738.unlock-dialog-notifications-container .notification, 2739.unlock-dialog-notifications-container .unlock-dialog-notification-source { 2740 padding: 12px 6px; 2741 border: none; 2742 background-color: rgba(0, 0, 0, 0.6); 2743 color: white; 2744 border-radius: 5px; 2745} 2746 2747.unlock-dialog-notifications-container .notification.critical, 2748.unlock-dialog-notifications-container .unlock-dialog-notification-source.critical { 2749 background-color: rgba(0, 0, 0, 0.3); 2750} 2751 2752.unlock-dialog-notification-label { 2753 padding: 0px 0px 0px 12px; 2754} 2755 2756.unlock-dialog-notification-count-text { 2757 weight: bold; 2758 padding: 0 6px; 2759 color: white; 2760 background-color: #8C8C8C; 2761 border-radius: 99px; 2762 margin-right: 12px; 2763} 2764 2765.screen-shield-background { 2766 background: black; 2767 box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15); 2768} 2769 2770#unlockDialogNotifications StButton#vhandle, #unlockDialogNotifications StButton#hhandle { 2771 background-color: rgba(245, 245, 245, 0.3); 2772} 2773 2774#unlockDialogNotifications StButton#vhandle:hover, #unlockDialogNotifications StButton#vhandle:focus, #unlockDialogNotifications StButton#hhandle:hover, #unlockDialogNotifications StButton#hhandle:focus { 2775 background-color: rgba(245, 245, 245, 0.5); 2776} 2777 2778#unlockDialogNotifications StButton#vhandle:active, #unlockDialogNotifications StButton#hhandle:active { 2779 background-color: rgba(140, 140, 140, 0.5); 2780} 2781 2782/* Search */ 2783.list-search-result, .search-provider-icon { 2784 border-radius: 5px; 2785 padding: 6px; 2786 transition-duration: 100ms; 2787 text-align: center; 2788} 2789 2790.list-search-result:focus, .search-provider-icon:focus, .list-search-result:hover, .search-provider-icon:hover, .list-search-result:selected, .search-provider-icon:selected { 2791 background-color: rgba(255, 255, 255, 0.15); 2792 transition-duration: 200ms; 2793} 2794 2795.list-search-result:active, .search-provider-icon:active, .list-search-result:checked, .search-provider-icon:checked { 2796 background-color: rgba(255, 255, 255, 0.3); 2797} 2798 2799#searchResultsContent { 2800 max-width: 1024px; 2801 spacing: 8px; 2802 font-size: 9.75pt; 2803 font-weight: 400; 2804} 2805 2806.search-section { 2807 spacing: 8px; 2808} 2809 2810.search-section .search-section-separator { 2811 height: 0; 2812 background-color: rgba(255, 255, 255, 0.15); 2813} 2814 2815.search-section-content { 2816 spacing: 8px; 2817 border-radius: 16px; 2818 padding: 18px; 2819 border: none; 2820 box-shadow: none; 2821 background: rgba(255, 255, 255, 0.15); 2822 text-shadow: none; 2823 color: rgba(255, 255, 255, 0.85); 2824} 2825 2826.search-statustext { 2827 font-size: 2em; 2828 font-weight: bold; 2829 color: rgba(255, 255, 255, 0.5); 2830} 2831 2832.grid-search-results { 2833 spacing: 36px; 2834} 2835 2836.search-provider-icon .list-search-provider-content { 2837 spacing: 12px; 2838} 2839 2840.search-provider-icon .list-search-provider-content .list-search-provider-details { 2841 width: 120px; 2842 margin-top: 0; 2843 color: rgba(255, 255, 255, 0.5); 2844} 2845 2846.list-search-results { 2847 spacing: 6px; 2848} 2849 2850.list-search-result .list-search-result-content { 2851 spacing: 6px; 2852} 2853 2854.list-search-result .list-search-result-title { 2855 spacing: 12px; 2856} 2857 2858.list-search-result .list-search-result-description { 2859 color: rgba(255, 255, 255, 0.85); 2860} 2861 2862/* Scrollbars */ 2863StScrollView.vfade { 2864 -st-vfade-offset: 32px; 2865} 2866 2867StScrollView.hfade { 2868 -st-hfade-offset: 32px; 2869} 2870 2871StScrollBar { 2872 padding: 0; 2873} 2874 2875StScrollView StScrollBar { 2876 min-width: 16px; 2877 min-height: 16px; 2878} 2879 2880StScrollBar StBin#trough { 2881 margin: 6px; 2882 border-radius: 100px; 2883 background-color: rgba(0, 0, 0, 0.12); 2884} 2885 2886StScrollBar StButton#vhandle, StScrollBar StButton#hhandle { 2887 border-radius: 100px; 2888 background-color: #565656; 2889 margin: 6px; 2890} 2891 2892StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover { 2893 background-color: #424242; 2894} 2895 2896StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { 2897 background-color: #242424; 2898} 2899 2900.app-folder-dialog .folder-name-container .folder-name-entry, .search-entry { 2901 width: 320px; 2902 min-height: 28px; 2903 padding: 2px 10px; 2904 border: none; 2905 color: rgba(255, 255, 255, 0.5); 2906 caret-color: rgba(255, 255, 255, 0.85); 2907 selection-background-color: rgba(255, 255, 255, 0.3); 2908 selected-color: rgba(255, 255, 255, 0.85); 2909 color: rgba(255, 255, 255, 0.3); 2910 background-color: rgba(255, 255, 255, 0.12); 2911 border-radius: 8px; 2912 border-color: transparent; 2913 box-shadow: none; 2914} 2915 2916.app-folder-dialog .folder-name-container .folder-name-entry:focus, .search-entry:focus { 2917 color: rgba(255, 255, 255, 0.85); 2918 border-color: transparent; 2919 background-color: rgba(255, 255, 255, 0.18); 2920 border: none; 2921 color: rgba(255, 255, 255, 0.85); 2922} 2923 2924.app-folder-dialog .folder-name-container .folder-name-entry .search-entry-icon, .search-entry .search-entry-icon { 2925 icon-size: 16px; 2926 padding: 0 0; 2927 color: rgba(255, 255, 255, 0.5); 2928} 2929 2930.app-folder-dialog .folder-name-container .folder-name-entry:hover .search-entry-icon, .app-folder-dialog .folder-name-container .folder-name-entry:focus .search-entry-icon, .search-entry:hover .search-entry-icon, .search-entry:focus .search-entry-icon { 2931 color: rgba(255, 255, 255, 0.85); 2932} 2933 2934.app-folder-dialog .folder-name-container .folder-name-entry:insensitive, .search-entry:insensitive { 2935 border: none; 2936 color: rgba(255, 255, 255, 0.45); 2937} 2938 2939.app-folder-dialog .folder-name-container .folder-name-entry StLabel.hint-text, .search-entry StLabel.hint-text { 2940 color: rgba(255, 255, 255, 0.5); 2941} 2942 2943/* Slider */ 2944.slider { 2945 height: 20px; 2946 color: white; 2947 -slider-height: 2px; 2948 -slider-background-color: rgba(0, 0, 0, 0.2); 2949 -slider-border-color: transparent; 2950 -slider-active-background-color: #8C8C8C; 2951 -slider-active-border-color: transparent; 2952 -slider-border-width: 0; 2953 -slider-handle-radius: 7px; 2954 -slider-handle-border-width: 1px; 2955 -slider-handle-border-color: rgba(0, 0, 0, 0.15); 2956 -barlevel-height: 2px; 2957 -barlevel-background-color: rgba(0, 0, 0, 0.2); 2958 -barlevel-border-color: transparent; 2959 -barlevel-active-background-color: #8C8C8C; 2960 -barlevel-active-border-color: transparent; 2961 -barlevel-overdrive-color: #f8464c; 2962 -barlevel-overdrive-border-color: transparent; 2963 -barlevel-overdrive-separator-width: 2px; 2964 -barlevel-border-width: 0; 2965} 2966 2967.popup-menu-item.selected .slider { 2968 color: white; 2969 -slider-background-color: rgba(0, 0, 0, 0.2); 2970 -slider-active-background-color: rgba(255, 255, 255, 0.45); 2971 -barlevel-background-color: rgba(0, 0, 0, 0.2); 2972 -barlevel-active-background-color: rgba(255, 255, 255, 0.45); 2973} 2974 2975/* App Switcher */ 2976.switcher-popup { 2977 padding: 8px; 2978 spacing: 24px; 2979} 2980 2981.switcher-list .item-box { 2982 padding: 8px; 2983 border-radius: 5px; 2984 border: 1px solid transparent; 2985} 2986 2987.switcher-list .item-box:outlined { 2988 background-color: rgba(0, 0, 0, 0.12); 2989 color: #242424; 2990} 2991 2992.switcher-list .item-box:selected { 2993 background-color: #8C8C8C; 2994 color: rgba(255, 255, 255, 0.85); 2995} 2996 2997.switcher-list .thumbnail-box { 2998 padding: 2px; 2999 spacing: 6px; 3000} 3001 3002.switcher-list .thumbnail { 3003 width: 256px; 3004} 3005 3006.switcher-list .separator { 3007 width: 1px; 3008 background: rgba(0, 0, 0, 0.15); 3009} 3010 3011.switcher-list .switcher-list-item-container { 3012 spacing: 12px; 3013} 3014 3015.switcher-arrow { 3016 border-color: rgba(0, 0, 0, 0); 3017 color: #565656; 3018} 3019 3020.switcher-arrow:highlighted { 3021 color: #242424; 3022} 3023 3024.input-source-switcher-symbol { 3025 font-size: 34pt; 3026 width: 96px; 3027 height: 96px; 3028} 3029 3030.cycler-highlight { 3031 border: 5px solid #8C8C8C; 3032} 3033 3034/* Switches */ 3035.toggle-switch { 3036 width: 40px; 3037 height: 24px; 3038 background-size: contain; 3039 background-image: url("assets/toggle-off.svg"); 3040} 3041 3042.toggle-switch:checked { 3043 background-image: url("assets/toggle-on.svg"); 3044} 3045 3046.popup-menu-item.selected .toggle-switch { 3047 background-image: url("assets/toggle-off.svg"); 3048} 3049 3050.popup-menu-item.selected .toggle-switch:checked { 3051 background-image: url("assets/toggle-on.svg"); 3052} 3053 3054/* Tiled window previews */ 3055.tile-preview { 3056 background-color: rgba(140, 140, 140, 0.3); 3057 border: 1px solid #8C8C8C; 3058} 3059 3060.tile-preview-left.on-primary { 3061 border-radius: 6px 0 0 0; 3062} 3063 3064.tile-preview-right.on-primary { 3065 border-radius: 0 6px 0 0; 3066} 3067 3068.tile-preview-left.tile-preview-right.on-primary { 3069 border-radius: 6px 6px 0 0; 3070} 3071 3072/* Workspace Switcher */ 3073.workspace-switcher-group { 3074 padding: 12px; 3075} 3076 3077.workspace-switcher { 3078 background: transparent; 3079 border: none; 3080 border-radius: 0; 3081 padding: 0; 3082 spacing: 12px; 3083} 3084 3085.ws-switcher-box { 3086 background: transparent; 3087 height: 50px; 3088 background-size: 32px; 3089 background: rgba(0, 0, 0, 0.12); 3090 border-radius: 5px; 3091} 3092 3093.ws-switcher-active-up, 3094.ws-switcher-active-down, 3095.ws-switcher-active-left, 3096.ws-switcher-active-right { 3097 height: 52px; 3098 background-color: #8C8C8C; 3099 color: rgba(255, 255, 255, 0.85); 3100 border-radius: 8px; 3101 border: none; 3102} 3103 3104.icon-grid { 3105 row-spacing: 12px; 3106 column-spacing: 12px; 3107 max-row-spacing: 72px; 3108 max-column-spacing: 72px; 3109 page-padding-top: 24px; 3110 page-padding-bottom: 24px; 3111 page-padding-left: 12px; 3112 page-padding-right: 12px; 3113} 3114 3115.apps-scroll-view { 3116 padding: 0; 3117} 3118 3119.page-navigation-hint { 3120 width: 300px; 3121} 3122 3123.page-navigation-hint.dnd { 3124 background: rgba(255, 255, 255, 0.1); 3125} 3126 3127.page-navigation-hint.next:ltr, .page-navigation-hint.previous:rtl { 3128 background-gradient-start: rgba(255, 255, 255, 0.05); 3129 background-gradient-end: transparent; 3130 background-gradient-direction: horizontal; 3131 border-radius: 15px 0px 0px 15px; 3132} 3133 3134.page-navigation-hint.previous:ltr, .page-navigation-hint.next:rtl { 3135 background-gradient-start: transparent; 3136 background-gradient-end: rgba(255, 255, 255, 0.05); 3137 background-gradient-direction: horizontal; 3138 border-radius: 0px 15px 15px 0px; 3139} 3140 3141.page-navigation-arrow { 3142 margin: 6px; 3143 width: 24px; 3144 height: 24px; 3145} 3146 3147#dash { 3148 margin-top: 12px; 3149 padding: 0 10px; 3150} 3151 3152#dash .placeholder { 3153 background-image: none; 3154 background-size: contain; 3155 height: 32px; 3156} 3157 3158#dash .overview-icon { 3159 padding: 5px; 3160} 3161 3162#dash .app-well-app-running-dot { 3163 background-color: rgba(0, 0, 0, 0.75); 3164} 3165 3166.dash-background { 3167 background-color: rgba(241, 241, 241, 0.35); 3168 margin-bottom: 16px; 3169 padding: 10px; 3170 border-radius: 22px; 3171} 3172 3173.dash-item-container .app-well-app, .show-apps { 3174 padding: 10px 1.5px 26px; 3175} 3176 3177.dash-separator { 3178 width: 1px; 3179 margin: 0 6.5px 16px; 3180 background-color: rgba(255, 255, 255, 0.25); 3181} 3182 3183.workspace-animation { 3184 background-color: #2a2a2a; 3185} 3186 3187.calendar .calendar-change-month-back, 3188.calendar .calendar-change-month-forward { 3189 padding: 0 2px; 3190} 3191 3192.controls-manager, .secondary-monitor-workspaces { 3193 spacing: 12px; 3194} 3195 3196#overviewGroup { 3197 background-color: #2a2a2a; 3198 background-image: url("assets/background.png"); 3199 background-repeat: no-repeat; 3200 background-size: cover; 3201} 3202 3203#appMenu { 3204 spacing: 6px; 3205} 3206 3207#appMenu .label-shadow { 3208 color: transparent; 3209} 3210 3211#appMenu .panel-status-menu-box { 3212 padding: 0 6px; 3213 spacing: 6px; 3214} 3215 3216#unlockDialogNotifications StButton#vhandle, #unlockDialogNotifications StButton#hhandle { 3217 background-color: rgba(245, 245, 245, 0.3); 3218} 3219 3220#unlockDialogNotifications StButton#vhandle:hover, #unlockDialogNotifications StButton#vhandle:focus, #unlockDialogNotifications StButton#hhandle:hover, #unlockDialogNotifications StButton#hhandle:focus { 3221 background-color: rgba(245, 245, 245, 0.5); 3222} 3223 3224#unlockDialogNotifications StButton#vhandle:active, #unlockDialogNotifications StButton#hhandle:active { 3225 background-color: rgba(140, 140, 140, 0.5); 3226} 3227 3228.search-entry { 3229 margin-top: 24px; 3230 margin-bottom: 6px; 3231} 3232 3233.window-picker { 3234 spacing: 6px; 3235} 3236 3237.window-caption { 3238 color: #dadada; 3239 background-color: #2a2a2a; 3240 border-radius: 9999px; 3241 padding: 6px 12px; 3242 font-size: 9.75pt; 3243 font-weight: 400; 3244} 3245 3246.window-close { 3247 background-color: #f8464c; 3248 color: white; 3249 border-radius: 21px; 3250 padding: 3px; 3251 height: 30px; 3252 width: 30px; 3253 box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.5); 3254 transition-duration: 300ms; 3255} 3256 3257.window-close StIcon { 3258 icon-size: 1px; 3259} 3260 3261.window-close:hover { 3262 color: white; 3263 background-color: #f96369; 3264} 3265 3266.window-close:active { 3267 color: white; 3268 background-color: #f7292f; 3269} 3270 3271.workspace-background { 3272 border-radius: 30px; 3273 background-color: #2a2a2a; 3274 box-shadow: 0 4px 16px 4px rgba(0, 0, 0, 0.3); 3275} 3276 3277/* Workspace pager */ 3278.workspace-thumbnails { 3279 visible-width: 32px; 3280 spacing: 6px; 3281 padding: 6px; 3282} 3283 3284.workspace-thumbnails .workspace-thumbnail { 3285 color: rgba(255, 255, 255, 0.85); 3286 background-color: rgba(255, 255, 255, 0.15); 3287 border: none; 3288 border-radius: 5px; 3289} 3290 3291.workspace-thumbnails .placeholder { 3292 background-image: url("assets/dash-placeholder.svg"); 3293 background-size: contain; 3294 width: 18px; 3295 height: 24px; 3296} 3297 3298.workspace-thumbnail-indicator { 3299 border: 3px solid #8C8C8C; 3300 border-radius: 3px; 3301 padding: 0px; 3302} 3303 3304.bottom #dashtodockDashScrollview, 3305.top #dashtodockDashScrollview { 3306 -st-hfade-offset: 24px; 3307} 3308 3309.left #dashtodockDashScrollview, 3310.right #dashtodockDashScrollview { 3311 -st-vfade-offset: 24px; 3312} 3313 3314#dashtodockContainer { 3315 background-color: transparent; 3316} 3317 3318#dashtodockContainer .number-overlay { 3319 color: white; 3320 background-color: rgba(0, 0, 0, 0.75); 3321 text-align: center; 3322} 3323 3324#dashtodockContainer .notification-badge { 3325 color: white; 3326 background-color: #8C8C8C; 3327 box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25); 3328 border-radius: 1000px; 3329 margin: 2px; 3330 padding: 0.2em 0.6em; 3331 font-weight: bold; 3332 text-align: center; 3333} 3334 3335#dashtodockContainer.straight-corner #dash .dash-background, #dashtodockContainer.shrink.straight-corner #dash .dash-background { 3336 border-radius: 0; 3337 margin: 0; 3338} 3339 3340#dashtodockContainer.extended.top #dash, #dashtodockContainer.extended.bottom #dash { 3341 border-left: 0; 3342 border-right: 0; 3343 padding-top: 0; 3344 padding-bottom: 0; 3345 margin-top: 0; 3346} 3347 3348#dashtodockContainer.extended.top .dash-background, #dashtodockContainer.extended.bottom .dash-background { 3349 margin-bottom: 0; 3350} 3351 3352#dashtodockContainer.extended.right #dash, #dashtodockContainer.extended.left #dash { 3353 border-top: 0; 3354 border-bottom: 0; 3355 padding-top: 0; 3356 padding-bottom: 0; 3357 margin-top: 0; 3358} 3359 3360#dashtodockContainer.extended.right .dash-background, #dashtodockContainer.extended.left .dash-background { 3361 margin-bottom: 0; 3362} 3363 3364#dashtodockContainer.dashtodock #dash { 3365 background: none; 3366} 3367 3368#dashtodockContainer #dash { 3369 background: none; 3370} 3371 3372#dashtodockContainer #dash StWidget.focused .app-well-app-running-dot { 3373 background-color: #8C8C8C; 3374} 3375 3376#dashtodockContainer #dash .app-well-app:hover .overview-icon, #dashtodockContainer #dash .app-well-app:focus .overview-icon, #dashtodockContainer #dash .app-well-app:selected .overview-icon, 3377#dashtodockContainer #dash .show-apps:hover .overview-icon, 3378#dashtodockContainer #dash .show-apps:focus .overview-icon, 3379#dashtodockContainer #dash .show-apps:selected .overview-icon { 3380 background-color: rgba(36, 36, 36, 0.15); 3381} 3382 3383#dashtodockContainer #dash .app-well-app:active .overview-icon, #dashtodockContainer #dash .app-well-app:checked .overview-icon, 3384#dashtodockContainer #dash .show-apps:active .overview-icon, 3385#dashtodockContainer #dash .show-apps:checked .overview-icon { 3386 background-color: rgba(36, 36, 36, 0.25); 3387} 3388 3389#dashtodockContainer #dash .show-apps, #dashtodockContainer #dash .show-apps .show-apps-icon, #dashtodockContainer #dash .show-apps .overview-icon { 3390 color: #242424; 3391} 3392 3393#dashtodockContainer .dash-background { 3394 background-color: rgba(241, 241, 241, 0.65); 3395 border: 1px solid rgba(0, 0, 0, 0.08); 3396 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); 3397} 3398 3399#dashtodockContainer:overview #dash { 3400 background: none; 3401} 3402 3403#dashtodockContainer:overview #dash .app-well-app:hover .overview-icon, #dashtodockContainer:overview #dash .app-well-app:focus .overview-icon, #dashtodockContainer:overview #dash .app-well-app:selected .overview-icon, 3404#dashtodockContainer:overview #dash .show-apps:hover .overview-icon, 3405#dashtodockContainer:overview #dash .show-apps:focus .overview-icon, 3406#dashtodockContainer:overview #dash .show-apps:selected .overview-icon { 3407 background-color: rgba(255, 255, 255, 0.15); 3408} 3409 3410#dashtodockContainer:overview #dash .app-well-app:active .overview-icon, #dashtodockContainer:overview #dash .app-well-app:checked .overview-icon, 3411#dashtodockContainer:overview #dash .show-apps:active .overview-icon, 3412#dashtodockContainer:overview #dash .show-apps:checked .overview-icon { 3413 background-color: rgba(255, 255, 255, 0.3); 3414} 3415 3416#dashtodockContainer:overview #dash .show-apps, #dashtodockContainer:overview #dash .show-apps .show-apps-icon, #dashtodockContainer:overview #dash .show-apps .overview-icon { 3417 color: rgba(255, 255, 255, 0.85); 3418} 3419 3420#dashtodockContainer:overview #dash .dash-background { 3421 background-color: rgba(255, 255, 255, 0.15); 3422 border: 1px solid rgba(0, 0, 0, 0.08); 3423 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); 3424} 3425 3426#dashtodockContainer:overview #dash .app-well-app-running-dot { 3427 background-color: rgba(255, 255, 255, 0.85); 3428} 3429 3430#dashtodockContainer:overview #dash StWidget.focused .app-well-app-running-dot { 3431 background-color: #8C8C8C; 3432} 3433 3434#dashtodockContainer.opaque:overview #dash, #dashtodockContainer.transparent:overview #dash { 3435 background-color: transparent !important; 3436 box-shadow: none !important; 3437} 3438 3439#dashtodockContainer.opaque:overview .dash-background, #dashtodockContainer.transparent:overview .dash-background { 3440 background-color: transparent !important; 3441} 3442 3443#dashtodockContainer.extended:overview #dash, #dashtodockContainer.opaque.extended:overview #dash, #dashtodockContainer.transparent.extended:overview #dash { 3444 background: none; 3445} 3446 3447#dashtodockContainer.running-dots .dash-item-container > StButton, #dashtodockContainer.dashtodock .dash-item-container > StButton { 3448 transition-duration: 250ms; 3449 background-size: contain; 3450} 3451 3452#dashtodockContainer.shrink .dash-item-container > StButton, #dashtodockContainer.dashtodock .dash-item-container > StButton { 3453 padding: 1px 2px; 3454} 3455 3456#dashtodockContainer .app-well-app .overview-icon, 3457#dashtodockContainer .show-apps .overview-icon { 3458 padding: 8px; 3459 background-size: contain; 3460} 3461 3462#dashtodockContainer.extended .app-well-app .overview-icon, 3463#dashtodockContainer.extended .show-apps .overview-icon, #dashtodockContainer.extended:overview .app-well-app .overview-icon, 3464#dashtodockContainer.extended:overview .show-apps .overview-icon { 3465 border-radius: 5px; 3466} 3467 3468#dashtodockContainer .metro .overview-icon { 3469 border-radius: 0; 3470} 3471 3472.dashtodock-app-well-preview-menu-item { 3473 padding: 1em 1em 0.5em 1em; 3474} 3475 3476#dashtodockPreviewSeparator.popup-separator-menu-item-horizontal { 3477 width: 1px; 3478 height: auto; 3479 border-right-width: 1px; 3480 margin: 32px 0; 3481} 3482 3483.openweather-button, .openweather-button-action, .openweather-menu-button-container, .openweather-button-box { 3484 border: 1px solid transparent !important; 3485} 3486 3487.openweather-provider { 3488 padding: 0 16px; 3489 font-weight: 500; 3490 color: #424242; 3491 background-color: transparent; 3492 border-color: transparent; 3493 box-shadow: none; 3494 text-shadow: none; 3495 icon-shadow: none; 3496 border: 1px solid transparent !important; 3497} 3498 3499.openweather-provider:hover { 3500 color: #242424; 3501 background-color: rgba(0, 0, 0, 0.12); 3502 border-color: transparent; 3503 box-shadow: none; 3504 text-shadow: none; 3505 icon-shadow: none; 3506} 3507 3508.openweather-provider:focus { 3509 color: #242424; 3510 text-shadow: none; 3511 icon-shadow: none; 3512 box-shadow: none; 3513} 3514 3515.openweather-provider:active { 3516 color: #242424; 3517 background-color: rgba(0, 0, 0, 0.2); 3518 border-color: transparent; 3519 box-shadow: none; 3520 text-shadow: none; 3521 icon-shadow: none; 3522} 3523 3524.openweather-current-icon, .openweather-current-summary, .openweather-current-summarybox { 3525 background: none; 3526 color: #242424; 3527} 3528 3529.openweather-current-databox-values { 3530 background: none; 3531 color: #565656; 3532} 3533 3534.openweather-current-databox-captions { 3535 background: none; 3536 color: #565656; 3537} 3538 3539.openweather-forecast-icon, .openweather-forecast-summary { 3540 background: none; 3541 color: #424242; 3542} 3543 3544.openweather-forecast-day, .openweather-forecast-temperature { 3545 background: none; 3546 color: #565656; 3547} 3548 3549.openweather-sunrise-icon, .openweather-sunset-icon, .openweather-build-icon { 3550 color: #424242; 3551} 3552 3553.gsconnect-device-name { 3554 font-size: 0.9em; 3555} 3556 3557.gsconnect-device-menu .popup-separator-menu-item { 3558 min-height: 16px !important; 3559} 3560 3561.gsconnect-device-menu .popup-menu-item { 3562 min-width: 6px !important; 3563} 3564 3565.gsconnect-device-menu .popup-menu-item > :first-child:ltr { 3566 padding-left: 0 !important; 3567 margin-left: 0 !important; 3568} 3569 3570.gsconnect-device-menu .popup-menu-item > :first-child:rtl { 3571 padding-right: 0 !important; 3572 margin-right: 0 !important; 3573} 3574
