backend-infra-engineer: Post v0.3.9-hotfix7 snapshot (build cleanup)
This commit is contained in:
scawful
349
src/web/styles/collab_console.css
Normal file
349
src/web/styles/collab_console.css
Normal file
@@ -0,0 +1,349 @@
|
||||
/* Floating toggle button - hidden since it's now in header */
|
||||
.yaze-console-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.yaze-console-container {
|
||||
position: fixed;
|
||||
top: var(--header-height);
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 380px; /* Slightly wider */
|
||||
max-width: 90vw;
|
||||
z-index: 1990;
|
||||
background: var(--bg-panel);
|
||||
border-left: 1px solid var(--border-color);
|
||||
display: none;
|
||||
pointer-events: auto;
|
||||
box-shadow: -4px 0 24px rgba(0,0,0,0.5);
|
||||
display: flex; /* Prepare for toggle */
|
||||
flex-direction: column;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.yaze-console-container.active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
/* --- Chat Pane (Top) --- */
|
||||
.yaze-chat-pane {
|
||||
flex: 1 1 auto; /* Takes available space */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg-app);
|
||||
min-height: 0; /* Allow shrinking */
|
||||
}
|
||||
|
||||
.yaze-chat-header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
background: var(--bg-header);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.yaze-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--control-radius);
|
||||
padding: 4px 8px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.yaze-field .material-symbols-outlined {
|
||||
font-size: 16px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.yaze-field input {
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-ui);
|
||||
}
|
||||
|
||||
.yaze-field input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.yaze-chat-header select {
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
padding: 8px 12px;
|
||||
border-radius: var(--control-radius);
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--bg-input);
|
||||
color: var(--text-primary);
|
||||
height: 32px;
|
||||
font-family: var(--font-ui);
|
||||
}
|
||||
|
||||
.yaze-icon-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
padding: 8px 10px;
|
||||
border-radius: var(--control-radius);
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--bg-input);
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.yaze-icon-btn .material-symbols-outlined {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.yaze-icon-btn.primary {
|
||||
background: var(--accent-primary);
|
||||
border: none;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.yaze-icon-btn.subtle {
|
||||
background: var(--bg-panel);
|
||||
}
|
||||
|
||||
.yaze-icon-btn:hover {
|
||||
filter: brightness(1.05);
|
||||
}
|
||||
|
||||
/* Full width elements in grid */
|
||||
#yaze-server-url { grid-column: 1 / -1; }
|
||||
#yaze-session-code, #yaze-session-name { grid-column: 1 / -1; }
|
||||
#yaze-username, #yaze-password { grid-column: span 1; }
|
||||
#yaze-mode { grid-column: span 2; }
|
||||
#yaze-connect, #yaze-disconnect { grid-column: span 1; }
|
||||
#yaze-status { grid-column: 1 / -1; text-align: center; margin-top: 4px; }
|
||||
#yaze-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
justify-content: center;
|
||||
}
|
||||
#yaze-status .status-icon { font-size: 16px; }
|
||||
|
||||
.yaze-chat-body {
|
||||
flex: 1 1 auto;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
background: var(--bg-app);
|
||||
}
|
||||
|
||||
.yaze-msg {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.yaze-msg.chat {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.yaze-msg .meta {
|
||||
font-size: 11px;
|
||||
color: var(--text-accent);
|
||||
font-weight: 600;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.yaze-msg .text {
|
||||
background: var(--bg-input);
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
color: var(--text-primary);
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.yaze-msg.system {
|
||||
align-self: center;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
opacity: 0.7;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.yaze-msg.system .text {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 11px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.yaze-chat-input {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
background: var(--bg-header);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.yaze-chat-input textarea {
|
||||
flex: 1;
|
||||
height: 38px;
|
||||
min-height: 38px;
|
||||
max-height: 100px;
|
||||
resize: none;
|
||||
background: var(--bg-input);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 19px; /* Pill shape */
|
||||
padding: 8px 16px;
|
||||
font-size: 13px;
|
||||
font-family: var(--font-ui);
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.yaze-chat-input textarea:focus {
|
||||
border-color: var(--border-focus);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.yaze-chat-input button {
|
||||
width: 42px;
|
||||
height: 38px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-primary);
|
||||
color: #000; /* Contrast for button */
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px; /* For icon if used, or text */
|
||||
}
|
||||
|
||||
.yaze-chat-input button:hover {
|
||||
background: var(--accent-hover);
|
||||
}
|
||||
|
||||
/* --- Console Pane (Bottom) --- */
|
||||
.yaze-console-pane {
|
||||
flex: 0 0 200px; /* Fixed height for log */
|
||||
background: var(--bg-panel);
|
||||
border-top: 4px solid var(--bg-header); /* Visual separator */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.yaze-console-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 12px;
|
||||
background: var(--bg-header);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
color: var(--text-secondary);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.yaze-console-header .title {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
|
||||
.yaze-console-header .title .material-symbols-outlined {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.yaze-console-header .controls button {
|
||||
margin-left: 8px;
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 3px;
|
||||
padding: 2px 6px;
|
||||
cursor: pointer;
|
||||
font-size: 10px;
|
||||
font-family: var(--font-ui);
|
||||
}
|
||||
|
||||
.yaze-console-header .controls button:hover {
|
||||
color: var(--text-primary);
|
||||
border-color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.yaze-console-body {
|
||||
padding: 8px 12px;
|
||||
overflow-y: auto;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
flex: 1 1 auto;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Badge Status */
|
||||
.yaze-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
background: var(--bg-input);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.yaze-badge.locked { color: var(--status-warning); }
|
||||
.yaze-badge.unlocked { color: var(--status-success); }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.yaze-console-container {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border-left: none;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
height: 80vh;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.yaze-console-container.active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Docking logic */
|
||||
body.yaze-console-open {
|
||||
margin-right: 380px;
|
||||
transition: margin-right 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
body.yaze-console-open {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
691
src/web/styles/collaboration_ui.css
Normal file
691
src/web/styles/collaboration_ui.css
Normal file
@@ -0,0 +1,691 @@
|
||||
/* Collaboration UI Styles for WASM yaze */
|
||||
|
||||
/* Main collaboration panel */
|
||||
.collab-panel {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
width: 320px;
|
||||
max-height: 80vh;
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
||||
z-index: 10000;
|
||||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.collab-panel.collapsed {
|
||||
width: auto;
|
||||
transform: translateX(260px);
|
||||
}
|
||||
|
||||
.collab-panel.collapsed .collab-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Panel header */
|
||||
.collab-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 16px;
|
||||
background: #252525;
|
||||
border-bottom: 1px solid #333;
|
||||
border-radius: 8px 8px 0 0;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.collab-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: 1px solid #444;
|
||||
border-radius: 4px;
|
||||
color: #e0e0e0;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.collab-toggle:hover {
|
||||
background: #333;
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
.collab-title {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
/* Status badge */
|
||||
.collab-status-badge {
|
||||
padding: 3px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.collab-status-badge.connected {
|
||||
background: #10b981;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.collab-status-badge.disconnected {
|
||||
background: #6b7280;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Panel content */
|
||||
.collab-content {
|
||||
padding: 16px;
|
||||
max-height: calc(80vh - 56px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Session controls */
|
||||
.session-controls {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.collab-btn {
|
||||
flex: 1;
|
||||
padding: 8px 12px;
|
||||
background: #2d2d2d;
|
||||
border: 1px solid #444;
|
||||
border-radius: 4px;
|
||||
color: #e0e0e0;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.collab-btn:hover {
|
||||
background: #333;
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
.collab-btn.primary {
|
||||
background: #3b82f6;
|
||||
border-color: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.collab-btn.primary:hover {
|
||||
background: #2563eb;
|
||||
border-color: #2563eb;
|
||||
}
|
||||
|
||||
.collab-btn.danger {
|
||||
background: #ef4444;
|
||||
border-color: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.collab-btn.danger:hover {
|
||||
background: #dc2626;
|
||||
border-color: #dc2626;
|
||||
}
|
||||
|
||||
/* Room code section */
|
||||
.room-code-section {
|
||||
margin-bottom: 20px;
|
||||
padding: 12px;
|
||||
background: #252525;
|
||||
border: 1px solid #333;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.room-code-section label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #9ca3af;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.room-code-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
#room-code-text {
|
||||
flex: 1;
|
||||
padding: 8px 12px;
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #444;
|
||||
border-radius: 4px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 2px;
|
||||
text-align: center;
|
||||
color: #4ecdc4;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
background: #2d2d2d;
|
||||
border: 1px solid #444;
|
||||
border-radius: 4px;
|
||||
color: #e0e0e0;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.icon-btn:hover {
|
||||
background: #333;
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
.icon-btn.success {
|
||||
background: #10b981;
|
||||
border-color: #10b981;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.session-name {
|
||||
margin-top: 8px;
|
||||
font-size: 13px;
|
||||
color: #9ca3af;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* User list */
|
||||
.collab-users h3 {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #9ca3af;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.user-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.user-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 12px;
|
||||
margin-bottom: 4px;
|
||||
background: #252525;
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.user-item:hover {
|
||||
background: #2d2d2d;
|
||||
}
|
||||
|
||||
.user-indicator {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.user-you {
|
||||
font-size: 11px;
|
||||
color: #6b7280;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Actions */
|
||||
.collab-actions {
|
||||
margin-top: 16px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #333;
|
||||
}
|
||||
|
||||
.collab-actions .collab-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Dialog overlay */
|
||||
.collab-dialog-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10001;
|
||||
animation: fadeIn 0.2s;
|
||||
}
|
||||
|
||||
.collab-dialog {
|
||||
width: 400px;
|
||||
max-width: 90vw;
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
|
||||
animation: slideUp 0.3s;
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
background: #252525;
|
||||
border-bottom: 1px solid #333;
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
|
||||
.dialog-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.dialog-close {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #9ca3af;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.dialog-close:hover {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.dialog-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
padding: 8px 12px;
|
||||
background: #252525;
|
||||
border: 1px solid #444;
|
||||
border-radius: 4px;
|
||||
color: #e0e0e0;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding: 16px 20px;
|
||||
background: #252525;
|
||||
border-top: 1px solid #333;
|
||||
border-radius: 0 0 8px 8px;
|
||||
}
|
||||
|
||||
.dialog-btn {
|
||||
padding: 8px 16px;
|
||||
background: #2d2d2d;
|
||||
border: 1px solid #444;
|
||||
border-radius: 4px;
|
||||
color: #e0e0e0;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.dialog-btn:hover {
|
||||
background: #333;
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
.dialog-btn.primary {
|
||||
background: #3b82f6;
|
||||
border-color: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dialog-btn.primary:hover {
|
||||
background: #2563eb;
|
||||
border-color: #2563eb;
|
||||
}
|
||||
|
||||
/* Cursor overlay */
|
||||
.cursor-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.remote-cursor {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 2px solid;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: none;
|
||||
transition: all 0.15s ease-out;
|
||||
}
|
||||
|
||||
.cursor-label {
|
||||
position: absolute;
|
||||
top: -24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Notifications */
|
||||
.collab-notification {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 16px;
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
font-size: 13px;
|
||||
color: #e0e0e0;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: all 0.3s;
|
||||
z-index: 10002;
|
||||
}
|
||||
|
||||
.collab-notification.show {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.notif-icon {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
.collab-content::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.collab-content::-webkit-scrollbar-track {
|
||||
background: #1a1a1a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.collab-content::-webkit-scrollbar-thumb {
|
||||
background: #444;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.collab-content::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 640px) {
|
||||
.collab-panel {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: calc(100vw - 20px);
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
.collab-dialog {
|
||||
width: calc(100vw - 40px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Reconnecting status */
|
||||
.collab-status-badge.reconnecting {
|
||||
background: #f59e0b;
|
||||
color: white;
|
||||
animation: pulse 1.5s infinite;
|
||||
}
|
||||
|
||||
/* Reconnect prompt */
|
||||
.collab-reconnect-prompt {
|
||||
position: fixed;
|
||||
bottom: 80px;
|
||||
right: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #3b82f6;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
|
||||
z-index: 10002;
|
||||
animation: slideIn 0.3s ease;
|
||||
}
|
||||
|
||||
.collab-reconnect-prompt span {
|
||||
color: #e0e0e0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.collab-reconnect-prompt button {
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.collab-reconnect-prompt .reconnect-yes {
|
||||
background: #3b82f6;
|
||||
border: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.collab-reconnect-prompt .reconnect-yes:hover {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.collab-reconnect-prompt .reconnect-no {
|
||||
background: transparent;
|
||||
border: 1px solid #444;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.collab-reconnect-prompt .reconnect-no:hover {
|
||||
background: #2d2d2d;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
/* Change history section */
|
||||
.collab-changes {
|
||||
margin-top: 16px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #333;
|
||||
}
|
||||
|
||||
.collab-changes h3 {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #9ca3af;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.collab-changes .change-count {
|
||||
font-size: 11px;
|
||||
color: #6b7280;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.change-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.change-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 10px;
|
||||
margin-bottom: 4px;
|
||||
background: #252525;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.change-item .change-user {
|
||||
font-weight: 600;
|
||||
min-width: 60px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.change-item .change-offset {
|
||||
font-family: 'Courier New', monospace;
|
||||
color: #4ecdc4;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.change-item .change-time {
|
||||
color: #6b7280;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* Error toast animation */
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode override for inputs */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
input {
|
||||
color-scheme: dark;
|
||||
}
|
||||
}
|
||||
289
src/web/styles/drop_zone.css
Normal file
289
src/web/styles/drop_zone.css
Normal file
@@ -0,0 +1,289 @@
|
||||
/**
|
||||
* Yaze Drop Zone Styles
|
||||
* Provides visual feedback for drag and drop ROM loading
|
||||
*/
|
||||
|
||||
/* Main drop overlay */
|
||||
.yaze-drop-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
z-index: 10000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Active state when dragging over */
|
||||
.yaze-drop-overlay.yaze-drop-active {
|
||||
display: flex;
|
||||
pointer-events: all;
|
||||
opacity: 1;
|
||||
background: rgba(0, 0, 0, 0.92);
|
||||
}
|
||||
|
||||
/* Loading state */
|
||||
.yaze-drop-overlay.yaze-drop-loading {
|
||||
display: flex;
|
||||
pointer-events: all;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Content container */
|
||||
.yaze-drop-content {
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
padding: 80px 60px;
|
||||
border-radius: 24px;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
|
||||
border: 3px dashed rgba(255, 255, 255, 0.4);
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
animation: pulse 2.5s ease-in-out infinite;
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
transform: scale(0.95);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Active content state */
|
||||
.yaze-drop-overlay.yaze-drop-active .yaze-drop-content {
|
||||
border-color: #4CAF50;
|
||||
background: linear-gradient(135deg, rgba(76, 175, 80, 0.25) 0%, rgba(76, 175, 80, 0.15) 100%);
|
||||
animation: pulse-active 1.2s ease-in-out infinite;
|
||||
transform: scale(1);
|
||||
box-shadow: 0 25px 70px rgba(76, 175, 80, 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* Loading content state */
|
||||
.yaze-drop-overlay.yaze-drop-loading .yaze-drop-content {
|
||||
border-color: #2196F3;
|
||||
background: linear-gradient(135deg, rgba(33, 150, 243, 0.25) 0%, rgba(33, 150, 243, 0.15) 100%);
|
||||
border-style: solid;
|
||||
animation: none;
|
||||
transform: scale(1);
|
||||
box-shadow: 0 25px 70px rgba(33, 150, 243, 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* Icon */
|
||||
.yaze-drop-icon {
|
||||
font-size: 84px;
|
||||
margin-bottom: 24px;
|
||||
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3));
|
||||
animation: float 3s ease-in-out infinite;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.yaze-drop-overlay.yaze-drop-active .yaze-drop-icon {
|
||||
transform: scale(1.1);
|
||||
filter: drop-shadow(0 10px 20px rgba(76, 175, 80, 0.5));
|
||||
}
|
||||
|
||||
.yaze-drop-overlay.yaze-drop-loading .yaze-drop-icon {
|
||||
animation: spin 2s linear infinite;
|
||||
filter: drop-shadow(0 10px 20px rgba(33, 150, 243, 0.5));
|
||||
}
|
||||
|
||||
/* Text elements */
|
||||
.yaze-drop-text {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
|
||||
letter-spacing: -0.5px;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.yaze-drop-info {
|
||||
font-size: 18px;
|
||||
opacity: 0.85;
|
||||
font-weight: 400;
|
||||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
/* Progress bar container */
|
||||
.yaze-drop-progress {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 3px;
|
||||
margin-top: 24px;
|
||||
overflow: hidden;
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Progress bar fill */
|
||||
.yaze-drop-progress-bar {
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
background: linear-gradient(90deg, #2196F3 0%, #4CAF50 100%);
|
||||
border-radius: 3px;
|
||||
transition: width 0.3s ease;
|
||||
box-shadow: 0 2px 8px rgba(33, 150, 243, 0.5);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.yaze-drop-progress-bar::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.3) 50%,
|
||||
transparent 100%);
|
||||
animation: shimmer 1.5s infinite;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.92;
|
||||
transform: scale(0.97);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-active {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(200%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
.yaze-drop-content {
|
||||
padding: 60px 40px;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.yaze-drop-icon {
|
||||
font-size: 64px;
|
||||
}
|
||||
|
||||
.yaze-drop-text {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.yaze-drop-info {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.yaze-drop-content {
|
||||
padding: 40px 30px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.yaze-drop-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.yaze-drop-text {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.yaze-drop-info {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode enhancements */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.yaze-drop-overlay {
|
||||
background: rgba(0, 0, 0, 0.95);
|
||||
}
|
||||
|
||||
.yaze-drop-overlay.yaze-drop-active {
|
||||
background: rgba(0, 0, 0, 0.97);
|
||||
}
|
||||
|
||||
.yaze-drop-content {
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
/* High contrast mode support */
|
||||
@media (prefers-contrast: high) {
|
||||
.yaze-drop-content {
|
||||
border-width: 4px;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.yaze-drop-text {
|
||||
-webkit-text-fill-color: white;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.yaze-drop-info {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reduced motion support */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.yaze-drop-overlay,
|
||||
.yaze-drop-content,
|
||||
.yaze-drop-icon {
|
||||
animation: none;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.yaze-drop-progress-bar::after {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
414
src/web/styles/error_handler.css
Normal file
414
src/web/styles/error_handler.css
Normal file
@@ -0,0 +1,414 @@
|
||||
/**
|
||||
* Yaze WASM Error Handler Styles
|
||||
* Provides styling for modals, toasts, progress indicators, and confirmations
|
||||
*/
|
||||
|
||||
/* Modal Overlay */
|
||||
.yaze-modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10000;
|
||||
animation: fadeIn 0.2s ease;
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Modal Content Container */
|
||||
.yaze-modal-content {
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
max-width: 500px;
|
||||
min-width: 320px;
|
||||
max-height: 80vh;
|
||||
overflow: hidden;
|
||||
animation: slideUp 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Modal Header */
|
||||
.yaze-modal-header {
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.yaze-modal-icon {
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.yaze-modal-title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Modal Body */
|
||||
.yaze-modal-body {
|
||||
padding: 20px 24px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.yaze-modal-body p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #555;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* Modal Footer */
|
||||
.yaze-modal-footer {
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* Modal Buttons */
|
||||
.yaze-modal-button {
|
||||
padding: 8px 20px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.yaze-modal-button:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.3);
|
||||
}
|
||||
|
||||
.yaze-modal-button-primary {
|
||||
background: #4299e1;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.yaze-modal-button-primary:hover {
|
||||
background: #3182ce;
|
||||
}
|
||||
|
||||
.yaze-modal-button-secondary {
|
||||
background: #e2e8f0;
|
||||
color: #4a5568;
|
||||
}
|
||||
|
||||
.yaze-modal-button-secondary:hover {
|
||||
background: #cbd5e0;
|
||||
}
|
||||
|
||||
/* Modal Type Variants */
|
||||
.yaze-modal-error .yaze-modal-header {
|
||||
background: #fff5f5;
|
||||
border-bottom-color: #feb2b2;
|
||||
}
|
||||
|
||||
.yaze-modal-error .yaze-modal-title {
|
||||
color: #c53030;
|
||||
}
|
||||
|
||||
.yaze-modal-warning .yaze-modal-header {
|
||||
background: #fffdf7;
|
||||
border-bottom-color: #fbd38d;
|
||||
}
|
||||
|
||||
.yaze-modal-warning .yaze-modal-title {
|
||||
color: #c05621;
|
||||
}
|
||||
|
||||
.yaze-modal-info .yaze-modal-header {
|
||||
background: #f7fafc;
|
||||
border-bottom-color: #bee3f8;
|
||||
}
|
||||
|
||||
.yaze-modal-info .yaze-modal-title {
|
||||
color: #2c5282;
|
||||
}
|
||||
|
||||
/* Toast Container */
|
||||
.yaze-toast-container {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
z-index: 10001;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Toast Item */
|
||||
.yaze-toast {
|
||||
background: #333;
|
||||
color: white;
|
||||
padding: 12px 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 280px;
|
||||
max-width: 400px;
|
||||
animation: slideInRight 0.3s ease;
|
||||
pointer-events: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.yaze-toast-hiding {
|
||||
animation: slideOutRight 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slideOutRight {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.yaze-toast-icon {
|
||||
font-size: 18px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.yaze-toast-message {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.yaze-toast-close {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.yaze-toast-close:hover {
|
||||
color: white;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* Toast Type Variants */
|
||||
.yaze-toast-success {
|
||||
background: #48bb78;
|
||||
}
|
||||
|
||||
.yaze-toast-warning {
|
||||
background: #ed8936;
|
||||
}
|
||||
|
||||
.yaze-toast-error {
|
||||
background: #f56565;
|
||||
}
|
||||
|
||||
.yaze-toast-info {
|
||||
background: #4299e1;
|
||||
}
|
||||
|
||||
/* Progress Container */
|
||||
.yaze-progress-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
|
||||
/* Progress Content */
|
||||
.yaze-progress-content {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 32px;
|
||||
min-width: 400px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.yaze-progress-label {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yaze-progress-bar-container {
|
||||
background: #e2e8f0;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.yaze-progress-bar {
|
||||
background: linear-gradient(90deg, #4299e1, #667eea);
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
transition: width 0.3s ease;
|
||||
box-shadow: 0 2px 4px rgba(66, 153, 225, 0.3);
|
||||
}
|
||||
|
||||
.yaze-progress-percentage {
|
||||
font-size: 14px;
|
||||
color: #718096;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.yaze-progress-cancel {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
padding: 8px 24px;
|
||||
background: #e2e8f0;
|
||||
color: #4a5568;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.yaze-progress-cancel:hover {
|
||||
background: #cbd5e0;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 600px) {
|
||||
.yaze-modal-content {
|
||||
max-width: 90vw;
|
||||
min-width: 280px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.yaze-toast-container {
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
.yaze-toast {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.yaze-progress-content {
|
||||
min-width: 90vw;
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark Mode Support */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.yaze-modal-content {
|
||||
background: #2d3748;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.yaze-modal-header {
|
||||
border-bottom-color: #4a5568;
|
||||
}
|
||||
|
||||
.yaze-modal-title {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.yaze-modal-body p {
|
||||
color: #cbd5e0;
|
||||
}
|
||||
|
||||
.yaze-modal-footer {
|
||||
border-top-color: #4a5568;
|
||||
}
|
||||
|
||||
.yaze-progress-content {
|
||||
background: #2d3748;
|
||||
}
|
||||
|
||||
.yaze-progress-label {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.yaze-progress-bar-container {
|
||||
background: #4a5568;
|
||||
}
|
||||
|
||||
.yaze-progress-percentage {
|
||||
color: #a0aec0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Print Styles */
|
||||
@media print {
|
||||
.yaze-modal-overlay,
|
||||
.yaze-toast-container,
|
||||
.yaze-progress-container {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
263
src/web/styles/loading_indicator.css
Normal file
263
src/web/styles/loading_indicator.css
Normal file
@@ -0,0 +1,263 @@
|
||||
/**
|
||||
* @fileoverview Styling for yaze WASM loading indicators
|
||||
*
|
||||
* Provides smooth, modern loading UI with animations and responsive design
|
||||
*/
|
||||
|
||||
/* Loading overlay - full screen with semi-transparent background */
|
||||
.yaze-loading-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10000;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.yaze-loading-overlay.yaze-loading-visible {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* Loading container - centered box with content */
|
||||
.yaze-loading-container {
|
||||
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
|
||||
border-radius: 12px;
|
||||
padding: 32px;
|
||||
min-width: 400px;
|
||||
max-width: 500px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
animation: slideUp 0.4s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Task name heading */
|
||||
.yaze-loading-task {
|
||||
color: #ecf0f1;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 20px 0;
|
||||
text-align: center;
|
||||
letter-spacing: 0.5px;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Progress container */
|
||||
.yaze-progress-container {
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* Progress bar background */
|
||||
.yaze-progress-bar {
|
||||
height: 24px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Progress fill */
|
||||
.yaze-progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #3498db, #2980b9);
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
width: 0%;
|
||||
box-shadow: 0 2px 8px rgba(52, 152, 219, 0.4);
|
||||
}
|
||||
|
||||
.yaze-progress-fill.yaze-progress-animated {
|
||||
transition: width 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* Animated stripes on progress bar */
|
||||
.yaze-progress-fill::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: linear-gradient(
|
||||
45deg,
|
||||
rgba(255, 255, 255, 0.1) 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
rgba(255, 255, 255, 0.1) 50%,
|
||||
rgba(255, 255, 255, 0.1) 75%,
|
||||
transparent 75%,
|
||||
transparent
|
||||
);
|
||||
background-size: 40px 40px;
|
||||
animation: progressStripes 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes progressStripes {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 40px 40px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Progress text percentage */
|
||||
.yaze-progress-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #ecf0f1;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Status message */
|
||||
.yaze-loading-message {
|
||||
color: #bdc3c7;
|
||||
font-size: 14px;
|
||||
margin: 12px 0 16px 0;
|
||||
text-align: center;
|
||||
min-height: 20px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Cancel button */
|
||||
.yaze-cancel-button {
|
||||
display: inline-block;
|
||||
background: linear-gradient(135deg, #e74c3c, #c0392b);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 24px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
|
||||
margin: 8px auto 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.yaze-cancel-button:hover:not(:disabled) {
|
||||
background: linear-gradient(135deg, #c0392b, #a93226);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.yaze-cancel-button:active:not(:disabled) {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.yaze-cancel-button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
background: linear-gradient(135deg, #7f8c8d, #95a5a6);
|
||||
}
|
||||
|
||||
/* Pulse animation for long operations */
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 2px 8px rgba(52, 152, 219, 0.4);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 2px 16px rgba(52, 152, 219, 0.6);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 2px 8px rgba(52, 152, 219, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.yaze-progress-fill:not(.yaze-progress-animated) {
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Responsive design for smaller screens */
|
||||
@media (max-width: 600px) {
|
||||
.yaze-loading-container {
|
||||
min-width: 90%;
|
||||
max-width: 90%;
|
||||
padding: 24px;
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.yaze-loading-task {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.yaze-progress-bar {
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode support */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.yaze-loading-overlay {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.yaze-loading-container {
|
||||
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
|
||||
}
|
||||
}
|
||||
|
||||
/* High contrast mode support */
|
||||
@media (prefers-contrast: high) {
|
||||
.yaze-loading-container {
|
||||
border: 2px solid white;
|
||||
}
|
||||
|
||||
.yaze-progress-bar {
|
||||
border: 1px solid white;
|
||||
}
|
||||
|
||||
.yaze-cancel-button {
|
||||
border: 2px solid white;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reduced motion support */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.yaze-loading-overlay,
|
||||
.yaze-progress-fill {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.yaze-loading-container {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.yaze-progress-fill::before {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.yaze-progress-fill:not(.yaze-progress-animated) {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
1853
src/web/styles/main.css
Normal file
1853
src/web/styles/main.css
Normal file
File diff suppressed because it is too large
Load Diff
438
src/web/styles/shortcuts_overlay.css
Normal file
438
src/web/styles/shortcuts_overlay.css
Normal file
@@ -0,0 +1,438 @@
|
||||
/**
|
||||
* @fileoverview Styles for the keyboard shortcuts overlay
|
||||
* Follows the yaze web UI design system with dark theme support
|
||||
*/
|
||||
|
||||
/* Overlay background */
|
||||
.yaze-shortcuts-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.75);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 10000;
|
||||
opacity: 0;
|
||||
animation: yaze-shortcuts-fade-in 0.2s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes yaze-shortcuts-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Modal container */
|
||||
.yaze-shortcuts-modal {
|
||||
background-color: var(--bg-app);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 8px;
|
||||
width: 90%;
|
||||
max-width: 650px;
|
||||
max-height: 80vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
transform: translateY(-10px);
|
||||
animation: yaze-shortcuts-slide-in 0.2s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes yaze-shortcuts-slide-in {
|
||||
from {
|
||||
transform: translateY(-10px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.yaze-shortcuts-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.yaze-shortcuts-header h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.yaze-shortcuts-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-secondary);
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.yaze-shortcuts-close:hover {
|
||||
background-color: var(--bg-header);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Search */
|
||||
.yaze-shortcuts-search {
|
||||
padding: 12px 20px;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.yaze-shortcuts-search input {
|
||||
width: 100%;
|
||||
padding: 10px 14px;
|
||||
background-color: var(--bg-header);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 4px;
|
||||
color: var(--text-primary);
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
|
||||
.yaze-shortcuts-search input:focus {
|
||||
border-color: var(--accent-primary);
|
||||
box-shadow: 0 0 0 2px rgba(14, 99, 156, 0.25);
|
||||
}
|
||||
|
||||
.yaze-shortcuts-search input::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Content area */
|
||||
.yaze-shortcuts-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
.yaze-shortcuts-content::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.yaze-shortcuts-content::-webkit-scrollbar-track {
|
||||
background: var(--bg-app);
|
||||
}
|
||||
|
||||
.yaze-shortcuts-content::-webkit-scrollbar-thumb {
|
||||
background-color: var(--border-light);
|
||||
border-radius: 5px;
|
||||
border: 2px solid var(--bg-app);
|
||||
}
|
||||
|
||||
.yaze-shortcuts-content::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #4e4e52;
|
||||
}
|
||||
|
||||
/* Category section */
|
||||
.yaze-shortcuts-category {
|
||||
padding: 0 20px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.yaze-shortcuts-category-header {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin: 16px 0 8px 0;
|
||||
padding-bottom: 4px;
|
||||
border-bottom: 1px solid var(--bg-panel);
|
||||
}
|
||||
|
||||
.yaze-shortcuts-category:first-child .yaze-shortcuts-category-header {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* Shortcut list */
|
||||
.yaze-shortcuts-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
/* Individual shortcut row */
|
||||
.yaze-shortcut-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.1s;
|
||||
}
|
||||
|
||||
.yaze-shortcut-row:hover {
|
||||
background-color: var(--bg-panel);
|
||||
}
|
||||
|
||||
/* Keyboard keys */
|
||||
.yaze-shortcut-keys {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.yaze-shortcut-keys kbd {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
padding: 0 8px;
|
||||
background: linear-gradient(180deg, var(--border-light) 0%, var(--bg-panel) 100%);
|
||||
border: 1px solid #4e4e52;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 0 var(--bg-header);
|
||||
color: var(--text-primary);
|
||||
font-family: 'Segoe UI', system-ui, sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Shortcut description */
|
||||
.yaze-shortcut-description {
|
||||
color: var(--text-primary);
|
||||
font-size: 14px;
|
||||
text-align: right;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.yaze-shortcuts-footer {
|
||||
padding: 12px 20px;
|
||||
border-top: 1px solid var(--border-light);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yaze-shortcuts-footer span {
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.yaze-shortcuts-footer kbd {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
padding: 0 6px;
|
||||
background: linear-gradient(180deg, var(--border-light) 0%, var(--bg-panel) 100%);
|
||||
border: 1px solid #4e4e52;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1px 0 var(--bg-header);
|
||||
color: var(--text-primary);
|
||||
font-family: 'Segoe UI', system-ui, sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 600px) {
|
||||
.yaze-shortcuts-modal {
|
||||
width: 95%;
|
||||
max-height: 90vh;
|
||||
border-radius: 12px 12px 0 0;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.yaze-shortcuts-header {
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.yaze-shortcuts-header h2 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.yaze-shortcuts-search {
|
||||
padding: 10px 16px;
|
||||
}
|
||||
|
||||
.yaze-shortcuts-category {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.yaze-shortcut-row {
|
||||
padding: 10px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.yaze-shortcut-description {
|
||||
text-align: left;
|
||||
margin-left: 0;
|
||||
font-size: 13px;
|
||||
color: #9e9e9e;
|
||||
}
|
||||
|
||||
.yaze-shortcuts-footer {
|
||||
padding: 10px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Touch-friendly enhancements */
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
.yaze-shortcut-row {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.yaze-shortcuts-close {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.yaze-shortcuts-search input {
|
||||
padding: 14px 16px;
|
||||
font-size: 16px; /* Prevents zoom on iOS */
|
||||
}
|
||||
}
|
||||
|
||||
/* High contrast mode */
|
||||
@media (prefers-contrast: high) {
|
||||
.yaze-shortcuts-modal {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.yaze-shortcut-keys kbd {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.yaze-shortcut-description {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reduced motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.yaze-shortcuts-overlay,
|
||||
.yaze-shortcuts-modal {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.yaze-shortcut-row,
|
||||
.yaze-shortcuts-close {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode is default, but support light mode if system prefers */
|
||||
@media (prefers-color-scheme: light) {
|
||||
.yaze-shortcuts-overlay {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.yaze-shortcuts-modal {
|
||||
background-color: #ffffff;
|
||||
border-color: #d4d4d4;
|
||||
}
|
||||
|
||||
.yaze-shortcuts-header {
|
||||
border-bottom-color: #e5e5e5;
|
||||
}
|
||||
|
||||
.yaze-shortcuts-header h2 {
|
||||
color: #0066b8;
|
||||
}
|
||||
|
||||
.yaze-shortcuts-close {
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.yaze-shortcuts-close:hover {
|
||||
background-color: #e5e5e5;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.yaze-shortcuts-search {
|
||||
border-bottom-color: #e5e5e5;
|
||||
}
|
||||
|
||||
.yaze-shortcuts-search input {
|
||||
background-color: #f3f3f3;
|
||||
border-color: #d4d4d4;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.yaze-shortcuts-search input:focus {
|
||||
border-color: #0066b8;
|
||||
box-shadow: 0 0 0 2px rgba(0, 102, 184, 0.2);
|
||||
}
|
||||
|
||||
.yaze-shortcuts-search input::placeholder {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.yaze-shortcuts-content::-webkit-scrollbar-track {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.yaze-shortcuts-content::-webkit-scrollbar-thumb {
|
||||
background-color: #d4d4d4;
|
||||
border-color: #ffffff;
|
||||
}
|
||||
|
||||
.yaze-shortcuts-content::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #b0b0b0;
|
||||
}
|
||||
|
||||
.yaze-shortcuts-category-header {
|
||||
color: #666666;
|
||||
border-bottom-color: #e5e5e5;
|
||||
}
|
||||
|
||||
.yaze-shortcut-row:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.yaze-shortcut-keys kbd {
|
||||
background: linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%);
|
||||
border-color: #d4d4d4;
|
||||
box-shadow: 0 2px 0 #e5e5e5;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.yaze-shortcut-description {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.yaze-shortcuts-footer {
|
||||
border-top-color: #e5e5e5;
|
||||
}
|
||||
|
||||
.yaze-shortcuts-footer span {
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.yaze-shortcuts-footer kbd {
|
||||
background: linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%);
|
||||
border-color: #d4d4d4;
|
||||
box-shadow: 0 1px 0 #e5e5e5;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
706
src/web/styles/terminal.css
Normal file
706
src/web/styles/terminal.css
Normal file
@@ -0,0 +1,706 @@
|
||||
/**
|
||||
* z3ed Terminal Styles
|
||||
* Retro terminal styling for the yaze web application
|
||||
* Classic terminal aesthetic with modern usability
|
||||
*/
|
||||
|
||||
/* ============================================
|
||||
CSS Custom Properties (Theme Variables)
|
||||
============================================ */
|
||||
:root {
|
||||
/* Terminal color scheme - classic green phosphor */
|
||||
--term-bg: #0a0a0a;
|
||||
--term-bg-secondary: #111111;
|
||||
--term-text: #33ff33;
|
||||
--term-text-dim: #1a8c1a;
|
||||
--term-text-bright: #66ff66;
|
||||
--term-prompt: #00ff00;
|
||||
--term-cursor: #33ff33;
|
||||
--term-selection: rgba(51, 255, 51, 0.3);
|
||||
--term-border: #1a1a1a;
|
||||
--term-glow: rgba(51, 255, 51, 0.15);
|
||||
|
||||
/* Accent colors */
|
||||
--term-error: var(--status-error, #ff3333);
|
||||
--term-warning: var(--status-warning, #ffaa00);
|
||||
--term-info: var(--accent-primary, #33aaff);
|
||||
--term-success: var(--status-success, #33ff33);
|
||||
|
||||
/* Window chrome - Match app theme */
|
||||
--term-chrome-bg: var(--bg-header, #1a1a1a);
|
||||
--term-chrome-border: var(--border-light, #333333);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Terminal Container - Main Window
|
||||
============================================ */
|
||||
|
||||
.terminal-container {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 320px;
|
||||
min-height: 120px;
|
||||
max-height: 70vh;
|
||||
background: var(--term-bg);
|
||||
border-top: 1px solid var(--term-chrome-border);
|
||||
box-shadow:
|
||||
0 -4px 30px rgba(0, 0, 0, 0.8),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.03);
|
||||
z-index: 9000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
|
||||
transition: height 0.25s ease-out, transform 0.25s ease-out;
|
||||
}
|
||||
|
||||
/* CRT scanline effect (subtle) */
|
||||
.terminal-container::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
transparent,
|
||||
transparent 2px,
|
||||
rgba(0, 0, 0, 0.1) 2px,
|
||||
rgba(0, 0, 0, 0.1) 4px
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
/* Screen glow effect */
|
||||
.terminal-container::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: radial-gradient(
|
||||
ellipse at center,
|
||||
var(--term-glow) 0%,
|
||||
transparent 70%
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Collapsed state */
|
||||
.terminal-container.terminal-collapsed {
|
||||
height: 40px;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.terminal-container.terminal-collapsed .terminal-body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.terminal-container.terminal-collapsed::before,
|
||||
.terminal-container.terminal-collapsed::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hidden state */
|
||||
.terminal-container.terminal-hidden {
|
||||
transform: translateY(100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Terminal Header - Window Chrome
|
||||
============================================ */
|
||||
|
||||
.terminal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 12px;
|
||||
height: 40px;
|
||||
background: linear-gradient(180deg, #2a2a2a 0%, var(--term-chrome-bg) 100%);
|
||||
border-bottom: 1px solid var(--term-border);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.terminal-header:hover {
|
||||
background: linear-gradient(180deg, #333333 0%, #222222 100%);
|
||||
}
|
||||
|
||||
/* Simple flat control buttons */
|
||||
.terminal-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.terminal-ctrl-btn {
|
||||
background: transparent;
|
||||
border: 1px solid var(--term-border);
|
||||
color: var(--term-text-dim);
|
||||
width: 20px;
|
||||
height: 18px;
|
||||
font-size: 9px;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
transition: all 0.1s;
|
||||
}
|
||||
|
||||
.terminal-ctrl-btn:hover {
|
||||
background: var(--term-bg-secondary);
|
||||
color: var(--term-text);
|
||||
border-color: var(--term-text-dim);
|
||||
}
|
||||
|
||||
/* Title */
|
||||
.terminal-title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #888888;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.terminal-title-icon {
|
||||
margin-right: 6px;
|
||||
color: var(--term-text-dim);
|
||||
}
|
||||
|
||||
/* Toggle indicator */
|
||||
.terminal-toggle {
|
||||
color: #666666;
|
||||
font-size: 10px;
|
||||
transition: transform 0.25s ease;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.terminal-collapsed .terminal-toggle {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Terminal Body - Content Area
|
||||
============================================ */
|
||||
|
||||
.terminal-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Terminal Output - Scrollable Log
|
||||
============================================ */
|
||||
|
||||
.terminal-output {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 16px 20px;
|
||||
background: transparent;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: var(--term-text);
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
text-shadow: 0 0 8px var(--term-glow);
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
.terminal-output::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.terminal-output::-webkit-scrollbar-track {
|
||||
background: var(--term-bg);
|
||||
}
|
||||
|
||||
.terminal-output::-webkit-scrollbar-thumb {
|
||||
background: var(--term-text-dim);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.terminal-output::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--term-text);
|
||||
}
|
||||
|
||||
/* Selection */
|
||||
.terminal-output ::selection {
|
||||
background: var(--term-selection);
|
||||
color: var(--term-text-bright);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Output Line Styles
|
||||
============================================ */
|
||||
|
||||
.terminal-line {
|
||||
margin-bottom: 2px;
|
||||
padding: 1px 0;
|
||||
}
|
||||
|
||||
/* Welcome message */
|
||||
.terminal-welcome {
|
||||
color: var(--term-text-dim);
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px dashed var(--term-text-dim);
|
||||
}
|
||||
|
||||
/* User input echo */
|
||||
.terminal-prompt {
|
||||
color: var(--term-prompt);
|
||||
}
|
||||
|
||||
.terminal-prompt::before {
|
||||
content: '$ ';
|
||||
color: var(--term-text-dim);
|
||||
}
|
||||
|
||||
/* Command text */
|
||||
.terminal-command {
|
||||
color: var(--term-text-bright);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Response text */
|
||||
.terminal-response {
|
||||
color: var(--term-text);
|
||||
padding-left: 0;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* Error messages */
|
||||
.terminal-error {
|
||||
color: var(--term-error);
|
||||
text-shadow: 0 0 8px rgba(255, 51, 51, 0.3);
|
||||
}
|
||||
|
||||
.terminal-error::before {
|
||||
content: 'error: ';
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Warning messages */
|
||||
.terminal-warning {
|
||||
color: var(--term-warning);
|
||||
text-shadow: 0 0 8px rgba(255, 170, 0, 0.3);
|
||||
}
|
||||
|
||||
.terminal-warning::before {
|
||||
content: 'warning: ';
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Info messages */
|
||||
.terminal-info {
|
||||
color: var(--term-info);
|
||||
text-shadow: 0 0 8px rgba(51, 170, 255, 0.3);
|
||||
}
|
||||
|
||||
.terminal-info::before {
|
||||
content: 'info: ';
|
||||
font-weight: 600;
|
||||
color: var(--term-info);
|
||||
}
|
||||
|
||||
/* Success messages */
|
||||
.terminal-success {
|
||||
color: var(--term-success);
|
||||
}
|
||||
|
||||
.terminal-success::before {
|
||||
content: '✓ ';
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Timestamp */
|
||||
.terminal-timestamp {
|
||||
color: var(--term-text-dim);
|
||||
font-size: 11px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Terminal Input Line
|
||||
============================================ */
|
||||
|
||||
.terminal-input-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 20px;
|
||||
background: var(--term-bg-secondary);
|
||||
border-top: 1px solid var(--term-border);
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Prompt symbol */
|
||||
.terminal-prompt-symbol {
|
||||
color: var(--term-prompt);
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
margin-right: 10px;
|
||||
flex-shrink: 0;
|
||||
text-shadow: 0 0 10px var(--term-glow);
|
||||
}
|
||||
|
||||
.terminal-prompt-symbol::before {
|
||||
content: 'z3ed';
|
||||
color: var(--term-text-dim);
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.terminal-prompt-symbol::after {
|
||||
content: '$';
|
||||
}
|
||||
|
||||
/* Input field */
|
||||
.terminal-input {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: var(--term-text);
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
caret-color: var(--term-cursor);
|
||||
text-shadow: 0 0 8px var(--term-glow);
|
||||
}
|
||||
|
||||
.terminal-input::placeholder {
|
||||
color: var(--term-text-dim);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Blinking cursor effect (when focused) */
|
||||
.terminal-input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@keyframes cursor-blink {
|
||||
0%, 50% { opacity: 1; }
|
||||
51%, 100% { opacity: 0; }
|
||||
}
|
||||
|
||||
/* Submit button for touch */
|
||||
.terminal-submit {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
background: var(--term-text-dim);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: var(--term-bg);
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.terminal-submit:hover {
|
||||
background: var(--term-text);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Resize Handle
|
||||
============================================ */
|
||||
|
||||
.terminal-resize-handle {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
cursor: ns-resize;
|
||||
background: transparent;
|
||||
z-index: 10;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
.terminal-resize-handle:hover {
|
||||
background: var(--term-text-dim);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Loading State
|
||||
============================================ */
|
||||
|
||||
.terminal-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: var(--term-text-dim);
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.terminal-spinner {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 2px solid var(--term-text-dim);
|
||||
border-top-color: var(--term-text);
|
||||
border-radius: 50%;
|
||||
animation: terminal-spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes terminal-spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* ASCII loading animation */
|
||||
.terminal-loading-ascii {
|
||||
font-family: inherit;
|
||||
color: var(--term-text);
|
||||
}
|
||||
|
||||
.terminal-loading-ascii::after {
|
||||
content: '|';
|
||||
animation: ascii-spin 0.5s steps(4) infinite;
|
||||
}
|
||||
|
||||
@keyframes ascii-spin {
|
||||
0% { content: '|'; }
|
||||
25% { content: '/'; }
|
||||
50% { content: '-'; }
|
||||
75% { content: '\\'; }
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Autocomplete Suggestions
|
||||
============================================ */
|
||||
|
||||
.terminal-suggestions {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
max-height: 180px;
|
||||
overflow-y: auto;
|
||||
background: var(--term-bg-secondary);
|
||||
border: 1px solid var(--term-text-dim);
|
||||
border-bottom: none;
|
||||
display: none;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.terminal-suggestions.visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.terminal-suggestion {
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
color: var(--term-text);
|
||||
border-bottom: 1px solid var(--term-border);
|
||||
transition: background 0.1s ease;
|
||||
}
|
||||
|
||||
.terminal-suggestion:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.terminal-suggestion:hover,
|
||||
.terminal-suggestion.selected {
|
||||
background: var(--term-text-dim);
|
||||
color: var(--term-bg);
|
||||
}
|
||||
|
||||
.terminal-suggestion-command {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.terminal-suggestion-desc {
|
||||
font-size: 11px;
|
||||
color: var(--term-text-dim);
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.terminal-suggestion:hover .terminal-suggestion-desc,
|
||||
.terminal-suggestion.selected .terminal-suggestion-desc {
|
||||
color: var(--term-bg);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Code Blocks and Links
|
||||
============================================ */
|
||||
|
||||
.terminal-code {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
padding: 2px 6px;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
color: var(--term-text-bright);
|
||||
border: 1px solid var(--term-border);
|
||||
}
|
||||
|
||||
.terminal-link {
|
||||
color: var(--term-info);
|
||||
text-decoration: underline;
|
||||
text-decoration-style: dotted;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.terminal-link:hover {
|
||||
color: var(--term-text-bright);
|
||||
text-decoration-style: solid;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Mobile Responsive
|
||||
============================================ */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.terminal-container {
|
||||
height: 280px;
|
||||
min-height: 100px;
|
||||
max-height: 50vh;
|
||||
}
|
||||
|
||||
.terminal-header {
|
||||
height: 36px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.terminal-controls {
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.terminal-title {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.terminal-output {
|
||||
padding: 12px 14px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.terminal-input-line {
|
||||
padding: 10px 14px;
|
||||
}
|
||||
|
||||
.terminal-input {
|
||||
font-size: 16px; /* Prevent iOS zoom */
|
||||
}
|
||||
|
||||
.terminal-submit {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.terminal-prompt-symbol::before {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.terminal-container {
|
||||
height: 220px;
|
||||
max-height: 45vh;
|
||||
}
|
||||
|
||||
.terminal-container::before,
|
||||
.terminal-container::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.terminal-controls {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.terminal-output {
|
||||
padding: 10px 12px;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.terminal-input-line {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Accessibility
|
||||
============================================ */
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.terminal-container,
|
||||
.terminal-spinner,
|
||||
.terminal-loading-ascii::after {
|
||||
animation: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-contrast: high) {
|
||||
:root {
|
||||
--term-text: #00ff00;
|
||||
--term-bg: #000000;
|
||||
--term-border: #00ff00;
|
||||
}
|
||||
|
||||
.terminal-container::before,
|
||||
.terminal-container::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Utility Classes
|
||||
============================================ */
|
||||
|
||||
.terminal-visible {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.terminal-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Bold text */
|
||||
.terminal-bold {
|
||||
font-weight: 700;
|
||||
color: var(--term-text-bright);
|
||||
}
|
||||
|
||||
/* Dim text */
|
||||
.terminal-dim {
|
||||
color: var(--term-text-dim);
|
||||
}
|
||||
|
||||
/* Path/directory highlighting */
|
||||
.terminal-path {
|
||||
color: #66ccff;
|
||||
}
|
||||
|
||||
/* Number highlighting */
|
||||
.terminal-number {
|
||||
color: #ff9966;
|
||||
}
|
||||
|
||||
/* String highlighting */
|
||||
.terminal-string {
|
||||
color: #ffcc66;
|
||||
}
|
||||
463
src/web/styles/touch_gestures.css
Normal file
463
src/web/styles/touch_gestures.css
Normal file
@@ -0,0 +1,463 @@
|
||||
/**
|
||||
* Touch UI Styling for yaze WASM build
|
||||
*
|
||||
* Provides touch-friendly UI adaptations for iPad and tablet browsers:
|
||||
* - Larger hit targets for buttons (44x44px minimum per Apple HIG)
|
||||
* - Touch-friendly scrollbars
|
||||
* - Visual feedback for touch interactions
|
||||
* - Hide cursor when touch is active
|
||||
* - Proper touch-action configuration
|
||||
*/
|
||||
|
||||
/* =============================================================================
|
||||
Touch Mode Detection
|
||||
Uses a CSS custom property that can be toggled via JavaScript
|
||||
============================================================================= */
|
||||
|
||||
:root {
|
||||
--yaze-touch-mode: 0;
|
||||
--yaze-min-touch-target: 44px;
|
||||
--yaze-touch-padding: 8px;
|
||||
--yaze-ripple-color: rgba(14, 99, 156, 0.4);
|
||||
--yaze-ripple-duration: 300ms;
|
||||
}
|
||||
|
||||
/* Applied when touch mode is active */
|
||||
body.yaze-touch-mode {
|
||||
--yaze-touch-mode: 1;
|
||||
cursor: none;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Canvas Touch Configuration
|
||||
============================================================================= */
|
||||
|
||||
#canvas,
|
||||
canvas.emscripten {
|
||||
/* Disable all browser touch handling - we handle it ourselves */
|
||||
touch-action: none;
|
||||
|
||||
/* Disable text selection */
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
|
||||
/* Disable callout on long-press (iOS Safari) */
|
||||
-webkit-touch-callout: none;
|
||||
|
||||
/* Disable tap highlight (Android Chrome) */
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
/* When touch is active, hide the cursor on the canvas */
|
||||
body.yaze-touch-mode #canvas,
|
||||
body.yaze-touch-mode canvas.emscripten {
|
||||
cursor: none;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Touch Ripple Effect
|
||||
Visual feedback for tap interactions
|
||||
============================================================================= */
|
||||
|
||||
.yaze-touch-ripple {
|
||||
position: fixed;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
background: var(--yaze-ripple-color);
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: none;
|
||||
z-index: 10000;
|
||||
opacity: 1;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.yaze-touch-ripple-active {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
opacity: 0;
|
||||
transition:
|
||||
width var(--yaze-ripple-duration) ease-out,
|
||||
height var(--yaze-ripple-duration) ease-out,
|
||||
opacity var(--yaze-ripple-duration) ease-out;
|
||||
}
|
||||
|
||||
/* Long press ripple - larger and different color */
|
||||
.yaze-touch-ripple-long-press {
|
||||
background: rgba(255, 193, 7, 0.5);
|
||||
}
|
||||
|
||||
.yaze-touch-ripple-long-press.yaze-touch-ripple-active {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Touch-Friendly Buttons
|
||||
Ensure all interactive elements meet minimum touch target size
|
||||
============================================================================= */
|
||||
|
||||
body.yaze-touch-mode button,
|
||||
body.yaze-touch-mode .yaze-button,
|
||||
body.yaze-touch-mode [role="button"],
|
||||
body.yaze-touch-mode input[type="button"],
|
||||
body.yaze-touch-mode input[type="submit"],
|
||||
body.yaze-touch-mode input[type="reset"] {
|
||||
min-width: var(--yaze-min-touch-target);
|
||||
min-height: var(--yaze-min-touch-target);
|
||||
padding: var(--yaze-touch-padding) 16px;
|
||||
|
||||
/* Ensure adequate spacing between touch targets */
|
||||
margin: 4px;
|
||||
|
||||
/* Visual feedback on touch */
|
||||
transition: transform 0.1s ease, background-color 0.1s ease;
|
||||
}
|
||||
|
||||
body.yaze-touch-mode button:active,
|
||||
body.yaze-touch-mode .yaze-button:active,
|
||||
body.yaze-touch-mode [role="button"]:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Touch-Friendly Form Controls
|
||||
============================================================================= */
|
||||
|
||||
body.yaze-touch-mode input[type="text"],
|
||||
body.yaze-touch-mode input[type="number"],
|
||||
body.yaze-touch-mode input[type="search"],
|
||||
body.yaze-touch-mode input[type="email"],
|
||||
body.yaze-touch-mode input[type="password"],
|
||||
body.yaze-touch-mode select,
|
||||
body.yaze-touch-mode textarea {
|
||||
min-height: var(--yaze-min-touch-target);
|
||||
padding: var(--yaze-touch-padding) 12px;
|
||||
font-size: 16px; /* Prevents auto-zoom on iOS */
|
||||
}
|
||||
|
||||
body.yaze-touch-mode input[type="checkbox"],
|
||||
body.yaze-touch-mode input[type="radio"] {
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
|
||||
/* Add padding around checkboxes for easier tapping */
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Touch-Friendly Scrollbars
|
||||
Larger, more visible scrollbars for touch interaction
|
||||
============================================================================= */
|
||||
|
||||
body.yaze-touch-mode ::-webkit-scrollbar {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
body.yaze-touch-mode ::-webkit-scrollbar-track {
|
||||
background: rgba(30, 30, 30, 0.3);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
body.yaze-touch-mode ::-webkit-scrollbar-thumb {
|
||||
background: rgba(100, 100, 100, 0.6);
|
||||
border-radius: 8px;
|
||||
border: 2px solid transparent;
|
||||
background-clip: padding-box;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
body.yaze-touch-mode ::-webkit-scrollbar-thumb:hover,
|
||||
body.yaze-touch-mode ::-webkit-scrollbar-thumb:active {
|
||||
background: rgba(140, 140, 140, 0.8);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
/* Firefox scrollbar styling */
|
||||
body.yaze-touch-mode * {
|
||||
scrollbar-width: auto;
|
||||
scrollbar-color: rgba(100, 100, 100, 0.6) rgba(30, 30, 30, 0.3);
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Header and Controls Touch Adaptation
|
||||
============================================================================= */
|
||||
|
||||
body.yaze-touch-mode #header {
|
||||
min-height: 56px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
body.yaze-touch-mode #controls {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
body.yaze-touch-mode #controls button {
|
||||
padding: 10px 20px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/* File input touch styling */
|
||||
body.yaze-touch-mode #rom-input + label,
|
||||
body.yaze-touch-mode .yaze-file-input-label {
|
||||
min-width: var(--yaze-min-touch-target);
|
||||
min-height: var(--yaze-min-touch-target);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--yaze-touch-padding) 16px;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Touch Indicator
|
||||
Shows a visual indicator that touch mode is active
|
||||
============================================================================= */
|
||||
|
||||
.yaze-touch-indicator {
|
||||
position: fixed;
|
||||
top: 70px;
|
||||
right: 20px;
|
||||
background: rgba(14, 99, 156, 0.9);
|
||||
color: white;
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
|
||||
body.yaze-touch-mode .yaze-touch-indicator {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Gesture Hints
|
||||
Visual hints for available gestures
|
||||
============================================================================= */
|
||||
|
||||
.yaze-gesture-hint {
|
||||
position: fixed;
|
||||
bottom: 100px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
z-index: 999;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.yaze-gesture-hint.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.yaze-gesture-hint-icon {
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Zoom Controls Overlay
|
||||
Touch-friendly zoom controls for canvas
|
||||
============================================================================= */
|
||||
|
||||
.yaze-zoom-controls {
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
z-index: 100;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
body.yaze-touch-mode .yaze-zoom-controls {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.yaze-zoom-controls button {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: rgba(37, 37, 38, 0.9);
|
||||
border: 1px solid rgba(62, 62, 66, 0.8);
|
||||
color: #cccccc;
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, transform 0.1s ease;
|
||||
}
|
||||
|
||||
.yaze-zoom-controls button:hover {
|
||||
background: rgba(50, 50, 52, 0.95);
|
||||
}
|
||||
|
||||
.yaze-zoom-controls button:active {
|
||||
transform: scale(0.9);
|
||||
background: rgba(14, 99, 156, 0.9);
|
||||
}
|
||||
|
||||
.yaze-zoom-level {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
background: rgba(37, 37, 38, 0.9);
|
||||
border: 1px solid rgba(62, 62, 66, 0.8);
|
||||
border-radius: 4px;
|
||||
color: #cccccc;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Context Menu Touch Styling
|
||||
Make context menus touch-friendly
|
||||
============================================================================= */
|
||||
|
||||
body.yaze-touch-mode .yaze-context-menu,
|
||||
body.yaze-touch-mode .imgui-context-menu {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
body.yaze-touch-mode .yaze-context-menu-item,
|
||||
body.yaze-touch-mode .imgui-menu-item {
|
||||
min-height: var(--yaze-min-touch-target);
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Touch Keyboard Handling
|
||||
Adjust layout when virtual keyboard appears
|
||||
============================================================================= */
|
||||
|
||||
@media (max-height: 500px) {
|
||||
/* Likely keyboard is open - adjust header */
|
||||
body.yaze-touch-mode #header {
|
||||
min-height: 40px;
|
||||
padding: 4px 12px;
|
||||
}
|
||||
|
||||
body.yaze-touch-mode #header h1 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
body.yaze-touch-mode #controls button {
|
||||
padding: 6px 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
iPad-Specific Styles
|
||||
============================================================================= */
|
||||
|
||||
@supports (-webkit-touch-callout: none) {
|
||||
/* iOS/iPadOS specific */
|
||||
|
||||
body.yaze-touch-mode {
|
||||
/* Prevent overscroll bounce effect */
|
||||
overscroll-behavior: none;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* Safe area insets for notched devices */
|
||||
#header {
|
||||
padding-left: max(20px, env(safe-area-inset-left));
|
||||
padding-right: max(20px, env(safe-area-inset-right));
|
||||
padding-top: max(10px, env(safe-area-inset-top));
|
||||
}
|
||||
|
||||
#canvas-container {
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Touch Mode Transition Animations
|
||||
============================================================================= */
|
||||
|
||||
/* Smooth transition when entering/exiting touch mode */
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea,
|
||||
.yaze-button,
|
||||
[role="button"] {
|
||||
transition:
|
||||
min-width 0.2s ease,
|
||||
min-height 0.2s ease,
|
||||
padding 0.2s ease;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Accessibility - High Contrast Mode
|
||||
============================================================================= */
|
||||
|
||||
@media (prefers-contrast: high) {
|
||||
body.yaze-touch-mode button:focus,
|
||||
body.yaze-touch-mode input:focus,
|
||||
body.yaze-touch-mode select:focus,
|
||||
body.yaze-touch-mode textarea:focus {
|
||||
outline: 3px solid white;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.yaze-touch-ripple {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Reduced Motion Support
|
||||
============================================================================= */
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.yaze-touch-ripple,
|
||||
.yaze-touch-ripple-active {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
body.yaze-touch-mode button:active,
|
||||
body.yaze-touch-mode .yaze-button:active {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.yaze-zoom-controls button:active {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Print Styles - Hide Touch UI
|
||||
============================================================================= */
|
||||
|
||||
@media print {
|
||||
.yaze-touch-ripple,
|
||||
.yaze-touch-indicator,
|
||||
.yaze-gesture-hint,
|
||||
.yaze-zoom-controls {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user