195 lines
No EOL
3.4 KiB
CSS
195 lines
No EOL
3.4 KiB
CSS
.TextEditor {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: start;
|
|
}
|
|
|
|
.TextEditor p,
|
|
.TextEditor div,
|
|
.TextEditor span,
|
|
.TextEditor textarea {
|
|
font-size: 1em;
|
|
}
|
|
|
|
.View, .Code {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 1rem !important;
|
|
color: var(--foreground-color-0) !important;
|
|
background-color: var(--background-color-2) !important;
|
|
border: none;
|
|
outline: none;
|
|
font-size: 1rem;
|
|
font-family: var(--body-font-family);
|
|
resize: none;
|
|
overflow: auto;
|
|
}
|
|
|
|
.View {
|
|
z-index: 2;
|
|
}
|
|
|
|
.MarkdownImage {
|
|
max-width: 100%;
|
|
object-fit: contain;
|
|
border-radius: var(--border-radius-0);
|
|
margin: 1rem 0.5rem 1rem 0;
|
|
}
|
|
|
|
.MarkdownBlockquote {
|
|
display: flex;
|
|
gap: 1rem;
|
|
flex-direction: column;
|
|
margin: 0;
|
|
}
|
|
|
|
.AlertContainer {
|
|
--color-0: var(--color-1);
|
|
--color-1: var(--background-color-0);
|
|
--color-2: var(--background-color-1);
|
|
|
|
margin: 0;
|
|
padding: 1rem 1.5rem;
|
|
border-left: 1rem solid var(--color-1);
|
|
background-color: var(--color-2);
|
|
border-radius: var(--border-radius-1);
|
|
}
|
|
|
|
.Alert {
|
|
display: inline-flex;
|
|
gap: 0.5rem;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
margin-bottom: 0.5rem;
|
|
color: var(--color-0);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.Alert > svg * {
|
|
fill: var(--color-0);
|
|
}
|
|
|
|
.ImportantAlert {
|
|
--color-0: var(--purple-0);
|
|
--color-1: var(--purple-1);
|
|
--color-2: var(--purple-2);
|
|
}
|
|
|
|
.NoteAlert {
|
|
--color-0: var(--blue-0);
|
|
--color-1: var(--blue-1);
|
|
--color-2: var(--blue-2);
|
|
}
|
|
|
|
.TipAlert {
|
|
--color-0: var(--green-0);
|
|
--color-1: var(--green-1);
|
|
--color-2: var(--green-2);
|
|
}
|
|
|
|
.WarningAlert {
|
|
--color-0: var(--yellow-0);
|
|
--color-1: var(--yellow-1);
|
|
--color-2: var(--yellow-2);
|
|
}
|
|
|
|
.CautionAlert {
|
|
--color-0: var(--red-0);
|
|
--color-1: var(--red-1);
|
|
--color-2: var(--red-2);
|
|
}
|
|
|
|
|
|
.View code {
|
|
position: relative;
|
|
font-family: var(--mono-font-family);
|
|
border-radius: var(--border-radius-1);
|
|
padding: 0.125rem 0.25rem;
|
|
font-size: 0.875rem;
|
|
letter-spacing: -0.01rem;
|
|
}
|
|
|
|
.View code::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: var(--background-color-1);
|
|
border-radius: inherit;
|
|
z-index: -1;
|
|
}
|
|
|
|
.MarkdownLink {
|
|
position: relative;
|
|
display: inline-block;
|
|
color: var(--light-blue-0);
|
|
transition: color 200ms ease-in-out;
|
|
}
|
|
|
|
.MarkdownLink:hover, .MarkdownLink:focus-visible {
|
|
color: var(--light-blue-1);
|
|
}
|
|
|
|
.MarkdownLink > * {
|
|
color: inherit;
|
|
}
|
|
|
|
div > .MarkdownLink {
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.MarkdownLink > .MarkdownImage {
|
|
margin: 0;
|
|
}
|
|
|
|
.View h1,
|
|
.View h2,
|
|
.View h3,
|
|
.View h4,
|
|
.View h5,
|
|
.View h6 {
|
|
margin-top: 1.75rem;
|
|
margin-bottom: -0.25rem;
|
|
}
|
|
|
|
.View p {
|
|
line-height: 1.375rem;
|
|
}
|
|
|
|
.View li > ul {
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.View table {
|
|
margin: 1rem 0;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.View table, .View th, .View td {
|
|
border: 0.2rem solid var(--background-color-0);
|
|
}
|
|
|
|
.View th, .View td {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.Code {
|
|
margin: 0;
|
|
cursor: default;
|
|
}
|
|
|
|
.Code *[class*="hljs-string"] { color: var(--green-0); }
|
|
.Code *[class*="hljs-literal"] { color: var(--yellow-0); }
|
|
.Code *[class*="hljs-number"] { color: var(--yellow-0); }
|
|
.Code *[class*="hljs-keyword"] { color: var(--blue-0); }
|
|
.Code *[class*="hljs-title"] { color: var(--cyan-0); }
|
|
.Code *[class*="hljs-name"] { color: var(---red-0); }
|
|
.Code *[class*="hljs-attr"] { color: var(--blue-0); }
|
|
.Code *[class*="hljs-param"] { color: var(---red-0); }
|
|
.Code *[class*="hljs-comment"] { color: var(--black-0); }
|
|
.Code *[class*="linenumber"] { color: var(--black-0); }
|
|
.Code *[class*="hljs-meta"] { color: var(--blue-0); } |