Implement CSS variables to the default theme as of now

This commit is contained in:
Jeremy Zhang 2017-09-08 00:14:10 +00:00
parent a293b89b8c
commit 4a204fb264
3 changed files with 46 additions and 28 deletions

View File

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

View File

@ -27,7 +27,7 @@
} }
html { html {
background-color: #455a64; background-color: var(--main);
color: white; color: white;
font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif; font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
} }
@ -43,12 +43,12 @@ footer {
left: 0; left: 0;
right: 0; right: 0;
height: 50px; height: 50px;
background-color: #37474f; background-color: var(--chatbox);
} }
nav { nav {
background-color: #263238; background-color: var(--header);
background: linear-gradient(rgba(38, 50, 56, 1), rgba(255,0,0,0)); background: linear-gradient(var(--header), rgba(255,0,0,0));
box-shadow: none; 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) { @media only screen and (min-width: 993px) {
.container { .container {
width: 85%; width: 85%;
@ -101,8 +87,20 @@ body > div.navbar-fixed > nav > div {
font-variant: small-caps; 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 { .side-nav div.divider {
background-color: #90a4ae; background-color: var(--sidebardivider);
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
} }
@ -177,23 +175,23 @@ body > div.navbar-fixed > nav > div {
} }
::-webkit-input-placeholder { ::-webkit-input-placeholder {
color: rgb(99, 99, 99); color: var(--placeholder);
} }
:-moz-placeholder { :-moz-placeholder {
color: rgb(99, 99, 99); color: var(--placeholder);
} }
::-moz-placeholder { ::-moz-placeholder {
color: rgb(99, 99, 99); color: var(--placeholder);
} }
:-ms-input-placeholder { :-ms-input-placeholder {
color: rgb(99, 99, 99); color: var(--placeholder);
} }
::-ms-input-placeholder { ::-ms-input-placeholder {
color: rgb(99, 99, 99); color: var(--placeholder);
} }
#discord-members > li > a.subheader, #discord-members > li > a.subheader,
@ -264,6 +262,7 @@ body > div.navbar-fixed > nav > div {
#curuser_discrim { #curuser_discrim {
font-size: 50%; font-size: 50%;
color: var(--discrim);
} }
#curuser_discrim, #curuser_discrim,
@ -286,7 +285,7 @@ body > div.navbar-fixed > nav > div {
} }
.modal { .modal {
background-color: #546e7a; background-color: var(--modal);
} }
.modal-overlay { .modal-overlay {
@ -411,7 +410,7 @@ a {
} }
.chatmessage { .chatmessage {
display: inline; display: inline;
color: rgb(195, 196, 197); color: var(--chatmessage);
} }
p.mentioned { p.mentioned {
@ -481,4 +480,20 @@ p.mentioned span.chatmessage {
line-height: 0; line-height: 0;
position: relative; position: relative;
top: -5px; 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;
} }

View File

@ -34,7 +34,7 @@ will have CSS cosmetic privilages removed, if caught. Please don't, we check the
<div class="col s12"> <div class="col s12">
<p class="flow-text">Propose Predefined CSS variables here</p> <p class="flow-text">Propose Predefined CSS variables here</p>
<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> <label for="toggleCSSVar">CSS Variables Enabled</label>
</p> </p>
<div class="row"> <div class="row">