feat: update dark style for kite.koboldai.net

static/index-dark.css

@@ -1,10 +1,3 @@
-#id-title.h1 {
-    font-size: 24px;
-    margin-left: 10px;
-    margin-right: 10px;
-    margin-block-start: 5px;
-    margin-block-end: 5px;
-}
 #id-col1-editor > h4,#id-col2-words-frequency > div > div > h4 {
     font-size: 18px;
     margin-block-start: 2px;
@@ -20,17 +13,16 @@
     padding-left: 10px;
     padding-right: 10px;
 }
+#filter-words-frequency {
+    height: 30px;
+    width: 100%;
+}
 .display-none {
     display: none;
 }
 .display-block {
     display: block;
 }
-.underlinedDarkTurquoise {
-    text-decoration: underline;
-    text-decoration-color: darkturquoise;
-    text-decoration-style: wavy;
-}
 .underlinedYellow {
     color: yellow;
     text-decoration: underline;
@@ -41,56 +33,42 @@
     text-decoration: underline;
     text-decoration-color: violet;
 }
-.display-flex {
-    display: flex;
+.display-grid {
+    display: grid;
 }
-.col-flex30 {
-    flex: 30%;
+.grid-template-5x1 {
+    grid-template-columns: 5fr 1fr;
+}
+.grid-template-1x2 {
+    grid-template-columns: 1fr 1fr;
 }
 .col-flex50 {
     flex: 50%;
 }
-.border-green {
-    border: 1px solid green;
-}
-.border-blue {
-    border: 1px solid blue;
-}
 .border-black {
     border: 1px solid black;
 }
 .border-gray-litekoboldai {
     border: 1px solid #646464;
 }
+#wordsFreqNavbarNavDropdown {
+    padding-left: 0;
+    padding-right: 0;
+}
 .padding10px {
     padding: 10px;
 }
 .margin10px {
     margin: 10px;
 }
-.margin5px-left {
-    margin-left: 10px;
-}
-.margin5px-right {
-    margin-right: 10px;
-}
 .margin5px-top {
     margin-top: 5px;
 }
 .margin2px-bottom {
     margin-bottom: 2px;
 }
-.background-color-lightgray {
-    background-color: lightgray;
-}
-.background-color-whitesmoke {
-    background-color: whitesmoke;
-}
-.max-height-90vh {
-    max-height: 90vh;
-}
-.max-height-80vh {
-    max-height: 80vh;
+.max-height-80perc {
+    max-height: 80%;
 }
 .overflow-hidden {
     /* needed for scroll bar*/
@@ -100,17 +78,8 @@
     /* needed for scroll bar*/
     overflow: auto;
 }
-.width-50perc {
-    width: 50%;
-}
-.width-80perc {
-    width: 80%;
-}
-#id-landscape-message {
-    display: none;
-}
-.id-orientation-message {
-    display: none;
+.width-100perc {
+    width: 100%;
 }
 .background-color-verydarkgrey {
     background-color: #404040;
@@ -118,13 +87,43 @@
 .font-size-12px {
     font-size: small;
 }
-@media screen and (max-width: 1024px) and (orientation: portrait) {
-    .id-orientation-message {
+.color-white {
+    color: white;
+}
+.navtoggler-words-freq {
+    background-color: #337ab7;
+    border: 1px solid #bababa;
+    height: 45px;
+    width: 60px;
+    border-radius: 6px;
+}
+#words-frequency {
+    max-height: calc(84vh - 250px);
+}
+@media screen and (max-width: 1023px) {
+    #words-frequency {
+        max-height: calc(80vh - 250px);
+    }
+}
+
+@media only screen and (width:768px) {
+    #words-frequency {
+        max-height: calc(76vh - 160px);
+    }
+    #btn4-get-words-frequency {
+        font-size: 12px;
+    }
+    #btn-filter-words-frequency {
+        font-size: 12px;
+    }
+    #wordsFreqNavbarNavDropdown ul, #wordsFreqNavbarNavDropdown ul li div {
         display: block;
-        text-align: center;
     }
-    .id-orientation-message:before {
-        color: red;
-        content: "(Mobile users: use this in landscape mode!)"
+    #wordsFreqNavbarNavDropdown ul li {
+        margin-left: 12px;
+        margin-right: 12px;
+    }
+    #id-col1-editor > h4,#id-col2-words-frequency > div > div > h4 {
+        font-size: 14px;
     }
 }