Merge pull request #294 from AEtheve/master

UI change (Options)

Author: divamgupta

electron_app/src/assets/css/theme.css

@@ -10,256 +10,268 @@
     --menu-background: #eaebef;
 }
 
-
-
 @media (prefers-color-scheme: light) {
+     :root {
+        --slider-progress: #D0A3FD;
+        --slider-progress_end: #F1F4FA;
+        --slider-circle: #9131F1;
+        --slider-border: white;
+    }
     body {
         background-color: #F2F2F2;
     }
-
     h1 {
         color: rgba(0, 0, 0, 0.9);
     }
-
     h2 {
         color: rgba(0, 0, 0, 0.7);
     }
-
     p {
         color: rgba(0, 0, 0, 0.9);
     }
-
     select {
         outline-color: transparent;
     }
-
     select:focus {
         outline-color: var(--border);
     }
-
-    .b-dropdown-form, .b-dropdown-form:focus {
+    .b-dropdown-form,
+    .b-dropdown-form:focus {
         outline: none !important;
         outline-color: transparent;
     }
-
     .splash_screen {
         background-color: #F2F2F2;
     }
-
     .l_button {
         color: rgba(0, 0, 0, 0.5);
     }
-
     .l_button:hover {
         background-color: rgba(0, 0, 0, 0.06);
     }
-
     .tab_content_frame {
         background-color: #F2F2F2;
     }
-
     .animatable_content_box {
         background-color: #F2F2F2;
     }
-
     textarea {
         border-color: rgba(0, 0, 0, 0.1);
     }
-
     .image_area {
         border: 1px solid;
         border-color: rgba(0, 0, 0, 0.0);
         background-color: rgba(0, 0, 0, 0.05);
     }
-
     .form-control {
         background-color: #ffffff;
         color: #0d0d0d;
     }
-
     .form-control:focus {
         background-color: #ffffff;
         color: #0d0d0d;
     }
-
     .dropdown-menu {
         color: rgba(0, 0, 0, 0.9);
         background-color: var(--background);
     }
-
     .dropdown-item {
         color: rgba(255, 255, 255, 0.9);
     }
-
     .dropdown-item:focus {
         background-color: var(--menu-background);
     }
-
     .dropdown-item:hover {
         background-color: var(--menu-background);
     }
-
     .dropdown-item {
         color: rgba(0, 0, 0, 0.9);
     }
-
     .title_bar {
         background-color: var(--background);
         border-color: #E6E6E6;
     }
-
     .tabs_bar {
         background-color: var(--background);
         border-color: #E6E6E6;
     }
-
     .text_bg {
         background-color: rgba(0, 0, 0, 0.05);
     }
-
     .loader_box {
         color: rgba(255, 255, 255, 0.9);
         background-color: white;
     }
-
     .logo_splash_screen {
         content: url("..//logo_splash.png")
     }
+    .options_title_box {
+        color: #484A54;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        padding: 0px;
+    }
+    .options_input {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        padding: 8px;
+        gap: 12px;
+        background-color: #F1F4FA;
+        border-radius: 4px;
+    }
+    #tickmarks p {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        text-align: center;
+        width: 1px;
+        color: #484A54;
+        height: 15px;
+        margin: 10px 0px;
+    }
 }
 
 @media (prefers-color-scheme: dark) {
+     :root {
+        --slider-progress: #5304a3;
+        --slider-progress_end: #303030;
+        --slider-circle: #3a076d;
+        --slider-border: #222222;
+    }
     body {
         background-color: #303030;
     }
-
     h1 {
         color: rgba(255, 255, 255, 0.9);
     }
-
     h2 {
         color: rgba(255, 255, 255, 0.7);
     }
-
     p {
         color: rgba(255, 255, 255, 0.9);
     }
-
     hr {
         border-color: var(--border-dark);
     }
-
     .splash_screen {
         background-color: #303030;
     }
-
     .l_button {
         color: rgba(255, 255, 255, 0.5);
     }
-
     .l_button:hover {
         background-color: rgba(255, 255, 255, 0.08);
     }
-
     .tab_content_frame {
         background-color: #303030;
     }
-
     .animatable_content_box {
         background-color: #1c1c1c;
     }
-
     textarea {
         border-color: rgba(255, 255, 255, 0.1);
     }
-
     .image_area {
         background-color: var(--background-dark);
         border: 1px solid;
         border-color: #606060;
     }
-
     select {
         border-color: rgba(255, 255, 255, 0.1);
         background-color: var(--background-input-dark);
         color: var(--text-dark);
         outline-color: transparent;
     }
-
     form {
         background-color: var(--background-secondary-dark);
     }
-
     .form-control {
         background-color: var(--background-dark);
         color: var(--text-dark);
         border-color: #606060;
     }
-
-    .b-dropdown-form, .b-dropdown-form:focus {
+    .b-dropdown-form,
+    .b-dropdown-form:focus {
         outline: none !important;
         outline-color: transparent;
     }
-
     .form-control:focus {
         background-color: var(--background-dark);
         color: var(--text-dark);
         border-color: transparent;
     }
-
     .form-control::placeholder {
         color: #797979;
     }
-
     .dropdown-menu {
         color: rgba(255, 255, 255, 0.9);
         background-color: var(--background-secondary-dark);
     }
-
     .dropdown-item {
         color: rgba(255, 255, 255, 0.9);
     }
-
     .dropdown-item:focus {
         color: rgba(255, 255, 255, 0.9);
         background-color: var(--background-dark);
     }
-
     .dropdown-item:hover {
         color: rgba(255, 255, 255, 0.9);
         background-color: var(--background-dark);
     }
-
     .app_title span {
         color: rgba(255, 255, 255, 0.9);
     }
-
     .title_bar {
         border-color: var(--border-dark);
         background-color: #302e2f;
     }
-
     .tabs_bar {
         border-color: var(--border-dark);
     }
-
     #app {
         background-color: var(--background-dark);
     }
-
     .text_bg {
         background-color: rgba(255, 255, 255, 0.1);
     }
-
     .loader_box {
         color: rgba(255, 255, 255, 0.9);
-        background-color:  #303030;
+        background-color: #303030;
     }
-
     .logo_splash_screen {
         content: url("..//logo_splash_dark.png")
     }
-
-    .moonloader{
+    .moonloader {
         filter: invert(100%);
     }
+    .options_title_box {
+        color: rgba(255, 255, 255, 0.9);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        padding: 0px;
+    }
+    .options_input {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        padding: 8px;
+        gap: 12px;
+        background-color: #303030;
+        border-radius: 4px;
+    }
+    #tickmarks p {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        text-align: center;
+        width: 1px;
+        color: #606060;
+        height: 15px;
+        margin: 10px 0px;
+    }
 }