A focused Docker Compose management web application.
style: update editor keybind style
+6
-18
+6
-18
packages/panel/src/lib/component/ComposeEditor.svelte
+6
-18
packages/panel/src/lib/component/ComposeEditor.svelte
···
144
144
145
145
<div class="container">
146
146
{#if focused}
147
-
<div class="messages">
148
-
<div class="message"><Fa icon={faArrowRightFromBracket} /> Esc</div>
149
-
<div class="message"><Fa icon={faAlignLeft} /> Alt F</div>
147
+
<div class="keybinds">
148
+
<div class="keybind"><Fa icon={faArrowRightFromBracket} /> Esc</div>
149
+
<div class="keybind"><Fa icon={faAlignLeft} /> Alt F</div>
150
150
</div>
151
151
{/if}
152
152
<div onfocusin={() => (focused = true)} onfocusout={() => (focused = false)} class="editor" {@attach editor}></div>
···
161
161
justify-content: end;
162
162
}
163
163
164
-
.messages {
164
+
.keybinds {
165
+
z-index: 10;
166
+
165
167
pointer-events: none;
166
168
display: flex;
167
169
position: absolute;
168
170
gap: 10px;
169
171
170
172
margin: 10px;
171
-
}
172
-
173
-
.message {
174
-
display: flex;
175
-
align-items: center;
176
-
gap: 10px;
177
-
178
-
z-index: 10;
179
-
180
-
padding: 5px 10px;
181
-
182
-
background-color: var(--crust);
183
-
border: var(--subtext0);
184
-
border-radius: 5px;
185
173
}
186
174
187
175
.editor {