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

- 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:
2026-06-14 13:05:41 +02:00
committed by Hermes Agent
parent f919ca0fe8
commit 3a81e75d2a
+10 -9
View File
@@ -98,8 +98,8 @@ h3 { font-size: 1.2rem; }
/* ═══════════════════════════════════════════════════════════════
BUTTONS
═══════════════════════════════════════════════════════════════ */
/* Double-class selector to win specificity against js-dos DaisyUI .btn */
.btn.btn {
/* Only targets DOStalgia buttons, not js-dos emulator buttons inside .dos-container */
.btn.btn:not(.dos-container .btn) {
display: inline-flex;
align-items: center;
gap: 8px;
@@ -114,33 +114,34 @@ h3 { font-size: 1.2rem; }
cursor: pointer;
text-transform: none;
height: auto;
min-height: 0;
line-height: normal;
transition: all 0.15s ease;
}
.btn.btn:hover {
.btn.btn:not(.dos-container .btn):hover {
background: var(--phosphor-burn);
border-color: var(--phosphor);
box-shadow: 0 0 12px var(--phosphor-dark);
}
.btn.btn:active {
.btn.btn:not(.dos-container .btn):active {
transform: scale(0.97);
}
.btn-primary.btn-primary {
.btn-primary.btn-primary:not(.dos-container .btn) {
background: var(--phosphor-dark);
border-color: var(--phosphor);
color: var(--phosphor-glow);
}
.btn-primary.btn-primary:hover {
.btn-primary.btn-primary:not(.dos-container .btn):hover {
background: var(--phosphor-dim);
color: var(--bg);
}
.btn-danger.btn-danger {
.btn-danger.btn-danger:not(.dos-container .btn) {
border-color: #cc3333;
color: #cc3333;
}
.btn-danger.btn-danger:hover {
.btn-danger.btn-danger:not(.dos-container .btn):hover {
background: #331111;
border-color: #ff4444;
color: #ff4444;
@@ -191,7 +192,7 @@ input::placeholder {
@media (max-width: 640px) {
h1 { font-size: 1.5rem; }
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 */
}