PoliEcho/kaliish-orange-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

GTK3: theme notebook tabs

Browse Source
This commit is contained in:
Daniel Ruiz de Alegría 2020-12-16 17:51:33 +01:00
parent e3edf137eb
commit 977656cf86
4 changed files with 278 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
share/themes/Kali-Dark/gtk-3.0/gtk.css
View File

@ -5245,6 +5245,76 @@ popover.background {
.csd popover.background, popover.background {
border-color: rgba(13, 14, 17, 0.75); }
/*************
* Notebooks *
*************/
notebook > header {
border: 0;
padding: 0;
background-color: #1b1d24; }
notebook > header.top > tabs, notebook > header.bottom > tabs, notebook > header.left > tabs, notebook > header.right > tabs {
margin: 0; }
notebook > header.top > tabs > tab,
notebook > header.top > tabs > tab.reorderable-page, notebook > header.bottom > tabs > tab,
notebook > header.bottom > tabs > tab.reorderable-page, notebook > header.left > tabs > tab,
notebook > header.left > tabs > tab.reorderable-page, notebook > header.right > tabs > tab,
notebook > header.right > tabs > tab.reorderable-page {
border: 1px solid transparent;
margin: 3px; }
notebook > header.top > tabs > tab:hover,
notebook > header.top > tabs > tab.reorderable-page:hover, notebook > header.bottom > tabs > tab:hover,
notebook > header.bottom > tabs > tab.reorderable-page:hover, notebook > header.left > tabs > tab:hover,
notebook > header.left > tabs > tab.reorderable-page:hover, notebook > header.right > tabs > tab:hover,
notebook > header.right > tabs > tab.reorderable-page:hover {
color: #eeeeec;
outline-color: rgba(238, 238, 236, 0.3);
border-color: #0d0e11;
border-bottom-color: black;
text-shadow: 0 -1px rgba(0, 0, 0, 0.825255);
-gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.825255);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), inset 0 -1px 0 rgba(13, 14, 17, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27);
background-image: linear-gradient(to top, #20232b, #252831 1px); }
notebook > header.top > tabs > tab:checked,
notebook > header.top > tabs > tab.reorderable-page:checked, notebook > header.bottom > tabs > tab:checked,
notebook > header.bottom > tabs > tab.reorderable-page:checked, notebook > header.left > tabs > tab:checked,
notebook > header.left > tabs > tab.reorderable-page:checked, notebook > header.right > tabs > tab:checked,
notebook > header.right > tabs > tab.reorderable-page:checked {
color: #eeeeec;
outline-color: rgba(238, 238, 236, 0.3);
border-color: #0d0e11;
border-bottom-color: black;
background-image: linear-gradient(to top, #20232b 2px, #23252e);
text-shadow: 0 -1px rgba(0, 0, 0, 0.873255);
-gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.873255);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), inset 0 -1px 0 rgba(13, 14, 17, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27);
background: #272a34; }
notebook > header.top > tabs > tab:checked:backdrop,
notebook > header.top > tabs > tab.reorderable-page:checked:backdrop, notebook > header.bottom > tabs > tab:checked:backdrop,
notebook > header.bottom > tabs > tab.reorderable-page:checked:backdrop, notebook > header.left > tabs > tab:checked:backdrop,
notebook > header.left > tabs > tab.reorderable-page:checked:backdrop, notebook > header.right > tabs > tab:checked:backdrop,
notebook > header.right > tabs > tab.reorderable-page:checked:backdrop {
color: #888a8d;
border-color: #16171d;
background-image: image(#23252e);
text-shadow: none;
-gtk-icon-shadow: none;
box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
notebook > header.top {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); }
notebook > header.bottom {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); }
notebook > header.right {
background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); }
notebook > header.left {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); }
notebook > header tab {
border-radius: 4px;
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
min-height: 24px; }
notebook > header tab button.flat {
margin-top: 1px;
margin-bottom: 1px; }
/**************
* GtkInfoBar *
**************/

70
share/themes/Kali-Light/gtk-3.0/gtk-dark.css
View File

@ -5245,6 +5245,76 @@ popover.background {
.csd popover.background, popover.background {
border-color: rgba(13, 14, 17, 0.75); }
/*************
* Notebooks *
*************/
notebook > header {
border: 0;
padding: 0;
background-color: #1b1d24; }
notebook > header.top > tabs, notebook > header.bottom > tabs, notebook > header.left > tabs, notebook > header.right > tabs {
margin: 0; }
notebook > header.top > tabs > tab,
notebook > header.top > tabs > tab.reorderable-page, notebook > header.bottom > tabs > tab,
notebook > header.bottom > tabs > tab.reorderable-page, notebook > header.left > tabs > tab,
notebook > header.left > tabs > tab.reorderable-page, notebook > header.right > tabs > tab,
notebook > header.right > tabs > tab.reorderable-page {
border: 1px solid transparent;
margin: 3px; }
notebook > header.top > tabs > tab:hover,
notebook > header.top > tabs > tab.reorderable-page:hover, notebook > header.bottom > tabs > tab:hover,
notebook > header.bottom > tabs > tab.reorderable-page:hover, notebook > header.left > tabs > tab:hover,
notebook > header.left > tabs > tab.reorderable-page:hover, notebook > header.right > tabs > tab:hover,
notebook > header.right > tabs > tab.reorderable-page:hover {
color: #eeeeec;
outline-color: rgba(238, 238, 236, 0.3);
border-color: #0d0e11;
border-bottom-color: black;
text-shadow: 0 -1px rgba(0, 0, 0, 0.825255);
-gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.825255);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), inset 0 -1px 0 rgba(13, 14, 17, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27);
background-image: linear-gradient(to top, #20232b, #252831 1px); }
notebook > header.top > tabs > tab:checked,
notebook > header.top > tabs > tab.reorderable-page:checked, notebook > header.bottom > tabs > tab:checked,
notebook > header.bottom > tabs > tab.reorderable-page:checked, notebook > header.left > tabs > tab:checked,
notebook > header.left > tabs > tab.reorderable-page:checked, notebook > header.right > tabs > tab:checked,
notebook > header.right > tabs > tab.reorderable-page:checked {
color: #eeeeec;
outline-color: rgba(238, 238, 236, 0.3);
border-color: #0d0e11;
border-bottom-color: black;
background-image: linear-gradient(to top, #20232b 2px, #23252e);
text-shadow: 0 -1px rgba(0, 0, 0, 0.873255);
-gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.873255);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), inset 0 -1px 0 rgba(13, 14, 17, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27);
background: #272a34; }
notebook > header.top > tabs > tab:checked:backdrop,
notebook > header.top > tabs > tab.reorderable-page:checked:backdrop, notebook > header.bottom > tabs > tab:checked:backdrop,
notebook > header.bottom > tabs > tab.reorderable-page:checked:backdrop, notebook > header.left > tabs > tab:checked:backdrop,
notebook > header.left > tabs > tab.reorderable-page:checked:backdrop, notebook > header.right > tabs > tab:checked:backdrop,
notebook > header.right > tabs > tab.reorderable-page:checked:backdrop {
color: #888a8d;
border-color: #16171d;
background-image: image(#23252e);
text-shadow: none;
-gtk-icon-shadow: none;
box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
notebook > header.top {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); }
notebook > header.bottom {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); }
notebook > header.right {
background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); }
notebook > header.left {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); }
notebook > header tab {
border-radius: 4px;
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
min-height: 24px; }
notebook > header tab button.flat {
margin-top: 1px;
margin-bottom: 1px; }
/**************
* GtkInfoBar *
**************/

70
share/themes/Kali-Light/gtk-3.0/gtk.css
View File

@ -5266,6 +5266,76 @@ popover.background {
.csd popover.background, popover.background {
border-color: rgba(0, 0, 0, 0.1); }
/*************
* Notebooks *
*************/
notebook > header {
border: 0;
padding: 0;
background-color: #f2f2f2; }
notebook > header.top > tabs, notebook > header.bottom > tabs, notebook > header.left > tabs, notebook > header.right > tabs {
margin: 0; }
notebook > header.top > tabs > tab,
notebook > header.top > tabs > tab.reorderable-page, notebook > header.bottom > tabs > tab,
notebook > header.bottom > tabs > tab.reorderable-page, notebook > header.left > tabs > tab,
notebook > header.left > tabs > tab.reorderable-page, notebook > header.right > tabs > tab,
notebook > header.right > tabs > tab.reorderable-page {
border: 1px solid transparent;
margin: 3px; }
notebook > header.top > tabs > tab:hover,
notebook > header.top > tabs > tab.reorderable-page:hover, notebook > header.bottom > tabs > tab:hover,
notebook > header.bottom > tabs > tab.reorderable-page:hover, notebook > header.left > tabs > tab:hover,
notebook > header.left > tabs > tab.reorderable-page:hover, notebook > header.right > tabs > tab:hover,
notebook > header.right > tabs > tab.reorderable-page:hover {
color: #5c616c;
outline-color: rgba(92, 97, 108, 0.3);
border-color: #d9d9d9;
border-bottom-color: #c2c2c2;
text-shadow: 0 1px rgba(255, 255, 255, 0.769231);
-gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231);
box-shadow: inset 0 1px white, inset 0 -1px 0 rgba(217, 217, 217, 0.75), 0 1px 2px rgba(0, 0, 0, 0.07);
background-image: linear-gradient(to top, #ffffff, white 1px); }
notebook > header.top > tabs > tab:checked,
notebook > header.top > tabs > tab.reorderable-page:checked, notebook > header.bottom > tabs > tab:checked,
notebook > header.bottom > tabs > tab.reorderable-page:checked, notebook > header.left > tabs > tab:checked,
notebook > header.left > tabs > tab.reorderable-page:checked, notebook > header.right > tabs > tab:checked,
notebook > header.right > tabs > tab.reorderable-page:checked {
color: #5c616c;
outline-color: rgba(92, 97, 108, 0.3);
border-color: #d9d9d9;
border-bottom-color: #c2c2c2;
background-image: linear-gradient(to top, whitesmoke 2px, #ffffff);
text-shadow: 0 1px rgba(255, 255, 255, 0.769231);
-gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231);
box-shadow: inset 0 1px white, inset 0 -1px 0 rgba(217, 217, 217, 0.75), 0 1px 2px rgba(0, 0, 0, 0.07);
background: #fafafa; }
notebook > header.top > tabs > tab:checked:backdrop,
notebook > header.top > tabs > tab.reorderable-page:checked:backdrop, notebook > header.bottom > tabs > tab:checked:backdrop,
notebook > header.bottom > tabs > tab.reorderable-page:checked:backdrop, notebook > header.left > tabs > tab:checked:backdrop,
notebook > header.left > tabs > tab.reorderable-page:checked:backdrop, notebook > header.right > tabs > tab:checked:backdrop,
notebook > header.right > tabs > tab.reorderable-page:checked:backdrop {
color: #aeb0b6;
border-color: #e0e0e0;
background-image: image(#ffffff);
text-shadow: none;
-gtk-icon-shadow: none;
box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
notebook > header.top {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); }
notebook > header.bottom {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); }
notebook > header.right {
background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); }
notebook > header.left {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); }
notebook > header tab {
border-radius: 4px;
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
min-height: 24px; }
notebook > header tab button.flat {
margin-top: 1px;
margin-bottom: 1px; }
/**************
* GtkInfoBar *
**************/

68
src/themes/Kali/sass/gtk-sass/_common-tweaks.scss
View File

@ -214,6 +214,74 @@ popover.background {
.csd &, & { border-color: if($variant=='light', transparentize(black, 0.9), transparentize($borders_color, 0.25)); }
}
/*************
* Notebooks *
*************/
notebook {
> header {
border: 0;
padding: 0;
background-color: $dark_fill;
&.top,
&.bottom,
&.left,
&.right {
> tabs {
margin: 0;
> tab,
> tab.reorderable-page {
border: 1px solid transparent;
margin: 3px;
&:hover { @include button(hover); }
&:checked {
@include button(normal);
background: $base_color;
&:backdrop { @include button(backdrop); }
}
}
}
}
$gradient:
rgba(black, 0),
rgba(black, 0) calc(100% - 2px),
rgba(black, 0.05) calc(100% - 1px),
rgba(black, 0.15);
&.top {
background-image: linear-gradient(to bottom, $gradient);
}
&.bottom {
background-image: linear-gradient(to top, $gradient);
}
&.right {
background-image: linear-gradient(to left, $gradient);
}
&.left {
background-image: linear-gradient(to right, $gradient);
}
tab {
border-radius: $button_radius - 1px;
transition: $button_transition;
min-height: 24px;
button.flat {
margin-top: 1px;
margin-bottom: 1px;
}
}
}
}
/**************
* GtkInfoBar *
**************/