388 lines
6.2 KiB
CSS
Executable File
388 lines
6.2 KiB
CSS
Executable File
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: Tahoma, sans-serif;
|
|
}
|
|
html body {
|
|
max-width: 100%;
|
|
overflow-x: hidden;
|
|
}
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
body {
|
|
background-color: #00050D;
|
|
color:white
|
|
}
|
|
|
|
/* Top logo bar */
|
|
header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 30px;
|
|
border-bottom: 2px solid white;
|
|
padding-bottom: 20px;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo {
|
|
width: 150px;
|
|
height: 41px;
|
|
}
|
|
.update-btn {
|
|
background-color: black;
|
|
border-color: white;
|
|
color: white;
|
|
transition: 0.25s;
|
|
}
|
|
.hostname-text {
|
|
font-style: italic;
|
|
color: greenyellow;
|
|
}
|
|
|
|
|
|
/* General Ticker */
|
|
.buttons-list {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
list-style-type: none;
|
|
}
|
|
.btn-stop-display {
|
|
background-color: purple;
|
|
color: white;
|
|
transition: 0.25s;
|
|
}
|
|
.btn-warning {
|
|
background-color: #ffc107;
|
|
color: white;
|
|
transition: 0.25s;
|
|
}
|
|
.btn-warning:hover {
|
|
background-color: greenyellow;
|
|
color: white;
|
|
}
|
|
.btn-warning:active {
|
|
background-color: #ffce45;
|
|
color: white;
|
|
}
|
|
.btn-stop-display:hover {
|
|
background-color: #b000b9;
|
|
color: white;
|
|
}
|
|
.btn-stop-display:active {
|
|
background-color: #3e065f;
|
|
color: white;
|
|
}
|
|
.set-btn {
|
|
background-color: none;
|
|
border-color:white;
|
|
border-radius:8px;
|
|
color: white;
|
|
transition: 0.25s;
|
|
}
|
|
.set-btn:hover,
|
|
.fa-chevron-right:hover,
|
|
.fa-chevron-left:hover,
|
|
.fa-chevron-up:hover,
|
|
.fa-chevron-down:hover,
|
|
.fa-minus:hover,
|
|
.update-btn:hover,
|
|
.save-btn:hover {
|
|
background-color: gray;
|
|
color: white;
|
|
}
|
|
.set-btn:active,
|
|
.fa-chevron-right:active,
|
|
.fa-chevron-left:active,
|
|
.fa-chevron-up:active,
|
|
.fa-chevron-down:active,
|
|
.fa-minus:active,
|
|
.update-btn:active,
|
|
.save-btn:active {
|
|
background-color: black;
|
|
color: grey;
|
|
}
|
|
.row-2 {
|
|
border-bottom: 2px solid white;
|
|
padding-bottom: 30px;
|
|
}
|
|
|
|
/* Features to display */
|
|
.features-div {
|
|
background-color: white;
|
|
padding-block: 10px;
|
|
height: 200px;
|
|
overflow-y: scroll;
|
|
}
|
|
.features-div-two {
|
|
background-color: white;
|
|
padding-block: 10px;
|
|
height: 370px;
|
|
overflow-y: scroll;
|
|
}
|
|
.display-features-list {
|
|
list-style-type: none;
|
|
}
|
|
|
|
.fa-chevron-right,
|
|
.fa-chevron-left,
|
|
.fa-chevron-up,
|
|
.fa-chevron-down,
|
|
.fa-minus {
|
|
background-color: black;
|
|
border-style: solid;
|
|
border-color:white;
|
|
border-width:thin;
|
|
border-radius:8px;
|
|
padding: 10px;
|
|
transition: 0.25s;
|
|
}
|
|
.icons-list {
|
|
margin-block: 70px;
|
|
}
|
|
.icons-list a {
|
|
color: white;
|
|
}
|
|
.icons-list i {
|
|
cursor: pointer;
|
|
border-radius: 5px;
|
|
width:35px;
|
|
}
|
|
.display-features-list li:hover {
|
|
background-color: dodgerblue;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.save-btn-div {
|
|
text-align: center;
|
|
margin-top: 60px;
|
|
}
|
|
.save-btn {
|
|
background-color: black;
|
|
color: white;
|
|
border-color:white;
|
|
padding-inline: 40px;
|
|
transition: 0.25s;
|
|
border-radius:8px;
|
|
}
|
|
|
|
.footer {
|
|
text-align: center;
|
|
color: white;
|
|
margin-top: 120px;
|
|
}
|
|
|
|
li.active {
|
|
background-color: dodgerblue;
|
|
}
|
|
.row-1,
|
|
.row-3 {
|
|
margin-block: 50px;
|
|
}
|
|
.w-115-px {
|
|
width: 115px;
|
|
}
|
|
.h-50-px {
|
|
height: 50px;
|
|
}
|
|
.text-right {
|
|
text-align: right;
|
|
}
|
|
.mr-5 {
|
|
margin-right: 1.25rem;
|
|
}
|
|
.font-6 {
|
|
font-size:22px;
|
|
color:white;
|
|
background: linear-gradient(90deg, #ff0000, #ffff00, #ff00f3, #0033ff, #ff00c4, #ff0000);
|
|
background-size:400%;
|
|
-webkit-text-fill-color: transparent;
|
|
-webkit-background-clip: text;
|
|
animation: animated 10s linear infinite;
|
|
letter-spacing: 1px;
|
|
word-spacing: 5px;
|
|
|
|
|
|
}
|
|
|
|
@keyframes animated {
|
|
0%{
|
|
background-position: 0%;
|
|
}
|
|
100%{
|
|
background-position: 400%;
|
|
}
|
|
}
|
|
|
|
#connected-text {
|
|
left: calc(100% + 1.25rem);
|
|
display: none;
|
|
}
|
|
|
|
#top-row-text,
|
|
#bottom-row-text {
|
|
text-align: center;
|
|
text-decoration: underline;
|
|
padding-right: 150px;
|
|
display: none;
|
|
}
|
|
#second-row {
|
|
display: none;
|
|
}
|
|
/* Responsiveness */
|
|
@media (max-width: 767px) {
|
|
.buttons-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 25px;
|
|
position: relative;
|
|
right: 20px;
|
|
}
|
|
.row-1,
|
|
.row-3 {
|
|
margin-block: 25px;
|
|
}
|
|
.screen-saver {
|
|
margin-block: 25px;
|
|
}
|
|
.display-none-div {
|
|
display: none;
|
|
}
|
|
.icons-list {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
}
|
|
.icons-list a {
|
|
margin-left: -120px;
|
|
}
|
|
|
|
.remove {
|
|
margin-right: -100px;
|
|
margin-left: -100px;
|
|
}
|
|
}
|
|
|
|
.status {
|
|
width: 25px;
|
|
height: 25px;
|
|
}
|
|
#circle-1 {
|
|
background-color: green;
|
|
}
|
|
#circle-2 {
|
|
background-color: red;
|
|
}
|
|
#circle-3 {
|
|
background-color: orange;
|
|
}
|
|
|
|
@media (min-width: 768px) and (max-width: 991px) {
|
|
.icons-list a {
|
|
position: relative;
|
|
top: 10px;
|
|
}
|
|
}
|
|
|
|
|
|
.icon-featuresdisplay i {
|
|
cursor: pointer;
|
|
border-radius:5px;
|
|
width: 35px;
|
|
}
|
|
|
|
|
|
.btn-success {
|
|
background-color: #004202;
|
|
border-color: green;
|
|
}
|
|
|
|
.btn-success:hover {
|
|
color:white;
|
|
background-color:green;
|
|
border-color:limegreen;
|
|
}
|
|
|
|
.btn-success:active {
|
|
color:grey;
|
|
background-color:#002803;
|
|
border-color:green;
|
|
}
|
|
|
|
.btn-info {
|
|
background-color: #3C005E;
|
|
border-color:purple;
|
|
color:white;
|
|
}
|
|
|
|
.btn-info:hover {
|
|
color:white;
|
|
background-color:darkviolet;
|
|
border-color:magenta;
|
|
}
|
|
|
|
.btn-info:active {
|
|
color:grey;
|
|
background-color:#2A003F;
|
|
border-color:purple;
|
|
}
|
|
|
|
.btn-warning {
|
|
background-color: #4C2100;
|
|
border-color: orange;
|
|
color: white;
|
|
}
|
|
|
|
.btn-warning:hover {
|
|
background-color: orangered;
|
|
color:white;
|
|
border-color: yellow;
|
|
}
|
|
|
|
.btn-warning:active {
|
|
background-color: #4C2100;
|
|
border-color: orange;
|
|
color: grey;
|
|
}
|
|
|
|
.btn-dark {
|
|
background-color: #00276B;
|
|
border-color:blue;
|
|
color:white;
|
|
}
|
|
|
|
.btn-dark:hover {
|
|
color:white;
|
|
background-color:#014ADC;
|
|
border-color:deepskyblue;
|
|
}
|
|
|
|
.btn-dark:active {
|
|
color:grey;
|
|
background-color:#001B50;
|
|
border-color:blue;
|
|
}
|
|
|
|
.btn-danger {
|
|
background-color: #460101;
|
|
border-color:red;
|
|
color:white;
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
color:white;
|
|
background-color:crimson;
|
|
border-color:lightcoral;
|
|
}
|
|
|
|
.btn-danger:active {
|
|
color:grey;
|
|
background-color:#460101;
|
|
border-color:red;
|
|
}
|
|
|
|
|
|
|
|
|