cole-maxwell1
b21d961929
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.
354 lines
11 KiB
CSS
354 lines
11 KiB
CSS
@import "./theme-gitea-dark.css";
|
|
|
|
gitea-theme-meta-info {
|
|
--theme-display-name: "CodeCraftsmen Dark";
|
|
--theme-color-scheme: "dark";
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Gotham";
|
|
src: url("../fonts/GothamNarrow-Medium.woff2") format("woff2");
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: "alro";
|
|
src: url("../fonts/alro-bold-700.woff2") format("woff2");
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
:root {
|
|
--is-dark-theme: true;
|
|
--color-primary: #7395b9;
|
|
--color-primary-contrast: #222222;
|
|
--color-primary-dark-1: #81a0c0;
|
|
--color-primary-dark-2: #8faac7;
|
|
--color-primary-dark-3: #9db5ce;
|
|
--color-primary-dark-4: #abbfd5;
|
|
--color-primary-dark-5: #c7d5e3;
|
|
--color-primary-dark-6: #e3eaf1;
|
|
--color-primary-dark-7: #f4f7f9;
|
|
--color-primary-light-1: #6886a6;
|
|
--color-primary-light-2: #5c7794;
|
|
--color-primary-light-3: #506882;
|
|
--color-primary-light-4: #45596f;
|
|
--color-primary-light-5: #2e3c4a;
|
|
--color-primary-light-6: #171e25;
|
|
--color-primary-light-7: #090c0f;
|
|
--color-primary-alpha-10: #7395b919;
|
|
--color-primary-alpha-20: #7395b933;
|
|
--color-primary-alpha-30: #7395b94c;
|
|
--color-primary-alpha-40: #7395b966;
|
|
--color-primary-alpha-50: #7395b97f;
|
|
--color-primary-alpha-60: #7395b999;
|
|
--color-primary-alpha-70: #7395b9b2;
|
|
--color-primary-alpha-80: #7395b9cc;
|
|
--color-primary-alpha-90: #7395b9e5;
|
|
--color-primary-hover: var(--color-primary-dark-1);
|
|
--color-primary-active: var(--color-primary-dark-2);
|
|
--color-secondary: #40403c;
|
|
--color-secondary-dark-1: #4a4a46;
|
|
--color-secondary-dark-2: #535350;
|
|
--color-secondary-dark-3: #5f5f5b;
|
|
--color-secondary-dark-4: #6a6a67;
|
|
--color-secondary-dark-5: #797976;
|
|
--color-secondary-dark-6: #898986;
|
|
--color-secondary-dark-7: #989896;
|
|
--color-secondary-dark-8: #a7a7a5;
|
|
--color-secondary-dark-9: #b6b6b5;
|
|
--color-secondary-dark-10: #c6c6c4;
|
|
--color-secondary-dark-11: #d5d5d4;
|
|
--color-secondary-dark-12: #e4e4e4;
|
|
--color-secondary-dark-13: #f0f0ef;
|
|
--color-secondary-light-1: #3b3b37;
|
|
--color-secondary-light-2: #363632;
|
|
--color-secondary-light-3: #31312e;
|
|
--color-secondary-light-4: #2c2c29;
|
|
--color-secondary-alpha-10: #40403c19;
|
|
--color-secondary-alpha-20: #40403c33;
|
|
--color-secondary-alpha-30: #40403c4c;
|
|
--color-secondary-alpha-40: #40403c66;
|
|
--color-secondary-alpha-50: #40403c7f;
|
|
--color-secondary-alpha-60: #40403c99;
|
|
--color-secondary-alpha-70: #40403cb2;
|
|
--color-secondary-alpha-80: #40403ccc;
|
|
--color-secondary-alpha-90: #40403ce5;
|
|
--color-secondary-button: var(--color-secondary-dark-4);
|
|
--color-secondary-hover: var(--color-secondary-dark-3);
|
|
--color-secondary-active: var(--color-secondary-dark-2);
|
|
/* console colors - used for actions console and console files */
|
|
--color-console-fg: #f7f8f9;
|
|
--color-console-fg-subtle: #bdc4cc;
|
|
--color-console-bg: #171b1e;
|
|
--color-console-border: #2e353b;
|
|
--color-console-hover-bg: #272d33;
|
|
--color-console-active-bg: #2e353b;
|
|
--color-console-menu-bg: #262b31;
|
|
--color-console-menu-border: #414b55;
|
|
/* named colors */
|
|
--color-red: #d52b1e;
|
|
--color-orange: #cc580c;
|
|
--color-yellow: #f2b134;
|
|
--color-olive: #91a313;
|
|
--color-green: #87ab63;
|
|
--color-teal: #00918a;
|
|
--color-blue: #7395b9;
|
|
--color-violet: #906ae1;
|
|
--color-purple: #b259d0;
|
|
--color-pink: #d22e8b;
|
|
--color-brown: #7a5230;
|
|
--color-black: #222222;
|
|
/* light variants - produced via Sass scale-color(color, $lightness: +10%) */
|
|
--color-red-light: #d94034;
|
|
--color-orange-light: #f6a066;
|
|
--color-yellow-light: #f3b948;
|
|
--color-olive-light: #abc016;
|
|
--color-green-light: #93b373;
|
|
--color-teal-light: #00b6ad;
|
|
--color-blue-light: #81a0c0;
|
|
--color-violet-light: #9b79e4;
|
|
--color-purple-light: #ba6ad5;
|
|
--color-pink-light: #d74397;
|
|
--color-brown-light: #876345;
|
|
--color-black-light: #383838;
|
|
/* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */
|
|
--color-red-dark-1: #c0271b;
|
|
--color-orange-dark-1: #f38236;
|
|
--color-yellow-dark-1: #da9f2f;
|
|
--color-olive-dark-1: #839311;
|
|
--color-green-dark-1: #7a9e55;
|
|
--color-teal-dark-1: #00837c;
|
|
--color-blue-dark-1: #6886a6;
|
|
--color-violet-dark-1: #7b4edb;
|
|
--color-purple-dark-1: #a742c9;
|
|
--color-pink-dark-1: #be297d;
|
|
--color-brown-dark-1: #6e4a2b;
|
|
--color-black-dark-1: #1f1f1f;
|
|
/* dark 2 variants - produced via Sass scale-color(color, $lightness: -20%) */
|
|
--color-red-dark-2: #aa2218;
|
|
--color-orange-dark-2: #f16e17;
|
|
--color-yellow-dark-2: #c28e2a;
|
|
--color-olive-dark-2: #74820f;
|
|
--color-green-dark-2: #6c8c4c;
|
|
--color-teal-dark-2: #00746e;
|
|
--color-blue-dark-2: #5c7794;
|
|
--color-violet-dark-2: #6733d6;
|
|
--color-purple-dark-2: #9834b9;
|
|
--color-pink-dark-2: #a9246f;
|
|
--color-brown-dark-2: #624226;
|
|
--color-black-dark-2: #1b1b1b;
|
|
/* ansi colors used for actions console and console files */
|
|
--color-ansi-black: #1e2327;
|
|
--color-ansi-red: #d52b1e;
|
|
--color-ansi-green: #87ab63;
|
|
--color-ansi-yellow: #c28e2a;
|
|
--color-ansi-blue: #7395b9;
|
|
--color-ansi-magenta: #d22e8b;
|
|
--color-ansi-cyan: #00918a;
|
|
--color-ansi-white: var(--color-console-fg-subtle);
|
|
--color-ansi-bright-black: #424851;
|
|
--color-ansi-bright-red: #d94034;
|
|
--color-ansi-bright-green: #93b373;
|
|
--color-ansi-bright-yellow: #f3b948;
|
|
--color-ansi-bright-blue: #81a0c0;
|
|
--color-ansi-bright-magenta: #d74397;
|
|
--color-ansi-bright-cyan: #00b6ad;
|
|
--color-ansi-bright-white: var(--color-console-fg);
|
|
/* other colors */
|
|
--color-grey: #384149;
|
|
--color-grey-light: #818f9e;
|
|
--color-gold: #b1983b;
|
|
--color-white: #ffffff;
|
|
--color-diff-added-linenum-bg: #274227;
|
|
--color-diff-added-row-bg: #203224;
|
|
--color-diff-added-row-border: #314a37;
|
|
--color-diff-added-word-bg: #3c653c;
|
|
--color-diff-moved-row-bg: #818044;
|
|
--color-diff-moved-row-border: #bcca6f;
|
|
--color-diff-removed-linenum-bg: #482121;
|
|
--color-diff-removed-row-bg: #301e1e;
|
|
--color-diff-removed-row-border: #634343;
|
|
--color-diff-removed-word-bg: #6f3333;
|
|
--color-diff-inactive: #22282d;
|
|
--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-logo: #f2b134;
|
|
/* target-based colors */
|
|
--color-body: #222222;
|
|
--color-box-header: #1f1f1f;
|
|
--color-box-body: #1d1d1d;
|
|
--color-box-body-highlight: #202020;
|
|
--color-text-dark: #ede8d0;
|
|
--color-text: #efead5;
|
|
--color-text-light: #c9c5b1;
|
|
--color-text-light-1: #b2ae9c;
|
|
--color-text-light-2: #9a9787;
|
|
--color-text-light-3: #828072;
|
|
--color-footer: var(--color-nav-bg);
|
|
--color-timeline: #343c44;
|
|
--color-input-text: var(--color-text-dark);
|
|
--color-input-background: #171a1e;
|
|
--color-input-toggle-background: #2e353c;
|
|
--color-input-border: var(--color-secondary);
|
|
--color-input-border-hover: var(--color-secondary-dark-1);
|
|
--color-light: #00001728;
|
|
--color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
|
|
--color-light-border: #e8f3ff28;
|
|
--color-hover: #e8f3ff19;
|
|
--color-hover-opaque: #21252a; /* TODO: color-mix(in srgb, var(--color-body), var(--color-hover)); */
|
|
--color-active: #e8f3ff24;
|
|
--color-menu: #1f1f1f;
|
|
--color-card: #1f1f1f;
|
|
--color-markup-table-row: #e8f3ff0f;
|
|
--color-markup-code-block: #e8f3ff12;
|
|
--color-markup-code-inline: #e8f3ff28;
|
|
--color-button: #1f1f1f;
|
|
--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-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;
|
|
accent-color: var(--color-accent);
|
|
color-scheme: dark;
|
|
}
|
|
|
|
/* invert emojis that are hard to read otherwise */
|
|
.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(100%) hue-rotate(180deg);
|
|
}
|
|
|
|
/* CodeCraftsmen brand typography (falls back gracefully if custom fonts are not installed) */
|
|
: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-heading: "alro", "Gotham", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
|
|
--cc-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
}
|
|
|
|
html[data-theme="codecraftsmen-dark"] #navbar #navbar-logo {
|
|
background-image: url("../img/logo-dark-no-slogan.svg");
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 60px 30px;
|
|
}
|
|
|
|
html[data-theme="codecraftsmen-dark"] #navbar #navbar-logo img {
|
|
visibility: hidden;
|
|
width: 60px;
|
|
height: 30px;
|
|
}
|
|
|
|
html[data-theme="codecraftsmen-dark"] .page-content.home img.logo {
|
|
display: none;
|
|
}
|
|
|
|
html[data-theme="codecraftsmen-dark"] .page-content.home .center:has(> img.logo)::before {
|
|
content: "";
|
|
display: block;
|
|
width: 220px;
|
|
height: 220px;
|
|
margin: 0 auto;
|
|
background-image: url("../img/logo-dark.svg");
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
}
|
|
|
|
body,
|
|
input,
|
|
textarea,
|
|
select,
|
|
button,
|
|
small {
|
|
font-family: var(--cc-font-body);
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
.ui.header,
|
|
.page-title,
|
|
.repository .ui.header {
|
|
font-family: var(--cc-font-heading);
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
code,
|
|
pre,
|
|
kbd,
|
|
samp,
|
|
.monospace {
|
|
font-family: var(--cc-font-mono);
|
|
}
|