added proper server connection dialog

This commit is contained in:
ari melody 2023-10-03 01:21:34 +01:00
parent d3c35e7b8c
commit 6ced824e1c
No known key found for this signature in database
GPG key ID: 12A070A0ACDCA45F
4 changed files with 134 additions and 2 deletions

View file

@ -135,6 +135,7 @@ div#overlay {
pointer-events: none;
animation: linear .05s infinite alternate overlay-flicker;
mix-blend-mode: overlay;
z-index: 100;
}
body.lcd div#overlay {
@ -173,3 +174,75 @@ body.lcd pre#content {
pointer-events: none;
}
#dialog-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: none;
background: black;
opacity: .25;
z-index: 99;
}
#connect-dialog {
position: fixed;
top: 50%;
left: 50%;
max-width: calc(100vw - 4rem);
width: 16rem;
margin: auto auto;
padding: 1rem;
display: none;
transform: translate(-50%, -50%);
border: 1px solid var(--colour);
color: var(--colour);
background: var(--bgcolour);
text-shadow: 0 0 2em;
z-index: 99;
}
#dialog-backdrop.show,
#connect-dialog.show {
display: block;
}
#connect-dialog p {
margin: 0 0 1em 0;
}
#connect-dialog input {
font-family: inherit;
color: var(--colour);
border: 1px solid var(--colour);
background: transparent;
}
#connect-dialog input::placeholder {
font-family: inherit;
color: var(--colour);
opacity: .25;
}
#connect-dialog button {
font-family: inherit;
border: 1px solid var(--colour);
color: var(--colour);
background: transparent;
cursor: pointer;
}
#connect-dialog #connect-close {
position: absolute;
top: -0.7em;
right: 1rem;
border: none;
background: var(--bgcolour);
}
*:focus {
outline: none;
box-shadow: 0 0 4px;
}