73 lines
1.5 KiB
CSS
73 lines
1.5 KiB
CSS
.offline-ui,.offline-ui *,.offline-ui:before,.offline-ui:after,.offline-ui *:before,.offline-ui *:after {
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box
|
|
}
|
|
|
|
.offline-ui {
|
|
display: none;
|
|
position: fixed;
|
|
background: #fff;
|
|
z-index: 2000;
|
|
display: inline-block
|
|
}
|
|
|
|
.offline-ui .offline-ui-retry {
|
|
display: none
|
|
}
|
|
|
|
.offline-ui.offline-ui-up {
|
|
display: block
|
|
}
|
|
|
|
.offline-ui.offline-ui-down {
|
|
display: block
|
|
}
|
|
|
|
.offline-ui {
|
|
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.15);
|
|
-moz-box-shadow: 0 0 0 1px rgba(0,0,0,.15);
|
|
box-shadow: 0 0 0 1px rgba(0,0,0,.15);
|
|
-webkit-border-radius: 4px 4px 0 0;
|
|
-moz-border-radius: 4px 4px 0 0;
|
|
-ms-border-radius: 4px 4px 0 0;
|
|
-o-border-radius: 4px 4px 0 0;
|
|
border-radius: 4px 4px 0 0;
|
|
font-family: helvetica neue,sans-serif;
|
|
font-weight: 300;
|
|
padding: 1em;
|
|
background: #000;
|
|
color: #ccc;
|
|
bottom: 0;
|
|
left: 20px
|
|
}
|
|
|
|
.offline-ui .offline-ui-content {
|
|
padding-left: 1.5em
|
|
}
|
|
|
|
.offline-ui .offline-ui-content:after {
|
|
-webkit-border-radius: 50%;
|
|
-moz-border-radius: 50%;
|
|
-ms-border-radius: 50%;
|
|
-o-border-radius: 50%;
|
|
border-radius: 50%;
|
|
content: " ";
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 1em;
|
|
margin: auto;
|
|
height: .8em;
|
|
width: .8em
|
|
}
|
|
|
|
.offline-ui.offline-ui-up .offline-ui-content:after {
|
|
background: #80d580
|
|
}
|
|
|
|
.offline-ui.offline-ui-down .offline-ui-content:after {
|
|
background: #e24949
|
|
}
|