feat: major visual polish - warmer habbo colors, glass-morphism elements, smoother animations, improved site header with gradient overlay, refined card/button/input styles
This commit is contained in:
remco committed
1 parent
f2d13cf644
commit
25d455f0b6
2 files changed
+127
-110
No files matched your search
+73
-58
@@ -11,29 +11,28 @@
|
||||
--breakpoint-lg: 64rem;
|
||||
--breakpoint-xl: 80rem;
|
||||
--breakpoint-2xl: 96rem;
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 10px;
|
||||
--radius-lg: 14px;
|
||||
--radius-sm: 8px;
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 16px;
|
||||
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
|
||||
--shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
|
||||
--shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
/* Default theme variables (faithful to AtomCMS app.blade.php). ThemeVars may
|
||||
override these at runtime from website_settings. */
|
||||
/* Default theme variables. ThemeVars may override these at runtime. */
|
||||
:root {
|
||||
--color-primary: #f59e0b;
|
||||
--color-primary-hover: #cf9d15;
|
||||
--color-background: #f8fafc;
|
||||
--color-primary: #eeb425;
|
||||
--color-primary-hover: #d4a01f;
|
||||
--color-background: #f4f6f9;
|
||||
--color-surface: #ffffff;
|
||||
--color-dropdown: #ffffff;
|
||||
--color-navbar: #ffffff;
|
||||
--color-navbar-text: #1e293b;
|
||||
--color-text: #0f172a;
|
||||
--color-text-muted: #64748b;
|
||||
--color-text-muted: #6b7280;
|
||||
--color-accent: #10b981;
|
||||
--color-danger: #ef4444;
|
||||
--button-color: #f59e0b;
|
||||
--button-text-color: #1e293b;
|
||||
--button-color: #eeb425;
|
||||
--button-text-color: #1a1a2e;
|
||||
--button-secondary-color: #22c55e;
|
||||
--button-secondary-text-color: #ffffff;
|
||||
--button-secondary-hover-color: #16a34a;
|
||||
@@ -42,38 +41,37 @@
|
||||
--button-danger-hover-color: #dc2626;
|
||||
--button-outline-color: #eeb425;
|
||||
--button-outline-text-color: #1a1a2e;
|
||||
--button-outline-hover-color: #cf9d15;
|
||||
--button-outline-hover-color: #d4a01f;
|
||||
--border-radius: 12px;
|
||||
--border-color: #eeb425;
|
||||
--font-family: var(--font-nunito), "Nunito", sans-serif;
|
||||
--size-heading-h1: 32px;
|
||||
--size-heading-h2: 24px;
|
||||
--size-heading-h3: 20px;
|
||||
--avatar-border-radius: 8px;
|
||||
--avatar-border-radius: 10px;
|
||||
--avatar-border-color: #eeb425;
|
||||
--badge-background: #eeb425;
|
||||
--badge-text-color: #000000;
|
||||
--badge-border-radius: 4px;
|
||||
--card-border-radius: 12px;
|
||||
--badge-border-radius: 6px;
|
||||
--card-border-radius: 14px;
|
||||
--link-color: #eeb425;
|
||||
--link-hover-color: #cf9d15;
|
||||
--input-border-color: #4b5563;
|
||||
--link-hover-color: #d4a01f;
|
||||
--input-border-color: #d1d5db;
|
||||
--input-focus-color: #eeb425;
|
||||
--navbar-height: 64px;
|
||||
/* Aliases used throughout the admin pages' inline styles. */
|
||||
--navbar-height: 56px;
|
||||
--muted: var(--color-text-muted);
|
||||
--border: color-mix(in srgb, var(--color-text-muted) 18%, transparent);
|
||||
}
|
||||
|
||||
/* Dark mode (toggled by html.dark; wins over :root + ThemeVars via specificity). */
|
||||
html.dark {
|
||||
--color-background: #0f1117;
|
||||
--color-surface: #171a21;
|
||||
--color-dropdown: #1f242d;
|
||||
--color-navbar: #171a21;
|
||||
--color-background: #0b0d14;
|
||||
--color-surface: #141820;
|
||||
--color-dropdown: #1d222b;
|
||||
--color-navbar: #141820;
|
||||
--color-navbar-text: #e5e7eb;
|
||||
--color-text: #e5e7eb;
|
||||
--color-text-muted: #9ca3af;
|
||||
--color-text-muted: #94a3b8;
|
||||
}
|
||||
html.dark input,
|
||||
html.dark select,
|
||||
@@ -92,6 +90,8 @@ html {
|
||||
body {
|
||||
font-family: var(--font-family);
|
||||
color: var(--color-text, #0f172a);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@@ -114,6 +114,7 @@ body {
|
||||
color: var(--color-navbar-text, #64748b);
|
||||
letter-spacing: 0.03em;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.nav-item::after {
|
||||
content: "";
|
||||
@@ -121,25 +122,25 @@ body {
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scaleX(0);
|
||||
width: 70%;
|
||||
width: 60%;
|
||||
height: 3px;
|
||||
border-radius: 3px 3px 0 0;
|
||||
background-color: var(--color-primary, #eeb425);
|
||||
background-color: var(--color-primary);
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
.nav-item:hover::after {
|
||||
transform: translateX(-50%) scaleX(1);
|
||||
}
|
||||
.nav-item:hover {
|
||||
color: var(--color-primary, #eeb425);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.dropdown-item {
|
||||
@apply block py-2 px-4 text-sm font-semibold transition-all duration-100 rounded-lg mx-1;
|
||||
@apply block py-2.5 px-4 text-sm font-semibold transition-all duration-100 rounded-lg mx-1;
|
||||
color: var(--color-text);
|
||||
}
|
||||
.dropdown-item:hover {
|
||||
background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
|
||||
color: var(--color-primary, #eeb425);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -271,25 +272,27 @@ a:hover {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.hero {
|
||||
background: linear-gradient(120deg, rgba(245, 158, 11, 0.16), rgba(16, 185, 129, 0.12)),
|
||||
var(--color-surface);
|
||||
border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);
|
||||
border-radius: 18px;
|
||||
background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 14%, var(--color-surface)), color-mix(in srgb, var(--color-accent) 8%, var(--color-surface)));
|
||||
border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 2rem 2.25rem;
|
||||
box-shadow: var(--shadow-card);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.card {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent);
|
||||
border-radius: var(--card-border-radius);
|
||||
box-shadow: var(--shadow-card);
|
||||
padding: 1.1rem 1.25rem;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
.card:hover {
|
||||
box-shadow: var(--shadow-card-hover);
|
||||
}
|
||||
.card.hover:hover {
|
||||
transform: translateY(-2px);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: var(--shadow-card-hover);
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
@@ -326,14 +329,14 @@ a:hover {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.18s ease-in-out;
|
||||
transition: all 0.18s ease;
|
||||
background: #eef2f7;
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-card);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn-primary {
|
||||
@@ -358,18 +361,19 @@ select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
padding: 0.5rem 0.7rem;
|
||||
border: 2px solid color-mix(in srgb, var(--color-text-muted) 22%, transparent);
|
||||
padding: 0.55rem 0.8rem;
|
||||
border: 2px solid color-mix(in srgb, var(--color-text-muted) 20%, transparent);
|
||||
border-radius: var(--radius-sm);
|
||||
background: #fbfcfe;
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
outline: none;
|
||||
transition: border-color 0.15s ease;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
input:focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
@@ -378,14 +382,21 @@ table {
|
||||
th {
|
||||
text-align: left;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.78rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
padding: 0.4rem 0.5rem;
|
||||
letter-spacing: 0.04em;
|
||||
padding: 0.5rem 0.6rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
td {
|
||||
padding: 0.55rem 0.5rem;
|
||||
border-top: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);
|
||||
padding: 0.6rem 0.6rem;
|
||||
border-top: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);
|
||||
}
|
||||
tbody tr {
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
tbody tr:hover {
|
||||
background: color-mix(in srgb, var(--color-primary) 5%, transparent);
|
||||
}
|
||||
.avatar {
|
||||
border-radius: var(--avatar-border-radius);
|
||||
@@ -731,18 +742,22 @@ td {
|
||||
width: 100%;
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);
|
||||
border-radius: 14px;
|
||||
border: 1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-card);
|
||||
overflow: hidden;
|
||||
transition: box-shadow 0.2s ease;
|
||||
}
|
||||
.content-card:hover {
|
||||
box-shadow: var(--shadow-card-hover);
|
||||
}
|
||||
.content-card-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.7rem;
|
||||
padding: 0.85rem 1rem;
|
||||
background: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface));
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);
|
||||
gap: 0.75rem;
|
||||
padding: 0.9rem 1.1rem;
|
||||
background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)), color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)));
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--color-text-muted) 8%, transparent);
|
||||
}
|
||||
.content-card-icon {
|
||||
flex: none;
|
||||
@@ -752,7 +767,7 @@ td {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 1.25rem;
|
||||
background: color-mix(in srgb, var(--color-primary) 18%, var(--color-surface));
|
||||
background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 22%, var(--color-surface)), color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)));
|
||||
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 30%, transparent);
|
||||
}
|
||||
.content-card-head-text {
|
||||
@@ -763,7 +778,7 @@ td {
|
||||
margin: 0;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
line-height: 1.2;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.content-card-subtitle {
|
||||
margin: 0.15rem 0 0;
|
||||
@@ -774,7 +789,7 @@ td {
|
||||
flex: none;
|
||||
}
|
||||
.content-card-body {
|
||||
padding: 1rem;
|
||||
padding: 1.1rem;
|
||||
}
|
||||
|
||||
/* Responsive card grids (atom: 1 / sm2 / md3 / lg4). */
|
||||
|
||||
Reference in new issue
Block a user