I don't have a lot to say, but this is my little bit.

Friday, April 25, 2025

CSS improvements for Gnome Nautilus

I customized my Gnome UI in some ways that I think are really important.

* The active window is bordered by several pixels of the highlight color, which makes it more visible and also gives the mouse a few pixels by which to resize the window. I have often been frustrated by single-pixel window borders, whats the point of that?)

* The active window also lifts up with a shadow behind it, making it feel extra engaged.

* The nautilus window uses subtly shaded stripes when listing files, so that the eye has an easy time scanning over from the filename to the metadata.

* The nautilus window list items lift up with a box shadow and a text shadow when rolled over, and all of the effects apply to selected items too.

* Similar effects work in the sidebar.



.nautilus-window .view row:nth-child(odd) {

   background-color: rgba(255, 0, 0, 0.05);

   border-right-style: solid;

   border-right-width: 3px;

   border-right-color: rgba(0, 0, 0, 0.05);

   border-bottom-style: solid;

   border-bottom-width: 3px;

   border-bottom-color: rgba(0, 0, 0, 0.05);

margin-top: -3px;

}


.nautilus-window .view row:nth-child(even) {

   background-color: rgba(0, 0, 0, 0.10);

   border-right-style: solid;

   border-right-width: 3px;

   border-right-color: rgba(0, 0, 0, 0.00);

   border-bottom-style: solid;

   border-bottom-width: 3px;

   border-bottom-color: rgba(0, 0, 0, 0.00);

margin-top: -3px;

}


.nautilus-window .view row:nth-child(odd):hover {

   background-color: rgba(0, 0, 0, 0.05);

   border-right-style: solid;

   border-right-width: 3px;

   border-right-color: rgba(0, 0, 0, 0.20);

   border-bottom-style: solid;

   border-bottom-width: 3px;

   border-bottom-color: rgba(0, 0, 0, 0.20);

}


.nautilus-window .view row:nth-child(even):hover {

   background-color: rgba(0, 0, 0, 0.10);

   border-right-style: solid;

   border-right-width: 3px;

   border-right-color: rgba(0, 0, 0, 0.25);

   border-bottom-style: solid;

   border-bottom-width: 3px;

   border-bottom-color: rgba(0, 0, 0, 0.25);

}



.nautilus-window .view row:nth-child(odd):selected {

   background-color: rgba(0, 255, 128, 0.05);

   border-right-style: solid;

   border-right-width: 3px;

   border-right-color: rgba(0, 0, 0, 0.20);

   border-bottom-style: solid;

   border-bottom-width: 3px;

   border-bottom-color: rgba(0, 0, 0, 0.20);

}


.nautilus-window .view row:nth-child(even):selected {

   background-color: rgba(0, 255, 128, 0.10);

   border-right-style: solid;

   border-right-width: 3px;

   border-right-color: rgba(0, 0, 0, 0.20);

   border-bottom-style: solid;

   border-bottom-width: 3px;

   border-bottom-color: rgba(0, 0, 0, 0.20);

}





list {

   background-color: rgba(0, 255, 128, 0.90);

   border-top-style: solid;

   border-top-width: 3px;

   border-top-color: rgba(0, 0, 0, .10);

}

overlay {

   border-top-style: dashed;

   border-top-width: 1px;

   border-top-color: rgba(0, 0, 0, .10);

}


list row {

   background-color: rgba(0, 0, 0, 0.10);

   border-right-style: solid;

   border-right-width: 3px;

   border-right-color: rgba(0, 0, 0, 0.00);

   border-bottom-style: solid;

   border-bottom-width: 3px;

   border-bottom-color: rgba(0, 0, 0, 0.00);

}


list row:hover {

   background-color: rgba(0, 0, 0, 0.10);

   border-right-style: solid;

   border-right-width: 3px;

   border-right-color: rgba(0, 0, 0, 0.20);

   border-bottom-style: solid;

   border-bottom-width: 3px;

   border-bottom-color: rgba(0, 0, 0, 0.20);

}

list row:selected {

   background-color: rgba(0, 255, 128, 0.12);

   border-right-style: solid;

   border-right-width: 3px;

   border-right-color: rgba(0, 0, 0, 0.20);

   border-bottom-style: solid;

   border-bottom-width: 3px;

   border-bottom-color: rgba(0, 0, 0, 0.20);

}


@import 'colors.css';

No comments:

Post a Comment