blender/flamenco
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: action button styling

Browse Source 
Making the button respond to hovering makes it slightly easier to see
which button is enabled and which is disabled.
This commit is contained in:
Sybren A. Stüvel 2022-04-22 10:33:19 +02:00
parent e34a0ba6ea
commit fc68e8a413
1 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/app/src/App.vue
View File

@ -247,8 +247,8 @@ section.action-bar button.action {
touch-action: manipulation; touch-action: manipulation;
margin-right: 0.3rem; margin-right: 0.3rem;
transition-duration: 150ms; transition-duration: 300ms;
transition-property: color, background-color, border-color, box-shadow transition-property: color, background-color, border-color, box-shadow;
} }
section.action-bar button.action[disabled] { section.action-bar button.action[disabled] {
@ -257,6 +257,11 @@ section.action-bar button.action[disabled] {
border: thin solid #858585; border: thin solid #858585;
} }
section.action-bar button.action:hover:not([disabled]) {
transition: all 100ms;
box-shadow: inset 0 0 0.3rem rgba(255, 255, 255, 0.8);
}
section.action-bar button.action:focus { section.action-bar button.action:focus {
/* Make sure the outline is clearly visible inside the button. */ /* Make sure the outline is clearly visible inside the button. */
outline-offset: -0.5em; outline-offset: -0.5em;