diff options
| author | Danilo M. <danix@danix.xyz> | 2026-04-22 12:42:56 +0200 |
|---|---|---|
| committer | Danilo M. <danix@danix.xyz> | 2026-04-22 12:42:56 +0200 |
| commit | 631547a75142326a7c71bdf123e1475217a5ad73 (patch) | |
| tree | f3cfef6b3c5b42bf626fc823ddcf63b8dcf4cdbb /assets/css/chroma-custom.css | |
| parent | 77ccbe72fad5a4870185fff374f75471c16a9043 (diff) | |
| download | danixxyz-theme-631547a75142326a7c71bdf123e1475217a5ad73.tar.gz danixxyz-theme-631547a75142326a7c71bdf123e1475217a5ad73.zip | |
chore: replace with extracted danix.xyz-hacker theme (danix2-hugo-theme)
Diffstat (limited to 'assets/css/chroma-custom.css')
| -rw-r--r-- | assets/css/chroma-custom.css | 391 |
1 files changed, 391 insertions, 0 deletions
diff --git a/assets/css/chroma-custom.css b/assets/css/chroma-custom.css new file mode 100644 index 0000000..d632e09 --- /dev/null +++ b/assets/css/chroma-custom.css @@ -0,0 +1,391 @@ +/* === Chroma Custom — Catppuccin Macchiato === */ + +:root { + /* Catppuccin Macchiato palette */ + --ctp-base: #24273a; + --ctp-surface0: #363a4f; + --ctp-surface1: #494d64; + --ctp-overlay0: #6e738d; + --ctp-text: #cad3f5; + --ctp-subtext1: #b8c0e0; + --ctp-lavender: #b7bdf8; + --ctp-blue: #8aadf4; + --ctp-sapphire: #7dc4e4; + --ctp-sky: #91d7e3; + --ctp-teal: #8bd5ca; + --ctp-green: #a6da95; + --ctp-yellow: #eed49f; + --ctp-peach: #f5a97f; + --ctp-maroon: #ee99a0; + --ctp-red: #ed8796; + --ctp-mauve: #c6a0f6; + --ctp-pink: #f5bde6; +} + +/* === Code block wrapper and header bar === */ + +.code-block-wrapper { + margin: 1.5rem 0; + border-radius: 0.5rem; + overflow: hidden; + border: 1px solid var(--border); +} + +.code-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.375rem 0.75rem; + background-color: var(--ctp-surface0); + border-bottom: 1px solid var(--ctp-surface1); + font-family: 'JetBrains Mono', monospace; + font-size: 0.75rem; +} + +.code-lang-label { + color: var(--ctp-subtext1); + letter-spacing: 0.05em; +} + +.code-copy-wrapper { + display: flex; + align-items: center; + gap: 0.25rem; +} + +.code-copy-btn { + display: inline-flex; + align-items: center; + justify-content: center; + background: transparent; + border: none; + cursor: pointer; + padding: 0.25rem; + border-radius: 0.25rem; + color: var(--ctp-overlay0); + transition: color 0.15s ease, background 0.15s ease; + line-height: 1; +} + +.code-copy-btn:hover { + color: var(--ctp-text); + background: rgba(202, 211, 245, 0.08); +} + +.code-copy-btn:focus-visible { + outline: 2px solid var(--ctp-lavender); + outline-offset: 2px; +} + +.code-copy-btn [data-feather], +.code-copy-btn svg { + width: 14px !important; + height: 14px !important; + stroke-width: 2px; +} + +.code-copy-btn .hidden { + display: none; +} + +.code-copy-btn.is-copied { + color: var(--ctp-green); +} + +/* === Code body === */ + +.code-body { + overflow-x: auto; +} + +.code-body .highlight, +.code-body .highlight .chroma { + margin: 0; + border-radius: 0; + border: none; + background-color: var(--ctp-base); +} + +/* === Reset conflicts with main.css base styles === */ + +.code-block-wrapper pre, +.prose .code-block-wrapper pre, +.prose-invert .code-block-wrapper pre { + margin: 0; + padding: 0; + background: transparent; + border: none; + border-radius: 0; + overflow-x: visible; +} + +/* Re-apply padding after the reset above, with higher specificity */ +.code-block-wrapper .highlight .lntd:first-child pre { + padding: 0.875rem 0; +} + +.code-block-wrapper .highlight .lntd:last-child pre { + padding: 0.875rem 1rem; +} + +/* === Chroma table layout (lineNumbersInTable = true) === */ + +.highlight table { + border-collapse: collapse; + width: 100%; +} + +.highlight td { + padding: 0; + vertical-align: top; +} + +/* Line number column — not selectable */ +/* color: --ctp-overlay0 (#6e738d) on --ctp-surface0 (#363a4f) = ~3.5:1 */ +.highlight .lnt, +.highlight .ln { + padding: 0.875rem 0.75rem 0.875rem 1rem; + color: var(--ctp-overlay0); + user-select: none; + -webkit-user-select: none; + min-width: 2.5rem; + text-align: right; + border-right: 1px solid var(--ctp-surface1); + font-size: 0.8125rem; +} + +.highlight .lntd:first-child { + background-color: var(--ctp-surface0); +} + +.highlight .lntd:first-child pre { + padding: 0.875rem 0; +} + +.highlight .lntd:last-child pre { + padding: 0.875rem 1rem; +} + +.highlight .chroma { + overflow-x: auto; +} + +.code-block-wrapper pre, +.code-block-wrapper code { + font-size: 0.875em; +} + +/* === Syntax token colors (dark theme default) === */ + +.highlight { + background-color: var(--ctp-base); + color: var(--ctp-text); +} + +/* Keywords — mauve */ +.highlight .k, +.highlight .kc, +.highlight .kd, +.highlight .kn, +.highlight .kp, +.highlight .kr, +.highlight .kt { + color: var(--ctp-mauve); + font-weight: 500; +} + +/* Strings — green */ +.highlight .s, +.highlight .sa, +.highlight .sb, +.highlight .sc, +.highlight .dl, +.highlight .sd, +.highlight .s1, +.highlight .s2, +.highlight .se, +.highlight .sh, +.highlight .si, +.highlight .sx, +.highlight .sr, +.highlight .ss { + color: var(--ctp-green); +} + +/* Numbers — peach */ +.highlight .m, +.highlight .mb, +.highlight .mf, +.highlight .mh, +.highlight .mi, +.highlight .il, +.highlight .mo { + color: var(--ctp-peach); +} + +/* Comments — overlay0, italic */ +.highlight .c, +.highlight .c1, +.highlight .cm, +.highlight .cs, +.highlight .cp, +.highlight .cpf { + color: var(--ctp-overlay0); + font-style: italic; +} + +/* Operators — sky */ +.highlight .o, +.highlight .ow { + color: var(--ctp-sky); +} + +/* Names / Identifiers */ +.highlight .n { + color: var(--ctp-text); +} + +.highlight .na { + color: var(--ctp-yellow); +} + +.highlight .nb { + color: var(--ctp-blue); +} + +.highlight .nc { + color: var(--ctp-yellow); +} + +.highlight .nd { + color: var(--ctp-pink); +} + +.highlight .ne { + color: var(--ctp-maroon); +} + +.highlight .nf, +.highlight .fm { + color: var(--ctp-blue); +} + +.highlight .ni { + color: var(--ctp-text); +} + +.highlight .nl { + color: var(--ctp-teal); +} + +.highlight .nn { + color: var(--ctp-yellow); +} + +.highlight .nt { + color: var(--ctp-mauve); +} + +.highlight .nv, +.highlight .vc, +.highlight .vg, +.highlight .vi { + color: var(--ctp-text); +} + +/* Punctuation */ +.highlight .p { + color: var(--ctp-subtext1); +} + +/* Generic tokens (diff output etc.) */ +.highlight .gd { + color: var(--ctp-red); + background: rgba(237, 135, 150, 0.1); +} + +.highlight .gi { + color: var(--ctp-green); + background: rgba(166, 218, 149, 0.1); +} + +.highlight .gh { + color: var(--ctp-lavender); + font-weight: bold; +} + +.highlight .gu { + color: var(--ctp-overlay0); +} + +.highlight .ge { + font-style: italic; +} + +.highlight .gs { + font-weight: bold; +} + +/* Error */ +.highlight .err { + color: var(--ctp-red); +} + +/* === Light theme overrides (Catppuccin Latte) === */ + +html.theme-light .code-block-wrapper { + border-color: #ccd0da; +} + +html.theme-light .code-header { + background-color: #dce0ea; + border-bottom-color: #bcc0cc; +} + +html.theme-light .code-lang-label { + color: #5c5f77; +} + +html.theme-light .code-copy-btn { + color: #6c6f85; +} + +html.theme-light .code-copy-btn:hover { + color: #4c4f69; + background: rgba(76, 79, 105, 0.08); +} + +html.theme-light .code-body .highlight, +html.theme-light .code-body .highlight .chroma { + background-color: #eff1f5; + color: #4c4f69; +} + +html.theme-light .highlight .lntd:first-child { + background-color: #e6e9ef; +} + +html.theme-light .highlight .lnt, +html.theme-light .highlight .ln { + color: #bcc0cc; + border-right-color: #bcc0cc; +} + +/* Comments must be darker to read on light bg */ +html.theme-light .highlight .c, +html.theme-light .highlight .c1, +html.theme-light .highlight .cm, +html.theme-light .highlight .cs, +html.theme-light .highlight .cp, +html.theme-light .highlight .cpf { + color: #7c7f93; +} + +/* Text defaults */ +html.theme-light .highlight .n { + color: #4c4f69; +} + +html.theme-light .highlight .p { + color: #6c6f85; +} |
