_notebooks.scss 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273
  1. /*************
  2. * Notebooks *
  3. *************/
  4. notebook {
  5. > header {
  6. padding: 1px;
  7. border-color: $borders_color;
  8. border-width: 0px;
  9. background-color: $bg_color;
  10. &:backdrop {
  11. border-color: $backdrop_borders_color;
  12. background-color: $backdrop_bg_color;
  13. }
  14. tabs { margin: -1px; }
  15. &.top {
  16. border-bottom-style: solid;
  17. > tabs {
  18. margin-bottom: -2px;
  19. > tab {
  20. &:backdrop { box-shadow: none; }
  21. &:checked {
  22. background-color: $base_color;
  23. &:hover{background-color: $base_color;}
  24. }
  25. }
  26. }
  27. }
  28. &.bottom {
  29. border-top-style: solid;
  30. > tabs {
  31. margin-top: -2px;
  32. > tab {
  33. &:backdrop { box-shadow: none; }
  34. &:checked { background-color: $base_color; }
  35. }
  36. }
  37. }
  38. &.left {
  39. border-right-style: solid;
  40. > tabs {
  41. margin-right: -2px;
  42. > tab {
  43. &:backdrop { box-shadow: none; }
  44. &:checked { background-color: $base_color; }
  45. }
  46. }
  47. }
  48. &.right {
  49. border-left-style: solid;
  50. > tabs {
  51. margin-left: -2px;
  52. > tab {
  53. &:backdrop { box-shadow: none; }
  54. &:checked { background-color: $base_color; }
  55. }
  56. }
  57. }
  58. &.top > tabs > arrow {
  59. @extend %notebook_vert_arrows;
  60. border-top-style: none;
  61. }
  62. &.bottom > tabs > arrow {
  63. @extend %notebook_vert_arrows;
  64. border-bottom-style: none;
  65. }
  66. @at-root %notebook_vert_arrows {
  67. margin-left: -5px;
  68. margin-right: -5px;
  69. padding-left: 4px;
  70. padding-right: 4px;
  71. &.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
  72. &.up { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
  73. }
  74. &.left > tabs > arrow {
  75. @extend %notebook_horz_arrows;
  76. border-left-style: none;
  77. }
  78. &.right > tabs > arrow {
  79. @extend %notebook_horz_arrows;
  80. border-right-style: none;
  81. }
  82. @at-root %notebook_horz_arrows {
  83. margin-top: -5px;
  84. margin-bottom: -5px;
  85. padding-top: 4px;
  86. padding-bottom: 4px;
  87. &.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
  88. &.up { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
  89. }
  90. > tabs > arrow {
  91. @extend %button_basic;
  92. @extend %button_basic.flat;
  93. min-height: 16px;
  94. min-width: 16px;
  95. border-radius: 0;
  96. &:hover:not(:active):not(:backdrop) {
  97. background-clip: padding-box;
  98. background-image: none;
  99. background-color: transparentize(white, 0.7);
  100. border-color: transparent;
  101. box-shadow: none;
  102. }
  103. &:disabled { @include button(undecorated); }
  104. }
  105. tab {
  106. min-height: 30px;
  107. min-width: 30px;
  108. padding: 3px 12px;
  109. outline-offset: -5px;
  110. color: $insensitive_fg_color;
  111. font-weight: bold;
  112. border-width: 1px; // for reorderable tabs
  113. border-color: transparent; //
  114. &:hover {
  115. color: mix($insensitive_fg_color, $fg_color, 50%);
  116. &.reorderable-page {
  117. border-color: transparentize($borders_color, 0.7);
  118. background-color: transparentize($bg_color, 0.8);
  119. }
  120. }
  121. &:backdrop {
  122. color: mix($backdrop_fg_color, $backdrop_bg_color, 60%);
  123. &.reorderable-page {
  124. border-color: transparent;
  125. background-color: transparent;
  126. }
  127. }
  128. &:checked {
  129. color: $fg_color;
  130. &.reorderable-page {
  131. border-color: transparentize($borders_color, 0.5);
  132. background-color: transparentize($bg_color, 0.5);
  133. &:hover { background-color: transparentize($bg_color, 0.3); }
  134. }
  135. }
  136. &:backdrop:checked {
  137. color: $backdrop_fg_color;
  138. &.reorderable-page {
  139. border-color: $backdrop_borders_color;
  140. background-color: $backdrop_base_color;
  141. }
  142. }
  143. // colors the button like the label, overridden otherwise
  144. button.flat {
  145. &:hover { background: transparent; box-shadow: none; color: $red; }
  146. &, &:backdrop { color: gtkalpha(currentColor, 0.3); }
  147. padding: 0;
  148. margin-top: 4px;
  149. margin-bottom: 4px;
  150. // FIXME: generalize .small-button?
  151. min-width: 20px;
  152. min-height: 20px;
  153. &:last-child {
  154. margin-left: 4px;
  155. margin-right: -4px;
  156. }
  157. &:first-child {
  158. margin-left: -4px;
  159. margin-right: 4px;
  160. }
  161. }
  162. }
  163. &.top,
  164. &.bottom {
  165. tabs {
  166. padding-left: 0.5px;
  167. padding-right: 0.5px;
  168. &:not(:only-child) {
  169. margin-left: 0.5px;
  170. margin-right: 0.5px;
  171. &:first-child { margin-left: 0.5px; }
  172. &:last-child { margin-right: 0.5px; }
  173. }
  174. tab {
  175. margin-left: 0.5px;
  176. margin-right: 0.5px;
  177. &.reorderable-page { border-style: none solid; }
  178. }
  179. }
  180. }
  181. &.left,
  182. &.right {
  183. tabs {
  184. padding-top: 4px;
  185. padding-bottom: 4px;
  186. &:not(:only-child) {
  187. margin-top: 3px;
  188. margin-bottom: 3px;
  189. &:first-child { margin-top: -1px; }
  190. &:last-child { margin-bottom: -1px; }
  191. }
  192. tab {
  193. margin-top: 4px;
  194. margin-bottom: 4px;
  195. &.reorderable-page { border-style: solid none; }
  196. }
  197. }
  198. }
  199. &.top tab { padding-bottom: 4px; }
  200. &.bottom tab { padding-top: 4px; }
  201. }
  202. > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
  203. background-color: $base_color;
  204. &:backdrop { background-color: $backdrop_base_color; }
  205. }
  206. }