mirror of
https://github.com/wavetermdev/waveterm.git
synced 2024-12-21 16:38:23 +01:00
fix blocks blurry border (#104)
This commit is contained in:
Red J Adaya
GitHub
parent
c57c7ea220
commit
6d6102b912
@ -22,17 +22,17 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
*::-webkit-scrollbar-track {
|
*::-webkit-scrollbar-track {
|
||||||
background-color: var(--scrollbar-background-color) !important;
|
background-color: var(--scrollbar-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
*::-webkit-scrollbar-thumb {
|
*::-webkit-scrollbar-thumb {
|
||||||
background-color: var(--scrollbar-thumb-color) !important;
|
background-color: var(--scrollbar-thumb-color);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
margin: 0 1px 0 1px;
|
margin: 0 1px 0 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
*::-webkit-scrollbar-thumb:hover {
|
*::-webkit-scrollbar-thumb:hover {
|
||||||
background-color: var(--scrollbar-thumb-hover-color) !important;
|
background-color: var(--scrollbar-thumb-hover-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-spacer {
|
.flex-spacer {
|
||||||
@ -61,3 +61,18 @@ body {
|
|||||||
--os-handle-bg-hover: var(--scrollbar-thumb-hover-color);
|
--os-handle-bg-hover: var(--scrollbar-thumb-hover-color);
|
||||||
--os-handle-bg-active: var(--scrollbar-thumb-active-color);
|
--os-handle-bg-active: var(--scrollbar-thumb-active-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.scrollbar-hide-until-hover {
|
||||||
|
*::-webkit-scrollbar-thumb,
|
||||||
|
*::-webkit-scrollbar-track {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
*::-webkit-scrollbar-corner {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
*:hover::-webkit-scrollbar-thumb {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -12,7 +12,6 @@
|
|||||||
min-height: 0;
|
min-height: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background-color: rgba(255, 255, 255, 0.1);
|
|
||||||
|
|
||||||
.block-frame-icon {
|
.block-frame-icon {
|
||||||
margin-right: 0.5em;
|
margin-right: 0.5em;
|
||||||
@ -56,117 +55,145 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.block-frame-default {
|
&.block-frame-default {
|
||||||
border: 2px solid transparent;
|
position: relative;
|
||||||
|
padding: 2px;
|
||||||
|
|
||||||
|
.block-frame-default-inner {
|
||||||
|
background-color: rgba(255, 255, 255, 0.05);
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.block-frame-default-header {
|
||||||
|
display: flex;
|
||||||
|
height: 34px;
|
||||||
|
padding: 4px 0 4px 10px;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
align-self: stretch;
|
||||||
|
font: var(--header-font);
|
||||||
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 8px 8px 0 0;
|
||||||
|
|
||||||
|
.block-frame-default-header-iconview {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
color: var(--main-text-color);
|
||||||
|
|
||||||
|
.block-frame-preicon-button {
|
||||||
|
opacity: 0.7;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-frame-view-icon {
|
||||||
|
font-size: var(--header-icon-size);
|
||||||
|
opacity: 0.5;
|
||||||
|
width: var(--header-icon-width);
|
||||||
|
i {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-frame-view-type {
|
||||||
|
line-height: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-frame-blockid {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-frame-text {
|
||||||
|
font: var(--fixed-font);
|
||||||
|
font-size: 11px;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-frame-end-icons {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.block-frame-endicon-button {
|
||||||
|
opacity: 0.7;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 4px 6px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-frame-settings {
|
||||||
|
display: flex;
|
||||||
|
width: 24px;
|
||||||
|
padding: 6px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-frame-default-close {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
opacity: 0.5;
|
||||||
|
font-size: 11px;
|
||||||
|
width: 24px;
|
||||||
|
padding: 4px 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-frame-preview {
|
||||||
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
|
width: 100%;
|
||||||
|
flex-grow: 1;
|
||||||
|
border-bottom-left-radius: 8px;
|
||||||
|
border-bottom-right-radius: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-mask {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
pointer-events: none;
|
||||||
|
padding: 2px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
&.block-focused {
|
&.block-focused {
|
||||||
border: 2px solid var(--accent-color);
|
.block-mask {
|
||||||
|
border: 2px solid var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
&.block-no-highlight,
|
&.block-no-highlight,
|
||||||
&.block-preview {
|
&.block-preview {
|
||||||
border: 2px solid transparent;
|
.block-mask {
|
||||||
}
|
border: 2px solid rgba(255, 255, 255, 0.1);
|
||||||
}
|
|
||||||
|
|
||||||
.block-frame-default-header {
|
|
||||||
display: flex;
|
|
||||||
height: 34px;
|
|
||||||
padding: 4px 0 4px 10px;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
align-self: stretch;
|
|
||||||
font: var(--header-font);
|
|
||||||
background-color: #262626;
|
|
||||||
border-radius: 8px 8px 0 0;
|
|
||||||
|
|
||||||
.block-frame-default-header-iconview {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
color: var(--main-text-color);
|
|
||||||
|
|
||||||
.block-frame-preicon-button {
|
|
||||||
opacity: 0.7;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.block-frame-view-icon {
|
|
||||||
font-size: var(--header-icon-size);
|
|
||||||
opacity: 0.5;
|
|
||||||
width: var(--header-icon-width);
|
|
||||||
i {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.block-frame-view-type {
|
|
||||||
line-height: 12px;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.block-frame-blockid {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.block-frame-text {
|
|
||||||
font: var(--fixed-font);
|
|
||||||
font-size: 11px;
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.block-frame-end-icons {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.block-frame-endicon-button {
|
|
||||||
opacity: 0.7;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 4px 6px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.block-frame-settings {
|
|
||||||
display: flex;
|
|
||||||
width: 24px;
|
|
||||||
padding: 6px;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.block-frame-default-close {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
opacity: 0.5;
|
|
||||||
font-size: 11px;
|
|
||||||
width: 24px;
|
|
||||||
padding: 4px 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.block-frame-preview {
|
|
||||||
background-color: var(--main-bg-color);
|
|
||||||
width: 100%;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -293,24 +293,27 @@ const BlockFrame_Default_Component = ({
|
|||||||
ref={blockModel?.blockRef}
|
ref={blockModel?.blockRef}
|
||||||
style={style}
|
style={style}
|
||||||
>
|
>
|
||||||
<div
|
<div className="block-mask"></div>
|
||||||
className="block-frame-default-header"
|
<div className="block-frame-default-inner">
|
||||||
ref={layoutModel?.dragHandleRef}
|
<div
|
||||||
onContextMenu={(e) => handleHeaderContextMenu(e, blockData, viewModel, layoutModel?.onClose)}
|
className="block-frame-default-header"
|
||||||
>
|
ref={layoutModel?.dragHandleRef}
|
||||||
<div className="block-frame-default-header-iconview">
|
onContextMenu={(e) => handleHeaderContextMenu(e, blockData, viewModel, layoutModel?.onClose)}
|
||||||
{preIconButtonElem}
|
>
|
||||||
<div className="block-frame-view-icon">{getBlockHeaderIcon(viewIcon, blockData)}</div>
|
<div className="block-frame-default-header-iconview">
|
||||||
<div className="block-frame-view-type">{blockViewToName(blockData?.view)}</div>
|
{preIconButtonElem}
|
||||||
{settingsConfig?.blockheader?.showblockids && (
|
<div className="block-frame-view-icon">{getBlockHeaderIcon(viewIcon, blockData)}</div>
|
||||||
<div className="block-frame-blockid">[{blockId.substring(0, 8)}]</div>
|
<div className="block-frame-view-type">{blockViewToName(blockData?.view)}</div>
|
||||||
)}
|
{settingsConfig?.blockheader?.showblockids && (
|
||||||
|
<div className="block-frame-blockid">[{blockId.substring(0, 8)}]</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{util.isBlank(viewText) ? null : <div className="block-frame-text">{viewText}</div>}
|
||||||
|
<div className="flex-spacer"></div>
|
||||||
|
<div className="block-frame-end-icons">{endIconsElem}</div>
|
||||||
</div>
|
</div>
|
||||||
{util.isBlank(viewText) ? null : <div className="block-frame-text">{viewText}</div>}
|
{preview ? <div className="block-frame-preview" /> : children}
|
||||||
<div className="flex-spacer"></div>
|
|
||||||
<div className="block-frame-end-icons">{endIconsElem}</div>
|
|
||||||
</div>
|
</div>
|
||||||
{preview ? <div className="block-frame-preview" /> : children}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
width: 130px;
|
width: 130px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 6px 3px;
|
padding: 6px 3px 0px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: var(--secondary-text-color);
|
color: var(--secondary-text-color);
|
||||||
|
|||||||
@ -10,7 +10,7 @@
|
|||||||
.tab-bar {
|
.tab-bar {
|
||||||
position: relative; // Needed for absolute positioning of child tabs
|
position: relative; // Needed for absolute positioning of child tabs
|
||||||
margin-left: 100px;
|
margin-left: 100px;
|
||||||
height: 40px;
|
height: 33px;
|
||||||
// 36 is the width of add tab button
|
// 36 is the width of add tab button
|
||||||
// 100 is offset from the left, for macOS window controls and dragging
|
// 100 is offset from the left, for macOS window controls and dragging
|
||||||
// 50 right offset for dragging
|
// 50 right offset for dragging
|
||||||
|
|||||||
@ -19,10 +19,11 @@
|
|||||||
--warning-color: rgb(224, 185, 86);
|
--warning-color: rgb(224, 185, 86);
|
||||||
--success-color: rgb(78, 154, 6);
|
--success-color: rgb(78, 154, 6);
|
||||||
--hover-bg-color: rgba(255, 255, 255, 0.1);
|
--hover-bg-color: rgba(255, 255, 255, 0.1);
|
||||||
|
--block-bg-color: rgba(255, 255, 255, 0.05);
|
||||||
|
|
||||||
/* scrollbar colors */
|
/* scrollbar colors */
|
||||||
--scrollbar-background-color: var(--main-bg-color);
|
--scrollbar-background-color: transparent;
|
||||||
--scrollbar-thumb-color: rgba(255, 255, 255, 0.3);
|
--scrollbar-thumb-color: rgba(255, 255, 255, 0.15);
|
||||||
--scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.5);
|
--scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.5);
|
||||||
--scrollbar-thumb-active-color: rgba(255, 255, 255, 0.6);
|
--scrollbar-thumb-active-color: rgba(255, 255, 255, 0.6);
|
||||||
|
|
||||||
|
|||||||
@ -399,7 +399,7 @@ function PreviewView({ blockId, model }: { blockId: string; model: PreviewModel
|
|||||||
}, 10);
|
}, 10);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div ref={ref} className="full-preview">
|
<div ref={ref} className="full-preview scrollbar-hide-until-hover">
|
||||||
<DirNav cwdAtom={fileNameAtom} />
|
<DirNav cwdAtom={fileNameAtom} />
|
||||||
{specializedView}
|
{specializedView}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -107,4 +107,28 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.terminal {
|
||||||
|
*::-webkit-scrollbar {
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
*::-webkit-scrollbar-track {
|
||||||
|
background-color: var(--scrollbar-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
*::-webkit-scrollbar-thumb {
|
||||||
|
display: none;
|
||||||
|
background-color: var(--scrollbar-thumb-color);
|
||||||
|
border-radius: 4px;
|
||||||
|
margin: 0 1px 0 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
*::-webkit-scrollbar-thumb {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user