You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
82 lines
1.9 KiB
HTML
82 lines
1.9 KiB
HTML
6 years ago
|
<!--
|
||
|
This Source Code Form is subject to the terms of the Mozilla Public
|
||
|
License, v. 2.0. If a copy of the MPL was not distributed with this
|
||
|
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||
|
-->
|
||
|
<style>
|
||
|
.noconnection {
|
||
|
position: fixed;
|
||
|
left: 50%;
|
||
|
top: 50%;
|
||
|
transform: translate(-50%, -50%);
|
||
|
max-width: 60vw;
|
||
|
max-height: 50vh;
|
||
|
z-index: 0;
|
||
|
}
|
||
|
|
||
|
#text {
|
||
|
z-index: 100;
|
||
|
position: fixed;
|
||
|
left: 50%;
|
||
|
top: 50%;
|
||
|
transform: translate(-50%, -50%);
|
||
|
background-color: rgba(240,240,240,.7);
|
||
|
padding: 10px;
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
#text p {
|
||
|
font-size: 110%;
|
||
|
}
|
||
|
|
||
|
#noconnection-horiz {
|
||
|
display: none;
|
||
|
}
|
||
|
#noconnection-vert {
|
||
|
display: block;
|
||
|
}
|
||
|
@media (orientation: landscape) {
|
||
|
#noconnection-horiz {
|
||
|
display: block;
|
||
|
}
|
||
|
|
||
|
#noconnection-vert {
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
#text {
|
||
|
max-width: 20vw;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (min-width: 1200px) and (orientation: landscape) {
|
||
|
#noconnection-horiz {
|
||
|
max-width: 40vw;
|
||
|
}
|
||
|
#text {
|
||
|
max-width: 15vw;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (min-width: 2100px) and (orientation: landscape) {
|
||
|
#noconnection-horiz {
|
||
|
max-width: 35vw;
|
||
|
}
|
||
|
#text {
|
||
|
max-width: 20vw;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (min-height: 800px) and (orientation: portrait) {
|
||
|
#text {
|
||
|
max-height: 25vw;
|
||
|
}
|
||
|
}
|
||
|
</style>
|
||
|
<img src="assets/img/no-connection-horizontal.svg" id="noconnection-horiz" class="noconnection" />
|
||
|
<img src="assets/img/no-connection-vertical.svg" id="noconnection-vert" class="noconnection" />
|
||
|
<div id="text">
|
||
|
<h2>No connection</h2>
|
||
|
<p>Could not communicate with the server.</p>
|
||
|
<a href="index.html" class="btn btn-lg btn-primary">Try again</a>
|
||
|
</div>
|