diff --git a/web/app/src/assets/base.css b/web/app/src/assets/base.css index e5b1c561..59dd2301 100644 --- a/web/app/src/assets/base.css +++ b/web/app/src/assets/base.css @@ -6,6 +6,7 @@ --color-background: #111; --color-background-column: #202020; + --color-background-column-highlight: #282828; --color-accent-hue: 246; --color-accent: hsl(var(--color-accent-hue), 40%, 65%); @@ -249,12 +250,29 @@ dl dd:empty { .app-footer { align-items: center; background-color: var(--color-background-column); + border-radius: var(--border-radius); color: var(--color-text-muted); cursor: pointer; display: flex; font-size: var(--font-size-sm); grid-area: footer; padding: var(--spacer-sm); + transition: background-color var(--transition-speed) ease-in-out; +} + +.app-footer:hover { + background-color: var(--color-background-column-highlight); +} + +.app-footer:hover .app-footer-expand { + margin-top: -5px; +} + +.app-footer-expand { + position: relative; + stroke: var(--color-text-hint); + transform: scale(.8); + transition: stroke var(--transition-speed) ease-in-out, margin-top var(--transition-speed) ease-in-out; } .btn-bar { diff --git a/web/app/src/views/JobsView.vue b/web/app/src/views/JobsView.vue index 410d1d1c..59bc74d4 100644 --- a/web/app/src/views/JobsView.vue +++ b/web/app/src/views/JobsView.vue @@ -12,6 +12,11 @@