div.text_editor {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
div.header {
@include trz-header;
border: 1px solid var(--color);
box-sizing: border-box;
flex: 0 0 auto;
div.path-selector {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
img.path-selector-icon,
img.create-entry-icon {
@include trz-icon;
margin-left: var(--padding);
margin-right: var(--padding);
padding: 3px;
&.search-icon:hover {
filter: invert(0);
background-color: var(--link-color);
cursor: pointer;
}
}
img.create-entry-icon:hover,
img.create-entry-icon.active {
filter: invert(0);
background-color: var(--link-color);
cursor: pointer;
}
div.path-selector-widget {
position: relative;
display: flex;
flex-direction: row;
width: 100%;
input.path-selector-field {
background-color: var(--background-color);
color: var(--color);
border: 0;
width: 100%;
@include trz-font;
@include trz-no-outline;
}
span.path-selector-field {
white-space: nowrap;
}
ul.path-selector-autocomplete {
@include trz-menu;
max-height: calc(100vh - var(--header-height) - 5px);
overflow-y: scroll;
border-left: 1px dotted gray;
border-bottom: 1px dotted gray;
}
}
}
img.sync-status {
@include trz-icon;
margin-left: var(--padding);
margin-right: var(--padding);
}
img.refresh-editor,
img.toggle-editor-diff {
@include trz-icon;
margin-left: var(--padding);
margin-right: var(--padding);
padding: 3px;
&:hover {
filter: invert(0);
background-color: var(--link-color);
cursor: pointer;
}
}
img.toggle-editor-diff.active {
filter: invert(0);
background-color: var(--link-color);
cursor: pointer;
}
}
div.body {
width: 100%;
height: 100%;
min-height: 0;
flex: 1 1 auto;
display: flex;
flex-direction: row;
div.editor-container {
height: 100%;
width: 100%;
min-height: 0;
flex: 1 1 auto;
div.editor {
height: 100%;
width: 100%;
min-height: 0;
overflow: hidden;
:global(.cm-editor),
:global(.cm-mergeView) {
height: 100%;
min-height: 0;
}
:global(.cm-scroller) {
overflow: auto;
}
}
}
}
}