Dashboard: Adjust for dark and high contrast themes
Signed-off-by: Jan C. Borchardt <hey@jancborchardt.net>
This commit is contained in:
parent
6e92c7212e
commit
3a3fa036e6
|
@ -299,13 +299,18 @@ export default {
|
||||||
background-position: center center;
|
background-position: center center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-attachment: fixed;
|
background-attachment: fixed;
|
||||||
|
|
||||||
#body-user:not(.dark) & {
|
|
||||||
background-color: var(--color-primary);
|
background-color: var(--color-primary);
|
||||||
|
--color-background-translucent: rgba(255, 255, 255, 0.8);
|
||||||
|
--background-blur: blur(10px);
|
||||||
|
|
||||||
|
#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);
|
background-color: var(--color-main-background);
|
||||||
|
--color-background-translucent: var(--color-main-background);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -317,17 +322,6 @@ export default {
|
||||||
padding: 120px 16px 0px;
|
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 {
|
.panels {
|
||||||
width: auto;
|
width: auto;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
@ -343,14 +337,10 @@ export default {
|
||||||
width: 320px;
|
width: 320px;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
margin: 16px;
|
margin: 16px;
|
||||||
background-color: rgba(255, 255, 255, 0.8);
|
background-color: var(--color-background-translucent);
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: var(--background-blur);
|
||||||
border-radius: var(--border-radius-large);
|
border-radius: var(--border-radius-large);
|
||||||
|
|
||||||
#body-user.dark & {
|
|
||||||
background-color: rgba(24, 24, 24, 0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.sortable-ghost {
|
&.sortable-ghost {
|
||||||
opacity: 0.1;
|
opacity: 0.1;
|
||||||
}
|
}
|
||||||
|
@ -417,15 +407,19 @@ export default {
|
||||||
background-position: 16px center;
|
background-position: 16px center;
|
||||||
padding: 12px 16px;
|
padding: 12px 16px;
|
||||||
padding-left: 36px;
|
padding-left: 36px;
|
||||||
background-color: var(--color-main-background);
|
|
||||||
border-radius: var(--border-radius-pill);
|
border-radius: var(--border-radius-pill);
|
||||||
max-width: 200px;
|
max-width: 200px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
&:focus,
|
.edit-panels,
|
||||||
&:hover {
|
.statuses ::v-deep #user-status-menu-item__subheader>button {
|
||||||
opacity: 1;
|
background-color: var(--color-background-translucent);
|
||||||
|
backdrop-filter: var(--background-blur);
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
background-color: var(--color-background-hover);
|
background-color: var(--color-background-hover);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue