FrontEnd/Static/Common/css/main.css - master - progart116/PlanerProject2026

FrontEnd/Static/Common/css/main.css
192 строки3 KB
progart116
debug
25 апр 2026, 12:27
25 апр 2026, 12:274a037dd
*
{
    margin: 0;
    border: 0;
    padding: 0;
    user-select: none;
}



@media (min-width: 992px)
{
    
    body
    {
        width: 100vw;
        height: 100vh;
        background: linear-gradient(45deg, #32373b 0%, #4a5859 25%, #32373b 50%, #212143 75%);
    }
    
    .profile-button
    {
        width: 40px;
        height: 40px;
        background-repeat: no-repeat;
        background-size: cover; 
        transition: 0.8s;
        position: absolute;
        top: 35px;
        left: 35px;
        transition: 0.8s;
        cursor: pointer;
    }

    .profile-button:hover
    {
        transform: scale(1.8);
    }

    .profile-info
    {
        position: absolute;
        top: 35px;
        left: 90px;
        text-align: center;
        width: 250px;
        height: 40px;
        transition: 0.8s;
        font-size: 1.2em;
        color: white;   
    }

    .logout-button
    {
        width: 40px;
        height: 40px;
        background-repeat: no-repeat;
        background-size: cover; 
        transition: 0.8s;
        position: absolute;
        top: 35px;
        right: 35px;
        transition: 0.8s;
        cursor: pointer;
    }

    .logout-button:hover
    {
        transform: scale(1.8);
    }

    .main-container
    {
        position: absolute;
        background-color: #002fff37;
        display: block;
        width: 600px;
        height: 600px;
        top: 50%;
        left: 50%;
        margin-left: -300px;
        margin-top: -300px; 
        border-radius: 15px;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .child-link
    {
        margin: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: white;
        cursor: pointer;
        user-select: none;
        transition: 0.5s linear;
        text-decoration: none;
        font-size: 1.5em;
    }

    .child-link:hover
    {
        background-color: #00ff0036;
    }

    .child-link:active
    {
        background-color: #ff000036;
    }

}



@media (max-width: 992px)
{

    body
    {
        width: 100vw;
        height: 100vh;
        background: linear-gradient(45deg, #32373b 0%, #4a5859 25%, #32373b 50%, #212143 75%);
    }

    .content
    {
        display: grid;
        grid-template-rows: 1fr 11fr;
        width: 100vw;
        height: 100vh;
    }

    .main-container
    {
        overflow-y: hidden;
        display: grid;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        background-color: #002fff37;
    }

    .child-link
    {
        background-color: #00ff0036;
        margin: 10px;
        border-radius: 25px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: white;
        cursor: pointer;
        transition: 0.5s linear;
        text-decoration: none;
        font-size: 1.5em;
    }

    .panel
    {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .profile-button
    {
        background-repeat: no-repeat;
        background-size: contain;
        cursor: pointer;
        height: 100%;
        width: 8vw;
    }
    
    .profile-info
    {
        display: flex;
        justify-content: center;
        color: white;
    }
    
    .logout-button
    {
        background-repeat: no-repeat;
        background-size: contain;
        cursor: pointer;
        background-position: right;
        height: 100%;
        width: 8vw;
    }

}