%PDF-
%PDF-
Mini Shell
Mini Shell
@use 'sass:selector';
/* Document rendering styles */
div.ProseMirror {
height: 100%;
position: relative;
word-wrap: break-word;
white-space: pre-wrap;
-webkit-font-variant-ligatures: none;
font-variant-ligatures: none;
padding: 4px 8px 200px 14px;
line-height: 150%;
font-size: 14px;
outline: none;
:target {
// Menubar height: 44px + 3px bottom + 3px top padding
scroll-margin-top: 50px;
}
&[contenteditable=true],
&[contenteditable=false],
[contenteditable=true],
[contenteditable=false] {
width: 100%;
background-color: transparent;
color: var(--color-main-text);
opacity: 1;
-webkit-user-select: text;
user-select: text;
font-size: 14px;
&:not(.collaboration-cursor__caret) {
border: none !important;
}
&:focus, &:focus-visible {
box-shadow: none !important;
}
}
.checkbox-item {
display: flex;
align-items: start;
// Left-align with list item text
margin-left: -23px;
input[type=checkbox] {
display: none;
}
&:before {
content: '';
vertical-align: middle;
margin: 3px 6px 3px 2px;
border: 1px solid var(--color-text-maxcontrast);
position: relative;
display: block;
border-radius: var(--border-radius);
height: 14px;
width: 14px;
box-shadow: none !important;
background-position: center;
cursor: pointer;
}
&.checked{
&:before {
background-image: url('../../img/checkbox-mark.svg');
background-color: var(--color-primary-element);
border-color: var(--color-primary-element);
}
label {
color: var(--color-text-maxcontrast);
text-decoration: line-through;
}
}
label {
display: block;
flex-grow: 1;
max-width: calc(100% - 28px);
}
}
> *:first-child {
margin-top: 10px;
}
> h1,h2,h3,h4,h5,h6 {
&:first-child {
margin-top: 0;
}
}
a {
color: var(--color-primary-element);
text-decoration: underline;
padding: .5em 0;
}
p .paragraph-content {
margin-bottom: 1em;
line-height: 150%;
}
em {
font-style: italic;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 600;
line-height: 1.1em;
margin-top: 24px;
margin-bottom: 12px;
color: var(--color-main-text);
}
h1 {
font-size: 36px;
}
h2 {
font-size: 30px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 21px;
}
h5 {
font-size: 17px;
}
h6 {
font-size: 14px;
}
img {
cursor: default;
max-width: 100%;
}
hr {
padding: 2px 0;
border: none;
margin: 2em 0;
width: 100%;
}
hr:after {
content: '';
display: block;
height: 1px;
background-color: var(--color-border-dark);
line-height: 2px;
}
pre {
white-space: pre-wrap;
background-color: var(--color-background-dark);
border-radius: var(--border-radius);
padding: 1em 1.3em;
margin-bottom: 1em;
}
pre.frontmatter {
margin-bottom: 2em;
border-left: 4px solid var(--color-primary-element);
}
pre.frontmatter::before {
display: block;
content: attr(data-title);
color: var(--color-text-maxcontrast);
padding-bottom: 0.5em;
}
p code {
background-color: var(--color-background-dark);
border-radius: var(--border-radius);
padding: .1em .3em;
}
li {
position: relative;
padding-left: 3px;
p {
margin-bottom: 0.5em;
}
}
ul, ol {
padding-left: 10px;
margin-left: 10px;
margin-bottom: 1em;
}
ul > li {
list-style-type: disc;
}
// Second-level list entries
li ul > li {
list-style-type: circle;
}
// Third-level and further down list entries
li li ul > li {
list-style-type: square;
}
blockquote {
padding-left: 1em;
border-left: 4px solid var(--color-primary-element);
color: var(--color-text-maxcontrast);
margin-left: 0;
margin-right: 0;
}
// table variables
--table-color-border: var(--color-border);
--table-color-heading: var(--color-text-maxcontrast);
--table-color-heading-border: var(--color-border-dark);
--table-color-background: var(--color-main-background);
--table-color-background-hover: var(--color-primary-light);
--table-border-radius: var(--border-radius);
table {
border-spacing: 0;
width: calc(100% - 50px);
table-layout: auto;
white-space: normal; // force text to wrapping
margin-bottom: 1em;
+ & {
margin-top: 1em;
}
td, th {
border: 1px solid var(--table-color-border);
border-left: 0;
vertical-align: top;
max-width: 100%;
&:first-child {
border-left: 1px solid var(--table-color-border);
}
}
td {
padding: 0.5em 0.75em;
border-top: 0;
color: var(--color-main-text);
}
th {
padding: 0 0 0 0.75em;
font-weight: normal;
border-bottom-color: var(--table-color-heading-border);
color: var(--table-color-heading);
& > div {
display: flex;
}
}
tr {
background-color: var(--table-color-background);
&:hover, &:active, &:focus {
background-color: var(--table-color-background-hover);
}
}
tr:first-child {
th:first-child { border-top-left-radius: var(--table-border-radius); }
th:last-child { border-top-right-radius: var(--table-border-radius); }
}
tr:last-child {
td:first-child { border-bottom-left-radius: var(--table-border-radius); }
td:last-child { border-bottom-right-radius: var(--table-border-radius); }
}
}
}
.ProseMirror-focused .ProseMirror-gapcursor {
display: block;
}
.editor__content p.is-empty:first-child::before {
content: attr(data-placeholder);
float: left;
color: var(--color-text-maxcontrast);
pointer-events: none;
height: 0;
}
.editor__content {
tab-size: 4;
}
Zerion Mini Shell 1.0