Warning, /plasma/breeze-gtk/src/gtk3/widgets/_notebook.scss is written in an unsupported language. File is not indexed.
0001 @charset "UTF-8";
0002
0003 /*****************
0004 * Notebooks and *
0005 * Tabs *
0006 *****************/
0007 /*************
0008 * Notebooks *
0009 *************/
0010 notebook {
0011 &.frame {
0012 border: none;
0013 padding: 0px;
0014 box-shadow: inset 0px 0px 0px 1px gtk("@borders");
0015 }
0016
0017 > header {
0018 padding: 0px;
0019 border: none;
0020 background-color: gtk("@theme_bg_color");
0021 //box-shadow: inset 0 -1px gtk("@borders");
0022
0023 &.top {
0024 box-shadow: inset 0 -1px gtk("@borders"); // border
0025 &:backdrop {
0026 box-shadow: inset 0 -1px gtk("@unfocused_borders");
0027 }
0028 }
0029 &.bottom {
0030 box-shadow: inset 0 1px gtk("@borders");
0031 &:backdrop {
0032 box-shadow: inset 0 1px gtk("@unfocused_borders");
0033 }
0034 }
0035 &.right {
0036 box-shadow: inset 1px 0 gtk("@borders");
0037 &:backdrop {
0038 box-shadow: inset 1px 0 gtk("@unfocused_borders");
0039 }
0040 }
0041 &.left {
0042 box-shadow: inset -1px 0 gtk("@borders");
0043 &:backdrop {
0044 box-shadow: inset -1px 0 gtk("@unfocused_borders");
0045 }
0046 }
0047 &:backdrop {
0048 background-color: gtk("@theme_unfocused_bg_color");
0049 }
0050
0051 tabs {
0052 margin: 0px;
0053 }
0054
0055 @each $_tab, $_border,
0056 $_radius_first, $_radius_last in (top, bottom, 3px 0px 0px 0px, 0px 3px 0px 0px),
0057 (bottom, top, 0px 0px 0px 3px, 0px 0px 3px 0px),
0058 (left, right, 3px 0px 0px 0px, 0px 0px 0px 3px),
0059 (right, left, 0px 3px 0px 0px, 0px 0px 3px 0px)
0060 {
0061 &.#{$_tab} {
0062 > tabs {
0063 > tab {
0064 padding: 4px 6px;
0065 padding-bottom: 7px;
0066 border: 1px
0067 solid
0068 transparent;
0069 border-#{$_border}: none;
0070 border-#{$_tab}: 3px solid transparent;
0071 background-color: gtkalpha(
0072 gtk("@theme_fg_color"),
0073 0.2
0074 );
0075 border-radius: 0;
0076
0077
0078 &:first-child {
0079 border-radius: $_radius_first;
0080 }
0081
0082 &:last-child {
0083 border-radius: $_radius_last;
0084 }
0085
0086 &:hover,
0087 &.prelight-page {
0088 transition: 0.15s;
0089 background-color: gtkalpha(
0090 gtk("@theme_selected_bg_color"),
0091 0.2
0092 );
0093
0094 }
0095
0096 // Padding trickery to get selected tab overlap
0097 @if $_tab == top or $_tab == bottom {
0098
0099 > label {
0100 margin-left: -3px;
0101 }
0102
0103 &:checked {
0104 padding-left: 9px;
0105
0106 &:not(:first-child) {
0107 margin-left: -3px;
0108 }
0109
0110 &:first-child {
0111 padding-left: 6px;
0112 }
0113 &:not(:last-child) {
0114 margin-right: -3px;
0115 }
0116
0117 & + tab {
0118 padding-left: 9px;
0119 }
0120 }
0121 } @else {
0122
0123 > label {
0124 margin-top: -3px;
0125 }
0126
0127 &:checked {
0128 padding-top: 7px;
0129
0130 &:not(:first-child) {
0131 margin-top: -3px;
0132 }
0133 &:first-child {
0134 padding-top: 4px;
0135 }
0136 &:not(:last-child) {
0137 margin-bottom: -3px;
0138 }
0139
0140 & + tab {
0141 padding-top: 7px;
0142 }
0143 }
0144 }
0145
0146 &:checked {
0147 transition: none;
0148 border-color: gtk("@borders");
0149 border-#{$_tab}-color: gtk("@theme_selected_bg_color");
0150
0151 $_radius: ();
0152
0153 // Combine both first and second radiuses
0154 @for $i from 1 through length($_radius_first) {
0155 $_radius: append($_radius, nth($_radius_first, $i) + nth($_radius_last, $i));
0156 }
0157
0158 border-radius: $_radius;
0159
0160 background-color: gtk("@theme_bg_color");
0161 }
0162 }
0163
0164 arrow.down ~ tab:checked:nth-child(2) {
0165 @if $_tab == top or $_tab == bottom {
0166 margin-left: 0px;
0167 padding-left: 6px;
0168 } @else {
0169 margin-top: 0px;
0170 padding-top: 4px;
0171 }
0172 }
0173
0174 arrow.down ~ tab:checked:nth-last-child(2) {
0175 @if $_tab == top or $_tab == bottom {
0176 margin-right: 0px;
0177 } @else {
0178 margin-bottom: 0px;
0179 }
0180 }
0181 }
0182 }
0183 }
0184
0185 @each $_tab, $_border,
0186 $_shadow1 in (top, right, -3px 0px 0px 0px),
0187 (bottom, right, -3px 0px 0px 0px),
0188 (left, bottom, 0px -3px 0px 0px),
0189 (right, bottom, 0px -3px 0px 0px)
0190 {
0191 &.#{$_tab} {
0192 > tabs {
0193 > tab {
0194 &.reorderable-page {
0195 border-width: 3px;
0196 border-style: solid;
0197 border-color: transparent;
0198 background-color: gtk("@theme_bg_color");
0199 background-clip: padding-box;
0200 border-#{$_border}-width: 1px;
0201 border-#{$_border}-color: gtk("@borders");
0202 box-shadow: inset
0203 #{$_shadow1}
0204 gtk("@theme_bg_color");
0205 &:hover,
0206 &.prelight-page {
0207 box-shadow: inset
0208 0px -3px
0209 0px
0210 0px
0211 gtkalpha(
0212 gtk("@theme_selected_bg_color"),
0213 0.2
0214 ),
0215 inset $_shadow1 gtk("@theme_bg_color");
0216 }
0217 &:checked {
0218 box-shadow: inset
0219 0px -3px
0220 0px
0221 0px
0222 gtk("@theme_selected_bg_color"),
0223 inset $_shadow1 gtk("@theme_bg_color");
0224 &:backdrop {
0225 background-color: gtk(
0226 "@theme_unfocused_bg_color"
0227 );
0228 border-color: transparent;
0229 border-#{$_border}-color: gtk(
0230 "@unfocused_borders"
0231 );
0232 box-shadow: none;
0233 }
0234 }
0235 &:backdrop {
0236 background-color: gtk(
0237 "@theme_unfocused_bg_color"
0238 );
0239 border-#{$_border}-color: gtk(
0240 "@unfocused_borders"
0241 );
0242 box-shadow: none;
0243 }
0244 }
0245 }
0246 }
0247 }
0248 }
0249
0250 &.top > tabs > arrow {
0251 @extend %notebook_vert_arrows;
0252
0253 border-top-style: none;
0254 }
0255
0256 &.bottom > tabs > arrow {
0257 @extend %notebook_vert_arrows;
0258
0259 border-bottom-style: none;
0260 }
0261
0262 @at-root %notebook_vert_arrows {
0263 margin-left: -5px;
0264 margin-right: -5px;
0265 padding-left: 4px;
0266 padding-right: 4px;
0267
0268 &.down {
0269 -gtk-icon-source: -gtk-icontheme($arrow_left);
0270 }
0271
0272 &.up {
0273 -gtk-icon-source: -gtk-icontheme($arrow_right);
0274 }
0275 }
0276
0277 &.left > tabs > arrow {
0278 @extend %notebook_horz_arrows;
0279
0280 border-left-style: none;
0281 }
0282
0283 &.right > tabs > arrow {
0284 @extend %notebook_horz_arrows;
0285
0286 border-right-style: none;
0287 }
0288
0289 @at-root %notebook_horz_arrows {
0290 margin-top: -5px;
0291 margin-bottom: -5px;
0292 padding-top: 4px;
0293 padding-bottom: 4px;
0294
0295 &.down {
0296 -gtk-icon-source: -gtk-icontheme($arrow_up);
0297 }
0298
0299 &.up {
0300 -gtk-icon-source: -gtk-icontheme($arrow_down);
0301 }
0302 }
0303
0304 > tabs > arrow {
0305 @include neobutton(toolbutton);
0306
0307 min-height: 16px;
0308 min-width: 16px;
0309 border-radius: 0;
0310
0311 &:hover:not(:active):not(:backdrop) {
0312 background-clip: padding-box;
0313 background-image: none;
0314 background-color: transparentize(white, 0.7);
0315 border-color: transparent;
0316 box-shadow: none;
0317 }
0318 }
0319
0320 // colors the button like the label, overridden otherwise
0321 button.flat {
0322 padding: 0;
0323 margin: 2px;
0324 // FIXME: generalize .small-button?
0325 min-width: 12px;
0326 min-height: 12px;
0327 border: 0px solid;
0328 border-radius: 50%;
0329 color: gtk("@borders");
0330 background-image: none;
0331
0332 &:active,
0333 &:hover{
0334 color: $error_color;
0335 }
0336 }
0337 }
0338
0339 > stack:not(:only-child) {
0340 // the :not(:only-child) is for "hidden" notebooks
0341 background-color: transparent;
0342 border-style: solid;
0343 border-color: gtk("@borders");
0344 border-width: 0px;
0345 }
0346 }