1.ripple-pointer-location { 2 width: 48px; 3 height: 48px; 4 border-radius: 24px; 5 background-color: rgba(191, 204, 250, 0.3); 6 box-shadow: 0 0 2px 2px #90a6f6; 7} 8 9.pie-timer { 10 width: 60px; 11 height: 60px; 12 -pie-border-width: 3px; 13 -pie-border-color: #315BEF; 14 -pie-background-color: rgba(238, 242, 254, 0.3); 15} 16 17.magnifier-zoom-region { 18 border: 2px solid #315BEF; 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: #315BEF; 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: #afafaf; 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: #dedede; 258 background-color: rgba(255, 255, 255, 0.06); 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: #dedede; 267 background-color: rgba(255, 255, 255, 0.1); 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(222, 222, 222, 0.35); 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: #dedede; 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.5); 296 color: #afafaf; 297 background-color: #383838; 298 box-shadow: inset 0 1px rgba(255, 255, 255, 0.06); 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: #dedede; 308 background-color: rgba(74, 74, 74, 0.75); 309 box-shadow: inset 0 1px rgba(255, 255, 255, 0.06); 310} 311 312.popup-menu .message:active, .world-clocks-button:active, 313.weather-button:active, 314.events-button:active { 315 color: #dedede; 316 background-color: rgba(62, 62, 62, 0.75); 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(255, 255, 255, 0.12); 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: #afafaf; 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: #afafaf; 379 border-radius: 6px; 380} 381 382.datemenu-today-button:hover, .datemenu-today-button:focus { 383 color: #dedede; 384 background-color: #454545; 385} 386 387.datemenu-today-button:active { 388 color: #dedede; 389 background-color: #404040; 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.5); 409 color: #afafaf; 410 background-color: #383838; 411 box-shadow: inset 0 1px rgba(255, 255, 255, 0.06); 412 text-shadow: none; 413} 414 415.calendar .calendar-month-label { 416 margin: 0; 417 padding: 6px 0; 418 color: #dedede; 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(255, 255, 255, 0.06); 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: #dedede; 447} 448 449.calendar .pager-button:hover, .calendar .pager-button:focus { 450 background-color: rgba(255, 255, 255, 0.06); 451} 452 453.calendar .pager-button:active { 454 background-color: rgba(255, 255, 255, 0.1); 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: #afafaf; 467 font-feature-settings: "tnum"; 468} 469 470.calendar .calendar-day-base:hover, .calendar .calendar-day-base:focus { 471 background-color: rgba(255, 255, 255, 0.06); 472} 473 474.calendar .calendar-day-base:active { 475 color: #afafaf; 476 background-color: rgba(255, 255, 255, 0.1); 477 border-color: transparent; 478} 479 480.calendar .calendar-day-base:selected { 481 color: #dedede; 482 background-color: rgba(255, 255, 255, 0.1); 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: #999999; 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(222, 222, 222, 0.35); 514} 515 516.calendar .calendar-today { 517 font-weight: bold; 518 color: #afafaf !important; 519 background-color: rgba(222, 222, 222, 0.1); 520 border: none; 521} 522 523.calendar .calendar-today:hover, .calendar .calendar-today:focus { 524 background-color: rgba(222, 222, 222, 0.15); 525 color: #dedede !important; 526} 527 528.calendar .calendar-today:active { 529 background-color: #1948ed; 530 color: white !important; 531} 532 533.calendar .calendar-today:selected { 534 background-color: #315BEF; 535 color: white !important; 536} 537 538.calendar .calendar-today:selected:hover, .calendar .calendar-today:selected:focus { 539 background-color: #5779f2; 540 color: white !important; 541} 542 543.calendar .calendar-day-with-events { 544 color: #999999; 545 background-image: url("assets/calendar-today.svg"); 546} 547 548.calendar .calendar-day-with-events.calendar-work-day { 549 color: #999999; 550 font-weight: bold; 551} 552 553.calendar .calendar-other-month-day { 554 color: rgba(222, 222, 222, 0.35); 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(255, 255, 255, 0.05); 565 color: #999999; 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: #999999; 589 font-weight: bold; 590 text-shadow: none; 591} 592 593.events-button .event-time { 594 color: #999999; 595 font-feature-settings: "tnum"; 596 font-size: 9pt; 597} 598 599.world-clocks-button .world-clocks-city { 600 color: #999999; 601 font-weight: bold; 602 font-size: 10pt; 603} 604 605.world-clocks-button .world-clocks-time { 606 color: #999999; 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: #999999; 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: #afafaf; 645 font-weight: bold; 646} 647 648.weather-button .weather-header.location { 649 font-weight: normal; 650 color: #999999; 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: #afafaf; 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(255, 255, 255, 0.06); 695} 696 697.check-box:active StBin { 698 background-color: rgba(255, 255, 255, 0.1); 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(49, 91, 239, 0.15); 711} 712 713.check-box:active:checked StBin { 714 background-color: rgba(49, 91, 239, 0.3); 715} 716 717/* Activities Ripple */ 718.ripple-box { 719 background-color: rgba(49, 91, 239, 0.35); 720 box-shadow: 0 0 2px 2px #90a6f6; 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: #242424; 758 border-radius: 6px; 759 border: solid rgba(0, 0, 0, 0.75); 760 border-width: 1px; 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: #315BEF; 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: #5c7df2; 773} 774 775.modal-dialog-linked-button:active:last-child { 776 color: white; 777 background-color: #1948ed; 778} 779 780.modal-dialog-linked-button:insensitive:last-child { 781 background-color: rgba(49, 91, 239, 0.05); 782 color: rgba(49, 91, 239, 0.35); 783} 784 785.headline { 786 font-size: 15pt; 787 font-weight: 500; 788} 789 790.modal-dialog { 791 color: #dedede; 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: #afafaf; 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: #dedede; 813 background-color: rgba(255, 255, 255, 0.06); 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: #dedede; 822 background-color: rgba(255, 255, 255, 0.1); 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(222, 222, 222, 0.35); 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: #dedede; 840 text-shadow: none; 841 icon-shadow: none; 842 box-shadow: none; 843} 844 845.modal-dialog-linked-button:first-child { 846 background: #242424; 847} 848 849.modal-dialog-linked-button:first-child:hover { 850 color: #dedede; 851 background-color: rgba(255, 255, 255, 0.06); 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: #dedede; 860 background-color: rgba(255, 255, 255, 0.1); 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: #afafaf; 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: #afafaf; 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: #999999; 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(255, 255, 255, 0.12); 1036 border-radius: 5px; 1037} 1038 1039.audio-selection-device:hover, .audio-selection-device:focus { 1040 background-color: rgba(255, 255, 255, 0.08); 1041} 1042 1043.audio-selection-device:active { 1044 background-color: #315BEF; 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: #dedede; 1071 caret-color: #dedede; 1072 selection-background-color: #315BEF; 1073 selected-color: rgba(255, 255, 255, 0.85); 1074 font-size: 11.25pt; 1075 font-weight: 400; 1076 color: #dedede; 1077 background-color: #212121; 1078 border-radius: 8px; 1079 border: 2px solid transparent; 1080 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); 1081} 1082 1083StEntry:focus, .popup-menu .search-entry:focus { 1084 color: #dedede; 1085 border: 2px solid #7894f5; 1086 box-shadow: none; 1087} 1088 1089StEntry:insensitive, .popup-menu .search-entry:insensitive { 1090 color: rgba(222, 222, 222, 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(222, 222, 222, 0.7); 1108} 1109 1110.hotplug-notification-item { 1111 color: #dedede; 1112 background-color: #242424; 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(222, 222, 222, 0.35); 1125 background-color: rgba(255, 255, 255, 0.06); 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: #dedede; 1133 border-color: rgba(0, 0, 0, 0.15); 1134 background-color: #2c2c2c; 1135 text-shadow: none; 1136 icon-shadow: none; 1137} 1138 1139.hotplug-notification-item:focus { 1140 color: #dedede; 1141 text-shadow: none; 1142 icon-shadow: none; 1143} 1144 1145.hotplug-notification-item:active { 1146 color: white; 1147 background-color: #315BEF; 1148 border-color: rgba(0, 0, 0, 0.15); 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: #999999; 1180} 1181 1182.candidate-popup-content { 1183 color: #999999; 1184 box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.25); 1185 border: 1px solid rgba(0, 0, 0, 0.75); 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: #999999; 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: #999999; 1205} 1206 1207.candidate-box:hover { 1208 background-color: rgba(255, 255, 255, 0.06); 1209 color: #dedede; 1210} 1211 1212.candidate-box:active { 1213 background-color: rgba(255, 255, 255, 0.1); 1214 color: #dedede; 1215} 1216 1217.candidate-box:selected { 1218 background-color: #315BEF; 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: #afafaf; 1281 background-color: #555555; 1282 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); 1283} 1284 1285.keyboard-key:focus, .keyboard-key:hover { 1286 color: #dedede; 1287 background-color: #6f6f6f; 1288} 1289 1290.keyboard-key:checked, .keyboard-key:active { 1291 color: #dedede; 1292 background-color: #3c3c3c; 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: #242424; 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: #dedede; 1308 background-color: #3e3e3e; 1309} 1310 1311.keyboard-key.default-key:checked, .keyboard-key.default-key:active { 1312 color: #dedede; 1313 background-color: #0b0b0b; 1314} 1315 1316.keyboard-key.enter-key { 1317 color: white; 1318 background-color: #315BEF; 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: #496ef1; 1325} 1326 1327.keyboard-key.enter-key:checked, .keyboard-key.enter-key:active { 1328 color: white; 1329 background-color: #113edc; 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: #315BEF; 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: #496ef1; 1360 background-color: #315BEF; 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: #315BEF; 1389 selected-background-color: #315BEF; 1390 selected-color: white; 1391 padding: 4px 8px; 1392 min-height: 20px; 1393 border-radius: 9999px; 1394 caret-color: #dedede; 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(222, 222, 222, 0.35); 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: #242424; 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: #2c2c2c; 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: #315BEF; 1473 border-color: rgba(0, 0, 0, 0.15); 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(255, 255, 255, 0.06); 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(255, 255, 255, 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 #315BEF; 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(255, 255, 255, 0.03) !important; 1613} 1614 1615.login-dialog-user-list-item:hover, .login-dialog-user-list-item:focus:hover { 1616 background-color: rgba(255, 255, 255, 0.06) !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(255, 255, 255, 0.1) !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(255, 255, 255, 0.08) !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: #242424; 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: #dedede; 1684} 1685 1686#LookingGlassDialog > #Toolbar { 1687 color: #dedede; 1688 padding: 0 8px; 1689 border: none; 1690 border-radius: 0; 1691 background-color: rgba(36, 36, 36, 0.01); 1692 box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12); 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: #afafaf; 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 #315BEF; 1715 color: #dedede; 1716 text-shadow: none; 1717} 1718 1719#LookingGlassDialog .notebook-tab:selected { 1720 border-bottom-width: 0; 1721 border-color: transparent; 1722 background-color: rgba(36, 36, 36, 0.01); 1723 box-shadow: inset 0 -2px 0px #315BEF; 1724 color: #dedede; 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: #315BEF; 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: #afafaf; 1757} 1758 1759.lg-dialog .actor-link:hover { 1760 color: #e2e2e2; 1761} 1762 1763.lg-dialog .actor-link:active { 1764 color: #7c7c7c; 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(255, 255, 255, 0.12); 1799 border-radius: 5px; 1800 background-color: #242424; 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: #242424; 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: #999999; 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: #dedede; 1889 font-weight: bold; 1890 font-size: 1em; 1891} 1892 1893.message .message-content { 1894 min-height: 40px; 1895 padding: 8px; 1896 color: #999999; 1897 font-size: 1em; 1898} 1899 1900.message .message-close-button { 1901 color: #afafaf; 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: #dedede; 1910} 1911 1912.message .message-close-button:hover, .message .message-close-button:focus { 1913 background-color: rgba(255, 255, 255, 0.06); 1914} 1915 1916.message .message-close-button:active { 1917 background-color: rgba(255, 255, 255, 0.1); 1918} 1919 1920.message .message-body { 1921 color: #999999; 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: #afafaf; 1933} 1934 1935.message-media-control:hover, .message-media-control:focus { 1936 color: #dedede; 1937 background-color: rgba(255, 255, 255, 0.06); 1938} 1939 1940.message-media-control:active { 1941 color: #dedede; 1942 background-color: rgba(255, 255, 255, 0.1); 1943} 1944 1945.message-media-control:insensitive { 1946 color: rgba(222, 222, 222, 0.35); 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(255, 255, 255, 0.06); 1974 color: #999999; 1975} 1976 1977.select-area-rubberband { 1978 background-color: rgba(49, 91, 239, 0.3); 1979 border: 1px solid #315BEF; 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: #dedede; 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(255, 255, 255, 0.12); 2083 padding: 0; 2084 background-color: rgba(0, 0, 0, 0.1); 2085 border-radius: 5px; 2086} 2087 2088.nm-dialog-item { 2089 font-size: 11pt; 2090 border-bottom: 1px solid rgba(255, 255, 255, 0.12); 2091 padding: 12px; 2092 spacing: 0px; 2093} 2094 2095.nm-dialog-item:selected { 2096 background-color: #315BEF; 2097 color: rgba(255, 255, 255, 0.85); 2098} 2099 2100.nm-dialog-item:hover, .nm-dialog-item:focus { 2101 background-color: rgba(255, 255, 255, 0.06); 2102} 2103 2104.nm-dialog-item:active { 2105 background-color: rgba(255, 255, 255, 0.1); 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: #999999; 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: #dedede; 2132 background-color: #333333; 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: #333333; 2140 box-shadow: 0 5px 12px rgba(0, 0, 0, 0.25); 2141} 2142 2143.notification-banner:focus { 2144 background-color: #333333; 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(255, 255, 255, 0.12); 2164 spacing: 1px; 2165} 2166 2167.notification-banner .notification-button { 2168 min-height: 40px; 2169 padding: 0 16px; 2170 background-color: transparent; 2171 color: #afafaf; 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: #afafaf; 2191 box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.06); 2192} 2193 2194.notification-banner .notification-button:hover, .notification-banner .notification-button:focus:hover { 2195 background-color: rgba(255, 255, 255, 0.06); 2196 color: #dedede; 2197 box-shadow: none; 2198} 2199 2200.notification-banner .notification-button:active { 2201 background-color: rgba(255, 255, 255, 0.1); 2202 color: #dedede; 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: #315BEF; 2213 color: rgba(255, 255, 255, 0.85); 2214 border: 2px solid #315BEF; 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: #dedede; 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: #afafaf; 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: #999999; 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: #dedede; 2269 background-color: #242424; 2270 border: 1px solid rgba(0, 0, 0, 0.75); 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: #dedede; 2298 -barlevel-height: 4px; 2299 -barlevel-background-color: rgba(0, 0, 0, 0.1); 2300 -barlevel-active-background-color: #315BEF; 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: #2a2a2a; 2336 font-weight: normal; 2337 height: 28px; 2338 box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); 2339 color: #dadada; 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: #2a2a2a; 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: #dadada; 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: #dadada; 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: #315BEF; 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: #dadada; 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: #dadada; 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/* Popovers/Menus */ 2498.popup-menu-boxpointer { 2499 -arrow-border-radius: 2px; 2500 -arrow-background-color: transparent; 2501 -arrow-border-width: 0; 2502 -arrow-border-color: transparent; 2503 -arrow-base: 64px; 2504 -arrow-rise: 0; 2505 -arrow-box-shadow: none; 2506 background: transparent; 2507} 2508 2509.popup-menu { 2510 min-width: 12em; 2511 color: #dedede; 2512 font-weight: normal; 2513 padding: 3px 0; 2514 font-size: 9.75pt; 2515 font-weight: 400; 2516 border-image: url("assets/menu-solid.svg") 24 32 28 28; 2517} 2518 2519.popup-menu .popup-menu-content { 2520 padding: 10px 0; 2521 font-weight: normal; 2522} 2523 2524.popup-menu .popup-menu-item { 2525 spacing: 12px; 2526 padding: 6px; 2527 color: #afafaf; 2528 text-shadow: none; 2529 border-radius: 2px; 2530 font-weight: normal; 2531} 2532 2533.popup-menu .popup-menu-item:ltr { 2534 padding-right: 1.5em; 2535 padding-left: 0; 2536} 2537 2538.popup-menu .popup-menu-item:rtl { 2539 padding-right: 0; 2540 padding-left: 1.5em; 2541} 2542 2543.popup-menu .popup-menu-item:checked { 2544 font-weight: normal; 2545 background: none; 2546 box-shadow: none; 2547 border-image: url("assets/submenu-open.svg") 28 28 2 2; 2548} 2549 2550.popup-menu .popup-menu-item.selected:checked { 2551 color: rgba(255, 255, 255, 0.85); 2552 background: none; 2553 background-color: transparent; 2554 border-image: url("assets/menu-hover.svg") 28 28 2 2; 2555 transition-duration: 0ms; 2556 animation: none; 2557 box-shadow: none; 2558} 2559 2560.popup-menu .popup-menu-item:checked:active { 2561 color: rgba(255, 255, 255, 0.85); 2562 background: none; 2563 background-color: transparent; 2564 border-image: url("assets/menu-active.svg") 28 28 2 2; 2565 transition-duration: 100ms; 2566 animation: none; 2567 box-shadow: none; 2568} 2569 2570.popup-menu .popup-menu-item:checked:insensitive { 2571 color: rgba(255, 255, 255, 0.45); 2572} 2573 2574.popup-menu .popup-menu-item.selected { 2575 color: rgba(255, 255, 255, 0.85); 2576 background: none; 2577 background-color: transparent; 2578 border-image: url("assets/menu-hover.svg") 28 28 2 2; 2579 transition-duration: 0ms; 2580 animation: none; 2581 box-shadow: none; 2582} 2583 2584.popup-menu .popup-menu-item:active, .popup-menu .popup-menu-item.selected:active { 2585 color: rgba(255, 255, 255, 0.85); 2586 background: none; 2587 background-color: transparent; 2588 border-image: url("assets/menu-active.svg") 28 28 2 2; 2589 transition-duration: 100ms; 2590 animation: none; 2591 box-shadow: none; 2592} 2593 2594.popup-menu .popup-menu-item:insensitive { 2595 color: rgba(222, 222, 222, 0.35); 2596} 2597 2598.popup-menu .popup-sub-menu { 2599 background: none; 2600 box-shadow: none; 2601 border-image: url("assets/submenu.svg") 28 28 2 2; 2602} 2603 2604.popup-menu .popup-inactive-menu-item { 2605 color: #afafaf; 2606} 2607 2608.popup-menu .popup-inactive-menu-item:insensitive { 2609 color: rgba(222, 222, 222, 0.35); 2610} 2611 2612.popup-menu.panel-menu { 2613 -boxpointer-gap: 4px; 2614 margin-bottom: 1.75em; 2615} 2616 2617.popup-menu StEntry { 2618 selection-background-color: rgba(255, 255, 255, 0.85); 2619 selected-background-color: rgba(255, 255, 255, 0.85); 2620 selected-color: #315BEF; 2621 caret-color: #dedede; 2622} 2623 2624.popup-menu StEntry StLabel.hint-text { 2625 margin-left: 2px; 2626 color: rgba(222, 222, 222, 0.7); 2627} 2628 2629.popup-menu .search-entry { 2630 border-radius: 9999px; 2631} 2632 2633.popup-menu-arrow, 2634.popup-menu-icon { 2635 icon-size: 16px; 2636} 2637 2638.popup-menu-ornament { 2639 width: 1.2em; 2640} 2641 2642.popup-menu-ornament:ltr { 2643 text-align: right; 2644} 2645 2646.popup-menu-ornament:rtl { 2647 text-align: left; 2648} 2649 2650.popup-separator-menu-item { 2651 margin: 0; 2652 padding: 0 0; 2653 background: none; 2654 border: none; 2655 height: 1px; 2656} 2657 2658.popup-separator-menu-item .popup-separator-menu-item-separator { 2659 height: 1px; 2660 margin: 0 40px; 2661 background-color: rgba(255, 255, 255, 0.12); 2662 padding: 0 0; 2663} 2664 2665.popup-sub-menu .popup-separator-menu-item .popup-separator-menu-item-separator { 2666 padding: 0 0; 2667 margin: 0 58px 0 24px; 2668} 2669 2670.background-menu { 2671 -boxpointer-gap: 4px; 2672 -arrow-rise: 0px; 2673} 2674 2675.aggregate-menu { 2676 min-width: 21em; 2677} 2678 2679.aggregate-menu .popup-menu-icon { 2680 padding: 0; 2681 margin: 0 0; 2682 -st-icon-style: symbolic; 2683} 2684 2685.aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:ltr { 2686 /* 12px spacing + 2*4px padding */ 2687 padding-left: 16px; 2688 margin-left: 1em; 2689} 2690 2691.aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:rtl { 2692 /* 12px spacing + 2*4px padding */ 2693 padding-right: 16px; 2694 margin-right: 1em; 2695} 2696 2697/* Screen Shield */ 2698.unlock-dialog-clock { 2699 color: white; 2700 font-weight: 300; 2701 text-align: center; 2702 spacing: 24px; 2703 padding-bottom: 2.5em; 2704} 2705 2706.unlock-dialog-clock-time { 2707 font-size: 64pt; 2708 padding-top: 42px; 2709 font-feature-settings: "tnum"; 2710} 2711 2712.unlock-dialog-clock-date { 2713 font-size: 16pt; 2714 font-weight: normal; 2715} 2716 2717.unlock-dialog-clock-hint { 2718 font-weight: normal; 2719 padding-top: 48px; 2720} 2721 2722.unlock-dialog-notifications-container { 2723 margin: 12px 0; 2724 spacing: 6px; 2725 width: 23em; 2726 background-color: transparent; 2727} 2728 2729.unlock-dialog-notifications-container .summary-notification-stack-scrollview { 2730 padding-top: 0; 2731 padding-bottom: 0; 2732} 2733 2734.unlock-dialog-notifications-container .notification, 2735.unlock-dialog-notifications-container .unlock-dialog-notification-source { 2736 padding: 12px 6px; 2737 border: none; 2738 background-color: rgba(0, 0, 0, 0.6); 2739 color: white; 2740 border-radius: 5px; 2741} 2742 2743.unlock-dialog-notifications-container .notification.critical, 2744.unlock-dialog-notifications-container .unlock-dialog-notification-source.critical { 2745 background-color: rgba(0, 0, 0, 0.3); 2746} 2747 2748.unlock-dialog-notification-label { 2749 padding: 0px 0px 0px 12px; 2750} 2751 2752.unlock-dialog-notification-count-text { 2753 weight: bold; 2754 padding: 0 6px; 2755 color: white; 2756 background-color: #315BEF; 2757 border-radius: 99px; 2758 margin-right: 12px; 2759} 2760 2761.screen-shield-background { 2762 background: black; 2763 box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15); 2764} 2765 2766#unlockDialogNotifications StButton#vhandle, #unlockDialogNotifications StButton#hhandle { 2767 background-color: rgba(51, 51, 51, 0.3); 2768} 2769 2770#unlockDialogNotifications StButton#vhandle:hover, #unlockDialogNotifications StButton#vhandle:focus, #unlockDialogNotifications StButton#hhandle:hover, #unlockDialogNotifications StButton#hhandle:focus { 2771 background-color: rgba(51, 51, 51, 0.5); 2772} 2773 2774#unlockDialogNotifications StButton#vhandle:active, #unlockDialogNotifications StButton#hhandle:active { 2775 background-color: rgba(49, 91, 239, 0.5); 2776} 2777 2778/* Search */ 2779.list-search-result, .search-provider-icon { 2780 border-radius: 5px; 2781 padding: 6px; 2782 transition-duration: 100ms; 2783 text-align: center; 2784} 2785 2786.list-search-result:focus, .search-provider-icon:focus, .list-search-result:hover, .search-provider-icon:hover, .list-search-result:selected, .search-provider-icon:selected { 2787 background-color: rgba(255, 255, 255, 0.15); 2788 transition-duration: 200ms; 2789} 2790 2791.list-search-result:active, .search-provider-icon:active, .list-search-result:checked, .search-provider-icon:checked { 2792 background-color: rgba(255, 255, 255, 0.3); 2793} 2794 2795#searchResultsContent { 2796 max-width: 1024px; 2797 spacing: 8px; 2798 font-size: 9.75pt; 2799 font-weight: 400; 2800} 2801 2802.search-section { 2803 spacing: 8px; 2804} 2805 2806.search-section .search-section-separator { 2807 height: 0; 2808 background-color: rgba(255, 255, 255, 0.15); 2809} 2810 2811.search-section-content { 2812 spacing: 8px; 2813 border-radius: 16px; 2814 padding: 18px; 2815 border: none; 2816 box-shadow: none; 2817 background: rgba(255, 255, 255, 0.15); 2818 text-shadow: none; 2819 color: rgba(255, 255, 255, 0.85); 2820} 2821 2822.search-statustext { 2823 font-size: 2em; 2824 font-weight: bold; 2825 color: rgba(255, 255, 255, 0.5); 2826} 2827 2828.grid-search-results { 2829 spacing: 36px; 2830} 2831 2832.search-provider-icon .list-search-provider-content { 2833 spacing: 12px; 2834} 2835 2836.search-provider-icon .list-search-provider-content .list-search-provider-details { 2837 width: 120px; 2838 margin-top: 0; 2839 color: rgba(255, 255, 255, 0.5); 2840} 2841 2842.list-search-results { 2843 spacing: 6px; 2844} 2845 2846.list-search-result .list-search-result-content { 2847 spacing: 6px; 2848} 2849 2850.list-search-result .list-search-result-title { 2851 spacing: 12px; 2852} 2853 2854.list-search-result .list-search-result-description { 2855 color: rgba(255, 255, 255, 0.85); 2856} 2857 2858/* Scrollbars */ 2859StScrollView.vfade { 2860 -st-vfade-offset: 32px; 2861} 2862 2863StScrollView.hfade { 2864 -st-hfade-offset: 32px; 2865} 2866 2867StScrollBar { 2868 padding: 0; 2869} 2870 2871StScrollView StScrollBar { 2872 min-width: 16px; 2873 min-height: 16px; 2874} 2875 2876StScrollBar StBin#trough { 2877 margin: 6px; 2878 border-radius: 100px; 2879 background-color: rgba(255, 255, 255, 0.06); 2880} 2881 2882StScrollBar StButton#vhandle, StScrollBar StButton#hhandle { 2883 border-radius: 100px; 2884 background-color: #999999; 2885 margin: 6px; 2886} 2887 2888StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover { 2889 background-color: #afafaf; 2890} 2891 2892StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { 2893 background-color: #dedede; 2894} 2895 2896.app-folder-dialog .folder-name-container .folder-name-entry, .search-entry { 2897 width: 320px; 2898 min-height: 28px; 2899 padding: 2px 10px; 2900 border: none; 2901 color: rgba(255, 255, 255, 0.5); 2902 caret-color: rgba(255, 255, 255, 0.85); 2903 selection-background-color: rgba(255, 255, 255, 0.3); 2904 selected-color: rgba(255, 255, 255, 0.85); 2905 color: rgba(255, 255, 255, 0.3); 2906 background-color: rgba(255, 255, 255, 0.12); 2907 border-radius: 8px; 2908 border-color: transparent; 2909 box-shadow: none; 2910} 2911 2912.app-folder-dialog .folder-name-container .folder-name-entry:focus, .search-entry:focus { 2913 color: rgba(255, 255, 255, 0.85); 2914 border-color: transparent; 2915 background-color: rgba(255, 255, 255, 0.18); 2916 border: none; 2917 color: rgba(255, 255, 255, 0.85); 2918} 2919 2920.app-folder-dialog .folder-name-container .folder-name-entry .search-entry-icon, .search-entry .search-entry-icon { 2921 icon-size: 16px; 2922 padding: 0 0; 2923 color: rgba(255, 255, 255, 0.5); 2924} 2925 2926.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 { 2927 color: rgba(255, 255, 255, 0.85); 2928} 2929 2930.app-folder-dialog .folder-name-container .folder-name-entry:insensitive, .search-entry:insensitive { 2931 border: none; 2932 color: rgba(255, 255, 255, 0.45); 2933} 2934 2935.app-folder-dialog .folder-name-container .folder-name-entry StLabel.hint-text, .search-entry StLabel.hint-text { 2936 color: rgba(255, 255, 255, 0.5); 2937} 2938 2939/* Slider */ 2940.slider { 2941 height: 20px; 2942 color: white; 2943 -slider-height: 2px; 2944 -slider-background-color: rgba(255, 255, 255, 0.1); 2945 -slider-border-color: transparent; 2946 -slider-active-background-color: #315BEF; 2947 -slider-active-border-color: transparent; 2948 -slider-border-width: 0; 2949 -slider-handle-radius: 7px; 2950 -slider-handle-border-width: 1px; 2951 -slider-handle-border-color: rgba(0, 0, 0, 0.15); 2952 -barlevel-height: 2px; 2953 -barlevel-background-color: rgba(255, 255, 255, 0.1); 2954 -barlevel-border-color: transparent; 2955 -barlevel-active-background-color: #315BEF; 2956 -barlevel-active-border-color: transparent; 2957 -barlevel-overdrive-color: #f8464c; 2958 -barlevel-overdrive-border-color: transparent; 2959 -barlevel-overdrive-separator-width: 2px; 2960 -barlevel-border-width: 0; 2961} 2962 2963.popup-menu-item.selected .slider { 2964 color: white; 2965 -slider-background-color: rgba(255, 255, 255, 0.1); 2966 -slider-active-background-color: rgba(255, 255, 255, 0.45); 2967 -barlevel-background-color: rgba(255, 255, 255, 0.1); 2968 -barlevel-active-background-color: rgba(255, 255, 255, 0.45); 2969} 2970 2971/* App Switcher */ 2972.switcher-popup { 2973 padding: 8px; 2974 spacing: 24px; 2975} 2976 2977.switcher-list .item-box { 2978 padding: 8px; 2979 border-radius: 5px; 2980 border: 1px solid transparent; 2981} 2982 2983.switcher-list .item-box:outlined { 2984 background-color: rgba(255, 255, 255, 0.06); 2985 color: #dedede; 2986} 2987 2988.switcher-list .item-box:selected { 2989 background-color: #315BEF; 2990 color: rgba(255, 255, 255, 0.85); 2991} 2992 2993.switcher-list .thumbnail-box { 2994 padding: 2px; 2995 spacing: 6px; 2996} 2997 2998.switcher-list .thumbnail { 2999 width: 256px; 3000} 3001 3002.switcher-list .separator { 3003 width: 1px; 3004 background: rgba(255, 255, 255, 0.12); 3005} 3006 3007.switcher-list .switcher-list-item-container { 3008 spacing: 12px; 3009} 3010 3011.switcher-arrow { 3012 border-color: rgba(0, 0, 0, 0); 3013 color: #999999; 3014} 3015 3016.switcher-arrow:highlighted { 3017 color: #dedede; 3018} 3019 3020.input-source-switcher-symbol { 3021 font-size: 34pt; 3022 width: 96px; 3023 height: 96px; 3024} 3025 3026.cycler-highlight { 3027 border: 5px solid #315BEF; 3028} 3029 3030/* Switches */ 3031.toggle-switch { 3032 width: 40px; 3033 height: 24px; 3034 background-size: contain; 3035 background-image: url("assets/toggle-off.svg"); 3036} 3037 3038.toggle-switch:checked { 3039 background-image: url("assets/toggle-on.svg"); 3040} 3041 3042.popup-menu-item.selected .toggle-switch { 3043 background-image: url("assets/toggle-off.svg"); 3044} 3045 3046.popup-menu-item.selected .toggle-switch:checked { 3047 background-image: url("assets/toggle-on.svg"); 3048} 3049 3050/* Tiled window previews */ 3051.tile-preview { 3052 background-color: rgba(49, 91, 239, 0.3); 3053 border: 1px solid #315BEF; 3054} 3055 3056.tile-preview-left.on-primary { 3057 border-radius: 6px 0 0 0; 3058} 3059 3060.tile-preview-right.on-primary { 3061 border-radius: 0 6px 0 0; 3062} 3063 3064.tile-preview-left.tile-preview-right.on-primary { 3065 border-radius: 6px 6px 0 0; 3066} 3067 3068/* Workspace Switcher */ 3069.workspace-switcher-group { 3070 padding: 12px; 3071} 3072 3073.workspace-switcher { 3074 background: transparent; 3075 border: none; 3076 border-radius: 0; 3077 padding: 0; 3078 spacing: 12px; 3079} 3080 3081.ws-switcher-box { 3082 background: transparent; 3083 height: 50px; 3084 background-size: 32px; 3085 background: rgba(255, 255, 255, 0.06); 3086 border-radius: 5px; 3087} 3088 3089.ws-switcher-active-up, 3090.ws-switcher-active-down, 3091.ws-switcher-active-left, 3092.ws-switcher-active-right { 3093 height: 52px; 3094 background-color: #315BEF; 3095 color: rgba(255, 255, 255, 0.85); 3096 border-radius: 8px; 3097 border: none; 3098} 3099 3100.icon-grid { 3101 row-spacing: 12px; 3102 column-spacing: 12px; 3103 max-row-spacing: 72px; 3104 max-column-spacing: 72px; 3105 page-padding-top: 24px; 3106 page-padding-bottom: 24px; 3107 page-padding-left: 12px; 3108 page-padding-right: 12px; 3109} 3110 3111.apps-scroll-view { 3112 padding: 0; 3113} 3114 3115.page-navigation-hint { 3116 width: 300px; 3117} 3118 3119.page-navigation-hint.dnd { 3120 background: rgba(255, 255, 255, 0.1); 3121} 3122 3123.page-navigation-hint.next:ltr, .page-navigation-hint.previous:rtl { 3124 background-gradient-start: rgba(255, 255, 255, 0.05); 3125 background-gradient-end: transparent; 3126 background-gradient-direction: horizontal; 3127 border-radius: 15px 0px 0px 15px; 3128} 3129 3130.page-navigation-hint.previous:ltr, .page-navigation-hint.next:rtl { 3131 background-gradient-start: transparent; 3132 background-gradient-end: rgba(255, 255, 255, 0.05); 3133 background-gradient-direction: horizontal; 3134 border-radius: 0px 15px 15px 0px; 3135} 3136 3137.page-navigation-arrow { 3138 margin: 6px; 3139 width: 24px; 3140 height: 24px; 3141} 3142 3143#dash { 3144 margin-top: 12px; 3145 padding: 0 10px; 3146} 3147 3148#dash .placeholder { 3149 background-image: none; 3150 background-size: contain; 3151 height: 32px; 3152} 3153 3154#dash .overview-icon { 3155 padding: 5px; 3156} 3157 3158#dash .app-well-app-running-dot { 3159 background-color: rgba(255, 255, 255, 0.75); 3160} 3161 3162.dash-background { 3163 background-color: rgba(34, 34, 34, 0.75); 3164 margin-bottom: 16px; 3165 padding: 10px; 3166 border-radius: 22px; 3167} 3168 3169.dash-item-container .app-well-app, .show-apps { 3170 padding: 10px 1.5px 26px; 3171} 3172 3173.dash-separator { 3174 width: 1px; 3175 margin: 0 6.5px 16px; 3176 background-color: rgba(255, 255, 255, 0.25); 3177} 3178 3179.workspace-animation { 3180 background-color: #2a2a2a; 3181} 3182 3183.calendar .calendar-change-month-back, 3184.calendar .calendar-change-month-forward { 3185 padding: 0 2px; 3186} 3187 3188.controls-manager, .secondary-monitor-workspaces { 3189 spacing: 12px; 3190} 3191 3192#overviewGroup { 3193 background-color: #2a2a2a; 3194 background-image: url("assets/background.png"); 3195 background-repeat: no-repeat; 3196 background-size: cover; 3197} 3198 3199#appMenu { 3200 spacing: 6px; 3201} 3202 3203#appMenu .label-shadow { 3204 color: transparent; 3205} 3206 3207#appMenu .panel-status-menu-box { 3208 padding: 0 6px; 3209 spacing: 6px; 3210} 3211 3212#unlockDialogNotifications StButton#vhandle, #unlockDialogNotifications StButton#hhandle { 3213 background-color: rgba(51, 51, 51, 0.3); 3214} 3215 3216#unlockDialogNotifications StButton#vhandle:hover, #unlockDialogNotifications StButton#vhandle:focus, #unlockDialogNotifications StButton#hhandle:hover, #unlockDialogNotifications StButton#hhandle:focus { 3217 background-color: rgba(51, 51, 51, 0.5); 3218} 3219 3220#unlockDialogNotifications StButton#vhandle:active, #unlockDialogNotifications StButton#hhandle:active { 3221 background-color: rgba(49, 91, 239, 0.5); 3222} 3223 3224.search-entry { 3225 margin-top: 24px; 3226 margin-bottom: 6px; 3227} 3228 3229.window-picker { 3230 spacing: 6px; 3231} 3232 3233.window-caption { 3234 color: #dadada; 3235 background-color: #2a2a2a; 3236 border-radius: 9999px; 3237 padding: 6px 12px; 3238 font-size: 9.75pt; 3239 font-weight: 400; 3240} 3241 3242.window-close { 3243 background-color: #f8464c; 3244 color: white; 3245 border-radius: 21px; 3246 padding: 3px; 3247 height: 30px; 3248 width: 30px; 3249 box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.5); 3250 transition-duration: 300ms; 3251} 3252 3253.window-close StIcon { 3254 icon-size: 1px; 3255} 3256 3257.window-close:hover { 3258 color: white; 3259 background-color: #f96369; 3260} 3261 3262.window-close:active { 3263 color: white; 3264 background-color: #f7292f; 3265} 3266 3267.workspace-background { 3268 border-radius: 30px; 3269 background-color: #2a2a2a; 3270 box-shadow: 0 4px 16px 4px rgba(0, 0, 0, 0.3); 3271} 3272 3273/* Workspace pager */ 3274.workspace-thumbnails { 3275 visible-width: 32px; 3276 spacing: 6px; 3277 padding: 6px; 3278} 3279 3280.workspace-thumbnails .workspace-thumbnail { 3281 color: rgba(255, 255, 255, 0.85); 3282 background-color: rgba(255, 255, 255, 0.15); 3283 border: none; 3284 border-radius: 5px; 3285} 3286 3287.workspace-thumbnails .placeholder { 3288 background-image: url("assets/dash-placeholder.svg"); 3289 background-size: contain; 3290 width: 18px; 3291 height: 24px; 3292} 3293 3294.workspace-thumbnail-indicator { 3295 border: 3px solid #315BEF; 3296 border-radius: 3px; 3297 padding: 0px; 3298} 3299 3300.bottom #dashtodockDashScrollview, 3301.top #dashtodockDashScrollview { 3302 -st-hfade-offset: 24px; 3303} 3304 3305.left #dashtodockDashScrollview, 3306.right #dashtodockDashScrollview { 3307 -st-vfade-offset: 24px; 3308} 3309 3310#dashtodockContainer { 3311 background-color: transparent; 3312} 3313 3314#dashtodockContainer .number-overlay { 3315 color: white; 3316 background-color: rgba(0, 0, 0, 0.75); 3317 text-align: center; 3318} 3319 3320#dashtodockContainer .notification-badge { 3321 color: white; 3322 background-color: #315BEF; 3323 box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25); 3324 border-radius: 1000px; 3325 margin: 2px; 3326 padding: 0.2em 0.6em; 3327 font-weight: bold; 3328 text-align: center; 3329} 3330 3331#dashtodockContainer.straight-corner #dash .dash-background, #dashtodockContainer.shrink.straight-corner #dash .dash-background { 3332 border-radius: 0; 3333 margin: 0; 3334} 3335 3336#dashtodockContainer.extended.top #dash, #dashtodockContainer.extended.bottom #dash { 3337 border-left: 0; 3338 border-right: 0; 3339 padding-top: 0; 3340 padding-bottom: 0; 3341 margin-top: 0; 3342} 3343 3344#dashtodockContainer.extended.top .dash-background, #dashtodockContainer.extended.bottom .dash-background { 3345 margin-bottom: 0; 3346} 3347 3348#dashtodockContainer.extended.right #dash, #dashtodockContainer.extended.left #dash { 3349 border-top: 0; 3350 border-bottom: 0; 3351 padding-top: 0; 3352 padding-bottom: 0; 3353 margin-top: 0; 3354} 3355 3356#dashtodockContainer.extended.right .dash-background, #dashtodockContainer.extended.left .dash-background { 3357 margin-bottom: 0; 3358} 3359 3360#dashtodockContainer.dashtodock #dash { 3361 background: none; 3362} 3363 3364#dashtodockContainer #dash { 3365 background: none; 3366} 3367 3368#dashtodockContainer #dash StWidget.focused .app-well-app-running-dot { 3369 background-color: #315BEF; 3370} 3371 3372#dashtodockContainer #dash .app-well-app:hover .overview-icon, #dashtodockContainer #dash .app-well-app:focus .overview-icon, #dashtodockContainer #dash .app-well-app:selected .overview-icon, 3373#dashtodockContainer #dash .show-apps:hover .overview-icon, 3374#dashtodockContainer #dash .show-apps:focus .overview-icon, 3375#dashtodockContainer #dash .show-apps:selected .overview-icon { 3376 background-color: rgba(222, 222, 222, 0.15); 3377} 3378 3379#dashtodockContainer #dash .app-well-app:active .overview-icon, #dashtodockContainer #dash .app-well-app:checked .overview-icon, 3380#dashtodockContainer #dash .show-apps:active .overview-icon, 3381#dashtodockContainer #dash .show-apps:checked .overview-icon { 3382 background-color: rgba(222, 222, 222, 0.25); 3383} 3384 3385#dashtodockContainer #dash .show-apps, #dashtodockContainer #dash .show-apps .show-apps-icon, #dashtodockContainer #dash .show-apps .overview-icon { 3386 color: #dedede; 3387} 3388 3389#dashtodockContainer .dash-background { 3390 background-color: rgba(34, 34, 34, 0.75); 3391 border: 1px solid rgba(0, 0, 0, 0.75); 3392 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); 3393} 3394 3395#dashtodockContainer:overview #dash { 3396 background: none; 3397} 3398 3399#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, 3400#dashtodockContainer:overview #dash .show-apps:hover .overview-icon, 3401#dashtodockContainer:overview #dash .show-apps:focus .overview-icon, 3402#dashtodockContainer:overview #dash .show-apps:selected .overview-icon { 3403 background-color: rgba(255, 255, 255, 0.15); 3404} 3405 3406#dashtodockContainer:overview #dash .app-well-app:active .overview-icon, #dashtodockContainer:overview #dash .app-well-app:checked .overview-icon, 3407#dashtodockContainer:overview #dash .show-apps:active .overview-icon, 3408#dashtodockContainer:overview #dash .show-apps:checked .overview-icon { 3409 background-color: rgba(255, 255, 255, 0.3); 3410} 3411 3412#dashtodockContainer:overview #dash .show-apps, #dashtodockContainer:overview #dash .show-apps .show-apps-icon, #dashtodockContainer:overview #dash .show-apps .overview-icon { 3413 color: rgba(255, 255, 255, 0.85); 3414} 3415 3416#dashtodockContainer:overview #dash .dash-background { 3417 background-color: rgba(255, 255, 255, 0.15); 3418 border: 1px solid rgba(0, 0, 0, 0.08); 3419 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); 3420} 3421 3422#dashtodockContainer:overview #dash .app-well-app-running-dot { 3423 background-color: rgba(255, 255, 255, 0.85); 3424} 3425 3426#dashtodockContainer:overview #dash StWidget.focused .app-well-app-running-dot { 3427 background-color: #315BEF; 3428} 3429 3430#dashtodockContainer.opaque:overview #dash, #dashtodockContainer.transparent:overview #dash { 3431 background-color: transparent !important; 3432 box-shadow: none !important; 3433} 3434 3435#dashtodockContainer.opaque:overview .dash-background, #dashtodockContainer.transparent:overview .dash-background { 3436 background-color: transparent !important; 3437} 3438 3439#dashtodockContainer.extended:overview #dash, #dashtodockContainer.opaque.extended:overview #dash, #dashtodockContainer.transparent.extended:overview #dash { 3440 background: none; 3441} 3442 3443#dashtodockContainer.running-dots .dash-item-container > StButton, #dashtodockContainer.dashtodock .dash-item-container > StButton { 3444 transition-duration: 250ms; 3445 background-size: contain; 3446} 3447 3448#dashtodockContainer.shrink .dash-item-container > StButton, #dashtodockContainer.dashtodock .dash-item-container > StButton { 3449 padding: 1px 2px; 3450} 3451 3452#dashtodockContainer .app-well-app .overview-icon, 3453#dashtodockContainer .show-apps .overview-icon { 3454 padding: 8px; 3455 background-size: contain; 3456} 3457 3458#dashtodockContainer.extended .app-well-app .overview-icon, 3459#dashtodockContainer.extended .show-apps .overview-icon, #dashtodockContainer.extended:overview .app-well-app .overview-icon, 3460#dashtodockContainer.extended:overview .show-apps .overview-icon { 3461 border-radius: 5px; 3462} 3463 3464#dashtodockContainer .metro .overview-icon { 3465 border-radius: 0; 3466} 3467 3468.dashtodock-app-well-preview-menu-item { 3469 padding: 1em 1em 0.5em 1em; 3470} 3471 3472#dashtodockPreviewSeparator.popup-separator-menu-item-horizontal { 3473 width: 1px; 3474 height: auto; 3475 border-right-width: 1px; 3476 margin: 32px 0; 3477} 3478 3479.openweather-button, .openweather-button-action, .openweather-menu-button-container, .openweather-button-box { 3480 border: 1px solid transparent !important; 3481} 3482 3483.openweather-provider { 3484 padding: 0 16px; 3485 font-weight: 500; 3486 color: #afafaf; 3487 background-color: transparent; 3488 border-color: transparent; 3489 box-shadow: none; 3490 text-shadow: none; 3491 icon-shadow: none; 3492 border: 1px solid transparent !important; 3493} 3494 3495.openweather-provider:hover { 3496 color: #dedede; 3497 background-color: rgba(255, 255, 255, 0.06); 3498 border-color: transparent; 3499 box-shadow: none; 3500 text-shadow: none; 3501 icon-shadow: none; 3502} 3503 3504.openweather-provider:focus { 3505 color: #dedede; 3506 text-shadow: none; 3507 icon-shadow: none; 3508 box-shadow: none; 3509} 3510 3511.openweather-provider:active { 3512 color: #dedede; 3513 background-color: rgba(255, 255, 255, 0.1); 3514 border-color: transparent; 3515 box-shadow: none; 3516 text-shadow: none; 3517 icon-shadow: none; 3518} 3519 3520.openweather-current-icon, .openweather-current-summary, .openweather-current-summarybox { 3521 background: none; 3522 color: #dedede; 3523} 3524 3525.openweather-current-databox-values { 3526 background: none; 3527 color: #999999; 3528} 3529 3530.openweather-current-databox-captions { 3531 background: none; 3532 color: #999999; 3533} 3534 3535.openweather-forecast-icon, .openweather-forecast-summary { 3536 background: none; 3537 color: #afafaf; 3538} 3539 3540.openweather-forecast-day, .openweather-forecast-temperature { 3541 background: none; 3542 color: #999999; 3543} 3544 3545.openweather-sunrise-icon, .openweather-sunset-icon, .openweather-build-icon { 3546 color: #afafaf; 3547} 3548 3549.gsconnect-device-name { 3550 font-size: 0.9em; 3551} 3552 3553.gsconnect-device-menu .popup-separator-menu-item { 3554 min-height: 16px !important; 3555} 3556 3557.gsconnect-device-menu .popup-menu-item { 3558 min-width: 6px !important; 3559} 3560 3561.gsconnect-device-menu .popup-menu-item > :first-child:ltr { 3562 padding-left: 0 !important; 3563 margin-left: 0 !important; 3564} 3565 3566.gsconnect-device-menu .popup-menu-item > :first-child:rtl { 3567 padding-right: 0 !important; 3568 margin-right: 0 !important; 3569} 3570