Implement CSS variables to the default theme as of now

webapp/titanembeds/blueprints/user/user.py

@@ -93,12 +93,14 @@ def new_custom_css_post():
     name = request.form.get("name", None)
     user_id = session["user_id"]
     css = request.form.get("css","")
+    variables = request.form.get("variables", None)
+    variables_enabled = request.form.get("variables_enabled", False) in ["true", True]
     if not name:
         abort(400)
     else:
         name = name.strip()
         css = css.strip()
-    css = UserCSS(name, user_id, None, css)
+    css = UserCSS(name, user_id, variables_enabled, variables, css)
     db.session.add(css)
     db.session.commit()
     return jsonify({"id": css.id})
@@ -115,6 +117,7 @@ def edit_custom_css_get(css_id):
     if css.user_id != session['user_id']:
         abort(403)
     variables = css.css_variables
+    print(variables)
     if variables:
         variables = json.loads(variables)
     return render_template("usercss.html.j2", new=False, css=css, variables=variables)

webapp/titanembeds/static/css/embedstyle.css

@@ -27,7 +27,7 @@
 }
 
 html {
-  background-color: #455a64;
+  background-color: var(--main);
   color: white;
   font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
 }
@@ -43,12 +43,12 @@ footer {
   left: 0;
   right: 0;
   height: 50px;
-  background-color: #37474f;
+  background-color: var(--chatbox);
 }
 
 nav {
-  background-color: #263238;
-  background: linear-gradient(rgba(38, 50, 56, 1), rgba(255,0,0,0));
+  background-color: var(--header);
+  background: linear-gradient(var(--header), rgba(255,0,0,0));
   box-shadow: none;
 }
 
@@ -62,20 +62,6 @@ nav .brand-logo {
   }
 }
 
-body > div.navbar-fixed > nav > div {
-  background: #263238 background: -webkit-linear-gradient(#263238, #37474f, #455a64);
-  /* For Safari 5.1 to 6.0 */
-  
-  background: -o-linear-gradient(#263238, #37474f, #455a64);
-  /* For Opera 11.1 to 12.0 */
-  
-  background: -moz-linear-gradient(#263238, #37474f, #455a64);
-  /* For Firefox 3.6 to 15 */
-  
-  background: linear-gradient(#263238, #37474f, #455a64);
-  /* Standard syntax */
-}
-
 @media only screen and (min-width: 993px) {
   .container {
     width: 85%;
@@ -101,8 +87,20 @@ body > div.navbar-fixed > nav > div {
   font-variant: small-caps;
 }
 
+#members-nav {
+  background-color: var(--rightsidebar);
+}
+
+#members-nav li>a {
+  color: var(--noroleusers);
+}
+
+#guild-nav {
+  background-color: var(--leftsidebar);
+}
+
 .side-nav div.divider {
-  background-color: #90a4ae;
+  background-color: var(--sidebardivider);
   margin-left: 10px;
   margin-right: 10px;
 }
@@ -177,23 +175,23 @@ body > div.navbar-fixed > nav > div {
 }
 
 ::-webkit-input-placeholder {
-  color: rgb(99, 99, 99);
+  color: var(--placeholder);
 }
 
 :-moz-placeholder {
-  color: rgb(99, 99, 99);
+  color: var(--placeholder);
 }
 
 ::-moz-placeholder {
-  color: rgb(99, 99, 99);
+  color: var(--placeholder);
 }
 
 :-ms-input-placeholder {
-  color: rgb(99, 99, 99);
+  color: var(--placeholder);
 }
 
 ::-ms-input-placeholder {
-  color: rgb(99, 99, 99);
+  color: var(--placeholder);
 }
 
 #discord-members > li > a.subheader,
@@ -264,6 +262,7 @@ body > div.navbar-fixed > nav > div {
 
 #curuser_discrim {
   font-size: 50%;
+  color: var(--discrim);
 }
 
 #curuser_discrim,
@@ -286,7 +285,7 @@ body > div.navbar-fixed > nav > div {
 }
 
 .modal {
-  background-color: #546e7a;
+  background-color: var(--modal);
 }
 
 .modal-overlay {
@@ -411,7 +410,7 @@ a {
 }
 .chatmessage {
   display: inline;
-  color: rgb(195, 196, 197);
+  color: var(--chatmessage);
 }
 
 p.mentioned {
@@ -482,3 +481,19 @@ p.mentioned span.chatmessage {
   position: relative;
   top: -5px;
 }
+
+/* CSS Variables */
+:root {
+  /*--<var>: <value>*/
+  --modal: #546E7A;
+  --noroleusers: #ECEFF1;
+  --main: #455A64;
+  --placeholder: #636363;
+  --sidebardivider: #90A4AE;
+  --leftsidebar: #607D8B;
+  --rightsidebar: #607D8B;
+  --header: #263238;
+  --chatmessage: #C3C4C5;
+  --discrim: #FFFFFF;
+  --chatbox: #37474F;
+}

webapp/titanembeds/templates/usercss.html.j2

@@ -34,7 +34,7 @@ will have CSS cosmetic privilages removed, if caught. Please don't, we check the
     <div class="col s12">
         <p class="flow-text">Propose Predefined CSS variables here</p>
         <p>
-          <input type="checkbox" id="toggleCSSVar" {% if css.css_var_bool %}checked{% endif %}/>
+          <input type="checkbox" id="toggleCSSVar" {% if not new and css.css_var_bool %}checked{% endif %}/>
           <label for="toggleCSSVar">CSS Variables Enabled</label>
         </p>
         <div class="row">