Mainly adjusted list rows.

This commit is contained in:
Sam Hewitt 2014-12-19 18:51:20 -05:00
parent 835185bba0
commit 70dc7497ef
7 changed files with 171 additions and 134 deletions

View File

@ -16,7 +16,7 @@
* with the Paper GTK theme. If not, see http://www.gnu.org/licenses/.
*/
@define-color epiphany #3E50B4;
@define-color epiphany #6573C3;
/**********
* Header *
@ -75,4 +75,19 @@ EphyWindow .dynamic-notebook tab.left:active {
EphyWindow .notebook tab.right:active,
EphyWindow .dynamic-notebook tab.right:active {
box-shadow:inset 3px 0 0 0 @epiphany;
}
/******************
* Incognito Mode *
******************/
.incognito-mode {
background-image:none;
background-color: shade(@epiphany, 0.8);
}
.incognito-mode .button {
background-image:none;
}

View File

@ -18,8 +18,8 @@
@define-color button_background shade(@base, 0.98);/* Button background color */
@define-color button_border @border;/* Button border color */
@define-color backdrop_button_background shade(@backdrop_background, 0.9);/* Backdrop button background color */
@define-color backdrop_button_border shade(@button_border, 0.9); /* Backdrop button border color */
@define-color backdrop_button_background shade(@backdrop_background, 0.98);/* Backdrop button background color */
@define-color backdrop_button_border shade(@button_border, 0.98); /* Backdrop button border color */
/***********
* Buttons *
@ -95,7 +95,6 @@ GtkCalendar.button:backdrop:hover,
shade(shade(@selection, 1.2), 0.98)
);
color: @selected_foreground;
transition: all 100ms cubic-bezier(0.3, 0.5, 0.5, 0.9);
}
/* Active (Pressed) Button */
@ -105,6 +104,10 @@ GtkCalendar.button:backdrop:hover,
.button.image-button:active {
border: 1px solid @selection;
background-color: shade(@selection, 1.1);
background-image: linear-gradient(to bottom,
shade(shade(@selection, 1.1), 0.95),
shade(@selection, 1.1)
);
color: @selected_foreground;
}
@ -127,10 +130,7 @@ GtkCalendar.button:backdrop:hover,
.button.image-button:backdrop {
border: 1px solid @backdrop_button_border;
background-color: @backdrop_button_background;
background-image: linear-gradient(to bottom,
@backdrop_button_background,
shade(@backdrop_button_background, 0.98)
);
background-image: none;
color: @backdrop_text;
}
/* Backdrop Button */

View File

@ -24,13 +24,14 @@
.header-bar {
padding-left: 6px;
padding-right: 6px;
background-image: none;
background-color: @header;
color: @header_text;
box-shadow: inset 0 -3px 3px -4px alpha(#000, 0.7);
}
.header-bar:backdrop {
background: none;
background-image: none;
background-color: @backdrop_header;
color: @backdrop_header_text;
box-shadow: none;

View File

@ -16,136 +16,153 @@
* with the Paper GTK theme. If not, see http://www.gnu.org/licenses/.
*/
/*********
* Lists *
*********/
.list,
/***********
* List Rows *
***********/
.list-row {
background-color: @background;
border-color: @border;
}
.list:backdrop,
.list-row:backdrop {
background-color: @backdrop_background;
border-color: @backdrop_border;
}
.list-row,
.grid-child {
padding: 2px;
}
/* List Row Button */
.button.list-row {
}
.button.list-row:hover {
background-color: alpha(@selection, 0.2);
color: @selection;
}
.button.list-row:active,
.button.list-row:selected {
background-color: alpha(@selection, 0.4);
color: @selection;
}
.button.list-row:active:selected,
.button.list-row:active:selected:hover {
background-color: alpha(@selection, 0.2);
color: @selection;
}
.button.list-row:hover:selected {
background-color: alpha(@selection, 0.2);
color: @selection;
}
.list-row.button,
.header-bar .list-row.button.titlebutton,
.titlebar .list-row.button.titlebutton {
padding-top: 6px;
padding-bottom: 6px;
border-radius: 0px;
border:none;
background-image: none;
background-color: transparent;
border-style: none;
border-radius: 0;
box-shadow: none;
color: @text;
}
.list-row.button:hover {
border-color: @selection;
/* Focus */
.list-row:focus,
.list-row:active:focus {
border:none;
background-image: none;
background-color: shade(@selection, 1.1);
color: @selection;
}
/* Hover */
.list-row:hover,
.list-row:active:hover {
border:none;
background-image: none;
background-color: shade(@background, 0.9);
color: @selected_foreground;
}
/* Active (Pressed) */
.list-row:active {
border:none;
background-image: none;
background-color: @selection;
color: @selected_foreground;
box-shadow: none;
}
.list-row.button:active {
box-shadow: none;
}
.list-row.button:selected:active {
}
.list-row.button:selected:hover {
border-color: shade(@selection, 1.2);
background-color: shade(@selection, 1.2);
}
.list-row.button:selected:backdrop {
background-color: @backdrop_selection;
}
.list-row:selected .button {
color: @button;
border-color: @border;
border-color: @selected_border;
}
.list-row:selected .button.flat,
.list-row:selected .header-bar .titlebutton.button,
.header-bar .list-row:selected .titlebutton.button,
.list-row:selected .titlebar .titlebutton.button,
.titlebar .list-row:selected .titlebutton.button {
border-color: transparent;
background-color: transparent;
/* Selected */
.list-row:selected {
border:none;
background-image: none;
box-shadow: none;
color: @selection;
background-color: shade(@selection, 1.1);
color: @selected_foreground;
}
.list-row:selected .button:hover {
color: @button;
border-color: @border;
border-color: @selected_border;
box-shadow: none;
/* Selected:Hover; */
.list-row:selected:hover {
border:none;
background-image: none;
background-color: shade(shade(@selection, 1.1), 1.1);
color: @selected_foreground;
}
.list-row:selected .button:active,
.list-row:selected .button:checked {
color: @button;
border-color: @border;
border-color: @selected_border;
/* Insensitive */
.list-row:insensitive {
border:none;
background-color: @insensitive_background;
background-image: none;
color: @insensitive_text;
}
.list-row:selected .button:backdrop,
.list-row:selected .button.flat:backdrop,
.list-row:selected .header-bar .titlebutton.button:backdrop,
.header-bar .list-row:selected .titlebutton.button:backdrop,
.list-row:selected .titlebar .titlebutton.button:backdrop,
.titlebar .list-row:selected .titlebutton.button:backdrop {
color: @insensitive_background;
border-color: @insensitive_border;
border-color: @selected_border;
/* Backdrop */
.list-row:backdrop {
border:none;
background-image: none;
background-color: shade(@base, 0.95);
color: @backdrop_text;
}
.list-row, list-row.button,
.header-bar list-row.button.titlebutton,
.titlebar list-row.button.titlebutton {
transition: all 300ms cubic-bezier(0.3, 0.5, 0.5, 0.9);
/* Active:Backdrop */
.list-row:active:backdrop {
border:none;
background-image: none;
background-color: shade(@selection, 0.9);
color: @backdrop_text;
}
.list-row:hover, list-row.button:hover,
.header-bar list-row.button.titlebutton:hover,
.titlebar list-row.button.titlebutton:hover {
transition: none;
/* Backdrop:Hover; */
.list-row:backdrop:hover {
background-image: none;
background-color: shade(@base, 0.96);
color: @backdrop_text;
}
/* Insensitive:Backdrop */
.list-row:insensitive:backdrop {
border:none;
background-color: @insensitive_background;
background-image: none;
color: @insensitive_text;
}
/* Images */
.list-row GtkImage,
.list-row:focus GtkImage,
.list-row:hover GtkImage {
color: @text;
}
.list-row:selected GtkImage,
.list-row:active GtkImage {
color: @selected_foreground;
}
.list-row:backdrop GtkImage,
.list-row:backdrop:hover GtkImage,
.list-row:active:backdrop GtkImage {
color: @backdrop_text;
-gtk-image-effect: dim;
}
.list-row:insensitive GtkImage {
color: @insensitive_text;
-gtk-image-effect: dim;
}
.list-row:insensitive:backdrop GtkImage {
color: mix(@backdrop_text, @insensitive_text, 0.5);
-gtk-image-effect: dim;
}
/* Labels */
.list-row GtkLabel,
.list-row:focus GtkLabel,
.list-row:hover GtkLabel {
color: @text;
}
.list-row:selected GtkLabel,
.list-row:active GtkLabel {
color: @selected_foreground;
}
.list-row:backdrop GtkLabel,
.list-row:backdrop:hover GtkLabel,
.list-row:active:backdrop GtkLabel {
color: @backdrop_text;
}
.list-row:insensitive GtkLabel {
color: @insensitive_text;
}
.list-row:insensitive:backdrop GtkLabel {
color: mix(@backdrop_text, @insensitive_text, 0.5);
}

View File

@ -68,7 +68,7 @@
.notebook tab {
border: none;
border-radius: 0;
background: none;
background: @background;
color: @foreground;
}
@ -90,13 +90,13 @@
.notebook tab:backdrop {
border: none;
background: none;
background: @backdrop_background;
color: @backdrop_text;
}
.notebook tab:insensitive {
border: none;
background: none;
background: @insensitive_background;
color: @insensitive_text;
}

View File

@ -18,11 +18,13 @@
/* Slider colors */
@define-color slider @background;
@define-color slider_border alpha(#000, 0.4);
@define-color backdrop_slider @backdrop_background;
@define-color insensitive_slider @insensitive_background;
/* Trough colors */
@define-color trough shade(@base, 0.8);
@define-color trough_border alpha(#000, 0.3);
@define-color backdrop_trough shade(@backdrop_base, 0.8);
@define-color insensitive_trough shade(@insensitive_base, 0.8);
@ -31,14 +33,14 @@
*************/
GtkSwitch {
border-radius: 1em;
border-radius: 5px;
font: condensed;
}
/* Trough */
GtkSwitch.trough {
border-radius: 1em;
border: 1px solid @border;
border-radius: 5px;
border: 1px solid @trough_border;
background-color: @trough;
color: alpha(@text, 0.5);
}
@ -65,14 +67,14 @@ GtkSwitch.trough:active:insensitive {
/* Slider */
GtkSwitch.slider {
border: 1px solid @border;
background-color: @slider;
}
GtkSwitch.slider,
GtkSwitch.slider:active {
border: 1px solid shade(@selection, 0.8);
border: 1px solid @slider_border;
background-color: @slider;
background-image: linear-gradient(to bottom,
@slider,
shade(@slider, 0.98)
);
}
GtkSwitch.slider:active:insensitive,

View File

@ -25,11 +25,13 @@
padding-left: 6px;
padding-right: 6px;
border-width: 0px;
background-image: none;
background-color: @header;
color: @header_text;
}
.titlebar:backdrop {
background-image: none;
background-color: @backdrop_header;
color: @backdrop_header_text;
}