style.css - master - developer228/fanproject

style.css
35 строк3 KB
developer228
update: app.js, index.html, style.css
02 май 2026, 10:55
02 май 2026, 10:5568a7c2a
body { background: #1a1a1a; color: white; font-family: 'Segoe UI', sans-serif; margin: 0; text-align: center; }
.auth-box { background: #2c3e50; padding: 40px; border-radius: 20px; margin: 50px auto; width: 320px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
input { padding: 12px; width: 85%; margin-bottom: 15px; border-radius: 8px; border: none; font-size: 16px; }

/* Сетка цветов */
.color-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 15px 0; }
.color-dot { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: 0.2s; }
.active-color { border-color: white !important; transform: scale(1.2); box-shadow: 0 0 10px white; }

/* Навигация */
nav { background: #2c3e50; padding: 10px; border-bottom: 2px solid #34495e; position: sticky; top: 0; z-index: 100; }
.nav-content { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
#user-display { font-weight: bold; font-size: 18px; margin: 0 10px; min-width: 120px; }

/* Радужный эффект */
.rainbow-text {
    background: linear-gradient(to right, #ff2400, #e81d1d, #e8b71d, #1de840, #1ddde8, #2b1de8, #dd1de8, #ff2400);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    animation: rainbow_animation 3s linear infinite; background-size: 400%;
}
@keyframes rainbow_animation { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }

/* Контент приложения */
#app { background: #2c3e50; padding: 30px; border-radius: 15px; margin: 20px auto; width: 90%; max-width: 600px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }

/* Кнопки */
button { padding: 10px 15px; border: none; border-radius: 8px; cursor: pointer; background: #27ae60; color: white; font-weight: bold; transition: 0.3s; }
button:hover { background: #2ecc71; transform: translateY(-2px); }
.logout-btn { background: #e74c3c; }
.option-btn { display: block; width: 100%; margin: 10px 0; padding: 15px; background: #34495e; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; }

/* Карточки и Чат */
.gm-card, .shop-card { background: #34495e; padding: 15px; margin: 10px 0; border-radius: 10px; display: flex; justify-content: space-between; align-items: center; }
.chat-box { height: 300px; overflow-y: auto; background: #111; padding: 15px; border-radius: 10px; text-align: left; margin-bottom: 15px; border: 1px solid #444; line-height: 1.5; }
.avatar-slot { font-size: 50px; background: #1a1a1a; width: 80px; height: 80px; line-height: 80px; border-radius: 50%; margin: 10px auto; cursor: pointer; border: 3px solid #f1c40f; }