style: update button styles and add bevel-box class for improved UI
All checks were successful
Chore App Build, Test, and Push Docker Images / build-and-push (push) Successful in 2m8s

This commit is contained in:
2026-04-13 16:37:43 -04:00
parent 876d3c5531
commit 3116295980
4 changed files with 16 additions and 5 deletions

View File

@@ -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);
}
</style>