src/shared/shared.scss - master - Necoray/tactic-hack

src/shared/shared.scss
450 строк9 KB
Роман Тихонов
files uploaded
23 янв 2025, 23:23
23 янв 2025, 23:231031718
/* fonts.css */
@font-face {
    font-family: 'Geist';
    src: url('./fonts/Geist[wght].ttf') format('truetype-variations');
    font-weight: 100 900;
    /* Указываем диапазон толщины (weight) */
}


:root {
    /* --main-color: rgb(255, 80, 78);
    --main-color-nonfocus: rgba(255, 80, 78, 0.7);
    --main-color-rgb: 255, 80, 78;
    --bg-color: #150712;
    нужно для использования с альфа каналом
    --padding-value: 4%; */

    --backgroundColor: #08090A;
    --baseElementColor: #0C0C0C;
    --2cndElementColor: #28282C;
    --3rdElementColor: #3E3E43;
    --4thElementColor: #848992;

    --borderedBorderColor: #1D1D1D;

    --middleContrastColor: #848992;
    --contrastElementColor: #F7F8F8;

    --errorColor: rgb(233, 40, 56);

    --shadowColor: #00000025;

    --padding-value: 2%;

    --ibm-font: "IBM Plex Mono", monospace;
    --Onest-font: "Onest", sans-serif;
    --Geist-font: "Geist", "sans-serif";
    --header-height: 1vh;
    --custom-vw: calc(1*min(19.2px, 1vw));

    --bordered-height: 0.75em;
    --bordered-width: 0.61em;
    --bordered-radius: 0.8em;
}

* {
    margin: 0%;
    padding: 0%;
    font-family: var(--Geist-font);
    color: var(--contrastElementColor);
    letter-spacing: -0.03em;
}

/* W3C standard
   сейчас только для Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--contrastElementColor) var(--backgroundColor);
}

/* для Chrome/Edge/Safari */
*::-webkit-scrollbar {
    height: 12px;
    width: 12px;
}

*::-webkit-scrollbar-track {
    background: var(--backgroundColor);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--contrastElementColor);
    border-radius: 5px;
    border: 3px solid var(--backgroundColor);
}

body {
    background-color: var(--backgroundColor);
    height: 100vh;
}

#root {
    height: 100vh;
}

.marginbox {
    max-width: 1920px;
    margin: auto;
}

.blackFill {
    fill: black;
}

.bordered {
    display: block;
    padding: var(--bordered-height) var(--bordered-width) var(--bordered-height) var(--bordered-width);
    border: 1px solid var(--borderedBorderColor);
    border-radius: var(--bordered-radius);
    box-shadow: 0 0 10px var(--shadowColor);
    background: var(--2cndElementColor);
    outline: none;
    color: var(--contrastElementColor);
    font-size: 20px;
    box-sizing: border-box;
}

.darkBordered {
    @extend .bordered;
    background: var(--baseElementColor);
    border: 1px solid var(--2cndElementColor)
}

.contrastBordered {
    @extend .bordered;
    background: var(--contrastElementColor);
    color: var(--2cndElementColor);
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.defaultInput {
    @extend .bordered;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    transition: all 0.2s;
}

.defaultInput:hover {
    filter: brightness(110%);
}

Button {
    justify-content: center;
}

Button:hover {
    cursor: pointer;
}

Button:active {
    filter: opacity(70%) !important;
}

.contrastInput {
    @extend .contrastBordered
}

.contrastInput:hover {
    filter: opacity(80%);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active input:-webkit-autofill::first-line {
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff;
    background-color: inherit;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inherit;
    font-family: inherit;
    font-size: inherit;
}

a {
    text-decoration: none;
    color: var(--contrastElementColor);
}

a>img {
    width: 100%;
    height: 100%;
    display: block;
}

.buttonRef,
a {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
}

.buttonRef:hover,
a:hover {
    text-decoration: underline;
    cursor: pointer;
}

.navbar {
    position: fixed;
    top: 6px;
    width: max-content;
    height: min-content;
    max-width: 100%;

    left: 50%;
    /* Сдвигаем навбар на 50% вправо */
    transform: translateX(-50%);
    /* Сдвигаем навбар назад на 50% своей ширины */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin: auto;
    background: var(--baseElementColor);
    gap: 15px;
    padding-right: calc(var(--bordered-height)/3);
    z-index: 99999;
    padding-top:4px;
    padding-bottom: 4px;

    &-ref {
        display: block;
        min-width: 30px;
    }

    &-search-icon {
        display: block;
    }

    &-registrationButton:hover {
        box-shadow:
            0 0px 12px #34729280,
            0 0px 18px #446AA080,
            0 0px 24px #59469280;
        filter: opacity(100%);
    }

}

.navbar>* {
    font-family: var(--Geist-font);
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    letter-spacing: -0.03em;
}

.navbar>.navbarSkull {
    width: 18px;
}

.footer {
    color: var(--contrastElementColor);
    border-top: 1px solid var(--borderedBorderColor);

    .footer-container {
        display: flex;
        flex-wrap: wrap;
        align-items: start;
        padding: 30px 40px;
        max-width: 1440px;
        margin: auto;
        gap: calc(var(--padding-value) * 2);
    }

    .footer-logo {
        display: flex;
        align-items: center;
        margin-left: calc(var(--padding-value) * 2 / 3);
        margin-bottom: 30px;

        .footer-logo-img {
            width: 20px;
            height: 23px;
            margin-right: 10px;
        }

        .footer-logo-text {
            text-decoration: none !important;
            font-family: var(--Geist-font);
            font-style: normal;
            font-weight: 400;
            font-size: 18px;
            line-height: 22px;
            letter-spacing: -0.03em;

            color: var(--middleContrastColor);

        }
    }

    .footer-sections {
        max-width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        flex-grow: 1;
        //В будущем что нибудь получше можно придумать, чтоб отцентровать текст
        margin-top: 2px;
        padding: 0 calc(var(--padding-value) * 2) 0 calc(var(--padding-value) * 2);

        .footerSection {
            min-width: 110px;
            display: flex;
            flex-direction: column;
            margin-bottom: 30px;

            &-title {
                font-size: 1rem;
                font-weight: bold;
                margin-bottom: 10px;
                color: var(--contrastElementColor);
            }

            &-list {
                list-style: none;
                gap: 20px;
            }

            &-list>li:not(:first-child) {
                margin-top: 20px;
            }

            &-link {
                text-decoration: none;
                color: var(--middleContrastColor);
                font-size: 0.9rem;
                transition: color 0.3s;

                &:hover {
                    text-decoration: underline;
                    color: var(--contrastElementColor);
                }
            }

            @media screen and (max-width: 580px) {
                flex: 1 1 50%;
                /* Каждый элемент занимает 50% ширины */
            }

            @media screen and (max-width: 360px) {
                flex: 1 1 100%;
                /* Каждый элемент занимает 50% ширины */
            }
        }
    }
}

.checkbox {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 22px;
    width: 22px;
    //background: url("images/unchecked.svg");
    border: 1px solid var(--2cndElementColor);
    border-radius: 6px;
    //border: 1px solid white;
    // outline: 2px solid;

    &:checked {
        background: url("images/checked.svg");
        background-size: contain;
    }
}

.scrollList {
    // display: flex;
    // flex-direction: column;
    box-sizing: border-box;
    overflow: auto;
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

    gap: 15px;

    overscroll-behavior: contain;

    // &-bottomShadow:after {
    //     position: relative;
    //     content: "";
    //     height: 50px;
    //     width: 40px;
    //     z-index: 3;
    //     right: 24px;
    // background: linear-gradient(270deg, #fff, hsla(0deg, 0%, 100%, .5) 70%, hsla(0deg, 0%, 100%, 0));
    // }

}


.select {
    &-menu {

        @extend .darkBordered;

        box-sizing: border-box;

        padding: 32px;

        gap: 28px;

        width: 508px;
        height: 400px;

        display: flex;
        flex-direction: column;

        &-title {
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;

            &-text {
                font-weight: 500;
                font-size: 32px;
                line-height: 42px;
                leading-trim: both;
                text-edge: cap;
                letter-spacing: -0.03em;

            }

            &-closeButton {}

        }

        &-buttons {
            display: flex;
            flex-wrap: nowrap;
            gap: 12px;
        }

        &-button {
            &-reset {
                flex-grow: 1;
            }

            &-apply {
                flex-grow: 2.5;
            }
        }

    }
}