:root { /* 主题颜色 */ /*--theme-global-color-primary-light: #FDC845; !* 浅金色 *!*/ --theme-global-color-primary-light: #F9B716; /* 浅金色 */ --theme-global-color-primary: #FCBA16; /* 标准金色 */ /*--theme-global-color-primary-dark: #B38410; !* 深金色 *!*/ --theme-global-color-primary-dark: #754C24; /* 深金色 */ --theme-global-color-primary2: #FFD700; --theme-global-color-secondar: #030303; /* 黑色 */ --theme-global-color-secondar2: #383838; /* 黑色 */ --theme-global-color-third: #FFF; --theme-global-color-fourth: #9B9B9B; /* 设置主题全局字体为Open Sans */ --theme-global-title-font: 'MyriadPro-SemiBold'; --theme-global-content-font: 'MyriadPro-Regular'; /* 左右渐变色 */ --theme-global-color-primary-gradient-lr: linear-gradient(90deg, var(--theme-global-color-primary-light) 0%, var(--theme-global-color-primary-dark) 100%); /* 标准语法 */; /* 上下渐变色 */ --theme-global-color-primary-gradient-tb3: linear-gradient(180deg, var(--theme-global-color-primary-light) 0%, var(--theme-global-color-primary-light) 80%, var(--theme-global-color-primary-dark) 100%);; --theme-global-color-primary-gradient-tb3-webkit: -webkit-linear-gradient(180deg, var(--theme-global-color-primary-light) 0%, var(--title-color-text) 80%, var(--title-color-text-dark) 100%); /* Safari 5.1 - 6.0 */ --theme-global-color-primary-gradient-tb3-o: -o-linear-gradient(180deg, var(--theme-global-color-primary-light) 0%, var(--title-color-text) 80%, var(--title-color-text-dark) 100%); /* Opera 11.1 - 12.0 */ --theme-global-color-primary-gradient-tb3-moz: -moz-linear-gradient(180deg, var(--theme-global-color-primary-light) 0%, var(--title-color-text) 80%, var(--title-color-text-dark) 100%); /* Firefox 3.6 - 15.0 */ /* 顶部和底部颜色 */ --header-footer-bg-color: var(--theme-global-color-secondar); --header-footer-text-color: var(--theme-global-color-primary); --header-footer-text-color2: var(--theme-global-color-third); /* ------- 按钮和区块颜色 开始 -------- */ /*--button-color-text0: red;*/ /*--button-color-bg-dark: var(--theme-global-color-primary-dark);*/ /*--button-color-border2: red;*/ /*金底黑字*/ --button-color-bg: var(--theme-global-color-primary); --button-color-text: var(--theme-global-color-secondar); --button-color-border: var(--theme-global-color-primary); /*黑底金字*/ --button-color-bg2: var(--theme-global-color-secondar); --button-color-text2: var(--theme-global-color-primary); --button-color-border2: var(--theme-global-color-secondar); /*金底黑字黑边*/ --button-color-bg3: var(--theme-global-color-primary); --button-color-text3: var(--theme-global-color-secondar); --button-color-border3: var(--theme-global-color-secondar); /*白底金框金字*/ --button-color-bg5: var(--theme-global-color-third); --button-color-text5: var(--theme-global-color-primary); --button-color-border5: var(--theme-global-color-primary); /*金底白字金框*/ --button-color-bg6: var(--theme-global-color-primary); --button-color-text6: var(--theme-global-color-third); --button-color-border6: var(--theme-global-color-primary); /*金底渐变黑字 0-90-100*/ --button-color-gradient-bg: linear-gradient(180deg, var(--theme-global-color-primary-light) 0%, var(--theme-global-color-primary-light) 90%, var(--theme-global-color-primary-dark) 100%);; --button-color-gradient-text: var(--theme-global-color-secondar); --button-color-gradient-border: var(--theme-global-color-primary); /*金底渐变黑字 0-80-100*/ --button-color-gradient-bg1: var(--theme-global-color-primary-gradient-tb3); --button-color-gradient-text1: var(--theme-global-color-secondar); --button-color-gradient-border1: var(--theme-global-color-primary); /*金底渐变黑字*/ --button-color-gradient-bg3: linear-gradient(180deg, var(--theme-global-color-primary-light) 0%, var(--theme-global-color-primary-dark) 100%);; --button-color-gradient-text3: var(--theme-global-color-secondar); --button-color-gradient-border3: var(--theme-global-color-primary); /* ------- 按钮和区块颜色 结束 -------- */ /* 标题文字颜色 */ --title-color-text: var(--theme-global-color-primary); --title-color-border: var(--theme-global-color-primary); --title-color-text-dark: var(--theme-global-color-primary-dark); /* ------- 标题框 ------- */ /*金底黑字*/ --title-box-color-bg: var(--theme-global-color-primary); --title-box-color-text: var(--theme-global-color-secondar); --title-box-color-border: var(--theme-global-color-primary); /*白底金字金框*/ --title-box-color-bg2: var(--theme-global-color-third); --title-box-color-text2: var(--theme-global-color-primary); --title-box-color-border2: var(--theme-global-color-primary); /*黑底金字*/ --title-box-color-bg3: var(--theme-global-color-secondar); --title-box-color-text3: var(--theme-global-color-primary); --title-box-color-border3: var(--theme-global-color-secondar); /*金底黑字渐变边框*/ --title-box-color-gradient-bg: var(--theme-global-color-primary); --title-box-color-gradient-text: var(--theme-global-color-secondar); --title-box-color-gradient-border: linear-gradient(to bottom, var(--theme-global-color-primary), var(--theme-global-color-primary-dark)); /* ------- 标签颜色 ------- */ /*金底黑字*/ --tag-color-bg: var(--theme-global-color-primary); --tag-color-text: var(--theme-global-color-secondar); --tag-color-border: var(--theme-global-color-primary); /*黑底金字*/ --tag-color-bg2: var(--theme-global-color-secondar); --tag-color-text2: var(--theme-global-color-primary); /*金渐变底黑字*/ --tag-color-bg3: var(--theme-global-color-primary-gradient-tb3); --tag-color-text3: var(--theme-global-color-secondar); /*金底白边框*/ --tag-color-bg4: var(--theme-global-color-primary); --tag-color-text4: var(--theme-global-color-secondar); --tag-color-border4: var(--theme-global-color-third); /*白底金框金字*/ --tag-color-bg5: var(--theme-global-color-third); --tag-color-text5: var(--theme-global-color-primary); --tag-color-border5: var(--theme-global-color-primary); /*白底灰框灰字*/ --tag-color-bg6: var(--theme-global-color-third); --tag-color-text6: #86909C; --tag-color-border6: #C9CDD4; /*白底白框金字*/ --tag-color-bg7: var(--theme-global-color-third); --tag-color-text7: var(--theme-global-color-primary); --tag-color-border7: var(--theme-global-color-third); /*红底白字红边*/ --tag-color-bg8: #e51c24; --tag-color-text8: var(--theme-global-color-third); /*--tag-color-border8: var(--theme-global-color-primary);*/ /* ------- 输入框颜色 ------- */ /*黑底金字金边*/ --input-color-bg: var(--theme-global-color-secondar); --input-color-text: var(--theme-global-color-primary); --input-color-border: var(--theme-global-color-primary); /*黑底白字金边*/ --input-color-bg2: var(--theme-global-color-secondar); --input-color-text2: var(--theme-global-color-third); --input-color-border2: var(--theme-global-color-primary); /*透明底金字金边*/ --input-color-bg3: transparent; --input-color-text3: var(--theme-global-color-primary); --input-color-border3: var(--theme-global-color-primary); /* ------- 弹窗颜色 ------- */ /*黑底金字*/ --popup-color-bg: var(--theme-global-color-secondar); /*--popup-color-text: var(--theme-global-color-primary);*/ --popup-color-border: var(--theme-global-color-primary); /* ------- 卡片颜色 ------- */ /*黑底金字*/ --card-color-bg: var(--theme-global-color-secondar); --card-color-text: var(--theme-global-color-primary); --card-color-border: var(--theme-global-color-primary); /*浅黑底白字*/ --card-color-bg2: var(--theme-global-color-secondar2); --card-color-text2: var(--theme-global-color-third); --card-color-border2: var(--theme-global-color-secondar); /*白底金字*/ /*--card-color-bg3: var(--theme-global-color-secondar);*/ --card-color-text3: var(--theme-global-color-primary); /*--card-color-border3: var(--theme-global-color-primary);*/ /*金底黑字*/ --card-color-bg4: var(--theme-global-color-primary); --card-color-text4: var(--theme-global-color-secondar); /*--card-color-border4: var(--theme-global-color-third);*/ /*黑底白字黑边*/ --card-color-bg5: var(--theme-global-color-secondar); --card-color-text5: var(--theme-global-color-third); --card-color-border5: var(--theme-global-color-secondar); /*金白渐变*/ --card-color-gradient-bg: linear-gradient(var(--theme-global-color-primary), var(--theme-global-color-third)) no-repeat;; /*--card-color-gradient-border: var(--theme-global-color-primary);*/ /*--card-color-gradient-text: var(--theme-global-color-primary);*/ /*金底渐变黑字*/ --card-color-gradient-bg2: linear-gradient(180deg, var(--theme-global-color-primary-light) 0%, var(--theme-global-color-primary-light) 20%, var(--theme-global-color-primary-dark) 100%); --card-color-gradient-border2: var(--theme-global-color-secondar); /*--card-color-gradient-text2: var(--theme-global-color-primary);*/ /* ------- 公告 ------- */ --notice-color-bg2: var(--theme-global-color-third); --notice-color-border2: var(--theme-global-color-secondar); --notice-color-text2: var(--theme-global-color-primary); /* ------- 菜单 ------- */ /*黑底白字*/ --menu-color-bg: var(--theme-global-color-secondar); --menu-color-text: var(--theme-global-color-third); /*--menu-color-border: var(--theme-global-color-secondar);*/ /* 黑底白字 */ --menu-color-bg2: var(--theme-global-color-secondar); --menu-color-text2: var(--theme-global-color-primary); /*--menu-color-border: var(--theme-global-color-secondar);*/ /* 其他主题变量 */ --theme-color-red: #E21C34; --theme-color-white: #fff; --theme-color-whith: #fff; --theme-nav-color: #1D2129; --theme-nav-active-color: #E21C34; --theme-nav-font-weight: 600; --layout-live-recommend: calc(100% - 20px); /* 主要背景色 */ --theme-global-main-bg-color: #E21C34; } /* 主题 */ /* 红底白字 */ .theme-red-bg-white-font { background-color: #ec300c; color: #fff; } @media screen and (max-width: 1920px) { :root { --layout-page-width: 1440px; --layout-page-body-width: 1240px; --layout-live-list-item: 1240px; --layout-hot-live-list-width: calc(100% - 40px); --layout-home-live-box-width: 984px; --layout-home-live-box--height: 554px; --layout-grid-template-columns: repeat(3, 376px); --layout-grid-template-rows: 282px; --layout-grid-gap: 40px; --layout-grid-gap-live: 56px; --layout-live-list-item-img-height: 212px; --layout-live-list-item-padding-bottom: 0px; /*首页直播列表样式*/ --layout-grid-template-columns-sm: repeat(3, 288px); --layout-grid-template-rows-sm: 226px; --layout-grid-gap-sm: 40px; --layout-grid-gap-live-sm: calc((100% - (3 * 288px)) / 2); --layout-live-list-item-img-height-sm: 162px; --layout-live-list-item-padding-bottom-sm: 0; --layout-live-list-item-padding-vertical-sm: 6px; --layout-live-list-item-gap-vertical-sm: 4px; /*直播间直播列表样式*/ --layout-room-grid-template-columns-sm: repeat(3, 288px); --layout-room-grid-template-rows-sm: 226px; --layout-room-grid-gap-sm: 64px; --layout-room-grid-gap-live-sm: 64px; --layout-room-live-list-item-img-height-sm: 162px; /*直播间*/ --layout-page-room-main-width: 1408px; --layout-room-bottom-width: 1160px; --layout-room-live-width: 808px; --layout-room-live-height: 499px; --layout-room-tim-width: 336px; --layout-room-recommend-live-righr-width: 232px; /*天使球评列表样式*/ --layout-angel-grid-template-columns: repeat(3, 376px); --layout-angel-grid-template-rows: 266px; --layout-angel-grid-gap: 40px; --layout-angel-grid-column-gap: calc((100% - (376px * 3)) / 2); --layout-angel-grid-gap-img-height: 188px; /*直播列表页正文宽度*/ --layout-page-live-list-header-width: 1400px; --layout-page-live-list-width: 1240px; /*资讯页正文宽度*/ --layout-page-notice-width: 1200px; --layout-page-notice-banner-width: 860px; --layout-page-notice-banner-height: 484px; } } @media screen and (min-width: 1920px) { :root { --layout-page-width: 1440px; --layout-page-body-width: 1400px; --layout-live-list-item: 1240px; --layout-hot-live-list-width: calc(100% - 40px); --layout-home-live-box-width: 1144px; --layout-home-live-box--height: 644px; --layout-grid-template-columns: repeat(4, 332px); --layout-grid-template-rows: 260px; --layout-grid-gap: 24px; --layout-grid-gap-live: 24px; --layout-live-list-item-img-height: 188px; --layout-live-list-item-padding-bottom: 0px; /*首页直播列表样式*/ --layout-grid-template-columns-sm: repeat(3, 332px); --layout-grid-template-rows-sm: 260px; --layout-grid-gap-sm: 40px; --layout-grid-gap-live-sm: calc((100% - (3 * 332px)) / 2); --layout-live-list-item-img-height-sm: 188px; --layout-live-list-item-padding-bottom-sm: 0; --layout-live-list-item-padding-vertical-sm: 8px; --layout-live-list-item-gap-vertical-sm: 8px; --layout-live-recommend: calc(100% - 48px); /*直播间*/ --layout-page-room-main-width: 1888px; --layout-room-bottom-width: 1640px; --layout-room-live-width: 1224px; --layout-room-live-height: 756px; --layout-room-tim-width: 336px; --layout-room-recommend-live-righr-width: 296px; /*直播间直播列表样式*/ --layout-room-grid-template-columns-sm: repeat(5, 288px); --layout-room-grid-template-rows-sm: 226px; --layout-room-grid-gap-sm: 40px; --layout-room-grid-gap-live-sm: 18px; --layout-room-live-list-item-img-height-sm: 162px; /*天使球评列表样式*/ --layout-angel-grid-template-columns: repeat(4, 332px); --layout-angel-grid-template-rows: 236px; --layout-angel-grid-gap: 24px; --layout-angel-grid-column-gap: 24px; --layout-angel-grid-gap-img-height: 166px; /*直播列表页正文宽度*/ --layout-page-live-list-header-width: 1920px; --layout-page-live-list-width: 1400px; /*资讯页正文宽度*/ --layout-page-notice-width: 1400px; --layout-page-notice-banner-width: 1020px; --layout-page-notice-banner-height: 574px; } } /*!* 白底红字 *!*/ /*.theme-white-bg-red-font {*/ /* background-color: #fff;*/ /* color: #ec300c;*/ /*}*/ /*!* 白色字体 *!*/ /*.theme-white-font,*/ /*.theme-white-font a{*/ /* color: #fff;*/ /*}*/ /*!* 红色字体 *!*/ /*.theme-red-font {*/ /* color: #ec300c;*/ /*}*/