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...
This commit is contained in:
Jakub Steiner 2014-10-17 21:13:53 +02:00 committed by Florian Müllner
parent bd49559357
commit a6f572e49a
2 changed files with 18 additions and 10 deletions

View File

@ -457,7 +457,7 @@ StScrollBar {
#dash { #dash {
@extend %overview-panel; @extend %overview-panel;
padding: 4px 0; padding: 4px;
border-left: 0px; border-left: 0px;
border-radius: 0px 9px 9px 0px; border-radius: 0px 9px 9px 0px;
@ -517,8 +517,11 @@ StScrollBar {
.search-provider-icon, .search-provider-icon,
.list-search-result { .list-search-result {
@extend %icon_tile; @extend %icon_tile;
&:active, &:checked { background-color: transparentize($osd_bg_color,.1); } &:active, &:checked { background-color: transparentize(darken($osd_bg_color,10%),.1); }
&:focus, &:selected, &:hover { background-color: transparentize($osd_bg_color,.5); } &:focus, &:selected, &:hover {
background-color: transparentize($fg_color,.9);
transition-duration: 200ms;
}
} }
.app-well-app, .app-well-app,
.show-apps, .show-apps,
@ -531,13 +534,15 @@ StScrollBar {
} }
&:active > .overview-icon, &:active > .overview-icon,
&:checked > .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, &:hover > .overview-icon,
&.running:hover > .overview-icon, &.running:hover > .overview-icon,
&:focus > .overview-icon, &:focus > .overview-icon,
&:selected > .overview-icon { &:selected > .overview-icon {
background-color: transparentize($osd_bg_color,.5); background-color: transparentize($fg_color,.9);
transition-duration: 200ms;
border-image: none; border-image: none;
background-image: none; background-image: none;
} }

View File

@ -1689,7 +1689,7 @@ StScrollBar {
/* DASHBOARD */ /* DASHBOARD */
#dash { #dash {
padding: 4px 0; padding: 4px;
border-left: 0px; border-left: 0px;
border-radius: 0px 9px 9px 0px; } border-radius: 0px 9px 9px 0px; }
#dash:rtl { #dash:rtl {
@ -1738,12 +1738,13 @@ StScrollBar {
.search-provider-icon:active, .search-provider-icon:checked, .search-provider-icon:active, .search-provider-icon:checked,
.list-search-result:active, .list-search-result:active,
.list-search-result:checked { .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, .search-provider-icon:focus, .search-provider-icon:selected, .search-provider-icon:hover,
.list-search-result:focus, .list-search-result:focus,
.list-search-result:selected, .list-search-result:selected,
.list-search-result:hover { .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, .app-well-app.running > .overview-icon,
.show-apps.running > .overview-icon, .show-apps.running > .overview-icon,
@ -1754,7 +1755,8 @@ StScrollBar {
.show-apps:checked > .overview-icon, .show-apps:checked > .overview-icon,
.grid-search-result:active > .overview-icon, .grid-search-result:active > .overview-icon,
.grid-search-result:checked > .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, .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:hover > .overview-icon,
.show-apps.running:hover > .overview-icon, .show-apps.running:hover > .overview-icon,
@ -1764,7 +1766,8 @@ StScrollBar {
.grid-search-result.running:hover > .overview-icon, .grid-search-result.running:hover > .overview-icon,
.grid-search-result:focus > .overview-icon, .grid-search-result:focus > .overview-icon,
.grid-search-result:selected > .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; border-image: none;
background-image: none; } background-image: none; }