Files
Docs-Viewer/lib/styles/snippets.css
2025-01-28 06:33:17 +11:00

31 lines
6.2 KiB
CSS

:root{--pen-white:#edf1fc;--pen-gray:#5f5d58;--pen-black:#26241f;--pen-red:#e14a49;--pen-green:#15b64f;--pen-blue:#3f76ed;--pen-light-blue:#54b6f8;--pen-purple:#9b4ff0;--neutral-pen-black:#272727;--neutral-pen-black-trans:#27272722;--page-white:#ffffff;--page-manila:#f3deaf;--page-blue:#3f76ed;--grid-size:32px}.recolor-images img{filter:var(--image-effect)}.page-blueprint,.page-manila,.page-white{--text-normal:var(--accent-color);--text-muted:var(--accent-color);--text-faint:var(--accent-color-trans);--h1-color:var(--accent-color);--h2-color:var(--accent-color);--h3-color:var(--accent-color);--h4-color:var(--accent-color);--h5-color:var(--accent-color);--h6-color:var(--accent-color);--link-color:var(--pen-blue);--link-color-hover:var(--pen-light-blue);--link-unresolved-color:var(--pen-red);--hr-color:var(--accent-color);--blockquote-border-color:var(--accent-color);--embed-border-left:2px solid var(--accent-color);--collapse-icon-color-collapsed:var(--accent-color);--checkbox-color:var(--accent-color);--checkbox-marker-color:var(--page-color);--checkbox-color-hover:var(--accent-color-trans);--checkbox-border-color:var(--accent-color);--checklist-done-color:var(--accent-color);--list-marker-color:var(--accent-color);--interactive-accent:var(--accent-color);--metadata-label-text-color:var(--accent-color);--metadata-input-text-color:var(--accent-color);--tag-color:var(--accent-color);--tag-background:var(--accent-color-trans);--pill-cover-hover:color-mix(in srgb, var(--accent-color) 60%, transparent);--background-modifier-border-focus:var(--accent-color);--background-modifier-border:var(--accent-color-trans);--background-modifier-hover:color-mix(
in srgb,
var(--accent-color) 60%,
transparent
);color:var(--accent-color);background-color:var(--page-color);font-weight:700}.page-manila{--page-color:var(--page-manila);--accent-color:var(--pen-black);--accent-color-trans:color-mix(
in srgb,
var(--accent-color) 15%,
transparent
);--image-effect:brightness(0) saturate(100%) invert(14%) sepia(19%) saturate(296%) hue-rotate(5deg) brightness(90%) contrast(96%);color-scheme:light}.embed-manila img{background-color:var(--page-manila)}.page-white{--page-color:var(--page-white);--accent-color:var(--neutral-pen-black);--accent-color-trans:color-mix(
in srgb,
var(--accent-color) 15%,
transparent
);--image-effect:brightness(0) saturate(100%) invert(14%) sepia(19%) saturate(296%) hue-rotate(5deg) brightness(90%) contrast(96%);color-scheme:light}.embed-white img{background-color:var(--page-white)}.page-blueprint{--page-color:var(--page-blue);--accent-color:var(--pen-white);--accent-color-trans:color-mix(
in srgb,
var(--accent-color) 15%,
transparent
);--image-effect:brightness(0) saturate(100%) invert(89%) sepia(1%) saturate(2714%) hue-rotate(196deg) brightness(107%) contrast(98%);color-scheme:dark;--link-color:color-mix(in srgb, var(--pen-light-blue) 60%, var(--pen-white));--link-color-hover:color-mix(
in srgb,
var(--pen-light-blue) 20%,
var(--pen-white)
)}.embed-blueprint img{background-color:var(--page-blue)}.page-grid{background-image:linear-gradient(0deg,transparent 0,var(--accent-color-trans) 1px,var(--accent-color-trans) 2px,transparent 3px),linear-gradient(90deg,transparent calc(var(--grid-size) - 3px),var(--accent-color-trans) calc(var(--grid-size) - 2px),var(--accent-color-trans) calc(var(--grid-size) - 1px),transparent var(--grid-size));background-size:var(--grid-size) var(--grid-size)}:is(
.page-white,.page-manila,.page-blueprint,.pen-white,.pen-blue,.pen-red,.pen-green,.pen-black,.pen-gray,.pen-purple
) svg{color:color-mix(in srgb,var(--accent-color) 60%,transparent)}:is(.page-white,.page-manila,.page-blueprint) :is(code,.HyperMD-codeblock,.cm-inline-code){--code-normal:var(--accent-color);--code-background:color-mix(
in srgb,
var(--page-color) 80%,
black
)!important}div>pre{--code-background:color-mix(
in srgb,
var(--page-color) 80%,
black
)!important}:is(.page-white,.page-manila,.page-blueprint){--metadata-input-background-active:var(--accent-color-trans)}.pen-white{--accent-color:var(--pen-white);--accent-color-trans:color-mix(in srgb, var(--pen-white) 15%, transparent);color:var(--accent-color);--hr-color:var(--accent-color);--image-effect:brightness(0) saturate(100%) invert(89%) sepia(1%) saturate(2714%) hue-rotate(196deg) brightness(107%) contrast(98%)}.pen-blue{--accent-color:var(--pen-blue);--accent-color-trans:color-mix(in srgb, var(--pen-blue) 15%, transparent);color:var(--accent-color);--hr-color:var(--accent-color);--image-effect:brightness(0) saturate(100%) invert(36%) sepia(95%) saturate(945%) hue-rotate(199deg) brightness(95%) contrast(95%)}.pen-red{--accent-color:var(--pen-red);--accent-color-trans:color-mix(in srgb, var(--pen-red) 15%, transparent);color:var(--accent-color);--hr-color:var(--accent-color);--image-effect:brightness(0) saturate(100%) invert(40%) sepia(41%) saturate(1024%) hue-rotate(316deg) brightness(99%) contrast(94%)}.pen-green{--accent-color:var(--pen-green);--accent-color-trans:color-mix(in srgb, var(--pen-green) 15%, transparent);color:var(--accent-color);--hr-color:var(--accent-color);--image-effect:brightness(0) saturate(100%) invert(52%) sepia(60%) saturate(2521%) hue-rotate(105deg) brightness(96%) contrast(84%)}.pen-black{--accent-color:var(--pen-black);--accent-color-trans:color-mix(in srgb, var(--pen-black) 15%, transparent);color:var(--accent-color);--hr-color:var(--accent-color);--image-effect:brightness(0) saturate(100%) invert(14%) sepia(19%) saturate(296%) hue-rotate(5deg) brightness(90%) contrast(96%)}.pen-gray{--accent-color:var(--pen-gray);--accent-color-trans:color-mix(in srgb, var(--pen-gray) 15%, transparent);color:var(--accent-color);--hr-color:var(--accent-color);--image-effect:brightness(0) saturate(100%) invert(35%) sepia(13%) saturate(189%) hue-rotate(5deg) brightness(96%) contrast(86%)}.pen-purple{--accent-color:var(--pen-purple);--accent-color-trans:color-mix(in srgb, var(--pen-purple) 15%, transparent);color:var(--accent-color);--hr-color:var(--accent-color);--image-effect:brightness(0) saturate(100%) invert(33%) sepia(59%) saturate(2620%) hue-rotate(249deg) brightness(98%) contrast(93%)}img[alt=left]{float:left;margin-right:10px;max-width:65%}img[alt=right]{float:right;margin-left:10px;max-width:65%}