1/* This stylesheet is generated, DO NOT EDIT */ 2/* Copyright 2009, 2015 Red Hat, Inc. 3 * 4 * Portions adapted from Mx's data/style/default.css 5 * Copyright 2009 Intel Corporation 6 * 7 * This program is free software; you can redistribute it and/or modify it 8 * under the terms and conditions of the GNU Lesser General Public License, 9 * version 2.1, as published by the Free Software Foundation. 10 * 11 * This program is distributed in the hope it will be useful, but WITHOUT ANY 12 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS 13 * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for 14 * more details. 15 * 16 * You should have received a copy of the GNU Lesser General Public License 17 * along with this program; if not, write to the Free Software Foundation, 18 * Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA. 19 */ 20/* Global Values */ 21stage { 22 font-size: 10pt; 23 color: #eeeeec; } 24 25/* Common Stylings */ 26.search-statustext { 27 font-size: 2em; 28 font-weight: bold; 29 color: white; } 30 31.workspace-switcher-container, .switcher-list, .resize-popup, .osd-window { 32 color: white; 33 background-color: #303340; 34 border-radius: 20px; 35 padding: 12px; } 36 37.workspace-thumbnails .workspace-thumbnail { 38 color: white; 39 background-color: rgba(255, 255, 255, 0.1); } 40 41.app-well-app .overview-icon, 42.grid-search-result .overview-icon, .show-apps .overview-icon, .list-search-result, .search-provider-icon { 43 border-radius: 12px; 44 padding: 6px; 45 border: 2px solid transparent; 46 transition-duration: 100ms; 47 text-align: center; } 48 49.modal-dialog { 50 color: #eeeeec; 51 background-color: #23252e; 52 border: 1px solid #0d0e11; } 53 54.app-folder-dialog .folder-name-container .edit-folder-button, .button { 55 border-radius: 8px; 56 border-style: solid; 57 border-width: 1px; 58 min-height: 22px; 59 padding: 3px 24px; 60 color: #eeeeec; 61 background-color: #292c37; 62 border-color: #1a1c23; 63 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); 64 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 65 icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } 66 .app-folder-dialog .folder-name-container .edit-folder-button:focus, .button:focus { 67 color: #eeeeec; 68 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 69 icon-shadow: 0 1px rgba(0, 0, 0, 0.2); 70 box-shadow: inset 0 0 0 2px rgba(236, 1, 1, 0.6); } 71 .app-folder-dialog .folder-name-container .edit-folder-button:hover, .button:hover { 72 color: #eeeeec; 73 background-color: #2e313d; 74 border-color: #1a1c23; 75 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); 76 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 77 icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } 78 .app-folder-dialog .folder-name-container .edit-folder-button:insensitive, .button:insensitive { 79 color: #888a8d; 80 border-color: #0d0e11; 81 background-color: #242731; 82 box-shadow: none; 83 text-shadow: none; 84 icon-shadow: none; } 85 .app-folder-dialog .folder-name-container .edit-folder-button:active, .button:active { 86 color: #eeeeec; 87 background-color: #1c1e25; 88 border-color: #0b0b0e; 89 text-shadow: none; 90 icon-shadow: none; 91 box-shadow: none; } 92 93.modal-dialog .modal-dialog-linked-button, .hotplug-notification-item, .notification-banner .notification-button { 94 color: #eeeeec; 95 background-color: #292c37; 96 border-color: #1a1c23; 97 box-shadow: none; 98 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 99 icon-shadow: 0 1px rgba(0, 0, 0, 0.2); 100 padding: 12px; 101 border-style: solid; 102 border-width: 1px; 103 border-left-width: 0; 104 border-bottom-width: 0; } 105 .modal-dialog .modal-dialog-linked-button:insensitive, .hotplug-notification-item:insensitive, .notification-banner .notification-button:insensitive { 106 color: #888a8d; 107 border-color: #0d0e11; 108 background-color: #242731; 109 box-shadow: none; 110 text-shadow: none; 111 icon-shadow: none; } 112 .modal-dialog .modal-dialog-linked-button:focus, .hotplug-notification-item:focus, .notification-banner .notification-button:focus { 113 color: #eeeeec; 114 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 115 icon-shadow: 0 1px rgba(0, 0, 0, 0.2); 116 box-shadow: inset 0 0 0 2px rgba(236, 1, 1, 0.6); } 117 .modal-dialog .modal-dialog-linked-button:hover, .hotplug-notification-item:hover, .notification-banner .notification-button:hover { 118 color: #eeeeec; 119 background-color: #2e313d; 120 border-color: #1a1c23; 121 box-shadow: none; 122 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 123 icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } 124 .modal-dialog .modal-dialog-linked-button:active, .hotplug-notification-item:active, .notification-banner .notification-button:active { 125 color: #eeeeec; 126 background-color: #1c1e25; 127 border-color: #0b0b0e; 128 text-shadow: none; 129 icon-shadow: none; 130 box-shadow: none; } 131 .modal-dialog .modal-dialog-linked-button:first-child, .hotplug-notification-item:first-child, .notification-banner .notification-button:first-child { 132 border-radius: 0 0 0 14px; } 133 .modal-dialog .modal-dialog-linked-button:last-child, .hotplug-notification-item:last-child, .notification-banner .notification-button:last-child { 134 border-right-width: 0; 135 border-radius: 0 0 14px 0; } 136 .modal-dialog .modal-dialog-linked-button:first-child:last-child, .hotplug-notification-item:first-child:last-child, .notification-banner .notification-button:first-child:last-child { 137 border-radius: 0 0 14px 14px; } 138 139/* WIDGETS */ 140.shell-link { 141 color: #fe5555; } 142 .shell-link:hover { 143 color: #fe8888; } 144 145.lowres-icon { 146 icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } 147 148.icon-dropshadow { 149 icon-shadow: 0 1px 5px rgba(0, 0, 0, 0.8); } 150 151/* Entries */ 152StEntry { 153 border-radius: 8px; 154 padding: 8px; 155 border-width: 0; 156 color: #eeeeec; 157 background-color: #272a34; 158 border-color: #0d0e11; 159 selection-background-color: #ec0101; 160 selected-color: #ffffff; } 161 StEntry:focus { 162 border-color: #540000; 163 box-shadow: inset 0 0 0 2px #ec0101; } 164 StEntry:insensitive { 165 color: #888a8d; 166 border-color: #242731; 167 box-shadow: none; } 168 StEntry StIcon.capslock-warning { 169 icon-size: 16px; 170 warning-color: #fd7d00; 171 padding: 0 4px; } 172 StEntry StIcon.peek-password { 173 icon-size: 1.09em; 174 padding: 0 4px; } 175 StEntry StLabel.hint-text { 176 margin-left: 2px; 177 color: rgba(238, 238, 236, 0.7); } 178 179/* Buttons */ 180/* Check Boxes */ 181.check-box StBoxLayout { 182 spacing: .8em; } 183 184.check-box StBin { 185 width: 24px; 186 height: 22px; 187 background-image: url("assets/checkbox-off.svg"); } 188 189.check-box:focus StBin { 190 background-image: url("assets/checkbox-off-focused.svg"); } 191 192.check-box:checked StBin { 193 background-image: url("assets/checkbox.svg"); } 194 195.check-box:focus:checked StBin { 196 background-image: url("assets/checkbox-focused.svg"); } 197 198/* Switches */ 199.toggle-switch { 200 color: #eeeeec; 201 height: 22px; 202 width: 46px; 203 background-size: contain; 204 background-image: url("assets/toggle-off-dark.svg"); } 205 .toggle-switch:checked { 206 background-image: url("assets/toggle-on-dark.svg"); } 207 208/* Slider */ 209.slider { 210 height: 15px; 211 -barlevel-height: 3px; 212 -barlevel-background-color: #0d0e11; 213 -barlevel-border-width: 1px; 214 -barlevel-border-color: #0d0e11; 215 -barlevel-active-background-color: #ec0101; 216 -barlevel-active-border-color: #f60101; 217 -barlevel-overdrive-color: #a61414; 218 -barlevel-overdrive-border-color: #b01515; 219 -barlevel-overdrive-separator-width: 1px; 220 -slider-handle-radius: 7.5px; 221 -slider-handle-border-width: 1px; 222 -slider-handle-border-color: #eeeeec; 223 color: #eeeeec; } 224 .slider:hover { 225 color: #2e313d; } 226 .slider:active { 227 color: #0f1014; } 228 229/* Scrollbars */ 230StScrollView.vfade { 231 -st-vfade-offset: 68px; } 232 233StScrollView.hfade { 234 -st-hfade-offset: 68px; } 235 236StScrollBar { 237 padding: 0; } 238 StScrollView StScrollBar { 239 min-width: 14px; 240 min-height: 14px; } 241 StScrollBar StBin#trough { 242 border-radius: 0; 243 background-color: transparent; } 244 StScrollBar StButton#vhandle, StScrollBar StButton#hhandle { 245 border-radius: 8px; 246 background-color: #9d9ea0; 247 margin: 3px; } 248 StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover { 249 background-color: #c5c6c6; } 250 StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { 251 background-color: #ec0101; } 252 253/* Popovers/Menus */ 254.popup-menu-boxpointer, .candidate-popup-boxpointer { 255 -arrow-border-radius: 12px; 256 -arrow-background-color: #23252e; 257 -arrow-border-width: 1px; 258 -arrow-border-color: #0d0e11; 259 -arrow-base: 24px; 260 -arrow-rise: 12px; 261 -arrow-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } 262 263.popup-menu { 264 min-width: 15em; 265 color: #eeeeec; } 266 .popup-menu.panel-menu { 267 -boxpointer-gap: 4px; 268 margin-bottom: 1.75em; } 269 270.popup-menu-content { 271 padding: 16px 0; } 272 273.popup-menu-item { 274 spacing: 6px; 275 padding: 6px; } 276 .popup-menu-item:ltr { 277 padding-right: 1.75em; 278 padding-left: 0; } 279 .popup-menu-item:rtl { 280 padding-right: 0; 281 padding-left: 1.75em; } 282 .popup-menu-item:checked { 283 background-color: #272a34; 284 box-shadow: none; } 285 .popup-menu-item.selected { 286 background-color: rgba(255, 255, 255, 0.1); 287 color: #eeeeec; } 288 .popup-menu-item:active { 289 background-color: #ec0101; 290 color: #ffffff; } 291 .popup-menu-item:insensitive { 292 color: rgba(238, 238, 236, 0.5); } 293 294.popup-inactive-menu-item { 295 color: #eeeeec; } 296 .popup-inactive-menu-item:insensitive { 297 color: rgba(238, 238, 236, 0.5); } 298 299.popup-menu-arrow, 300.popup-menu-icon { 301 icon-size: 1.09em; } 302 303.popup-sub-menu { 304 background-color: #1c1e25; 305 box-shadow: none; 306 border-top: 1px solid rgba(13, 14, 17, 0.8); 307 border-bottom: 1px solid rgba(13, 14, 17, 0.8); } 308 309.popup-menu-ornament { 310 width: 1.2em; } 311 .popup-menu-ornament:ltr { 312 text-align: right; } 313 .popup-menu-ornament:rtl { 314 text-align: left; } 315 316.popup-separator-menu-item { 317 padding: 0; } 318 .popup-separator-menu-item .popup-separator-menu-item-separator { 319 height: 1px; 320 margin: 6px 64px; 321 background-color: #111217; } 322 .popup-sub-menu .popup-separator-menu-item .popup-separator-menu-item-separator { 323 margin: 0 64px 0 32px; 324 background-color: #383d4b; } 325 326.background-menu { 327 -boxpointer-gap: 4px; 328 -arrow-rise: 0px; } 329 330.aggregate-menu { 331 min-width: 21em; } 332 .aggregate-menu .popup-menu-icon { 333 padding: 0; 334 margin: 0 4px; 335 -st-icon-style: symbolic; } 336 .aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:ltr { 337 padding-left: 14px; 338 margin-left: 1.09em; } 339 .aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:rtl { 340 padding-right: 14px; 341 margin-right: 1.09em; } 342 343/* Date/Time Menu */ 344.clock-display-box { 345 spacing: 2px; } 346 .clock-display-box .clock { 347 padding-left: 12px; 348 padding-right: 12px; } 349 350#calendarArea { 351 padding: 0; } 352 353.datemenu-calendar-column { 354 spacing: 6px; 355 border: 0 solid #181a20; 356 padding: 0 12px; } 357 .datemenu-calendar-column:ltr { 358 margin-right: 8px; 359 border-left-width: 1px; } 360 .datemenu-calendar-column:rtl { 361 margin-left: 8px; 362 border-right-width: 1px; } 363 .datemenu-calendar-column .datemenu-displays-box { 364 spacing: 6px; } 365 366.events-section-title { 367 border-width: 1px; 368 border-style: solid; 369 border-radius: 10px; 370 margin: 4px; 371 border-color: transparent; 372 background-color: transparent; 373 background-image: none; 374 box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); 375 text-shadow: none; 376 icon-shadow: none; 377 color: #878787; 378 font-weight: bold; 379 padding: .4em; } 380 .events-section-title:focus { 381 color: #eeeeec; 382 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 383 icon-shadow: 0 1px rgba(0, 0, 0, 0.2); 384 box-shadow: inset 0 0 0 2px rgba(236, 1, 1, 0.6); } 385 .events-section-title:hover { 386 color: #eeeeec; 387 background-color: #2e313d; 388 border-color: #1a1c23; 389 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); 390 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 391 icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } 392 .events-section-title:active { 393 color: #eeeeec; 394 background-color: #1c1e25; 395 border-color: #0b0b0e; 396 text-shadow: none; 397 icon-shadow: none; 398 box-shadow: none; } 399 400/* today button (the date) */ 401.datemenu-today-button { 402 border-width: 1px; 403 border-style: solid; 404 border-radius: 10px; 405 margin: 4px; 406 border-color: transparent; 407 background-color: transparent; 408 background-image: none; 409 box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); 410 text-shadow: none; 411 icon-shadow: none; 412 padding: 9px; } 413 .datemenu-today-button:focus { 414 color: #eeeeec; 415 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 416 icon-shadow: 0 1px rgba(0, 0, 0, 0.2); 417 box-shadow: inset 0 0 0 2px rgba(236, 1, 1, 0.6); } 418 .datemenu-today-button:hover { 419 color: #eeeeec; 420 background-color: #2e313d; 421 border-color: #1a1c23; 422 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); 423 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 424 icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } 425 .datemenu-today-button:active { 426 color: #eeeeec; 427 background-color: #1c1e25; 428 border-color: #0b0b0e; 429 text-shadow: none; 430 icon-shadow: none; 431 box-shadow: none; } 432 .datemenu-today-button .day-label { 433 font-size: 11pt; 434 font-weight: bold; } 435 .datemenu-today-button .date-label { 436 font-size: 17pt; 437 font-weight: 1000; } 438 439/* Calendar */ 440.calendar { 441 border-width: 1px; 442 border-style: solid; 443 border-radius: 10px; 444 margin: 4px; 445 color: #eeeeec; 446 background-color: #292c37; 447 border-color: #1a1c23; 448 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); 449 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 450 icon-shadow: 0 1px rgba(0, 0, 0, 0.2); 451 padding: 6px; } 452 .calendar:focus { 453 color: #eeeeec; 454 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 455 icon-shadow: 0 1px rgba(0, 0, 0, 0.2); 456 box-shadow: inset 0 0 0 2px rgba(236, 1, 1, 0.6); } 457 .calendar:hover { 458 color: #eeeeec; 459 background-color: #2e313d; 460 border-color: #1a1c23; 461 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); 462 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 463 icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } 464 .calendar:active { 465 color: #eeeeec; 466 background-color: #1c1e25; 467 border-color: #0b0b0e; 468 text-shadow: none; 469 icon-shadow: none; 470 box-shadow: none; } 471 .calendar .calendar-month-label { 472 color: #fafaf9; 473 font-weight: bold; 474 padding: 8px 0; } 475 .calendar .calendar-change-month-back StIcon, 476 .calendar .calendar-change-month-forward StIcon { 477 icon-size: 1.09em; } 478 .calendar .pager-button { 479 background-color: transparent; 480 height: 32px; 481 width: 32px; 482 border-radius: 8px; } 483 .calendar .pager-button:hover, .calendar .pager-button:focus { 484 background-color: #383d4b; } 485 .calendar .pager-button:active { 486 background-color: #0f1014; } 487 .calendar .calendar-day-base { 488 font-size: 7pt; 489 text-align: center; 490 width: 32px; 491 height: 32px; 492 padding: 0; 493 margin: 2px; 494 border-radius: 18px; 495 border: 1px solid transparent; 496 font-feature-settings: "tnum"; } 497 .calendar .calendar-day-base:hover, .calendar .calendar-day-base:focus { 498 background-color: #2e313d; } 499 .calendar .calendar-day-base:active, .calendar .calendar-day-base:selected { 500 color: white; 501 background-color: #181a20; } 502 .calendar .calendar-day-base.calendar-day-heading { 503 color: white; 504 margin-top: 1em; 505 font-size: 6pt; } 506 .calendar .calendar-day { 507 border-width: 0; } 508 .calendar .calendar-day-top { 509 border-top-width: 1px; } 510 .calendar .calendar-day-left { 511 border-left-width: 1px; } 512 .calendar .calendar-nonwork-day { 513 color: #888a8d; } 514 .calendar .calendar-today { 515 font-weight: bold; 516 border: 1px solid transparent; 517 background-color: #ec0101; 518 color: #ffffff; } 519 .calendar .calendar-today:hover, .calendar .calendar-today:focus { 520 background-color: #fb0101; 521 color: #ffffff; } 522 .calendar .calendar-today:active, .calendar .calendar-today:selected { 523 background-color: #ec0101; 524 color: #ffffff; } 525 .calendar .calendar-today:active:hover, .calendar .calendar-today:active:focus, .calendar .calendar-today:selected:hover, .calendar .calendar-today:selected:focus { 526 background-color: #fb0101; 527 color: #ffffff; } 528 .calendar .calendar-day-with-events { 529 background-image: url("assets/calendar-today.svg"); } 530 .calendar .calendar-day-with-events.calendar-work-day { 531 color: white; 532 font-weight: bold; } 533 .calendar .calendar-other-month-day { 534 color: rgba(238, 238, 236, 0.5); } 535 .calendar .calendar-week-number { 536 font-size: 6pt; 537 font-weight: bold; 538 height: 1.8em; 539 width: 2.3em; 540 border-radius: 2px; 541 margin: 6px; 542 background-color: #1e2128; 543 color: #fafaf9; } 544 545/* Events */ 546.events-button { 547 border-width: 1px; 548 border-style: solid; 549 border-radius: 10px; 550 margin: 4px; 551 color: #eeeeec; 552 background-color: #292c37; 553 border-color: #1a1c23; 554 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); 555 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 556 icon-shadow: 0 1px rgba(0, 0, 0, 0.2); 557 padding: 12px; } 558 .events-button:focus { 559 color: #eeeeec; 560 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 561 icon-shadow: 0 1px rgba(0, 0, 0, 0.2); 562 box-shadow: inset 0 0 0 2px rgba(236, 1, 1, 0.6); } 563 .events-button:hover { 564 color: #eeeeec; 565 background-color: #2e313d; 566 border-color: #1a1c23; 567 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); 568 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 569 icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } 570 .events-button:active { 571 color: #eeeeec; 572 background-color: #1c1e25; 573 border-color: #0b0b0e; 574 text-shadow: none; 575 icon-shadow: none; 576 box-shadow: none; } 577 .events-button .events-box { 578 spacing: 6px; } 579 .events-button .events-list { 580 spacing: 12px; } 581 .events-button .events-title { 582 color: #878787; 583 font-weight: bold; 584 margin-bottom: 4px; } 585 .events-button .event-time { 586 color: #bebeb6; 587 font-feature-settings: "tnum"; 588 font-size: 9pt; } 589 590/* World clocks */ 591.world-clocks-button { 592 border-width: 1px; 593 border-style: solid; 594 border-radius: 10px; 595 margin: 4px; 596 color: #eeeeec; 597 background-color: #292c37; 598 border-color: #1a1c23; 599 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); 600 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 601 icon-shadow: 0 1px rgba(0, 0, 0, 0.2); 602 padding: 12px; } 603 .world-clocks-button:focus { 604 color: #eeeeec; 605 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 606 icon-shadow: 0 1px rgba(0, 0, 0, 0.2); 607 box-shadow: inset 0 0 0 2px rgba(236, 1, 1, 0.6); } 608 .world-clocks-button:hover { 609 color: #eeeeec; 610 background-color: #2e313d; 611 border-color: #1a1c23; 612 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); 613 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 614 icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } 615 .world-clocks-button:active { 616 color: #eeeeec; 617 background-color: #1c1e25; 618 border-color: #0b0b0e; 619 text-shadow: none; 620 icon-shadow: none; 621 box-shadow: none; } 622 .world-clocks-button .world-clocks-grid { 623 spacing-rows: 6px; 624 spacing-columns: 12px; } 625 .world-clocks-button .world-clocks-header { 626 color: #878787; 627 font-weight: bold; } 628 .world-clocks-button .world-clocks-city { 629 color: #eeeeec; 630 font-size: 10pt; 631 font-weight: normal; } 632 .world-clocks-button .world-clocks-time { 633 font-weight: bold; 634 color: #eeeeec; 635 font-feature-settings: "tnum"; 636 font-size: 10pt; } 637 .world-clocks-button .world-clocks-time:ltr { 638 text-align: right; } 639 .world-clocks-button .world-clocks-time:rtl { 640 text-align: left; } 641 .world-clocks-button .world-clocks-timezone { 642 color: #bebeb6; 643 font-feature-settings: "tnum"; 644 font-size: 9pt; } 645 646/* Weather */ 647.weather-button { 648 border-width: 1px; 649 border-style: solid; 650 border-radius: 10px; 651 margin: 4px; 652 color: #eeeeec; 653 background-color: #292c37; 654 border-color: #1a1c23; 655 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); 656 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 657 icon-shadow: 0 1px rgba(0, 0, 0, 0.2); 658 padding: 12px; } 659 .weather-button:focus { 660 color: #eeeeec; 661 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 662 icon-shadow: 0 1px rgba(0, 0, 0, 0.2); 663 box-shadow: inset 0 0 0 2px rgba(236, 1, 1, 0.6); } 664 .weather-button:hover { 665 color: #eeeeec; 666 background-color: #2e313d; 667 border-color: #1a1c23; 668 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); 669 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 670 icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } 671 .weather-button:active { 672 color: #eeeeec; 673 background-color: #1c1e25; 674 border-color: #0b0b0e; 675 text-shadow: none; 676 icon-shadow: none; 677 box-shadow: none; } 678 .weather-button .weather-box { 679 spacing: 10px; } 680 .weather-button .weather-header-box { 681 spacing: 6px; } 682 .weather-button .weather-header { 683 color: #878787; 684 font-weight: bold; } 685 .weather-button .weather-header.location { 686 font-weight: normal; 687 font-size: 9pt; } 688 .weather-button .weather-grid { 689 spacing-rows: 6px; 690 spacing-columns: 12px; } 691 .weather-button .weather-forecast-time { 692 color: #a6a69b; 693 font-feature-settings: "tnum"; 694 font-size: 8pt; 695 font-weight: normal; 696 padding-top: 0.2em; 697 padding-bottom: 0.4em; } 698 .weather-button .weather-forecast-icon { 699 icon-size: 2.18em; } 700 .weather-button .weather-forecast-temp { 701 font-weight: bold; } 702 703/* Message List */ 704.message-list { 705 width: 31.5em; 706 padding: 0 12px; } 707 .message-list .message-list-placeholder { 708 spacing: 12px; } 709 710.message-list-sections { 711 spacing: 6px; 712 margin: 0 16px; } 713 714.message-list-section, 715.message-list-section-list { 716 spacing: 6px; } 717 718.message-list-controls { 719 margin: 8px 16px 0; 720 padding: 4px; 721 spacing: 12px; } 722 .message-list-controls .dnd-button { 723 border-width: 2px; 724 border-color: transparent; 725 border-radius: 99px; 726 border-style: solid; } 727 .message-list-controls .dnd-button:focus { 728 border-color: rgba(236, 1, 1, 0.6); } 729 730.message { 731 border-width: 1px; 732 border-style: solid; 733 border-radius: 10px; 734 margin: 4px; 735 color: #eeeeec; 736 background-color: #292c37; 737 border-color: #1a1c23; 738 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); 739 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 740 icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } 741 .message:focus { 742 color: #eeeeec; 743 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 744 icon-shadow: 0 1px rgba(0, 0, 0, 0.2); 745 box-shadow: inset 0 0 0 2px rgba(236, 1, 1, 0.6); } 746 .message:hover { 747 color: #eeeeec; 748 background-color: #2e313d; 749 border-color: #1a1c23; 750 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); 751 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 752 icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } 753 .message:active { 754 color: #eeeeec; 755 background-color: #1c1e25; 756 border-color: #0b0b0e; 757 text-shadow: none; 758 icon-shadow: none; 759 box-shadow: none; } 760 .message .message-icon-bin { 761 padding: 18px 0 18px 12px; } 762 .message .message-icon-bin:rtl { 763 padding: 18px 12px 18px 0; } 764 .message .message-icon-bin > StIcon { 765 icon-size: 2.18em; 766 -st-icon-style: symbolic; } 767 .message .message-icon-bin > .fallback-app-icon { 768 width: 1.09em; 769 height: 1.09em; } 770 .message .message-content { 771 padding: 14px; 772 spacing: 4px; } 773 .message .message-title { 774 font-weight: bold; } 775 .message .message-secondary-bin { 776 padding: 0 8px; } 777 .message .message-secondary-bin > .event-time { 778 color: rgba(238, 238, 236, 0.5); 779 font-size: 8pt; 780 /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */ 781 padding-bottom: 0.13em; } 782 .message .message-secondary-bin > .event-time:ltr { 783 text-align: right; } 784 .message .message-secondary-bin > .event-time:rtl { 785 text-align: left; } 786 .message .message-close-button { 787 color: white; } 788 .message .message-close-button:hover { 789 color: #d6d6d1; } 790 .message .message-close-button:active { 791 color: #bebeb6; } 792 .message .message-body { 793 color: #d6d6d1; } 794 795.url-highlighter { 796 link-color: #fe5555; } 797 798/* Media Controls */ 799.message-media-control { 800 padding: 12px 1.64em; 801 color: #cacac4; } 802 .message-media-control:hover { 803 background-color: #383d4b; 804 color: #eeeeec; } 805 .message-media-control:active { 806 background-color: #292c37; 807 color: #eeeeec; } 808 .message-media-control:insensitive { 809 color: #8e8e80; } 810 .message-media-control:last-child:ltr { 811 border-radius: 0 10px 10px 0; } 812 .message-media-control:last-child:rtl { 813 border-radius: 10px 0 0 10px; } 814 815.media-message-cover-icon { 816 icon-size: 2.18em !important; 817 border-radius: 8px; } 818 .media-message-cover-icon.fallback { 819 color: #c5c5be; 820 background-color: #23252e; 821 border: 1px solid transparent; 822 border-radius: 8px; 823 icon-size: 2.18em !important; } 824 825.candidate-popup-content { 826 padding: 0.5em; 827 spacing: 0.3em; } 828 829.candidate-index { 830 padding: 0 0.5em 0 0; 831 color: #d6d6d1; } 832 833.candidate-box { 834 padding: 0.3em 0.5em 0.3em 0.5em; 835 border-radius: 8px; } 836 .candidate-box:selected, .candidate-box:hover { 837 background-color: #ec0101; 838 color: #ffffff; } 839 840.candidate-page-button-box { 841 height: 2em; } 842 .vertical .candidate-page-button-box { 843 padding-top: 0.5em; } 844 .horizontal .candidate-page-button-box { 845 padding-left: 0.5em; } 846 847.candidate-page-button { 848 padding: 4px; } 849 850.candidate-page-button-previous { 851 border-radius: 8px 0px 0px 8px; 852 border-right-width: 0; } 853 854.candidate-page-button-next { 855 border-radius: 0px 8px 8px 0px; } 856 857.candidate-page-button-icon { 858 icon-size: 1em; } 859 860/* Notifications & Message Tray */ 861.notification-banner { 862 min-height: 64px; 863 width: 34em; } 864 .notification-banner .notification-actions { 865 spacing: 0; } 866 867.summary-source-counter { 868 font-size: 9pt; 869 font-weight: bold; 870 height: 1.6em; 871 width: 1.6em; 872 -shell-counter-overlap-x: 3px; 873 -shell-counter-overlap-y: 3px; 874 background-color: #ec0101; 875 color: #ffffff; 876 border: 2px solid #eeeeec; 877 box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); 878 border-radius: 0.9em; } 879 880.chat-body { 881 spacing: 5px; } 882 883.chat-response { 884 margin: 5px; } 885 886.chat-log-message { 887 color: #d6d6d1; } 888 889.chat-new-group { 890 padding-top: 1em; } 891 892.chat-received { 893 padding-left: 4px; } 894 .chat-received:rtl { 895 padding-left: 0px; 896 padding-right: 4px; } 897 898.chat-sent { 899 padding-left: 18pt; 900 color: white; } 901 .chat-sent:rtl { 902 padding-left: 0; 903 padding-right: 18pt; } 904 905.chat-meta-message { 906 padding-left: 4px; 907 font-size: 8pt; 908 font-weight: bold; 909 color: white; } 910 .chat-meta-message:rtl { 911 padding-left: 0; 912 padding-right: 4px; } 913 914.hotplug-notification-item-icon { 915 icon-size: 24px; 916 padding: 0 4px; } 917 918/* Modal Dialogs */ 919.headline { 920 font-size: 11pt; } 921 922.modal-dialog { 923 border-radius: 16px; } 924 .modal-dialog .modal-dialog-content-box { 925 margin: 32px 40px; 926 spacing: 32px; 927 max-width: 28em; } 928 929/* End Session Dialog */ 930.end-session-dialog { 931 width: 30em; } 932 .end-session-dialog .end-session-dialog-battery-warning, 933 .end-session-dialog .dialog-list-title { 934 color: #fd7d00; } 935 936/* Message Dialog */ 937.message-dialog-content { 938 spacing: 18px; } 939 .message-dialog-content .message-dialog-title { 940 text-align: center; 941 font-size: 18pt; 942 font-weight: 800; } 943 .message-dialog-content .message-dialog-title.lightweight { 944 font-size: 13pt; 945 font-weight: 800; } 946 .message-dialog-content .message-dialog-description { 947 text-align: center; } 948 949/* Dialog List */ 950.dialog-list { 951 spacing: 18px; } 952 .dialog-list .dialog-list-title { 953 text-align: center; 954 font-weight: bold; } 955 .dialog-list .dialog-list-scrollview { 956 max-height: 200px; } 957 .dialog-list .dialog-list-box { 958 spacing: 1em; } 959 .dialog-list .dialog-list-box .dialog-list-item { 960 spacing: 1em; } 961 .dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-title { 962 font-weight: bold; } 963 .dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-description { 964 color: #e2e2df; 965 font-size: 9pt; } 966 967/* Run Dialog */ 968.run-dialog .modal-dialog-content-box { 969 margin-top: 24px; 970 margin-bottom: 14px; } 971 972.run-dialog .run-dialog-entry { 973 width: 20em; } 974 975.run-dialog .run-dialog-description { 976 font-size: 9pt; 977 text-align: center; 978 color: #bebeb6; } 979 980/* Password or Authentication Dialog */ 981.prompt-dialog { 982 width: 28em; } 983 .prompt-dialog .modal-dialog-content-box { 984 margin-bottom: 24px; } 985 986.prompt-dialog-password-grid { 987 spacing-rows: 8px; 988 spacing-columns: 4px; } 989 .prompt-dialog-password-grid .prompt-dialog-password-entry { 990 width: auto; } 991 .prompt-dialog-password-grid .prompt-dialog-password-entry:ltr { 992 margin-left: 20px; } 993 .prompt-dialog-password-grid .prompt-dialog-password-entry:rtl { 994 margin-right: 20px; } 995 996.prompt-dialog-password-layout { 997 spacing: 8px; } 998 999.prompt-dialog-password-entry { 1000 width: 20em; } 1001 1002.prompt-dialog-error-label, 1003.prompt-dialog-info-label, 1004.prompt-dialog-null-label { 1005 text-align: center; 1006 font-size: 9pt; } 1007 1008.prompt-dialog-error-label { 1009 color: #fd7d00; } 1010 1011/* Polkit Dialog */ 1012.polkit-dialog-user-layout { 1013 text-align: center; 1014 spacing: 8px; 1015 margin-bottom: 6px; } 1016 .polkit-dialog-user-layout .polkit-dialog-user-root-label { 1017 color: #fd7d00; } 1018 1019/* Audio selection dialog */ 1020.audio-device-selection-dialog .modal-dialog-content-box { 1021 margin-bottom: 28px; } 1022 1023.audio-device-selection-dialog .audio-selection-box { 1024 spacing: 20px; } 1025 1026.audio-selection-device { 1027 border: 1px solid #181a20; 1028 border-radius: 12px; } 1029 .audio-selection-device:hover, .audio-selection-device:focus { 1030 background-color: #2e313d; } 1031 .audio-selection-device:active { 1032 background-color: #ec0101; 1033 color: #ffffff; } 1034 1035.audio-selection-device-box { 1036 padding: 20px; 1037 spacing: 20px; } 1038 1039.audio-selection-device-icon { 1040 icon-size: 4.36em; } 1041 1042/* Welcome dialog */ 1043.welcome-dialog-image { 1044 background-image: url("assets/gnome-shell-start.svg"); 1045 background-size: contain; 1046 /* Reasonable maximum dimensions */ 1047 height: 300px; 1048 width: 300px; } 1049 1050/* Network Dialogs */ 1051.nm-dialog { 1052 max-height: 34em; 1053 min-height: 31em; 1054 min-width: 32em; } 1055 1056.nm-dialog-content { 1057 spacing: 20px; 1058 padding: 24px; } 1059 1060.nm-dialog-airplane-box { 1061 spacing: 12px; } 1062 1063.nm-dialog-airplane-headline { 1064 font-weight: bold; 1065 text-align: center; } 1066 1067.nm-dialog-airplane-text { 1068 color: #eeeeec; } 1069 1070.nm-dialog-header { 1071 font-weight: bold; } 1072 1073.nm-dialog-header-icon { 1074 icon-size: 2.18em; } 1075 1076.nm-dialog-header-hbox { 1077 spacing: 10px; } 1078 1079.nm-dialog-scroll-view { 1080 border: 1px solid #0d0e11; 1081 padding: 0; 1082 background-color: #1c1e25; } 1083 1084.nm-dialog-item { 1085 font-size: 10pt; 1086 border-bottom: 1px solid #0d0e11; 1087 padding: 12px; 1088 spacing: 0px; } 1089 .nm-dialog-item:selected { 1090 background-color: #ec0101; 1091 color: #ffffff; } 1092 1093.nm-dialog-icon { 1094 icon-size: 1.09em; } 1095 1096.nm-dialog-icons { 1097 spacing: 12px; } 1098 1099.no-networks-label { 1100 color: #888a8d; } 1101 1102.no-networks-box { 1103 spacing: 6px; } 1104 1105/* OSD */ 1106.osd-window { 1107 text-align: center; 1108 font-weight: bold; 1109 spacing: 12px; 1110 margin: 32px; 1111 min-width: 64px; 1112 min-height: 64px; } 1113 .osd-window StIcon { 1114 icon-size: 6.54em; } 1115 .osd-window .osd-monitor-label { 1116 font-size: 3em; } 1117 .osd-window .level { 1118 height: 8px; 1119 -barlevel-height: 8px; 1120 -barlevel-background-color: rgba(255, 255, 255, 0.1); 1121 -barlevel-active-background-color: white; 1122 -barlevel-overdrive-color: #a61414; 1123 -barlevel-overdrive-separator-width: 3px; } 1124 1125/* Pad OSD */ 1126.pad-osd-window { 1127 padding: 32px; 1128 background-color: rgba(0, 0, 0, 0.8); } 1129 .pad-osd-window .pad-osd-title-box { 1130 spacing: 12px; } 1131 .pad-osd-window .pad-osd-title-menu-box { 1132 spacing: 6px; } 1133 1134.combo-box-label { 1135 width: 15em; } 1136 1137/* App Switcher */ 1138.switcher-popup { 1139 padding: 8px; 1140 spacing: 24px; } 1141 1142.switcher-list .item-box { 1143 padding: 8px; 1144 border-radius: 9px; 1145 border: 1px solid transparent; } 1146 .switcher-list .item-box:outlined { 1147 background-color: rgba(255, 255, 255, 0.3); } 1148 .switcher-list .item-box:selected { 1149 background-color: rgba(255, 255, 255, 0.3); 1150 color: white; } 1151 1152.switcher-list .thumbnail-box { 1153 padding: 2px; 1154 spacing: 6px; } 1155 1156.switcher-list .thumbnail { 1157 width: 256px; } 1158 1159.switcher-list .separator { 1160 width: 1px; 1161 background: #0d0e11; } 1162 1163.switcher-list .switcher-list-item-container { 1164 spacing: 12px; } 1165 1166.switcher-arrow { 1167 border-color: rgba(0, 0, 0, 0); 1168 color: rgba(238, 238, 236, 0.8); } 1169 .switcher-arrow:highlighted { 1170 color: #eeeeec; } 1171 1172.input-source-switcher-symbol { 1173 font-size: 34pt; 1174 width: 96px; 1175 height: 96px; } 1176 1177.cycler-highlight { 1178 border: 5px solid #ec0101; } 1179 1180/* Workspace Switcher */ 1181.workspace-switcher-group { 1182 padding: 12px; } 1183 1184.workspace-switcher { 1185 background: transparent; 1186 border: none; 1187 border-radius: 0; 1188 padding: 0; 1189 spacing: 12px; } 1190 1191.ws-switcher-box { 1192 background: transparent; 1193 height: 50px; 1194 background-size: 32px; 1195 border: 1px solid rgba(255, 255, 255, 0.1); 1196 border-radius: 11px; } 1197 1198.ws-switcher-active-up, 1199.ws-switcher-active-down, 1200.ws-switcher-active-left, 1201.ws-switcher-active-right { 1202 height: 52px; 1203 background-color: #ec0101; 1204 border: 1px solid #fe0909; 1205 border-radius: 11px; 1206 color: #ffffff; } 1207 1208/* Top Bar */ 1209#panel { 1210 background-color: #000; 1211 font-weight: bold; 1212 height: 2.2em; 1213 font-feature-settings: "tnum"; 1214 transition-duration: 250ms; } 1215 #panel.unlock-screen, #panel.login-screen, #panel:overview { 1216 background-color: transparent; } 1217 #panel.unlock-screen .panel-corner, #panel.login-screen .panel-corner, #panel:overview .panel-corner { 1218 -panel-corner-opacity: 0; } 1219 #panel .panel-corner { 1220 -panel-corner-radius: 9px; 1221 -panel-corner-background-color: #000; 1222 -panel-corner-border-width: 2px; 1223 -panel-corner-border-color: transparent; 1224 -panel-corner-opacity: 1; 1225 transition-duration: 250ms; } 1226 #panel .panel-button { 1227 font-weight: bold; 1228 color: #ddd; 1229 -natural-hpadding: 12px; 1230 -minimum-hpadding: 6px; 1231 transition-duration: 150ms; 1232 border: 3px solid transparent; 1233 border-radius: 99px; } 1234 #panel .panel-button.clock-display .clock { 1235 transition-duration: 150ms; 1236 border: 3px solid transparent; 1237 border-radius: 99px; } 1238 #panel .panel-button:hover, #panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked { 1239 box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.2); } 1240 #panel .panel-button:hover.clock-display, #panel .panel-button:active.clock-display, #panel .panel-button:overview.clock-display, #panel .panel-button:focus.clock-display, #panel .panel-button:checked.clock-display { 1241 box-shadow: none; } 1242 #panel .panel-button:hover.clock-display .clock, #panel .panel-button:active.clock-display .clock, #panel .panel-button:overview.clock-display .clock, #panel .panel-button:focus.clock-display .clock, #panel .panel-button:checked.clock-display .clock { 1243 box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.2); } 1244 #panel .panel-button .system-status-icon { 1245 icon-size: 1.09em; 1246 padding: 5px; 1247 margin: 0 4px; } 1248 #panel .panel-button .panel-status-indicators-box .system-status-icon, 1249 #panel .panel-button .panel-status-menu-box .system-status-icon { 1250 margin: 0; } 1251 #panel .panel-button .app-menu-icon { 1252 -st-icon-style: symbolic; } 1253 #panel .panel-button#panelActivities { 1254 -natural-hpadding: 18px; } 1255 #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 { 1256 box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15); } 1257 #panel.unlock-screen .panel-button:hover.clock-display, #panel.unlock-screen .panel-button:active.clock-display, #panel.unlock-screen .panel-button:overview.clock-display, #panel.unlock-screen .panel-button:focus.clock-display, #panel.unlock-screen .panel-button:checked.clock-display, #panel.login-screen .panel-button:hover.clock-display, #panel.login-screen .panel-button:active.clock-display, #panel.login-screen .panel-button:overview.clock-display, #panel.login-screen .panel-button:focus.clock-display, #panel.login-screen .panel-button:checked.clock-display, #panel:overview .panel-button:hover.clock-display, #panel:overview .panel-button:active.clock-display, #panel:overview .panel-button:overview.clock-display, #panel:overview .panel-button:focus.clock-display, #panel:overview .panel-button:checked.clock-display { 1258 box-shadow: none; } 1259 #panel.unlock-screen .panel-button:hover.clock-display .clock, #panel.unlock-screen .panel-button:active.clock-display .clock, #panel.unlock-screen .panel-button:overview.clock-display .clock, #panel.unlock-screen .panel-button:focus.clock-display .clock, #panel.unlock-screen .panel-button:checked.clock-display .clock, #panel.login-screen .panel-button:hover.clock-display .clock, #panel.login-screen .panel-button:active.clock-display .clock, #panel.login-screen .panel-button:overview.clock-display .clock, #panel.login-screen .panel-button:focus.clock-display .clock, #panel.login-screen .panel-button:checked.clock-display .clock, #panel:overview .panel-button:hover.clock-display .clock, #panel:overview .panel-button:active.clock-display .clock, #panel:overview .panel-button:overview.clock-display .clock, #panel:overview .panel-button:focus.clock-display .clock, #panel:overview .panel-button:checked.clock-display .clock { 1260 box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15); } 1261 #panel .panel-status-indicators-box, 1262 #panel .panel-status-menu-box { 1263 spacing: 2px; } 1264 #panel .power-status.panel-status-indicators-box { 1265 spacing: 0; } 1266 #panel .screencast-indicator, 1267 #panel .remote-access-indicator { 1268 color: #fd7d00; } 1269 1270#appMenu { 1271 spacing: 6px; } 1272 #appMenu .label-shadow { 1273 color: transparent; } 1274 1275#appMenu .panel-status-menu-box { 1276 padding: 0 6px; 1277 spacing: 6px; } 1278 1279/* Activities Ripple */ 1280.ripple-box { 1281 background-color: rgba(255, 186, 186, 0.3); 1282 box-shadow: 0 0 2px 2px #fe5555; 1283 width: 52px; 1284 height: 52px; 1285 border-radius: 0 0 52px 0; } 1286 .ripple-box:rtl { 1287 border-radius: 0 0 0 52px; } 1288 1289/* OVERVIEW */ 1290.controls-manager, .secondary-monitor-workspaces { 1291 spacing: 12px; } 1292 1293#overviewGroup { 1294 background-color: #272a34; } 1295 1296.overview-controls { 1297 padding-bottom: 32px; } 1298 1299/* Window Picker */ 1300.window-picker { 1301 spacing: 6px; } 1302 1303.window-caption { 1304 color: white; 1305 background-color: #303340; 1306 border-radius: 99px; 1307 padding: 6px 12px; } 1308 1309.window-close { 1310 background-color: #303340; 1311 color: white; 1312 border-radius: 21px; 1313 padding: 3px; 1314 height: 30px; 1315 width: 30px; 1316 box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.5); 1317 transition-duration: 300ms; } 1318 .window-close StIcon { 1319 icon-size: 24px; } 1320 .window-close:hover { 1321 background-color: #51576b; } 1322 .window-close:active { 1323 color: rgba(255, 255, 255, 0.8); 1324 background-color: #252831; } 1325 1326.workspace-background { 1327 border-radius: 30px; 1328 box-shadow: 0 4px 16px 4px rgba(0, 0, 0, 0.3); } 1329 1330 1331.search-entry { 1332 width: 320px; 1333 padding: 7px 9px; 1334 border-radius: 18px; 1335 color: rgba(238, 238, 236, 0.7); 1336 background-color: #23252e; 1337 margin-top: 12px; 1338 margin-bottom: 6px; 1339 border-width: 2px; 1340 border-color: transparent; } 1341 1342 .search-entry:hover { 1343 background-color: #2e313d; 1344 color: #fafaf9; } 1345 1346 .search-entry:focus { 1347 border-style: solid; 1348 border-color: #ec0101; 1349 color: #eeeeec; 1350 box-shadow: inset 0 1px 2px 1px rgba(0, 0, 0, 0.2); } 1351 1352 .search-entry .search-entry-icon { 1353 icon-size: 1.09em; 1354 padding: 0 4px; 1355 color: inherit; } 1356 1357/* Search */ 1358#searchResultsContent { 1359 max-width: 1024px; 1360 spacing: 8px; } 1361 1362.search-section { 1363 spacing: 8px; } 1364 .search-section .search-section-separator { 1365 height: 0; 1366 background-color: transparent; } 1367 1368.search-section-content { 1369 background-color: rgba(59, 63, 78, 0.8); 1370 border-radius: 19px; 1371 border: 1px solid rgba(255, 255, 255, 0.1); 1372 box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3); 1373 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 1374 color: white; 1375 padding: 18px; 1376 spacing: 8px; } 1377 1378.list-search-result:focus, .search-provider-icon:focus, .list-search-result:hover, .search-provider-icon:hover, .list-search-result:selected, .search-provider-icon:selected { 1379 background-color: rgba(255, 255, 255, 0.1); 1380 transition-duration: 200ms; } 1381 1382.list-search-result:active, .search-provider-icon:active, .list-search-result:checked, .search-provider-icon:checked { 1383 background-color: rgba(26, 28, 35, 0.9); } 1384 1385.grid-search-results { 1386 spacing: 36px; } 1387 1388.search-provider-icon .list-search-provider-content { 1389 spacing: 12px; } 1390 .search-provider-icon .list-search-provider-content .list-search-provider-details { 1391 width: 120px; 1392 margin-top: 0; 1393 color: #ebebeb; } 1394 1395.list-search-results { 1396 spacing: 6px; } 1397 1398.list-search-result .list-search-result-content { 1399 spacing: 6px; } 1400 1401.list-search-result .list-search-result-title { 1402 spacing: 12px; } 1403 1404.list-search-result .list-search-result-description { 1405 color: #b3b3b3; } 1406 1407/* Dash */ 1408#dash { 1409 font-size: 8pt; 1410 margin-top: 18px; 1411 padding: 0 10px; } 1412 #dash .placeholder { 1413 background-image: none; 1414 background-size: contain; 1415 height: 32px; } 1416 #dash .empty-dash-drop-target { 1417 width: 32px; 1418 height: 32px; } 1419 #dash .overview-icon { 1420 padding: 5px; } 1421 1422.dash-background { 1423 background-color: #3b3b3b; 1424 margin-bottom: 16px; 1425 padding: 10px; 1426 border-radius: 24px; } 1427 1428.dash-item-container .app-well-app, .show-apps { 1429 padding: 10px 1.5px 26px; } 1430 1431.dash-separator { 1432 width: 1px; 1433 margin: 0 6.5px 16px; 1434 background-color: rgba(255, 255, 255, 0.3); } 1435 1436.dash-label { 1437 color: white; 1438 background-color: #303340; 1439 border-radius: 99px; 1440 padding: 6px 12px; 1441 text-align: center; 1442 -y-offset: 12px; } 1443 1444.show-apps .overview-icon { 1445 color: white; } 1446 1447.show-apps:hover .overview-icon, .show-apps:selected .overview-icon { 1448 background-color: rgba(255, 255, 255, 0.1); } 1449 1450.show-apps:focus .overview-icon { 1451 background-color: rgba(255, 255, 255, 0.3); } 1452 1453.show-apps:drop .overview-icon { 1454 border: 2px solid #ec0101; 1455 background-color: rgba(236, 1, 1, 0.2); } 1456 1457.show-apps:active .overview-icon, .show-apps:checked .overview-icon { 1458 background-color: rgba(26, 28, 35, 0.5); } 1459 1460.show-apps:focus .overview-icon, .show-apps:checked .overview-icon { 1461 background-color: rgba(48, 51, 64, 0.5); 1462 color: #eeeeec; } 1463 1464/* App Grid */ 1465.icon-grid { 1466 row-spacing: 12px; 1467 column-spacing: 12px; 1468 max-row-spacing: 72px; 1469 max-column-spacing: 72px; 1470 page-padding-top: 24px; 1471 page-padding-bottom: 24px; 1472 page-padding-left: 12px; 1473 page-padding-right: 12px; } 1474 1475/* App Icons */ 1476.app-well-app .overview-icon, 1477.grid-search-result .overview-icon { 1478 color: #fff; } 1479 1480.app-well-app:hover .overview-icon, .app-well-app:selected .overview-icon, 1481.grid-search-result:hover .overview-icon, 1482.grid-search-result:selected .overview-icon { 1483 background-color: rgba(255, 255, 255, 0.1); } 1484 1485.app-well-app:focus .overview-icon, 1486.grid-search-result:focus .overview-icon { 1487 background-color: rgba(255, 255, 255, 0.3); } 1488 1489.app-well-app:drop .overview-icon, 1490.grid-search-result:drop .overview-icon { 1491 border: 2px solid #ec0101; 1492 background-color: rgba(236, 1, 1, 0.2); } 1493 1494.app-well-app:active .overview-icon, .app-well-app:checked .overview-icon, 1495.grid-search-result:active .overview-icon, 1496.grid-search-result:checked .overview-icon { 1497 background-color: rgba(26, 28, 35, 0.5); } 1498 1499.app-well-app .overview-icon.overview-icon-with-label, 1500.grid-search-result .overview-icon.overview-icon-with-label { 1501 padding: 10px 8px 5px 8px; } 1502 .app-well-app .overview-icon.overview-icon-with-label > StBoxLayout, 1503 .grid-search-result .overview-icon.overview-icon-with-label > StBoxLayout { 1504 spacing: 6px; } 1505 1506/* App Folders */ 1507.app-well-app.app-folder { 1508 background-color: #3b3b3b; 1509 border-radius: 12px; } 1510 1511.app-folder-dialog { 1512 border-radius: 24px; 1513 background-color: #3b3b3b; 1514 padding: 12px 0px 12px 0px; } 1515 .app-folder-dialog .folder-name-container { 1516 padding: 24px 36px 0; 1517 spacing: 12px; 1518 /* FIXME: this is to keep the label in sync with the entry */ } 1519 .app-folder-dialog .folder-name-container .folder-name-label, .app-folder-dialog .folder-name-container .folder-name-entry { 1520 font-size: 18pt; 1521 font-weight: 800; } 1522 .app-folder-dialog .folder-name-container .folder-name-entry { 1523 width: 300px; } 1524 .app-folder-dialog .folder-name-container .folder-name-label { 1525 padding: 5px 7px; 1526 color: white; } 1527 .app-folder-dialog .folder-name-container .edit-folder-button { 1528 padding: 0; 1529 width: 36px; 1530 height: 36px; 1531 border-radius: 18px; } 1532 .app-folder-dialog .folder-name-container .edit-folder-button > StIcon { 1533 icon-size: 16px; } 1534 .app-folder-dialog .icon-grid { 1535 row-spacing: 12px; 1536 column-spacing: 30px; 1537 page-padding-top: 0; 1538 page-padding-bottom: 0; 1539 page-padding-left: 0; 1540 page-padding-right: 0; } 1541 .app-folder-dialog .page-indicators { 1542 margin-bottom: 18px; } 1543 1544.app-folder-dialog-container { 1545 padding: 12px; 1546 width: 620px; 1547 height: 620px; } 1548 1549.app-well-app-running-dot { 1550 height: 5px; 1551 width: 5px; 1552 border-radius: 5px; 1553 background-color: white; 1554 margin-bottom: 1px; } 1555 1556.rename-folder-popup .rename-folder-popup-item { 1557 spacing: 6px; } 1558 .rename-folder-popup .rename-folder-popup-item:ltr, .rename-folder-popup .rename-folder-popup-item:rtl { 1559 padding: 0 12px; } 1560 1561.app-menu { 1562 max-width: 27.25em; } 1563 1564.page-indicator { 1565 padding: 6px 12px 0; } 1566 .page-indicator .page-indicator-icon { 1567 width: 10px; 1568 height: 10px; 1569 border-radius: 10px; 1570 background-color: white; } 1571 1572.apps-scroll-view { 1573 padding: 0; } 1574 1575.system-action-icon { 1576 background-color: rgba(0, 0, 0, 0.8); 1577 color: #fff; 1578 border-radius: 99px; 1579 icon-size: 48px; } 1580 1581.page-navigation-hint { 1582 width: 300px; } 1583 .page-navigation-hint.dnd { 1584 background: rgba(255, 255, 255, 0.1); } 1585 .page-navigation-hint.next:ltr, .page-navigation-hint.previous:rtl { 1586 background-gradient-start: rgba(255, 255, 255, 0.05); 1587 background-gradient-end: transparent; 1588 background-gradient-direction: horizontal; 1589 border-radius: 15px 0px 0px 15px; } 1590 .page-navigation-hint.previous:ltr, .page-navigation-hint.next:rtl { 1591 background-gradient-start: transparent; 1592 background-gradient-end: rgba(255, 255, 255, 0.05); 1593 background-gradient-direction: horizontal; 1594 border-radius: 0px 15px 15px 0px; } 1595 1596.page-navigation-arrow { 1597 margin: 6px; 1598 width: 24px; 1599 height: 24px; } 1600 1601/* Workspace pager */ 1602.workspace-thumbnails { 1603 visible-width: 32px; 1604 spacing: 6px; 1605 padding: 6px; } 1606 .workspace-thumbnails .workspace-thumbnail { 1607 border-radius: 3px; } 1608 .workspace-thumbnails .placeholder { 1609 background-image: url("assets/workspace-placeholder.svg"); 1610 background-size: contain; 1611 width: 18px; } 1612 1613.workspace-thumbnail-indicator { 1614 border: 3px solid #ec0101; 1615 border-radius: 3px; 1616 padding: 0px; } 1617 1618.ripple-pointer-location { 1619 width: 50px; 1620 height: 50px; 1621 border-radius: 25px; 1622 background-color: rgba(254, 136, 136, 0.3); 1623 box-shadow: 0 0 2px 2px #fe5555; } 1624 1625.pie-timer { 1626 width: 60px; 1627 height: 60px; 1628 -pie-border-width: 3px; 1629 -pie-border-color: #ec0101; 1630 -pie-background-color: rgba(255, 186, 186, 0.3); } 1631 1632.magnifier-zoom-region { 1633 border: 2px solid #ec0101; } 1634 .magnifier-zoom-region.full-screen { 1635 border-width: 0; } 1636 1637.select-area-rubberband { 1638 background-color: rgba(236, 1, 1, 0.3); 1639 border: 1px solid #ec0101; } 1640 1641.user-icon { 1642 background-size: contain; 1643 color: white; 1644 border-radius: 99px; 1645 icon-size: 4.36em; } 1646 .user-icon:hover { 1647 color: white; } 1648 .user-icon StIcon { 1649 background-color: rgba(255, 255, 255, 0.05); 1650 border-radius: 99px; 1651 padding: 12px; 1652 width: 2.725em; 1653 height: 2.725em; } 1654 .user-icon.user-avatar { 1655 border: 2px white; } 1656 1657.user-widget.vertical .user-icon { 1658 icon-size: 6.54em; } 1659 .user-widget.vertical .user-icon StIcon { 1660 padding: 20px; 1661 padding-top: 18px; 1662 padding-bottom: 22px; 1663 width: 5.995em; 1664 height: 5.995em; } 1665 1666.lightbox { 1667 background-color: black; } 1668 1669.flashspot { 1670 background-color: white; } 1671 1672.hidden { 1673 color: rgba(0, 0, 0, 0); } 1674 1675.caps-lock-warning-label { 1676 text-align: center; 1677 padding-bottom: 8px; 1678 font-size: 9pt; 1679 color: #fd7d00; } 1680 1681/* Workspace animation */ 1682.workspace-animation { 1683 background-color: #272a34; } 1684 1685/* Tiled window previews */ 1686.tile-preview { 1687 background-color: rgba(236, 1, 1, 0.5); 1688 border: 1px solid #ec0101; } 1689 1690.tile-preview-left.on-primary { 1691 border-radius: 9px 0 0 0; } 1692 1693.tile-preview-right.on-primary { 1694 border-radius: 0 9px 0 0; } 1695 1696.tile-preview-left.tile-preview-right.on-primary { 1697 border-radius: 9px 9px 0 0; } 1698 1699/* On-screen Keyboard */ 1700#keyboard { 1701 background-color: rgba(17, 18, 23, 0.9); 1702 box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1); } 1703 #keyboard .page-indicator { 1704 padding: 6px; } 1705 #keyboard .page-indicator .page-indicator-icon { 1706 width: 8px; 1707 height: 8px; } 1708 1709.key-container { 1710 padding: 4px; 1711 spacing: 4px; } 1712 1713.keyboard-key { 1714 color: #eeeeec; 1715 background-color: #292c37; 1716 border-color: #1a1c23; 1717 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); 1718 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 1719 icon-shadow: 0 1px rgba(0, 0, 0, 0.2); 1720 font-size: 15pt; 1721 min-height: 1.2em; 1722 min-width: 1.2em; 1723 border-width: 1px; 1724 border-style: solid; 1725 border-radius: 11px; } 1726 .keyboard-key:focus { 1727 color: #eeeeec; 1728 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 1729 icon-shadow: 0 1px rgba(0, 0, 0, 0.2); 1730 box-shadow: inset 0 0 0 2px rgba(236, 1, 1, 0.6); } 1731 .keyboard-key:hover, .keyboard-key:checked { 1732 color: #eeeeec; 1733 background-color: #2e313d; 1734 border-color: #1a1c23; 1735 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); 1736 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 1737 icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } 1738 .keyboard-key:active { 1739 color: #eeeeec; 1740 background-color: #1c1e25; 1741 border-color: #0b0b0e; 1742 text-shadow: none; 1743 icon-shadow: none; 1744 box-shadow: none; } 1745 .keyboard-key:grayed { 1746 background-color: #1c1e25; 1747 color: white; 1748 border-color: black; } 1749 .keyboard-key.default-key { 1750 color: #eeeeec; 1751 background-color: #3b3f4e; 1752 border-color: #2b2f3a; 1753 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); 1754 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 1755 icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } 1756 .keyboard-key.default-key:hover, .keyboard-key.default-key:checked { 1757 color: #eeeeec; 1758 background-color: #3f4454; 1759 border-color: #2b2f3a; 1760 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); 1761 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 1762 icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } 1763 .keyboard-key.default-key:active { 1764 color: #eeeeec; 1765 background-color: #2e313d; 1766 border-color: #1c1e25; 1767 text-shadow: none; 1768 icon-shadow: none; 1769 box-shadow: none; } 1770 .keyboard-key.enter-key { 1771 color: #ffffff; 1772 background-color: #fb0101; 1773 border-color: #d80101; 1774 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); 1775 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 1776 icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } 1777 .keyboard-key.enter-key:hover, .keyboard-key.enter-key:checked { 1778 color: #eeeeec; 1779 background-color: #fe1818; 1780 border-color: #e70101; 1781 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); 1782 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 1783 icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } 1784 .keyboard-key.enter-key:active { 1785 color: #eeeeec; 1786 background-color: #d30101; 1787 border-color: #aa0101; 1788 text-shadow: none; 1789 icon-shadow: none; 1790 box-shadow: none; } 1791 .keyboard-key.shift-key-uppercase { 1792 color: #ec0101; } 1793 .keyboard-key StIcon { 1794 icon-size: 1.125em; } 1795 1796.keyboard-subkeys { 1797 color: white; 1798 -arrow-border-radius: 16px; 1799 -arrow-background-color: #303340; 1800 -arrow-border-width: 1px; 1801 -arrow-border-color: #43495a; 1802 -arrow-base: 20px; 1803 -arrow-rise: 10px; 1804 -boxpointer-gap: 6px; } 1805 .keyboard-subkeys .keyboard-key { 1806 color: #eeeeec; 1807 background-color: #292c37; 1808 border-color: #1a1c23; 1809 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); 1810 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 1811 icon-shadow: 0 1px rgba(0, 0, 0, 0.2); 1812 border-radius: 8px; } 1813 .keyboard-subkeys .keyboard-key:focus { 1814 color: #eeeeec; 1815 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 1816 icon-shadow: 0 1px rgba(0, 0, 0, 0.2); 1817 box-shadow: inset 0 0 0 2px rgba(236, 1, 1, 0.6); } 1818 .keyboard-subkeys .keyboard-key:hover, .keyboard-subkeys .keyboard-key:checked { 1819 color: #eeeeec; 1820 background-color: #2e313d; 1821 border-color: #1a1c23; 1822 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); 1823 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 1824 icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } 1825 .keyboard-subkeys .keyboard-key:active { 1826 color: #eeeeec; 1827 background-color: #1c1e25; 1828 border-color: #0b0b0e; 1829 text-shadow: none; 1830 icon-shadow: none; 1831 box-shadow: none; } 1832 1833.emoji-page .keyboard-key { 1834 background-color: transparent; 1835 border: none; 1836 color: initial; } 1837 1838.emoji-panel .keyboard-key:latched { 1839 border-color: #fe0909; 1840 background-color: #ec0101; } 1841 1842.word-suggestions { 1843 font-size: 13pt; 1844 spacing: 12px; 1845 min-height: 20pt; } 1846 1847/* Looking Glass */ 1848#LookingGlassDialog { 1849 background-color: #303340; 1850 spacing: 6px; 1851 padding: 4px; 1852 border: 1px solid rgba(255, 255, 255, 0.2); 1853 border-radius: 8px; 1854 color: white; } 1855 #LookingGlassDialog > #Toolbar { 1856 border: none; 1857 border-radius: 8px; 1858 background-color: #303340; } 1859 #LookingGlassDialog .labels { 1860 spacing: 6px; } 1861 #LookingGlassDialog .notebook-tab { 1862 -natural-hpadding: 12px; 1863 -minimum-hpadding: 6px; 1864 font-weight: bold; 1865 color: #d9d9d9; 1866 transition-duration: 100ms; 1867 padding-left: .3em; 1868 padding-right: .3em; 1869 border-bottom-width: 2px; } 1870 #LookingGlassDialog .notebook-tab:hover { 1871 color: white; } 1872 #LookingGlassDialog .notebook-tab:selected { 1873 border-bottom-width: 2px; 1874 box-shadow: inset 0 -2px 0 0 #fe0909; 1875 color: white; } 1876 #LookingGlassDialog StBoxLayout#EvalBox { 1877 padding: 4px; 1878 spacing: 6px; } 1879 #LookingGlassDialog StBoxLayout#ResultsArea { 1880 spacing: 6px; } 1881 1882.lg-dialog StEntry { 1883 background-color: rgba(59, 63, 78, 0.6); 1884 color: white; 1885 border-color: rgba(255, 255, 255, 0.2); 1886 min-height: 22px; 1887 selection-background-color: #ec0101; 1888 selected-color: #ffffff; } 1889 1890.lg-dialog .shell-link { 1891 color: #fe5555; } 1892 .lg-dialog .shell-link:hover { 1893 color: #fe8888; } 1894 .lg-dialog .shell-link:active { 1895 color: #fe2222; } 1896 1897.lg-dialog .actor-link { 1898 color: #ccc; } 1899 .lg-dialog .actor-link:hover { 1900 color: white; } 1901 .lg-dialog .actor-link:active { 1902 color: #999999; } 1903 1904.lg-completions-text { 1905 font-size: .9em; 1906 font-style: italic; } 1907 1908.lg-obj-inspector-title { 1909 spacing: 6px; } 1910 1911.lg-obj-inspector-button { 1912 border: 1px solid black; 1913 padding: 4px; 1914 border-radius: 8px; } 1915 .lg-obj-inspector-button:hover { 1916 border: 1px solid #ffffff; } 1917 1918#lookingGlassExtensions { 1919 padding: 4px; } 1920 1921.lg-extensions-list { 1922 padding: 4px; 1923 spacing: 6px; } 1924 1925.lg-extension { 1926 border: 1px solid #0d0d0d; 1927 background-color: #3b3f4e; 1928 border-radius: 8px; 1929 padding: 4px; } 1930 1931.lg-extension-name { 1932 font-weight: bold; } 1933 1934.lg-extension-meta { 1935 spacing: 6px; } 1936 1937#LookingGlassPropertyInspector { 1938 background: #303340; 1939 border: 1px solid black; 1940 border-radius: 8px; 1941 padding: 6px; } 1942 1943/* Login Dialog */ 1944.login-dialog-banner-view { 1945 padding-top: 24px; 1946 max-width: 23em; } 1947 1948.login-dialog, 1949.unlock-dialog { 1950 border: none; 1951 background-color: transparent; } 1952 .login-dialog StEntry, 1953 .unlock-dialog StEntry { 1954 background-color: #20232b; 1955 color: #eeeeec; } 1956 .login-dialog .modal-dialog-button-box, 1957 .unlock-dialog .modal-dialog-button-box { 1958 spacing: 3px; } 1959 .login-dialog .modal-dialog-button, 1960 .unlock-dialog .modal-dialog-button { 1961 padding: 4px 18px; 1962 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); 1963 background-color: #20232b; 1964 border-color: #20232b; 1965 color: white; } 1966 .login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus, 1967 .unlock-dialog .modal-dialog-button:hover, 1968 .unlock-dialog .modal-dialog-button:focus { 1969 background-color: #323643; 1970 border-color: #323643; } 1971 .login-dialog .modal-dialog-button:active, 1972 .unlock-dialog .modal-dialog-button:active { 1973 box-shadow: none; 1974 background-color: #1c1e25; 1975 border-color: #1c1e25; } 1976 .login-dialog .modal-dialog-button:insensitive, 1977 .unlock-dialog .modal-dialog-button:insensitive { 1978 color: #888a8d; 1979 border-color: #0d0e11; 1980 background-color: #242731; 1981 box-shadow: none; 1982 text-shadow: none; 1983 icon-shadow: none; 1984 border-color: #1c1e25; 1985 background-color: #1c1e25; 1986 color: rgba(255, 255, 255, 0.7); } 1987 .login-dialog .modal-dialog-button:default, 1988 .unlock-dialog .modal-dialog-button:default { 1989 color: #ffffff; 1990 background-color: #fb0101; 1991 border-color: #d80101; 1992 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); 1993 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 1994 icon-shadow: 0 1px rgba(0, 0, 0, 0.2); 1995 border-color: #ec0101; } 1996 .login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus, 1997 .unlock-dialog .modal-dialog-button:default:hover, 1998 .unlock-dialog .modal-dialog-button:default:focus { 1999 color: #ffffff; 2000 background-color: #fe0909; 2001 border-color: #d80101; 2002 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); 2003 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 2004 icon-shadow: 0 1px rgba(0, 0, 0, 0.2); 2005 background-color: #fe0909; 2006 border-color: #fe0909; } 2007 .login-dialog .modal-dialog-button:default:active, 2008 .unlock-dialog .modal-dialog-button:default:active { 2009 color: #ffffff; 2010 background-color: #dd0101; 2011 border-color: #b40101; 2012 text-shadow: none; 2013 icon-shadow: none; 2014 box-shadow: none; 2015 background-color: #d30101; 2016 border-color: #d30101; } 2017 .login-dialog .modal-dialog-button:default:insensitive, 2018 .unlock-dialog .modal-dialog-button:default:insensitive { 2019 color: #888a8d; 2020 border-color: #0d0e11; 2021 background-color: #242731; 2022 box-shadow: none; 2023 text-shadow: none; 2024 icon-shadow: none; 2025 border-color: #b90101; 2026 background-color: #b90101; 2027 color: rgba(255, 255, 255, 0.7); } 2028 .login-dialog .cancel-button, 2029 .login-dialog .switch-user-button, 2030 .login-dialog .login-dialog-session-list-button, 2031 .unlock-dialog .cancel-button, 2032 .unlock-dialog .switch-user-button, 2033 .unlock-dialog .login-dialog-session-list-button { 2034 padding: 0; 2035 border-radius: 99px; 2036 width: 2.18em; 2037 height: 2.18em; 2038 border-color: #20232b; 2039 background-color: #20232b; } 2040 .login-dialog .cancel-button StIcon, 2041 .login-dialog .switch-user-button StIcon, 2042 .login-dialog .login-dialog-session-list-button StIcon, 2043 .unlock-dialog .cancel-button StIcon, 2044 .unlock-dialog .switch-user-button StIcon, 2045 .unlock-dialog .login-dialog-session-list-button StIcon { 2046 icon-size: 1.09em; } 2047 .login-dialog .caps-lock-warning-label, 2048 .login-dialog .login-dialog-message-warning, 2049 .unlock-dialog .caps-lock-warning-label, 2050 .unlock-dialog .login-dialog-message-warning { 2051 color: white; } 2052 2053.login-dialog-logo-bin { 2054 padding: 24px 0px; } 2055 2056.login-dialog-banner { 2057 color: #e6e6e6; } 2058 2059.login-dialog-button-box { 2060 width: 23em; 2061 spacing: 5px; } 2062 2063.login-dialog-message { 2064 text-align: center; } 2065 2066.login-dialog-user-selection-box { 2067 padding: 100px 0px; } 2068 2069.login-dialog-not-listed-label { 2070 padding-left: 2px; } 2071 .login-dialog-not-listed-button:focus .login-dialog-not-listed-label, .login-dialog-not-listed-button:hover .login-dialog-not-listed-label { 2072 color: white; } 2073 2074.login-dialog-not-listed-label { 2075 font-size: 9pt; 2076 font-weight: bold; 2077 color: #b3b3b3; 2078 padding-top: 1em; } 2079 2080.login-dialog-user-list-view { 2081 -st-vfade-offset: 1em; } 2082 2083.login-dialog-user-list { 2084 spacing: 12px; 2085 width: 23em; } 2086 .login-dialog-user-list:expanded .login-dialog-user-list-item:selected { 2087 background-color: #ec0101; 2088 color: #ffffff; } 2089 .login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in { 2090 border-right: 2px solid #ec0101; } 2091 2092.login-dialog-user-list-item { 2093 border-radius: 12px; 2094 padding: 6px; 2095 color: #b3b3b3; } 2096 .login-dialog-user-list-item:ltr .user-widget { 2097 padding-right: 1em; } 2098 .login-dialog-user-list-item:rtl .user-widget { 2099 padding-left: 1em; } 2100 .login-dialog-user-list-item .login-dialog-timed-login-indicator { 2101 height: 2px; 2102 margin-top: 6px; 2103 background-color: white; } 2104 .login-dialog-user-list-item:focus .login-dialog-timed-login-indicator { 2105 background-color: #ffffff; } 2106 2107.user-widget-label { 2108 color: white; } 2109 2110.user-widget.horizontal .user-widget-label { 2111 font-size: 12pt; 2112 font-weight: bold; 2113 padding-left: 15px; } 2114 .user-widget.horizontal .user-widget-label:ltr { 2115 padding-left: 14px; 2116 text-align: left; } 2117 .user-widget.horizontal .user-widget-label:rtl { 2118 padding-right: 14px; 2119 text-align: right; } 2120 2121.user-widget.vertical .user-widget-label { 2122 font-size: 15pt; 2123 text-align: center; 2124 font-weight: normal; 2125 padding-top: 16px; } 2126 2127.login-dialog-timed-login-indicator { 2128 height: 2px; 2129 background-color: #8e8e80; } 2130 2131.login-dialog-prompt-layout { 2132 padding-top: 24px; 2133 padding-bottom: 12px; 2134 spacing: 12px; 2135 width: 23em; } 2136 2137.login-dialog-prompt-entry { 2138 height: 1.5em; } 2139 2140.login-dialog-prompt-label { 2141 color: #cccccc; 2142 font-size: 11pt; 2143 padding-top: 1em; } 2144 2145/* Screen Shield */ 2146.unlock-dialog-clock { 2147 color: white; 2148 font-weight: 300; 2149 text-align: center; 2150 spacing: 24px; 2151 padding-bottom: 2.5em; } 2152 2153.unlock-dialog-clock-time { 2154 font-size: 64pt; 2155 padding-top: 42px; 2156 font-feature-settings: "tnum"; } 2157 2158.unlock-dialog-clock-date { 2159 font-size: 16pt; 2160 font-weight: normal; } 2161 2162.unlock-dialog-clock-hint { 2163 font-weight: normal; 2164 padding-top: 48px; } 2165 2166.unlock-dialog-notifications-container { 2167 margin: 12px 0; 2168 spacing: 6px; 2169 width: 23em; 2170 background-color: transparent; } 2171 .unlock-dialog-notifications-container .summary-notification-stack-scrollview { 2172 padding-top: 0; 2173 padding-bottom: 0; } 2174 .unlock-dialog-notifications-container .notification, 2175 .unlock-dialog-notifications-container .unlock-dialog-notification-source { 2176 padding: 12px 6px; 2177 border: none; 2178 background-color: rgba(48, 51, 64, 0.3); 2179 color: white; 2180 border-radius: 16px; } 2181 .unlock-dialog-notifications-container .notification.critical, 2182 .unlock-dialog-notifications-container .unlock-dialog-notification-source.critical { 2183 background-color: rgba(48, 51, 64, 0.9); } 2184 2185.unlock-dialog-notification-label { 2186 padding: 0px 0px 0px 12px; } 2187 2188.unlock-dialog-notification-count-text { 2189 weight: bold; 2190 padding: 0 6px; 2191 color: #303340; 2192 background-color: rgba(255, 255, 255, 0.3); 2193 border-radius: 99px; 2194 margin-right: 12px; } 2195 2196.screen-shield-background { 2197 background: black; 2198 box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6); } 2199 2200#lockDialogGroup { 2201 background-color: #272a34; } 2202 2203#unlockDialogNotifications StButton#vhandle, #unlockDialogNotifications StButton#hhandle { 2204 background-color: rgba(35, 37, 46, 0.3); } 2205 #unlockDialogNotifications StButton#vhandle:hover, #unlockDialogNotifications StButton#vhandle:focus, #unlockDialogNotifications StButton#hhandle:hover, #unlockDialogNotifications StButton#hhandle:focus { 2206 background-color: rgba(35, 37, 46, 0.5); } 2207 #unlockDialogNotifications StButton#vhandle:active, #unlockDialogNotifications StButton#hhandle:active { 2208 background-color: rgba(236, 1, 1, 0.5); } 2209 2210/* OSD */ 2211.osd-window, .resize-popup, .switcher-list, .workspace-switcher-container { 2212 font-weight: bold; 2213 background-color: #23252e; 2214 color: #eeeeec; 2215 border: 2px solid #0d0e11; 2216 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } 2217 .osd-window StIcon, .resize-popup StIcon, .switcher-list StIcon, .workspace-switcher-container StIcon { 2218 color: #eeeeec; 2219 icon-shadow: 0 0 6px rgba(0, 0, 0, 0.4); } 2220 2221.osd-window .level { 2222 -barlevel-background-color: rgba(238, 238, 236, 0.1); 2223 -barlevel-active-background-color: #eeeeec; } 2224 2225/* Slider */ 2226.slider { 2227 height: 1.1em; 2228 -barlevel-height: .35em; 2229 -barlevel-background-color: #0d0e11; 2230 -barlevel-border-color: #ec0101; 2231 -barlevel-active-background-color: #ec0101; 2232 -barlevel-overdrive-color: #a61414; 2233 -barlevel-overdrive-separator-width: 0.1em; 2234 -barlevel-border-width: 0; 2235 -slider-handle-radius: 0; } 2236 2237/* Check Boxes */ 2238.check-box StBin { 2239 background-image: url("assets/checkbox-off-dark.svg"); } 2240 2241.check-box:focus StBin { 2242 background-image: url("assets/checkbox-off-focused-dark.svg"); } 2243 2244.check-box:checked StBin { 2245 background-image: url("assets/checkbox-dark.svg"); } 2246 2247.check-box:focus:checked StBin { 2248 background-image: url("assets/checkbox-focused-dark.svg"); } 2249 2250/* Switches */ 2251.toggle-switch { 2252 background-image: url("assets/toggle-off-dark.svg"); } 2253 .toggle-switch:checked { 2254 background-image: url("assets/toggle-on-dark.svg"); } 2255 2256/* Popovers/Menus */ 2257.popup-menu-boxpointer, 2258.candidate-popup-boxpointer { 2259 -arrow-border-radius: 12px; 2260 -arrow-background-color: #272a34; 2261 -arrow-border-width: 12px; 2262 -arrow-border-color: transparent; 2263 -arrow-base: 0; 2264 -arrow-rise: 0; 2265 margin: 0.2em; 2266 background-color: rgba(35, 37, 46, 0.4); 2267 box-shadow: 0 2px 4px -6px rgba(0, 0, 0, 0.2); 2268 border-radius: 16px; } 2269 2270.popup-menu-item { 2271 border-radius: 8px; } 2272 .popup-menu-item:checked { 2273 background-color: transparent; } 2274 .popup-menu-item.selected, .popup-menu-item:active { 2275 background-color: rgba(127, 127, 127, 0.2); 2276 color: #eeeeec; } 2277 2278.popup-sub-menu { 2279 border: 1px solid #0d0e11; 2280 background-color: #23252e; 2281 border-radius: 8px; } 2282 2283/* App Switcher */ 2284.switcher-list .item-box:outlined { 2285 padding: 6px; 2286 border: 3px solid #ec0101; } 2287 2288.switcher-list .item-box:selected { 2289 background-color: #ec0101; 2290 color: #ffffff; 2291 text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); } 2292 2293/* Workspace Switcher */ 2294.ws-switcher-box { 2295 border: none; } 2296 2297.workspace-switcher-container { 2298 padding: 7px; } 2299 2300.window-caption { 2301 color: black; 2302 background-color: white; 2303 box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4); } 2304 2305.window-close { 2306 background-image: url("assets/close-window.svg"); 2307 background-size: 32px; 2308 background-color: transparent; 2309 box-shadow: none; 2310 color: transparent; 2311 height: 32px; 2312 width: 32px; 2313 transition-duration: .2s; } 2314 .window-close:hover { 2315 background-image: url("assets/close-window-hover.svg"); 2316 background-color: transparent; } 2317 .window-close:active { 2318 background-image: url("assets/close-window-active.svg"); 2319 background-color: transparent; 2320 color: transparent; 2321 transition-duration: 0s; } 2322 2323/* Tiled window previews */ 2324.tile-preview-left.on-primary, 2325.tile-preview-right.on-primary, 2326.tile-preview-left.tile-preview-right.on-primary { 2327 border-radius: 0; } 2328 2329/* TOP BAR */ 2330#panelBox { 2331 padding: 0; 2332 background: transparent; } 2333 2334#panel { 2335 padding: 0.1em 0; 2336 font-size: .9em; 2337 height: 2em; 2338 border-radius: 0; 2339 background: rgba(0, 0, 0, 0.2); 2340 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); } 2341 #panel .popup-menu-arrow { 2342 width: 0; } 2343 #panel StIcon { 2344 icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); } 2345 #panel.unlock-screen, #panel.login-screen, #panel.lock-screen, #panel:overview { 2346 background-color: transparent; } 2347 #panel.unlock-screen .panel-button, #panel.unlock-screen .panel-button:hover, #panel.unlock-screen .panel-button:active, #panel.unlock-screen .panel-button:focus, #panel.unlock-screen .panel-button:overview, #panel.unlock-screen .panel-button:checked, #panel.login-screen .panel-button, #panel.login-screen .panel-button:hover, #panel.login-screen .panel-button:active, #panel.login-screen .panel-button:focus, #panel.login-screen .panel-button:overview, #panel.login-screen .panel-button:checked, #panel.lock-screen .panel-button, #panel.lock-screen .panel-button:hover, #panel.lock-screen .panel-button:active, #panel.lock-screen .panel-button:focus, #panel.lock-screen .panel-button:overview, #panel.lock-screen .panel-button:checked, #panel:overview .panel-button, #panel:overview .panel-button:hover, #panel:overview .panel-button:active, #panel:overview .panel-button:focus, #panel:overview .panel-button:overview, #panel:overview .panel-button:checked { 2348 color: white; } 2349 #panel .panel-corner { 2350 -panel-corner-radius: 0; } 2351 #panel .panel-button { 2352 color: white; } 2353 #panel .panel-button:active, #panel .panel-button:focus, #panel .panel-button:overview, #panel .panel-button:checked { 2354 color: white; 2355 box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.2); } 2356 #panel .panel-button.clock-display:active, #panel .panel-button.clock-display:overview, #panel .panel-button.clock-display:focus, #panel .panel-button.clock-display:checked { 2357 box-shadow: none; } 2358 #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 { 2359 box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.2); } 2360 #panel #panelActivities.panel-button { 2361 margin-left: .4em; } 2362 #panel #panelActivities.panel-button StLabel { 2363 background-image: url("assets/view-grid-symbolic.svg"); 2364 background-size: contain; 2365 width: 1.5em; 2366 height: 1.5em; 2367 color: transparent; } 2368 2369/* Date/Time Menu */ 2370.events-section-title { 2371 padding: 1em; } 2372 2373.datemenu-today-button .date-label { 2374 font-size: 1.5em; 2375 font-weight: 300; } 2376 2377.calendar .calendar-day-base:active, .calendar .calendar-day-base:selected { 2378 color: #eeeeec; 2379 background-color: #383d4b; } 2380 2381.calendar .calendar-today:active, .calendar .calendar-today:selected { 2382 background: #ec0101; 2383 color: #ffffff; } 2384 2385/* Search */ 2386.search-entry { 2387 color: black; 2388 text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9); 2389 font-weight: bold; 2390 background-color: rgba(255, 255, 255, 0.2); 2391 border-radius: 999px; 2392 font-size: 1.1em; 2393 transition-duration: 200ms; } 2394 .search-entry StLabel.hint-text { 2395 color: white; } 2396 .search-entry, .search-entry:focus, .search-entry:hover { 2397 width: 21em; 2398 padding: .6em .8em; 2399 border: none; } 2400 .search-entry:focus, .search-entry:hover { 2401 background-color: white; 2402 color: black; 2403 font-weight: normal; 2404 box-shadow: none; 2405 text-shadow: none; } 2406 .search-entry:focus StLabel.hint-text, .search-entry:hover StLabel.hint-text { 2407 color: black; } 2408 .search-entry:focus .search-entry-icon, .search-entry:hover .search-entry-icon { 2409 color: black; 2410 icon-shadow: none; } 2411 .search-entry .search-entry-icon { 2412 color: white; 2413 icon-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9); } 2414 2415.search-section-content { 2416 background-color: rgba(255, 255, 255, 0.2); 2417 box-shadow: none; 2418 border: none; } 2419 2420.search-provider-icon .list-search-provider-content .list-search-provider-details { 2421 font-weight: bold; } 2422 2423/* DASHBOARD */ 2424#dash { 2425 color: white; 2426 background-color: transparent; 2427 border: none; 2428 border-color: transparent; } 2429 #dash .overview-icon StIcon { 2430 color: white; 2431 icon-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); } 2432 2433.dash-background { 2434 background: rgba(255, 255, 255, 0.2); } 2435 2436.dash-separator { 2437 background: rgba(255, 255, 255, 0.2); } 2438 2439.show-apps:focus .overview-icon, .show-apps:checked .overview-icon { 2440 background-color: rgba(255, 255, 255, 0.2); 2441 color: black; } 2442 2443/* App Folders */ 2444.app-well-app.app-folder, .app-well-app.app-folder .overview-icon.overview-icon-with-label { 2445 background-color: rgba(255, 255, 255, 0.2); } 2446 2447.app-well-app.app-folder:checked { 2448 background: black; } 2449 2450.app-folder-dialog { 2451 background: black; 2452 box-shadow: 0 0 20px #030303; } 2453 .app-folder-dialog .folder-name-container .edit-folder-button, .app-folder-dialog .folder-name-container .edit-folder-button:hover, .app-folder-dialog .folder-name-container .edit-folder-button:active { 2454 background: white; 2455 color: black; } 2456 2457.app-folder-dialog-container { 2458 width: 720px; } 2459 2460/* Screen Shield */ 2461#lockDialogGroup { 2462 background: url("assets/login-background"); 2463 background-size: cover; } 2464 2465/* Login Dialog */ 2466.login-dialog, 2467.unlock-dialog { 2468 font-size: 11pt; } 2469 .login-dialog StEntry, 2470 .unlock-dialog StEntry { 2471 background: rgba(56, 60, 74, 0.35); 2472 color: white; 2473 border: none; 2474 box-shadow: none; } 2475 .login-dialog StEntry StLabel.hint-text, 2476 .unlock-dialog StEntry StLabel.hint-text { 2477 margin-left: 2px; 2478 color: rgba(255, 255, 255, 0.7); } 2479 .login-dialog .cancel-button, 2480 .login-dialog .switch-user-button, 2481 .login-dialog .login-dialog-session-list-button, 2482 .unlock-dialog .cancel-button, 2483 .unlock-dialog .switch-user-button, 2484 .unlock-dialog .login-dialog-session-list-button { 2485 border-color: transparent; 2486 background-color: rgba(56, 60, 74, 0.35); 2487 color: white; } 2488 .login-dialog .cancel-button StIcon, 2489 .login-dialog .switch-user-button StIcon, 2490 .login-dialog .login-dialog-session-list-button StIcon, 2491 .unlock-dialog .cancel-button StIcon, 2492 .unlock-dialog .switch-user-button StIcon, 2493 .unlock-dialog .login-dialog-session-list-button StIcon { 2494 icon-size: 1.09em; } 2495
