137 lines
2.3 KiB
SCSS

/** code macos */
div[class*='language-'] {
&.macos,&.light {
margin: 0 0 24px;
border-radius: 7px;
box-shadow: var(--vp-shadow-4);
&:hover {
.line-numbers-wrapper {
color: var(--vp-c-brand);
font-weight: 600;
opacity: 1;
}
}
.line-numbers-wrapper {
padding-top: 40px;
width: 32px;
border-right: 0px;
opacity: 0.3;
}
&::before {
position: initial;
display: block;
color: var(--vp-c-text-2);
background: var(--vp-c-bg-soft);
height: 24px;
line-height: 24px;
font-weight: bold;
text-align: center;
}
&::after {
position: absolute;
top: 8px;
left: 8px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #fc625d;
-webkit-box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
content: ' ';
}
pre {
code {
padding-left: 32px;
font-weight: 600;
}
}
.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #747474;
}
.token.punctuation {
color: #743c3c;
}
.token.tag,
.token.attr-name,
.token.namespace,
.token.deleted {
color: #e2777a;
}
.token.function-name {
color: #1a5997;
}
.token.boolean,
.token.number,
.token.function {
color: #af4b09;
}
.token.property,
.token.class-name,
.token.constant,
.token.symbol {
color: #a0710b;
}
.token.selector,
.token.important,
.token.atrule,
.token.keyword,
.token.builtin {
color: #a241a3;
}
.token.string,
.token.char,
.token.attr-value,
.token.regex,
.token.variable {
color: #1e8545;
}
.token.operator,
.token.entity,
.token.url {
color: #168d8b;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
.token.inserted {
color: green;
}
}
}
.dark {
div[class*='language-'] {
&.macos {
&::before {
background: var(--vp-c-bg);
}
.lang {
background-color: transparent;
display: none;
}
}
}
}