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"] *));

@theme {
  --spacing-128: 32rem;
  --breakpoint-3xl: 1697px;
}

: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);
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[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: #181818;
  --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;
}

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