833 lines
15 KiB
CSS
833 lines
15 KiB
CSS
* {
|
|
box-sizing: border-box;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
:root {
|
|
--huwaa-cp-page-width: 375px;
|
|
--huwaa-cp-design-scale: 0.3472222222;
|
|
--huwaa-cp-brand: var(--hy-theme-primary-strong, #c52d45);
|
|
--huwaa-cp-brand-deep: #a1152f;
|
|
--huwaa-cp-text: #a11626;
|
|
--huwaa-cp-muted: #dd708d;
|
|
--huwaa-cp-row: rgba(197, 45, 69, 0.13);
|
|
--huwaa-cp-page-bg: var(--hy-theme-bg, #f8c7d5);
|
|
}
|
|
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
min-height: 100%;
|
|
margin: 0;
|
|
overflow-x: hidden;
|
|
scrollbar-width: none;
|
|
background: var(--huwaa-cp-page-bg);
|
|
color: var(--hy-theme-text, #21182b);
|
|
font-family:
|
|
Inter, Arial, 'Helvetica Neue', Helvetica, 'Noto Sans', sans-serif;
|
|
}
|
|
|
|
html::-webkit-scrollbar,
|
|
body::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
button {
|
|
padding: 0;
|
|
border: 0;
|
|
outline: none;
|
|
background: transparent;
|
|
color: inherit;
|
|
font: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
}
|
|
|
|
.huwaa-cp-sr-only {
|
|
position: absolute !important;
|
|
width: 1px !important;
|
|
height: 1px !important;
|
|
padding: 0 !important;
|
|
margin: -1px !important;
|
|
overflow: hidden !important;
|
|
clip: rect(0, 0, 0, 0) !important;
|
|
white-space: nowrap !important;
|
|
border: 0 !important;
|
|
}
|
|
|
|
.huwaa-cp-viewport,
|
|
.huwaa-cp-page,
|
|
.huwaa-cp-stage-wrap {
|
|
position: relative;
|
|
width: var(--huwaa-cp-page-width);
|
|
max-width: 768px;
|
|
min-height: 1297px;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
background: var(--huwaa-cp-page-bg);
|
|
}
|
|
|
|
.huwaa-cp-stage-wrap {
|
|
min-height: 0;
|
|
}
|
|
|
|
.huwaa-cp-stage {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 1080px;
|
|
min-height: 3733px;
|
|
overflow: hidden;
|
|
direction: ltr;
|
|
transform: scale(var(--huwaa-cp-design-scale));
|
|
transform-origin: top left;
|
|
background: #e98c9b;
|
|
}
|
|
|
|
.huwaa-cp-stage > * {
|
|
position: absolute;
|
|
}
|
|
|
|
.huwaa-cp-background {
|
|
top: 489px;
|
|
left: -487px;
|
|
z-index: 0;
|
|
width: 2415px;
|
|
height: 4293px;
|
|
opacity: 0.5;
|
|
mix-blend-mode: screen;
|
|
object-fit: cover;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.huwaa-cp-hero {
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
width: 1080px;
|
|
height: 1333px;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.huwaa-cp-hero > img {
|
|
width: 1080px;
|
|
height: 1333px;
|
|
object-fit: cover;
|
|
-webkit-mask-image: linear-gradient(
|
|
to bottom,
|
|
#000 0,
|
|
#000 88.93%,
|
|
transparent 100%
|
|
);
|
|
mask-image: linear-gradient(
|
|
to bottom,
|
|
#000 0,
|
|
#000 88.93%,
|
|
transparent 100%
|
|
);
|
|
}
|
|
|
|
.huwaa-cp-wordmark {
|
|
position: absolute;
|
|
top: 856px;
|
|
left: 20px;
|
|
z-index: 2;
|
|
display: grid;
|
|
width: 1040px;
|
|
min-height: 370px;
|
|
margin: 0;
|
|
place-items: center;
|
|
color: #ffe0b2;
|
|
font-family: Georgia, 'Times New Roman', serif;
|
|
font-size: 181px;
|
|
font-style: italic;
|
|
font-weight: 800;
|
|
letter-spacing: -8px;
|
|
line-height: 0.82;
|
|
overflow-wrap: normal;
|
|
paint-order: stroke fill;
|
|
text-align: center;
|
|
text-shadow:
|
|
0 8px 0 #7f1d17,
|
|
0 13px 22px rgba(91, 10, 25, 0.66),
|
|
0 0 12px rgba(255, 248, 212, 0.78);
|
|
text-wrap: balance;
|
|
-webkit-text-stroke: 7px #b75f31;
|
|
unicode-bidi: plaintext;
|
|
}
|
|
|
|
.huwaa-cp-countdown {
|
|
top: 1333px;
|
|
left: 52px;
|
|
z-index: 3;
|
|
width: 974px;
|
|
height: 106px;
|
|
}
|
|
|
|
.huwaa-cp-time-unit {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 223px;
|
|
height: 106px;
|
|
}
|
|
|
|
.huwaa-cp-time-unit:nth-child(1) {
|
|
left: 0;
|
|
}
|
|
|
|
.huwaa-cp-time-unit:nth-child(2) {
|
|
left: 250px;
|
|
}
|
|
|
|
.huwaa-cp-time-unit:nth-child(3) {
|
|
left: 501px;
|
|
}
|
|
|
|
.huwaa-cp-time-unit:nth-child(4) {
|
|
left: 756px;
|
|
}
|
|
|
|
.huwaa-cp-time-unit img {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 163px;
|
|
height: 106px;
|
|
}
|
|
|
|
.huwaa-cp-time-unit strong {
|
|
position: absolute;
|
|
top: 25px;
|
|
left: 0;
|
|
z-index: 1;
|
|
width: 163px;
|
|
color: #fff;
|
|
font-size: 40px;
|
|
font-weight: 900;
|
|
line-height: 40px;
|
|
text-align: center;
|
|
text-shadow:
|
|
0 2px 0 rgba(176, 47, 78, 0.52),
|
|
0 0 12px rgba(255, 255, 255, 0.78);
|
|
}
|
|
|
|
.huwaa-cp-time-unit span {
|
|
position: absolute;
|
|
top: 25px;
|
|
left: 194px;
|
|
width: 31px;
|
|
color: #fff;
|
|
font-size: 40px;
|
|
font-weight: 900;
|
|
line-height: 40px;
|
|
text-align: center;
|
|
text-shadow: 0 2px 0 rgba(176, 47, 78, 0.52);
|
|
}
|
|
|
|
.huwaa-cp-tabs {
|
|
top: 1495px;
|
|
left: 39px;
|
|
z-index: 5;
|
|
display: grid;
|
|
width: 1000px;
|
|
height: 126px;
|
|
grid-template-columns: repeat(3, 303px);
|
|
column-gap: 46px;
|
|
}
|
|
|
|
.huwaa-cp-tab {
|
|
position: relative;
|
|
width: 303px;
|
|
height: 126px;
|
|
color: rgba(161, 22, 52, 0.34);
|
|
font-size: 40px;
|
|
font-weight: 800;
|
|
line-height: 40px;
|
|
text-align: center;
|
|
text-shadow: 0 2px 1px rgba(255, 255, 255, 0.78);
|
|
}
|
|
|
|
.huwaa-cp-tab img {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 303px;
|
|
height: 126px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.huwaa-cp-tab span {
|
|
position: absolute;
|
|
top: 34px;
|
|
left: 20px;
|
|
width: 263px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
unicode-bidi: plaintext;
|
|
}
|
|
|
|
html[lang='es'] .huwaa-cp-tab[data-tab='rewards'] {
|
|
font-size: 32px;
|
|
}
|
|
|
|
.huwaa-cp-tab::after {
|
|
position: absolute;
|
|
inset: -12px 0;
|
|
content: '';
|
|
}
|
|
|
|
.huwaa-cp-tab.is-active {
|
|
color: #ff4766;
|
|
text-shadow:
|
|
0 2px 0 rgba(255, 255, 255, 0.9),
|
|
0 0 10px rgba(255, 139, 166, 0.36);
|
|
}
|
|
|
|
.huwaa-cp-tab:focus-visible {
|
|
border-radius: 58px;
|
|
box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.78);
|
|
}
|
|
|
|
.huwaa-cp-tab-content {
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 4;
|
|
width: 1080px;
|
|
}
|
|
|
|
.huwaa-cp-copyright {
|
|
left: 114px;
|
|
z-index: 4;
|
|
width: 850px;
|
|
height: 30px;
|
|
color: #fff;
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
text-shadow: 0 2px 8px rgba(163, 48, 76, 0.3);
|
|
}
|
|
|
|
.huwaa-cp-panel {
|
|
position: absolute;
|
|
left: 60px;
|
|
width: 960px;
|
|
border: 84px solid transparent;
|
|
border-image-source: url('./assets/layers/panel-skin.webp');
|
|
border-image-slice: 110 fill;
|
|
border-image-width: 84px;
|
|
border-image-repeat: stretch;
|
|
color: var(--huwaa-cp-text);
|
|
}
|
|
|
|
.huwaa-cp-panel-body {
|
|
position: absolute;
|
|
inset: -84px;
|
|
}
|
|
|
|
.huwaa-cp-panel-title,
|
|
.huwaa-cp-panel-subtitle {
|
|
position: absolute;
|
|
left: 55px;
|
|
width: 850px;
|
|
margin: 0;
|
|
text-align: center;
|
|
unicode-bidi: plaintext;
|
|
}
|
|
|
|
.huwaa-cp-panel-title {
|
|
top: 75px;
|
|
min-height: 45px;
|
|
color: #b82e2d;
|
|
font-size: 32px;
|
|
font-weight: 800;
|
|
line-height: 36px;
|
|
}
|
|
|
|
.huwaa-cp-panel-subtitle {
|
|
top: 140px;
|
|
min-height: 27px;
|
|
color: var(--huwaa-cp-muted);
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
line-height: 30px;
|
|
}
|
|
|
|
.huwaa-cp-panel.is-gift-panel .huwaa-cp-panel-title {
|
|
top: 75px;
|
|
line-height: 36px;
|
|
}
|
|
|
|
.huwaa-cp-panel.is-gift-panel .huwaa-cp-panel-subtitle {
|
|
top: 166px;
|
|
}
|
|
|
|
.huwaa-cp-list {
|
|
position: absolute;
|
|
top: 203px;
|
|
left: 60px;
|
|
display: grid;
|
|
width: 840px;
|
|
gap: 24px;
|
|
}
|
|
|
|
.huwaa-cp-panel.is-gift-panel .huwaa-cp-list {
|
|
top: 229px;
|
|
}
|
|
|
|
.huwaa-cp-row {
|
|
position: relative;
|
|
width: 840px;
|
|
height: 199px;
|
|
overflow: hidden;
|
|
border-radius: 30px;
|
|
background: var(--huwaa-cp-row);
|
|
}
|
|
|
|
.huwaa-cp-avatar {
|
|
position: absolute;
|
|
z-index: 2;
|
|
display: grid;
|
|
width: 113px;
|
|
height: 113px;
|
|
place-items: center;
|
|
overflow: hidden;
|
|
border: 5px solid rgba(255, 235, 207, 0.96);
|
|
border-radius: 50%;
|
|
background: #f2b9c6;
|
|
box-shadow:
|
|
0 0 0 3px rgba(183, 81, 64, 0.48),
|
|
0 6px 14px rgba(143, 25, 52, 0.18);
|
|
color: #fff;
|
|
font-size: 34px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.huwaa-cp-avatar img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.huwaa-cp-row .huwaa-cp-avatar.is-left {
|
|
top: 26px;
|
|
left: 58px;
|
|
}
|
|
|
|
.huwaa-cp-row .huwaa-cp-avatar.is-right {
|
|
top: 26px;
|
|
left: 669px;
|
|
}
|
|
|
|
.huwaa-cp-name {
|
|
position: absolute;
|
|
top: 147px;
|
|
z-index: 3;
|
|
width: 144px;
|
|
overflow: hidden;
|
|
color: var(--huwaa-cp-text);
|
|
font-size: 26px;
|
|
font-weight: 700;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
unicode-bidi: plaintext;
|
|
}
|
|
|
|
.huwaa-cp-name.is-left {
|
|
left: 42px;
|
|
}
|
|
|
|
.huwaa-cp-name.is-right {
|
|
left: 653px;
|
|
}
|
|
|
|
.huwaa-cp-deco-line {
|
|
position: absolute;
|
|
top: 71px;
|
|
z-index: 1;
|
|
width: 159px;
|
|
height: 30px;
|
|
}
|
|
|
|
.huwaa-cp-deco-line.is-left {
|
|
left: 336px;
|
|
}
|
|
|
|
.huwaa-cp-deco-line.is-right {
|
|
left: 504px;
|
|
}
|
|
|
|
.huwaa-cp-gift {
|
|
position: absolute;
|
|
top: 15px;
|
|
left: 344px;
|
|
z-index: 2;
|
|
width: 152px;
|
|
height: 152px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.huwaa-cp-score-heart {
|
|
position: absolute;
|
|
top: 28px;
|
|
left: 308px;
|
|
z-index: 2;
|
|
width: 220px;
|
|
height: 143px;
|
|
}
|
|
|
|
.huwaa-cp-score {
|
|
position: absolute;
|
|
top: 71px;
|
|
left: 359px;
|
|
z-index: 3;
|
|
width: 120px;
|
|
overflow: hidden;
|
|
color: #ff4460;
|
|
font-size: 30px;
|
|
font-weight: 800;
|
|
line-height: 36px;
|
|
text-align: center;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.huwaa-cp-state {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 110px;
|
|
width: 740px;
|
|
transform: translateY(-50%);
|
|
color: var(--huwaa-cp-muted);
|
|
font-size: 30px;
|
|
font-weight: 700;
|
|
line-height: 42px;
|
|
text-align: center;
|
|
unicode-bidi: plaintext;
|
|
}
|
|
|
|
.huwaa-cp-state.is-loading::before {
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-right: 14px;
|
|
border: 4px solid rgba(197, 45, 69, 0.2);
|
|
border-top-color: var(--huwaa-cp-brand);
|
|
border-radius: 50%;
|
|
content: '';
|
|
animation: huwaa-cp-spin 0.8s linear infinite;
|
|
vertical-align: -2px;
|
|
}
|
|
|
|
.huwaa-cp-retry {
|
|
position: relative;
|
|
display: block;
|
|
min-width: 200px;
|
|
height: 64px;
|
|
margin: 22px auto 0;
|
|
padding: 0 28px;
|
|
border-radius: 32px;
|
|
background: var(--hy-theme-button, #a868dc);
|
|
color: #fff;
|
|
font-size: 26px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.huwaa-cp-retry::after {
|
|
position: absolute;
|
|
inset: -43px -20px;
|
|
content: '';
|
|
}
|
|
|
|
.huwaa-cp-retry:focus-visible {
|
|
box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.82);
|
|
}
|
|
|
|
.huwaa-cp-rank-podium {
|
|
position: absolute;
|
|
top: 1677px;
|
|
left: 25px;
|
|
width: 1030px;
|
|
height: 751px;
|
|
}
|
|
|
|
.huwaa-cp-podium-art,
|
|
.huwaa-cp-podium-avatar,
|
|
.huwaa-cp-podium-name {
|
|
position: absolute;
|
|
}
|
|
|
|
.huwaa-cp-podium-art {
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.huwaa-cp-podium-avatar {
|
|
z-index: 1;
|
|
display: grid;
|
|
place-items: center;
|
|
overflow: hidden;
|
|
border-radius: 50%;
|
|
background: #efb2c1;
|
|
color: #fff;
|
|
font-weight: 900;
|
|
text-align: center;
|
|
}
|
|
|
|
.huwaa-cp-podium-avatar img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.huwaa-cp-podium-name {
|
|
z-index: 3;
|
|
overflow: hidden;
|
|
color: #fff;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
text-overflow: ellipsis;
|
|
text-shadow: 0 2px 4px rgba(144, 33, 59, 0.36);
|
|
white-space: nowrap;
|
|
unicode-bidi: plaintext;
|
|
}
|
|
|
|
.huwaa-cp-podium.is-gold .huwaa-cp-podium-art {
|
|
top: 0;
|
|
left: 157px;
|
|
width: 716px;
|
|
height: 434px;
|
|
}
|
|
|
|
.huwaa-cp-podium.is-gold .huwaa-cp-podium-avatar {
|
|
top: 119px;
|
|
width: 223px;
|
|
height: 223px;
|
|
font-size: 54px;
|
|
}
|
|
|
|
.huwaa-cp-podium.is-gold .huwaa-cp-podium-avatar.is-left {
|
|
left: 236px;
|
|
}
|
|
|
|
.huwaa-cp-podium.is-gold .huwaa-cp-podium-avatar.is-right {
|
|
left: 557px;
|
|
}
|
|
|
|
.huwaa-cp-podium.is-gold .huwaa-cp-podium-name {
|
|
top: 386px;
|
|
width: 315px;
|
|
height: 50px;
|
|
background: rgba(188, 30, 65, 0.26);
|
|
font-size: 35px;
|
|
line-height: 49px;
|
|
}
|
|
|
|
.huwaa-cp-podium.is-gold .huwaa-cp-podium-name.is-left {
|
|
left: 219px;
|
|
}
|
|
|
|
.huwaa-cp-podium.is-gold .huwaa-cp-podium-name.is-right {
|
|
left: 497px;
|
|
}
|
|
|
|
.huwaa-cp-podium.is-silver .huwaa-cp-podium-art,
|
|
.huwaa-cp-podium.is-bronze .huwaa-cp-podium-art {
|
|
top: 467px;
|
|
width: 500px;
|
|
height: 284px;
|
|
}
|
|
|
|
.huwaa-cp-podium.is-silver .huwaa-cp-podium-art {
|
|
left: 0;
|
|
}
|
|
|
|
.huwaa-cp-podium.is-bronze .huwaa-cp-podium-art {
|
|
top: 465px;
|
|
left: 530px;
|
|
height: 286px;
|
|
}
|
|
|
|
.huwaa-cp-podium.is-silver .huwaa-cp-podium-avatar,
|
|
.huwaa-cp-podium.is-bronze .huwaa-cp-podium-avatar {
|
|
top: 550px;
|
|
width: 153px;
|
|
height: 153px;
|
|
font-size: 40px;
|
|
}
|
|
|
|
.huwaa-cp-podium.is-silver .huwaa-cp-podium-avatar.is-left {
|
|
left: 62px;
|
|
}
|
|
|
|
.huwaa-cp-podium.is-silver .huwaa-cp-podium-avatar.is-right {
|
|
left: 281px;
|
|
}
|
|
|
|
.huwaa-cp-podium.is-bronze .huwaa-cp-podium-avatar.is-left {
|
|
left: 598px;
|
|
}
|
|
|
|
.huwaa-cp-podium.is-bronze .huwaa-cp-podium-avatar.is-right {
|
|
left: 812px;
|
|
}
|
|
|
|
.huwaa-cp-podium.is-silver .huwaa-cp-podium-name,
|
|
.huwaa-cp-podium.is-bronze .huwaa-cp-podium-name {
|
|
top: 716px;
|
|
width: 172px;
|
|
height: 34px;
|
|
background: rgba(188, 30, 65, 0.22);
|
|
font-size: 24px;
|
|
line-height: 34px;
|
|
}
|
|
|
|
.huwaa-cp-podium.is-silver .huwaa-cp-podium-name.is-left {
|
|
left: 94px;
|
|
}
|
|
|
|
.huwaa-cp-podium.is-silver .huwaa-cp-podium-name.is-right {
|
|
left: 281px;
|
|
}
|
|
|
|
.huwaa-cp-podium.is-bronze .huwaa-cp-podium-name.is-left {
|
|
left: 624px;
|
|
}
|
|
|
|
.huwaa-cp-podium.is-bronze .huwaa-cp-podium-name.is-right {
|
|
left: 811px;
|
|
}
|
|
|
|
.huwaa-cp-rank-empty {
|
|
position: absolute;
|
|
top: 1990px;
|
|
left: 170px;
|
|
z-index: 4;
|
|
width: 740px;
|
|
color: #fff;
|
|
font-size: 30px;
|
|
font-weight: 800;
|
|
line-height: 42px;
|
|
text-align: center;
|
|
text-shadow: 0 2px 8px rgba(161, 21, 47, 0.42);
|
|
}
|
|
|
|
.huwaa-cp-reward-panel .huwaa-cp-panel-body {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.huwaa-cp-reward-crown {
|
|
position: absolute;
|
|
top: 75px;
|
|
left: 399px;
|
|
width: 162px;
|
|
height: 144px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.huwaa-cp-reward-grid {
|
|
position: absolute;
|
|
top: 260px;
|
|
left: 81px;
|
|
display: grid;
|
|
width: 800px;
|
|
height: 604px;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
grid-template-columns: repeat(3, 200px);
|
|
grid-auto-rows: 272px;
|
|
column-gap: 100px;
|
|
row-gap: 60px;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.huwaa-cp-reward-grid::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.huwaa-cp-reward-card {
|
|
position: relative;
|
|
width: 200px;
|
|
height: 272px;
|
|
color: var(--huwaa-cp-text);
|
|
text-align: center;
|
|
}
|
|
|
|
.huwaa-cp-reward-icon {
|
|
position: relative;
|
|
width: 200px;
|
|
height: 200px;
|
|
overflow: hidden;
|
|
border-radius: 26px;
|
|
background: rgba(197, 45, 69, 0.11);
|
|
}
|
|
|
|
.huwaa-cp-reward-frame,
|
|
.huwaa-cp-reward-cover {
|
|
position: absolute;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.huwaa-cp-reward-frame {
|
|
inset: 0;
|
|
z-index: 2;
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
|
|
.huwaa-cp-reward-cover {
|
|
top: 48px;
|
|
left: 48px;
|
|
z-index: 1;
|
|
width: 104px;
|
|
height: 104px;
|
|
border-radius: 18px;
|
|
}
|
|
|
|
.huwaa-cp-reward-name {
|
|
display: -webkit-box;
|
|
max-height: 60px;
|
|
min-height: 36px;
|
|
margin-top: 19px;
|
|
overflow-wrap: anywhere;
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
line-height: 30px;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
unicode-bidi: plaintext;
|
|
}
|
|
|
|
.huwaa-cp-reward-note {
|
|
display: -webkit-box;
|
|
max-height: 44px;
|
|
margin-top: -2px;
|
|
color: var(--huwaa-cp-muted);
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
line-height: 22px;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
unicode-bidi: plaintext;
|
|
}
|
|
|
|
@keyframes huwaa-cp-spin {
|
|
to {
|
|
transform: rotate(1turn);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.huwaa-cp-state.is-loading::before {
|
|
animation: none;
|
|
}
|
|
}
|