web-a2e 1.0.0

package/src/css/modals.css

@@ -0,0 +1,510 @@
+/* Apple //e Emulator - Modal & Overlay Styles
+   Modals, loading overlay, power reminder, floating reminders
+*/
+
+/* Loading overlay */
+#loading {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--glass-bg-solid);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-lg);
+    z-index: 1000;
+    backdrop-filter: blur(8px);
+}
+
+#loading.hidden {
+    display: none;
+}
+
+.loader {
+    position: relative;
+    width: 60px;
+    height: 60px;
+}
+
+.loader-ring {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border: 3px solid transparent;
+    border-top-color: var(--accent-green);
+    border-radius: 50%;
+    animation: spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+}
+
+.loader-ring:nth-child(1) {
+    animation-delay: -0.45s;
+}
+
+.loader-ring:nth-child(2) {
+    width: 75%;
+    height: 75%;
+    top: 12.5%;
+    left: 12.5%;
+    border-top-color: var(--accent-blue);
+    animation-delay: -0.3s;
+}
+
+.loader-ring:nth-child(3) {
+    width: 50%;
+    height: 50%;
+    top: 25%;
+    left: 25%;
+    border-top-color: var(--accent-purple);
+    animation-delay: -0.15s;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+#loading p {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+    animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+    0%,
+    100% {
+        opacity: 0.6;
+    }
+    50% {
+        opacity: 1;
+    }
+}
+
+/* Power reminder */
+.power-reminder {
+    position: fixed;
+    z-index: 10001;
+    pointer-events: none;
+    animation:
+        reminderFloat 3s ease-in-out infinite,
+        fadeIn 0.5s ease-out;
+}
+
+.power-reminder.hidden {
+    display: none;
+}
+
+.reminder-content {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+    background: linear-gradient(135deg, var(--reminder-bg-start) 0%, var(--reminder-bg-end) 100%);
+    border: 1px solid var(--accent-blue);
+    border-radius: var(--radius-lg);
+    padding: var(--space-md) var(--space-lg);
+    box-shadow:
+        0 4px 24px rgba(88, 166, 255, 0.3),
+        0 0 40px rgba(88, 166, 255, 0.1),
+        inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+.reminder-icon {
+    font-size: 1.75rem;
+    animation: iconPulse 2s ease-in-out infinite;
+}
+
+.reminder-text {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.reminder-title {
+    font-size: 0.9375rem;
+    font-weight: 600;
+    color: var(--accent-blue);
+}
+
+.reminder-hint {
+    font-size: 0.8125rem;
+    color: var(--text-secondary);
+}
+
+.reminder-hint strong {
+    color: var(--accent-green);
+}
+
+.reminder-arrow {
+    position: absolute;
+    top: -10px;
+    left: var(--arrow-left, 100px);
+    margin-left: -10px;
+    width: 0;
+    height: 0;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-bottom: 10px solid var(--accent-blue);
+}
+
+.reminder-arrow::after {
+    content: "";
+    position: absolute;
+    top: 2px;
+    left: -9px;
+    width: 0;
+    height: 0;
+    border-left: 9px solid transparent;
+    border-right: 9px solid transparent;
+    border-bottom: 9px solid var(--reminder-bg-start);
+}
+
+@keyframes reminderFloat {
+    0%,
+    100% {
+        transform: translateY(0) rotate(-0.5deg);
+    }
+    25% {
+        transform: translateY(-5px) rotate(0.3deg);
+    }
+    50% {
+        transform: translateY(-2px) rotate(0.5deg);
+    }
+    75% {
+        transform: translateY(-7px) rotate(-0.3deg);
+    }
+}
+
+@keyframes iconPulse {
+    0%,
+    100% {
+        transform: scale(1);
+        filter: brightness(1);
+    }
+    50% {
+        transform: scale(1.1);
+        filter: brightness(1.3);
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Floating reminders (resize, drives toggle) */
+.floating-reminder {
+    position: fixed;
+    z-index: 10001;
+    pointer-events: none;
+    animation:
+        reminderFloat 3s ease-in-out infinite,
+        fadeIn 0.5s ease-out;
+}
+
+.floating-reminder.hidden {
+    display: none;
+}
+
+.floating-reminder .reminder-content {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    background: linear-gradient(135deg, var(--reminder-bg-start) 0%, var(--reminder-bg-end) 100%);
+    border: 1px solid var(--accent-blue);
+    border-radius: var(--radius-md);
+    padding: var(--space-sm) var(--space-md);
+    box-shadow:
+        0 4px 24px rgba(88, 166, 255, 0.3),
+        0 0 40px rgba(88, 166, 255, 0.1),
+        inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+.floating-reminder .reminder-text {
+    display: flex;
+    flex-direction: column;
+}
+
+.floating-reminder .reminder-hint {
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+    white-space: nowrap;
+}
+
+.floating-reminder .reminder-hint strong {
+    color: var(--accent-green);
+}
+
+/* Arrow pointing up (default) */
+.floating-reminder .reminder-arrow {
+    position: absolute;
+    top: -10px;
+    left: var(--arrow-left, 50%);
+    margin-left: -10px;
+    width: 0;
+    height: 0;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-bottom: 10px solid var(--accent-blue);
+}
+
+.floating-reminder .reminder-arrow::after {
+    content: "";
+    position: absolute;
+    top: 2px;
+    left: -9px;
+    width: 0;
+    height: 0;
+    border-left: 9px solid transparent;
+    border-right: 9px solid transparent;
+    border-bottom: 9px solid var(--reminder-bg-start);
+}
+
+/* Arrow pointing down-left (for bottom-right corner target) */
+.floating-reminder .reminder-arrow.arrow-bottom-right {
+    top: auto;
+    bottom: -10px;
+    left: auto;
+    right: 15px;
+    margin-left: 0;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-bottom: none;
+    border-top: 10px solid var(--accent-blue);
+}
+
+.floating-reminder .reminder-arrow.arrow-bottom-right::after {
+    top: auto;
+    bottom: 2px;
+    left: -9px;
+    border-bottom: none;
+    border-top: 9px solid var(--reminder-bg-start);
+}
+
+/* Modal styles - using native <dialog> element */
+dialog.modal {
+    border: none;
+    padding: 0;
+    margin: auto;
+    background: transparent;
+    max-width: 90vw;
+    max-height: 90vh;
+}
+
+dialog.modal::backdrop {
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(4px);
+}
+
+/* Legacy div modal support (for backward compatibility) */
+div.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1001;
+}
+
+div.modal.hidden {
+    display: none;
+}
+
+.modal-backdrop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(4px);
+}
+
+.modal-content {
+    position: relative;
+    background: var(--bg-medium);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+    min-width: 360px;
+    max-width: 90vw;
+    animation: modalSlideIn 0.2s ease-out;
+}
+
+@keyframes modalSlideIn {
+    from {
+        opacity: 0;
+        transform: translateY(-20px) scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+.modal-header {
+    padding: var(--space-md) var(--space-lg);
+    border-bottom: 1px solid var(--border-default);
+}
+
+.modal-header h3 {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin: 0;
+}
+
+.modal-body {
+    padding: var(--space-lg);
+}
+
+.modal-body p {
+    color: var(--text-secondary);
+    font-size: 0.875rem;
+    margin-bottom: var(--space-md);
+    line-height: 1.5;
+}
+
+.modal-input-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+}
+
+.modal-input-group label {
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+}
+
+.modal-input-group input {
+    padding: var(--space-sm) var(--space-md);
+    background: var(--bg-dark);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-md);
+    color: var(--text-primary);
+    font-family: var(--font-mono);
+    font-size: 0.875rem;
+    transition: all 0.2s;
+}
+
+.modal-input-group input:focus {
+    outline: none;
+    border-color: var(--accent-blue);
+    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15);
+}
+
+.modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--space-sm);
+    padding: var(--space-md) var(--space-lg);
+    border-top: 1px solid var(--border-default);
+    background: var(--bg-light);
+    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+}
+
+.modal-btn {
+    padding: var(--space-sm) var(--space-lg);
+    border-radius: var(--radius-md);
+    font-family: var(--font-sans);
+    font-size: 0.8125rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.modal-btn-secondary {
+    background: transparent;
+    border: 1px solid var(--border-default);
+    color: var(--text-secondary);
+}
+
+.modal-btn-secondary:hover {
+    background: var(--bg-panel);
+    border-color: var(--text-muted);
+    color: var(--text-primary);
+}
+
+.modal-btn-primary {
+    background: var(--accent-green-dim);
+    border: 1px solid var(--accent-green);
+    color: var(--accent-green);
+}
+
+.modal-btn-primary:hover {
+    background: var(--accent-green);
+    color: white;
+}
+
+/* Toast notifications */
+.toast-container {
+    position: fixed;
+    top: var(--space-lg);
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 100000;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-sm);
+    pointer-events: none;
+}
+
+.toast {
+    pointer-events: auto;
+    cursor: pointer;
+    padding: var(--space-sm) var(--space-lg);
+    border-radius: var(--radius-md);
+    font-family: var(--font-sans);
+    font-size: 0.8125rem;
+    font-weight: 500;
+    line-height: 1.4;
+    max-width: 420px;
+    text-align: center;
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    box-shadow: var(--shadow-lg);
+    opacity: 0;
+    transform: translateY(-12px);
+    transition: opacity 0.25s ease, transform 0.25s ease;
+}
+
+.toast-visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.toast-info {
+    background: var(--glass-bg);
+    border: 1px solid var(--accent-blue);
+    color: var(--accent-blue);
+}
+
+.toast-warning {
+    background: var(--glass-bg);
+    border: 1px solid var(--accent-orange);
+    color: var(--accent-orange);
+}
+
+.toast-error {
+    background: var(--glass-bg);
+    border: 1px solid var(--accent-red);
+    color: var(--accent-red);
+}