mirror of
https://github.com/wavetermdev/waveterm.git
synced 2025-02-01 23:21:59 +01:00
9f5ccddad2
Use a better system for scrolling using scrollTo on the OverlayScrollbars ref. This lets me get the heading as close to the top of the viewport as possible without the convoluted CSS tricks I was trying before.
190 lines
4.7 KiB
Plaintext
190 lines
4.7 KiB
Plaintext
// Copyright 2024, Command Line Inc.
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
|
|
.markdown {
|
|
display: flex;
|
|
flex-direction: row;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
width: 100%;
|
|
.content {
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: scroll;
|
|
line-height: 1.5;
|
|
color: var(--app-text-color);
|
|
font-family: var(--markdown-font);
|
|
font-size: 14px;
|
|
overflow-wrap: break-word;
|
|
margin-bottom: 10px;
|
|
|
|
.heading {
|
|
&:first-of-type {
|
|
margin-top: 0 !important;
|
|
}
|
|
color: var(--app-text-color);
|
|
margin-top: 16px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
strong {
|
|
color: var(--app-text-color);
|
|
}
|
|
|
|
a {
|
|
color: #32afff;
|
|
}
|
|
|
|
p,
|
|
ul,
|
|
ol,
|
|
dl,
|
|
table,
|
|
details table {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: disc;
|
|
list-style-position: outside;
|
|
margin-left: 16px;
|
|
}
|
|
|
|
ol {
|
|
list-style-position: outside;
|
|
margin-left: 19px;
|
|
}
|
|
|
|
blockquote {
|
|
margin: 4px 10px 4px 10px;
|
|
border-radius: 3px;
|
|
background-color: var(--panel-bg-color);
|
|
padding: 2px 4px 2px 6px;
|
|
}
|
|
|
|
pre.codeblock {
|
|
background-color: var(--panel-bg-color);
|
|
margin: 4px 10px;
|
|
padding: 0.4em 0.7em;
|
|
border-radius: 4px;
|
|
position: relative;
|
|
|
|
code {
|
|
line-height: 1.5;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
overflow: auto;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.codeblock-actions {
|
|
visibility: hidden;
|
|
display: flex;
|
|
position: absolute;
|
|
top: 4px;
|
|
right: 4px;
|
|
border-radius: 4px;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
|
|
i {
|
|
color: var(--line-actions-inactive-color);
|
|
margin-left: 4px;
|
|
|
|
&:first-child {
|
|
margin-left: 0px;
|
|
}
|
|
|
|
&:hover {
|
|
color: var(--line-actions-active-color);
|
|
}
|
|
|
|
&.fa-check {
|
|
color: var(--success-color);
|
|
}
|
|
|
|
&.fa-square-terminal {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover .codeblock-actions {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
code {
|
|
color: var(--app-text-color);
|
|
background-color: var(--panel-bg-color);
|
|
font-family: var(--termfontfamily);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
pre.selected {
|
|
outline: 2px solid var(--accent-color);
|
|
}
|
|
|
|
.heading {
|
|
font-weight: semibold;
|
|
padding-top: 6px;
|
|
}
|
|
|
|
.heading.is-1 {
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding-bottom: 6px;
|
|
font-size: 2em;
|
|
}
|
|
.heading.is-2 {
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding-bottom: 6px;
|
|
font-size: 1.5em;
|
|
}
|
|
.heading.is-3 {
|
|
font-size: 1.25em;
|
|
}
|
|
.heading.is-4 {
|
|
font-size: 1em;
|
|
}
|
|
.heading.is-5 {
|
|
font-size: 0.875em;
|
|
}
|
|
.heading.is-6 {
|
|
font-size: 0.85em;
|
|
}
|
|
}
|
|
|
|
// The TOC view should scroll independently of the contents view.
|
|
.toc {
|
|
max-width: 40%;
|
|
height: 100%;
|
|
overflow: scroll;
|
|
border-left: 1px solid var(--border-color);
|
|
.toc-inner {
|
|
height: fit-content;
|
|
position: sticky;
|
|
top: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
text-wrap: wrap;
|
|
|
|
h4 {
|
|
padding-left: 5px;
|
|
}
|
|
|
|
.toc-item {
|
|
cursor: pointer;
|
|
--indent-factor: 1;
|
|
|
|
// The 5px offset in the padding will ensure that when the text in the item wraps, it indents slightly.
|
|
// The indent factor is set in the React code and denotes the depth of the item in the TOC tree.
|
|
padding-left: calc((var(--indent-factor) - 1) * 10px + 5px);
|
|
text-indent: -5px;
|
|
}
|
|
}
|
|
}
|
|
}
|