fix: scope button styles to exclude js-dos emulator buttons
Build & Deploy / build-and-deploy (push) Successful in 47s
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:
+10
-9
@@ -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 */
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user