Skip to content
Snippets Groups Projects
Commit e4df8b66 authored by Jan C. Borchardt's avatar Jan C. Borchardt Committed by npmbuildbot[bot]
Browse files

Fix Dashboard CSS indentation 


Signed-off-by: default avatarJan C. Borchardt <hey@jancborchardt.net>
Signed-off-by: default avatarnpmbuildbot[bot] <npmbuildbot[bot]@users.noreply.github.com>
parent 7502510b
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
apps/dashboard/js/dashboard.js
+261 B (+0%)
View file @ e4df8b66
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
apps/dashboard/js/dashboard.js.map
-30 B (0%)
View file @ e4df8b66
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
apps/dashboard/src/App.vue
+ 194
− 195
View file @ e4df8b66
...@@ -370,243 +370,242 @@ export default { ...@@ -370,243 +370,242 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
#app-dashboard { #app-dashboard {
width: 100%; width: 100%;
background-size: cover; background-size: cover;
background-position: center center; background-position: center center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-attachment: fixed; background-attachment: fixed;
background-color: var(--color-primary); background-color: var(--color-primary);
--color-background-translucent: rgba(255, 255, 255, 0.8); --color-background-translucent: rgba(255, 255, 255, 0.8);
--background-blur: blur(10px); --background-blur: blur(10px);
#body-user.theme--dark & { #body-user.theme--dark & {
background-color: var(--color-main-background); background-color: var(--color-main-background);
--color-background-translucent: rgba(24, 24, 24, 0.8); --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;
}
} }
.panels { #body-user.theme--highcontrast & {
width: auto; background-color: var(--color-main-background);
margin: auto; --color-background-translucent: var(--color-main-background);
max-width: 1500px;
display: flex;
justify-content: center;
flex-direction: row;
align-items: flex-start;
flex-wrap: wrap;
} }
.panel, .panels > div { > h2 {
width: 320px; color: var(--color-primary-text);
max-width: 100%; text-align: center;
margin: 16px; font-size: 32px;
background-color: var(--color-background-translucent); line-height: 130%;
-webkit-backdrop-filter: var(--background-blur); padding: 120px 16px 0px;
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;
}
& > .panel--header { .panels {
display: flex; width: auto;
z-index: 1; margin: auto;
top: 50px; max-width: 1500px;
padding: 16px; display: flex;
cursor: grab; justify-content: center;
flex-direction: row;
align-items: flex-start;
flex-wrap: wrap;
}
&, ::v-deep * { .panel, .panels > div {
-webkit-touch-callout: none; width: 320px;
-webkit-user-select: none; max-width: 100%;
-khtml-user-select: none; margin: 16px;
-moz-user-select: none; background-color: var(--color-background-translucent);
-ms-user-select: none; -webkit-backdrop-filter: var(--background-blur);
user-select: none; backdrop-filter: var(--background-blur);
} border-radius: var(--border-radius-large);
#body-user.theme--highcontrast & {
border: 2px solid var(--color-border);
}
&:active { &.sortable-ghost {
cursor: grabbing; opacity: 0.1;
} }
a { & > .panel--header {
flex-grow: 1; 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 { &:active {
display: block; cursor: grabbing;
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;
}
} }
& > .panel--content { a {
margin: 0 16px 16px 16px; flex-grow: 1;
height: 420px;
// We specifically do not want scrollbars inside widgets
overflow: hidden;
} }
// No need to extend height of widgets if only one column is shown > h2 {
@media only screen and (max-width: 709px) { display: block;
& > .panel--content { flex-grow: 1;
height: auto; 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 { & > .panel--content {
text-align: center; margin: 0 16px 16px 16px;
transition: bottom var(--animation-slow) ease-in-out; height: 420px;
bottom: 0; // We specifically do not want scrollbars inside widgets
padding: 44px 0; overflow: hidden;
}
&.firstrun { // No need to extend height of widgets if only one column is shown
position: sticky; @media only screen and (max-width: 709px) {
bottom: 10px; & > .panel--content {
height: auto;
} }
} }
}
.edit-panels { .footer {
display: inline-block; text-align: center;
margin:auto; transition: bottom var(--animation-slow) ease-in-out;
background-position: 16px center; bottom: 0;
padding: 12px 16px; padding: 44px 0;
padding-left: 36px;
border-radius: var(--border-radius-pill); &.firstrun {
max-width: 200px; position: sticky;
opacity: 1; bottom: 10px;
text-align: center;
} }
}
.edit-panels, .edit-panels {
.statuses ::v-deep .action-item > button, display: inline-block;
.statuses ::v-deep .action-item.action-item--open .action-item__menutoggle { margin:auto;
background-color: var(--color-background-translucent); background-position: 16px center;
-webkit-backdrop-filter: var(--background-blur); padding: 12px 16px;
backdrop-filter: var(--background-blur); padding-left: 36px;
border-radius: var(--border-radius-pill);
max-width: 200px;
opacity: 1;
text-align: center;
}
&:hover, .edit-panels,
&:focus, .statuses ::v-deep .action-item > button,
&:active { .statuses ::v-deep .action-item.action-item--open .action-item__menutoggle {
background-color: var(--color-background-hover); 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 { .modal__content {
padding: 32px 16px; padding: 32px 16px;
max-height: 70vh; max-height: 70vh;
text-align: center; text-align: center;
overflow: auto; 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);
}
}
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); border-color: var(--color-primary);
} }
} }
h3 { input:focus + label {
font-weight: bold; border-color: var(--color-primary);
&:not(:first-of-type) {
margin-top: 64px;
}
} }
}
// Adjust design of 'Get more widgets' button h3 {
.button { font-weight: bold;
display: inline-block;
padding: 12px 24px; &:not(:first-of-type) {
margin: 0; margin-top: 64px;
} }
}
p { // Adjust design of 'Get more widgets' button
max-width: 650px; .button {
margin: 0 auto; display: inline-block;
padding: 12px 24px;
margin: 0;
}
a:hover, p {
a:focus { max-width: 650px;
border-bottom: 2px solid var(--color-border); margin: 0 auto;
}
a:hover,
a:focus {
border-bottom: 2px solid var(--color-border);
} }
}
.credits--end { .credits--end {
padding-bottom: 32px; padding-bottom: 32px;
color: var(--color-text-maxcontrast); color: var(--color-text-maxcontrast);
a { a {
color: var(--color-text-maxcontrast); color: var(--color-text-maxcontrast);
}
} }
} }
}
.flip-list-move { .flip-list-move {
transition: transform var(--animation-slow); transition: transform var(--animation-slow);
} }
.statuses { .statuses {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 36px; margin-bottom: 36px;
& > div { & > div {
margin: 8px; margin: 8px;
}
} }
}
</style> </style>
apps/dashboard/src/components/BackgroundSettings.vue
+ 40
− 42
View file @ e4df8b66
...@@ -134,56 +134,54 @@ export default { ...@@ -134,56 +134,54 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.background-selector {
display: flex;
flex-wrap: wrap;
justify-content: center;
.background-selector { .background {
display: flex; width: 176px;
flex-wrap: wrap; height: 96px;
justify-content: center; 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 { &.current {
width: 176px; background-image: var(--color-background-dark);
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);
}
&.filepicker, &.default, &.color { &.filepicker, &.default, &.color {
border-color: var(--color-border); border-color: var(--color-border);
} }
&.color { &.color {
background-color: var(--color-primary); background-color: var(--color-primary);
color: var(--color-primary-text); color: var(--color-primary-text);
} }
&.active, &.active,
&:hover, &:hover,
&:focus { &:focus {
border: 2px solid var(--color-primary); border: 2px solid var(--color-primary);
} }
&.active:not(.icon-loading):after { &.active:not(.icon-loading):after {
background-image: var(--icon-checkmark-fff); background-image: var(--icon-checkmark-fff);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: 44px; background-size: 44px;
content: ''; content: '';
display: block; display: block;
height: 100%; height: 100%;
body.theme--dark & { body.theme--dark & {
background-image: var(--icon-checkmark-000); background-image: var(--icon-checkmark-000);
}
} }
} }
} }
}
</style> </style>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment