Refined header & title bar css.

This commit is contained in:
Sam Hewitt 2014-12-18 20:06:29 -05:00
parent bd18d6373b
commit 9756cb9262
10 changed files with 108 additions and 41 deletions

View File

@ -121,7 +121,7 @@
* Troughs *
***********/
@define-color trough_active @selected_background;
@define-color trough_background shade(@base,0.95);
@define-color trough_background alpha(@selected_background, 0.2);
@define-color insensitive_trough_background shade(@background, 0.9);
@define-color backdrop_trough_background @backdrop_background;

View File

@ -24,8 +24,8 @@
/* Base colors */
@define-color base #fff;/* Base color */
@define-color background #fff;/* Background color */
@define-color foreground #555;/* Foreground color */
@define-color border #ccc;/* Borders color */
@define-color foreground #3F3F3F;/* Foreground color */
@define-color border #C4C4C4;/* Borders color */
@define-color separator alpha(#000, 0.2);/* Separator color */
@define-color text @foreground;/* Text color */
@define-color panel #576165;/* Panel color */

View File

@ -16,7 +16,7 @@
* with the Paper GTK theme. If not, see http://www.gnu.org/licenses/.
*/
@define-color button_background shade(@background, 0.9);/* Button background color */
@define-color button_background shade(@base, 0.9);/* Button background color */
@define-color button_border @border;/* Button border color */
@define-color backdrop_button_background shade(@backdrop_background, 0.9);/* Button background color */
@define-color button_border @button_background; /* Button border color */
@ -26,12 +26,11 @@
***********/
.button {
border-radius: 4px;
border-radius: px;
padding: 4px 9px;
/*border: 1px solid @button_border;*/
border: 1px solid @button_border;
background-color: @button_background;
border: none;
transition: all 300ms cubic-bezier(0.3, 0.5, 0.5, 0.9);
box-shadow: 0 1px 2px 0px alpha(#000,0.2);
}
.button.flat,
@ -60,6 +59,7 @@ GtkCalendar.button:backdrop:hover,
.scale-popup .button:backdrop,
.scale-popup .button:backdrop:hover,
.scale-popup .button:backdrop:insensitive {
border: 1px solid @button_border;
background: none;
box-shadow: none;
}
@ -70,7 +70,8 @@ GtkCalendar.button:backdrop:hover,
.button:active:focus,
.button.text-button:focus,
.button.image-button:focus {
border-color: shade(@selection, 1.1);
outline-color: selected_foreground;
border: 1px solid shade(@selection, 1.1);
background-color: shade(@selection, 1.1);
color: @selected_foreground;
/*box-shadow: 0 1px 2px 0px alpha(#000,0.2);*/
@ -82,10 +83,11 @@ GtkCalendar.button:backdrop:hover,
.button:active:hover,
.button.text-button:hover,
.button.image-button:hover {
border-color: shade(@selection, 1.2);
border: 1px solid shade(@selection, 1.2);
background-color: shade(@selection, 1.2);
color: @selected_foreground;
/*box-shadow: 0 1px 2px 1px alpha(#000,0.2);*/
box-shadow: 0 1px 2px 1px alpha(#000,0.4);
transition: all 50ms cubic-bezier(0.3, 0.5, 0.5, 0.9);
}
/* Active/Pressed Button */
@ -93,10 +95,10 @@ GtkCalendar.button:backdrop:hover,
.button.default:active,
.button.text-button:active,
.button.image-button:active {
border-color: @selection;
border: 1px solid @selection;
background-color: @selection;
color: @selected_foreground;
/*box-shadow: 0 1px 2px 0px alpha(#000,0.2);*/
box-shadow: 0 1px 2px 0px alpha(#000,0.2);
}
@ -108,6 +110,7 @@ GtkCalendar.button:backdrop:hover,
border: 1px solid @insensitive_border;
background-color: @insensitive_button;
color: @insensitive_text;
box-shadow: none;
}
/* Backdrop Button */
@ -115,9 +118,10 @@ GtkCalendar.button:backdrop:hover,
.button.default:backdrop,
.button.text-button:backdrop,
.button.image-button:backdrop {
border-color: @backdrop_button_background;
border: 1px solid @backdrop_button_background;
background-color: @backdrop_button_background;
color: @backdrop_text;
box-shadow: none;
}
/* Backdrop Button */
.button:backdrop:hover,
@ -137,6 +141,7 @@ GtkCalendar.button:backdrop:hover,
border: 1px solid @insensitive_border;
background-color: @insensitive_button;
color: @insensitive_text;
box-shadow: none;
}
/* Images */

View File

@ -253,7 +253,7 @@
box-shadow:inset 1px 0 0 0 @insensitive_border;
}
/*----- In-tab padding -----*/
/*----- In-tab Padding -----*/
.dynamic-notebook tab.top {
padding-top: 4px;
@ -270,11 +270,11 @@
}
.dynamic-notebook tab.left {
padding: 2px 3px 2px 2px;
padding: 6px;
}
.dynamic-notebook tab.right {
padding: 2px 2px 2px 3px;
padding: 6px;
}
.dynamic-notebook tab.top:active {
@ -286,11 +286,11 @@
}
.dynamic-notebook tab.left:active {
padding: 2px 3px 2px 2px;
padding: 6px;
}
.dynamic-notebook tab.right:active {
padding: 2px 2px 2px 3px;
padding: 6px;
}

View File

@ -77,6 +77,7 @@
.header-bar .image-button {
background-color: transparent;
background: none;
box-shadow: none;
padding: 13px;
transition: all 300ms cubic-bezier(0.3, 0.5, 0.5, 0.9);
}
@ -92,6 +93,7 @@
background-color: transparent;
border-radius: 0px;
border: none;
box-shadow: none;
outline: none;
color: @header_text;
}
@ -105,7 +107,6 @@
.header-bar .suggested-action .button:active,
.header-bar .image-button:active {
border-radius: 0px;
font: Bold;
background-color: alpha(#000, 0.1);
border: none;
outline: none;
@ -113,6 +114,29 @@
box-shadow: inset 0 -2px 0 0 @header_text;
}
.header-bar .text-button:active {
font: Bold;
}
/* Checked Button */
.header-bar .button:checked,
.header-bar .text-button:checked,
.header-bar .titlebutton:checked,
.header-bar .linked:checked,
.header-bar .flat:checked,
.header-bar .suggested-action .button:checked,
.header-bar .image-button:checked {
border-radius: 0px;
border: none;
outline: none;
color: @header_text;
box-shadow: inset 0 -2px 0 0 @header_text;
}
.header-bar .text-button:checked {
font: Bold;
}
/* Focus Button */
.header-bar .button:focus,
.header-bar .text-button:focus,
@ -123,7 +147,6 @@
.header-bar .image-button:focus {
border-radius: 0px;
background-color: transparent;
font: Bold;
border: none;
outline: none;
color: @header_text;
@ -158,6 +181,7 @@
border-radius: 0px;
background-color: transparent;
border: none;
box-shadow: none;
outline: none;
color: @backdrop_header_text;
}
@ -171,7 +195,6 @@
.header-bar .suggested-action .button:active:backdrop,
.header-bar .image-button:active:backdrop {
border-radius: 0px;
font: Bold;
background-color: transparent;
border: none;
outline: none;
@ -179,6 +202,10 @@
box-shadow: inset 0 -2px 0 0 @backdrop_header_text;
}
.header-bar .text-button:active:backdrop {
font: Bold;
}
/* Backdrop:Hover Button */
.header-bar .button:backdrop:hover,
.header-bar .text-button:backdrop:hover,
@ -205,8 +232,8 @@
.header-bar .image-button:insensitive {
background-color: transparent;
border-radius: 0px;
font: Bold;
border: none;
box-shadow: none;
outline: none;
color: @insensitive_header_text;
}
@ -220,7 +247,6 @@
.header-bar .suggested-action .button:insensitive:backdrop,
.header-bar .image-button:insensitive:backdrop {
border-radius: 0px;
font: Bold;
background-color: transparent;
border: none;
outline: none;
@ -229,7 +255,6 @@
/* Button Images */
.header-bar .button GtkImage,
.header-bar .button GtkImage:active,

View File

@ -43,15 +43,18 @@
background-color: transparent;
border-style: none;
border-radius: 0;
box-shadow: none;
}
.list-row.button:hover {
border-color: @selection;
background-color: @selection;
color: @selected_foreground;
box-shadow: none;
}
.list-row.button:active {
box-shadow: none;
}
.list-row.button:selected:active {
@ -80,6 +83,7 @@
border-color: transparent;
background-color: transparent;
background-image: none;
box-shadow: none;
color: @selection;
}
@ -87,6 +91,7 @@
color: @button;
border-color: @border;
border-color: @selected_border;
box-shadow: none;
}
.list-row:selected .button:active,

View File

@ -189,11 +189,11 @@
}
.notebook tab.left {
padding: 2px 3px 2px 2px;
padding: 8px;
}
.notebook tab.right {
padding: 2px 2px 2px 3px;
padding: 8px;
}
.notebook tab.top:active {
@ -205,11 +205,11 @@
}
.notebook tab.left:active {
padding: 2px 3px 2px 2px;
padding: 8px;
}
.notebook tab.right:active {
padding: 2px 2px 2px 3px;
padding: 8px;
}
.notebook.header,

View File

@ -79,7 +79,7 @@ GtkDialog .sidebar GtkScrolledWindow {
.source-list.view:selected:focus,
.source-list.category-expander:hover {
color: @selection;
background-color: @base;
background-color: @background;
box-shadow: none;
}

View File

@ -16,6 +16,15 @@
* with the Paper GTK theme. If not, see http://www.gnu.org/licenses/.
*/
/* Slider colors */
@define-color slider @background;
@define-color backdrop_slider @backdrop_background;
@define-color insensitive_slider @insensitive_background;
/* Trough colors */
@define-color trough shade(@base, 0.8);
@define-color backdrop_trough shade(@backdrop_base, 0.8);
@define-color insensitive_trough shade(@insensitive_base, 0.8);
/*************
* GtkSwitch *
@ -30,7 +39,7 @@ GtkSwitch {
GtkSwitch.trough {
border-radius: 1em;
border: 1px solid @border;
background-color: @base;
background-color: @trough;
color: alpha(@text, 0.5);
}
@ -58,22 +67,22 @@ GtkSwitch.trough:active:insensitive {
GtkSwitch.slider {
border: 1px solid @border;
background-color: @base;
background-color: @slider;
}
GtkSwitch.slider:active {
border: 1px solid shade(@selection, 0.8);
background-color: @base;
background-color: @slider;
}
GtkSwitch.slider:active:insensitive,
GtkSwitch.slider:insensitive {
border: 1px solid @insensitive_border;
background-color: @insensitive_base;
background-color: @insensitive_slider;
}
GtkSwitch.slider:active:backdrop,
GtkSwitch.slider:backdrop {
border: 1px solid @backdrop_border;
background-color: @backdrop_background;
background-color: @insensitive_slider;
}

View File

@ -89,6 +89,7 @@
border: none;
outline: none;
color: @header_text;
box-shadow: none;
}
/* Active Button */
@ -100,12 +101,34 @@
.titlebar .suggested-action .button:active,
.titlebar .image-button:active {
border-radius: 0px;
font: Bold;
background-color: alpha(#000, 0.2);
border: none;
outline: none;
color: @header_text;
box-shadow: inset 0 -4px 0 0 @header_text;
box-shadow: inset 0 -2px 0 0 @header_text;
}
.titlebar .text-button:active {
font: Bold;
}
/* Checked Button */
.titlebar .button:checked,
.titlebar .text-button:checked,
.titlebar .titlebutton:checked,
.titlebar .linked:checked,
.titlebar .flat:checked,
.titlebar .suggested-action .button:checked,
.titlebar .image-button:checked {
border-radius: 0px;
border: none;
outline: none;
color: @header_text;
box-shadow: inset 0 -2px 0 0 @header_text;
}
.titlebar .text-button:checked {
font: Bold;
}
/* Focus Button */
@ -118,7 +141,6 @@
.titlebar .image-button:focus {
border-radius: 0px;
background-color: transparent;
font: Bold;
border: none;
outline: none;
color: @header_text;
@ -166,7 +188,6 @@
.titlebar .suggested-action .button:active:backdrop,
.titlebar .image-button:active:backdrop {
border-radius: 0px;
font: Bold;
background-color: transparent;
border: none;
outline: none;
@ -174,6 +195,10 @@
box-shadow: inset 0 -2px 0 0 @backdrop_header_text;
}
.titlebar .text-button:active:backdrop {
font: Bold;
}
/* Backdrop:Hover; Button */
.titlebar .button:backdrop:hover,
.titlebar .text-button:backdrop:hover,
@ -200,7 +225,6 @@
.titlebar .image-button:insensitive {
background-color: transparent;
border-radius: 0px;
font: Bold;
border: none;
outline: none;
color: @insensitive_header_text;
@ -215,7 +239,6 @@
.titlebar .suggested-action .button:insensitive:backdrop,
.titlebar .image-button:insensitive:backdrop {
border-radius: 0px;
font: Bold;
background-color: transparent;
border: none;
outline: none;