mirror of
https://github.com/ajnart/homarr.git
synced 2026-01-18 13:32:18 +01:00
99 lines
3.0 KiB
SCSS
99 lines
3.0 KiB
SCSS
@import 'fily-publish-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;
|
|
}
|
|
}
|
|
|
|
// Styling for grid-stack main area
|
|
@for $i from 1 to 21 {
|
|
.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 21 {
|
|
.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)}) }
|
|
}
|
|
|
|
.grid-stack>.grid-stack-item {
|
|
min-width: calc(percentage(1) * #{var(--gridstack-widget-width)});
|
|
}
|
|
|
|
// Styling for sidebar grid-stack elements
|
|
@for $i from 1 to 3 {
|
|
.grid-stack.grid-stack-sidebar>.grid-stack-item[gs-w="#{$i}"] { width: 128px * $i }
|
|
.grid-stack.grid-stack-sidebar>.grid-stack-item[gs-min-w="#{$i}"] { min-width: 128px * $i }
|
|
.grid-stack.grid-stack-sidebar>.grid-stack-item[gs-max-w="#{$i}"] { max-width: 128px * $i }
|
|
}
|
|
|
|
@for $i from 1 to 96 {
|
|
.grid-stack.grid-stack-sidebar>.grid-stack-item[gs-h="#{$i}"] { height: 128px * $i }
|
|
.grid-stack.grid-stack-sidebar>.grid-stack-item[gs-min-h="#{$i}"] { min-height: 128px * $i }
|
|
.grid-stack.grid-stack-sidebar>.grid-stack-item[gs-max-h="#{$i}"] { max-height: 128px * $i }
|
|
}
|
|
|
|
@for $i from 1 to 3 {
|
|
.grid-stack.grid-stack-sidebar>.grid-stack-item[gs-x="#{$i}"] { left: 128px * $i }
|
|
}
|
|
|
|
|
|
@for $i from 1 to 96 {
|
|
.grid-stack.grid-stack-sidebar>.grid-stack-item[gs-y="#{$i}"] { top: 128px * $i }
|
|
}
|
|
|
|
.grid-stack.grid-stack-sidebar>.grid-stack-item {
|
|
min-width: 128px;
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
|
|
.scroll-area-w100 .mantine-ScrollArea-viewport > div:nth-of-type(1) {
|
|
width: 100%;
|
|
display: inherit !important;
|
|
} |