feature: css: add vars

css/main.css

@@ -1,3 +1,4 @@
+@import url(./vars.css);
 @import url(./urls.css);
 @import url(./reset.css);
 @import url(./style.css);

css/query.css

@@ -121,7 +121,7 @@
     
     /* текущий файл под курсором */
     .current-file {
-        background-color: var(--color-transparent);
+        background-color: var(--border-color);
         color: white;
     }
     /* делаем иконки под курсом белыми */

css/style.css

@@ -1,8 +1,3 @@
-:root {
-    --color: rgb(49 123 249);
-    --color-transparent: rgb(49 123 249 / 40%);
-}
-
 html {
     height: 94%;
 }
@@ -51,7 +46,7 @@ code {
 .panel,
 .cmd-button {
     border: 1px solid;
-    border-color: var(--color-transparent);
+    border-color: var(--border-color);
 }
 
 .icon {
@@ -98,7 +93,7 @@ code {
     bottom: 5px;
     left: 16px;
     font-size: 10px;
-    color: var(--color);
+    color: var(--icon-color);
     content: attr(data-progress);
 }
 
@@ -118,7 +113,7 @@ code {
 
 .cmd-button:active {
     color: white;
-    background-color: var(--color);
+    background-color: var(--icon-color);
     transition: ease 0.1s;
 }
 
@@ -169,7 +164,7 @@ a:active {
 }
 
 .current-file {
-    box-shadow: 0 0 0 1px var(--color-transparent) inset;
+    box-shadow: 0 0 0 1px var(--border-color) inset;
 }
 
 .cut-file {

css/user-menu.css

@@ -9,7 +9,7 @@
 }
 
 .cloudcmd-user-menu > option:checked {
-    box-shadow: 20px -20px 0 2px var(--color) inset;
+    box-shadow: 20px -20px 0 2px var(--icon-color) inset;
 }
 
 .cloudcmd-user-menu-button {

css/vars.css

@@ -0,0 +1,4 @@
+:root {
+    --icon-color: rgb(49 123 249);
+    --border-color: rgb(49 123 249 / 40%);
+}