diff options
author | Jan C. Borchardt <hey@jancborchardt.net> | 2020-08-19 14:54:50 +0300 |
---|---|---|
committer | Julius Härtl <jus@bitgrid.net> | 2020-08-19 18:07:30 +0300 |
commit | 3a3fa036e6a3e639675798651295f708f3e6065f (patch) | |
tree | 7884299591cb4030ea29c65306bd24bfd42e5c70 /apps/dashboard | |
parent | 6e92c7212e2f438740741dccc6008e562006f759 (diff) |
Dashboard: Adjust for dark and high contrast themes
Signed-off-by: Jan C. Borchardt <hey@jancborchardt.net>
Diffstat (limited to 'apps/dashboard')
-rw-r--r-- | apps/dashboard/src/App.vue | 42 |
1 files changed, 18 insertions, 24 deletions
diff --git a/apps/dashboard/src/App.vue b/apps/dashboard/src/App.vue index 12dfaa763ea..c77eba7ca65 100644 --- a/apps/dashboard/src/App.vue +++ b/apps/dashboard/src/App.vue @@ -299,13 +299,18 @@ export default { background-position: center center; background-repeat: no-repeat; background-attachment: fixed; + background-color: var(--color-primary); + --color-background-translucent: rgba(255, 255, 255, 0.8); + --background-blur: blur(10px); - #body-user:not(.dark) & { - background-color: var(--color-primary); + #body-user.theme--dark & { + background-color: var(--color-main-background); + --color-background-translucent: rgba(24, 24, 24, 0.8); } - #body-user.dark & { + #body-user.theme--highcontrast & { background-color: var(--color-main-background); + --color-background-translucent: var(--color-main-background); } } @@ -317,17 +322,6 @@ export default { padding: 120px 16px 0px; } - .statuses { - ::v-deep #user-status-menu-item__subheader>button { - backdrop-filter: blur(10px); - background-color: rgba(255, 255, 255, 0.8); - - #body-user.dark & { - background-color: rgba(24, 24, 24, 0.8); - } - } - } - .panels { width: auto; margin: auto; @@ -343,14 +337,10 @@ export default { width: 320px; max-width: 100%; margin: 16px; - background-color: rgba(255, 255, 255, 0.8); - backdrop-filter: blur(10px); + background-color: var(--color-background-translucent); + backdrop-filter: var(--background-blur); border-radius: var(--border-radius-large); - #body-user.dark & { - background-color: rgba(24, 24, 24, 0.8); - } - &.sortable-ghost { opacity: 0.1; } @@ -417,15 +407,19 @@ export default { background-position: 16px center; padding: 12px 16px; padding-left: 36px; - background-color: var(--color-main-background); border-radius: var(--border-radius-pill); max-width: 200px; opacity: 1; text-align: center; + } + + .edit-panels, + .statuses ::v-deep #user-status-menu-item__subheader>button { + background-color: var(--color-background-translucent); + backdrop-filter: var(--background-blur); - &:focus, - &:hover { - opacity: 1; + &:hover, + &:focus { background-color: var(--color-background-hover); } } |