zzstoatzz.io
interactive intro to open social
at-me.zzstoatzz.io
style: make login card background transparent
- make login card background fully transparent
- keep input field and button with solid backgrounds for visibility
- increase border opacity on input/button for better definition
- maintain backdrop blur for subtle effect
+10
-10
src/templates.rs
+10
-10
src/templates.rs
···
103
103
}
104
104
105
105
.login-card {
106
-
background: rgba(10, 10, 15, 0.8);
106
+
background: transparent;
107
107
border: 1px solid rgba(255, 255, 255, 0.1);
108
108
padding: 2.5rem 3rem;
109
109
border-radius: 8px;
110
-
backdrop-filter: blur(10px);
110
+
backdrop-filter: blur(2px);
111
111
text-align: center;
112
-
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
112
+
box-shadow: none;
113
113
}
114
114
115
115
h1 {
···
130
130
font-size: 0.9rem;
131
131
padding: 0.75rem 1rem;
132
132
margin-bottom: 1rem;
133
-
background: rgba(255, 255, 255, 0.05);
134
-
border: 1px solid rgba(255, 255, 255, 0.1);
133
+
background: rgba(10, 10, 15, 0.8);
134
+
border: 1px solid rgba(255, 255, 255, 0.2);
135
135
border-radius: 4px;
136
136
color: #e5e5e5;
137
137
width: 100%;
···
141
141
142
142
input:focus {
143
143
outline: none;
144
-
border-color: rgba(255, 255, 255, 0.3);
145
-
background: rgba(255, 255, 255, 0.08);
144
+
border-color: rgba(255, 255, 255, 0.4);
145
+
background: rgba(10, 10, 15, 0.9);
146
146
}
147
147
148
148
input::placeholder {
···
154
154
font-size: 0.9rem;
155
155
padding: 0.75rem 2rem;
156
156
cursor: pointer;
157
-
background: rgba(255, 255, 255, 0.1);
157
+
background: rgba(10, 10, 15, 0.8);
158
158
border: 1px solid rgba(255, 255, 255, 0.2);
159
159
border-radius: 4px;
160
160
color: #e5e5e5;
···
163
163
}
164
164
165
165
button:hover {
166
-
background: rgba(255, 255, 255, 0.15);
167
-
border-color: rgba(255, 255, 255, 0.3);
166
+
background: rgba(10, 10, 15, 0.9);
167
+
border-color: rgba(255, 255, 255, 0.4);
168
168
}
169
169
170
170
.hidden { display: none; }