structure du projet + docker, back: mise en place BD et apps, front: début de dev pour le header et mise en place du thème et css global (override des variables bootstrap)
This commit is contained in:
+182
@@ -0,0 +1,182 @@
|
||||
:root {
|
||||
/* ============================
|
||||
Base
|
||||
============================ */
|
||||
|
||||
--bs-body-bg: #FEF6F4;
|
||||
--bs-body-color: #34344A;
|
||||
|
||||
--bs-light: #FEF6F4;
|
||||
--bs-light-rgb: 254, 246, 244;
|
||||
|
||||
--bs-dark: #34344A;
|
||||
--bs-dark-rgb: 52, 52, 74;
|
||||
|
||||
|
||||
/* ============================
|
||||
Semantic colors
|
||||
============================ */
|
||||
|
||||
--bs-primary: #845A6D;
|
||||
--bs-primary-rgb: 132, 90, 109;
|
||||
|
||||
--bs-secondary: #C89B7B;
|
||||
--bs-secondary-rgb: 200, 155, 123;
|
||||
|
||||
--bs-success: #32746D;
|
||||
--bs-success-rgb: 50, 116, 109;
|
||||
|
||||
--bs-info: #9A7284;
|
||||
--bs-info-rgb: 154, 114, 132;
|
||||
|
||||
--bs-warning: #C89B7B;
|
||||
--bs-warning-rgb: 200, 155, 123;
|
||||
|
||||
--bs-danger: #D47386;
|
||||
--bs-danger-rgb: 212, 115, 134;
|
||||
|
||||
|
||||
/* ============================
|
||||
Links
|
||||
============================ */
|
||||
|
||||
--bs-link-color: var(--bs-primary);
|
||||
--bs-link-color-rgb: 132, 90, 109;
|
||||
|
||||
/* Hover = primary + dark */
|
||||
--bs-link-hover-color: color-mix(in srgb, var(--bs-primary) 80%, var(--bs-dark));
|
||||
--bs-link-hover-color-rgb: 118, 86, 102;
|
||||
|
||||
|
||||
/* ============================
|
||||
Subtle UI backgrounds
|
||||
============================ */
|
||||
|
||||
--bs-border-color: color-mix(in srgb, var(--bs-dark) 15%, var(--bs-light));
|
||||
--bs-border-color-rgb: 223, 214, 214;
|
||||
|
||||
--bs-primary-bg-subtle: color-mix(in srgb, var(--bs-primary) 12%, var(--bs-light));
|
||||
--bs-primary-bg-subtle-rgb: 243, 229, 233;
|
||||
|
||||
--bs-success-bg-subtle: color-mix(in srgb, var(--bs-success) 12%, var(--bs-light));
|
||||
--bs-success-bg-subtle-rgb: 229, 238, 237;
|
||||
|
||||
--bs-danger-bg-subtle: color-mix(in srgb, var(--bs-danger) 12%, var(--bs-light));
|
||||
--bs-danger-bg-subtle-rgb: 245, 224, 229;
|
||||
|
||||
--bs-secondary-bg: color-mix(in srgb, var(--bs-secondary) 10%, var(--bs-light));
|
||||
--bs-secondary-bg-rgb: 246, 236, 230;
|
||||
|
||||
|
||||
/* ============================
|
||||
Focus ring
|
||||
============================ */
|
||||
|
||||
--bs-focus-ring-color: rgba(132, 90, 109, 0.25);
|
||||
|
||||
|
||||
/* ============================
|
||||
Typography polish
|
||||
============================ */
|
||||
|
||||
--bs-heading-color: var(--bs-dark);
|
||||
|
||||
--bs-secondary-color: color-mix(in srgb, var(--bs-dark) 65%, var(--bs-light));
|
||||
--bs-secondary-color-rgb: 120, 120, 135;
|
||||
}
|
||||
|
||||
|
||||
/* =========================================
|
||||
DARK MODE
|
||||
Trigger: <html data-bs-theme="dark">
|
||||
========================================= */
|
||||
|
||||
[data-bs-theme="dark"] {
|
||||
|
||||
/* ============================
|
||||
Base background + text
|
||||
============================ */
|
||||
|
||||
--bs-body-bg: #1B1B24;
|
||||
--bs-body-color: #FEF6F4;
|
||||
|
||||
--bs-light: #2A2A36;
|
||||
--bs-light-rgb: 42, 42, 54;
|
||||
|
||||
--bs-dark: #FEF6F4;
|
||||
--bs-dark-rgb: 254, 246, 244;
|
||||
|
||||
|
||||
/* ============================
|
||||
Semantic colors
|
||||
============================ */
|
||||
|
||||
--bs-primary: #B08A9C;
|
||||
--bs-primary-rgb: 176, 138, 156;
|
||||
|
||||
--bs-secondary: #C89B7B;
|
||||
--bs-secondary-rgb: 200, 155, 123;
|
||||
|
||||
--bs-success: #4AA89E;
|
||||
--bs-success-rgb: 74, 168, 158;
|
||||
|
||||
--bs-info: #9A7284;
|
||||
--bs-info-rgb: 154, 114, 132;
|
||||
|
||||
--bs-warning: #E2B48E;
|
||||
--bs-warning-rgb: 226, 180, 142;
|
||||
|
||||
--bs-danger: #E08A9C;
|
||||
--bs-danger-rgb: 224, 138, 156;
|
||||
|
||||
|
||||
/* ============================
|
||||
Links
|
||||
============================ */
|
||||
|
||||
--bs-link-color: rgb(var(--bs-primary-rgb));
|
||||
--bs-link-hover-color: color-mix(in srgb, var(--bs-primary) 85%, white);
|
||||
|
||||
|
||||
/* ============================
|
||||
Borders + surfaces
|
||||
============================ */
|
||||
|
||||
--bs-border-color: rgba(255, 255, 255, 0.10);
|
||||
|
||||
--bs-secondary-bg: rgba(var(--bs-primary-rgb), 0.08);
|
||||
--bs-tertiary-bg: rgba(255, 255, 255, 0.04);
|
||||
|
||||
--bs-primary-bg-subtle: rgba(var(--bs-primary-rgb), 0.12);
|
||||
--bs-success-bg-subtle: rgba(var(--bs-success-rgb), 0.12);
|
||||
--bs-danger-bg-subtle: rgba(var(--bs-danger-rgb), 0.12);
|
||||
|
||||
|
||||
/* ============================
|
||||
Focus ring
|
||||
============================ */
|
||||
|
||||
--bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.35);
|
||||
|
||||
|
||||
/* ============================
|
||||
Typography polish
|
||||
============================ */
|
||||
|
||||
--bs-heading-color: #FEF6F4;
|
||||
--bs-secondary-color: rgba(254, 246, 244, 0.70);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* =========================================
|
||||
OTHER VARIABLES
|
||||
========================================= */
|
||||
|
||||
:root {
|
||||
--bs-border-radius: 0.6rem;
|
||||
|
||||
.toast-container>:not(:last-child) {
|
||||
--bs-toast-spacing: 0.6rem;
|
||||
}
|
||||
}
|
||||
+6
File diff suppressed because one or more lines are too long
@@ -0,0 +1,354 @@
|
||||
@font-face {
|
||||
font-family: "Salin";
|
||||
src: url("../fonts/salin.otf") format("opentype");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
color: var(--bs-heading-color);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration-thickness: 1px;
|
||||
text-underline-offset: 0.15em;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration-thickness: 2px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--bs-link-color);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--bs-link-hover-color);
|
||||
}
|
||||
|
||||
/* ---------------------------------------
|
||||
Navbar
|
||||
---------------------------------------- */
|
||||
|
||||
.navbar {
|
||||
border-bottom: 1px solid rgba(var(--bs-border-color-rgb), 1);
|
||||
background: color-mix(in srgb, var(--bs-light) 92%, var(--bs-primary));
|
||||
}
|
||||
|
||||
.navbar .navbar-brand {
|
||||
letter-spacing: 0.03em;
|
||||
color: var(--bs-dark);
|
||||
font-family: "Salin";
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
letter-spacing: 0.03em;
|
||||
color: var(--bs-dark);
|
||||
font-family: "Salin";
|
||||
}
|
||||
|
||||
.logo-img {
|
||||
max-height: 10vh;
|
||||
}
|
||||
|
||||
.navbar .nav-link {
|
||||
color: rgba(var(--bs-dark-rgb), 0.78);
|
||||
border-radius: 999px;
|
||||
padding: 0.4rem 0.75rem;
|
||||
}
|
||||
|
||||
.navbar .nav-link:hover,
|
||||
.navbar .nav-link:focus {
|
||||
color: var(--bs-dark);
|
||||
background: rgba(var(--bs-primary-rgb), 0.08);
|
||||
}
|
||||
|
||||
.navbar .nav-link.active {
|
||||
color: var(--bs-dark);
|
||||
background: rgba(var(--bs-primary-rgb), 0.14);
|
||||
}
|
||||
|
||||
/* ---------------------------------------
|
||||
Buttons
|
||||
---------------------------------------- */
|
||||
|
||||
.btn {
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.005em;
|
||||
box-shadow: 0 1px 0 rgba(var(--bs-dark-rgb), 0.04);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
border-color: rgba(var(--bs-primary-rgb), 0.65);
|
||||
--bs-btn-bg: var(--bs-primary);
|
||||
--bs-btn-border-color: var(--bs-primary);
|
||||
|
||||
--bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 85%, black);
|
||||
--bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 85%, black);
|
||||
|
||||
--bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 75%, black);
|
||||
--bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 75%, black);
|
||||
|
||||
--bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
|
||||
color: rgb(var(--bs-light-rgb)) !important;
|
||||
}
|
||||
|
||||
.btn-primary:hover,
|
||||
.btn-primary:focus {
|
||||
filter: brightness(0.98);
|
||||
box-shadow:
|
||||
0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.18),
|
||||
0 6px 16px rgba(var(--bs-dark-rgb), 0.08);
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
--bs-btn-bg: var(--bs-success);
|
||||
--bs-btn-border-color: var(--bs-success);
|
||||
--bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
|
||||
}
|
||||
|
||||
.btn-success:hover,
|
||||
.btn-success:focus {
|
||||
box-shadow:
|
||||
0 0 0 0.2rem rgba(var(--bs-success-rgb), 0.18),
|
||||
0 6px 16px rgba(var(--bs-dark-rgb), 0.08);
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
--bs-btn-color: var(--bs-primary);
|
||||
--bs-btn-border-color: rgba(var(--bs-primary-rgb), .45);
|
||||
--bs-btn-hover-bg: rgba(var(--bs-primary-rgb), .10);
|
||||
--bs-btn-hover-border-color: rgba(var(--bs-primary-rgb), .45);
|
||||
--bs-btn-active-bg: rgba(var(--bs-primary-rgb), .16);
|
||||
--bs-btn-active-border-color: rgba(var(--bs-primary-rgb), .45);
|
||||
--bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
|
||||
}
|
||||
|
||||
.btn-outline-primary:hover,
|
||||
.btn-outline-primary:focus {
|
||||
background: rgba(var(--bs-primary-rgb), 0.10);
|
||||
color: rgb(var(--bs-primary-rgb));
|
||||
box-shadow:
|
||||
0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.12);
|
||||
}
|
||||
|
||||
/* Icon buttons */
|
||||
.btn.btn-icon {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 999px;
|
||||
box-shadow: 0 0 transparent;
|
||||
}
|
||||
|
||||
.btn.btn-icon:hover,
|
||||
.btn.btn-icon:focus {
|
||||
color: var(--bs-dark);
|
||||
background: rgba(var(--bs-primary-rgb), 0.08);
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------------
|
||||
Dropdowns
|
||||
---------------------------------------- */
|
||||
|
||||
.dropdown-menu .dropdown-item:hover {
|
||||
background: rgba(var(--bs-primary-rgb), .08);
|
||||
}
|
||||
|
||||
/* ---------------------------------------
|
||||
Cards / containers
|
||||
---------------------------------------- */
|
||||
|
||||
.card {
|
||||
border-radius: 1.25rem;
|
||||
border: 1px solid rgba(var(--bs-border-color-rgb), 1);
|
||||
background: rgba(var(--bs-light-rgb), 0.85);
|
||||
box-shadow: 0 2px 10px rgba(var(--bs-dark-rgb), 0.04);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
border-bottom: 1px solid rgba(var(--bs-border-color-rgb), 1);
|
||||
background: rgba(var(--bs-light-rgb), 0.94);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
--bs-card-spacer-y: 0.5rem;
|
||||
--bs-card-spacer-x: 0.5rem;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
/* border-top: 1px solid rgba(var(--bs-border-color-rgb), 1); */
|
||||
border-top: none;
|
||||
background: rgba(var(--bs-light-rgb), 0.94);
|
||||
}
|
||||
|
||||
/* ---------------------------------------
|
||||
Badges
|
||||
---------------------------------------- */
|
||||
|
||||
.badge {
|
||||
border-radius: 999px;
|
||||
font-weight: 600;
|
||||
padding: 0.4em 0.7em;
|
||||
}
|
||||
|
||||
.badge.text-bg-primary {
|
||||
background: var(--bs-primary) !important;
|
||||
color: rgb(var(--bs-light-rgb)) !important;
|
||||
border: 1px solid rgba(var(--bs-primary-rgb), 0.20);
|
||||
}
|
||||
|
||||
.badge.text-bg-success {
|
||||
background: rgba(var(--bs-success-rgb), 0.14) !important;
|
||||
color: rgb(var(--bs-success-rgb)) !important;
|
||||
border: 1px solid rgba(var(--bs-success-rgb), 0.20);
|
||||
}
|
||||
|
||||
.badge.text-bg-danger {
|
||||
background: rgba(var(--bs-danger-rgb), 0.14) !important;
|
||||
color: rgb(var(--bs-danger-rgb)) !important;
|
||||
border: 1px solid rgba(var(--bs-danger-rgb), 0.20);
|
||||
}
|
||||
|
||||
.badge.text-bg-warning {
|
||||
background: rgba(var(--bs-warning-rgb), 0.18) !important;
|
||||
color: rgb(var(--bs-dark-rgb)) !important;
|
||||
border: 1px solid rgba(var(--bs-warning-rgb), 0.22);
|
||||
}
|
||||
|
||||
/* ---------------------------------------
|
||||
Forms
|
||||
---------------------------------------- */
|
||||
|
||||
.form-control,
|
||||
.form-select {
|
||||
border-color: rgba(var(--bs-border-color-rgb), 1);
|
||||
background: rgba(var(--bs-light-rgb), 0.95);
|
||||
}
|
||||
|
||||
.form-control:focus,
|
||||
.form-select:focus {
|
||||
border-color: rgba(var(--bs-primary-rgb), 0.45);
|
||||
box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.18);
|
||||
}
|
||||
|
||||
/* Checkboxes/switches */
|
||||
.form-check-input:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.18);
|
||||
}
|
||||
|
||||
.form-check-input:checked {
|
||||
background-color: rgb(var(--bs-primary-rgb));
|
||||
border-color: rgb(var(--bs-primary-rgb));
|
||||
}
|
||||
|
||||
/* ---------------------------------------
|
||||
Alerts (soft)
|
||||
---------------------------------------- */
|
||||
|
||||
.alert {
|
||||
border-radius: 1rem;
|
||||
border: 1px solid rgba(var(--bs-border-color-rgb), 1);
|
||||
background: rgba(var(--bs-light-rgb), 0.90);
|
||||
}
|
||||
|
||||
.alert-primary {
|
||||
--bs-toast-max-width: 33vw;
|
||||
border-color: rgba(var(--bs-primary-rgb), 0.25);
|
||||
background: rgba(var(--bs-primary-rgb), 0.20);
|
||||
color: rgb(var(--bs-dark-rgb));
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
--bs-toast-max-width: 33vw;
|
||||
border-color: rgba(var(--bs-success-rgb), 0.25);
|
||||
background: rgba(var(--bs-success-rgb), 0.20);
|
||||
color: rgb(var(--bs-dark-rgb));
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
--bs-toast-max-width: 33vw;
|
||||
border-color: rgba(var(--bs-danger-rgb), 0.25);
|
||||
background: rgba(var(--bs-danger-rgb), 0.30);
|
||||
color: rgb(var(--bs-dark-rgb));
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
--bs-toast-max-width: 33vw;
|
||||
border-color: rgba(var(--bs-warning-rgb), 0.28);
|
||||
background: rgba(var(--bs-warning-rgb), 0.2);
|
||||
color: rgb(var(--bs-dark-rgb));
|
||||
}
|
||||
|
||||
.alert-icon {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* ---------------------------------------
|
||||
Tables (soft rows)
|
||||
---------------------------------------- */
|
||||
|
||||
.table {
|
||||
--bs-table-bg: transparent;
|
||||
}
|
||||
|
||||
.table thead th {
|
||||
color: rgba(var(--bs-dark-rgb), 0.75);
|
||||
font-weight: 700;
|
||||
border-bottom: 1px solid rgba(var(--bs-border-color-rgb), 1);
|
||||
}
|
||||
|
||||
.table tbody tr {
|
||||
border-bottom: 1px solid rgba(var(--bs-border-color-rgb), 1);
|
||||
}
|
||||
|
||||
.table-hover tbody tr:hover {
|
||||
background: rgba(var(--bs-primary-rgb), 0.06);
|
||||
}
|
||||
|
||||
/* ---------------------------------------
|
||||
Toasts / Modals
|
||||
---------------------------------------- */
|
||||
|
||||
.modal-content {
|
||||
border-radius: 1.25rem;
|
||||
border: 1px solid rgba(var(--bs-border-color-rgb), 1);
|
||||
box-shadow: 0 18px 50px rgba(var(--bs-dark-rgb), 0.18);
|
||||
}
|
||||
|
||||
/* ---------------------------------------
|
||||
Utility: “pill” chips (nice for filters)
|
||||
---------------------------------------- */
|
||||
|
||||
.chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.35rem 0.75rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(var(--bs-border-color-rgb), 1);
|
||||
background: rgba(var(--bs-light-rgb), 0.85);
|
||||
color: rgba(var(--bs-dark-rgb), 0.8);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.chip:hover {
|
||||
background: rgba(var(--bs-primary-rgb), 0.08);
|
||||
color: var(--bs-dark);
|
||||
}
|
||||
Binary file not shown.
@@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m 8 1 c -1.65625 0 -3 1.34375 -3 3 s 1.34375 3 3 3 s 3 -1.34375 3 -3 s -1.34375 -3 -3 -3 z m -1.5 7 c -2.492188 0 -4.5 2.007812 -4.5 4.5 v 0.5 c 0 1.109375 0.890625 2 2 2 h 8 c 1.109375 0 2 -0.890625 2 -2 v -0.5 c 0 -2.492188 -2.007812 -4.5 -4.5 -4.5 z m 0 0" fill="#2e3436"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 509 B |
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
Reference in New Issue
Block a user