nettika/mattercontrol
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adjust theming

Browse source
This commit is contained in:
Nettika 2026-01-29 01:15:37 -08:00
parent fc119626f1
commit b85cb585f9
No known key found for this signature in database
4 changed files with 23 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/PrimitivesSidebar.vue
View file

@ -53,7 +53,7 @@ function toggle() {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: rgba(30, 30, 46, 0.85); background: rgba(34, 34, 34, 0.9);
border-right: 1px solid var(--color-border); border-right: 1px solid var(--color-border);
overflow: hidden; overflow: hidden;
} }
@ -80,7 +80,7 @@ function toggle() {
top: var(--space-sm); top: var(--space-sm);
left: var(--space-sm); left: var(--space-sm);
right: auto; right: auto;
background: rgba(30, 30, 46, 0.85); background: rgba(34, 34, 34, 0.9);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
} }

12
src/components/PropertiesPanel.vue
View file

@ -1,8 +1,16 @@
<script setup lang="ts"> <script setup lang="ts">
withDefaults(
defineProps<{
visible?: boolean
}>(),
{
visible: false,
}
)
</script> </script>
<template> <template>
<aside class="properties-panel"> <aside v-show="visible" class="properties-panel">
<div class="content"> <div class="content">
<slot /> <slot />
</div> </div>
@ -16,7 +24,7 @@
right: var(--space-md); right: var(--space-md);
bottom: var(--space-md); bottom: var(--space-md);
width: var(--sidebar-width); width: var(--sidebar-width);
background: rgba(30, 30, 46, 0.85); background: rgba(34, 34, 34, 0.7);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: var(--radius-md); border-radius: var(--radius-md);
display: flex; display: flex;

2
src/components/Viewport.vue
View file

@ -41,7 +41,7 @@ function initScene() {
// Create scene // Create scene
scene = new THREE.Scene() scene = new THREE.Scene()
scene.background = new THREE.Color(0x1a1a2e) scene.background = new THREE.Color(0x1a1a1a)
// Create cameras // Create cameras
const { clientWidth: width, clientHeight: height } = containerRef.value const { clientWidth: width, clientHeight: height } = containerRef.value

20
src/style.css
View file

@ -1,20 +1,20 @@
:root { :root {
/* Colors - Dark Theme */ /* Colors - Dark Theme */
--color-bg-primary: #1a1a2e; --color-bg-primary: #1a1a1a;
--color-bg-secondary: #1e1e2e; --color-bg-secondary: #222222;
--color-bg-tertiary: #252538; --color-bg-tertiary: #2a2a2a;
--color-bg-viewport: #1a1a2e; --color-bg-viewport: #1a1a1a;
--color-border: #2a2a3e; --color-border: #333333;
--color-border-light: #3a3a4e; --color-border-light: #444444;
--color-text-primary: #e0e0e0; --color-text-primary: #e0e0e0;
--color-text-secondary: #a0a0a0; --color-text-secondary: #a0a0a0;
--color-text-muted: #666; --color-text-muted: #666666;
--color-accent: #4a90d9; --color-accent: #808080;
--color-accent-hover: #5aa0e9; --color-accent-hover: #909090;
--color-accent-active: #3a80c9; --color-accent-active: #707070;
--color-success: #4caf50; --color-success: #4caf50;
--color-warning: #ff9800; --color-warning: #ff9800;