/assets/vertex-themes/vertex-themes/common/gtk-3.0/3.18/sass/_tabs.scss

https://github.com/november-eleven/Kiss-my-Arch · Sass · 204 lines · 160 code · 39 blank · 5 comment · 6 complexity · ddd579f7a1aefe173e6fe3b5698f5341 MD5 · raw file

  1. //
  2. // Special Tabs
  3. //
  4. $tab_asset_suffix: if($darker=='false', $asset_suffix, -darker);
  5. NautilusNotebook.notebook,
  6. NemoNotebook.notebook,
  7. MarlinViewWindow .notebook,
  8. EmpathyChatWindow .notebook,
  9. GeditNotebook.notebook,
  10. ScratchMainWindow .notebook,
  11. EphyNotebook.notebook,
  12. MidoriNotebook .notebook,
  13. PantheonTerminalPantheonTerminalWindow .notebook {
  14. -GtkNotebook-tab-overlap: 6;
  15. tab .active-page GtkLabel,
  16. tab GtkLabel.active-page,
  17. .active-page .button {
  18. color: $wm_title;
  19. text-shadow: 0 #{$shadow_pos * $darker_shadow_pos}px $wm_title_shadow;
  20. icon-shadow: 0 #{$shadow_pos * $darker_shadow_pos}px $wm_title_shadow;
  21. }
  22. .active-page .button:hover {
  23. color: lighten(red, 10%);
  24. border: 1px solid if($variant=='dark' or $darker=='true', transparentize(white, 0.9), $borders_color);
  25. }
  26. .active-page .button:active {
  27. color: $wm_title;
  28. @if $darker=='true' or $variant=='dark' {
  29. border: 1px solid nth($_borders_color, 2);
  30. background-image: linear-gradient(to bottom, darken(nth($_bg_color, 2), 10%),
  31. darken(nth($_bg_color, 2), 5%));
  32. }
  33. }
  34. tab.reorderable-page.top,
  35. &.header.top {
  36. background-color: if($variant=='light', $notebook_bg_color, darken($notebook_bg_color, 2.5%));
  37. border-bottom-width: 0px;
  38. @if $darker=='false' {
  39. box-shadow: inset 0 5px transparentize(black, 0.99),
  40. inset 0 4px transparentize(black, 0.985),
  41. inset 0 3px transparentize(black, 0.98),
  42. inset 0 2px transparentize(black, 0.975),
  43. inset 0 1px transparentize(black, 0.97),
  44. inset 0 -1px transparentize($borders_color, 0.5);
  45. }
  46. @else {
  47. box-shadow: inset 0 5px transparentize(black, 0.995),
  48. inset 0 4px transparentize(black, 0.98),
  49. inset 0 3px transparentize(black, 0.95),
  50. inset 0 2px transparentize(black, 0.925),
  51. inset 0 1px transparentize(black, 0.91),
  52. inset 0 -1px transparentize($borders_color, 0.5);
  53. }
  54. }
  55. tab.reorderable-page.top:hover {
  56. background-color: if($variant=='light', darken($notebook_bg_color, 2%),
  57. lighten($notebook_bg_color, 0%));
  58. }
  59. tab.reorderable-page.top,
  60. tab.reorderable-page.top:hover {
  61. border-image: linear-gradient(to bottom,
  62. $borders_color 0px,
  63. lighten($borders_color, 3%) 1px,
  64. transparentize($borders_color, 0.8)) 0 1 0 1;
  65. }
  66. tab.reorderable-page.top:active,
  67. tab.reorderable-page.top.active-page {
  68. background-color: transparent;
  69. box-shadow: none;
  70. @if $darker=='true' {
  71. background-image: linear-gradient(to bottom,
  72. nth($_notebook_tab_gradient_a, 2),
  73. nth($_notebook_tab_gradient_b, 2));
  74. }
  75. @include _border(tab-active#{$tab_asset_suffix}, $width: 0 5px 1px 5px, $image-width: 2 7 2 7 / 2px 7px 2px 7px);
  76. }
  77. }
  78. // Gnome Terminal
  79. TerminalWindow .notebook {
  80. -GtkNotebook-tab-overlap: 6;
  81. tab GtkLabel,
  82. .button {
  83. color: mix(nth($_wm_title, 2), $terminal_bg, 65%);
  84. text-shadow: 0 -1px nth($_wm_title_shadow, 2);
  85. icon-shadow: 0 -1px nth($_wm_title_shadow, 2);
  86. }
  87. .button:hover {
  88. color: nth($_wm_title, 2);
  89. border: 1px solid transparentize(white, 0.9);
  90. }
  91. .prelight-page .button:hover { color: lighten(red, 10%); }
  92. .prelight-page .button:active,
  93. .button:active {
  94. color: nth($_wm_title, 2);
  95. border: 1px solid nth($_borders_color, 2);
  96. background-image: linear-gradient(to bottom, darken(nth($_bg_color, 2), 10%),
  97. darken(nth($_bg_color, 2), 5%));
  98. }
  99. tab .prelight-page GtkLabel,
  100. .prelight-page .button {
  101. color: nth($_wm_title, 2);
  102. }
  103. tab .active-page GtkLabel,
  104. tab GtkLabel.active-page,
  105. .active-page .button {
  106. color: $wm_title;
  107. text-shadow: 0 #{$shadow_pos * $darker_shadow_pos}px $wm_title_shadow;
  108. icon-shadow: 0 #{$shadow_pos * $darker_shadow_pos}px $wm_title_shadow;
  109. }
  110. .active-page .button:hover {
  111. color: lighten(red, 10%);
  112. border: 1px solid if($variant=='dark' or $darker=='true', transparentize(white, 0.9), $borders_color);
  113. }
  114. .active-page .button:active {
  115. color: $wm_title;
  116. background-image: linear-gradient(to bottom, darken($bg_color, 10%),
  117. darken($bg_color, 5%));
  118. @if $darker=='true' or $variant=='dark' {
  119. border: 1px solid nth($_borders_color, 2);
  120. background-image: linear-gradient(to bottom, darken(nth($_bg_color, 2), 10%),
  121. darken(nth($_bg_color, 2), 5%));
  122. }
  123. }
  124. tab.reorderable-page.top,
  125. &.header.top {
  126. background-color: lighten($terminal_bg, 2%);
  127. border-bottom-width: 0px;
  128. box-shadow: inset 0 5px transparentize(black, 0.99),
  129. inset 0 4px transparentize(black, 0.985),
  130. inset 0 3px transparentize(black, 0.98),
  131. inset 0 2px transparentize(black, 0.975),
  132. inset 0 1px transparentize(black, 0.97),
  133. inset 0 -1px darken($terminal_bg, 5%),
  134. inset 0 1px darken($terminal_bg, 5%);
  135. }
  136. tab.reorderable-page.top:hover {
  137. background-color: lighten($terminal_bg, 4%);
  138. }
  139. tab.reorderable-page.top,
  140. tab.reorderable-page.top:hover {
  141. border-image: linear-gradient(to bottom,
  142. darken($terminal_bg, 5%) 0px,
  143. darken($terminal_bg, 5%) 1px,
  144. transparentize(darken($terminal_bg, 5%), 0.8)) 0 1 0 1;
  145. }
  146. tab.reorderable-page.top:active,
  147. tab.reorderable-page.top.active-page {
  148. background-color: transparent;
  149. box-shadow: none;
  150. background-image: linear-gradient(to bottom,
  151. $primary_toolbar_bg_a,
  152. $primary_toolbar_bg_b);
  153. @include _border(terminal-tab-active#{$tab_asset_suffix}, $width: 0 5px 1px 5px, $image-width: 2 7 2 7 / 2px 7px 2px 7px);
  154. }
  155. }
  156. // Empathy
  157. EmpathyChatWindow .notebook.frame,
  158. EmpathyChatWindow .notebook.header.frame {
  159. border-width: 0; }
  160. EmpathyChatWindow .menubar {
  161. border-bottom: 1px solid if($darker=='false', $borders_color, nth($_borders_color, 3));
  162. background-image: linear-gradient(to bottom,
  163. $primary_toolbar_bg_a,
  164. $primary_toolbar_bg_b);
  165. }