GTK3: use nautilus style for version 42.beta

This commit is contained in:
Daniel Ruiz de Alegría
2022-03-04 11:42:41 +01:00
parent 131a39b2d5
commit 4d8c30e3f0
8 changed files with 925 additions and 253 deletions
@@ -1,7 +1,32 @@
.nautilus-window,
.nautilus-window notebook,
.nautilus-window notebook > stack {
background: @theme_base_color;
}
.nautilus-empty-state-icon {
opacity: 0.50;
}
.nautilus-canvas-item {
border-radius: 5px;
}
.nautilus-canvas-item.thumbnail {
-gtk-icon-shadow: 0px 1px 2px @borders,
1px 0px 0px alpha(@borders, 0.25),
-1px 0px 0px alpha(@borders, 0.25),
0px 2px 0px alpha(@borders, 0.5);
}
.nautilus-canvas-item.dim-label {
color: mix (@theme_fg_color, @theme_bg_color, 0.50);
}
.nautilus-canvas-item.dim-label:selected {
color: mix (@theme_selected_fg_color, @theme_selected_bg_color, 0.20);
}
/* Toolbar */
/* Here we use the .button background-image colors from Adwaita, but ligthen them,
@@ -9,8 +34,8 @@
@keyframes needs_attention_keyframes {
0% {background-image: linear-gradient(to bottom, #fafafa, #ededed 40%, #e0e0e0); border-color: @borders; }
/* can't do animation-direction, so holding the color on two keyframes */
30% {background-image: linear-gradient(to bottom, @view_bg_color, @view_bg_color, @view_bg_color); border-color: @window_fg_color; }
90% {background-image: linear-gradient(to bottom, @view_bg_color, @view_bg_color, @view_bg_color); border-color: @window_fg_color; }
30% {background-image: linear-gradient(to bottom, @theme_base_color, @theme_base_color, @theme_base_color); border-color: @theme_fg_color; }
90% {background-image: linear-gradient(to bottom, @theme_base_color, @theme_base_color, @theme_base_color); border-color: @theme_fg_color; }
100% {background-image: linear-gradient(to bottom, #fafafa, #ededed 40%, #e0e0e0); border-color: @borders; }
}
@@ -29,20 +54,25 @@
background: none;
}
.disclosure-button {
padding-left: 4px;
padding-right: 4px;
}
/* Path bar */
.nautilus-path-bar > scrolledwindow {
margin: 6px 0px 6px 0px;
border-radius: 6px 0px 0px 6px;
.nautilus-path-bar scrolledwindow {
border-radius: 5px 0px 0px 5px;
border: 1px @borders solid;
border-right-width: 0px;
background-color: alpha(currentColor, 0.1);
background-color: @theme_bg_color;
}
.nautilus-path-bar > scrolledwindow undershoot.left {
border-radius: 6px 0px 0px 6px;
background: linear-gradient(to right, @headerbar_shade_color 6px, alpha(@headerbar_shade_color, 0) 24px);
.nautilus-path-bar scrolledwindow undershoot.left {
border-radius: 5px 0px 0px 5px;
background: linear-gradient(to right, @theme_bg_color 6px, alpha(@theme_bg_color, 0) 24px);
}
.nautilus-path-bar > scrolledwindow undershoot.right {
background: linear-gradient(to left, @headerbar_shade_color 6px, alpha(@headerbar_shade_color, 0) 24px);
.nautilus-path-bar scrolledwindow undershoot.right {
background: linear-gradient(to left, @theme_bg_color 6px, alpha(@theme_bg_color, 0) 24px);
}
.nautilus-path-bar > button,
@@ -51,31 +81,56 @@
}
.path-buttons-box button {
margin: 0px;
background-image: none;
box-shadow: none;
border-radius: 7px;
border-radius: 5px;
border-width: 0px;
-gtk-icon-shadow: none;
}
.path-buttons-box button:not(:hover),
.path-buttons-box button.current-dir
{
background: none;
.path-buttons-box button:not(.current-dir):not(:backdrop):hover {
background: alpha(@theme_fg_color, 0.15);
box-shadow: inset 0 0 0 2px @theme_bg_color;
}
.path-buttons-box button:not(.current-dir):not(:backdrop):hover label {
.path-buttons-box button:not(.current-dir):not(:backdrop):hover * {
opacity: 1;
}
/* Make the tags fit into the box */
entry.search > * {
margin: 5px;
}
/* Sidebar */
.nautilus-window .sidebar-row:selected {
background: mix(@theme_bg_color, @theme_fg_color, 0.07);
}
.nautilus-window .sidebar-row:selected,
.nautilus-window .sidebar-row:selected image,
.nautilus-window .sidebar-row:selected label {
color: mix(@theme_fg_color, @theme_text_color, 0.5);
}
.nautilus-window .sidebar-row:selected:backdrop {
background: mix(@theme_unfocused_bg_color, @theme_unfocused_fg_color, 0.07);
}
.nautilus-window .sidebar-row:selected:backdrop,
.nautilus-window .sidebar-row:selected:backdrop label {
color: mix(@theme_unfocused_fg_color, @theme_unfocused_text_color, 0.15);
}
/* Floating status bar */
.floating-bar {
padding: 3px;
background-color: @view_bg_color;
padding: 1px;
background-color: @theme_base_color;
border-width: 1px;
border-style: solid solid none;
border-color: @borders;
border-radius: 8px 0 0 0;
border-radius: 8px 8px 0 0;
}
.floating-bar.bottom.left { /* axes left border and border radius */
@@ -88,7 +143,7 @@
}
.floating-bar:backdrop {
background-color: @view_bg_color;
background-color: @theme_unfocused_base_color;
border-color: @unfocused_borders;
}
@@ -136,33 +191,74 @@
* horizontal grid lines are enabled, we add them using CSS instead. Exclude the
* drop targets to let through the default feedback style. */
.nautilus-list-view .view:not(:drop(active)) {
border-bottom: 1px solid @window_bg_color;
border-bottom: 1px solid @theme_bg_color;
}
.nautilus-list-view.thumbnail {
-gtk-icon-shadow: 0px 1px 2px @borders,
1px 0px 0px alpha(@borders, 0.25),
-1px 0px 0px alpha(@borders, 0.25),
0px 2px 0px alpha(@borders, 0.5);
}
.search-information {
background-color: @accent_bg_color;
background-color: @theme_selected_bg_color;
color:white;
padding:2px;
}
@define-color conflict_bg #fef6b6;
.conflict-row {
background: @warning_bg_color;
color: @warning_fg_color;
background: @conflict_bg;
color: black;
}
/* Grid view */
.nautilus-grid-view gridview {
padding: 15px;
.conflict-row:hover {
background-color: shade(@conflict_bg, 0.9);
}
.nautilus-grid-view gridview > child {
padding: 6px;
.conflict-row:selected {
background: @theme_selected_bg_color;
color: @theme_selected_fg_color;
}
.nautilus-grid-view .thumbnail {
background-color: @shade_color;
box-shadow: 0px 1px 2px 0px @shade_color,
0px 0px 0px 1px @shade_color,
0px 2px 0px 0px @shade_color;
/* Icon view */
flowbox {
padding: 18px
}
flowboxchild {
padding: 0px;
}
flowboxchild:selected {
background-color:transparent;
outline-color: transparent;
}
flowboxchild .thumbnail {
margin: 4px;
box-shadow: 0px 1px 2px 0px alpha(@borders, 0.5),
0px 0px 0px 1px alpha(@borders, 0.5),
0px 2px 0px 0px alpha(@borders, 0.5);
border-radius: 2px;
}
.icon-ui-labels-box {
padding: 2px 4px;
border-radius: 4px;
}
flowboxchild:selected .icon-ui-labels-box {
color: @theme_selected_fg_color;
background-color: @theme_selected_bg_color;
}
flowboxchild:selected image {
-gtk-icon-effect: dim; /* GTK 3 only */
/* GTK 4 TODO: Replace previous line with the following one:
-gtk-icon-filter: opacity(0.5);
*/
-gtk-icon-shadow: 0px 0px @theme_selected_bg_color;
}
@@ -1,4 +1,4 @@
#!/bin/sh
wget https://gitlab.gnome.org/GNOME/nautilus/raw/master/src/resources/css/Adwaita.css -O Adwaita.css
wget https://gitlab.gnome.org/GNOME/nautilus/raw/42.beta/src/resources/css/Adwaita.css -O Adwaita.css