new frontend added

static/style.css

@@ -16,22 +16,32 @@ body {
 
 /* Top logo bar */
 header {
-  display: block;
+  display: flex;
+  justify-content: space-between;
   margin-top: 30px;
   border-bottom: 2px solid white;
   padding-bottom: 20px;
+  align-items: center;
 }
 
 .logo {
   width: 200px;
   height: 70px;
 }
-.update-btn,
-.update-btn:hover {
+.update-btn {
   background-color: gray;
-  float: right;
-  margin-top: 20px;
   color: white;
+  transition: 0.25s;
+}
+.hostname-text {
+  margin: 0;
+  align-self: flex-end;
+  font-style: italic;
+  color: greenyellow;
+  font-size: 18px;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 /* General Ticker */
@@ -40,15 +50,58 @@ header {
   justify-content: space-around;
   list-style-type: none;
 }
-.btn-stop-display,
-.btn-stop-display:hover {
+.btn-stop-display {
   background-color: purple;
   color: white;
+  transition: 0.25s;
 }
-.set-btn,
-.set-btn:hover {
+.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: gray;
   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: #8ca1a5;
+  color: white;
+}
+.set-btn:active: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: #6c4a4a;
+  color: white;
 }
 .row-2 {
   border-bottom: 2px solid white;
@@ -79,6 +132,7 @@ header {
 .fa-minus {
   background-color: gray;
   padding: 10px;
+  transition: 0.25s;
 }
 .icons-list {
   margin-block: 70px;
@@ -98,11 +152,11 @@ header {
   text-align: center;
   margin-top: 60px;
 }
-.save-btn,
-.save-btn:hover {
+.save-btn {
   background-color: gray;
   color: white;
   padding-inline: 40px;
+  transition: 0.25s;
 }
 
 .footer {
@@ -114,52 +168,79 @@ header {
 li.active {
   background-color: skyblue;
 }
-.row-1, .row-3{
+.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: 1.5rem;
+}
+#connected-text {
+  left: calc(100% + 1.25rem);
+  display: none;
+}
+#selected-display-text {
+  color: blue;
+}
+#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{
+  .buttons-list {
     display: flex;
     flex-wrap: wrap;
     gap: 25px;
     position: relative;
     right: 20px;
   }
-  .row-1, .row-3{
+  .row-1,
+  .row-3 {
     margin-block: 25px;
   }
-  .screen-saver{
+  .screen-saver {
     margin-block: 25px;
   }
-  .display-none-div{
+  .display-none-div {
     display: none;
   }
-  .icons-list{
+  .icons-list {
     display: flex;
     justify-content: center;
     gap: 20px;
   }
-  .icons-list a{
+  .icons-list a {
     margin-left: -120px;
   }
 
-  .remove{
+  .remove {
     margin-right: -100px;
     margin-left: -100px;
   }
-
-
-
-
 }
 
 @media (min-width: 768px) and (max-width: 991px) {
-
-  .icons-list a{
-   position: relative;
+  .icons-list a {
+    position: relative;
     top: 10px;
   }
-
-}
+}