469 lines
8.1 KiB
CSS
469 lines
8.1 KiB
CSS
@font-face {
|
|
font-family: 'RR Source Han Sans';
|
|
src: url('../../cp-space/fami/assets/fonts/source-han-sans-sc-medium-latin.woff2')
|
|
format('woff2');
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-display: swap;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
:root {
|
|
--rr-scale: 0.3472222222;
|
|
--rr-page-width: 375px;
|
|
--rr-stage-height: 1985px;
|
|
--rr-purple-bg: #160029;
|
|
--rr-row-dark: #0e0119;
|
|
--rr-footer-bg: #320b55;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
width: 100%;
|
|
min-height: 100%;
|
|
overflow-x: hidden;
|
|
background: var(--rr-purple-bg, var(--hy-theme-bg));
|
|
color: #fff;
|
|
font-family: 'RR Source Han Sans', Arial, 'Helvetica Neue', sans-serif;
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
user-select: none;
|
|
-webkit-user-drag: none;
|
|
}
|
|
|
|
[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
.rr-app {
|
|
position: relative;
|
|
width: var(--rr-page-width);
|
|
min-height: 100vh;
|
|
margin: 0 auto;
|
|
overflow: visible;
|
|
background: var(--rr-purple-bg);
|
|
}
|
|
|
|
.rr-stage-shell {
|
|
position: relative;
|
|
width: var(--rr-page-width);
|
|
height: 689.236px;
|
|
overflow: hidden;
|
|
background: var(--rr-purple-bg);
|
|
}
|
|
|
|
.rr-stage {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 1080px;
|
|
height: var(--rr-stage-height);
|
|
overflow: hidden;
|
|
transform: scale(var(--rr-scale));
|
|
transform-origin: top left;
|
|
background: var(--rr-purple-bg);
|
|
}
|
|
|
|
.rr-hero {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 0;
|
|
left: 0;
|
|
width: 1080px;
|
|
height: 810px;
|
|
pointer-events: none;
|
|
-webkit-mask-image: url('./assets/layers/hero-fade-mask.svg');
|
|
-webkit-mask-position: 0 0;
|
|
-webkit-mask-repeat: no-repeat;
|
|
-webkit-mask-size: 1080px 810px;
|
|
mask-image: url('./assets/layers/hero-fade-mask.svg');
|
|
mask-position: 0 0;
|
|
mask-repeat: no-repeat;
|
|
mask-size: 1080px 810px;
|
|
}
|
|
|
|
.rr-hero img {
|
|
width: 1080px;
|
|
height: 810px;
|
|
object-fit: fill;
|
|
}
|
|
|
|
.rr-target {
|
|
position: absolute;
|
|
z-index: 3;
|
|
top: 665px;
|
|
left: 90px;
|
|
width: 900px;
|
|
height: 289px;
|
|
}
|
|
|
|
.rr-target-skin {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 900px;
|
|
height: 289px;
|
|
object-fit: fill;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.rr-target-value {
|
|
position: absolute;
|
|
top: 105px;
|
|
left: 330px;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 241px;
|
|
height: 80px;
|
|
gap: 14px;
|
|
color: #ffe6b9;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.rr-target-value img {
|
|
flex: 0 0 auto;
|
|
width: 44px;
|
|
height: 44px;
|
|
object-fit: contain;
|
|
position: relative;
|
|
top: 8px;
|
|
}
|
|
|
|
.rr-target-value strong {
|
|
display: block;
|
|
width: 183px;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
color: #ffe6b9;
|
|
font-size: 80px;
|
|
font-weight: 500;
|
|
line-height: 80px;
|
|
letter-spacing: 0;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.rr-table {
|
|
position: absolute;
|
|
z-index: 2;
|
|
top: 1005px;
|
|
left: 36px;
|
|
width: 1008px;
|
|
height: 980px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.rr-table-top-ornament {
|
|
position: absolute;
|
|
z-index: 4;
|
|
top: 0;
|
|
left: 0;
|
|
width: 1008px;
|
|
height: 15px;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.rr-table-top-ornament img {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 1008px;
|
|
height: 1003px;
|
|
max-width: none;
|
|
}
|
|
|
|
.rr-table-side-ornament {
|
|
position: absolute;
|
|
z-index: 4;
|
|
top: 15px;
|
|
width: 20px;
|
|
height: 965px;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.rr-table-side-ornament img {
|
|
position: absolute;
|
|
top: -15px;
|
|
width: 1008px;
|
|
height: 1003px;
|
|
max-width: none;
|
|
}
|
|
|
|
.rr-table-side-left {
|
|
left: 0;
|
|
}
|
|
|
|
.rr-table-side-left img {
|
|
left: 0;
|
|
}
|
|
|
|
.rr-table-side-right {
|
|
right: 0;
|
|
}
|
|
|
|
.rr-table-side-right img {
|
|
right: 0;
|
|
}
|
|
|
|
.rr-table-divider {
|
|
position: absolute;
|
|
z-index: 3;
|
|
top: 15px;
|
|
left: 503px;
|
|
width: 2px;
|
|
height: 824px;
|
|
background: rgba(255, 255, 255, 0.92);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.rr-table-content {
|
|
position: absolute;
|
|
z-index: 2;
|
|
top: 15px;
|
|
left: 20px;
|
|
width: 968px;
|
|
min-height: 824px;
|
|
}
|
|
|
|
.rr-tier-row {
|
|
display: grid;
|
|
grid-template-columns: 484px 484px;
|
|
width: 968px;
|
|
height: 103px;
|
|
color: #fff;
|
|
font-size: 30px;
|
|
font-weight: 500;
|
|
line-height: 32px;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.rr-tier-row:nth-child(odd) {
|
|
background: var(--rr-row-dark);
|
|
}
|
|
|
|
.rr-tier-row:nth-child(even) {
|
|
background: var(--rr-purple-bg);
|
|
}
|
|
|
|
.rr-tier-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 0;
|
|
height: 103px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.rr-tier-row-head .rr-tier-cell {
|
|
padding-top: 2px;
|
|
}
|
|
|
|
.rr-tier-reward {
|
|
gap: 8px;
|
|
color: #d7a8ff;
|
|
}
|
|
|
|
.rr-tier-reward img {
|
|
flex: 0 0 auto;
|
|
width: 38px;
|
|
height: 38px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.rr-tier-placeholder {
|
|
color: rgba(255, 255, 255, 0.42);
|
|
}
|
|
|
|
.rr-footer-shell {
|
|
position: fixed;
|
|
z-index: 80;
|
|
bottom: 0;
|
|
left: 50%;
|
|
width: var(--rr-page-width);
|
|
height: 58.681px;
|
|
overflow: visible;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.rr-user-panel {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 1080px;
|
|
height: 169px;
|
|
overflow: hidden;
|
|
transform: scale(var(--rr-scale));
|
|
transform-origin: top left;
|
|
border-radius: 24px 24px 0 0;
|
|
background: var(--rr-footer-bg);
|
|
}
|
|
|
|
.rr-avatar-shell {
|
|
position: absolute;
|
|
top: 25px;
|
|
left: 46px;
|
|
display: block;
|
|
width: 119px;
|
|
height: 119px;
|
|
overflow: hidden;
|
|
border: 3px solid #e3bbff;
|
|
border-radius: 50%;
|
|
background: #21053b;
|
|
}
|
|
|
|
.rr-avatar-shell img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: 50% 32%;
|
|
}
|
|
|
|
html.rr-mock .rr-avatar-shell img {
|
|
position: absolute;
|
|
top: -17px;
|
|
left: -41px;
|
|
width: 185px;
|
|
height: 246px;
|
|
max-width: none;
|
|
object-fit: fill;
|
|
}
|
|
|
|
.rr-user-name {
|
|
position: absolute;
|
|
top: 36px;
|
|
left: 189px;
|
|
width: 288px;
|
|
overflow: hidden;
|
|
color: #fff;
|
|
font-size: 40px;
|
|
font-weight: 500;
|
|
line-height: 44px;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.rr-user-id {
|
|
position: absolute;
|
|
top: 102px;
|
|
left: 189px;
|
|
width: 292px;
|
|
overflow: hidden;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
font-size: 30px;
|
|
font-weight: 500;
|
|
line-height: 36px;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.rr-metric-label {
|
|
position: absolute;
|
|
overflow: hidden;
|
|
color: #fff;
|
|
font-size: 28px;
|
|
font-weight: 500;
|
|
line-height: 34px;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.rr-contribution-label {
|
|
top: 42px;
|
|
left: 494px;
|
|
width: 340px;
|
|
}
|
|
|
|
.rr-rewards-label {
|
|
top: 110px;
|
|
left: 552px;
|
|
width: 280px;
|
|
}
|
|
|
|
.rr-value-pill {
|
|
position: absolute;
|
|
display: block;
|
|
width: 215px;
|
|
height: 69px;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: visible;
|
|
border: 0;
|
|
color: #fff;
|
|
font: inherit;
|
|
}
|
|
|
|
.rr-value-pill > img {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 215px;
|
|
height: 69px;
|
|
object-fit: fill;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.rr-value-pill > span {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
padding: 0 28px;
|
|
color: #fff;
|
|
font-size: 24px;
|
|
font-weight: 500;
|
|
line-height: 28px;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.rr-value-pill-active {
|
|
top: 19px;
|
|
left: 838px;
|
|
}
|
|
|
|
.rr-value-pill-disabled {
|
|
top: 87px;
|
|
left: 837px;
|
|
}
|
|
|
|
.rr-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;
|
|
}
|
|
|
|
html[dir='rtl'] .rr-user-name,
|
|
html[dir='rtl'] .rr-user-id,
|
|
html[dir='rtl'] .rr-metric-label {
|
|
direction: rtl;
|
|
text-align: right;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|