button.css 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306
  1. /**********
  2. * button *
  3. **********/
  4. .button {
  5. padding: 6px 8px;
  6. border-radius: 3px;
  7. /* border-width: 1px;
  8. border-style: solid;
  9. border-color: transparent;
  10. border-top-color: alpha(white,0.2);
  11. border-bottom-color: alpha(black,0.2);*/
  12. background-color: @base_color;
  13. background-image: none;
  14. color: @text_color;
  15. font: bold;
  16. -GtkWidget-focus-padding: 1;
  17. -GtkWidget-focus-line-width: 0;
  18. }
  19. .notebook .button,
  20. .list .button,
  21. .view .button {
  22. border-color: alpha(black,0.2);
  23. }
  24. .button:hover {
  25. border-color: transparent;
  26. border-top-color: alpha(white,0.2);
  27. border-bottom-color: alpha(black,0.2);
  28. background-color: @selected_bg_color;
  29. color: @selected_fg_color;
  30. }
  31. .button:active,
  32. .button:active:hover,
  33. .button:checked:checked {
  34. border-color: transparent;
  35. border-top-color: alpha(white,0.2);
  36. border-bottom-color: alpha(black,0.2);
  37. background-color: shade(@selected_bg_color, 0.9);
  38. color: @selected_fg_color;
  39. }
  40. .button:insensitive {
  41. background-color: mix(@bg_color,@base_color, 0.5);
  42. background-image: none;
  43. }
  44. /****************
  45. * "flat" button *
  46. *****************/
  47. .button.flat,
  48. .action-bar .button,
  49. .inline-toolbar .button,
  50. .osd .button,
  51. .osd.button {
  52. border: none;
  53. background-color: transparent;
  54. background-image: none;
  55. color: @fg_color;
  56. font: bold;
  57. }
  58. .button.flat:hover,
  59. .action-bar .button:hover,
  60. .inline-toolbar .button:hover,
  61. .action-bar .button:hover {
  62. border: none;
  63. transition: color 150ms ease-in;
  64. color: @selected_bg_color;
  65. }
  66. .button.flat:active,
  67. .button.flat:active:focus,
  68. .button.flat:checked,
  69. .button.flat:active:checked,
  70. .button.flat:active:checked:focus,
  71. .action-bar .button:checked,
  72. .action-bar .button:active {
  73. border: none;
  74. transition: color 150ms ease-in;
  75. color: shade(@selected_bg_color, 0.9);
  76. background-color: transparent;
  77. }
  78. .button.flat:active:hover {
  79. border: none;
  80. transition: color 150ms ease-in;
  81. color: @selected_bg_color;
  82. background-color: transparent;
  83. }
  84. /****************
  85. * linked button *
  86. *****************/
  87. /* middle button */
  88. .linked .entry,
  89. .linked .button,
  90. .linked .button:active,
  91. .linked .button:active:hover,
  92. .linked .button:focus,
  93. .linked .button:focus:active,
  94. .linked .button:insensitive,
  95. .linked > GtkComboBox > .button:dir(ltr),
  96. .linked > GtkComboBox > .button:dir(ltr):focus {
  97. border-radius: 0;
  98. }
  99. /* leftmost button */
  100. .linked .entry:first-child,
  101. .linked .button:first-child,
  102. .linked .button:active:first-child,
  103. .linked .button:active:hover:first-child,
  104. .linked .button:focus:first-child,
  105. .linked .button:focus:active:first-child,
  106. .linked .button:insensitive:first-child,
  107. .linked > GtkComboBox:first-child > .button,
  108. .linked > GtkComboBox:first-child > .button:focus {
  109. border-right-width: 0;
  110. border-radius: 3px;
  111. border-top-right-radius: 0;
  112. border-bottom-right-radius: 0;
  113. }
  114. /* rightmost button */
  115. .linked .entry:last-child,
  116. .linked .button:last-child,
  117. .linked .button:active:last-child,
  118. .linked .button:active:hover:last-child,
  119. .linked .button:focus:last-child,
  120. .linked .button:focus:active:last-child,
  121. .linked .button:insensitive:last-child,
  122. .linked > GtkComboBox:last-child > .button,
  123. .linked > GtkComboBox:last-child > .button:focus {
  124. border-left-width: 0;
  125. border-radius: 3px;
  126. border-bottom-left-radius: 0;
  127. border-top-left-radius: 0;
  128. }
  129. /* linked single button */
  130. .linked .entry:only-child,
  131. .linked .button:only-child,
  132. .linked .button:active:only-child,
  133. .linked .button:active:hover:only-child,
  134. .linked .button:focus:only-child,
  135. .linked .button:focus:active:only-child,
  136. .linked .button:insensitive:only-child,
  137. .linked.vertical > GtkComboBox:only-child > .button,
  138. .linked.vertical > GtkComboBox:only-child > .button:focus {
  139. border-radius: 3px;
  140. }
  141. /* middle button (vertical) */
  142. .linked.vertical .entry,
  143. .linked.vertical .button,
  144. .linked.vertical .button:active,
  145. .linked.vertical .button:active:hover,
  146. .linked.vertical .button:focus,
  147. .linked.vertical .button:focus:active,
  148. .linked.vertical .button:insensitive,
  149. .linked.vertical > GtkComboBox > .button:dir(ltr),
  150. .linked.vertical > GtkComboBox > .button:dir(ltr):focus {
  151. border-bottom-width: 0;
  152. border-radius: 0;
  153. }
  154. /* leftmost button (vertical) */
  155. .linked.vertical .entry:first-child,
  156. .linked.vertical .button:first-child,
  157. .linked.vertical .button:active:first-child,
  158. .linked.vertical .button:active:hover:first-child,
  159. .linked.vertical .button:focus:first-child,
  160. .linked.vertical .button:focus:active:first-child,
  161. .linked.vertical .button:insensitive:first-child,
  162. .linked.vertical > GtkComboBox:first-child > .button,
  163. .linked.vertical > GtkComboBox:first-child > .button:focus {
  164. border-bottom-width: 0;
  165. border-radius: 3px;
  166. border-bottom-right-radius: 0;
  167. border-bottom-left-radius: 0;
  168. }
  169. /* rightmost button (vertical) */
  170. .linked.vertical .entry:last-child,
  171. .linked.vertical .button:last-child,
  172. .linked.vertical .button:active:last-child,
  173. .linked.vertical .button:active:hover:last-child,
  174. .linked.vertical .button:focus:last-child,
  175. .linked.vertical .button:focus:active:last-child,
  176. .linked.vertical .button:insensitive:last-child,
  177. .linked.vertical > GtkComboBox:last-child > .button,
  178. .linked.vertical > GtkComboBox:last-child > .button:focus {
  179. border-radius: 3px;
  180. border-top-left-radius: 0;
  181. border-top-right-radius: 0;
  182. }
  183. /* linked single button (vertical) */
  184. .linked.vertical .entry:only-child,
  185. .linked.vertical .button:only-child,
  186. .linked.vertical .button:active:only-child,
  187. .linked.vertical .button:active:hover:only-child,
  188. .linked.vertical .button:focus:only-child,
  189. .linked.vertical .button:focus:active:only-child,
  190. .linked.vertical .button:insensitive:only-child,
  191. .linked.vertical > GtkComboBox:only-child > .button,
  192. .linked.vertical > GtkComboBox:only-child > .button:focus {
  193. border-radius: 3px;
  194. }
  195. .linked.vertical .entry:first-child {
  196. border: 1px solid alpha(black,0.2);
  197. border-bottom-width: 0px;
  198. }
  199. .linked.vertical .entry:last-child {
  200. border: 1px solid alpha(black,0.2);
  201. }
  202. /******************************
  203. * destructive action buttons *
  204. ******************************/
  205. .destructive-action.button,
  206. .titlebar .destructive-action.button {
  207. border-color: transparent;
  208. border-top-color: alpha(white,0.2);
  209. border-bottom-color: alpha(black,0.2);
  210. background-color: @error_color;
  211. color: @selected_fg_color;
  212. }
  213. .destructive-action.button:hover,
  214. .titlebar .destructive-action.button:hover{
  215. background-color: @error_color;
  216. color: @selected_fg_color;
  217. }
  218. .destructive-action.button:active,
  219. .titlebar .destructive-action.button:active {
  220. background-color: shade(@error_color,0.9);
  221. color: @selected_fg_color;
  222. }
  223. .destructive-action.button:hover:active,
  224. .titlebar .destructive-action.button:hover:active {
  225. background-color: shade(@error_color,0.9);
  226. color: @selected_fg_color;
  227. }
  228. .destructive-action.button:insensitive,
  229. .titlebar .destructive-action.button:insensitive {
  230. background-color: mix(@bg_color,@error,0.6);
  231. }
  232. /******************************
  233. * suggested action buttons *
  234. ******************************/
  235. .suggested-action.button,
  236. .list .suggested-action.button,
  237. .titlebar .suggested-action.button {
  238. border-color: transparent;
  239. border-top-color: alpha(white,0.2);
  240. border-bottom-color: alpha(black,0.2);
  241. background-color: @cyan;
  242. color: @selected_fg_color;
  243. }
  244. .suggested-action.button:hover,
  245. .list .suggested-action.button:hover,
  246. .titlebar .suggested-action.button:hover{
  247. background-color: @cyan;
  248. color: @selected_fg_color;
  249. }
  250. .suggested-action.button:active,
  251. .list .suggested-action.button:active,
  252. .titlebar .suggested-action.button:active {
  253. background-color: shade(@cyan,0.9);
  254. color: @selected_fg_color;
  255. }
  256. .suggested-action.button:hover:active,
  257. .list .suggested-action.button:hover:active,
  258. .titlebar .suggested-action.button:hover:active {
  259. background-color: shade(@cyan,0.9);
  260. color: @selected_fg_color;
  261. }
  262. .suggested-action.button:insensitive,
  263. .titlebar .suggested-action.button:insensitive {
  264. background-color: mix(@bg_color,@cyan,0.6);
  265. }
  266. /********************
  267. * circular buttons *
  268. ********************/
  269. .circular-button.button {
  270. border: none;
  271. border-radius: 20px;
  272. outline-radius: 20px;
  273. box-shadow: inset 0px -1px 0px 0px rgba(0,0,0,0.2),inset 0px 1px 0px 0px rgba(255,255,255,0.2);
  274. }