4 files changed, 56 insertions, 1 deletions
diff --git a/styles/index.css b/styles/index.css
index 8ba12a6..fcda8e0 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -3,7 +3,6 @@
 }
 
 .loginOrRegisterBox {
-	vertical-align: top;
 	height: calc(var(--squareSize) + 2 * var(--spacing-large));
 	width: 100%;
 	max-width: calc(100% - var(--squareSize) - var(--spacing-medium) * 2 - var(--spacing-large) * 2);
diff --git a/styles/settings.css b/styles/settings.css
new file mode 100644
index 0000000..bcce5b5
--- /dev/null
+++ b/styles/settings.css
@@ -0,0 +1,8 @@
+.section.logout .button {
+	float: unset;
+}
+
+.subsection {
+	margin-top: var(--spacing-large);
+	min-height: 40px;
+}
diff --git a/styles/ui.css b/styles/ui.css
index f1d65e2..b8cd44c 100644
--- a/styles/ui.css
+++ b/styles/ui.css
@@ -19,3 +19,49 @@
 	font-weight: 600;
 }
 
+.button.iconlabel,
+.button.colorpicker {
+	margin-left: var(--spacing-medium);
+}
+
+.button.colorpicker {
+	--color: var(--gray-100);
+	--background: #ff00ff;
+
+	background-color: var(--background);
+	color: var(--color);
+	border-width: 2px;
+	border-style: solid;
+	border-color: var(--color);
+}
+
+.button.iconlabel .label {
+	margin: 3px;
+	margin-left: 8px;
+}
+
+.button.colorpicker .labelwrapper {
+	width: 150px;
+	height: 24px;
+}
+
+.button.colorpicker .labelwrapper .label {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	font-feature-settings: "tnum", "ss01";
+}
+
+.bubble {
+	margin: 0;
+	overflow: visible;
+	left: 50%;
+	top: -24px;
+	transform: translateY(-100%) translateX(-50%);
+}
+
+.bubble .tuitje {
+	bottom: -12px;
+	transform: translate(-50%, 0%) rotate(0deg);
+}
diff --git a/styles/utility.css b/styles/utility.css
index 783b168..f8954cd 100644
--- a/styles/utility.css
+++ b/styles/utility.css
@@ -37,6 +37,8 @@
 
 .center { text-align: center; }
 
+.floatr { float: right; }
+
 .subtile {
 	color: var(--gray-600);
 	font-style: italic;