beginnings of theme settings

2 files changed, 52 insertions, 1 deletions

diff --git a/styles/notifications.css b/styles/notifications.css
index 02170ae..3ab92e7 100644
--- a/styles/notifications.css
+++ b/styles/notifications.css
@@ -15,8 +15,9 @@ a.notificationsArea .tuitje {
 	left: var(--spacing-medium);
 	bottom: 86px;
 	transform: translate(-100%, 100%) rotate(90deg);
-	fill: var(--gray-700);
+	fill: var(--gray-800);
 }
+html.dark a.notificationsArea .tuitje { fill: var(--gray-700); }
 
 .notificationsArea .title {
 	margin-bottom: var(--spacing-large);
diff --git a/styles/themepicker.css b/styles/themepicker.css
new file mode 100644
index 0000000..4bac49d
--- /dev/null
+++ b/styles/themepicker.css
@@ -0,0 +1,50 @@
+.themeCardWrapper {
+	margin: var(--spacing-medium);
+}
+
+.themeCard {
+	background-color: var(--bg);
+	border-width: 2px;
+	border-style: solid;
+	border-color: var(--fg);
+	text-align: left;
+
+	transition-duration: .1s;
+	transition-property: transform, box-shadow;
+
+	height: 20px;
+	width: 170px;
+}
+
+.themeCard:active {
+	box-shadow: 0;
+	transform: translateY(2px);
+}
+
+.themeCard .name {
+	color: var(--fg);
+	margin-left: var(--spacing-small);
+}
+
+.themeCard .disks {
+	background-color: var(--fg);
+	width: 64px;
+
+}
+
+.themeCard .disks .disk {
+	border-radius: 9999999px;
+	width: 24px;
+
+	top: 4px;
+	bottom: 4px;
+}
+
+.themeCard .disks .disk.a {
+	background-color: var(--a);
+	right: 4px;
+} 
+.themeCard .disks .disk.b {
+	background-color: var(--b);
+	left: 6px;
+}