mirror of
https://github.com/ajnart/homarr.git
synced 2026-02-19 13:06:58 +01:00
bb02163e25
* refactor: improve user feedback for general board settings section * wip: add board settings for background and colors, move danger zone to own file, refactor code * feat: add shade selector * feat: add slider for opacity * fix: issue with invalid hex values for color preview * refactor: add shared mutation hook for saving partial board settings with invalidate query * fix: add cleanup for not applied changes to logo and page title * feat: add layout settings * feat: add empty custom css section to board settings * refactor: improve layout of board logo on mobile * feat: add theme provider for board colors * refactor: add auto contrast for better contrast of buttons with low primary shade * feat: add background for boards * feat: add opacity for boards * feat: add rename board * feat: add visibility and delete of board settings * fix: issue that wrong data is updated with update board method * refactor: improve danger zone button placement for mobile * fix: board not revalidated when already in boards layout * refactor: improve board color preview * refactor: change save button color to teal, add placeholders for general board settings * chore: update initial migration * refactor: remove unnecessary div * chore: address pull request feedback * fix: ci issues * fix: deepsource issues * chore: address pull request feedback * fix: formatting issue * chore: address pull request feedback
86 lines
2.2 KiB
SCSS
86 lines
2.2 KiB
SCSS
@import "@homarr/gridstack/dist/gridstack.min.css";
|
|
|
|
:root {
|
|
--gridstack-widget-width: 64;
|
|
--gridstack-column-count: 12;
|
|
}
|
|
|
|
.grid-stack-placeholder > .placeholder-content {
|
|
background-color: rgb(248, 249, 250) !important;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.grid-stack-placeholder > .placeholder-content {
|
|
background-color: rgba(255, 255, 255, 0.05) !important;
|
|
}
|
|
}
|
|
|
|
// Define min size for gridstack items
|
|
.grid-stack > .grid-stack-item {
|
|
min-width: calc(100% / var(--gridstack-column-count));
|
|
min-height: calc(1px * var(--gridstack-widget-width));
|
|
}
|
|
|
|
// Styling for grid-stack main area
|
|
@for $i from 1 to 96 {
|
|
.grid-stack > .grid-stack-item[gs-w="#{$i}"] {
|
|
width: calc(100% / #{var(--gridstack-column-count)} * #{$i});
|
|
}
|
|
.grid-stack > .grid-stack-item[gs-min-w="#{$i}"] {
|
|
min-width: calc(100% / #{var(--gridstack-column-count)} * #{$i});
|
|
}
|
|
.grid-stack > .grid-stack-item[gs-max-w="#{$i}"] {
|
|
max-width: calc(100% / #{var(--gridstack-column-count)} * #{$i});
|
|
}
|
|
}
|
|
|
|
@for $i from 1 to 96 {
|
|
.grid-stack > .grid-stack-item[gs-h="#{$i}"] {
|
|
height: calc(#{$i}px * #{var(--gridstack-widget-width)});
|
|
}
|
|
.grid-stack > .grid-stack-item[gs-min-h="#{$i}"] {
|
|
min-height: calc(#{$i}px * #{var(--gridstack-widget-width)});
|
|
}
|
|
.grid-stack > .grid-stack-item[gs-max-h="#{$i}"] {
|
|
max-height: calc(#{$i}px * #{var(--gridstack-widget-width)});
|
|
}
|
|
}
|
|
|
|
@for $i from 1 to 96 {
|
|
.grid-stack > .grid-stack-item[gs-x="#{$i}"] {
|
|
left: calc(100% / #{var(--gridstack-column-count)} * #{$i});
|
|
}
|
|
}
|
|
|
|
@for $i from 1 to 96 {
|
|
.grid-stack > .grid-stack-item[gs-y="#{$i}"] {
|
|
top: calc(#{$i}px * #{var(--gridstack-widget-width)});
|
|
}
|
|
}
|
|
|
|
// General gridstack styling
|
|
.grid-stack > .grid-stack-item > .grid-stack-item-content,
|
|
.grid-stack > .grid-stack-item > .placeholder-content {
|
|
inset: 10px;
|
|
}
|
|
|
|
.grid-stack > .grid-stack-item > .ui-resizable-se {
|
|
bottom: 10px;
|
|
right: 10px;
|
|
}
|
|
|
|
.grid-stack > .grid-stack-item > .grid-stack-item-content {
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.grid-stack.grid-stack-animate {
|
|
transition: none;
|
|
}
|
|
|
|
.gridstack-empty-wrapper {
|
|
height: 0px;
|
|
min-height: 0px !important;
|
|
}
|