From 5e495c975ec69f5ebc9a8871479844500bfeda6b Mon Sep 17 00:00:00 2001 From: EliverLara Date: Thu, 17 Mar 2022 14:23:43 -0600 Subject: [PATCH] Gnome: Fix issue with sidebar in rtl layouts, Fixes #199 --- gtk-3.0/_drawing.scss | 10 ++++++++++ gtk-3.0/gtk-dark.css | 20 +++++++++++++------ gtk-3.0/gtk.css | 20 +++++++++++++------ gtk-3.0/widgets/_sidebar.scss | 37 +++++++++++++++++++++-------------- 4 files changed, 60 insertions(+), 27 deletions(-) diff --git a/gtk-3.0/_drawing.scss b/gtk-3.0/_drawing.scss index 123f12be..4d196a8f 100755 --- a/gtk-3.0/_drawing.scss +++ b/gtk-3.0/_drawing.scss @@ -590,3 +590,13 @@ border: none; box-shadow: none; } + + +@mixin sidebar_bg ($dir, $c1, $c2) { + + + background-image: linear-gradient(to $dir, $c1 40px, + $c2 35px,$c2 36px, + $c2 36px,$c2 99%, + $c2 100%); +} \ No newline at end of file diff --git a/gtk-3.0/gtk-dark.css b/gtk-3.0/gtk-dark.css index ec2eb979..bc9758b0 100755 --- a/gtk-3.0/gtk-dark.css +++ b/gtk-3.0/gtk-dark.css @@ -3950,36 +3950,44 @@ stacksidebar row { placessidebar.sidebar { background-color: transparent; background-image: linear-gradient(to right, #252a34 40px, #2a2f3a 35px, #2a2f3a 36px, #2a2f3a 36px, #2a2f3a 99%, #2a2f3a 100%); } + placessidebar.sidebar:dir(rtl) { + background-image: linear-gradient(to left, #1f232b 40px, #2a2f3a 35px, #2a2f3a 36px, #2a2f3a 36px, #2a2f3a 99%, #2a2f3a 100%); } placessidebar.sidebar row.sidebar-row.sidebar-row .sidebar-icon { margin-left: -14px; margin-right: 12px; padding-left: 14px; padding-right: 12px; color: #98abb2; } + placessidebar.sidebar row.sidebar-row.sidebar-row .sidebar-icon:dir(rtl) { + margin-right: -14px; + margin-left: 12px; + padding-right: 14px; + padding-left: 12px; } placessidebar.sidebar row.sidebar-row:hover { transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: rgba(0, 0, 0, 0.76); background-color: transparent; - /*rgba(65,67,75,0.4); */ - background-image: linear-gradient(to right, rgba(65, 67, 75, 0) 40px, rgba(0, 0, 0, 0.12) 40px, rgba(0, 0, 0, 0.12) 97%); } + background-image: linear-gradient(to right, rgba(65, 67, 75, 0) 40px, rgba(0, 0, 0, 0.12) 35px, rgba(0, 0, 0, 0.12) 36px, rgba(0, 0, 0, 0.12) 36px, rgba(0, 0, 0, 0.12) 99%, rgba(0, 0, 0, 0.12) 100%); } + placessidebar.sidebar row.sidebar-row:hover:dir(rtl) { + background-image: linear-gradient(to left, rgba(65, 67, 75, 0) 40px, rgba(0, 0, 0, 0.12) 35px, rgba(0, 0, 0, 0.12) 36px, rgba(0, 0, 0, 0.12) 36px, rgba(0, 0, 0, 0.12) 99%, rgba(0, 0, 0, 0.12) 100%); } placessidebar.sidebar row.sidebar-row:active:hover { color: rgba(0, 0, 0, 0.76); background-color: rgba(0, 0, 0, 0.23); } placessidebar.sidebar row.sidebar-row:selected { color: #d8dee9; background-color: transparent; - background-image: linear-gradient(to right, #4c566a 40px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 97%); } + background-image: linear-gradient(to right, #4c566a 40px, rgba(65, 67, 75, 0) 35px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 99%, rgba(65, 67, 75, 0) 100%); } placessidebar.sidebar row.sidebar-row:selected label { color: #576279; } + placessidebar.sidebar row.sidebar-row:selected:dir(rtl) { + background-image: linear-gradient(to left, rgba(76, 86, 106, 0.7) 40px, rgba(65, 67, 75, 0) 35px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 99%, rgba(65, 67, 75, 0) 100%); } placessidebar.sidebar row.sidebar-row:selected:hover { color: #ffffff; background-color: rgba(0, 0, 0, 0.24); } placessidebar.sidebar row.sidebar-row:selected:hover .sidebar-icon { color: #ffffff; } placessidebar.sidebar row.sidebar-row:selected:backdrop { - color: rgba(0, 0, 0, 0.54); - background-color: transparent; - background-image: linear-gradient(to right, #4c566a 40px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 97%); } + color: rgba(216, 222, 233, 0.5); } placessidebar.sidebar row.sidebar-row:selected:backdrop .sidebar-icon { -gtk-icon-shadow: none; } placessidebar.sidebar row.sidebar-row:selected .sidebar-icon { diff --git a/gtk-3.0/gtk.css b/gtk-3.0/gtk.css index bc961e5f..ca88a145 100755 --- a/gtk-3.0/gtk.css +++ b/gtk-3.0/gtk.css @@ -3950,36 +3950,44 @@ stacksidebar row { placessidebar.sidebar { background-color: transparent; background-image: linear-gradient(to right, #252a34 40px, #2a2f3a 35px, #2a2f3a 36px, #2a2f3a 36px, #2a2f3a 99%, #2a2f3a 100%); } + placessidebar.sidebar:dir(rtl) { + background-image: linear-gradient(to left, #1f232b 40px, #2a2f3a 35px, #2a2f3a 36px, #2a2f3a 36px, #2a2f3a 99%, #2a2f3a 100%); } placessidebar.sidebar row.sidebar-row.sidebar-row .sidebar-icon { margin-left: -14px; margin-right: 12px; padding-left: 14px; padding-right: 12px; color: #98abb2; } + placessidebar.sidebar row.sidebar-row.sidebar-row .sidebar-icon:dir(rtl) { + margin-right: -14px; + margin-left: 12px; + padding-right: 14px; + padding-left: 12px; } placessidebar.sidebar row.sidebar-row:hover { transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: rgba(0, 0, 0, 0.76); background-color: transparent; - /*rgba(65,67,75,0.4); */ - background-image: linear-gradient(to right, rgba(65, 67, 75, 0) 40px, rgba(0, 0, 0, 0.12) 40px, rgba(0, 0, 0, 0.12) 97%); } + background-image: linear-gradient(to right, rgba(65, 67, 75, 0) 40px, rgba(0, 0, 0, 0.12) 35px, rgba(0, 0, 0, 0.12) 36px, rgba(0, 0, 0, 0.12) 36px, rgba(0, 0, 0, 0.12) 99%, rgba(0, 0, 0, 0.12) 100%); } + placessidebar.sidebar row.sidebar-row:hover:dir(rtl) { + background-image: linear-gradient(to left, rgba(65, 67, 75, 0) 40px, rgba(0, 0, 0, 0.12) 35px, rgba(0, 0, 0, 0.12) 36px, rgba(0, 0, 0, 0.12) 36px, rgba(0, 0, 0, 0.12) 99%, rgba(0, 0, 0, 0.12) 100%); } placessidebar.sidebar row.sidebar-row:active:hover { color: rgba(0, 0, 0, 0.76); background-color: rgba(0, 0, 0, 0.23); } placessidebar.sidebar row.sidebar-row:selected { color: #d8dee9; background-color: transparent; - background-image: linear-gradient(to right, #4c566a 40px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 97%); } + background-image: linear-gradient(to right, #4c566a 40px, rgba(65, 67, 75, 0) 35px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 99%, rgba(65, 67, 75, 0) 100%); } placessidebar.sidebar row.sidebar-row:selected label { color: #576279; } + placessidebar.sidebar row.sidebar-row:selected:dir(rtl) { + background-image: linear-gradient(to left, rgba(76, 86, 106, 0.7) 40px, rgba(65, 67, 75, 0) 35px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 99%, rgba(65, 67, 75, 0) 100%); } placessidebar.sidebar row.sidebar-row:selected:hover { color: #ffffff; background-color: rgba(0, 0, 0, 0.24); } placessidebar.sidebar row.sidebar-row:selected:hover .sidebar-icon { color: #ffffff; } placessidebar.sidebar row.sidebar-row:selected:backdrop { - color: rgba(0, 0, 0, 0.54); - background-color: transparent; - background-image: linear-gradient(to right, #4c566a 40px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 97%); } + color: rgba(216, 222, 233, 0.5); } placessidebar.sidebar row.sidebar-row:selected:backdrop .sidebar-icon { -gtk-icon-shadow: none; } placessidebar.sidebar row.sidebar-row:selected .sidebar-icon { diff --git a/gtk-3.0/widgets/_sidebar.scss b/gtk-3.0/widgets/_sidebar.scss index a1a58b7b..931612eb 100644 --- a/gtk-3.0/widgets/_sidebar.scss +++ b/gtk-3.0/widgets/_sidebar.scss @@ -120,10 +120,9 @@ stacksidebar { placessidebar{ &.sidebar{ background-color: transparent; - background-image:linear-gradient(to right, darken($main_dark_color, 2%) 40px, - $_sidebar_color 35px,$_sidebar_color 36px, - $_sidebar_color 36px,$_sidebar_color 99%, - $_sidebar_color 100%); + + @include sidebar_bg(right, darken($main_dark_color, 2%), $_sidebar_color); + &:dir(rtl) { @include sidebar_bg(left, darken($main_dark_color, 5%), $_sidebar_color); } row{ &.sidebar-row { &.sidebar-row{ @@ -133,13 +132,23 @@ placessidebar{ padding-left: 14px; padding-right: 12px; color: #98abb2; + + &:dir(rtl) { + margin-right:-14px; + margin-left: 12px; + padding-right: 14px; + padding-left: 12px; + + } } } &:hover{ transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: rgba(0,0,0,0.76); - background-color: transparent; /*rgba(65,67,75,0.4); */ - background-image:linear-gradient(to right, rgba(65,67,75,0) 40px, rgba(0,0,0,0.12) 40px,rgba(0,0,0,0.12) 97%); + background-color: transparent; + + @include sidebar_bg(right,rgba(65,67,75,0), rgba(0,0,0,0.12)); + &:dir(rtl) { @include sidebar_bg(left,rgba(65,67,75,0), rgba(0,0,0,0.12)); } } &:active{ @@ -155,9 +164,11 @@ placessidebar{ color: lighten($selected_bg_color, 5%); } background-color: transparent; - background-image:linear-gradient(to right, $selected_bg_color 40px, - rgba(65,67,75,0) 36px, rgba(65,67,75,0)97%); - &:hover{ + + @include sidebar_bg(right, $selected_bg_color, rgba(65,67,75,0)); + &:dir(rtl) { @include sidebar_bg(left, transparentize($selected_bg_color, 0.3), rgba(65,67,75,0)); } + + &:hover{ color: #ffffff; background-color: rgba(0,0,0,0.24); .sidebar-icon { @@ -165,16 +176,12 @@ placessidebar{ } } &:backdrop{ - color: rgba(0,0,0,0.54);; - background-color: transparent; - background-image:linear-gradient(to right, $selected_bg_color 40px, - rgba(65,67,75,0) 36px, rgba(65,67,75,0)97%); - + color: $backdrop_selected_fg_color; .sidebar-icon { -gtk-icon-shadow: none; } } - + .sidebar-icon { -gtk-icon-shadow: 0 1px transparentize($selected_fg_color, 0.2); color: inherit;