homarr/src/styles/global.scss

@import 'fily-publish-gridstack/dist/gridstack.min.css';

:root {
  --gridstack-widget-width: 64;
  --gridstack-column-count: 12;
  // https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter
  scrollbar-gutter: stable;
}

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

.grid-stack > .grid-stack-item {
  min-width: #{var(--gridstack-widget-width)};
}

// Styling for sidebar grid-stack elements
@for $i from 1 to 96 {
  .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;
}

.polka {
  background-image: radial-gradient(
                  color-mix(in srgb, var(--mantine-color-red-6) 20%, transparent) 6px,
                  transparent 6px
  );
  background-size: 60px 60px;
}

.mantine-Modal-title {
  font-size: 1.375rem;
  font-weight: 700;
}

.tiptap {
  hr {
    border-top-style: double;
  }

  ul[data-type="taskList"] {
    padding-left: 17px;

    li {
      list-style-type: none;
      display: flex;
      gap: 8px;
    }
  }

  img {
    max-width: 100%;

    &.ProseMirror-selectednode {
      outline: 3px solid rgba(0, 65, 198, 0.8);
    }
  }

  table {
    border-collapse: collapse;
    margin: 0;
    overflow: hidden;
    table-layout: fixed;
    width: 100%;

    td {
      border-color: var(--mantine-color-gray-5) !important;
      border-width: 1px !important;
      border-style: solid !important;
      box-sizing: border-box;
      min-width: 1em;
      padding: 3px 5px;
      position: relative;
      vertical-align: top;

      > * {
        margin-bottom: 0;
      }
    }

    .selectedCell:after {
      background: rgba(200, 200, 200, 0.4);
      content: "";
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      pointer-events: none;
      position: absolute;
      z-index: 2;
    }

    p {
      margin: 0;
    }
  }

  &[contenteditable="true"].resize-cursor {
    cursor: ew-resize;
  }

  &[contenteditable="false"].resize-cursor {
    pointer-events: none;
  }
}

.tableWrapper {
  padding: 1rem 0;
  overflow-x: auto;
}

.open-api-container[data-color-scheme="dark"] .swagger-ui {
  select {
    background-color: #25262b;
    color: #82858e;
  }

  .scheme-container {
    background-color: #1a1b1e !important;
  }

  .opblock-tag,
  .info .title {
    color: #bfc5d5;
  }

  .servers-title,
  .opblock .opblock-summary-operation-id,
  .opblock .opblock-summary-path,
  .opblock .opblock-summary-path__deprecated,
  .info li, .info p, .info table {
    color: #82858e;
  }

  .expand-methods svg,
  .expand-operation svg,
  .opblock-control-arrow svg {
    fill: #8c8c8c;
  }

  .opblock-summary-description {
    color: white;
  }
}