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); } }