feat: design cyber glassmorphism sign-in page with 3D banner logo and glowing card
This commit is contained in:
eldov
@@ -565,3 +565,192 @@ footer a, .ui.footer a {
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(0, 242, 254, 0.75);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
13. PREMIUM CYBER SIGN-IN & AUTHENTICATION (Glassmorphism Card)
|
||||
========================================================================== */
|
||||
.page-content.user.signin {
|
||||
min-height: calc(100vh - 160px) !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
padding: 30px 16px !important;
|
||||
}
|
||||
|
||||
.cyber-auth-container {
|
||||
width: min(540px, 94vw);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 20px auto;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.cyber-auth-logo-wrapper {
|
||||
margin-bottom: 24px;
|
||||
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.cyber-auth-logo-wrapper:hover {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
.cyber-auth-logo {
|
||||
width: min(480px, 86vw);
|
||||
height: auto;
|
||||
max-height: 95px;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 0 25px rgba(0, 242, 254, 0.45));
|
||||
}
|
||||
|
||||
.cyber-auth-card {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background: rgba(11, 17, 33, 0.88) !important;
|
||||
backdrop-filter: blur(28px) saturate(190%) !important;
|
||||
-webkit-backdrop-filter: blur(28px) saturate(190%) !important;
|
||||
border: 1px solid rgba(0, 242, 254, 0.28) !important;
|
||||
border-radius: 24px !important;
|
||||
box-shadow:
|
||||
0 25px 60px -15px rgba(0, 0, 0, 0.8),
|
||||
0 0 35px rgba(0, 242, 254, 0.18),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
|
||||
padding: 40px 44px !important;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
|
||||
}
|
||||
|
||||
.cyber-auth-card:hover {
|
||||
border-color: rgba(0, 242, 254, 0.45) !important;
|
||||
box-shadow:
|
||||
0 30px 70px -15px rgba(0, 0, 0, 0.85),
|
||||
0 0 45px rgba(0, 242, 254, 0.25),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
|
||||
}
|
||||
|
||||
/* Glowing Top Accent Line */
|
||||
.cyber-auth-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #00f2fe 0%, #38bdf8 50%, #10b981 100%);
|
||||
box-shadow: 0 0 15px #00f2fe;
|
||||
}
|
||||
|
||||
/* Reset default Semantic UI attached segments inside cyber card */
|
||||
.cyber-auth-card .ui.attached.header,
|
||||
.cyber-auth-card .ui.attached.segment {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.cyber-auth-card h4.ui.top.attached.header {
|
||||
font-size: 1.8rem !important;
|
||||
font-weight: 700 !important;
|
||||
text-align: center !important;
|
||||
background: linear-gradient(135deg, #ffffff 40%, #94a3b8 100%) !important;
|
||||
-webkit-background-clip: text !important;
|
||||
-webkit-text-fill-color: transparent !important;
|
||||
margin-bottom: 24px !important;
|
||||
letter-spacing: -0.02em !important;
|
||||
}
|
||||
|
||||
/* Form Fields */
|
||||
.cyber-auth-card .field {
|
||||
margin-bottom: 22px !important;
|
||||
}
|
||||
|
||||
.cyber-auth-card .field label {
|
||||
display: block !important;
|
||||
font-size: 0.85rem !important;
|
||||
font-weight: 600 !important;
|
||||
text-transform: uppercase !important;
|
||||
letter-spacing: 0.05em !important;
|
||||
color: #cbd5e1 !important;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
.cyber-auth-card .ui.form input[type="text"],
|
||||
.cyber-auth-card .ui.form input[type="password"] {
|
||||
width: 100% !important;
|
||||
background: rgba(6, 10, 22, 0.75) !important;
|
||||
border: 1px solid rgba(148, 163, 184, 0.25) !important;
|
||||
border-radius: 12px !important;
|
||||
color: #ffffff !important;
|
||||
padding: 14px 18px !important;
|
||||
font-size: 1rem !important;
|
||||
transition: all 0.25s ease !important;
|
||||
outline: none !important;
|
||||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
|
||||
}
|
||||
|
||||
.cyber-auth-card .ui.form input[type="text"]:focus,
|
||||
.cyber-auth-card .ui.form input[type="password"]:focus {
|
||||
border-color: #00f2fe !important;
|
||||
background: rgba(6, 10, 22, 0.95) !important;
|
||||
box-shadow: 0 0 0 3px rgba(0, 242, 254, 0.25), inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
|
||||
}
|
||||
|
||||
/* Primary Submit Button */
|
||||
.cyber-auth-card button.ui.primary.button {
|
||||
width: 100% !important;
|
||||
margin-top: 10px !important;
|
||||
padding: 15px !important;
|
||||
font-size: 1.05rem !important;
|
||||
font-weight: 800 !important;
|
||||
border-radius: 12px !important;
|
||||
background: linear-gradient(135deg, #00f2fe 0%, #10b981 100%) !important;
|
||||
color: #020617 !important;
|
||||
box-shadow: 0 4px 20px rgba(0, 242, 254, 0.4) !important;
|
||||
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
|
||||
cursor: pointer !important;
|
||||
letter-spacing: 0.02em !important;
|
||||
}
|
||||
|
||||
.cyber-auth-card button.ui.primary.button:hover {
|
||||
transform: translateY(-2px) scale(1.01) !important;
|
||||
box-shadow: 0 8px 30px rgba(0, 242, 254, 0.6) !important;
|
||||
filter: brightness(1.15) !important;
|
||||
color: #000000 !important;
|
||||
}
|
||||
|
||||
/* Checkbox & Inline Field */
|
||||
.cyber-auth-card .inline.field .ui.checkbox label {
|
||||
color: #cbd5e1 !important;
|
||||
font-size: 0.92rem !important;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
/* Secondary Registration Box Below Card */
|
||||
.cyber-auth-card + .ui.container,
|
||||
.cyber-auth-card .ui.attached.segment.header.top {
|
||||
margin-top: 24px !important;
|
||||
padding-top: 20px !important;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.cyber-auth-card .ui.attached.segment.header.top span {
|
||||
color: #94a3b8 !important;
|
||||
font-size: 0.95rem !important;
|
||||
}
|
||||
|
||||
.cyber-auth-card .ui.attached.segment.header.top a {
|
||||
color: #00f2fe !important;
|
||||
font-weight: 600 !important;
|
||||
margin-left: 6px !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.cyber-auth-card .ui.attached.segment.header.top a:hover {
|
||||
color: #38bdf8 !important;
|
||||
text-shadow: 0 0 8px rgba(56, 189, 248, 0.6) !important;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
{{template "base/head" .}}
|
||||
<div role="main" aria-label="{{.Title}}" class="page-content user signin{{if .LinkAccountMode}} icon{{end}}">
|
||||
<div class="cyber-auth-container">
|
||||
|
||||
<!-- Floating Brand Banner Above Card -->
|
||||
<div class="cyber-auth-logo-wrapper">
|
||||
<a href="/" title="Home">
|
||||
<img class="cyber-auth-logo" src="/assets/img/gitea_banner_logo.png" alt="gitea.free-warez.win">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Glassmorphism Card -->
|
||||
<div class="cyber-auth-card">
|
||||
{{template "user/auth/signin_inner" .}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{{template "base/footer" .}}
|
||||
Reference in New Issue
Block a user