diff --git a/public/assets/css/branding.css b/public/assets/css/branding.css new file mode 100644 index 0000000..0027cb6 --- /dev/null +++ b/public/assets/css/branding.css @@ -0,0 +1,115 @@ +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 { + display: none; +} + +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"); + } +} diff --git a/public/assets/css/theme-codecraftsmen-auto.css b/public/assets/css/theme-codecraftsmen-auto.css index 051c85e..2f0f9f1 100644 --- a/public/assets/css/theme-codecraftsmen-auto.css +++ b/public/assets/css/theme-codecraftsmen-auto.css @@ -1,54 +1,7 @@ @import "./theme-codecraftsmen-light.css" (prefers-color-scheme: light); @import "./theme-codecraftsmen-dark.css" (prefers-color-scheme: dark); -html[data-theme="codecraftsmen-auto"] #navbar #navbar-logo { - background-position: center; - background-repeat: no-repeat; - background-size: 60px 30px; -} - -html[data-theme="codecraftsmen-auto"] #navbar #navbar-logo img { - visibility: hidden; - width: 60px; - height: 30px; -} - -html[data-theme="codecraftsmen-auto"] .page-content.home img.logo { - display: none; -} - -html[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; -} - -@media (prefers-color-scheme: light) { - html[data-theme="codecraftsmen-auto"] #navbar #navbar-logo { - background-image: url("../img/logo-light-no-slogan.svg"); - } - - html[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[data-theme="codecraftsmen-auto"] #navbar #navbar-logo { - background-image: url("../img/logo-dark-no-slogan.svg"); - } - - html[data-theme="codecraftsmen-auto"] .page-content.home .center:has(> img.logo)::before { - background-image: url("../img/logo-dark.svg"); - } -} - gitea-theme-meta-info { - --theme-display-name: "CodeCraftsmen Auto"; - --theme-color-scheme: "auto"; + --theme-display-name: "CodeCraftsmen Auto"; + --theme-color-scheme: "auto"; } diff --git a/public/assets/css/theme-codecraftsmen-dark.css b/public/assets/css/theme-codecraftsmen-dark.css index b71fedb..a221870 100644 --- a/public/assets/css/theme-codecraftsmen-dark.css +++ b/public/assets/css/theme-codecraftsmen-dark.css @@ -1,265 +1,339 @@ -@import "./theme-gitea-dark.css"; - gitea-theme-meta-info { - --theme-display-name: "CodeCraftsmen Dark"; - --theme-color-scheme: "dark"; + --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-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; + 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; + --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; + --color-console-link: #969aa1; + /* 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); + /* 16-color series */ + --color-series-16-0: #7db233; + --color-series-16-1: #499a37; + --color-series-16-2: #ce4751; + --color-series-16-3: #8f9121; + --color-series-16-4: #ac32a6; + --color-series-16-5: #7445e9; + --color-series-16-6: #c67d28; + --color-series-16-7: #4db392; + --color-series-16-8: #aa4d30; + --color-series-16-9: #2a6f84; + --color-series-16-10: #c45327; + --color-series-16-11: #3d965c; + --color-series-16-12: #792a93; + --color-series-16-13: #439d73; + --color-series-16-14: #103aad; + --color-series-16-15: #982e85; + /* other colors */ + --color-grey: #384149; + --color-grey-light: #818f9e; + --color-gold: #b1983b; + --color-white: #ffffff; + --color-diff-added-fg: #93b373; + --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-fg: #fb5f5b; + --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-priority-border: #4a268d; + --color-priority-bg: #251c39; + --color-priority-text: #a371f7; + --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-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 */ @@ -283,43 +357,20 @@ gitea-theme-meta-info { .emoji[aria-label="paw prints"], .emoji[aria-label="musical note"], .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) */ :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; + --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; } body, @@ -328,7 +379,7 @@ textarea, select, button, small { - font-family: var(--cc-font-body); + font-family: var(--cc-font-body); } h1, @@ -340,8 +391,8 @@ h6, .ui.header, .page-title, .repository .ui.header { - font-family: var(--cc-font-heading); - letter-spacing: 0.02em; + font-family: var(--cc-font-heading); + letter-spacing: 0.02em; } code, @@ -349,5 +400,5 @@ pre, kbd, samp, .monospace { - font-family: var(--cc-font-mono); + font-family: var(--cc-font-mono); } diff --git a/public/assets/css/theme-codecraftsmen-light.css b/public/assets/css/theme-codecraftsmen-light.css index c077b3f..f9b3d33 100644 --- a/public/assets/css/theme-codecraftsmen-light.css +++ b/public/assets/css/theme-codecraftsmen-light.css @@ -1,301 +1,350 @@ -@import "./theme-gitea-light.css"; - gitea-theme-meta-info { - --theme-display-name: "CodeCraftsmen Light"; - --theme-color-scheme: "light"; + --theme-display-name: "CodeCraftsmen Light"; + --theme-color-scheme: "light"; } @font-face { - font-family: "Gotham"; - src: url("../fonts/GothamNarrow-Medium.woff2") format("woff2"); - font-weight: 400; - font-style: normal; - font-display: swap; + 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; + 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: false; - --color-primary: #003f7f; - --color-primary-contrast: #ffffff; - --color-primary-dark-1: #003972; - --color-primary-dark-2: #003266; - --color-primary-dark-3: #002c59; - --color-primary-dark-4: #00264c; - --color-primary-dark-5: #001933; - --color-primary-dark-6: #000d19; - --color-primary-dark-7: #00050a; - --color-primary-light-1: #1a528c; - --color-primary-light-2: #336599; - --color-primary-light-3: #4c79a5; - --color-primary-light-4: #668cb2; - --color-primary-light-5: #99b2cc; - --color-primary-light-6: #ccd9e5; - --color-primary-light-7: #ebf0f5; - --color-primary-alpha-10: #003f7f19; - --color-primary-alpha-20: #003f7f33; - --color-primary-alpha-30: #003f7f4c; - --color-primary-alpha-40: #003f7f66; - --color-primary-alpha-50: #003f7f7f; - --color-primary-alpha-60: #003f7f99; - --color-primary-alpha-70: #003f7fb2; - --color-primary-alpha-80: #003f7fcc; - --color-primary-alpha-90: #003f7fe5; - --color-primary-hover: var(--color-primary-dark-1); - --color-primary-active: var(--color-primary-dark-2); - --color-secondary: #c9c5b1; - --color-secondary-dark-1: #bfbba8; - --color-secondary-dark-2: #b5b19f; - --color-secondary-dark-3: #a19e8e; - --color-secondary-dark-4: #918e7f; - --color-secondary-dark-5: #817e71; - --color-secondary-dark-6: #716e63; - --color-secondary-dark-7: #605f55; - --color-secondary-dark-8: #504f47; - --color-secondary-dark-9: #403f39; - --color-secondary-dark-10: #302f2a; - --color-secondary-dark-11: #20201c; - --color-secondary-dark-12: #10100e; - --color-secondary-dark-13: #060605; - --color-secondary-light-1: #cfccba; - --color-secondary-light-2: #d4d1c1; - --color-secondary-light-3: #d8d5c7; - --color-secondary-light-4: #dcdacd; - --color-secondary-alpha-10: #c9c5b119; - --color-secondary-alpha-20: #c9c5b133; - --color-secondary-alpha-30: #c9c5b14c; - --color-secondary-alpha-40: #c9c5b166; - --color-secondary-alpha-50: #c9c5b17f; - --color-secondary-alpha-60: #c9c5b199; - --color-secondary-alpha-70: #c9c5b1b2; - --color-secondary-alpha-80: #c9c5b1cc; - --color-secondary-alpha-90: #c9c5b1e5; - --color-secondary-button: var(--color-secondary-dark-4); - --color-secondary-hover: var(--color-secondary-dark-5); - --color-secondary-active: var(--color-secondary-dark-6); - /* 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: #f2711c; - --color-yellow: #f2b134; - --color-olive: #b5cc18; - --color-green: #21ba45; - --color-teal: #00b5ad; - --color-blue: #003f7f; - --color-violet: #6435c9; - --color-purple: #a333c8; - --color-pink: #e03997; - --color-brown: #7a5230; - --color-black: #222222; - /* light variants - produced via Sass scale-color(color, $lightness: +25%) */ - --color-red-light: #e06056; - --color-orange-light: #f59555; - --color-yellow-light: #f5c467; - --color-olive-light: #d3e942; - --color-green-light: #46de6a; - --color-teal-light: #08fff4; - --color-blue-light: #406f9f; - --color-violet-light: #8b67d7; - --color-purple-light: #bb64d8; - --color-pink-light: #e86bb1; - --color-brown-light: #9b7d64; - --color-black-light: #595959; - /* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */ - --color-red-dark-1: #c0271b; - --color-orange-dark-1: #e6630d; - --color-yellow-dark-1: #da9f2f; - --color-olive-dark-1: #a3b816; - --color-green-dark-1: #1ea73e; - --color-teal-dark-1: #00a39c; - --color-blue-dark-1: #003972; - --color-violet-dark-1: #5a30b5; - --color-purple-dark-1: #932eb4; - --color-pink-dark-1: #db228a; - --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: #cc580c; - --color-yellow-dark-2: #c28e2a; - --color-olive-dark-2: #91a313; - --color-green-dark-2: #1a9537; - --color-teal-dark-2: #00918a; - --color-blue-dark-2: #003266; - --color-violet-dark-2: #502aa1; - --color-purple-dark-2: #8229a0; - --color-pink-dark-2: #c21e7b; - --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: #003f7f; - --color-ansi-magenta: #d22e8b; - --color-ansi-cyan: #00918a; - --color-ansi-white: var(--color-console-fg-subtle); - --color-ansi-bright-black: #46494d; - --color-ansi-bright-red: #e06056; - --color-ansi-bright-green: #93b373; - --color-ansi-bright-yellow: #f5c467; - --color-ansi-bright-blue: #406f9f; - --color-ansi-bright-magenta: #d74397; - --color-ansi-bright-cyan: #00b6ad; - --color-ansi-bright-white: var(--color-console-fg); - /* other colors */ - --color-grey: #697077; - --color-grey-light: #7c838a; - --color-gold: #a1882b; - --color-white: #ffffff; - --color-diff-added-linenum-bg: #d1f8d9; - --color-diff-added-row-bg: #e6ffed; - --color-diff-added-row-border: #e6ffed; - --color-diff-added-word-bg: #acf2bd; - --color-diff-moved-row-bg: #f1f8d1; - --color-diff-moved-row-border: #d0e27f; - --color-diff-removed-linenum-bg: #ffcecb; - --color-diff-removed-row-bg: #ffeef0; - --color-diff-removed-row-border: #f1c0c0; - --color-diff-removed-word-bg: #fdb8c0; - --color-diff-inactive: #f0f2f4; - --color-error-border: #e0b4b4; - --color-error-bg: #fff6f6; - --color-error-bg-active: #fbb; - --color-error-bg-hover: #fdd; - --color-error-text: #9f3a38; - --color-success-border: #a3c293; - --color-success-bg: #fcfff5; - --color-success-text: #2c662d; - --color-warning-border: #c9ba9b; - --color-warning-bg: #fffaf3; - --color-warning-text: #573a08; - --color-info-border: #a9d5de; - --color-info-bg: #f8ffff; - --color-info-text: #276f86; - --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: #003f7f; - /* target-based colors */ - --color-body: #ffffff; - --color-box-header: #f1edd9; - --color-box-body: #ffffff; - --color-box-body-highlight: #f2efde; - --color-text-dark: #222222; - --color-text: #222222; - --color-text-light: #595959; - --color-text-light-1: #6f6f6f; - --color-text-light-2: #858585; - --color-text-light-3: #9c9c9c; - --color-footer: var(--color-nav-bg); - --color-timeline: #d0d7de; - --color-input-text: var(--color-text-dark); - --color-input-background: #fff; - --color-input-toggle-background: #d0d7de; - --color-input-border: var(--color-secondary); - --color-input-border-hover: var(--color-secondary-dark-1); - --color-light: #00001706; - --color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled))); - --color-light-border: #0000171d; - --color-hover: #00001708; - --color-hover-opaque: #f1f3f5; /* TODO: color-mix(in srgb, var(--color-body), var(--color-hover)); */ - --color-active: #00001714; - --color-menu: #f0ecd8; - --color-card: #f0ecd8; - --color-markup-table-row: #0030600a; - --color-markup-code-block: #00306010; - --color-markup-code-inline: #00306012; - --color-button: #f0ecd8; - --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-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; - accent-color: var(--color-accent); - color-scheme: light; + --is-dark-theme: false; + --color-primary: #003f7f; + --color-primary-contrast: #ffffff; + --color-primary-dark-1: #003972; + --color-primary-dark-2: #003266; + --color-primary-dark-3: #002c59; + --color-primary-dark-4: #00264c; + --color-primary-dark-5: #001933; + --color-primary-dark-6: #000d19; + --color-primary-dark-7: #00050a; + --color-primary-light-1: #1a528c; + --color-primary-light-2: #336599; + --color-primary-light-3: #4c79a5; + --color-primary-light-4: #668cb2; + --color-primary-light-5: #99b2cc; + --color-primary-light-6: #ccd9e5; + --color-primary-light-7: #ebf0f5; + --color-primary-alpha-10: #003f7f19; + --color-primary-alpha-20: #003f7f33; + --color-primary-alpha-30: #003f7f4c; + --color-primary-alpha-40: #003f7f66; + --color-primary-alpha-50: #003f7f7f; + --color-primary-alpha-60: #003f7f99; + --color-primary-alpha-70: #003f7fb2; + --color-primary-alpha-80: #003f7fcc; + --color-primary-alpha-90: #003f7fe5; + --color-primary-hover: var(--color-primary-dark-1); + --color-primary-active: var(--color-primary-dark-2); + --color-secondary: #c9c5b1; + --color-secondary-dark-1: #bfbba8; + --color-secondary-dark-2: #b5b19f; + --color-secondary-dark-3: #a19e8e; + --color-secondary-dark-4: #918e7f; + --color-secondary-dark-5: #817e71; + --color-secondary-dark-6: #716e63; + --color-secondary-dark-7: #605f55; + --color-secondary-dark-8: #504f47; + --color-secondary-dark-9: #403f39; + --color-secondary-dark-10: #302f2a; + --color-secondary-dark-11: #20201c; + --color-secondary-dark-12: #10100e; + --color-secondary-dark-13: #060605; + --color-secondary-light-1: #cfccba; + --color-secondary-light-2: #d4d1c1; + --color-secondary-light-3: #d8d5c7; + --color-secondary-light-4: #dcdacd; + --color-secondary-alpha-10: #c9c5b119; + --color-secondary-alpha-20: #c9c5b133; + --color-secondary-alpha-30: #c9c5b14c; + --color-secondary-alpha-40: #c9c5b166; + --color-secondary-alpha-50: #c9c5b17f; + --color-secondary-alpha-60: #c9c5b199; + --color-secondary-alpha-70: #c9c5b1b2; + --color-secondary-alpha-80: #c9c5b1cc; + --color-secondary-alpha-90: #c9c5b1e5; + --color-secondary-button: var(--color-secondary-dark-4); + --color-secondary-hover: var(--color-secondary-dark-5); + --color-secondary-active: var(--color-secondary-dark-6); + /* 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; + --color-console-link: #5c656d; + /* named colors */ + --color-red: #d52b1e; + --color-orange: #f2711c; + --color-yellow: #f2b134; + --color-olive: #b5cc18; + --color-green: #21ba45; + --color-teal: #00b5ad; + --color-blue: #003f7f; + --color-violet: #6435c9; + --color-purple: #a333c8; + --color-pink: #e03997; + --color-brown: #7a5230; + --color-black: #222222; + /* light variants - produced via Sass scale-color(color, $lightness: +25%) */ + --color-red-light: #e06056; + --color-orange-light: #f59555; + --color-yellow-light: #f5c467; + --color-olive-light: #d3e942; + --color-green-light: #46de6a; + --color-teal-light: #08fff4; + --color-blue-light: #406f9f; + --color-violet-light: #8b67d7; + --color-purple-light: #bb64d8; + --color-pink-light: #e86bb1; + --color-brown-light: #9b7d64; + --color-black-light: #595959; + /* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */ + --color-red-dark-1: #c0271b; + --color-orange-dark-1: #e6630d; + --color-yellow-dark-1: #da9f2f; + --color-olive-dark-1: #a3b816; + --color-green-dark-1: #1ea73e; + --color-teal-dark-1: #00a39c; + --color-blue-dark-1: #003972; + --color-violet-dark-1: #5a30b5; + --color-purple-dark-1: #932eb4; + --color-pink-dark-1: #db228a; + --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: #cc580c; + --color-yellow-dark-2: #c28e2a; + --color-olive-dark-2: #91a313; + --color-green-dark-2: #1a9537; + --color-teal-dark-2: #00918a; + --color-blue-dark-2: #003266; + --color-violet-dark-2: #502aa1; + --color-purple-dark-2: #8229a0; + --color-pink-dark-2: #c21e7b; + --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: #003f7f; + --color-ansi-magenta: #d22e8b; + --color-ansi-cyan: #00918a; + --color-ansi-white: var(--color-console-fg-subtle); + --color-ansi-bright-black: #46494d; + --color-ansi-bright-red: #e06056; + --color-ansi-bright-green: #93b373; + --color-ansi-bright-yellow: #f5c467; + --color-ansi-bright-blue: #406f9f; + --color-ansi-bright-magenta: #d74397; + --color-ansi-bright-cyan: #00b6ad; + --color-ansi-bright-white: var(--color-console-fg); + /* 16-color series */ + --color-series-16-0: #7db233; + --color-series-16-1: #499a37; + --color-series-16-2: #ce4751; + --color-series-16-3: #8f9121; + --color-series-16-4: #ac32a6; + --color-series-16-5: #7445e9; + --color-series-16-6: #c67d28; + --color-series-16-7: #4db392; + --color-series-16-8: #aa4d30; + --color-series-16-9: #2a6f84; + --color-series-16-10: #c45327; + --color-series-16-11: #3d965c; + --color-series-16-12: #792a93; + --color-series-16-13: #439d73; + --color-series-16-14: #103aad; + --color-series-16-15: #982e85; + /* other colors */ + --color-grey: #697077; + --color-grey-light: #7c838a; + --color-gold: #a1882b; + --color-white: #ffffff; + --color-diff-added-fg: #177231; + --color-diff-added-linenum-bg: #d1f8d9; + --color-diff-added-row-bg: #e6ffed; + --color-diff-added-row-border: #e6ffed; + --color-diff-added-word-bg: #acf2bd; + --color-diff-moved-row-bg: #f1f8d1; + --color-diff-moved-row-border: #d0e27f; + --color-diff-removed-fg: #c61f2b; + --color-diff-removed-linenum-bg: #ffcecb; + --color-diff-removed-row-bg: #ffeef0; + --color-diff-removed-row-border: #f1c0c0; + --color-diff-removed-word-bg: #fdb8c0; + --color-diff-inactive: #f0f2f4; + --color-error-border: #e0b4b4; + --color-error-bg: #fff6f6; + --color-error-bg-active: #fbb; + --color-error-bg-hover: #fdd; + --color-error-text: #9f3a38; + --color-success-border: #a3c293; + --color-success-bg: #fcfff5; + --color-success-text: #2c662d; + --color-warning-border: #c9ba9b; + --color-warning-bg: #fffaf3; + --color-warning-text: #573a08; + --color-info-border: #a9d5de; + --color-info-bg: #f8ffff; + --color-info-text: #276f86; + --color-priority-border: #b9a1ff66; + --color-priority-bg: #f3e7ff; + --color-priority-text: #8250df; + --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: #003f7f; + /* target-based colors */ + --color-body: #ffffff; + --color-box-header: #f1edd9; + --color-box-body: #ffffff; + --color-box-body-highlight: #f2efde; + --color-text-dark: #222222; + --color-text: #222222; + --color-text-light: #595959; + --color-text-light-1: #6f6f6f; + --color-text-light-2: #858585; + --color-text-light-3: #9c9c9c; + --color-footer: var(--color-nav-bg); + --color-timeline: #d0d7de; + --color-input-text: var(--color-text-dark); + --color-input-background: #fff; + --color-input-toggle-background: #d0d7de; + --color-input-border: var(--color-secondary); + --color-input-border-hover: var(--color-secondary-dark-1); + --color-light: #00001706; + --color-light-mimic-enabled: rgba( + 0, + 0, + 0, + calc(6 / 255 * 222 / 255 / var(--opacity-disabled)) + ); + --color-light-border: #0000171d; + --color-hover: #00001708; + --color-hover-opaque: #f1f3f5; /* TODO: color-mix(in srgb, var(--color-body), var(--color-hover)); */ + --color-active: #00001714; + --color-menu: #f0ecd8; + --color-card: #f0ecd8; + --color-markup-table-row: #0030600a; + --color-markup-code-block: #00306010; + --color-markup-code-inline: #00306012; + --color-button: #f0ecd8; + --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) */ :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-light"] #navbar #navbar-logo { - background-image: url("../img/logo-light-no-slogan.svg"); - background-position: center; - background-repeat: no-repeat; - background-size: 60px 30px; -} - -html[data-theme="codecraftsmen-light"] #navbar #navbar-logo img { - visibility: hidden; - width: 60px; - height: 30px; -} - -html[data-theme="codecraftsmen-light"] .page-content.home img.logo { - display: none; -} - -html[data-theme="codecraftsmen-light"] .page-content.home .center:has(> img.logo)::before { - content: ""; - display: block; - width: 220px; - height: 220px; - margin: 0 auto; - background-image: url("../img/logo-light.svg"); - background-position: center; - background-repeat: no-repeat; - background-size: contain; + --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; } body, @@ -304,7 +353,7 @@ textarea, select, button, small { - font-family: var(--cc-font-body); + font-family: var(--cc-font-body); } h1, @@ -316,8 +365,8 @@ h6, .ui.header, .page-title, .repository .ui.header { - font-family: var(--cc-font-heading); - letter-spacing: 0.02em; + font-family: var(--cc-font-heading); + letter-spacing: 0.02em; } code, @@ -325,5 +374,5 @@ pre, kbd, samp, .monospace { - font-family: var(--cc-font-mono); + font-family: var(--cc-font-mono); } diff --git a/templates/custom/header.tmpl b/templates/custom/header.tmpl index 98a758f..b28da62 100644 --- a/templates/custom/header.tmpl +++ b/templates/custom/header.tmpl @@ -1,3 +1,4 @@ +