web-a2e 1.0.0

package/src/css/disk-drives.css

@@ -0,0 +1,406 @@
+/* Apple //e Emulator - Disk Drive Styles
+   Disk drive UI components
+*/
+
+/* Allow recent dropdown to render outside the window bounds */
+#disk-drives.debug-window {
+    overflow: visible;
+}
+
+/* Content area: don't shrink or clip — window height follows content */
+#disk-drives.debug-window .debug-window-content {
+    overflow: visible;
+    flex-shrink: 0;
+}
+
+/* Disk drives row inside window content */
+.disk-drives-row {
+    display: flex;
+    gap: var(--space-md);
+    width: 100%;
+    padding: var(--space-sm);
+}
+
+.disk-drive {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+    min-width: 0;
+}
+
+/* Vertical separator between the two drives */
+.disk-drive + .disk-drive {
+    border-left: 1px solid var(--border-default);
+    padding-left: var(--space-md);
+}
+
+.drive-image-container {
+    width: 100%;
+    position: relative;
+}
+
+.disk-surface {
+    display: block;
+    width: 100%;
+    height: auto;
+    aspect-ratio: 280 / 240;
+    border-radius: var(--radius-sm);
+}
+
+.drive-info {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: var(--space-xs) 6px;
+    min-width: 0;
+    background: var(--input-bg);
+    border-radius: var(--radius-sm);
+}
+
+.drive-label {
+    position: absolute;
+    top: 6px;
+    left: 8px;
+    font-family: var(--font-mono);
+    font-size: 0.875rem;
+    font-weight: 700;
+    color: var(--disk-label-color);
+    pointer-events: none;
+    z-index: 1;
+}
+
+.disk-name {
+    font-size: 0.6875rem;
+    color: var(--text-primary);
+    font-family: var(--font-mono);
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1;
+    min-width: 0;
+}
+
+.disk-name .disk-name-text {
+    display: inline-block;
+    white-space: nowrap;
+}
+
+.disk-name.scrolling .disk-name-text {
+    animation: disk-name-scroll var(--scroll-duration, 4s) ease-in-out infinite
+        alternate;
+}
+
+@keyframes disk-name-scroll {
+    0%,
+    15% {
+        transform: translateX(0);
+    }
+    85%,
+    100% {
+        transform: translateX(var(--scroll-distance, 0px));
+    }
+}
+
+.disk-track {
+    font-size: 0.6875rem;
+    color: var(--text-primary);
+    font-family: var(--font-mono);
+    font-weight: 600;
+    background: var(--overlay-white-10);
+    padding: 1px 4px;
+    border-radius: 3px;
+    min-width: 28px;
+    text-align: center;
+    flex-shrink: 0;
+}
+
+.disk-track.active {
+    color: var(--accent-orange);
+    background: rgba(255, 100, 50, 0.25);
+    box-shadow: 0 0 4px rgba(255, 100, 50, 0.4);
+}
+
+.drive-controls {
+    display: flex;
+    gap: var(--space-xs);
+}
+
+.disk-insert,
+.disk-blank,
+.disk-eject,
+.disk-recent,
+.disk-browse {
+    flex: 1;
+    padding: var(--space-xs) var(--space-sm);
+    background: var(--control-bg-solid);
+    border: 1px solid var(--control-border);
+    border-radius: var(--radius-sm);
+    color: var(--text-secondary);
+    font-family: var(--font-sans);
+    font-size: 0.6875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.1s;
+}
+
+.disk-insert:hover,
+.disk-blank:hover,
+.disk-eject:hover:not(:disabled),
+.disk-browse:hover:not(:disabled) {
+    background: var(--control-bg-hover);
+    color: var(--text-primary);
+}
+
+.disk-blank:hover {
+    background: var(--accent-blue-bg-strong);
+    border-color: var(--accent-blue-border);
+    color: var(--accent-blue);
+}
+
+.disk-eject:hover:not(:disabled) {
+    background: var(--accent-orange-bg-strong);
+    border-color: var(--accent-orange-border-stronger);
+    color: var(--accent-orange);
+}
+
+.disk-eject:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+.disk-browse:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+/* Recent disks button and dropdown */
+.recent-container {
+    position: relative;
+    display: flex;
+    flex: 1;
+}
+
+.disk-recent:hover {
+    background: var(--control-bg-hover);
+    border-color: var(--accent-green-border);
+    color: var(--accent-green);
+}
+
+.recent-dropdown {
+    display: none;
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+    min-width: 250px;
+    margin-bottom: 4px;
+    background: var(--bg-panel);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-sm);
+    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
+    z-index: 1000;
+}
+
+.recent-dropdown.open {
+    display: block;
+}
+
+.recent-item {
+    padding: var(--space-sm) var(--space-md);
+    font-family: var(--font-mono);
+    font-size: 0.8125rem;
+    color: var(--text-secondary);
+    cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    border-bottom: 1px solid var(--border-subtle);
+    transition: background 0.15s;
+}
+
+.recent-item:last-child {
+    border-bottom: none;
+}
+
+.recent-item:hover:not(.empty) {
+    background: var(--bg-light);
+    color: var(--text-primary);
+}
+
+.recent-item.empty {
+    color: var(--text-muted);
+    font-style: italic;
+    cursor: default;
+}
+
+.recent-separator {
+    height: 1px;
+    background: var(--border-default);
+    margin: var(--space-xs) 0;
+}
+
+.recent-item.recent-clear {
+    color: var(--text-muted);
+    text-align: center;
+}
+
+.recent-section-label {
+    padding: var(--space-xs) var(--space-md);
+    font-family: var(--font-sans);
+    font-size: 0.625rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--text-muted);
+    cursor: default;
+}
+
+.recent-item.recent-clear:hover {
+    color: var(--error);
+    background: var(--bg-light);
+}
+
+/* Scrollbar styling for dropdown */
+.recent-dropdown::-webkit-scrollbar {
+    width: 6px;
+}
+
+.recent-dropdown::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.recent-dropdown::-webkit-scrollbar-thumb {
+    background: var(--border-default);
+    border-radius: 3px;
+}
+
+.recent-dropdown::-webkit-scrollbar-thumb:hover {
+    background: var(--text-muted);
+}
+
+/* Graphics toggle button in window header */
+.drive-graphics-btn {
+    display: grid;
+    place-items: center;
+    width: 22px;
+    height: 22px;
+    background: transparent;
+    border: 1px solid transparent;
+    color: var(--text-muted);
+    cursor: pointer;
+    margin-left: auto;
+    margin-right: 6px;
+    border-radius: var(--radius-sm);
+    opacity: 0.5;
+    transition: opacity 0.15s, color 0.15s, background 0.15s, border-color 0.15s;
+}
+
+.drive-graphics-btn:hover {
+    opacity: 1;
+    color: var(--text-primary);
+    background: var(--overlay-hover);
+    border-color: var(--overlay-white-10);
+}
+
+.drive-graphics-btn.active {
+    opacity: 1;
+    color: var(--accent-green);
+    background: var(--accent-green-bg);
+    border-color: var(--accent-green-border-light);
+}
+
+.drive-graphics-btn.active:hover {
+    background: var(--accent-green-bg-strong);
+    border-color: var(--accent-green-border);
+}
+
+/* Detail toggle button in window header */
+.drive-detail-btn {
+    display: grid;
+    place-items: center;
+    width: 22px;
+    height: 22px;
+    background: transparent;
+    border: 1px solid transparent;
+    color: var(--text-muted);
+    cursor: pointer;
+    margin-right: 6px;
+    border-radius: var(--radius-sm);
+    opacity: 0.5;
+    transition: opacity 0.15s, color 0.15s, background 0.15s, border-color 0.15s;
+}
+
+.drive-detail-btn:hover {
+    opacity: 1;
+    color: var(--text-primary);
+    background: var(--overlay-hover);
+    border-color: var(--overlay-white-10);
+}
+
+.drive-detail-btn.active {
+    opacity: 1;
+    color: var(--accent-green);
+    background: var(--accent-green-bg);
+    border-color: var(--accent-green-border-light);
+}
+
+.drive-detail-btn.active:hover {
+    background: var(--accent-green-bg-strong);
+    border-color: var(--accent-green-border);
+}
+
+/* Hide graphics mode — collapse disk surface canvases */
+.hide-graphics .drive-image-container {
+    display: none;
+}
+
+/* Disable vertical resize handles when graphics are hidden */
+#disk-drives:has(.hide-graphics) > .debug-resize-handle.n,
+#disk-drives:has(.hide-graphics) > .debug-resize-handle.s,
+#disk-drives:has(.hide-graphics) > .debug-resize-handle.ne,
+#disk-drives:has(.hide-graphics) > .debug-resize-handle.nw,
+#disk-drives:has(.hide-graphics) > .debug-resize-handle.se,
+#disk-drives:has(.hide-graphics) > .debug-resize-handle.sw {
+    cursor: default;
+    pointer-events: none;
+}
+
+/* Detail panels — hidden by default */
+.drive-detail-panel {
+    display: none;
+}
+
+.show-details .drive-detail-panel {
+    display: block;
+}
+
+.drive-detail-grid {
+    display: grid;
+    grid-template-columns: auto 1fr auto 1fr;
+    gap: 2px 6px;
+    padding: var(--space-xs) 6px;
+    background: var(--input-bg);
+    border-radius: var(--radius-sm);
+    font-size: 0.625rem;
+    font-family: var(--font-mono);
+}
+
+.dd-label {
+    color: var(--text-muted);
+    font-weight: 500;
+    white-space: nowrap;
+}
+
+.dd-val {
+    color: var(--text-secondary);
+    font-weight: 500;
+    text-align: right;
+}
+
+.dd-val.on {
+    color: var(--accent-green);
+}
+
+.dd-val.write {
+    color: var(--accent-orange);
+}
+