diff --git a/src-ui/app/config_page/setting_section/setting_box/about_vrct/AboutVrct.jsx b/src-ui/app/config_page/setting_section/setting_box/about_vrct/AboutVrct.jsx index 5a8d49b3..e36a39f5 100644 --- a/src-ui/app/config_page/setting_section/setting_box/about_vrct/AboutVrct.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/about_vrct/AboutVrct.jsx @@ -3,10 +3,20 @@ import dev_section_title from "@images/about_vrct/dev_section_title.png"; import dev_misya from "@images/about_vrct/dev_misya.png"; import dev_shiina from "@images/about_vrct/dev_shiina.png"; import vrct_logo_for_about_vrct from "@images/about_vrct/vrct_logo_for_about_vrct.png"; + import contributors_section_title from "@images/about_vrct/contributors_section_title.png"; -import contributors_members from "@images/about_vrct/contributors_members.png"; +import contributor_done from "@images/about_vrct/contributor_done.png"; +import contributor_iya from "@images/about_vrct/contributor_iya.png"; +import contributor_rera from "@images/about_vrct/contributor_rera.png"; +import contributor_poposuke from "@images/about_vrct/contributor_poposuke.png"; +import contributor_kumaguma from "@images/about_vrct/contributor_kumaguma.png"; + import localization_section_title from "@images/about_vrct/localization_section_title.png"; -import localization_members from "@images/about_vrct/localization_members.png"; +import localization_1 from "@images/about_vrct/localization_1.png"; +import localization_2 from "@images/about_vrct/localization_2.png"; +import localization_3 from "@images/about_vrct/localization_3.png"; +import localization_4 from "@images/about_vrct/localization_4.png"; +import localization_5 from "@images/about_vrct/localization_5.png"; import special_thanks_section_title from "@images/about_vrct/special_thanks_section_title.png"; import special_thanks_members from "@images/about_vrct/special_thanks_members.png"; @@ -15,8 +25,6 @@ import special_thanks_message_ja from "@images/about_vrct/special_thanks_message import poster_showcase_section_title from "@images/about_vrct/poster_showcase_section_title.png"; -import vrchat_disclaimer from "@images/about_vrct/vrchat_disclaimer.png"; - import clsx from "clsx"; import { useTranslation } from "react-i18next"; import { useStore_UiLanguage } from "@store"; @@ -43,7 +51,9 @@ export const AboutVrct = () => {
- +
+ +
@@ -55,19 +65,46 @@ export const AboutVrct = () => {
- - - - - - - +
+ + +
+
+ + +
+
+ + + +
+
+ + +
+
+ + +
- +
+
+ + +
+
+ + +
+
+ + {/* */} +
+
@@ -87,7 +124,7 @@ export const AboutVrct = () => {
- +

VRCT is not endorsed by VRChat and does not reflect the views or opinions of VRChat or anyone officially involved in producing or managing VRChat properties. VRChat and all associated properties are trademarks or registered trademarks of VRChat Inc. VRChat © VRChat Inc.

diff --git a/src-ui/app/config_page/setting_section/setting_box/about_vrct/AboutVrct.module.scss b/src-ui/app/config_page/setting_section/setting_box/about_vrct/AboutVrct.module.scss index 9c8dced1..a4d06e2e 100644 --- a/src-ui/app/config_page/setting_section/setting_box/about_vrct/AboutVrct.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/about_vrct/AboutVrct.module.scss @@ -1,10 +1,11 @@ .container { display: flex; gap: 2.2rem; + justify-content: center; + align-items: center; flex-direction: column; - width: 72rem; + max-width: 72rem; margin: auto; - // background-color: gray; } .section_title { @@ -31,20 +32,23 @@ } .dev_section_wrapper { display: flex; - justify-content: space-between; + gap: 2rem; + flex-wrap: wrap; + width: 100%; + justify-content: center; } .dev_card_wrapper { - width: 34.6rem; position: relative; + // width: 100%; } .dev_card_img { - width: 100%; + width: 34.6rem; } @mixin dev_sns_styles($right) { position: absolute; right: $right; - bottom: 1.2rem; + bottom: 0.6rem; width: 2.8rem; padding: 0.4rem; border-radius: 0.4rem; @@ -70,8 +74,16 @@ display: flex; flex-direction: row; justify-content: space-between; - text-align: center; padding: 0 5.5rem; + flex-wrap: wrap; + gap: 1rem; +} +.about_vrct_logo_wrapper { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + padding: 2rem 0; } .about_vrct_logo { width: 20rem; @@ -79,7 +91,7 @@ } .project_links_wrapper { display: flex; - flex-direction: column; + flex-wrap: wrap; gap: 0.2rem; align-items: start; } @@ -88,6 +100,7 @@ height: 2.6rem; padding: 0.4rem 1rem; border-radius: 0.4rem; + flex-shrink: 0; &:hover { background-color: var(--dark_850_color); } @@ -97,19 +110,27 @@ } .contributors_img_wrapper { + display: flex; + flex-wrap: wrap; + gap: 1rem; + justify-content: center; + align-items: center; +} +.contributor_card_wrapper { position: relative; } .contributors_img { - width: 100%; + width: 22rem; } -@mixin contributors_sns_styles($top, $left) { +@mixin contributors_sns_styles($bottom, $left) { position: absolute; left: $left; - top: $top; + bottom: $bottom; width: 2.4rem; padding: 0.4rem; border-radius: 0.4rem; + transform: translate(50%, 50%); &:hover { background-color: var(--dark_825_color); } @@ -118,34 +139,51 @@ } } -$first_line_top: 6.2rem; +$bottom_pos: 16%; +$sns_left_pos: 0.8rem; .contributors_done_san_x { - @include contributors_sns_styles($first_line_top, 2rem); + @include contributors_sns_styles($bottom_pos, $sns_left_pos); } .contributors_iya_x { - @include contributors_sns_styles($first_line_top, 27.6rem); + @include contributors_sns_styles($bottom_pos, $sns_left_pos); } .contributors_rera_x { - @include contributors_sns_styles($first_line_top, 52.2rem); + @include contributors_sns_styles($bottom_pos, calc($sns_left_pos - 1.4rem)); } .contributors_rera_github { - @include contributors_sns_styles($first_line_top, 55rem); + @include contributors_sns_styles($bottom_pos, calc($sns_left_pos + 1.4rem)); } -$second_line_top: 16.6rem; .contributors_poposuke_x { - @include contributors_sns_styles($second_line_top, 14.8rem); + @include contributors_sns_styles($bottom_pos, $sns_left_pos); } .contributors_kumaguma_x { - @include contributors_sns_styles($second_line_top, 40.8rem); + @include contributors_sns_styles($bottom_pos, $sns_left_pos); } .localization_section { display: flex; flex-direction: column; + width: 100%; + gap: 0.6rem; +} +.localization_members_wrapper { + display: flex; + justify-content: center; + align-items: start; + column-gap: 6rem; + row-gap: 1rem; + flex-wrap: wrap; +} +.localization_members_row_wrapper { + display: flex; + flex-direction: column; + justify-content: center; + align-items: start; + gap: 0.2rem; } .localization_members_img { - width: 100%; + height: 2.2rem; } .special_thanks_section { @@ -164,9 +202,11 @@ $second_line_top: 16.6rem; .poster_showcase_section { display: flex; flex-direction: column; + width: 100%; } .vrchat_disclaimer { - width: 100%; + font-size: 1.2rem; margin-top: 8rem; + color: var(--dark_600_color); } \ No newline at end of file diff --git a/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/PosterShowcaseContents.module.scss b/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/PosterShowcaseContents.module.scss index c7b760b7..6d94b14a 100644 --- a/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/PosterShowcaseContents.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/PosterShowcaseContents.module.scss @@ -1,6 +1,7 @@ .container { display: flex; - justify-content: space-between; + justify-content: center; align-items: start; gap: 2rem; + flex-wrap: wrap; } \ No newline at end of file diff --git a/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/poster_showcase_worlds_contents/PosterShowcaseWorldsContents.module.scss b/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/poster_showcase_worlds_contents/PosterShowcaseWorldsContents.module.scss index fa819d64..28d4dcf5 100644 --- a/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/poster_showcase_worlds_contents/PosterShowcaseWorldsContents.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/poster_showcase_worlds_contents/PosterShowcaseWorldsContents.module.scss @@ -1,9 +1,10 @@ .container { display: flex; flex-direction: column; - flex: 1; + // flex: 1; gap: 1rem; justify-content: space-between; + width: 42rem; } $image_height: 2.8rem; $y_padding: 0.4rem; @@ -32,6 +33,7 @@ $image_height_gap: 0.4rem; } .poster_showcase_world_img { height: $image_height; + flex-shrink: 0; } .pagination_container { diff --git a/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/posters_contents/PostersContents.module.scss b/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/posters_contents/PostersContents.module.scss index 739fe78d..e7c453a5 100644 --- a/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/posters_contents/PostersContents.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/posters_contents/PostersContents.module.scss @@ -3,6 +3,7 @@ flex-direction: column; justify-content: center; align-items: center; + flex-shrink: 0; } .poster_pagination_wrapper { display: flex; diff --git a/src-ui/assets/about_vrct/contributor_done.png b/src-ui/assets/about_vrct/contributor_done.png new file mode 100644 index 00000000..1eb2f28c Binary files /dev/null and b/src-ui/assets/about_vrct/contributor_done.png differ diff --git a/src-ui/assets/about_vrct/contributor_iya.png b/src-ui/assets/about_vrct/contributor_iya.png new file mode 100644 index 00000000..adfde8c2 Binary files /dev/null and b/src-ui/assets/about_vrct/contributor_iya.png differ diff --git a/src-ui/assets/about_vrct/contributor_kumaguma.png b/src-ui/assets/about_vrct/contributor_kumaguma.png new file mode 100644 index 00000000..e030a04f Binary files /dev/null and b/src-ui/assets/about_vrct/contributor_kumaguma.png differ diff --git a/src-ui/assets/about_vrct/contributor_poposuke.png b/src-ui/assets/about_vrct/contributor_poposuke.png new file mode 100644 index 00000000..3766f431 Binary files /dev/null and b/src-ui/assets/about_vrct/contributor_poposuke.png differ diff --git a/src-ui/assets/about_vrct/contributor_rera.png b/src-ui/assets/about_vrct/contributor_rera.png new file mode 100644 index 00000000..32b6792e Binary files /dev/null and b/src-ui/assets/about_vrct/contributor_rera.png differ diff --git a/src-ui/assets/about_vrct/contributors_members.png b/src-ui/assets/about_vrct/contributors_members.png deleted file mode 100644 index 4b0cf192..00000000 Binary files a/src-ui/assets/about_vrct/contributors_members.png and /dev/null differ diff --git a/src-ui/assets/about_vrct/localization_1.png b/src-ui/assets/about_vrct/localization_1.png new file mode 100644 index 00000000..4d7a4633 Binary files /dev/null and b/src-ui/assets/about_vrct/localization_1.png differ diff --git a/src-ui/assets/about_vrct/localization_2.png b/src-ui/assets/about_vrct/localization_2.png new file mode 100644 index 00000000..d9635401 Binary files /dev/null and b/src-ui/assets/about_vrct/localization_2.png differ diff --git a/src-ui/assets/about_vrct/localization_3.png b/src-ui/assets/about_vrct/localization_3.png new file mode 100644 index 00000000..4935db47 Binary files /dev/null and b/src-ui/assets/about_vrct/localization_3.png differ diff --git a/src-ui/assets/about_vrct/localization_4.png b/src-ui/assets/about_vrct/localization_4.png new file mode 100644 index 00000000..5410303d Binary files /dev/null and b/src-ui/assets/about_vrct/localization_4.png differ diff --git a/src-ui/assets/about_vrct/localization_5.png b/src-ui/assets/about_vrct/localization_5.png new file mode 100644 index 00000000..56e5ac27 Binary files /dev/null and b/src-ui/assets/about_vrct/localization_5.png differ diff --git a/src-ui/assets/about_vrct/localization_members.png b/src-ui/assets/about_vrct/localization_members.png deleted file mode 100644 index b12cd838..00000000 Binary files a/src-ui/assets/about_vrct/localization_members.png and /dev/null differ diff --git a/src-ui/assets/about_vrct/vrchat_disclaimer.png b/src-ui/assets/about_vrct/vrchat_disclaimer.png deleted file mode 100644 index c6e3dbb0..00000000 Binary files a/src-ui/assets/about_vrct/vrchat_disclaimer.png and /dev/null differ