_pantheon.scss 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442
  1. /********
  2. * Gala *
  3. *******/
  4. .gala-notification {
  5. border-width: 0;
  6. border-radius: 2px;
  7. color: white;
  8. border: 1px solid $base_color;
  9. background-color: $base_color;
  10. .title,
  11. .label {
  12. color: $fg_color;
  13. }
  14. }
  15. .gala-button {
  16. padding: 3px;
  17. color: $base_color;
  18. border: none;
  19. border-radius: 50%;
  20. background-image: linear-gradient(to bottom,
  21. #7e7e7e,
  22. #3e3e3e
  23. );
  24. box-shadow: inset 0 0 0 1px transparentize(white, 0.02),
  25. inset 0 1px 0 0 transparentize(white, 0.07),
  26. inset 0 -1px 0 0 transparentize(white, 0.01),
  27. 0 0 0 1px transparentize(black, 0.40),
  28. 0 3px 6px transparentize(black, 0.16),
  29. 0 3px 6px transparentize(black, 0.23);
  30. text-shadow: 0 1px 1px transparentize(black, 0.6);
  31. }
  32. /**********
  33. * Notify *
  34. *********/
  35. .notify {
  36. /*-notify-shadow: 0px 2px 18px transparentize(black, 0.60);*/
  37. border-radius: 5px;
  38. border: 1px solid transparentize(black, 0.30);
  39. background-color: transparentize($base_color, 0.95);
  40. .low {}
  41. .critical {}
  42. }
  43. /***************
  44. * SwitchBoard *
  45. ***************/
  46. .category-label {
  47. font-weight: bold;
  48. color: $fg_color;
  49. }
  50. /*************
  51. * Slingshot *
  52. ************/
  53. .button.app {
  54. border: none;
  55. border-radius: 0;
  56. box-shadow: none;
  57. background-image: none;
  58. .app {
  59. &:hover{
  60. border-radius: 8px;
  61. border: none;
  62. background-color: transparentize($selected_bg_color, 0.7);
  63. color: white;
  64. }
  65. &:focus{
  66. /*background-color: transparentize(black, 0.20);*/
  67. }
  68. }
  69. }
  70. .search-item {
  71. border-radius: 0;
  72. border: none;
  73. color: $fg_color;
  74. background: none;
  75. &:hover,
  76. &:focus {
  77. border-radius: 0;
  78. background-color: transparentize($selected_bg_color, 0.7);
  79. color: $selected_fg_color;
  80. }
  81. }
  82. .search-entry-large,
  83. .search-entry-large:focus {
  84. border: none;
  85. font-size: 18px;
  86. font-weight: 300;
  87. background-image: none;
  88. background: none;
  89. box-shadow: none;
  90. border-radius: 0;
  91. }
  92. .search-category-header {
  93. font-weight: bold;
  94. color: $fg_color;
  95. }
  96. /*********
  97. * Panel *
  98. ********/
  99. .panel {
  100. background-color: transparent;
  101. transition: all 100ms ease-in-out;
  102. color: #fff;
  103. &.maximized {
  104. background-color: #000;
  105. }
  106. &.translucent {
  107. background-color: transparentize(black, 0.5);
  108. }
  109. &.color-light.translucent {
  110. background-color: transparentize($panel_fg_color, 0.15);
  111. }
  112. }
  113. menubar.panel,
  114. .panel menubar {
  115. box-shadow: none;
  116. border: none;
  117. }
  118. .composited-indicator {
  119. > revealer,
  120. > revealer image,
  121. > revealer label,
  122. > revealer spinner {
  123. color: #fff;
  124. font-weight: bold;
  125. text-shadow: 0 1px 2px transparentize(black, 0.7), 0 1px 2px transparentize(black, 0.5);
  126. transition: all 200ms ease-in-out;
  127. -gtk-icon-shadow: 0 1px 2px transparentize(black, 0.7), 0 1px 2px transparentize(black, 0.5);
  128. }
  129. > revealer image:first-child + label {
  130. margin-left: 5px;
  131. }
  132. }
  133. .panel.color-light .composited-indicator {
  134. > revealer,
  135. > revealer image,
  136. > revealer label,
  137. > revealer spinner {
  138. color: transparentize(black, 0.4);
  139. text-shadow: 0 1px transparentize(white, 0.9);
  140. -gtk-icon-shadow: 0 1px transparentize(white, 0.9);
  141. }
  142. }
  143. /**************
  144. * Calculator *
  145. **************/
  146. PantheonCalculatorMainWindow {
  147. border-radius: 0 0 4px 4px;
  148. .window-frame {
  149. border-radius:3px;
  150. }
  151. }
  152. /*********
  153. * Cards *
  154. *********/
  155. .deck {
  156. background-color: darken($bg_color, 8%);
  157. }
  158. .card {
  159. background-color: $base_color;
  160. border: none;
  161. box-shadow: 0 0 0 1px transparentize(black, 0.95),
  162. 0 3px 3px transparentize(black, 0.8);
  163. transition: all 150ms ease-in-out;
  164. }
  165. .card.collapsed {
  166. background-color: darken($base_color, 5%);
  167. box-shadow: 0 0 0 1px transparentize(black, 0.95),
  168. 0 1px 2px transparentize(black, 0.8);
  169. }
  170. /*********
  171. * Noise *
  172. *********/
  173. NoiseLibraryWindow {
  174. border-radius: 0 0 4px 4px;
  175. .action-bar {
  176. border-radius: 0 0 4px 4px;
  177. }
  178. .window-frame {
  179. border-radius:3px;
  180. }
  181. }
  182. /********
  183. * Snap *
  184. ********/
  185. SnapMainWindow,
  186. SnapSnapWindow {
  187. .take-button {
  188. border-radius: 0;
  189. }
  190. }
  191. /*******************
  192. * Photos/Shotwell *
  193. *******************/
  194. DirectWindow,
  195. LibraryWindow {
  196. .the-button-in-the-combobox {
  197. background: none;
  198. }
  199. }
  200. .checkerboard-layout {
  201. background-color: $bg_color;
  202. background-image: linear-gradient(45deg,
  203. transparentize(black, 0.9) 25%,
  204. transparent 25%,
  205. transparent 75%,
  206. transparentize(black, 0.9) 75%,
  207. transparentize(black, 0.9)),
  208. linear-gradient(45deg,
  209. transparentize(black, 0.9) 25%,
  210. transparent 25%,
  211. transparent 75%,
  212. transparentize(black, 0.9) 75%,
  213. transparentize(black, 0.9));
  214. background-size: 24px 24px;
  215. background-position: 0 0, 12px 12px
  216. }
  217. .checkboard-layout .item {
  218. background-color: $fg_color;
  219. }
  220. /*********
  221. * Avatar *
  222. *********/
  223. .avatar {
  224. border: 1px solid transparentize(#000, 0.77);
  225. border-radius: 50%;
  226. box-shadow:
  227. inset 0 0 0 1px transparentize(#fff, 0.95),
  228. inset 0 1px 0 0 transparentize(#fff, 0.55),
  229. inset 0 -1px 0 0 transparentize(#fff, 0.85),
  230. 0 1px 3px transparentize(#000, 0.88),
  231. 0 1px 2px transparentize(#000, 0.77);
  232. }
  233. /**level bars**/
  234. .sidebar.source-list.view {
  235. &.level-bar {
  236. &, &:selected, &:selected:focus {
  237. background: linear-gradient(transparentize(#fff, 0.86), transparentize(#fff, 0.86)) ;
  238. border: 1px solid transparentize(black, 0.86);
  239. box-shadow: 0 1px 0 transparentize(#000, 0.75);
  240. border-radius: 2px;
  241. }
  242. }
  243. &.fill-block {
  244. border: none;
  245. &, &:hover, &:selected, &:selected:focus {
  246. background: linear-gradient($selected_bg_color, $selected_bg_color);
  247. }
  248. }
  249. }
  250. /**************************
  251. * Colors in context menu *
  252. **************************/
  253. checkbutton.color-button {
  254. border: 1px solid $borders_color;
  255. border-radius: 100px;
  256. background-clip: border-box;
  257. padding: 0;
  258. margin: 2px 1px;
  259. > check {
  260. -gtk-icon-source: none;
  261. background: none;
  262. margin-right: 0;
  263. padding: 2px;
  264. }
  265. &.none {
  266. > check {
  267. background-color: transparent;
  268. border-radius: 100px;
  269. -gtk-icon-source: -gtk-icontheme("close-symbolic");
  270. }
  271. }
  272. }
  273. radiobutton.color-button {
  274. > radio {
  275. -gtk-icon-source: none;
  276. margin-right: 0;
  277. border: 1px solid rgba(black, 0.15);
  278. border-radius: 100px;
  279. background-clip: border-box;
  280. }
  281. &:active > radio {
  282. border: 1px solid rgba(black, 0.35);
  283. }
  284. }
  285. .color-button {
  286. check,
  287. check:checked,
  288. radio,
  289. radio:checked, {
  290. background-image: none;
  291. border: 1px solid rgba(black, 0.2);
  292. border-radius: 50%;
  293. color: $base_color;
  294. -gtk-icon-source: -gtk-icontheme("check-active-symbolic");
  295. }
  296. &.red check,
  297. &.red radio,
  298. &.strawberry check,
  299. &.strawberry radio {
  300. background-color: #{'@STRAWBERRY_300'};
  301. -gtk-icon-shadow: 0 1px 1px #{'@STRAWBERRY_500'};
  302. }
  303. &.orange check,
  304. &.orange radio {
  305. background-color: #{'@ORANGE_300'};
  306. -gtk-icon-shadow: 0 1px 1px #{'@ORANGE_500'};
  307. }
  308. &.yellow check,
  309. &.yellow radio,
  310. &.banana check,
  311. &.banana radio {
  312. background-color: #{'@BANANA_500'};
  313. -gtk-icon-shadow: 0 1px 1px #{'@BANANA_700'};
  314. }
  315. &.green check,
  316. &.green radio,
  317. &.lime check,
  318. &.lime radio {
  319. background-color: #{'@LIME_500'};
  320. -gtk-icon-shadow: 0 1px 1px #{'@LIME_700'};
  321. }
  322. &.blue check,
  323. &.blue radio,
  324. &.blueberry check,
  325. &.blueberry radio {
  326. background-color: #{'@BLUEBERRY_500'};
  327. -gtk-icon-shadow: 0 1px 1px #{'@BLUEBERRY_700'};
  328. }
  329. &.purple check,
  330. &.purple radio,
  331. &.grape check,
  332. &.grape radio {
  333. background-color: #{'@GRAPE_500'};
  334. -gtk-icon-shadow: 0 1px 1px #{'@GRAPE_700'};
  335. }
  336. &.brown check,
  337. &.brown radio,
  338. &.cocoa check,
  339. &.cocoa radio {
  340. background-color: #{'@COCOA_300'};
  341. -gtk-icon-shadow: 0 1px 1px #{'@COCOA_500'};
  342. }
  343. &.mint check,
  344. &.mint radio {
  345. background-color: #{'@MINT_500'};
  346. -gtk-icon-shadow: 0 1px 1px #{'@MINT_700'};
  347. }
  348. &.pink check,
  349. &.pink radio,
  350. &.bubblegum check,
  351. &.bubblegum radio {
  352. background-color: #{'@BUBBLEGUM_500'};
  353. -gtk-icon-shadow: 0 1px 1px #{'@BUBBLEGUM_700'};
  354. }
  355. &.slate check,
  356. &.slate radio {
  357. background-color: #{'@SLATE_300'};
  358. -gtk-icon-shadow: 0 1px 1px #{'@SLATE_500'};
  359. }
  360. &.auto radio {
  361. background-image: url("assets/color-button-auto.png");
  362. background-position: -1px -1px;
  363. background-repeat: no-repeat;
  364. background-size: calc(100% + 2px);
  365. }
  366. }