diff --git a/src/styles/layout.css b/src/styles/layout.css index 4c262bf..2d1f74a 100644 --- a/src/styles/layout.css +++ b/src/styles/layout.css @@ -12,3 +12,94 @@ border:none; background:transparent; } + +/* Barre en bas transparente */ +.bottom-bar { + position: fixed; + bottom: 0; + left: 0; + right: 0; + height: 50px; + background: transparent; /* fond complètement supprimé */ + backdrop-filter: blur(20px); /* effet verre fort */ + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 16px; + z-index: 50; + transition: transform 0.3s ease; +} + +.bottom-left, .bottom-right { + display: flex; + align-items: center; + gap: 6px; + overflow-x: auto; + white-space: nowrap; + max-width: 45%; +} + +.bottom-chat { + padding: 4px 10px; + background: rgba(30, 41, 59, 0.8); + border-radius: 999px; + color: #e5e7eb; + font-size: 13px; + font-weight: 600; + display: flex; + align-items: center; + gap: 6px; + position: relative; +} + +.chat-avatar { + width: 22px; + height: 22px; + border-radius: 50%; + background: #38bdf8; + color: white; + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; +} + +.chat-name { + max-width: 120px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.bottom-remove { + background: red; + border: none; + color: white; + border-radius: 50%; + width: 18px; + height: 18px; + font-size: 12px; + cursor: pointer; +} + +.bottom-contact { + padding: 4px 10px; + background: rgba(30, 41, 59, 0.8); + border-radius: 999px; + color: #e5e7eb; + font-size: 13px; + font-weight: 600; + display: flex; + align-items: center; + gap: 6px; + cursor: pointer; +} + +.contact-icon { font-size: 16px; } +.contact-text { font-weight: 700; } +.contact-online { font-size: 11px; opacity: 0.8; } + +/* Espace pour la barre */ +.below-stage { + padding-bottom: 60px; +} \ No newline at end of file