WebBurBurBur/lab/1/index.css

/* fonts */
@font-face {
    font-family: 'Fira Sans';
    src: local('Fira Sans'), url('fonts/FiraSans-Regular.ttf');
}

:root {
    --tm-app-font-family: 'Fira Sans';
    --tm-app-header-font-size: clamp(16px, 3vw, 48px);
    --tm-app-tasklist-font-size-large: clamp(12px, 1.6vw, 36px);
    --tm-app-tasklist-font-size-medium: clamp(16px, 1.25vw, 28px);
}

/* colors */
:root {
    --tm-app-cp-blue-10-op-45: #CBDFF473;
    --tm-app-cp-blue-10-op-75: #CBDFF4BF;
    --tm-app-cp-blue-10: #CBDFF4;
    --tm-app-cp-blue-20: #93C4F5;
    --tm-app-cp-blue-30: #7CBAF9;
    --tm-app-cp-blue-50: #50A0F1;
    --tm-app-cp-blue-70: #020275;
    --tm-app-cp-blue-90: #01203F;

    --tm-app-cp-seawave-30: #7FACAC;
    --tm-app-cp-seawave-70: #053A47;

    --tm-app-cp-white: #FFFFFF;

    --tm-app-cp-black-op-12: #0000001F;

    --tm-app-cp-grey-50: grey;
}

/* light-theme */
:root {
    --tm-app-body-bg-start: var(--tm-app-cp-blue-30);
    --tm-app-body-bg-end: var(--tm-app-cp-seawave-30);
    --tm-app-header-text-color: var(--tm-app-cp-blue-70);
    --tm-app-tasklist-header-text-color: var(--tm-app-cp-blue-70);
}

* {
    margin: 0;
    padding: 0;
    font-family: var(--tm-app-font-family);
    font-weight: 400;
}

ul {
    list-style: none;
}

body {
    width: 100%;
    min-height: 100vh;
    background: linear-gradient(var(--tm-app-body-bg-start), var(--tm-app-body-bg-end));
    background-attachment: fixed;
}

#tm-app-header {
    width: 100%;
    box-sizing: border-box;
    padding: max(3vh, 30px) max(2.5vw, 80px);
    display: flex;
    align-items: center;
    justify-content: space-between;

    font-size: var(--tm-app-header-font-size);
    color: var(--tm-app-header-text-color);

    & > #tm-app-name {
        font-size: inherit;
    }
}

.user-info {
    display: flex;
    align-items: center;
    gap: 24px;

    & > .user-info__avatar {
        --avarar-size: clamp(40px, 6vw, 80px);
        width: var(--avarar-size);
        height: var(--avarar-size);
        object-position: center;
        object-fit: cover;
        border-radius: 50%;
        border: 2px solid var(--tm-app-cp-white);
    }
}

#tm-app-base {
    width: 100%;
    box-sizing: border-box;
    padding: 0 max(2.5vw, 80px);
}

.tasklists-container {
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    row-gap: 3vh;
    column-gap: calc(8% / 3);

    & > .tasklist {
        width: 23%;
        box-sizing: border-box;
        padding: 14px;
        border-radius: 10px;
        background-color: var(--tm-app-cp-blue-10-op-75);
        box-shadow: 2px 2px 4px var(--tm-app-cp-black-op-12);
        display: flex;
        flex-direction: column;
        gap: 12px;

        &:last-child {
            background-color: var(--tm-app-cp-blue-10-op-45);
        }

        & > .tasklist__name {
            font-weight: 600;
            color: var(--tm-app-tasklist-header-text-color);
            font-size: var(--tm-app-tasklist-font-size-large);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        & > .tasklist__add-task-btn {
            all: unset;
            cursor: pointer;
            font-size: var(--tm-app-tasklist-font-size-medium);
            color: var(--tm-app-cp-grey-50);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

            &:hover {
                font-weight: 600;

            }
        }
        & > .tasks-container {
            overflow: hidden;
            display: flex;
            flex-direction: column;
            gap: 10px;

            & > .task {
                display: flex;
                overflow: hidden;
                box-sizing: border-box;
                padding: 12px 16px;
                border-radius: 8px;
                background-color: var(--tm-app-cp-blue-30);
                font-size: clamp(14px, 1.1vw, 24px);
                list-style: none;
                border: 2px solid transparent;

                &:hover{
                    background-color: var(--tm-app-cp-blue-50);
                    border-color: var(--tm-app-cp-blue-90);
                }

                & > .task__text {
                    flex: 1;
                    text-align: left;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .task__icons {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 4px;
                    opacity: 60%;

                    & > .icon-row {
                        display: flex;
                        gap: 6px;
                    }

                    .icon {
                        width: clamp(16px, 1.3vw, 22px);
                        height: auto;
                    }

                    &:hover{
                        opacity: 100%;
                    }
                }
            }
        }
    }
}