From 93063516ce5a43d76c132f1788a2d4f540cd6d6e Mon Sep 17 00:00:00 2001
From: Aevann1 <randomname42029@gmail.com>
Date: Wed, 7 Dec 2022 19:53:29 +0200
Subject: [PATCH] tie transparent theme to backgrounds

---
 chat/src/App.css                           |  4 +--
 files/assets/css/4chan.css                 |  6 ++--
 files/assets/css/classic.css               | 18 +++++-----
 files/assets/css/classic_dark.css          |  4 +--
 files/assets/css/coffee.css                |  2 +-
 files/assets/css/dark.css                  |  2 +-
 files/assets/css/dramblr.css               | 10 +++---
 files/assets/css/light.css                 |  2 +-
 files/assets/css/main.css                  | 24 ++++++-------
 files/assets/css/midnight.css              |  2 +-
 files/assets/css/rDrama.css                |  7 ----
 files/assets/css/transparent.css           |  4 +--
 files/assets/css/tron.css                  |  2 +-
 files/assets/css/win98.css                 |  2 +-
 files/assets/offline.html                  |  4 +--
 files/helpers/const.py                     |  2 +-
 files/routes/settings.py                   |  3 --
 files/templates/comments.html              |  2 +-
 files/templates/log.html                   |  3 ++
 files/templates/userpage/userpage.html     |  1 +
 files/templates/util/html_head.html        | 42 +++++++++++-----------
 migrations/20221207-transparent-rework.sql |  2 ++
 22 files changed, 70 insertions(+), 78 deletions(-)
 delete mode 100644 files/assets/css/rDrama.css
 create mode 100644 migrations/20221207-transparent-rework.sql

diff --git a/chat/src/App.css b/chat/src/App.css
index 8db6beac7..8096b0548 100644
--- a/chat/src/App.css
+++ b/chat/src/App.css
@@ -69,7 +69,7 @@ body {
 .App-drawer {
   z-index: 2;
   display: flex;
-  background: var(--background);
+  background: rgb(var(--background));
   height: 100%;
 }
 
@@ -135,4 +135,4 @@ lite-youtube {
 .btn-secondary:focus {
   border: none !important;
   box-shadow: none !important;
-}
\ No newline at end of file
+}
diff --git a/files/assets/css/4chan.css b/files/assets/css/4chan.css
index c2d8970e3..e3dfc5ada 100644
--- a/files/assets/css/4chan.css
+++ b/files/assets/css/4chan.css
@@ -17,7 +17,7 @@
 	--gray-700: #F0E0D6;
 	--gray-800: #F0E0D6;
 	--gray-900: #F0E0D6;
-	--background: #F0E0D6;
+	--background: 240, 224, 214;
 }
 
 .text-muted {
@@ -83,7 +83,7 @@ blockquote p {
 }
 
 .comment {
-	background-color: var(--background) !important;
+	background-color: rgb(var(--background)) !important;
 }
 
 .navbar-light, .navbar .container-fluid, #mobile-bottom-navigation-bar {
@@ -119,7 +119,7 @@ blockquote a {
 }
 
 .srd {
-	background-color: var(--background) !important;
+	background-color: rgb(var(--background)) !important;
 }
 
 .srd a {
diff --git a/files/assets/css/classic.css b/files/assets/css/classic.css
index d22027b0f..190008d0d 100644
--- a/files/assets/css/classic.css
+++ b/files/assets/css/classic.css
@@ -2,16 +2,16 @@
 :root {
 	--muted: #666;
 	--black: #444;
-	--bgc: white;
 	--primary: #b40457;
 	--grey: #888;
 	--upvote: #ff8b60;
 	--downvote: #9393ff;
 	--sticky: #228822;
+	--background: 255, 255, 255;
 }
 
 .container {
-	background-color: var(--bgc) !important;
+	background-color: rgb(var(--background)) !important;
 }
 
 #frontpage .container, #thread .container {
@@ -27,7 +27,7 @@
 }
 
 .sidebar {
-	background-color: var(--bgc);
+	background-color: rgb(var(--background));
 	border-radius: 0px;
 	margin-top: 0;
 	margin-right: 0;
@@ -38,7 +38,7 @@
 }
 
 #mobile-bottom-navigation-bar, .navbar {
-	background-color: var(--bgc) !important;
+	background-color: rgb(var(--background)) !important;
 }
 
 .btn-primary {
@@ -47,7 +47,7 @@
 }
 
 .dropdown-menu {
-	background-color: var(--bgc);
+	background-color: rgb(var(--background));
 }
 
 .dropdown-item i {
@@ -55,7 +55,7 @@
 }
 
 input, textarea, .form-control {
-	background-color: var(--bgc) !important;
+	background-color: rgb(var(--background)) !important;
 	border: 1px solid;
 }
 
@@ -90,7 +90,7 @@ input, textarea, .form-control {
 }
 
 .tooltip {
-	background-color: var(--bgc);
+	background-color: rgb(var(--background));
 }
 
 a {
@@ -145,7 +145,7 @@ a.btn-block[href~="/submit"] {
 }
 
 .modal-content {
-	background-color: var(--bgc);
+	background-color: rgb(var(--background));
 }
 
 #frontpage .post-title a:not(:visited) {
@@ -165,7 +165,7 @@ a.btn-block[href~="/submit"] {
 }
 
 .comment-section, .comment {
-	background-color: var(--bgc);
+	background-color: rgb(var(--background));
 }
 
 blockquote {
diff --git a/files/assets/css/classic_dark.css b/files/assets/css/classic_dark.css
index 84000507c..f37e87f21 100644
--- a/files/assets/css/classic_dark.css
+++ b/files/assets/css/classic_dark.css
@@ -1,7 +1,5 @@
-@import 'classic.css?v=4031';
-
 :root {
 	--muted: #999;
 	--black: #999;
-	--bgc: #222;
+	--background: 34, 34, 34;
 }
diff --git a/files/assets/css/coffee.css b/files/assets/css/coffee.css
index fded876ba..e79f0351f 100644
--- a/files/assets/css/coffee.css
+++ b/files/assets/css/coffee.css
@@ -50,7 +50,7 @@
 	--gray-700: #DDD2C4;
 	--gray-800: #DDD2C4;
 	--gray-900: #DDD2C4;
-	--background: #DDD2C4;
+	--background: 221, 210, 196;
 }
 
 
diff --git a/files/assets/css/dark.css b/files/assets/css/dark.css
index 43a5167b2..0c4cb7873 100644
--- a/files/assets/css/dark.css
+++ b/files/assets/css/dark.css
@@ -17,7 +17,7 @@
 	--gray-700: #000000;
 	--gray-800: #000000;
 	--gray-900: #000000;
-	--background: #000000;
+	--background: 0, 0, 0;
 }
 
 * {
diff --git a/files/assets/css/dramblr.css b/files/assets/css/dramblr.css
index 39f3725a5..eed53de89 100644
--- a/files/assets/css/dramblr.css
+++ b/files/assets/css/dramblr.css
@@ -12,7 +12,7 @@
 	--gray-700: #2d3c50;
 	--gray-800: #1e293b;
 	--gray-900: #0f172a;
-	--background: #2d3c50;
+	--background: 45, 60, 80;
 }
 
 .container.transparent, .card {
@@ -20,7 +20,7 @@
 }
 
 .navbar-light {
-	background-color: var(--background) !important
+	background-color: rgb(var(--background)) !important
 }
 
 p {
@@ -32,7 +32,7 @@ p {
 }
 
 blockquote {
-	background-color: var(--background);
+	background-color: rgb(var(--background));
 }
 
 #frontpage #main-content-row {
@@ -65,7 +65,7 @@ blockquote {
 }
 
 #mobile-bottom-navigation-bar {
-	background-color: var(--background) !important;
+	background-color: rgb(var(--background)) !important;
 	border-color: var(--gray-600) !important;
 }
 
@@ -122,7 +122,7 @@ blockquote {
 }
 
 .modal-content {
-	background-color: var(--background)
+	background-color: rgb(var(--background))
 }
 
 .tooltip{
diff --git a/files/assets/css/light.css b/files/assets/css/light.css
index a083d65f8..3a70af306 100644
--- a/files/assets/css/light.css
+++ b/files/assets/css/light.css
@@ -18,7 +18,7 @@
 	--gray-200: #1e1e1e;
 	--white: #1e1e1e;
 	--black: #262b32;
-	--background: #ffffff;
+	--background: 255, 255, 255;
 }
 
 * {
diff --git a/files/assets/css/main.css b/files/assets/css/main.css
index ae0770449..0c64e83a8 100644
--- a/files/assets/css/main.css
+++ b/files/assets/css/main.css
@@ -1986,7 +1986,7 @@ button.close {
 	vertical-align: middle !important;
 }
 .bg-background {
-	background-color: var(--background);
+	background-color: rgb(var(--background));
 }
 .bg-primary {
 	background-color: var(--primary) !important;
@@ -2647,7 +2647,7 @@ html {
 }
 body {
 	color: var(--black);
-	background-color: var(--background);
+	background-color: rgb(var(--background));
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 }
@@ -2666,14 +2666,14 @@ pre {
 	background-color: var(--gray-600);
 }
 #page {
-	background-color: var(--background);
+	background-color: rgb(var(--background));
 }
 #article {
 	padding-top: 0;
-	background-color: var(--background);
+	background-color: rgb(var(--background));
 }
 #thread, #userpage {
-	background-color: var(--background);
+	background-color: rgb(var(--background));
 }
 #article .navbar-light .navbar-nav .nav-link {
 	color: var(--black);
@@ -3479,7 +3479,7 @@ small, .small {
 	background-color: var(--gray-900);
 }
 #thread .card {
-	background-color: var(--background);
+	background-color: rgb(var(--background));
 }
 #frontpage .posts .card:first-of-type, #userpage .posts .card:first-of-type, #search .posts .card:first-of-type {
 	border-top-left-radius: 0.35rem;
@@ -3832,7 +3832,7 @@ small, .small {
 	font-size: 1rem;
 }
 .comment-section {
-	background-color: var(--background);
+	background-color: rgb(var(--background));
 }
 .comment p {
 	word-break: break-word;
@@ -4284,7 +4284,7 @@ pre .com, code .com {
 		max-width: none;
 }
 	body, #settings, #notifications, #submit {
-		background-color: var(--background);
+		background-color: rgb(var(--background));
 }
 	#thread, #userpage {
 		background-color: var(--gray-600);
@@ -4622,7 +4622,7 @@ span.green {
 	border: 1px solid var(--primary);
 	padding: 10px;
 	border-radius: 3px;
-	background-color: var(--background) !important;
+	background-color: rgb(var(--background)) !important;
 }
 .text-info {
 	color: var(--primary) !important;
@@ -4636,10 +4636,10 @@ span.green {
 	color: black !important;
 }
 .container, .container-fluid {
-	background-color: var(--background) !important;
+	background-color: rgb(var(--background)) !important;
 }
 .btn {
-	background-color: var(--background) !important;
+	background-color: rgb(var(--background)) !important;
 }
 .nobackground {
 	background: None !important;
@@ -5612,7 +5612,7 @@ audio, video {
 	padding: 5px 5px 4px 5px;
 	text-align: center;
 	color: var(--muted);
-	background-color: var(--background);
+	background-color: rgb(var(--background));
 	box-shadow: 0 0 0 1px var(--primary);
 }
 
diff --git a/files/assets/css/midnight.css b/files/assets/css/midnight.css
index 7fed6352d..1bbe8ccc5 100644
--- a/files/assets/css/midnight.css
+++ b/files/assets/css/midnight.css
@@ -17,7 +17,7 @@
 	--gray-700: #21262d;
 	--gray-800: #161b22;
 	--gray-900: #0d1117;
-	--background: #21262d;
+	--background: 28, 34, 41;
 }
 
 
diff --git a/files/assets/css/rDrama.css b/files/assets/css/rDrama.css
deleted file mode 100644
index dfde27d55..000000000
--- a/files/assets/css/rDrama.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.mod:before {
-	content: '(((';
-}
-
-.mod:after {
-	content: ')))';
-}
diff --git a/files/assets/css/transparent.css b/files/assets/css/transparent.css
index bf1dd964e..dcb67d09a 100644
--- a/files/assets/css/transparent.css
+++ b/files/assets/css/transparent.css
@@ -7,11 +7,11 @@
 }
 
 .container, #userpage > div.container-fluid, #root > div.App {
-	background: rgba(28, 34, 41, 0.90) !important;
+	background: rgba(var(--background), 0.9) !important;
 }
 
 .fixed-bottom, .popover, .modal-content, .dropdown-menu, .navbar, body, .form-control, #speed-carot-modal {
-	background-color: #21262d !important;
+	background-color: rgb(var(--background)) !important;
 }
 
 .App-side, .flaggers, .comment-section {
diff --git a/files/assets/css/tron.css b/files/assets/css/tron.css
index c1e8baa31..2f4b5e699 100644
--- a/files/assets/css/tron.css
+++ b/files/assets/css/tron.css
@@ -162,7 +162,7 @@
 	--gray-700: #00001f;
 	--gray-800: #00001f;
 	--gray-900: #00001f;
-	--background: #00001f;
+	--background: 0, 0, 31;
 }
 
 
diff --git a/files/assets/css/win98.css b/files/assets/css/win98.css
index 963a7a85b..1697826d7 100644
--- a/files/assets/css/win98.css
+++ b/files/assets/css/win98.css
@@ -17,7 +17,7 @@
 	--gray-700: #c0c0c0;
 	--gray-800: #07090A;
 	--gray-900: #000000;
-	--background: #c0c0c0;
+	--background: 192, 192, 192;
 }
 
 
diff --git a/files/assets/offline.html b/files/assets/offline.html
index e6067c4a4..2b2ab3776 100644
--- a/files/assets/offline.html
+++ b/files/assets/offline.html
@@ -8,7 +8,7 @@
 		}
 
 		body {
-			background: var(--background);
+			background: rgb(var(--background));
 		}
 
 		.center {
@@ -37,7 +37,7 @@
 		}
 
 		.button {
-			background-color: var(--background)!important; 
+			background-color: rgb(var(--background))!important; 
 			background: 0 0;
 			font-weight: 600;
 			font-size: 1rem;
diff --git a/files/helpers/const.py b/files/helpers/const.py
index bbddceeda..acceb1ea3 100644
--- a/files/helpers/const.py
+++ b/files/helpers/const.py
@@ -200,7 +200,7 @@ WPD_CHANNEL_ID = 1013990963846332456
 UNDER_SIEGE_CHANNEL_ID = 1041917843094110239
 PIN_AWARD_TEXT = " (pin award)"
 
-THEMES = ["4chan","classic","classic_dark","coffee","dark","dramblr","light","midnight","transparent","tron","win98"]
+THEMES = ["4chan","classic","classic_dark","coffee","dark","dramblr","light","midnight","tron","win98"]
 BACKGROUND_CATEGORIES = ["glitter", "anime", "fantasy", "solarpunk", "pixelart"]
 COMMENT_SORTS = ["hot", "new", "old", "top", "bottom", "controversial"]
 SORTS = COMMENT_SORTS + ["bump", "comments"]
diff --git a/files/routes/settings.py b/files/routes/settings.py
index dd598a94f..2a5481c9e 100644
--- a/files/routes/settings.py
+++ b/files/routes/settings.py
@@ -43,7 +43,6 @@ def remove_background(v):
 		if v.background.startswith('/images/'):
 			os.remove(v.background)
 		v.background = None
-		if v.theme == 'transparent': v.theme = 'midnight'
 		g.db.add(v)
 	return {"message": "Background removed!"}
 
@@ -321,8 +320,6 @@ def settings_personal_post(v):
 	theme = request.values.get("theme")
 	if not updated and theme:
 		if theme in THEMES:
-			if theme == "transparent" and not v.background: 
-				abort(409, "You need to set a background to use the transparent theme")
 			v.theme = theme
 			if theme == "win98": v.themecolor = "30409f"
 			updated = True
diff --git a/files/templates/comments.html b/files/templates/comments.html
index deed36fbf..e0b34cc2a 100644
--- a/files/templates/comments.html
+++ b/files/templates/comments.html
@@ -885,7 +885,7 @@
 	<div id="viewmore-{{offset}}"><button type="button" id="viewbtn" class="btn btn-primary" onclick="viewmore({{pid}},'{{sort}}',{{offset}},{{ids}})">VIEW MORE COMMENTS</a></div>
 {% endif %}
 
-{% if SITE_NAME == 'rDrama' and not request.headers.get("xhr") and v and 'SamsungBrowser' not in g.agent and v.theme != 'transparent' %}
+{% if SITE_NAME == 'rDrama' and not request.headers.get("xhr") and v and 'SamsungBrowser' not in g.agent %}
 	<div id="detection" style="display:none;background-color:canvas;color-scheme:light"></div>
 	<script>
 		const detectionDiv = document.querySelector('#detection');
diff --git a/files/templates/log.html b/files/templates/log.html
index 7ee238d3c..bd9cbef50 100644
--- a/files/templates/log.html
+++ b/files/templates/log.html
@@ -4,6 +4,9 @@
 {% if v %}
 	<style>:root{--primary:#{{v.themecolor}}}</style>
 	<link rel="stylesheet" href="{{'css/main.css' | asset}}">
+	{% if v.theme == 'classic_dark' %}
+		<link rel="stylesheet" href="{{('css/classic.css') | asset}}">
+	{% endif %}
 	<link rel="stylesheet" href="{{('css/'~v.theme~'.css') | asset}}">
 	{% if v.agendaposter %}
 		<style>
diff --git a/files/templates/userpage/userpage.html b/files/templates/userpage/userpage.html
index 643d71ac8..a6158d34d 100644
--- a/files/templates/userpage/userpage.html
+++ b/files/templates/userpage/userpage.html
@@ -3,6 +3,7 @@
 {% block pagetitle %}@{{u.username}}'s profile{% endblock %}
 {% block head_final %}
 	{% if u and u.profile_background %}
+		<link rel="stylesheet" href="{{('css/transparent.css') | asset}}">
 		<style>
 			body {
 				background-image: url('{{u.profile_background}}') !important;
diff --git a/files/templates/util/html_head.html b/files/templates/util/html_head.html
index 521fbeb30..4f60b25af 100644
--- a/files/templates/util/html_head.html
+++ b/files/templates/util/html_head.html
@@ -105,7 +105,6 @@
 {% endmacro %}
 
 {% macro stylesheets(include_user_css) %}
-	{% set transparent = False %}
 	<link rel="stylesheet" href="{{'css/main.css' | asset}}">
 	<link id="favicon" rel="icon" type="image/webp" href="/icon.webp?v=1">
 	{% if v %}
@@ -118,9 +117,8 @@
 			</style>
 		{% endif %}
 		{% if include_user_css and not EVENT_STYLES %}
-			{% if v.theme == 'transparent' %}
-				{% set transparent = True %}
-				<link rel="stylesheet" href="{{('css/midnight.css') | asset}}">
+			{% if v.theme == 'classic_dark' %}
+				<link rel="stylesheet" href="{{('css/classic.css') | asset}}">
 			{% endif %}
 			<link rel="stylesheet" href="{{('css/'~v.theme~'.css') | asset}}">
 			{% if v.css and not request.path.startswith('/settings/css') %}
@@ -142,10 +140,6 @@
 		{{default_theme()}}
 	{% endif %}
 
-	{% if not transparent and '@' in request.path and u and u.profile_background %}
-		<link rel="stylesheet" href="{{('css/transparent.css') | asset}}">
-	{% endif %}
-
 	<link rel="stylesheet" href="{{'css/awards.css' | asset}}">
 
 	{% if sub and sub.css and not request.path.endswith('settings') and not request.values.get('nocss') %}
@@ -153,7 +147,14 @@
 	{% endif %}
 
 	{% if SITE_NAME == 'rDrama' %}
-		<link rel="stylesheet" href="{{'css/rDrama.css' | asset}}">
+		<style>
+			.mod:before {
+				content: '(((';
+			}
+			.mod:after {
+				content: ')))';
+			}			
+		</style>
 	{% endif %}
 
 	{% if EVENT_STYLES %}
@@ -172,21 +173,22 @@
 
 {% macro stylesheets_lower() %}
 	{% if not (request.path.startswith('/@') and u) %}
-		{% if SITE_NAME == 'rDrama' and (not v or v.is_banned or v.agendaposter) %}
-			{% set background = '/i/backgrounds/glitter/1.webp?v=4' %}
+		{% if SITE_NAME == 'rDrama' and v.agendaposter %}
+			{% set background = '/i/backgrounds/anime/1.webp?v=4' %}
 		{% elif v and v.background %}
 			{% set background = v.background %}
 		{% endif %}
 
 		{% if background %}
+			<link rel="stylesheet" href="{{('css/transparent.css') | asset}}">
 			<style>
-			body {
-				background:url("{{background}}") center center fixed;
-				background-color: var(--background);
-				{% if 'anime/' not in background and not background.startswith('/images/') -%}
-					background-size: cover;
-				{%- endif %}
-			}
+				body {
+					background:url("{{background}}") center center fixed;
+					background-color: rgb(var(--background));
+					{% if 'anime/' not in background and not background.startswith('/images/') -%}
+						background-size: cover;
+					{%- endif %}
+				}
 			</style>
 		{% endif %}
 	{% endif %}
@@ -194,10 +196,6 @@
 
 {% macro default_theme() %}
 	<style>:root{--primary:#{{DEFAULT_COLOR}}}</style>
-	{% if DEFAULT_THEME == 'transparent' %}
-		{% set transparent = True %}
-		<link rel="stylesheet" href="{{('css/midnight.css') | asset}}">
-	{% endif %}
 	<link rel="stylesheet" href="{{('css/'~DEFAULT_THEME~'.css') | asset}}">
 {% endmacro %}
 
diff --git a/migrations/20221207-transparent-rework.sql b/migrations/20221207-transparent-rework.sql
new file mode 100644
index 000000000..ac960339f
--- /dev/null
+++ b/migrations/20221207-transparent-rework.sql
@@ -0,0 +1,2 @@
+update users set theme='midnight' where theme='transparent';
+update users set background=null where background='/i/backgrounds/glitter/1.webp';