mirror of
https://github.com/wavetermdev/waveterm.git
synced 2024-12-22 16:48:23 +01:00
072730f7eb
Adds a table of contents in the markdown preview, with a button in the header to toggle whether to show the TOC. When a user clicks one of the TOC elements, the preview will scroll to the corresponding heading. I've also cleaned up some MD preview styling that was inconsistent and causing the preview to overflow unnecessarily. This also fixes some terminology in the preview code. <img width="574" alt="image" src="https://github.com/user-attachments/assets/abb18ba9-21d3-4315-bdc3-e4bdcca39a4c">
95 lines
3.3 KiB
Plaintext
95 lines
3.3 KiB
Plaintext
// Copyright 2024, Command Line Inc.
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
|
|
:root {
|
|
--main-text-color: #f7f7f7;
|
|
--title-font-size: 18px;
|
|
--secondary-text-color: rgb(195, 200, 194);
|
|
--grey-text-color: #666;
|
|
--main-bg-color: rgb(34, 34, 34);
|
|
--border-color: rgba(255, 255, 255, 0.16);
|
|
--base-font: normal 14px / normal "Inter", sans-serif;
|
|
--fixed-font: normal 12px / normal "Hack", monospace;
|
|
--accent-color: rgb(88, 193, 66);
|
|
--panel-bg-color: rgba(31, 33, 31, 0.5);
|
|
--highlight-bg-color: rgba(255, 255, 255, 0.2);
|
|
--markdown-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif,
|
|
"Apple Color Emoji", "Segoe UI Emoji";
|
|
--error-color: rgb(229, 77, 46);
|
|
--warning-color: rgb(224, 185, 86);
|
|
--success-color: rgb(78, 154, 6);
|
|
--hover-bg-color: rgba(255, 255, 255, 0.1);
|
|
--block-bg-color: rgba(0, 0, 0, 0.5);
|
|
--block-bg-solid-color: rgb(0, 0, 0);
|
|
--block-border-radius: 8px;
|
|
|
|
/* scrollbar colors */
|
|
--scrollbar-background-color: transparent;
|
|
--scrollbar-thumb-color: rgba(255, 255, 255, 0.15);
|
|
--scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.5);
|
|
--scrollbar-thumb-active-color: rgba(255, 255, 255, 0.6);
|
|
|
|
--header-font: 700 11px / normal "Inter", sans-serif;
|
|
--header-icon-size: 14px;
|
|
--header-icon-width: 16px;
|
|
--header-height: 30px;
|
|
|
|
--tab-green: rgb(88, 193, 66);
|
|
|
|
/* z-index values */
|
|
--zindex-header-hover: 100;
|
|
--zindex-termstickers: 20;
|
|
--zindex-modal: 2;
|
|
--zindex-modal-wrapper: 500;
|
|
--zindex-modal-backdrop: 1;
|
|
--zindex-typeahead-modal: 100;
|
|
--zindex-typeahead-modal-backdrop: 90;
|
|
--zindex-elem-modal: 100;
|
|
--zindex-window-drag: 100;
|
|
--zindex-tab-name: 3;
|
|
--zindex-layout-display-container: 0;
|
|
--zindex-layout-last-magnified-node: 1;
|
|
--zindex-layout-resize-handle: 2;
|
|
--zindex-layout-placeholder-container: 3;
|
|
--zindex-layout-overlay-container: 4;
|
|
--zindex-layout-magnified-node: 5;
|
|
--zindex-block-mask-inner: 10;
|
|
|
|
// z-indexes in xterm.css
|
|
// xterm-helpers: 5
|
|
// xterm-helper-textarea: -5
|
|
// composition-view: 1
|
|
// xterm-message: 10
|
|
// xterm-decoration: 6
|
|
// xterm-decoration-top-layer: 7
|
|
// xterm-decoration-overview-ruler: 8
|
|
// xterm-decoration-top: 2
|
|
|
|
/* modal colors */
|
|
--modal-bg-color: #232323;
|
|
--modal-header-bottom-border-color: rgba(241, 246, 243, 0.15);
|
|
--modal-border-color: rgba(255, 255, 255, 0.12); /* toggle colors */
|
|
--toggle-bg-color: var(--border-color);
|
|
|
|
--toggle-thumb-color: var(--main-text-color);
|
|
--toggle-checked-bg-color: var(--accent-color);
|
|
|
|
/* link color */
|
|
--link-color: #58c142;
|
|
|
|
/* button colors */
|
|
--button-primary-color: #58c142;
|
|
--button-secondary-color: rgba(255, 255, 255, 0.1);
|
|
--button-danger-color: #d43434;
|
|
--button-focus-border-color: rgba(88, 193, 66, 0.8);
|
|
|
|
/* form colors */
|
|
--form-element-border-color: rgba(241, 246, 243, 0.15);
|
|
--form-element-bg-color: var(--main-bg-color);
|
|
--form-element-text-color: var(--main-text-color);
|
|
--form-element-primary-text-color: var(--main-text-color);
|
|
--form-element-primary-color: var(--accent-color);
|
|
--form-element-secondary-color: rgba(255, 255, 255, 0.2);
|
|
--form-element-error-color: var(--error-color);
|
|
}
|