Skip to content

Commit

Permalink
Improvement: GTK3&4 - Nautilus sidebar icon and backdrop colors
Browse files Browse the repository at this point in the history
  • Loading branch information
@thekomer
thekomer committed Jan 31, 2022
1 parent 12f2d9a commit 089dfe9
Show file tree
Hide file tree
Showing 8 changed files with 1,686 additions and 2,072 deletions.
33 changes: 17 additions & 16 deletions gtk-3.0/apps/_gnome.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@
* Nautilus *
************/
.nautilus-window {
.frame{
*:selected, *:selected:backdrop {
background: transparent;
color: $selected_bg_color;
label {
color: $selected_bg_color;
}
.frame{
*:selected, *:selected:backdrop {
background: transparent;
color: $selected_bg_color;
label {
color: $selected_bg_color;
}
}
}
paned {
> separator { background-image: none; }
}
.sidebar {
.sidebar {
background-color: transparent;
// background-image: none;

Expand Down Expand Up @@ -46,11 +46,11 @@
}
}
}
}
}
&.background {
background-color: transparentize(darken($base_color,3%),0.05);
background-color: $headerbar_color;
&:backdrop {
background-color: transparentize(darken($base_color,3%),0.05);
background-color: $backdrop_headerbar_bg_color;
}
}

Expand All @@ -70,12 +70,12 @@
}

.titlebar {
.search {
.search {
border: 1px solid transparent;
border-radius: 10px;
// border-radius: 1em; //10px;
box-shadow: none;
margin-top: 10px;
margin-bottom: 10px;
margin-top: 7px;
margin-bottom: 7px;
}
.path-bar-box {
.dim-label {
Expand All @@ -87,8 +87,9 @@
button:active, button:checked {
@include button(active-header);
&:backdrop{
@include button(backdrop-active-header);
&, label{
color: darken(rgb(255, 255, 255), 4%);
color: $headerbar_fg_color;// darken(rgb(255, 255, 255), 4%);
}
}
}
Expand Down
1,800 changes: 800 additions & 1,000 deletions gtk-3.0/gtk-dark.css
View file

Large diffs are not rendered by default.

1,800 changes: 800 additions & 1,000 deletions gtk-3.0/gtk.css
View file

Large diffs are not rendered by default.

9 changes: 4 additions & 5 deletions gtk-3.0/widgets/_sidebar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,14 +133,13 @@ placessidebar{
margin-right: 12px;
padding-left: 14px;
padding-right: 12px;
// color: #9ecfa2;
color: transparentize($selected_bg_color, 0.5);
color: transparentize($selected_bg_color, 0.3);
}
}
&:hover{
transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
color: rgba(0,0,0,0.76);
background-color: if(variant == light, transparentize($fg_color, 0.9), transparentize($fg_color, 0.95));
background-color: if(variant == light, transparentize($fg_color, 0.9), transparentize($fg_color, 0.90));
}

&:active{
Expand All @@ -165,8 +164,8 @@ 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%);
background-image:linear-gradient(to right, $backdrop_selected_bg_color 40px,
rgba(65,67,75,0) 36px, rgba(65,67,75,0)97%);

.sidebar-icon {
color: $backdrop_selected_fg_color;
Expand Down
33 changes: 17 additions & 16 deletions gtk-4.0/apps/_gnome.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@
* Nautilus *
************/
.nautilus-window {
.frame{
*:selected, *:selected:backdrop {
background: transparent;
color: $selected_bg_color;
label {
color: $selected_bg_color;
}
.frame{
*:selected, *:selected:backdrop {
background: transparent;
color: $selected_bg_color;
label {
color: $selected_bg_color;
}
}
}
paned {
> separator { background-image: none; }
}
.sidebar {
.sidebar {
background-color: transparent;
// background-image: none;

Expand Down Expand Up @@ -46,11 +46,11 @@
}
}
}
}
}
&.background {
background-color: transparentize(darken($base_color,3%),0.05);
background-color: $headerbar_color;
&:backdrop {
background-color: transparentize(darken($base_color,3%),0.05);
background-color: $backdrop_headerbar_bg_color;
}
}

Expand All @@ -70,12 +70,12 @@
}

.titlebar {
.search {
.search {
border: 1px solid transparent;
border-radius: 10px;
// border-radius: 1em; //10px;
box-shadow: none;
margin-top: 10px;
margin-bottom: 10px;
margin-top: 7px;
margin-bottom: 7px;
}
.path-bar-box {
.dim-label {
Expand All @@ -87,8 +87,9 @@
button:active, button:checked {
@include button(active-header);
&:backdrop{
@include button(backdrop-active-header);
&, label{
color: darken(rgb(255, 255, 255), 4%);
color: $headerbar_fg_color;// darken(rgb(255, 255, 255), 4%);
}
}
}
Expand Down
37 changes: 22 additions & 15 deletions gtk-4.0/gtk-dark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4164,11 +4164,11 @@ placessidebar.sidebar {
margin-right: 12px;
padding-left: 14px;
padding-right: 12px;
color: rgba(255, 106, 0, 0.5); }
color: rgba(255, 106, 0, 0.7); }
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: rgba(191, 195, 205, 0.05); }
background-color: rgba(191, 195, 205, 0.1); }
placessidebar.sidebar row.sidebar-row:active:hover {
color: rgba(0, 0, 0, 0.76);
background-color: rgba(0, 0, 0, 0.23); }
Expand All @@ -4184,7 +4184,7 @@ placessidebar.sidebar {
placessidebar.sidebar row.sidebar-row:selected:backdrop {
color: rgba(0, 0, 0, 0.54);
background-color: transparent;
background-image: linear-gradient(to right, #ff6a00 40px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 97%); }
background-image: linear-gradient(to right, rgba(255, 106, 0, 0.6) 40px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 97%); }
placessidebar.sidebar row.sidebar-row:selected:backdrop .sidebar-icon {
color: rgba(254, 254, 254, 0.5);
-gtk-icon-shadow: 0 1px rgba(254, 254, 254, 0.3); }
Expand Down Expand Up @@ -5716,9 +5716,9 @@ window.background.budgie-settings-window.csd > box.horizontal > stack > scrolled
background-color: rgba(255, 106, 0, 0.9); }

.nautilus-window.background {
background-color: rgba(12, 15, 26, 0.95); }
background-color: #06070c; }
.nautilus-window.background:backdrop {
background-color: rgba(12, 15, 26, 0.95); }
background-color: #06070c; }

.nautilus-window notebook > stack:only-child {
background-color: #111524; }
Expand All @@ -5733,10 +5733,9 @@ window.background.budgie-settings-window.csd > box.horizontal > stack > scrolled

.nautilus-window .titlebar .search {
border: 1px solid transparent;
border-radius: 10px;
box-shadow: none;
margin-top: 10px;
margin-bottom: 10px; }
margin-top: 7px;
margin-bottom: 7px; }

.nautilus-window .titlebar .path-bar-box .dim-label, .nautilus-window .titlebar .path-bar-box label.separator, .nautilus-window .titlebar .path-bar-box .subtitle {
color: transparent; }
Expand All @@ -5749,14 +5748,22 @@ window.background.budgie-settings-window.csd > box.horizontal > stack > scrolled
background: linear-gradient(to right, #ff3300, #ffa100);
box-shadow: 0px 0px 5px rgba(255, 106, 0, 0.98);
color: white; }
.nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:backdrop, .nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:backdrop label,
.nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:backdrop,
.nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:active:backdrop,
.nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:active:backdrop label,
.nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:checked:backdrop,
.nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:checked:backdrop label,
.nautilus-window .titlebar .path-bar-box button:active:backdrop,
.nautilus-window .titlebar .path-bar-box button:active:backdrop label, .nautilus-window .titlebar .path-bar-box button:checked:backdrop, .nautilus-window .titlebar .path-bar-box button:checked:backdrop label {
color: whitesmoke; }
.nautilus-window .titlebar .path-bar-box button:active:backdrop, .nautilus-window .titlebar .path-bar-box button:checked:backdrop {
border-radius: 1em;
color: rgba(191, 195, 205, 0.4);
background: rgba(255, 106, 0, 0.6);
box-shadow: 0px 0px 0px rgba(255, 106, 0, 0.98); }
.nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:backdrop, .nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:backdrop label,
.nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:active:backdrop,
.nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:active:backdrop label,
.nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:checked:backdrop,
.nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:checked:backdrop label,
.nautilus-window .titlebar .path-bar-box button:active:backdrop,
.nautilus-window .titlebar .path-bar-box button:active:backdrop label, .nautilus-window .titlebar .path-bar-box button:checked:backdrop, .nautilus-window .titlebar .path-bar-box button:checked:backdrop label {
color: #BFC3CD; }

.nautilus-window .titlebar .linked:not(.path-bar) button:active, .nautilus-window .titlebar .linked:not(.path-bar) button:checked, .nautilus-window .titlebar .linked:not(.path-bar) button:active:backdrop, .nautilus-window .titlebar .linked:not(.path-bar) button:checked:backdrop {
background: transparent;
Expand Down Expand Up @@ -5921,7 +5928,7 @@ wnck-pager {
color: #BFC3CD;
background-color: #0E111D;
border-radius: 0.5em;
box-shadow: 4px 4px 10px 3px rgba(255, 255, 255, 0.05); }
box-shadow: 5px 10px 8px 10px rgba(255, 255, 255, 0.05); }

#whiskermenu-window box widget {
color: transparent; }
Expand Down
37 changes: 22 additions & 15 deletions gtk-4.0/gtk.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4164,11 +4164,11 @@ placessidebar.sidebar {
margin-right: 12px;
padding-left: 14px;
padding-right: 12px;
color: rgba(255, 106, 0, 0.5); }
color: rgba(255, 106, 0, 0.7); }
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: rgba(191, 195, 205, 0.05); }
background-color: rgba(191, 195, 205, 0.1); }
placessidebar.sidebar row.sidebar-row:active:hover {
color: rgba(0, 0, 0, 0.76);
background-color: rgba(0, 0, 0, 0.23); }
Expand All @@ -4184,7 +4184,7 @@ placessidebar.sidebar {
placessidebar.sidebar row.sidebar-row:selected:backdrop {
color: rgba(0, 0, 0, 0.54);
background-color: transparent;
background-image: linear-gradient(to right, #ff6a00 40px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 97%); }
background-image: linear-gradient(to right, rgba(255, 106, 0, 0.6) 40px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 97%); }
placessidebar.sidebar row.sidebar-row:selected:backdrop .sidebar-icon {
color: rgba(254, 254, 254, 0.5);
-gtk-icon-shadow: 0 1px rgba(254, 254, 254, 0.3); }
Expand Down Expand Up @@ -5716,9 +5716,9 @@ window.background.budgie-settings-window.csd > box.horizontal > stack > scrolled
background-color: rgba(255, 106, 0, 0.9); }

.nautilus-window.background {
background-color: rgba(12, 15, 26, 0.95); }
background-color: #06070c; }
.nautilus-window.background:backdrop {
background-color: rgba(12, 15, 26, 0.95); }
background-color: #06070c; }

.nautilus-window notebook > stack:only-child {
background-color: #111524; }
Expand All @@ -5733,10 +5733,9 @@ window.background.budgie-settings-window.csd > box.horizontal > stack > scrolled

.nautilus-window .titlebar .search {
border: 1px solid transparent;
border-radius: 10px;
box-shadow: none;
margin-top: 10px;
margin-bottom: 10px; }
margin-top: 7px;
margin-bottom: 7px; }

.nautilus-window .titlebar .path-bar-box .dim-label, .nautilus-window .titlebar .path-bar-box label.separator, .nautilus-window .titlebar .path-bar-box .subtitle {
color: transparent; }
Expand All @@ -5749,14 +5748,22 @@ window.background.budgie-settings-window.csd > box.horizontal > stack > scrolled
background: linear-gradient(to right, #ff3300, #ffa100);
box-shadow: 0px 0px 5px rgba(255, 106, 0, 0.98);
color: white; }
.nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:backdrop, .nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:backdrop label,
.nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:backdrop,
.nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:active:backdrop,
.nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:active:backdrop label,
.nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:checked:backdrop,
.nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:checked:backdrop label,
.nautilus-window .titlebar .path-bar-box button:active:backdrop,
.nautilus-window .titlebar .path-bar-box button:active:backdrop label, .nautilus-window .titlebar .path-bar-box button:checked:backdrop, .nautilus-window .titlebar .path-bar-box button:checked:backdrop label {
color: whitesmoke; }
.nautilus-window .titlebar .path-bar-box button:active:backdrop, .nautilus-window .titlebar .path-bar-box button:checked:backdrop {
border-radius: 1em;
color: rgba(191, 195, 205, 0.4);
background: rgba(255, 106, 0, 0.6);
box-shadow: 0px 0px 0px rgba(255, 106, 0, 0.98); }
.nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:backdrop, .nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:backdrop label,
.nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:active:backdrop,
.nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:active:backdrop label,
.nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:checked:backdrop,
.nautilus-window .titlebar .path-bar-box widget > .text-button:last-child:checked:backdrop label,
.nautilus-window .titlebar .path-bar-box button:active:backdrop,
.nautilus-window .titlebar .path-bar-box button:active:backdrop label, .nautilus-window .titlebar .path-bar-box button:checked:backdrop, .nautilus-window .titlebar .path-bar-box button:checked:backdrop label {
color: #BFC3CD; }

.nautilus-window .titlebar .linked:not(.path-bar) button:active, .nautilus-window .titlebar .linked:not(.path-bar) button:checked, .nautilus-window .titlebar .linked:not(.path-bar) button:active:backdrop, .nautilus-window .titlebar .linked:not(.path-bar) button:checked:backdrop {
background: transparent;
Expand Down Expand Up @@ -5921,7 +5928,7 @@ wnck-pager {
color: #BFC3CD;
background-color: #0E111D;
border-radius: 0.5em;
box-shadow: 4px 4px 10px 3px rgba(255, 255, 255, 0.05); }
box-shadow: 5px 10px 8px 10px rgba(255, 255, 255, 0.05); }

#whiskermenu-window box widget {
color: transparent; }
Expand Down
9 changes: 4 additions & 5 deletions gtk-4.0/widgets/_sidebar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,14 +133,13 @@ placessidebar{
margin-right: 12px;
padding-left: 14px;
padding-right: 12px;
// color: #9ecfa2;
color: transparentize($selected_bg_color, 0.5);
color: transparentize($selected_bg_color, 0.3);
}
}
&:hover{
transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
color: rgba(0,0,0,0.76);
background-color: if(variant == light, transparentize($fg_color, 0.9), transparentize($fg_color, 0.95));
background-color: if(variant == light, transparentize($fg_color, 0.9), transparentize($fg_color, 0.90));
}

&:active{
Expand All @@ -165,8 +164,8 @@ 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%);
background-image:linear-gradient(to right, $backdrop_selected_bg_color 40px,
rgba(65,67,75,0) 36px, rgba(65,67,75,0)97%);

.sidebar-icon {
color: $backdrop_selected_fg_color;
Expand Down

0 comments on commit 089dfe9

Please sign in to comment.