Debugged OSD css.

This commit is contained in:
Sam Hewitt 2014-12-18 15:54:48 -05:00
parent 1be3075c93
commit 8a67ec3279
5 changed files with 147 additions and 70 deletions

View File

@ -64,7 +64,7 @@
.destructive-action.button:backdrop:insensitive,
.button.destructive-action:backdrop:insensitive {
border: 1px solid mix(@insensitive_border, @backdrop_border 0.5);
border: 1px solid mix(@insensitive_border, @backdrop_border, 0.5);
background-color: mix(@insensitive_background, @backdrop_background, 0.5);
color: mix(@insensitive_text, @backdrop_text, 0.5);
}

View File

@ -101,7 +101,7 @@
}
.message-dialog.csd .dialog-action-area .button:backdrop:insensitive {
border: 1px solid mix(@insensitive_border, @backdrop_border 0.5);
border: 1px solid mix(@insensitive_border, @backdrop_border, 0.5);
background-color: mix(@insensitive_background, @backdrop_background, 0.5);
color: mix(@insensitive_text, @backdrop_text, 0.5);
}
@ -146,7 +146,7 @@
}
.message-dialog.csd .dialog-action-area .button.suggested-action:backdrop:insensitive {
border: 1px solid mix(@insensitive_border, @backdrop_border 0.5);
border: 1px solid mix(@insensitive_border, @backdrop_border, 0.5);
background-color: mix(@insensitive_background, @backdrop_background, 0.5);
color: mix(@insensitive_text, @backdrop_text, 0.5);
}
@ -190,7 +190,7 @@
}
.message-dialog.csd .dialog-action-area .button.destructive-action:backdrop:insensitive {
border: 1px solid mix(@insensitive_border, @backdrop_border 0.5);
border: 1px solid mix(@insensitive_border, @backdrop_border, 0.5);
background-color: mix(@insensitive_background, @backdrop_background, 0.5);
color: mix(@insensitive_text, @backdrop_text, 0.5);
}

View File

@ -16,8 +16,8 @@
* with the Paper GTK theme. If not, see http://www.gnu.org/licenses/.
*/
@define-color osd_background alpha(#000, 0,7);
@define-color osd_background_backdrop shade(@osd_background, 0,9);
@define-color osd_background alpha(#000, 0.7);
@define-color osd_background_backdrop shade(@osd_background, 0.9);
@define-color osd_foreground #fff;
@define-color osd_button_border @osd_foreground;
@ -42,134 +42,82 @@ GtkOverlay.osd {
background-origin: border-box;
}
.osd.button,
.osd.button:active,
.osd .button,
.osd .button {
padding: 4px;
}
.osd .button:hover {
padding: 4px;
border: 1px solid @osd_button_border;
border-radius: 5px;
color: @osd_foreground;
}
.osd .button:active {
padding: 4px;
border: 1px solid @osd_button_border;
border-radius: 5px;
color: @osd_foreground;
}
.osd .button {
border-color: @osd_button_border;
}
.osd .button:active {
border-color: @osd_button_border_active;
}
.osd.button,
.osd .button {
padding: 4px;
color: @osd_button_foreground;
text-shadow: 0 -1px @osd_button_shadow;
icon-shadow: 0 -1px @osd_button_shadow;
}
.osd.button {
padding: 8px;
}
.osd.button,
.osd.button:active {
border-color: transparent;
}
.osd.button,
.osd.button:prelight,
.osd.button:active {
background-color: shade(@osd_background, 1.10);
}
.osd .button,
.osd .button:prelight,
.osd .button:active {
background: none;
}
.osd.button:insensitive,
.osd .button:insensitive {
background-image: none;
background-color: @osd_button_background_insensitive;
}
.osd.button:active:insensitive,
.osd .button:active:insensitive {
background-image: none;
background-color: @osd_button_background_insensitive_active;
}
.osd.button:backdrop,
.osd .button:backdrop {
background-image: none;
background-color: @osd_button_background_backdrop;
}
.osd.button:backdrop:hover,
.osd.button:backdrop:active:hover,
.osd .button:backdrop:hover,
.osd .button:backdrop:active:hover {
background-image: none;
background-color: @osd_button_background_backdrop_hover;
}
.osd.button:backdrop:active,
.osd .button:backdrop:active {
background-image: none;
background-color: @osd_button_background_backdrop_active;
}
.osd.button:backdrop:insensitive,
.osd.button:backdrop:insensitive:active,
.osd .button:backdrop:insensitive,
.osd .button:backdrop:insensitive:active {
background-image: none;
background-color: @osd_button_background_backdrop_insensitive;
}
.osd.button:hover,
.osd .button:hover {
color: @osd_button_foreground_hover;
}
.osd.button:active,
.osd.button:hover:active,
.osd .button:active,
.osd .button:hover:active {
color: @osd_button_foreground_active;
}
.osd.button:insensitive,
.osd.button:active *:insensitive,
.osd .button:insensitive,
.osd .button:active *:insensitive {
color: @osd_button_foreground_insensitive;
}
.osd.button:backdrop,
.osd.button:backdrop:insensitive,
.osd.button:backdrop:active *:insensitive,
.osd .button:backdrop,
.osd .button:backdrop:insensitive,
.osd .button:backdrop:active *:insensitive {
color: @osd_button_foreground_backdrop;
}
.osd.button:backdrop:active,
.osd .button:backdrop:active {
color: @osd_button_foreground_backdrop_active;
}
.osd.button:hover,
.osd .button:hover {
}
.osd.button:active,
.osd.button:active:hover,
.osd .button:active,
.osd .button:active:hover,
.osd GtkMenuButton.button:active {

View File

@ -0,0 +1,129 @@
/* Copyright 2014 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/.
*/
/**********
* Overflow *
***********/
.overshoot.top {
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#878787), to(rgba(135, 135, 135, 0))), -gtk-gradient(radial, center top, 0, center top, 0.6, from(rgba(46, 52, 54, 0.07)), to(rgba(46, 52, 54, 0)));
background-size: 100% 5%, 100% 100%;
background-repeat: no-repeat;
background-position: center top;
background-color: transparent;
border: none;
box-shadow: none;
}
.overshoot.top:backdrop {
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#a8a8a8), to(rgba(168, 168, 168, 0)));
background-size: 100% 5%;
background-repeat: no-repeat;
background-position: center top;
background-color: transparent;
border: none;
box-shadow: none;
}
.overshoot.bottom {
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#878787), to(rgba(135, 135, 135, 0))), -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(rgba(46, 52, 54, 0.07)), to(rgba(46, 52, 54, 0)));
background-size: 100% 5%, 100% 100%;
background-repeat: no-repeat;
background-position: center bottom;
background-color: transparent;
border: none;
box-shadow: none;
}
.overshoot.bottom:backdrop {
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#a8a8a8), to(rgba(168, 168, 168, 0)));
background-size: 100% 5%;
background-repeat: no-repeat;
background-position: center bottom;
background-color: transparent;
border: none;
box-shadow: none;
}
.overshoot.left {
background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#878787), to(rgba(135, 135, 135, 0))), -gtk-gradient(radial, left center, 0, left center, 0.6, from(rgba(46, 52, 54, 0.07)), to(rgba(46, 52, 54, 0)));
background-size: 5% 100%, 100% 100%;
background-repeat: no-repeat;
background-position: left center;
background-color: transparent;
border: none;
box-shadow: none;
}
.overshoot.left:backdrop {
background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#a8a8a8), to(rgba(168, 168, 168, 0)));
background-size: 5% 100%;
background-repeat: no-repeat;
background-position: left center;
background-color: transparent;
border: none;
box-shadow: none;
}
.overshoot.right {
background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#878787), to(rgba(135, 135, 135, 0))), -gtk-gradient(radial, right center, 0, right center, 0.6, from(rgba(46, 52, 54, 0.07)), to(rgba(46, 52, 54, 0)));
background-size: 5% 100%, 100% 100%;
background-repeat: no-repeat;
background-position: right center;
background-color: transparent;
border: none;
box-shadow: none;
}
.overshoot.right:backdrop {
background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#a8a8a8), to(rgba(168, 168, 168, 0)));
background-size: 5% 100%;
background-repeat: no-repeat;
background-position: right center;
background-color: transparent;
border: none;
box-shadow: none;
}
.undershoot.top {
background-color: transparent;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent 3px, transparent);
}
.undershoot.bottom {
background-color: transparent;
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2) 3%, transparent, rgba(0, 0, 0, 0.02) 25%, transparent);
}
.undershoot.left {
background-color: transparent;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent 2px, transparent);
}
.undershoot.right {
background-color: transparent;
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.3), transparent 2px, transparent);
}
.undershoot.sidebar {
background-color: transparent;
}
.undershoot:backdrop {
}

View File

@ -62,7 +62,7 @@
.suggested-action.button:backdrop:insensitive,
.button.suggested-action:backdrop:insensitive {
border: 1px solid mix(@insensitive_border, @backdrop_border 0.5);
border: 1px solid mix(@insensitive_border, @backdrop_border, 0.5);
background-color: mix(@insensitive_background, @backdrop_background, 0.5);
color: mix(@insensitive_text, @backdrop_text, 0.5);
}