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:
parent
25ccc6ebd4
commit
ca5a8bf57e
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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; }
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user