added proper server connection dialog
This commit is contained in:
parent
d3c35e7b8c
commit
6ced824e1c
4 changed files with 134 additions and 2 deletions
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue