wow toit marxhe
This commit is contained in:
Your Name
parent
63244ee7cc
commit
4b99783e67
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.2 MiB |
|
|
@ -1,168 +1,71 @@
|
|||
/* ========== TOP BAR (SOCIOWIRE header, version avec belle barre) ========== */
|
||||
/* ===== SOCIOWIRE Topbar — clean gradient, tight spacing, solid mobile ===== */
|
||||
|
||||
.topbar {
|
||||
width: 100%;
|
||||
padding: 0.55rem 0.9rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.6rem;
|
||||
|
||||
/* Bandeau bleu en haut, comme ton dessin */
|
||||
background: linear-gradient(135deg, #050b18 0%, #0b2b5f 35%, #0e65c0 70%, #27a8ff 100%);
|
||||
border-bottom-left-radius: 18px;
|
||||
border-bottom-right-radius: 18px;
|
||||
|
||||
box-shadow:
|
||||
0 10px 24px rgba(0, 0, 0, 0.65),
|
||||
0 0 18px rgba(56, 189, 248, 0.5);
|
||||
.topbar{
|
||||
position: sticky; top:0; z-index:100;
|
||||
width:100%;
|
||||
padding: .55rem .9rem;
|
||||
display:flex; align-items:center; justify-content:space-between; gap:.6rem;
|
||||
background: linear-gradient(135deg,#071225 0%,#0b2b5f 38%,#0e65c0 72%,#27a8ff 100%);
|
||||
border-bottom-left-radius:18px; border-bottom-right-radius:18px;
|
||||
box-shadow: 0 10px 24px rgba(0,0,0,.55), 0 0 18px rgba(56,189,248,.45);
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
/* Bloc gauche : logo + titre */
|
||||
|
||||
.logo-circle {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
|
||||
/* utilise ton logo dans public/icons/logo-master.png */
|
||||
background-image: url("/icons/logo-master.png");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
/* halo autour du logo */
|
||||
box-shadow:
|
||||
0 0 12px rgba(37, 99, 235, 0.85),
|
||||
0 0 20px rgba(56, 189, 248, 0.8);
|
||||
|
||||
/* cache le texte "SW" à l'intérieur si présent */
|
||||
color: transparent;
|
||||
/* LEFT: logo + titles */
|
||||
.logo-circle{
|
||||
width:40px; height:40px; border-radius:50%; flex-shrink:0;
|
||||
background-image:url("/icons/logo-master.png");
|
||||
background-size:cover; background-position:center; background-repeat:no-repeat;
|
||||
box-shadow: 0 0 10px rgba(37,99,235,.8), 0 0 18px rgba(56,189,248,.6);
|
||||
color:transparent; /* cache texte éventuel */
|
||||
}
|
||||
|
||||
.title-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 1.1;
|
||||
min-width: 0;
|
||||
.title-block{ display:flex; flex-direction:column; line-height:1.05; min-width:0; }
|
||||
.main-title{ font-size:1.02rem; font-weight:800; letter-spacing:.04em; color:#f9fafb; }
|
||||
.sub-title{ font-size:.74rem; color:#dbeafe; opacity:.95; }
|
||||
|
||||
/* RIGHT: theme dots + auth buttons */
|
||||
.topbar-right{ display:flex; align-items:center; gap:.5rem; margin-left:auto; flex-wrap:wrap; }
|
||||
|
||||
.theme-switch{ display:flex; gap:.28rem; }
|
||||
.theme-dot{
|
||||
width:22px; height:22px; border-radius:999px;
|
||||
border:1px solid rgba(148,163,184,.85);
|
||||
background:rgba(15,23,42,.9); color:#e5e7eb; font-size:.65rem;
|
||||
display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer;
|
||||
box-shadow:0 0 6px rgba(15,23,42,.9); transition:transform .12s ease;
|
||||
}
|
||||
.theme-dot:hover{ transform:scale(1.06); }
|
||||
.theme-dot-active{ border-color:#facc15; box-shadow:0 0 10px rgba(250,204,21,.9),0 0 14px rgba(56,189,248,.55); }
|
||||
|
||||
.btn-primary, .btn-secondary{
|
||||
padding:.32rem .85rem; font-size:.78rem; border-radius:999px; font-weight:700; cursor:pointer;
|
||||
white-space:nowrap; line-height:1;
|
||||
}
|
||||
.btn-primary{ border:1px solid #22c55e; background:radial-gradient(circle at 30% 30%,#22c55e,#16a34a); color:#f9fafb;
|
||||
box-shadow:0 4px 10px rgba(22,163,74,.5),0 0 8px rgba(22,163,74,.6);
|
||||
}
|
||||
.btn-primary:disabled{ opacity:.6; cursor:default; }
|
||||
.btn-secondary{ border:1px solid #bfdbfe; background:rgba(15,23,42,.25); color:#e0f2fe; box-shadow:0 3px 10px rgba(15,23,42,.6); }
|
||||
.btn-secondary:hover{ background:rgba(15,23,42,.45); }
|
||||
|
||||
/* Auth label (AUTH: anon) plus discret, ne casse pas la ligne */
|
||||
.topbar .title-block + div,
|
||||
.topbar .auth-label{
|
||||
font-size:.65rem; opacity:.7; color:#dbeafe; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.06em;
|
||||
font-weight: 700;
|
||||
color: #f9fafb;
|
||||
/* Mobile tweaks */
|
||||
@media (max-width:640px){
|
||||
.topbar{ padding:.5rem .7rem; border-bottom-left-radius:16px; border-bottom-right-radius:16px; }
|
||||
.main-title{ font-size:1rem; }
|
||||
.sub-title{ font-size:.7rem; }
|
||||
.topbar-right{ width:100%; justify-content:flex-start; gap:.45rem; }
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: 0.7rem;
|
||||
color: #dbeafe;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* Bloc de droite : thèmes + login */
|
||||
|
||||
.topbar-right {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* Switch de thème D/B/L */
|
||||
|
||||
.theme-switch {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.theme-dot {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.85);
|
||||
background: rgba(15, 23, 42, 0.85);
|
||||
color: #e5e7eb;
|
||||
font-size: 0.65rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 6px rgba(15, 23, 42, 0.9);
|
||||
}
|
||||
|
||||
.theme-dot-active {
|
||||
border-color: #facc15;
|
||||
box-shadow:
|
||||
0 0 10px rgba(250, 204, 21, 0.9),
|
||||
0 0 16px rgba(56, 189, 248, 0.7);
|
||||
}
|
||||
|
||||
/* Boutons login / logout */
|
||||
|
||||
.btn-primary {
|
||||
padding: 0.25rem 0.85rem;
|
||||
font-size: 0.75rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid #22c55e;
|
||||
background: radial-gradient(circle at 30% 30%, #22c55e, #16a34a);
|
||||
color: #f9fafb;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
box-shadow:
|
||||
0 4px 12px rgba(22, 163, 74, 0.6),
|
||||
0 0 10px rgba(22, 163, 74, 0.7);
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Si tu as un bouton secondaire (signup) */
|
||||
.btn-secondary {
|
||||
padding: 0.25rem 0.85rem;
|
||||
font-size: 0.75rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid #bfdbfe;
|
||||
background: rgba(15, 23, 42, 0.35);
|
||||
color: #e0f2fe;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 3px 10px rgba(15, 23, 42, 0.7);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: rgba(15, 23, 42, 0.6);
|
||||
}
|
||||
|
||||
/* Mobile : la partie droite passe proprement en dessous */
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.topbar {
|
||||
flex-wrap: wrap;
|
||||
padding-inline: 0.65rem;
|
||||
}
|
||||
|
||||
.topbar-right {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
/* Thème clair : on éclaircit la barre mais on garde ton logo */
|
||||
body[data-theme="light"] .topbar {
|
||||
background: linear-gradient(135deg, #e5f0ff, #f9fafb);
|
||||
box-shadow:
|
||||
0 6px 18px rgba(148, 163, 184, 0.6),
|
||||
0 0 10px rgba(129, 140, 248, 0.35);
|
||||
}
|
||||
|
||||
body[data-theme="light"] .main-title,
|
||||
body[data-theme="light"] .sub-title {
|
||||
color: #0f172a;
|
||||
/* Light theme compatibility */
|
||||
body[data-theme="light"] .topbar{
|
||||
background:linear-gradient(135deg,#e6f0ff 0%,#f9fafb 100%);
|
||||
box-shadow:0 8px 20px rgba(148,163,184,.45),0 0 10px rgba(129,140,248,.25);
|
||||
}
|
||||
body[data-theme="light"] .main-title, body[data-theme="light"] .sub-title{ color:#0f172a; }
|
||||
|
|
|
|||
Loading…
Reference in New Issue