/* ========================================================================= Tooq global theme overrides — loaded AFTER main.css. Retunes the daisyUI "night" theme from a blue base to a near-black, green-neutral base with the Tooq brand green as the primary accent, and polishes the chrome (topbar search, sidebar active state, TOC). Only affects the dark theme; the light theme is untouched. ========================================================================= */ [data-theme="night"] { --color-base-100: oklch(21% 0.02 260); --color-base-200: oklch(18% 0.02 260); --color-base-300: oklch(15% 0.02 260); --color-base-content: oklch(90% 0.012 255); --color-primary: oklch(61% 0.135 258); --color-primary-content: oklch(22% 0.05 258); --color-accent: oklch(70% 0.11 240); --color-accent-content: oklch(18% 0.05 240); } /* Light theme (lofi): refined near-white surfaces, dark-blue text, blue accent (so it follows the identity instead of default near-black + dark background). */ [data-theme="lofi"] { --color-base-100: oklch(99% 0.003 255); --color-base-200: oklch(97% 0.004 255); --color-base-300: oklch(94% 0.005 255); --color-base-content: oklch(26% 0.02 258); --color-primary: oklch(55% 0.16 258); --color-primary-content: oklch(99% 0 0); } /* Beat the theme's inline dark background on in light mode. */ html[data-theme="lofi"], [data-theme="lofi"] body { background-color: oklch(99% 0.003 255) !important; } /* Page ground matches base-100 exactly (covers overscroll / FOUC edges). Force it on too, with !important, so it beats the theme's inline background-color (get_theme_color) even if the template wasn't rebuilt. */ html[data-theme="night"] { background-color: oklch(21% 0.02 260) !important; } [data-theme="night"] body { background-color: oklch(21% 0.02 260) !important; /* The theme paints a blue slate gradient here (linear-gradient #0f172a→#1e293b); remove it so the body ground is the flat green-charcoal, not blue. */ background-image: none !important; } /* Topbar: solid dark green-charcoal instead of a blurred window onto the ground */ [data-theme="night"] .navbar { background-color: color-mix(in oklch, var(--color-base-100) 90%, transparent) !important; } /* ---- Topbar (navbar) ------------------------------------------------- */ /* Neutralize the blue→purple glow behind the search box (inline style → needs !important) */ [data-theme="night"] .navbar label[for="search-modal"] > div[class*="absolute"] { background: linear-gradient(to right, oklch(68% 0.17 152 / 0.55), oklch(70% 0.15 175 / 0.35)) !important; opacity: 0.16 !important; } /* Search field background: neutral dark instead of slate-blue (#1f2937) */ [data-theme="night"] .header-search-bg { background-color: oklch(19% 0.006 158) !important; } /* ---- Sidebar --------------------------------------------------------- */ /* Active item: green tint + accent rail instead of flat grey */ #sidebar .menu .bg-gray-500\/15 { background-color: color-mix(in oklch, var(--color-primary) 13%, transparent) !important; box-shadow: inset 2px 0 0 var(--color-primary); border-radius: 6px; } #sidebar .menu a:hover { background-color: color-mix(in oklch, var(--color-base-content) 8%, transparent); } /* Slightly tighter, calmer sidebar typography */ #sidebar .menu :where(a, summary) { font-size: 0.875rem; } /* ---- Right "Nesta página" TOC --------------------------------------- */ /* Fix the cut-off: constrain height and let it scroll independently */ .toc-sticky { max-height: calc(100vh - 6rem); overflow-y: auto; scrollbar-width: thin; } .toc-link:hover { color: var(--color-primary) !important; } .toc-link.active, .toc-menu .active > .toc-link, .toc-menu li[aria-current] > .toc-link { color: var(--color-primary) !important; font-weight: 600; } /* ---- Topbar (custom layout; does NOT rely on Tailwind utilities that may be absent from the theme's fixed main.css build) -------------- */ .tq-navbar { padding-left: 14px; padding-right: 14px; } .tq-nav-left { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; } .tq-nav-right { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; } .tq-logo-link { display: flex; align-items: center; flex: 0 0 auto; } .tq-logo-link:hover { opacity: .8; } .tq-logo { height: 22px; width: auto; } .tq-sep { opacity: .3; user-select: none; } .tq-switcher-btn { font-weight: 500 !important; text-transform: none; } .tq-dropdown-menu { min-width: 230px; background: var(--color-base-100); border: 1px solid rgba(130, 140, 130, 0.18); border-radius: 12px; box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.65); } /* Search box (outlined, filled) + icon buttons — like the style proposal */ .tq-search { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 12px; min-width: 200px; max-width: 300px; background: color-mix(in oklch, var(--color-base-content) 5%, transparent); border: 1px solid rgba(130, 140, 130, 0.2); border-radius: 8px; color: color-mix(in oklch, var(--color-base-content) 55%, transparent); font-size: 13px; cursor: pointer; transition: border-color .15s, color .15s; } .tq-search:hover { border-color: rgba(130, 140, 130, 0.4); color: var(--color-base-content); } .tq-search .tq-search-txt { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tq-kbd { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; background: color-mix(in oklch, var(--color-base-content) 10%, transparent); border: 1px solid rgba(130, 140, 130, 0.25); border-radius: 4px; padding: 1px 6px; color: color-mix(in oklch, var(--color-base-content) 60%, transparent); } .tq-icon-btn { width: 34px; height: 34px; display: inline-grid; place-items: center; background: color-mix(in oklch, var(--color-base-content) 5%, transparent); border: 1px solid rgba(130, 140, 130, 0.2); border-radius: 8px; color: color-mix(in oklch, var(--color-base-content) 70%, transparent); cursor: pointer; transition: border-color .15s, color .15s; } .tq-icon-btn:hover { border-color: rgba(130, 140, 130, 0.4); color: var(--color-base-content); } /* Sidebar — collapsible product groups + nested sections */ .tq-side { padding: 14px 12px 48px; display: flex; flex-direction: column; gap: 2px; } /* Product group (collapsible) */ .tq-side-prod { margin-bottom: 4px; } .tq-side-prod > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 7px; transition: background .15s; } .tq-side-prod > summary::-webkit-details-marker { display: none; } .tq-side-prod > summary:hover { background: color-mix(in oklch, var(--color-base-content) 5%, transparent); } .tq-side-prodlink { flex: 1; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; color: color-mix(in oklch, var(--color-base-content) 44%, transparent); text-decoration: none; } .tq-side-prodlink:hover { color: color-mix(in oklch, var(--color-base-content) 80%, transparent); text-decoration: none; } .tq-side-prodlink.active { color: var(--color-primary); } .tq-chev { width: 12px; height: 12px; flex: 0 0 auto; opacity: .55; transition: transform .18s; } .tq-side-prod[open] > summary .tq-chev { transform: rotate(90deg); } .tq-side-prodbody { padding: 2px 0 8px 10px; margin-left: 4px; border-left: 1px solid color-mix(in oklch, var(--color-base-content) 11%, transparent); display: flex; flex-direction: column; gap: 1px; } /* Sub-section (collapsible) */ .tq-side-sub { display: flex; flex-direction: column; } .tq-side-sub > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: 7px; transition: background .15s; } .tq-side-sub > summary::-webkit-details-marker { display: none; } .tq-side-sub > summary:hover { background: color-mix(in oklch, var(--color-base-content) 6%, transparent); } .tq-side-sublink { flex: 1; font-size: 13.5px; color: color-mix(in oklch, var(--color-base-content) 66%, transparent); text-decoration: none; } .tq-side-sublink:hover { color: var(--color-base-content); text-decoration: none; } .tq-side-sublink.active { color: var(--color-primary); font-weight: 500; } .tq-side-sub[open] > summary .tq-chev { transform: rotate(90deg); } .tq-side-subbody { padding-left: 9px; display: flex; flex-direction: column; gap: 1px; } /* Leaf items */ .tq-side-item { display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: 7px; font-size: 13.5px; line-height: 1.3; text-decoration: none; color: color-mix(in oklch, var(--color-base-content) 66%, transparent); transition: color .15s, background .15s; } .tq-side-item:hover { color: var(--color-base-content); background: color-mix(in oklch, var(--color-base-content) 6%, transparent); text-decoration: none; } .tq-side-item.active { color: var(--color-base-content); background: color-mix(in oklch, var(--color-primary) 12%, transparent); box-shadow: inset 2px 0 0 var(--color-primary); } .tq-side-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .5; flex: 0 0 auto; } .tq-side-item.active .tq-side-dot { background: var(--color-primary); opacity: 1; } .tq-side-item-sub { margin-left: 15px; font-size: 13px; } .tq-side-soon { margin-left: auto; font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: #b9863f; border: 1px solid rgba(185, 134, 63, .4); border-radius: 4px; padding: 1px 5px; } .prose { font-size: 1.05rem; line-height: 1.72; } .prose p { margin-top: 0.95em; margin-bottom: 0.95em; } .prose h2 { margin-top: 1.95em; margin-bottom: 0.55em; font-size: 1.42rem; font-weight: 650; letter-spacing: -0.01em; } .prose h3 { margin-top: 1.55em; margin-bottom: 0.4em; font-size: 1.16rem; font-weight: 620; } .prose ul, .prose ol { margin-top: 0.9em; margin-bottom: 0.9em; } .prose li { margin-top: 0.32em; margin-bottom: 0.32em; } .tq .arrow svg, .tq .go svg, .tq-btn svg, .tq .start .arrow svg, .nav-button svg { stroke-width: 1.75; } .tq-eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--color-primary); margin: 0 0 4px; } .tq-eyebrow + h2, .tq-eyebrow + h3 { margin-top: .25em; } /* Inline parameter chip — highlighted keyword, usable in prose and in cards */ .tq-param { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.86em; color: var(--color-primary); background: color-mix(in oklch, var(--color-primary) 12%, transparent); border: 1px solid color-mix(in oklch, var(--color-primary) 30%, transparent); border-radius: 5px; padding: 1px 6px; white-space: nowrap; } .nav-button { display: inline-flex !important; width: auto !important; min-height: 0 !important; padding: 8px 13px !important; border-radius: 8px !important; } .nav-button-content { flex-direction: row !important; align-items: center !important; gap: 7px !important; } .nav-button-direction { display: inline-flex !important; align-items: center !important; gap: 6px !important; } .nav-button-label { font-size: 12px !important; } .nav-button-title { font-size: 13.5px !important; line-height: 1.2 !important; margin: 0 !important; } .nav-button svg { width: 14px !important; height: 14px !important; } .next-nav-item { display: flex; justify-content: flex-end; } /* Hide the empty prev/next nav on the home hub */ main:has(.tq-home) > nav { display: none !important; } /* Compact the topbar early enough that the logo + switcher + search never overlap. Below this width: hide the product switcher, collapse search to an icon, shrink the logo. */ @media (max-width: 820px) { .tq-hide-sm { display: none !important; } .tq-search { min-width: 0; max-width: none; width: 34px; padding: 0; gap: 0; justify-content: center; } .tq-logo { height: 20px; } } @media (max-width: 400px) { .tq-logo { height: 18px; } } /* ---- Links in prose content (real markdown links only; component links like .tq-btn / .product / .start style themselves) ---------------- */ .prose a:not(.btn):not(.nav-button):not(.start):not(.tq-btn):not(.product):not(.hub-link):not(.tq-side-item) { color: var(--color-primary); text-decoration-color: color-mix(in oklch, var(--color-primary) 45%, transparent); }