starred/Nordic
1
0
Fork 0
mirror of https://github.com/EliverLara/Nordic.git synced 2026-09-27 17:36:00 -04:00
Code Issues Packages Projects Releases Wiki Activity

Gnome: Fix issue with sidebar in rtl layouts, Fixes #199

Browse Source
This commit is contained in:
EliverLara
2022-03-17 14:34:15 -06:00
parent cf63e2bbdc
commit 97d3e878fc
4 changed files with 61 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gtk-3.0/_drawing.scss
+10
View File
@@ -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%);
}
gtk-3.0/gtk-dark.css
+14 -6
View File
@@ -3961,36 +3961,44 @@ stacksidebar row {
placessidebar.sidebar {
background-color: transparent;
background-image: linear-gradient(to right, #232831 40px, #2e3440 35px, #2e3440 36px, #2e3440 36px, #2e3440 99%, #2e3440 100%); }
placessidebar.sidebar:dir(rtl) {
background-image: linear-gradient(to left, #232831 40px, #2e3440 35px, #2e3440 36px, #2e3440 36px, #2e3440 99%, #2e3440 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: #fff;
background-color: transparent;
background-image: linear-gradient(to right, #81a1c1 40px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 97%); }
background-image: linear-gradient(to right, #81a1c1 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: #81a1c1; }
placessidebar.sidebar row.sidebar-row:selected:dir(rtl) {
background-image: linear-gradient(to left, rgba(129, 161, 193, 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, #81a1c1 40px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 97%); }
color: rgba(254, 254, 254, 0.5); }
placessidebar.sidebar row.sidebar-row:selected:backdrop .sidebar-icon {
-gtk-icon-shadow: none; }
placessidebar.sidebar row.sidebar-row:selected .sidebar-icon {
gtk-3.0/gtk.css
+14 -6
View File
@@ -3961,36 +3961,44 @@ stacksidebar row {
placessidebar.sidebar {
background-color: transparent;
background-image: linear-gradient(to right, #232831 40px, #2e3440 35px, #2e3440 36px, #2e3440 36px, #2e3440 99%, #2e3440 100%); }
placessidebar.sidebar:dir(rtl) {
background-image: linear-gradient(to left, #232831 40px, #2e3440 35px, #2e3440 36px, #2e3440 36px, #2e3440 99%, #2e3440 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: #fff;
background-color: transparent;
background-image: linear-gradient(to right, #81a1c1 40px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 97%); }
background-image: linear-gradient(to right, #81a1c1 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: #81a1c1; }
placessidebar.sidebar row.sidebar-row:selected:dir(rtl) {
background-image: linear-gradient(to left, rgba(129, 161, 193, 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, #81a1c1 40px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 97%); }
color: rgba(254, 254, 254, 0.5); }
placessidebar.sidebar row.sidebar-row:selected:backdrop .sidebar-icon {
-gtk-icon-shadow: none; }
placessidebar.sidebar row.sidebar-row:selected .sidebar-icon {
gtk-3.0/widgets/_sidebar.scss
+23 -18
View File
@@ -120,10 +120,9 @@ stacksidebar {
placessidebar{
&.sidebar{
background-color: transparent;
background-image:linear-gradient(to right, darken($main_dark_color, 5%) 40px,
$_sidebar_color 35px,$_sidebar_color 36px,
$_sidebar_color 36px,$_sidebar_color 99%,
$_sidebar_color 100%);
@include sidebar_bg(right, darken($main_dark_color, 5%), $_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{
@@ -151,13 +160,13 @@ placessidebar{
&:selected{
color: #fff;
label {
color: $selected_bg_color;
}
label { color: $selected_bg_color; }
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 +174,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(#fff, 0.2);
color: inherit;