netig/f3-simple-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style

Browse Source
This commit is contained in:
julien
2026-03-28 20:03:09 +01:00
parent f9fa65a5bb
commit f7480eafe7
1 changed files with 24 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
public/assets/app.css
View File

@@ -6,15 +6,20 @@
--color-bg: #f6f8fb; --color-bg: #f6f8fb;
--color-surface: #ffffff; --color-surface: #ffffff;
--color-surface-muted: #eef3f8; --color-surface-muted: #eef3f8;
--color-border: #d9e2ec; --color-border: #d9e2ec;
--color-border-strong: #91a4bb;
--color-text: #122033; --color-text: #122033;
--color-text-soft: #5b6b7f; --color-text-soft: #5b6b7f;
--color-accent: #122033;
--color-accent-contrast: #ffffff;
--color-danger: #b42318;
--color-danger-soft: #fef3f2;
--color-success: #146c43; --color-success: #146c43;
--color-success-soft: #dcfce7; --color-success-bg: #dcfce7;
--color-success-border: #b7ebc6;
--color-danger: #b42318;
--color-danger-bg: #fef3f2;
--color-danger-border: #f7c5c0;
--shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.05); --shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.05);
--shadow-md: 0 16px 40px rgba(15, 23, 42, 0.08); --shadow-md: 0 16px 40px rgba(15, 23, 42, 0.08);
@@ -264,7 +269,7 @@ a {
.nav-toggle-button:focus-visible, .nav-toggle-button:focus-visible,
.mobile-menu__close:hover, .mobile-menu__close:hover,
.mobile-menu__close:focus-visible { .mobile-menu__close:focus-visible {
border-color: #c4d1df; border-color: var(--color-border-strong);
background: var(--color-surface); background: var(--color-surface);
} }
@@ -383,7 +388,7 @@ a {
.mobile-menu__nav .nav-items__link:focus-visible, .mobile-menu__nav .nav-items__link:focus-visible,
.mobile-menu__nav .nav-items__button:hover, .mobile-menu__nav .nav-items__button:hover,
.mobile-menu__nav .nav-items__button:focus-visible { .mobile-menu__nav .nav-items__button:focus-visible {
border-color: #c4d1df; border-color: var(--color-border-strong);
background: var(--color-surface); background: var(--color-surface);
} }
@@ -426,14 +431,14 @@ a {
.flash--success { .flash--success {
color: var(--color-success); color: var(--color-success);
background: var(--color-success-soft); background: var(--color-success-bg);
border-color: #b7ebc6; border-color: var(--color-success-border);
} }
.flash--error { .flash--error {
color: var(--color-danger); color: var(--color-danger);
background: var(--color-danger-soft); background: var(--color-danger-bg);
border-color: #f7c5c0; border-color: var(--color-danger-border);
} }
/* ========================================================= /* =========================================================
@@ -535,14 +540,14 @@ a {
padding: 0.85rem 1rem; padding: 0.85rem 1rem;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: var(--radius-md); border-radius: var(--radius-md);
background: #fff; background: var(--color-surface);
color: var(--color-text); color: var(--color-text);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast); transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
} }
.control:focus { .control:focus {
outline: none; outline: none;
border-color: #91a4bb; border-color: var(--color-border-strong);
box-shadow: var(--focus-ring); box-shadow: var(--focus-ring);
} }
@@ -570,9 +575,9 @@ textarea.control {
.button { .button {
min-height: var(--control-height); min-height: var(--control-height);
padding: 0.7rem 1rem; padding: 0.7rem 1rem;
border: 1px solid var(--color-accent); border: 1px solid var(--color-text);
background: var(--color-accent); background: var(--color-text);
color: var(--color-accent-contrast); color: var(--color-surface);
} }
.button:hover, .button:hover,
@@ -583,7 +588,7 @@ textarea.control {
.button--ghost, .button--ghost,
.tool-button, .tool-button,
.media-picker__item { .media-picker__item {
background: #fff; background: var(--color-surface);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
color: var(--color-text); color: var(--color-text);
} }
@@ -591,7 +596,7 @@ textarea.control {
.button--danger { .button--danger {
background: var(--color-danger); background: var(--color-danger);
border-color: var(--color-danger); border-color: var(--color-danger);
color: #fff; color: var(--color-surface);
} }
.button--small { .button--small {
@@ -610,7 +615,7 @@ textarea.control {
.media-picker__item:hover, .media-picker__item:hover,
.media-picker__item:focus-visible { .media-picker__item:focus-visible {
outline: none; outline: none;
border-color: #91a4bb; border-color: var(--color-border-strong);
box-shadow: var(--focus-ring); box-shadow: var(--focus-ring);
} }