librekeys/librekeys.github.io
0
0
Fork 0
mirror of https://github.com/librekeys/librekeys.github.io.git synced 2026-04-14 08:48:05 -07:00
Code Issues Packages Projects Releases Wiki Activity
Files
feat/custom-css
librekeys.github.io/static/custom.css

418 lines
12 KiB
CSS
Raw Permalink Blame History

/* Global customization */
:root {
--code-max-height: 60rem;
--radius: 0.65rem;
--header-font-family: "Inter", sans-serif;
--body-font-family: "Inter", sans-serif;
--code-font-family: "JetBrains Mono", monospace;
}
/* Light mode theming */
:root,
:root[color-theme="light"] {
--shadcn-background: oklch(1 0 0);
--shadcn-foreground: oklch(0.141 0.005 285.823);
--shadcn-card: oklch(1 0 0);
--shadcn-primary: #26a269;
--shadcn-primary-foreground: oklch(0.986 0.031 120.757);
--shadcn-secondary: oklch(0.967 0.001 286.375);
--shadcn-muted: oklch(0.967 0.001 286.375);
--shadcn-muted-foreground: oklch(0.552 0.016 285.938);
--shadcn-border: oklch(0.92 0.004 286.32);
--shadcn-destructive: oklch(0.577 0.245 27.325);
/* Code Highlight Colors Light */
--code-color-keyword: oklch(0.5 0.2 270);
--code-color-string: oklch(0.55 0.15 140);
--code-color-tag: oklch(0.5 0.2 10);
--code-color-attr: oklch(0.6 0.18 50);
--code-color-comment: var(--shadcn-muted-foreground);
--code-color-number: oklch(0.55 0.2 290);
/* Geekdoc Variables Override */
--header-background: var(--shadcn-background);
--header-font-color: var(--shadcn-foreground);
--header-border-color: var(--shadcn-border);
--body-background: var(--shadcn-background);
--body-font-color: var(--shadcn-foreground);
--mark-color: var(--shadcn-primary);
--button-background: var(--shadcn-primary);
--button-border-color: var(--shadcn-primary);
--button-font-color: #ffffff;
--link-color: var(--shadcn-primary);
--link-color-visited: var(--shadcn-primary);
--code-background: var(--shadcn-secondary);
--code-accent-color: var(--shadcn-border);
--code-accent-color-lite: var(--shadcn-muted);
--code-font-color: var(--shadcn-foreground);
--code-copy-background: var(--shadcn-secondary);
--code-copy-font-color: var(--shadcn-muted-foreground);
--code-copy-border-color: var(--shadcn-border);
--code-copy-success-color: var(--shadcn-primary);
--accent-color: var(--shadcn-secondary);
--accent-color-lite: var(--shadcn-muted);
--control-icons: var(--shadcn-muted-foreground);
--footer-background: var(--shadcn-background);
--footer-font-color: var(--shadcn-muted-foreground);
--footer-link-color: var(--shadcn-foreground);
--footer-link-color-visited: var(--shadcn-foreground);
}
@media (prefers-color-scheme: light) {
:root {
/* Shadcn Base Colors Light */
--shadcn-background: oklch(1 0 0);
--shadcn-foreground: oklch(0.141 0.005 285.823);
--shadcn-card: oklch(1 0 0);
--shadcn-primary: #26a269;
--shadcn-primary-foreground: oklch(0.986 0.031 120.757);
--shadcn-secondary: oklch(0.967 0.001 286.375);
--shadcn-muted: oklch(0.967 0.001 286.375);
--shadcn-muted-foreground: oklch(0.552 0.016 285.938);
--shadcn-border: oklch(0.92 0.004 286.32);
--shadcn-destructive: oklch(0.577 0.245 27.325);
/* Code Highlight Colors Light */
--code-color-keyword: oklch(0.5 0.2 270);
--code-color-string: oklch(0.55 0.15 140);
--code-color-tag: oklch(0.5 0.2 10);
--code-color-attr: oklch(0.6 0.18 50);
--code-color-comment: var(--shadcn-muted-foreground);
--code-color-number: oklch(0.55 0.2 290);
/* Geekdoc Variables Override */
--header-background: var(--shadcn-background);
--header-font-color: var(--shadcn-foreground);
--header-border-color: var(--shadcn-border);
--body-background: var(--shadcn-background);
--body-font-color: var(--shadcn-foreground);
--mark-color: var(--shadcn-primary);
--button-background: var(--shadcn-primary);
--button-border-color: var(--shadcn-primary);
--button-font-color: #ffffff;
--link-color: var(--shadcn-primary);
--link-color-visited: var(--shadcn-primary);
--code-background: var(--shadcn-secondary);
--code-accent-color: var(--shadcn-border);
--code-accent-color-lite: var(--shadcn-muted);
--code-font-color: var(--shadcn-foreground);
--code-copy-background: var(--shadcn-secondary);
--code-copy-font-color: var(--shadcn-muted-foreground);
--code-copy-border-color: var(--shadcn-border);
--code-copy-success-color: var(--shadcn-primary);
--accent-color: var(--shadcn-secondary);
--accent-color-lite: var(--shadcn-muted);
--control-icons: var(--shadcn-muted-foreground);
--footer-background: var(--shadcn-background);
--footer-font-color: var(--shadcn-muted-foreground);
--footer-link-color: var(--shadcn-foreground);
--footer-link-color-visited: var(--shadcn-foreground);
}
}
:root,
:root[color-theme="light"] {
/* Shadcn Base Colors Light */
--shadcn-background: oklch(1 0 0);
--shadcn-foreground: oklch(0.141 0.005 285.823);
--shadcn-card: oklch(1 0 0);
--shadcn-primary: #26a269;
--shadcn-primary-foreground: oklch(0.986 0.031 120.757);
--shadcn-secondary: oklch(0.967 0.001 286.375);
--shadcn-muted: oklch(0.967 0.001 286.375);
--shadcn-muted-foreground: oklch(0.552 0.016 285.938);
--shadcn-border: oklch(0.92 0.004 286.32);
--shadcn-destructive: oklch(0.577 0.245 27.325);
/* Code Highlight Colors Light */
--code-color-keyword: oklch(0.5 0.2 270);
--code-color-string: oklch(0.55 0.15 140);
--code-color-tag: oklch(0.5 0.2 10);
--code-color-attr: oklch(0.6 0.18 50);
--code-color-comment: var(--shadcn-muted-foreground);
--code-color-number: oklch(0.55 0.2 290);
/* Geekdoc Variables Override */
--header-background: var(--shadcn-background);
--header-font-color: var(--shadcn-foreground);
--header-border-color: var(--shadcn-border);
--body-background: var(--shadcn-background);
--body-font-color: var(--shadcn-foreground);
--mark-color: var(--shadcn-primary);
--button-background: var(--shadcn-primary);
--button-border-color: var(--shadcn-primary);
--button-font-color: #ffffff;
--link-color: var(--shadcn-primary);
--link-color-visited: var(--shadcn-primary);
--code-background: var(--shadcn-secondary);
--code-accent-color: var(--shadcn-border);
--code-accent-color-lite: var(--shadcn-muted);
--code-font-color: var(--shadcn-foreground);
--code-copy-background: var(--shadcn-secondary);
--code-copy-font-color: var(--shadcn-muted-foreground);
--code-copy-border-color: var(--shadcn-border);
--code-copy-success-color: var(--shadcn-primary);
--accent-color: var(--shadcn-secondary);
--accent-color-lite: var(--shadcn-muted);
--control-icons: var(--shadcn-muted-foreground);
--footer-background: var(--shadcn-background);
--footer-font-color: var(--shadcn-muted-foreground);
--footer-link-color: var(--shadcn-foreground);
--footer-link-color-visited: var(--shadcn-foreground);
}
/* Dark mode theming */
:root[color-theme="dark"] {
--shadcn-background: oklch(0.141 0.005 285.823);
--shadcn-foreground: oklch(0.985 0 0);
--shadcn-card: oklch(0.21 0.006 285.885);
--shadcn-primary: #26a269;
--shadcn-primary-foreground: oklch(0.986 0.031 120.757);
--shadcn-secondary: oklch(0.274 0.006 286.033);
--shadcn-muted: oklch(0.274 0.006 286.033);
--shadcn-muted-foreground: oklch(0.705 0.015 286.067);
--shadcn-border: oklch(1 0 0 / 10%);
--code-color-keyword: oklch(0.75 0.15 260);
--code-color-string: oklch(0.8 0.15 140);
--code-color-tag: oklch(0.75 0.15 10);
--code-color-attr: oklch(0.8 0.15 60);
--code-color-comment: var(--shadcn-muted-foreground);
--code-color-number: oklch(0.8 0.15 300);
--header-background: var(--shadcn-background);
--header-font-color: var(--shadcn-foreground);
--header-border-color: var(--shadcn-border);
--body-background: var(--shadcn-background);
--body-font-color: var(--shadcn-foreground);
--mark-color: var(--shadcn-primary);
--button-background: var(--shadcn-primary);
--button-border-color: var(--shadcn-primary);
--button-font-color: #ffffff;
--link-color: var(--shadcn-primary);
--link-color-visited: var(--shadcn-primary);
--code-background: var(--shadcn-card);
--code-accent-color: var(--shadcn-border);
--code-accent-color-lite: var(--shadcn-muted);
--code-font-color: var(--shadcn-foreground);
--code-copy-background: var(--shadcn-card);
--code-copy-font-color: var(--shadcn-muted-foreground);
--code-copy-border-color: var(--shadcn-border);
--code-copy-success-color: var(--shadcn-primary);
--accent-color: var(--shadcn-secondary);
--accent-color-lite: var(--shadcn-muted);
--control-icons: var(--shadcn-muted-foreground);
--footer-background: var(--shadcn-background);
--footer-font-color: var(--shadcn-muted-foreground);
--footer-link-color: var(--shadcn-foreground);
--footer-link-color-visited: var(--shadcn-foreground);
}
@media (prefers-color-scheme: dark) {
:root {
--shadcn-background: oklch(0.141 0.005 285.823);
--shadcn-foreground: oklch(0.985 0 0);
--shadcn-card: oklch(0.21 0.006 285.885);
--shadcn-primary: #26a269;
--shadcn-primary-foreground: oklch(0.986 0.031 120.757);
--shadcn-secondary: oklch(0.274 0.006 286.033);
--shadcn-muted: oklch(0.274 0.006 286.033);
--shadcn-muted-foreground: oklch(0.705 0.015 286.067);
--shadcn-border: oklch(1 0 0 / 10%);
--code-color-keyword: oklch(0.75 0.15 260);
--code-color-string: oklch(0.8 0.15 140);
--code-color-tag: oklch(0.75 0.15 10);
--code-color-attr: oklch(0.8 0.15 60);
--code-color-comment: var(--shadcn-muted-foreground);
--code-color-number: oklch(0.8 0.15 300);
--header-background: var(--shadcn-background);
--header-font-color: var(--shadcn-foreground);
--header-border-color: var(--shadcn-border);
--body-background: var(--shadcn-background);
--body-font-color: var(--shadcn-foreground);
--mark-color: var(--shadcn-primary);
--button-background: var(--shadcn-primary);
--button-border-color: var(--shadcn-primary);
--button-font-color: #ffffff;
--link-color: var(--shadcn-primary);
--link-color-visited: var(--shadcn-primary);
--code-background: var(--shadcn-card);
--code-accent-color: var(--shadcn-border);
--code-accent-color-lite: var(--shadcn-muted);
--code-font-color: var(--shadcn-foreground);
--code-copy-background: var(--shadcn-card);
--code-copy-font-color: var(--shadcn-muted-foreground);
--code-copy-border-color: var(--shadcn-border);
--code-copy-success-color: var(--shadcn-primary);
--accent-color: var(--shadcn-secondary);
--accent-color-lite: var(--shadcn-muted);
--control-icons: var(--shadcn-muted-foreground);
--footer-background: var(--shadcn-background);
--footer-font-color: var(--shadcn-muted-foreground);
--footer-link-color: var(--shadcn-foreground);
--footer-link-color-visited: var(--shadcn-foreground);
}
}
/* Modernize padding and borders for a SaaS-like look */
.gdoc-header {
border-bottom: 1px solid var(--header-border-color);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.gdoc-page__header {
padding: 0;
margin-bottom: 1.5rem;
border-bottom: none !important;
border-radius: var(--radius);
background-color: transparent !important;
display: flex;
align-items: center;
min-height: 2rem;
}
.gdoc-page__header .editpage svg {
margin-bottom: -0.1rem;
}
.gdoc-markdown h1 {
font-weight: 700;
letter-spacing: -0.025em;
font-size: 2.25rem;
margin-top: 0;
}
.gdoc-markdown h2 {
font-weight: 600;
letter-spacing: -0.025em;
border-bottom: 1px solid var(--header-border-color);
padding-bottom: 0.3em;
}
.gdoc-markdown h3 {
font-weight: 600;
letter-spacing: -0.025em;
}
.gdoc-footer {
border-top: 1px solid var(--header-border-color);
padding-top: 2rem;
margin-top: 4rem;
}
/* Code Syntax Highlighting Enhancements */
.chroma {
background-color: var(--code-background) !important;
border-radius: var(--radius) !important;
border: 1px solid var(--shadcn-border) !important;
color: var(--code-font-color) !important;
}
.gdoc-markdown .chroma code {
color: var(--code-font-color) !important;
background-color: transparent !important;
}
/* Chroma Tokens */
/* Tags e.g. <key> */
.chroma .nt {
color: var(--code-color-tag) !important;
}
/* Attributes e.g. id= */
.chroma .na {
color: var(--code-color-attr) !important;
}
/* Strings e.g. "value" */
.chroma .s,
.chroma .s1,
.chroma .s2 {
color: var(--code-color-string) !important;
}
/* Keywords */
.chroma .k,
.chroma .kc,
.chroma .kd,
.chroma .kn,
.chroma .kp,
.chroma .kr {
color: var(--code-color-keyword) !important;
}
/* Numbers */
.chroma .m,
.chroma .mb,
.chroma .mf,
.chroma .mh,
.chroma .mi,
.chroma .il {
color: var(--code-color-number) !important;
}
/* Comments */
.chroma .c,
.chroma .c1,
.chroma .cm,
.chroma .cs {
color: var(--code-color-comment) !important;
font-style: italic;
}
/* Operators / Punctuation */
.chroma .o,
.chroma .p {
color: var(--code-font-color) !important;
}
Reference in New Issue View Git Blame Copy Permalink