From 0eb57482d0ab9855c13d0698fb409aa8fe6674a9 Mon Sep 17 00:00:00 2001
From: none <none>
Date: Mon, 29 Jan 2024 01:39:57 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9D=D0=BE=D0=B2=D0=BE=D0=B5=20=D0=BE=D1=84?=
 =?UTF-8?q?=D0=BE=D1=80=D0=BC=D0=BB=D0=B5=D0=BD=D0=B8=D0=B5!=20=D0=A1?=
 =?UTF-8?q?=D0=BF=D0=B0=D1=81=D0=B8=D0=B1=D0=BE=20=D1=85=D0=BE=D1=81=D1=82?=
 =?UTF-8?q?=D1=83=20=D0=A0=D0=B0=D0=B4=D0=B8=D1=83=D0=BC=D0=B0=20=D0=B7?=
 =?UTF-8?q?=D0=B0=20=D0=BF=D0=BE=D0=BC=D0=BE=D1=89=D1=8C.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/style.css | 28 ++++++++++++++++++++++++++++
 site.py          | 24 +++++++++++++++++-------
 2 files changed, 45 insertions(+), 7 deletions(-)
 create mode 100644 assets/style.css

diff --git a/assets/style.css b/assets/style.css
new file mode 100644
index 0000000..5a5e4d6
--- /dev/null
+++ b/assets/style.css
@@ -0,0 +1,28 @@
+body {
+	background-color: #242829;
+}
+
+.Select {
+	background-color: rgb(27, 29, 30);
+	color: #fff;
+}
+
+.Select .Select-value {
+	background-color: rgb(27, 29, 30);
+}
+
+.Select-control {
+  background-color: rgb(25, 25, 25) !important;
+	color: #fff;
+}
+
+.Select-menu-outer {
+	background-color: rgb(27, 29, 30);
+	color: #fff;
+	border-radius: 10;
+}
+
+
+.has-value.Select--single>.Select-control .Select-value .Select-value-label, .has-value.is-pseudo-focused.Select--single>.Select-control .Select-value .Select-value-label{
+	color: white
+}
diff --git a/site.py b/site.py
index 6cb1ef0..5bad8d6 100644
--- a/site.py
+++ b/site.py
@@ -19,14 +19,20 @@ def list_form(ll):
 					'chemicals': '🧪'}
 
 	for i in ll:
+		if type(i) == int:
+			formatted.append(i)
 		#print(db[i][1])
-		if db[i][1] in imgs:
+		elif db[i][1] in imgs:
+#			formatted.append({"label": html.Span(f"{imgs[db[i][1]]} {i}", style={'background-color': 'rgb(27, 29, 30)', 'color': 'rgb(0,0,0)'}),
+#			'value': f"{imgs[db[i][1]]} {i}"})
+#			formatted.append(html.P(f"{imgs[db[i][1]]} {i}", style={'background-color': 'rgb(27, 29, 30)', 'color': 'rgb(0,0,0)'}))
 			formatted.append(imgs[db[i][1]] + ' ' + i)
 		else:
 			formatted.append(i)
 
 	return formatted
 
+# 'background-color': 'rgb(27, 29, 30)', 'color': 'rgb(255,255,255)'
 
 app.layout = html.Div([
 
@@ -34,14 +40,15 @@ app.layout = html.Div([
 html.Div([
 	# Реакция
 	html.Div([
-		dcc.Dropdown(list_form(els), id='reaction', placeholder="Реакция", maxHeight=500, style={'font-size': '120%'})
+		dcc.Dropdown(list_form(els), id='reaction', placeholder="Реакция", maxHeight=500,
+		style={'font-size': '120%'}) #, 'background-color': 'rgb(27, 29, 30)'})
 	], style={'flex': 4}),
 
 	# Объём
 	html.Div([
-		dcc.Dropdown([30, 50, 100, 300, 1000], 100, id='amount', clearable=False, searchable=False
-			, style={'font-family': '"Source Sans Pro", sans-serif', 'font-size': '120%'})
-	], style={'flex': 1, 'padding-left': 25})
+		dcc.Dropdown(list_form([30, 50, 100, 300, 1000]), 100, id='amount', clearable=False, searchable=False
+			, style={'font-family': '"Source Sans Pro", sans-serif', 'font-size': '120%'}) #, 'background-color': 'rgb(27, 29, 30)'})
+	], style={'flex': 1, 'padding-left': 25}) #, 'background-color': 'rgb(27, 29, 30)'})
 
 ], style={'display': 'flex', 'flexDirection': 'row'}),
 
@@ -50,6 +57,9 @@ html.Div([
 
 ], style={'padding': '5%', 'margin-left': '30%', 'margin-right': '30%'})
 
+# vh - высота окна, vw - ширина окна
+#
+# 'background-color': '#242829',
 # padding - отступ
 #    [#####]
 # margin - сужение
@@ -78,11 +88,11 @@ def update_output(reaction, amount):
 		result = []
 		for i in comps:
 			result.append( html.Div(i + ': ' + str(comps[i])
-, style={'background-color': '#3f3b17', 'margin-top': 10, 'border-radius': 10, 'padding': 15, 'font-family': '"Source Sans Pro", sans-serif', 'font-size': '120%'}) )
+, style={'background-color': 'rgb(213, 193, 86)', 'color': '#ffffff', 'margin-top': 10, 'border-radius': 10, 'padding': 15, 'font-family': '"Source Sans Pro", sans-serif', 'font-size': '120%'}) )
 
 		# Выходное вещество
 		result.append( html.Div(f'{reaction}: {res}'
-, style={'background-color': '#183929', 'margin-top': 10, 'border-radius': 10, 'padding': 15, 'font-family': '"Source Sans Pro", sans-serif', 'font-size': '120%'}) )
+, style={'background-color': 'rgb(61, 164, 113)', 'color': '#ffffff', 'margin-top': 10, 'border-radius': 10, 'padding': 15, 'font-family': '"Source Sans Pro", sans-serif', 'font-size': '120%'}) )
 
 
 		return result