API tools faq
paste
Guest User

Untitled

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