luneko/SweetTokyoNight
1
0
Fork 0
mirror of https://github.com/luneko/SweetTokyoNight.git synced 2025-12-13 07:29:51 +01:00
Code Issues Projects Releases Wiki Activity

Update selected tab style

Browse Source
This commit is contained in:
EliverLara
2020-03-14 13:48:29 -06:00
parent 97d54adf3d
commit e6af80ca9b
5 changed files with 53 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
gtk-3.0/_colors.scss
View File

@@ -28,6 +28,10 @@ $selected_bg_color: #00D3A7;
$selected_borders_color: darken($selected_bg_color, 10%);
$borders_color: if($variant == 'light', transparentize(black,0.87), transparentize(#eee,0.9));
$borders_edge: if($variant == 'light', transparentize(white, 0.8), transparentize(white, 0.9));
$selected-tab-gradient-start: #00f17d;
$selected-tab-gradient-end: #00f7d2;
$link_color: $blue;
$link_visited_color:transparentize($link_color,0.5);
$top_highlight: if($variant == 'light', transparentize(white, 0.8), transparentize(white, 0.9));

12
gtk-3.0/_drawing.scss
View File

@@ -603,3 +603,15 @@ box-shadow: none;
@mixin scale-highlight($dir) {
background: linear-gradient(to $dir, #00f17d, #00f7d2);
}
@mixin selected-tab($dir) {
background:
linear-gradient(to $dir, $selected-tab-gradient-start, $selected-tab-gradient-end)
left
bottom
lighten(mix($base_color, darken($headerbar_color, 8%), 30%), 4%)
no-repeat;
@if $dir==right { background-size: 100% 2px; }
@else if $dir==bottom { background-size: 2px 100%; }
border: 0;
}

28
gtk-3.0/gtk-dark.css
View File

@@ -3045,9 +3045,9 @@ assistant {
*************/
notebook > header {
padding: 1px;
border-color: rgba(238, 238, 238, 0.1);
border-color: transparent;
border-width: 1px;
background-color: #181b28; }
background-color: #0c0e14; }
notebook > header:backdrop {
border-color: rgba(91, 93, 102, 0.19);
background-color: #161925; }
@@ -3060,9 +3060,9 @@ notebook > header {
notebook > header.top > tabs > tab:backdrop {
box-shadow: none; }
notebook > header.top > tabs > tab:checked {
background-color: #181b28; }
notebook > header.top > tabs > tab:checked:hover {
background-color: #181b28; }
background: linear-gradient(to right, #00f17d, #00f7d2) left bottom #141721 no-repeat;
background-size: 100% 2px;
border: 0; }
notebook > header.bottom {
border-top-style: solid; }
notebook > header.bottom > tabs {
@@ -3070,8 +3070,9 @@ notebook > header {
notebook > header.bottom > tabs > tab:backdrop {
box-shadow: none; }
notebook > header.bottom > tabs > tab:checked {
background-color: #181b28;
box-shadow: -1px 0 0 rgba(238, 238, 238, 0.1), 0px 1px 0 rgba(238, 238, 238, 0.1), 1px 0 0 rgba(238, 238, 238, 0.1); }
background: linear-gradient(to right, #00f17d, #00f7d2) left bottom #141721 no-repeat;
background-size: 100% 2px;
border: 0; }
notebook > header.left {
border-right-style: solid; }
notebook > header.left > tabs {
@@ -3079,8 +3080,9 @@ notebook > header {
notebook > header.left > tabs > tab:backdrop {
box-shadow: none; }
notebook > header.left > tabs > tab:checked {
background-color: #181b28;
box-shadow: 0px 1px 0 rgba(238, 238, 238, 0.1), 0px -1px 0 rgba(238, 238, 238, 0.1), 0px 1px 0 rgba(238, 238, 238, 0.1); }
background: linear-gradient(to bottom, #00f17d, #00f7d2) left bottom #141721 no-repeat;
background-size: 2px 100%;
border: 0; }
notebook > header.right {
border-left-style: solid; }
notebook > header.right > tabs {
@@ -3088,8 +3090,9 @@ notebook > header {
notebook > header.right > tabs > tab:backdrop {
box-shadow: none; }
notebook > header.right > tabs > tab:checked {
background-color: #181b28;
box-shadow: 0px 1px 0 rgba(238, 238, 238, 0.1), 0px -1px 0 rgba(238, 238, 238, 0.1), 1px 0 0 rgba(238, 238, 238, 0.1); }
background: linear-gradient(to bottom, #00f17d, #00f7d2) left bottom #141721 no-repeat;
background-size: 2px 100%;
border: 0; }
notebook > header.top > tabs > arrow {
border-top-style: none; }
notebook > header.bottom > tabs > arrow {
@@ -3153,8 +3156,7 @@ notebook > header {
border-color: transparent;
background-color: transparent; }
notebook > header tab:checked {
color: #C3C7D1;
box-shadow: -1px 0 0 rgba(238, 238, 238, 0.1), 0px -1px 0 rgba(238, 238, 238, 0.1), 1px 0 0 rgba(238, 238, 238, 0.1); }
color: #C3C7D1; }
notebook > header tab:checked.reorderable-page {
border-color: rgba(238, 238, 238, 0);
background-color: rgba(22, 25, 37, 0.5); }

28
gtk-3.0/gtk.css
View File

@@ -3052,9 +3052,9 @@ assistant {
*************/
notebook > header {
padding: 1px;
border-color: rgba(0, 0, 0, 0.13);
border-color: transparent;
border-width: 1px;
background-color: #ebf0f5; }
background-color: #d9dbdc; }
notebook > header:backdrop {
border-color: rgba(142, 142, 142, 0.217);
background-color: #e6e6e6; }
@@ -3067,9 +3067,9 @@ notebook > header {
notebook > header.top > tabs > tab:backdrop {
box-shadow: none; }
notebook > header.top > tabs > tab:checked {
background-color: #ebf0f5; }
notebook > header.top > tabs > tab:checked:hover {
background-color: #ebf0f5; }
background: linear-gradient(to right, #00f17d, #00f7d2) left bottom #e4e5e6 no-repeat;
background-size: 100% 2px;
border: 0; }
notebook > header.bottom {
border-top-style: solid; }
notebook > header.bottom > tabs {
@@ -3077,8 +3077,9 @@ notebook > header {
notebook > header.bottom > tabs > tab:backdrop {
box-shadow: none; }
notebook > header.bottom > tabs > tab:checked {
background-color: #ebf0f5;
box-shadow: -1px 0 0 rgba(0, 0, 0, 0.13), 0px 1px 0 rgba(0, 0, 0, 0.13), 1px 0 0 rgba(0, 0, 0, 0.13); }
background: linear-gradient(to right, #00f17d, #00f7d2) left bottom #e4e5e6 no-repeat;
background-size: 100% 2px;
border: 0; }
notebook > header.left {
border-right-style: solid; }
notebook > header.left > tabs {
@@ -3086,8 +3087,9 @@ notebook > header {
notebook > header.left > tabs > tab:backdrop {
box-shadow: none; }
notebook > header.left > tabs > tab:checked {
background-color: #ebf0f5;
box-shadow: 0px 1px 0 rgba(0, 0, 0, 0.13), 0px -1px 0 rgba(0, 0, 0, 0.13), 0px 1px 0 rgba(0, 0, 0, 0.13); }
background: linear-gradient(to bottom, #00f17d, #00f7d2) left bottom #e4e5e6 no-repeat;
background-size: 2px 100%;
border: 0; }
notebook > header.right {
border-left-style: solid; }
notebook > header.right > tabs {
@@ -3095,8 +3097,9 @@ notebook > header {
notebook > header.right > tabs > tab:backdrop {
box-shadow: none; }
notebook > header.right > tabs > tab:checked {
background-color: #ebf0f5;
box-shadow: 0px 1px 0 rgba(0, 0, 0, 0.13), 0px -1px 0 rgba(0, 0, 0, 0.13), 1px 0 0 rgba(0, 0, 0, 0.13); }
background: linear-gradient(to bottom, #00f17d, #00f7d2) left bottom #e4e5e6 no-repeat;
background-size: 2px 100%;
border: 0; }
notebook > header.top > tabs > arrow {
border-top-style: none; }
notebook > header.bottom > tabs > arrow {
@@ -3160,8 +3163,7 @@ notebook > header {
border-color: transparent;
background-color: transparent; }
notebook > header tab:checked {
color: #31363d;
box-shadow: -1px 0 0 rgba(0, 0, 0, 0.13), 0px -1px 0 rgba(0, 0, 0, 0.13), 1px 0 0 rgba(0, 0, 0, 0.13); }
color: #31363d; }
notebook > header tab:checked.reorderable-page {
border-color: rgba(0, 0, 0, 0);
background-color: rgba(230, 230, 230, 0.5); }

27
gtk-3.0/widgets/_notebooks.scss
View File

@@ -4,9 +4,9 @@
notebook {
> header {
padding: 1px;
border-color: $borders_color;
border-color: transparent;
border-width: 1px;
background-color: $base_color;
background-color: mix($base_color, darken($headerbar_color, 8%), 30%);
&:backdrop {
border-color: $backdrop_borders_color;
@@ -25,8 +25,7 @@ notebook {
&:backdrop { box-shadow: none; }
&:checked {
background-color: $base_color;
&:hover{background-color: $base_color;}
@include selected-tab(right);
}
}
}
@@ -42,10 +41,7 @@ notebook {
&:backdrop { box-shadow: none; }
&:checked {
background-color: $base_color;
box-shadow: -1px 0 0 $borders_color,
0px 1px 0 $borders_color,
1px 0 0 $borders_color;
@include selected-tab(right);
}
}
}
@@ -61,11 +57,8 @@ notebook {
&:backdrop { box-shadow: none; }
&:checked {
background-color: $base_color;
box-shadow: 0px 1px 0 $borders_color,
0px -1px 0 $borders_color,
0px 1px 0 $borders_color;
}
@include selected-tab(bottom);
}
}
}
}
@@ -80,10 +73,7 @@ notebook {
&:backdrop { box-shadow: none; }
&:checked {
background-color: $base_color;
box-shadow: 0px 1px 0 $borders_color,
0px -1px 0 $borders_color,
1px 0 0 $borders_color;
@include selected-tab(bottom);
}
}
}
@@ -188,9 +178,6 @@ notebook {
&:checked {
color: $fg_color;
box-shadow: -1px 0 0 $borders_color,
0px -1px 0 $borders_color,
1px 0 0 $borders_color;
&.reorderable-page {
border-color: transparentize($borders_color, 0.5);
background-color: transparentize($bg_color, 0.5);