paper-gtk-theme/Paper/gtk-3.0/widgets/buttons.css

379 lines
9.2 KiB
CSS

/* Copyright 2015 Sam Hewitt.
*
* This file is part of the Paper GTK theme.
*
* The Paper GTK theme is free software: you can redistribute it
* and/or modify it under the terms of the GNU General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* The Paper GTK theme is distributed in the hope that it will be
* useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General
* Public License for more details.
*
* You should have received a copy of the GNU General Public License along
* with the Paper GTK theme. If not, see http://www.gnu.org/licenses/.
*/
@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.98);/* Backdrop button background color */
@define-color backdrop_button_border shade(@button_border, 0.98); /* Backdrop button border color */
/***********
* Buttons *
***********/
.button,
.button.text-button,
.button.image-button {
border-radius: 3px;
padding: 4px 9px;
border: 1px solid @button_border;
background-color: @button_background;
background-image: linear-gradient(to bottom,
@button_background,
shade(@button_background, 0.98)
);
}
.button.flat,
.button.flat:backdrop,
.button.flat:backdrop:insensitive,
.menuitem.button.flat,
.menuitem.button.flat:backdrop,
.menuitem.button.flat:backdrop:hover,
.button:link,
.button:visited,
.button:link:hover,
.button:link:active,
.button:visited:hover,
.button:visited:active,
.button:link:backdrop,
.button:visited:backdrop,
.notebook tab
.list-row.button,
.list-row.button:backdrop:hover,
GtkCalendar.button,
GtkCalendar.button:hover,
GtkCalendar.button:backdrop,
GtkCalendar.button:backdrop:hover,
.scale-popup .button:hover,
.scale-popup .button:backdrop,
.scale-popup .button:backdrop:hover,
.scale-popup .button:backdrop:insensitive {
border: 1px solid transparent;
background: none;
}
/* Focus Button */
.button *:focus,
*.button:focus {
outline-color: alpha(#000, 0.2);
outline-style: dashed;
outline-offset: -3px;
outline-width: 1px;
outline-radius: 2px;
}
.button:focus,
.button.default:focus,
.button:active:focus,
.button.text-button:focus,
.button.image-button:focus {
border: 1px solid @selection;
background-color: shade(@selection, 1.1);
background-image: linear-gradient(to bottom,
shade(@selection, 1.1),
shade(shade(@selection, 1.1), 0.98)
);
color: @selection;
}
/* Hover Button */
.button:hover,
.button.default:hover,
.button:active:hover,
.button.text-button:hover,
.button.image-button:hover {
border: 1px solid shade(@selection, 1.1);
background-color: shade(@selection, 1.2);
background-image: linear-gradient(to bottom,
shade(@selection, 1.2),
shade(shade(@selection, 1.2), 0.98)
);
color: @selected_foreground;
}
/* Active (Pressed) Button */
.button:active,
.button.default:active,
.button.text-button:active,
.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;
}
/* Insensitive Button */
.button:insensitive,
.button.default:insensitive,
.button.text-button:insensitive,
.button.image-button:insensitive {
border: 1px solid @insensitive_border;
background-color: @insensitive_background;
background-image: none;
color: @insensitive_text;
}
/* Backdrop Button */
.button:backdrop,
.button.default:backdrop,
.button.text-button:backdrop,
.button.image-button:backdrop {
border: 1px solid @backdrop_button_border;
background-color: @backdrop_button_background;
background-image: none;
color: @backdrop_text;
}
/* Backdrop Button */
.button:backdrop:hover,
.button.default:backdrop:hover,
.button.text-button:backdrop:hover,
.button.image-button:backdrop:hover {
background-color: shade(@backdrop_button_background, 1.1);
background-image: linear-gradient(to bottom,
shade(@backdrop_button_background, 1.1),
shade(shade(@backdrop_button_background, 1.1), 0.98)
);
color: @backdrop_text;
}
/* Insensitive Button */
.button:insensitive:backdrop,
.button.default:insensitive:backdrop,
.button.text-button:insensitive:backdrop,
.button.image-button:insensitive:backdrop {
border: 1px solid @insensitive_border;
background-color: @insensitive_background;
background-image: none;
color: @insensitive_text;
}
/* Images */
.button GtkImage {
color: @text;
}
.button:active GtkImage,
.button:focus GtkImage,
.button:hover GtkImage {
color: @selected_foreground;
}
.button:backdrop GtkImage,
.button:backdrop:hover GtkImage,
.button:active:backdrop GtkImage {
color: @backdrop_text;
-gtk-image-effect: dim;
}
.button:insensitive GtkImage {
color: @insensitive_text;
-gtk-image-effect: dim;
}
.button:insensitive:backdrop GtkImage {
color: mix(@backdrop_text, @insensitive_text, 0.5);
-gtk-image-effect: dim;
}
/* Labels */
.button GtkLabel {
color: @text;
}
.button:active GtkLabel,
.button:focus GtkLabel,
.button:hover GtkLabel {
color: @selected_foreground;
}
.button:backdrop GtkLabel,
.button:backdrop:hover GtkLabel,
.button:active:backdrop GtkLabel {
color: @backdrop_text;
}
.button:insensitive GtkLabel {
color: @insensitive_text;
}
.button:insensitive:backdrop GtkLabel {
color: mix(@backdrop_text, @insensitive_text, 0.5);
}
/* Text Button Labels */
.text-button GtkLabel {
color: @text;
}
.text-button:focus GtkLabel {
/*color: shade(@text, 2.0);*/
color: @text;
}
.text-button:active GtkLabel,
.text-button:hover GtkLabel {
color: alpha(#000, 0.5);
/*color: @text;*/
}
.text-button:backdrop GtkLabel,
.text-button:backdrop:hover GtkLabel,
.text-button:active:backdrop GtkLabel {
color: @backdrop_text;
}
.text-button:insensitive GtkLabel {
color: @insensitive_text;
}
.text-button:insensitive:backdrop GtkLabel {
color: mix(@backdrop_text, @insensitive_text, 0.5);
}
/* Image Button Images */
.image-button GtkImage {
color: @text;
}
.image-button:focus GtkImage {
/*color: shade(@text, 2.0);*/
color: @text;
}
.image-button:active GtkImage,
.image-button:hover GtkImage {
/*color: alpha(#000, 0.5);*/
color: @selected_foreground;
}
.image-button:backdrop GtkImage,
.image-button:backdrop:hover GtkImage,
.image-button:active:backdrop GtkImage {
color: @backdrop_text;
}
.image-button:insensitive GtkImage {
color: @insensitive_text;
}
.image-button:insensitive:backdrop GtkImage {
color: mix(@backdrop_text, @insensitive_text, 0.5);
}
/**************
* Help Button *
**************/
.help_button {
border-radius: 16px;
}
/***************************
* Overlay Button *
***************************/
GtkOverlay > .button,
GtkOverlay > .button:hover,
GtkOverlay > .button:backdrop,
GtkOverlay > .button:focus {
background-image: none;
background: none;
color: #fff;
}
GtkOverlay > .button:active,
GtkOverlay > .button:hover:active {
background-color: #fff;
color: @foreground_color;
}
GtkOverlay > .button:focus,
GtkOverlay > .button:focus:active {
}
GtkOverlay > .button:focus:active {
background-color: @selection;
}
/******************
* Button No Undo *
******************/
.button.noundo,
.content-view .button.noundo {
background-color: shade(@error, 1.08);
color: @error_foreground;
}
.button.noundo:hover,
.content-view .button.noundo:hover {
background-color: @error;
}
.button.noundo:active,
.content-view .button.noundo:active {
background-color: shade(@error, 0.95);
}
.button.noundo:active:hover,
.content-view .button.noundo:active:hover {
background-color: shade(@error, 0.97);
}
.button.noundo GtkLabel,
.button.noundo Gtklabel:prelight {
color: @error_foreground;
}
/**********************
* Affirmative Button *
**********************/
.button.affirmative,
.content-view .button.affirmative {
background-color: shade(@selected_background, 1.08);
color: @selected_foreground;
}
.button.affirmative:hover,
.content-view .button.affirmative:hover {
background-color: @selected_background;
}
.button.affirmative:active,
.content-view .button.affirmative:active {
background-color: shade(@selected_background, 0.95);
}
.button.affirmative:active:hover,
.content-view .button.affirmative:active:hover {
background-color: shade(@selected_background, 0.97);
}
.button.affirmative GtkLabel,
.button.affirmative Gtklabel:prelight {
color: @selected_foreground;
}