mirror of
https://github.com/jellyfin/jellyfin-desktop.git
synced 2026-11-05 21:56:16 +00:00
Andrew Rabert
6a3cdfe10f
This changes the launch behavior to retry connection when the server cannot be reached on launch. It can be cancelled by pressing the escape key to show the server address form. This also changes the styling of this page.
139 lines
2.7 KiB
CSS
139 lines
2.7 KiB
CSS
* {
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
background-color: #101010;
|
|
color: #ddd;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
font-size: 1em;
|
|
padding: 1em;
|
|
}
|
|
.logo {
|
|
max-width: 500px;
|
|
margin-bottom: 2em;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
display: block;
|
|
}
|
|
input[type=text] {
|
|
display: block;
|
|
width: 100%;
|
|
font-size: 1em;
|
|
color: inherit;
|
|
background: #292929;
|
|
border: 0.16em solid #292929;
|
|
border-radius: 0.2em;
|
|
padding: 0.6em 0.8em;
|
|
font-family: inherit;
|
|
}
|
|
input[type=text]:focus {
|
|
border-color: #00a4dc;
|
|
outline: none;
|
|
}
|
|
input[type=text]::placeholder {
|
|
color: #666;
|
|
color: rgba(255, 255, 255, 0.3);
|
|
opacity: 1;
|
|
}
|
|
|
|
button {
|
|
width: 100%;
|
|
color: #fff;
|
|
background: #00a4dc;
|
|
border: none;
|
|
border-radius: 0.2em;
|
|
font-size: 1em;
|
|
padding: 0.75em 1.5em;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.025em;
|
|
outline: none;
|
|
font-family: inherit;
|
|
}
|
|
button:hover:not(:disabled) {
|
|
background: #0cb0e8;
|
|
}
|
|
button:disabled {
|
|
background-color: #292929;
|
|
cursor: default;
|
|
opacity: 0.6;
|
|
}
|
|
#container {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.logo {
|
|
max-width: 500px;
|
|
margin-bottom: 2em;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
display: block;
|
|
}
|
|
#title {
|
|
margin-top: 1em;
|
|
margin-bottom: 0;
|
|
font-size: 1.5em;
|
|
font-weight: 400;
|
|
color: #ddd;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
min-height: 1.5em;
|
|
height: 1.5em;
|
|
max-width: 450px;
|
|
width: 100%;
|
|
text-align: left;
|
|
visibility: hidden;
|
|
}
|
|
#connect-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
#address {
|
|
margin-bottom: 1em;
|
|
max-width: 450px;
|
|
height: 2.5em;
|
|
visibility: hidden;
|
|
}
|
|
#address.connecting {
|
|
visibility: hidden;
|
|
}
|
|
#spinner {
|
|
border: 6px solid #292929;
|
|
border-top: 6px solid #00a4dc;
|
|
border-radius: 50%;
|
|
width: 80px;
|
|
height: 80px;
|
|
animation: spin 1s linear infinite;
|
|
display: none;
|
|
position: absolute;
|
|
top: calc(1em + 1.5em + 1.25em);
|
|
left: 50%;
|
|
margin-left: -40px;
|
|
}
|
|
#connect-button {
|
|
max-width: 450px;
|
|
min-height: 2.5em;
|
|
visibility: hidden;
|
|
}
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
#connect-button.cancel {
|
|
background: #cb272a;
|
|
}
|
|
#connect-button.cancel:hover:not(:disabled) {
|
|
background: #d93134;
|
|
}
|