site_8g/src/app/globals.scss

@tailwind base;
@tailwind components;
@tailwind utilities;
@import "../styles/iconfont/iconfont.css";
@import "../styles/iconfontPro/iconfont.css";

/* swiper */
@import "swiper/css";
@import "swiper/css/autoplay";
@import "swiper/css/pagination";
@import "swiper/css/virtual";

:root {
    --swiper-pagination-color: #fff;
    --swiper-pagination-bullet-active-bg: #fff;
    --swiper-pagination-bullet-inactive-color: hsla(0, 0%, 100%, 0.8);
    //--primary-color: #ff6a01;

    --bg-color: #0b0e10;
    --block-color: #1e252b;
    --block-foreground-color: #e2e9ef;
    --block-text-color: #a9b2bb;
    --block-text-desc-color: #5d7284;

    --primary-color: #11de68;
    --text-color: #fff;

    --tips-color: #dba40b;
    --tips-foreground-color: #1f2830;
}
.home-banner {
    --swiper-pagination-bullet-width: 0.23rem;
    --swiper-pagination-bullet-height: 0.05rem;
    --swiper-pagination-bullet-border-radius: 0.03rem;
}
.promotion-swiper {
    --swiper-pagination-bullet-width: 0.0833rem;
    --swiper-pagination-bullet-height: 0.0833rem;
    //--swiper-pagination-bottom: 0;
}

.sport-banner {
    --swiper-wrapper-transition-timing-function: linear;
}
/// antd-mobile
:root:root {
    --adm-color-background: transparent;
    //--adm-color-text: #fff;
    //--bg-color: #000000; // todo
    --adm-button-text-color: #fff;
    //--adm-color-primary: #fff;
}

* {
    box-sizing: border-box;
}

::-webkit-scrollbar {
    width: 0;
}

html,
body {
    height: 100%;
    position: relative;
    font-family:
        helvetica neue,
        Helvetica,
        apple sd gothic neo,
        malgun gothic,
        Arial,
        sans-serif;
    box-sizing: border-box;
}

html {
    font-size: 144px;
}
body {
    position: relative;
    background: #f8f8f8;
}

#app {
    width: 100%;
    max-width: 4.02rem;
    margin: 0 auto;
    font-size: 0.14rem;
    background-color: var(--bg-color);

    position: relative;
    height: 100%;
    color: #fff;
    transform: translate(0, 0);
    overflow: hidden;
}
// dvh解决ios高度包含底部ui栏问题
.main-footer-header {
    height: calc(calc(100% - $-header-height) - $-footer-height);
    overflow: scroll;
}
.main-footer {
    height: 100%; // calc(100% - $-footer-height);
    overflow-y: scroll;
}
.main-header {
    height: calc(100% - $-header-height);
    overflow-y: scroll;
    overflow-x: hidden;
}

input {
    line-height: normal;
}

/* ant-design-ui */
.adm-toast-mask .adm-toast-main-icon .adm-toast-icon svg {
    margin: 0 auto;
}
.adm-input input,
.adm-text-area textarea {
    color: #fff;
}
.adm-toast-main {
    word-break: keep-all !important;
    text-align: center !important;
}

.home-search {
    .adm-search-bar-input-box {
        border: none !important;
    }
    .adm-search-bar-active {
        border: 0.0069rem solid green;
    }
}
.layout-tabs {
    .adm-tabs-tab-wrapper {
        padding: 0 0.05rem;
    }
    .adm-tabs-header {
        border: none;
    }
}

.containerMask {
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 11;
        background: rgba(0, 0, 0, 0.5);
    }
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}
// 表单
.custom-form {
    padding: 0 0.18rem;
    .adm-list-item-content {
        border-radius: 0.06rem;
        background-color: #191f25;
        margin-bottom: 0.1rem;
        padding: 0 0.1rem;
    }

    .adm-list-item {
        padding-left: 0;
    }
    .adm-form-item-child-inner {
        line-height: 1;
    }
}

@media (min-width: 320px) {
    html {
        font-size: 84.2667px;
    }
}
@media (min-width: 360px) {
    html {
        font-size: 96px;
    }
}
@media (min-width: 375px) {
    html {
        font-size: 100px;
    }
}
@media (min-width: 384px) {
    html {
        font-size: 102.4px;
    }
}

@media (min-width: 414px) {
    html {
        font-size: 110.4px;
    }
}
@media (min-width: 448px) {
    html {
        font-size: 119.466px;
    }
}
@media (min-width: 480px) {
    html {
        font-size: 128px;
    }
}
@media (min-width: 512px) {
    html {
        font-size: 136.53px;
    }
}
@media (min-width: 544px) {
    html {
        font-size: 144.066px;
    }
}
@media (min-width: 576px) {
    html {
        font-size: 144.6px;
    }
}
@media (min-width: 608px) {
    html {
        font-size: 144.1334px;
    }
}
@media (min-width: 640px) {
    html {
        font-size: 144.6666px;
    }
}
@media (min-width: 750px) {
    html {
        font-size: 144px;
    }
}
.customConfirm {
    background-color: #373737 !important;
    .adm-dialog-action-row {
        flex-direction: row-reverse;
        border-top: 0.5px solid #8f8f8f !important;
        button {
            color: #fff !important;
            &:nth-child(1) {
                border-right: none !important;
                border-left: 0.5px solid #8f8f8f !important;
                color: red !important;
            }
        }
    }
    .adm-dialog-footer {
    }
}
@keyframes NumberScorll {
    25%,
    75% {
        transform: translateY(-100%);
    }
    25.1%,
    75.1% {
        transform: translateY(100%);
    }
    0%,
    100% {
        transform: translateY(0);
    }
}