Some CSS fixed for the new RTA mode.

application/view/inc/header.php

@@ -128,14 +128,14 @@
                     <td class='last mode'>
                         <div id='mode_switch'>
                             <span class='mode'>
-                                Normal
+                                N<span class='desktop'>ormal</span>
                             </span>
                             <label class='switch'>
                                 <input type="checkbox" <?=($MODE == GAME_MODE_ID::RTA ? "checked='cheecked'" : "")?> onChange='setMode(this.checked);'/>
                                 <span class="slider round"></span>
                             </label>
                             <span class='mode'>
-                                RTA
+                                R<span class='desktop'>TA</span>
                             </span>
                         </div>
                     </td>

public/css/monsters.css

@@ -32,7 +32,7 @@ section#list div.monster div.monster_tooltip{
     left: 6em;
     z-index: 10;
     display: none;
-    background: #351e0b;
+    background: var(--color-monster-tooltip-background);
     border: 0.2em solid var(--ui-color-border);
     border-radius: 0.5em;
     padding: 0.5em;
@@ -64,7 +64,7 @@ section#list div.monster div.monster_tooltip table.stats{
 section#list div.monster div.monster_tooltip table.stats th{
     font-weight: bold;
     border-bottom: 0.1em solid black;
-    background-color: #150e00;
+    background-color: var(--color-monster-tooltip-header);
 }
 
 section#list div.monster div.monster_tooltip table.stats tr{

public/css/ui-rta.css

@@ -19,8 +19,15 @@
     /**
      * Input elments
      */
-    --input-background: linear-gradient(0deg, rgba(187,132,64,1) 0%, rgba(200,173,120,1) 97%, rgba(209,169,143,1) 100%);
-    --input-background-disabled: linear-gradient(0deg, rgba(93,61,32,1) 0%, rgba(100,86,60,1) 97%, rgba(104,84,71,1) 100%);
-    --input-background-unchecked: rgb(96, 71, 40);
-    --input-background-checked: rgba(209,169,143,1);
+    --input-background: linear-gradient(0deg, #3f5bba 0%, #7779c6 97%, #8ec0d1 100%);
+    --input-background-disabled: linear-gradient(0deg, #603d20 0%, #64563c 97%, #685447 100%);
+    --input-background-unchecked: #283e60;
+    --input-background-checked: #8fb8d1;
+    /**
+     * Other colors
+     */
+    --color-monster-tooltip-background: #090c33;
+    --color-monster-tooltip-header: #050015;
+    --color-table-rune-background: #373662;
+    --color-table-rune-border: #211933;
 }

public/css/ui.css

@@ -73,15 +73,22 @@
     --input-color-placeholder: #777777;
     --input-font-weight: normal;
     --input-padding: 0;
-    --input-background: linear-gradient(0deg, rgba(187,132,64,1) 0%, rgba(200,173,120,1) 97%, rgba(209,169,143,1) 100%);
-    --input-background-disabled: linear-gradient(0deg, rgba(93,61,32,1) 0%, rgba(100,86,60,1) 97%, rgba(104,84,71,1) 100%);
-    --input-background-unchecked: rgb(96, 71, 40);
-    --input-background-checked: rgba(209,169,143,1);
+    --input-background: linear-gradient(0deg, #bb8440 0%, #c8ad78 97%, #d1a98f 100%);
+    --input-background-disabled: linear-gradient(0deg, #603d20 0%, #64563c 97%, #685447 100%);
+    --input-background-unchecked: #604728;
+    --input-background-checked: #d1a98f;
     --input-border: 0;/*0.2em solid var(--ui-color-border);*/
     --input-border-radius: 0.2em;
     --input-text-shadow: 0 0 0.1em #000000;
     --input-box-shadow: 0 0 0.2em #000000;
     --input-button-padding: 0.3em 1em 0.3em 1em;
+    /**
+     * Other colors
+     */
+    --color-monster-tooltip-background: #351e0b;
+    --color-monster-tooltip-header: #150e00;
+    --color-table-rune-background: #7d6640;
+    --color-table-rune-border: #3c2929;
 }
 
 
@@ -246,6 +253,11 @@ header nav#menu table td{
     padding: 0;
     vertical-align: middle;
 }
+@media screen and (max-width : 768px){
+    header nav#menu table td{
+        font-size: 85%;
+    }
+}
 header nav#menu table td.item{
     border: var(--nav-separator);
     text-align: center;
@@ -307,11 +319,14 @@ header table td.mode div#mode_switch{
     display: inline-block;
     font-size: 70%;
 }
+header table td.mode div#mode_switch label{
+    vertical-align: middle;
+}
 header table td.mode div#mode_switch .switch {
     position: relative;
     display: inline-block;
-    width: 3.5em;
-    height: 2em;
+    width: 2em;
+    height: 1.5em;
 }
 header table td.mode div#mode_switch .switch input {
     opacity: 0;
@@ -332,8 +347,8 @@ header table td.mode div#mode_switch .slider {
 header table td.mode div#mode_switch .slider:before {
     position: absolute;
     content: "";
-    height: 1.5em;
-    width: 1.5em;
+    height: 1em;
+    width: 1em;
     left: 0.25em;
     bottom: 0.25em;
     background-color: white;
@@ -341,15 +356,15 @@ header table td.mode div#mode_switch .slider:before {
     transition: .4s;
 }
 header table td.mode div#mode_switch input:checked + .slider {
-  background-color: #396f75;
+  background-color: #324b4f;
 }
 header table td.mode div#mode_switch input:focus + .slider {
   box-shadow: 0 0 1px #2196F3;
 }
 header table td.mode div#mode_switch input:checked + .slider:before {
-  -webkit-transform: translateX(1.5em);
-  -ms-transform: translateX(1.5em);
-  transform: translateX(1.5em);
+  -webkit-transform: translateX(0.5em);
+  -ms-transform: translateX(0.5em);
+  transform: translateX(0.5em);
 }
 header table td.mode div#mode_switch .slider.round {
     border-radius: 1.5em;
@@ -917,9 +932,9 @@ table.rune{
     position: relative;
     border-radius: 1em;
     margin: 0.5em;
-    background-color: #7d6640;
+    background-color: var(--color-table-rune-background);
     font-size: 90%;
-    border: 0.3em solid #3c2929;
+    border: 0.3em solid var(--color-table-rune-border);
     font-family: monospace;
 }
 table.rune td.icon{
@@ -1038,9 +1053,9 @@ table.artifact{
     position: relative;
     border-radius: 1em;
     margin: 0.5em;
-    background-color: #7d6640;
+    background-color: var(--color-table-rune-background);
     font-size: 90%;
-    border: 0.3em solid #3c2929;
+    border: 0.3em solid var(--color-table-rune-border);
     font-family: monospace;
 }
 table.artifact td.icon{
@@ -1118,7 +1133,7 @@ table.artifact td.details table.table_details span.quality.quality_legend{backgr
 div.enchantment_panel{
     width: 4em;
     height: 4em;
-    border: 0.1em solid #3c2929;
+    border: 0.1em solid var(--color-table-rune-border);
     border-radius: 0.5em;
     position: relative;
     text-align: center;