Theme updates for nemo file manager

Themed nemo file manager
Made some adjustments to frame views and stack views
Removed the cinnamon.css file (replaced by nemo.css)
Added a disabled arrow state for menu arrows
This commit is contained in:
EMH-Mark-I 2020-05-03 21:36:43 -05:00
parent 0a945429b6
commit fd204a53e8
12 changed files with 214 additions and 66 deletions

View File

@ -1,24 +0,0 @@
/* ===================================================================
* Nemo file-manager
* ===================================================================*/
.nemo-window .toolbar .toggle,
.nemo-window .toolbar .image-button {
border: 1px solid transparent;
box-shadow: none; }
.nemo-window .toolbar .toggle:hover,
.nemo-window .toolbar .image-button:hover {
border-top: 1px solid @bg_bright;
border-left: 1px solid @bg_bright;
border-right: 1px solid @bg_dark;
border-bottom: 1px solid @bg_dark;
box-shadow: inset -1px -1px @bg_shade; }
.nemo-window .toolbar .toggle:active,
.nemo-window .toolbar .toggle:checked,
.nemo-window .toolbar .image-button:active,
.nemo-window .toolbar .image-button:checked {
border-top: 1px solid @bg_dark;
border-left: 1px solid @bg_dark;
border-right: 1px solid @bg_bright;
border-bottom: 1px solid @bg_bright;
box-shadow: inset 1px 1px @bg_shade; }

View File

@ -0,0 +1,87 @@
/********
* nemo *
********/
/*
Contributor notes:
Please use two space indentions.
Stack all related and child selectors and selector states into a logical hierarchy to a readable degree.
Make sure that all changes made here are part of the .nemo-window.
*/
.nemo-window {
-gtk-icon-style: regular; }
.nemo-window toolbar button,
.nemo-window .toggle {
min-width: 16px;
min-height: 16px;
margin-top: 2px;
margin-bottom: 2px; }
.nemo-window .toolbar .toggle,
.nemo-window .toolbar .image-button {
border: 1px solid transparent;
box-shadow: none; }
.nemo-window .toolbar .toggle:hover,
.nemo-window .toolbar .image-button:hover {
border-top: 1px solid @bg_bright;
border-left: 1px solid @bg_bright;
border-right: 1px solid @bg_dark;
border-bottom: 1px solid @bg_dark;
box-shadow: inset -1px -1px @bg_shade; }
.nemo-window .toolbar .toggle:active,
.nemo-window .toolbar .toggle:checked,
.nemo-window .toolbar .image-button:active,
.nemo-window .toolbar .image-button:checked {
border-top: 1px solid @bg_dark;
border-left: 1px solid @bg_dark;
border-right: 1px solid @bg_bright;
border-bottom: 1px solid @bg_bright;
box-shadow: inset 1px 1px @bg_shade; }
.nemo-window .toggle:checked {
background-color: @border_bright;
background-image: linear-gradient(45deg, @bg_color 25%, transparent 25%, transparent 75%, @bg_color 75%, @bg_color), linear-gradient(45deg, @bg_color 25%, transparent 25%, transparent 75%, @bg_color 75%, @border_dark);
background-size: 2px 2px;
background-position: 0 0, 1px 1px; }
.nemo-window notebook scrolledwindow {
padding: 0px;
border-top: 2px solid @border_dark;
border-bottom: 2px solid @border_dark;
border-left: 2px solid @border_dark;
border-right: 2px solid @border_dark;
border-image: url("../assets/frame_inset.png");
border-image-slice: 2 2 2 2;
box-shadow: none; }
.nemo-window header tabs tab {
padding: 0px; }
.nemo-window header tabs tab box {
padding: 0px;
margin-top: -2px;
margin-bottom: -2px; }
.nemo-window header tabs tab button {
background: none;
border: none;
box-shadow: none; }
.nemo-window header tabs tab button image {
padding: 0px;
margin-top: -1px;
margin-bottom: -2px; }
.nemo-window statusbar {
margin-right: -9px;
margin-left: -9px;
margin-top: 3px;
margin-bottom: 3px;
padding: 0px; }
.nemo-window statusbar frame box {
margin-bottom: -3px;
margin-top: -3px; }
.nemo-window statusbar frame box label {
margin-top: -1px;
margin-bottom: -1px; }
.nemo-window widget.view:selected {
background-color: shade(@selected_bg_color, 3.0); }
.thunar widget.view:selected:focus {
background-color: @selected_bg_color; }

View File

@ -9,7 +9,8 @@
Make sure that all changes made here are part of the GtkFrame.
*/
frame {
frame,
frame.view {
padding: 2px;
border-radius: 0px;
background-color: @theme_bg_color;

View File

@ -19,12 +19,14 @@ window > menu {
border: 1px solid @border_dark;
box-shadow: none;
background-color: @bg_bright;
color: @text_color; }
color: @text_color;
-gtk-icon-style: regular }
/* NOTE: Menu border styling is moved to client side decorations. See gtk-window.css for menu border styling. */
menu {
background-color: @menu_bg_color; /* NOTE: While a background colour is required here, there will be a 2px internal padding applied to window decorations which will also have a background colour too. */
color: @menu_text_color; }
color: @menu_text_color;
-gtk-icon-style: regular }
/* menuitem */
menu menuitem {
padding-left: 2px;
@ -79,25 +81,29 @@ menu arrow {
background-image: url("assets/arrow-right.png"); }
menu :hover > arrow.right {
background-image: url("assets/arrow-right-selected.png"); }
menu :checked > arrow.right {
menu :checked > arrow.right,
menu :disabled > arrow.right {
background-image: url("assets/arrow-right-disabled.png"); }
menu arrow.left {
background-image: url("assets/arrow-left.png"); }
menu :hover > arrow.left {
background-image: url("assets/arrow-left-selected.png"); }
menu :checked > arrow.left {
menu :checked > arrow.left,
menu :disabled > arrow.left {
background-image: url("assets/arrow-left-disabled.png"); }
menu arrow.up {
background-image: url("assets/arrow-up.png"); }
menu :hover > arrow.up {
background-image: url("assets/arrow-up-selected.png"); }
menu :checked > arrow.up {
menu :checked > arrow.up
menu :disabled > arrow.up {
background-image: url("assets/arrow-up-disabled.png"); }
menu arrow.down {
background-image: url("assets/arrow-down.png"); }
menu :hover > arrow.down {
background-image: url("assets/arrow-down-selected.png"); }
menu :checked > arrow.down {
menu :checked > arrow.down,
menu :disabled > arrow.down {
background-image: url("assets/arrow-down-disabled.png"); }
/* Directional menu arrow styling */

View File

@ -284,7 +284,11 @@ stacksidebar list row:selected:hover {
/***********
* stack *
***********/
/* Some applications will use stacks in non-conventional ways. This should prevent theming of .view in gtk-viewports.css from affecting stack views. */
stack.view {
background-color: @bg_color; }
stack overlay box box scrolledwindow viewport list row {
border-bottom: 1px solid @border_shade; }

View File

@ -144,7 +144,7 @@
@import url("apps/filechooser.css");
@import url("apps/mate.css");
@import url("apps/thunar.css");
@import url("apps/cinnamon.css");
@import url("apps/nemo.css");
/* Please keep these in their originial load order. */
@import url("gtk-widgets.css");

View File

@ -1,24 +0,0 @@
/* ===================================================================
* Nemo file-manager
* ===================================================================*/
.nemo-window .toolbar .toggle,
.nemo-window .toolbar .image-button {
border: 1px solid transparent;
box-shadow: none; }
.nemo-window .toolbar .toggle:hover,
.nemo-window .toolbar .image-button:hover {
border-top: 1px solid @bg_bright;
border-left: 1px solid @bg_bright;
border-right: 1px solid @bg_dark;
border-bottom: 1px solid @bg_dark;
box-shadow: inset -1px -1px @bg_shade; }
.nemo-window .toolbar .toggle:active,
.nemo-window .toolbar .toggle:checked,
.nemo-window .toolbar .image-button:active,
.nemo-window .toolbar .image-button:checked {
border-top: 1px solid @bg_dark;
border-left: 1px solid @bg_dark;
border-right: 1px solid @bg_bright;
border-bottom: 1px solid @bg_bright;
box-shadow: inset 1px 1px @bg_shade; }

View File

@ -0,0 +1,87 @@
/********
* nemo *
********/
/*
Contributor notes:
Please use two space indentions.
Stack all related and child selectors and selector states into a logical hierarchy to a readable degree.
Make sure that all changes made here are part of the .nemo-window.
*/
.nemo-window {
-gtk-icon-style: regular; }
.nemo-window toolbar button,
.nemo-window .toggle {
min-width: 16px;
min-height: 16px;
margin-top: 2px;
margin-bottom: 2px; }
.nemo-window .toolbar .toggle,
.nemo-window .toolbar .image-button {
border: 1px solid transparent;
box-shadow: none; }
.nemo-window .toolbar .toggle:hover,
.nemo-window .toolbar .image-button:hover {
border-top: 1px solid @bg_bright;
border-left: 1px solid @bg_bright;
border-right: 1px solid @bg_dark;
border-bottom: 1px solid @bg_dark;
box-shadow: inset -1px -1px @bg_shade; }
.nemo-window .toolbar .toggle:active,
.nemo-window .toolbar .toggle:checked,
.nemo-window .toolbar .image-button:active,
.nemo-window .toolbar .image-button:checked {
border-top: 1px solid @bg_dark;
border-left: 1px solid @bg_dark;
border-right: 1px solid @bg_bright;
border-bottom: 1px solid @bg_bright;
box-shadow: inset 1px 1px @bg_shade; }
.nemo-window .toggle:checked {
background-color: @border_bright;
background-image: linear-gradient(45deg, @bg_color 25%, transparent 25%, transparent 75%, @bg_color 75%, @bg_color), linear-gradient(45deg, @bg_color 25%, transparent 25%, transparent 75%, @bg_color 75%, @border_dark);
background-size: 2px 2px;
background-position: 0 0, 1px 1px; }
.nemo-window notebook scrolledwindow {
padding: 0px;
border-top: 2px solid @border_dark;
border-bottom: 2px solid @border_dark;
border-left: 2px solid @border_dark;
border-right: 2px solid @border_dark;
border-image: url("../assets/frame_inset.png");
border-image-slice: 2 2 2 2;
box-shadow: none; }
.nemo-window header tabs tab {
padding: 0px; }
.nemo-window header tabs tab box {
padding: 0px;
margin-top: -2px;
margin-bottom: -2px; }
.nemo-window header tabs tab button {
background: none;
border: none;
box-shadow: none; }
.nemo-window header tabs tab button image {
padding: 0px;
margin-top: -1px;
margin-bottom: -2px; }
.nemo-window statusbar {
margin-right: -9px;
margin-left: -9px;
margin-top: 3px;
margin-bottom: 3px;
padding: 0px; }
.nemo-window statusbar frame box {
margin-bottom: -3px;
margin-top: -3px; }
.nemo-window statusbar frame box label {
margin-top: -1px;
margin-bottom: -1px; }
.nemo-window widget.view:selected {
background-color: shade(@selected_bg_color, 3.0); }
.thunar widget.view:selected:focus {
background-color: @selected_bg_color; }

View File

@ -9,7 +9,8 @@
Make sure that all changes made here are part of the GtkFrame.
*/
frame {
frame,
frame.view {
padding: 2px;
border-radius: 0px;
background-color: @theme_bg_color;

View File

@ -19,12 +19,14 @@ window > menu {
border: 1px solid @border_dark;
box-shadow: none;
background-color: @bg_bright;
color: @text_color; }
color: @text_color;
-gtk-icon-style: regular }
/* NOTE: Menu border styling is moved to client side decorations. See gtk-window.css for menu border styling. */
menu {
background-color: @menu_bg_color; /* NOTE: While a background colour is required here, there will be a 2px internal padding applied to window decorations which will also have a background colour too. */
color: @menu_text_color; }
color: @menu_text_color;
-gtk-icon-style: regular }
/* menuitem */
menu menuitem {
padding-left: 2px;
@ -79,25 +81,29 @@ menu arrow {
background-image: url("assets/arrow-right.png"); }
menu :hover > arrow.right {
background-image: url("assets/arrow-right-selected.png"); }
menu :checked > arrow.right {
menu :checked > arrow.right,
menu :disabled > arrow.right {
background-image: url("assets/arrow-right-disabled.png"); }
menu arrow.left {
background-image: url("assets/arrow-left.png"); }
menu :hover > arrow.left {
background-image: url("assets/arrow-left-selected.png"); }
menu :checked > arrow.left {
menu :checked > arrow.left,
menu :disabled > arrow.left {
background-image: url("assets/arrow-left-disabled.png"); }
menu arrow.up {
background-image: url("assets/arrow-up.png"); }
menu :hover > arrow.up {
background-image: url("assets/arrow-up-selected.png"); }
menu :checked > arrow.up {
menu :checked > arrow.up
menu :disabled > arrow.up {
background-image: url("assets/arrow-up-disabled.png"); }
menu arrow.down {
background-image: url("assets/arrow-down.png"); }
menu :hover > arrow.down {
background-image: url("assets/arrow-down-selected.png"); }
menu :checked > arrow.down {
menu :checked > arrow.down,
menu :disabled > arrow.down {
background-image: url("assets/arrow-down-disabled.png"); }
/* Directional menu arrow styling */

View File

@ -284,7 +284,11 @@ stacksidebar list row:selected:hover {
/***********
* stack *
***********/
/* Some applications will use stacks in non-conventional ways. This should prevent theming of .view in gtk-viewports.css from affecting stack views. */
stack.view {
background-color: @bg_color; }
stack overlay box box scrolledwindow viewport list row {
border-bottom: 1px solid @border_shade; }

View File

@ -144,7 +144,7 @@
@import url("apps/filechooser.css");
@import url("apps/mate.css");
@import url("apps/thunar.css");
@import url("apps/cinnamon.css");
@import url("apps/nemo.css");
/* Please keep these in their originial load order. */
@import url("gtk-widgets.css");