A focused Docker Compose management web application.
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

style: update editor keybind style

Brooke 9cd3dea0 d7dddecb

+6 -18
+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 {