neptune-web-wallet/src/assets/scss/__base.scss

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap');

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans JP';
}

img {
    max-width: 100%;
    height: auto;
}

body {
    min-height: 100vh;
    color: var(--vt-c-gray-2);
    background: var(--color-background);
    transition:
        color 0.5s,
        background-color 0.5s;
    line-height: 1.6;
    font-family: 'Noto Sans JP';
    font-size: 15px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

* {
    &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    &::-webkit-scrollbar-thumb {
        background-color: var(--vt-c-main-gray-v1);
    }

    &::-webkit-scrollbar-thumb {
        background-color: var(--vt-c-main-gray-v2);
        border-radius: 10px;
        transition: all 0.2s ease-in-out;
    }

    &::-webkit-scrollbar-track {
        border-radius: 10px;
    }
}

*,
*::before,
*::after {
    position: unset;
}

.box {
    // padding: 20px;
    &.full {
        min-height: calc(100% - 20px);
    }
    &.no-border {
        border: none;
    }

    .box-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 66px;
        padding: 0 20px;
        background-color: var(--vt-c-white-mute);

        .box-search {
            display: flex;
            gap: 35px;
            align-items: center;

            .ant-input-search {
                width: 322px;

                .ant-input {
                    border: none;
                    background: unset;
                    outline: unset;
                    box-shadow: unset;
                }

                .ant-input-group-addon {
                    background: unset;
                    .ant-input-search-button {
                        background: unset;
                        border: unset;
                        box-shadow: unset;
                        .anticon {
                            svg {
                                fill: var(--vt-c-gray-2);
                            }
                        }
                    }
                }
            }
        }

        .title {
            font-weight: 900;
            font-size: 18px;
            line-height: 26px;
            color: var(--vt-c-gray-2);
            .title-page {
                color: var(--vt-c-gray-v9);
            }

            &.manga {
                color: var(--vt-c-gray-v9);
            }
        }

        .box-btn {
            @include center_flex;
            width: 140px;
            height: 40px;
            border-radius: 6px;
            color: var(--vt-c-main);
            background-color: var(--vt-c-white);
            box-shadow: var(--vt-box-shadow);
            border: 1px solid var(--vt-c-main);
            font-weight: 700;
            font-size: 14px;
        }
    }

    .box-body {
        padding: 0 20px;
        overflow-y: auto;
        height: calc(100vh - 135px);
        position: relative;

        &.no-pagination {
            height: calc(100vh - 66px);
        }

        &:has(.form-create-chap) {
            .ant-tabs {
                overflow-y: auto;
                height: calc(100vh - 235px);
            }
        }

        &.no_padding {
            padding: 0;
        }

        .btn-save-setting {
            &:disabled {
                border-color: var(--vt-c-gray-1);
                background-color: var(--vt-c-gray-1);
            }
        }
    }
}

.btn-base {
    margin-right: 12px;

    &.btn-delete {
        background-color: var(--vt-c-red-v3);
        color: var(--vt-c-white);

        &:hover {
            border-color: unset !important;
            color: var(--vt-c-white);
        }
    }
}

.ant-tag {
    &.custom {
        width: 72px;
        height: 28px;
        border: none;
        @include center_flex;
    }
}

.ant-picker {
    width: 100%;
    &.has-value {
        border-color: var(--vt-c-main);
    }
}

.rounded-btn {
    border-radius: 100px !important;
}
.bold-label {
    label {
        font-weight: 700;
    }
}

.ant-input-number {
    width: 100%;
}

.full-width {
    width: 100%;
}

.ant-input[disabled] {
    background-color: var(--vt-c-background-dark-1);
    color: var(--vt-c-text-dark-3);
}

.ant-tabs {
    &.custom {
        .ant-tabs-nav {
            background-color: var(--vt-c-white-mute);
            padding: 0 20px;
        }
        .ant-tabs-content-holder {
            padding: 0 20px;
        }
        .ant-tabs-nav-list {
            .ant-tabs-tab {
                min-width: 68px;
                justify-content: center;
                padding: 0 16px 6px;
                .ant-tabs-tab-btn {
                    font-size: 16px;
                    font-weight: 700;
                    line-height: 23.17px;
                }

                &:not(.ant-tabs-tab-active) {
                    color: var(--vt-c-gray-v9);
                }
            }
        }
        .ant-tabs-ink-bar {
            height: 3px;
        }

        .ant-tabs-content {
            &:has(.tab-report) {
                height: calc(100vh - 180px);
                overflow-y: scroll;
            }

            &:has(.tab-ranking) {
                height: calc(100vh - 180px);
                overflow-y: auto;
            }
        }
    }

    &.manga-tabs {
        .ant-tabs-content-holder {
            margin-bottom: 150px;
        }
    }

    &.master-tabs {
        .ant-tabs-content-holder {
            margin-bottom: 70px;
        }
    }
}

.ant-form-item {
    .ant-form-item-explain-error {
        font-size: 12px;
    }
}

.ant-spin-spinning {
    width: 100%;
}

.flex-center {
    @include center_flex;
}

.flex-col-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.btn-common {
    @include baseBtn(
        $bg: var(--vt-c-main-color),
        $width: unset,
        $height: unset,
        $borderRadius: unset
    );
    margin: 0 auto 5px;
    padding: var(--vt-btn-padding);
    color: var(--vt-c-white);
    font-weight: 500;
    outline: none;
    cursor: pointer;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    &:hover {
        border: 2px solid var(--vt-c-black-bold);
        color: var(--vt-c-black-bold);
    }
}

p {
    font-size: 1rem;
    margin: 1em;
    line-height: 1.5;
    text-align: center;
}

h2 {
    color: var(--vt-c-main-color);
    font-size: 1.5rem;
    margin-bottom: 1rem;
    text-align: center;
}

.highlight {
    color: var(--vt-c-main-color);
}

.spacer {
    height: 1px;
    width: 90%;
    background: linear-gradient(to right, transparent, rgb(224, 224, 224), transparent);
    margin: 2rem auto;
}

.note {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: --vt-c-gray-note;
}

.auth-container {
    @include center_flex;
    min-height: 100vh;
    background-color: var(--vt-c-white);
    padding: 20px;
}

.auth-card {
    background-color: var(--vt-c-white);
    border: 2px solid var(--vt-c-main-color);
    width: 100%;
    max-width: 600px;
    padding: 0;

    &-header {
        padding: 5px 10px;
        min-height: 30px;
        display: flex;
        align-items: center;
        border-bottom: 2px solid var(--vt-c-main-color);

        h2 {
            font-size: 1rem;
            margin: 0;
            color: var(--vt-c-black-bold);
        }
    }

    &-content {
        padding: 20px;
        text-align: center;
    }
}

.wallet-icon {
    margin: 20px 0 30px 0;

    .icon-circle {
        @include center_flex;
        width: 60px;
        height: 60px;
        background-color: var(--vt-c-main-color);
        border-radius: 50%;
        margin: 0 auto;
    }
}

.password-section {
    margin-bottom: 20px;
}

.auth-button-group {
    display: flex;
    gap: 10px;
    margin-top: 20px;

    .auth-btn {
        flex: 1;
        border-radius: 4px;
        padding: 12px 16px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;

        &.secondary {
            background-color: var(--vt-c-white);
            color: var(--vt-c-black-bold);
            border: 1px solid var(--vt-c-black-bold);

            &:hover {
                background-color: var(--vt-c-white-soft);
            }
        }
    }
}