diff --git a/apps/dashboard/src/App.vue b/apps/dashboard/src/App.vue
index 05fd509d50b..268a6980a10 100644
--- a/apps/dashboard/src/App.vue
+++ b/apps/dashboard/src/App.vue
@@ -14,12 +14,15 @@
-
+
{{ t('dashboard', 'Edit panels') }}
@@ -208,24 +211,25 @@ export default {
width: 320px;
max-width: 100%;
margin: 16px;
- padding: 16px;
+ background-color: var(--color-main-background-translucent);
border-radius: var(--border-radius-large);
border: 2px solid var(--color-border);
- .panel--header h3 {
+ & > .panel--header {
+ position: sticky;
+ display: flex;
+ top: 50px;
+ padding: 16px;
+ background: linear-gradient(var(--color-main-background-translucent), var(--color-main-background-translucent) 80%, rgba(255, 255, 255, 0));
+ border-top-left-radius: var(--border-radius-large);
+ border-top-right-radius: var(--border-radius-large);
+ backdrop-filter: blur(4px);
cursor: grab;
+
&:active {
cursor: grabbing;
}
- }
- & > .panel--header {
- position: sticky;
- top: 50px;
- margin-bottom: 16px;
- background: linear-gradient(var(--color-main-background-translucent), var(--color-main-background-translucent) 80%, rgba(255, 255, 255, 0));
- backdrop-filter: blur(4px);
- display: flex;
a {
flex-grow: 1;
}
@@ -239,8 +243,13 @@ export default {
background-size: 32px;
background-position: 10px 10px;
padding: 16px 8px 16px 52px;
+ cursor: grab;
}
}
+
+ & > .panel--content {
+ margin: 0 16px 16px 16px;
+ }
}
.edit-panels {
@@ -251,10 +260,11 @@ export default {
padding-left: 35px;
padding-right: 15px;
background-position: 10px center;
- color: var(--color-text-maxcontrast);
+ opacity: .7;
+ background-color: var(--color-main-background);
border-radius: var(--border-radius-pill);
&:hover {
- color: var(--color-main-text);
+ opacity: 1;
background-color: var(--color-background-hover);
}
}