diff options
| author | Mate <[email protected]> | 2021-06-10 10:11:27 +0200 |
|---|---|---|
| committer | raveit65 <[email protected]> | 2021-08-02 23:56:01 +0200 |
| commit | 918c63e610ffaabe27362937128b41b4815063dd (patch) | |
| tree | 23c69ff8fb738fb9c7f586d6c7379b6284f28e92 | |
| parent | 30c2a29a8b1bac3a45881257288dfeb5422db593 (diff) | |
| download | mate-themes-918c63e610ffaabe27362937128b41b4815063dd.tar.bz2 mate-themes-918c63e610ffaabe27362937128b41b4815063dd.tar.xz | |
improve tabs on gtk4
| -rwxr-xr-x[-rw-r--r--] | desktop-themes/YaruOk/gtk-4.0/_common.scss | 108 | ||||
| -rwxr-xr-x[-rw-r--r--] | desktop-themes/YaruOk/gtk-4.0/gtk.css | 54 |
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); } |