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

[Update] Config Page: Adjust Go back button to be a bit smaller and expand clickable range.

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-09-02 07:51:24 +09:00
parent 91c2a9cb5b
commit e9d4ce2012
4 changed files with 30 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src-ui/app/config_page/setting_section/SettingSection.module.scss
View File

@@ -5,5 +5,5 @@
} }
.container { .container {
margin: 6rem 4rem 16rem 3.2rem; margin: 0rem 4rem 16rem 3.2rem;
} }

3
src-ui/app/config_page/topbar/Topbar.jsx
View File

@@ -11,7 +11,6 @@ import { CompactSwitchBox } from "./compact_switch_box/CompactSwitchBox";
export const Topbar = () => { export const Topbar = () => {
const { currentIsOpenedConfigPage, updateIsOpenedConfigPage } = useIsOpenedConfigPage(); const { currentIsOpenedConfigPage, updateIsOpenedConfigPage } = useIsOpenedConfigPage();
const closeConfigPage = () => { const closeConfigPage = () => {
console.log("close");
updateIsOpenedConfigPage(false); updateIsOpenedConfigPage(false);
}; };
@@ -24,6 +23,8 @@ export const Topbar = () => {
<div className={styles.wrapper} onClick={() => closeConfigPage()}> <div className={styles.wrapper} onClick={() => closeConfigPage()}>
<div className={styles.go_back_button}> <div className={styles.go_back_button}>
<ArrowLeftSvg className={styles.arrow_left_svg} /> <ArrowLeftSvg className={styles.arrow_left_svg} />
</div>
<div className={styles.go_back_text_wrapper}>
<p className={styles.go_back_text}>Go Back</p> <p className={styles.go_back_text}>Go Back</p>
</div> </div>

44
src-ui/app/config_page/topbar/Topbar.module.scss
View File

@@ -23,18 +23,19 @@
&:hover { &:hover {
height: 2rem; height: 2rem;
} .go_back_button {
top: -12rem;
&:hover .go_back_button { transform: rotate(35deg);
top: -11rem; }
transform: rotate(35deg); .arrow_left_svg {
} color: var(--dark_400_color);
&:hover .arrow_left_svg { }
color: var(--dark_400_color); .go_back_text {
} color: var(--dark_400_color);
&:hover .go_back_text { }
color: var(--dark_400_color); .go_back_text_wrapper {
transform: rotate(-20deg); padding-top: 8.2rem;
}
} }
} }
@@ -45,14 +46,14 @@
border-radius: 1.2rem; border-radius: 1.2rem;
background-color: var(--dark_850_color); background-color: var(--dark_850_color);
position: absolute; position: absolute;
top: -12rem; top: -13.2rem;
right: 10rem; right: 10rem;
transform: rotate(30deg); transform: rotate(30deg);
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.arrow_left_svg { .arrow_left_svg {
height: 3.2rem; height: 2.8rem;
position: absolute; position: absolute;
right: 1rem; right: 1rem;
bottom: 0.4rem; bottom: 0.4rem;
@@ -60,12 +61,19 @@
transform: rotate(-100deg); transform: rotate(-100deg);
} }
.go_back_text_wrapper {
position: absolute;
top: -4.6rem;
right: 0rem;
padding-top: 7.2rem;
padding-bottom: 1rem;
width: 15.2rem;
transition: all 0.3s ease;
}
.go_back_text { .go_back_text {
color: var(--dark_650_color); color: var(--dark_650_color);
font-size: 1.6rem; font-size: 1.6rem;
position: absolute; padding-left: 4rem;
bottom: 4.6rem;
right: -7rem;
transform: rotate(-30deg);
transition: all 0.3s ease; transition: all 0.3s ease;
} }

2
src-ui/utils/variables.css
View File

@@ -47,5 +47,5 @@
--main_page_topbar_height: 4.8rem; --main_page_topbar_height: 4.8rem;
--config_page_sidebar_width: 22rem; --config_page_sidebar_width: 22rem;
--config_page_topbar_height: 5.2rem; --config_page_topbar_height: 8rem;
} }