From 2df6595520509e5dd19674bb708dfc7c30830e82 Mon Sep 17 00:00:00 2001 From: Alexander Bocken Date: Tue, 3 Mar 2026 18:54:57 +0100 Subject: [PATCH] gitea: floating glass pill header, black background, custom navbar - Floating glass pill navbar matching homepage/jellyfin header style - Full black page background - Custom head_navbar template: logo links to bocken.org, home button for logged-in users, icons on all nav items, remove Help/Explore - Icon-only nav on mobile, hide dropdown triangles, round avatar - Deploy script to rsync theme + template to server --- deploy-gitea.sh | 7 + static/other/gitea.css | 745 ++++++++++++++++++++++++++++ static/other/gitea_head_navbar.tmpl | 173 +++++++ 3 files changed, 925 insertions(+) create mode 100755 deploy-gitea.sh create mode 100644 static/other/gitea.css create mode 100644 static/other/gitea_head_navbar.tmpl diff --git a/deploy-gitea.sh b/deploy-gitea.sh new file mode 100755 index 0000000..ecaff66 --- /dev/null +++ b/deploy-gitea.sh @@ -0,0 +1,7 @@ +#!/bin/sh +CSS_DEST=/var/lib/gitea/custom/public/assets/css/theme-homepage.css +TMPL_DEST=/var/lib/gitea/custom/templates/base/head_navbar.tmpl + +rsync -av static/other/gitea.css "root@bocken.org:$CSS_DEST" +rsync -av static/other/gitea_head_navbar.tmpl "root@bocken.org:$TMPL_DEST" +ssh root@bocken.org "chown gitea:gitea '$CSS_DEST' '$TMPL_DEST'" diff --git a/static/other/gitea.css b/static/other/gitea.css new file mode 100644 index 0000000..769538b --- /dev/null +++ b/static/other/gitea.css @@ -0,0 +1,745 @@ +/* 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; + --color-primary: #4b80ca; + --color-primary-contrast: #fff; + --color-primary-dark-1: #739cb3; + --color-primary-dark-2: #40aaff; + --color-primary-dark-3: #92b4c4; + --color-primary-dark-4: #a1bbcd; + --color-primary-dark-5: #cfddc1; + --color-primary-dark-6: #e7eee0; + --color-primary-dark-7: #f8faf6; + --color-primary-light-1: #4b80ca; + --color-primary-light-2: #437aad; + --color-primary-light-3: #415b8b; + --color-primary-light-4: #25425a; + --color-primary-light-5: #223546; + --color-primary-light-6: #131923; + --color-primary-light-7: #06090b; + --color-primary-alpha-10: #3683c019; + --color-primary-alpha-20: #3683c033; + --color-primary-alpha-30: #3683c04b; + --color-primary-alpha-40: #3683c066; + --color-primary-alpha-50: #3683c080; + --color-primary-alpha-60: #3683c099; + --color-primary-alpha-70: #3683c0b3; + --color-primary-alpha-80: #3683c0cc; + --color-primary-alpha-90: #3683c0e1; + --color-primary-hover: var(--color-primary-light-1); + --color-primary-active: var(--color-primary-light-2); + --color-secondary: #2c2f35; + --color-secondary-dark-1: #505665; + --color-secondary-dark-2: #5b6273; + --color-secondary-dark-3: #71798e; + --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: #dfe1e6; + --color-secondary-dark-10: #edeef1; + --color-secondary-dark-11: #fbfbfc; + --color-secondary-dark-12: #eeeff2; + --color-secondary-dark-13: #fbfbfc; + --color-secondary-light-1: #373b46; + --color-secondary-light-2: #292c34; + --color-secondary-light-3: #1c1e23; + --color-secondary-light-4: #0e0f11; + --color-secondary-alpha-10: #2c2f35; + --color-secondary-alpha-20: #2c2f3533; + --color-secondary-alpha-30: #2c2f354b; + --color-secondary-alpha-40: #2c2f3566; + --color-secondary-alpha-50: #2c2f3580; + --color-secondary-alpha-60: #2c2f3599; + --color-secondary-alpha-70: #2c2f35b3; + --color-secondary-alpha-80: #2c2f35cc; + --color-secondary-alpha-90: #2c2f35e1; + --color-red: #da3737; + --color-orange: #f17a2b; + --color-yellow: #f3c640; + --color-olive: #c8df36; + --color-green: #3bc75b; + --color-teal: #69d4cf; + --color-blue: #4b80ca; + --color-violet: #754ad3; + --color-purple: #b65dd4; + --color-pink: #e04b9f; + --color-brown: #a86d45; + --color-black: #141516; + --color-grey: #797c85; + --color-gold: #d4b74c; + --color-white: #ffffff; + --color-red-light: #d15a5a; + --color-orange-light: #f6a066; + --color-yellow-light: #eaaf03; + --color-olive-light: #abc016; + --color-green-light: #93b373; + --color-teal-light: #00b6ad; + --color-blue-light: #4e96cc; + --color-violet-light: #9b79e4; + --color-purple-light: #ba6ad5; + --color-pink-light: #d74397; + --color-brown-light: #b08061; + --color-black-light: #3f4555; + --color-red-dark-1: #c23636; + --color-orange-dark-1: #f38236; + --color-yellow-dark-1: #b88a03; + --color-olive-dark-1: #839311; + --color-green-dark-1: #7a9e55; + --color-teal-dark-1: #00837c; + --color-blue-dark-1: #347cb3; + --color-violet-dark-1: #7b4edb; + --color-purple-dark-1: #a742c9; + --color-pink-dark-1: #be297d; + --color-brown-dark-1: #94674a; + --color-black-dark-1: #292d38; + --color-red-dark-2: #ad3030; + --color-orange-dark-2: #f16e17; + --color-yellow-dark-2: #a37a02; + --color-olive-dark-2: #74820f; + --color-green-dark-2: #6c8c4c; + --color-teal-dark-2: #00746e; + --color-blue-dark-2: #2e6e9f; + --color-violet-dark-2: #6733d6; + --color-purple-dark-2: #9834b9; + --color-pink-dark-2: #a9246f; + --color-brown-dark-2: #835b42; + --color-black-dark-2: #252832; + --color-console-bg: #11171f; + --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: #505665; + --color-grey-light: #a1a6b7; + --color-gold: #b1983b; + --color-white: #fff; + --color-diff-removed-word-bg: #6f3333; + --color-diff-added-word-bg: #3c653c; + --color-diff-removed-row-bg: #3c2626; + --color-diff-moved-row-bg: #818044; + --color-diff-added-row-bg: #283e2d; + --color-diff-removed-row-border: #634343; + --color-diff-moved-row-border: #bcca6f; + --color-diff-added-row-border: #314a37; + --color-diff-inactive: #353846; + --color-error-border: #a04141; + --color-error-bg: #522; + --color-error-bg-active: #744; + --color-error-bg-hover: #633; + --color-error-text: #f9cbcb; + --color-success-border: #458a57; + --color-success-bg: #284034; + --color-success-text: #6cc664; + --color-warning-border: #bb9d00; + --color-warning-bg: #3a3a30; + --color-warning-text: #fbbd08; + --color-info-border: #306090; + --color-info-bg: #26354c; + --color-info-text: #38a8e8; + --color-red-badge: #db2828; + --color-red-badge-bg: #db28281a; + --color-red-badge-hover-bg: #db28284d; + --color-green-badge: #21ba45; + --color-green-badge-bg: #21ba451a; + --color-green-badge-hover-bg: #21ba454d; + --color-yellow-badge: #fbbd08; + --color-yellow-badge-bg: #fbbd081a; + --color-yellow-badge-hover-bg: #fbbd084d; + --color-orange-badge: #f2711c; + --color-orange-badge-bg: #f2711c1a; + --color-orange-badge-hover-bg: #f2711c4d; + --color-git: #f05133; + --color-body: #000; + --color-box-header: #161b22; + --color-box-body: #0d1117; + --color-box-body-highlight: #262b36; + --color-text-dark: #dbe0ea; + --color-text: #bbc0ca; + --color-text-light: #a6aab5; + --color-text-light-1: rgb(125, 133, 144); + --color-text-light-2: #8a8e99; + --color-text-light-3: #707687; + --color-footer: #000; + --color-timeline: #4c525e; + --color-input-text: #d5dbe6; + --color-input-background: #2c2f35; + --color-input-toggle-background: #454a57; + --color-input-border: #2c2f35; + --color-input-border-hover: #505667; + --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: #0d1117; + --color-card: #000; + --color-markup-table-row: #ffffff06; + --color-markup-code-block: #ffffff16; + --color-button: #1e252e; + --color-code-bg: #0d1117; + --color-code-sidebar-bg: #232834; + --color-shadow: #00000060; + --color-secondary-bg: #2c2f35; + --color-text-focus: #fff; + --color-expand-button: #3c404d; + --color-placeholder-text: #8a8e99; + --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: #dfe3ec; + --color-label-bg: #7c84974b; + --color-label-hover-bg: #7c8497a0; + --color-label-active-bg: #7c8497; + --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 */ +body { + background-color: #000 !important; +} +.full.height { + background-color: #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: 3rem !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: 0.875rem; + 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: 24px; + height: 24px; +} + +/* Avatar — round */ +#navbar .ui.avatar { + border-radius: 50%; +} + +/* 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: #0d1117; + border: 1px solid rgba(255,255,255,0.08); + border-radius: 12px; + box-shadow: 0 8px 32px rgba(0,0,0,0.4); +} + + +/* ═══════════════════════════════════════════ + 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: #000; +} + +/* ═══════════════════════════════════════════ + FOOTER + ═══════════════════════════════════════════ */ +.page-footer { + background: #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; + } +} diff --git a/static/other/gitea_head_navbar.tmpl b/static/other/gitea_head_navbar.tmpl new file mode 100644 index 0000000..abc74d6 --- /dev/null +++ b/static/other/gitea_head_navbar.tmpl @@ -0,0 +1,173 @@ +