diff --git a/src/common/common.less b/src/common/common.less index 01e280974..3cb37327f 100644 --- a/src/common/common.less +++ b/src/common/common.less @@ -3,7 +3,7 @@ .info-message { position: relative; font-weight: normal; - font-size: 12px; + color: @term-white; .message-content { @@ -52,7 +52,6 @@ } .code-div code { - .mono-font(14px); } } @@ -68,7 +67,7 @@ flex-grow: 0; padding: 3px; border-radius: 3px 0 0 3px; - font-size: 12px; + height: 22px; width: 22px; display: flex; @@ -76,7 +75,7 @@ justify-content: center; align-self: flex-start; cursor: pointer; - background-color: black; + background-color: @term-black; &:hover { background-color: #777; @@ -84,7 +83,7 @@ } .code-div { - background-color: black; + background-color: @term-black; display: flex; flex-direction: row; min-width: 100px; @@ -94,11 +93,10 @@ code { flex-shrink: 0; min-width: 100px; - color: white; - .mono-font(12px); + color: @term-white; white-space: pre; padding: 2px 8px 2px 8px; - background-color: black; + background-color: @term-black; } } @@ -112,16 +110,16 @@ position: absolute; bottom: -1px; right: -20px; - font-size: 9px; + padding: 2px; padding-left: 4px; cursor: pointer; width: 20px; - background-color: black; + background-color: @term-black; border: 1px solid #333; color: #777; &:hover { - color: white; + color: @term-white; } } } @@ -130,7 +128,6 @@ visibility: visible !important; } } - .terminal-wrapper { position: relative; @@ -223,7 +220,7 @@ body .xterm .xterm-viewport { width: 18px; left: 3px; bottom: 3px; - background-color: white; + background-color: @term-white; transition: 0.5s; border-radius: 50%; } @@ -277,7 +274,6 @@ body .xterm .xterm-viewport { } .cmd-hints { - .mono-font(10px); display: flex; flex-direction: row; @@ -292,22 +288,22 @@ body .xterm .xterm-viewport { } .hint-item.color-green { - color: black; + color: @term-black; background-color: @tab-green; &:hover { - color: white; + color: @term-white; } } .hint-item.color-nohover-green { - color: black; + color: @term-black; background-color: @tab-green; cursor: default; } .hint-item.color-white { - color: black; + color: @term-black; background-color: @term-white; &:hover { @@ -316,22 +312,22 @@ body .xterm .xterm-viewport { } .hint-item.color-nohover-white { - color: black; + color: @term-black; background-color: @term-white; cursor: default; } .hint-item.color-blue { - color: black; + color: @term-black; background-color: @tab-blue; &:hover { - color: white; + color: @term-white; } } .hint-item.color-nohover-blue { - color: black; + color: @term-black; background-color: @tab-blue; cursor: default; } @@ -342,9 +338,8 @@ body .xterm .xterm-viewport { margin-bottom: 10px; code { - background-color: black; - color: white; - .mono-font(); + background-color: @term-black; + color: @term-white; padding: 5px; } @@ -354,14 +349,13 @@ body .xterm .xterm-viewport { } .title { - color: white; + color: @term-white; margin-top: 16px; - line-height: 1.25; margin-bottom: 8px; } strong { - color: white; + color: @term-white; } a { @@ -370,7 +364,7 @@ body .xterm .xterm-viewport { table { tr th { - color: white; + color: @term-white; } } @@ -399,26 +393,20 @@ body .xterm .xterm-viewport { } .title.is-1 { - font-size: 32px; border-bottom: 1px solid #777; padding-bottom: 6px; } .title.is-2 { - font-size: 24px; border-bottom: 1px solid #777; padding-bottom: 6px; } .title.is-3 { - font-size: 20px; } .title.is-4 { - font-size: 16px; } .title.is-5 { - font-size: 14px; } .title.is-6 { - font-size: 14px; } } @@ -432,14 +420,13 @@ body .xterm .xterm-viewport { left: 0; width: 100%; height: 100%; - background-color: white; + background-color: @term-white; opacity: 0; display: flex; flex-direction: row; align-items: center; justify-content: center; pointer-events: none; - .mono-font(12px); animation-name: fade-in-out; animation-duration: 0.3s; } @@ -483,17 +470,12 @@ body .xterm .xterm-viewport { z-index: -1; top: -5000px; - .mono { - .mono-font(); - } - .pre { white-space: pre; } } .text-button { - .mono-font(12px, 700); color: @term-white; cursor: pointer; background-color: #171717; @@ -584,8 +566,6 @@ body .xterm .xterm-viewport { } #main .term-prompt { - font-size: 14px; - i { margin-right: 3px; } @@ -650,7 +630,6 @@ body .xterm .xterm-viewport { } .remote-status { - font-size: 8px; margin-right: 5px; position: relative; top: -3px; diff --git a/src/common/terminal/Terminal.tsx b/src/common/terminal/Terminal.tsx new file mode 100644 index 000000000..e85cbfc2d --- /dev/null +++ b/src/common/terminal/Terminal.tsx @@ -0,0 +1,189 @@ +import * as React from "react"; +import * as mobxReact from "mobx-react"; +import * as mobx from "mobx"; +import { boundMethod } from "autobind-decorator"; +import dayjs from "dayjs"; +import localizedFormat from "dayjs/plugin/localizedFormat"; +import { If } from "tsx-control-statements/components"; +import { GlobalModel } from "../../model"; +import { termHeightFromRows } from "../../util/textmeasure"; +import type { LineType } from "../../types"; +import cn from "classnames"; +import type { LineContainerModel } from "../../model"; +import * as lineutil from "../../main/line/lineutil"; + +import "./terminal.less"; + +dayjs.extend(localizedFormat); + +type OV = mobx.IObservableValue; +type OArr = mobx.IObservableArray; +type OMap = mobx.ObservableMap; + +@mobxReact.observer +class TerminalRenderer extends React.Component< + { + screen: LineContainerModel; + line: LineType; + width: number; + staticRender: boolean; + visible: OV; + onHeightChange: () => void; + collapsed: boolean; + }, + {} +> { + termLoaded: mobx.IObservableValue = mobx.observable.box(false, { + name: "linecmd-term-loaded", + }); + elemRef: React.RefObject = React.createRef(); + termRef: React.RefObject = React.createRef(); + + constructor(props) { + super(props); + } + + componentDidMount() { + this.componentDidUpdate(null, null, null); + } + + componentWillUnmount() { + if (this.termLoaded.get()) { + this.unloadTerminal(true); + } + } + + getSnapshotBeforeUpdate(prevProps, prevState): { height: number } { + let elem = this.elemRef.current; + if (elem == null) { + return { height: 0 }; + } + return { height: elem.offsetHeight }; + } + + componentDidUpdate(prevProps, prevState, snapshot: { height: number }): void { + if (this.props.onHeightChange == null) { + return; + } + let { line } = this.props; + let curHeight = 0; + let elem = this.elemRef.current; + if (elem != null) { + curHeight = elem.offsetHeight; + } + if (snapshot == null) { + snapshot = { height: 0 }; + } + if (snapshot.height != curHeight) { + this.props.onHeightChange(); + // console.log("term-render height change: ", line.linenum, snapshot.height, "=>", curHeight); + } + this.checkLoad(); + } + + checkLoad(): void { + let { line, staticRender, visible, collapsed } = this.props; + if (staticRender) { + return; + } + let vis = visible && visible.get() && !collapsed; + let curVis = this.termLoaded.get(); + if (vis && !curVis) { + this.loadTerminal(); + } else if (!vis && curVis) { + this.unloadTerminal(false); + } + } + + loadTerminal(): void { + let { screen, line } = this.props; + let model = GlobalModel; + let cmd = screen.getCmd(line); + if (cmd == null) { + return; + } + let termElem = this.termRef.current; + if (termElem == null) { + console.log("cannot load terminal, no term elem found", line); + return; + } + screen.loadTerminalRenderer(termElem, line, cmd, this.props.width); + mobx.action(() => this.termLoaded.set(true))(); + } + + unloadTerminal(unmount: boolean): void { + let { screen, line } = this.props; + screen.unloadRenderer(line.lineid); + if (!unmount) { + mobx.action(() => this.termLoaded.set(false))(); + let termElem = this.termRef.current; + if (termElem != null) { + termElem.replaceChildren(); + } + } + } + + @boundMethod + clickTermBlock(e: any) { + let { screen, line } = this.props; + let model = GlobalModel; + let termWrap = screen.getTermWrap(line.lineid); + if (termWrap != null) { + termWrap.giveFocus(); + } + } + + render() { + let { screen, line, width, staticRender, visible, collapsed } = this.props; + let isVisible = visible.get(); // for reaction + let isPhysicalFocused = mobx + .computed(() => screen.getIsFocused(line.linenum), { + name: "computed-getIsFocused", + }) + .get(); + let isFocused = mobx + .computed( + () => { + let screenFocusType = screen.getFocusType(); + return isPhysicalFocused && screenFocusType == "cmd"; + }, + { name: "computed-isFocused" } + ) + .get(); + let cmd = screen.getCmd(line); // will not be null + let usedRows = screen.getUsedRows(lineutil.getRendererContext(line), line, cmd, width); + let termHeight = termHeightFromRows(usedRows, GlobalModel.termFontSize.get()); + let termLoaded = this.termLoaded.get(); + return ( +
+ +
+
+
+ +
+ ... +
+
+
+ ); + } +} + +export { TerminalRenderer }; diff --git a/src/ptydata.ts b/src/common/terminal/ptydata.ts similarity index 98% rename from src/ptydata.ts rename to src/common/terminal/ptydata.ts index 95acd251d..45c8e55e3 100644 --- a/src/ptydata.ts +++ b/src/common/terminal/ptydata.ts @@ -1,5 +1,5 @@ import * as mobx from "mobx"; -import { incObs } from "./util"; +import { incObs } from "../../util/util"; type OV = mobx.IObservableValue; type OArr = mobx.IObservableArray; diff --git a/src/term.ts b/src/common/terminal/term.ts similarity index 95% rename from src/term.ts rename to src/common/terminal/term.ts index 6f3dc2547..6e3181e34 100644 --- a/src/term.ts +++ b/src/common/terminal/term.ts @@ -2,10 +2,17 @@ import * as mobx from "mobx"; import { Terminal } from "xterm"; import { sprintf } from "sprintf-js"; import { boundMethod } from "autobind-decorator"; -import { v4 as uuidv4 } from "uuid"; -import { termHeightFromRows, windowWidthToCols, windowHeightToRows } from "./textmeasure"; -import { boundInt } from "./util"; -import type { TermContextUnion, TermOptsType, TermWinSize, RendererContext, WindowSize, PtyDataType } from "./types"; +import { windowWidthToCols, windowHeightToRows } from "../../util/textmeasure"; +import { boundInt } from "../../util/util"; +import type { + TermContextUnion, + TermOptsType, + TermWinSize, + RendererContext, + WindowSize, + PtyDataType, +} from "../../types"; +import { getTheme } from "../../themes"; type DataUpdate = { data: Uint8Array; @@ -77,15 +84,13 @@ class TermWrap { let cols = windowWidthToCols(opts.winSize.width, opts.fontSize); this.termSize = { rows: opts.termOpts.rows, cols: cols }; } - let theme = { - foreground: "#d3d7cf", - }; + const { terminal } = getTheme(); this.terminal = new Terminal({ rows: this.termSize.rows, cols: this.termSize.cols, fontSize: opts.fontSize, - fontFamily: "JetBrains Mono", - theme: theme, + theme: { foreground: terminal.foreground, background: terminal.background }, + /*fontFamily: "JetBrains Mono", @check:font */ }); this.terminal._core._inputHandler._parser.setErrorHandler((state) => { this.numParseErrors++; diff --git a/static/xterm.css b/src/common/terminal/terminal.less similarity index 84% rename from static/xterm.css rename to src/common/terminal/terminal.less index 74acc2670..9662b5d55 100644 --- a/static/xterm.css +++ b/src/common/terminal/terminal.less @@ -1,4 +1,7 @@ +@import "../../index.less"; + /** + * Adapted from xterm.css * Copyright (c) 2014 The xterm.js authors. All rights reserved. * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License) * https://github.com/chjj/term.js @@ -79,7 +82,7 @@ .xterm .composition-view { /* TODO: Composition position got messed up somewhere */ background: #000; - color: #FFF; + color: #fff; display: none; position: absolute; white-space: nowrap; @@ -122,7 +125,6 @@ position: absolute; top: 0; left: -9999em; - line-height: normal; } .xterm.enable-mouse-events { @@ -166,33 +168,53 @@ opacity: 1 !important; } -.xterm-underline-1 { text-decoration: underline; } -.xterm-underline-2 { text-decoration: double underline; } -.xterm-underline-3 { text-decoration: wavy underline; } -.xterm-underline-4 { text-decoration: dotted underline; } -.xterm-underline-5 { text-decoration: dashed underline; } +.xterm-underline-1 { + text-decoration: underline; +} +.xterm-underline-2 { + text-decoration: double underline; +} +.xterm-underline-3 { + text-decoration: wavy underline; +} +.xterm-underline-4 { + text-decoration: dotted underline; +} +.xterm-underline-5 { + text-decoration: dashed underline; +} .xterm-overline { text-decoration: overline; } -.xterm-overline.xterm-underline-1 { text-decoration: overline underline; } -.xterm-overline.xterm-underline-2 { text-decoration: overline double underline; } -.xterm-overline.xterm-underline-3 { text-decoration: overline wavy underline; } -.xterm-overline.xterm-underline-4 { text-decoration: overline dotted underline; } -.xterm-overline.xterm-underline-5 { text-decoration: overline dashed underline; } +.xterm-overline.xterm-underline-1 { + text-decoration: overline underline; +} +.xterm-overline.xterm-underline-2 { + text-decoration: overline double underline; +} +.xterm-overline.xterm-underline-3 { + text-decoration: overline wavy underline; +} +.xterm-overline.xterm-underline-4 { + text-decoration: overline dotted underline; +} +.xterm-overline.xterm-underline-5 { + text-decoration: overline dashed underline; +} .xterm-strikethrough { text-decoration: line-through; } .xterm-screen .xterm-decoration-container .xterm-decoration { - z-index: 6; - position: absolute; + z-index: 6; + position: absolute; } .xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer { - z-index: 7; + z-index: 7; } .xterm-decoration-overview-ruler { diff --git a/src/emain.ts b/src/emain.ts index a99172b6e..9e97a34c9 100644 --- a/src/emain.ts +++ b/src/emain.ts @@ -4,7 +4,7 @@ import * as fs from "fs"; import fetch from "node-fetch"; import * as child_process from "node:child_process"; import { debounce } from "throttle-debounce"; -import { handleJsonFetchResponse } from "./util"; +import { handleJsonFetchResponse } from "./util/util"; import * as winston from "winston"; import * as util from "util"; import { sprintf } from "sprintf-js"; @@ -201,12 +201,12 @@ function createMainWindow(clientData) { let win = new electron.BrowserWindow({ x: bounds.x, y: bounds.y, + titleBarStyle: "hiddenInset", width: bounds.width, height: bounds.height, webPreferences: { preload: path.join(getAppBasePath(), DistDir, "preload.js"), }, - backgroundColor: "#000", }); let indexHtml = isDev ? "index-dev.html" : "index.html"; win.loadFile(path.join(getAppBasePath(), "static", indexHtml)); diff --git a/src/fonts/MartianMono-VariableFont_wdth,wght.ttf b/src/fonts/MartianMono-VariableFont_wdth,wght.ttf new file mode 100644 index 000000000..843b2903d Binary files /dev/null and b/src/fonts/MartianMono-VariableFont_wdth,wght.ttf differ diff --git a/src/index.less b/src/index.less index 63ba387df..674144133 100644 --- a/src/index.less +++ b/src/index.less @@ -1,3 +1,7 @@ +@base-color: #eceeec; +@base-background: rgba(21, 23, 21, 1); +@base-background-dev: rgba(21, 23, 21, 1); + @term-black: #000000; @term-red: #cc0000; @term-green: #4e9a06; @@ -34,20 +38,38 @@ @active-menu-color: rgb(0, 71, 171); -@import "utils.less"; - -// global settings / overrides +@font-face { + font-family: "Martian Mono"; + src: url("./fonts/MartianMono-VariableFont_wdth,wght.ttf") format("truetype"); + font-weight: normal; + font-style: normal; +} :root { --fa-style-family: "Font Awesome 6 Sharp"; } html, -body, -#app, -#main { - background-color: #000; - height: 100vh; +body { + overflow: hidden; + font-family: "Martian Mono", sans-serif; + font-size: 12.5px; + font-weight: 300; + line-height: 20px; + background: @base-background; + color: @base-color; +} + +#title-bar { + -webkit-app-region: drag; + height: 30px; + width: 100%; + position: absolute; + top: 0; + left: 0; +} +.is-dev #title-bar { + background: @base-background-dev; } .content { @@ -56,10 +78,6 @@ body, } } -body { - overflow: hidden; -} - body::-webkit-scrollbar { display: none; } @@ -78,16 +96,35 @@ input[type="checkbox"] { cursor: pointer; } +.display-none { + display: none; +} + +.flex-spacer { + flex-grow: 1; +} + +.flex-centered-row { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +} + +a.a-block { + display: block; +} + // main layout #main { - height: 100vh; + margin-top: 30px; + height: calc(100vh - 30px); display: flex; flex-direction: column; .main-content { display: flex; flex-direction: row; - background-color: black; height: 100%; .session-view, @@ -120,38 +157,37 @@ input[type="checkbox"] { top: 0; right: 0; background-color: rgba(78, 154, 6, 0.65); - color: black; + color: @term-black; padding: 2px 8px 2px 4px; border-bottom-left-radius: 5px; z-index: 10; - font-size: 12px; &.is-active { - color: #ccc; + color: @term-white; } .render-mode { padding-top: 2px; - font-size: 16px; + position: relative; cursor: pointer; - color: #ccc; + color: @term-white; &:hover { - color: white; + color: @term-white; } } } .share-tag { - color: #ccc; + color: @term-white; position: absolute; top: 0; left: 40%; background-color: darken(rgb(0, 177, 10), 20%); padding: 2px 8px 2px 4px; z-index: 11; - font-size: 12px; + /* border-radius: 0 0 5px 5px; */ opacity: 0.8; display: flex; @@ -164,7 +200,6 @@ input[type="checkbox"] { &:hover { .share-tag-title { - font-size: 14px; font-weight: bold; } opacity: 1; @@ -189,11 +224,10 @@ input[type="checkbox"] { width: 100%; padding: 10px; height: 100%; - color: #ccc; - .mono-font(); + color: @term-white; code { - background-color: black; + background-color: @term-black; color: #4e9a06; } @@ -206,169 +240,19 @@ input[type="checkbox"] { } } -.remote-field .remote-status { - top: 4px; -} - -.terminal-wrapper { - position: relative; - - .term-block { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: transparent; - z-index: 10; - } - - .xterm-screen { - &::-webkit-scrollbar { - display: none; - } - } - - &.focus .xterm { - .xterm-screen { - overflow-y: scroll; - overscroll-behavior: contain; - } - - .xterm-viewport { - overscroll-behavior: contain; - } - } - - &.focus .xterm-viewport { - &::-webkit-scrollbar { - background-color: #777; - width: 5px; - height: 5px; - } - - &::-webkit-scrollbar-thumb { - background: white; - } - } - - .xterm-viewport { - &::-webkit-scrollbar { - background-color: #222; - width: 5px; - height: 5px; - } - - &::-webkit-scrollbar-thumb { - background: #555; - } - } -} - -body .xterm .xterm-viewport { - overflow-y: auto; - width: calc(100% + 5px); -} - -.checkbox-toggle { - position: relative; - display: inline-block; - width: 40px; - height: 23px; - - input { - opacity: 0; - width: 0; - height: 0; - } - - .slider { - position: absolute; - content: ""; - cursor: pointer; - top: 0; - bottom: 0; - left: 0; - right: 0; - background-color: #333; - transition: 0.5s; - border-radius: 33px; - } - - .slider:before { - position: absolute; - content: ""; - height: 18px; - width: 18px; - left: 3px; - bottom: 3px; - background-color: white; - transition: 0.5s; - border-radius: 50%; - } - - input:checked + .slider { - background-color: @term-green; - } - - input:checked + .slider:before { - transform: translateX(18px); - } -} - -.button.is-prompt-green { - background-color: #222; - color: @term-white; - - &:hover { - background-color: @term-green; - color: @term-bright-white; - } -} - -.button.is-plain, -.button.is-prompt-cancel { - background-color: #222; - color: @term-white; - - &:hover { - background-color: #666; - color: @term-bright-white; - } -} - -.button.is-prompt-danger { - background-color: #222; - color: @term-white; - - &:hover { - background-color: @tab-red; - color: @term-bright-white; - } -} - -.button.is-inline-height { - height: 22px; -} - -.button input.confirm-checkbox { - margin-right: 5px; -} - .copied-indicator { position: absolute; top: 0; left: 0; width: 100%; height: 100%; - background-color: white; + background-color: @term-white; opacity: 0; display: flex; flex-direction: row; align-items: center; justify-content: center; pointer-events: none; - .mono-font(12px); animation-name: fade-in-out; animation-duration: 0.3s; } @@ -412,17 +296,12 @@ body .xterm .xterm-viewport { z-index: -1; top: -5000px; - .mono { - .mono-font(); - } - .pre { white-space: pre; } } .text-button { - .mono-font(12px, 700); color: @term-white; cursor: pointer; background-color: #171717; @@ -513,8 +392,6 @@ body .xterm .xterm-viewport { } #main .term-prompt { - font-size: 14px; - i { margin-right: 3px; } @@ -579,7 +456,6 @@ body .xterm .xterm-viewport { } .remote-status { - font-size: 8px; margin-right: 5px; position: relative; top: -3px; diff --git a/src/index.ts b/src/index.ts index 3716ac26b..7cc8f2be5 100644 --- a/src/index.ts +++ b/src/index.ts @@ -3,7 +3,7 @@ import * as React from "react"; import { createRoot } from "react-dom/client"; import { sprintf } from "sprintf-js"; import { Main } from "./main/Main"; -import { loadFonts } from "./util"; +import { loadFonts } from "./util/util"; import * as DOMPurify from "dompurify"; // @ts-ignore @@ -17,14 +17,11 @@ document.addEventListener("DOMContentLoaded", () => { let reactElem = React.createElement(Main, null, null); let elem = document.getElementById("app"); let root = createRoot(elem); - let isFontLoaded = document.fonts.check("12px 'JetBrains Mono'"); - if (isFontLoaded) { + // @check:font + // let isFontLoaded = document.fonts.check("12px 'JetBrains Mono'"); + document.fonts.ready.then(() => { root.render(reactElem); - } else { - document.fonts.ready.then(() => { - root.render(reactElem); - }); - } + }); }); (window as any).mobx = mobx; diff --git a/src/main/Main.tsx b/src/main/Main.tsx index 9fb43c25c..641e5bc25 100644 --- a/src/main/Main.tsx +++ b/src/main/Main.tsx @@ -7,17 +7,17 @@ import dayjs from "dayjs"; import type { ContextMenuOpts } from "../types"; import localizedFormat from "dayjs/plugin/localizedFormat"; import { GlobalModel } from "../model"; -import { isBlank } from "../util"; +import { isBlank } from "../util/util"; import { BookmarksView } from "./bookmarks/bookmarks"; import { WebShareView } from "../webshare/webshare-client-view"; import { HistoryView } from "./history/history"; import { ScreenSettingsModal, SessionSettingsModal, LineSettingsModal, ClientSettingsModal } from "./modals/settings"; import { RemotesModal } from "../remotes/remotes"; import { TosModal } from "./modals/Modals"; - import { SessionView } from "./sessionview/SessionView"; import { MainSideBar } from "./sidebar/MainSideBar"; import { DisconnectedModal, ClientStopModal, AlertModal, WelcomeModal } from "./modals/Modals"; +import "../index.less"; dayjs.extend(localizedFormat); @@ -29,6 +29,7 @@ class Main extends React.Component<{}, {}> { constructor(props: any) { super(props); + if (GlobalModel.isDev) document.body.className = "is-dev"; } @boundMethod diff --git a/src/main/bookmarks/bookmarks.less b/src/main/bookmarks/bookmarks.less index a9546ebbb..f4ad6e6a0 100644 --- a/src/main/bookmarks/bookmarks.less +++ b/src/main/bookmarks/bookmarks.less @@ -2,7 +2,7 @@ .bookmarks-view { .bookmarks-list { - color: white; + color: @term-white; margin: 4px 10px 5px 5px; .no-bookmarks { @@ -42,19 +42,15 @@ } label { - color: white; + color: @term-white; margin-bottom: 4px; } textarea { width: 80%; min-width: 50%; - color: white; - background-color: black; - - &.mono-font { - .mono-font(12px); - } + color: @term-white; + background-color: @term-black; } .bookmark-id-div { @@ -63,7 +59,6 @@ color: #666; right: 5px; bottom: 2px; - .mono-font(8px); } &:hover .bookmark-id-div { @@ -73,7 +68,7 @@ .bookmark-controls { display: flex; flex-direction: row; - font-size: 16px; + visibility: hidden; color: @term-white; diff --git a/src/main/bookmarks/bookmarks.tsx b/src/main/bookmarks/bookmarks.tsx index a8b097808..a5300ebce 100644 --- a/src/main/bookmarks/bookmarks.tsx +++ b/src/main/bookmarks/bookmarks.tsx @@ -99,7 +99,7 @@ class Bookmark extends React.Component<{ bookmark: BookmarkType }, {}> {