_granite.scss 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. /************
  2. * Popovers *
  3. ************/
  4. GraniteWidgetsPopOver {
  5. -GraniteWidgetsPopOver-arrow-width: 21;
  6. -GraniteWidgetsPopOver-arrow-height: 10;
  7. -GraniteWidgetsPopOver-border-radius: 8px;
  8. -GraniteWidgetsPopOver-border-width: 0;
  9. -GraniteWidgetsPopOver-shadow-size: 12;
  10. border: 1px solid $base_color;
  11. background: $base_color;
  12. color: $fg_color;
  13. .button {
  14. background-image: none;
  15. background: none;
  16. border: none;
  17. &:active,
  18. &:active:hover, {
  19. color: $selected_bg_color;
  20. }
  21. }
  22. > .frame {
  23. border:none;
  24. }
  25. .sidebar.view {
  26. border: none;
  27. background: none;
  28. }
  29. }
  30. GraniteWidgetsStaticNotebook .frame {
  31. border: none;
  32. }
  33. .popover_bg {
  34. background-color: $base_color;
  35. background-image: none;
  36. border: 1px solid $base_color;
  37. color: $fg_color;
  38. }
  39. /***********
  40. * Welcome *
  41. **********/
  42. GraniteWidgetsWelcome {
  43. background-color: $base_color;
  44. GtkLabel {
  45. color: $fg_color;
  46. }
  47. .h1,.h3 {
  48. color: transparentize($fg_color, 0.2);
  49. }
  50. }
  51. /**************
  52. * Source List *
  53. ***************/
  54. .source-list {
  55. -GtkTreeView-horizontal-separator: 1px;
  56. -GtkTreeView-vertical-separator: 6px;
  57. background-color: $bg_color;
  58. border: solid $borders_color;
  59. color: $fg_color;
  60. border-right-width: 1px;
  61. &:backdrop {}
  62. .category-expander {
  63. color: transparent;
  64. }
  65. .badge {
  66. background-image: none;
  67. background-color: transparentize(black, 0.6);
  68. color: $bg_color;
  69. border-radius: 10px;
  70. padding: 0 6px;
  71. margin: 0 3px;
  72. border-width: 0;
  73. &:selected:backdrop,
  74. &:selected:hover:backdrop {
  75. background-color: transparentize(black, 0.8);
  76. color: darken($bg_color, 5%);
  77. }
  78. }
  79. row,
  80. .list-row {
  81. border:none;
  82. padding: 0;
  83. > GtkLabel,
  84. > label {
  85. padding-left: 6px;
  86. padding-right: 6px;
  87. }
  88. }
  89. }
  90. /**************
  91. * Text Styles *
  92. **************/
  93. .h1 {
  94. font-size: 24px;
  95. }
  96. .h2 {
  97. font-weight: 300;
  98. font-size: 18px;
  99. }
  100. .h3 {
  101. font-size: 11px;
  102. }
  103. .h4,
  104. .category-label {
  105. font-size: 12px;
  106. padding: 6px;
  107. color: transparentize($fg_color, 0.7);
  108. font-weight: bold;
  109. text-shadow: 0 1px transparentize(white,0.8);
  110. }
  111. /**************
  112. * Storage Bar *
  113. **************/
  114. .storage-bar {
  115. .trough {
  116. border: none;
  117. box-shadow:0 1px 0 0 $bottom_highlight;
  118. background-image: none;
  119. background-color: transparent;
  120. padding: 8px 6px;
  121. }
  122. .fill-block {
  123. background-color: $yellow;
  124. border:none;
  125. box-shadow: inset 0 1px 0 0 transparentize(black, 0.9), inset 0 -1px 0 0 transparentize(black, 0.9);
  126. transition: all 200ms ease-in-out;
  127. padding: 8px 6px;
  128. &:first-child {
  129. border-top-left-radius: 4px;
  130. border-bottom-left-radius: 4px;
  131. border-left-width: 1px;
  132. box-shadow: inset 0 1px 0 0 transparentize(black, 0.9),
  133. inset 1px 0 0 transparentize(black, 0.9),
  134. inset 0 -1px 0 0 transparentize(black, 0.9);
  135. }
  136. &:last-child {
  137. border-top-right-radius: 4px;
  138. border-bottom-right-radius: 4px;
  139. box-shadow: inset 0 1px 0 0 transparentize(black, 0.9),
  140. inset -1px 0 0 transparentize(black, 0.9),
  141. inset 0 -1px 0 0 transparentize(black, 0.9);
  142. }
  143. &.empty-block {
  144. background-color: $base_color;
  145. }
  146. &.app {
  147. background-color: $blue;
  148. }
  149. &.audio {
  150. background-color: $orange;
  151. }
  152. &.photo {
  153. background-color: $red;
  154. }
  155. &.video {
  156. background-color: $purple;
  157. }
  158. .legend {
  159. padding: 12px;
  160. border-radius: 4px;
  161. }
  162. }
  163. }