[data-bs-theme='light'] { --bg-glass: hsla(0, 10%, 100%, 0.45); --zp-bg: #ffffff; } [data-bs-theme='dark'] { --bg-glass: rgba(50, 51, 53, 0.8); --zp-bg: #191b1d; } * { box-sizing: border-box; } html, body { overflow-x: hidden; } *:after, *:before, a, p, h1, h2, h3, h4, h5, h6, button, .owl-prev, .owl-next, .fa:hover, .fa-brands:hover, .fa:hover, .far:hover, .fab:hover, .fas:hover { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .fa:hover, .fa-brands:hover, .fa:hover, .far:hover, .fab:hover, .fas:hover { color: var(--is-element); text-shadow: 0 0 3px var(--is-element); } a:hover { color: var(--is-element) !important; } img { image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; } a[href] { transition: color 0.2s, background 0.3s, opacity 0.3s, box-shadow 0.3s, transform 0.3s; } a { text-decoration: none !important; color: rgba(var(--ri-link-color-rgb), var(--ri-link-opacity, 1)); } ul, ol { list-style-type: none; padding-left: 0; margin: 0; } .fs-7 { font-size: 0.875rem !important; } .fs-8 { font-size: 0.575rem !important; } .fs-9 { font-size: 0.375rem !important; } .btn:hover i, .navbar .action-btn:hover i, .single-ul .list-item:hover i, .rollbar .actions li:hover i, #text-con:hover i, .uc-menu-warp li a:hover i { -webkit-animation: toTopFromBottom 0.3s forwards; -moz-animation: toTopFromBottom 0.3s forwards; -ms-animation: toTopFromBottom 0.3s forwards; -o-animation: toTopFromBottom 0.3s forwards; animation: toTopFromBottom 0.3s forwards; } .search-keywords a { transition: transform 0.3s ease-in-out; } .search-keywords a:hover { transform: scaleY(1.1); } /* Keyframes */ @-webkit-keyframes toLeftFromRight { 49% { -webkit-transform: translate(-100%); } 50% { opacity: 0; -webkit-transform: translate(100%); } 51% { opacity: 1; } } @-moz-keyframes toLeftFromRight { 49% { -moz-transform: translate(-100%); } 50% { opacity: 0; -moz-transform: translate(100%); } 51% { opacity: 1; } } @keyframes toLeftFromRight { 49% { transform: translate(-100%); } 50% { opacity: 0; transform: translate(100%); } 51% { opacity: 1; } } @-webkit-keyframes toRightFromLeft { 49% { -webkit-transform: translate(100%); } 50% { opacity: 0; -webkit-transform: translate(-100%); } 51% { opacity: 1; } } @-moz-keyframes toRightFromLeft { 49% { -moz-transform: translate(100%); } 50% { opacity: 0; -moz-transform: translate(-100%); } 51% { opacity: 1; } } @keyframes toRightFromLeft { 49% { transform: translate(100%); } 50% { opacity: 0; transform: translate(-100%); } 51% { opacity: 1; } } @-webkit-keyframes toTopFromBottom { 49% { -webkit-transform: translateY(-100%); } 50% { opacity: 0; -webkit-transform: translateY(100%); } 51% { opacity: 1; } } @-moz-keyframes toTopFromBottom { 49% { -moz-transform: translateY(-100%); } 50% { opacity: 0; -moz-transform: translateY(100%); } 51% { opacity: 1; } } @keyframes toTopFromBottom { 49% { transform: translateY(-100%); } 50% { opacity: 0; transform: translateY(100%); } 51% { opacity: 1; } } @-webkit-keyframes toBottomFromTop { 49% { -webkit-transform: translateY(100%); } 50% { opacity: 0; -webkit-transform: translateY(-100%); } 51% { opacity: 1; } } @-moz-keyframes toBottomFromTop { 49% { -moz-transform: translateY(100%); } 50% { opacity: 0; -moz-transform: translateY(-100%); } 51% { opacity: 1; } } @keyframes toBottomFromTop { 49% { transform: translateY(100%); } 50% { opacity: 0; transform: translateY(-100%); } 51% { opacity: 1; } } /*滚动条*/ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background-color: transparent; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 1em; } ::-webkit-scrollbar-thumb { background-color: var(--is-element); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent); -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 1em; } ::-webkit-scrollbar-track { background-color: #e0e0e0; } /*主题修改*/ .a-frame { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 2px; z-index: 1; } .typing { height: 30px; line-height: 1; } .list-item.back-top:hover, .owl-theme .owl-dots .owl-dot.active span { background: var(--is-element); } .list-item.back-top:hover i { color: #ffffff !important; } .navbar .nav-list>.menu-item.current-menu-item>a, .slicknav_menu .slicknav_nav li.current-menu-item a, .list-item.back-top, .filter-warp .filter-item .filter-link.active>a, .filter-warp .filter-item .filter-link:hover>a, .post-item.item-grid.grid-overlay:hover .entry-title a, .pay-select-box .pay-item:hover, .home-last-post .section-cat-navbtn .btn.active, .home-last-post .section-cat-navbtn .btn:hover, .series-tags, .btn.active { color: var(--is-element) !important; } .post-item.item-grid.grid-overlay .entry-wrapper { z-index: 9; } .pay-select-box .pay-item:hover { border-color: var(--is-element); } .filter-warp .filter-item .filter-link.active>a::after, .filter-warp .filter-item .filter-link:hover>a::after { border-bottom: 2px solid var(--is-element); } .entry-desc { height: 14px; } .navbar .nav-list :not(.menu-item-mega-pro)>.sub-menu { min-width: var(--is-menu); } .na.navbar .nav-list :not(.menu-item-mega-pro)>.sub-menuvbar .nav-list :not(.menu-item-mega-pro)>.sub-menu:first-child { position: absolute; top: 100%; left: -10px; min-width: var(--is-menu); -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .navbar .nav-list .menu-item:hover>.sub-menu:first-child { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .navbar .nav-list .menu-item.menu-item-has-children>a:after { content: '\f107'; font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', 'FontAwesome'; color: var(--bs-gray); } .navbar .nav-list .sub-menu .menu-item.menu-item-has-children>a:after { content: '\f105'; font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', 'FontAwesome'; color: var(--bs-gray); margin-right: 45px; } .navbar .nav-list .menu-item.menu-item-has-children>a:hover::after { content: '\f106'; font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', 'FontAwesome'; } .navbar .nav-list .sub-menu .menu-item.menu-item-has-children>a:hover::after { content: '\f104'; font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', 'FontAwesome'; } .navbar .nav-list .menu-item-mega-pro .sub-menu:before { border-bottom-color: transparent; } .post-format-icon { font-size: 0.75rem; background: var(--bg-glass); background-color: var(--bg-glass); -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%); transform: translate(0%, 0%) scale(0); -webkit-transition: all 0.4s; transition: all 0.4s; } .post-format-icon::after { content: ''; position: absolute; z-index: 1; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); display: block; width: 40px; height: 40px; border-radius: 50%; transition: all 200ms; border: 0.5px solid #ffffff; animation-name: iconpopup; animation-duration: 1.5s; animation-iteration-count: infinite; } @keyframes iconpopup { 0% { box-shadow: 0 0 0 0 #f0ece9, 0 0 0 0 #f0ece9; } 80% { box-shadow: 0 0 0 20px #fff0, 0 0 0 40px #fff0; } 100% { box-shadow: 0 0 0 0 #fff0, 0 0 0 0 #fff0; } } .post-item:hover .post-format-icon { transform: translate(0%, 0%) scale(1); } .sidebar-author-info .author-body { margin: 0px -20px 0px; background: var(--is-body); } .author-body .row, .author-body .row>* { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } .author-body span { font-size: 14px; } .author-footer .list-group-item { background-color: transparent; } .author-footer a, .author-footer span { font-size: 0.785rem; } .entry-meta .avatar, #inviteTab .avatar, .dropdown-notifications-list .avatar { border-radius: 50%; height: 20px; margin-right: 3px; width: 20px; } .post-item.item-grid .entry-meta>span { margin-right: 5px; } .home-search-box .search-hots span { font-size: 13px; cursor: pointer; text-align: center; background: rgba(0, 0, 0, 0.3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 4px; color: #fff; margin-right: 11px; padding: 5px; } .home-search-box .search-hots span:hover { color: var(--is-element); } .home-search-box .search-hots>span:not(:first-child)::after { content: ''; } .badge-svip img, .menu-svip, .user-top .avatar { height: 16px !important; width: 16px !important; } .price-card .my-iocn { width: 44px !important; height: 44px !important; } .price-card .price-header { padding: 30px 0; border-radius: 5px 5px 50% 50%; transition: all 0.5s ease 0s; } .price-card .price-header .price-plan { flex-direction: column; } .price-body li { padding: 8px 0; border-bottom: 1px solid #ddd; } .badge-svip img { display: inline-block !important; } .menu-svip { background-repeat: no-repeat; background-size: contain; } .price-card { box-shadow: none; border: none; } .post-item .tips-badge { font-size: 1rem; } .form-select:focus { box-shadow: none; } .breadcrumb .active { color: var(--is-element); } .breadcrumb a { color: #fff } .breadcrumb>li:not(:last-child)::after { color: rgba(255, 255, 255, 0.6); text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); margin-left: .2em; content: ">"; } .follow-btn { color: var(--is-rgb); border-color: var(--is-element); border-width: 1px; border-style: solid; border-radius: 4px; } .follow-btn:hover, .follow-btn:focus { color: var(--is-element); border-color: var(--is-element); font-weight: bold; } .ctrld-pc span { position: relative; color: #030405; border: 1px solid silver; border-radius: 3px; height: 2em; width: 2em; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; background-image: linear-gradient(#f5f5f5, #fff); margin: auto; } .ctrld-pc span::before { content: ''; box-sizing: content-box; position: absolute; border: 2px solid rgba(240, 240, 240, 0.9); border-top: 1px solid rgba(240, 240, 240, 0.9); border-bottom: 7px solid rgba(240, 240, 240, 0.9); border-radius: 3px; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(255, 255, 255, 0.1); } /***/ .filter-warp .filter-item .filter-link ::after { content: ''; width: 0; height: 2px; background-color: var(--is-element); position: absolute; right: 100%; bottom: 0; transition: all 0.4s; } .filter-warp .filter-item .filter-link :hover::after { width: 100%; right: 0; transition-delay: 0.1s; } .filter-warp .filter-item .filter-link :hover~.filter-link ::after { right: 0; } .navbar .action-hover-menu .hover-warp.language-warp { width: 120px; } .navbar .action-hover-menu:hover .hover-warp.language-warp { -webkit-transform: scaleY(1); transform: scaleY(1); opacity: 1; visibility: visible; } /* Set the icon container size */ .vip-icon { display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; margin: 0 auto; } .vip-icon span { width: 40px; height: 40px; background-size: contain; background-position: center; background-repeat: no-repeat; } .vip-icon:hover span, .vip-card:hover img { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); transition: transform 0.3s ease-in-out; } @media (max-width: 768px) { .vip-icon { width: 40px; height: 40px; } .vip-icon span { width: 24px; height: 24px; } } .navbar .action-hover-menu .hover-warp.svip-warp { background-color: #ffffff87; top: 45px; box-shadow: 0 5px 40px 0 rgba(17, 58, 93, .1); cursor: pointer; flex-direction: column; backdrop-filter: blur(10px); } .hover-warp.svip-warp .card { background-color: transparent; background: transparent; } /*******************/ /*menu-item-mega-pro*/ .navbar .nav-list .menu-item-mega-pro { position: static; } .navbar .nav-list .menu-item-mega-pro .sub-menu { width: 100%; margin: 0 auto; display: none; padding: 1rem; } .navbar .menu-item.menu-item-mega-pro:hover>.sub-menu { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } .navbar .menu-item-mega-pro.itemd3 .sub-menu .menu-item { width: 33.333333%; } .navbar .menu-item-mega-pro.itemd4 .sub-menu .menu-item { width: 25%; } .navbar .menu-item-mega-pro.itemd5 .sub-menu .menu-item { width: 20%; } .navbar .menu-item-mega-pro.itemd6 .sub-menu .menu-item { width: 16.66667%; } .navbar .nav-list .menu-item-mega-pro .sub-menu .menu-item { padding: 0 10px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; flex-wrap: wrap-reverse; margin-bottom: 10px; } .navbar .nav-list .menu-item-mega-pro .sub-menu .menu-item>a { padding: 20px 0; display: flex; background: var(--is-body); -webkit-border-radius: 4px; border-radius: 4px; text-align: center; height: 100%; flex-direction: column; justify-content: space-evenly; align-items: center; } .navbar .nav-list .menu-item-mega-pro .sub-menu .menu-item>a>span i { font-size: 24px; width: 36px; height: 36px; line-height: 36px; display: block; -webkit-border-radius: 100%; border-radius: 100%; text-align: center; margin: 0 auto 10px; color: var(--is-element); } .navbar .nav-list .menu-item-mega-pro .sub-menu .menu-item>a>span { font-size: 14px; } .navbar .nav-list .menu-item-mega-pro .sub-menu .menu-item>a h5, .slicknav_menu .slicknav_nav .sub-menu>li>a h5 { color: #888; font-size: 10px; font-weight: normal; line-height: 20px; height: 20px; overflow: hidden; margin: 0; } .navbar .nav-list .menu-item-mega-pro .sub-menu .menu-item>a:hover i, .navbar .nav-list .menu-item-mega-pro .sub-menu .menu-item>a:hover h5, .navbar .nav-list .menu-item-mega-pro .sub-menu .menu-item>a:hover span { z-index: 2; color: #fff; } .navbar .nav-list .menu-item-mega-pro .sub-menu .menu-item>a::before { content: ''; position: absolute; left: 10px; height: 100%; width: 0; top: 0; border-radius: 4px; background: var(--is-rgb); color: #ffffff; -webkit-box-shadow: 0 8px 12px 0 rgba(51, 133, 255, 0.2); box-shadow: 0 8px 12px 0 rgba(51, 133, 255, 0.2); } .navbar .nav-list .menu-item-mega-pro .sub-menu .menu-item>a:hover::before { width: calc(100% - 20px); } .img-width { width: 60px; height: 60px; } .navbar .menu-item-mega-pro .menu-item:hover .img-sahpe, .box-content:hover .img-sahpe { animation: zpro_b3u 1s steps(30) forwards; } .img-sahpe { position: absolute; width: 60px; height: 60px; background-repeat: no-repeat; background-size: 100% auto; background-position: top; } @keyframes zpro_b3u { 0% { background-position: 0 0; } to { background-position: 0 100%; } } .is-enter { -webkit-animation: zpro-icon-enter 0.3s steps(16) forwards; animation: zpro-icon-enter 0.3s steps(16) forwards; } .is-leave { -webkit-animation: zpro-icon-leave 0.3s steps(16) forwards; animation: zpro-icon-leave 0.3s steps(16) forwards; } @-webkit-keyframes zpro-icon-enter { 0% { background-position: 0 0; } to { background-position: 0 -960px; } } @keyframes zpro-icon-enter { 0% { background-position: 0 0; } to { background-position: 0 -960px; } } @-webkit-keyframes zpro-icon-leave { 0% { background-position: 0 -960px; } to { background-position: 0 0; } } @keyframes zpro-icon-leave { 0% { background-position: 0 -960px; } to { background-position: 0 0; } } .text-number { color: #fff; } .number-size { display: block; font-size: 1.75rem; font-weight: 700; line-height: 1.2; margin: 0 0 15px; } .box-contents:hover .numberup, .box-contents:hover .text-number { color: var(--is-element); } .search-bg-overlay { position: absolute; top: 0; left: 0; height: 100%; width: 100%; -webkit-transition: opacity 0.3s cubic-bezier(0.77, 0, 0.175, 1); -o-transition: opacity 0.3s cubic-bezier(0.77, 0, 0.175, 1); transition: opacity 0.3s cubic-bezier(0.77, 0, 0.175, 1); background: rgb(0 0 0 / 30%); z-index: -1; } [data-bs-theme='dark'] .accordion { --mdb-accordion-bg: #222529; } [data-bs-theme='dark'] .accordion-button:not(.collapsed) { background-color: #222529; } .navbar .menu-item .angle_mark { padding: 0.15em 0.4rem; height: 1.1rem; line-height: 1.1rem; border-radius: 0.3rem 0.3rem 0.3rem 0; color: #ffffff; font-size: 0.8rem; white-space: nowrap; transform: translate(-5px, 10px) scale(0.85); margin-right: -10px; } .navbar .menu-item.menu-item-has-children .sub-menu .angle_mark { top: 0; right: 0; margin-right: 0; } .carousel-item .media-img { background-position: top; -o-object-fit: cover; object-fit: cover; height: 100%; width: 100%; } #search-top-Modal .search-form .search-select .form-select { font-size: 1rem; } #search-top-Modal .search-form .search-fields input { line-height: 1; } /**/ .b-blue, .b-blue-2, .b-cyan, .b-gray, .b-green, .b-purple, .b-red, .b-theme, .b-yellow, .jb-blue, .jb-cyan, .jb-green, .jb-pink, .jb-purple, .jb-red, .jb-vip1, .jb-vip2, .jb-yellow { color: var(--this-color) !important; background: var(--this-bg) !important; --this-color: #ffffff; } .jb-blue, .jb-cyan, .jb-green, .jb-pink, .jb-purple, .jb-red, .jb-vip1, .jb-vip2, .jb-yellow { border: none; } .b-theme { --this-bg: var(--focus-color); } .b-gray { --this-bg: #818b95; } .b-red { --this-bg: #ff5473; } .b-yellow { --this-bg: #ff6f06; } .b-cyan { --this-bg: #08c4c1; } .b-blue { --this-bg: #2997f7; } .b-blue-2 { --this-bg: #5c7cff; } .b-green { --this-bg: #12b928; } .b-purple { --this-bg: #d448f5; } .c-blue, .c-blue-2, .c-cyan, .c-gray, .c-green, .c-green-2, .c-purple, .c-purple-2, .c-red, .c-red-2, .c-theme, .c-white, .c-yellow, .c-yellow-2 { color: var(--this-color) !important; } .c-theme { --this-color: var(--focus-color); --this-bg: var(--focus-color-opacity1); } .c-gray { --this-color: #888; --this-bg: rgba(136, 136, 136, 0.1); } .c-white { --this-color: #ffffff; --this-bg: rgba(255, 255, 255, 0.1); } .c-red { --this-color: #ff5473; --this-bg: rgba(255, 84, 115, 0.1); } .c-red-2 { --this-color: #d6064c; --this-bg: rgba(194, 41, 46, 0.1); } .c-yellow { --this-color: #ff6f06; --this-bg: rgba(255, 111, 6, 0.1); } .c-yellow-2 { --this-color: #c58516; --this-bg: rgba(179, 103, 8, 0.1); } .c-blue { --this-color: #2997f7; --this-bg: rgba(41, 151, 247, 0.1); } .c-blue-2 { --this-color: #5c7cff; --this-bg: rgba(77, 130, 249, 0.1); } .c-cyan { --this-color: #04b9b6; --this-bg: rgba(8, 196, 193, 0.1); } .c-green { --this-color: #18a52a; --this-bg: rgba(18, 185, 40, 0.1); } .c-green-2 { --this-color: #6a933e; --this-bg: rgba(72, 135, 24, 0.1); } .c-purple { --this-color: #e434e1; --this-bg: rgba(213, 72, 245, 0.1); } .c-purple-2 { --this-color: #8e4aff; --this-bg: rgba(154, 72, 245, 0.1); } .vip-tag { --this-color: #ffffff; --this-bg: linear-gradient(135deg, #ff74cd 10%, #ec7d0b 100%); } .badg-sm { border: 0; padding: 1px 4px; } .jb-red { --this-bg: linear-gradient(135deg, #fd7a64 10%, #fb2d2d 100%); } .jb-pink { --this-bg: linear-gradient(135deg, #ff5e7f 30%, #ff967e 100%); } .jb-yellow { --this-bg: linear-gradient(135deg, #f59f54 10%, #ff6922 100%); } .jb-blue { --this-bg: linear-gradient(135deg, #2468f2 10%, #3d70ff 100%); } .jb-cyan { --this-bg: linear-gradient(140deg, #039ab3 10%, #58dbcf 90%); } .jb-green { --this-bg: linear-gradient(135deg, #60e464 10%, #5cb85b 100%); } .jb-purple { --this-bg: linear-gradient(135deg, #f98dfb 10%, #ea00f9 100%); } .jb-vip1 { --this-bg: linear-gradient(25deg, #eabe7b 10%, #f5e3c7 70%, #edc788 100%); --this-color: #866127; } .jb-vip2 { --this-bg: linear-gradient(317deg, #4d4c4c 30%, #7b7b7b 70%, #5f5c5c 100%); --this-color: #ddd; } /********菜单固定********/ .site-header.headerfull { position: fixed !important; box-shadow: inset 1px 1px rgba(255, 255, 255, 0.2), inset -1px -1px rgba(255, 255, 255, 0.1), 1px 3px 24px -1px rgba(0, 0, 0, 0.15) !important; background-color: hsla(0, 0%, 100%, 0.6) !important; background: hsla(0, 0%, 100%, 0.6) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .header-transparent .site-header.headerfull .navbar .action-hover-menu .avatar-warp, .header-transparent .site-header.headerfull .navbar .actions .action-btn, .header-transparent .site-header.headerfull .navbar .nav-list>.menu-item>a { color: #000 !important; } @media (min-width: 768px) { .navbar .dropdown-menu.content-dd { width: 320px; } } .dropdown-notifications-list { max-height: 24.08rem; overflow: hidden; overflow-y: auto; } /*****徽章******/ .badge img { max-height: 14px; line-height: 14px; vertical-align: middle; color: #ffffff; display: inline-block; background-repeat: no-repeat; background-color: #fff0; background-size: contain; } /***********PC*******/ @media (min-width: 992px) { .top-nav-jianbian { cursor: pointer; width: 100%; top: 0; left: 0; right: 0; margin-left: auto; margin-right: auto; height: 60px; position: absolute; z-index: 2; opacity: 0.4; background: -moz-linear-gradient(rgba(39, 42, 51, 1), rgba(39, 42, 51, 0)); background: -webkit-linear-gradient(rgba(39, 42, 51, 1), rgba(39, 42, 51, 0)); background: -o-linear-gradient(rgba(39, 42, 51, 1), rgba(39, 42, 51, 0)); background: -ms-linear-gradient(rgba(39, 42, 51, 1), rgba(39, 42, 51, 0)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E5272A33', endColorstr='#00272A33', GradientType=0); } .section-title>h3:before { background: linear-gradient(to right, var(--is-rgb), var(--is-element)); content: ''; height: 1px; width: 60px; margin: 0 20px 0 0; } .section-title>h3:after { background: linear-gradient(to right, var(--is-element), var(--is-rgb)); content: ''; height: 1px; width: 60px; margin: 0 0 0 20px; } .section-title>h3 { margin-bottom: 10px; position: relative; display: flex; justify-content: center; align-items: center; } .section-title>p { padding-left: 10px; } /* Stack box */ .stack-box { position: relative; z-index: 1; height: 300vh; } .stack-box .stack-box-contain { height: 100vh; position: -webkit-sticky; position: sticky; top: 60px; } .stack-box .stack-item { height: 100vh; width: 100%; position: absolute; overflow: hidden; z-index: 999; display: flex; align-items: center; } .stack-box .stack-item.stack-item-02 { z-index: 99; } .stack-box .stack-item.stack-item-03 { z-index: 9; } .stack-box .stack-item .stack-item-wrapper { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; display: flex; align-items: center; height: 100vh; } .transform-3d { transform: translate3d(0px, 0px, 100px); } .logo-wrapper i.webfav { width: 288px; height: 108px; display: none; overflow: hidden; background: url(../images/website.webp) no-repeat 50%/100%; position: absolute; left: 0; top: 0; z-index: -1; } .logo-wrapper:hover i.webfav { display: block; overflow: visible; } } /*移动端适配*/ @media (max-width: 768px) { .angle_mark, #comments .comment-reply-title { display: none !important; } /* Stack box */ .stack-box { height: auto; } .stack-box .stack-box-contain { height: auto; position: relative; } .stack-box .stack-item { height: auto; position: relative; display: block; margin-bottom: 20px; } .stack-box .stack-item .stack-item-wrapper { position: relative; display: flex; align-items: center; height: auto; } .transform-3d { transform: translate3d(0px, 0px, 100px); } .accordion.series .accordion-button { display: flex; flex-direction: column; /* 让文本和链接垂直排列 */ align-items: center; } } /***********/ .glass-bg { background: var(--bg-glass); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, .2); -webkit-transition: all 0.2s; transition: all 0.2s; } /***********/ .modal-body .close:before, .modal-header .close:before, .toast-header .close:before, .off-canvas .canvas-close:before, .offcanvas .canvas-close:before { position: absolute; right: 6px; width: 16px; height: 4px; content: ''; -webkit-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; -webkit-transform: rotate(45deg); transform: rotate(45deg); background-color: #ffffff; } .modal-body .close:after, .modal-header .close:after, .toast-header .close:after, .off-canvas .canvas-close:after, .offcanvas .canvas-close:after { position: absolute; right: 6px; width: 16px; height: 4px; content: ''; -webkit-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); background-color: #ffffff; } .modal-body .close:hover:before, .modal-header .close:hover:before, .toast-header .close:hover:before, .off-canvas .canvas-close:hover:before, .offcanvas .canvas-close:hover:before { background-color: var(--is-element); -webkit-transform: rotate(180deg); transform: rotate(180deg); } .modal-body .close:hover:after, .swal2-close:hover:after, .modal-header .close:hover:after, .toast-header .close:hover:after, .off-canvas .canvas-close:hover:after, .offcanvas .canvas-close:hover:after { background-color: var(--is-element); -webkit-transform: rotate(0); transform: rotate(0); } .off-canvas .canvas-close i { display: none; } @keyframes unfoldIn { 0% { transform: scaleY(0.005) scaleX(0); } 50% { transform: scaleY(0.005) scaleX(1); } 100% { transform: scaleY(1) scaleX(1); } } @keyframes unfoldOut { 0% { transform: scaleY(1) scaleX(1); } 50% { transform: scaleY(0.005) scaleX(1); } 100% { transform: scaleY(0.005) scaleX(0); } } .modal-body .close, .modal-header .close, .toast-header .close, .off-canvas .canvas-close { position: absolute; right: 14px; top: 10px; padding: 1rem 1rem; margin: -1rem -1rem -1rem auto; z-index: 9; border: none; /* 去掉按钮边框 */ background-color: transparent; } /**********************************************/ .flex-auto { flex: auto; overflow: hidden; } /***/ .text-ellipsis-0 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } .text-ellipsis { overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .text-ellipsis-2 { overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /**************/ .card .card-img-absolute { position: absolute; top: 0; right: -100%; height: 100%; transition: all 900ms ease; -moz-transition: all 900ms ease; -webkit-transition: all 900ms ease; -ms-transition: all 900ms ease; -o-transition: all 900ms ease } .invite-card:hover .card-img-absolute { right: 0; } /***************************数字颜色***********************************/ .rank-num1 { color: #ff5473 !important; background-color: rgba(255, 84, 115, 0.1) !important; } .rank-num2 { color: #ff6f06 !important; background-color: rgba(255, 111, 6, 0.1) !important; } .rank-num3 { color: #e434e1 !important; background-color: rgba(213, 72, 245, 0.1) !important; } .rank-num4 { color: #2997f7 !important; background-color: rgba(41, 151, 247, 0.1) !important; } .rank-num5 { color: #18a52a !important; background-color: rgba(18, 185, 40, 0.1) !important; } .rank-num6 { color: #c58516 !important; background-color: rgba(179, 103, 8, 0.1) !important; } /*********************************************/ .header-slider-card { position: relative; margin: 0 auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 10; } .sm-box:hover { background-color: hsla(0, 0%, 100%, 0.3); transition: background-color 0.3s ease-in; } .flex1 { flex: auto; overflow: hidden; } .text-color { background-image: -webkit-linear-gradient(125deg, var(--is-element) 50%, var(--is-rgb) 40%); background-image: -moz-linear-gradient(125deg, var(--is-element) 50%, var(--is-rgb) 40%); background-image: -o-linear-gradient(125deg, var(--is-element) 50%, var(--is-rgb) 40%); background-image: linear-gradient(125deg, var(--is-element) 50%, var(--is-rgb) 40%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .owl-theme .owl-nav [class*='owl-']:hover { background: var(--is-element); } .home-owl .owl-theme .owl-dots { bottom: 4.5rem; } /***********************/ .fs-sm { font-size: 0.875rem !important; } /*********/ .avatar-warp, .avatar { position: relative; display: inline-block; transition: all 0.2s; -o-object-fit: cover; object-fit: cover; } .avatar-warp .avatar-badge, .avatar-meta .avatar-badge { width: calc(24px / 2.5) !important; height: calc(24px / 2.5) !important; max-width: 25px; max-height: 25px; min-width: 10px; min-height: 10px; position: absolute; right: -1px; bottom: -1px; overflow: hidden; } .avatar .avatar-badge { width: calc(36px / 2.5) !important; height: calc(36px / 2.5) !important; max-width: 25px; max-height: 25px; min-width: 12px; min-height: 12px; position: absolute; right: 2px; bottom: -1px; overflow: hidden; } .avatar .avatar-img { border-radius: 50% } /***********************/ .uc-page .post-pay-type { display: none; } .post-item:hover .post-pay-type { animation: slideDown 0.3s forwards; opacity: 1; } .post-pay-type { position: absolute; opacity: 0; top: 0px; right: 0; color: #fff; font-size: 12px; white-space: nowrap; overflow-x: auto; overflow-y: hidden; z-index: 9; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .post-pay-type::-webkit-scrollbar { height: 2px; } .post-pay-type .post-pay-type-icon { background: #fff; border-radius: 10px; color: #a1a1a8; padding: 5px; margin-right: 2px; text-shadow: none; display: inline-flex; align-items: center; } .post-pay-type span { line-height: 16px; height: 16px; } .post-pay-type>div i { font-size: 10px; } /*******/ .post-item .vip-badge-container { opacity: 1; transform: translateY(0); transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; } .vip-badge-container { display: flex; max-width: 100%; overflow-x: hidden; white-space: nowrap; padding: 0; transition: overflow-x 0.3s; } .vip-badge-container .vip-badge { display: inline-block; flex: 0 0 auto; } .post-item:hover .vip-badge-container { overflow-x: auto; scrollbar-width: auto; -ms-overflow-style: auto; } .post-item:hover .vip-badge-container { animation: slideUp 0.3s forwards; } .post-item .vip-badge-container { animation: slideDown 0.3s forwards; } .post-item:not(:hover) .vip-badge-container { animation: slideDown 0.3s forwards; } .post-item.item-list .tips-badge { max-width: 180px; } /*****************/ @-webkit-keyframes hbgAnim { from { -webkit-transform: scale(1); transform: scale(1); } to { -webkit-transform: scale(1.3); transform: scale(1.3); } } @keyframes hbgAnim { from { -webkit-transform: scale(1); transform: scale(1); } to { -webkit-transform: scale(1.3); transform: scale(1.3); } } @keyframes slideUp { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-20px); } } @keyframes slideDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } /******************************/ .post-cms-lists { position: relative; } .post-cms-lists .card-body>a { color: #fff; } .post-cms-lists ul { margin: 0; padding: 0; padding-bottom: 10px; padding-top: 5px; } .post-cms-lists ul>li { border: none !important; padding: 0.3rem 1rem; } .post-cms-lists ul>li a:hover { padding-left: 5px; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } /****************************************************************/ .dropdownmenu-primary .dropdown-item.active, .dropdownmenu-primary .dropdown-item:focus, .dropdownmenu-primary .dropdown-item:hover { background-color: rgba(28, 132, 238, 0.07) !important; color: #1c84ee; } .dropdownmenu-secondary .dropdown-item.active, .dropdownmenu-secondary .dropdown-item:focus, .dropdownmenu-secondary .dropdown-item:hover { background-color: rgba(116, 120, 141, 0.07) !important; color: #74788d; } .dropdownmenu-success .dropdown-item.active, .dropdownmenu-success .dropdown-item:focus, .dropdownmenu-success .dropdown-item:hover { background-color: rgba(52, 195, 143, 0.07) !important; color: #34c38f; } .dropdownmenu-info .dropdown-item.active, .dropdownmenu-info .dropdown-item:focus, .dropdownmenu-info .dropdown-item:hover { background-color: rgba(22, 218, 241, 0.07) !important; color: #16daf1; } .dropdownmenu-warning .dropdown-item.active, .dropdownmenu-warning .dropdown-item:focus, .dropdownmenu-warning .dropdown-item:hover { background-color: rgba(255, 204, 90, 0.07) !important; color: #ffcc5a; } .dropdownmenu-purple .dropdown-item.active, .dropdownmenu-purple .dropdown-item:focus, .dropdownmenu-purple .dropdown-item:hover { background-color: rgba(111, 66, 193, 0.07) !important; color: #6f42c1; } .dropdownmenu-danger .dropdown-item.active, .dropdownmenu-danger .dropdown-item:focus, .dropdownmenu-danger .dropdown-item:hover { background-color: rgba(239, 103, 103, 0.07) !important; color: #ef6767; } .dropdownmenu-pink .dropdown-item.active, .dropdownmenu-pink .dropdown-item:focus, .dropdownmenu-pink .dropdown-item:hover { background-color: rgba(232, 62, 140, 0.07) !important; color: #e83e8c; } .dropdownmenu-light .dropdown-item.active, .dropdownmenu-light .dropdown-item:focus, .dropdownmenu-light .dropdown-item:hover { background-color: rgba(246, 246, 246, 0.07) !important; color: #f6f6f6; } .dropdownmenu-dark .dropdown-item.active, .dropdownmenu-dark .dropdown-item:focus, .dropdownmenu-dark .dropdown-item:hover { background-color: rgba(43, 57, 64, 0.07) !important; color: #2b3940; } /*******************************************************/ #particles-js { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(at center, var(--is-rgb), var(--is-rgb2)); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; filter: brightness(0.7); z-index: -1; } /****/ .alicare { right: 10px; bottom: 110px; z-index: 999; display: block; margin: 0; padding: 0; position: fixed; user-select: none; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .alicare.hidden { transform: translateX(150%); /* 向右滑动隐藏 */ } .alicare .float-ul { margin: 0; padding: 0; list-style: none; } .alicare .float-ul .coverage { position: relative; display: block; width: 44px; margin-top: 10px; border-radius: 24px; text-decoration: none; text-align: center; cursor: pointer; } .alicare .float-ul .coverage span { margin: 25px 0 5px 0; display: inline-block; font-size: 14px; color: #ffffff; letter-spacing: 0; text-align: center; line-height: 16px; letter-spacing: 2px; writing-mode: vertical-lr; writing-mode: tb-lr; } .alicare .float-ul .list-item { position: relative; text-align: center; align-content: center; width: 44px; height: 44px; line-height: 48px; margin-top: 12px; border-radius: 29px; cursor: pointer; } .alicare .float-ul .list-item .iconfont { font-size: 22px; } .alicare .float-ul .list-item:hover .iconfont, .list-items:hover .iconfont { color: var(--is-element); } .alicare .float-ul .list-item:not(:nth-child(2)) { margin-top: 10px; } .list-item.toggle-color>span { display: none; } .list-item.toggle-color>span.show { display: inline-block; } /***/ .pople-img { background-image: url('../images/footer/user.png'); } .ziyuan-img { background-image: url('../images/footer/code.png'); } .today-img { background-image: url('../images/footer/24.png'); } .week-img { background-image: url('../images/footer/time.png'); } .safe-img { background-image: url('../images/footer/safe.png'); } .view-img { background-image: url('../images/footer/set.png'); } .glass-icon { display: flex; justify-content: center; margin-bottom: 60px; } /***/ .navnum { position: absolute; top: 12px; right: 5%; border-radius: 8px; text-align: center; font-family: Calibri; font-size: 12px; max-width: 50px; } /***********************************************/ /************************/ .coupon-item { position: relative; height: 112px; background: var(--zp-bg); border-radius: 2px; box-sizing: border-box; } .expired .coupon-header, .used .coupon-header, .mode-pay .coupon-header, .claimed-used .coupon-header { color: #fff; display: flex; align-items: baseline; padding: 10px; } .expired .coupon-header { background-image: -webkit-linear-gradient(0deg, #f34250 0%, #ff7d3b 100%); background-image: linear-gradient(0deg, #f34250 0%, #ff7d3b 100%); } .used .coupon-header { background-image: -webkit-linear-gradient(-180deg, #bcc5ce 0%, #929ead 98%); background-image: linear-gradient(-180deg, #bcc5ce 0%, #929ead 98%); } .mode-pay .coupon-header { background: -webkit-linear-gradient(45deg, var(--is-element) 25%, var(--is-rgb)) !important; background: linear-gradient(45deg, var(--is-element) 25%, var(--is-rgb)) !important; } .claimed-used .coupon-header { background-image: linear-gradient(0deg, #0ba360 0%, #3cba92 100%); } #zz-shadow::before, #zz::before { display: block; max-width: 100%; height: 16px; transform: rotate(180deg); content: ''; } .coupon-item .coupon-header .coupon-info { width: 100%; } .coupon-item .coupon-header .coupon-value { text-align: right; font-weight: 300; font-size: 13px; } #zz, #zz-shadow { max-width: 100%; width: 100%; height: 16px; position: absolute; margin-top: -3px; } #zz-shadow::before { margin-top: -10px; background: linear-gradient(0deg, transparent 10px, #000 10px), linear-gradient(-135deg, #000 10px, transparent 10px), linear-gradient(135deg, #000 10px, transparent 10px); background-color: transparent; background-position: -2px center; background-repeat: repeat-x; background-size: 100% 100%, 16px 16px, 16px 16px; opacity: 0.15; } #zz::before { margin-top: -8px; background: linear-gradient(0deg, transparent 10px, var(--zp-bg) 10px), linear-gradient(-135deg, var(--zp-bg) 10px, transparent 10px), linear-gradient(135deg, var(--zp-bg) 10px, transparent 10px); background-color: transparent; background-position: 0 center; background-repeat: repeat-x; background-size: 100% 100%, 16px 16px, 16px 16px; } .coupon-item .coupon-body { padding: 10px; font-size: 14px; color: #475669; } .coupon-title { font-size: 14px; } .coupon-item .coupon-body .coupon-copy { padding: 2px 6px; border: 1px solid; border-radius: 3px; color: var(--is-element); background: 0 0; font-size: 12px; } .coupon-code { font-size: 12px; color: #004167; text-align: center; border-radius: 3px; padding: 3px 5px; background-image: linear-gradient(45deg, #9e9e9e 25%, #fff 0, #fff 50%, #9e9e9e 0, #9e9e9e 75%, #fff 0); background-size: 2px 2px; } /**********************************************/ /* Effect 1: Fade in and scale up */ .md-effect-1 .modal-content { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .show.md-effect-1 .modal-content { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } /* Effect 2: Slide from the right */ .md-effect-2 .modal-content { -webkit-transform: translateX(20%); -moz-transform: translateX(20%); -ms-transform: translateX(20%); transform: translateX(20%); opacity: 0; -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); -moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); } .show.md-effect-2 .modal-content { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; } /* Effect 3: Slide from the bottom */ .md-effect-3 .modal-content { -webkit-transform: translateY(20%); -moz-transform: translateY(20%); -ms-transform: translateY(20%); transform: translateY(20%); opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .show.md-effect-3 .modal-content { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; } /* Effect 4: Newspaper */ .md-effect-4 .modal-content { -webkit-transform: scale(0) rotate(720deg); -moz-transform: scale(0) rotate(720deg); -ms-transform: scale(0) rotate(720deg); transform: scale(0) rotate(720deg); opacity: 0; } .md-effect-4 .modal-content { -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; } .show.md-effect-4 .modal-content { -webkit-transform: scale(1) rotate(0deg); -moz-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); opacity: 1; } /* Effect 5: fall */ .md-effect-5 .modal-content { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(600px) rotateX(20deg); -moz-transform: translateZ(600px) rotateX(20deg); -ms-transform: translateZ(600px) rotateX(20deg); transform: translateZ(600px) rotateX(20deg); opacity: 0; } .show.md-effect-5 .modal-content { -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; transition: all 0.3s ease-in; -webkit-transform: translateZ(0px) rotateX(0deg); -moz-transform: translateZ(0px) rotateX(0deg); -ms-transform: translateZ(0px) rotateX(0deg); transform: translateZ(0px) rotateX(0deg); opacity: 1; } /* Effect 6: side fall */ .md-effect-6 .modal-content { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translate(30%) translateZ(600px) rotate(10deg); -moz-transform: translate(30%) translateZ(600px) rotate(10deg); -ms-transform: translate(30%) translateZ(600px) rotate(10deg); transform: translate(30%) translateZ(600px) rotate(10deg); opacity: 0; } .show.md-effect-6 .modal-content { -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; transition: all 0.3s ease-in; -webkit-transform: translate(0%) translateZ(0) rotate(0deg); -moz-transform: translate(0%) translateZ(0) rotate(0deg); -ms-transform: translate(0%) translateZ(0) rotate(0deg); transform: translate(0%) translateZ(0) rotate(0deg); opacity: 1; } /* Effect 7:  slide and stick to top */ .md-effect-7 { top: 0; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .md-effect-7 .modal-content { -webkit-transform: translateY(-200%); -moz-transform: translateY(-200%); -ms-transform: translateY(-200%); transform: translateY(-200%); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; opacity: 0; } .show.md-effect-7 .modal-content { -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); border-radius: 0 0 3px 3px; opacity: 1; } /* Effect 8: 3D flip horizontal */ .md-effect-8 .modal-content { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateY(-70deg); -moz-transform: rotateY(-70deg); -ms-transform: rotateY(-70deg); transform: rotateY(-70deg); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; opacity: 0; } .show.md-effect-8 .modal-content { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 1; } /* Effect 9: 3D flip vertical */ .md-effect-9 .modal-content { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(-70deg); -moz-transform: rotateX(-70deg); -ms-transform: rotateX(-70deg); transform: rotateX(-70deg); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; opacity: 0; } .show.md-effect-9 .modal-content { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; } /* Effect 10: 3D sign */ .md-effect-10 .modal-content { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(-60deg); -moz-transform: rotateX(-60deg); -ms-transform: rotateX(-60deg); transform: rotateX(-60deg); -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; transform-origin: 50% 0; opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .show.md-effect-10 .modal-content { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; } /* Effect 11: Super scaled */ .md-effect-11 .modal-content { -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); transform: scale(2); opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .show.md-effect-11 .modal-content { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } /* Effect 12:  Just me */ .md-effect-12 .modal-content { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .md-effect-12 .modal-content { background: transparent; } .show.md-effect-12 .modal-content { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } /* Effect 13: 3D slit */ .md-effect-13 .modal-content { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(-3000px) rotateY(90deg); -moz-transform: translateZ(-3000px) rotateY(90deg); -ms-transform: translateZ(-3000px) rotateY(90deg); transform: translateZ(-3000px) rotateY(90deg); opacity: 0; } .show.md-effect-13 .modal-content { -webkit-animation: slit 0.7s forwards ease-out; -moz-animation: slit 0.7s forwards ease-out; animation: slit 0.7s forwards ease-out; } @-webkit-keyframes slit { 50% { -webkit-transform: translateZ(-250px) rotateY(89deg); opacity: 0.5; -webkit-animation-timing-function: ease-out; } 100% { -webkit-transform: translateZ(0) rotateY(0deg); opacity: 1; } } @-moz-keyframes slit { 50% { -moz-transform: translateZ(-250px) rotateY(89deg); opacity: 0.5; -moz-animation-timing-function: ease-out; } 100% { -moz-transform: translateZ(0) rotateY(0deg); opacity: 1; } } @keyframes slit { 50% { transform: translateZ(-250px) rotateY(89deg); opacity: 1; animation-timing-function: ease-in; } 100% { transform: translateZ(0) rotateY(0deg); opacity: 1; } } /* Effect 14:  3D Rotate from bottom */ .md-effect-14 .modal-content { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateY(100%) rotateX(90deg); -moz-transform: translateY(100%) rotateX(90deg); -ms-transform: translateY(100%) rotateX(90deg); transform: translateY(100%) rotateX(90deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; transform-origin: 0 100%; opacity: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .show.md-effect-14 .modal-content { -webkit-transform: translateY(0%) rotateX(0deg); -moz-transform: translateY(0%) rotateX(0deg); -ms-transform: translateY(0%) rotateX(0deg); transform: translateY(0%) rotateX(0deg); opacity: 1; } /**********/ .btn-primary-soft { color: #2163e8 !important; background-color: rgba(33, 99, 232, 0.1) !important; } .btn-primary-soft:active, .btn-primary-soft:hover { color: #fff !important; background-color: #2163e8 !important; border-color: #2163e8 !important; } .btn-primary-soft:focus { color: #2163e8 !important; background-color: rgba(33, 99, 232, 0.1) !important; border-color: transparent !important; } .btn-secondary-soft { color: #595d69 !important; background-color: rgba(89, 93, 105, 0.1) !important; } .btn-secondary-soft:active, .btn-secondary-soft:hover { color: #fff !important; background-color: #595d69 !important; border-color: #595d69 !important; } .btn-secondary-soft:focus { color: #595d69 !important; background-color: rgba(89, 93, 105, 0.1) !important; border-color: transparent; } .btn-success-soft { color: #0cbc87 !important; background-color: rgba(12, 188, 135, 0.1) !important; } .btn-success-soft:active, .btn-success-soft:hover { color: #fff !important; background-color: #0cbc87 !important; border-color: #0cbc87 !important; } .btn-success-soft:focus { color: #0cbc87 !important; background-color: rgba(12, 188, 135, 0.1) !important; border-color: transparent !important; } .btn-info-soft { color: #4f9ef8 !important; background-color: rgba(79, 158, 248, 0.1) !important; } .btn-info-soft:active, .btn-info-soft:hover { color: #fff !important; background-color: #4f9ef8 !important; border-color: #4f9ef8 !important; } .btn-info-soft:focus { color: #4f9ef8 !important; background-color: rgba(79, 158, 248, 0.1) !important; border-color: transparent !important; } .btn-warning-soft { color: #f7c32e !important; background-color: rgba(247, 195, 46, 0.1) !important; } .btn-warning-soft:active, .btn-warning-soft:hover { color: #000 !important; background-color: #f7c32e !important; border-color: #f7c32e !important; } .btn-warning-soft:focus { color: #f7c32e !important; background-color: rgba(247, 195, 46, 0.1) !important; border-color: transparent !important; } .btn-danger-soft { color: #d6293e !important; background-color: rgba(214, 41, 62, 0.1) !important; } .btn-danger-soft:active, .btn-danger-soft:hover { color: #fff !important; background-color: #d6293e !important; border-color: #d6293e !important; } .btn-danger-soft:focus { color: #d6293e !important; background-color: rgba(214, 41, 62, 0.1) !important; border-color: transparent; } .btn-white-soft { color: #fff !important; background-color: rgba(255, 255, 255, 0.1) !important; } .btn-white-soft:active, .btn-white-soft:hover { color: #000 !important; background-color: #fff !important; border-color: #fff !important; } .btn-white-soft:focus { color: #fff !important; background-color: rgba(255, 255, 255, 0.1) !important; border-color: transparent !important; } .btn-light-soft { color: #f7f8f9 !important; background-color: rgba(247, 248, 249, 0.1) !important; } .btn-light-soft:active, .btn-light-soft:hover { color: #000 !important; background-color: #f7f8f9 !important; border-color: #f7f8f9 !important; } .btn-light-soft:focus { color: #f7f8f9 !important; background-color: rgba(247, 248, 249, 0.1) !important; border-color: transparent !important; } .btn-dark-soft { color: #191a1f !important; background-color: rgba(25, 26, 31, 0.1) !important; } .btn-dark-soft:active, .btn-dark-soft:hover { color: #fff !important; background-color: #191a1f !important; border-color: #191a1f !important; } .btn-dark-soft:focus { color: #191a1f !important; background-color: rgba(25, 26, 31, 0.1) !important; border-color: transparent !important; } .form-outline .input-prefix { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: color 0.2s; transition: color 0.2s; color: rgba(0, 0, 0, 0.87); right: 16px; left: initial; } [class*=btn-gradient-] { background-color: transparent; border-color: transparent; } [class*=btn-gradient-]:active { background-color: transparent; border-color: transparent !important; color: var(--mdb-white) !important; } [class*=btn-gradient-]:hover { background-position: right center; color: var(--mdb-white) !important; } .btn-gradient-purple-pink { background-image: linear-gradient(to right, #8b14b1, #d53d6e, #8b14b1); background-size: 200% auto; color: var(--mdb-white); } .btn-gradient-fast-pink-light-yellow { background-image: linear-gradient(to right, #f7567f, #ffba83, #f7567f); background-size: 200% auto; color: var(--mdb-white); } .btn-gradient-pink-orange { background-image: linear-gradient(to right, #de347f, #ef5f43, #de347f); background-size: 200% auto; color: var(--mdb-white); } .btn-gradient-fast-blue-purple { background-image: linear-gradient(to right, var(--is-element), var(--is-rgb), var(--is-element)); background-size: 200% auto; color: var(--mdb-white); } .btn-gradient-light-pink-light-purple { background-image: linear-gradient(to right, #ed579b, #bc63e8, #ed579b); background-size: 200% auto; color: var(--mdb-white); } .btn-gradient-sky-blue-pink { background-image: linear-gradient(to right, #5758df, #f77991, #5758df); background-size: 200% auto; color: var(--mdb-white); } .btn-gradient-light-white { background-image: linear-gradient(to right, #c0c0c0, #f0f0f0, #c0c0c0); background-size: 200% auto; color: var(--is-element); } .btn-gradient-emerald-blue-emerald-green { background-image: linear-gradient(to right, #09afea, #19e089, #09afea); background-size: 200% auto; color: var(--mdb-white); } .btn.btn-transparent-white-light { background-color: transparent; border-color: rgba(255, 255, 255, 0.3); color: var(--mdb-white); } /* Text gradient color */ .text-gradient-blue-magenta-orange, .text-gradient-light-gray-white, .text-gradient-light-purple-light-orange, .text-gradient-sky-blue-pink, .text-gradient-light-blue-light-turquoise, .text-gradient-fast-blue-purple-light-orange, .text-gradient-light-pink-light-purple, .text-gradient-fast-blue-purple, .text-gradient-pink-orange, .text-gradient-fast-pink-light-yellow, .text-gradient-purple-pink, .text-gradient-light-pink-light-orange { -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .text-gradient-light-pink-light-orange { background-image: linear-gradient(to right, #ffafbd, #ffb3b4, #ffb7ac, #ffbda5, #ffc3a0); } .text-gradient-purple-pink { background-image: linear-gradient(to right, #8b14b1, #ab019e, #c00c8b, #cd267b, #d53d6e); } .text-gradient-fast-pink-light-yellow { background-image: linear-gradient(to right, #f7567f, #fe7177, #ff8a74, #ffa378, #ffba83); } .text-gradient-pink-orange { background-image: linear-gradient(to right, #de347f, #e73a70, #ed4461, #f05152, #ef5f43); } .text-gradient-fast-blue-purple { background-image: linear-gradient(to right, #2a46f4, #5f42f9, #833cfc, #a233fe, #bf25ff); } .text-gradient-light-pink-light-purple { background-image: linear-gradient(to right, #ed579b, #e855ad, #df57c0, #d15cd4, #bc63e8); } .text-gradient-fast-blue-purple-light-orange { background-image: linear-gradient(to right top, #183fb9, #4f41df, #ae2eb9, #ef3f59, #e9522d); } .text-gradient-light-blue-light-turquoise { background-image: linear-gradient(to right, #18cdbb, #22d2ae, #3cd69d, #57da89, #73dc73); } .text-gradient-sky-blue-pink { background-image: linear-gradient(to right, #556fff, #556fff, #e05fc4, #f767a6, #ff798e); } .text-gradient-light-purple-light-orange { background-image: linear-gradient(to right, #b783ff, #b783ff, #fa7cc1, #ff85a6, #ff9393); } .text-gradient-light-gray-white { background-image: linear-gradient(to bottom, #efefef, #efefef, #f7f7f7, #fdfdfc, #ffffff); } .text-gradient-blue-magenta-orange { background-image: linear-gradient(to right, #002fff, #ab00ff, #ff137d, #ff562f, #ee8502); } /***/ .entry-tags a:hover { color: #ffffff !important; } .entry-tags a { margin-right: 10px; font-size: 12px; display: flex; align-items: center; transition: all 0.5s ease; border-radius: 20px; position: relative; overflow: hidden; background-color: #eee; color: #000 } .entry-tags a::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background-color: var(--is-rgb); transition: left 0.5s ease; z-index: -1; } .entry-tags a:hover::before { left: 0; } .entry-tags a .tag-img { padding: 3px; border-radius: 100%; background-color: var(--is-rgb); margin-right: 5px; z-index: 1; } .entry-tags { display: flex; flex-flow: wrap; position: relative; } .tag-img i { font-size: 16px; color: #fff; } /* ================= Ribbons ==================== */ .ribbon-box { position: relative; /* Ribbon two */ } .ribbon-box .ribbon { position: relative; float: left; clear: both; padding: 5px 12px 5px 12px; margin-left: -30px; margin-bottom: 15px; -webkit-box-shadow: 2px 5px 10px rgba(50, 58, 70, 0.15); -o-box-shadow: 2px 5px 10px rgba(50, 58, 70, 0.15); box-shadow: 2px 5px 10px rgba(50, 58, 70, 0.15); color: #fff; font-size: 13px; font-weight: 600; } .ribbon-box .ribbon:before { content: ' '; border-style: solid; border-width: 10px; display: block; position: absolute; bottom: -10px; left: 0; margin-bottom: -10px; z-index: -1; } .ribbon-box .ribbon+p { clear: both; } .ribbon-box .ribbon-primary { background: #00acc1; } .ribbon-box .ribbon-primary:before { border-color: #007f8e transparent transparent; } .ribbon-box .ribbon-success { background: #25b343; } .ribbon-box .ribbon-success:before { border-color: #1c8933 transparent transparent; } .ribbon-box .ribbon-info { background: #4b88e4; } .ribbon-box .ribbon-info:before { border-color: #216bdb transparent transparent; } .ribbon-box .ribbon-warning { background: #f7b84b; } .ribbon-box .ribbon-warning:before { border-color: #f5a51a transparent transparent; } .ribbon-box .ribbon-danger { background: #f1556c; } .ribbon-box .ribbon-danger:before { border-color: #ed2643 transparent transparent; } .ribbon-box .ribbon-dark { background: #323a46; } .ribbon-box .ribbon-dark:before { border-color: #1d2128 transparent transparent; } .ribbon-box .ribbon-one { position: absolute; right: 0px; top: 0px; z-index: 1; overflow: hidden; width: 75px; height: 75px; text-align: left; } .ribbon-box .ribbon-one span { font-size: 12px; color: #fff; text-align: center; line-height: 20px; transform: rotate(45deg); -webkit-transform: rotate(45deg); width: 100px; display: block; -webkit-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0 0 rgba(0, 0, 0, 0.02); box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0 0 rgba(0, 0, 0, 0.02); position: absolute; top: 18px; left: -2px; font-weight: 600; } .ribbon-box .ribbon-two { position: absolute; left: -3px; top: -3px; z-index: 1; overflow: hidden; width: 75px; height: 75px; text-align: right; } .ribbon-box .ribbon-two span { font-size: 10px; color: #fff; text-align: center; line-height: 20px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); width: 100px; display: block; -webkit-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0 0 rgba(0, 0, 0, 0.02); box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0 0 rgba(0, 0, 0, 0.02); position: absolute; top: 19px; left: -21px; font-weight: 600; } .ribbon-box .ribbon-two span:before { content: ''; position: absolute; left: 0; top: 100%; z-index: -1; border-right: 3px solid transparent; border-bottom: 3px solid transparent; } .ribbon-box .ribbon-two span:after { content: ''; position: absolute; right: 0; top: 100%; z-index: -1; border-left: 3px solid transparent; border-bottom: 3px solid transparent; } .ribbon-box .ribbon-two-primary span { background: #00acc1; } .ribbon-box .ribbon-two-primary span:before { border-left: 3px solid #006875; border-top: 3px solid #006875; } .ribbon-box .ribbon-two-primary span:after { border-right: 3px solid #006875; border-top: 3px solid #006875; } .ribbon-box .ribbon-two-success span { background: #25b343; } .ribbon-box .ribbon-two-success span:before { border-left: 3px solid #18742b; border-top: 3px solid #18742b; } .ribbon-box .ribbon-two-success span:after { border-right: 3px solid #18742b; border-top: 3px solid #18742b; } .ribbon-box .ribbon-two-info span { background: #4b88e4; } .ribbon-box .ribbon-two-info span:before { border-left: 3px solid #1e60c5; border-top: 3px solid #1e60c5; } .ribbon-box .ribbon-two-info span:after { border-right: 3px solid #1e60c5; border-top: 3px solid #1e60c5; } .ribbon-box .ribbon-two-warning span { background: #f7b84b; } .ribbon-box .ribbon-two-warning span:before { border-left: 3px solid #eb990a; border-top: 3px solid #eb990a; } .ribbon-box .ribbon-two-warning span:after { border-right: 3px solid #eb990a; border-top: 3px solid #eb990a; } .ribbon-box .ribbon-two-danger span { background: #f1556c; } .ribbon-box .ribbon-two-danger span:before { border-left: 3px solid #e71332; border-top: 3px solid #e71332; } .ribbon-box .ribbon-two-danger span:after { border-right: 3px solid #e71332; border-top: 3px solid #e71332; } .ribbon-box .ribbon-two-dark span { background: #323a46; } .ribbon-box .ribbon-two-dark span:before { border-left: 3px solid #121519; border-top: 3px solid #121519; } .ribbon-box .ribbon-two-dark span:after { border-right: 3px solid #121519; border-top: 3px solid #121519; } /***************************/ ._404 ._404-icon, .avatar-xll { width: 14rem; height: 14rem; } /**************/ .rank-header { position: relative; margin: 0 auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 10; } .rank-header ul li { float: left; width: 25%; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 70px; bottom: -2px; } .rank-header ul li span { display: block; width: 100%; color: #6a6a6a; font-size: 16px; line-height: 70px; height: 70px; overflow: hidden; text-align: center; background: #f8f8f8; position: absolute; left: 0; bottom: 0; } .rank-header ul li span i { margin-right: 10px; } .rank-header ul li span:hover { color: var(--is-element); } .rank-header ul li:first-child span { -webkit-border-radius: 6px 0 0 0; border-radius: 6px 0 0 0; } .rank-header ul li:last-child span { -webkit-border-radius: 0 6px 0 0; border-radius: 0 6px 0 0; } .rank-header ul li.active span { background: #fff; height: 80px; line-height: 80px; -webkit-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0; color: var(--is-element); } @media (max-width: 767.98px) { .rank-header ul li span { font-size: 12px; height: 40px; line-height: 40px; } .rank-header ul li.active span { font-size: 12px; height: 50px; line-height: 50px; } } .ri-popup-content .form-control { border-bottom: 1px solid #bdbdbd; border-radius: 0 !important; } /*************/ .new-cat a { font-size: 12px; color: #ffffff; height: 12px; line-height: 12px; padding: 3px; border-radius: 3px; } .new-cat a:nth-child(1) { background-color: #757575; margin-right: 10px; } .new-cat a:nth-child(2) { background-color: #f34250; } .new-card { padding: 15px 20px; } .new-card>h2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height: 38px; padding: 0 30px; } .new-card>p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: #a1a1a8; font-size: 0.775rem; padding: 0; margin-bottom: 0; } .zpro-post { display: inline-block; -webkit-box-sizing: border-box; box-sizing: border-box; color: inherit; white-space: nowrap; border-radius: 16px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .zpro-post-icon { position: relative; display: inline-block; width: 18px; height: 18px; margin-right: -4px; overflow: hidden; color: #fff; font-size: 12px; line-height: 18px; text-align: center; vertical-align: middle; border-radius: 50%; } .zpro-post-title { display: inline-block; height: 18px; padding-right: 5px; padding-left: 5px; font-size: 12px; line-height: 18px; vertical-align: middle; border-radius: 16px; } .video-bg-overlay { position: absolute; top: 50%; left: 0; transform: translatey(-50%); width: 100%; } .widget-slider .slider img, .widget-slider .slider video { width: 100%; height: 100%; object-fit: cover; } /***/ .form-outline .form-control { border: var(--mdb-border-width) solid var(--mdb-border-color); } INPUT:-webkit-autofill~.form-label, INPUT:-webkit-autofill~.form-label, .form-outline .form-control~.form-label { transform: translateY(-1rem) translateY(0.1rem) scale(0.8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #vip-cdk-action .form-outline .form-control { border: var(--mdb-border-width) solid var(--mdb-border-color); } .ratio-2x3 { --mdb-aspect-ratio: 150%; } .ratio-3x2 { --mdb-aspect-ratio: 66.6666666667%; } .ratio-3x4 { --mdb-aspect-ratio: 133.3333333333%; } .archive-hero.shop-hero .img-box, .archive-shop .img-box { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 3px; max-height: 300px; } .archive-hero.shop-hero .img-box .views-rounded-dot { content: ' '; position: absolute; border-radius: 50%; background: #fc625d; width: 12px; height: 12px; top: 5px; left: 5px; -webkit-box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b; box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b; } .archive-hero.shop-hero .img-box img { -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; } .archive-hero.shop-hero .ri-down-warp .down-buy-warp { text-align: initial; } .archive-hero.shop-hero .ri-down-warp .down-buy-warp .buy-title { margin-bottom: 0.5rem; font-size: 0.875rem; color: #fff; } .archive-hero.shop-hero .ri-down-warp .down-buy-warp .prices-desc { width: -webkit-max-content; width: -moz-max-content; width: max-content; padding: 0.25rem 1rem; } .archive-hero.shop-hero .ri-down-warp .down-buy-warp .prices-info { list-style: none; padding: 0; margin: 0; position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 5px; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(10px); border-radius: 0.25rem; border: unset; } .archive-hero.shop-hero .ri-down-warp .down-buy-warp .prices-info:before { display: none; } .archive-hero.shop-hero .ri-down-warp .down-buy-warp .prices-info .price-item { padding: 6px; display: inline-block; line-height: 1.2; border-radius: 0.25rem; font-size: 0.875rem; } .archive-hero.shop-hero .ri-down-warp .down-buy-warp .prices-info .price-item.default { color: #d6293e; } .archive-hero.shop-hero .ri-down-warp .down-buy-warp .prices-info .price-item.no { color: #595d69; } .archive-hero.shop-hero .ri-down-warp .down-buy-warp .prices-info .price-item.vip { color: #0cbc87; } .archive-hero.shop-hero .ri-down-warp .down-buy-warp .prices-info .price-item.boosvip { color: #f7c32e; } .archive-hero.shop-hero .ri-down-warp .down-buy-warp .prices-info .price-item:after, .archive-hero.shop-hero .ri-down-warp .down-buy-warp .prices-info .price-item:before { display: none; } .down-info { list-style: none; margin: 0; background: rgba(255, 255, 255, 0.3); -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%); color: var(--is-body); border-radius: 0.25rem; border: unset; } .shop-vip img { width: 22px; height: 22px; } .archive-hero.shop-hero .ri-down-warp .down-buy-warp .buy-btns { margin-bottom: 0; } .single-content-nav .nav-item .nav-link { background-color: transparent; } .single-content-nav .nav-item .nav-link.active { background-color: var(--is-rgb); border-color: transparent; } .single-content-nav .nav-item .nav-link:hover { color: var(--is-element); } .modal .modal-frame { position: absolute; max-width: 100%; width: 100%; margin: 0; } @media (min-width: 768px) { .modal .modal-dialog.modal-top { top: 0; } } /***********/ .btn.btn-hover-animation-switch>span { display: inline-flex; align-items: center; } .btn.btn-hover-animation-switch .btn-text { margin-left: -13px; position: relative; z-index: 3; transition: transform 0.6s 0.125s cubic-bezier(0.1, 0.75, 0.25, 1); } .btn.btn-hover-animation-switch .btn-icon { margin-left: 6px; position: relative; transition: opacity 0.4s 0.25s, transform 0.6s 0.25s; transition-timing-function: cubic-bezier(0.1, 0.75, 0.25, 1); line-height: 0; z-index: 3; } .btn.btn-hover-animation-switch .btn-icon i { margin: 0; line-height: 0; } .btn.btn-hover-animation-switch .btn-icon+.btn-icon { order: -2; opacity: 0; transition-delay: 0s; margin-left: 0; -webkit-transform: translateX(-10px); transform: translateX(-10px); } .btn.btn-hover-animation-switch:hover .btn-text { transition-delay: 0.1s; transform: translateX(23px); } .btn.btn-hover-animation-switch:hover .btn-icon { transition-delay: 0s; transform: translateX(10px); opacity: 0; } .btn.btn-hover-animation-switch:hover .btn-icon+.btn-icon { opacity: 1; transform: translateX(0); transition-delay: 0.225s; } .btn.btn-hover-animation-switch.btn-icon-left .btn-text { margin-right: -15px; margin-left: 0px; position: relative; z-index: 3; } .btn.btn-hover-animation-switch.btn-icon-left .btn-icon { opacity: 0; margin-left: 0; transition-delay: 0s; -webkit-transform: translateX(10px); transform: translateX(10px); } .btn.btn-hover-animation-switch.btn-icon-left .btn-icon+.btn-icon { opacity: 1; margin-left: 0; margin-right: 6px; transition: opacity 0.4s 0.25s, transform 0.6s 0.25s; transition-timing-function: cubic-bezier(0.1, 0.75, 0.25, 1); -webkit-transform: translateX(0px); transform: translateX(0px); } .btn.btn-hover-animation-switch.btn-icon-left:hover .btn-text { transition-delay: 0.1s; transform: translateX(-20px); } .btn.btn-hover-animation-switch.btn-icon-left:hover .btn-icon { transform: translateX(0px); opacity: 1; transition-delay: 0.225s; } .btn.btn-hover-animation-switch.btn-icon-left:hover .btn-icon+.btn-icon { opacity: 0; transition-delay: 0s; transform: translateX(-10px); } .bg-light-medium-gray { background-color: #f0f2f8; } .bg-light-pink { background: #eee2ef; } .bg-gradient-very-light-gray-transparent { background: linear-gradient(to right, #dddfeb 15%, transparent 100%); } .bg-gradient-chablis-red-quartz-white { background-image: linear-gradient(to right, #fce7e1, #fce7e1, #efe2ea, #dcdaf5, #dcdaf5); } /****************/ #welcome { border: 0px solid #ffffff; color: #000000; font-size: 12px; padding: 10px; position: fixed; display: flex; left: 15px; bottom: 15px; z-index: 99; border-radius: 10px; flex-direction: column; align-items: center; } .from-url { color: var(--is-element); } .closebox { float: center; text-align: center; font-size: 14px; margin-top: 5px; } .message-body { overflow: auto; max-height: 300px; max-height: 60vh; -webkit-overflow-scrolling: touch } /**多彩背景**/ .modal-colorful-header, .colorful-bg { background-size: 120%; overflow: hidden; position: relative; color: var(--this-color); background: var(--this-bg); } .colorful-bg>.colorful-make::after, .colorful-bg>.colorful-make::before, .colorful-bg>.colorful-make { position: absolute; color: var(--this-color); background: var(--this-bg); border-radius: 100%; content: ' '; } .colorful-bg>.colorful-make { bottom: 0; height: 290px; width: 323px; top: 60%; } .colorful-bg>.colorful-make::before { right: -558px; bottom: 0; height: 300px; width: 677px; top: -325px; transform: rotate(341deg); opacity: 0.6; } .colorful-bg>.colorful-make::after { left: -262px; bottom: 0; height: 214px; width: 402px; top: -170px; transform: rotate(326deg); opacity: 0.4; } .colorful-bg>.colorful-make+* { position: relative; } .modal-colorful-header { border-radius: var(--mdb-modal-inner-border-radius) var(--mdb-modal-inner-border-radius) 0 0; background-size: 120%; position: absolute; left: 0; right: 0; top: 0; height: 120px; display: flex; align-items: center; justify-content: center; } .modal-colorful-header+* { margin-top: 120px; } .nav-link-badge { margin-left: auto; } .uc-page .uc-menu-warp .menu-item a { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-align: center; -webkit-box-align: center; align-items: center; } .slicknav_menu .slicknav_nav .menu-item>a { justify-content: flex-start; } /**/ .share .qq { background: radial-gradient(circle farthest-corner at 50% 0%, #76baff 0%, #1f8bff 100%); color: white; } .share .qzone { background: radial-gradient(circle farthest-corner at 50% 0%, #f9d84a 0%, #f0c30f 100%); color: white; } .share .qzone .z { position: absolute; color: #ffa000; left: 50%; top: 50%; transform: translate(-50%) translateY(-45%) scale(.45); } .share .weibo { background: radial-gradient(circle farthest-corner at 50% 0%, #ff7e67 0%, #ff4500 100%); color: white; } .share .btn { border-radius: 50%; display: inline-flex; justify-content: center; align-items: center; width: 40px; height: 40px; font-size: 1.2rem; transition: transform 0.3s ease; } .share .btn:hover { transform: scale(1.1); } /**/ .divider { display: block; text-align: center; margin: 1rem 0; overflow: hidden; white-space: nowrap; } .divider .divider-text { position: relative; display: inline-block; font-size: 0.9375rem; padding: 0rem 1rem; color: #444050; } .divider .divider-text i { font-size: 1.25rem; } .divider .divider-text:before, .divider .divider-text:after { content: ""; position: absolute; top: 50%; width: 100vw; border-top: 1px solid rgba(47, 43, 61, 0.12); } .divider .divider-text:before { right: 100%; } .divider .divider-text:after { left: 100%; } .divider.divider-dotted .divider-text:before, .divider.divider-dotted .divider-text:after, .divider.divider-dotted:before, .divider.divider-dotted:after { border-style: dotted; border-width: 0 1px 1px; border-color: rgba(47, 43, 61, 0.12); } .divider.divider-dashed .divider-text:before, .divider.divider-dashed .divider-text:after, .divider.divider-dashed:before, .divider.divider-dashed:after { border-style: dashed; border-width: 0 1px 1px; border-color: rgba(47, 43, 61, 0.12); } .divider.divider-primary .divider-text:before, .divider.divider-primary .divider-text:after { border-color: #7367f0; } .divider.divider-secondary .divider-text:before, .divider.divider-secondary .divider-text:after { border-color: #808390; } .divider.divider-success .divider-text:before, .divider.divider-success .divider-text:after { border-color: #28c76f; } .divider.divider-info .divider-text:before, .divider.divider-info .divider-text:after { border-color: #00bad1; } .divider.divider-warning .divider-text:before, .divider.divider-warning .divider-text:after { border-color: #ff9f43; } .divider.divider-danger .divider-text:before, .divider.divider-danger .divider-text:after { border-color: #ff4c51; } .divider.divider-dark .divider-text:before, .divider.divider-dark .divider-text:after { border-color: #4b4b4b; } .divider.divider-gray .divider-text:before, .divider.divider-gray .divider-text:after { border-color: rgba(47, 43, 61, 0.5); } #floor-container { position: fixed; top: 45%; left: 0px; z-index: 99; background-color: rgba(255, 255, 255, 0.2); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); -webkit-transition: all 0.2s; transition: all 0.2s; padding: 10px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); max-height: 90%; overflow-y: auto; width: 60px; display: none; opacity: 0; animation: slideOut 0.5s ease-out forwards; } .floor { margin: 10px 0; } .floor h3 { font-size: 12px; cursor: pointer; padding: 5px; background-color: #f1f1f1; border-radius: 4px; transition: background-color 0.3s ease; white-space: normal; line-height: 1.4; height: 40px; text-align: center; display: block; word-break: break-all; overflow: hidden; } .floor h3.active { background-color: var(--is-element); color: white; } #floor-container.active { display: block; animation: slideIn 0.5s ease-out forwards; opacity: 1; } @keyframes slideIn { 0% { transform: translateX(-100%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } @keyframes slideOut { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(-100%); opacity: 0; } } #scroll-progress-container { position: fixed; top: 0; left: 0; width: 0%; border-top: 2px solid var(--is-rgb); z-index: 9999; transition: width 0.25s ease-out; } #zm_mhz { color: #555555; overflow: hidden; margin: 10px 0; padding: 15px; font-size: 12px; /*border-radius: 10px;*/ box-shadow: 6px 0 12px -5px rgb(190, 196, 252), -6px 0 12px -5px rgb(189, 196, 252); background-color: #8EC5FC; background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%); background-image: -webkit-linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%); } #zm_xgh { color: #555555; overflow: hidden; margin: 10px 0; padding: 15px; font-size: 12px; /*border-radius: 10px;*/ box-shadow: 6px 0 12px -5px rgb(255, 176, 172), -6px 0 12px -5px rgb(255, 161, 174); background-color: #ff9a8b66; background-image: linear-gradient(220deg, #FF9A8B 0%, #ff6a8838 55%, #FF99AC 100%); background-image: -webkit-linear-gradient(220deg, #ff9a8b7a 0%, #ff6a88ab 55%, #ff99ac82 100%); } #zm_tkzj { color: #555555; overflow: hidden; margin: 10px 0; padding: 15px; font-size: 12px; /*border-radius: 10px;*/ box-shadow: 6px 0 12px -5px rgb(253, 223, 234), -6px 0 12px -5px rgb(215, 240, 243); background-color: #FFDEE9; background-image: linear-gradient(0deg, #ffdee9c4 0%, #b5fffc8f 100%); background-image: -webkit-linear-gradient(0deg, #ffdee9c4 0%, #b5fffc8f 100%); } #zm_xyz { color: #eeeeee; overflow: hidden; margin: 10px 0; padding: 15px; font-size: 12px; /*border-radius: 10px;*/ box-shadow: 6px 0 12px -5px rgb(12, 85, 141), -6px 0 12px -5px rgba(10, 58, 93, 0); background-image: radial-gradient(circle 263px at 100.2% 3%, rgba(12, 85, 141, 1) 31.1%, rgba(205, 181, 93, 1) 36.4%, rgba(244, 102, 90, 1) 50.9%, rgba(199, 206, 187, 1) 60.7%, rgba(249, 140, 69, 1) 72.5%, rgba(12, 73, 116, 1) 72.6%); } #zm_gll { color: #eeeeee; overflow: hidden; margin: 10px 0; padding: 15px; font-size: 12px; /*border-radius: 10px;*/ box-shadow: 6px 0 12px -5px rgb(68, 110, 92), -6px 0 12px -5px rgb(204, 212, 163); background-image: linear-gradient(102deg, rgba(68, 110, 92, 1) 17.4%, rgba(107, 156, 120, 1) 49.3%, rgba(154, 183, 130, 1) 83.4%, rgba(247, 237, 191, 1) 110.3%); } #zm_xty { color: #ffffff; overflow: hidden; margin: 10px 0; padding: 15px; font-size: 12px; /*border-radius: 10px; */ box-shadow: 6px 0 12px -5px rgb(253, 223, 234), -6px 0 12px -5px rgb(215, 240, 243); background-image: radial-gradient(circle farthest-corner at -8.9% 51.2%, rgba(255, 124, 0, 1) 0%, rgba(255, 124, 0, 1) 15.9%, rgba(255, 163, 77, 1) 15.9%, rgba(255, 163, 77, 1) 24.4%, rgba(19, 30, 37, 1) 24.5%, rgba(19, 30, 37, 1) 66%); } #zm_yyz { color: #ffffff; overflow: hidden; margin: 10px 0; padding: 15px; font-size: 12px; /*border-radius: 10px;*/ box-shadow: 6px 0 12px -5px rgb(175, 160, 208), -6px 0 12px -5px rgba(177, 161, 207, 0); background-image: radial-gradient(circle farthest-corner at 10% 20%, rgba(95, 117, 227, 1) 0%, rgba(188, 167, 205, 1) 90%); } #zm_szh { color: #c7c7c7; overflow: hidden; margin: 10px 0; padding: 15px; font-size: 12px; /*border-radius: 5px;*/ box-shadow: 6px 0 12px -5px rgb(155, 170, 185), -6px 0 12px -5px rgba(177, 161, 207, 0); background-image: radial-gradient(circle farthest-corner at 10% 20%, rgba(0, 0, 0, 1) 0%, rgba(64, 64, 64, 1) 90.2%); } #zm_wbk { color: #000000; overflow: hidden; margin: 10px 0; padding: 15px; } #zm_xyz a, #zm_gll a { color: #eeeeee; } #zm_szh a { color: #c7c7c7; } #zm_xty a, #zm_yyz a { color: #ffffff; } #flash-text { font-size: 20px; margin: 0; background: -webkit-linear-gradient(left, #ffffff, #ff0000 6.25%, #ff7d00 12.5%, #ffff00 18.75%, #00ff00 25%, #00ffff 31.25%, #0000ff 37.5%, #ff00ff 43.75%, #ffff00 50%, #ff0000 56.25%, #ff7d00 62.5%, #ffff00 68.75%, #00ff00 75%, #00ffff 81.25%, #0000ff 87.5%, #ff00ff 93.75%, #ffff00 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; animation: masked-animation 2s infinite linear; } @keyframes masked-animation { 0% { background-position: 0 0; } 100% { background-position: -100%, 0; } } /*.question-archive*/ .question-archive .question-cat { list-style: none; padding: 0; margin: 0; } .question-cat>a { display: inline-block; margin-right: 15px; margin-bottom: 10px; padding: .25rem .5rem; border: 1px solid transparent; background: rgba(0, 132, 255, 0.1); border-color: transparent; color: #0084ff; overflow: hidden; border-radius: 4px; } .question-cat .current, .question-cat>a:hover { color: var(--is-element); } .question-nav { border: none; background: #fff; padding-bottom:10px } .question-nav .nav-link { border: 0; font-weight: 700; font-size: 1rem; transition: all 0.3s ease; } .question-nav .nav-link:hover { transform: translateY(-2px); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .question-nav .nav-link.active { color: var(--is-element); position: relative; } /* 下划线通用样式 */ .question-nav .nav-link::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: currentColor; transform: translateX(-50%); border-radius: 3px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; } .question-nav .nav-link:hover::after { width: 50%; opacity: 0.7; } .question-nav .nav-link.active::after { width: 55%; opacity: 1; } .question-nav .nav-link.active:hover::after { width: 55%; opacity: 0.9; } .question-area { background: #fff; padding: 15px; border-radius: 0 .5rem .5rem .5rem; padding-bottom: 40px; } [data-bs-theme='dark'] .question-area,[data-bs-theme='dark'] .question-nav  { background-color: #191b1d; } .item-list.question { position: relative; border-radius: 0; margin: 0; border-bottom: 1px solid #eee; padding: 15px 0; } .item-list.question .answers { display: inline-block; padding-top: 3px; width: 40px; height: 40px; -moz-border-radius: 1px; -webkit-border-radius: 1px; border-radius: 3px; color: #555; background: rgb(240 244 245); border: none; font-size: 16px; text-align: center; line-height: 1.2; margin-right: 10px; } .item-list.question .answers.is { color: #0084ff; background: rgba(0, 132, 255, 0.1); } .item-list.question .answers small { display: block; font-size: 12px; } .item-list.question:hover { transform: none; box-shadow: none; } .item-list.question .entry-header .entry-title { height: auto; } .item-list.question .entry-footer { position: relative; margin-top: 5px; } .canvas-back { margin-top: -30px; margin-bottom: 80px; position: relative; } .question-banner .container { position: relative; top: 30px; z-index: 9; } .question-banner h1 { color: #fff; font-weight: 700; font-size: 2em; line-height: 1.11818182em; } .question-banner p { color: #fff; } .banner-search .form-control { padding: 0.5rem 0.75rem; height: 56px; border: 1px solid #fff; border-radius: 0; border-radius: 4px 0 0 4px; background-clip: initial; box-shadow: none; font-size: 15px; } .banner-search .form-group { margin: 0; } .banner-search .btn.bt-round { border: 1px solid #fff; border-radius: 0; background: #1170ff; color: #fff; } .banner-search .btn.bt-round, .banner-search .btn.bt-roundy { display: flex; padding: 0 1rem; max-width: 100px; align-items: center; justify-content: center; } .banner-search .btn.bt-roundy { border-radius: 4px; background: #fff; color: #1170ff; } .flex1 i { font-size: 24px; } .question-box { position: relative; z-index: 8; bottom: -80px; } .question-title { font-size: 1.2rem; } .question-cat .current, .question-cat>a:hover { background: none; } .question-users .avatar { width: 32px; height: 32px }.ri-popup-open .ri-popup {background-color: rgb(0 0 0 / 0%);transform: perspective(1px) scale(1.0);transition: visibility 0s linear 0s, opacity 0.15s 0s, transform 0.15s;backdrop-filter: saturate(97%) blur(5px);background-repeat: no-repeat;background-size: cover;}