transition

front/sass/app.scss

@@ -6,6 +6,10 @@ $green-pigment: #139a43ff;
 $lincoln-green: #0b5d1eff;
 $forest-green-traditional: #053b06ff;
 $black: #000000ff;
+$dark: #000000ff;
+$white: #ffffff;
+$light: #eee;
+$danger: red;
 
 /* SCSS Gradient */
 $gradient-top: linear-gradient(
@@ -80,25 +84,71 @@ $gradient-radial: radial-gradient(
     #000000ff
 );
 
-$primary: $lincoln-green;
+$primary: #5b86be;
+$secondary: #d9cca1;
+$success: #80c671;
+$background: #f4f6fa;
 $table-striped-bg-factor: 0.03;
 $dropdown-bg: rgb(206, 223, 210);
+$border-color: #000;
+$text: #04060b;
+$accent: #80c671;
 
-@import "../node_modules/bootstrap/scss/bootstrap";
+//https://www.realtimecolors.com/?colors=04060b-f4f6fa-5b86be-d9cca1-80c671&fonts=Anek Telugu-Anek Telugu
+$themes: (
+        light: (
+                text: #04060b,
+                background: #f4f6fa,
+                primary: #5b86be,
+                secondary: #d9cca1,
+                accent: #80c671,
+        ),
+        dark: (
+                text: #f4f6fb,
+                background: #05070a,
+                primary: #416ca4,
+                secondary: #5e5126,
+                accent: #488e39,
+        ),
+);
+
+
+
+//@import "../node_modules/bootstrap/scss/bootstrap";
+@import "./reset";
+@import "./helpers";
+@import "./notice";
+@import "./auth";
+@import "./typography";
 @import "./sidebar";
+@import "./form";
 @import "./table";
 @import "./avatar";
 @import "./codemirror";
+@import "./layout";
 @import "./wrappers";
-@import "./in-place";
-@import "./text";
 @import "./card";
-@import "./nav";
 @import "./files";
 @import "./revisions";
 
+:root{
+    --linearPrimarySecondary: linear-gradient(#5b86be, #d9cca1);
+    --linearPrimaryAccent: linear-gradient(#5b86be, #80c671);
+    --linearSecondaryAccent: linear-gradient(#d9cca1, #80c671);
+    --radialPrimarySecondary: radial-gradient(#5b86be, #d9cca1);
+    --radialPrimaryAccent: radial-gradient(#5b86be, #80c671);
+    --radialSecondaryAccent: radial-gradient(#d9cca1, #80c671);
+    --border-color: $border-color;
+    --main-font: ‘Open Sans‘, Arial, Helvetica, sans-serif;
+    --main-font-color: #444;
+    --input-bg: rgb(245,245,249);
+
+}
+
+
+
 body {
-    background-color: rgba(11, 93, 30, 0.04);
+    background-color: $background;
 }
 
 .btn-spinner .spinner-border {
@@ -119,8 +169,8 @@ body {
 }
 
 .dropdown-menu {
-    border: 0px;
+    border: 0;
     border-radius: 15px;
-    box-shadow: 0px 0px 4px #ccc;
+    box-shadow: 0 0 4px #ccc;
     padding: 30px 15px;
 }