Fixed some bugs and added a cookies disclaimer
This commit is contained in:
135
css/admin/mobile.css
Normal file
135
css/admin/mobile.css
Normal file
@@ -0,0 +1,135 @@
|
||||
@media only screen and (max-width: 467px){
|
||||
.open {
|
||||
position: absolute;
|
||||
top: -1%;
|
||||
left: 3%;
|
||||
font-size: 3em;
|
||||
visibility: visible;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar{
|
||||
position: fixed;
|
||||
width: 35%;
|
||||
top:0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: #121921;
|
||||
padding-top: 50px;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
position: absolute;
|
||||
bottom: 8%;
|
||||
}
|
||||
|
||||
.close {
|
||||
bottom: 14%;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.sidebar h1{
|
||||
display: block;
|
||||
padding: 10px 20px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-family: 'Trebuchet MS', sans-serif;
|
||||
letter-spacing: 2px;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
font-size: 2em;
|
||||
text-transform: uppercase;
|
||||
margin-top: 0;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.sidebar a{
|
||||
display: block;
|
||||
padding: 10px 20px;
|
||||
color: #bbb;
|
||||
text-decoration: none;
|
||||
font-family: 'Trebuchet MS', sans-serif;
|
||||
font-size: 1em;
|
||||
letter-spacing: 2px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.incident-date {
|
||||
top: 0px !important;
|
||||
}
|
||||
|
||||
.incident-submit {
|
||||
top: -17% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 467px){
|
||||
.open {
|
||||
position: absolute;
|
||||
top: -1%;
|
||||
left: 3%;
|
||||
font-size: 7em;
|
||||
visibility: visible;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar{
|
||||
position: fixed;
|
||||
width: 35%;
|
||||
top:0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: #121921;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.sidebar h1{
|
||||
display: block;
|
||||
padding: 10px 20px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-family: 'Trebuchet MS', sans-serif;
|
||||
letter-spacing: 2px;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
font-size: 3em;
|
||||
text-transform: uppercase;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.sidebar a{
|
||||
display: block;
|
||||
padding: 10px 20px;
|
||||
color: #bbb;
|
||||
text-decoration: none;
|
||||
font-family: 'Trebuchet MS', sans-serif;
|
||||
font-size: 2em;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.close {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 7%;
|
||||
}
|
||||
|
||||
.more-popup {
|
||||
margin: 15% auto 15% -30% !important;
|
||||
padding: 20px;
|
||||
background: #233142;
|
||||
border-radius: 5px;
|
||||
width: 70%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.incident-date {
|
||||
top: 0px !important;
|
||||
}
|
||||
|
||||
.incident-submit {
|
||||
top: -17% !important;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
420
css/admin/style.css
Normal file
420
css/admin/style.css
Normal file
@@ -0,0 +1,420 @@
|
||||
body {
|
||||
margin: 0;
|
||||
background: #233142;
|
||||
font-family: "Lato", sans-serif;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.sidebar{
|
||||
position: fixed;
|
||||
width: 13%;
|
||||
top:0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: #121921;
|
||||
padding-top: 50px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.sidebar h1{
|
||||
display: block;
|
||||
padding: 10px 20px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-family: "Rubik";
|
||||
letter-spacing: 2px;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
font-size: 25px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
display: block;
|
||||
padding: 10px 20px;
|
||||
color: #bbb;
|
||||
text-decoration: none;
|
||||
font-family: "Rubik";
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.sidebar a:hover:not(close){
|
||||
color: #fff;
|
||||
margin-left: 20px;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
position: absolute;
|
||||
bottom: 2%;
|
||||
}
|
||||
|
||||
.close {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.open {
|
||||
color: green;
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.more-box {
|
||||
width: 20%;
|
||||
margin: 0 auto;
|
||||
background: rgba(255,255,255,0.2);
|
||||
padding: 35px;
|
||||
border: 2px solid #233142;
|
||||
border-radius: 20px/50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.more-overlay {
|
||||
transition: opacity 300ms;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
padding-top: -1%;
|
||||
margin: -10% auto;
|
||||
margin-bottom: -2000px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.more-overlay:target {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.more-popup {
|
||||
margin: 15% auto 15% 30%;
|
||||
padding: 20px;
|
||||
background: #233142;
|
||||
border-radius: 5px;
|
||||
width: 70%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.more-popup h2 {
|
||||
margin-top: 0;
|
||||
color: #a6a6a6;
|
||||
font-family: Tahoma, Arial, sans-serif;
|
||||
font-size: 80px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.more-popup .content {
|
||||
max-height: 30%;
|
||||
overflow: auto;
|
||||
color: #d9d9d9;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.content-danger {
|
||||
color: #ff4d4d !important;
|
||||
}
|
||||
|
||||
.more-box-caller {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.up {
|
||||
color: #009900 !important;
|
||||
}
|
||||
|
||||
.maintenance {
|
||||
color: #ff9933 !important;
|
||||
}
|
||||
|
||||
.troubles {
|
||||
color: #ff1a1a !important;
|
||||
}
|
||||
|
||||
input {
|
||||
text-align: center;
|
||||
background-color: #ECF0F1;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 3px;
|
||||
font-size: 15px;
|
||||
font-weight: 200;
|
||||
padding: 10px 0;
|
||||
width: 200px;
|
||||
transition: border .5s;
|
||||
margin-left: -2px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
border: 2px solid #3498DB;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
text-align: center;
|
||||
background-color: #2c3e54;
|
||||
color: #7996b9;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 3px;
|
||||
font-size: 15px;
|
||||
font-weight: 200;
|
||||
padding: 10px 0;
|
||||
transition: border .5s;
|
||||
margin-left: -2px;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
select {
|
||||
text-align: center;
|
||||
background-color: #2c3e54 !important;
|
||||
color: #7996b9;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 3px;
|
||||
font-size: 15px;
|
||||
font-weight: 200;
|
||||
padding: 10px 0;
|
||||
width: 200px;
|
||||
transition: border .5s;
|
||||
margin-left: -2px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
select:focus {
|
||||
border: 2px solid #3498DB;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
button {
|
||||
position: relative;
|
||||
margin-bottom: 2px;
|
||||
font-size: 15px !important;
|
||||
font-weight: 200 !important;
|
||||
color: #7996b9 !important;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: 0;
|
||||
}
|
||||
button:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
width: 60px;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0.5;
|
||||
filter: blur(30px);
|
||||
transform: translateX(-100px) skewX(-15deg);
|
||||
}
|
||||
button:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
width: 30px;
|
||||
height: 100%;
|
||||
left: 30px;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
filter: blur(5px);
|
||||
transform: translateX(-100px) skewX(-15deg);
|
||||
}
|
||||
|
||||
button:hover:before {
|
||||
transform: translateX(300px) skewX(-15deg);
|
||||
opacity: 0.6;
|
||||
transition: 0.7s;
|
||||
}
|
||||
button:hover:after {
|
||||
transform: translateX(300px) skewX(-15deg);
|
||||
opacity: 1;
|
||||
transition: 0.7s;
|
||||
}
|
||||
|
||||
.button-green {
|
||||
background: #2c3e54;
|
||||
color: #ccc;
|
||||
width: 80px;
|
||||
height: 42px;
|
||||
border: 0;
|
||||
font-size: 18px;
|
||||
border-radius: 4px;
|
||||
font-family: "Raleway", sans-serif;
|
||||
transition: 0.6s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.button-green:hover {
|
||||
background: #338033;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button-red {
|
||||
background: #2c3e54;
|
||||
color: #ccc;
|
||||
width: 80px;
|
||||
height: 42px;
|
||||
border: 0;
|
||||
font-size: 18px;
|
||||
border-radius: 4px;
|
||||
font-family: "Raleway", sans-serif;
|
||||
transition: 0.6s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.button-red:hover {
|
||||
background: #990000;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button-orange {
|
||||
background: #2c3e54;
|
||||
color: #ccc;
|
||||
width: 80px;
|
||||
height: 42px;
|
||||
border: 0;
|
||||
font-size: 18px;
|
||||
border-radius: 4px;
|
||||
font-family: "Raleway", sans-serif;
|
||||
transition: 0.6s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.button-orange:hover {
|
||||
background: #cc6600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button-green-mini {
|
||||
background: #2c3e54;
|
||||
color: #ccc;
|
||||
width: 50px;
|
||||
height: 23px;
|
||||
top: -2px;
|
||||
border: 0;
|
||||
font-size: 18px;
|
||||
border-radius: 4px;
|
||||
font-family: "Raleway", sans-serif;
|
||||
transition: 0.6s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.button-green-mini:hover {
|
||||
background: #338033;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button-red-mini {
|
||||
background: #2c3e54;
|
||||
color: #ccc;
|
||||
width: 55px;
|
||||
height: 23px;
|
||||
top: -2px;
|
||||
border: 0;
|
||||
font-size: 18px;
|
||||
border-radius: 4px;
|
||||
font-family: "Raleway", sans-serif;
|
||||
transition: 0.6s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.button-mini-bigger {
|
||||
width: 75px !important;
|
||||
}
|
||||
|
||||
.button-bigger {
|
||||
width: 140px !important;
|
||||
}
|
||||
|
||||
.button-center {
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
}
|
||||
|
||||
.button-up {
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.button-red-mini:hover {
|
||||
background: #990000;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.username-field {
|
||||
color: #7996b9;
|
||||
background-color: #2c3e54;
|
||||
}
|
||||
|
||||
.field-newline {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.userlist-newline {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.wpassword {
|
||||
font-size: 12px;
|
||||
color: #ff0000;
|
||||
margin: center;
|
||||
}
|
||||
|
||||
.upassword {
|
||||
font-size: 12px;
|
||||
color: #009900;
|
||||
margin: center;
|
||||
}
|
||||
|
||||
.block {
|
||||
}
|
||||
|
||||
.incident {
|
||||
margin-top: 1%;
|
||||
color: #7996b9;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.timeline-icon {
|
||||
display:flex;
|
||||
float:left;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.timeline-new:before {
|
||||
font-family:FontAwesome;
|
||||
content: "\f0a1";
|
||||
color: #cc6600;
|
||||
}
|
||||
|
||||
.timeline-working:before {
|
||||
font-family:FontAwesome;
|
||||
content: "\f013";
|
||||
color: #0052cc;
|
||||
}
|
||||
|
||||
.timeline-update:before {
|
||||
font-family:FontAwesome;
|
||||
content: "\f0e5";
|
||||
color: #4d9900;
|
||||
}
|
||||
|
||||
.timeline-finished:before {
|
||||
font-family:FontAwesome;
|
||||
content: "\f00c";
|
||||
color: #8bc34a;
|
||||
}
|
||||
|
||||
.incident-date {
|
||||
position: relative;
|
||||
top: -85px;
|
||||
}
|
||||
|
||||
.incident-submit {
|
||||
left: -2px;
|
||||
top: -83px;
|
||||
}
|
||||
2337
css/font-awesome/css/font-awesome.css
vendored
Normal file
2337
css/font-awesome/css/font-awesome.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
4
css/font-awesome/css/font-awesome.min.css
vendored
Normal file
4
css/font-awesome/css/font-awesome.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
css/font-awesome/fonts/FontAwesome.otf
Normal file
BIN
css/font-awesome/fonts/FontAwesome.otf
Normal file
Binary file not shown.
BIN
css/font-awesome/fonts/fontawesome-webfont.eot
Normal file
BIN
css/font-awesome/fonts/fontawesome-webfont.eot
Normal file
Binary file not shown.
2671
css/font-awesome/fonts/fontawesome-webfont.svg
Normal file
2671
css/font-awesome/fonts/fontawesome-webfont.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 434 KiB |
BIN
css/font-awesome/fonts/fontawesome-webfont.ttf
Normal file
BIN
css/font-awesome/fonts/fontawesome-webfont.ttf
Normal file
Binary file not shown.
BIN
css/font-awesome/fonts/fontawesome-webfont.woff
Normal file
BIN
css/font-awesome/fonts/fontawesome-webfont.woff
Normal file
Binary file not shown.
BIN
css/font-awesome/fonts/fontawesome-webfont.woff2
Normal file
BIN
css/font-awesome/fonts/fontawesome-webfont.woff2
Normal file
Binary file not shown.
296
css/login/style.css
Normal file
296
css/login/style.css
Normal file
@@ -0,0 +1,296 @@
|
||||
html {
|
||||
height: 100%;
|
||||
background: radial-gradient(ellipse, #1b2735 0%, #090a0f 100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/**Parallax Stars from Codepen**/
|
||||
/**https://codepen.io/maadc/pen/oarbEM**/
|
||||
#stars {
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
animation: animStar 40s linear infinite;
|
||||
box-shadow: 1099px 204px #fff, 1708px 1116px #fff, 1147px 1309px #fff,
|
||||
25px 1804px #fff, 1690px 1154px #fff, 1731px 747px #fff, 675px 1401px #fff,
|
||||
944px 1148px #fff, 1302px 1465px #fff, 1023px 1535px #fff, 1032px 549px #fff,
|
||||
1794px 731px #fff, 565px 1301px #fff, 1332px 1562px #fff, 314px 734px #fff,
|
||||
955px 463px #fff, 1899px 882px #fff, 1397px 1692px #fff, 572px 599px #fff,
|
||||
460px 960px #fff, 60px 260px #fff, 1684px 1780px #fff, 310px 1318px #fff,
|
||||
1789px 1632px #fff, 1871px 1705px #fff, 791px 1245px #fff, 944px 1042px #fff,
|
||||
1191px 1847px #fff, 1961px 269px #fff, 723px 720px #fff, 1534px 698px #fff,
|
||||
301px 957px #fff, 1087px 1577px #fff, 734px 278px #fff, 647px 1477px #fff,
|
||||
529px 1904px #fff, 15px 46px #fff, 805px 382px #fff, 1933px 1427px #fff,
|
||||
1526px 1929px #fff, 871px 966px #fff, 829px 15px #fff, 1619px 1137px #fff,
|
||||
1397px 1681px #fff, 654px 1984px #fff, 1397px 556px #fff, 850px 1739px #fff,
|
||||
620px 1725px #fff, 1845px 1934px #fff, 1158px 875px #fff, 945px 341px #fff,
|
||||
427px 1679px #fff, 191px 105px #fff, 1396px 1957px #fff, 1808px 1493px #fff,
|
||||
1133px 460px #fff, 13px 1741px #fff, 140px 1053px #fff, 496px 1416px #fff,
|
||||
1313px 739px #fff, 1461px 288px #fff, 933px 1008px #fff, 1532px 777px #fff,
|
||||
1586px 169px #fff, 985px 1202px #fff, 1249px 1749px #fff, 629px 829px #fff,
|
||||
963px 1075px #fff, 701px 743px #fff, 1284px 30px #fff, 662px 1867px #fff,
|
||||
101px 691px #fff, 1667px 1490px #fff, 1443px 1166px #fff, 1618px 651px #fff,
|
||||
1843px 119px #fff, 736px 494px #fff, 1266px 680px #fff, 606px 1339px #fff,
|
||||
1046px 1926px #fff, 642px 522px #fff, 1786px 1668px #fff, 1681px 862px #fff,
|
||||
1012px 1181px #fff, 1279px 1271px #fff, 806px 557px #fff, 401px 208px #fff,
|
||||
730px 789px #fff, 1421px 488px #fff, 1549px 1937px #fff, 150px 1627px #fff,
|
||||
1693px 787px #fff, 324px 1984px #fff, 1084px 310px #fff, 696px 1255px #fff,
|
||||
1908px 48px #fff, 614px 1863px #fff, 348px 1724px #fff, 1457px 254px #fff,
|
||||
1506px 150px #fff, 875px 1506px #fff, 988px 1020px #fff, 1524px 1492px #fff,
|
||||
1722px 1681px #fff, 1102px 1669px #fff, 860px 768px #fff, 1369px 336px #fff,
|
||||
1432px 19px #fff, 748px 988px #fff, 635px 1578px #fff, 1943px 397px #fff,
|
||||
1944px 1615px #fff, 696px 225px #fff, 1922px 196px #fff, 1601px 1779px #fff,
|
||||
1363px 1541px #fff, 14px 1554px #fff, 618px 917px #fff, 336px 992px #fff,
|
||||
1208px 1788px #fff, 1617px 764px #fff, 1769px 1294px #fff, 1222px 9px #fff,
|
||||
1386px 1796px #fff, 533px 575px #fff, 596px 923px #fff, 1847px 431px #fff,
|
||||
1426px 160px #fff, 1128px 1833px #fff, 316px 233px #fff, 1293px 13px #fff,
|
||||
987px 356px #fff, 1396px 1073px #fff, 1763px 1076px #fff, 1655px 547px #fff,
|
||||
1923px 1286px #fff, 814px 1567px #fff, 856px 71px #fff, 1766px 886px #fff,
|
||||
1764px 70px #fff, 1557px 279px #fff, 317px 660px #fff, 1828px 732px #fff,
|
||||
327px 137px #fff, 307px 1363px #fff, 1355px 1970px #fff, 1559px 614px #fff,
|
||||
1500px 467px #fff, 1460px 1827px #fff, 570px 560px #fff, 918px 544px #fff,
|
||||
1816px 806px #fff, 646px 1641px #fff, 415px 199px #fff, 1621px 917px #fff,
|
||||
1080px 893px #fff, 1537px 838px #fff, 1089px 539px #fff, 291px 711px #fff,
|
||||
1654px 1537px #fff, 1065px 1843px #fff, 522px 1073px #fff, 813px 1724px #fff,
|
||||
1005px 1984px #fff, 1807px 1783px #fff, 357px 1186px #fff, 757px 523px #fff,
|
||||
1182px 248px #fff, 1232px 1491px #fff, 1391px 796px #fff, 1578px 54px #fff,
|
||||
912px 1178px #fff, 1988px 1421px #fff, 500px 1545px #fff, 1266px 890px #fff,
|
||||
1108px 897px #fff, 727px 111px #fff, 673px 1184px #fff, 561px 906px #fff,
|
||||
1957px 1993px #fff, 698px 1419px #fff, 328px 1484px #fff, 710px 772px #fff,
|
||||
14px 1102px #fff, 160px 1068px #fff, 1896px 595px #fff, 213px 775px #fff,
|
||||
1184px 1495px #fff, 883px 239px #fff, 1092px 1733px #fff, 1041px 570px #fff,
|
||||
189px 1295px #fff, 1343px 1128px #fff, 127px 1581px #fff, 1706px 288px #fff,
|
||||
218px 919px #fff, 1333px 1223px #fff, 1958px 1385px #fff, 600px 575px #fff,
|
||||
1542px 952px #fff, 1894px 1212px #fff, 810px 492px #fff, 722px 1119px #fff,
|
||||
746px 298px #fff, 770px 392px #fff, 922px 355px #fff, 1651px 934px #fff,
|
||||
566px 415px #fff, 675px 1922px #fff, 488px 5px #fff, 918px 809px #fff,
|
||||
1510px 1827px #fff, 511px 165px #fff, 382px 1684px #fff, 1934px 1992px #fff,
|
||||
993px 1730px #fff, 1603px 1836px #fff, 63px 234px #fff, 250px 1178px #fff,
|
||||
467px 1201px #fff, 1883px 7px #fff, 1868px 1487px #fff, 868px 1971px #fff,
|
||||
613px 1272px #fff, 664px 756px #fff, 1781px 1327px #fff, 165px 544px #fff,
|
||||
319px 45px #fff, 1870px 629px #fff, 556px 1502px #fff, 975px 807px #fff,
|
||||
1869px 313px #fff, 156px 1968px #fff, 1647px 555px #fff, 1589px 864px #fff,
|
||||
85px 1634px #fff, 943px 202px #fff, 1270px 1850px #fff, 1910px 307px #fff,
|
||||
1163px 1002px #fff, 1571px 1892px #fff, 835px 1929px #fff, 322px 1527px #fff,
|
||||
1706px 1371px #fff, 1498px 967px #fff, 466px 1566px #fff, 1330px 542px #fff,
|
||||
1651px 1955px #fff, 1416px 685px #fff, 1484px 1447px #fff, 161px 1975px #fff,
|
||||
866px 1581px #fff, 252px 416px #fff, 1693px 1326px #fff, 1810px 43px #fff,
|
||||
653px 650px #fff, 744px 654px #fff, 1573px 590px #fff, 1430px 1962px #fff,
|
||||
52px 312px #fff, 710px 1805px #fff, 1910px 87px #fff, 1767px 1641px #fff,
|
||||
281px 608px #fff, 191px 95px #fff, 861px 717px #fff, 1890px 1608px #fff,
|
||||
495px 1847px #fff, 459px 1932px #fff, 206px 1262px #fff, 950px 1761px #fff,
|
||||
213px 110px #fff, 1051px 1830px #fff, 1550px 55px #fff, 240px 170px #fff,
|
||||
629px 1986px #fff, 816px 1520px #fff, 1615px 1032px #fff, 995px 1963px #fff,
|
||||
272px 180px #fff, 916px 1876px #fff, 176px 793px #fff, 517px 1886px #fff,
|
||||
1907px 1182px #fff, 161px 951px #fff, 1395px 1642px #fff, 278px 1828px #fff,
|
||||
733px 1605px #fff, 268px 504px #fff, 447px 631px #fff, 773px 232px #fff,
|
||||
1978px 1272px #fff, 1902px 1673px #fff, 1398px 544px #fff, 1369px 464px #fff,
|
||||
1902px 1018px #fff, 1864px 558px #fff, 1194px 1182px #fff, 1813px 95px #fff,
|
||||
1465px 318px #fff, 1929px 1685px #fff, 228px 692px #fff, 1179px 1618px #fff,
|
||||
1419px 517px #fff, 459px 748px #fff, 1202px 629px #fff, 1456px 1115px #fff,
|
||||
803px 307px #fff, 380px 466px #fff, 294px 467px #fff, 301px 1257px #fff,
|
||||
425px 184px #fff, 383px 1178px #fff, 458px 716px #fff, 1766px 495px #fff,
|
||||
159px 1325px #fff, 12px 1395px #fff, 1024px 104px #fff, 1609px 1955px #fff,
|
||||
824px 304px #fff, 1338px 1144px #fff, 250px 45px #fff, 1100px 1464px #fff,
|
||||
1948px 811px #fff, 942px 624px #fff, 39px 356px #fff, 566px 1666px #fff,
|
||||
901px 517px #fff, 1904px 1230px #fff, 1195px 123px #fff, 200px 187px #fff,
|
||||
1538px 463px #fff, 518px 1670px #fff, 1680px 183px #fff, 1051px 608px #fff,
|
||||
51px 70px #fff, 21px 1896px #fff, 863px 583px #fff, 375px 206px #fff,
|
||||
802px 75px #fff, 152px 1920px #fff, 308px 1255px #fff, 836px 329px #fff,
|
||||
952px 193px #fff, 515px 800px #fff, 1236px 1406px #fff, 1606px 871px #fff,
|
||||
1882px 1016px #fff, 825px 931px #fff, 562px 552px #fff, 1699px 1585px #fff,
|
||||
1643px 1161px #fff, 1796px 1371px #fff, 301px 1056px #fff,
|
||||
1893px 1668px #fff, 1739px 1660px #fff, 914px 612px #fff, 307px 1px #fff,
|
||||
88px 315px #fff, 1186px 1326px #fff, 1086px 1646px #fff, 368px 1944px #fff,
|
||||
1422px 882px #fff, 858px 1844px #fff, 1554px 817px #fff, 1224px 1606px #fff,
|
||||
1901px 406px #fff, 447px 807px #fff, 1364px 461px #fff, 635px 1541px #fff,
|
||||
506px 294px #fff, 2000px 1960px #fff, 498px 900px #fff, 1374px 154px #fff,
|
||||
264px 480px #fff, 1561px 471px #fff, 1381px 1692px #fff, 1954px 1513px #fff,
|
||||
701px 76px #fff, 1730px 1587px #fff, 1002px 279px #fff, 524px 1620px #fff,
|
||||
282px 1248px #fff, 686px 1528px #fff, 755px 719px #fff, 789px 1218px #fff,
|
||||
205px 533px #fff, 330px 1649px #fff, 1089px 1357px #fff, 1116px 975px #fff,
|
||||
281px 394px #fff, 1635px 1678px #fff, 529px 1008px #fff, 1465px 798px #fff,
|
||||
1968px 771px #fff, 129px 214px #fff, 733px 10px #fff, 847px 622px #fff,
|
||||
1114px 8px #fff, 1714px 1396px #fff, 861px 1787px #fff, 480px 1624px #fff,
|
||||
1026px 741px #fff, 1436px 167px #fff, 1642px 54px #fff, 1228px 141px #fff,
|
||||
1282px 1416px #fff, 1703px 1192px #fff, 1885px 33px #fff, 1663px 221px #fff,
|
||||
807px 283px #fff, 67px 1949px #fff, 961px 1480px #fff, 1709px 1359px #fff,
|
||||
591px 1867px #fff, 1481px 1938px #fff, 189px 244px #fff, 1825px 1499px #fff,
|
||||
816px 1190px #fff, 1679px 1521px #fff, 1376px 1324px #fff, 951px 1782px #fff,
|
||||
953px 556px #fff, 1710px 1706px #fff, 1826px 608px #fff, 1326px 1095px #fff,
|
||||
1467px 1709px #fff, 697px 731px #fff, 1323px 1097px #fff, 1192px 888px #fff,
|
||||
732px 443px #fff, 431px 1225px #fff, 851px 1716px #fff, 30px 289px #fff,
|
||||
47px 1807px #fff, 411px 1084px #fff, 881px 1385px #fff, 1347px 1646px #fff,
|
||||
1577px 448px #fff, 1459px 229px #fff, 1178px 1305px #fff, 1467px 1527px #fff,
|
||||
538px 807px #fff, 1377px 1531px #fff, 1398px 78px #fff, 1573px 422px #fff,
|
||||
10px 1896px #fff, 435px 544px #fff, 224px 406px #fff, 7px 609px #fff,
|
||||
752px 1956px #fff, 268px 964px #fff, 1395px 1358px #fff, 38px 492px #fff,
|
||||
1819px 705px #fff, 56px 249px #fff, 1337px 1983px #fff, 151px 5px #fff,
|
||||
533px 102px #fff, 1849px 678px #fff, 1393px 1483px #fff, 1166px 735px #fff,
|
||||
425px 98px #fff, 907px 1764px #fff, 1628px 379px #fff, 1356px 1566px #fff,
|
||||
1917px 1476px #fff, 162px 1815px #fff, 1518px 1495px #fff, 1889px 259px #fff,
|
||||
342px 100px #fff, 1520px 248px #fff, 606px 1010px #fff, 553px 1713px #fff,
|
||||
134px 1898px #fff, 721px 1342px #fff, 2px 1437px #fff, 1563px 890px #fff,
|
||||
888px 1370px #fff, 1606px 1304px #fff, 786px 1421px #fff, 1426px 1692px #fff,
|
||||
1693px 135px #fff, 1695px 49px #fff, 1145px 222px #fff, 65px 1376px #fff,
|
||||
1027px 1788px #fff, 1007px 873px #fff, 1380px 67px #fff, 341px 1319px #fff,
|
||||
34px 583px #fff, 1066px 921px #fff, 113px 689px #fff, 412px 1925px #fff,
|
||||
1268px 67px #fff, 1535px 1358px #fff, 530px 317px #fff, 425px 349px #fff,
|
||||
1435px 572px #fff, 1118px 1285px #fff, 875px 1186px #fff, 472px 520px #fff,
|
||||
603px 463px #fff, 1578px 1649px #fff, 1659px 1046px #fff, 895px 1602px #fff,
|
||||
1486px 1084px #fff, 1683px 1294px #fff, 290px 1862px #fff, 739px 1192px #fff,
|
||||
615px 301px #fff, 696px 1592px #fff, 530px 79px #fff, 1718px 1266px #fff,
|
||||
151px 1700px #fff, 1989px 1824px #fff, 1237px 1613px #fff, 964px 1299px #fff,
|
||||
335px 341px #fff, 1133px 975px #fff, 996px 438px #fff, 281px 1552px #fff,
|
||||
1352px 1071px #fff, 1057px 1379px #fff, 342px 14px #fff, 1154px 1563px #fff,
|
||||
1802px 705px #fff, 737px 1790px #fff, 657px 1487px #fff, 1533px 1166px #fff,
|
||||
1195px 704px #fff, 1448px 216px #fff, 1606px 1480px #fff, 1783px 1450px #fff,
|
||||
626px 1292px #fff, 522px 258px #fff, 724px 1347px #fff, 55px 106px #fff,
|
||||
948px 1791px #fff, 1672px 1688px #fff, 1094px 1534px #fff, 464px 1681px #fff,
|
||||
666px 1081px #fff, 1413px 785px #fff, 74px 122px #fff, 1023px 1171px #fff,
|
||||
407px 1852px #fff, 1254px 1667px #fff, 662px 256px #fff, 1969px 1163px #fff,
|
||||
905px 939px #fff, 514px 120px #fff, 306px 365px #fff, 287px 1828px #fff,
|
||||
881px 149px #fff, 1859px 403px #fff, 1008px 1725px #fff, 305px 564px #fff,
|
||||
543px 1109px #fff, 1040px 337px #fff, 957px 62px #fff, 1039px 1250px #fff,
|
||||
869px 267px #fff, 1450px 229px #fff, 1910px 686px #fff, 1373px 1913px #fff,
|
||||
1202px 1617px #fff, 911px 545px #fff, 1537px 1311px #fff, 124px 1609px #fff,
|
||||
1717px 1591px #fff, 1916px 1588px #fff, 550px 771px #fff, 596px 1107px #fff,
|
||||
12px 1229px #fff, 984px 225px #fff, 981px 962px #fff, 1995px 1998px #fff,
|
||||
822px 375px #fff, 542px 88px #fff, 277px 1327px #fff, 1028px 404px #fff,
|
||||
1294px 195px #fff, 1456px 240px #fff, 333px 1451px #fff, 239px 1480px #fff,
|
||||
53px 1845px #fff, 1239px 1585px #fff, 1826px 694px #fff, 1995px 682px #fff,
|
||||
1804px 935px #fff, 1926px 1321px #fff, 1545px 850px #fff, 1957px 1071px #fff,
|
||||
458px 977px #fff, 252px 1383px #fff, 616px 65px #fff, 192px 674px #fff,
|
||||
547px 1603px #fff, 802px 1291px #fff, 1182px 1847px #fff, 303px 1498px #fff,
|
||||
591px 952px #fff, 1539px 1472px #fff, 1997px 1270px #fff, 1707px 1895px #fff,
|
||||
839px 252px #fff, 51px 1666px #fff, 1863px 1945px #fff, 1485px 1971px #fff,
|
||||
59px 1569px #fff, 1486px 840px #fff, 852px 1370px #fff, 752px 1066px #fff,
|
||||
1639px 947px #fff, 1213px 594px #fff, 1937px 390px #fff, 827px 1693px #fff,
|
||||
1883px 1645px #fff, 1220px 1886px #fff, 499px 760px #fff, 1813px 722px #fff,
|
||||
100px 223px #fff, 1270px 540px #fff, 1165px 894px #fff, 1846px 833px #fff,
|
||||
172px 19px #fff, 109px 1228px #fff, 1431px 1565px #fff, 1565px 737px #fff,
|
||||
326px 1377px #fff, 815px 1983px #fff, 1181px 1790px #fff, 79px 597px #fff,
|
||||
264px 1777px #fff, 972px 864px #fff, 45px 1063px #fff, 797px 1905px #fff,
|
||||
950px 1326px #fff, 1199px 488px #fff, 1921px 32px #fff, 894px 518px #fff,
|
||||
1482px 1405px #fff, 660px 471px #fff, 171px 1537px #fff, 699px 1832px #fff,
|
||||
725px 1988px #fff, 1496px 757px #fff, 1243px 310px #fff, 1274px 262px #fff,
|
||||
790px 732px #fff, 1704px 1810px #fff, 959px 1327px #fff, 459px 161px #fff,
|
||||
1629px 303px #fff, 1390px 699px #fff, 1973px 1799px #fff, 841px 963px #fff,
|
||||
1985px 1621px #fff, 1267px 452px #fff, 1537px 1757px #fff, 251px 814px #fff,
|
||||
1855px 987px #fff, 777px 26px #fff, 1837px 284px #fff, 1799px 1075px #fff,
|
||||
1622px 337px #fff, 1283px 91px #fff, 1760px 585px #fff, 1669px 1911px #fff,
|
||||
1397px 1669px #fff, 866px 1163px #fff, 281px 1425px #fff, 1455px 1643px #fff,
|
||||
141px 402px #fff, 979px 1566px #fff, 1723px 589px #fff, 146px 424px #fff,
|
||||
559px 1477px #fff, 779px 1999px #fff, 908px 674px #fff, 355px 570px #fff,
|
||||
1760px 1654px #fff, 958px 1880px #fff, 604px 926px #fff, 291px 1165px #fff,
|
||||
1856px 1003px #fff, 1104px 1161px #fff, 1296px 1341px #fff, 225px 406px #fff,
|
||||
1180px 351px #fff, 1037px 372px #fff, 1439px 1669px #fff, 1110px 743px #fff,
|
||||
1255px 419px #fff, 551px 1213px #fff, 490px 790px #fff, 1822px 1899px #fff,
|
||||
100px 1283px #fff, 1119px 81px #fff;
|
||||
}
|
||||
|
||||
#stars:after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@keyframes animStar {
|
||||
from {
|
||||
transform: translateY(-1400px);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateY(-0px);
|
||||
}
|
||||
}
|
||||
|
||||
/**Own Code**/
|
||||
|
||||
.login {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.login-screen {
|
||||
background-color: #233142;
|
||||
padding: 20px;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
.login-title {
|
||||
text-align: center;
|
||||
color: #587ca7;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-box {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.login-field {
|
||||
color: #7996b9;
|
||||
background-color: #2c3e54;
|
||||
}
|
||||
|
||||
input {
|
||||
text-align: center;
|
||||
background-color: #ECF0F1;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 3px;
|
||||
font-size: 16px;
|
||||
font-weight: 200;
|
||||
padding: 10px 0;
|
||||
width: 250px;
|
||||
transition: border .5s;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
border: 2px solid #3498DB;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border: 2px solid transparent;
|
||||
background: #3498DB;
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
line-height: 25px;
|
||||
padding: 10px 0;
|
||||
text-decoration: none;
|
||||
text-shadow: none;
|
||||
border-radius: 3px;
|
||||
box-shadow: none;
|
||||
transition: 0.25s;
|
||||
display: block;
|
||||
width: 250px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.btn:hover {
|
||||
background-color: #2980B9;
|
||||
}
|
||||
|
||||
.login-link {
|
||||
font-size: 12px;
|
||||
color: #7996b9;
|
||||
display: block;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.wpassword {
|
||||
font-size: 12px;
|
||||
color: #ff0000;
|
||||
margin: center;
|
||||
padding-left: 15%;
|
||||
}
|
||||
195
css/mobile.css
Normal file
195
css/mobile.css
Normal file
@@ -0,0 +1,195 @@
|
||||
/* LOGO-WEBSTATUS */
|
||||
|
||||
@media only screen and (max-width: 967px) {
|
||||
h1{
|
||||
font-size: 6vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 467px) {
|
||||
h1{
|
||||
font-size: 10vw;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* GLOBAL-STATUS RESPONSIVE SHRINKING AND TEXT SHRINKING */
|
||||
@media only screen and (max-width: 1067px) {
|
||||
.status {
|
||||
max-width: 93%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 967px) {
|
||||
.status {
|
||||
max-width: 92%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 867px) {
|
||||
.status {
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
.status {
|
||||
max-width: 87%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 517px) {
|
||||
.status {
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 457px) {
|
||||
.status {
|
||||
max-width: 75%;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.status-time {
|
||||
margin-top: 2.5px;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* TIMELINE RESPONSIVE SHRINKING */
|
||||
|
||||
@media only screen and (max-width: 1439px) {
|
||||
.timeline .item .message {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
.timeline .item .message {
|
||||
width: 94%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1000px) {
|
||||
.timeline .item .message {
|
||||
width: 93%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 900px) {
|
||||
.timeline .item .message {
|
||||
width: 92%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 700px) {
|
||||
.timeline .item .message {
|
||||
width: 89%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 550px) {
|
||||
.timeline .item .message {
|
||||
width: 86%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 450px) {
|
||||
.timeline .item .message {
|
||||
width: 81%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 400px) {
|
||||
.timeline .item .message {
|
||||
width: 76%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 350px) {
|
||||
.timeline .item .message {
|
||||
width: 71%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 300px) {
|
||||
.timeline .item .message {
|
||||
width: 64%;
|
||||
}
|
||||
}
|
||||
|
||||
/* TIMELINE DATE AND SERVICE INFO MOVE */
|
||||
@media only screen and (max-width: 1750px) {
|
||||
.timeline-date {
|
||||
margin-left: -60px;
|
||||
margin-top: -130px;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
margin-top: 150px;
|
||||
}
|
||||
|
||||
.timeline-info {
|
||||
position: absolute;
|
||||
margin-left: -33px;
|
||||
margin-top: -90px;
|
||||
}
|
||||
|
||||
.timeline-services {
|
||||
margin-left: -69px;
|
||||
margin-top: -76px;
|
||||
}
|
||||
|
||||
.vertical {
|
||||
grid-gap: 3px;
|
||||
grid-template-columns: 33% 33% 33% 33% 33% 33% 33%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 430px) {
|
||||
.vertical {
|
||||
grid-gap: 3px;
|
||||
grid-template-columns: 33% 33% 33% 33% 33%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 650px) {
|
||||
.status-annoucement {
|
||||
visibility:hidden
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* MORE BOX RESIZING */
|
||||
@media screen and (max-width: 700px){
|
||||
.more-box{
|
||||
width: 70%;
|
||||
}
|
||||
.more-popup{
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 700px){
|
||||
.more-popup {
|
||||
margin: 9% auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 600px){
|
||||
.more-popup {
|
||||
margin: 2% auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 400px){
|
||||
.more-popup {
|
||||
margin: 2% auto;
|
||||
}
|
||||
}
|
||||
714
css/style.css
Normal file
714
css/style.css
Normal file
@@ -0,0 +1,714 @@
|
||||
body{
|
||||
background: #233142;
|
||||
overflow-x: hidden;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding:15px;
|
||||
}
|
||||
|
||||
h1{
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
font-family: "Lato", sans-serif;
|
||||
font-size: 3vw;
|
||||
color: #009900;
|
||||
position: relative;
|
||||
left: 25px;
|
||||
}
|
||||
|
||||
h4{
|
||||
|
||||
font-family: 'Brush Script MT', cursive;
|
||||
font-size: 0.2vw;
|
||||
color: #009900;
|
||||
}
|
||||
|
||||
@-webkit-keyframes dual-ring {
|
||||
0% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes dual-ring {
|
||||
0% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.dual-ring div {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #000;
|
||||
border-color: #039be5 transparent #039be5 transparent;
|
||||
-webkit-animation: dual-ring 1.3s linear infinite;
|
||||
animation: dual-ring 1.3s linear infinite;
|
||||
}
|
||||
|
||||
.status {
|
||||
border-radius: 4px;
|
||||
display: -webkit-box;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
align-items: center;
|
||||
border: 2px solid transparent;
|
||||
-webkit-transition: 0.5es;
|
||||
transition: 0.5s;
|
||||
padding: 15px;
|
||||
margin: 0 auto;
|
||||
max-width: 94%;
|
||||
}
|
||||
|
||||
.status > div {
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.status.status-checking {
|
||||
background-color: #233142;
|
||||
border-color: #90CAF9;
|
||||
color: #90CAF9;
|
||||
}
|
||||
|
||||
.status.status-okay {
|
||||
background-color: #233142;
|
||||
color: #8bc34a;
|
||||
border-color: #8bc34a;
|
||||
}
|
||||
|
||||
.status.status-maintenance {
|
||||
background-color: #233142;
|
||||
color: #ff9933;
|
||||
border-color: #ff9933;
|
||||
}
|
||||
|
||||
.status.status-problems {
|
||||
background-color: #233142;
|
||||
color: #ff1a1a;
|
||||
border-color: #ff1a1a;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-weight: bold;
|
||||
display: inline;
|
||||
font-family: 'Trebuchet MS', sans-serif;
|
||||
}
|
||||
|
||||
.status-time {
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
font-family: 'Trebuchet MS', sans-serif;
|
||||
}
|
||||
|
||||
.status .loading {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.status .loading.fa {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
label {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 1px 0 0 1.5em;
|
||||
height: 1.5em;
|
||||
line-height: 1.0;
|
||||
cursor: pointer;
|
||||
font-family: 'Trebuchet MS', sans-serif;
|
||||
color: #7996b9;
|
||||
float: right;
|
||||
right: 24px;
|
||||
}
|
||||
|
||||
label::before,
|
||||
label::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 1.0em;
|
||||
height: 1.0em;
|
||||
}
|
||||
|
||||
label::before {
|
||||
content: " ";
|
||||
border: 2px solid #7996b9;
|
||||
border-radius: 20%;
|
||||
}
|
||||
|
||||
input[type="checkbox"] + label::after {
|
||||
font-family:FontAwesome;
|
||||
content: "\f00c";
|
||||
color: #7996b9;
|
||||
line-height: 1.3;
|
||||
text-align: center;
|
||||
margin-left:2px;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked + label::before {
|
||||
/*background: #587ca7;
|
||||
border-color: #587ca7;*/
|
||||
}
|
||||
|
||||
input[type="checkbox"] + label::after {
|
||||
-webkit-transform: scale(0);
|
||||
-ms-transform: scale(0);
|
||||
-o-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked + label::after {
|
||||
-webkit-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
-o-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
label::before,
|
||||
label::after {
|
||||
-webkit-transition: .25s all ease;
|
||||
-o-transition: .25s all ease;
|
||||
transition: .25s all ease;
|
||||
}
|
||||
|
||||
.service-block {
|
||||
padding: 13px;
|
||||
font-family: "Lato", sans-serif;
|
||||
margin-bottom: -30px;
|
||||
}
|
||||
|
||||
.service-title {
|
||||
color: #8bc34a;
|
||||
}
|
||||
|
||||
.services {
|
||||
border: 1px solid #E3E3E3;
|
||||
border-radius: 4px;
|
||||
list-style-type: none;
|
||||
padding: 1rem 0.75rem 0.25rem;
|
||||
border: 2px solid #000;
|
||||
border-color: #233142 transparent #233142 transparent;
|
||||
}
|
||||
|
||||
.services-okay {
|
||||
background-color: #233142;
|
||||
color: #8bc34a;
|
||||
}
|
||||
|
||||
.services-maintenance {
|
||||
background-color: #233142;
|
||||
color: #ff9933;
|
||||
}
|
||||
|
||||
.services-troubles {
|
||||
background-color: #233142;
|
||||
color: #ff1a1a;
|
||||
}
|
||||
|
||||
.services-header {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.service {
|
||||
border: 1px solid #E3E3E3;
|
||||
border-color: #354a64;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 0.5rem;
|
||||
padding: 0.75rem 0;
|
||||
position: relative;
|
||||
}
|
||||
.service-name {
|
||||
display:flex;
|
||||
border-left-width:2px;
|
||||
border-left-style:solid;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.service-icon {
|
||||
display:flex;
|
||||
float:left;
|
||||
}
|
||||
.service-icon:before {
|
||||
font-family:FontAwesome;
|
||||
display: inline-block;
|
||||
height: 1.4rem;
|
||||
line-height: 1.4rem;
|
||||
text-align: center;
|
||||
width: 2.8rem;
|
||||
}
|
||||
|
||||
.service-okay > .service-name {
|
||||
border-left-color: #42996D;
|
||||
}
|
||||
.service-okay > .service-icon:before {
|
||||
color: #42996D;
|
||||
content: "\f00c";
|
||||
}
|
||||
|
||||
.service-maintenance > .service-name {
|
||||
border-left-color: #ff9933;
|
||||
}
|
||||
.service-maintenance > .service-icon:before {
|
||||
color: #ff9933;
|
||||
content: "\f017";
|
||||
}
|
||||
|
||||
.service-troubles > .service-name {
|
||||
border-left-color: #ff1a1a;
|
||||
}
|
||||
.service-troubles > .service-icon:before {
|
||||
color: #ff1a1a;
|
||||
content: "\f00d";
|
||||
}
|
||||
|
||||
.status-annoucement {
|
||||
float: right;
|
||||
margin-top: -20px;
|
||||
padding-right: 20px;
|
||||
font-family: 'Trebuchet MS', sans-serif;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.status-annoucement:before {
|
||||
font-family:FontAwesome;
|
||||
content: "\f12a";
|
||||
color: #ff9933;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
position: relative;
|
||||
padding-left: 70px;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.timeline:before {
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
left: 30px;
|
||||
content: "";
|
||||
background: #354a64;
|
||||
}
|
||||
.timeline .item {
|
||||
position: relative;
|
||||
}
|
||||
.timeline .item .circle {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: -46px;
|
||||
background: #acbbc7;
|
||||
border: 4px solid #354a64;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.timeline .item .message {
|
||||
width: 1264px;
|
||||
position: relative;
|
||||
padding: 15px 20px;
|
||||
margin-bottom: 15px;
|
||||
background: #2c3e54;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 5px;
|
||||
font-family: 'Trebuchet MS', sans-serif;
|
||||
color: #a6a6a6;
|
||||
}
|
||||
|
||||
.timeline-icon {
|
||||
display:flex;
|
||||
float:left;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.timeline-new:before {
|
||||
font-family:FontAwesome;
|
||||
content: "\f0a1";
|
||||
color: #cc6600;
|
||||
}
|
||||
|
||||
.timeline-working:before {
|
||||
font-family:FontAwesome;
|
||||
content: "\f013";
|
||||
color: #0052cc;
|
||||
}
|
||||
|
||||
.timeline-update:before {
|
||||
font-family:FontAwesome;
|
||||
content: "\f0e5";
|
||||
color: #4d9900;
|
||||
}
|
||||
|
||||
.timeline-finished:before {
|
||||
font-family:FontAwesome;
|
||||
content: "\f00c";
|
||||
color: #8bc34a;
|
||||
}
|
||||
|
||||
.timeline .item .message:before {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
content: "";
|
||||
top: 25px;
|
||||
left: -6px;
|
||||
box-sizing: border-box;
|
||||
border: 5px solid transparent;
|
||||
border-top-color: #2c3e54;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: #2c3e54;
|
||||
border-right-color: transparent;
|
||||
filter: drop-shadow(-1px 0 1px rgba(0, 0, 0, 0.08));
|
||||
transform-origin: 0 0;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.timeline-date {
|
||||
position: absolute;
|
||||
margin-left: -260px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.timeline-date h1 {
|
||||
font-size: 1.8em;
|
||||
font-family: "Lato", sans-serif;
|
||||
color: #3e5675;
|
||||
}
|
||||
|
||||
.timeline-info {
|
||||
position: absolute;
|
||||
margin-left: -232px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.timeline-info h2 {
|
||||
font-size: 0.8em;
|
||||
font-family: "Lato", sans-serif;
|
||||
color: #3e5675;
|
||||
}
|
||||
|
||||
.timeline-services {
|
||||
position: absolute;
|
||||
margin-left: -270px;
|
||||
margin-top: 63px;
|
||||
max-width: 180px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.timeline-services li {
|
||||
font-size: 0.8em;
|
||||
font-family: "Lato", sans-serif;
|
||||
color: #3e5675;
|
||||
}
|
||||
|
||||
.timeline-services li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.vertical {
|
||||
display: grid;
|
||||
grid-gap: 5px;
|
||||
grid-template-columns: 33% 33% 33%;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 50px;
|
||||
color: #868c96;
|
||||
}
|
||||
|
||||
.footer-heart {
|
||||
color: #f42;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
|
||||
.footer-subtext {
|
||||
color: #868c96;
|
||||
margin-top: -94px;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
padding: 40px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer img {
|
||||
width: 44px;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
text-decoration: none;
|
||||
color: #868c96;
|
||||
}
|
||||
|
||||
.footer a:hover {
|
||||
text-decoration: underline;
|
||||
color: #868c96;
|
||||
}
|
||||
|
||||
.legend {
|
||||
position: absolute;
|
||||
margin-top: -40px;
|
||||
display: inline-block;
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
.legend-text {
|
||||
color: #a6a6a6;
|
||||
font-family: "Lato", sans-serif;
|
||||
font-size: 0.8em;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.legend-maintenance:before {
|
||||
font-family:FontAwesome;
|
||||
content: "\f017";
|
||||
color: #ff9933;
|
||||
}
|
||||
|
||||
.legend-problems:before {
|
||||
font-family:FontAwesome;
|
||||
content: "\f00d";
|
||||
color: #ff1a1a;
|
||||
}
|
||||
|
||||
.legend-lastdown:before {
|
||||
font-family:FontAwesome;
|
||||
color: #cc6600;
|
||||
content: "\f05c";
|
||||
}
|
||||
|
||||
|
||||
.more-box {
|
||||
width: 40%;
|
||||
margin: 0 auto;
|
||||
background: rgba(255,255,255,0.2);
|
||||
padding: 35px;
|
||||
border: 2px solid #233142;
|
||||
border-radius: 20px/50px;
|
||||
background-clip: padding-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.more-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
transition: opacity 500ms;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
.more-overlay:target {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.more-popup {
|
||||
margin: 15% auto;
|
||||
padding: 20px;
|
||||
background: #233142;
|
||||
border-radius: 5px;
|
||||
width: 30%;
|
||||
position: relative;
|
||||
transition: all 5s ease-in-out;
|
||||
}
|
||||
|
||||
.more-popup h2 {
|
||||
margin-top: 0;
|
||||
color: #a6a6a6;
|
||||
font-family: Tahoma, Arial, sans-serif;
|
||||
}
|
||||
.more-popup .close {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 30px;
|
||||
transition: all 200ms;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
color: #a6a6a6;
|
||||
}
|
||||
.more-popup .close:hover {
|
||||
color: #009900;
|
||||
}
|
||||
.more-popup .content {
|
||||
max-height: 30%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.more-box-caller {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.more-up {
|
||||
margin-top: -12px;
|
||||
padding-left: 1px;
|
||||
color: #42996D;
|
||||
font-family: Tahoma, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.more-up:before {
|
||||
color: #42996D;
|
||||
content: "\f00c";
|
||||
font-family:FontAwesome;
|
||||
}
|
||||
|
||||
.more-working {
|
||||
margin-top: -12px;
|
||||
padding-left: 1px;
|
||||
color: #0052cc;
|
||||
font-family: Tahoma, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.more-working:before {
|
||||
color: #0052cc;
|
||||
content: "\f013";
|
||||
font-family:FontAwesome;
|
||||
}
|
||||
|
||||
.more-maintenance {
|
||||
margin-top: -12px;
|
||||
padding-left: 1px;
|
||||
color: #ff9933;
|
||||
font-family: Tahoma, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.more-maintenance:before {
|
||||
color: #ff9933;
|
||||
content: "\f017";
|
||||
font-family:FontAwesome;
|
||||
}
|
||||
|
||||
.more-troubles {
|
||||
margin-top: -12px;
|
||||
padding-left: 1px;
|
||||
color: #ff1a1a;
|
||||
font-family: Tahoma, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.more-troubles:before {
|
||||
color: #ff1a1a;
|
||||
content: "\f00d";
|
||||
font-family:FontAwesome;
|
||||
}
|
||||
|
||||
.more-lastdown {
|
||||
margin-top: 2px;
|
||||
padding-left: 2px;
|
||||
color: #cc6600;
|
||||
font-family: Tahoma, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.more-lastdown:before {
|
||||
color: #cc6600;
|
||||
content: "\f05c";
|
||||
font-family:FontAwesome;
|
||||
}
|
||||
|
||||
.more-maintenance-info {
|
||||
margin-top: 4px;
|
||||
margin-top: 4px;
|
||||
padding-left: 2px;
|
||||
color: #a6a6a6;
|
||||
font-family: Tahoma, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.more-maintenance-info:before {
|
||||
color: #ff9933;
|
||||
content: "\f017";
|
||||
font-family:FontAwesome;
|
||||
}
|
||||
|
||||
.more-hide-maintenance {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: #a6a6a6;
|
||||
}
|
||||
|
||||
.cookies {
|
||||
position: fixed;
|
||||
width: 99.7%;
|
||||
height: 100px;
|
||||
border-color: #3f9066;
|
||||
border-style: solid;
|
||||
background-color: #222c3b;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.cookies .cogs {
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
left: 15px;
|
||||
font-size: 2em;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cookies h1 {
|
||||
left: 0px;
|
||||
font-size: 1vw;
|
||||
color: white;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.cookies p {
|
||||
margin-top: -10px;
|
||||
color: #a6a6a6;
|
||||
}
|
||||
|
||||
.cookies .text {
|
||||
position: absolute;
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.cookies button {
|
||||
position: fixed;
|
||||
right: 15px;
|
||||
bottom: 35px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
outline: none;
|
||||
transition: 0.7s;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0);
|
||||
background-color: #83be4e;
|
||||
}
|
||||
|
||||
.cookies button:hover {
|
||||
background-color: #578230;
|
||||
|
||||
}
|
||||
|
||||
.cookies .handshake {
|
||||
margin-left: 10px;
|
||||
}
|
||||
Reference in New Issue
Block a user