every_holiday/VRCT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Update] Config Page: Supporters. Adjust period box designs.(Add second line.)

Browse Source
This commit is contained in:
Sakamoto Shiina
2025-05-30 17:04:42 +09:00
parent b1c68679cd
commit 51c90b3b74
2 changed files with 41 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/SupportersWrapper.jsx
View File

@@ -272,6 +272,7 @@ const SupporterPeriodContainer = ({ settings, calc_support_period }) => {
return (
<div className={styles.supporter_period_container}>
<div className={styles.supporter_period_wrapper}>
{Object.entries(period_data).map(([key, item], index) => {
if (item === "") return null;
const period_box_class_name = clsx(styles.period_box, {
@@ -297,6 +298,7 @@ const SupporterPeriodContainer = ({ settings, calc_support_period }) => {
);
})}
</div>
</div>
);
};

23
src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/SupportersWrapper.module.scss
View File

@@ -13,7 +13,7 @@
align-content: start;
flex-wrap: wrap;
column-gap: 1.8rem;
row-gap: 0.4rem;
row-gap: 2rem;
}
.supporter_image_container {
@@ -209,13 +209,24 @@ $progress_ease: cubic-bezier(0, 1, 0.75, 1);
.supporter_period_container {
position: absolute;
top: 100%;
left: 0;
}
.supporter_period_wrapper {
display: flex;
gap: 0.2rem;
padding-left: 0.4rem;
gap: 0.4rem 0.2rem;
flex-shrink: 0;
flex-wrap: wrap;
padding: 0.3rem 0.4rem 0.4rem 0.4rem;
}
.period_box_wrapper {
flex-shrink: 0;
}
.period_box {
width: 1.8rem;
width: 1.7rem;
height: 0.3rem;
border-radius: 0.3rem;
&.mogu_bar {
@@ -231,9 +242,7 @@ $progress_ease: cubic-bezier(0, 1, 0.75, 1);
background-color: var(--dark_800_color);
}
}
.period_box_wrapper {
padding: 0.3rem 0 0.4rem 0;
}
.tooltip_period_label {
font-size: 1.4rem;
}