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