/* Made by Rainnny <3 */ .chroma { background-color: var(--color-code-bg); } .chroma .lntd { vertical-align: top; border: 0; margin: 0; padding: 0; } .chroma .lntable { border-spacing: 0; border: 0; width: auto; margin: 0; padding: 0; display: block; overflow: auto; } .chroma .hl { width: 100%; display: block; } .chroma .lnt, .chroma .ln { margin-right: 0.4em; padding: 0 0.4em; } .chroma .gs { font-weight: var(--font-weight-semibold); } .chroma .gl { text-decoration: underline; } .chroma .bp { color: #fabd2f; } .chroma .c, .chroma .c1, .chroma .ch, .chroma .cm { color: #777e94; } .chroma .cp { color: #8ec07c; } .chroma .cpf { color: #79c0ff; } .chroma .cs { color: #9075cd; } .chroma .dl { color: #79c0ff; } .chroma .gd { color: #fff; background-color: #5f3737; } .chroma .ge { color: #ddee30; } .chroma .gh { color: #ffaa10; } .chroma .gi { color: #fff; background-color: #3a523a; } .chroma .go { color: #777e94; } .chroma .gp { color: #ebdbb2; } .chroma .gr { color: #f43; } .chroma .gs { color: #ebdbb2; } .chroma .gt { color: #7ee787; } .chroma .gu { color: #a5d6ff; } .chroma .il { color: #79c0ff; } .chroma .k { color: #ff7b72; } .chroma .kc { color: #79c0ff; } .chroma .kd { color: #ff7b72; } .chroma .kn { color: #ff7b72; } .chroma .kp { color: #5f8700; } .chroma .kr { color: #7ee787; } .chroma .kt { color: #ff7b72; } .chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .mo { color: #79c0ff; } .chroma .n { color: #c9d1d9; } .chroma .na { color: #d2a8ff; } .chroma .nb { color: #a5d6ff; } .chroma .nc { color: #e6edf3; } .chroma .nd { color: #79c0ff; } .chroma .ne { color: #7ee787; } .chroma .nf, .chroma .ni { color: #d2a8ff; } .chroma .nl { color: #7ee787; } .chroma .nn { color: #e6edf3; } .chroma .no { color: #79c0ff; } .chroma .nt { color: #7ee787; } .chroma .nv { color: #ebdbb2; } .chroma .nx { color: #b6bac5; } .chroma .o { color: #7ee787; } .chroma .ow { color: #5f8700; } .chroma .p { color: #d2d4db; } .chroma .s, .chroma .s1, .chroma .s2 { color: #a5d6ff; } .chroma .sa { color: #79c0ff; } .chroma .sb { color: #a5d6ff; } .chroma .sc { color: #79c0ff; } .chroma .sd { color: #777e94; } .chroma .se { color: #7ee787; } .chroma .sh { color: #79c0ff; } .chroma .si { color: #ffaa10; } .chroma .sr { color: #9075cd; } .chroma .ss { color: #7ee787; } .chroma .sx { color: #ffaa10; } .chroma .vc { color: #7ee787; } .chroma .vg, .chroma .vi { color: #ffaa10; } .chroma .w { color: #7f8699; } .CodeMirror.cm-s-default .cm-property, .CodeMirror.cm-s-paper .cm-property { color: #a0cc75; } .CodeMirror.cm-s-default .cm-header, .CodeMirror.cm-s-paper .cm-header { color: #9daccc; } .CodeMirror.cm-s-default .cm-quote, .CodeMirror.cm-s-paper .cm-quote { color: #090; } .CodeMirror.cm-s-default .cm-keyword, .CodeMirror.cm-s-paper .cm-keyword { color: #cc8a61; } .CodeMirror.cm-s-default .cm-atom, .CodeMirror.cm-s-paper .cm-atom { color: #ef5e77; } .CodeMirror.cm-s-default .cm-number, .CodeMirror.cm-s-paper .cm-number { color: #ff5656; } .CodeMirror.cm-s-default .cm-def, .CodeMirror.cm-s-paper .cm-def { color: #e4e4e4; } .CodeMirror.cm-s-default .cm-variable-2, .CodeMirror.cm-s-paper .cm-variable-2 { color: #00bdbf; } .CodeMirror.cm-s-default .cm-variable-3, .CodeMirror.cm-s-paper .cm-variable-3 { color: #085; } .CodeMirror.cm-s-default .cm-comment, .CodeMirror.cm-s-paper .cm-comment { color: #8e9ab3; } .CodeMirror.cm-s-default .cm-string, .CodeMirror.cm-s-paper .cm-string { color: #a77272; } .CodeMirror.cm-s-default .cm-string-2, .CodeMirror.cm-s-paper .cm-string-2 { color: #f50; } .CodeMirror.cm-s-default .cm-meta, .CodeMirror.cm-s-paper .cm-meta, .CodeMirror.cm-s-default .cm-qualifier, .CodeMirror.cm-s-paper .cm-qualifier { color: #ffb176; } .CodeMirror.cm-s-default .cm-builtin, .CodeMirror.cm-s-paper .cm-builtin { color: #b7c951; } .CodeMirror.cm-s-default .cm-bracket, .CodeMirror.cm-s-paper .cm-bracket { color: #997; } .CodeMirror.cm-s-default .cm-tag, .CodeMirror.cm-s-paper .cm-tag { color: #f1d273; } .CodeMirror.cm-s-default .cm-attribute, .CodeMirror.cm-s-paper .cm-attribute { color: #bfcc70; } .CodeMirror.cm-s-default .cm-hr, .CodeMirror.cm-s-paper .cm-hr { color: #999; } .CodeMirror.cm-s-default .cm-url, .CodeMirror.cm-s-paper .cm-url { color: #c5cfd0; } .CodeMirror.cm-s-default .cm-link, .CodeMirror.cm-s-paper .cm-link { color: #d8c792; } .CodeMirror.cm-s-default .cm-error, .CodeMirror.cm-s-paper .cm-error { color: #dbdbeb; } :root { --is-dark-theme: true; /* Nord primary: nord10 #5E81AC */ --color-primary: #5E81AC; --color-primary-contrast: #ECEFF4; --color-primary-dark-1: #81A1C1; --color-primary-dark-2: #88C0D0; --color-primary-dark-3: #8FBCBB; --color-primary-dark-4: #a1bbcd; --color-primary-dark-5: #D8DEE9; --color-primary-dark-6: #E5E9F0; --color-primary-dark-7: #ECEFF4; --color-primary-light-1: #5E81AC; --color-primary-light-2: #4e6f96; --color-primary-light-3: #3e5c80; --color-primary-light-4: #2e4a6a; --color-primary-light-5: #243a54; --color-primary-light-6: #1a2a3e; --color-primary-light-7: #101a28; --color-primary-alpha-10: #5E81AC19; --color-primary-alpha-20: #5E81AC33; --color-primary-alpha-30: #5E81AC4b; --color-primary-alpha-40: #5E81AC66; --color-primary-alpha-50: #5E81AC80; --color-primary-alpha-60: #5E81AC99; --color-primary-alpha-70: #5E81ACb3; --color-primary-alpha-80: #5E81ACcc; --color-primary-alpha-90: #5E81ACe1; --color-primary-hover: var(--color-primary-light-1); --color-primary-active: var(--color-primary-light-2); /* Nord secondary: nord0-3 */ --color-secondary: #3B4252; --color-secondary-dark-1: #4C566A; --color-secondary-dark-2: #5b6273; --color-secondary-dark-3: #6d7486; --color-secondary-dark-4: #7f8699; --color-secondary-dark-5: #8c93a4; --color-secondary-dark-6: #9aa0af; --color-secondary-dark-7: #a8adba; --color-secondary-dark-8: #c4c7d0; --color-secondary-dark-9: #D8DEE9; --color-secondary-dark-10: #E5E9F0; --color-secondary-dark-11: #ECEFF4; --color-secondary-dark-12: #E5E9F0; --color-secondary-dark-13: #ECEFF4; --color-secondary-light-1: #3B4252; --color-secondary-light-2: #2E3440; --color-secondary-light-3: #242933; --color-secondary-light-4: #1a1e26; --color-secondary-alpha-10: #3B4252; --color-secondary-alpha-20: #3B425233; --color-secondary-alpha-30: #3B42524b; --color-secondary-alpha-40: #3B425266; --color-secondary-alpha-50: #3B425280; --color-secondary-alpha-60: #3B425299; --color-secondary-alpha-70: #3B4252b3; --color-secondary-alpha-80: #3B4252cc; --color-secondary-alpha-90: #3B4252e1; /* Nord accent colors */ --color-red: #BF616A; --color-orange: #D08770; --color-yellow: #EBCB8B; --color-olive: #A3BE8C; --color-green: #A3BE8C; --color-teal: #8FBCBB; --color-blue: #5E81AC; --color-violet: #B48EAD; --color-purple: #B48EAD; --color-pink: #BF616A; --color-brown: #D08770; --color-black: #2E3440; --color-grey: #4C566A; --color-gold: #EBCB8B; --color-white: #ECEFF4; --color-red-light: #d08088; --color-orange-light: #dca08e; --color-yellow-light: #f0d8a8; --color-olive-light: #b5cca0; --color-green-light: #b5cca0; --color-teal-light: #a8d0cf; --color-blue-light: #81A1C1; --color-violet-light: #c4a6be; --color-purple-light: #c4a6be; --color-pink-light: #d08088; --color-brown-light: #dca08e; --color-black-light: #4C566A; --color-red-dark-1: #a9545c; --color-orange-dark-1: #b87563; --color-yellow-dark-1: #d4b577; --color-olive-dark-1: #8da877; --color-green-dark-1: #8da877; --color-teal-dark-1: #7aa6a5; --color-blue-dark-1: #4e6f96; --color-violet-dark-1: #9e7a98; --color-purple-dark-1: #9e7a98; --color-pink-dark-1: #a9545c; --color-brown-dark-1: #b87563; --color-black-dark-1: #3B4252; --color-red-dark-2: #93494f; --color-orange-dark-2: #a06656; --color-yellow-dark-2: #bda064; --color-olive-dark-2: #779264; --color-green-dark-2: #779264; --color-teal-dark-2: #65908f; --color-blue-dark-2: #3e5c80; --color-violet-dark-2: #886882; --color-purple-dark-2: #886882; --color-pink-dark-2: #93494f; --color-brown-dark-2: #a06656; --color-black-dark-2: #2E3440; --color-console-bg: #111; --color-ansi-black: var(--color-black); --color-ansi-red: var(--color-red); --color-ansi-green: var(--color-green); --color-ansi-yellow: var(--color-yellow); --color-ansi-blue: var(--color-blue); --color-ansi-magenta: var(--color-pink); --color-ansi-cyan: var(--color-teal); --color-ansi-white: var(--color-console-fg-subtle); --color-ansi-bright-black: var(--color-black-light); --color-ansi-bright-red: var(--color-red-light); --color-ansi-bright-green: var(--color-green-light); --color-ansi-bright-yellow: var(--color-yellow-light); --color-ansi-bright-blue: var(--color-blue-light); --color-ansi-bright-magenta: var(--color-pink-light); --color-ansi-bright-cyan: var(--color-teal-light); --color-ansi-bright-white: var(--color-console-fg); --color-grey: #4C566A; --color-grey-light: #D8DEE9; --color-gold: #EBCB8B; --color-white: #ECEFF4; --color-diff-removed-word-bg: #5a3035; --color-diff-added-word-bg: #3a5038; --color-diff-removed-row-bg: #3d2a2d; --color-diff-moved-row-bg: #4a4430; --color-diff-added-row-bg: #2d3a2a; --color-diff-removed-row-border: #BF616A44; --color-diff-moved-row-border: #EBCB8B66; --color-diff-added-row-border: #A3BE8C44; --color-diff-inactive: #3B4252; --color-error-border: #BF616A; --color-error-bg: #3d2a2d; --color-error-bg-active: #5a3539; --color-error-bg-hover: #4a2f33; --color-error-text: #d08088; --color-success-border: #A3BE8C; --color-success-bg: #2d3a2a; --color-success-text: #A3BE8C; --color-warning-border: #EBCB8B; --color-warning-bg: #3a3728; --color-warning-text: #EBCB8B; --color-info-border: #5E81AC; --color-info-bg: #2a3444; --color-info-text: #81A1C1; --color-red-badge: #BF616A; --color-red-badge-bg: #BF616A1a; --color-red-badge-hover-bg: #BF616A4d; --color-green-badge: #A3BE8C; --color-green-badge-bg: #A3BE8C1a; --color-green-badge-hover-bg: #A3BE8C4d; --color-yellow-badge: #EBCB8B; --color-yellow-badge-bg: #EBCB8B1a; --color-yellow-badge-hover-bg: #EBCB8B4d; --color-orange-badge: #D08770; --color-orange-badge-bg: #D087701a; --color-orange-badge-hover-bg: #D087704d; --color-git: #BF616A; --color-body: #000; --color-box-header: #111; --color-box-body: #111; --color-box-body-highlight: #1a1a1a; --color-text-dark: #ECEFF4; --color-text: #D8DEE9; --color-text-light: #b0b8c8; --color-text-light-1: #8892a2; --color-text-light-2: #7a8494; --color-text-light-3: #6c7686; --color-footer: #000; --color-timeline: #4C566A; --color-input-text: #D8DEE9; --color-input-background: #1a1a1a; --color-input-toggle-background: #222; --color-input-border: #1a1a1a; --color-input-border-hover: #5E81AC; --color-header-wrapper: transparent; --color-header-wrapper-transparent: transparent; --color-light: #00000028; --color-light-mimic-enabled: rgba( 0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)) ); --color-light-border: #ffffff28; --color-hover: #ffffff19; --color-active: #ffffff24; --color-menu: #111; --color-card: #000; --color-markup-table-row: #ffffff06; --color-markup-code-block: #ffffff16; --color-button: #1a1a1a; --color-code-bg: #111; --color-code-sidebar-bg: #1a1a1a; --color-shadow: #00000060; --color-secondary-bg: #111; --color-text-focus: #ECEFF4; --color-expand-button: #4C566A; --color-placeholder-text: #6c7686; --color-editor-line-highlight: var(--color-primary-light-5); --color-project-board-bg: var(--color-secondary-light-2); --color-caret: var(--color-text); --color-reaction-bg: #ffffff12; --color-reaction-hover-bg: var(--color-primary-light-4); --color-reaction-active-bg: var(--color-primary-light-5); --color-tooltip-text: #fff; --color-tooltip-bg: #000000f0; --color-nav-bg: transparent; --color-nav-hover-bg: rgba(255,255,255,0.1); --color-label-text: #D8DEE9; --color-label-bg: #4C566A4b; --color-label-hover-bg: #4C566Aa0; --color-label-active-bg: #4C566A; --color-accent: var(--color-primary-light-1); --color-small-accent: var(--color-primary-light-5); --color-active-line: #534d1b; accent-color: var(--color-accent); color-scheme: dark; } .emoji[aria-label="check\ mark"], .emoji[aria-label="currency\ exchange"], .emoji[aria-label="TOP\ arrow"], .emoji[aria-label="END\ arrow"], .emoji[aria-label="ON! arrow"], .emoji[aria-label="SOON\ arrow"], .emoji[aria-label="heavy dollar sign"], .emoji[aria-label="copyright"], .emoji[aria-label="registered"], .emoji[aria-label="trade\ mark"], .emoji[aria-label="multiply"], .emoji[aria-label="plus"], .emoji[aria-label="minus"], .emoji[aria-label="divide"], .emoji[aria-label="curly\ loop"], .emoji[aria-label="double curly loop"], .emoji[aria-label="wavy\ dash"], .emoji[aria-label="paw\ prints"], .emoji[aria-label="musical\ note"], .emoji[aria-label="musical\ notes"] { filter: invert() hue-rotate(180deg); } .repository.file.list #repo-files-table tbody .svg.octicon-file-directory-fill, .repository.file.list #repo-files-table tbody .svg.octicon-file-submodule { color: #7d8590; } /* ═══════════════════════════════════════════ FLOATING GLASS PILL HEADER Matches bocken.org homepage header style ═══════════════════════════════════════════ */ /* Full black background (dark mode default) */ body { background-color: var(--color-body, #000) !important; } .full.height { background-color: var(--color-body, #000); } /* Navbar as floating glass pill */ #navbar { position: sticky !important; top: 12px !important; z-index: 100 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; height: 3.5rem !important; gap: 0.4rem !important; padding: 0 0.8rem !important; margin: 12px auto 0 !important; width: fit-content !important; max-width: calc(100% - 1.5rem) !important; min-width: min(700px, calc(100% - 1.5rem)) !important; border-radius: 100px !important; background: rgba(20, 20, 20, 0.78) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(255,255,255,0.06) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.25) !important; } /* Navbar internal layout */ #navbar .navbar-left { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 0.15rem; flex-shrink: 0; } #navbar .navbar-right { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 0.15rem; margin-left: auto; flex-shrink: 0; } /* Divider between left and right */ #navbar .navbar-right::before { content: ''; width: 1px; height: 18px; background: rgba(255,255,255,0.15); margin: 0 0.25rem; flex-shrink: 0; } /* Nav items base style */ #navbar .item { color: #999 !important; font-size: 1rem; padding: 0.35rem 0.65rem; border-radius: 100px; transition: all 150ms; white-space: nowrap; } #navbar .item:hover { color: white !important; background: rgba(255,255,255,0.1); } #navbar .item.active { color: white !important; background: rgba(136, 192, 208, 0.25); } /* Logo */ #navbar-logo { padding: 0 0.2rem !important; display: flex; align-items: center; flex-shrink: 0; } #navbar-logo img { width: 30px; height: 30px; } /* Avatar — fully round everywhere */ .ui.avatar, img.avatar, .avatar img, .collaborator-avatar, .participant-avatar { border-radius: 50% !important; } /* Nav item icon + text spacing */ #navbar .item .svg { flex-shrink: 0; } #navbar .item .nav-label { margin-left: 0.35rem; } /* Hide dropdown triangles in navbar */ #navbar .octicon-triangle-down { display: none !important; } /* Hide Help link everywhere */ #navbar a[href*="docs.gitea"] { display: none !important; } /* Dropdown menus in navbar */ #navbar .ui.dropdown .menu { background: var(--color-menu); border: 1px solid var(--color-light-border); border-radius: 12px; box-shadow: 0 8px 32px var(--color-shadow); } /* ═══════════════════════════════════════════ SECONDARY NAV (Repositories/Users/Orgs) ═══════════════════════════════════════════ */ .secondary-nav { background: transparent !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; } /* ═══════════════════════════════════════════ PAGE CONTENT SPACING ═══════════════════════════════════════════ */ .page-content { background: var(--color-body, #000); } /* ═══════════════════════════════════════════ FOOTER ═══════════════════════════════════════════ */ .page-footer { background: var(--color-footer, #000) !important; } /* ═══════════════════════════════════════════ MOBILE ADJUSTMENTS ═══════════════════════════════════════════ */ /* Override Gitea's mobile hiding — keep all items visible at every width */ html body #navbar .navbar-left > .item, html body #navbar .navbar-right > .item, html body #navbar .navbar-left > a, html body #navbar .navbar-right > a, html body #navbar .navbar-right > .ui.dropdown, html body #navbar .not-mobile { display: flex !important; width: auto !important; } html body #navbar .only-mobile, html body #navbar .navbar-mobile-right { display: none !important; } @media (max-width: 800px) { html body #navbar { gap: 0.25rem !important; padding: 0 0.6rem !important; max-width: calc(100% - 1rem) !important; min-width: unset !important; top: 8px !important; align-items: center !important; } html body #navbar .navbar-left { flex: 0 0 auto !important; justify-content: flex-start !important; } #navbar .item { font-size: 0.75rem; padding: 0.3rem 0.5rem; min-width: unset !important; min-height: unset !important; } /* Collapse text links to icon-only on mobile */ #navbar .nav-label { display: none; } } /* ═══════════════════════════════════════════ THEME TOGGLE BUTTON ═══════════════════════════════════════════ */ #theme-toggle { background: transparent !important; border: none !important; cursor: pointer; display: flex !important; align-items: center; justify-content: center; padding: 0.35rem 0.65rem !important; flex-shrink: 0; } html body #theme-toggle:hover { background: rgba(255,255,255,0.1) !important; } :root[data-bocken-theme="light"] #theme-toggle:hover { background: rgba(0,0,0,0.06) !important; } @media (prefers-color-scheme: light) { :root:not([data-bocken-theme]) #theme-toggle:hover { background: rgba(0,0,0,0.06) !important; } } /* ═══════════════════════════════════════════ LIGHT MODE Activated by data-bocken-theme="light" or system preference when no attribute is set ═══════════════════════════════════════════ */ /* System light preference (no explicit theme set) */ @media (prefers-color-scheme: light) { :root:not([data-bocken-theme]) { --is-dark-theme: false; --color-primary: #5E81AC; --color-primary-contrast: #2E3440; --color-body: #f8f6f1; --color-box-header: #efecea; --color-box-body: #efecea; --color-box-body-highlight: #e8e5e1; --color-text-dark: #2a2a2a; --color-text: #3a3a3a; --color-text-light: #555; --color-text-light-1: #666; --color-text-light-2: #777; --color-text-light-3: #888; --color-footer: #efecea; --color-input-text: #2E3440; --color-input-background: #efecea; --color-input-toggle-background: #dfdcd8; --color-input-border: #d0cdc8; --color-input-border-hover: #5E81AC; --color-header-wrapper: transparent; --color-light: #00000010; --color-light-border: #00000015; --color-hover: #00000008; --color-active: #00000012; --color-menu: #efecea; --color-card: #f8f6f1; --color-button: #efecea; --color-code-bg: #efecea; --color-code-sidebar-bg: #e8e5e1; --color-shadow: #00000015; --color-secondary-bg: #efecea; --color-secondary: #d0cdc8; --color-text-focus: #2E3440; --color-expand-button: #dfdcd8; --color-placeholder-text: #999; --color-console-bg: #efecea; --color-nav-bg: transparent; --color-nav-hover-bg: rgba(0,0,0,0.06); --color-tooltip-text: #fff; --color-tooltip-bg: #2E3440f0; --color-label-text: #2E3440; --color-label-bg: #d0cdc84b; --color-label-hover-bg: #d0cdc8a0; --color-label-active-bg: #d0cdc8; --color-timeline: #d0cdc8; --color-reaction-bg: #00000008; --color-reaction-hover-bg: #5E81AC20; --color-reaction-active-bg: #5E81AC30; color-scheme: light; } /* Light mode header overrides */ :root:not([data-bocken-theme]) #navbar { background: rgba(255, 255, 255, 0.82) !important; border-color: rgba(0,0,0,0.08) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.1) !important; } :root:not([data-bocken-theme]) #navbar-logo img { filter: brightness(0.2); } :root:not([data-bocken-theme]) #navbar .item { color: #666 !important; } :root:not([data-bocken-theme]) #navbar .item:hover { color: #2E3440 !important; background: rgba(0,0,0,0.06) !important; } :root:not([data-bocken-theme]) #navbar .item.active { color: #2E3440 !important; background: rgba(94, 129, 172, 0.15) !important; } :root:not([data-bocken-theme]) #navbar .navbar-right::before { background: rgba(0,0,0,0.12); } :root:not([data-bocken-theme]) .full.height, :root:not([data-bocken-theme]) .page-content { background: #f8f6f1; } :root:not([data-bocken-theme]) .page-footer { background: #efecea !important; } :root:not([data-bocken-theme]) .secondary-nav { border-bottom-color: rgba(0,0,0,0.08) !important; } :root:not([data-bocken-theme]) #navbar .ui.dropdown .menu { background: #efecea; border-color: rgba(0,0,0,0.1); } } /* Forced light mode */ :root[data-bocken-theme="light"] { --is-dark-theme: false; --color-primary: #5E81AC; --color-primary-contrast: #2E3440; --color-body: #f8f6f1; --color-box-header: #efecea; --color-box-body: #efecea; --color-box-body-highlight: #e8e5e1; --color-text-dark: #2a2a2a; --color-text: #3a3a3a; --color-text-light: #555; --color-text-light-1: #666; --color-text-light-2: #777; --color-text-light-3: #888; --color-footer: #efecea; --color-input-text: #2E3440; --color-input-background: #efecea; --color-input-toggle-background: #dfdcd8; --color-input-border: #d0cdc8; --color-input-border-hover: #5E81AC; --color-header-wrapper: transparent; --color-light: #00000010; --color-light-border: #00000015; --color-hover: #00000008; --color-active: #00000012; --color-menu: #fff; --color-card: #f8f6f1; --color-button: #efecea; --color-code-bg: #efecea; --color-code-sidebar-bg: #e8e5e1; --color-shadow: #00000015; --color-secondary-bg: #efecea; --color-secondary: #d0cdc8; --color-text-focus: #2E3440; --color-expand-button: #dfdcd8; --color-placeholder-text: #999; --color-console-bg: #efecea; --color-nav-bg: transparent; --color-nav-hover-bg: rgba(0,0,0,0.06); --color-tooltip-text: #fff; --color-tooltip-bg: #2E3440f0; --color-label-text: #2E3440; --color-label-bg: #d0cdc84b; --color-label-hover-bg: #d0cdc8a0; --color-label-active-bg: #d0cdc8; --color-timeline: #d0cdc8; --color-reaction-bg: #00000008; --color-reaction-hover-bg: #5E81AC20; --color-reaction-active-bg: #5E81AC30; color-scheme: light; } :root[data-bocken-theme="light"] #navbar { background: rgba(255, 255, 255, 0.82) !important; border-color: rgba(0,0,0,0.08) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.1) !important; } :root[data-bocken-theme="light"] #navbar-logo img { filter: brightness(0.2); } :root[data-bocken-theme="light"] #navbar .item { color: #666 !important; } :root[data-bocken-theme="light"] #navbar .item:hover { color: #2E3440 !important; background: rgba(0,0,0,0.06) !important; } :root[data-bocken-theme="light"] #navbar .item.active { color: #2E3440 !important; background: rgba(94, 129, 172, 0.15) !important; } :root[data-bocken-theme="light"] #navbar .navbar-right::before { background: rgba(0,0,0,0.12); } :root[data-bocken-theme="light"] .full.height, :root[data-bocken-theme="light"] .page-content { background: #f8f6f1; } :root[data-bocken-theme="light"] .page-footer { background: #efecea !important; } :root[data-bocken-theme="light"] .secondary-nav { border-bottom-color: rgba(0,0,0,0.08) !important; } :root[data-bocken-theme="light"] #navbar .ui.dropdown .menu { background: #fff; border-color: rgba(0,0,0,0.1); } :root[data-bocken-theme="light"] body { background-color: #f8f6f1 !important; }