diff --git a/src/app.css b/src/app.css index 60d1e18..a6f9670 100644 --- a/src/app.css +++ b/src/app.css @@ -27,3 +27,23 @@ body { height: 100vh; overflow: hidden; } + +/* Sharp-corner visual language across UI */ +button, +input, +textarea, +select, +[role="button"], +[class*="panel"], +[class*="modal"], +[class*="container"], +[class*="toast"], +[class*="card"] { + border-radius: 0; +} + +/* Remove rounded corners from icon rectangles as well */ +svg rect { + rx: 0 !important; + ry: 0 !important; +} diff --git a/src/components/code/CodeConsole.svelte b/src/components/code/CodeConsole.svelte index 953cb87..86e0100 100644 --- a/src/components/code/CodeConsole.svelte +++ b/src/components/code/CodeConsole.svelte @@ -131,7 +131,7 @@ const formattedTime = $derived( background: #3e3e42; color: #cccccc; border: none; - border-radius: 3px; + border-radius: 0; cursor: pointer; font-size: 11px; transition: background 0.1s; @@ -153,7 +153,7 @@ const formattedTime = $derived( padding: 8px 12px; border-left: 3px solid #f48771; margin-bottom: 12px; - border-radius: 3px; + border-radius: 0; } .stdout pre, diff --git a/src/components/code/ConfirmModal.svelte b/src/components/code/ConfirmModal.svelte index 5e614ce..0e91d30 100644 --- a/src/components/code/ConfirmModal.svelte +++ b/src/components/code/ConfirmModal.svelte @@ -73,7 +73,7 @@ function handleKeydown(event: KeyboardEvent) { .modal-content { background: #252526; border: 1px solid #3e3e42; - border-radius: 4px; + border-radius: 0; padding: 24px; min-width: 300px; max-width: 500px; @@ -97,7 +97,7 @@ function handleKeydown(event: KeyboardEvent) { .confirm-button { padding: 8px 16px; border: none; - border-radius: 3px; + border-radius: 0; font-size: 13px; cursor: pointer; transition: background-color 0.1s; diff --git a/src/components/code/EditorLayout.svelte b/src/components/code/EditorLayout.svelte index 3e606e7..154a072 100644 --- a/src/components/code/EditorLayout.svelte +++ b/src/components/code/EditorLayout.svelte @@ -522,7 +522,7 @@ const executeButtonLabel = $derived( padding: 6px 10px; background: transparent; border: 1px solid #3e3e42; - border-radius: 3px; + border-radius: 0; font-size: 16px; cursor: pointer; transition: background-color 0.1s; @@ -548,7 +548,7 @@ const executeButtonLabel = $derived( background: #0e639c; color: white; border: none; - border-radius: 3px; + border-radius: 0; cursor: pointer; font-size: 13px; font-weight: 500; @@ -570,7 +570,7 @@ const executeButtonLabel = $derived( background: #3e3e42; color: #cccccc; border: none; - border-radius: 3px; + border-radius: 0; cursor: pointer; font-size: 16px; line-height: 1; @@ -639,7 +639,7 @@ const executeButtonLabel = $derived( background: transparent; color: #cccccc; border: none; - border-radius: 3px; + border-radius: 0; cursor: pointer; font-size: 13px; transition: background 0.1s; diff --git a/src/components/code/ExampleSelector.svelte b/src/components/code/ExampleSelector.svelte index a190157..7d91f81 100644 --- a/src/components/code/ExampleSelector.svelte +++ b/src/components/code/ExampleSelector.svelte @@ -91,7 +91,7 @@ $effect(() => { padding: 4px 8px; background: transparent; border: 1px solid #3e3e42; - border-radius: 3px; + border-radius: 0; color: #d4d4d4; font-size: 13px; cursor: pointer; @@ -123,7 +123,7 @@ $effect(() => { max-width: 500px; background: #252526; border: 1px solid #3e3e42; - border-radius: 3px; + border-radius: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); z-index: 1000; max-height: 400px; diff --git a/src/components/comments/CommentBubble.svelte b/src/components/comments/CommentBubble.svelte index fa2b101..c644f0b 100644 --- a/src/components/comments/CommentBubble.svelte +++ b/src/components/comments/CommentBubble.svelte @@ -89,7 +89,7 @@ function handleTimestampClick(event: MouseEvent | KeyboardEvent): void { /* Dark theme styling - match other panels */ background: rgba(0, 0, 0, 0.9); border: 1px solid #444; - border-radius: 4px; + border-radius: 0; /* NO ANIMATIONS */ transition: none; @@ -101,7 +101,7 @@ function handleTimestampClick(event: MouseEvent | KeyboardEvent): void { display: flex; align-items: center; justify-content: center; - border-radius: 50%; + border-radius: 0; } .comment-bubble.preview, diff --git a/src/components/comments/CommentInputModal.svelte b/src/components/comments/CommentInputModal.svelte index 7e28fa0..7a1a92f 100644 --- a/src/components/comments/CommentInputModal.svelte +++ b/src/components/comments/CommentInputModal.svelte @@ -157,7 +157,7 @@ $effect(() => { .modal-content { background: rgba(0, 0, 0, 0.95); border: 1px solid #444; - border-radius: 4px; + border-radius: 0; padding: 20px; min-width: 400px; max-width: 600px; @@ -184,7 +184,7 @@ $effect(() => { padding: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid #555; - border-radius: 4px; + border-radius: 0; color: #fff; font-family: monospace; font-size: 14px; @@ -226,7 +226,7 @@ $effect(() => { button { padding: 8px 16px; border: 1px solid #555; - border-radius: 4px; + border-radius: 0; background: rgba(255, 255, 255, 0.05); color: #ccc; font-family: monospace; diff --git a/src/components/comments/CommentPanel.svelte b/src/components/comments/CommentPanel.svelte index b592ac9..b77fedb 100644 --- a/src/components/comments/CommentPanel.svelte +++ b/src/components/comments/CommentPanel.svelte @@ -493,10 +493,10 @@ onDestroy(() => { > {#if permissions.viewersCanComment} - + {:else} - + {/if} @@ -633,7 +633,7 @@ onDestroy(() => { max-height: 600px; background: rgba(0, 0, 0, 0.9); border: 1px solid #444; - border-radius: 4px; + border-radius: 0; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); overflow: hidden; user-select: none; @@ -698,7 +698,7 @@ onDestroy(() => { padding: 8px 12px; background: rgba(40, 40, 40, 0.8); border: 1px solid #555; - border-radius: 4px; + border-radius: 0; color: #ccc; font-size: 11px; cursor: pointer; @@ -745,7 +745,7 @@ onDestroy(() => { padding: 10px; background: rgba(20, 20, 20, 0.6); border: 1px solid #333; - border-radius: 4px; + border-radius: 0; } .comment-item:hover { @@ -773,7 +773,7 @@ onDestroy(() => { padding: 0; background: rgba(50, 50, 50, 0.9); border: 1px solid #555; - border-radius: 2px; + border-radius: 0; color: #ccc; font-size: 11px; cursor: pointer; @@ -827,7 +827,7 @@ onDestroy(() => { padding: 4px 8px; background: rgba(40, 40, 40, 0.6); border: 1px solid #444; - border-radius: 3px; + border-radius: 0; color: #aaa; font-size: 10px; cursor: pointer; @@ -870,7 +870,7 @@ onDestroy(() => { min-height: 56px; background: rgba(10, 10, 10, 0.9); border: 1px solid #444; - border-radius: 3px; + border-radius: 0; color: #ccc; font-family: monospace; font-size: 11px; diff --git a/src/components/ui/DesktopFileControls.svelte b/src/components/ui/DesktopFileControls.svelte index 934db4e..096e42d 100644 --- a/src/components/ui/DesktopFileControls.svelte +++ b/src/components/ui/DesktopFileControls.svelte @@ -181,7 +181,7 @@ $effect(() => { padding: 0.5rem 0.75rem; background-color: #2a2a2a; border: 1px solid #444; - border-radius: 0.375rem; + border-radius: 0; color: #e5e7eb; font-size: 0.875rem; cursor: pointer; @@ -210,7 +210,7 @@ $effect(() => { padding: 0.5rem 0.75rem; background-color: #1e293b; border: 1px solid #475569; - border-radius: 0.375rem; + border-radius: 0; color: #94a3b8; font-size: 0.875rem; font-style: italic; diff --git a/src/components/ui/ErrorToast.svelte b/src/components/ui/ErrorToast.svelte index cc4b881..16f3b91 100644 --- a/src/components/ui/ErrorToast.svelte +++ b/src/components/ui/ErrorToast.svelte @@ -26,7 +26,7 @@ const { message, onDismiss }: Props = $props(); .error-content { background-color: #3a1a1a; border: 1px solid #ff4444; - border-radius: 8px; + border-radius: 0; padding: 1rem 1.5rem; max-width: 500px; max-height: 80vh; @@ -53,7 +53,7 @@ const { message, onDismiss }: Props = $props(); background-color: #ff4444; color: #fff; border: none; - border-radius: 4px; + border-radius: 0; padding: 0.5rem 1rem; font-size: 0.875rem; cursor: pointer; diff --git a/src/components/ui/FileUpload.svelte b/src/components/ui/FileUpload.svelte index be6e83b..7ad9d8d 100644 --- a/src/components/ui/FileUpload.svelte +++ b/src/components/ui/FileUpload.svelte @@ -263,12 +263,12 @@ function triggerFileInput() { {:else if example.category === 'digital'} - + {:else} - + {/if} @@ -306,7 +306,7 @@ function triggerFileInput() { - diff --git a/src/components/ui/Minimap.svelte b/src/components/ui/Minimap.svelte index a217617..62466ba 100644 --- a/src/components/ui/Minimap.svelte +++ b/src/components/ui/Minimap.svelte @@ -406,7 +406,7 @@ onDestroy(() => { .minimap-panel { position: fixed; background: rgba(0, 0, 0, 0.9); - border-radius: 4px; + border-radius: 0; font-family: monospace; font-size: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); @@ -449,7 +449,7 @@ onDestroy(() => { .minimap-content canvas { display: block; - border-radius: 0 0 4px 4px; + border-radius: 0; } .resize-handle { @@ -460,7 +460,7 @@ onDestroy(() => { height: 16px; cursor: se-resize; background: linear-gradient(135deg, transparent 50%, rgba(255, 255, 255, 0.3) 50%); - border-radius: 0 0 4px 0; + border-radius: 0; } .minimap-panel.collapsed { diff --git a/src/components/ui/MobileControls.svelte b/src/components/ui/MobileControls.svelte index f911539..3f4525f 100644 --- a/src/components/ui/MobileControls.svelte +++ b/src/components/ui/MobileControls.svelte @@ -176,7 +176,7 @@ function handleClearMeasurements() { @@ -403,7 +403,7 @@ function handleClearMeasurements() { padding: 12px 16px; background: rgba(30, 30, 30, 0.95); border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 8px; + border-radius: 0; color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; @@ -462,7 +462,7 @@ function handleClearMeasurements() { padding: 10px 14px; background: rgba(20, 20, 20, 0.95); border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 6px; + border-radius: 0; color: rgba(255, 255, 255, 0.9); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 13px; @@ -498,7 +498,7 @@ function handleClearMeasurements() { .fab { width: 56px; height: 56px; - border-radius: 50%; + border-radius: 0; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; color: white; diff --git a/src/components/ui/ParticipantList.svelte b/src/components/ui/ParticipantList.svelte index ee11c6b..fa7f1b7 100644 --- a/src/components/ui/ParticipantList.svelte +++ b/src/components/ui/ParticipantList.svelte @@ -254,7 +254,7 @@ function cancelTransfer() { max-height: 300px; background: rgba(0, 0, 0, 0.9); color: #ccc; - border-radius: 4px; + border-radius: 0; font-family: monospace; font-size: 12px; /* z-index set via inline style from panelZIndexStore */ @@ -327,7 +327,7 @@ function cancelTransfer() { align-items: center; gap: 8px; padding: 6px 4px; - border-radius: 3px; + border-radius: 0; } .participant-item:hover { @@ -337,7 +337,7 @@ function cancelTransfer() { .color-indicator { width: 12px; height: 12px; - border-radius: 50%; + border-radius: 0; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, 0.2); } @@ -361,7 +361,7 @@ function cancelTransfer() { font-size: 10px; font-weight: 600; padding: 2px 6px; - border-radius: 3px; + border-radius: 0; background-color: #4a9eff; color: #fff; text-transform: uppercase; @@ -370,7 +370,7 @@ function cancelTransfer() { .make-host-btn { font-size: 10px; padding: 2px 6px; - border-radius: 3px; + border-radius: 0; background: #333; color: #aaa; border: 1px solid #555; @@ -438,7 +438,7 @@ function cancelTransfer() { .dialog-panel { background: #1a1a1a; border: 1px solid #444; - border-radius: 8px; + border-radius: 0; padding: 1.5rem; max-width: 400px; width: 90%; @@ -472,7 +472,7 @@ function cancelTransfer() { font-size: 0.875rem; font-weight: 500; border: none; - border-radius: 6px; + border-radius: 0; cursor: pointer; transition: all 0.2s; } diff --git a/src/components/ui/PerformancePanel.svelte b/src/components/ui/PerformancePanel.svelte index 162ee0e..7cae1d2 100644 --- a/src/components/ui/PerformancePanel.svelte +++ b/src/components/ui/PerformancePanel.svelte @@ -416,7 +416,7 @@ function formatDimension(um: number): string { position: fixed; background: rgba(0, 0, 0, 0.85); border: 1px solid #444; - border-radius: 4px; + border-radius: 0; padding: 12px; font-family: monospace; font-size: 11px; diff --git a/src/components/ui/UnitSelectionDialog.svelte b/src/components/ui/UnitSelectionDialog.svelte index 8a589ec..e5f3ab5 100644 --- a/src/components/ui/UnitSelectionDialog.svelte +++ b/src/components/ui/UnitSelectionDialog.svelte @@ -89,7 +89,7 @@ function handleKeydown(e: KeyboardEvent) { .dialog-content { background: #1e1e1e; border: 1px solid #3a3a3a; - border-radius: 8px; + border-radius: 0; padding: 24px; max-width: 500px; width: 90%; @@ -123,7 +123,7 @@ function handleKeydown(e: KeyboardEvent) { padding: 12px; background: #2a2a2a; border: 1px solid #3a3a3a; - border-radius: 4px; + border-radius: 0; cursor: pointer; transition: all 0.2s; } @@ -151,7 +151,7 @@ function handleKeydown(e: KeyboardEvent) { .btn { padding: 10px 20px; border: none; - border-radius: 4px; + border-radius: 0; font-size: 14px; font-weight: 500; cursor: pointer; diff --git a/src/components/viewer/ViewerCanvas.svelte b/src/components/viewer/ViewerCanvas.svelte index 41a697c..ae42638 100644 --- a/src/components/viewer/ViewerCanvas.svelte +++ b/src/components/viewer/ViewerCanvas.svelte @@ -980,7 +980,7 @@ function toggleMinimap() { padding: 12px 20px; background: rgba(78, 205, 196, 0.95); border: 1px solid rgba(255, 255, 255, 0.3); - border-radius: 24px; + border-radius: 0; color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; @@ -1015,7 +1015,7 @@ function toggleMinimap() { padding: 8px 12px; background: rgba(74, 158, 255, 0.9); color: white; - border-radius: 6px; + border-radius: 0; font-family: system-ui, -apple-system, sans-serif; font-size: 13px; font-weight: 500; @@ -1069,7 +1069,7 @@ function toggleMinimap() { padding: 8px 12px; background: rgba(0, 188, 212, 0.9); color: white; - border-radius: 6px; + border-radius: 0; font-family: system-ui, -apple-system, sans-serif; font-size: 13px; font-weight: 500; @@ -1091,7 +1091,7 @@ function toggleMinimap() { padding: 8px 12px; background: rgba(255, 152, 0, 0.9); color: white; - border-radius: 6px; + border-radius: 0; font-family: system-ui, -apple-system, sans-serif; font-size: 13px; font-weight: 500; @@ -1113,7 +1113,7 @@ function toggleMinimap() { padding: 8px 12px; background: rgba(0, 188, 212, 0.9); color: white; - border-radius: 6px; + border-radius: 0; font-family: system-ui, -apple-system, sans-serif; font-size: 13px; font-weight: 500;