mirror of
https://github.com/by-jp/www.byjp.me.git
synced 2025-08-09 22:16:07 +01:00
247 lines
No EOL
6.5 KiB
SCSS
247 lines
No EOL
6.5 KiB
SCSS
// https://codepen.io/2kool2/pen/MEbeEg
|
|
|
|
pre[class*="language-"] {
|
|
overflow: auto;
|
|
margin: 0;
|
|
background-color: transparent;
|
|
|
|
/* Allow space for an overflow ellipsis */
|
|
padding-right: 0.5rem;
|
|
|
|
/* Allow space for SVG "tear off strip" */
|
|
background-origin: border-box;
|
|
border-left: 1.25rem solid transparent;
|
|
background-size: auto 2.926rem;
|
|
/* Single line does not sit on stripes */
|
|
background-position: top 2.1rem left 0;
|
|
|
|
/* Allow horizontal resizing - could be adjusted to allow vertical resizing too */
|
|
position: relative;
|
|
resize: horizontal;
|
|
min-width: calc(100% - 3.5rem);
|
|
width: calc(100% + 2.5rem);
|
|
left: -2.5rem;
|
|
|
|
transition: box-shadow .3s ease-out;
|
|
}
|
|
|
|
code[class*="language-"] {
|
|
font-family: monospace, monospace;
|
|
text-shadow: 0 1px var(--textShadow);
|
|
letter-spacing: 0.01em;
|
|
text-align: left;
|
|
white-space: pre;
|
|
word-spacing: normal;
|
|
word-break: normal;
|
|
|
|
/* Safari requirement for contenteditable */
|
|
word-wrap: normal;
|
|
line-height: 1.54;
|
|
tab-size: 2;
|
|
hyphens: none;
|
|
}
|
|
|
|
pre > code[class*="language-"],
|
|
pre[class*="language-"] > code {
|
|
display: block;
|
|
padding: 0;
|
|
|
|
/* Use an ellipsis to indicate code is wider than the display area */
|
|
text-overflow: ellipsis;
|
|
overflow-x: scroll;
|
|
}
|
|
pre:hover > code[class*="language-"],
|
|
pre:focus-within > code[class*="language-"] {
|
|
outline: none;
|
|
text-overflow: inherit;
|
|
}
|
|
|
|
/* Inline code only */
|
|
:not(pre) > code[class*="language-"] {
|
|
font-size: inherit;
|
|
background-position: top right;
|
|
background-size: auto 4rem;
|
|
padding: 0.125em 0.25em;
|
|
white-space: normal;
|
|
word-wrap: nowrap;
|
|
}
|
|
|
|
.token.important,
|
|
.token.bold {
|
|
font-weight: bold;
|
|
}
|
|
.token.italic {
|
|
font-style: italic;
|
|
}
|
|
.token.entity {
|
|
cursor: help;
|
|
}
|
|
.namespace {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Default colors (Light mode) */
|
|
:not(pre) > code[class*="language-"],
|
|
pre[class*="language-"] {
|
|
--color: #33a;
|
|
--textShadow: #fff;
|
|
--comment: #6e6e6e;
|
|
--punctuation: #4e4e4e;
|
|
--property: #905;
|
|
--operator: #70b;
|
|
--selector: #487b00;
|
|
--url: #8d6640;
|
|
--urlBg: hsla(0, 0%, 100%, .5);
|
|
--boolean: #905;
|
|
--atrule: #0075a8;
|
|
--keyword: #0075a8;
|
|
--function: #c93654;
|
|
--regex: #860;
|
|
--boxShadow: hsla(0,0%,0%,.3);
|
|
--focusOutline: hsla(214, 100%, 85%, 1);
|
|
|
|
--codeBgImg: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 64'%3E%3Ccircle stroke='rgba(0,64,0,.3)' stroke-width='2' fill='none' cx='20' cy='49' r='12'/%3E%3Cpath fill='%23fcfcfa' fill-rule='evenodd' d='M1920 64H0V0h1920v64zM20 36a11 11 0 110 22 11 11 0 010-22z'/%3E%3Cpath stroke='%23edf3ed' stroke-width='2' d='M0 1h1920M0 5h1920M0 9h1920M0 13h1920M0 17h1920M0 21h1920M0 25h1920M0 29h1920'/%3E%3Cpath stroke='%23e4ede4' stroke-dasharray='2 6 2 6' stroke-width='2' d='M40 2v60'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
|
|
/* If the OS has dark mode set then... */
|
|
/* Change dark to light to test */
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
body:not([data-lightMode="light"]) code[class*="language-"]:not([contenteditable]),
|
|
body:not([data-lightMode="light"]) pre[class*="language-"] {
|
|
--color: #6ae;
|
|
--textShadow: #000;
|
|
|
|
--comment: #9ab;
|
|
--punctuation: #ccc;
|
|
--property: #e70;
|
|
--operator: #d7f;
|
|
--selector: #8b2;
|
|
--url: #cde;
|
|
--urlBg: rgba(0,0,0,.5);
|
|
--boolean: #a8f;
|
|
--atrule: #ffb;
|
|
--keyword: #fe6;
|
|
--function: #f55;
|
|
--regex: #f91;
|
|
|
|
--boxShadow: #000;
|
|
--focusOutline: hsla(214, 100%, 85%, .6);
|
|
|
|
--codeBgImg: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 64'%3E%3Ccircle stroke='rgba(0,0,0,.7)' stroke-width='2' fill='none' cx='20' cy='49' r='12'/%3E%3Cpath fill='%23101610' fill-rule='evenodd' d='M1920 64H0V0h1920v64zM20 36a11 11 0 110 22 11 11 0 010-22z'/%3E%3Cpath stroke='%23121' stroke-width='2' d='M0 1h1920M0 5h1920M0 9h1920M0 13h1920M0 17h1920M0 21h1920M0 25h1920M0 29h1920'/%3E%3Cpath stroke='%23131' stroke-dasharray='2 6 2 6' stroke-width='2' d='M40 2v60'/%3E%3C/svg%3E");
|
|
}
|
|
}
|
|
|
|
/* Manual switch mode - where implemented */
|
|
body[data-lightMode="dark"] code[class*="language-"]:not([contenteditable]),
|
|
body[data-lightMode="dark"] pre[class*="language-"] {
|
|
|
|
/* Exactly the same as prefers-color-scheme: dark */
|
|
--color: #6ae;
|
|
--textShadow: #000;
|
|
|
|
--comment: #9ab;
|
|
--punctuation: #ccc;
|
|
--property: #e70;
|
|
--operator: #d7f;
|
|
--selector: #8b2;
|
|
--url: #cde;
|
|
--urlBg: rgba(0,0,0,.5);
|
|
--boolean: #8af;
|
|
--atrule: #ffb;
|
|
--keyword: #fe6;
|
|
--function: #f55;
|
|
--regex: #f91;
|
|
|
|
--boxShadow: #000;
|
|
--focusOutline: hsla(214, 100%, 85%, .6);
|
|
|
|
--codeBgImg: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 64'%3E%3Ccircle stroke='rgba(0,0,0,.7)' stroke-width='2' fill='none' cx='20' cy='49' r='12'/%3E%3Cpath fill='%23101610' fill-rule='evenodd' d='M1920 64H0V0h1920v64zM20 36a11 11 0 110 22 11 11 0 010-22z'/%3E%3Cpath stroke='%23121' stroke-width='2' d='M0 1h1920M0 5h1920M0 9h1920M0 13h1920M0 17h1920M0 21h1920M0 25h1920M0 29h1920'/%3E%3Cpath stroke='%23131' stroke-dasharray='2 6 2 6' stroke-width='2' d='M40 2v60'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
|
|
|
|
code[class*="language-"],
|
|
pre[class*="language-"] {
|
|
color: var(--color);
|
|
text-shadow: 0 1px var(--textShadow);
|
|
}
|
|
|
|
/* Background image is applied to the pre element on blocks, mainly because it is cropped when applied to the code element. */
|
|
:not(pre) > code[class*="language-"],
|
|
pre[class*="language-"] {
|
|
background-image: var(--codeBgImg);
|
|
}
|
|
pre[class*="language-"]:hover,
|
|
pre[class*="language-"]:focus-within {
|
|
box-shadow: 0 .25rem .25rem var(--boxShadow);
|
|
}
|
|
pre[class*="language-"]:focus-within {
|
|
outline-offset: calc(-0.25rem - 1px);
|
|
outline: var(--focusOutline) solid 0.25rem;
|
|
z-index: 5;
|
|
}
|
|
|
|
.token.comment,
|
|
.token.prolog,
|
|
.token.doctype,
|
|
.token.cdata {
|
|
color: var(--comment);
|
|
}
|
|
.token.punctuation {
|
|
color: var(--punctuation);
|
|
}
|
|
.token.property,
|
|
.token.symbol,
|
|
.token.tag,
|
|
.token.constant,
|
|
.token.deleted {
|
|
color: var(--property);
|
|
}
|
|
.token.boolean,
|
|
.token.number {
|
|
color: var(--boolean);
|
|
}
|
|
.token.selector,
|
|
.token.attr-name,
|
|
.token.string,
|
|
.token.char,
|
|
.token.builtin,
|
|
.token.inserted {
|
|
color: var(--selector);
|
|
}
|
|
.token.operator {
|
|
color: var(--operator);
|
|
}
|
|
.token.url,
|
|
.token.entity,
|
|
.language-css .token.string,
|
|
.style .token.string {
|
|
color: var(--url);
|
|
background-color: var(--urlBg);
|
|
}
|
|
.token.atrule,
|
|
.token.attr-value {
|
|
color: var(--atrule);
|
|
}
|
|
.token.keyword {
|
|
color: var(--keyword);
|
|
}
|
|
.token.function {
|
|
color: var(--function);
|
|
}
|
|
.token.regex,
|
|
.token.important,
|
|
.token.variable {
|
|
color: var(--regex);
|
|
}
|
|
|
|
|
|
|
|
@media print {
|
|
code[class*="language-"],
|
|
pre[class*="language-"] {
|
|
text-shadow: none;
|
|
}
|
|
} |