/* * Kolleg-tema för LibreChat v0.8.8. * * ⚠️ VERSIONEN AVGÖR FÄRGFORMATET. LibreChat har bytt konvention två gånger: * * v0.8.7 border-color: var(--border-light) * --border-light: #EEEAE2 ← färdig FÄRG * * v0.8.8 border-color: rgb(var(--border-light) / calc(…)) * --border-light: 238 234 226 ← RGB-TRIPLETT * * Varje variabel som LibreChat läser som rgb(var(--x)) måste vara tre heltal * med mellanslag. En hex där gör deklarationen ogiltig, och färgen faller * tillbaka på genomskinligt eller currentColor. Inget syns i konsolen. * * Det har hänt två gånger. 2026-09-19 skrevs temat i triplettform mot ett * utvecklingsbygge medan driften körde v0.8.7: svarta ramar på allt. Vid * provet av v0.8.8 2026-10-06 var det tvärtom: hex-temat gav genomskinliga * dialoger, en osynlig Fortsätt-knapp (vit text utan bakgrund) och ett nästan * oläsligt mörkt läge. * * Kontroll före push: python3 infra/tests/tema-kontroll.py. Den läser hur * LibreChat faktiskt konsumerar varje variabel i .work/LibreChat, som ska stå * på samma tagg som driften (D-026). * * Använder du en variabel själv i den här filen: skriv rgb(var(--x)), aldrig * var(--x) direkt. * * Värdena speglar /design/system/tokens.css, men produkten har den varma * neutralen (#F8F6F2) i stället för webbens kalla papper. Ändra i tokens * först, spegla hit. * * ⚠️ Selektorerna är inte godtyckliga. LibreChat sätter `dark` på . * Ett ljusblock på enbart `:root` (0,1,0) vinner över `.dark` (0,1,0) på * dokumentordning, och mörkt läge blir ljust. Därför undantar ljusblocket * mörkt uttryckligen, och mörkblocket har högre specificitet än LibreChats * `.dark`. v0.8.8 sätter inte längre `gizmo` (sökt i klientkoden 2026-10-06), * men gizmo-selektorerna står kvar: de kostar inget, och * infra/tests/deploy-kontroll.sh letar efter just formen `:root:not(.dark),`. * * Högkontrastläget (LibreChats tillgänglighetsval) skriver sina färger som * inline-stil på och går före den här filen. Det är avsiktligt. * * Samma fälla kostade oss osynliga flikar i adminpanelen. */ :root:not(.dark), .gizmo:not(.dark) { /* Ytor. */ --surface-primary: 248 246 242; /* papper #F8F6F2 */ --surface-primary-alt: 255 255 255; /* yta #FFFFFF */ --surface-primary-contrast: 255 255 255; --surface-secondary: 255 255 255; --surface-secondary-alt: 243 239 231; /* zon 5 #F3EFE7 */ --surface-tertiary: 243 239 231; --surface-tertiary-alt: 236 230 217; /* zon 4 #ECE6D9 */ --surface-chat: 248 246 242; --surface-dialog: 255 255 255; --surface-hover: 236 230 217; /* #ECE6D9 */ --surface-hover-alt: 231 221 203; /* #E7DDCB */ --surface-composer-hover: 236 230 217; --surface-active: 231 221 203; --surface-active-alt: 228 211 180; /* zon 1 #E4D3B4 */ --surface-code: 255 255 255; --surface-qr: 255 255 255; /* QR-koder måste stå på vitt */ --presentation: 248 246 242; --header-primary: 248 246 242; --header-hover: 236 230 217; --header-button-hover: 231 221 203; --chart-widget-surface: 255 255 255; --chart-widget-stroke: 231 225 213; /* Skärmen bakom en dialog. LibreChat lägger på genomskinligheten själv * (bg-surface-overlay/50 till /90), så här står bara kulören: bläck i * stället för LibreChats neutrala grå. */ --surface-overlay: 14 26 36; /* Primärknappen. Två roller i v0.8.8, båda bläck i ljust läge: * surface-submit variant="submit": Fortsätt vid inloggning och i * godkännandepanelen, med text-on-status ovanpå * surface-inverted variant="default": dialogernas bekräfta-knapp, * växlar, valda poster, med text-inverted ovanpå */ --surface-submit: 14 26 36; /* bläck #0E1A24 */ --surface-submit-hover: 27 44 58; /* #1B2C3A */ --surface-inverted: 14 26 36; --surface-inverted-hover: 27 44 58; --text-inverted: 248 246 242; /* Ytor som är ljusa i båda lägena (chip på bild o.d.). */ --surface-fixed: 255 255 255; --surface-fixed-hover: 243 239 231; --text-fixed: 14 26 36; /* Text. */ --text-primary: 14 26 36; /* bläck #0E1A24 */ --text-secondary: 62 80 91; /* mjuk #3E505B */ --text-secondary-alt: 92 110 121; /* dämpad #5C6E79 */ --text-tertiary: 154 148 138; /* #9A948A */ --text-muted: 101 119 128; /* svag #657780, etiketter */ /* Ockra som TEXT är den mörkare varianten #8A5414. Ockran #A8681A ger * 4,18:1 mot papper, under WCAG AA. Samma val som webbens länkar * (web/src/styles/global.css, genomgång 2026-10-05, L29). Ockran står kvar * där den inte bär text: fokusring och märkesfärg. */ --link: 138 84 20; /* #8A5414 */ --link-hover: 127 78 17; /* #7F4E11 */ --link-visited: 138 84 20; /* Kolleg skiljer inte på besökta */ --accent-primary: 138 84 20; /* "Registrera dig", fokuskant i fält */ --accent-primary-hover: 127 78 17; --ring-primary: 168 104 26; /* ockra #A8681A */ --brand-purple: 168 104 26; /* LibreChats lila: delning, modellval */ /* Ramar. Alfavariablerna är 1 här och i mörkt läge. LibreChats `.gizmo` * sätter 0,1–0,25 på svart; det är inte vår palett. */ --border-light: 238 234 226; /* #EEEAE2 */ --border-light-alpha: 1; --border-medium: 231 225 213; /* linje #E7E1D5 */ --border-medium-alpha: 1; --border-medium-alt: 231 225 213; --border-heavy: 213 203 184; /* #D5CBB8 */ --border-heavy-alpha: 1; --border-xheavy: 195 184 162; /* #C3B8A2 */ --border-xheavy-alpha: 1; /* Fel och varning. * * Kolleg hade ingen röd. Den är HÄRLEDD ur ockran: samma ljushet och * mättnad (73 %, 38 %), kulörtonen flyttad från 33 till 8 grader. Den finns * nu i tokens.css som --k-fara. */ --text-destructive: 168 45 26; /* fara #A82D1A */ --surface-destructive: 168 45 26; --surface-destructive-hover: 142 38 22; /* #8E2616 */ --border-destructive: 168 45 26; --text-warning: 138 84 20; /* ockra som text, se ovan */ /* Statusfärgerna (nytt i v0.8.8: aviseringar, märken, felrutor). * * Varje familj har text, -subtle (bakgrund), -border och -strong (yta med * text-on-status ovanpå). Kulören kommer ur tokens.css (--k-klar, --k-info, * --k-fara, --k-varning). Bakgrund och ram är samma kulörton, ljusare. * * Grönt som text är mörkare än --k-klar: #1AA855 ger 2,87:1 mot papper. * #148041 är samma kulörton (145°) och mättnad med ljusheten sänkt till * 29 %, och ger 4,6:1 mot sin bakgrund (uträknat 2026-10-06). */ --status-success: 20 128 65; /* #148041 */ --status-success-subtle: 237 248 241; /* #EDF8F1 */ --status-success-border: 155 212 179; /* #9BD4B3 */ --status-success-strong: 20 128 65; --status-info: 26 109 168; /* info #1A6DA8 */ --status-info-subtle: 235 243 249; /* #EBF3F9 */ --status-info-border: 166 198 221; /* #A6C6DD */ --status-info-strong: 26 109 168; --status-warning: 138 84 20; /* #8A5414 */ --status-warning-subtle: 248 241 231; /* #F8F1E7 */ --status-warning-border: 228 211 180; /* zon 1 #E4D3B4 */ --status-warning-strong: 138 84 20; --status-error: 168 45 26; /* fara #A82D1A */ --status-error-subtle: 251 240 239; /* #FBF0EF */ --status-error-border: 232 183 176; /* #E8B7B0 */ --status-error-strong: 168 45 26; --status-neutral: 62 80 91; --status-neutral-subtle: 243 239 231; --status-neutral-border: 213 203 184; --status-verified: 26 109 168; --text-on-status: 255 255 255; /* Kodblock: färgerna ur samma familj. Allt är minst 4,5:1 mot kodblockets * vita yta. Lila finns inte i tokens.css: den är härledd på samma sätt * som den röda, ockrans mättnad och ljushet med kulörtonen 290°. */ --syntax-text: 14 26 36; --syntax-comment: 101 119 128; /* #657780 */ --syntax-meta: 62 80 91; --syntax-builtin: 138 84 20; /* #8A5414 */ --syntax-keyword: 26 109 168; /* #1A6DA8 */ --syntax-string: 20 128 65; /* #148041 */ --syntax-attr: 144 26 168; /* #901AA8 */ --syntax-title: 168 45 26; /* #A82D1A */ /* Laddningsglimten i "Förbereder …". Grundtonen följer texten. */ --shimmer-base: 14 26 36; --shimmer-dip: 154 148 138; --switch-unchecked: 163 154 138; /* #A39A8A */ /* --series-1 … 8 (diagram) står kvar som LibreChats. Ordningen är * färgblindhetsskyddet, och det är data, inte varumärke. */ } /* --------------------------------------------------------------------------- * Mörkt läge. * * Fram till 2026-09-24 hade chatten inget. Proxyn skrev `color-theme: light` * till localStorage vid varje sidladdning, så växeln i inställningarna gick * inte att använda — valet skrevs över innan appen hann starta. * * Värdena är bläckläget i design/system/tokens.css: bläck som botten, * ytorna stegvis ljusare, ockra-ljus som accent. Samma familj som * adminpanelen, så att en kund som växlar mellan dem ser samma produkt. * * I mörkt läge är de starka ytorna LJUSA (ockra-ljus, ljusröd, ljusblå) och * texten på dem bläck. Vit text på ockra-ljus ger 2,2:1; bläck ger 8,2:1. * Därför är text-on-status och text-inverted bläck här, inte vita. * * ⚠️ Specificiteten måste ligga över ljusblocket och LibreChats `.dark`. * `:root.dark` är 0,2,0 och `html.gizmo.dark` 0,2,1. * ------------------------------------------------------------------------- */ :root.dark, html.gizmo.dark { /* Ytor. */ --surface-primary: 14 26 36; /* bläck #0E1A24 */ --surface-primary-alt: 22 36 47; /* yta #16242F */ --surface-primary-contrast: 22 36 47; --surface-secondary: 22 36 47; --surface-secondary-alt: 27 44 58; /* #1B2C3A */ --surface-tertiary: 27 44 58; --surface-tertiary-alt: 34 56 74; /* #22384A */ --surface-chat: 14 26 36; --surface-dialog: 22 36 47; --surface-hover: 27 44 58; --surface-hover-alt: 34 56 74; --surface-composer-hover: 27 44 58; --surface-active: 34 56 74; --surface-active-alt: 43 71 96; /* #2B4760 */ --surface-code: 22 36 47; --surface-qr: 255 255 255; --presentation: 14 26 36; --header-primary: 14 26 36; --header-hover: 27 44 58; --header-button-hover: 34 56 74; --chart-widget-surface: 22 36 47; --chart-widget-stroke: 31 50 66; --surface-overlay: 4 9 13; /* djupare än bläck, så att dialogen lyfter */ /* Primärknappen: ockra-ljus med bläck ovanpå. */ --surface-submit: 232 163 61; /* ockra-ljus #E8A33D */ --surface-submit-hover: 208 145 47; /* #D0912F */ --surface-inverted: 232 163 61; --surface-inverted-hover: 208 145 47; --text-inverted: 14 26 36; --surface-fixed: 255 255 255; --surface-fixed-hover: 243 239 231; --text-fixed: 14 26 36; /* Text. */ --text-primary: 246 248 248; /* #F6F8F8 */ --text-secondary: 169 188 199; /* #A9BCC7 */ --text-secondary-alt: 143 163 176; /* #8FA3B0 */ --text-tertiary: 115 134 150; /* #738696 */ --text-muted: 162 179 189; /* svag #A2B3BD */ --link: 232 163 61; /* ockra-ljus #E8A33D */ --link-hover: 240 182 92; /* #F0B65C */ --link-visited: 232 163 61; --accent-primary: 232 163 61; --accent-primary-hover: 240 182 92; --ring-primary: 232 163 61; --brand-purple: 232 163 61; /* Ramar. */ --border-light: 27 44 58; /* #1B2C3A */ --border-light-alpha: 1; --border-medium: 31 50 66; /* linje #1F3242 */ --border-medium-alpha: 1; --border-medium-alt: 31 50 66; --border-heavy: 43 71 96; /* #2B4760 */ --border-heavy-alpha: 1; --border-xheavy: 58 90 120; /* #3A5A78 */ --border-xheavy-alpha: 1; /* Samma härledning som den ljusa röda, men från ockra-ljus. */ --text-destructive: 232 84 61; /* fara #E8543D */ --surface-destructive: 232 84 61; --surface-destructive-hover: 201 69 47; /* #C9452F */ --border-destructive: 232 84 61; --text-warning: 232 163 61; /* Status: --k-klar, --k-info och --k-fara i bläckläget. */ --status-success: 61 232 132; /* #3DE884 */ --status-success-subtle: 18 43 29; /* #122B1D */ --status-success-border: 39 104 66; /* #276842 */ --status-success-strong: 61 232 132; --status-info: 61 161 232; /* #3DA1E8 */ --status-info-subtle: 18 36 48; /* #122430 */ --status-info-border: 41 88 122; /* #29587A */ --status-info-strong: 61 161 232; --status-warning: 232 163 61; --status-warning-subtle: 43 33 18; /* #2B2112 */ --status-warning-border: 115 84 38; /* #735426 */ --status-warning-strong: 232 163 61; --status-error: 232 84 61; --status-error-subtle: 46 23 20; /* #2E1714 */ --status-error-border: 122 52 41; /* #7A3429 */ --status-error-strong: 232 84 61; --status-neutral: 169 188 199; --status-neutral-subtle: 27 44 58; --status-neutral-border: 43 71 96; --status-verified: 61 161 232; --text-on-status: 14 26 36; /* Kodblock mot #16242F. */ --syntax-text: 246 248 248; --syntax-comment: 143 163 176; /* #8FA3B0 */ --syntax-meta: 169 188 199; --syntax-builtin: 232 163 61; --syntax-keyword: 61 161 232; --syntax-string: 61 232 132; --syntax-attr: 221 127 240; /* #DD7FF0 */ --syntax-title: 232 84 61; --shimmer-base: 246 248 248; --shimmer-dip: 115 134 150; --switch-unchecked: 58 90 120; /* #3A5A78 */ } /* --------------------------------------------------------------------------- * Form och typsnitt, samma i båda lägena. * * En radie, 5 px (design-system.md). Tailwind härleder md till 3 px och sm * till 1 px ur den. v0.8.8:s egna formvariabler (--theme-control-radius * m.fl.) lämnas orörda: de styr inmatningens och chipens rundning, som är * LibreChats form och inte en färgfråga. * * --theme-font-family är v0.8.8:s typsnittsvariabel (font-theme-ui). Utan den * ritas de komponenter som använder den i Inter. * ------------------------------------------------------------------------- */ :root { --radius: 5px; --theme-font-family: 'IBM Plex Sans', system-ui, sans-serif; } /* --------------------------------------------------------------------------- * LibreChats egna hårdkodade regler. * * Några regler i client/src/style.css skriver färger direkt i stället för att * gå via variablerna. De flesta (kodblockens gamla hljs-färger, delningsvyns * ikoner) syns inte i Kollegs flöden och får vara. De nedan bär ytor. * ------------------------------------------------------------------------- */ /* Sidans botten i mörkt läge. LibreChat sätter rgba(23,23,23) och sedan * rgba(33,33,33) på `.dark body, .dark html` — samma specificitet som vår * regel, men deras stilmall kan laddas efter. */ .dark body, .dark html, html.dark body { background-color: rgb(var(--surface-primary)) !important; } /* Neutrala och sekundära knappar. Deras värden är gråa (66,66,66) och en * grönaktig hover (8,82,78) som inte hör hemma i paletten. */ .dark .btn-neutral { background-color: rgb(var(--surface-primary-alt)); color: rgb(var(--text-primary)); border-color: rgb(var(--border-medium)); } .dark .btn-neutral:hover { background-color: rgb(var(--surface-hover)); } .dark .btn-secondary:hover { background-color: rgb(var(--surface-hover)); border-color: rgb(var(--border-medium)); color: rgb(var(--text-primary)); } /* Inloggningens fält. LibreChat målar fältens bakgrund med en inre skugga på * `.webkit-dark-styles` (mot autofyll): #fff i ljust, #0d0d0d i mörkt. Den * mörka blev en svart fläck mot bläcket. Båda följer nu kortets yta. */ .webkit-dark-styles, .webkit-dark-styles:focus, .dark .webkit-dark-styles, .dark .webkit-dark-styles:focus { -webkit-box-shadow: 0 0 0 50vh rgb(var(--surface-primary-alt)) inset; box-shadow: 0 0 0 50vh rgb(var(--surface-primary-alt)) inset; -webkit-text-fill-color: rgb(var(--text-primary)); } /* --------------------------------------------------------------------------- * Svarens länkar och text. * * Länkarna i svaren går inte via --link. Två lager har egna fasta färger, * uppmätt i v0.8.8 2026-10-06: * * client/src/mobile.css p.whitespace-pre-wrap a, li a #06c * .dark p.whitespace-pre-wrap a, … #52a0ff * Tailwinds typografi .prose a (--tw-prose-links) #0066cc / vitt * * Den första vinner i stycken och listor, den andra överallt annars i ett * svar (rubriker, tabeller). Båda pekas om till temats länkfärg. Samma * selektorer som LibreChats, och vår fil laddas sist, så de vinner på * dokumentordning utan !important. * ------------------------------------------------------------------------- */ p.whitespace-pre-wrap a, li a, .dark p.whitespace-pre-wrap a, .dark li a { color: rgb(var(--link)); } p.whitespace-pre-wrap a:hover, li a:hover, .dark p.whitespace-pre-wrap a:hover, .dark li a:hover { color: rgb(var(--link-hover)); } .prose { --tw-prose-links: rgb(var(--link)); --tw-prose-invert-links: rgb(var(--link)); } /* Märket. Ringen är bläck och försvinner mot mörk botten. * * Märket visas med , så CSS kan inte färga om det, och vi vill inte * offra ljust läge — där ska ink-ringen vara kvar, precis som på webben. * `content: url()` byter hela bilden och är det enda som går utan att röra * appens kod. Stödet är kontrollerat i webbläsaren. */ .dark img[src$="logo.svg"] { content: url("/kolleg/logo-invers.svg"); } /* --------------------------------------------------------------------------- * Inloggning och registrering: papper bakom, vitt kort. * * v0.8.8 ritar både sidan och kortet med bg-surface-primary (AuthLayout.tsx). * I v0.8.7 var de hårdkodade `bg-white`, och vi målade sidan papper. Nu får * sidan papper av variabeln, och kortet lyfts till ytan (vitt i ljust, * #16242F i mörkt) så att det syns som ett kort. * * `.w-authPageWidth` finns bara på kortet i AuthLayout (sökt 2026-10-06). * De gamla selektorerna `.min-h-screen.bg-white` träffar inget i v0.8.8. * * Två saker till, båda uppmätta i v0.8.7 och fortfarande sanna: * * 1. ETIKETTCHIPPET. Den flytande etiketten har `bg-surface-primary`, alltså * papper, ovanpå ett vitt fält. Den ska bära kortets färg: dess enda * uppgift är att bryta fältets kantlinje när den flyttar upp. * * 2. RADIEN. Fält och Fortsätt har `rounded-2xl`, alltså 16 px, medan * design-system.md säger 5 px på kontroller. Klassen är hårdkodad i * markupen, så `--radius` når den inte. * ------------------------------------------------------------------------- */ .w-authPageWidth { background-color: rgb(var(--surface-primary-alt)); } .w-authPageWidth label.bg-surface-primary { background-color: rgb(var(--surface-primary-alt)); } /* Fältets egen bakgrund. Den är bg-surface-primary (papper) och syns bara i * fokus: LibreChat stänger av box-shadow på fält i fokus när man klickat * (html[data-input-modality="pointer"] …:focus, 0,2,1), och då försvinner * den inre skuggan som annars målar fältet. Uppmätt 2026-10-06: en papperston * ruta mitt i det vita fältet, och en bläckruta i mörkt läge. */ .w-authPageWidth input.rounded-2xl { background-color: rgb(var(--surface-primary-alt)); } /* Fältens kant. --border-light (#EEEAE2) ger 1,2:1 mot det vita kortet och * fältet försvinner. Kortet bär den tyngre ramen. I fokus gäller LibreChats * egen (accent-primary, alltså ockra), därav :not(:focus). */ .w-authPageWidth input.rounded-2xl:not(:focus) { border-color: rgb(var(--border-heavy)); } .w-authPageWidth input.rounded-2xl, .w-authPageWidth button.rounded-2xl { border-radius: 5px; } /* --------------------------------------------------------------------------- * Typografi. Samma typsnitt som webben. * * @font-face-reglerna ligger i /kolleg/typsnitt.css och länkas separat av * proxyn. De får INTE @import:eras hit: enligt specifikationen måste @import * stå först i filen, så mitt i den ignoreras den utan felmeddelande. * ------------------------------------------------------------------------- */ body, input, textarea, button, select, [contenteditable='true'] { font-family: 'IBM Plex Sans', system-ui, sans-serif; } h1, h2, h3 { font-family: 'Space Grotesk', system-ui, sans-serif; letter-spacing: -0.03em; } /* --------------------------------------------------------------------------- * Märket i bakgrunden. * * `.bg-presentation` sitter på många element. Två av dem är stora och * nästlade: * * .grow ytterhöljet – fyller alltid hela höjden * .flex-1 meddelandeytan – slutar ovanför inmatningsfältet i ett samtal, * men fyller hela höjden i den tomma vyn * * Ringen låg först på `.flex-1`. Det såg rätt ut i tomma vyn men klippte * märket rakt av med en vågrät kant så fort ett samtal öppnades. Den ligger * nu på `.grow`, som alltid fyller höjden. Selektorerna träffar fortfarande i * v0.8.8 (Presentation.tsx, ChatView.tsx, kontrollerat 2026-10-06). * * Två lager ovanpå måste göras genomskinliga, annars målar de sitt eget * ogenomskinliga papper över bilden — och det var exakt den vågräta kanten: * * .flex-1 meddelandeytan * [view-transition-name:chat-form] inmatningsfältets omslag, som är * FULLBRETT och alltså täcker hela nederkanten * * Båda ligger på samma papperston som `.grow`, så genomskinligheten syns inte * någon annanstans än att märket blir helt. * * Tonerna är avsiktligt nästan omärkliga. Ett första försök använde bläck och * full ockra: då blev märket en illustration mitt i chatten i stället för en * struktur bakom den. Samma geometri som i /strategy/design-system.md — * öppningen är ~21 % av omkretsen, vriden -62 grader. * * Placering och skala (Erik 2026-09-17: "uppe i hörnet, mycket större, men * svagare"). Märket är 1 500 px men förskjutet 640 px ut i det övre högra * hörnet, så att bara en bågsvep och kanten av pricken syns. Förskjutningen * är nödvändig: pricken sitter alltid i märkets mitt, så ett stort märke utan * förskjutning lägger en beige skiva mitt i lästexten. Nere till höger låg det * tidigare — men där konkurrerade det med inmatningsfältet. * ------------------------------------------------------------------------- */ .bg-presentation.grow { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20140%20140%27%3E%3Cg%20stroke-width%3D%275%27%20stroke-linecap%3D%27round%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M70%2070%20L51.08%2039.72%27%20stroke%3D%27%23F4F1EA%27%2F%3E%3Cpath%20d%3D%27M70%2070%20L105.3%2069%27%20stroke%3D%27%23F4F1EA%27%2F%3E%3Cpath%20d%3D%27M70%2070%20L53.64%20101.3%27%20stroke%3D%27%23F4F1EA%27%2F%3E%3Cpath%20d%3D%27M70%2070%20L40.84%2070.89%27%20stroke%3D%27%23F4F1EA%27%2F%3E%3Cpath%20d%3D%27M70%2070%20L85.58%2094.93%27%20stroke%3D%27%23F4F1EA%27%2F%3E%3Cpath%20d%3D%27M70%2070%20L84.81%2042.18%27%20stroke%3D%27%23F3EEE3%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: right -640px top -640px; background-size: 1500px 1500px; } /* Samma märke i mörkt läge. Tonerna måste vändas: de ljusa * (#E4EBEF / #F1EBE1) blir nästan vita mot bläcket och märket slutar vara en * struktur bakom texten — uppmätt såg det ut som en trasig illustration tvärs * över rubriken. Här ligger de i stället strax ovanför bakgrunden. */ .dark .bg-presentation.grow { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20140%20140%27%3E%3Cg%20stroke-width%3D%275%27%20stroke-linecap%3D%27round%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M70%2070%20L51.08%2039.72%27%20stroke%3D%27%2312202C%27%2F%3E%3Cpath%20d%3D%27M70%2070%20L105.3%2069%27%20stroke%3D%27%2312202C%27%2F%3E%3Cpath%20d%3D%27M70%2070%20L53.64%20101.3%27%20stroke%3D%27%2312202C%27%2F%3E%3Cpath%20d%3D%27M70%2070%20L40.84%2070.89%27%20stroke%3D%27%2312202C%27%2F%3E%3Cpath%20d%3D%27M70%2070%20L85.58%2094.93%27%20stroke%3D%27%2312202C%27%2F%3E%3Cpath%20d%3D%27M70%2070%20L84.81%2042.18%27%20stroke%3D%27%2318212A%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } .bg-presentation.flex-1, .bg-presentation[class*='view-transition-name:chat-form'] { background-color: transparent; } /* Svaren ska kunna vila mot ytan i stället för mot en ram. */ .bg-presentation .prose { max-width: 74ch; } /* --------------------------------------------------------------------------- * Registreringen: inget användarnamn. * * Fältet är redan VALFRITT i LibreChat — klientens validering saknar * `required` (jämför e-postfältet som har det), serverschemat är * `.optional().nullable()` och tom sträng blir null. Verifierat 2026-09-19 * genom att registrera utan det: 200, konto skapat. Fortfarande dolt i * v0.8.8 (provat 2026-10-06). * * Men det syns som vilket fält som helst, och ett formulär som frågar efter * användarnamn 2026 känns föråldrat. E-postadressen är identiteten. * * Döljs därför i gränssnittet i stället för att tas bort ur koden — vi rör * inte LibreChat. Selektorn följer fältets egen struktur: *
* ------------------------------------------------------------------------- */ .mb-4:has(> .relative > #username) { display: none; } /* --------------------------------------------------------------------------- * Inga knappar för webbsökning och filsökning (D-055). * * Erik 2026-10-09: "lite föråldrat att man ska behöva markera när man vill * ladda upp en fil och när den ska söka på webben". Varje uppgift slår på * båda (webSearch och fileSearch i librechat.yaml), och servern läser * uppgiften före knappen (packages/api/src/agents/load.ts). Knapparna gör * alltså ingenting, och en avslagen "Sök" vore ett löfte om att inget söks. * Varje sökning frågar i stället i godkännanderutan. * * De kan inte stängas av i konfigurationen: interface.webSearch: false * stänger av sökningen på servern också (rolePermissions.ts, v0.8.8). * Selektorerna följer klientens egen struktur (v0.8.8, uppmätt 2026-10-09): * * inmatningsraden