style before n8n
This commit is contained in:
karim hassan
@@ -20,7 +20,126 @@
|
||||
}
|
||||
|
||||
*{box-sizing:border-box}
|
||||
html,body{height:100%}
|
||||
html,body{height:100%}/* === Super Sunday — Dark "Sirion-like" theme overrides === */
|
||||
|
||||
/* 0) Couleurs globales + typo */
|
||||
:root{
|
||||
--ink: #e8eef6; /* texte global clair */
|
||||
--ink-strong: #ffffff; /* titres */
|
||||
--muted: #b7c3d6; /* textes secondaires */
|
||||
--border-dark: rgba(255,255,255,.08);
|
||||
--surface-dark: rgba(15,23,42,.60); /* slate-900 translucide */
|
||||
--surface-dark-2: rgba(15,23,42,.72);
|
||||
}
|
||||
|
||||
/* 1) Fond sombre bleuté + image adoucie */
|
||||
body{
|
||||
color: var(--ink);
|
||||
}
|
||||
body::before{
|
||||
content:"";
|
||||
position:fixed; inset:0; z-index:-2;
|
||||
background:
|
||||
radial-gradient(120% 85% at 20% -10%, rgba(3,7,18,.9) 0%, rgba(3,7,18,.6) 40%, rgba(3,7,18,.3) 60%, rgba(3,7,18,.2) 100%),
|
||||
linear-gradient(180deg, rgba(9,14,30,.75), rgba(9,14,30,.55) 40%, rgba(9,14,30,.75)),
|
||||
url("/assets/image/backgroundp24p.jpg") center top / cover no-repeat;
|
||||
filter: saturate(.9) contrast(.95) brightness(.9) blur(0.5px);
|
||||
}
|
||||
body::after{
|
||||
/* vignette douce pour focus centre */
|
||||
content:"";
|
||||
position:fixed; inset:0; z-index:-1; pointer-events:none;
|
||||
background:
|
||||
radial-gradient(140% 100% at 50% 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,.26) 100%),
|
||||
radial-gradient(120% 90% at 50% 100%, rgba(0,0,0,0) 60%, rgba(0,0,0,.22) 100%);
|
||||
}
|
||||
|
||||
/* 2) Titres & textes */
|
||||
h1,h2,h3{ color: var(--ink-strong); }
|
||||
.hero-title{
|
||||
color:#fff !important;
|
||||
text-shadow: 0 8px 30px rgba(30,167,255,.25), 0 2px 12px rgba(0,0,0,.35);
|
||||
}
|
||||
.section-title{
|
||||
color:#f1f5ff;
|
||||
}
|
||||
.section-title::before{
|
||||
background: linear-gradient(180deg, #8ee7ff, #9fffcf);
|
||||
box-shadow: 0 6px 16px rgba(143, 237, 255, .35);
|
||||
}
|
||||
.muted{ color: var(--muted); }
|
||||
|
||||
/* 3) Header sombre translucide */
|
||||
header{
|
||||
background: rgba(10,14,26,.78);
|
||||
color:#fff;
|
||||
border-bottom: 1px solid var(--border-dark);
|
||||
backdrop-filter: blur(10px) saturate(130%);
|
||||
-webkit-backdrop-filter: blur(10px) saturate(130%);
|
||||
}
|
||||
nav a{ color:#e9f2ff; }
|
||||
nav a:hover{ background: rgba(255,255,255,.06); }
|
||||
|
||||
/* 4) Cartes dark glass */
|
||||
.card{
|
||||
background: var(--surface-dark);
|
||||
border: 1px solid var(--border-dark);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,.35);
|
||||
}
|
||||
.card.accent{
|
||||
background:
|
||||
linear-gradient(135deg, rgba(30,167,255,.12), rgba(39,217,128,.12)),
|
||||
var(--surface-dark-2);
|
||||
border-color: rgba(255,255,255,.12);
|
||||
}
|
||||
|
||||
/* 5) Inputs / selects en sombre lisible */
|
||||
input, select{
|
||||
color:#e8eef6;
|
||||
background: rgba(8,12,24,.6);
|
||||
border: 1px solid rgba(255,255,255,.10);
|
||||
}
|
||||
input::placeholder, select::placeholder{ color:#9fb0c7; }
|
||||
input:focus, select:focus{
|
||||
border-color: rgba(143, 237, 255, .55);
|
||||
box-shadow: 0 0 0 3px rgba(143, 237, 255, .18);
|
||||
}
|
||||
|
||||
/* 6) Boutons */
|
||||
.btn{
|
||||
box-shadow: 0 12px 28px rgba(30,167,255,.3);
|
||||
}
|
||||
.btn-outline{
|
||||
color:#eaf3ff;
|
||||
background: rgba(255,255,255,.06);
|
||||
border:1px solid rgba(255,255,255,.25);
|
||||
}
|
||||
.btn-outline:hover{
|
||||
background: rgba(255,255,255,.12);
|
||||
border-color: rgba(255,255,255,.45);
|
||||
}
|
||||
|
||||
/* 7) État vide & préformatés */
|
||||
.empty{
|
||||
background: rgba(255,255,255,.06);
|
||||
border: 1px dashed rgba(255,255,255,.18);
|
||||
color: #c8d5e8;
|
||||
}
|
||||
pre{
|
||||
color:#e7efff;
|
||||
background: rgba(8,12,24,.55);
|
||||
border: 1px solid rgba(255,255,255,.08);
|
||||
padding: 12px; border-radius: 12px; overflow:auto;
|
||||
}
|
||||
|
||||
/* 8) Légère retouche des bulles pour le mode sombre */
|
||||
.bg-bubble{
|
||||
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), rgba(255,255,255,0));
|
||||
mix-blend-mode: screen;
|
||||
opacity:.7;
|
||||
}
|
||||
body{
|
||||
margin:0;
|
||||
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
|
||||
@@ -28,7 +147,7 @@ body{
|
||||
line-height:1.5;
|
||||
|
||||
/* Hero background image */
|
||||
background-image: url("/assets/images/backgroundp24p.jpg");
|
||||
background-image: url("/assets/image/backgroundp24p.jpg");
|
||||
background-size: cover;
|
||||
background-position: center top;
|
||||
background-attachment: fixed;
|
||||
@@ -138,4 +257,115 @@ input:focus,select:focus{ border-color:#b8d8ff; box-shadow: 0 0 0 3px rgba(24,14
|
||||
|
||||
/* Footer (if needed) */
|
||||
footer{ margin:40px 0 0; padding:24px 16px; text-align:center; color:var(--muted);
|
||||
border-top:1px solid var(--border); background: rgba(255,255,255,.75); backdrop-filter: blur(6px) }
|
||||
border-top:1px solid var(--border); background: rgba(255,255,255,.75); backdrop-filter: blur(6px) }
|
||||
|
||||
/* === Retouches: overlay noir + spacing formulaires === */
|
||||
|
||||
/* 1) Overlay plus noir, façon Sirion */
|
||||
body::before{
|
||||
/* on garde l'image + on fonce nettement avec un voile noir bleuté */
|
||||
background:
|
||||
linear-gradient(180deg, rgba(0,0,0,.70), rgba(0,0,0,.55) 35%, rgba(0,0,0,.68)),
|
||||
radial-gradient(120% 85% at 20% -10%, rgba(0,10,20,.75) 0%, rgba(0,10,20,.35) 60%, rgba(0,10,20,.20) 100%),
|
||||
url("/assets/image/backgroundp24p.jpg") center top / cover no-repeat !important;
|
||||
filter: saturate(.95) contrast(.98) brightness(.88) blur(0.6px);
|
||||
}
|
||||
|
||||
/* vignette un peu plus marquée sur les bords */
|
||||
body::after{
|
||||
background:
|
||||
radial-gradient(145% 100% at 50% 0%, rgba(0,0,0,0) 52%, rgba(0,0,0,.30) 100%),
|
||||
radial-gradient(125% 90% at 50% 100%, rgba(0,0,0,0) 58%, rgba(0,0,0,.24) 100%) !important;
|
||||
}
|
||||
|
||||
/* 2) Spacing des formulaires (inputs & dropdowns) */
|
||||
.card input,
|
||||
.card select,
|
||||
.card textarea {
|
||||
margin-top: 8px !important;
|
||||
margin-bottom: 14px !important; /* +respiration */
|
||||
min-height: 42px; /* dropdowns plus grands */
|
||||
padding: 10px 12px !important;
|
||||
border-radius: 12px !important;
|
||||
}
|
||||
|
||||
/* espacement entre groupes de champs (si <div> direct dans .card) */
|
||||
.card > div + div { margin-top: 16px; }
|
||||
|
||||
/* si tu utilises des <label>, on les rapproche proprement du champ */
|
||||
.card label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
color: #e9f1ff;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
/* 3) Lisibilité du header encore meilleure sur overlay noir */
|
||||
header{
|
||||
background: linear-gradient(180deg, rgba(5,8,14,.96), rgba(5,8,14,.88)) !important;
|
||||
border-bottom: 1px solid rgba(255,255,255,.10) !important;
|
||||
}
|
||||
nav a{ color:#f2f6ff !important; }
|
||||
nav a:hover{ background: rgba(255,255,255,.08) !important; }
|
||||
|
||||
/* 4) Cartes & blocs "empty" légèrement plus sombres pour contraster */
|
||||
.card{
|
||||
background: rgba(12,18,32,.72) !important;
|
||||
border: 1px solid rgba(255,255,255,.12) !important;
|
||||
}
|
||||
.empty{
|
||||
background: rgba(255,255,255,.07) !important;
|
||||
border-color: rgba(255,255,255,.20) !important;
|
||||
}
|
||||
|
||||
/* 5) Sections et titres : contraste blanc franc */
|
||||
.section-title{ color:#ffffff !important; }
|
||||
.hero-title{ color:#ffffff !important; }
|
||||
|
||||
/* === Retouches inputs + boutons === */
|
||||
|
||||
/* 1) Inputs & selects : fond bleu foncé homogène */
|
||||
.card input,
|
||||
.card select,
|
||||
.card textarea {
|
||||
background: #0f1b33 !important; /* bleu nuit uniforme */
|
||||
color: #eaf3ff !important;
|
||||
border: 1px solid rgba(255,255,255,.15) !important;
|
||||
}
|
||||
.card input::placeholder,
|
||||
.card select::placeholder,
|
||||
.card textarea::placeholder {
|
||||
color: #93a4c0 !important;
|
||||
}
|
||||
|
||||
/* 2) Boutons flat arrondis */
|
||||
.btn {
|
||||
display:inline-block;
|
||||
padding:10px 18px;
|
||||
border-radius: 999px; /* bien arrondi */
|
||||
border:none;
|
||||
background: #1890ff; /* bleu flat */
|
||||
color:#fff;
|
||||
font-weight:600;
|
||||
box-shadow: none; /* pas d’ombre lourde */
|
||||
transition: background 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
.btn:hover {
|
||||
background: #3aa0ff; /* bleu un peu plus clair au hover */
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Variante secondaire : outline */
|
||||
.btn-outline {
|
||||
border-radius: 999px;
|
||||
padding:10px 16px;
|
||||
border:1px solid rgba(255,255,255,.25);
|
||||
background: transparent;
|
||||
color:#eaf3ff;
|
||||
transition: background 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
.btn-outline:hover {
|
||||
background: rgba(255,255,255,.08);
|
||||
border-color: rgba(255,255,255,.45);
|
||||
}
|
||||
Reference in New Issue
Block a user