mirror of
https://github.com/wavetermdev/backup.git
synced 2026-08-05 13:57:07 -07:00
played with scrollbars and other things (#31)
* played with scrollbars and other things * fixed code stuff
This commit is contained in:
anandamarsh
+51
-24
@@ -18,10 +18,14 @@ body {
|
||||
font-size: 12.5px;
|
||||
font-weight: 300;
|
||||
line-height: 20px;
|
||||
background: @base-background-transparent;
|
||||
background: @base-background;
|
||||
color: @base-color;
|
||||
}
|
||||
|
||||
body.is-dev {
|
||||
background-color: @base-background-dev;
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: hidden;
|
||||
font-family: "Martian Mono", sans-serif;
|
||||
@@ -39,8 +43,6 @@ svg.icon {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// styles.less
|
||||
|
||||
.hoverEffect {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
@@ -51,19 +53,32 @@ svg.icon {
|
||||
}
|
||||
|
||||
.hideScrollbarUntillHover {
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
&:hover::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
overflow: hidden;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track {
|
||||
background-color: @scrollbar-background !important;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background-color: @scrollbar-thumb !important;
|
||||
}
|
||||
|
||||
.glow {
|
||||
&:focus,
|
||||
&:hover {
|
||||
border: 1px solid rgba(@prompt-green, 0.8) !important;
|
||||
box-shadow: 0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
|
||||
border: 1px solid @background-session-components !important;
|
||||
box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5) inset, 0px 0px 2px rgba(255, 255, 255, 0.2) inset;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -73,6 +88,32 @@ svg.icon {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.dropdown,
|
||||
.button {
|
||||
display: inline-block;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
background-color: @button-background;
|
||||
color: @prompt-green;
|
||||
.hoverEffect;
|
||||
&:hover {
|
||||
color: @prompt-green;
|
||||
}
|
||||
&.disabled {
|
||||
color: fade(@disabled-color, 60%);
|
||||
background: @disabled-background;
|
||||
cursor: initial;
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown {
|
||||
padding-left: 0.5rem;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
#title-bar {
|
||||
-webkit-app-region: drag;
|
||||
height: 30px;
|
||||
@@ -88,20 +129,6 @@ svg.icon {
|
||||
}
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar {
|
||||
background-color: #777;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background: white;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -41,110 +41,6 @@ import "./lines.less";
|
||||
dayjs.extend(localizedFormat);
|
||||
|
||||
type OV<V> = mobx.IObservableValue<V>;
|
||||
type OArr<V> = mobx.IObservableArray<V>;
|
||||
type OMap<K, V> = mobx.ObservableMap<K, V>;
|
||||
|
||||
type RendererComponentProps = {
|
||||
screen: LineContainerModel;
|
||||
line: LineType;
|
||||
width: number;
|
||||
staticRender: boolean;
|
||||
visible: OV<boolean>;
|
||||
onHeightChange: LineHeightChangeCallbackType;
|
||||
collapsed: boolean;
|
||||
};
|
||||
type RendererComponentType = {
|
||||
new (props: RendererComponentProps): React.Component<RendererComponentProps, {}>;
|
||||
};
|
||||
|
||||
function getShortVEnv(venvDir: string): string {
|
||||
if (isBlank(venvDir)) {
|
||||
return "";
|
||||
}
|
||||
let lastSlash = venvDir.lastIndexOf("/");
|
||||
if (lastSlash == -1) {
|
||||
return venvDir;
|
||||
}
|
||||
return venvDir.substr(lastSlash + 1);
|
||||
}
|
||||
|
||||
function makeFullRemoteRef(ownerName: string, remoteRef: string, name: string): string {
|
||||
if (isBlank(ownerName) && isBlank(name)) {
|
||||
return remoteRef;
|
||||
}
|
||||
if (!isBlank(ownerName) && isBlank(name)) {
|
||||
return ownerName + ":" + remoteRef;
|
||||
}
|
||||
if (isBlank(ownerName) && !isBlank(name)) {
|
||||
return remoteRef + ":" + name;
|
||||
}
|
||||
return ownerName + ":" + remoteRef + ":" + name;
|
||||
}
|
||||
|
||||
function getRemoteStr(rptr: RemotePtrType): string {
|
||||
if (rptr == null || isBlank(rptr.remoteid)) {
|
||||
return "(invalid remote)";
|
||||
}
|
||||
let username = isBlank(rptr.ownerid) ? null : GlobalModel.resolveUserIdToName(rptr.ownerid);
|
||||
let remoteRef = GlobalModel.resolveRemoteIdToRef(rptr.remoteid);
|
||||
let fullRef = makeFullRemoteRef(username, remoteRef, rptr.name);
|
||||
return fullRef;
|
||||
}
|
||||
|
||||
function replaceHomePath(path: string, homeDir: string): string {
|
||||
if (path == homeDir) {
|
||||
return "~";
|
||||
}
|
||||
if (path.startsWith(homeDir + "/")) {
|
||||
return "~" + path.substr(homeDir.length);
|
||||
}
|
||||
return path;
|
||||
}
|
||||
|
||||
function getCwdStr(remote: RemoteType, state: Record<string, string>): string {
|
||||
if (state == null || isBlank(state.cwd)) {
|
||||
return "~";
|
||||
}
|
||||
let cwd = state.cwd;
|
||||
if (remote && remote.remotevars.home) {
|
||||
cwd = replaceHomePath(cwd, remote.remotevars.home);
|
||||
}
|
||||
return cwd;
|
||||
}
|
||||
|
||||
@mobxReact.observer
|
||||
class LineAvatar extends React.Component<{ line: LineType; cmd: Cmd; onRightClick?: (e: any) => void }, {}> {
|
||||
render() {
|
||||
let { line, cmd } = this.props;
|
||||
let lineNumStr = (line.linenumtemp ? "~" : "") + String(line.linenum);
|
||||
let status = cmd != null ? cmd.getStatus() : "done";
|
||||
let rtnstate = cmd != null ? cmd.getRtnState() : false;
|
||||
let isComment = line.linetype == "text";
|
||||
return (
|
||||
<div
|
||||
onContextMenu={this.props.onRightClick}
|
||||
className={cn(
|
||||
"avatar",
|
||||
"num-" + lineNumStr.length,
|
||||
"status-" + status,
|
||||
{ ephemeral: line.ephemeral },
|
||||
{ rtnstate: rtnstate }
|
||||
)}
|
||||
>
|
||||
{lineNumStr}
|
||||
<If condition={status == "hangup" || status == "error"}>
|
||||
<i className="fa-sharp fa-solid fa-triangle-exclamation status-icon" />
|
||||
</If>
|
||||
<If condition={status == "detached"}>
|
||||
<i className="fa-sharp fa-solid fa-rotate status-icon" />
|
||||
</If>
|
||||
<If condition={isComment}>
|
||||
<i className="fa-sharp fa-solid fa-comment comment-icon" />
|
||||
</If>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@mobxReact.observer
|
||||
class SmallLineAvatar extends React.Component<{ line: LineType; cmd: Cmd; onRightClick?: (e: any) => void }, {}> {
|
||||
|
||||
+17
-13
@@ -9,16 +9,6 @@
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
margin-left: 10px;
|
||||
|
||||
.text {
|
||||
color: #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.line.line-selected {
|
||||
&.line-focused {
|
||||
outline-left: 3px solid blue;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -443,11 +433,26 @@
|
||||
.lines {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
padding: 10px 0 10px 0;
|
||||
overflow: auto;
|
||||
padding: 10px 0;
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: @scrollbar-thumb !important;
|
||||
}
|
||||
}
|
||||
|
||||
.line:nth-child(2) {
|
||||
padding-top: 1px;
|
||||
}
|
||||
@@ -459,7 +464,6 @@
|
||||
.line-sep {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
padding: 0;
|
||||
width: 20rem;
|
||||
min-width: 20rem;
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
@@ -51,7 +50,6 @@
|
||||
|
||||
.middle {
|
||||
max-height: calc(100vh - 32em);
|
||||
overflow-y: auto;
|
||||
padding: 8px 6px;
|
||||
border-bottom: 1px solid @base-border;
|
||||
.item {
|
||||
@@ -254,7 +252,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-dev .main-sidebar {
|
||||
background-color: @base-background-dev;
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
width: calc(100% - 32px);
|
||||
width: calc(100% - 28px);
|
||||
padding: 12px;
|
||||
z-index: 100;
|
||||
background: @background-session-components;
|
||||
@@ -87,12 +87,6 @@
|
||||
padding: 1em 2px;
|
||||
}
|
||||
|
||||
textarea::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
color: @term-bright-white;
|
||||
background-color: transparent;
|
||||
@@ -141,7 +135,7 @@
|
||||
border-radius: 50%;
|
||||
}
|
||||
.icon.disabled {
|
||||
fill: @disabled;
|
||||
fill: @disabled-background;
|
||||
cursor: default;
|
||||
}
|
||||
.cmd-btn {
|
||||
|
||||
@@ -534,7 +534,7 @@ class TextAreaInput extends React.Component<{ onHeightChange: () => void }, {}>
|
||||
if (activeScreen != null) {
|
||||
activeScreen.focusType.get(); // for reaction
|
||||
}
|
||||
let computedInnerHeight = (displayLines + 1) * GlobalModel.termFontSize.get();
|
||||
let computedInnerHeight = (displayLines + 1) * GlobalModel.termFontSize.get() + 4;
|
||||
let computedOuterHeight = (displayLines + 2) * GlobalModel.termFontSize.get();
|
||||
return (
|
||||
<div className="control is-expanded" ref={this.controlRef} style={{ height: computedOuterHeight }}>
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
.main-content {
|
||||
.screen-view {
|
||||
flex-grow: 1;
|
||||
border-right: 1px solid #ccc;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
@import "../../../index.less";
|
||||
|
||||
#main .screen-tabs .screen-tab {
|
||||
border-radius: 12px 0px 0px 0px;
|
||||
border-top: 1px solid transparent;
|
||||
|
||||
&.is-active {
|
||||
color: @tab-white-text;
|
||||
border-radius: 12px 0px 0px 0px;
|
||||
border-top: 1px solid #58c142;
|
||||
border-color: @prompt-green;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(88, 193, 66, 0.2) 9.34%,
|
||||
@@ -12,7 +13,7 @@
|
||||
rgba(88, 193, 66, 0) 86.79%
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
&.color-default {
|
||||
svg.left-icon path {
|
||||
fill: @tab-green;
|
||||
@@ -83,24 +84,12 @@
|
||||
.screen-tabs {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow-x: overlay;
|
||||
overflow-y: visible;
|
||||
overflow-x: hidden;
|
||||
align-items: center;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
z-index: 5;
|
||||
background-color: #fff;
|
||||
height: 4px;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #777;
|
||||
}
|
||||
|
||||
&.scrolling::-webkit-scrollbar {
|
||||
display: block;
|
||||
&:hover,
|
||||
&:focus {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.screen-tab {
|
||||
@@ -141,6 +130,7 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: @prompt-green !important;
|
||||
.tab-gear {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -129,7 +129,7 @@ class ScreenTabs extends React.Component<{ session: Session }, {}> {
|
||||
onClick={() => this.handleSwitchScreen(screen.screenId)}
|
||||
onContextMenu={(event) => this.openScreenSettings(event, screen)}
|
||||
>
|
||||
<SquareIcon className="icon left-icon"/>
|
||||
<SquareIcon className="icon left-icon" />
|
||||
<div className="tab-name truncate">
|
||||
{archived}
|
||||
{webShared}
|
||||
|
||||
@@ -8,8 +8,9 @@
|
||||
&.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
max-width: calc(100% - 21em);
|
||||
background: @background-session;
|
||||
border: 1px solid @base-border;
|
||||
border-radius: 8px;
|
||||
margin: 0 16px 16px 0;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
+7
-1
@@ -6,7 +6,13 @@
|
||||
@background-session: rgba(13, 13, 13, 0.85);
|
||||
@background-session-components: rgba(48, 49, 48, 0.6);
|
||||
@prompt-green: rgb(88, 193, 66);
|
||||
@disabled: rgba(76, 81, 75, 1);
|
||||
@disabled-background: rgba(76, 81, 75, 1);
|
||||
@disabled-color: #adadad;
|
||||
@scrollbar-background: rgba(21, 23, 21, 1);
|
||||
@scrollbar-thumb: rgb(134, 134, 134);
|
||||
@button-background: rgb(38, 38, 38);
|
||||
@success-green: rgb(38, 97, 26);
|
||||
@error-red: #cc0000;
|
||||
|
||||
@term-black: #000000;
|
||||
@term-red: #cc0000;
|
||||
|
||||
+59
-63
@@ -1,67 +1,69 @@
|
||||
@import "../../index.less";
|
||||
|
||||
.code-renderer {
|
||||
.monaco-editor {
|
||||
.monaco-editor-background,
|
||||
.margin-view-overlays {
|
||||
background-color: @base-background !important;
|
||||
}
|
||||
.scrollbar {
|
||||
height: 4px !important;
|
||||
width: 4px !important;
|
||||
.slider {
|
||||
background-color: @scrollbar-thumb !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.buttonContainer {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
position: absolute;
|
||||
padding: 0.5rem;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
.dropdown,
|
||||
.button {
|
||||
position: relative;
|
||||
font-size: 0.8rem;
|
||||
min-height: 1.5rem;
|
||||
max-height: 1.5rem;
|
||||
margin-right: 0.5rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
.dropdown {
|
||||
max-width: 7rem;
|
||||
}
|
||||
}
|
||||
.scroller {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 15px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.monaco-editor .monaco-editor-background {
|
||||
background-color: rgba(255, 255, 255, 0.075) !important;
|
||||
}
|
||||
.monaco-editor .scrollbar {
|
||||
height: 4px !important;
|
||||
width: 4px !important;
|
||||
}
|
||||
.monaco-editor .scrollbar .slider {
|
||||
background-color: rgba(255, 255, 255) !important;
|
||||
}
|
||||
|
||||
.cmd-hints,
|
||||
.dropdown {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
min-width: 6rem;
|
||||
max-width: 6rem;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.hint-item {
|
||||
border-radius: 4px 4px 0 0;
|
||||
padding: 3px 9px 2px 8px;
|
||||
text-align: center;
|
||||
&:hover {
|
||||
.buttonContainer {
|
||||
opacity: 1;
|
||||
}
|
||||
.scroller {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
section {
|
||||
transition: height 0.3s ease-in-out;
|
||||
}
|
||||
.preview {
|
||||
color: #000;
|
||||
background-color: rgb(200, 200, 200);
|
||||
}
|
||||
.preview:hover {
|
||||
background-color: @term-white !important;
|
||||
}
|
||||
.save-enabled {
|
||||
color: @term-white;
|
||||
background-color: #4e9a06;
|
||||
}
|
||||
.save-disabled {
|
||||
color: rgb(52, 52, 52);
|
||||
background-color: #aaaea7;
|
||||
cursor: default !important;
|
||||
}
|
||||
.save-disabled:hover {
|
||||
background-color: #aaaea7;
|
||||
}
|
||||
.close {
|
||||
color: @term-white;
|
||||
background-color: #9e0000;
|
||||
}
|
||||
.message {
|
||||
color: @term-white;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 1rem;
|
||||
padding: 4px 1rem;
|
||||
max-width: 80vw;
|
||||
.messageContainer {
|
||||
position: absolute;
|
||||
bottom: -3px;
|
||||
left: 14px;
|
||||
.message {
|
||||
background: @success-green;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 1rem;
|
||||
padding: 4px 1rem;
|
||||
max-width: 80vw;
|
||||
&.error {
|
||||
background: @error-red;
|
||||
}
|
||||
}
|
||||
}
|
||||
.readonly {
|
||||
position: absolute;
|
||||
@@ -93,8 +95,8 @@
|
||||
.gutter {
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
background: rgb(100, 100, 100);
|
||||
max-width: 4px;
|
||||
background: fade(@prompt-green, 40%);
|
||||
max-width: 3px;
|
||||
}
|
||||
.gutter-horizontal {
|
||||
cursor: col-resize;
|
||||
@@ -103,10 +105,10 @@
|
||||
cursor: row-resize;
|
||||
}
|
||||
.gutter:hover {
|
||||
background: rgb(155, 155, 155);
|
||||
background: @prompt-green;
|
||||
}
|
||||
.gutter-dragging:hover {
|
||||
background: rgb(155, 155, 155);
|
||||
background: @prompt-green;
|
||||
}
|
||||
|
||||
.pane {
|
||||
@@ -118,10 +120,4 @@
|
||||
.pane-dragging {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scrollable {
|
||||
height: 100vh;
|
||||
max-height: 100vh;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -359,10 +359,10 @@ class SourceCodeRenderer extends React.Component<
|
||||
const { selectedLanguage, isSave, languages, isPreviewerAvailable, showPreview } = this.state;
|
||||
let allowEditing = this.getAllowEditing();
|
||||
return (
|
||||
<div style={{ position: "absolute", bottom: "-3px", right: "8px" }}>
|
||||
<div className="buttonContainer">
|
||||
{isPreviewerAvailable && (
|
||||
<div className="cmd-hints" style={{ minWidth: "8rem", maxWidth: "8rem" }}>
|
||||
<div onClick={this.togglePreview} className={`hint-item preview`}>
|
||||
<div className="button">
|
||||
<div onClick={this.togglePreview} className={`preview`}>
|
||||
{`${showPreview ? "hide" : "show"} preview (`}
|
||||
{renderCmdText("P")}
|
||||
{`)`}
|
||||
@@ -377,11 +377,8 @@ class SourceCodeRenderer extends React.Component<
|
||||
))}
|
||||
</select>
|
||||
{allowEditing && (
|
||||
<div className="cmd-hints">
|
||||
<div
|
||||
onClick={() => this.doSave()}
|
||||
className={`hint-item ${isSave ? "save-enabled" : "save-disabled"}`}
|
||||
>
|
||||
<div className={`button ${isSave ? "" : "disabled"}`}>
|
||||
<div onClick={() => this.doSave()}>
|
||||
{`save (`}
|
||||
{renderCmdText("S")}
|
||||
{`)`}
|
||||
@@ -389,8 +386,8 @@ class SourceCodeRenderer extends React.Component<
|
||||
</div>
|
||||
)}
|
||||
{allowEditing && (
|
||||
<div className="cmd-hints">
|
||||
<div onClick={this.doClose} className={`hint-item close`}>
|
||||
<div className="button">
|
||||
<div onClick={this.doClose} className={`close`}>
|
||||
{`close (`}
|
||||
{renderCmdText("D")}
|
||||
{`)`}
|
||||
@@ -402,14 +399,8 @@ class SourceCodeRenderer extends React.Component<
|
||||
};
|
||||
|
||||
getMessage = () => (
|
||||
<div style={{ position: "absolute", bottom: "-3px", left: "14px" }}>
|
||||
<div
|
||||
className="message"
|
||||
style={{
|
||||
fontSize: GlobalModel.termFontSize.get(),
|
||||
background: `${this.state.message.status === "error" ? "red" : "#4e9a06"}`,
|
||||
}}
|
||||
>
|
||||
<div className="messageContainer">
|
||||
<div className={`message ${this.state.message.status === "error" ? "error" : ""}`}>
|
||||
{this.state.message.text}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,61 +2,11 @@
|
||||
@import "./xterm.less";
|
||||
|
||||
.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: auto;
|
||||
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;
|
||||
}
|
||||
overflow-y: hidden;
|
||||
}
|
||||
&:hover .xterm-viewport,
|
||||
&:focus-within .xterm-viewport {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
body .xterm .xterm-viewport {
|
||||
overflow-y: auto;
|
||||
width: calc(100% + 5px);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user