colem/gitea-custom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: colem/gitea-custom:0483209214674f65fa00f3b0b854ce56546d574a
Branches Tags
colem/gitea-custom:main
..
compare: colem/gitea-custom:main
Branches Tags
colem/gitea-custom:main
5 Commits
0483209214 .. main
Author SHA1 Message Date
cole-maxwell1 5acb05d7cf fix(theme): correct typography and logo accessibility 
Declare the Alro heading font with its intended 700 weight and explicitly apply that weight to branded headings. Preserve the homepage logo image in the accessibility tree while rendering the theme-specific visual artwork.

Update repository guidance to document the self-contained theme architecture, Gitea 1.27.3 synchronization requirements, production asset hashing, and the complete six-theme verification matrix.
 2026-09-08 11:24:47 -05:00
cole-maxwell1 0875dfa276 feat(theme): apply branded logos across all themes 
Load a shared branding stylesheet globally so built-in and CodeCraftsmen themes display the appropriate navbar and homepage logos. Use fixed artwork for explicit light and dark themes while respecting the system preference for automatic themes.

Centralize the logo overrides, remove duplicated theme-specific rules, and make the custom light and dark themes self-contained. Synchronize their palette variables with Gitea 1.27, including syntax, diff, priority, editor, console, workflow, transparency, and chart colors.
 2026-09-08 11:07:50 -05:00
cole-maxwell1 b21d961929 fix(theme): switch navbar and home logos through pure css 
Extend theme-aware logo switching to the home page hero logo, which previously never changed with the active color scheme, and keep the navbar logo switching in the same CSS-only mechanism.

Replace the header template synchronization script with theme CSS background images so logos render correctly at first paint, work with JavaScript disabled, and avoid WebKit replaced-element repaint behavior. Hide the upstream images as layout placeholders and use selectors that outrank Gitea's navbar hover styles.

Add an AGENTS.md guide documenting repository scope, theme and template constraints, verification expectations, and the manual deployment flow.
 2026-09-07 21:57:59 -05:00
cole-maxwell1 8dc216d4e9 fix(theme): synchronize navbar logo with active color scheme 
Replace CSS background-image switching with direct navbar image source updates to avoid Safari and WebKit repaint failures.

Select the appropriate logo during initial DOM construction and update it when the system color scheme changes, Safari restores a cached page, or the document returns to the foreground. Preserve CSP compatibility and Gitea subpath support while retaining the existing logo dimensions.
 2026-09-07 21:34:45 -05:00
cole-maxwell1 d8cf7ed29b fix(theme): refresh navbar logo on iOS Safari 
Replace CSS content substitution with theme-specific navbar background images to ensure WebKit repaints the logo when the system color scheme changes.

Hide the upstream image while preserving its layout dimensions, and use selectors that prevent Gitea's navbar hover styles from clearing the custom logo.
 2026-09-07 19:00:10 -05:00
7 changed files with 848 additions and 559 deletions
Expand all files Collapse all files
AGENTS.md
+29
View File
@@ -0,0 +1,29 @@
# Repository Guide
## Scope
- This repository is a static overlay copied into Gitea's custom path; it has no local build, lint, or automated test toolchain.
- Target Gitea 1.27.x; the current files are synchronized with Gitea 1.27.3. Treat upstream theme variables and template structure as version-coupled behavior.
## Themes
- `theme-codecraftsmen-light.css` and `theme-codecraftsmen-dark.css` are self-contained copies of the Gitea 1.27 theme variable sets with CodeCraftsmen overrides.
- Keep their variable names synchronized with the built-in themes from the exact target release. Production Gitea theme assets are hashed, so custom themes must not import built-in theme filenames directly.
- `theme-codecraftsmen-auto.css` selects the custom light and dark themes with `prefers-color-scheme`; verify changes in all three theme modes.
- Keep font and image URLs relative to `public/assets/css/` (`../fonts/...` and `../img/...`) because Gitea serves these files below `/assets/`.
- Preserve `gitea-theme-meta-info`, including both display name and color scheme, so Gitea can discover each theme correctly.
- Do not add overrides under `templates/base/` for branding. Replace the upstream navbar and home page logo images through theme CSS so Gitea template upgrades remain intact.
## Templates
- `templates/custom/header.tmpl` injects Plausible analytics. Every external or inline script must use `nonce="{{ctx.CspScriptNonce}}"` or Gitea's CSP will block it.
## Verification And Deployment
- There is no standalone local renderer. Validate on the target Gitea release across anonymous, authenticated, and administrator pages in light, dark, and auto modes.
- For Gitea upgrades, compare both custom palettes against the built-in light and dark themes from the exact target release before testing.
- Deployment is not automated here. After review, synchronize `public/` and `templates/` to `ansible/roles/gitea/files/theme` in the separate homelab repository.
## Assets
- The bundled fonts and logos are project-supplied and do not grant redistribution rights; do not publish or replace them without confirming the applicable licenses.
README.md
+11 -8
View File
@@ -4,9 +4,11 @@ Custom themes and branding for the CodeCraftsmen Gitea instance.
## Compatibility ## Compatibility
The theme supports Gitea 1.27.x. Each custom theme imports the matching built-in The theme supports Gitea 1.27.x and is currently synchronized with Gitea 1.27.3.
Gitea theme and overrides only the CodeCraftsmen palette, typography, and logo. The light and dark themes are self-contained copies of the matching built-in
This allows new upstream theme variables to retain their Gitea defaults. theme variable sets with CodeCraftsmen palette and typography overrides. The
auto theme conditionally imports those two local theme files according to the
user's preferred color scheme.
The repository intentionally avoids overriding Gitea's internal templates. The The repository intentionally avoids overriding Gitea's internal templates. The
navbar logo is replaced through theme CSS so Gitea template changes are applied navbar logo is replaced through theme CSS so Gitea template changes are applied
@@ -29,11 +31,12 @@ repository being available from the Gitea instance.
## Upgrade Process ## Upgrade Process
1. Update the imported Gitea version locally. 1. Compare the custom light and dark variable sets with the built-in themes from
2. Compare the custom palette with the built-in light and dark themes for that the exact target release.
exact release. 2. Add, remove, or rename variables to match that release while preserving the
3. Test anonymous, authenticated, and administrator pages with light, dark, and CodeCraftsmen palette values.
auto themes. 3. Test anonymous, authenticated, and administrator pages with all six themes,
including both system color schemes for the two auto themes.
4. Synchronize the reviewed files into the homelab Gitea role. 4. Synchronize the reviewed files into the homelab Gitea role.
## Assets ## Assets
public/assets/css/branding.css
+124
View File
@@ -0,0 +1,124 @@
html:is(
[data-theme="gitea-light"],
[data-theme="gitea-dark"],
[data-theme="gitea-auto"],
[data-theme="codecraftsmen-light"],
[data-theme="codecraftsmen-dark"],
[data-theme="codecraftsmen-auto"]
)
#navbar
#navbar-logo {
background-position: center;
background-repeat: no-repeat;
background-size: 60px 30px;
}
html:is(
[data-theme="gitea-light"],
[data-theme="gitea-dark"],
[data-theme="gitea-auto"],
[data-theme="codecraftsmen-light"],
[data-theme="codecraftsmen-dark"],
[data-theme="codecraftsmen-auto"]
)
#navbar
#navbar-logo
img {
visibility: hidden;
width: 60px;
height: 30px;
}
html:is(
[data-theme="gitea-light"],
[data-theme="gitea-dark"],
[data-theme="gitea-auto"],
[data-theme="codecraftsmen-light"],
[data-theme="codecraftsmen-dark"],
[data-theme="codecraftsmen-auto"]
)
.page-content.home
img.logo {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
html:is(
[data-theme="gitea-light"],
[data-theme="gitea-dark"],
[data-theme="gitea-auto"],
[data-theme="codecraftsmen-light"],
[data-theme="codecraftsmen-dark"],
[data-theme="codecraftsmen-auto"]
)
.page-content.home
.center:has(> img.logo)::before {
content: "";
display: block;
width: 220px;
height: 220px;
margin: 0 auto;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
html:is([data-theme="gitea-light"], [data-theme="codecraftsmen-light"])
#navbar
#navbar-logo {
background-image: url("../img/logo-light-no-slogan.svg");
}
html:is([data-theme="gitea-light"], [data-theme="codecraftsmen-light"])
.page-content.home
.center:has(> img.logo)::before {
background-image: url("../img/logo-light.svg");
}
html:is([data-theme="gitea-dark"], [data-theme="codecraftsmen-dark"])
#navbar
#navbar-logo {
background-image: url("../img/logo-dark-no-slogan.svg");
}
html:is([data-theme="gitea-dark"], [data-theme="codecraftsmen-dark"])
.page-content.home
.center:has(> img.logo)::before {
background-image: url("../img/logo-dark.svg");
}
@media (prefers-color-scheme: light) {
html:is([data-theme="gitea-auto"], [data-theme="codecraftsmen-auto"])
#navbar
#navbar-logo {
background-image: url("../img/logo-light-no-slogan.svg");
}
html:is([data-theme="gitea-auto"], [data-theme="codecraftsmen-auto"])
.page-content.home
.center:has(> img.logo)::before {
background-image: url("../img/logo-light.svg");
}
}
@media (prefers-color-scheme: dark) {
html:is([data-theme="gitea-auto"], [data-theme="codecraftsmen-auto"])
#navbar
#navbar-logo {
background-image: url("../img/logo-dark-no-slogan.svg");
}
html:is([data-theme="gitea-auto"], [data-theme="codecraftsmen-auto"])
.page-content.home
.center:has(> img.logo)::before {
background-image: url("../img/logo-dark.svg");
}
}
public/assets/css/theme-codecraftsmen-auto.css
+2 -18
View File
@@ -1,23 +1,7 @@
@import "./theme-codecraftsmen-light.css" (prefers-color-scheme: light); @import "./theme-codecraftsmen-light.css" (prefers-color-scheme: light);
@import "./theme-codecraftsmen-dark.css" (prefers-color-scheme: dark); @import "./theme-codecraftsmen-dark.css" (prefers-color-scheme: dark);
@media (prefers-color-scheme: light) {
html[data-theme="codecraftsmen-auto"] #navbar-logo img {
content: url("../img/logo-light-no-slogan.svg");
width: 60px;
height: 30px;
}
}
@media (prefers-color-scheme: dark) {
html[data-theme="codecraftsmen-auto"] #navbar-logo img {
content: url("../img/logo-dark-no-slogan.svg");
width: 60px;
height: 30px;
}
}
gitea-theme-meta-info { gitea-theme-meta-info {
--theme-display-name: "CodeCraftsmen Auto"; --theme-display-name: "CodeCraftsmen Auto";
--theme-color-scheme: "auto"; --theme-color-scheme: "auto";
} }
public/assets/css/theme-codecraftsmen-dark.css
+342 -267
View File
@@ -1,265 +1,339 @@
@import "./theme-gitea-dark.css";
gitea-theme-meta-info { gitea-theme-meta-info {
--theme-display-name: "CodeCraftsmen Dark"; --theme-display-name: "CodeCraftsmen Dark";
--theme-color-scheme: "dark"; --theme-color-scheme: "dark";
} }
@font-face { @font-face {
font-family: "Gotham"; font-family: "Gotham";
src: url("../fonts/GothamNarrow-Medium.woff2") format("woff2"); src: url("../fonts/GothamNarrow-Medium.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: "alro"; font-family: "alro";
src: url("../fonts/alro-bold-700.woff2") format("woff2"); src: url("../fonts/alro-bold-700.woff2") format("woff2");
font-weight: 400; font-weight: 700;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
:root { :root {
--is-dark-theme: true; --is-dark-theme: true;
--color-primary: #7395b9; --color-primary: #7395b9;
--color-primary-contrast: #222222; --color-primary-contrast: #222222;
--color-primary-dark-1: #81a0c0; --color-primary-dark-1: #81a0c0;
--color-primary-dark-2: #8faac7; --color-primary-dark-2: #8faac7;
--color-primary-dark-3: #9db5ce; --color-primary-dark-3: #9db5ce;
--color-primary-dark-4: #abbfd5; --color-primary-dark-4: #abbfd5;
--color-primary-dark-5: #c7d5e3; --color-primary-dark-5: #c7d5e3;
--color-primary-dark-6: #e3eaf1; --color-primary-dark-6: #e3eaf1;
--color-primary-dark-7: #f4f7f9; --color-primary-dark-7: #f4f7f9;
--color-primary-light-1: #6886a6; --color-primary-light-1: #6886a6;
--color-primary-light-2: #5c7794; --color-primary-light-2: #5c7794;
--color-primary-light-3: #506882; --color-primary-light-3: #506882;
--color-primary-light-4: #45596f; --color-primary-light-4: #45596f;
--color-primary-light-5: #2e3c4a; --color-primary-light-5: #2e3c4a;
--color-primary-light-6: #171e25; --color-primary-light-6: #171e25;
--color-primary-light-7: #090c0f; --color-primary-light-7: #090c0f;
--color-primary-alpha-10: #7395b919; --color-primary-alpha-10: #7395b919;
--color-primary-alpha-20: #7395b933; --color-primary-alpha-20: #7395b933;
--color-primary-alpha-30: #7395b94c; --color-primary-alpha-30: #7395b94c;
--color-primary-alpha-40: #7395b966; --color-primary-alpha-40: #7395b966;
--color-primary-alpha-50: #7395b97f; --color-primary-alpha-50: #7395b97f;
--color-primary-alpha-60: #7395b999; --color-primary-alpha-60: #7395b999;
--color-primary-alpha-70: #7395b9b2; --color-primary-alpha-70: #7395b9b2;
--color-primary-alpha-80: #7395b9cc; --color-primary-alpha-80: #7395b9cc;
--color-primary-alpha-90: #7395b9e5; --color-primary-alpha-90: #7395b9e5;
--color-primary-hover: var(--color-primary-dark-1); --color-primary-hover: var(--color-primary-dark-1);
--color-primary-active: var(--color-primary-dark-2); --color-primary-active: var(--color-primary-dark-2);
--color-secondary: #40403c; --color-secondary: #40403c;
--color-secondary-dark-1: #4a4a46; --color-secondary-dark-1: #4a4a46;
--color-secondary-dark-2: #535350; --color-secondary-dark-2: #535350;
--color-secondary-dark-3: #5f5f5b; --color-secondary-dark-3: #5f5f5b;
--color-secondary-dark-4: #6a6a67; --color-secondary-dark-4: #6a6a67;
--color-secondary-dark-5: #797976; --color-secondary-dark-5: #797976;
--color-secondary-dark-6: #898986; --color-secondary-dark-6: #898986;
--color-secondary-dark-7: #989896; --color-secondary-dark-7: #989896;
--color-secondary-dark-8: #a7a7a5; --color-secondary-dark-8: #a7a7a5;
--color-secondary-dark-9: #b6b6b5; --color-secondary-dark-9: #b6b6b5;
--color-secondary-dark-10: #c6c6c4; --color-secondary-dark-10: #c6c6c4;
--color-secondary-dark-11: #d5d5d4; --color-secondary-dark-11: #d5d5d4;
--color-secondary-dark-12: #e4e4e4; --color-secondary-dark-12: #e4e4e4;
--color-secondary-dark-13: #f0f0ef; --color-secondary-dark-13: #f0f0ef;
--color-secondary-light-1: #3b3b37; --color-secondary-light-1: #3b3b37;
--color-secondary-light-2: #363632; --color-secondary-light-2: #363632;
--color-secondary-light-3: #31312e; --color-secondary-light-3: #31312e;
--color-secondary-light-4: #2c2c29; --color-secondary-light-4: #2c2c29;
--color-secondary-alpha-10: #40403c19; --color-secondary-alpha-10: #40403c19;
--color-secondary-alpha-20: #40403c33; --color-secondary-alpha-20: #40403c33;
--color-secondary-alpha-30: #40403c4c; --color-secondary-alpha-30: #40403c4c;
--color-secondary-alpha-40: #40403c66; --color-secondary-alpha-40: #40403c66;
--color-secondary-alpha-50: #40403c7f; --color-secondary-alpha-50: #40403c7f;
--color-secondary-alpha-60: #40403c99; --color-secondary-alpha-60: #40403c99;
--color-secondary-alpha-70: #40403cb2; --color-secondary-alpha-70: #40403cb2;
--color-secondary-alpha-80: #40403ccc; --color-secondary-alpha-80: #40403ccc;
--color-secondary-alpha-90: #40403ce5; --color-secondary-alpha-90: #40403ce5;
--color-secondary-button: var(--color-secondary-dark-4); --color-secondary-button: var(--color-secondary-dark-4);
--color-secondary-hover: var(--color-secondary-dark-3); --color-secondary-hover: var(--color-secondary-dark-3);
--color-secondary-active: var(--color-secondary-dark-2); --color-secondary-active: var(--color-secondary-dark-2);
/* console colors - used for actions console and console files */ /* console colors - used for actions console and console files */
--color-console-fg: #f7f8f9; --color-console-fg: #f7f8f9;
--color-console-fg-subtle: #bdc4cc; --color-console-fg-subtle: #bdc4cc;
--color-console-bg: #171b1e; --color-console-bg: #171b1e;
--color-console-border: #2e353b; --color-console-border: #2e353b;
--color-console-hover-bg: #272d33; --color-console-hover-bg: #272d33;
--color-console-active-bg: #2e353b; --color-console-active-bg: #2e353b;
--color-console-menu-bg: #262b31; --color-console-menu-bg: #262b31;
--color-console-menu-border: #414b55; --color-console-menu-border: #414b55;
/* named colors */ --color-console-link: #969aa1;
--color-red: #d52b1e; /* named colors */
--color-orange: #cc580c; --color-red: #d52b1e;
--color-yellow: #f2b134; --color-orange: #cc580c;
--color-olive: #91a313; --color-yellow: #f2b134;
--color-green: #87ab63; --color-olive: #91a313;
--color-teal: #00918a; --color-green: #87ab63;
--color-blue: #7395b9; --color-teal: #00918a;
--color-violet: #906ae1; --color-blue: #7395b9;
--color-purple: #b259d0; --color-violet: #906ae1;
--color-pink: #d22e8b; --color-purple: #b259d0;
--color-brown: #7a5230; --color-pink: #d22e8b;
--color-black: #222222; --color-brown: #7a5230;
/* light variants - produced via Sass scale-color(color, $lightness: +10%) */ --color-black: #222222;
--color-red-light: #d94034; /* light variants - produced via Sass scale-color(color, $lightness: +10%) */
--color-orange-light: #f6a066; --color-red-light: #d94034;
--color-yellow-light: #f3b948; --color-orange-light: #f6a066;
--color-olive-light: #abc016; --color-yellow-light: #f3b948;
--color-green-light: #93b373; --color-olive-light: #abc016;
--color-teal-light: #00b6ad; --color-green-light: #93b373;
--color-blue-light: #81a0c0; --color-teal-light: #00b6ad;
--color-violet-light: #9b79e4; --color-blue-light: #81a0c0;
--color-purple-light: #ba6ad5; --color-violet-light: #9b79e4;
--color-pink-light: #d74397; --color-purple-light: #ba6ad5;
--color-brown-light: #876345; --color-pink-light: #d74397;
--color-black-light: #383838; --color-brown-light: #876345;
/* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */ --color-black-light: #383838;
--color-red-dark-1: #c0271b; /* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */
--color-orange-dark-1: #f38236; --color-red-dark-1: #c0271b;
--color-yellow-dark-1: #da9f2f; --color-orange-dark-1: #f38236;
--color-olive-dark-1: #839311; --color-yellow-dark-1: #da9f2f;
--color-green-dark-1: #7a9e55; --color-olive-dark-1: #839311;
--color-teal-dark-1: #00837c; --color-green-dark-1: #7a9e55;
--color-blue-dark-1: #6886a6; --color-teal-dark-1: #00837c;
--color-violet-dark-1: #7b4edb; --color-blue-dark-1: #6886a6;
--color-purple-dark-1: #a742c9; --color-violet-dark-1: #7b4edb;
--color-pink-dark-1: #be297d; --color-purple-dark-1: #a742c9;
--color-brown-dark-1: #6e4a2b; --color-pink-dark-1: #be297d;
--color-black-dark-1: #1f1f1f; --color-brown-dark-1: #6e4a2b;
/* dark 2 variants - produced via Sass scale-color(color, $lightness: -20%) */ --color-black-dark-1: #1f1f1f;
--color-red-dark-2: #aa2218; /* dark 2 variants - produced via Sass scale-color(color, $lightness: -20%) */
--color-orange-dark-2: #f16e17; --color-red-dark-2: #aa2218;
--color-yellow-dark-2: #c28e2a; --color-orange-dark-2: #f16e17;
--color-olive-dark-2: #74820f; --color-yellow-dark-2: #c28e2a;
--color-green-dark-2: #6c8c4c; --color-olive-dark-2: #74820f;
--color-teal-dark-2: #00746e; --color-green-dark-2: #6c8c4c;
--color-blue-dark-2: #5c7794; --color-teal-dark-2: #00746e;
--color-violet-dark-2: #6733d6; --color-blue-dark-2: #5c7794;
--color-purple-dark-2: #9834b9; --color-violet-dark-2: #6733d6;
--color-pink-dark-2: #a9246f; --color-purple-dark-2: #9834b9;
--color-brown-dark-2: #624226; --color-pink-dark-2: #a9246f;
--color-black-dark-2: #1b1b1b; --color-brown-dark-2: #624226;
/* ansi colors used for actions console and console files */ --color-black-dark-2: #1b1b1b;
--color-ansi-black: #1e2327; /* ansi colors used for actions console and console files */
--color-ansi-red: #d52b1e; --color-ansi-black: #1e2327;
--color-ansi-green: #87ab63; --color-ansi-red: #d52b1e;
--color-ansi-yellow: #c28e2a; --color-ansi-green: #87ab63;
--color-ansi-blue: #7395b9; --color-ansi-yellow: #c28e2a;
--color-ansi-magenta: #d22e8b; --color-ansi-blue: #7395b9;
--color-ansi-cyan: #00918a; --color-ansi-magenta: #d22e8b;
--color-ansi-white: var(--color-console-fg-subtle); --color-ansi-cyan: #00918a;
--color-ansi-bright-black: #424851; --color-ansi-white: var(--color-console-fg-subtle);
--color-ansi-bright-red: #d94034; --color-ansi-bright-black: #424851;
--color-ansi-bright-green: #93b373; --color-ansi-bright-red: #d94034;
--color-ansi-bright-yellow: #f3b948; --color-ansi-bright-green: #93b373;
--color-ansi-bright-blue: #81a0c0; --color-ansi-bright-yellow: #f3b948;
--color-ansi-bright-magenta: #d74397; --color-ansi-bright-blue: #81a0c0;
--color-ansi-bright-cyan: #00b6ad; --color-ansi-bright-magenta: #d74397;
--color-ansi-bright-white: var(--color-console-fg); --color-ansi-bright-cyan: #00b6ad;
/* other colors */ --color-ansi-bright-white: var(--color-console-fg);
--color-grey: #384149; /* 16-color series */
--color-grey-light: #818f9e; --color-series-16-0: #7db233;
--color-gold: #b1983b; --color-series-16-1: #499a37;
--color-white: #ffffff; --color-series-16-2: #ce4751;
--color-diff-added-linenum-bg: #274227; --color-series-16-3: #8f9121;
--color-diff-added-row-bg: #203224; --color-series-16-4: #ac32a6;
--color-diff-added-row-border: #314a37; --color-series-16-5: #7445e9;
--color-diff-added-word-bg: #3c653c; --color-series-16-6: #c67d28;
--color-diff-moved-row-bg: #818044; --color-series-16-7: #4db392;
--color-diff-moved-row-border: #bcca6f; --color-series-16-8: #aa4d30;
--color-diff-removed-linenum-bg: #482121; --color-series-16-9: #2a6f84;
--color-diff-removed-row-bg: #301e1e; --color-series-16-10: #c45327;
--color-diff-removed-row-border: #634343; --color-series-16-11: #3d965c;
--color-diff-removed-word-bg: #6f3333; --color-series-16-12: #792a93;
--color-diff-inactive: #22282d; --color-series-16-13: #439d73;
--color-error-border: #a04141; --color-series-16-14: #103aad;
--color-error-bg: #522; --color-series-16-15: #982e85;
--color-error-bg-active: #744; /* other colors */
--color-error-bg-hover: #633; --color-grey: #384149;
--color-error-text: #f9cbcb; --color-grey-light: #818f9e;
--color-success-border: #458a57; --color-gold: #b1983b;
--color-success-bg: #284034; --color-white: #ffffff;
--color-success-text: #6cc664; --color-diff-added-fg: #93b373;
--color-warning-border: #bb9d00; --color-diff-added-linenum-bg: #274227;
--color-warning-bg: #3a3a30; --color-diff-added-row-bg: #203224;
--color-warning-text: #fbbd08; --color-diff-added-row-border: #314a37;
--color-info-border: #306090; --color-diff-added-word-bg: #3c653c;
--color-info-bg: #26354c; --color-diff-moved-row-bg: #818044;
--color-info-text: #38a8e8; --color-diff-moved-row-border: #bcca6f;
--color-red-badge: #db2828; --color-diff-removed-fg: #fb5f5b;
--color-red-badge-bg: #db28281a; --color-diff-removed-linenum-bg: #482121;
--color-red-badge-hover-bg: #db28284d; --color-diff-removed-row-bg: #301e1e;
--color-green-badge: #21ba45; --color-diff-removed-row-border: #634343;
--color-green-badge-bg: #21ba451a; --color-diff-removed-word-bg: #6f3333;
--color-green-badge-hover-bg: #21ba454d; --color-diff-inactive: #22282d;
--color-yellow-badge: #fbbd08; --color-error-border: #a04141;
--color-yellow-badge-bg: #fbbd081a; --color-error-bg: #522;
--color-yellow-badge-hover-bg: #fbbd084d; --color-error-bg-active: #744;
--color-orange-badge: #f2711c; --color-error-bg-hover: #633;
--color-orange-badge-bg: #f2711c1a; --color-error-text: #f9cbcb;
--color-orange-badge-hover-bg: #f2711c4d; --color-success-border: #458a57;
--color-git: #f05133; --color-success-bg: #284034;
--color-logo: #f2b134; --color-success-text: #6cc664;
/* target-based colors */ --color-warning-border: #bb9d00;
--color-body: #222222; --color-warning-bg: #3a3a30;
--color-box-header: #1f1f1f; --color-warning-text: #fbbd08;
--color-box-body: #1d1d1d; --color-info-border: #306090;
--color-box-body-highlight: #202020; --color-info-bg: #26354c;
--color-text-dark: #ede8d0; --color-info-text: #38a8e8;
--color-text: #efead5; --color-priority-border: #4a268d;
--color-text-light: #c9c5b1; --color-priority-bg: #251c39;
--color-text-light-1: #b2ae9c; --color-priority-text: #a371f7;
--color-text-light-2: #9a9787; --color-red-badge: #db2828;
--color-text-light-3: #828072; --color-red-badge-bg: #db28281a;
--color-footer: var(--color-nav-bg); --color-red-badge-hover-bg: #db28284d;
--color-timeline: #343c44; --color-green-badge: #21ba45;
--color-input-text: var(--color-text-dark); --color-green-badge-bg: #21ba451a;
--color-input-background: #171a1e; --color-green-badge-hover-bg: #21ba454d;
--color-input-toggle-background: #2e353c; --color-yellow-badge: #fbbd08;
--color-input-border: var(--color-secondary); --color-yellow-badge-bg: #fbbd081a;
--color-input-border-hover: var(--color-secondary-dark-1); --color-yellow-badge-hover-bg: #fbbd084d;
--color-light: #00001728; --color-orange-badge: #f2711c;
--color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); --color-orange-badge-bg: #f2711c1a;
--color-light-border: #e8f3ff28; --color-orange-badge-hover-bg: #f2711c4d;
--color-hover: #e8f3ff19; --color-git: #f05133;
--color-hover-opaque: #21252a; /* TODO: color-mix(in srgb, var(--color-body), var(--color-hover)); */ --color-logo: #f2b134;
--color-active: #e8f3ff24; /* target-based colors */
--color-menu: #1f1f1f; --color-body: #222222;
--color-card: #1f1f1f; --color-box-header: #1f1f1f;
--color-markup-table-row: #e8f3ff0f; --color-box-body: #1d1d1d;
--color-markup-code-block: #e8f3ff12; --color-box-body-highlight: #202020;
--color-markup-code-inline: #e8f3ff28; --color-text-dark: #ede8d0;
--color-button: #1f1f1f; --color-text: #efead5;
--color-code-bg: #1d1d1d; --color-text-light: #c9c5b1;
--color-shadow: #00001758; --color-text-light-1: #b2ae9c;
--color-shadow-opaque: #000017; --color-text-light-2: #9a9787;
--color-secondary-bg: #202020; --color-text-light-3: #828072;
--color-expand-button: #2f363d; --color-footer: var(--color-nav-bg);
--color-placeholder-text: var(--color-text-light-3); --color-timeline: #343c44;
--color-editor-line-highlight: var(--color-primary-light-5); --color-input-text: var(--color-text-dark);
--color-project-column-bg: var(--color-secondary-light-2); --color-input-background: #171a1e;
--color-caret: var(--color-text); /* should ideally be --color-text-dark, see #15651 */ --color-input-toggle-background: #2e353c;
--color-reaction-bg: #e8f3ff12; --color-input-border: var(--color-secondary);
--color-reaction-hover-bg: var(--color-primary-light-4); --color-input-border-hover: var(--color-secondary-dark-1);
--color-reaction-active-bg: var(--color-primary-light-5); --color-light: #00001728;
--color-tooltip-text: #f9fafb; --color-light-mimic-enabled: rgba(
--color-tooltip-bg: #000b17f0; 0,
--color-nav-bg: #1e1e1e; 0,
--color-nav-hover-bg: #212121; 0,
--color-nav-text: var(--color-text); calc(40 / 255 * 222 / 255 / var(--opacity-disabled))
--color-secondary-nav-bg: #1f1f1f; );
--color-label-text: var(--color-text); --color-light-border: #e8f3ff28;
--color-label-bg: #7282924b; --color-hover: #e8f3ff19;
--color-label-hover-bg: #728292a0; --color-hover-opaque: #21252a; /* TODO: color-mix(in srgb, var(--color-body), var(--color-hover)); */
--color-label-active-bg: #728292ff; --color-active: #e8f3ff24;
--color-accent: var(--color-primary-light-1); --color-menu: #1f1f1f;
--color-small-accent: var(--color-primary-light-5); --color-card: #1f1f1f;
--color-highlight-fg: #f2b134; --color-markup-table-row: #e8f3ff0f;
--color-highlight-bg: #6b5428; --color-markup-code-block: #e8f3ff12;
--color-overlay-backdrop: #080808c0; --color-markup-code-inline: #e8f3ff28;
accent-color: var(--color-accent); --color-button: #1f1f1f;
color-scheme: dark; --color-code-bg: #1d1d1d;
--color-shadow: #00001758;
--color-shadow-opaque: #000017;
--color-secondary-bg: #202020;
--color-expand-button: #2f363d;
--color-placeholder-text: var(--color-text-light-3);
--color-editor-line-highlight: var(--color-primary-light-5);
--color-editor-selection: var(--color-primary-alpha-50);
--color-project-column-bg: var(--color-secondary-light-2);
--color-caret: var(
--color-text
); /* should ideally be --color-text-dark, see #15651 */
--color-reaction-bg: #e8f3ff12;
--color-reaction-hover-bg: var(--color-primary-light-4);
--color-reaction-active-bg: var(--color-primary-light-5);
--color-tooltip-text: #f9fafb;
--color-tooltip-bg: #000b17f0;
--color-nav-bg: #1e1e1e;
--color-nav-hover-bg: #212121;
--color-nav-text: var(--color-text);
--color-secondary-nav-bg: #1f1f1f;
--color-label-text: var(--color-text);
--color-label-bg: #7282924b;
--color-label-hover-bg: #728292a0;
--color-label-active-bg: #728292ff;
--color-accent: var(--color-primary-light-1);
--color-small-accent: var(--color-primary-light-5);
--color-highlight-fg: #f2b134;
--color-highlight-bg: #6b5428;
--color-overlay-backdrop: #080808c0;
--color-danger: var(--color-red);
--color-transparency-grid-light: #2a2a2a;
--color-transparency-grid-dark: #1a1a1a;
--color-workflow-edge-hover: #666a73;
--color-syntax-keyword: #ff8854;
--color-syntax-bool: #25bbc9;
--color-syntax-control: #dd9e17;
--color-syntax-name: #fabd2f;
--color-syntax-type: #eb8cb3;
--color-syntax-number: #63b2dd;
--color-syntax-operator: #ff8854;
--color-syntax-regexp: #b89de4;
--color-syntax-string: #95b62a;
--color-syntax-comment: #8898b0;
--color-syntax-invalid: #ff8686;
--color-syntax-link: var(--color-primary);
--color-syntax-tag: #ff8854;
--color-syntax-attribute: #c792ff;
--color-syntax-property: #55afff;
--color-syntax-variable: #e29b33;
--color-syntax-string-special: #dd9e17;
--color-syntax-escape: #c7a618;
--color-syntax-entity: #c792ff;
--color-syntax-preproc: #4cbe7a;
--color-syntax-preproc-file: #63b2dd;
--color-syntax-decorator: #4cbe7a;
--color-syntax-namespace: #c9d1d9;
--color-syntax-name-pseudo: #c792ff;
--color-syntax-comment-special: #b89de4;
--color-syntax-text: #c9d1d9;
--color-syntax-text-alt: #b9bcc7;
--color-syntax-punctuation: #d2d4db;
--color-syntax-whitespace: #7f8699;
--color-syntax-diff-fg: #ffffff;
--color-syntax-deleted-bg: #5f3737;
--color-syntax-inserted-bg: #3a523a;
--color-syntax-emph: #d1a242;
--color-syntax-strong: #e29b33;
--color-syntax-heading: #dd9e17;
--color-syntax-subheading: #95b62a;
--color-syntax-output: #8898b0;
--color-syntax-prompt: #e29b33;
--color-syntax-traceback: #ff8686;
--color-syntax-matching-bracket-bg: #00918a48;
--color-syntax-nonmatching-bracket-bg: #cc484848;
accent-color: var(--color-accent);
color-scheme: dark;
} }
/* invert emojis that are hard to read otherwise */ /* invert emojis that are hard to read otherwise */
@@ -283,20 +357,20 @@ gitea-theme-meta-info {
.emoji[aria-label="paw prints"], .emoji[aria-label="paw prints"],
.emoji[aria-label="musical note"], .emoji[aria-label="musical note"],
.emoji[aria-label="musical notes"] { .emoji[aria-label="musical notes"] {
filter: invert(100%) hue-rotate(180deg); filter: invert(100%) hue-rotate(180deg);
} }
/* CodeCraftsmen brand typography (falls back gracefully if custom fonts are not installed) */ /* CodeCraftsmen brand typography (falls back gracefully if custom fonts are not installed) */
:root { :root {
--cc-font-body: "Gotham", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; --cc-font-body:
--cc-font-heading: "alro", "Gotham", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial; "Gotham", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
--cc-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
} --cc-font-heading:
"alro", "Gotham", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
html[data-theme="codecraftsmen-dark"] #navbar-logo img { Roboto, Helvetica, Arial;
content: url("../img/logo-dark-no-slogan.svg"); --cc-font-mono:
width: 60px; ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
height: 30px; "Liberation Mono", "Courier New", monospace;
} }
body, body,
@@ -305,7 +379,7 @@ textarea,
select, select,
button, button,
small { small {
font-family: var(--cc-font-body); font-family: var(--cc-font-body);
} }
h1, h1,
@@ -317,8 +391,9 @@ h6,
.ui.header, .ui.header,
.page-title, .page-title,
.repository .ui.header { .repository .ui.header {
font-family: var(--cc-font-heading); font-family: var(--cc-font-heading);
letter-spacing: 0.02em; font-weight: 700;
letter-spacing: 0.02em;
} }
code, code,
@@ -326,5 +401,5 @@ pre,
kbd, kbd,
samp, samp,
.monospace { .monospace {
font-family: var(--cc-font-mono); font-family: var(--cc-font-mono);
} }
public/assets/css/theme-codecraftsmen-light.css
+339 -266
View File
@@ -1,278 +1,350 @@
@import "./theme-gitea-light.css";
gitea-theme-meta-info { gitea-theme-meta-info {
--theme-display-name: "CodeCraftsmen Light"; --theme-display-name: "CodeCraftsmen Light";
--theme-color-scheme: "light"; --theme-color-scheme: "light";
} }
@font-face { @font-face {
font-family: "Gotham"; font-family: "Gotham";
src: url("../fonts/GothamNarrow-Medium.woff2") format("woff2"); src: url("../fonts/GothamNarrow-Medium.woff2") format("woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: "alro"; font-family: "alro";
src: url("../fonts/alro-bold-700.woff2") format("woff2"); src: url("../fonts/alro-bold-700.woff2") format("woff2");
font-weight: 400; font-weight: 700;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
:root { :root {
--is-dark-theme: false; --is-dark-theme: false;
--color-primary: #003f7f; --color-primary: #003f7f;
--color-primary-contrast: #ffffff; --color-primary-contrast: #ffffff;
--color-primary-dark-1: #003972; --color-primary-dark-1: #003972;
--color-primary-dark-2: #003266; --color-primary-dark-2: #003266;
--color-primary-dark-3: #002c59; --color-primary-dark-3: #002c59;
--color-primary-dark-4: #00264c; --color-primary-dark-4: #00264c;
--color-primary-dark-5: #001933; --color-primary-dark-5: #001933;
--color-primary-dark-6: #000d19; --color-primary-dark-6: #000d19;
--color-primary-dark-7: #00050a; --color-primary-dark-7: #00050a;
--color-primary-light-1: #1a528c; --color-primary-light-1: #1a528c;
--color-primary-light-2: #336599; --color-primary-light-2: #336599;
--color-primary-light-3: #4c79a5; --color-primary-light-3: #4c79a5;
--color-primary-light-4: #668cb2; --color-primary-light-4: #668cb2;
--color-primary-light-5: #99b2cc; --color-primary-light-5: #99b2cc;
--color-primary-light-6: #ccd9e5; --color-primary-light-6: #ccd9e5;
--color-primary-light-7: #ebf0f5; --color-primary-light-7: #ebf0f5;
--color-primary-alpha-10: #003f7f19; --color-primary-alpha-10: #003f7f19;
--color-primary-alpha-20: #003f7f33; --color-primary-alpha-20: #003f7f33;
--color-primary-alpha-30: #003f7f4c; --color-primary-alpha-30: #003f7f4c;
--color-primary-alpha-40: #003f7f66; --color-primary-alpha-40: #003f7f66;
--color-primary-alpha-50: #003f7f7f; --color-primary-alpha-50: #003f7f7f;
--color-primary-alpha-60: #003f7f99; --color-primary-alpha-60: #003f7f99;
--color-primary-alpha-70: #003f7fb2; --color-primary-alpha-70: #003f7fb2;
--color-primary-alpha-80: #003f7fcc; --color-primary-alpha-80: #003f7fcc;
--color-primary-alpha-90: #003f7fe5; --color-primary-alpha-90: #003f7fe5;
--color-primary-hover: var(--color-primary-dark-1); --color-primary-hover: var(--color-primary-dark-1);
--color-primary-active: var(--color-primary-dark-2); --color-primary-active: var(--color-primary-dark-2);
--color-secondary: #c9c5b1; --color-secondary: #c9c5b1;
--color-secondary-dark-1: #bfbba8; --color-secondary-dark-1: #bfbba8;
--color-secondary-dark-2: #b5b19f; --color-secondary-dark-2: #b5b19f;
--color-secondary-dark-3: #a19e8e; --color-secondary-dark-3: #a19e8e;
--color-secondary-dark-4: #918e7f; --color-secondary-dark-4: #918e7f;
--color-secondary-dark-5: #817e71; --color-secondary-dark-5: #817e71;
--color-secondary-dark-6: #716e63; --color-secondary-dark-6: #716e63;
--color-secondary-dark-7: #605f55; --color-secondary-dark-7: #605f55;
--color-secondary-dark-8: #504f47; --color-secondary-dark-8: #504f47;
--color-secondary-dark-9: #403f39; --color-secondary-dark-9: #403f39;
--color-secondary-dark-10: #302f2a; --color-secondary-dark-10: #302f2a;
--color-secondary-dark-11: #20201c; --color-secondary-dark-11: #20201c;
--color-secondary-dark-12: #10100e; --color-secondary-dark-12: #10100e;
--color-secondary-dark-13: #060605; --color-secondary-dark-13: #060605;
--color-secondary-light-1: #cfccba; --color-secondary-light-1: #cfccba;
--color-secondary-light-2: #d4d1c1; --color-secondary-light-2: #d4d1c1;
--color-secondary-light-3: #d8d5c7; --color-secondary-light-3: #d8d5c7;
--color-secondary-light-4: #dcdacd; --color-secondary-light-4: #dcdacd;
--color-secondary-alpha-10: #c9c5b119; --color-secondary-alpha-10: #c9c5b119;
--color-secondary-alpha-20: #c9c5b133; --color-secondary-alpha-20: #c9c5b133;
--color-secondary-alpha-30: #c9c5b14c; --color-secondary-alpha-30: #c9c5b14c;
--color-secondary-alpha-40: #c9c5b166; --color-secondary-alpha-40: #c9c5b166;
--color-secondary-alpha-50: #c9c5b17f; --color-secondary-alpha-50: #c9c5b17f;
--color-secondary-alpha-60: #c9c5b199; --color-secondary-alpha-60: #c9c5b199;
--color-secondary-alpha-70: #c9c5b1b2; --color-secondary-alpha-70: #c9c5b1b2;
--color-secondary-alpha-80: #c9c5b1cc; --color-secondary-alpha-80: #c9c5b1cc;
--color-secondary-alpha-90: #c9c5b1e5; --color-secondary-alpha-90: #c9c5b1e5;
--color-secondary-button: var(--color-secondary-dark-4); --color-secondary-button: var(--color-secondary-dark-4);
--color-secondary-hover: var(--color-secondary-dark-5); --color-secondary-hover: var(--color-secondary-dark-5);
--color-secondary-active: var(--color-secondary-dark-6); --color-secondary-active: var(--color-secondary-dark-6);
/* console colors - used for actions console and console files */ /* console colors - used for actions console and console files */
--color-console-fg: #f7f8f9; --color-console-fg: #f7f8f9;
--color-console-fg-subtle: #bdc4cc; --color-console-fg-subtle: #bdc4cc;
--color-console-bg: #171b1e; --color-console-bg: #171b1e;
--color-console-border: #2e353b; --color-console-border: #2e353b;
--color-console-hover-bg: #272d33; --color-console-hover-bg: #272d33;
--color-console-active-bg: #2e353b; --color-console-active-bg: #2e353b;
--color-console-menu-bg: #262b31; --color-console-menu-bg: #262b31;
--color-console-menu-border: #414b55; --color-console-menu-border: #414b55;
/* named colors */ --color-console-link: #5c656d;
--color-red: #d52b1e; /* named colors */
--color-orange: #f2711c; --color-red: #d52b1e;
--color-yellow: #f2b134; --color-orange: #f2711c;
--color-olive: #b5cc18; --color-yellow: #f2b134;
--color-green: #21ba45; --color-olive: #b5cc18;
--color-teal: #00b5ad; --color-green: #21ba45;
--color-blue: #003f7f; --color-teal: #00b5ad;
--color-violet: #6435c9; --color-blue: #003f7f;
--color-purple: #a333c8; --color-violet: #6435c9;
--color-pink: #e03997; --color-purple: #a333c8;
--color-brown: #7a5230; --color-pink: #e03997;
--color-black: #222222; --color-brown: #7a5230;
/* light variants - produced via Sass scale-color(color, $lightness: +25%) */ --color-black: #222222;
--color-red-light: #e06056; /* light variants - produced via Sass scale-color(color, $lightness: +25%) */
--color-orange-light: #f59555; --color-red-light: #e06056;
--color-yellow-light: #f5c467; --color-orange-light: #f59555;
--color-olive-light: #d3e942; --color-yellow-light: #f5c467;
--color-green-light: #46de6a; --color-olive-light: #d3e942;
--color-teal-light: #08fff4; --color-green-light: #46de6a;
--color-blue-light: #406f9f; --color-teal-light: #08fff4;
--color-violet-light: #8b67d7; --color-blue-light: #406f9f;
--color-purple-light: #bb64d8; --color-violet-light: #8b67d7;
--color-pink-light: #e86bb1; --color-purple-light: #bb64d8;
--color-brown-light: #9b7d64; --color-pink-light: #e86bb1;
--color-black-light: #595959; --color-brown-light: #9b7d64;
/* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */ --color-black-light: #595959;
--color-red-dark-1: #c0271b; /* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */
--color-orange-dark-1: #e6630d; --color-red-dark-1: #c0271b;
--color-yellow-dark-1: #da9f2f; --color-orange-dark-1: #e6630d;
--color-olive-dark-1: #a3b816; --color-yellow-dark-1: #da9f2f;
--color-green-dark-1: #1ea73e; --color-olive-dark-1: #a3b816;
--color-teal-dark-1: #00a39c; --color-green-dark-1: #1ea73e;
--color-blue-dark-1: #003972; --color-teal-dark-1: #00a39c;
--color-violet-dark-1: #5a30b5; --color-blue-dark-1: #003972;
--color-purple-dark-1: #932eb4; --color-violet-dark-1: #5a30b5;
--color-pink-dark-1: #db228a; --color-purple-dark-1: #932eb4;
--color-brown-dark-1: #6e4a2b; --color-pink-dark-1: #db228a;
--color-black-dark-1: #1f1f1f; --color-brown-dark-1: #6e4a2b;
/* dark 2 variants - produced via Sass scale-color(color, $lightness: -20%) */ --color-black-dark-1: #1f1f1f;
--color-red-dark-2: #aa2218; /* dark 2 variants - produced via Sass scale-color(color, $lightness: -20%) */
--color-orange-dark-2: #cc580c; --color-red-dark-2: #aa2218;
--color-yellow-dark-2: #c28e2a; --color-orange-dark-2: #cc580c;
--color-olive-dark-2: #91a313; --color-yellow-dark-2: #c28e2a;
--color-green-dark-2: #1a9537; --color-olive-dark-2: #91a313;
--color-teal-dark-2: #00918a; --color-green-dark-2: #1a9537;
--color-blue-dark-2: #003266; --color-teal-dark-2: #00918a;
--color-violet-dark-2: #502aa1; --color-blue-dark-2: #003266;
--color-purple-dark-2: #8229a0; --color-violet-dark-2: #502aa1;
--color-pink-dark-2: #c21e7b; --color-purple-dark-2: #8229a0;
--color-brown-dark-2: #624226; --color-pink-dark-2: #c21e7b;
--color-black-dark-2: #1b1b1b; --color-brown-dark-2: #624226;
/* ansi colors used for actions console and console files */ --color-black-dark-2: #1b1b1b;
--color-ansi-black: #1e2327; /* ansi colors used for actions console and console files */
--color-ansi-red: #d52b1e; --color-ansi-black: #1e2327;
--color-ansi-green: #87ab63; --color-ansi-red: #d52b1e;
--color-ansi-yellow: #c28e2a; --color-ansi-green: #87ab63;
--color-ansi-blue: #003f7f; --color-ansi-yellow: #c28e2a;
--color-ansi-magenta: #d22e8b; --color-ansi-blue: #003f7f;
--color-ansi-cyan: #00918a; --color-ansi-magenta: #d22e8b;
--color-ansi-white: var(--color-console-fg-subtle); --color-ansi-cyan: #00918a;
--color-ansi-bright-black: #46494d; --color-ansi-white: var(--color-console-fg-subtle);
--color-ansi-bright-red: #e06056; --color-ansi-bright-black: #46494d;
--color-ansi-bright-green: #93b373; --color-ansi-bright-red: #e06056;
--color-ansi-bright-yellow: #f5c467; --color-ansi-bright-green: #93b373;
--color-ansi-bright-blue: #406f9f; --color-ansi-bright-yellow: #f5c467;
--color-ansi-bright-magenta: #d74397; --color-ansi-bright-blue: #406f9f;
--color-ansi-bright-cyan: #00b6ad; --color-ansi-bright-magenta: #d74397;
--color-ansi-bright-white: var(--color-console-fg); --color-ansi-bright-cyan: #00b6ad;
/* other colors */ --color-ansi-bright-white: var(--color-console-fg);
--color-grey: #697077; /* 16-color series */
--color-grey-light: #7c838a; --color-series-16-0: #7db233;
--color-gold: #a1882b; --color-series-16-1: #499a37;
--color-white: #ffffff; --color-series-16-2: #ce4751;
--color-diff-added-linenum-bg: #d1f8d9; --color-series-16-3: #8f9121;
--color-diff-added-row-bg: #e6ffed; --color-series-16-4: #ac32a6;
--color-diff-added-row-border: #e6ffed; --color-series-16-5: #7445e9;
--color-diff-added-word-bg: #acf2bd; --color-series-16-6: #c67d28;
--color-diff-moved-row-bg: #f1f8d1; --color-series-16-7: #4db392;
--color-diff-moved-row-border: #d0e27f; --color-series-16-8: #aa4d30;
--color-diff-removed-linenum-bg: #ffcecb; --color-series-16-9: #2a6f84;
--color-diff-removed-row-bg: #ffeef0; --color-series-16-10: #c45327;
--color-diff-removed-row-border: #f1c0c0; --color-series-16-11: #3d965c;
--color-diff-removed-word-bg: #fdb8c0; --color-series-16-12: #792a93;
--color-diff-inactive: #f0f2f4; --color-series-16-13: #439d73;
--color-error-border: #e0b4b4; --color-series-16-14: #103aad;
--color-error-bg: #fff6f6; --color-series-16-15: #982e85;
--color-error-bg-active: #fbb; /* other colors */
--color-error-bg-hover: #fdd; --color-grey: #697077;
--color-error-text: #9f3a38; --color-grey-light: #7c838a;
--color-success-border: #a3c293; --color-gold: #a1882b;
--color-success-bg: #fcfff5; --color-white: #ffffff;
--color-success-text: #2c662d; --color-diff-added-fg: #177231;
--color-warning-border: #c9ba9b; --color-diff-added-linenum-bg: #d1f8d9;
--color-warning-bg: #fffaf3; --color-diff-added-row-bg: #e6ffed;
--color-warning-text: #573a08; --color-diff-added-row-border: #e6ffed;
--color-info-border: #a9d5de; --color-diff-added-word-bg: #acf2bd;
--color-info-bg: #f8ffff; --color-diff-moved-row-bg: #f1f8d1;
--color-info-text: #276f86; --color-diff-moved-row-border: #d0e27f;
--color-red-badge: #db2828; --color-diff-removed-fg: #c61f2b;
--color-red-badge-bg: #db28281a; --color-diff-removed-linenum-bg: #ffcecb;
--color-red-badge-hover-bg: #db28284d; --color-diff-removed-row-bg: #ffeef0;
--color-green-badge: #21ba45; --color-diff-removed-row-border: #f1c0c0;
--color-green-badge-bg: #21ba451a; --color-diff-removed-word-bg: #fdb8c0;
--color-green-badge-hover-bg: #21ba454d; --color-diff-inactive: #f0f2f4;
--color-yellow-badge: #fbbd08; --color-error-border: #e0b4b4;
--color-yellow-badge-bg: #fbbd081a; --color-error-bg: #fff6f6;
--color-yellow-badge-hover-bg: #fbbd084d; --color-error-bg-active: #fbb;
--color-orange-badge: #f2711c; --color-error-bg-hover: #fdd;
--color-orange-badge-bg: #f2711c1a; --color-error-text: #9f3a38;
--color-orange-badge-hover-bg: #f2711c4d; --color-success-border: #a3c293;
--color-git: #f05133; --color-success-bg: #fcfff5;
--color-logo: #003f7f; --color-success-text: #2c662d;
/* target-based colors */ --color-warning-border: #c9ba9b;
--color-body: #ffffff; --color-warning-bg: #fffaf3;
--color-box-header: #f1edd9; --color-warning-text: #573a08;
--color-box-body: #ffffff; --color-info-border: #a9d5de;
--color-box-body-highlight: #f2efde; --color-info-bg: #f8ffff;
--color-text-dark: #222222; --color-info-text: #276f86;
--color-text: #222222; --color-priority-border: #b9a1ff66;
--color-text-light: #595959; --color-priority-bg: #f3e7ff;
--color-text-light-1: #6f6f6f; --color-priority-text: #8250df;
--color-text-light-2: #858585; --color-red-badge: #db2828;
--color-text-light-3: #9c9c9c; --color-red-badge-bg: #db28281a;
--color-footer: var(--color-nav-bg); --color-red-badge-hover-bg: #db28284d;
--color-timeline: #d0d7de; --color-green-badge: #21ba45;
--color-input-text: var(--color-text-dark); --color-green-badge-bg: #21ba451a;
--color-input-background: #fff; --color-green-badge-hover-bg: #21ba454d;
--color-input-toggle-background: #d0d7de; --color-yellow-badge: #fbbd08;
--color-input-border: var(--color-secondary); --color-yellow-badge-bg: #fbbd081a;
--color-input-border-hover: var(--color-secondary-dark-1); --color-yellow-badge-hover-bg: #fbbd084d;
--color-light: #00001706; --color-orange-badge: #f2711c;
--color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled))); --color-orange-badge-bg: #f2711c1a;
--color-light-border: #0000171d; --color-orange-badge-hover-bg: #f2711c4d;
--color-hover: #00001708; --color-git: #f05133;
--color-hover-opaque: #f1f3f5; /* TODO: color-mix(in srgb, var(--color-body), var(--color-hover)); */ --color-logo: #003f7f;
--color-active: #00001714; /* target-based colors */
--color-menu: #f0ecd8; --color-body: #ffffff;
--color-card: #f0ecd8; --color-box-header: #f1edd9;
--color-markup-table-row: #0030600a; --color-box-body: #ffffff;
--color-markup-code-block: #00306010; --color-box-body-highlight: #f2efde;
--color-markup-code-inline: #00306012; --color-text-dark: #222222;
--color-button: #f0ecd8; --color-text: #222222;
--color-code-bg: #f2eedc; --color-text-light: #595959;
--color-shadow: #00001726; --color-text-light-1: #6f6f6f;
--color-shadow-opaque: #c7ced5; --color-text-light-2: #858585;
--color-secondary-bg: #f1edda; --color-text-light-3: #9c9c9c;
--color-expand-button: #cfe8fa; --color-footer: var(--color-nav-bg);
--color-placeholder-text: var(--color-text-light-3); --color-timeline: #d0d7de;
--color-editor-line-highlight: var(--color-primary-light-6); --color-input-text: var(--color-text-dark);
--color-project-column-bg: var(--color-secondary-light-4); --color-input-background: #fff;
--color-caret: var(--color-text-dark); --color-input-toggle-background: #d0d7de;
--color-reaction-bg: #0000170a; --color-input-border: var(--color-secondary);
--color-reaction-hover-bg: var(--color-primary-light-5); --color-input-border-hover: var(--color-secondary-dark-1);
--color-reaction-active-bg: var(--color-primary-light-6); --color-light: #00001706;
--color-tooltip-text: #fbfdff; --color-light-mimic-enabled: rgba(
--color-tooltip-bg: #000017f0; 0,
--color-nav-bg: #ede8d0; 0,
--color-nav-hover-bg: #f0ecd8; 0,
--color-nav-text: var(--color-text); calc(6 / 255 * 222 / 255 / var(--opacity-disabled))
--color-secondary-nav-bg: #efebd6; );
--color-label-text: var(--color-text); --color-light-border: #0000171d;
--color-label-bg: #949da64b; --color-hover: #00001708;
--color-label-hover-bg: #949da6a0; --color-hover-opaque: #f1f3f5; /* TODO: color-mix(in srgb, var(--color-body), var(--color-hover)); */
--color-label-active-bg: #949da6ff; --color-active: #00001714;
--color-accent: var(--color-primary-light-1); --color-menu: #f0ecd8;
--color-small-accent: var(--color-primary-light-6); --color-card: #f0ecd8;
--color-highlight-fg: #7a5230; --color-markup-table-row: #0030600a;
--color-highlight-bg: #fae4b8; --color-markup-code-block: #00306010;
--color-overlay-backdrop: #080808c0; --color-markup-code-inline: #00306012;
accent-color: var(--color-accent); --color-button: #f0ecd8;
color-scheme: light; --color-code-bg: #f2eedc;
--color-shadow: #00001726;
--color-shadow-opaque: #c7ced5;
--color-secondary-bg: #f1edda;
--color-expand-button: #cfe8fa;
--color-placeholder-text: var(--color-text-light-3);
--color-editor-line-highlight: var(--color-primary-light-6);
--color-editor-selection: var(--color-primary-alpha-30);
--color-project-column-bg: var(--color-secondary-light-4);
--color-caret: var(--color-text-dark);
--color-reaction-bg: #0000170a;
--color-reaction-hover-bg: var(--color-primary-light-5);
--color-reaction-active-bg: var(--color-primary-light-6);
--color-tooltip-text: #fbfdff;
--color-tooltip-bg: #000017f0;
--color-nav-bg: #ede8d0;
--color-nav-hover-bg: #f0ecd8;
--color-nav-text: var(--color-text);
--color-secondary-nav-bg: #efebd6;
--color-label-text: var(--color-text);
--color-label-bg: #949da64b;
--color-label-hover-bg: #949da6a0;
--color-label-active-bg: #949da6ff;
--color-accent: var(--color-primary-light-1);
--color-small-accent: var(--color-primary-light-6);
--color-highlight-fg: #7a5230;
--color-highlight-bg: #fae4b8;
--color-overlay-backdrop: #080808c0;
--color-danger: var(--color-red);
--color-transparency-grid-light: #fafafa;
--color-transparency-grid-dark: #e2e2e2;
--color-workflow-edge-hover: #b1b7bd;
--color-syntax-keyword: #a73a00;
--color-syntax-bool: #076872;
--color-syntax-control: #7d5700;
--color-syntax-name: #785900;
--color-syntax-type: #ae2368;
--color-syntax-number: #105ead;
--color-syntax-operator: #a73a00;
--color-syntax-regexp: #773dc5;
--color-syntax-string: #456800;
--color-syntax-comment: #506070;
--color-syntax-invalid: #c00000;
--color-syntax-link: var(--color-primary);
--color-syntax-tag: #a73a00;
--color-syntax-attribute: #6f41c5;
--color-syntax-property: #2060a0;
--color-syntax-variable: #944a00;
--color-syntax-string-special: #7d5700;
--color-syntax-escape: #785900;
--color-syntax-entity: #6f41c5;
--color-syntax-preproc: #2d6a4b;
--color-syntax-preproc-file: #105ead;
--color-syntax-decorator: #2d6a4b;
--color-syntax-namespace: #555555;
--color-syntax-name-pseudo: #6f41c5;
--color-syntax-comment-special: #773dc5;
--color-syntax-text: inherit;
--color-syntax-text-alt: #47525b;
--color-syntax-punctuation: inherit;
--color-syntax-whitespace: #bbbbbb;
--color-syntax-diff-fg: #000000;
--color-syntax-deleted-bg: #ffdddd;
--color-syntax-inserted-bg: #ddffdd;
--color-syntax-emph: #8b5000;
--color-syntax-strong: inherit;
--color-syntax-heading: #7d5700;
--color-syntax-subheading: #456800;
--color-syntax-output: #506070;
--color-syntax-prompt: #944a00;
--color-syntax-traceback: #c00000;
--color-syntax-matching-bracket-bg: #00b5ad38;
--color-syntax-nonmatching-bracket-bg: #db282838;
accent-color: var(--color-accent);
color-scheme: light;
} }
/* CodeCraftsmen brand typography (falls back gracefully if custom fonts are not installed) */ /* CodeCraftsmen brand typography (falls back gracefully if custom fonts are not installed) */
:root { :root {
--cc-font-body: "Gotham", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; --cc-font-body:
--cc-font-heading: "alro", "Gotham", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial; "Gotham", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
--cc-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
} --cc-font-heading:
"alro", "Gotham", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
html[data-theme="codecraftsmen-light"] #navbar-logo img { Roboto, Helvetica, Arial;
content: url("../img/logo-light-no-slogan.svg"); --cc-font-mono:
width: 60px; ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
height: 30px; "Liberation Mono", "Courier New", monospace;
} }
body, body,
@@ -281,7 +353,7 @@ textarea,
select, select,
button, button,
small { small {
font-family: var(--cc-font-body); font-family: var(--cc-font-body);
} }
h1, h1,
@@ -293,8 +365,9 @@ h6,
.ui.header, .ui.header,
.page-title, .page-title,
.repository .ui.header { .repository .ui.header {
font-family: var(--cc-font-heading); font-family: var(--cc-font-heading);
letter-spacing: 0.02em; font-weight: 700;
letter-spacing: 0.02em;
} }
code, code,
@@ -302,5 +375,5 @@ pre,
kbd, kbd,
samp, samp,
.monospace { .monospace {
font-family: var(--cc-font-mono); font-family: var(--cc-font-mono);
} }
templates/custom/header.tmpl
+1
View File
@@ -1,3 +1,4 @@
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/branding.css">
<!-- Privacy-friendly analytics by Plausible --> <!-- Privacy-friendly analytics by Plausible -->
<script nonce="{{ctx.CspScriptNonce}}" async src="https://plausible.colemaxwell.dev/js/pa-IVfYDjRQ-05CMcATP0ha3.js"></script> <script nonce="{{ctx.CspScriptNonce}}" async src="https://plausible.colemaxwell.dev/js/pa-IVfYDjRQ-05CMcATP0ha3.js"></script>
<script nonce="{{ctx.CspScriptNonce}}"> <script nonce="{{ctx.CspScriptNonce}}">