user page without inline css :tada:

3 files changed, 50 insertions, 16 deletions

diff --git a/styles/global.css b/styles/global.css
index b6ed028..f70b6bd 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -141,19 +141,3 @@ input::placeholder {
 /* material-ui default state */
 svg.MuiSvgIcon-root { transition: none !important; }
 
-/* editable field status */
-*[contenteditable] { border-color: var(--background-alt); }
-*[contenteditable="true"]:focus { border-color: var(--disk-a); }
-*[contenteditable="true"] {
-	background-color: var(--page-background);
-	color: var(--text-alt);
-	padding: 6px;
-	border-radius: 6px;
-	border-style: solid;
-	border-width: 2px;
-}
-
-.outcome.win { color: var(--disk-a-alt); }
-.outcome.lose { color: var(--disk-b-alt); }
-.outcome.draw { color: var(--gray-600); }
-
diff --git a/styles/user.css b/styles/user.css
new file mode 100644
index 0000000..d66fa94
--- /dev/null
+++ b/styles/user.css
@@ -0,0 +1,46 @@
+.infosection .inner {
+	height: 64px;
+}
+
+/* editable field status */
+*[contenteditable] {
+	box-shadow: inset 0 0 0 0px var(--foreground);
+}
+*[contenteditable="true"]:focus {
+	box-shadow: inset 0 0 0 2px var(--accent);
+}
+*[contenteditable="true"] {
+	background-color: var(--background);
+	color: var(--text-alt);
+	padding: 8px;
+	box-shadow: inset 0 0 0 2px var(--foreground);
+}
+
+.accountHeader .userInfo {
+	margin-left: var(--spacing-medium);
+	width: calc(100% - 128px - var(--spacing-medium));
+}
+
+.accountHeader .userInfo .username {
+	font-size: 2rem;
+}
+
+.accountHeader .userInfo .status {
+	transition-duration: .3s;
+	margin-top: var(--spacing-small);
+}
+
+.infoModule .iconWrapper {
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+.infoModule .labelWrapper {
+	top: calc(24px + var(--spacing-small));
+}
+
+.infoModule .labelWrapper .label {
+	top: 50%;
+	transform: translateY(-50%);
+}
+
diff --git a/styles/utility.css b/styles/utility.css
index 7f5ebbd..be982f8 100644
--- a/styles/utility.css
+++ b/styles/utility.css
@@ -18,6 +18,10 @@
 .fg-100 { color: var(--gray-100); }
 .fg-900 { color: var(--gray-900); }
 
+.outcome.win { color: var(--disk-a-alt); }
+.outcome.lose { color: var(--disk-b-alt); }
+.outcome.draw { color: var(--gray-600); }
+
 .posabs { position: absolute; }
 .posrel { position: relative; }
 .posfix { position: fixed; }