gtk-widgets.css 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468
  1. /* default */
  2. * {
  3. engine: none;
  4. -GtkArrow-arrow-scaling: 0.55;
  5. -GtkButton-child-displacement-x: 0;
  6. -GtkButton-child-displacement-y: 0;
  7. -GtkButton-default-border: 0;
  8. -GtkButton-image-spacing: 0;
  9. -GtkButton-inner-border: 1;
  10. -GtkButton-interior-focus: true;
  11. -GtkCheckButton-indicator-size: 16;
  12. -GtkCheckMenuItem-indicator-size: 12;
  13. -GtkExpander-expander-size: 8;
  14. -GtkHTML-link-color: @link_color;
  15. -GtkIMHtml-hyperlink-color: @link_color;
  16. -GtkMenu-horizontal-padding: 0;
  17. -GtkMenu-vertical-padding: 0;
  18. -GtkNotebook-initial-gap: 0;
  19. -GtkPaned-handle-size: 5;
  20. -GtkProgressBar-min-horizontal-bar-height: 5;
  21. -GtkProgressBar-min-vertical-bar-width: 5;
  22. -GtkRange-slider-width: 12;
  23. -GtkRange-stepper-spacing: 0;
  24. -GtkRange-trough-border: 0;
  25. -GtkRange-trough-under-steppers: 1;
  26. -GtkScrollbar-has-backward-stepper: false;
  27. -GtkScrollbar-has-forward-stepper: false;
  28. -GtkScrollbar-min-slider-length: 50;
  29. -GtkScrolledWindow-scrollbar-spacing: 0;
  30. -GtkScrolledWindow-scrollbars-within-bevel: 0;
  31. -GtkStatusbar-shadow-type: none;
  32. -GtkTextView-error-underline-color: @error_color;
  33. -GtkToolButton-icon-spacing: 6;
  34. -GtkToolItemGroup-expander-size: 8;
  35. -GtkTreeView-expander-size: 8;
  36. -GtkWidget-focus-line-width: 1;
  37. -GtkWidget-focus-padding: 2;
  38. -GtkWidget-link-color: @link_color;
  39. -GtkWidget-visited-link-color: @link_color;
  40. -GtkWindow-resize-grip-height: 0;
  41. -GtkWindow-resize-grip-width: 0;
  42. -WnckTasklist-fade-overlay-rect: 0;
  43. outline-color: alpha(@selected_bg_color, 0.5);
  44. outline-style: solid;
  45. outline-offset: 0;
  46. }
  47. /***************
  48. * base states *
  49. ***************/
  50. .background {
  51. background-color: @bg_color;
  52. color: @fg_color;
  53. }
  54. * {
  55. /* inherit colors from parent */
  56. background-color: inherit;
  57. color: inherit;
  58. }
  59. *:selected,
  60. *:selected:focus {
  61. background-color: @selected_bg_color;
  62. color: @selected_fg_color;
  63. }
  64. *:insensitive,
  65. *:insensitive:insensitive {
  66. color: mix(@fg_color, @bg_color, 0.3);
  67. }
  68. /* apply effects to insensitive and prelit images */
  69. *:insensitive {
  70. -gtk-image-effect: dim;
  71. }
  72. *:hover {
  73. -gtk-image-effect: highlight;
  74. }
  75. .gtkstyle-fallback {
  76. background-color: @bg_color;
  77. color: @fg_color;
  78. }
  79. .gtkstyle-fallback:prelight {
  80. background-color: shade(@bg_color, 1.1);
  81. color: @fg_color;
  82. }
  83. .gtkstyle-fallback:active {
  84. background-color: shade(@_color, 0.9);
  85. color: @fg_color;
  86. }
  87. .gtkstyle-fallback:insensitive {
  88. background-color: shade(shade(@bg_color, 0.95), 1.05);
  89. color: mix(@fg_color, @bg_color, 0.7);
  90. }
  91. .gtkstyle-fallback:selected {
  92. background-color: @selected_bg_color;
  93. color: @selected_fg_color;
  94. }
  95. GtkImage,
  96. GtkImage:insensitive,
  97. GtkLabel,
  98. GtkLabel:insensitive,
  99. GtkBox,
  100. GtkBox:insensitive,
  101. GtkOverlay,
  102. GtkGrid,
  103. GtkGrid:insensitive {
  104. background-color: transparent;
  105. }
  106. /***********
  107. * gtkhtml *
  108. ***********/
  109. GtkHTML {
  110. background-color: @base_color;
  111. color: @text_color;
  112. }
  113. /************
  114. * expander *
  115. ************/
  116. .expander {
  117. color: alpha(@fg_color, 0.7);
  118. }
  119. .expander:hover {
  120. color: alpha(@fg_color, 0.8);
  121. }
  122. .expander:active {
  123. color: alpha(currentColor, 0.9);
  124. }
  125. /*********
  126. * frame *
  127. *********/
  128. .frame {
  129. border-color: shade(@theme_bg_color, 0.8);
  130. }
  131. .frame.flat {
  132. border: none;
  133. }
  134. /*******************
  135. * scrolled window *
  136. *******************/
  137. GtkScrolledWindow.frame {
  138. border-width: 1px;
  139. border-style: solid;
  140. border-color: @bg_color;
  141. border-radius: 0;
  142. }
  143. /* avoid double borders when a viewport is
  144. * packed into a GtkScrolledWindow */
  145. GtkScrolledWindow GtkViewport.frame {
  146. border-style: none;
  147. }
  148. /************
  149. * iconview *
  150. ************/
  151. GtkIconView.view.cell:hover {
  152. border: none;
  153. border-radius: 5px;
  154. background-color: shade(@bg_color, 0.9);
  155. background-image: none;
  156. color: @fg_color;
  157. }
  158. GtkIconView.view.cell:selected,
  159. GtkIconView.view.cell:selected:focus {
  160. border-width: 1px;
  161. border-style: solid;
  162. border-color: shade(@bg_color, 0.8);
  163. border-radius: 5px;
  164. background-color: shade(@bg_color, 0.8);
  165. background-image: none;
  166. color: @fg_color;
  167. }
  168. .content-view.view.rubberband,
  169. .view.rubberband,
  170. .rubberband {
  171. border-width: 1px;
  172. border-style: solid;
  173. border-color: shade(@selected_fg_color, 0.9);
  174. border-radius: 0;
  175. background-color: alpha(@selected_fg_color, 0.3);
  176. }
  177. /*****************
  178. * miscellaneous *
  179. *****************/
  180. .floating-bar {
  181. border-width: 1px;
  182. border-style: solid;
  183. border-color: @bg_color;
  184. border-radius: 0px;
  185. background-color: @bg_color;
  186. background-image: none;
  187. color: @fg_color;
  188. }
  189. .floating-bar.top {
  190. border-top-width: 0;
  191. border-top-right-radius: 0;
  192. border-top-left-radius: 0;
  193. }
  194. .floating-bar.right {
  195. border-right-width: 0;
  196. border-top-right-radius: 0;
  197. border-bottom-right-radius: 0;
  198. }
  199. .floating-bar.bottom {
  200. border-bottom-width: 0;
  201. border-bottom-right-radius: 0;
  202. border-bottom-left-radius: 0;
  203. }
  204. .floating-bar.left {
  205. border-left-width: 0;
  206. border-bottom-left-radius: 0;
  207. border-top-left-radius: 0;
  208. }
  209. .floating-bar .button {
  210. -GtkButton-image-spacing: 0;
  211. -GtkButton-inner-border: 0;
  212. border-style: none;
  213. background-color: transparent;
  214. background-image: none;
  215. }
  216. .view.dim-label,
  217. .dim-label {
  218. color: alpha(currentColor, 0.5);
  219. }
  220. .dnd {
  221. border-width: 1px;
  222. border-style: solid;
  223. border-color: shade(@selected_fg_color, 0.9);
  224. }
  225. .grip {
  226. background-color: transparent;
  227. }
  228. .arrow {
  229. color: alpha(@fg_color, 0.9);
  230. }
  231. /*************
  232. * statusbar *
  233. *************/
  234. GtkStatusbar {
  235. padding: 4px;
  236. color: @fg_color;
  237. }
  238. GtkStatusbar .button {
  239. color: @fg_color;
  240. border: none;
  241. }
  242. GtkStatusbar .button:hover,
  243. GtkStatusbar .button:active,
  244. GtkStatusbar .button:active:hover {
  245. transition: none;
  246. color: @selected_fg_color;
  247. background-color: @bg_color;
  248. }
  249. /************
  250. * textview *
  251. ************/
  252. GtkTextView {
  253. background-color: @base_color;
  254. color: @text_color;
  255. }
  256. /***********
  257. * tooltip *
  258. ***********/
  259. .tooltip {
  260. border-width: 1px;
  261. border-style: solid;
  262. border-color: @tooltip_bg_color;
  263. border-radius: 3px;
  264. background-color: @tooltip_bg_color;
  265. background-image: none;
  266. color: @tooltip_fg_color;
  267. }
  268. .tooltip.background {
  269. background-color: alpha(@tooltip_bg_color,0.8);
  270. background-clip: padding-box;
  271. }
  272. .tooltip.window-frame.csd {
  273. border-radius: 3px;
  274. background-color: transparent;
  275. box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.15);
  276. }
  277. .tooltip * {
  278. padding: 2px;
  279. background-color: transparent;
  280. color: inherit;
  281. }
  282. /************
  283. * treeview *
  284. ************/
  285. GtkTreeView {
  286. -GtkTreeView-vertical-separator: 6;
  287. -GtkWidget-focus-line-width: 1;
  288. -GtkWidget-focus-padding: 1;
  289. }
  290. GtkTreeView {
  291. border: 1px solid @bg_color;
  292. }
  293. GtkTreeView.view:selected {
  294. border: none;
  295. }
  296. GtkTreeView.dnd {
  297. padding: 6px 6px;
  298. border-width: 1px;
  299. border-style: solid;
  300. border-color: shade(@selected_bg_color, 0.9);
  301. border-radius: 0;
  302. }
  303. GtkTreeView .entry {
  304. padding: 6px 6px;
  305. border-radius: 0;
  306. background-color: @base_color;
  307. background-image: none;
  308. }
  309. /************
  310. * viewport *
  311. ************/
  312. GtkViewport.frame {
  313. border-width: 0;
  314. }
  315. .view {
  316. background-color: @base_color;
  317. color: @text_color;
  318. }
  319. .view:insensitive,
  320. .view:insensitive:insensitive {
  321. color: mix(@bg_color,@text_color, 0.4);
  322. }
  323. .view:selected,
  324. .view:selected:focus {
  325. background-color: @selected_bg_color;
  326. color: @selected_fg_color; /*TreeView selected for dconf and sidebars and stuff*/
  327. }
  328. /*************************
  329. * touch text selections *
  330. *************************/
  331. GtkBubbleWindow {
  332. border-radius: 0px;
  333. background-clip: border-box;
  334. }
  335. GtkBubbleWindow.osd.background {
  336. background-color: @osd_bg;
  337. }
  338. GtkBubbleWindow .toolbar {
  339. background-color: transparent;
  340. }
  341. .overshoot.top {
  342. background-image: -gtk-gradient(radial, center top, 0, center top, 0.6, from(rgba(55, 93, 114, 0.20)), to(rgba(255,93,115, 0)));
  343. background-size: 100% 60%;
  344. background-repeat: no-repeat;
  345. background-position: center top;
  346. background-color: transparent;
  347. border: none;
  348. box-shadow: none; }
  349. .overshoot.bottom {
  350. background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(rgba(255,93,115,0.2)), to(rgba(255,93,115, 0)));
  351. background-size: 100% 60%;
  352. background-repeat: no-repeat;
  353. background-position: center bottom;
  354. background-color: transparent;
  355. border: none;
  356. box-shadow: none; }
  357. .overshoot.left {
  358. background-image: -gtk-gradient(radial, left center, 0, left center, 0.6, from(rgba(255,93,115,0.2)), to(rgba(255,93,115, 0)));
  359. background-size: 60% 100%;
  360. background-repeat: no-repeat;
  361. background-position: left center;
  362. background-color: transparent;
  363. border: none;
  364. box-shadow: none; }
  365. .overshoot.right {
  366. background-image: -gtk-gradient(radial, right center, 0, right center, 0.6, from(rgba(255,93,115,0.2)), to(rgba(255,93,115, 0)));
  367. background-size: 60% 100%;
  368. background-repeat: no-repeat;
  369. background-position: right center;
  370. background-color: transparent;
  371. border: none;
  372. box-shadow: none; }
  373. .undershoot.top {
  374. background-color: transparent;
  375. background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
  376. padding-top: 1px;
  377. background-size: 10px 1px;
  378. background-repeat: repeat-x;
  379. background-origin: content-box;
  380. background-position: center top; }
  381. .undershoot.bottom {
  382. background-color: transparent;
  383. background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
  384. padding-bottom: 1px;
  385. background-size: 10px 1px;
  386. background-repeat: repeat-x;
  387. background-origin: content-box;
  388. background-position: center bottom; }
  389. .undershoot.left {
  390. background-color: transparent;
  391. background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
  392. padding-left: 1px;
  393. background-size: 1px 10px;
  394. background-repeat: repeat-y;
  395. background-origin: content-box;
  396. background-position: left center; }
  397. .undershoot.right {
  398. background-color: transparent;
  399. background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
  400. padding-right: 1px;
  401. background-size: 1px 10px;
  402. background-repeat: repeat-y;
  403. background-origin: content-box;
  404. background-position: right center; }