mirror of
https://github.com/rendercv/rendercv.git
synced 2026-04-18 05:52:54 -04:00
301 lines
11 KiB
CSS
301 lines
11 KiB
CSS
[data-md-color-scheme=default] {
|
|
--radius: 0.625rem;
|
|
--background: oklch(1 0 0);
|
|
--foreground: oklch(0.129 0.042 264.695);
|
|
--card: oklch(1 0 0);
|
|
--card-foreground: oklch(0.129 0.042 264.695);
|
|
--popover: oklch(1 0 0);
|
|
--popover-foreground: oklch(0.129 0.042 264.695);
|
|
--primary: oklch(0.208 0.042 265.755);
|
|
--primary-foreground: oklch(0.984 0.003 247.858);
|
|
--secondary: oklch(0.968 0.007 247.896);
|
|
--secondary-foreground: oklch(0.208 0.042 265.755);
|
|
--muted: oklch(0.968 0.007 247.896);
|
|
--muted-foreground: oklch(0.554 0.046 257.417);
|
|
--accent: oklch(0.968 0.007 247.896);
|
|
--accent-foreground: oklch(0.208 0.042 265.755);
|
|
--destructive: oklch(0.577 0.245 27.325);
|
|
--border: oklch(0.929 0.013 255.508);
|
|
--input: oklch(0.929 0.013 255.508);
|
|
--ring: oklch(0.704 0.04 256.788);
|
|
--chart-1: oklch(0.646 0.222 41.116);
|
|
--chart-2: oklch(0.6 0.118 184.704);
|
|
--chart-3: oklch(0.398 0.07 227.392);
|
|
--chart-4: oklch(0.828 0.189 84.429);
|
|
--chart-5: oklch(0.769 0.188 70.08);
|
|
--sidebar: oklch(0.984 0.003 247.858);
|
|
--sidebar-foreground: oklch(0.129 0.042 264.695);
|
|
--sidebar-primary: oklch(0.45 0.2 295);
|
|
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
|
|
--sidebar-accent: oklch(0.968 0.007 247.896);
|
|
--sidebar-accent-foreground: oklch(0.208 0.042 265.755);
|
|
--sidebar-border: oklch(0.929 0.013 255.508);
|
|
--sidebar-ring: oklch(0.704 0.04 256.788);
|
|
}
|
|
|
|
:root,
|
|
[data-md-color-scheme=slate] {
|
|
--background: oklch(0.129 0.042 264.695);
|
|
--foreground: oklch(0.984 0.003 247.858);
|
|
--card: oklch(0.208 0.042 265.755);
|
|
--card-foreground: oklch(0.984 0.003 247.858);
|
|
--popover: oklch(0.208 0.042 265.755);
|
|
--popover-foreground: oklch(0.984 0.003 247.858);
|
|
--primary: oklch(0.929 0.013 255.508);
|
|
--primary-foreground: oklch(0.208 0.042 265.755);
|
|
--secondary: oklch(0.279 0.041 260.031);
|
|
--secondary-foreground: oklch(0.984 0.003 247.858);
|
|
--muted: oklch(0.279 0.041 260.031);
|
|
--muted-foreground: oklch(0.704 0.04 256.788);
|
|
--accent: oklch(0.279 0.041 260.031);
|
|
--accent-foreground: oklch(0.984 0.003 247.858);
|
|
--destructive: oklch(0.704 0.191 22.216);
|
|
--border: oklch(1 0 0 / 10%);
|
|
--input: oklch(1 0 0 / 15%);
|
|
--ring: oklch(0.551 0.027 264.364);
|
|
--chart-1: oklch(0.488 0.243 264.376);
|
|
--chart-2: oklch(0.696 0.17 162.48);
|
|
--chart-3: oklch(0.769 0.188 70.08);
|
|
--chart-4: oklch(0.627 0.265 303.9);
|
|
--chart-5: oklch(0.645 0.246 16.439);
|
|
--sidebar: oklch(0.208 0.042 265.755);
|
|
--sidebar-foreground: oklch(0.984 0.003 247.858);
|
|
--sidebar-primary: oklch(0.64 0.17 269.37);
|
|
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
|
|
--sidebar-accent: oklch(0.279 0.041 260.031);
|
|
--sidebar-accent-foreground: oklch(0.984 0.003 247.858);
|
|
--sidebar-border: oklch(1 0 0 / 10%);
|
|
--sidebar-ring: oklch(0.551 0.027 264.364);
|
|
}
|
|
|
|
[data-md-color-scheme=default] {
|
|
color-scheme: light;
|
|
}
|
|
[data-md-color-scheme=default] img[src$="#only-dark"],
|
|
[data-md-color-scheme=default] img[src$="#gh-dark-mode-only"] {
|
|
display: none;
|
|
}
|
|
[data-md-color-scheme=default] {
|
|
--md-hue: 225deg;
|
|
--md-primary-fg-color: var(--sidebar);
|
|
--md-primary-bg-color: var(--sidebar-foreground);
|
|
--md-accent-fg-color: var(--sidebar-primary);
|
|
--md-accent-fg-color--transparent: hsla(231, 99%, 66%, 0.1);
|
|
--md-accent-bg-color: hsla(0, 0%, 100%, 1);
|
|
--md-accent-bg-color--light: hsla(0, 0%, 100%, 0.7);
|
|
--md-default-fg-color: var(--foreground);
|
|
--md-default-fg-color--light: var(--muted-foreground);
|
|
--md-default-fg-color--lighter: hsla(0, 0%, 0%, 0.32);
|
|
--md-default-fg-color--lightest: hsla(0, 0%, 0%, 0.07);
|
|
--md-default-bg-color: var(--background);
|
|
--md-default-bg-color--light: hsla(0, 0%, 100%, 0.7);
|
|
--md-default-bg-color--lighter: hsla(0, 0%, 100%, 0.3);
|
|
--md-default-bg-color--lightest: hsla(0, 0%, 100%, 0.12);
|
|
--md-code-fg-color: hsla(200, 18%, 26%, 1);
|
|
--md-code-bg-color: var(--sidebar);
|
|
--md-code-bg-color--light: hsla(200, 0%, 96%, 0);
|
|
--md-code-bg-color--lighter: hsla(200, 0%, 96%, 0);
|
|
--md-code-hl-color: hsla(218, 100%, 63%, 1);
|
|
--md-code-hl-color--light: hsla(218, 100%, 63%, 0.1);
|
|
--md-code-hl-number-color: hsla(0, 67%, 50%, 1);
|
|
--md-code-hl-special-color: hsla(340, 83%, 47%, 1);
|
|
--md-code-hl-function-color: hsla(291, 45%, 50%, 1);
|
|
--md-code-hl-constant-color: hsla(250, 63%, 60%, 1);
|
|
--md-code-hl-keyword-color: hsla(219, 54%, 51%, 1);
|
|
--md-code-hl-string-color: hsla(150, 63%, 30%, 1);
|
|
--md-code-hl-name-color: var(--md-code-fg-color);
|
|
--md-code-hl-operator-color: var(--md-default-fg-color--light);
|
|
--md-code-hl-punctuation-color: var(--md-default-fg-color--light);
|
|
--md-code-hl-comment-color: var(--md-default-fg-color--light);
|
|
--md-code-hl-generic-color: var(--md-default-fg-color--light);
|
|
--md-code-hl-variable-color: var(--md-default-fg-color--light);
|
|
--md-typeset-color: var(--md-default-fg-color);
|
|
--md-typeset-a-color: var(--sidebar-primary);
|
|
--md-typeset-del-color: hsla(6, 90%, 60%, 0.15);
|
|
--md-typeset-ins-color: hsla(150, 90%, 44%, 0.15);
|
|
--md-typeset-kbd-color: hsla(0, 0%, 98%, 1);
|
|
--md-typeset-kbd-accent-color: hsla(0, 100%, 100%, 1);
|
|
--md-typeset-kbd-border-color: hsla(0, 0%, 72%, 1);
|
|
--md-typeset-mark-color: hsla(60, 100%, 50%, 0.5);
|
|
--md-typeset-table-color: hsla(0, 0%, 0%, 0.12);
|
|
--md-typeset-table-color--light: hsla(0, 0%, 0%, 0.035);
|
|
--md-admonition-fg-color: var(--md-default-fg-color);
|
|
--md-admonition-bg-color: var(--md-default-bg-color);
|
|
--md-warning-fg-color: hsla(0, 0%, 0%, 0.87);
|
|
--md-warning-bg-color: hsla(60, 100%, 80%, 1);
|
|
--md-footer-fg-color: var(--sidebar-foreground);
|
|
--md-footer-fg-color--light: var(--sidebar-foreground);
|
|
--md-footer-fg-color--lighter: var(--sidebar-foreground);
|
|
--md-footer-bg-color: var(--sidebar);
|
|
--md-footer-bg-color--dark: var(--sidebar);
|
|
--md-shadow-z1:
|
|
0 0.2rem 0.5rem hsla(0, 0%, 0%, 0.05),
|
|
0 0 0.05rem hsla(0, 0%, 0%, 0.1);
|
|
--md-shadow-z2:
|
|
0 0.2rem 0.5rem hsla(0, 0%, 0%, 0.1),
|
|
0 0 0.05rem hsla(0, 0%, 0%, 0.25);
|
|
--md-shadow-z3:
|
|
0 0.2rem 0.5rem hsla(0, 0%, 0%, 0.2),
|
|
0 0 0.05rem hsla(0, 0%, 0%, 0.35);
|
|
}
|
|
|
|
[data-md-color-scheme=slate] {
|
|
color-scheme: dark;
|
|
}
|
|
[data-md-color-scheme=slate] img[src$="#only-light"],
|
|
[data-md-color-scheme=slate] img[src$="#gh-light-mode-only"] {
|
|
display: none;
|
|
}
|
|
[data-md-color-scheme=slate] {
|
|
--md-hue: 225deg;
|
|
--md-primary-fg-color: var(--sidebar);
|
|
--md-primary-bg-color: var(--sidebar-foreground);
|
|
--md-accent-fg-color: var(--sidebar-primary);
|
|
--md-accent-fg-color--transparent: hsla(231, 99%, 66%, 0.1);
|
|
--md-accent-bg-color: hsla(0, 0%, 100%, 1);
|
|
--md-accent-bg-color--light: hsla(0, 0%, 100%, 0.7);
|
|
--md-default-fg-color: var(--foreground);
|
|
--md-default-fg-color--light: var(--muted-foreground);
|
|
--md-default-fg-color--lighter: hsla(var(--md-hue), 15%, 90%, 0.32);
|
|
--md-default-fg-color--lightest: hsla(var(--md-hue), 15%, 90%, 0.12);
|
|
--md-default-bg-color: var(--background);
|
|
--md-default-bg-color--light: hsla(var(--md-hue), 15%, 14%, 0.54);
|
|
--md-default-bg-color--lighter: hsla(var(--md-hue), 15%, 14%, 0.26);
|
|
--md-default-bg-color--lightest: hsla(var(--md-hue), 15%, 14%, 0.07);
|
|
--md-code-fg-color: hsla(var(--md-hue), 18%, 86%, 0.82);
|
|
--md-code-bg-color: var(--sidebar);
|
|
--md-code-bg-color--light: hsla(var(--md-hue), 15%, 18%, 0);
|
|
--md-code-bg-color--lighter: hsla(var(--md-hue), 15%, 18%, 0);
|
|
--md-code-hl-color: hsla(218, 100%, 58%, 1);
|
|
--md-code-hl-color--light: hsla(218, 100%, 58%, 0.1);
|
|
--md-code-hl-number-color: hsla(6, 74%, 63%, 1);
|
|
--md-code-hl-special-color: hsla(340, 83%, 66%, 1);
|
|
--md-code-hl-function-color: hsla(291, 57%, 65%, 1);
|
|
--md-code-hl-constant-color: hsla(250, 62%, 70%, 1);
|
|
--md-code-hl-keyword-color: hsla(219, 66%, 64%, 1);
|
|
--md-code-hl-string-color: hsla(150, 58%, 44%, 1);
|
|
--md-code-hl-name-color: var(--md-code-fg-color);
|
|
--md-code-hl-operator-color: var(--md-default-fg-color--light);
|
|
--md-code-hl-punctuation-color: var(--md-default-fg-color--light);
|
|
--md-code-hl-comment-color: var(--md-default-fg-color--light);
|
|
--md-code-hl-generic-color: var(--md-default-fg-color--light);
|
|
--md-code-hl-variable-color: var(--md-default-fg-color--light);
|
|
--md-typeset-color: var(--md-default-fg-color);
|
|
--md-typeset-a-color: var(--sidebar-primary);
|
|
--md-typeset-del-color: hsla(6, 90%, 60%, 0.15);
|
|
--md-typeset-ins-color: hsla(150, 90%, 44%, 0.15);
|
|
--md-typeset-kbd-color: hsla(var(--md-hue), 15%, 90%, 0.12);
|
|
--md-typeset-kbd-accent-color: hsla(var(--md-hue), 15%, 90%, 0.2);
|
|
--md-typeset-kbd-border-color: hsla(var(--md-hue), 15%, 14%, 1);
|
|
--md-typeset-mark-color: hsla(218, 100%, 63%, 0.3);
|
|
--md-typeset-table-color: hsla(var(--md-hue), 15%, 95%, 0.12);
|
|
--md-typeset-table-color--light: hsla(var(--md-hue), 15%, 95%, 0.035);
|
|
--md-admonition-fg-color: var(--md-default-fg-color);
|
|
--md-admonition-bg-color: var(--md-default-bg-color);
|
|
--md-warning-fg-color: hsla(0, 0%, 0%, 0.87);
|
|
--md-warning-bg-color: hsla(60, 100%, 80%, 1);
|
|
--md-footer-fg-color: var(--sidebar-foreground);
|
|
--md-footer-fg-color--light: var(--sidebar-foreground);
|
|
--md-footer-fg-color--lighter: var(--sidebar-foreground);
|
|
--md-footer-bg-color: var(--sidebar);
|
|
--md-footer-bg-color--dark: var(--sidebar);
|
|
--md-shadow-z1:
|
|
0 0.2rem 0.5rem hsla(0, 0%, 0%, 0.05),
|
|
0 0 0.05rem hsla(0, 0%, 0%, 0.1);
|
|
--md-shadow-z2:
|
|
0 0.2rem 0.5rem hsla(0, 0%, 0%, 0.25),
|
|
0 0 0.05rem hsla(0, 0%, 0%, 0.25);
|
|
--md-shadow-z3:
|
|
0 0.2rem 0.5rem hsla(0, 0%, 0%, 0.4),
|
|
0 0 0.05rem hsla(0, 0%, 0%, 0.35);
|
|
}
|
|
|
|
.md-header__button.md-logo {
|
|
overflow: visible;
|
|
margin-right: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.md-header__button.md-logo svg {
|
|
overflow: visible;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
}
|
|
|
|
.md-header__topic:first-child {
|
|
margin-left: -0.3rem;
|
|
font-size: 1.05rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.md-header__site-link {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Hovering logo dims both logo + title (only when not scrolled) */
|
|
.md-header__button.md-logo:hover {
|
|
opacity: 0.7;
|
|
}
|
|
.md-header__button.md-logo:hover ~ .md-header__title:not(.md-header__title--active) .md-header__topic:first-child {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Hovering title dims both logo + title (only when not scrolled) */
|
|
.md-header__inner:has(.md-header__title:not(.md-header__title--active):hover) .md-header__button.md-logo {
|
|
opacity: 0.7;
|
|
}
|
|
.md-header__inner:has(.md-header__title:not(.md-header__title--active):hover) .md-header__topic:first-child {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Filled button for external tab link */
|
|
.md-tabs__item--external .md-tabs__link {
|
|
background: var(--md-accent-fg-color);
|
|
color: var(--md-primary-fg-color);
|
|
border-radius: 999px;
|
|
padding: 0.15em 0.85em;
|
|
margin-top: calc(0.8rem - 0.15em);
|
|
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
|
will-change: transform;
|
|
}
|
|
|
|
.md-tabs__item--external .md-tabs__link:hover,
|
|
.md-tabs__item--external .md-tabs__link:focus {
|
|
transform: scale(1.08) !important;
|
|
}
|
|
|
|
.md-tabs__item--external .md-tabs__link::after {
|
|
content: "\2197";
|
|
margin-left: 0.2em;
|
|
font-size: 0.75em;
|
|
vertical-align: -0.05em;
|
|
}
|
|
|
|
/* Lucide-style stroke-only toggle icons */
|
|
[data-md-component="palette"] svg {
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
width: 1.1rem;
|
|
height: 1.1rem;
|
|
}
|
|
|
|
@keyframes rendercv-blink {
|
|
0%, 93%, 97%, 100% { transform: scaleY(1); }
|
|
95% { transform: scaleY(0.05); }
|
|
}
|
|
|
|
.rendercv-eye {
|
|
transform-box: fill-box;
|
|
transform-origin: center;
|
|
animation: rendercv-blink 4s ease-in-out infinite;
|
|
}
|
|
|
|
.rendercv-eye[data-eye="right"] {
|
|
animation-delay: 0.1s;
|
|
}
|