Spaces:
Running on Zero
Running on Zero
Commit Β·
4e9d506
1
Parent(s): 06e0622
Fix Swap Faces and Download buttons to match dark amber theme
Browse filesBrowser UA stylesheet was overriding custom CSS on disabled/button
elements. Added appearance:none resets and !important guards so the
themed amber styles render correctly instead of browser-default gray.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- static/app.css +7 -3
static/app.css
CHANGED
|
@@ -174,6 +174,7 @@ footer{display:none!important}
|
|
| 174 |
color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;
|
| 175 |
transition:all .2s ease;letter-spacing:-.2px;
|
| 176 |
box-shadow:0 4px 16px rgba(217,119,6,.4),inset 0 1px 0 rgba(255,255,255,.1);
|
|
|
|
| 177 |
}
|
| 178 |
.btn-run:hover:not(:disabled){
|
| 179 |
background:linear-gradient(135deg,#b45309,#f59e0b);transform:translateY(-1px);
|
|
@@ -181,11 +182,13 @@ footer{display:none!important}
|
|
| 181 |
}
|
| 182 |
.btn-run:active:not(:disabled){transform:translateY(0)}
|
| 183 |
.btn-run:disabled{
|
| 184 |
-
background:
|
| 185 |
-
|
|
|
|
| 186 |
cursor:not-allowed;box-shadow:none;
|
| 187 |
}
|
| 188 |
.btn-run svg{width:18px;height:18px;flex-shrink:0}
|
|
|
|
| 189 |
|
| 190 |
/* ββ Output frame βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
|
| 191 |
.output-frame{flex:1;display:flex;flex-direction:column}
|
|
@@ -203,9 +206,10 @@ footer{display:none!important}
|
|
| 203 |
.out-placeholder{color:#f59e0b;font-size:13px;text-align:center;padding:20px}
|
| 204 |
.out-download-btn{
|
| 205 |
display:none;align-items:center;gap:5px;padding:3px 10px;height:24px;
|
| 206 |
-
background:rgba(217,119,6,.15);border:1px solid rgba(217,119,6,.3);border-radius:6px;
|
| 207 |
color:#fbbf24!important;-webkit-text-fill-color:#fbbf24!important;
|
| 208 |
font-size:11px;font-weight:500;cursor:pointer;transition:all .15s;
|
|
|
|
| 209 |
}
|
| 210 |
.out-download-btn:hover{background:rgba(217,119,6,.3);color:#fff!important;-webkit-text-fill-color:#fff!important}
|
| 211 |
.out-download-btn.visible{display:inline-flex}
|
|
|
|
| 174 |
color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;
|
| 175 |
transition:all .2s ease;letter-spacing:-.2px;
|
| 176 |
box-shadow:0 4px 16px rgba(217,119,6,.4),inset 0 1px 0 rgba(255,255,255,.1);
|
| 177 |
+
-webkit-appearance:none;appearance:none;
|
| 178 |
}
|
| 179 |
.btn-run:hover:not(:disabled){
|
| 180 |
background:linear-gradient(135deg,#b45309,#f59e0b);transform:translateY(-1px);
|
|
|
|
| 182 |
}
|
| 183 |
.btn-run:active:not(:disabled){transform:translateY(0)}
|
| 184 |
.btn-run:disabled{
|
| 185 |
+
background:rgba(217,119,6,.12)!important;
|
| 186 |
+
border:1px solid rgba(217,119,6,.2);
|
| 187 |
+
color:#7a5c1e!important;-webkit-text-fill-color:#7a5c1e!important;
|
| 188 |
cursor:not-allowed;box-shadow:none;
|
| 189 |
}
|
| 190 |
.btn-run svg{width:18px;height:18px;flex-shrink:0}
|
| 191 |
+
.btn-run:disabled svg polygon{fill:#7a5c1e}
|
| 192 |
|
| 193 |
/* ββ Output frame βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
|
| 194 |
.output-frame{flex:1;display:flex;flex-direction:column}
|
|
|
|
| 206 |
.out-placeholder{color:#f59e0b;font-size:13px;text-align:center;padding:20px}
|
| 207 |
.out-download-btn{
|
| 208 |
display:none;align-items:center;gap:5px;padding:3px 10px;height:24px;
|
| 209 |
+
background:rgba(217,119,6,.15)!important;border:1px solid rgba(217,119,6,.3);border-radius:6px;
|
| 210 |
color:#fbbf24!important;-webkit-text-fill-color:#fbbf24!important;
|
| 211 |
font-size:11px;font-weight:500;cursor:pointer;transition:all .15s;
|
| 212 |
+
-webkit-appearance:none;appearance:none;
|
| 213 |
}
|
| 214 |
.out-download-btn:hover{background:rgba(217,119,6,.3);color:#fff!important;-webkit-text-fill-color:#fff!important}
|
| 215 |
.out-download-btn.visible{display:inline-flex}
|