mirror of
https://github.com/wavetermdev/waveterm.git
synced 2024-12-22 16:48:23 +01:00
4df8e16a53
The column headers for the directory preview were a solid color, which was conflicting with the translucent colors for the rest of the UI. I've changed this to be more consistent. I've also updated a border color that was conflicting with the rest of the UI. The code blocks in the markdown preview were also solid colored and the actions were causing the whole window UI to lose its transparency when they were hovered over. This was due to it applying a backdrop-filter, which breaks the window transparency. I've removed this blur and an invalid color variable. This also fixes the bottom margins for both blocks so there's more space when scrolled all the way to the bottom of the block. Before, the overlay scrollbars were obscuring the content.
150 lines
3.0 KiB
Plaintext
150 lines
3.0 KiB
Plaintext
// Copyright 2024, Command Line Inc.
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
|
|
.markdown {
|
|
color: var(--app-text-color);
|
|
font-family: var(--markdown-font);
|
|
font-size: 14px;
|
|
overflow-wrap: break-word;
|
|
margin-bottom: 10px;
|
|
|
|
.title {
|
|
color: var(--app-text-color);
|
|
margin-top: 16px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
strong {
|
|
color: var(--app-text-color);
|
|
}
|
|
|
|
a {
|
|
color: #32afff;
|
|
}
|
|
|
|
table {
|
|
tr th {
|
|
color: var(--app-text-color);
|
|
}
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
.title {
|
|
font-weight: semibold;
|
|
padding-top: 6px;
|
|
}
|
|
|
|
.title.is-1 {
|
|
border-bottom: 1px solid #777;
|
|
padding-bottom: 6px;
|
|
font-size: 2em;
|
|
}
|
|
.title.is-2 {
|
|
border-bottom: 1px solid #777;
|
|
padding-bottom: 6px;
|
|
font-size: 1.5em;
|
|
}
|
|
.title.is-3 {
|
|
font-size: 1.25em;
|
|
}
|
|
.title.is-4 {
|
|
font-size: 1em;
|
|
}
|
|
.title.is-5 {
|
|
font-size: 0.875em;
|
|
}
|
|
.title.is-6 {
|
|
font-size: 0.85em;
|
|
}
|
|
}
|
|
|
|
.markdown.content {
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.markdown > *:first-child {
|
|
margin-top: 0 !important;
|
|
}
|