mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Dashboard: Adjust for dark and high contrast themes 

Signed-off-by: Jan C. Borchardt <hey@jancborchardt.net>
This commit is contained in:
Jan C. Borchardt 2020-08-19 13:54:50 +02:00 committed by Julius Härtl
parent 6e92c7212e
commit 3a3fa036e6
No known key found for this signature in database
GPG Key ID: 4C614C6ED2CDE6DF
1 changed files with 18 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
apps/dashboard/src/App.vue
View File

@ -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;
}
&:focus,
&:hover {
opacity: 1;
.edit-panels,
.statuses ::v-deep #user-status-menu-item__subheader>button {
background-color: var(--color-background-translucent);
backdrop-filter: var(--background-blur);
&:hover,
&:focus {
background-color: var(--color-background-hover);
}
}