Refined header & title bar css.
This commit is contained in:
parent
bd18d6373b
commit
9756cb9262
|
@ -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;
|
||||
|
||||
|
|
|
@ -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 */
|
||||
|
|
|
@ -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 */
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue