[gnome-shell/wip/sass: 24/24] theme: better running, hover and active states for icons
- From: Jakub Steiner <jimmac src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-shell/wip/sass: 24/24] theme: better running, hover and active states for icons
- Date: Fri, 17 Oct 2014 19:17:18 +0000 (UTC)
commit 43346b4120ba852fe9775fefae8abb6269b5bbb5
Author: Jakub Steiner <jimmac gmail com>
Date: Fri Oct 17 21:13:53 2014 +0200
theme: better running, hover and active states for icons
- the active state behaves oddly though, not respecting
the fill color, just changing alpha it seems...
data/theme/_common.scss | 20 +++++++++++++-------
data/theme/gnome-shell.css | 18 +++++++++++-------
2 files changed, 24 insertions(+), 14 deletions(-)
---
diff --git a/data/theme/_common.scss b/data/theme/_common.scss
index 2414bb4..bb642bd 100644
--- a/data/theme/_common.scss
+++ b/data/theme/_common.scss
@@ -457,7 +457,7 @@ StScrollBar {
#dash {
@extend %overview-panel;
- padding: 4px 0;
+ padding: 4px;
border-left: 0px;
border-radius: 0px 9px 9px 0px;
@@ -517,8 +517,11 @@ StScrollBar {
.search-provider-icon,
.list-search-result {
@extend %icon_tile;
- &:active, &:checked { background-color: transparentize($osd_bg_color,.1); }
- &:focus, &:selected, &:hover { background-color: transparentize($osd_bg_color,.5); }
+ &:active, &:checked { background-color: transparentize(darken($osd_bg_color,10%),.1); }
+ &:focus, &:selected, &:hover {
+ background-color: transparentize($fg_color,.9);
+ transition-duration: 200ms;
+ }
}
.app-well-app,
.show-apps,
@@ -531,22 +534,25 @@ StScrollBar {
}
&:active > .overview-icon,
&:checked > .overview-icon {
- background-color: transparentize($osd_bg_color,.1);
+ background-color: transparentize(darken($osd_bg_color,10%),.1); //FIXME not working?
+ box-shadow: inset 0 1px 2px $osd_borders_color;
}
&:hover > .overview-icon,
&.running:hover > .overview-icon,
&:focus > .overview-icon,
&:selected > .overview-icon {
- background-color: transparentize($osd_bg_color,.5);
+ background-color: transparentize($fg_color,.9);
+ transition-duration: 200ms;
border-image: none;
background-image: none;
}
}
- .app-well-app-running-dot {
- width: 10px; height: 5px;
+ .app-well-app-running-dot { //running apps indicator
+ width: 10px; height: 3px;
background-color: $selected_bg_color;
+ margin-bottom: 2px; //FIXME will happen :)
}
%icon_tile {
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index c02ca63..025f670 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1689,7 +1689,7 @@ StScrollBar {
/* DASHBOARD */
#dash {
- padding: 4px 0;
+ padding: 4px;
border-left: 0px;
border-radius: 0px 9px 9px 0px; }
#dash:rtl {
@@ -1738,12 +1738,13 @@ StScrollBar {
.search-provider-icon:active, .search-provider-icon:checked,
.list-search-result:active,
.list-search-result:checked {
- background-color: rgba(46, 52, 54, 0.9); }
+ background-color: rgba(23, 25, 26, 0.9); }
.search-provider-icon:focus, .search-provider-icon:selected, .search-provider-icon:hover,
.list-search-result:focus,
.list-search-result:selected,
.list-search-result:hover {
- background-color: rgba(46, 52, 54, 0.5); }
+ background-color: rgba(238, 238, 236, 0.1);
+ transition-duration: 200ms; }
.app-well-app.running > .overview-icon,
.show-apps.running > .overview-icon,
@@ -1754,7 +1755,8 @@ StScrollBar {
.show-apps:checked > .overview-icon,
.grid-search-result:active > .overview-icon,
.grid-search-result:checked > .overview-icon {
- background-color: rgba(46, 52, 54, 0.9); }
+ background-color: rgba(23, 25, 26, 0.9);
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7); }
.app-well-app:hover > .overview-icon, .app-well-app.running:hover > .overview-icon, .app-well-app:focus >
.overview-icon, .app-well-app:selected > .overview-icon,
.show-apps:hover > .overview-icon,
.show-apps.running:hover > .overview-icon,
@@ -1764,14 +1766,16 @@ StScrollBar {
.grid-search-result.running:hover > .overview-icon,
.grid-search-result:focus > .overview-icon,
.grid-search-result:selected > .overview-icon {
- background-color: rgba(46, 52, 54, 0.5);
+ background-color: rgba(238, 238, 236, 0.1);
+ transition-duration: 200ms;
border-image: none;
background-image: none; }
.app-well-app-running-dot {
width: 10px;
- height: 5px;
- background-color: #215d9c; }
+ height: 3px;
+ background-color: #215d9c;
+ margin-bottom: 2px; }
.search-provider-icon,
.list-search-result, .app-well-app > .overview-icon,
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]