summaryrefslogtreecommitdiff
path: root/desktop-themes
diff options
context:
space:
mode:
Diffstat (limited to 'desktop-themes')
-rwxr-xr-x[-rw-r--r--]desktop-themes/YaruOk/gtk-4.0/_common.scss108
-rwxr-xr-x[-rw-r--r--]desktop-themes/YaruOk/gtk-4.0/gtk.css54
2 files changed, 94 insertions, 68 deletions
diff --git a/desktop-themes/YaruOk/gtk-4.0/_common.scss b/desktop-themes/YaruOk/gtk-4.0/_common.scss
index 012ae960..5eb62f50 100644..100755
--- a/desktop-themes/YaruOk/gtk-4.0/_common.scss
+++ b/desktop-themes/YaruOk/gtk-4.0/_common.scss
@@ -2038,12 +2038,14 @@ menubar {
/*************
* Notebooks *
*************/
-notebook {
- @include focus-ring("> header > tabs > tab:checked", $offset: -2px, $focus-state: 'focus:focus-visible');
+$notebook_base_color: lighten($bg_color, 3%);
+notebook {
+ border-color:#b0b9c9;
> header {
padding: 1px;
border-color: $borders_color;
+ box-shadow: 1px 1px $bg_color, 1px -1px $bg_color, -1px -1px $bg_color;
border-width: 1px;
background-color: transparent; // Yaru change: remove notebook background
@@ -2053,16 +2055,21 @@ notebook {
border-bottom-style: solid;
> tabs {
margin-bottom: -2px;
+ margin-top: 4px;
> tab {
- &:hover { color: $fg_color; } // Yaru change: 4px underlines are too much
+ background-image: linear-gradient(to bottom, gtkshade($bg_color, 1.02), gtkshade($bg_color, 0.8));
+ box-shadow: 0px -1px $borders_color, 1px 0px $borders_color, -1px 0px $borders_color, inset 0px -1px $borders_color;
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px;
+ &:hover { } // Yaru change: 4px underlines are too much
&:checked { background-image: linear-gradient(to bottom,
$core_color_a 3px,
- $borders_color 5px,
- $base_color 5px,
- $base_color);
- box-shadow: 0px -1px $borders_color, 1px 0px $borders_color, -1px 0px $borders_color; } // Yaru change: 4px underlines are too much
+ desaturate(darken($core_color_a, 30%), 15%) 5px,
+ $notebook_base_color 5px,
+ $notebook_base_color);
+ box-shadow: 0px -1px desaturate(darken($core_color_a, 30%), 15%), 1px 0px $borders_color, -1px 0px $borders_color; } // Yaru change: 4px underlines are too much
}
}
}
@@ -2070,16 +2077,21 @@ notebook {
&.bottom {
border-top-style: solid;
> tabs {
- margin-top: -2px;
+ margin-top: -3px;
> tab {
- &:hover { color: $fg_color; } // Yaru change: 4px underlines are too much
+ background-image: linear-gradient(to top, gtkshade($bg_color, 1.02), gtkshade($bg_color, 0.8));
+ box-shadow: 0px 1px $borders_color , 1px 0px $borders_color, -1px 0px $borders_color, inset 0px 1px $borders_color;
+ border-bottom-left-radius: 3px;
+ border-bottom-right-radius: 3px;
+ &:hover { } // Yaru change: 4px underlines are too much
+
&:checked { background-image: linear-gradient(to top,
$core_color_a 3px,
- $borders_color 5px,
- $base_color 5px,
- $base_color);
- box-shadow: 0px 1px $borders_color, 1px 0px $borders_color, -1px 0px $borders_color; } // Yaru change: 4px underlines are too much
+ desaturate(darken($core_color_a, 30%), 15%) 5px,
+ $notebook_base_color 5px,
+ $notebook_base_color);
+ box-shadow: 0px 1px desaturate(darken($core_color_a, 30%), 15%) , 1px 0px $borders_color, -1px 0px $borders_color; } // Yaru change: 4px underlines are too much
}
}
}
@@ -2087,16 +2099,22 @@ notebook {
&.left {
border-right-style: solid;
> tabs {
- margin-right: -2px;
+ margin-right: -3px;
> tab {
- &:hover { color: $fg_color; } // Yaru change: 4px underlines are too much
+ background-image: linear-gradient(to right, gtkshade($bg_color, 1.02), gtkshade($bg_color, 0.8));
+ box-shadow: 0px 1px $borders_color , 0px -1px $borders_color, -1px 0px $borders_color, inset -1px 0px $borders_color;
+ border-top-left-radius: 3px;
+ border-bottom-left-radius: 3px;
+
+ &:hover { } // Yaru change: 4px underlines are too much
+
- &:checked { background-image: linear-gradient(to right,
+ &:checked { background-image: linear-gradient(to right,
$core_color_a 3px,
- $borders_color 5px,
- $base_color 5px,
- $base_color);
- box-shadow: 0px -1px $borders_color,0px 1px $borders_color; } // Yaru change: 4px underlines are too much
+ desaturate(darken($core_color_a, 30%), 15%) 5px,
+ $notebook_base_color 5px,
+ $notebook_base_color);
+ box-shadow: -1px 0px desaturate(darken($core_color_a, 30%), 15%) , 0px -1px $borders_color,0px 1px $borders_color; } // Yaru change: 4px underlines are too much
}
}
}
@@ -2104,17 +2122,21 @@ notebook {
&.right {
border-left-style: solid;
> tabs {
- margin-left: -2px;
+ margin-left: -3px;
> tab {
+ background-image: linear-gradient(to left, gtkshade($bg_color, 1.02), gtkshade($bg_color, 0.8));
+ box-shadow: 0px 1px $borders_color , 0px -1px $borders_color, 1px 0px $borders_color, inset 1px 0px $borders_color;
+ border-top-right-radius: 3px;
+ border-bottom-right-radius: 3px;
&:hover { } // Yaru change: 4px underlines are too much
&:checked { background-image: linear-gradient(to left,
$core_color_a 3px,
- $borders_color 5px,
- $base_color 5px,
- $base_color);
- box-shadow: 0px -1px $borders_color,0px 1px $borders_color;} // Yaru change: 4px underlines are too much
+ desaturate(darken($core_color_a, 30%), 15%) 5px,
+ $notebook_base_color 5px,
+ $notebook_base_color);
+ box-shadow:1px 0px desaturate(darken($core_color_a, 30%), 15%), 0px -1px $borders_color,0px 1px $borders_color;} // Yaru change: 4px underlines are too much
}
}
}
@@ -2248,20 +2270,20 @@ notebook {
&.top,
&.bottom {
> tabs {
- padding-left: 4px;
- padding-right: 4px;
+ padding-left: 0px;
+ padding-right: 0px;
&:not(:only-child) {
- margin-left: 3px;
- margin-right: 3px;
+ margin-left: 1px;
+ margin-right: 1px;
- &:first-child { margin-left: -1px; }
+ &:first-child { margin-left: 0px; }
&:last-child { margin-right: -1px; }
}
> tab {
- margin-left: 4px;
- margin-right: 4px;
+ margin-left: 0px;
+ margin-right: 0px;
&.reorderable-page { border-style: none solid; }
}
@@ -2271,32 +2293,34 @@ notebook {
&.left,
&.right {
> tabs {
- padding-top: 4px;
- padding-bottom: 4px;
+ padding-top: 0px;
+ padding-bottom: 0px;
&:not(:only-child) {
- margin-top: 3px;
- margin-bottom: 3px;
+ margin-top: 0px;
+ margin-bottom: 0px;
- &:first-child { margin-top: -1px; }
+ &:first-child { margin-top: 0px; }
&:last-child { margin-bottom: -1px; }
}
> tab {
- margin-top: 4px;
- margin-bottom: 4px;
+ margin-top: 0px;
+ margin-bottom: 0px;
&.reorderable-page { border-style: solid none; }
}
}
}
- &.top > tabs > tab { padding-bottom: 4px; }
- &.bottom > tabs > tab { padding-top: 4px; }
+ &.top > tabs > tab { padding-bottom: 1px; }
+ &.bottom > tabs > tab { padding-top: 1px; }
}
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
- background-color: $base_color;
+ background-color: $notebook_base_color;
+
+ &:backdrop { background-color: $notebook_base_color; }
}
}
diff --git a/desktop-themes/YaruOk/gtk-4.0/gtk.css b/desktop-themes/YaruOk/gtk-4.0/gtk.css
index d163ec16..913d3642 100644..100755
--- a/desktop-themes/YaruOk/gtk-4.0/gtk.css
+++ b/desktop-themes/YaruOk/gtk-4.0/gtk.css
@@ -761,43 +761,43 @@ menubar > item popover.menu popover.menu { padding: 0 0 4px 0; }
menubar > item popover.menu.background popover.menu.background > contents { margin: 0; border-radius: 6px; }
/************* Notebooks * */
-notebook > header > tabs > tab:checked { outline: 0 solid transparent; outline-offset: 4px; }
+notebook { border-color: #b0b9c9; }
-notebook:focus:focus-visible > header > tabs > tab:checked { outline-color: #a29e9b; outline-width: 2px; outline-offset: -2px; }
-
-notebook > header { padding: 1px; border-color: #a29e9b; border-width: 1px; background-color: transparent; }
+notebook > header { padding: 1px; border-color: #a29e9b; box-shadow: 1px 1px #edeceb, 1px -1px #edeceb, -1px -1px #edeceb; border-width: 1px; background-color: transparent; }
notebook > header > tabs { margin: -1px; }
notebook > header.top { border-bottom-style: solid; }
-notebook > header.top > tabs { margin-bottom: -2px; }
+notebook > header.top > tabs { margin-bottom: -2px; margin-top: 4px; }
-notebook > header.top > tabs > tab:hover { color: #000000; }
+notebook > header.top > tabs > tab { background-image: linear-gradient(to bottom, #f1f1f0, #c0bdba); box-shadow: 0px -1px #a29e9b, 1px 0px #a29e9b, -1px 0px #a29e9b, inset 0px -1px #a29e9b; border-top-left-radius: 3px; border-top-right-radius: 3px; }
-notebook > header.top > tabs > tab:checked { background-image: linear-gradient(to bottom, #a4c2e8 3px, #a29e9b 5px, #ffffff 5px, #ffffff); box-shadow: 0px -1px #a29e9b, 1px 0px #a29e9b, -1px 0px #a29e9b; }
+notebook > header.top > tabs > tab:checked { background-image: linear-gradient(to bottom, #a4c2e8 3px, #4373b0 5px, #f4f4f3 5px, #f4f4f3); box-shadow: 0px -1px #4373b0, 1px 0px #a29e9b, -1px 0px #a29e9b; }
notebook > header.bottom { border-top-style: solid; }
-notebook > header.bottom > tabs { margin-top: -2px; }
+notebook > header.bottom > tabs { margin-top: -3px; }
-notebook > header.bottom > tabs > tab:hover { color: #000000; }
+notebook > header.bottom > tabs > tab { background-image: linear-gradient(to top, #f1f1f0, #c0bdba); box-shadow: 0px 1px #a29e9b, 1px 0px #a29e9b, -1px 0px #a29e9b, inset 0px 1px #a29e9b; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; }
-notebook > header.bottom > tabs > tab:checked { background-image: linear-gradient(to top, #a4c2e8 3px, #a29e9b 5px, #ffffff 5px, #ffffff); box-shadow: 0px 1px #a29e9b, 1px 0px #a29e9b, -1px 0px #a29e9b; }
+notebook > header.bottom > tabs > tab:checked { background-image: linear-gradient(to top, #a4c2e8 3px, #4373b0 5px, #f4f4f3 5px, #f4f4f3); box-shadow: 0px 1px #4373b0, 1px 0px #a29e9b, -1px 0px #a29e9b; }
notebook > header.left { border-right-style: solid; }
-notebook > header.left > tabs { margin-right: -2px; }
+notebook > header.left > tabs { margin-right: -3px; }
-notebook > header.left > tabs > tab:hover { color: #000000; }
+notebook > header.left > tabs > tab { background-image: linear-gradient(to right, #f1f1f0, #c0bdba); box-shadow: 0px 1px #a29e9b, 0px -1px #a29e9b, -1px 0px #a29e9b, inset -1px 0px #a29e9b; border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
-notebook > header.left > tabs > tab:checked { background-image: linear-gradient(to right, #a4c2e8 3px, #a29e9b 5px, #ffffff 5px, #ffffff); box-shadow: 0px -1px #a29e9b, 0px 1px #a29e9b; }
+notebook > header.left > tabs > tab:checked { background-image: linear-gradient(to right, #a4c2e8 3px, #4373b0 5px, #f4f4f3 5px, #f4f4f3); box-shadow: -1px 0px #4373b0, 0px -1px #a29e9b, 0px 1px #a29e9b; }
notebook > header.right { border-left-style: solid; }
-notebook > header.right > tabs { margin-left: -2px; }
+notebook > header.right > tabs { margin-left: -3px; }
+
+notebook > header.right > tabs > tab { background-image: linear-gradient(to left, #f1f1f0, #c0bdba); box-shadow: 0px 1px #a29e9b, 0px -1px #a29e9b, 1px 0px #a29e9b, inset 1px 0px #a29e9b; border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
-notebook > header.right > tabs > tab:checked { background-image: linear-gradient(to left, #a4c2e8 3px, #a29e9b 5px, #ffffff 5px, #ffffff); box-shadow: 0px -1px #a29e9b, 0px 1px #a29e9b; }
+notebook > header.right > tabs > tab:checked { background-image: linear-gradient(to left, #a4c2e8 3px, #4373b0 5px, #f4f4f3 5px, #f4f4f3); box-shadow: 1px 0px #4373b0, 0px -1px #a29e9b, 0px 1px #a29e9b; }
notebook > header.top > tabs > arrow { border-top-style: none; }
@@ -847,35 +847,37 @@ notebook > header > tabs > tab button.flat:last-child { margin-left: 4px; margin
notebook > header > tabs > tab button.flat:first-child { margin-left: -4px; margin-right: 4px; }
-notebook > header.top > tabs, notebook > header.bottom > tabs { padding-left: 4px; padding-right: 4px; }
+notebook > header.top > tabs, notebook > header.bottom > tabs { padding-left: 0px; padding-right: 0px; }
-notebook > header.top > tabs:not(:only-child), notebook > header.bottom > tabs:not(:only-child) { margin-left: 3px; margin-right: 3px; }
+notebook > header.top > tabs:not(:only-child), notebook > header.bottom > tabs:not(:only-child) { margin-left: 1px; margin-right: 1px; }
-notebook > header.top > tabs:not(:only-child):first-child, notebook > header.bottom > tabs:not(:only-child):first-child { margin-left: -1px; }
+notebook > header.top > tabs:not(:only-child):first-child, notebook > header.bottom > tabs:not(:only-child):first-child { margin-left: 0px; }
notebook > header.top > tabs:not(:only-child):last-child, notebook > header.bottom > tabs:not(:only-child):last-child { margin-right: -1px; }
-notebook > header.top > tabs > tab, notebook > header.bottom > tabs > tab { margin-left: 4px; margin-right: 4px; }
+notebook > header.top > tabs > tab, notebook > header.bottom > tabs > tab { margin-left: 0px; margin-right: 0px; }
notebook > header.top > tabs > tab.reorderable-page, notebook > header.bottom > tabs > tab.reorderable-page { border-style: none solid; }
-notebook > header.left > tabs, notebook > header.right > tabs { padding-top: 4px; padding-bottom: 4px; }
+notebook > header.left > tabs, notebook > header.right > tabs { padding-top: 0px; padding-bottom: 0px; }
-notebook > header.left > tabs:not(:only-child), notebook > header.right > tabs:not(:only-child) { margin-top: 3px; margin-bottom: 3px; }
+notebook > header.left > tabs:not(:only-child), notebook > header.right > tabs:not(:only-child) { margin-top: 0px; margin-bottom: 0px; }
-notebook > header.left > tabs:not(:only-child):first-child, notebook > header.right > tabs:not(:only-child):first-child { margin-top: -1px; }
+notebook > header.left > tabs:not(:only-child):first-child, notebook > header.right > tabs:not(:only-child):first-child { margin-top: 0px; }
notebook > header.left > tabs:not(:only-child):last-child, notebook > header.right > tabs:not(:only-child):last-child { margin-bottom: -1px; }
-notebook > header.left > tabs > tab, notebook > header.right > tabs > tab { margin-top: 4px; margin-bottom: 4px; }
+notebook > header.left > tabs > tab, notebook > header.right > tabs > tab { margin-top: 0px; margin-bottom: 0px; }
notebook > header.left > tabs > tab.reorderable-page, notebook > header.right > tabs > tab.reorderable-page { border-style: solid none; }
-notebook > header.top > tabs > tab { padding-bottom: 4px; }
+notebook > header.top > tabs > tab { padding-bottom: 1px; }
+
+notebook > header.bottom > tabs > tab { padding-top: 1px; }
-notebook > header.bottom > tabs > tab { padding-top: 4px; }
+notebook > stack:not(:only-child) { background-color: #f4f4f3; }
-notebook > stack:not(:only-child) { background-color: #ffffff; }
+notebook > stack:not(:only-child):backdrop { background-color: #f4f4f3; }
/************** Scrollbars * */
scrollbar { background-color: #bebdbc; transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }