improve input styling, utility class handling, font weigh for width calc,

This commit is contained in:
Face
2025-08-19 09:11:04 +03:00
parent a8313ec3d8
commit 1761b05899
9 changed files with 259 additions and 28 deletions

View File

@@ -22,27 +22,27 @@
}
.container {
bg-[#262626] p-6 rounded-lg shadow-lg max-w-6xl mx-auto
bg-[#262626] p-6 rounded-lg shadow-lg max-w-6xl
}
.primary-btn {
px-4 py-2 rounded-lg font-medium cursor-pointer transition-colors bg-[#dc2626] text-white
p-3 rounded-lg font-medium cursor-pointer transition-colors bg-[#dc2626] text-white
}
.success-btn {
px-4 py-2 rounded-lg font-medium cursor-pointer transition-colors bg-[#ef4444] text-white
p-3 rounded-lg font-medium cursor-pointer transition-colors bg-[#ef4444] text-white
}
.danger-btn {
px-4 py-2 rounded-lg font-medium cursor-pointer transition-colors bg-[#b91c1c] text-white
p-3 rounded-lg font-medium cursor-pointer transition-colors bg-[#b91c1c] text-white
}
.secondary-btn {
px-4 py-2 rounded-lg font-medium cursor-pointer transition-colors bg-[#525252] text-white w-32 h-12
p-3 rounded-lg font-medium cursor-pointer transition-colors bg-[#525252] text-white w-32 h-12
}
.warning-btn {
px-4 py-2 rounded-lg font-medium cursor-pointer transition-colors bg-[#dc2626] text-white
p-3 rounded-lg font-medium cursor-pointer transition-colors bg-[#dc2626] text-white
}
.form-group {
@@ -50,11 +50,11 @@
}
.form-input {
w-full p-3 border border-gray-600 rounded-md bg-[#374151] text-white
w-full p-3 border border-gray-600 rounded-md bg-[#374151] text-white active:border-red-500
}
.card {
bg-[#262626] p-4 rounded-lg shadow border border-gray-700
bg-[#262626] p-6 rounded-lg shadow border border-gray-700
}
.stats-card {
@@ -103,7 +103,7 @@
</div>
<div style="card mb-6">
<h2>Register New Domain</h2>
<h2 style="mb-4">Register New Domain</h2>
<div style="form-group">
<p>Domain Name:</p>
<input id="domain-name" type="text" style="form-input" placeholder="myawesome" />

View File

@@ -7,8 +7,8 @@
<font name="roboto" src="https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBGEe.woff2" />
<style>
body { bg-[#1b1b1b] text-[#ffffff] font-roboto flex items-center justify-center p-4 }
.login-card { bg-[#2a2a2a] rounded-lg p-8 shadow-2xl mx-0 }
body { bg-[#2a2a2a] text-[#ffffff] font-roboto flex items-center justify-center p-4 }
.login-card { p-8 }
h1 { text-3xl font-bold text-center mb-6 text-[#ffffff] }
input {
bg-[#3b3b3b]
@@ -38,13 +38,12 @@
#log-output { text-white p-4 rounded-md mt-4 font-mono max-h-40 }
</style>
<script src="script.lua" />
</head>
<body>
<div style="login-card">
<h1>Login</h1>
<form id="login-form">
<form id="login-form" style="mx-auto">
<input id="username" type="text" placeholder="Username" required="true" />
<input id="password" type="password" placeholder="Password" required="true" />
<button type="submit" id="submit">Log In</button>