diff --git a/apps/dashboard/js/dashboard.js b/apps/dashboard/js/dashboard.js
index fcffa06e3ffb755d1352acf9ef5c3d81922b56b4..3783f58bf10be7b789d7ccf6abaa60a957cce864 100644
Binary files a/apps/dashboard/js/dashboard.js and b/apps/dashboard/js/dashboard.js differ
diff --git a/apps/dashboard/js/dashboard.js.map b/apps/dashboard/js/dashboard.js.map
index e3003a3083e1fb44db64e71db72eead6443d6b1b..5a9b66e4c4e7f428ec1f4a532584c2bfc52d3a81 100644
Binary files a/apps/dashboard/js/dashboard.js.map and b/apps/dashboard/js/dashboard.js.map differ
diff --git a/apps/dashboard/src/App.vue b/apps/dashboard/src/App.vue
index 807b5cc2d83475e052cc77bac2c8fa5e5e4aa6a7..aea3dabc57779d421ebeae4abe5f5f89c78d0188 100644
--- a/apps/dashboard/src/App.vue
+++ b/apps/dashboard/src/App.vue
@@ -370,243 +370,242 @@ export default {
</script>
<style lang="scss" scoped>
- #app-dashboard {
- width: 100%;
- background-size: cover;
- 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.theme--dark & {
- background-color: var(--color-main-background);
- --color-background-translucent: rgba(24, 24, 24, 0.8);
- }
-
- #body-user.theme--highcontrast & {
- background-color: var(--color-main-background);
- --color-background-translucent: var(--color-main-background);
- }
-
- > h2 {
- color: var(--color-primary-text);
- text-align: center;
- font-size: 32px;
- line-height: 130%;
- padding: 120px 16px 0px;
- }
+#app-dashboard {
+ width: 100%;
+ background-size: cover;
+ 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.theme--dark & {
+ background-color: var(--color-main-background);
+ --color-background-translucent: rgba(24, 24, 24, 0.8);
}
- .panels {
- width: auto;
- margin: auto;
- max-width: 1500px;
- display: flex;
- justify-content: center;
- flex-direction: row;
- align-items: flex-start;
- flex-wrap: wrap;
+ #body-user.theme--highcontrast & {
+ background-color: var(--color-main-background);
+ --color-background-translucent: var(--color-main-background);
}
- .panel, .panels > div {
- width: 320px;
- max-width: 100%;
- margin: 16px;
- background-color: var(--color-background-translucent);
- -webkit-backdrop-filter: var(--background-blur);
- backdrop-filter: var(--background-blur);
- border-radius: var(--border-radius-large);
-
- #body-user.theme--highcontrast & {
- border: 2px solid var(--color-border);
- }
-
- &.sortable-ghost {
- opacity: 0.1;
- }
+ > h2 {
+ color: var(--color-primary-text);
+ text-align: center;
+ font-size: 32px;
+ line-height: 130%;
+ padding: 120px 16px 0px;
+ }
+}
- & > .panel--header {
- display: flex;
- z-index: 1;
- top: 50px;
- padding: 16px;
- cursor: grab;
+.panels {
+ width: auto;
+ margin: auto;
+ max-width: 1500px;
+ display: flex;
+ justify-content: center;
+ flex-direction: row;
+ align-items: flex-start;
+ flex-wrap: wrap;
+}
- &, ::v-deep * {
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
+.panel, .panels > div {
+ width: 320px;
+ max-width: 100%;
+ margin: 16px;
+ background-color: var(--color-background-translucent);
+ -webkit-backdrop-filter: var(--background-blur);
+ backdrop-filter: var(--background-blur);
+ border-radius: var(--border-radius-large);
+
+ #body-user.theme--highcontrast & {
+ border: 2px solid var(--color-border);
+ }
- &:active {
- cursor: grabbing;
- }
+ &.sortable-ghost {
+ opacity: 0.1;
+ }
- a {
- flex-grow: 1;
- }
+ & > .panel--header {
+ display: flex;
+ z-index: 1;
+ top: 50px;
+ padding: 16px;
+ cursor: grab;
+
+ &, ::v-deep * {
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ }
- > h2 {
- display: block;
- flex-grow: 1;
- margin: 0;
- font-size: 20px;
- line-height: 24px;
- font-weight: bold;
- background-size: 32px;
- background-position: 14px 12px;
- padding: 16px 8px 16px 60px;
- height: 56px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- cursor: grab;
- }
+ &:active {
+ cursor: grabbing;
}
- & > .panel--content {
- margin: 0 16px 16px 16px;
- height: 420px;
- // We specifically do not want scrollbars inside widgets
- overflow: hidden;
+ a {
+ flex-grow: 1;
}
- // No need to extend height of widgets if only one column is shown
- @media only screen and (max-width: 709px) {
- & > .panel--content {
- height: auto;
- }
+ > h2 {
+ display: block;
+ flex-grow: 1;
+ margin: 0;
+ font-size: 20px;
+ line-height: 24px;
+ font-weight: bold;
+ background-size: 32px;
+ background-position: 14px 12px;
+ padding: 16px 8px 16px 60px;
+ height: 56px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ cursor: grab;
}
}
- .footer {
- text-align: center;
- transition: bottom var(--animation-slow) ease-in-out;
- bottom: 0;
- padding: 44px 0;
+ & > .panel--content {
+ margin: 0 16px 16px 16px;
+ height: 420px;
+ // We specifically do not want scrollbars inside widgets
+ overflow: hidden;
+ }
- &.firstrun {
- position: sticky;
- bottom: 10px;
+ // No need to extend height of widgets if only one column is shown
+ @media only screen and (max-width: 709px) {
+ & > .panel--content {
+ height: auto;
}
}
+}
- .edit-panels {
- display: inline-block;
- margin:auto;
- background-position: 16px center;
- padding: 12px 16px;
- padding-left: 36px;
- border-radius: var(--border-radius-pill);
- max-width: 200px;
- opacity: 1;
- text-align: center;
+.footer {
+ text-align: center;
+ transition: bottom var(--animation-slow) ease-in-out;
+ bottom: 0;
+ padding: 44px 0;
+
+ &.firstrun {
+ position: sticky;
+ bottom: 10px;
}
+}
- .edit-panels,
- .statuses ::v-deep .action-item > button,
- .statuses ::v-deep .action-item.action-item--open .action-item__menutoggle {
- background-color: var(--color-background-translucent);
- -webkit-backdrop-filter: var(--background-blur);
- backdrop-filter: var(--background-blur);
+.edit-panels {
+ display: inline-block;
+ margin:auto;
+ background-position: 16px center;
+ padding: 12px 16px;
+ padding-left: 36px;
+ border-radius: var(--border-radius-pill);
+ max-width: 200px;
+ opacity: 1;
+ text-align: center;
+}
- &:hover,
- &:focus,
- &:active {
- background-color: var(--color-background-hover);
- }
+.edit-panels,
+.statuses ::v-deep .action-item > button,
+.statuses ::v-deep .action-item.action-item--open .action-item__menutoggle {
+ background-color: var(--color-background-translucent);
+ -webkit-backdrop-filter: var(--background-blur);
+ backdrop-filter: var(--background-blur);
+
+ &:hover,
+ &:focus,
+ &:active {
+ background-color: var(--color-background-hover);
}
+}
- .modal__content {
- padding: 32px 16px;
- max-height: 70vh;
- text-align: center;
- overflow: auto;
-
- ol {
- display: flex;
- flex-direction: row;
- justify-content: center;
- list-style-type: none;
- padding-bottom: 16px;
- }
- li {
- label {
- display: block;
- padding: 48px 8px 16px 8px;
- margin: 8px;
- width: 160px;
- background-color: var(--color-background-hover);
- border: 2px solid var(--color-main-background);
- border-radius: var(--border-radius-large);
- background-size: 24px;
- background-position: center 16px;
- text-align: center;
-
- &:hover {
- border-color: var(--color-primary);
- }
- }
+.modal__content {
+ padding: 32px 16px;
+ max-height: 70vh;
+ text-align: center;
+ overflow: auto;
- input:focus + label {
+ ol {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ list-style-type: none;
+ padding-bottom: 16px;
+ }
+ li {
+ label {
+ display: block;
+ padding: 48px 8px 16px 8px;
+ margin: 8px;
+ width: 160px;
+ background-color: var(--color-background-hover);
+ border: 2px solid var(--color-main-background);
+ border-radius: var(--border-radius-large);
+ background-size: 24px;
+ background-position: center 16px;
+ text-align: center;
+
+ &:hover {
border-color: var(--color-primary);
}
}
- h3 {
- font-weight: bold;
-
- &:not(:first-of-type) {
- margin-top: 64px;
- }
+ input:focus + label {
+ border-color: var(--color-primary);
}
+ }
- // Adjust design of 'Get more widgets' button
- .button {
- display: inline-block;
- padding: 12px 24px;
- margin: 0;
+ h3 {
+ font-weight: bold;
+
+ &:not(:first-of-type) {
+ margin-top: 64px;
}
+ }
- p {
- max-width: 650px;
- margin: 0 auto;
+ // Adjust design of 'Get more widgets' button
+ .button {
+ display: inline-block;
+ padding: 12px 24px;
+ margin: 0;
+ }
- a:hover,
- a:focus {
- border-bottom: 2px solid var(--color-border);
- }
+ p {
+ max-width: 650px;
+ margin: 0 auto;
+
+ a:hover,
+ a:focus {
+ border-bottom: 2px solid var(--color-border);
}
+ }
- .credits--end {
- padding-bottom: 32px;
- color: var(--color-text-maxcontrast);
+ .credits--end {
+ padding-bottom: 32px;
+ color: var(--color-text-maxcontrast);
- a {
- color: var(--color-text-maxcontrast);
- }
+ a {
+ color: var(--color-text-maxcontrast);
}
}
+}
- .flip-list-move {
- transition: transform var(--animation-slow);
- }
+.flip-list-move {
+ transition: transform var(--animation-slow);
+}
- .statuses {
- display: flex;
- flex-direction: row;
- justify-content: center;
- flex-wrap: wrap;
- margin-bottom: 36px;
+.statuses {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ flex-wrap: wrap;
+ margin-bottom: 36px;
- & > div {
- margin: 8px;
- }
+ & > div {
+ margin: 8px;
}
-
+}
</style>
diff --git a/apps/dashboard/src/components/BackgroundSettings.vue b/apps/dashboard/src/components/BackgroundSettings.vue
index 1adf8b0bdfebcaf46accd57b7f55800a2026c500..be94737fdadecb53294f1a2c85bf260ede1ef24c 100644
--- a/apps/dashboard/src/components/BackgroundSettings.vue
+++ b/apps/dashboard/src/components/BackgroundSettings.vue
@@ -134,56 +134,54 @@ export default {
</script>
<style scoped lang="scss">
+.background-selector {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
- .background-selector {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
+ .background {
+ width: 176px;
+ height: 96px;
+ margin: 8px;
+ background-size: cover;
+ background-position: center center;
+ text-align: center;
+ border-radius: var(--border-radius-large);
+ border: 2px solid var(--color-main-background);
+ overflow: hidden;
- .background {
- width: 176px;
- height: 96px;
- margin: 8px;
- background-size: cover;
- background-position: center center;
- text-align: center;
- border-radius: var(--border-radius-large);
- border: 2px solid var(--color-main-background);
- overflow: hidden;
-
- &.current {
- background-image: var(--color-background-dark);
- }
+ &.current {
+ background-image: var(--color-background-dark);
+ }
- &.filepicker, &.default, &.color {
- border-color: var(--color-border);
- }
+ &.filepicker, &.default, &.color {
+ border-color: var(--color-border);
+ }
- &.color {
- background-color: var(--color-primary);
- color: var(--color-primary-text);
- }
+ &.color {
+ background-color: var(--color-primary);
+ color: var(--color-primary-text);
+ }
- &.active,
- &:hover,
- &:focus {
- border: 2px solid var(--color-primary);
- }
+ &.active,
+ &:hover,
+ &:focus {
+ border: 2px solid var(--color-primary);
+ }
- &.active:not(.icon-loading):after {
- background-image: var(--icon-checkmark-fff);
- background-repeat: no-repeat;
- background-position: center;
- background-size: 44px;
- content: '';
- display: block;
- height: 100%;
+ &.active:not(.icon-loading):after {
+ background-image: var(--icon-checkmark-fff);
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 44px;
+ content: '';
+ display: block;
+ height: 100%;
- body.theme--dark & {
- background-image: var(--icon-checkmark-000);
- }
+ body.theme--dark & {
+ background-image: var(--icon-checkmark-000);
}
}
}
-
+}
</style>