Something went wrong on our end
Select Git revision
monster.pcss
-
Volker Schukai authoredVolker Schukai authored
monster.pcss 7.72 KiB
body {
min-height: 100vh;
height: 100%;
& .deco-line {
background-image: linear-gradient(to right, var(--monster-color-gradient-1) 0, var(--monster-color-gradient-2) 50%, var(--monster-color-gradient-3) 100%);
height: 4px;
}
}
:root {
color-scheme: light dark; /* both supported */
}
monster-panel[slot="end"] {
box-sizing: border-box;
display: flex;
align-items: flex-start;
/*padding: 0.6em 0.6em 4rem ;*/
padding: 0;
& .to-overview a {
display: flex;
align-items: center;
width: max-content;
& svg {
margin-right: 0.5em;
}
}
& code {
font-size: 0.9em;
}
& .example-code {
border: 1px solid var(--monster-bg-color-primary-3);
padding: 1em;
display: block;
border-radius: 4px;
background-color: var(--monster-bg-color-primary-1);
}
& .option-grid > :nth-child(8n+1),
& .option-grid > :nth-child(8n+2),
& .option-grid > :nth-child(8n+3),
& .option-grid > :nth-child(8n+4) {
background-color: var(--monster-bg-color-primary-2);
}
& .option-grid > div {
display: flex;
width: 100%;
align-self: stretch;
flex-direction: column;
align-items: start;
}
& .option-grid {
display: grid;
grid-template-columns: 2fr 1fr 2fr 5fr;
grid-gap: 0;
margin: .5em 0;
align-items: center;
justify-items: start;
& .option-headline {
font-weight: bold;
font-size: 1.1em;
}
div {
padding: 0.5em;
}
}
& .method-grid > :nth-child(6n+1),
& .method-grid > :nth-child(6n+2),
& .method-grid > :nth-child(6n+3) {
background-color: var(--monster-bg-color-primary-2);
}
& .method-grid > div {
display: flex;
flex-direction: column;
width: 100%;
align-items: start;
align-self: stretch;
&.method-signature {
flex-direction: row;
& .monster-badge-secondary-pill {
font-size: 0.6em;
}
}
&.method-description {
display: flow;
}
}
& .method-grid {
display: grid;
grid-template-columns: 2fr 2fr 5fr;
grid-gap: 0;
margin: .5em 0;
align-items: center;
justify-items: start;
& .method-headline {
font-weight: bold;
font-size: 1.1em;
}
& div {
padding: 0.5em;
}
& ul + strong {
padding-top: 1em;
}
}
& .show-it {
background-color: var(--monster-bg-color-primary-1);
color: var(--monster-color-primary-1);
padding: 5em;
border: 1px solid var(--monster-bg-color-primary-3);
margin: 1em 0 2em 0;
}
& pre {
margin: 0;
padding: 0;
& pre {
margin: 0;
padding: 0;
& code.hljs {
padding: 1rem;
margin: 0;
background-color: var(--monster-bg-color-tertiary-2);
color: var(--monster-color-tertiary-2);
font-size: 0.9em;
font-weight: normal
}
}
}
& ul {
margin: 0;
padding: calc(0.5em + 1px) 0 0 1.2em;
list-style-type: square;
}
& .container {
padding: 0.6em;
min-height: 80vh;
}
& footer {
margin: 7em 0 0;
padding: 1em 1em 2em;
background-color: var(--monster-bg-color-primary-4);
& p {
margin: 0;
padding: 0;
font-size: 0.8em;
color: var(--monster-color-primary-4);
& a {
color: var(--monster-color-primary-4);
}
}
}
& monster-tabs::part(icon) {
width: 1.1em;
height: 1.1em;
margin-top: 4px;
}
& .info-grid {
margin: 0.5em 0 2em 0;
padding: 0.5em;
border-radius: 4px;
background-color: var(--monster-bg-color-primary-2);
color: var(--monster-color-primary-2); overflow: auto;
display: grid;
grid-template-columns: max-content 20px 4fr;
grid-gap: 0.5em;
& img {
width: 1em;
height: auto;
margin-right: 0.5em;
vertical-align: middle;
}
& div {
display: flex;
& pre {
margin: 0;
padding: 0;
& code {
}
& code.hljs {
padding: 0;
margin: 0;
background-color: transparent;
font-size: 0.9em;
font-weight: normal
}
}
}
}
}
/** prism */
code[class*="language-"],
pre[class*="language-"] {
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
tab-size: 4;
hyphens: none;
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
border-radius: 0.3em;
}
/*:not(pre) > code[class*="language-"],*/
pre[class*="language-"] {
color: var(--monster-color-tertiary-1);
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.namespace {
opacity: .7;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: var(--monster-color-gray-4)
}
.token.punctuation {
color: var(--monster-color-rose-4);
}
.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
color: var(--monster-color-pink-5);
}
.token.boolean,
.token.number {
color: var(--monster-color-orange-5);
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: var(--monster-color-green-5);
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
color: var(--monster-color-blue-5);
}
.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
color: var(--monster-color-yellow-5);
}
.token.keyword {
color: var(--monster-color-red-5);
}
.token.regex,
.token.important { color: var(--monster-color-red-5);
}
@media (prefers-color-scheme: dark) {
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: var(--monster-color-gray-4)
}
.token.punctuation {
color: var(--monster-color-rose-2);
}
.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
color: var(--monster-color-pink-3);
}
.token.boolean,
.token.number {
color: var(--monster-color-orange-3);
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: var(--monster-color-green-3);
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
color: var(--monster-color-blue-3);
}
.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
color: var(--monster-color-yellow-2);
}
.token.keyword {
color: var(--monster-color-red-2);
}
.token.regex,
.token.important {
color: var(--monster-color-red-1);
}
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}