web-code-editor
Version:
web code editor
104 lines (88 loc) • 2.2 kB
text/stylus
.web-code-editor
.pane3
position: relative;
flex: 1;
background: var(--bg);
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
.title-tabs
order: 1;
display: flex;
background-color: var(--title-tabs-bg);
overflow: hidden;
scrollbar2(size = 4px);
&:hover
overflow: auto;
.item
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--filename);
width: 120px;
min-width: fit-content;
padding: 8px;
padding-left: 1.9em;
cursor: pointer;
user-select: none;
border-right: 1px solid var(--pane1-bg);
.close-icon
margin-left: 8px;
opacity: 0;
font-size: 12px;
&:hover > .close-icon
opacity: 1;
&.active
background-color: var(--bg);
color: var(--filenameHover);
.close-icon
opacity: 1;
&::after
position: absolute;
content: '🗄️';
left: 8px;
top: 50%;
transform: translateY(-50%);
.editor-container
order: 2;
flex: 1;
overflow: hidden;
position: relative;
.image-container
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: none;
background-color: var(--bg);
overflow: hidden;
scrollbar();
.image
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
overflow: auto;
img
max-width: 100%;
outline: none;
user-select: none;
cursor: grabbing;
.editor-textarea
height: 100%;
width: 100%;
font-family: var(--font-family);
font-size: 16px;
background-color: var(--bg);
margin: 0;
display: none;
.custom-codeMirror
height: 100%;
font-size: 18px;
scrollbar();