Dotfiles for my tiling window manager + terminal workflow.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1989 lines
49 KiB

  1. /*****************
  2. * Drawing mixins *
  3. *****************/
  4. /* GLOBALS */
  5. stage {
  6. font-family: Roboto, Ubuntu, Cantarell, Sans-Serif;
  7. font-size: 10pt;
  8. color: #98abb2; }
  9. /* WIDGETS */
  10. /* Buttons */
  11. .button {
  12. color: #98abb2;
  13. background-color: #0e1018;
  14. box-shadow: none;
  15. border: 1px solid #12151e;
  16. text-shadow: 0 1px black;
  17. icon-shadow: 0 1px black;
  18. border: 1px solid #12151e;
  19. border-radius: 4px;
  20. border-width: 0;
  21. padding: 4px 32px; }
  22. .button:focus {
  23. color: #c50ed2;
  24. text-shadow: 0 1px black;
  25. icon-shadow: 0 1px black;
  26. box-shadow: none;
  27. border: 1px solid #12151e; }
  28. .button:insensitive {
  29. color: #58636d;
  30. background-color: rgba(38, 43, 55, 0.66);
  31. box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 2px 3px rgba(0, 0, 0, 0.22);
  32. border: none;
  33. text-shadow: none;
  34. icon-shadow: none; }
  35. .button:active {
  36. color: #c50ed2;
  37. background-color: rgba(24, 27, 40, 0.95);
  38. border: 1px solid #12151e;
  39. text-shadow: none;
  40. icon-shadow: none; }
  41. .button:hover {
  42. color: #c50ed2;
  43. background-color: #12151e;
  44. border: 1px solid #12151e;
  45. text-shadow: 0 1px black;
  46. icon-shadow: 0 1px black; }
  47. .modal-dialog-linked-button {
  48. padding: 10px;
  49. border: 1px solid #12151e;
  50. color: #98abb2;
  51. background: #0e1018;
  52. text-shadow: none;
  53. icon-shadow: none;
  54. box-shadow: none; }
  55. .modal-dialog-linked-button:insensitive {
  56. color: #58636d;
  57. background-color: rgba(38, 43, 55, 0.66);
  58. box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 2px 3px rgba(0, 0, 0, 0.22);
  59. border: none;
  60. text-shadow: none;
  61. icon-shadow: none; }
  62. .modal-dialog-linked-button:active {
  63. color: #c50ed2;
  64. background-color: rgba(24, 27, 40, 0.95);
  65. border: 1px solid #12151e;
  66. text-shadow: none;
  67. icon-shadow: none; }
  68. .modal-dialog-linked-button:focus {
  69. color: #c50ed2;
  70. text-shadow: 0 1px black;
  71. icon-shadow: 0 1px black;
  72. box-shadow: none;
  73. border: 1px solid #12151e; }
  74. .modal-dialog-linked-button:focus:hover {
  75. color: #c50ed2;
  76. text-shadow: 0 1px black;
  77. icon-shadow: 0 1px black;
  78. box-shadow: none;
  79. border: 1px solid #12151e; }
  80. .modal-dialog-linked-button:hover {
  81. color: #c50ed2;
  82. background-color: #12151e;
  83. border: 1px solid #12151e;
  84. text-shadow: 0 1px black;
  85. icon-shadow: 0 1px black; }
  86. .modal-dialog-linked-button:first-child {
  87. border-radius: 0px 0px 0px 2px; }
  88. .modal-dialog-linked-button:last-child {
  89. border-radius: 0px 0px 2px 0px; }
  90. .modal-dialog-linked-button:first-child:last-child {
  91. border-radius: 0px 0px 2px 2px; }
  92. /* Entries */
  93. StEntry {
  94. background-color: #252a3e;
  95. border-color: #12151e;
  96. box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.22);
  97. border-radius: 2px;
  98. padding: 4px;
  99. border-width: 0;
  100. color: #98abb2;
  101. selection-background-color: #c50ed2;
  102. selected-color: #f7f7f7; }
  103. StEntry:focus {
  104. box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.22); }
  105. StEntry:insensitive {
  106. color: #58636d;
  107. box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.22); }
  108. StEntry StIcon.capslock-warning {
  109. icon-size: 16px;
  110. warning-color: #f47d49;
  111. padding: 0 4px; }
  112. /* Scrollbars */
  113. StScrollView.vfade {
  114. -st-vfade-offset: 68px; }
  115. StScrollView.hfade {
  116. -st-hfade-offset: 68px; }
  117. StScrollBar {
  118. padding: 0; }
  119. StScrollView StScrollBar {
  120. min-width: 14px;
  121. min-height: 14px; }
  122. StScrollBar StBin#trough {
  123. border-radius: 0;
  124. background-color: transparent; }
  125. StScrollBar StButton#vhandle, StScrollBar StButton#hhandle {
  126. border-radius: 8px;
  127. background-color: #323844;
  128. margin: 3px; }
  129. StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover {
  130. background-color: #7e8e96; }
  131. StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
  132. background-color: #c50ed2; }
  133. /* Slider */
  134. .slider {
  135. height: 1em;
  136. color: #b7b7b7;
  137. border-color: black;
  138. -slider-height: 0.1em;
  139. -slider-background-color: #252a3e;
  140. -slider-border-color: black;
  141. -slider-active-background-color: #FED766;
  142. -slider-active-border-color: #84ff39;
  143. -slider-border-width: 0;
  144. -slider-handle-radius: 6px;
  145. -barlevel-height: 0.1em;
  146. -barlevel-background-color: #252a3e;
  147. -barlevel-border-color: black;
  148. -barlevel-active-background-color: #FED766;
  149. -barlevel-active-border-color: #84ff39;
  150. -barlevel-border-width: 0;
  151. -barlevel-handle-radius: 6px;
  152. -barlevel-overdrive-color: #FED766;
  153. -barlevel-overdrive-border-color: transparent;
  154. -barlevel-overdrive-separator-width: 0px; }
  155. /* Check Boxes */
  156. .check-box StBoxLayout {
  157. spacing: .8em; }
  158. .check-box StBin {
  159. width: 24px;
  160. height: 22px;
  161. background-image: url("assets/checkbox-off.svg"); }
  162. .check-box:focus StBin {
  163. background-image: url("assets/checkbox-off-focused.svg"); }
  164. .check-box:checked StBin {
  165. background-image: url("assets/checkbox.svg"); }
  166. .check-box:focus:checked StBin {
  167. background-image: url("assets/checkbox-focused.svg"); }
  168. /* Switches */
  169. .toggle-switch {
  170. width: 65px;
  171. height: 22px;
  172. background-size: contain; }
  173. .toggle-switch-us {
  174. background-image: url("assets/toggle-off.svg"); }
  175. .toggle-switch-us:checked {
  176. background-image: url("assets/toggle-on.svg"); }
  177. .toggle-switch-intl {
  178. background-image: url("assets/toggle-off.svg"); }
  179. .toggle-switch-intl:checked {
  180. background-image: url("assets/toggle-on.svg"); }
  181. /* links */
  182. .shell-link {
  183. color: #A0C1B9; }
  184. .shell-link:hover {
  185. color: #bfd5d0; }
  186. /* Modal Dialogs */
  187. .headline {
  188. font-size: 110%; }
  189. .lightbox {
  190. background-color: black; }
  191. .flashspot {
  192. background-color: white; }
  193. .modal-dialog {
  194. border: none;
  195. border-radius: 2px;
  196. color: #98abb2;
  197. background-color: rgba(14, 16, 24, 0.95);
  198. box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.2); }
  199. .modal-dialog .modal-dialog-content-box {
  200. padding: 24px; }
  201. .modal-dialog .run-dialog-entry {
  202. width: 20em;
  203. margin-bottom: 6px; }
  204. .modal-dialog .run-dialog-error-box {
  205. color: #e6006e;
  206. padding-top: 16px;
  207. spacing: 6px; }
  208. .modal-dialog .run-dialog-button-box {
  209. padding-top: 1em; }
  210. .modal-dialog .run-dialog-label {
  211. font-size: 11pt;
  212. font-weight: bold;
  213. color: #7b939c;
  214. padding-bottom: .4em; }
  215. .mount-dialog-subject,
  216. .end-session-dialog-subject {
  217. font-size: 13pt; }
  218. /* Message Dialog */
  219. .message-dialog-main-layout {
  220. padding: 12px 20px 0;
  221. spacing: 12px; }
  222. .message-dialog-content {
  223. max-width: 28em;
  224. spacing: 20px; }
  225. .message-dialog-icon {
  226. min-width: 48px;
  227. icon-size: 48px; }
  228. .message-dialog-title {
  229. font-weight: bold; }
  230. .message-dialog-subtitle {
  231. color: #364348;
  232. font-weight: bold; }
  233. /* End Session Dialog */
  234. .end-session-dialog {
  235. spacing: 42px;
  236. border: none; }
  237. .end-session-dialog .modal-dialog-linked-button:last-child {
  238. background-gradient-start: #c50ed2;
  239. background-gradient-end: #8500f7;
  240. background-gradient-direction: horizontal;
  241. color: #fff; }
  242. .end-session-dialog .modal-dialog-linked-button:last-child:hover, .end-session-dialog .modal-dialog-linked-button:last-child:focus {
  243. background: #d60066;
  244. color: #fff; }
  245. .end-session-dialog-list {
  246. padding-top: 20px; }
  247. .end-session-dialog-layout {
  248. padding-left: 17px; }
  249. .end-session-dialog-layout:rtl {
  250. padding-right: 17px; }
  251. .end-session-dialog-description {
  252. width: 28em;
  253. padding-bottom: 10px; }
  254. .end-session-dialog-description:rtl {
  255. text-align: right; }
  256. .end-session-dialog-warning {
  257. width: 28em;
  258. color: #f47d49;
  259. padding-top: 6px; }
  260. .end-session-dialog-warning:rtl {
  261. text-align: right; }
  262. .end-session-dialog-logout-icon {
  263. border-radius: 3px;
  264. width: 48px;
  265. height: 48px;
  266. background-size: contain; }
  267. .end-session-dialog-shutdown-icon {
  268. color: #e6006e;
  269. width: 48px;
  270. height: 48px; }
  271. .end-session-dialog-inhibitor-layout {
  272. spacing: 16px;
  273. max-height: 200px;
  274. padding-right: 65px;
  275. padding-left: 65px; }
  276. .end-session-dialog-session-list,
  277. .end-session-dialog-app-list {
  278. spacing: 1em; }
  279. .end-session-dialog-list-header {
  280. font-weight: bold; }
  281. .end-session-dialog-list-header:rtl {
  282. text-align: right; }
  283. .end-session-dialog-app-list-item,
  284. .end-session-dialog-session-list-item {
  285. spacing: 1em; }
  286. .end-session-dialog-app-list-item-name,
  287. .end-session-dialog-session-list-item-name {
  288. font-weight: bold; }
  289. .end-session-dialog-app-list-item-description {
  290. color: #899fa7;
  291. font-size: 10pt; }
  292. /* ShellMountOperation Dialogs */
  293. .shell-mount-operation-icon {
  294. icon-size: 48px; }
  295. .mount-dialog {
  296. spacing: 24px; }
  297. .mount-dialog .message-dialog-title {
  298. padding-top: 10px;
  299. padding-left: 17px;
  300. padding-bottom: 6px;
  301. max-width: 34em; }
  302. .mount-dialog .message-dialog-title:rtl {
  303. padding-left: 0px;
  304. padding-right: 17px; }
  305. .mount-dialog .message-dialog-body {
  306. padding-left: 17px;
  307. width: 28em; }
  308. .mount-dialog .message-dialog-body:rtl {
  309. padding-left: 0px;
  310. padding-right: 17px; }
  311. .mount-dialog-app-list {
  312. max-height: 200px;
  313. padding-top: 24px;
  314. padding-left: 49px;
  315. padding-right: 32px; }
  316. .mount-dialog-app-list:rtl {
  317. padding-right: 49px;
  318. padding-left: 32px; }
  319. .mount-dialog-app-list-item {
  320. color: #7b939c; }
  321. .mount-dialog-app-list-item:hover {
  322. color: #98abb2; }
  323. .mount-dialog-app-list-item:ltr {
  324. padding-right: 1em; }
  325. .mount-dialog-app-list-item:rtl {
  326. padding-left: 1em; }
  327. .mount-dialog-app-list-item-icon:ltr {
  328. padding-right: 17px; }
  329. .mount-dialog-app-list-item-icon:rtl {
  330. padding-left: 17px; }
  331. .mount-dialog-app-list-item-name {
  332. font-size: 10pt; }
  333. /* Password or Authentication Dialog */
  334. .prompt-dialog {
  335. width: 34em;
  336. border: none;
  337. border-radius: 2px; }
  338. .prompt-dialog .message-dialog-main-layout {
  339. spacing: 24px;
  340. padding: 10px; }
  341. .prompt-dialog .message-dialog-content {
  342. spacing: 16px; }
  343. .prompt-dialog .message-dialog-title {
  344. color: #576c74; }
  345. .prompt-dialog-description:rtl {
  346. text-align: right; }
  347. .prompt-dialog-password-box {
  348. spacing: 1em;
  349. padding-bottom: 1em; }
  350. .prompt-dialog-error-label {
  351. font-size: 10pt;
  352. color: #e6006e;
  353. padding-bottom: 8px; }
  354. .prompt-dialog-info-label {
  355. font-size: 10pt;
  356. padding-bottom: 8px; }
  357. .hidden {
  358. color: rgba(0, 0, 0, 0); }
  359. .prompt-dialog-null-label {
  360. font-size: 10pt;
  361. padding-bottom: 8px; }
  362. /* Polkit Dialog */
  363. .polkit-dialog-user-layout {
  364. padding-left: 10px;
  365. spacing: 10px; }
  366. .polkit-dialog-user-layout:rtl {
  367. padding-left: 0px;
  368. padding-right: 10px; }
  369. .polkit-dialog-user-root-label {
  370. color: #f47d49; }
  371. .polkit-dialog-user-icon {
  372. border-radius: 3px;
  373. background-size: contain;
  374. width: 48px;
  375. height: 48px; }
  376. /* Audio selection dialog */
  377. .audio-device-selection-dialog {
  378. spacing: 30px; }
  379. .audio-selection-content {
  380. spacing: 20px;
  381. padding: 24px; }
  382. .audio-selection-title {
  383. font-weight: bold;
  384. text-align: center; }
  385. .audio-selection-box {
  386. spacing: 20px; }
  387. .audio-selection-device {
  388. border: 1px solid #98abb2;
  389. border-radius: 12px; }
  390. .audio-selection-device:active, .audio-selection-device:hover, .audio-selection-device:focus {
  391. background-color: #c50ed2; }
  392. .audio-selection-device-box {
  393. padding: 20px;
  394. spacing: 20px; }
  395. .audio-selection-device-icon {
  396. icon-size: 64px; }
  397. /* Access Dialog */
  398. .access-dialog {
  399. spacing: 30px; }
  400. /* Geolocation Dialog */
  401. .geolocation-dialog {
  402. spacing: 30px; }
  403. /* Extension Dialog */
  404. .extension-dialog .message-dialog-main-layout {
  405. spacing: 24px;
  406. padding: 10px; }
  407. .extension-dialog .message-dialog-title {
  408. color: #576c74; }
  409. /* Inhibit-Shortcuts Dialog */
  410. .inhibit-shortcuts-dialog {
  411. spacing: 30px; }
  412. /* Network Agent Dialog */
  413. .network-dialog-secret-table {
  414. spacing-rows: 15px;
  415. spacing-columns: 1em; }
  416. .keyring-dialog-control-table {
  417. spacing-rows: 15px;
  418. spacing-columns: 1em; }
  419. /* Popovers/Menus */
  420. .popup-menu {
  421. min-width: 15em;
  422. background-color: transparent; }
  423. .popup-menu .popup-sub-menu {
  424. background-color: rgba(0, 0, 0, 0.2);
  425. box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.2); }
  426. .popup-menu .popup-menu-content {
  427. padding: 1em 0em; }
  428. .popup-menu .popup-menu-item {
  429. spacing: 12px; }
  430. .popup-menu .popup-menu-item:ltr {
  431. padding: .4em 1.75em .4em 0em; }
  432. .popup-menu .popup-menu-item:rtl {
  433. padding: .4em 0em .4em 1.75em; }
  434. .popup-menu .popup-menu-item:checked {
  435. background-gradient-start: #c50ed2;
  436. background-gradient-end: #8500f7;
  437. background-gradient-direction: horizontal;
  438. color: #f7f7f7;
  439. box-shadow: inset 0 1px 0px #1c1f2e;
  440. font-weight: bold; }
  441. .popup-menu .popup-menu-item:checked:hover {
  442. background-color: rgba(197, 14, 210, 0.9);
  443. color: #f7f7f7; }
  444. .popup-menu .popup-menu-item.selected {
  445. background-color: rgba(152, 171, 178, 0.1);
  446. color: #98abb2; }
  447. .popup-menu .popup-menu-item:active {
  448. background-color: #c50ed2;
  449. color: #f7f7f7; }
  450. .popup-menu .popup-menu-item:insensitive {
  451. color: rgba(152, 171, 178, 0.5); }
  452. .popup-menu .popup-inactive-menu-item {
  453. color: #98abb2; }
  454. .popup-menu .popup-inactive-menu-item:insensitive {
  455. color: rgba(152, 171, 178, 0.5); }
  456. .popup-menu.panel-menu {
  457. -boxpointer-gap: 4px;
  458. margin-bottom: 1.75em; }
  459. .popup-menu-ornament {
  460. text-align: right;
  461. width: 1.2em; }
  462. .popup-menu-boxpointer,
  463. .candidate-popup-boxpointer {
  464. -arrow-border-radius: 7px;
  465. -arrow-background-color: #181b28;
  466. -arrow-border-width: 1px;
  467. -arrow-border-color: #12151e;
  468. -arrow-base: 24px;
  469. -arrow-rise: 11px;
  470. -arrow-box-shadow: 0 1px 3px black; }
  471. .popup-separator-menu-item {
  472. height: 1px;
  473. margin: 6px 64px;
  474. background-color: transparent;
  475. border-color: transparent;
  476. border-bottom-width: 1px;
  477. border-bottom-style: solid; }
  478. .background-menu {
  479. -boxpointer-gap: 4px;
  480. -arrow-rise: 0px; }
  481. /* fallback menu
  482. - odd thing for styling App menu when apparently not running under shell. Light Adwaita styled
  483. app menu inside the main app window itself rather than the top bar
  484. */
  485. /* OSD */
  486. .osd-window {
  487. text-align: center;
  488. font-weight: bold;
  489. spacing: 1em;
  490. margin: 32px;
  491. min-width: 64px;
  492. min-height: 64px; }
  493. .osd-window .osd-monitor-label {
  494. font-size: 3em; }
  495. .osd-window .level {
  496. height: 0.4em;
  497. border-radius: 0.3em;
  498. color: #98abb2;
  499. border: 1px solid #12151e;
  500. -barlevel-height: 0.4em;
  501. -barlevel-background-color: rgba(0, 0, 0, 0.5);
  502. -barlevel-active-background-color: #c50ed2;
  503. -barlevel-overdrive-color: #ff007a;
  504. -barlevel-overdrive-separator-width: 0.2em; }
  505. .osd-window .level-bar {
  506. background-color: #c50ed2;
  507. border-radius: 0.3em; }
  508. /* Pad OSD */
  509. .pad-osd-window {
  510. padding: 32px;
  511. background-color: rgba(0, 0, 0, 0.8); }
  512. .pad-osd-window .pad-osd-title-box {
  513. spacing: 12px; }
  514. .pad-osd-window .pad-osd-title-menu-box {
  515. spacing: 6px; }
  516. .combo-box-label {
  517. width: 15em; }
  518. /* App Switcher */
  519. .switcher-popup {
  520. padding: 8px;
  521. spacing: 16px; }
  522. .switcher-list-item-container {
  523. spacing: 8px; }
  524. .switcher-list .item-box {
  525. padding: 8px;
  526. border-radius: 4px; }
  527. .switcher-list .item-box:outlined {
  528. padding: 6px;
  529. border: 2px solid black; }
  530. .switcher-list .item-box:selected {
  531. background-color: #c50ed2;
  532. color: #f7f7f7; }
  533. .switcher-list .thumbnail-box {
  534. padding: 2px;
  535. spacing: 4px; }
  536. .switcher-list .thumbnail {
  537. width: 256px; }
  538. .switcher-list .separator {
  539. width: 1px;
  540. background: #12151e; }
  541. .switcher-arrow {
  542. border-color: rgba(0, 0, 0, 0);
  543. color: rgba(152, 171, 178, 0.8); }
  544. .switcher-arrow:highlighted {
  545. color: #98abb2; }
  546. .input-source-switcher-symbol {
  547. font-size: 34pt;
  548. width: 96px;
  549. height: 96px; }
  550. /* Window Cycler */
  551. .cycler-highlight {
  552. border: 5px solid #c50ed2; }
  553. /* Workspace Switcher */
  554. .workspace-switcher-group {
  555. padding: 12px; }
  556. .workspace-switcher {
  557. background: transparent;
  558. border: 0px;
  559. border-radius: 0px;
  560. padding: 0px;
  561. spacing: 8px; }
  562. .ws-switcher-active-up, .ws-switcher-active-down {
  563. height: 50px;
  564. background-color: #c50ed2;
  565. color: #f7f7f7;
  566. background-size: 32px;
  567. border-radius: 8px; }
  568. .ws-switcher-active-up {
  569. background-image: url("assets/ws-switch-arrow-up.png"); }
  570. .ws-switcher-active-down {
  571. background-image: url("assets/ws-switch-arrow-down.png"); }
  572. .ws-switcher-box {
  573. height: 50px;
  574. border: 1px solid rgba(152, 171, 178, 0.1);
  575. background: rgba(5, 5, 8, 0.95);
  576. border-radius: 8px; }
  577. .osd-window,
  578. .resize-popup,
  579. .switcher-list, .workspace-switcher-container {
  580. color: #98abb2;
  581. background-color: rgba(24, 27, 40, 0.95);
  582. border: none;
  583. border-radius: 2px;
  584. padding: 12px; }
  585. /* Tiled window previews */
  586. .tile-preview {
  587. background-color: rgba(197, 14, 210, 0.5);
  588. border: 1px solid #c50ed2; }
  589. .tile-preview-left.on-primary {
  590. border-radius: 2px 2px 0 0; }
  591. .tile-preview-right.on-primary {
  592. border-radius: 0 2px 0 0; }
  593. .tile-preview-left.tile-preview-right.on-primary {
  594. border-radius: 2px 2px 0 0; }
  595. /* TOP BAR */
  596. #panel {
  597. background-gradient-direction: none;
  598. background-color: rgba(22, 25, 37, 0.65);
  599. /* transition from solid to transparent */
  600. transition-duration: 500ms;
  601. font-weight: bold;
  602. height: 1.86em;
  603. padding: 0px 0px; }
  604. #panel.unlock-screen, #panel.login-screen, #panel.lock-screen {
  605. background-color: transparent; }
  606. #panel #panelLeft, #panel #panelCenter {
  607. spacing: 4px; }
  608. #panel .panel-corner {
  609. -panel-corner-radius: 0px;
  610. -panel-corner-background-color: rgba(0, 0, 0, 0.2);
  611. -panel-corner-border-width: 2px;
  612. -panel-corner-border-color: transparent; }
  613. #panel .panel-corner:active, #panel .panel-corner:overview, #panel .panel-corner:focus {
  614. -panel-corner-border-color: #db10ea; }
  615. #panel .panel-corner.lock-screen, #panel .panel-corner.login-screen, #panel .panel-corner.unlock-screen {
  616. -panel-corner-radius: 0;
  617. -panel-corner-background-color: transparent;
  618. -panel-corner-border-color: transparent; }
  619. #panel .panel-button {
  620. -natural-hpadding: 12px;
  621. -minimum-hpadding: 6px;
  622. font-weight: bold;
  623. color: white;
  624. text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.9);
  625. transition-duration: 100ms; }
  626. #panel .panel-button .app-menu-icon {
  627. -st-icon-style: symbolic;
  628. margin-left: 4px;
  629. margin-right: 4px; }
  630. #panel .panel-button .system-status-icon,
  631. #panel .panel-button .app-menu-icon > StIcon,
  632. #panel .panel-button .popup-menu-arrow {
  633. icon-shadow: 0px 0px 2px rgba(0, 0, 0, 0.9); }
  634. #panel .panel-button:hover {
  635. background: rgba(41, 47, 69, 0.65);
  636. color: white;
  637. transition-duration: 200ms; }
  638. #panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked {
  639. box-shadow: none;
  640. background-gradient-start: #c50ed2;
  641. background-gradient-end: #8500f7;
  642. background-gradient-direction: horizontal;
  643. color: #f7f7f7;
  644. text-shadow: 0px 0px 2px rgba(92, 92, 92, 0.9);
  645. transition-duration: 200ms; }
  646. #panel .panel-button:active .system-status-icon,
  647. #panel .panel-button:active .app-menu-icon > StIcon,
  648. #panel .panel-button:active .popup-menu-arrow, #panel .panel-button:overview .system-status-icon,
  649. #panel .panel-button:overview .app-menu-icon > StIcon,
  650. #panel .panel-button:overview .popup-menu-arrow, #panel .panel-button:focus .system-status-icon,
  651. #panel .panel-button:focus .app-menu-icon > StIcon,
  652. #panel .panel-button:focus .popup-menu-arrow, #panel .panel-button:checked .system-status-icon,
  653. #panel .panel-button:checked .app-menu-icon > StIcon,
  654. #panel .panel-button:checked .popup-menu-arrow {
  655. icon-shadow: 0px 0px 2px rgba(0, 0, 0, 0.9); }
  656. #panel .panel-button:active > .system-status-icon, #panel .panel-button:overview > .system-status-icon, #panel .panel-button:focus > .system-status-icon, #panel .panel-button:checked > .system-status-icon {
  657. icon-shadow: red 0 2px 2px; }
  658. #panel .panel-button .system-status-icon {
  659. icon-size: 1.09em;
  660. padding: 0 5px; }
  661. .unlock-screen #panel .panel-button,
  662. .login-screen #panel .panel-button,
  663. .lock-screen #panel .panel-button {
  664. color: #b5c3c8; }
  665. .unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen #panel .panel-button:active,
  666. .login-screen #panel .panel-button:focus,
  667. .login-screen #panel .panel-button:hover,
  668. .login-screen #panel .panel-button:active,
  669. .lock-screen #panel .panel-button:focus,
  670. .lock-screen #panel .panel-button:hover,
  671. .lock-screen #panel .panel-button:active {
  672. color: #b5c3c8; }
  673. #panel .panel-status-indicators-box,
  674. #panel .panel-status-menu-box {
  675. spacing: 2px; }
  676. #panel .power-status.panel-status-indicators-box {
  677. spacing: 0; }
  678. #panel .screencast-indicator {
  679. color: #f47d49; }
  680. #panel.solid {
  681. background-color: #161925;
  682. /* transition from transparent to solid */
  683. transition-duration: 300ms; }
  684. #panel.solid .panel-corner {
  685. -panel-corner-background-color: black; }
  686. #panel.solid .system-status-icon,
  687. #panel.solid .app-menu-icon > StIcon,
  688. #panel.solid .popup-menu-arrow {
  689. icon-shadow: none; }
  690. #calendarArea {
  691. padding: 0.75em 1.0em; }
  692. .calendar {
  693. margin-bottom: 1em; }
  694. .calendar,
  695. .datemenu-today-button,
  696. .datemenu-displays-box,
  697. .message-list-sections {
  698. margin: 0 1.5em; }
  699. .datemenu-calendar-column {
  700. spacing: 0.5em; }
  701. .datemenu-displays-section {
  702. padding-bottom: 3em; }
  703. .datemenu-displays-box {
  704. spacing: 1em; }
  705. .datemenu-calendar-column {
  706. border: 0 solid transparent;
  707. background: #171926; }
  708. .datemenu-calendar-column:ltr {
  709. border-left-width: 1px; }
  710. .datemenu-calendar-column:rtl {
  711. border-right-width: 1px; }
  712. .datemenu-today-button,
  713. .world-clocks-button,
  714. .weather-button,
  715. .events-section-title,
  716. .message-list-section-title {
  717. border-radius: 4px;
  718. padding: .4em; }
  719. .message-list-section-list:ltr {
  720. padding-left: .4em; }
  721. .message-list-section-list:rtl {
  722. padding-right: .4em; }
  723. .datemenu-today-button:hover, .datemenu-today-button:focus,
  724. .world-clocks-button:hover,
  725. .world-clocks-button:focus,
  726. .weather-button:hover,
  727. .weather-button:focus,
  728. .events-section-title:hover,
  729. .events-section-title:focus,
  730. .message-list-section-title:hover,
  731. .message-list-section-title:focus {
  732. background-color: #222638; }
  733. .datemenu-today-button:active,
  734. .world-clocks-button:active,
  735. .weather-button:active,
  736. .events-section-title:active,
  737. .message-list-section-title:active {
  738. color: white;
  739. background-color: #c50ed2; }
  740. .datemenu-today-button .date-label {
  741. font-size: 1.5em; }
  742. .world-clocks-header,
  743. .weather-header,
  744. .events-section-title,
  745. .message-list-section-title {
  746. color: #7b939c;
  747. font-weight: bold; }
  748. .world-clocks-grid {
  749. spacing-rows: 0.4em; }
  750. .weather-box {
  751. spacing: 0.4em; }
  752. .calendar-month-label {
  753. color: #899fa7;
  754. font-weight: bold;
  755. padding: 8px 0; }
  756. .pager-button {
  757. color: white;
  758. background-color: transparent;
  759. width: 32px;
  760. border-radius: 4px; }
  761. .pager-button:hover, .pager-button:focus {
  762. background-color: rgba(152, 171, 178, 0.05); }
  763. .pager-button:active {
  764. background-color: rgba(24, 27, 40, 0.05); }
  765. .calendar-change-month-back {
  766. background-image: url("assets/calendar-arrow-left.svg"); }
  767. .calendar-change-month-back:rtl {
  768. background-image: url("assets/calendar-arrow-right.svg"); }
  769. .calendar-change-month-forward {
  770. background-image: url("assets/calendar-arrow-right.svg"); }
  771. .calendar-change-month-forward:rtl {
  772. background-image: url("assets/calendar-arrow-left.svg"); }
  773. .calendar-day-base {
  774. font-size: 80%;
  775. text-align: center;
  776. width: 2.4em;
  777. height: 2.4em;
  778. padding: 0.1em;
  779. margin: 2px;
  780. border-radius: 1.4em; }
  781. .calendar-day-base:hover, .calendar-day-base:focus {
  782. background-color: #222638; }
  783. .calendar-day-base:active, .calendar-day-base:selected {
  784. color: #f7f7f7;
  785. background-color: #c50ed2;
  786. border-color: transparent; }
  787. .calendar-day-base.calendar-day-heading {
  788. color: #7b939c;
  789. margin-top: 1em;
  790. font-size: 70%; }
  791. .calendar-day {
  792. border-width: 0; }
  793. .calendar-day-top {
  794. border-top-width: 1px; }
  795. .calendar-day-left {
  796. border-left-width: 1px; }
  797. .calendar-nonwork-day {
  798. color: #58636d; }
  799. .calendar-today {
  800. font-weight: bold;
  801. border: 1px solid rgba(18, 21, 30, 0.5); }
  802. .calendar-day-with-events {
  803. color: #b5c3c8;
  804. font-weight: bold;
  805. background-image: url("assets/calendar-today.svg"); }
  806. .calendar-other-month-day {
  807. color: #58636d;
  808. opacity: 0.5; }
  809. .calendar-week-number {
  810. font-size: 70%;
  811. font-weight: bold;
  812. width: 2.3em;
  813. height: 1.8em;
  814. border-radius: 2px;
  815. padding: 0.5em 0 0;
  816. margin: 6px;
  817. background-color: rgba(152, 171, 178, 0.3);
  818. color: #181b28; }
  819. /* Message list */
  820. .message-list {
  821. width: 31.5em; }
  822. .message-list .message-title {
  823. color: #899fa7; }
  824. .message-list-clear-button.button {
  825. color: #98abb2;
  826. background-color: #0e1018;
  827. box-shadow: none;
  828. border: 1px solid #12151e;
  829. text-shadow: 0 1px black;
  830. icon-shadow: 0 1px black;
  831. border: 1px solid #12151e;
  832. margin: 1.5em 1.5em 0; }
  833. .message-list-clear-button.button:hover, .message-list-clear-button.button:focus {
  834. color: #c50ed2;
  835. background-color: #12151e;
  836. border: 1px solid #12151e;
  837. text-shadow: 0 1px black;
  838. icon-shadow: 0 1px black; }
  839. .message-list-sections {
  840. spacing: 1em; }
  841. .message-list-section,
  842. .message-list-section-list {
  843. spacing: 0.4em; }
  844. .message-list-section-close > StIcon {
  845. icon-size: 16px;
  846. border-radius: 16px;
  847. padding: 8px;
  848. color: #98abb2;
  849. background-color: transparent; }
  850. .message-list-section-close:hover > StIcon,
  851. .message-list-section-close:focus > StIcon .message-list-section-close:active > StIcon {
  852. color: #ff007a;
  853. background: transparent; }
  854. .message {
  855. border-radius: 1px;
  856. background: transparent; }
  857. .message:hover, .message:focus {
  858. background-color: #161925;
  859. box-shadow: 3px 0px 0px 0px #c50ed2 inset; }
  860. .message-icon-bin {
  861. padding: 10px 3px 10px 10px; }
  862. .message-icon-bin:rtl {
  863. padding: 10px 10px 10px 3px; }
  864. .message-icon-bin > StIcon {
  865. icon-size: 16px;
  866. -st-icon-style: symbolic; }
  867. .message-secondary-bin {
  868. padding: 0 12px; }
  869. .message-secondary-bin > .event-time {
  870. color: #6c8791;
  871. font-size: 0.7em;
  872. /* HACK: the label should be baseline-aligned with a 1em label,
  873. fake this with some bottom padding */
  874. padding-bottom: 0.13em; }
  875. .message-secondary-bin > StIcon {
  876. icon-size: 16px; }
  877. .message-content {
  878. padding: 10px; }
  879. .message-content *:hover > StIcon,
  880. .message-content *:focus > StIcon {
  881. color: #ff007a; }
  882. .message-media-control {
  883. padding: 12px;
  884. color: #627a82; }
  885. .message-media-control:last-child:ltr {
  886. padding-right: 18px; }
  887. .message-media-control:last-child:rtl {
  888. padding-left: 18px; }
  889. .message-media-control:hover {
  890. color: #98abb2; }
  891. .message-media-control:insensitive {
  892. color: #364348; }
  893. .media-message-cover-icon {
  894. icon-size: 48px !important; }
  895. .media-message-cover-icon.fallback {
  896. color: #2b3148;
  897. background-color: #181b28;
  898. border: 2px solid #181b28;
  899. border-radius: 2px;
  900. icon-size: 16px;
  901. padding: 8px; }
  902. .system-switch-user-submenu-icon.user-icon {
  903. icon-size: 20px;
  904. padding: 0 2px; }
  905. .system-switch-user-submenu-icon.default-icon {
  906. icon-size: 16px;
  907. padding: 0 4px; }
  908. #appMenu {
  909. spinner-image: url("assets/process-working.svg");
  910. spacing: 4px; }
  911. #appMenu .label-shadow {
  912. color: transparent; }
  913. .aggregate-menu {
  914. min-width: 21em; }
  915. .aggregate-menu .popup-menu-icon {
  916. padding: 0 4px; }
  917. .system-menu-action {
  918. color: #98abb2;
  919. border-radius: 32px;
  920. /* wish we could do 50% */
  921. border: 1px solid #12151e;
  922. background: #12151e;
  923. padding: 13px; }
  924. .system-menu-action:hover, .system-menu-action:focus {
  925. border: 1px solid #c50ed2;
  926. color: #c50ed2;
  927. background: transparent; }
  928. .system-menu-action:active {
  929. background-color: #980ba2;
  930. color: #f7f7f7;
  931. border: 1px solid #980ba2; }
  932. .system-menu-action > StIcon {
  933. icon-size: 16px; }
  934. .ripple-box {
  935. width: 52px;
  936. height: 52px;
  937. background-image: url("assets/corner-ripple-ltr.png");
  938. background-size: contain; }
  939. .ripple-box:rtl {
  940. background-image: url("assets/corner-ripple-rtl.png"); }
  941. .popup-menu-arrow {
  942. width: 16px;
  943. height: 16px; }
  944. .popup-menu-icon {
  945. icon-size: 1.09em; }
  946. .window-close {
  947. background-image: url("assets/close-window.svg");
  948. background-size: 32px;
  949. height: 32px;
  950. width: 32px; }
  951. .window-close {
  952. -shell-close-overlap: 16px; }
  953. .window-close:rtl {
  954. -st-background-image-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5); }
  955. /* NETWORK DIALOGS */
  956. .nm-dialog {
  957. max-height: 34em;
  958. min-height: 31em;
  959. min-width: 32em; }
  960. .nm-dialog-content {
  961. spacing: 20px;
  962. padding: 24px; }
  963. .nm-dialog-header-hbox {
  964. spacing: 10px; }
  965. .nm-dialog-airplane-box {
  966. spacing: 12px; }
  967. .nm-dialog-airplane-headline {
  968. font-weight: bold;
  969. text-align: center; }
  970. .nm-dialog-airplane-text {
  971. color: #98abb2; }
  972. .nm-dialog-header-icon {
  973. icon-size: 32px; }
  974. .nm-dialog-scroll-view {
  975. border: 2px solid #12151e; }
  976. .nm-dialog-header {
  977. font-weight: bold; }
  978. .nm-dialog-item {
  979. font-size: 110%;
  980. border-bottom: 1px solid #12151e;
  981. padding: 12px;
  982. spacing: 20px; }
  983. .nm-dialog-item:selected {
  984. background-color: #c50ed2;
  985. color: #f7f7f7; }
  986. .nm-dialog-icons {
  987. spacing: .5em; }
  988. .nm-dialog-icon {
  989. icon-size: 16px; }
  990. .no-networks-label {
  991. color: #999999; }
  992. .no-networks-box {
  993. spacing: 12px; }
  994. /* OVERVIEW */
  995. #overview {
  996. spacing: 24px; }
  997. .overview-controls {
  998. padding-bottom: 32px; }
  999. .window-picker {
  1000. -horizontal-spacing: 16px;
  1001. -vertical-spacing: 16px;
  1002. padding: 0 16px 16px; }
  1003. .window-picker.external-monitor {
  1004. padding: 16px; }
  1005. .window-clone-border {
  1006. border: 4px solid rgba(197, 14, 210, 0.3);
  1007. border-radius: 0px;
  1008. box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
  1009. .window-caption {
  1010. spacing: 20px;
  1011. color: white;
  1012. background-color: rgba(24, 27, 40, 0.65);
  1013. border-radius: 2px;
  1014. padding: 4px 8px; }
  1015. .search-entry {
  1016. width: 320px;
  1017. padding: 9px;
  1018. border-radius: 100px;
  1019. border: none;
  1020. color: #98abb2;
  1021. background-color: rgba(24, 27, 40, 0.6);
  1022. box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.22); }
  1023. .search-entry:focus {
  1024. border-width: 0;
  1025. color: #98abb2;
  1026. background-color: rgba(24, 27, 40, 0.8);
  1027. box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 2px 3px rgba(0, 0, 0, 0.3); }
  1028. .search-entry .search-entry-icon {
  1029. icon-size: 1em;
  1030. padding: 0 4px;
  1031. color: rgba(152, 171, 178, 0.7); }
  1032. .search-entry:hover, .search-entry:focus {
  1033. background-color: rgba(24, 27, 40, 0.8); }
  1034. .search-entry:hover .search-entry-icon, .search-entry:focus .search-entry-icon {
  1035. color: #98abb2; }
  1036. #searchResultsBin {
  1037. max-width: 1000px; }
  1038. #searchResultsContent {
  1039. padding-left: 20px;
  1040. padding-right: 20px;
  1041. spacing: 16px; }
  1042. .search-section {
  1043. spacing: 16px; }
  1044. .search-section-content {
  1045. spacing: 32px; }
  1046. .list-search-results {
  1047. spacing: 3px; }
  1048. .search-section-separator {
  1049. height: 2px;
  1050. background-color: rgba(255, 255, 255, 0.2); }
  1051. .list-search-result-content {
  1052. spacing: 30px; }
  1053. .list-search-result-title {
  1054. color: white;
  1055. spacing: 12px; }
  1056. .list-search-result-description {
  1057. color: rgba(255, 255, 255, 0.5); }
  1058. .list-search-provider-details {
  1059. width: 150px;
  1060. color: white;
  1061. margin-top: 0.24em; }
  1062. .list-search-provider-content {
  1063. spacing: 20px; }
  1064. .search-provider-icon {
  1065. padding: 15px; }
  1066. /* DASHBOARD */
  1067. #dash {
  1068. font-size: 9pt;
  1069. color: white;
  1070. background-color: rgba(22, 25, 37, 0.65);
  1071. padding: 6px 0;
  1072. border: 1px solid #12151e;
  1073. border-left: 0px;
  1074. border-radius: 0px 5px 5px 0px; }
  1075. #dash:rtl {
  1076. border-radius: 9px 0 0 9px; }
  1077. #dash .placeholder {
  1078. background-image: url("assets/dash-placeholder.svg");
  1079. background-size: contain;
  1080. height: 24px; }
  1081. #dash .empty-dash-drop-target {
  1082. width: 24px;
  1083. height: 24px; }
  1084. .dash-item-container > StWidget {
  1085. padding: 4px 8px; }
  1086. .dash-label {
  1087. border-radius: 7px;
  1088. padding: 4px 12px;
  1089. color: white;
  1090. background-color: rgba(22, 25, 37, 0.65);
  1091. text-align: center;
  1092. -x-offset: 8px; }
  1093. /* App Vault/Grid */
  1094. .icon-grid {
  1095. spacing: 30px;
  1096. -shell-grid-horizontal-item-size: 136px;
  1097. -shell-grid-vertical-item-size: 136px; }
  1098. .icon-grid .overview-icon {
  1099. icon-size: 96px; }
  1100. .system-action-icon {
  1101. background-color: black;
  1102. color: white;
  1103. border-radius: 99px;
  1104. icon-size: 48px; }
  1105. .app-view-controls {
  1106. padding-bottom: 32px; }
  1107. .app-view-control {
  1108. padding: 4px 32px; }
  1109. .app-view-control:checked {
  1110. color: #c50ed2;
  1111. background-color: rgba(24, 27, 40, 0.95);
  1112. border: 1px solid #12151e;
  1113. text-shadow: none;
  1114. icon-shadow: none; }
  1115. .app-view-control:first-child {
  1116. border-right-width: 0;
  1117. border-radius: 3px 0 0 3px; }
  1118. .app-view-control:last-child {
  1119. border-radius: 0 3px 3px 0; }
  1120. .search-provider-icon:active, .search-provider-icon:checked,
  1121. .list-search-result:active,
  1122. .list-search-result:checked {
  1123. background-color: rgba(5, 5, 8, 0.85); }
  1124. .search-provider-icon:focus, .search-provider-icon:selected, .search-provider-icon:hover,
  1125. .list-search-result:focus,
  1126. .list-search-result:selected,
  1127. .list-search-result:hover {
  1128. background-color: rgba(24, 27, 40, 0.3);
  1129. transition-duration: 200ms; }
  1130. .app-well-app,
  1131. .app-well-app.app-folder,
  1132. .show-apps,
  1133. .grid-search-result {
  1134. border: none; }
  1135. .app-well-app:active .overview-icon,
  1136. .app-well-app:checked .overview-icon,
  1137. .app-well-app.app-folder:active .overview-icon,
  1138. .app-well-app.app-folder:checked .overview-icon,
  1139. .show-apps:active .overview-icon,
  1140. .show-apps:checked .overview-icon,
  1141. .grid-search-result:active .overview-icon,
  1142. .grid-search-result:checked .overview-icon {
  1143. background-color: rgba(11, 12, 18, 0.85);
  1144. box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 2px 3px rgba(0, 0, 0, 0.3);
  1145. color: #98abb2; }
  1146. .app-well-app:hover .overview-icon,
  1147. .app-well-app:focus .overview-icon,
  1148. .app-well-app:selected .overview-icon,
  1149. .app-well-app.app-folder:hover .overview-icon,
  1150. .app-well-app.app-folder:focus .overview-icon,
  1151. .app-well-app.app-folder:selected .overview-icon,
  1152. .show-apps:hover .overview-icon,
  1153. .show-apps:focus .overview-icon,
  1154. .show-apps:selected .overview-icon,
  1155. .grid-search-result:hover .overview-icon,
  1156. .grid-search-result:focus .overview-icon,
  1157. .grid-search-result:selected .overview-icon {
  1158. background-color: rgba(24, 27, 40, 0.5);
  1159. transition-duration: 0ms;
  1160. border-image: none;
  1161. background-image: none; }
  1162. .app-well-app-running-dot {
  1163. width: 4px;
  1164. height: 4px;
  1165. background-color: #c50ed2;
  1166. border-radius: 10px !important;
  1167. box-shadow: 0px 0px 5px 4px rgba(197, 14, 210, 0.8);
  1168. margin-bottom: 0px; }
  1169. .search-provider-icon,
  1170. .list-search-result, .app-well-app .overview-icon,
  1171. .app-well-app.app-folder .overview-icon,
  1172. .show-apps .overview-icon,
  1173. .grid-search-result .overview-icon {
  1174. color: #f7f7f7;
  1175. border-radius: 2px;
  1176. padding: 7px 6px;
  1177. border: none;
  1178. transition-duration: 100ms;
  1179. text-align: center;
  1180. box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.22); }
  1181. .app-well-app.app-folder > .overview-icon {
  1182. background-color: rgba(24, 27, 40, 0.35); }
  1183. .show-apps .show-apps-icon {
  1184. color: white; }
  1185. .show-apps:checked .show-apps-icon,
  1186. .show-apps:focus .show-apps-icon {
  1187. color: #98abb2;
  1188. transition-duration: 100ms; }
  1189. .app-folder-popup {
  1190. -arrow-border-radius: 8px;
  1191. -arrow-background-color: rgba(24, 27, 40, 0.5);
  1192. -arrow-base: 24px;
  1193. -arrow-rise: 11px; }
  1194. .app-folder-popup-bin {
  1195. padding: 5px;
  1196. background: rgba(24, 27, 40, 0.5); }
  1197. .app-folder-icon {
  1198. padding: 5px;
  1199. spacing-rows: 5px;
  1200. spacing-columns: 5px; }
  1201. .page-indicator {
  1202. padding: 15px 20px; }
  1203. .page-indicator .page-indicator-icon {
  1204. width: 12px;
  1205. height: 12px;
  1206. border-radius: 12px;
  1207. background-image: none;
  1208. background-color: rgba(255, 255, 255, 0.3); }
  1209. .page-indicator:hover .page-indicator-icon {
  1210. background-image: none;
  1211. background-color: rgba(255, 255, 255, 0.5); }
  1212. .page-indicator:active .page-indicator-icon {
  1213. background-image: none;
  1214. background-color: rgba(255, 255, 255, 0.7); }
  1215. .page-indicator:checked .page-indicator-icon, .page-indicator:checked:active {
  1216. background-image: none;
  1217. background-color: #FFFFFF;
  1218. transition-duration: 0s; }
  1219. .app-well-app > .overview-icon.overview-icon-with-label,
  1220. .grid-search-result .overview-icon.overview-icon-with-label {
  1221. padding: 10px 8px 5px 8px;
  1222. spacing: 4px; }
  1223. .workspace-thumbnails {
  1224. visible-width: 32px;
  1225. spacing: 11px;
  1226. padding: 8px;
  1227. border-radius: 0; }
  1228. .workspace-thumbnails:rtl {
  1229. border-radius: 0; }
  1230. .workspace-thumbnail-indicator {
  1231. border: 4px solid rgba(197, 14, 210, 0.5);
  1232. box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.22);
  1233. padding: 0; }
  1234. .search-display > StBoxLayout,
  1235. .all-apps,
  1236. .frequent-apps > StBoxLayout {
  1237. padding: 0px 88px 10px 88px; }
  1238. .workspace-thumbnails {
  1239. color: #98abb2;
  1240. background-color: transparent;
  1241. border: none; }
  1242. .search-statustext, .no-frequent-applications-label {
  1243. font-size: 2em;
  1244. font-weight: bold;
  1245. color: #98abb2; }
  1246. /* NOTIFICATIONS & MESSAGE TRAY */
  1247. .url-highlighter {
  1248. link-color: #e323f0; }
  1249. .notification-banner {
  1250. font-size: 11pt;
  1251. width: 34em;
  1252. margin: 5px;
  1253. border-radius: 3px;
  1254. color: white;
  1255. background-color: #181b28;
  1256. border: 1px solid #12151e;
  1257. box-shadow: 0 1px 4px black; }
  1258. .notification-banner:hover {
  1259. background-color: rgba(24, 27, 40, 0.96); }
  1260. .notification-banner:focus {
  1261. background-color: rgba(24, 27, 40, 0.96); }
  1262. .notification-banner .notification-icon {
  1263. padding: 5px; }
  1264. .notification-banner .notification-content {
  1265. padding: 5px;
  1266. spacing: 5px; }
  1267. .notification-banner .secondary-icon {
  1268. icon-size: 1.09em; }
  1269. .notification-banner .notification-actions {
  1270. background-color: #141722;
  1271. padding-top: 2px;
  1272. spacing: 1px; }
  1273. .notification-banner .notification-button {
  1274. padding: 4px 4px 5px;
  1275. background-color: rgba(24, 27, 40, 0.9); }
  1276. .notification-banner .notification-button:first-child {
  1277. border-radius: 0 0 0 3px; }
  1278. .notification-banner .notification-button:last-child {
  1279. border-radius: 0 0 3px 0; }
  1280. .notification-banner .notification-button:hover, .notification-banner .notification-buttonfocus {
  1281. background-color: #141722;
  1282. color: #c50ed2; }
  1283. .summary-source-counter {
  1284. font-size: 10pt;
  1285. font-weight: bold;
  1286. height: 1.6em;
  1287. width: 1.6em;
  1288. -shell-counter-overlap-x: 3px;
  1289. -shell-counter-overlap-y: 3px;
  1290. background-color: #c50ed2;
  1291. color: #f7f7f7;
  1292. border: 2px solid #98abb2;
  1293. box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
  1294. border-radius: 0.9em; }
  1295. .secondary-icon {
  1296. icon-size: 1.09em; }
  1297. .chat-body {
  1298. spacing: 5px; }
  1299. .chat-response {
  1300. margin: 5px; }
  1301. .chat-log-message {
  1302. color: #7b939c; }
  1303. .chat-new-group {
  1304. padding-top: 1em; }
  1305. .chat-received {
  1306. padding-left: 4px; }
  1307. .chat-received:rtl {
  1308. padding-left: 0px;
  1309. padding-right: 4px; }
  1310. .chat-sent {
  1311. padding-left: 18pt;
  1312. color: #6c8791; }
  1313. .chat-sent:rtl {
  1314. padding-left: 0;
  1315. padding-right: 18pt; }
  1316. .chat-meta-message {
  1317. padding-left: 4px;
  1318. font-size: 9pt;
  1319. font-weight: bold;
  1320. color: #627a82; }
  1321. .chat-meta-message:rtl {
  1322. padding-left: 0;
  1323. padding-right: 4px; }
  1324. .hotplug-transient-box {
  1325. spacing: 6px;
  1326. padding: 2px 72px 2px 12px; }
  1327. .hotplug-notification-item {
  1328. padding: 2px 10px; }
  1329. .hotplug-notification-item:focus {
  1330. padding: 1px 71px 1px 11px; }
  1331. .hotplug-notification-item-icon {
  1332. icon-size: 24px;
  1333. padding: 2px 5px; }
  1334. .hotplug-resident-box {
  1335. spacing: 8px; }
  1336. .hotplug-resident-mount {
  1337. spacing: 8px;
  1338. border-radius: 4px; }
  1339. .hotplug-resident-mount:hover {
  1340. background-color: rgba(24, 27, 40, 0.3); }
  1341. .hotplug-resident-mount-label {
  1342. color: inherit;
  1343. padding-left: 6px; }
  1344. .hotplug-resident-mount-icon {
  1345. icon-size: 24px;
  1346. padding-left: 6px; }
  1347. .hotplug-resident-eject-icon {
  1348. icon-size: 16px; }
  1349. .hotplug-resident-eject-button {
  1350. padding: 7px;
  1351. border-radius: 5px;
  1352. color: pink; }
  1353. /* Eeeky things */
  1354. .magnifier-zoom-region {
  1355. border: 2px solid #c50ed2; }
  1356. .magnifier-zoom-region.full-screen {
  1357. border-width: 0; }
  1358. /* On-screen Keyboard */
  1359. #keyboard {
  1360. background-color: rgba(24, 27, 40, 0.65); }
  1361. .keyboard-layout {
  1362. spacing: 10px;
  1363. padding: 10px; }
  1364. .keyboard-row {
  1365. spacing: 15px; }
  1366. .keyboard-key {
  1367. color: #98abb2;
  1368. background-color: #0e1018;
  1369. box-shadow: none;
  1370. border: 1px solid #12151e;
  1371. text-shadow: 0 1px black;
  1372. icon-shadow: 0 1px black;
  1373. border: 1px solid #12151e;
  1374. background-color: #181b28;
  1375. min-height: 2em;
  1376. min-width: 2em;
  1377. font-size: 14pt;
  1378. font-weight: bold;
  1379. border-radius: 5px; }
  1380. .keyboard-key:focus {
  1381. color: #c50ed2;
  1382. text-shadow: 0 1px black;
  1383. icon-shadow: 0 1px black;
  1384. box-shadow: none;
  1385. border: 1px solid #12151e; }
  1386. .keyboard-key:hover, .keyboard-key:checked {
  1387. color: #c50ed2;
  1388. background-color: #12151e;
  1389. border: 1px solid #12151e;
  1390. text-shadow: 0 1px black;
  1391. icon-shadow: 0 1px black; }
  1392. .keyboard-key:active {
  1393. color: #c50ed2;
  1394. background-color: rgba(24, 27, 40, 0.95);
  1395. border: 1px solid #12151e;
  1396. text-shadow: none;
  1397. icon-shadow: none; }
  1398. .keyboard-key:grayed {
  1399. background-color: rgba(24, 27, 40, 0.95);
  1400. color: #98abb2;
  1401. border-color: rgba(0, 0, 0, 0.7); }
  1402. .keyboard-subkeys {
  1403. color: white;
  1404. padding: 5px;
  1405. -arrow-border-radius: 10px;
  1406. -arrow-background-color: rgba(24, 27, 40, 0.65);
  1407. -arrow-border-width: 2px;
  1408. -arrow-border-color: #98abb2;
  1409. -arrow-base: 20px;
  1410. -arrow-rise: 10px;
  1411. -boxpointer-gap: 5px; }
  1412. .candidate-popup-content {
  1413. padding: 0.5em;
  1414. spacing: 0.3em; }
  1415. .candidate-index {
  1416. padding: 0 0.5em 0 0;
  1417. color: #7b939c; }
  1418. .candidate-box {
  1419. padding: 0.3em 0.5em 0.3em 0.5em;
  1420. border-radius: 4px; }
  1421. .candidate-box:selected, .candidate-box:hover {
  1422. background-color: #c50ed2;
  1423. color: #f7f7f7; }
  1424. .candidate-page-button-box {
  1425. height: 2em; }
  1426. .vertical .candidate-page-button-box {
  1427. padding-top: 0.5em; }
  1428. .horizontal .candidate-page-button-box {
  1429. padding-left: 0.5em; }
  1430. .candidate-page-button {
  1431. padding: 4px; }
  1432. .candidate-page-button-previous {
  1433. border-radius: 4px 0px 0px 4px;
  1434. border-right-width: 0; }
  1435. .candidate-page-button-next {
  1436. border-radius: 0px 4px 4px 0px; }
  1437. .candidate-page-button-icon {
  1438. icon-size: 1em; }
  1439. /* Auth Dialogs & Screen Shield */
  1440. .framed-user-icon {
  1441. background-size: contain;
  1442. border: 2px solid #98abb2;
  1443. color: #98abb2;
  1444. border-radius: 3px; }
  1445. .framed-user-icon:hover {
  1446. border-color: #f0f2f3;
  1447. color: #f0f2f3; }
  1448. .login-dialog-banner-view {
  1449. padding-top: 24px;
  1450. max-width: 23em; }
  1451. .login-dialog {
  1452. border: none;
  1453. background-color: transparent; }
  1454. .login-dialog .modal-dialog-button-box {
  1455. spacing: 3px; }
  1456. .login-dialog .modal-dialog-button {
  1457. padding: 3px 18px; }
  1458. .login-dialog .modal-dialog-button:default {
  1459. color: #98abb2;
  1460. background-color: #0e1018;
  1461. box-shadow: none;
  1462. border: 1px solid #12151e;
  1463. text-shadow: 0 1px black;
  1464. icon-shadow: 0 1px black;
  1465. border: 1px solid #12151e; }
  1466. .login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus {
  1467. color: #c50ed2;
  1468. background-color: rgba(197, 14, 210, 0.7);
  1469. border: 1px solid #12151e;
  1470. text-shadow: 0 1px black;
  1471. icon-shadow: 0 1px black; }
  1472. .login-dialog .modal-dialog-button:default:active {
  1473. color: #c50ed2;
  1474. background-color: #c50ed2;
  1475. border: 1px solid #12151e;
  1476. text-shadow: none;
  1477. icon-shadow: none; }
  1478. .login-dialog .modal-dialog-button:default:insensitive {
  1479. color: #58636d;
  1480. background-color: rgba(38, 43, 55, 0.66);
  1481. box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 2px 3px rgba(0, 0, 0, 0.22);
  1482. border: none;
  1483. text-shadow: none;
  1484. icon-shadow: none; }
  1485. .login-dialog-logo-bin {
  1486. padding: 24px 0px; }
  1487. .login-dialog-banner {
  1488. color: #7b939c; }
  1489. .login-dialog-button-box {
  1490. spacing: 5px; }
  1491. .login-dialog-message-warning {
  1492. color: #f47d49; }
  1493. .login-dialog-message-hint {
  1494. padding-top: 0;
  1495. padding-bottom: 20px; }
  1496. .login-dialog-user-selection-box {
  1497. padding: 100px 0px; }
  1498. .login-dialog-not-listed-label {
  1499. padding-left: 2px; }
  1500. .login-dialog-not-listed-button:focus .login-dialog-not-listed-label,
  1501. .login-dialog-not-listed-button:hover .login-dialog-not-listed-label {
  1502. color: #98abb2; }
  1503. .login-dialog-not-listed-label {
  1504. font-size: 90%;
  1505. font-weight: bold;
  1506. color: #4c5e65;
  1507. padding-top: 1em; }
  1508. .login-dialog-user-list-view {
  1509. -st-vfade-offset: 1em; }
  1510. .login-dialog-user-list {
  1511. spacing: 12px;
  1512. padding: .2em;
  1513. width: 23em; }
  1514. .login-dialog-user-list:expanded .login-dialog-user-list-item:selected {
  1515. background-color: #c50ed2;
  1516. color: #f7f7f7; }
  1517. .login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in {
  1518. border-right: 2px solid #c50ed2; }
  1519. .login-dialog-user-list-item {
  1520. border-radius: 5px;
  1521. padding: .2em;
  1522. color: #4c5e65; }
  1523. .login-dialog-user-list-item:ltr {
  1524. padding-right: 1em; }
  1525. .login-dialog-user-list-item:rtl {
  1526. padding-left: 1em; }
  1527. .login-dialog-user-list-item .login-dialog-timed-login-indicator {
  1528. height: 2px;
  1529. margin: 2px 0 0 0;
  1530. background-color: #98abb2; }
  1531. .login-dialog-user-list-item:focus .login-dialog-timed-login-indicator {
  1532. background-color: #f7f7f7; }
  1533. .login-dialog-username,
  1534. .user-widget-label {
  1535. color: #98abb2;
  1536. font-size: 120%;
  1537. font-weight: bold;
  1538. text-align: left;
  1539. padding-left: 15px; }
  1540. .user-widget-label:ltr {
  1541. padding-left: 18px; }
  1542. .user-widget-label:rtl {
  1543. padding-right: 18px; }
  1544. .login-dialog-prompt-layout {
  1545. padding-top: 24px;
  1546. padding-bottom: 12px;
  1547. spacing: 8px;
  1548. width: 23em; }
  1549. .login-dialog-prompt-label {
  1550. color: #627a82;
  1551. font-size: 110%;
  1552. padding-top: 1em; }
  1553. .login-dialog-session-list-button StIcon {
  1554. icon-size: 1.25em; }
  1555. .login-dialog-session-list-button {
  1556. color: #4c5e65; }
  1557. .login-dialog-session-list-button:hover, .login-dialog-session-list-button:focus {
  1558. color: #98abb2; }
  1559. .login-dialog-session-list-button:active {
  1560. color: #20282b; }
  1561. .screen-shield-arrows {
  1562. padding-bottom: 3em; }
  1563. .screen-shield-arrows Gjs_Arrow {
  1564. color: white;
  1565. width: 80px;
  1566. height: 48px;
  1567. -arrow-thickness: 12px;
  1568. -arrow-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); }
  1569. .screen-shield-clock {
  1570. color: white;
  1571. text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6);
  1572. font-weight: bold;
  1573. text-align: center;
  1574. padding-bottom: 1.5em; }
  1575. .screen-shield-clock-time {
  1576. font-size: 72pt;
  1577. text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4); }
  1578. .screen-shield-clock-date {
  1579. font-size: 28pt; }
  1580. .screen-shield-notifications-container {
  1581. spacing: 6px;
  1582. width: 30em;
  1583. background-color: transparent;
  1584. max-height: 500px; }
  1585. .screen-shield-notifications-container .summary-notification-stack-scrollview {
  1586. padding-top: 0;
  1587. padding-bottom: 0; }
  1588. .screen-shield-notifications-container .notification,
  1589. .screen-shield-notifications-container .screen-shield-notification-source {
  1590. padding: 12px 6px;
  1591. border: 1px solid #98abb2;
  1592. background-color: rgba(24, 27, 40, 0.45);
  1593. color: #98abb2;
  1594. border-radius: 4px; }
  1595. .screen-shield-notifications-container .notification {
  1596. margin-right: 15px; }
  1597. .screen-shield-notification-label {
  1598. font-weight: bold;
  1599. padding: 0px 0px 0px 12px; }
  1600. .screen-shield-notification-count-text {
  1601. padding: 0px 0px 0px 12px; }
  1602. #panel.lock-screen {
  1603. background-color: rgba(24, 27, 40, 0.45); }
  1604. .screen-shield-background {
  1605. background: black;
  1606. box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4); }
  1607. #lockDialogGroup {
  1608. background: #2e3436 url(resource:///org/gnome/shell/theme/noise-texture.png);
  1609. background-repeat: repeat; }
  1610. #screenShieldNotifications StButton#vhandle, #screenShieldNotifications StButton#hhandle {
  1611. background-color: rgba(24, 27, 40, 0.3); }
  1612. #screenShieldNotifications StButton#vhandle:hover, #screenShieldNotifications StButton#vhandle:focus, #screenShieldNotifications StButton#hhandle:hover, #screenShieldNotifications StButton#hhandle:focus {
  1613. background-color: rgba(24, 27, 40, 0.5); }
  1614. #screenShieldNotifications StButton#vhandle:active, #screenShieldNotifications StButton#hhandle:active {
  1615. background-color: rgba(197, 14, 210, 0.5); }
  1616. #LookingGlassDialog {
  1617. background-color: rgba(0, 0, 0, 0.8);
  1618. spacing: 4px;
  1619. padding: 4px;
  1620. border: 2px solid grey;
  1621. border-radius: 4px; }
  1622. #LookingGlassDialog > #Toolbar {
  1623. border: 1px solid grey;
  1624. border-radius: 4px; }
  1625. #LookingGlassDialog .labels {
  1626. spacing: 4px; }
  1627. #LookingGlassDialog .notebook-tab {
  1628. -natural-hpadding: 12px;
  1629. -minimum-hpadding: 6px;
  1630. font-weight: bold;
  1631. color: #ccc;
  1632. transition-duration: 100ms;
  1633. padding-left: .3em;
  1634. padding-right: .3em; }
  1635. #LookingGlassDialog .notebook-tab:hover {
  1636. color: white;
  1637. text-shadow: black 0px 2px 2px; }
  1638. #LookingGlassDialog .notebook-tab:selected {
  1639. border-bottom-width: 2px;
  1640. border-color: #db10ea;
  1641. color: white;
  1642. text-shadow: black 0px 2px 2px; }
  1643. #LookingGlassDialog StBoxLayout#EvalBox {
  1644. padding: 4px;
  1645. spacing: 4px; }
  1646. #LookingGlassDialog StBoxLayout#ResultsArea {
  1647. spacing: 4px; }
  1648. .lg-dialog StEntry {
  1649. selection-background-color: #bbbbbb;
  1650. selected-color: #333333; }
  1651. .lg-dialog .shell-link {
  1652. color: #999999; }
  1653. .lg-dialog .shell-link:hover {
  1654. color: #dddddd; }
  1655. .lg-completions-text {
  1656. font-size: .9em;
  1657. font-style: italic; }
  1658. .lg-obj-inspector-title {
  1659. spacing: 4px; }
  1660. .lg-obj-inspector-button {
  1661. border: 1px solid gray;
  1662. padding: 4px;
  1663. border-radius: 4px; }
  1664. .lg-obj-inspector-button:hover {
  1665. border: 1px solid #ffffff; }
  1666. #lookingGlassExtensions {
  1667. padding: 4px; }
  1668. .lg-extensions-list {
  1669. padding: 4px;
  1670. spacing: 6px; }
  1671. .lg-extension {
  1672. border: 1px solid #6f6f6f;
  1673. border-radius: 4px;
  1674. padding: 4px; }
  1675. .lg-extension-name {
  1676. font-weight: bold; }
  1677. .lg-extension-meta {
  1678. spacing: 6px; }
  1679. #LookingGlassPropertyInspector {
  1680. background: rgba(0, 0, 0, 0.8);
  1681. border: 2px solid grey;
  1682. border-radius: 4px;
  1683. padding: 6px; }
  1684. .openweather-current-summarybox,
  1685. .openweather-forecast-icon,
  1686. .openweather-current-databox-captions,
  1687. .openweather-current-databox-values,
  1688. .openweather-current-icon,
  1689. .openweather-forecast-summary,
  1690. .openweather-forecast-temperature {
  1691. background: transparent; }
  1692. .openweather-current-databox-captions, .openweather-forecast-day {
  1693. color: #00e8b7; }