Dashboard polish: banner brand, borderless forms, fix sidebar clipping

- Use intelidom_banner.svg as the sidebar brand instead of text
- Remove borders from admin cards, inputs, user rows, login inputs and
  ghost buttons (subtle fills / focus outlines instead)
- Fix sidebar clipping: height:100vh + padding overflowed the viewport;
  add box-sizing:border-box (+ overflow-y safety), drop divider borders

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Matic Ivešić 2026-08-02 21:23:13 +02:00
parent 22af32c722
commit a1342e4fda
4 changed files with 30 additions and 19 deletions

View File

@ -40,7 +40,6 @@ body {
} }
.admin-card { .admin-card {
background: #11161a; background: #11161a;
border: 1px solid rgba(229, 228, 234, 0.12);
border-radius: 12px; border-radius: 12px;
padding: 1.4em; padding: 1.4em;
display: flex; display: flex;
@ -56,7 +55,7 @@ body {
} }
.admin-input { .admin-input {
background: #0a0d0f; background: #0a0d0f;
border: 1px solid rgba(229, 228, 234, 0.2); border: none;
border-radius: 8px; border-radius: 8px;
padding: 0.6em 0.7em; padding: 0.6em 0.7em;
color: #e5e4ea; color: #e5e4ea;
@ -65,6 +64,10 @@ body {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
} }
.admin-input:focus-visible {
outline: 2px solid rgba(66, 175, 56, 0.6);
outline-offset: 1px;
}
.admin-btn { .admin-btn {
background: #42af38; background: #42af38;
color: #06210a; color: #06210a;
@ -86,9 +89,8 @@ body {
color: #fff; color: #fff;
} }
.admin-btn-ghost { .admin-btn-ghost {
background: transparent; background: rgba(255, 255, 255, 0.08);
color: #e5e4ea; color: #e5e4ea;
border: 1px solid rgba(229, 228, 234, 0.3);
} }
.admin-msg { .admin-msg {
margin: 0; margin: 0;

View File

@ -2,6 +2,7 @@
import { page } from '$app/state'; import { page } from '$app/state';
import type { Snippet } from 'svelte'; import type { Snippet } from 'svelte';
import type { LayoutData } from './$types'; import type { LayoutData } from './$types';
import intelidom_banner from '$lib/assets/intelidom_banner.svg';
let { data, children }: { data: LayoutData; children: Snippet } = $props(); let { data, children }: { data: LayoutData; children: Snippet } = $props();
@ -23,7 +24,7 @@
<div class="dash"> <div class="dash">
<aside class="sidebar"> <aside class="sidebar">
<div class="brand"> <div class="brand">
<a href="/">InteliDom</a> <a href="/"><img src={intelidom_banner} alt="InteliDom" /></a>
<span>Admin</span> <span>Admin</span>
</div> </div>
@ -70,7 +71,7 @@
.sidebar { .sidebar {
background: #11161a; background: #11161a;
border-bottom: 1px solid rgba(229, 228, 234, 0.1); box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1em; gap: 1em;
@ -79,20 +80,25 @@
.brand { .brand {
display: flex; display: flex;
align-items: baseline; flex-direction: column;
gap: 0.5em; align-items: flex-start;
gap: 0.25em;
} }
.brand a { .brand a {
color: #42af38; display: block;
font-weight: 700; line-height: 0;
font-size: 1.2em; }
text-decoration: none;
.brand img {
width: 100%;
max-width: 150px;
display: block;
} }
.brand span { .brand span {
color: #9aa0a6; color: #9aa0a6;
font-size: 0.8em; font-size: 0.75em;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.08em; letter-spacing: 0.08em;
} }
@ -150,9 +156,9 @@
} }
.logout { .logout {
background: transparent; background: rgba(255, 255, 255, 0.08);
color: #e5e4ea; color: #e5e4ea;
border: 1px solid rgba(229, 228, 234, 0.3); border: none;
border-radius: 8px; border-radius: 8px;
padding: 0.5em 1em; padding: 0.5em 1em;
font-family: inherit; font-family: inherit;
@ -179,11 +185,10 @@
.sidebar { .sidebar {
width: 220px; width: 220px;
flex-shrink: 0; flex-shrink: 0;
border-bottom: none;
border-right: 1px solid rgba(229, 228, 234, 0.1);
position: sticky; position: sticky;
top: 0; top: 0;
height: 100vh; height: 100vh;
overflow-y: auto;
} }
nav { nav {

View File

@ -120,7 +120,6 @@
.user-row { .user-row {
background: #11161a; background: #11161a;
border: 1px solid rgba(229, 228, 234, 0.12);
border-radius: 10px; border-radius: 10px;
padding: 0.9em 1em; padding: 0.9em 1em;
display: flex; display: flex;

View File

@ -74,7 +74,7 @@
input { input {
background: #0a0d0f; background: #0a0d0f;
border: 1px solid rgba(229, 228, 234, 0.2); border: none;
border-radius: 8px; border-radius: 8px;
padding: 0.6em 0.7em; padding: 0.6em 0.7em;
color: #e5e4ea; color: #e5e4ea;
@ -82,6 +82,11 @@
font-size: 1em; font-size: 1em;
} }
input:focus-visible {
outline: 2px solid rgba(66, 175, 56, 0.6);
outline-offset: 1px;
}
button { button {
background: #42af38; background: #42af38;
color: #06210a; color: #06210a;