css UI fixes, new panel, code optimizaiton, security fixes

2026-02-27 06:23:53 +01:00 · 2025-02-16 13:26:35 +01:00
parent d40d7f5435
commit bb50aff7b4
21 changed files with 1279 additions and 1054 deletions
--- a/web/css/breadcrumbs.css
+++ b/web/css/breadcrumbs.css
@@ -14,9 +14,16 @@ h1 {
 }

 h1#tuner-name {
-    font-size: 32px;
+    font-size: 26px;
    font-weight: 300;
    text-transform: initial;
+    user-select: none;
+    cursor: pointer;
+    transition: 0.3s ease color;
+}
+
+h1#tuner-name:hover {
+    color: var(--color-main-bright);
 }

 h2 {
@@ -43,7 +50,8 @@ h4 {

 .tooltiptext {
    position: absolute;
-    background-color: var(--color-3);
+    background-color: var(--color-2);
+    border: 2px solid var(--color-3);
    color: var(--color-text);
    text-align: center;
    font-size: 14px;
@@ -54,7 +62,7 @@ h4 {
    transition: opacity 0.3s ease;
 }

-p#tuner-desc {
+p.tuner-desc {
    margin: 0;
 }

@@ -116,61 +124,63 @@ table .form-group {
    margin: 0;
 }

-#settings, #back-btn, #users-online-container {
-    background: transparent;
-    border: 0;
-    color: var(--color-text);
+.hidden-panel {
+    display: none; 
    position: absolute;
-    top: 15px;
-    right: 15px;
-    font-size: 16px;
-    width: 64px;
-    height: 64px;
-    line-height: 64px;
-    text-align: center;
-    border-radius: 50%;
-    transition: 500ms ease background;
-    cursor: pointer;
+    left: 0;
+    top: 100%;
+    width: 100%;
+    max-width: 1160px;
+    background: var(--color-1-transparent);
+    color: white;
+    text-align: left;
+    padding: 20px;
+    backdrop-filter: blur(5px);
+    z-index: 10;
+    border-radius: 0 0 15px 15px;
 }

-.chatbutton.hide-desktop {
+#settings, #users-online-container, .chatbutton {
    background: transparent;
    border: 0;
-    color: var(--color-text);
-    position: absolute;
-    top: 15px;
-    left: 15px;
+    color: var(--color-4);
    font-size: 16px;
-    width: 64px;
-    height: 64px;
-    line-height: 64px;
+    width: 48px;
+    height: 48px;
    text-align: center;
-    border-radius: 50%;
-    transition: 500ms ease background;
+    border-radius: 15px;
+    transition: 300ms ease background;
    cursor: pointer;
+    margin: 2px;
 }

-#settings:hover, #back-btn:hover, #users-online-container:hover {
-    background: var(--color-3);
+#users-online-container {
+    margin-left: 10px;
+}
+
+.chatbutton, #settings {
+    background-color: var(--color-1);
+}
+
+#settings:hover, #users-online-container:hover, .chatbutton:hover {
+    background: var(--color-2);
 }

 #users-online-container {
    top: 80px;
 }

-#back-btn {
-    left: 15px;
-    right: auto;
+#af-list {
+    overflow-y: auto;
+    max-height: 345px;
 }

 #af-list ul {
-    display:list-item;
+    display: list-item;
    padding: 0;
    list-style-type: none;
-    margin-bottom: 0;
+    margin: 0;
    font-size: 14px;
-    max-height: 380px;
-    overflow-y: auto;
 }

 #af-list a {
@@ -192,9 +202,9 @@ table .form-group {
    margin-bottom: 0;
    display: none;
    cursor: pointer;
-  }
-  
-  .checkbox label {
+}
+
+.checkbox label {
    cursor: pointer;
    display: block;
    user-select: none;
@@ -204,45 +214,45 @@ table .form-group {
    border: 2px solid var(--color-4);
    box-sizing: border-box;
    transition: 0.35s ease background-color, 0.35s ease color;
-  }
-  .checkbox label:hover {
+}
+.checkbox label:hover {
    background-color: var(--color-2);
-  }
-  
- .form-group input:checked + label {
+}
+
+.form-group input:checked + label {
    background-color: var(--color-4);
    color: var(--color-main);
-  }
+}

-  .tuner-info {
+.tuner-info {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
-  }
+}

-  h2.settings-heading {
+h2.settings-heading {
    font-size: 42px;
    padding: 10px 0;
    font-weight: 300;
-  }
+}

-  h3.settings-heading {
+h3.settings-heading {
    font-size: 24px;
    text-transform: uppercase;
    font-weight: 300;
    margin-bottom: 5px;
-  }
+}

-  #tuner-wireless {
+#tuner-wireless {
    display: none;
-  }
+}

-  #flags-container-phone,
-  #flags-container-desktop {
+#flags-container-phone,
+#flags-container-desktop {
    position: relative; /* Confine overlay within container which is necessary for iPhones */
-  }
+}

-  #flags-container-phone .overlay,
-  #flags-container-desktop .overlay {
+#flags-container-phone .overlay,
+#flags-container-desktop .overlay {
    position: absolute;
    top: 0;
    left: 0;
@@ -321,23 +331,28 @@ pre {
    position: relative;
 }

+.text-200-px {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 200px;
+}
+
@media (max-width: 768px) {
    canvas, #flags-container {
        display: none;
    }
-    #tuner-desc {
+    .tuner-desc {
        margin-bottom: 20px !important;
+        text-align: center;
    }
    #ps-container {
        background-color: var(--color-1-transparent);
        height: 100px !important;
        margin: auto !important;
+        margin-top: 30px !important;
        width: 100%;
    }
-    h1#tuner-name {
-        max-width: 90%;
-        margin: auto;
-    }
    h2 {
        display: none;
    }
@@ -364,7 +379,7 @@ pre {
        font-size: 42px;
    }
    #data-frequency {
-        font-size: 64px;
+        font-size: 58px;
    }
    #data-rt0, #data-rt1 {
        font-size: 10px;
@@ -426,7 +441,7 @@ pre {
    }
 }

-@media only screen and (min-width: 769px) and (max-height: 860px) {
+@media only screen and (min-width: 769px) and (max-height: 720px) {
    #rt-container {
        height: 90px !important;
    }
@@ -441,38 +456,33 @@ pre {
        font-size: 24px;
        text-align: left;
    }
-
+    
    .tuner-info #tuner-limit {
        float: left;
        text-align: left;
    }

-    .tuner-info #tuner-desc {
-        float: right;
-        text-align: right;
-    }
    h2 {
        margin-bottom: 10px;
        font-size: 18px;
    }
-
+    
    h2.signal-heading {
        margin-bottom: 0;
    }
-
+    
    .highest-signal-container {
        margin-bottom: -10px !important;
    }
-
+    
    h2.mb-0 {
        margin-bottom: 0;
        margin-top: 2px !important;
    }
-    #af-list ul {
-        height: 225px !important;
-    }
-    .chatbutton {
-        height: 88px !important;
+    
+    #af-list {
+        overflow-y: auto;
+        max-height: 330px;
    }
 }

--- a/web/css/helpers.css
+++ b/web/css/helpers.css
@@ -71,6 +71,11 @@
    margin: 0 !important;
 }

+
+.m-10 {
+    margin: 10px;
+}
+
 .m-left-20 {
    margin-left: 20px;
 }
@@ -186,6 +191,10 @@
    margin-top: 25px;
 }

+.bottom-10 {
+    margin-bottom: 10px;
+}
+
 .bottom-20 {
    margin-bottom: 20px;
 }
@@ -238,12 +247,34 @@ table .input-text {
    animation: blinker 1.5s infinite;
 }

+.scrollable-container {
+    display: flex;
+    gap: 8px;
+    overflow-x: auto; /* Enables horizontal scrolling */
+    white-space: nowrap;
+    scrollbar-width: none; /* Hide scrollbar in Firefox */
+    -ms-overflow-style: none; /* Hide scrollbar in Edge */
+}
+
+/* Hide scrollbar for Chrome, Safari */
+.scrollable-container::-webkit-scrollbar {
+    display: none;
+}
+
+/* Chevron styling */
+.scroll-left,
+.scroll-right {
+    display: none; /* Hidden by default */
+    cursor: pointer;
+    width: 48px;
+}
+
@keyframes blinker {
    0% {
-        background-color: var(--color-4);
+        background-color: var(--color-3);
    }
    100% {
-        background-color: var(--color-2);
+        background-color: var(--color-1);
    }
 }

@@ -286,7 +317,7 @@ table .input-text {
 }

 /* Laptop compact view */
-@media only screen and (min-width: 960px) and (max-height: 860px) {
+@media only screen and (min-width: 960px) and (max-height: 720px) {
    .text-big {
        font-size: 40px;
    }
--- a/web/css/main.css
+++ b/web/css/main.css
@@ -60,14 +60,22 @@ body {
    min-height: 100%;
 }

-#wrapper-outer {
+.wrapper-outer {
    width: 100%;
    height: auto;
    background-color: var(--color-main);
    display: flex;
    align-items: center;
    justify-content: center;
-    min-height:100vh;
+    flex-direction: column;
+}
+
+.wrapper-outer:not(.dashboard-panel) {
+    min-height: calc(100vh - 84px);
+}
+
+.wrapper-outer.wrapper-full {
+    min-height: 100vh;
 }

 .wrapper-outer-static {
@@ -79,6 +87,7 @@ body {
    width: 100%;
    max-width: calc(0% + 1180px);
 }
+
 #wrapper.setup-wrapper {
    margin: auto;
    position: static;
@@ -135,15 +144,6 @@ hr {
      border-radius: 0px 15px 15px 0px;
 }

-@media (max-width: 1180px) {
-    #wrapper {
-        position: static;
-        transform: none;
-        margin: 50px auto;
-        width: 100%;
-    }
-}
-
@media (max-width: 768px) {
    #wrapper.setup-wrapper {
        width: 100%;
--- a/web/css/modal.css
+++ b/web/css/modal.css
@@ -107,11 +107,6 @@ body.modal-open {
    overflow-y: auto;
 }

-.modal-panel-content .version-info {
-    margin-top: 20px;
-    width: 100%;
-}
-
 .modal-panel-footer {
    width: 450px;
    height: 100px;
@@ -171,7 +166,7 @@ body.modal-open {
        width: 100%;
    }
    .modal-panel-chat {
-        height: 550px;
+        height: 510px;
    }
    #chat-chatbox {
        height: 333px !important;
--- a/web/css/panels.css
+++ b/web/css/panels.css
@@ -93,21 +93,13 @@
    .panel-90 {
        margin-top: 100px;
    }
-}
-
-/* Laptop compact view */
-@media only screen and (min-width: 960px) and (max-height: 860px) {
-    *[class^="panel-"] {
-        margin-top: 20px;
+    .panel-100-real.bg-phone {
+        background-color: var(--color-1-transparent);
+        backdrop-filteR: blur(5px) !important;
+        padding-left: 10px !important;
+        padding-right: 10px !important;
    }
-    .panel-90 {
-        margin-top: 0;
-    }
-    .panel-10 {
-        padding-bottom: 20px;
-        padding-right: 20px;
-    }
-    .panel-10.hide-phone {
-        padding: 0;
+    #dashboard-panel-description {
+        backdrop-filter: blur(25px) !important;
    }
 }
--- a/web/css/toast.css
+++ b/web/css/toast.css
@@ -2,7 +2,7 @@
  #toast-container {
    position: fixed;
    top: 20px;
-    right: 96px;
+    right: 32px;
    z-index: 9999;
  }