Skip to content

Commit

Permalink
Improvement: GTK3&4 - sidebar row hover colors
Browse files Browse the repository at this point in the history
  • Loading branch information
@thekomer
thekomer committed Jan 8, 2022
1 parent f1fbc37 commit ac62a7f
Show file tree
Hide file tree
Showing 7 changed files with 34 additions and 44 deletions.
2 changes: 1 addition & 1 deletion gtk-3.0/apps/_nemo.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
iconview.cell { }
}

.sidebar, statusbar {
.sidebar, statusbar, .nemo-statusbar {
color: darken($fg_color, 2%);
background: $headerbar_color;
.view, .iconview, row {
Expand Down
22 changes: 10 additions & 12 deletions gtk-3.0/gtk-dark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4128,7 +4128,7 @@ treeview ~ scrollbar.vertical {
.sidebar row:selected label {
color: #fefefe; }
.sidebar.source-list {
background: #0E111D;
background: #06070c;
padding: 4px 0px; }
.sidebar.source-list.view, iconview.sidebar.source-list {
transition: all .12s ease-in; }
Expand Down Expand Up @@ -4160,7 +4160,7 @@ stacksidebar row {
/*******************************************************************/
/*--*/
placessidebar.sidebar {
background-color: transparent;
background-color: #06070c;
/* background-image:linear-gradient(to right, #171e27 40px,
$_sidebar_color 35px,$_sidebar_color 36px,
$_sidebar_color 36px,$_sidebar_color 99%,
Expand All @@ -4174,9 +4174,7 @@ placessidebar.sidebar {
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-color: rgba(191, 195, 205, 0.05); }
placessidebar.sidebar row.sidebar-row:active:hover {
color: rgba(0, 0, 0, 0.76);
background-color: rgba(0, 0, 0, 0.23); }
Expand All @@ -4186,7 +4184,7 @@ placessidebar.sidebar {
background-image: linear-gradient(to right, #ff6a00 40px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 97%); }
placessidebar.sidebar row.sidebar-row:selected:hover {
color: #ffffff;
background-color: rgba(0, 0, 0, 0.24); }
background-color: rgba(191, 195, 205, 0.05); }
placessidebar.sidebar row.sidebar-row:selected:hover .sidebar-icon {
color: #ffffff; }
placessidebar.sidebar row.sidebar-row:selected:backdrop {
Expand Down Expand Up @@ -6696,21 +6694,21 @@ ConversationListView {
-NemoPlacesTreeView-disk-full-max-length: 100px;
-GtkTreeView-vertical-separator: 7; }

.nemo-window .sidebar, .nemo-window statusbar {
.nemo-window .sidebar, .nemo-window statusbar, .nemo-window .nemo-statusbar {
color: #b9bec9;
background: #06070c; }
.nemo-window .sidebar .view, .nemo-window .sidebar iconview, .nemo-window .sidebar .iconview, .nemo-window .sidebar row, .nemo-window statusbar .view, .nemo-window statusbar iconview, .nemo-window statusbar .iconview, .nemo-window statusbar row {
.nemo-window .sidebar .view, .nemo-window .sidebar iconview, .nemo-window .sidebar .iconview, .nemo-window .sidebar row, .nemo-window statusbar .view, .nemo-window statusbar iconview, .nemo-window statusbar .iconview, .nemo-window statusbar row, .nemo-window .nemo-statusbar .view, .nemo-window .nemo-statusbar iconview, .nemo-window .nemo-statusbar .iconview, .nemo-window .nemo-statusbar row {
background-color: transparent; }
.nemo-window .sidebar .view:hover, .nemo-window .sidebar iconview:hover, .nemo-window .sidebar .iconview:hover, .nemo-window .sidebar row:hover, .nemo-window statusbar .view:hover, .nemo-window statusbar iconview:hover, .nemo-window statusbar .iconview:hover, .nemo-window statusbar row:hover {
.nemo-window .sidebar .view:hover, .nemo-window .sidebar iconview:hover, .nemo-window .sidebar .iconview:hover, .nemo-window .sidebar row:hover, .nemo-window statusbar .view:hover, .nemo-window statusbar iconview:hover, .nemo-window statusbar .iconview:hover, .nemo-window statusbar row:hover, .nemo-window .nemo-statusbar .view:hover, .nemo-window .nemo-statusbar iconview:hover, .nemo-window .nemo-statusbar .iconview:hover, .nemo-window .nemo-statusbar row:hover {
color: #ff6a00;
background-color: rgba(191, 195, 205, 0.05); }
.nemo-window .sidebar .view:selected, .nemo-window .sidebar iconview:selected, .nemo-window .sidebar .view:active, .nemo-window .sidebar iconview:active, .nemo-window .sidebar .view:checked, .nemo-window .sidebar iconview:checked, .nemo-window .sidebar .iconview:selected, .nemo-window .sidebar .iconview:active, .nemo-window .sidebar .iconview:checked, .nemo-window .sidebar row:selected, .nemo-window .sidebar row:active, .nemo-window .sidebar row:checked, .nemo-window statusbar .view:selected, .nemo-window statusbar iconview:selected, .nemo-window statusbar .view:active, .nemo-window statusbar iconview:active, .nemo-window statusbar .view:checked, .nemo-window statusbar iconview:checked, .nemo-window statusbar .iconview:selected, .nemo-window statusbar .iconview:active, .nemo-window statusbar .iconview:checked, .nemo-window statusbar row:selected, .nemo-window statusbar row:active, .nemo-window statusbar row:checked {
.nemo-window .sidebar .view:selected, .nemo-window .sidebar iconview:selected, .nemo-window .sidebar .view:active, .nemo-window .sidebar iconview:active, .nemo-window .sidebar .view:checked, .nemo-window .sidebar iconview:checked, .nemo-window .sidebar .iconview:selected, .nemo-window .sidebar .iconview:active, .nemo-window .sidebar .iconview:checked, .nemo-window .sidebar row:selected, .nemo-window .sidebar row:active, .nemo-window .sidebar row:checked, .nemo-window statusbar .view:selected, .nemo-window statusbar iconview:selected, .nemo-window statusbar .view:active, .nemo-window statusbar iconview:active, .nemo-window statusbar .view:checked, .nemo-window statusbar iconview:checked, .nemo-window statusbar .iconview:selected, .nemo-window statusbar .iconview:active, .nemo-window statusbar .iconview:checked, .nemo-window statusbar row:selected, .nemo-window statusbar row:active, .nemo-window statusbar row:checked, .nemo-window .nemo-statusbar .view:selected, .nemo-window .nemo-statusbar iconview:selected, .nemo-window .nemo-statusbar .view:active, .nemo-window .nemo-statusbar iconview:active, .nemo-window .nemo-statusbar .view:checked, .nemo-window .nemo-statusbar iconview:checked, .nemo-window .nemo-statusbar .iconview:selected, .nemo-window .nemo-statusbar .iconview:active, .nemo-window .nemo-statusbar .iconview:checked, .nemo-window .nemo-statusbar row:selected, .nemo-window .nemo-statusbar row:active, .nemo-window .nemo-statusbar row:checked {
color: #fefefe;
background: #ff6a00; }
.nemo-window .sidebar .view:backdrop, .nemo-window .sidebar iconview:backdrop, .nemo-window .sidebar .iconview:backdrop, .nemo-window .sidebar row:backdrop, .nemo-window statusbar .view:backdrop, .nemo-window statusbar iconview:backdrop, .nemo-window statusbar .iconview:backdrop, .nemo-window statusbar row:backdrop {
.nemo-window .sidebar .view:backdrop, .nemo-window .sidebar iconview:backdrop, .nemo-window .sidebar .iconview:backdrop, .nemo-window .sidebar row:backdrop, .nemo-window statusbar .view:backdrop, .nemo-window statusbar iconview:backdrop, .nemo-window statusbar .iconview:backdrop, .nemo-window statusbar row:backdrop, .nemo-window .nemo-statusbar .view:backdrop, .nemo-window .nemo-statusbar iconview:backdrop, .nemo-window .nemo-statusbar .iconview:backdrop, .nemo-window .nemo-statusbar row:backdrop {
color: #676a75;
background-color: inherit; }
.nemo-window .sidebar .view:backdrop:selected, .nemo-window .sidebar iconview:backdrop:selected, .nemo-window .sidebar .iconview:backdrop:selected, .nemo-window .sidebar row:backdrop:selected, .nemo-window statusbar .view:backdrop:selected, .nemo-window statusbar iconview:backdrop:selected, .nemo-window statusbar .iconview:backdrop:selected, .nemo-window statusbar row:backdrop:selected {
.nemo-window .sidebar .view:backdrop:selected, .nemo-window .sidebar iconview:backdrop:selected, .nemo-window .sidebar .iconview:backdrop:selected, .nemo-window .sidebar row:backdrop:selected, .nemo-window statusbar .view:backdrop:selected, .nemo-window statusbar iconview:backdrop:selected, .nemo-window statusbar .iconview:backdrop:selected, .nemo-window statusbar row:backdrop:selected, .nemo-window .nemo-statusbar .view:backdrop:selected, .nemo-window .nemo-statusbar iconview:backdrop:selected, .nemo-window .nemo-statusbar .iconview:backdrop:selected, .nemo-window .nemo-statusbar row:backdrop:selected {
color: rgba(254, 254, 254, 0.5);
background-color: rgba(255, 106, 0, 0.6); }

Expand Down
22 changes: 10 additions & 12 deletions gtk-3.0/gtk.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4128,7 +4128,7 @@ treeview ~ scrollbar.vertical {
.sidebar row:selected label {
color: #fefefe; }
.sidebar.source-list {
background: #0E111D;
background: #06070c;
padding: 4px 0px; }
.sidebar.source-list.view, iconview.sidebar.source-list {
transition: all .12s ease-in; }
Expand Down Expand Up @@ -4160,7 +4160,7 @@ stacksidebar row {
/*******************************************************************/
/*--*/
placessidebar.sidebar {
background-color: transparent;
background-color: #06070c;
/* background-image:linear-gradient(to right, #171e27 40px,
$_sidebar_color 35px,$_sidebar_color 36px,
$_sidebar_color 36px,$_sidebar_color 99%,
Expand All @@ -4174,9 +4174,7 @@ placessidebar.sidebar {
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-color: rgba(191, 195, 205, 0.05); }
placessidebar.sidebar row.sidebar-row:active:hover {
color: rgba(0, 0, 0, 0.76);
background-color: rgba(0, 0, 0, 0.23); }
Expand All @@ -4186,7 +4184,7 @@ placessidebar.sidebar {
background-image: linear-gradient(to right, #ff6a00 40px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 97%); }
placessidebar.sidebar row.sidebar-row:selected:hover {
color: #ffffff;
background-color: rgba(0, 0, 0, 0.24); }
background-color: rgba(191, 195, 205, 0.05); }
placessidebar.sidebar row.sidebar-row:selected:hover .sidebar-icon {
color: #ffffff; }
placessidebar.sidebar row.sidebar-row:selected:backdrop {
Expand Down Expand Up @@ -6696,21 +6694,21 @@ ConversationListView {
-NemoPlacesTreeView-disk-full-max-length: 100px;
-GtkTreeView-vertical-separator: 7; }

.nemo-window .sidebar, .nemo-window statusbar {
.nemo-window .sidebar, .nemo-window statusbar, .nemo-window .nemo-statusbar {
color: #b9bec9;
background: #06070c; }
.nemo-window .sidebar .view, .nemo-window .sidebar iconview, .nemo-window .sidebar .iconview, .nemo-window .sidebar row, .nemo-window statusbar .view, .nemo-window statusbar iconview, .nemo-window statusbar .iconview, .nemo-window statusbar row {
.nemo-window .sidebar .view, .nemo-window .sidebar iconview, .nemo-window .sidebar .iconview, .nemo-window .sidebar row, .nemo-window statusbar .view, .nemo-window statusbar iconview, .nemo-window statusbar .iconview, .nemo-window statusbar row, .nemo-window .nemo-statusbar .view, .nemo-window .nemo-statusbar iconview, .nemo-window .nemo-statusbar .iconview, .nemo-window .nemo-statusbar row {
background-color: transparent; }
.nemo-window .sidebar .view:hover, .nemo-window .sidebar iconview:hover, .nemo-window .sidebar .iconview:hover, .nemo-window .sidebar row:hover, .nemo-window statusbar .view:hover, .nemo-window statusbar iconview:hover, .nemo-window statusbar .iconview:hover, .nemo-window statusbar row:hover {
.nemo-window .sidebar .view:hover, .nemo-window .sidebar iconview:hover, .nemo-window .sidebar .iconview:hover, .nemo-window .sidebar row:hover, .nemo-window statusbar .view:hover, .nemo-window statusbar iconview:hover, .nemo-window statusbar .iconview:hover, .nemo-window statusbar row:hover, .nemo-window .nemo-statusbar .view:hover, .nemo-window .nemo-statusbar iconview:hover, .nemo-window .nemo-statusbar .iconview:hover, .nemo-window .nemo-statusbar row:hover {
color: #ff6a00;
background-color: rgba(191, 195, 205, 0.05); }
.nemo-window .sidebar .view:selected, .nemo-window .sidebar iconview:selected, .nemo-window .sidebar .view:active, .nemo-window .sidebar iconview:active, .nemo-window .sidebar .view:checked, .nemo-window .sidebar iconview:checked, .nemo-window .sidebar .iconview:selected, .nemo-window .sidebar .iconview:active, .nemo-window .sidebar .iconview:checked, .nemo-window .sidebar row:selected, .nemo-window .sidebar row:active, .nemo-window .sidebar row:checked, .nemo-window statusbar .view:selected, .nemo-window statusbar iconview:selected, .nemo-window statusbar .view:active, .nemo-window statusbar iconview:active, .nemo-window statusbar .view:checked, .nemo-window statusbar iconview:checked, .nemo-window statusbar .iconview:selected, .nemo-window statusbar .iconview:active, .nemo-window statusbar .iconview:checked, .nemo-window statusbar row:selected, .nemo-window statusbar row:active, .nemo-window statusbar row:checked {
.nemo-window .sidebar .view:selected, .nemo-window .sidebar iconview:selected, .nemo-window .sidebar .view:active, .nemo-window .sidebar iconview:active, .nemo-window .sidebar .view:checked, .nemo-window .sidebar iconview:checked, .nemo-window .sidebar .iconview:selected, .nemo-window .sidebar .iconview:active, .nemo-window .sidebar .iconview:checked, .nemo-window .sidebar row:selected, .nemo-window .sidebar row:active, .nemo-window .sidebar row:checked, .nemo-window statusbar .view:selected, .nemo-window statusbar iconview:selected, .nemo-window statusbar .view:active, .nemo-window statusbar iconview:active, .nemo-window statusbar .view:checked, .nemo-window statusbar iconview:checked, .nemo-window statusbar .iconview:selected, .nemo-window statusbar .iconview:active, .nemo-window statusbar .iconview:checked, .nemo-window statusbar row:selected, .nemo-window statusbar row:active, .nemo-window statusbar row:checked, .nemo-window .nemo-statusbar .view:selected, .nemo-window .nemo-statusbar iconview:selected, .nemo-window .nemo-statusbar .view:active, .nemo-window .nemo-statusbar iconview:active, .nemo-window .nemo-statusbar .view:checked, .nemo-window .nemo-statusbar iconview:checked, .nemo-window .nemo-statusbar .iconview:selected, .nemo-window .nemo-statusbar .iconview:active, .nemo-window .nemo-statusbar .iconview:checked, .nemo-window .nemo-statusbar row:selected, .nemo-window .nemo-statusbar row:active, .nemo-window .nemo-statusbar row:checked {
color: #fefefe;
background: #ff6a00; }
.nemo-window .sidebar .view:backdrop, .nemo-window .sidebar iconview:backdrop, .nemo-window .sidebar .iconview:backdrop, .nemo-window .sidebar row:backdrop, .nemo-window statusbar .view:backdrop, .nemo-window statusbar iconview:backdrop, .nemo-window statusbar .iconview:backdrop, .nemo-window statusbar row:backdrop {
.nemo-window .sidebar .view:backdrop, .nemo-window .sidebar iconview:backdrop, .nemo-window .sidebar .iconview:backdrop, .nemo-window .sidebar row:backdrop, .nemo-window statusbar .view:backdrop, .nemo-window statusbar iconview:backdrop, .nemo-window statusbar .iconview:backdrop, .nemo-window statusbar row:backdrop, .nemo-window .nemo-statusbar .view:backdrop, .nemo-window .nemo-statusbar iconview:backdrop, .nemo-window .nemo-statusbar .iconview:backdrop, .nemo-window .nemo-statusbar row:backdrop {
color: #676a75;
background-color: inherit; }
.nemo-window .sidebar .view:backdrop:selected, .nemo-window .sidebar iconview:backdrop:selected, .nemo-window .sidebar .iconview:backdrop:selected, .nemo-window .sidebar row:backdrop:selected, .nemo-window statusbar .view:backdrop:selected, .nemo-window statusbar iconview:backdrop:selected, .nemo-window statusbar .iconview:backdrop:selected, .nemo-window statusbar row:backdrop:selected {
.nemo-window .sidebar .view:backdrop:selected, .nemo-window .sidebar iconview:backdrop:selected, .nemo-window .sidebar .iconview:backdrop:selected, .nemo-window .sidebar row:backdrop:selected, .nemo-window statusbar .view:backdrop:selected, .nemo-window statusbar iconview:backdrop:selected, .nemo-window statusbar .iconview:backdrop:selected, .nemo-window statusbar row:backdrop:selected, .nemo-window .nemo-statusbar .view:backdrop:selected, .nemo-window .nemo-statusbar iconview:backdrop:selected, .nemo-window .nemo-statusbar .iconview:backdrop:selected, .nemo-window .nemo-statusbar row:backdrop:selected {
color: rgba(254, 254, 254, 0.5);
background-color: rgba(255, 106, 0, 0.6); }

Expand Down
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 @@ -58,7 +58,7 @@

//elementary os file manager
&.source-list{
background: $_sidebar_color;
background: $headerbar_color;
padding: 4px 0px;
&.view{
transition: all .12s ease-in;
Expand Down Expand Up @@ -120,7 +120,7 @@ stacksidebar {

placessidebar{
&.sidebar{
background-color: transparent;
background-color: $headerbar_color;
/* background-image:linear-gradient(to right, #171e27 40px,
$_sidebar_color 35px,$_sidebar_color 36px,
$_sidebar_color 36px,$_sidebar_color 99%,
Expand All @@ -140,8 +140,7 @@ placessidebar{
&: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: if(variant == light, transparentize($fg_color, 0.9), transparentize($fg_color, 0.95));
}

&:active{
Expand All @@ -158,7 +157,7 @@ placessidebar{
rgba(65,67,75,0) 36px, rgba(65,67,75,0)97%);
&:hover{
color: #ffffff;
background-color: rgba(0,0,0,0.24);
background-color: if(variant == light, transparentize($fg_color, 0.9), transparentize($fg_color, 0.95));
.sidebar-icon {
color: #ffffff;
}
Expand Down
8 changes: 3 additions & 5 deletions gtk-4.0/gtk-dark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4114,7 +4114,7 @@ treeview ~ scrollbar.vertical {
.sidebar row:selected label {
color: #fefefe; }
.sidebar.source-list {
background: #0E111D;
background: #06070c;
padding: 4px 0px; }
.sidebar.source-list.view, iconview.sidebar.source-list {
transition: all .12s ease-in; }
Expand Down Expand Up @@ -4160,9 +4160,7 @@ placessidebar.sidebar {
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-color: rgba(191, 195, 205, 0.05); }
placessidebar.sidebar row.sidebar-row:active:hover {
color: rgba(0, 0, 0, 0.76);
background-color: rgba(0, 0, 0, 0.23); }
Expand All @@ -4172,7 +4170,7 @@ placessidebar.sidebar {
background-image: linear-gradient(to right, #ff6a00 40px, rgba(65, 67, 75, 0) 36px, rgba(65, 67, 75, 0) 97%); }
placessidebar.sidebar row.sidebar-row:selected:hover {
color: #ffffff;
background-color: rgba(0, 0, 0, 0.24); }
background-color: rgba(191, 195, 205, 0.05); }
placessidebar.sidebar row.sidebar-row:selected:hover .sidebar-icon {
color: #ffffff; }
placessidebar.sidebar row.sidebar-row:selected:backdrop {
Expand Down
Loading

0 comments on commit ac62a7f

Please sign in to comment.