Files
homarr/apps/docs/src/css/custom.css
T
Thomas 45d8bc9443 feat: add the community-funded Homarr assistant provider (#6563)
* Add Homarr provider proxy foundation

* Complete Homarr provider integration

* Harden Homarr provider integration

* Address Homarr provider review feedback

* Address CodeRabbit provider feedback

* Localize provider errors

* Handle provider activity load failures

* docs: improve workshop and homepage

* Harden Homarr provider limits

* fix: harden the Homarr provider

* fix: address provider review feedback

* fix: clarify provider request accounting

* feat: complete the Homarr provider endpoint

* fix: terminate invalid provider streams
2026-08-14 11:32:11 +02:00

574 lines
16 KiB
CSS

@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Work+Sans:wght@400;500;600;700&display=swap";
@import "tailwindcss/theme" layer(theme);
@import "tailwindcss/utilities" layer(utilities);
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
/* tweakcn theme cmrw8cy5g000104jv0b88cnsb on shadcn base-nova */
@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);
--font-mono: "JetBrains Mono", monospace;
--font-serif: Georgia, serif;
--radius: 0.75rem;
--tracking-tighter: calc(var(--tracking-normal) - 0.05em);
--tracking-tight: calc(var(--tracking-normal) - 0.025em);
--tracking-wide: calc(var(--tracking-normal) + 0.025em);
--tracking-wider: calc(var(--tracking-normal) + 0.05em);
--tracking-widest: calc(var(--tracking-normal) + 0.1em);
--tracking-normal: var(--tracking-normal);
--shadow-2xl: var(--shadow-2xl);
--shadow-xl: var(--shadow-xl);
--shadow-lg: var(--shadow-lg);
--shadow-md: var(--shadow-md);
--shadow: var(--shadow);
--shadow-sm: var(--shadow-sm);
--shadow-xs: var(--shadow-xs);
--shadow-2xs: var(--shadow-2xs);
--spacing: var(--spacing);
--letter-spacing: var(--letter-spacing);
--shadow-offset-y: var(--shadow-offset-y);
--shadow-offset-x: var(--shadow-offset-x);
--shadow-spread: var(--shadow-spread);
--shadow-blur: var(--shadow-blur);
--shadow-opacity: var(--shadow-opacity);
--color-shadow-color: var(--shadow-color);
--color-destructive-foreground: var(--destructive-foreground);
}
: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: var(--font-sans);
--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.75rem;
--background: oklch(1 0 0);
--foreground: oklch(0.2178 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.2178 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.2178 0 0);
--primary: #fa5252;
--primary-foreground: oklch(1 0 0);
--secondary: oklch(0.2178 0 0);
--secondary-foreground: oklch(1 0 0);
--muted: oklch(0.9674 0.0013 286.3752);
--muted-foreground: oklch(0.5517 0.0138 285.9385);
--accent: oklch(0.955 0.025 25.6509);
--accent-foreground: oklch(0.48 0.18 25.6509);
--destructive: oklch(0.6368 0.2078 25.3313);
--border: oklch(0.9197 0.004 286.3202);
--input: oklch(0.9197 0.004 286.3202);
--ring: #fa5252;
--chart-1: oklch(0.6646 0.2222 25.6509);
--chart-2: oklch(0.2178 0 0);
--chart-3: oklch(0.6231 0.188 259.8145);
--chart-4: oklch(0.6959 0.1491 162.4796);
--chart-5: oklch(0.7686 0.1647 70.0804);
--sidebar: oklch(0.9791 0 0);
--sidebar-foreground: oklch(0.2178 0 0);
--sidebar-primary: #fa5252;
--sidebar-primary-foreground: oklch(1 0 0);
--sidebar-accent: oklch(0.9551 0 0);
--sidebar-accent-foreground: oklch(0.6646 0.2222 25.6509);
--sidebar-border: oklch(0.9276 0.0058 264.5313);
--sidebar-ring: oklch(0.56 0.205 25.6509);
--destructive-foreground: oklch(0.9851 0 0);
--font-sans: "Work Sans", sans-serif;
--font-serif: Georgia, serif;
--font-mono: "JetBrains Mono", monospace;
--shadow-color: #000000;
--shadow-opacity: 0.1;
--shadow-blur: 10px;
--shadow-spread: -2px;
--shadow-offset-x: 0px;
--shadow-offset-y: 4px;
--letter-spacing: -0.02em;
--spacing: 0.25rem;
--shadow-2xs: 0px 4px 10px -2px hsl(0 0% 0% / 0.05);
--shadow-xs: 0px 4px 10px -2px hsl(0 0% 0% / 0.05);
--shadow-sm: 0px 4px 10px -2px hsl(0 0% 0% / 0.1), 0px 1px 2px -3px hsl(0 0% 0% / 0.1);
--shadow: 0px 4px 10px -2px hsl(0 0% 0% / 0.1), 0px 1px 2px -3px hsl(0 0% 0% / 0.1);
--shadow-md: 0px 4px 10px -2px hsl(0 0% 0% / 0.1), 0px 2px 4px -3px hsl(0 0% 0% / 0.1);
--shadow-lg: 0px 4px 10px -2px hsl(0 0% 0% / 0.1), 0px 4px 6px -3px hsl(0 0% 0% / 0.1);
--shadow-xl: 0px 4px 10px -2px hsl(0 0% 0% / 0.1), 0px 8px 10px -3px hsl(0 0% 0% / 0.1);
--shadow-2xl: 0px 4px 10px -2px hsl(0 0% 0% / 0.25);
--tracking-normal: -0.02em;
}
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--ifm-font-family-base);
}
[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.245 0.006 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;
}
/* 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"],
[data-slot="alert-dialog-content"],
[data-slot="dropdown-menu-content"],
[data-slot="select-content"],
[data-slot="popover-content"]
)
: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"],
[data-slot="alert-dialog-content"],
[data-slot="dropdown-menu-content"],
[data-slot="select-content"],
[data-slot="popover-content"]
)
:where(button) {
cursor: pointer;
}
:where(
[data-slot="dialog-portal"],
[data-slot="alert-dialog-content"],
[data-slot="dropdown-menu-content"],
[data-slot="select-content"],
[data-slot="popover-content"]
) {
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__bottom {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 1.25rem;
width: min(100%, 38rem);
margin: 2.5rem auto 0;
padding-top: 2rem;
border-top: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent);
text-align: left !important;
}
.footer__bottom .margin-bottom--sm {
margin: 0 !important;
}
.footer__logo {
display: block;
width: 5.375rem;
height: auto;
transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.footer__bottom a:hover .footer__logo {
transform: translateY(-2px);
}
.footer__copyright {
text-align: left;
}
.footer__brand-copy {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.2rem;
}
.footer__brand-name {
color: var(--foreground);
font-size: 1.125rem;
line-height: 1.25;
letter-spacing: -0.025em;
}
.footer__brand-tagline {
color: color-mix(in srgb, var(--foreground) 78%, transparent);
font-size: 0.875rem;
line-height: 1.45;
}
.footer__copyright span.copyright_text {
color: color-mix(in srgb, var(--foreground) 72%, transparent);
font-size: 0.75rem;
}
@media (max-width: 640px) {
.footer__bottom {
grid-template-columns: 1fr;
justify-items: center;
gap: 0.875rem;
margin-top: 2rem;
padding-top: 1.5rem;
text-align: center !important;
}
.footer__copyright {
text-align: center;
}
.footer__brand-copy {
align-items: center;
}
}
@media (prefers-reduced-motion: reduce) {
.footer__logo {
transition: none;
}
.footer__bottom a:hover .footer__logo {
transform: none;
}
}
.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;
}
/* Keep the primary docs destinations readable before Docusaurus switches to its mobile menu. */
@media (min-width: 997px) and (max-width: 1399px) {
.navbar__inner > .navbar__items > .navbar-item--collapse-first,
.navbar__inner > .navbar__items > .navbar-item--secondary {
display: none;
}
}
@media (min-width: 997px) and (max-width: 1179px) {
.navbar__inner .navbar__title {
display: none;
}
}
/*.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) {
.hover-animation {
animation: none;
}
.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;
}
}
[data-theme="dark"] {
--background: #1b1b1d;
--foreground: oklch(0.9791 0 0);
--card: oklch(0.245 0.006 223.9);
--card-foreground: oklch(0.9791 0 0);
--popover: oklch(0.245 0.006 223.9);
--popover-foreground: oklch(0.9791 0 0);
--primary: #fa5252;
--primary-foreground: oklch(0.15 0.025 25.6509);
--secondary: oklch(0.2739 0.0055 286.0326);
--secondary-foreground: oklch(0.9851 0 0);
--muted: oklch(0.2739 0.0055 286.0326);
--muted-foreground: oklch(0.7118 0.0129 286.0665);
--accent: oklch(0.31 0.055 25.6509);
--accent-foreground: oklch(0.86 0.1 25.6509);
--destructive: oklch(0.3958 0.1331 25.723);
--destructive-foreground: oklch(0.9705 0.0129 17.3797);
--border: oklch(0.2739 0.0055 286.0326);
--input: oklch(0.2739 0.0055 286.0326);
--ring: #fa5252;
--chart-1: oklch(0.6646 0.2222 25.6509);
--chart-2: oklch(0.4419 0.0146 285.7864);
--chart-3: oklch(0.7137 0.1434 254.624);
--chart-4: oklch(0.7729 0.1535 163.2231);
--chart-5: oklch(0.8369 0.1644 84.4286);
--radius: 0.75rem;
--sidebar: oklch(0.2178 0 0);
--sidebar-foreground: oklch(0.9791 0 0);
--sidebar-primary: #fa5252;
--sidebar-primary-foreground: oklch(0.15 0.025 25.6509);
--sidebar-accent: oklch(0.2739 0.0055 286.0326);
--sidebar-accent-foreground: oklch(0.6646 0.2222 25.6509);
--sidebar-border: oklch(0.2739 0.0055 286.0326);
--sidebar-ring: oklch(0.72 0.16 25.6509);
--font-sans: "Work Sans", sans-serif;
--font-serif: Georgia, serif;
--font-mono: "JetBrains Mono", monospace;
--shadow-color: #000000;
--shadow-opacity: 0.5;
--shadow-blur: 20px;
--shadow-spread: -5px;
--shadow-offset-x: 0px;
--shadow-offset-y: 10px;
--letter-spacing: -0.02em;
--spacing: 0.25rem;
--shadow-2xs: 0px 10px 20px -5px hsl(0 0% 0% / 0.25);
--shadow-xs: 0px 10px 20px -5px hsl(0 0% 0% / 0.25);
--shadow-sm: 0px 10px 20px -5px hsl(0 0% 0% / 0.5), 0px 1px 2px -6px hsl(0 0% 0% / 0.5);
--shadow: 0px 10px 20px -5px hsl(0 0% 0% / 0.5), 0px 1px 2px -6px hsl(0 0% 0% / 0.5);
--shadow-md: 0px 10px 20px -5px hsl(0 0% 0% / 0.5), 0px 2px 4px -6px hsl(0 0% 0% / 0.5);
--shadow-lg: 0px 10px 20px -5px hsl(0 0% 0% / 0.5), 0px 4px 6px -6px hsl(0 0% 0% / 0.5);
--shadow-xl: 0px 10px 20px -5px hsl(0 0% 0% / 0.5), 0px 8px 10px -6px hsl(0 0% 0% / 0.5);
--shadow-2xl: 0px 10px 20px -5px hsl(0 0% 0% / 1.25);
}
@layer base {
body {
letter-spacing: var(--tracking-normal);
}
}