CSS crap

closedverse_main/templates/closedverse_main/layout.html

@@ -54,6 +54,7 @@
     darkColor = rgb2hex(mainColorR / 4, mainColorG / 4, mainColorB / 4);
     lightColor = rgb2hex(lightColorR, lightColorG, lightColorB);
     slightlyDarkColor = rgb2hex(mainColorR / 1.4, mainColorG / 1.4, mainColorB / 1.4);
+    darkerButNotThatDark = rgb2hex(mainColorR / 6, mainColorG / 6, mainColorB / 6);
     darkerColor = rgb2hex(mainColorR / 8, mainColorG / 8, mainColorB / 8);
 
     // Set CSS variables
@@ -61,8 +62,8 @@
     document.documentElement.style.setProperty("--theme-dark", darkColor);
     document.documentElement.style.setProperty("--theme-slightly-dark", slightlyDarkColor);
     document.documentElement.style.setProperty("--theme-darker", darkerColor);
+    document.documentElement.style.setProperty("--theme-a-bit-darker", darkerButNotThatDark);
     document.documentElement.style.setProperty("--theme-light", lightColor);
-	{% if not request.user.bg_url %}document.documentElement.style.setProperty("--background", "url('img/indigo-pattern.png')");{% endif %}
   }
 
   // hex -> rgb
@@ -85,8 +86,8 @@
     document.documentElement.style.setProperty("--theme-dark", "initial");
     document.documentElement.style.setProperty("--theme-slightly-dark", "initial");
     document.documentElement.style.setProperty("--theme-darker", "initial");
+    document.documentElement.style.setProperty("--theme-a-bit-darker", "initial");
     document.documentElement.style.setProperty("--theme-light", "initial");
-    document.documentElement.style.setProperty("--background", "");
   }
 
   changeThemeColor();

static/blueness.css

@@ -149,7 +149,7 @@ form.search input[type="submit"] {
     box-shadow: 0px 1px 0px #000;
 }
 .notify {
-    background: #0e0e39 !important;
+    background: var(--theme-darker, #0e0e39) !important;
 }
 .tab2 a, .tab3 a {
     background-color: var(--theme-dark, #0a0a17);
@@ -480,7 +480,7 @@ border-top: 1px solid #222;
     border: 1px solid rgba(221, 221, 221, 0);
 }
 #wrapper, #image-header-content {
-    background: var(--theme, #eeeeee) var(--background, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAjBJREFUeJzt3cFy2jAURuFfMjTrvP+bltrqgpA0YKczHQj1uecs8UbypwGbzW0vL68jq7VM0yFJW7/83zYyz7+SbGyrWH39473iJvte+/1bASbcIMIe7tMVMOnGtEzTMa0R9vLvfQKepmMYuB/1Xhu5J0lrLdP049lreViVkXtrLb0fn72Oh9f7oSRyr4B7rsZBvm7jNckoCQxPYHgCwxMYnsDwBIYnMDyB4QkMT2B4AsMTGJ7A8ASGJzA8geEJDE9geALDExiewPAEhicwPIHhCQxPYHgCwxMYnsDwBIYnMDyB4QkMT2B4AsMTGJ7A8ASGJzA8geEJDE9geALDExheX5bTs9fwbVXa66U+xsg8/3z2Oh7espwyRr1JLO9f0fPMPd1VcZNPv8HjDZl1IyrjJjcPWaShUucDWxk3WX2KJiAT9nCfNl6T9nyD9rz2+3fYvjTQD1637XUo2NcH2j86kuwXN/nb2gXeNe6l7T0UBybgXlqf1VgauMKsxpLAlWY1lgOuNquxHHAF3HPng1wOuFoCwxMYnsDwBIYnMDyB4QkMT2B4AsMTGJ7A8ASGJzA8geEJDE9geALDExiewPAEhicwPIHhCQxPYHgCwxMYnsDwBIYnMDyB4QkMT2B4AsMTGJ7A8ASGJzA8geEJDE9geALDExiewPAEhlcOuNL8wmU51QOuNquxHPAl8sigP8f5lQWuMquxMHDCmpK2PquxOHDCQN7eg8BJ9o389dp/A4bSnAQqPoWAAAAAAElFTkSuQmCC')) !important;
+    background: var(--theme-a-bit-darker, #0b0b1a) url('img/Transparent-checkerboard-pattern.svg') !important;
 }
 #empathy-content:before {
     background: url(img/rks.png) no-repeat 0 0 !important;

static/closedverse.css

@@ -216,7 +216,7 @@ body {
   min-width: 320px;
   margin: auto 0;
   text-align: left;
-  background: var(--theme, #eee) var(--background, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAIAAAC2BqGFAAADF0lEQVR4nO2dwW7bMBAFuRLz/5+bgyWyhwUE13ELtN43EIE3pyQHZj1YUoRMPcX393fT8Hg8zvOcc4rGryUi9n3/+voSjb+Jxm2tbdsWEbrxa4mIbVPa0A1tnrFoCIuGsGgIi4awaAiLhrBoCIuGsGgIi4awaAiLhrBoCIuGsGgIi4awaAiLhrBoCKHoOecqX4E3fbUS0RGxluUkaxZ9c6/q6DnnGEM0uIgxhq456kVnO+fRmYWaOqvNshVNXS96znkcx0JnlC5S9HEcisorRWcjnOd5nmfhsDBX/bV93UtGyZrGGFnl20XjqvsO58Su8l7qzF+zqfd9z0NiJQ1eIzovI1cv/KwsK87zbTcRnTVHxMtF+8V1RJQU3B+Px4eH+66i2zvFWeW2bYVFl/B89Wu/V54/jzHGGCXNMcbo53l+uA/70zRsraXZfd9rp2EJ1ySLiLcTMS1nG30oes7ZdZuw/Ay99+zl+yhOsp7s1og4jqP9Ycn++ff/QHuvI3u53amRX8jCrjp1qETnitF7v8+i/BeeZ57oX6judaToG64Yb8nth/Ryrerom2zj/gnp0xXCpWOVdk6yqZdcOhQjq1lv6TAvWDSERUNYNIRFQ1g0hEVDWDSERUNYNIRFQ1g0hEVDWDSERUNYNIRFQ1g0hEVDWDSERUNYNIRFQ1g0hEVDWDSERUNYNIRFQ1g0hEVDWDSERUNYNIRFQ1g0hEVDWDSERUNYNIRFQ1g0hEVDSESvFS34jK5yYWSmLudTgTpPVSVamvMpQpqnKlw6dDmf5QB5qsKlQ5fzWQ6Qp6rddYhyPgvB8lT755krfM5nCWSe6pyzXwo+GQXO+SyBzFMdY/SSd7uTOZ8lwHmq+77XpO2SOZ8l8HmqNaLhnE8dujzVyl0HlvMpRZSnKnmZgjrnU4Q0T1XyMgV1zqcCdZ6qMDJTl/MpQrojUt3rWKudE2meqrDp1nKtrnax2b0uFg1h0RAWDWHREBYNYdEQFg1h0RAWDWHREBYNYdEQFg1h0RAWDWHREBYNYdEQFg0hFL3W0xXS5ypaa78A+zg9ngAQ62UAAAAASUVORK5CYII='));
+  background: var(--theme-light, #eee) url('img/Transparent-checkerboard-pattern-low-contrast.svg');
   background-attachment: fixed;
 }
 #sub-body {
@@ -5005,7 +5005,7 @@ div#activity-feed-tutorial.no-content p.tleft {
   text-decoration: underline;
 }
 .messages .post.my {
-  background-color: #e6fbff;
+  background-color: #eee;
 }
 button.msg-update {
   padding: 4px 4px 4px;
@@ -6296,10 +6296,10 @@ h2.label-topic_post .label-topic_post-msgid {
   border-top: 1px solid #dddddd;
 }
 #reply-content .list .my {
-  background-color: #e6fbff;
+  background-color: var(--theme-light, #e6fbff);
 }
 #reply-content .list > li.my:hover {
-  background-color: #c7f6ff;
+  background-color: var(--theme-light, #c7f6ff);
 }
 .reply-list .icon-container {
   width: 50px;

static/img/Transparent-checkerboard-pattern-low-contrast.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg1"
+   width="120"
+   height="120"
+   viewBox="0 0 120 120"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="g1"
+     transform="scale(0.75)">
+    <path
+       id="rect2"
+       style="fill:#000000;fill-opacity:0.07;stroke:none;stroke-width:0.990462;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+       d="M 10,0 0,9.9991163 V 70.835845 l 10,9.999116 H 70 L 80,70.835845 V 9.9991163 L 70,0 Z m 80,80.834961 -10,9.999117 v 60.836732 l 10,9.99911 h 60 l 10,-9.99911 V 90.834078 l -10,-9.999117 z"
+       transform="scale(1,0.98967079)" />
+  </g>
+</svg>

static/img/Transparent-checkerboard-pattern.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg1"
+   width="120"
+   height="120"
+   viewBox="0 0 120 120"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="g1"
+     transform="scale(0.75)">
+    <path
+       id="rect2"
+       style="fill:#000000;fill-opacity:0.15;stroke:none;stroke-width:0.990462;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
+       d="M 10,0 0,9.9991163 V 70.835845 l 10,9.999116 H 70 L 80,70.835845 V 9.9991163 L 70,0 Z m 80,80.834961 -10,9.999117 v 60.836732 l 10,9.99911 h 60 l 10,-9.99911 V 90.834078 l -10,-9.999117 z"
+       transform="scale(1,0.98967079)" />
+  </g>
+</svg>