someone-in-the-world Claude Sonnet 4.6 commited on
Commit
4e9d506
Β·
1 Parent(s): 06e0622

Fix Swap Faces and Download buttons to match dark amber theme

Browse files

Browser 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>

Files changed (1) hide show
  1. 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:linear-gradient(135deg,#292400,#361f00);
185
- color:#9a7c2e!important;-webkit-text-fill-color:#9a7c2e!important;
 
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}