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:
parent
22af32c722
commit
a1342e4fda
10
src/app.css
10
src/app.css
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue