From 17d1f5fb5ff228bf9ea59a781eb3ff104e142ecb Mon Sep 17 00:00:00 2001 From: Mate Date: Sun, 13 Jun 2021 07:44:13 +0200 Subject: sync_yru_ok_with_green --- desktop-themes/YaruOk/gtk-3.0/_apps.scss | 50 +++--- desktop-themes/YaruOk/gtk-3.0/_common.scss | 40 ++--- desktop-themes/YaruOk/gtk-3.0/assets/Makefile.am | 3 + .../YaruOk/gtk-3.0/assets/panel-grid.svg | 173 +++++++++++++++++++++ .../YaruOk/gtk-3.0/assets/slider-horz-grip.png | Bin 0 -> 173 bytes .../YaruOk/gtk-3.0/assets/slider-vert-grip.png | Bin 0 -> 162 bytes desktop-themes/YaruOk/gtk-3.0/gtk.css | 40 +++-- 7 files changed, 243 insertions(+), 63 deletions(-) create mode 100644 desktop-themes/YaruOk/gtk-3.0/assets/panel-grid.svg create mode 100644 desktop-themes/YaruOk/gtk-3.0/assets/slider-horz-grip.png create mode 100644 desktop-themes/YaruOk/gtk-3.0/assets/slider-vert-grip.png diff --git a/desktop-themes/YaruOk/gtk-3.0/_apps.scss b/desktop-themes/YaruOk/gtk-3.0/_apps.scss index 7a11ec65..88f55f12 100644 --- a/desktop-themes/YaruOk/gtk-3.0/_apps.scss +++ b/desktop-themes/YaruOk/gtk-3.0/_apps.scss @@ -817,11 +817,34 @@ PanelApplet.wnck-applet .wnck-pager { border-radius: $button_radius; } -/* Weird, this sets the border color of the clockmap */ -#MatePanelPopupWindow > frame > box > box > box > widget { - color: $borders_color; + +#PanelApplet > #clock-applet-button.flat.toggle { + background-color: transparent; + background-image: none; + border-color: transparent; + border-width: 0px; + box-shadow: none; } +#PanelApplet > #clock-applet-button.flat.toggle:hover { + box-shadow: inset 0px 1px $borders_color,inset 0px -1px $borders_color, inset 1px 0px $borders_color,inset -1px 0px $borders_color; + background-image: linear-gradient(to bottom, + $button_hover_gradient_a 5%, + $button_hover_gradient_b 95%, + $button_hover_gradient_c); + } + +#PanelApplet > #clock-applet-button.flat.toggle:checked { + box-shadow: inset 0px 1px $borders_color,inset 0px -1px $borders_color, inset 1px 0px $borders_color,inset -1px 0px $borders_color; + background-image: linear-gradient(to bottom, + $button_active_gradient_a, + $button_active_gradient_b 3px, + $button_active_gradient_c 4px, + $button_active_gradient_d 50%, + $button_active_gradient_e 50%, + $button_active_gradient_f); + } + /* volume applet */ .mate-panel-applet-slider, .mate-panel-applet-slider.background { @@ -1005,26 +1028,7 @@ iconview { } } -/* Brisk menu's panel button */ -.mate-panel-menu-bar #PanelApplet button.flat.toggle.brisk-button { - &, &:hover { - image { - margin: 0px; - padding: 0px; - } - background-image: none; - background-color: transparent; - padding: 0px; - margin: 0px; - border-color: transparent; - border-radius: 0; - border-image: none; - text-shadow: none; - &:checked { - box-shadow: inset 0 -3px 0 0 $selected_bg_color; - } - } -} + /* mate-keyboard-layout-view, mate-keyboard-layout-chooser */ /* this way it styles only the border of the keys, the bg of the map itself diff --git a/desktop-themes/YaruOk/gtk-3.0/_common.scss b/desktop-themes/YaruOk/gtk-3.0/_common.scss index 7f47630f..1cec0355 100644 --- a/desktop-themes/YaruOk/gtk-3.0/_common.scss +++ b/desktop-themes/YaruOk/gtk-3.0/_common.scss @@ -1129,7 +1129,7 @@ modelbutton.flat, $menubar_menuitem_hover_gradient_c 50%, $menubar_menuitem_hover_gradient_d ); background-color: $selected_bg_color; - color: white; } + color: $selected_fg_color; } &:selected { @extend %selected_items; } @@ -2593,8 +2593,8 @@ notebook { } tab { - min-height: 30px; - min-width: 30px; + min-height: 22px; + min-width: 22px; padding: 3px 12px; outline-offset: -5px; @@ -2671,20 +2671,20 @@ notebook { &.top, &.bottom { tabs { - padding-left: 1px; - padding-right: 1px; + padding-left: 0px; + padding-right: 0px; &:not(:only-child) { margin-left: 1px; margin-right: 1px; - &:first-child { margin-left: -1px; } + &:first-child { margin-left: 0px; } &:last-child { margin-right: -1px; } } tab { - margin-left: 1px; - margin-right: 1px; + margin-left: 0px; + margin-right: 0px; &.reorderable-page { border-style: none solid; } } @@ -2695,18 +2695,18 @@ notebook { &.right { tabs { padding-top: 0px; - padding-bottom: 1px; + padding-bottom: 0px; &:not(:only-child) { margin-top: 0px; - margin-bottom: 1px; + margin-bottom: 0px; &:first-child { margin-top: 0px; } &:last-child { margin-bottom: -1px; } } tab { - margin-top: 1px; + margin-top: 0px; margin-bottom: 0px; &.reorderable-page { border-style: solid none; } @@ -2790,7 +2790,8 @@ scrollbar { } &.horizontal slider { - background-image: linear-gradient(to bottom, + background-position: center center; + background-image: url("assets/slider-horz-grip.png"), linear-gradient(to bottom, transparentize($scrollbar_slider_gradient_a, 0.01) 1px, transparentize($scrollbar_slider_gradient_b, 0.01) 50%, transparentize($scrollbar_slider_gradient_c, 0.01) 50%, @@ -2798,7 +2799,8 @@ scrollbar { } &.vertical slider { - background-image: linear-gradient(to right, + background-position: center center; + background-image: url("assets/slider-vert-grip.png"), linear-gradient(to right, transparentize($scrollbar_slider_gradient_a, 0.01) 1px, transparentize($scrollbar_slider_gradient_b, 0.01) 50%, transparentize($scrollbar_slider_gradient_c, 0.01) 50%, @@ -2806,7 +2808,8 @@ scrollbar { } &.vertical slider:hover { - background-image: linear-gradient(to right, + background-position: center center; + background-image: url("assets/slider-vert-grip.png"), linear-gradient(to right, $scrollbar_slider_inner_border_color, $scrollbar_slider_hover_gradient_a 1px, $scrollbar_slider_hover_gradient_b 50%, @@ -2816,7 +2819,8 @@ scrollbar { } &.horizontal slider:hover { - background-image: linear-gradient(to bottom, + background-position: center center; + background-image: url("assets/slider-horz-grip.png"), linear-gradient(to bottom, $scrollbar_slider_inner_border_color, $scrollbar_slider_hover_gradient_a 1px, $scrollbar_slider_hover_gradient_b 50%, @@ -2829,9 +2833,9 @@ scrollbar { slider { background-repeat: no-repeat; background-position: center center; - min-width: 13px; - min-height: 13px; - border: 1px solid darken($core_color_a , 20%); + min-width: 14px; + min-height: 14px; + border: 1px solid darken($core_color_a , 35%); border-radius: 0px; // background-clip: padding-box; // background-color: $scrollbar_slider_color; diff --git a/desktop-themes/YaruOk/gtk-3.0/assets/Makefile.am b/desktop-themes/YaruOk/gtk-3.0/assets/Makefile.am index 3363e8eb..aaf5f5c7 100644 --- a/desktop-themes/YaruOk/gtk-3.0/assets/Makefile.am +++ b/desktop-themes/YaruOk/gtk-3.0/assets/Makefile.am @@ -3,6 +3,9 @@ THEME_NAME=YaruOk themedir = $(datadir)/themes/$(THEME_NAME)/gtk-3.0/assets theme_DATA = \ + panel-grid.svg \ + slider-horz-grip.png \ + slider-vert-grip.png \ bullet-symbolic.svg \ bullet-symbolic.symbolic.png \ check-symbolic.svg \ diff --git a/desktop-themes/YaruOk/gtk-3.0/assets/panel-grid.svg b/desktop-themes/YaruOk/gtk-3.0/assets/panel-grid.svg new file mode 100644 index 00000000..411f5e94 --- /dev/null +++ b/desktop-themes/YaruOk/gtk-3.0/assets/panel-grid.svg @@ -0,0 +1,173 @@ + + + + + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + + + + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + + + diff --git a/desktop-themes/YaruOk/gtk-3.0/assets/slider-horz-grip.png b/desktop-themes/YaruOk/gtk-3.0/assets/slider-horz-grip.png new file mode 100644 index 00000000..313c11dc Binary files /dev/null and b/desktop-themes/YaruOk/gtk-3.0/assets/slider-horz-grip.png differ diff --git a/desktop-themes/YaruOk/gtk-3.0/assets/slider-vert-grip.png b/desktop-themes/YaruOk/gtk-3.0/assets/slider-vert-grip.png new file mode 100644 index 00000000..4b5a55a3 Binary files /dev/null and b/desktop-themes/YaruOk/gtk-3.0/assets/slider-vert-grip.png differ diff --git a/desktop-themes/YaruOk/gtk-3.0/gtk.css b/desktop-themes/YaruOk/gtk-3.0/gtk.css index 5fdbd10f..b634a358 100644 --- a/desktop-themes/YaruOk/gtk-3.0/gtk.css +++ b/desktop-themes/YaruOk/gtk-3.0/gtk.css @@ -431,7 +431,7 @@ modelbutton.flat, .menuitem.button.flat, modelbutton.flat:backdrop, modelbutton. /* menu buttons */ modelbutton.flat, .menuitem.button.flat { min-height: 26px; padding-left: 5px; padding-right: 5px; border-radius: 4px; outline-offset: -2px; } -modelbutton.flat:hover, .menuitem.button.flat:hover { box-shadow: inset 0px 1px #4b6e9b, inset 0px -1px #4b6e9b; border-style: solid; background-image: linear-gradient(to bottom, #a4c2e8, #96b8e2 50%, #91b4df 50%, #84a9d9); background-color: #89addb; color: white; } +modelbutton.flat:hover, .menuitem.button.flat:hover { box-shadow: inset 0px 1px #4b6e9b, inset 0px -1px #4b6e9b; border-style: solid; background-image: linear-gradient(to bottom, #a4c2e8, #96b8e2 50%, #91b4df 50%, #84a9d9); background-color: #89addb; color: #ffffff; } modelbutton.flat arrow { background: none; } @@ -935,7 +935,7 @@ notebook > header > tabs > arrow:hover:not(:active):not(:backdrop) { background- notebook > header > tabs > arrow:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } -notebook > header tab { min-height: 30px; min-width: 30px; padding: 3px 12px; outline-offset: -5px; color: #000000; font-weight: normal; border-width: 0px; border-color: transparent; } +notebook > header tab { min-height: 22px; min-width: 22px; padding: 3px 12px; outline-offset: -5px; color: #000000; font-weight: normal; border-width: 0px; border-color: transparent; } notebook > header tab:hover { color: #000000; background-color: #e3e2e0; } @@ -965,27 +965,27 @@ notebook > header tab button.flat:last-child { margin-left: 4px; margin-right: - notebook > header tab button.flat:first-child { margin-left: -4px; margin-right: 4px; } -notebook > header.top tabs, notebook > header.bottom tabs { padding-left: 1px; padding-right: 1px; } +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: 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: 1px; margin-right: 1px; } +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: 0px; padding-bottom: 1px; } +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: 0px; margin-bottom: 1px; } +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: 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: 1px; margin-bottom: 0px; } +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; } @@ -1016,15 +1016,15 @@ scrollbar.horizontal trough { min-height: 14px; border-radius: 0px; border-width scrollbar.vertical trough { min-height: 14px; border-radius: 0px; border-width: 0px 1px 0px 1px; border-image: none; background-image: linear-gradient(to right, #cdcbc9, #d6d4d2 50%); } -scrollbar.horizontal slider { background-image: linear-gradient(to bottom, rgba(161, 192, 231, 0.99) 1px, rgba(153, 186, 227, 0.99) 50%, rgba(142, 177, 222, 0.99) 50%, rgba(132, 169, 217, 0.99) 95%); } +scrollbar.horizontal slider { background-position: center center; background-image: url("assets/slider-horz-grip.png"), linear-gradient(to bottom, rgba(161, 192, 231, 0.99) 1px, rgba(153, 186, 227, 0.99) 50%, rgba(142, 177, 222, 0.99) 50%, rgba(132, 169, 217, 0.99) 95%); } -scrollbar.vertical slider { background-image: linear-gradient(to right, rgba(161, 192, 231, 0.99) 1px, rgba(153, 186, 227, 0.99) 50%, rgba(142, 177, 222, 0.99) 50%, rgba(132, 169, 217, 0.99) 95%); } +scrollbar.vertical slider { background-position: center center; background-image: url("assets/slider-vert-grip.png"), linear-gradient(to right, rgba(161, 192, 231, 0.99) 1px, rgba(153, 186, 227, 0.99) 50%, rgba(142, 177, 222, 0.99) 50%, rgba(132, 169, 217, 0.99) 95%); } -scrollbar.vertical slider:hover { background-image: linear-gradient(to right, #afcaec, #adc8eb 1px, #a1c0e7 50%, #99bae3 50%, #8cafdd 95%, #afcaec); } +scrollbar.vertical slider:hover { background-position: center center; background-image: url("assets/slider-vert-grip.png"), linear-gradient(to right, #afcaec, #adc8eb 1px, #a1c0e7 50%, #99bae3 50%, #8cafdd 95%, #afcaec); } -scrollbar.horizontal slider:hover { background-image: linear-gradient(to bottom, #afcaec, #adc8eb 1px, #a1c0e7 50%, #99bae3 50%, #8cafdd 95%, #afcaec); } +scrollbar.horizontal slider:hover { background-position: center center; background-image: url("assets/slider-horz-grip.png"), linear-gradient(to bottom, #afcaec, #adc8eb 1px, #a1c0e7 50%, #99bae3 50%, #8cafdd 95%, #afcaec); } -scrollbar slider { background-repeat: no-repeat; background-position: center center; min-width: 13px; min-height: 13px; border: 1px solid #538bd3; border-radius: 0px; } +scrollbar slider { background-repeat: no-repeat; background-position: center center; min-width: 14px; min-height: 14px; border: 1px solid #2c65ae; border-radius: 0px; } scrollbar slider:hover { background-color: #2f2f2f; } @@ -2326,8 +2326,11 @@ PanelApplet.wnck-applet .wnck-pager { outline-style: solid; outline-offset: -1px /* clock window */ #MatePanelPopupWindow { border-radius: 4px; } -/* Weird, this sets the border color of the clockmap */ -#MatePanelPopupWindow > frame > box > box > box > widget { color: #a29e9b; } +#PanelApplet > #clock-applet-button.flat.toggle { background-color: transparent; background-image: none; border-color: transparent; border-width: 0px; box-shadow: none; } + +#PanelApplet > #clock-applet-button.flat.toggle:hover { box-shadow: inset 0px 1px #a29e9b, inset 0px -1px #a29e9b, inset 1px 0px #a29e9b, inset -1px 0px #a29e9b; background-image: linear-gradient(to bottom, #ffffff 5%, #f8f8f7 95%, #edeceb); } + +#PanelApplet > #clock-applet-button.flat.toggle:checked { box-shadow: inset 0px 1px #a29e9b, inset 0px -1px #a29e9b, inset 1px 0px #a29e9b, inset -1px 0px #a29e9b; background-image: linear-gradient(to bottom, #cbc9c6, #d6d4d2 3px, #d9d7d5 4px, #cdcbc9 50%, #c9c6c4 50%, #c0bdba); } /* volume applet */ .mate-panel-applet-slider, .mate-panel-applet-slider.background { border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.23); background: transparent; } @@ -2389,13 +2392,6 @@ iconview { border-radius: 4px; } iconview:hover { background-color: #b0c8e7; } -/* Brisk menu's panel button */ -.mate-panel-menu-bar #PanelApplet button.flat.toggle.brisk-button, .mate-panel-menu-bar #PanelApplet button.flat.toggle.brisk-button:hover { background-image: none; background-color: transparent; padding: 0px; margin: 0px; border-color: transparent; border-radius: 0; border-image: none; text-shadow: none; } - -.mate-panel-menu-bar #PanelApplet button.flat.toggle.brisk-button image, .mate-panel-menu-bar #PanelApplet button.flat.toggle.brisk-button:hover image { margin: 0px; padding: 0px; } - -.mate-panel-menu-bar #PanelApplet button.flat.toggle.brisk-button:checked, .mate-panel-menu-bar #PanelApplet button.flat.toggle.brisk-button:hover:checked { box-shadow: inset 0 -3px 0 0 #89addb; } - /* mate-keyboard-layout-view, mate-keyboard-layout-chooser */ /* this way it styles only the border of the keys, the bg of the map itself use the .view class */ matekbd-keyboard-drawing { background-color: #edeceb; } -- cgit v1.2.1