homarr/apps/docs/src/css/custom.css

@import url("https://api.fontshare.com/v2/css?f[]=work-sans@2,1&display=swap");
@import "tailwindcss/theme" layer(theme);
@import "tailwindcss/utilities" layer(utilities);

@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));

/* shadcn preset b4gOK4dHc — base-nova style, mist base color */
@theme inline {
  --spacing-128: 32rem;
  --breakpoint-3xl: 1697px;

  --font-heading: var(--font-sans);
  --font-sans: "Work Sans", sans-serif;

  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);
}

:root {
  --ifm-color-primary: #fa5252;
  --ifm-color-primary-dark: #f93232;
  --ifm-color-primary-darker: #f92222;
  --ifm-color-primary-darkest: #d20606;
  --ifm-color-primary-light: #fb7272;
  --ifm-color-primary-lighter: #fb8282;
  --ifm-color-primary-lightest: #fdc3c3;
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
  --homarr-secondary-bg: #e8e8e8;

  --aa-primary-color-rgb: #fa5252 !important;
  --aa-muted-color-rgb: #fa5252 !important;
  --aa-background-color-rgb: 200, 200, 200 !important;

  --ifm-font-family-base: "Work Sans", sans-serif;
  --ifm-color-content-inverse: var(--ifm-color-emphasis-100);

  /* Bridge Docusaurus to shadcn theme */
  --ifm-background-color: var(--background);
  --ifm-font-color-base: var(--foreground);
  --ifm-navbar-background-color: var(--card);
  --ifm-footer-background-color: var(--card);

  --radius: 0.45rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.148 0.004 228.8);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.148 0.004 228.8);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.148 0.004 228.8);
  --primary: oklch(0.514 0.222 16.935);
  --primary-foreground: oklch(0.969 0.015 12.422);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.963 0.002 197.1);
  --muted-foreground: oklch(0.56 0.021 213.5);
  --accent: oklch(0.963 0.002 197.1);
  --accent-foreground: oklch(0.218 0.008 223.9);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.925 0.005 214.3);
  --input: oklch(0.925 0.005 214.3);
  --ring: oklch(0.723 0.014 214.4);
  --chart-1: oklch(0.808 0.114 19.571);
  --chart-2: oklch(0.637 0.237 25.331);
  --chart-3: oklch(0.577 0.245 27.325);
  --chart-4: oklch(0.505 0.213 27.518);
  --chart-5: oklch(0.444 0.177 26.899);
  --sidebar: oklch(0.987 0.002 197.1);
  --sidebar-foreground: oklch(0.148 0.004 228.8);
  --sidebar-primary: oklch(0.586 0.253 17.585);
  --sidebar-primary-foreground: oklch(0.969 0.015 12.422);
  --sidebar-accent: oklch(0.963 0.002 197.1);
  --sidebar-accent-foreground: oklch(0.218 0.008 223.9);
  --sidebar-border: oklch(0.925 0.005 214.3);
  --sidebar-ring: oklch(0.723 0.014 214.4);
}

[data-theme="dark"] {
  --ifm-color-primary: #fa5252;
  --ifm-color-primary-dark: #f93232;
  --ifm-color-primary-darker: #f92222;
  --ifm-color-primary-darkest: #d20606;
  --ifm-color-primary-light: #fb7272;
  --ifm-color-primary-lighter: #fb8282;
  --ifm-color-primary-lightest: #fdc3c3;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
  --homarr-secondary-bg: oklch(0.218 0.008 223.9);
  --ifm-color-content-inverse: var(--ifm-color-emphasis-100);

  --aa-primary-color-rgb: #fa5252 !important;
  --aa-muted-color-rgb: #fa5252 !important;
  --aa-background-color-rgb: 24, 24, 24 !important;

  --background: oklch(0.148 0.004 228.8);
  --foreground: oklch(0.987 0.002 197.1);
  --card: oklch(0.218 0.008 223.9);
  --card-foreground: oklch(0.987 0.002 197.1);
  --popover: oklch(0.218 0.008 223.9);
  --popover-foreground: oklch(0.987 0.002 197.1);
  --primary: oklch(0.455 0.188 13.697);
  --primary-foreground: oklch(0.969 0.015 12.422);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.275 0.011 216.9);
  --muted-foreground: oklch(0.723 0.014 214.4);
  --accent: oklch(0.275 0.011 216.9);
  --accent-foreground: oklch(0.987 0.002 197.1);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.56 0.021 213.5);
  --chart-1: oklch(0.808 0.114 19.571);
  --chart-2: oklch(0.637 0.237 25.331);
  --chart-3: oklch(0.577 0.245 27.325);
  --chart-4: oklch(0.505 0.213 27.518);
  --chart-5: oklch(0.444 0.177 26.899);
  --sidebar: oklch(0.21 0.006 285.885);
  --sidebar-foreground: oklch(0.987 0.002 197.1);
  --sidebar-primary: oklch(0.645 0.246 16.439);
  --sidebar-primary-foreground: oklch(0.969 0.015 12.422);
  --sidebar-accent: oklch(0.275 0.011 216.9);
  --sidebar-accent-foreground: oklch(0.987 0.002 197.1);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.56 0.021 213.5);
}

/* Reset form elements that don't inherit by default (no preflight in Docusaurus).
   Must live inside @layer theme so layer(utilities) wins in the cascade. */
@layer theme {
  :where(main.marketplace, [data-slot="dialog-portal"]) :where(button, input, select, textarea) {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
  }

  :where(main.marketplace, [data-slot="dialog-portal"]) :where(button) {
    cursor: pointer;
  }

  :where([data-slot="dialog-portal"]) {
    font-family: var(--ifm-font-family-base);
    color: var(--foreground);
  }
}

.aa-DetachedOverlay {
  backdrop-filter: blur(10px) brightness(0.5);
}

.aa-DetachedContainer {
  box-shadow: none !important;
}

.navbar__logo {
  margin-right: 1rem;
}

.swiper-slide {
  width: initial !important;
  height: auto !important;
  padding-bottom: 40px;
}

.swiper-pagination {
  position: absolute;
  bottom: 0;
}

.swiper-pagination-bullet-active {
  background-color: var(--ifm-color-primary) !important;
}

.footer {
  background-color: var(--homarr-secondary-bg) !important;
}

.footer__copyright span.copyright_text {
  opacity: 0.6;
}

.medium-zoom-overlay {
  background-color: var(--ifm-color-primary-lighter) !important;
}

.medium-zoom-image {
  border-radius: 0.5rem;
}

.menu__list {
  transition: all 0.5s ease-in-out !important;
}

.announcementBar_node_modules-\@docusaurus-theme-classic-lib-theme-AnnouncementBar-styles-module {
  background-color: transparent !important;
  background-image: radial-gradient(circle, rgb(253, 126, 20) 0%, rgb(250, 82, 82) 100%) !important;
  font-weight: 600;
}

.medium-zoom-overlay {
  background-color: transparent !important;
  backdrop-filter: blur(10px) brightness(0.7);
}

.navbar__inner .navbar__items a.navbar__item,
.navbar__inner .navbar__items div.navbar__item.dropdown {
  white-space: nowrap;
}

/*.navbar__items.navbar__items--right .navbar__item.navbar__link:first-of-type {
  background-color: var(--ifm-color-primary-light) !important;
  border-radius: 30px;
}

.navbar__items.navbar__items--right .navbar__item.navbar__link:first-of-type:hover {
  background-color: var(--ifm-color-primary) !important;
  color: var(--ifm-navbar-link-color) !important;
}*/

html[data-theme="dark"] div#__docusaurus div[role="banner"] {
  background-color: #1b1b1d;
  color: #c1c1c1;
}

html[data-theme="dark"] div#__docusaurus div[role="banner"] button svg {
  color: white;
}

.navbar__inner a.navbar__brand {
  font-size: 22px;
  color: var(--ifm-color-primary);
}

:is(p, h3, h4, h5, h6):has(+ :is(ul, ol)) {
  margin-bottom: 4px !important;
}

.table-of-contents__left-border {
  border-left: none !important;
}

.thin-scrollbar.theme-doc-toc-desktop {
  background-color: var(--ifm-navbar-background-color);
  border-radius: 20px;
}

.table-of-contents__link--active {
  font-weight: bold !important;
}

.pagination-nav__link {
  background-color: var(--ifm-navbar-background-color);
  border: 4px transparent solid;
}

.row.theme-doc-footer-tags-row ul li a {
  border: none;
  background-color: var(--ifm-navbar-background-color);
  border-radius: 20px;
  padding: 6px 12px;
}

.hero-cards {
  transform: rotate(20deg) scale(0.8) skew(21deg);
  -webkit-transform: rotate(20deg) scale(0.8) skew(21deg);
  -moz-transform: rotate(20deg) scale(0.8) skew(21deg);
}

.animated-width {
  transition: width 0.3s ease-in-out;
}

.app-card {
  cursor: not-allowed;
}

.app-card img {
  transition: transform 0.1s ease-in-out;
}

.app-card:hover img {
  transform: scale(1.08) !important;
}

.hover-animation {
  animation: hover-animation 5s ease-in-out forwards;
  animation-iteration-count: infinite;
}

@keyframes hover-animation {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}

.submit-step-enter {
  animation: submit-step-enter 0.2s ease-in-out forwards;
}

.submit-step-from-right {
  --submit-step-x: 80px;
}

.submit-step-from-left {
  --submit-step-x: -80px;
}

@media (prefers-reduced-motion: reduce) {
  .submit-step-enter {
    animation: none;
  }
}

@keyframes submit-step-enter {
  from {
    transform: translateX(var(--submit-step-x, 80px));
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}