diff --git a/frontend/vue-app/public/nav/children.png b/frontend/vue-app/public/nav/children.png index 6b5733f..fddd3a3 100644 Binary files a/frontend/vue-app/public/nav/children.png and b/frontend/vue-app/public/nav/children.png differ diff --git a/frontend/vue-app/public/nav/children1.png b/frontend/vue-app/public/nav/children1.png deleted file mode 100644 index fddd3a3..0000000 Binary files a/frontend/vue-app/public/nav/children1.png and /dev/null differ diff --git a/frontend/vue-app/src/assets/colors.css b/frontend/vue-app/src/assets/colors.css index 9495bab..7e86726 100644 --- a/frontend/vue-app/src/assets/colors.css +++ b/frontend/vue-app/src/assets/colors.css @@ -4,6 +4,7 @@ --accent: #cbd5e1; --header-bg: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); --button-bg: #fff; + --button-bg-inactive: #f3f3f3f3; --button-active-bg: var(--secondary); --button-hover-bg: #e6eaff; --button-text: var(--primary); diff --git a/frontend/vue-app/src/layout/ParentLayout.vue b/frontend/vue-app/src/layout/ParentLayout.vue index f909681..bef8a2a 100644 --- a/frontend/vue-app/src/layout/ParentLayout.vue +++ b/frontend/vue-app/src/layout/ParentLayout.vue @@ -260,11 +260,11 @@ onUnmounted(() => { height: 100%; display: flex; align-items: center; - background: var(--button-bg); + background: var(--button-bg-inactive, #f3f3f3); color: var(--button-text); border: 0; border-radius: 8px 8px 0 0; - padding: 0.6rem 1.2rem; + padding: 5px 10px; font-weight: 600; cursor: pointer; transition: @@ -276,13 +276,16 @@ onUnmounted(() => { } .view-selector button.active { - background: var(--button-active-bg); color: var(--button-active-text); + background: rgba(255, 255, 255, 1); + box-shadow: + inset 3px 3px 0 rgba(255, 255, 255, 0.8), + inset -3px -3px 0 rgba(0, 0, 0, 0.2); } .nav-icon { - width: 24px; - height: 24px; + width: 40px; + height: 40px; object-fit: contain; opacity: 0.55; transition: opacity 0.18s; @@ -349,4 +352,11 @@ onUnmounted(() => { user-select: none; font-family: monospace; } + +.bevel-box { + background: #ccc; + box-shadow: + inset 2px 2px 0 rgba(255, 255, 255, 0.8), + inset -2px -2px 0 rgba(0, 0, 0, 0.2); +}