454 lines
8.7 KiB
CSS
454 lines
8.7 KiB
CSS
:root {
|
|
--primary-color: #007bff; /* Blau für den Button */
|
|
--primary-hover: #0056b3; /* Dunkleres Blau bei Hover */
|
|
--border-radius: 6px;
|
|
--padding: 10px 15px;
|
|
--font-size: 16px;
|
|
--transition: all 0.3s ease-in-out;
|
|
}
|
|
|
|
|
|
body, html {
|
|
height: 100%;
|
|
margin: 0;
|
|
font-family: Arial;
|
|
}
|
|
|
|
.system-info {
|
|
padding: 20px;
|
|
font-family: Arial, sans-serif;
|
|
flex-grow: 1;
|
|
overflow-y: auto;
|
|
}
|
|
.system-info p {
|
|
margin: 8px 0;
|
|
}
|
|
.system-info h1 {
|
|
font-size: 24px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.status-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 20px;
|
|
}
|
|
.status-table th, .status-table td {
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
text-align: left;
|
|
vertical-align: top;
|
|
}
|
|
.status-table th {
|
|
background-color: #f4f4f4;
|
|
font-weight: bold;
|
|
}
|
|
#refresh-button {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
#refresh-button:hover {
|
|
color: #007BFF;
|
|
}
|
|
|
|
h2.external-links {
|
|
margin-top: 40px;
|
|
text-align: center;
|
|
font-size: 20px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.link-buttons {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
.link-buttons .button {
|
|
background-color: #04AA6D;
|
|
color: white;
|
|
padding: 15px 20px;
|
|
text-decoration: none;
|
|
border-radius: 5px;
|
|
font-size: 18px;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
|
|
.active, .cfgheader:hover {
|
|
background-color: #ccc;
|
|
}
|
|
.cfgpanel {
|
|
}
|
|
.cfgpanel:hover td, .cfgpanel:active td{
|
|
background-color: #808080 !important;
|
|
color: white;
|
|
}
|
|
|
|
th.cfg {
|
|
padding:5pt
|
|
}
|
|
table.stat {
|
|
margin:0px 0px 5px 0px;
|
|
}
|
|
|
|
.hamburger {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 1.25em;
|
|
height: 0.8em;
|
|
margin-right: 0.3em;
|
|
border-top: 0.2em solid #fff;
|
|
border-bottom: 0.2em solid #fff;
|
|
}
|
|
|
|
.hamburger:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0.3em;
|
|
left: 0px;
|
|
width: 100%;
|
|
border-top: 0.2em solid #fff;
|
|
}
|
|
|
|
.wrapper {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 0;
|
|
}
|
|
.tci {
|
|
flex-grow: 1; border: none; margin: 0; padding: 0; overflow-y: auto;
|
|
}
|
|
.footer {
|
|
background-color: #333;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
td.ch {
|
|
text-align: right;
|
|
padding: 0px 8px;
|
|
}
|
|
td.act {
|
|
text-align: center;
|
|
}
|
|
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;
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
overflow: auto;
|
|
height: 100%;
|
|
}
|
|
.tabcontent {
|
|
display: none;
|
|
flex: 1;
|
|
border-top: none;
|
|
flex-direction: column;
|
|
overflow: auto;
|
|
}
|
|
|
|
html {
|
|
font-family: Helvetica;
|
|
display: inline-block;
|
|
margin: 0px auto;
|
|
text-align: left;
|
|
}
|
|
h1{
|
|
color: #0F3376;
|
|
font-size: 24px
|
|
}
|
|
|
|
.button2 {
|
|
background-color: #f44336;
|
|
}
|
|
:disabled.save {
|
|
opacity: 0.5;
|
|
}
|
|
.save {
|
|
background-color: #CC1111; /* 0F33C6; */
|
|
border: white;
|
|
border-width: 1;
|
|
color: white;
|
|
padding: 8px 30px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: block;
|
|
font-size: 14px;
|
|
margin: 0
|
|
}
|
|
|
|
.ttgoinfo {
|
|
color: white;
|
|
padding: 8px 10px;
|
|
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;
|
|
font-size: 4vh;
|
|
margin-top: 0.3em;
|
|
margin-left: 0.3em;
|
|
margin-right: 0.3em;
|
|
}
|
|
.update {
|
|
margin: 0;
|
|
display: block;
|
|
}
|
|
|
|
#map {
|
|
height: 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;
|
|
}
|
|
|
|
/* Add a black background color to the top navigation */
|
|
.topnav {
|
|
background-color: #333;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Style the links inside the navigation bar */
|
|
.topnav a {
|
|
float: left;
|
|
display: block;
|
|
color: #f2f2f2;
|
|
text-align: center;
|
|
padding: 14px 16px;
|
|
text-decoration: none;
|
|
font-size: 17px;
|
|
}
|
|
|
|
/* Change the color of links on hover */
|
|
.topnav a:hover {
|
|
background-color: #ddd;
|
|
color: black;
|
|
}
|
|
|
|
/* Add an active class to highlight the current page */
|
|
.topnav a.active {
|
|
background-color: #04AA6D;
|
|
color: white;
|
|
}
|
|
|
|
/* Hide the link that should open and close the topnav on small screens */
|
|
.topnav .icon {
|
|
display: none;
|
|
padding-bottom: 12px;
|
|
padding-top: 11px;
|
|
}
|
|
|
|
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
|
|
@media screen and (max-width: 600px) {
|
|
.topnav a:not(.active) {display: none;}
|
|
.topnav a.icon {
|
|
float: right;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
|
|
@media screen and (max-width: 600px) {
|
|
.topnav.responsive {position: relative;}
|
|
.topnav.responsive a.icon {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
.topnav.responsive a {
|
|
float: none;
|
|
display: block;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
|
|
/* Buttons */
|
|
button, .btn {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
padding: var(--padding);
|
|
border: none;
|
|
border-radius: var(--border-radius);
|
|
font-size: var(--font-size);
|
|
cursor: pointer;
|
|
transition: var(--transition);
|
|
box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3); /* Schatten hinzufügen */
|
|
}
|
|
|
|
button:hover, .btn:hover {
|
|
background: var(--primary-hover);
|
|
box-shadow: 0 6px 12px rgba(0, 123, 255, 0.4); /* Stärkerer Schatten bei Hover */
|
|
}
|
|
|
|
button:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 5px rgba(0, 123, 255, 0.7); /* Deutlicher Fokus-Effekt */
|
|
}
|
|
|
|
/* Zusätzliche Button-Stile für den Fokus */
|
|
button:active {
|
|
background: #0056b3;
|
|
transform: scale(0.98); /* Kleine Verkleinerung beim Klicken */
|
|
}
|
|
|
|
/* Button Group */
|
|
.button-group {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.button-group button {
|
|
flex: 1;
|
|
font-weight: bold; /* Button-Text fett für mehr Gewicht */
|
|
transition: transform 0.2s ease-in-out;
|
|
}
|
|
|
|
/* Hover und Fokus Effekte für Buttons in der Gruppe */
|
|
.button-group button:hover {
|
|
transform: scale(1.05); /* Leichtes Vergrößern bei Hover */
|
|
}
|
|
|
|
/* Input-Felder */
|
|
input, select, textarea {
|
|
width: 100%;
|
|
padding: var(--padding);
|
|
border: 1px solid #ccc;
|
|
border-radius: var(--border-radius);
|
|
font-size: var(--font-size);
|
|
transition: var(--transition);
|
|
}
|
|
|
|
input:focus, select:focus, textarea:focus {
|
|
border-color: var(--primary-color);
|
|
outline: none;
|
|
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
|
|
}
|
|
|
|
/* Form-Labels */
|
|
label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Styling für Checkboxen und Radios */
|
|
input[type="checkbox"], input[type="radio"] {
|
|
width: auto;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
/* Disabled-Zustand */
|
|
button:disabled, input:disabled {
|
|
background: #ccc;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.styled-form {
|
|
max-width: 400px;
|
|
margin: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
.no-top-margin {
|
|
margin-top: unset;
|
|
}
|
|
.button-group {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.button-group button {
|
|
flex: 1;
|
|
}
|
|
|
|
|
|
/* General styles for headers */
|
|
h1, h2, h3 {
|
|
font-family: 'Arial', sans-serif; /* A clean font for headers */
|
|
font-weight: bold;
|
|
margin: 10px 0;
|
|
color: #333; /* Dark gray text */
|
|
text-align: center; /* Center all headers */
|
|
}
|
|
|
|
/* Specific styles for h1 */
|
|
h1 {
|
|
font-size: 2.5rem; /* Large font for main title */
|
|
color: var(--primary-color); /* Primary color for h1 */
|
|
text-align: center; /* Center the main title */
|
|
text-transform: uppercase; /* Uppercase letters for emphasis */
|
|
letter-spacing: 2px; /* Add some spacing between letters */
|
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* Specific styles for h2 */
|
|
h2 {
|
|
font-size: 2rem; /* Slightly smaller than h1 */
|
|
color: #444; /* Slightly lighter gray */
|
|
/* text-align: left; Align to the left */
|
|
text-transform: capitalize; /* Capitalize first letter of each word */
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
/* Specific styles for h3 */
|
|
h3 {
|
|
font-size: 1.5rem; /* Smaller than h2 */
|
|
color: #666; /* Even lighter gray for less emphasis */
|
|
/* text-align: left; Align to the left */
|
|
margin-bottom: 10px;
|
|
font-weight: normal; /* Make it normal weight for less emphasis */
|
|
}
|