kopia lustrzana https://github.com/dl9rdz/rdz_ttgo_sonde
275 wiersze
4.9 KiB
CSS
Executable File
275 wiersze
4.9 KiB
CSS
Executable File
body, html {
|
||
height: 100%;
|
||
margin: 0;
|
||
font-family: Arial;
|
||
}
|
||
|
||
.wrapper {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin: 0;
|
||
}
|
||
.tci {
|
||
flex-grow: 1; border: none; margin: 0; padding: 0;
|
||
}
|
||
.footer {
|
||
}
|
||
|
||
table, th, td {
|
||
border: 1px solid black;
|
||
border-collapse: collapse;
|
||
background-color: #ddd
|
||
}
|
||
|
||
td#caption {
|
||
text-align: center;
|
||
background-color: #aaa;
|
||
font-weight: bold;
|
||
}
|
||
|
||
td#sfreq {
|
||
background-color: #ccc;
|
||
}
|
||
|
||
.tab {
|
||
overflow: hidden;
|
||
border: 1px solid #ccc;
|
||
}
|
||
|
||
.tab button {
|
||
background-color: inherit;
|
||
float: left;
|
||
border: none;
|
||
outline: none;
|
||
cursor: pointer;
|
||
padding: 10px 10px;
|
||
width: 12vw;
|
||
transition: 0.3s;
|
||
}
|
||
|
||
.tab button:hover {
|
||
background-color: #ddd;
|
||
}
|
||
|
||
.tab button.active {
|
||
background-color: #ccc;
|
||
}
|
||
.content {
|
||
display: flex;
|
||
flex: 1;
|
||
flex-direction: column;
|
||
overflow: auto;
|
||
height: 100%;
|
||
}
|
||
.tabcontent {
|
||
display: none;
|
||
flex: 1;
|
||
padding: 6px 12px;
|
||
border: 1px solid #ccc;
|
||
border-top: none;
|
||
flex-direction: column;
|
||
overflow: auto;
|
||
}
|
||
|
||
html {
|
||
font-family: Helvetica;
|
||
display: inline-block;
|
||
margin: 0px auto;
|
||
text-align: center;
|
||
}
|
||
h1{
|
||
color: #0F3376;
|
||
font-size: 24px
|
||
}
|
||
p{
|
||
font-size: 1.5rem;
|
||
}
|
||
.canberemoved_button {
|
||
display: inline-block;
|
||
background-color: #008CBA;
|
||
border: none;
|
||
border-radius: 4px;
|
||
color: white;
|
||
padding: 16px 40px;
|
||
text-decoration: none;
|
||
font-size: 30px;
|
||
margin: 2px;
|
||
cursor: pointer;
|
||
}
|
||
.button2 {
|
||
background-color: #f44336;
|
||
}
|
||
.save {
|
||
background-color: #0F3376;
|
||
border: black;
|
||
border-width: 1;
|
||
color: white;
|
||
padding: 8px 30px;
|
||
text-align: center;
|
||
text-decoration: none;
|
||
display: block;
|
||
font-size: 14px;
|
||
margin: 0
|
||
}
|
||
.ctlbtn {
|
||
background-color: #ccc;
|
||
border: black;
|
||
border-width: 1;
|
||
color: black;
|
||
padding: 4px 30px;
|
||
text-align: center;
|
||
text-decoration: none;
|
||
display: block;
|
||
margin: 2;
|
||
font-size: 4vh;
|
||
}
|
||
.update {
|
||
margin: 0;
|
||
display: block;
|
||
}
|
||
|
||
#map {
|
||
height: 100%;
|
||
}
|
||
|
||
.leaflet-popup-content table, .leaflet-popup-content table td {
|
||
border:0;
|
||
background-color: white;
|
||
}
|
||
|
||
.leaflet-popup-content table td:nth-child(2),.leaflet-popup-content table td:nth-child(5) {
|
||
text-align: right;
|
||
padding-left: 3px;
|
||
}
|
||
|
||
.leaflet-popup-content table td:nth-child(3),.leaflet-popup-content table td:nth-child(6) {
|
||
text-align: left;
|
||
padding-right: 10px;
|
||
}
|
||
|
||
.leaflet-gps{animation:fading 1s infinite}@keyframes fading{0%{opacity:0.7}50%{opacity:1}100%{opacity:0.7}}
|
||
|
||
.leaflet-gps::after {
|
||
content: '🔵';
|
||
}
|
||
.leaflet-gps {
|
||
margin-left: -7px !important;
|
||
margin-top: -9px !important;
|
||
}
|
||
|
||
.leaflet-burst::after {
|
||
content: '💥';
|
||
}
|
||
.leaflet-burst {
|
||
margin-left: -20px !important;
|
||
margin-top: -22px !important;
|
||
font-weight: bold;
|
||
font-size: 30px;
|
||
}
|
||
|
||
.leaflet-landing::after {
|
||
content: '×';
|
||
}
|
||
|
||
.leaflet-landing {
|
||
margin-left: -13px !important;
|
||
margin-top: -30px !important;
|
||
font-weight: bold;
|
||
font-size: 40px;
|
||
}
|
||
|
||
|
||
.leaflet-header {
|
||
text-align: center;
|
||
width: 250px;
|
||
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
|
||
border-bottom-left-radius: 4px;
|
||
border-bottom-right-radius: 4px;
|
||
pointer-events: auto !important;
|
||
}
|
||
|
||
.leaflet-header #settings {
|
||
display: none;
|
||
}
|
||
|
||
.leaflet-header label {
|
||
display: block;
|
||
margin-top: 5px;
|
||
}
|
||
.leaflet-header input {
|
||
width: 80px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.leaflet-header #submit {
|
||
margin: 3px auto;
|
||
}
|
||
|
||
.leaflet-footer {
|
||
display:none;
|
||
text-align: center;
|
||
width: 180px;
|
||
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
|
||
border-top-left-radius: 4px;
|
||
border-top-right-radius: 4px;
|
||
}
|
||
|
||
.leaflet-center {
|
||
left:0;
|
||
right:0;
|
||
margin: 0 auto;
|
||
padding: 5px;
|
||
background: #fff;
|
||
background: rgba(255, 255, 255, 0.8);
|
||
}
|
||
|
||
.leaflet-header #sonde_detail {
|
||
display:none;
|
||
}
|
||
|
||
@media screen and (max-width: 600px) {
|
||
.leaflet-control-attribution {
|
||
-moz-transform: rotate(-90deg) translateX(100%);
|
||
-ms-transform: rotate(-90deg) translateX(100%);
|
||
-o-transform: rotate(-90deg) translateX(100%);;
|
||
-webkit-transform: rotate(-90deg) translateX(100%);
|
||
transform: rotate(-90deg) translateX(100%);
|
||
-webkit-transform-origin: 100% 100%;
|
||
-moz-transform-origin: 100% 100%;
|
||
-ms-transform-origin: 100% 100%;
|
||
-o-transform-origin: 100% 100%;
|
||
transform-origin: 100% 100%;
|
||
}
|
||
}
|
||
|
||
.ldot {
|
||
height: 15px;
|
||
width: 15px;
|
||
margin-top: 8px;
|
||
margin-left: -1px;
|
||
border-radius: 50%;
|
||
display: inline-block;
|
||
}
|
||
|
||
.ybg {
|
||
background-color: orange;
|
||
background-image: -webkit-gradient(linear, left top, left bottom, from(yellow), to(orange));
|
||
background-image: linear-gradient(top, yellow, orange);
|
||
}
|
||
.gbg {
|
||
background-color: green;
|
||
background-image: -webkit-gradient(linear, left top, left bottom, from(lime), to(green));
|
||
background-image: linear-gradient(top, lime, green);
|
||
}
|
||
.rbg {
|
||
background-color: red;
|
||
background-image: -webkit-gradient(linear, left top, left bottom, from(orange), to(red));
|
||
background-image: linear-gradient(top, orange, red);
|
||
}
|
||
|
||
#sonde_statbar .ldot {
|
||
margin-right: 3px;
|
||
}
|
||
|