droideparanoico/dostalgia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: scope button styles to exclude js-dos emulator buttons
Build & Deploy / build-and-deploy (push) Successful in 47s
Details

Browse Source 
- Added :not(.dos-container .btn) to prevent our custom .btn styles
  from leaking into js-dos's own DaisyUI buttons inside the emulator
- Added min-height:0 override for DaisyUI's default min-height on buttons
- The emulator's Upload button keeps its native js-dos appearance
This commit is contained in:
droideparanoico
2026-06-14 13:05:41 +02:00
committed by Hermes Agent
parent f919ca0fe8
commit 3a81e75d2a
1 changed files with 10 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app.css
+10 -9
View File
@@ -98,8 +98,8 @@ h3 { font-size: 1.2rem; }
/* ═══════════════════════════════════════════════════════════════ /* ═══════════════════════════════════════════════════════════════
BUTTONS BUTTONS
═══════════════════════════════════════════════════════════════ */ ═══════════════════════════════════════════════════════════════ */
/* Double-class selector to win specificity against js-dos DaisyUI .btn */ /* Only targets DOStalgia buttons, not js-dos emulator buttons inside .dos-container */
.btn.btn { .btn.btn:not(.dos-container .btn) {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
@@ -114,33 +114,34 @@ h3 { font-size: 1.2rem; }
cursor: pointer; cursor: pointer;
text-transform: none; text-transform: none;
height: auto; height: auto;
min-height: 0;
line-height: normal; line-height: normal;
transition: all 0.15s ease; transition: all 0.15s ease;
} }
.btn.btn:hover { .btn.btn:not(.dos-container .btn):hover {
background: var(--phosphor-burn); background: var(--phosphor-burn);
border-color: var(--phosphor); border-color: var(--phosphor);
box-shadow: 0 0 12px var(--phosphor-dark); box-shadow: 0 0 12px var(--phosphor-dark);
} }
.btn.btn:active { .btn.btn:not(.dos-container .btn):active {
transform: scale(0.97); transform: scale(0.97);
} }
.btn-primary.btn-primary { .btn-primary.btn-primary:not(.dos-container .btn) {
background: var(--phosphor-dark); background: var(--phosphor-dark);
border-color: var(--phosphor); border-color: var(--phosphor);
color: var(--phosphor-glow); color: var(--phosphor-glow);
} }
.btn-primary.btn-primary:hover { .btn-primary.btn-primary:not(.dos-container .btn):hover {
background: var(--phosphor-dim); background: var(--phosphor-dim);
color: var(--bg); color: var(--bg);
} }
.btn-danger.btn-danger { .btn-danger.btn-danger:not(.dos-container .btn) {
border-color: #cc3333; border-color: #cc3333;
color: #cc3333; color: #cc3333;
} }
.btn-danger.btn-danger:hover { .btn-danger.btn-danger:not(.dos-container .btn):hover {
background: #331111; background: #331111;
border-color: #ff4444; border-color: #ff4444;
color: #ff4444; color: #ff4444;
@@ -191,7 +192,7 @@ input::placeholder {
@media (max-width: 640px) { @media (max-width: 640px) {
h1 { font-size: 1.5rem; } h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; } h2 { font-size: 1.25rem; }
.btn.btn { padding: 8px 14px; font-size: 0.85rem; min-height: 40px; } .btn.btn:not(.dos-container .btn) { padding: 8px 14px; font-size: 0.85rem; min-height: 40px; }
input, textarea, select { font-size: 16px; } /* prevents iOS zoom */ input, textarea, select { font-size: 16px; } /* prevents iOS zoom */
} }