chat, theme changes, bugfixes

web/css/breadcrumbs.css

@@ -102,6 +102,23 @@ label {
     cursor: pointer;
 }
 
+.chatbutton.hide-desktop {
+    background: transparent;
+    border: 0;
+    color: var(--color-text);
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    font-size: 16px;
+    width: 64px;
+    height: 64px;
+    line-height: 64px;
+    text-align: center;
+    border-radius: 50%;
+    transition: 500ms ease-in-out background;
+    cursor: pointer;
+}
+
 #settings:hover, #back-btn:hover, #users-online-container:hover {
     background: var(--color-3);
 }
@@ -199,6 +216,9 @@ label {
     canvas, #flags-container {
         display: none;
     }
+    #tuner-desc {
+        margin-bottom: 20px !important;
+    }
     #ps-container {
         background-color: var(--color-1);
         height: 100px !important;
@@ -213,8 +233,8 @@ label {
     }
     #data-pi {
         font-size: 24px;
-        margin-top: 50px;
-        color: var(--color-text-2)
+        margin-top: 20px;
+        color: var(--color-text-2);
     }
     h2.show-phone {
         display: inline;
@@ -230,6 +250,7 @@ label {
         font-size: 10px;
         text-align: left;
         width: 100%;
+        word-break: break-all;
     }
     #rt-container {
         height: 32px !important;
@@ -272,6 +293,13 @@ label {
     .tuner-info {
         margin-bottom: -60px !important;
     }
+    #af-list ul {
+        height: auto !important;
+    }
+
+    #rt-container {
+        order: 2;
+    }
 }
 
 @media only screen and (min-width: 769px) and (max-height: 860px) {
@@ -287,6 +315,12 @@ label {
     .tuner-info #tuner-name {
         float: left;
         font-size: 24px;
+        text-align: left;
+    }
+
+    .tuner-info #tuner-limit {
+        float: left;
+        text-align: left;
     }
 
     .tuner-info #tuner-desc {
@@ -303,6 +337,9 @@ label {
         margin-top: 2px !important;
     }
     #af-list ul {
-        max-height: 330px;
+        height: 225px !important;
+    }
+    .chatbutton {
+        height: 86px !important;
     }
 }

web/css/main.css

@@ -64,15 +64,6 @@ body {
     transform: none;
 }
 
-@media (max-width: 1180px) {
-    #wrapper {
-        position: static;
-        transform: none;
-        margin: 50px auto;
-        width: 100%;
-    }
-}
-
 a {
     text-decoration: none;
     color: var(--color-text-2);
@@ -80,4 +71,52 @@ a {
 
 a:hover {
     border-bottom: 1px solid var(--color-4);
+}
+
+hr {
+    color: var(--color-4);
+}
+
+table {
+    border-radius: 30px;
+    background-color: var(--color-2);
+    padding: 20px;
+    margin: auto;
+}
+
+table th {
+    padding: 8px 20px;
+    outline: 1px solid var(--color-3);
+    background-color: var(--color-3);
+}
+
+table td {
+    padding: 8px 20px;
+}
+
+table td:nth-child(1) {
+    text-align: left;
+}
+
+table td:nth-child(2) {
+    color: var(--color-main-bright);
+    text-align: left;
+}
+
+
+table th:nth-child(1) {
+    border-radius: 30px 0px 0px 30px; 
+}
+
+table th:nth-last-child(1){
+      border-radius: 0px 30px 30px 0px;
+}
+
+@media (max-width: 1180px) {
+    #wrapper {
+        position: static;
+        transform: none;
+        margin: 50px auto;
+        width: 100%;
+    }
 }

web/css/modal.css

@@ -74,6 +74,7 @@
     position: absolute;
     right: 0;
     text-align: center;
+    display: none;
     background-color: var(--color-main);
 }
 
@@ -122,6 +123,26 @@
     margin: auto;
 }
 
+.modal-panel-chat {
+    width: 100%;
+    max-width: 960px;
+    height: 450px;
+    position: absolute;
+    bottom: 0;
+    margin: auto;
+    left: 0;
+    right: 0;
+    text-align: center;
+    display: none;
+    background-color: var(--color-main);
+    border-radius: 30px 30px 0px 0px;
+}
+
+.modal-panel-chat .modal-panel-sidebar {
+    width: 100%;
+    border-radius: 30px 30px 0px 0px;
+}
+
 @media only screen and (max-width: 768px) {
     .modal-content {
         min-width: 90% !important;
@@ -134,12 +155,18 @@
     .modal-title {
         position: static;
     }
-    #closeModalButton {
+    .closeModalButton {
         position: static;
     }
     .modal-panel {
         width: 100%;
     }
+    .modal-panel-chat {
+        height: 500px;
+    }
+    #chat-chatbox {
+        height: 333px !important;
+    }
 }
 
 @media only screen and (max-height: 768px) { 

web/css/panels.css

@@ -10,7 +10,7 @@
 
 .panel-10 {
     width: 10%;
-    margin-bottom: 30px;
+    margin-top: 30px;
 }
 
 .panel-33 {
@@ -44,9 +44,9 @@
         padding: 20px;
         padding-top: 5px;
     }
-    .panel-100 {
-        width: 90%;
-        margin: auto;
+    .panel-100, .panel-100.w-100 {
+        width: 90% !important;
+        margin: auto !important;
     } 
     [class^="panel-"] {
         margin: auto;
@@ -67,11 +67,10 @@
     *[class^="panel-"] {
         margin-top: 20px;
     }
-    .panel-10, .panel-90 {
+    .panel-90 {
         margin-top: 0;
     }
     .panel-10 {
-        margin: 0;
         padding-bottom: 20px;
         padding-right: 20px;
     }