diff --git a/ZGUI.css b/ZGUI.css index e766b22..388ae22 100644 --- a/ZGUI.css +++ b/ZGUI.css @@ -19,21 +19,27 @@ td { margin-top: 0.5em; margin-bottom: 0.5em; } + .guitable tr:last-child td:first-child { border-bottom-left-radius: 12px; } + .guitable tr:last-child td:last-child { border-bottom-right-radius: 12px; } + .guitable tr:first-child td:first-child { border-top-left-radius: 12px; } + .guitable tr:first-child td:last-child { border-top-right-radius: 12px; } + .guitable tr:nth-child(odd) { background-color: #DDDDDD; } + .guitable tr:nth-child(even) { background-color: #DDDDDD; } @@ -44,243 +50,323 @@ td { } @media only screen and (min-width: 700px) { + /* For tablets: */ - .col-s-1 {width: 50%;background-color: #DDDDDD;} - .col-s-2 {width: 50%;background-color: #DDDDDD;} - .col-s-full {width: 100%;background-color: #F2F2F2;} - [class*="col-"] { - width: 100%; + .col-s-1 { + width: 50%; + background-color: #DDDDDD; } - -@media only screen and (min-width: 990px) { - /* For desktop: */ - .col-1 {width: 50%;background-color: #F2F2F2;} - .col-2 {width: 50%;background-color: #F2F2F2;} - .col-full {width: 100%;background-color: #F2F2F2;} -} -[class*="col-"] { - float: left; - padding: 5px; - border: none; -} + .col-s-2 { + width: 50%; + background-color: #DDDDDD; + } -.row::after { - content: ""; - clear: both; - display: table; -} + .col-s-full { + width: 100%; + background-color: #F2F2F2; + } -.transient-warning { - position: fixed; - max-width: 360px; - padding: 10px 14px; - background-color: #fff4cc; - border: 1px solid #c5a100; - border-radius: 8px; - color: #4d3b00; - box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); - font-size: 0.95rem; - line-height: 1.35; - opacity: 0; - pointer-events: none; - transition: opacity 0.25s ease; - z-index: 1000; -} + [class*="col-"] { + width: 100%; + } -.transient-warning.visible { - opacity: 1; -} + @media only screen and (min-width: 990px) { -.estimated-density { - background-color: #fff4cc; - border: 1px solid #c5a100; -} + /* For desktop: */ + .col-1 { + width: 50%; + background-color: #F2F2F2; + } -.status-bar { - position: fixed; - left: 0; - right: 0; - bottom: 0; - display: flex; - flex-wrap: wrap; - gap: 8px 16px; - align-items: center; - padding: 8px 14px; - background-color: #eef2f5; - border-top: 1px solid #b8c3cc; - color: #23313d; - font-size: 0.88rem; - box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08); - z-index: 900; -} + .col-2 { + width: 50%; + background-color: #F2F2F2; + } -.status-item { - min-width: 180px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} + .col-full { + width: 100%; + background-color: #F2F2F2; + } + } -.status-item strong { - color: #10202c; -} + [class*="col-"] { + float: left; + padding: 5px; + border: none; + } -.status-progress { - flex: 1 1 260px; - min-width: 220px; -} + .row::after { + content: ""; + clear: both; + display: table; + } -.status-progress-track { - width: 100%; - height: 22px; - background-color: #d7dee5; - border-radius: 8px; - overflow: hidden; - border: 1px solid #b8c3cc; -} + .transient-warning { + position: fixed; + max-width: 360px; + padding: 10px 14px; + background-color: #fff4cc; + border: 1px solid #c5a100; + border-radius: 8px; + color: #4d3b00; + box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); + font-size: 0.95rem; + line-height: 1.35; + opacity: 0; + pointer-events: none; + transition: opacity 0.25s ease; + z-index: 1000; + } -.status-progress-fill { - width: 0%; - height: 100%; - background-color: #2e8b57; - color: black; - padding-left: 3px; - text-align: center; - line-height: 20px; - font-size: 0.78rem; - font-weight: 600; - transition: width 0.2s ease; -} + .transient-warning.visible { + opacity: 1; + } -.group_name { - padding-left:1em; - padding-right:1em; - font-size:105%; - font-weight:bold; - width: 1%; - white-space: nowrap; - /* text-align: center; */ -} -.yellow_td { - padding-left:1em; - padding-right:1em; - background-color: yellow; - width: 1%; - white-space: nowrap; -} -.gray_td { - padding-left:1em; - padding-right:1em; - background-color: gray; - width: 1%; - white-space: nowrap; -} -.nocol_td { - padding-left:1em; - padding-right:1em; - width: 1%; - white-space: nowrap; -} + .estimated-density { + background-color: #fff4cc; + border: 1px solid #c5a100; + } -/* Style the tab */ -.tab { - overflow: hidden; - border: 1px solid #ccc; - background-color: #f1f1f1; -} + .status-bar { + position: fixed; + left: 0; + right: 0; + bottom: 0; + display: flex; + flex-wrap: wrap; + gap: 8px 16px; + align-items: center; + padding: 8px 14px; + background-color: #eef2f5; + border-top: 1px solid #b8c3cc; + color: #23313d; + font-size: 0.88rem; + box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08); + z-index: 900; + } -/* Style the buttons that are used to open the tab content */ -.tab button { - background-color: inherit; - float: left; - border: none; - outline: none; - cursor: pointer; - padding: 14px 16px; - transition: 0.3s; - font-size:105%; - font-weight:bold; -} + .status-item { + min-width: 180px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } -/* Change background color of buttons on hover */ -.tab button:hover { - background-color: #ddd; -} - -/* Create an active/current tablink class */ -.tab button.active { - background-color: #ccc; -} + .status-item strong { + color: #10202c; + } -/* Style the tab content */ -.tabcontent { - display: none; - padding: 6px 12px; - border: 1px solid #ccc; - border-top: none; -} - -.tabcontent { -/* animation: fadeEffect 1s; /* Fading effect takes 1 second */ -} - -/* Go from zero to full opacity */ -@keyframes fadeEffect { - from {opacity: 0;} - to {opacity: 1;} -} + .status-progress { + flex: 1 1 260px; + min-width: 220px; + } -/* Chrome, Safari, Opera */ -@-webkit-keyframes example { - 0% {background-color:red; left:20px; top:0px;} - 25% {background-color:orange; left:25px; top:0px;} - 50% {background-color:green; left:30px; top:0px;} - 75% {background-color:orange; left:25px; top:0px;} - 100% {background-color:red; left:20px; top:0px;} -} + .status-progress-track { + width: 100%; + height: 22px; + background-color: #d7dee5; + border-radius: 8px; + overflow: hidden; + border: 1px solid #b8c3cc; + } -/* Standard syntax */ -@keyframes example { - 0% {background-color:red; left:20px; top:0px;} - 25% {background-color:orange; left:25px; top:0px;} - 50% {background-color:green; left:30px; top:0px;} - 75% {background-color:orange; left:25px; top:0px;} - 100% {background-color:red; left:20px; top:0px;} -} + .status-progress-fill { + width: 0%; + height: 100%; + background-color: #2e8b57; + color: black; + padding-left: 3px; + text-align: center; + line-height: 20px; + font-size: 0.78rem; + font-weight: 600; + transition: width 0.2s ease; + } -#myBar { - width: 10%; - height: 30px; - background-color: #4CAF50; - text-align: center; /* To center it horizontally (if you want) */ - line-height: 30px; /* To center it vertically */ - color: white; -} + .group_name { + padding-left: 1em; + padding-right: 1em; + font-size: 105%; + font-weight: bold; + width: 1%; + white-space: nowrap; + /* text-align: center; */ + } -/* Tooltip container */ -.tooltip { - position: relative; - display: inline-block; - /* border-bottom: 1px dotted black; /* If you want dots under the hoverable text */ -} + .yellow_td { + padding-left: 1em; + padding-right: 1em; + background-color: yellow; + width: 1%; + white-space: nowrap; + } -/* Tooltip text */ -.tooltip .tooltiptext { - visibility: hidden; - width: 320px; - background-color: black; - color: #fff; - text-align: left; - padding: 5px; - border-radius: 6px; - - /* Position the tooltip text - see examples below! */ - position: absolute; - z-index: 1; -} + .gray_td { + padding-left: 1em; + padding-right: 1em; + background-color: gray; + width: 1%; + white-space: nowrap; + } -/* Show the tooltip text when you mouse over the tooltip container */ -.tooltip:hover .tooltiptext { - visibility: visible; -} + .nocol_td { + padding-left: 1em; + padding-right: 1em; + width: 1%; + white-space: nowrap; + } + + /* Style the tab */ + .tab { + overflow: hidden; + border: 1px solid #ccc; + background-color: #f1f1f1; + } + + /* Style the buttons that are used to open the tab content */ + .tab button { + background-color: inherit; + float: left; + border: none; + outline: none; + cursor: pointer; + padding: 14px 16px; + transition: 0.3s; + font-size: 105%; + font-weight: bold; + } + + /* Change background color of buttons on hover */ + .tab button:hover { + background-color: #ddd; + } + + /* Create an active/current tablink class */ + .tab button.active { + background-color: #ccc; + } + + /* Style the tab content */ + .tabcontent { + display: none; + padding: 6px 12px; + border: 1px solid #ccc; + border-top: none; + } + + /* Go from zero to full opacity */ + @keyframes fadeEffect { + from { + opacity: 0; + } + + to { + opacity: 1; + } + } + + /* Chrome, Safari, Opera */ + @-webkit-keyframes example { + 0% { + background-color: red; + left: 20px; + top: 0px; + } + + 25% { + background-color: orange; + left: 25px; + top: 0px; + } + + 50% { + background-color: green; + left: 30px; + top: 0px; + } + + 75% { + background-color: orange; + left: 25px; + top: 0px; + } + + 100% { + background-color: red; + left: 20px; + top: 0px; + } + } + + /* Standard syntax */ + @keyframes example { + 0% { + background-color: red; + left: 20px; + top: 0px; + } + + 25% { + background-color: orange; + left: 25px; + top: 0px; + } + + 50% { + background-color: green; + left: 30px; + top: 0px; + } + + 75% { + background-color: orange; + left: 25px; + top: 0px; + } + + 100% { + background-color: red; + left: 20px; + top: 0px; + } + } + + #myBar { + width: 10%; + height: 30px; + background-color: #4CAF50; + text-align: center; + /* To center it horizontally (if you want) */ + line-height: 30px; + /* To center it vertically */ + color: white; + } + + /* Tooltip container */ + .tooltip { + position: relative; + display: inline-block; + /* border-bottom: 1px dotted black; /* If you want dots under the hoverable text */ + } + + /* Tooltip text */ + .tooltip .tooltiptext { + visibility: hidden; + width: 320px; + background-color: black; + color: #fff; + text-align: left; + padding: 5px; + border-radius: 6px; + + /* Position the tooltip text - see examples below! */ + position: absolute; + z-index: 1; + } + + /* Show the tooltip text when you mouse over the tooltip container */ + .tooltip:hover .tooltiptext { + visibility: visible; + } +} \ No newline at end of file