src/assets/main.css - master - itp_practice/itp_frontend

src/assets/main.css
144 строки3 KB
Soupik
improve ui
28 май 2025, 17:27
28 май 2025, 17:278804fe1
@import './base.css';
@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
@theme {
    --color-purple-blue: #03011c;
    --color-sapphire-charcoal: #211851;
    --color-bgdark: #0d0a26;
    --color-blue1: #7040f2;
    --color-blue2: #ad8eff;
    --color-txt-purple: #c5acff;
    --color-primary: #99ccff;
    --color-primary-dark: #70b0ff;
    --color-secondary: #151131;
    --color-accent: #2D0D51;
    --color-bg-card: rgba(45, 13, 81, 0.3);
    /* Шрифты */
    --font-montserrat: 'Montserrat', sans-serif;

    /* Радиусы */
    --radius-lg: 16px;

    /* Тени */
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.1);
    --shadow-button: 0 6px 12px rgba(153, 204, 255, 0.3);

    /* Градиенты */
    --gradient-primary: linear-gradient(135deg, #2D0D51 0%, #151131 100%);
    --gradient-button: linear-gradient(135deg, #99ccff 0%, #70b0ff 100%);
}

@layer base {
    body {
        @apply font-montserrat bg-secondary text-white;
    }

    h1, h2, h3, h4, h5, h6 {
        @apply mb-4 font-bold;
    }

    p {
        @apply mb-4;
    }

    a {
        @apply text-primary transition-all duration-300;
    }

    a:hover {
        @apply text-primary-dark;
    }
}

@layer components {
    .container {
        @apply w-full max-w-7xl mx-auto px-5;
    }

    .btn {
        @apply inline-flex items-center justify-center px-6 py-3 rounded-full font-semibold cursor-pointer transition-all duration-300 text-center;
    }

    .btn--primary {
        @apply bg-primary text-bgdark;
    }

    .btn--primary:hover {
        @apply transform -translate-y-1 shadow-button text-bgdark;
    }

    .btn--outline {
        @apply bg-transparent border-2 border-primary text-primary;
    }

    .btn--outline:hover {
        @apply opacity-10 bg-primary transform -translate-y-1 text-primary;
    }

    .btn--lg {
        @apply px-7 py-3.5 text-lg;
    }

    .btn--xl {
        @apply px-8 py-4 text-xl;
    }

    .btn--full {
        @apply w-full;
    }

    /* Добавим другие общие компоненты по мере необходимости */
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #151131;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s;
}

#preloader.hidden {
    opacity: 0;
    visibility: hidden;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: #99ccff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Примеры использования */
body {
    background-color: var(--color-bgdark);
    font-family: var(--font-montserrat), serif;
}

.card {
    background-color: var(--color-bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.button {
    background: var(--gradient-button);
    box-shadow: var(--shadow-button);
    border-radius: var(--radius-lg);
    color: white;
}