implement login

1 files changed, 42 insertions, 27 deletions

diff --git a/static/pages/login/index.css b/static/pages/login/index.css
index 8a59d83..aa6726e 100644
--- a/static/pages/login/index.css
+++ b/static/pages/login/index.css
@@ -12,12 +12,52 @@
 	transform: translate(-50%, -50%);
 	max-width: 300px;
 	width: 100%;
-	padding: 20px;
+	padding: 0px;
 	box-shadow: #223223aa 1px 1px 4px;
 	border-radius: var(--border-radius);
+	z-index: 2000;
+	display: grid;
+	grid-template-columns: auto 30px;
 	background: #ffffff99;
 	backdrop-filter: blur(10px);
-	z-index: 2000;
+}
+
+#box input {
+	border-top-right-radius: 0px;
+	border-bottom-right-radius: 0px;
+	background: #0000;
+}
+
+#box button {
+	border-top-left-radius: 0px;
+	border-bottom-left-radius: 0px;
+	background: var(--page-background);
+	color: var(--fg);
+	padding: 5px;
+	background: #0000;
+}
+
+#username {
+	position: absolute;
+	top: calc(50% - 40px);
+	left: 50%;
+	transform: translate(-50%, -50%);
+	z-index: 10000;
+	user-select: none;
+	color: var(--fg-primary);
+	font-size: 0.8em;
+	cursor: pointer;
+}
+#comment {
+	position: absolute;
+	top: calc(50% + 40px);
+	left: 50%;
+	transform: translate(-50%, -50%);
+	z-index: 10000;
+	user-select: none;
+	color: var(--primary);
+	font-size: 0.8em;
+	cursor: pointer;
 }
 
 #title {
@@ -88,31 +128,6 @@
 	z-index: -2;
 	animation: right-bubble 1s normal forwards ease;
 }
-
-#form {
-	display: grid;
-	grid-template-columns: 100px auto;
-	max-width: 300px;
-	width: 100%;
-	margin: 0;
-	margin-bottom: 20px;
-	border-radius: 3px;
-	gap: 10px;
-}
-
-#form input {
-	width: 100%;
-}
-
-#form label {
-	margin: auto 0px;
-	font-weight: bold;
-}
-
-button {
-	width: 100%;
-}
-
 #subtitle {
 	position: absolute;
 	bottom: 50px;