From 88e10a9778fa78659ede15e383c21acd5d3d36ca Mon Sep 17 00:00:00 2001 From: Mahiru Date: Sun, 22 Mar 2026 23:27:43 +0800 Subject: [PATCH 01/11] webgal ui refresh 1 --- .../game/template/Stage/TextBox/textbox.scss | 62 ++++++++++------ .../src/Stage/TextBox/textbox.module.scss | 72 ++++++++++--------- 2 files changed, 79 insertions(+), 55 deletions(-) diff --git a/packages/webgal/public/game/template/Stage/TextBox/textbox.scss b/packages/webgal/public/game/template/Stage/TextBox/textbox.scss index 47d9b8050..b3ac5b7ed 100644 --- a/packages/webgal/public/game/template/Stage/TextBox/textbox.scss +++ b/packages/webgal/public/game/template/Stage/TextBox/textbox.scss @@ -1,16 +1,16 @@ .TextBox_main { z-index: 3; position: absolute; - right: 25px; - min-height: 330px; - max-height: 330px; + right: 0; + min-height: 430px; + max-height: 430px; background-blend-mode: darken; - border-radius: 165px 20px 20px 165px; - bottom: 20px; - left: 275px; + border-radius: 0; + bottom: 0; + left: 240px; font-weight: bold; color: white; - padding: 1em 50px 70px 200px; + padding: calc(1em + 100px) 50px 70px 250px; box-sizing: border-box; display: flex; flex-flow: column; @@ -20,12 +20,25 @@ } .TextBox_main_miniavatarOff { - left: 25px; + left: 240px; } .TextBox_Background { z-index: 2; - background: linear-gradient(rgba(245, 247, 250, 1) 0%, rgba(189, 198, 222, 1) 100%); + background-color: rgba(167, 186, 214, 0.28); + background-image: + linear-gradient(118deg, rgba(147, 165, 207, 0.9) 0%, rgba(182, 198, 222, 0.82) 48%, rgba(228, 239, 233, 0.82) 100%); + box-shadow: inset 0 0 48px rgba(255, 255, 255, 0.18); + -webkit-backdrop-filter: blur(16px) saturate(115%); + backdrop-filter: blur(16px) saturate(115%); + -webkit-mask-image: + linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.16) 5%, rgba(0, 0, 0, 0.6) 12%, #000 24%), + linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.08) 8%, rgba(0, 0, 0, 0.28) 18%, rgba(0, 0, 0, 0.66) 30%, #000 42%); + -webkit-mask-composite: source-in; + mask-image: + linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.16) 5%, rgba(0, 0, 0, 0.6) 12%, #000 24%), + linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.08) 8%, rgba(0, 0, 0, 0.28) 18%, rgba(0, 0, 0, 0.66) 30%, #000 42%); + mask-composite: intersect; } @keyframes showSoftly { @@ -79,22 +92,26 @@ .TextBox_showName { font-size: 85%; - padding: 0 2em 0 2em; + padding: 0 1em 0 0; position: absolute; - left: 150px; - top: -68px; + left: 250px; + top: 46px; height: 80px; line-height: 68px; - border-radius: 40px; + border-radius: 0; z-index: 3; border: 4px solid rgba(255, 255, 255, 0); } .TextBox_ShowName_Background { z-index: 2; - background: rgba(11, 52, 110, 1); - border: 4px solid rgba(255, 255, 255, 0.75); - box-shadow: 3px 3px 10px rgba(100, 100, 100, 0.5); + background: transparent; + border: 0; + box-shadow: none; + -webkit-backdrop-filter: none; + backdrop-filter: none; + -webkit-mask-image: none; + mask-image: none; } @keyframes TextDelayShow { @@ -112,9 +129,8 @@ height: 450px; width: 450px; bottom: 0; - left: -250px; - border-radius: 100% 0 0 100%; - overflow: hidden; + left: -205px; + overflow: visible; } .miniAvatarImg { @@ -135,18 +151,18 @@ position: absolute; left: 0; top: 0; - background: linear-gradient(150deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 35%, rgb(165, 212, 228) 100%); - background-clip: text; - -webkit-background-clip: text; - color: transparent; + color: #0b346e; z-index: 2; + text-shadow: 0 2px 8px rgba(255, 255, 255, 0.35), 0 2px 6px rgba(0, 0, 0, 0.18); } .innerName { position: absolute; left: 0; top: 0; + -webkit-text-stroke: 0.08em rgba(255, 255, 255, 0.98); z-index: 1; + text-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); } .text { diff --git a/packages/webgal/src/Stage/TextBox/textbox.module.scss b/packages/webgal/src/Stage/TextBox/textbox.module.scss index c50816bc8..4af8cfd86 100644 --- a/packages/webgal/src/Stage/TextBox/textbox.module.scss +++ b/packages/webgal/src/Stage/TextBox/textbox.module.scss @@ -10,7 +10,9 @@ //text-shadow: 0 0 3px rgba(81,168,221,1); } -$height: 330px; +$baseHeight: 330px; +$topReserve: 100px; +$height: $baseHeight + $topReserve; .TextBox_Container { position: absolute; @@ -23,16 +25,16 @@ $height: 330px; .TextBox_main { z-index: 3; position: absolute; - right: 25px; + right: 0; min-height: $height; max-height: $height; background-blend-mode: darken; - border-radius: calc($height / 2) 20px 20px calc($height / 2); - bottom: 20px; - left: 275px; + border-radius: 0; + bottom: 0; + left: 240px; font-weight: bold; color: white; - padding: 1em 50px 70px 200px; + padding: calc(1em + #{$topReserve}) 50px 70px 250px; box-sizing: border-box; display: flex; flex-flow: column; @@ -42,12 +44,25 @@ $height: 330px; } .TextBox_main_miniavatarOff { - left: 25px; + left: 240px; } .TextBox_Background { z-index: 2; - background: linear-gradient(rgba(245, 247, 250, 1) 0%, rgba(189, 198, 222, 1) 100%); + background-color: rgba(167, 186, 214, 0.28); + background-image: + linear-gradient(118deg, rgba(147, 165, 207, 0.9) 0%, rgba(182, 198, 222, 0.82) 48%, rgba(228, 239, 233, 0.82) 100%); + box-shadow: inset 0 0 48px rgba(255, 255, 255, 0.18); + -webkit-backdrop-filter: blur(16px) saturate(115%); + backdrop-filter: blur(16px) saturate(115%); + -webkit-mask-image: + linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.16) 5%, rgba(0, 0, 0, 0.6) 12%, #000 24%), + linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.08) 8%, rgba(0, 0, 0, 0.28) 18%, rgba(0, 0, 0, 0.66) 30%, #000 42%); + -webkit-mask-composite: source-in; + mask-image: + linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.16) 5%, rgba(0, 0, 0, 0.6) 12%, #000 24%), + linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.08) 8%, rgba(0, 0, 0, 0.28) 18%, rgba(0, 0, 0, 0.66) 30%, #000 42%); + mask-composite: intersect; } @keyframes showSoftly { @@ -144,17 +159,17 @@ $height: 330px; font-size: 85%; //border-bottom: 3px solid rgb(176, 176, 176); //min-width: 25%; - padding: 0 2em 0 2em; + padding: 0 1em 0 0; //margin: 0 0 0 0; position: absolute; - left: 150px; - top: -68px; + left: 250px; + top: 46px; height: 80px; line-height: 68px; //display: flex; //align-items: center; // background: rgba(11, 52, 110, 0.9); - border-radius: 40px; + border-radius: 0; // border: 4px solid rgba(255, 255, 255, 0.75); // box-shadow: 3px 3px 10px rgba(100, 100, 100, 0.5); z-index: 3; @@ -163,9 +178,13 @@ $height: 330px; .TextBox_ShowName_Background { z-index: 2; - background: rgba(11, 52, 110, 1); - border: 4px solid rgba(255, 255, 255, 0.75); - box-shadow: 3px 3px 10px rgba(100, 100, 100, 0.5); + background: transparent; + border: 0; + box-shadow: none; + -webkit-backdrop-filter: none; + backdrop-filter: none; + -webkit-mask-image: none; + mask-image: none; } @keyframes TextDelayShow { @@ -183,9 +202,8 @@ $height: 330px; height: 450px; width: 450px; bottom: 0; - left: -250px; - border-radius: 100% 0 0 100%; - overflow: hidden; + left: -205px; + overflow: visible; } .miniAvatarImg { @@ -206,28 +224,18 @@ $height: 330px; position: absolute; left: 0; top: 0; - //background-image: linear-gradient(rgba(255, 255, 255, 1) 0%, rgb(225, 237, 255) 100%); - //background-image: linear-gradient( - // #bfd8ff 0%, - // //#f5f7fa 45%, - // #bfbfc7 100% - //); - background: linear-gradient(150deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 35%, rgb(165, 212, 228) 100%); - //background: rgba(255, 255, 255, 1); - background-clip: text; - -webkit-background-clip: text; - color: transparent; + color: #0b346e; z-index: 2; + text-shadow: 0 2px 8px rgba(255, 255, 255, 0.35), 0 2px 6px rgba(0, 0, 0, 0.18); } .innerName { position: absolute; left: 0; top: 0; - //-webkit-text-stroke: 0.1em rgba(0, 0, 0, 0.25); - //-webkit-text-stroke: 0.1em rgba(255, 255, 255, 1); + -webkit-text-stroke: 0.08em rgba(255, 255, 255, 0.98); z-index: 1; - //text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.75); + text-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); } .text { From ece780e41dc35814724c7dadca465f45142e375c Mon Sep 17 00:00:00 2001 From: Mahiru Date: Mon, 23 Mar 2026 00:14:21 +0800 Subject: [PATCH 02/11] template file ok --- .../game/template/Stage/TextBox/textbox.scss | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/webgal/public/game/template/Stage/TextBox/textbox.scss b/packages/webgal/public/game/template/Stage/TextBox/textbox.scss index b3ac5b7ed..792a35a1b 100644 --- a/packages/webgal/public/game/template/Stage/TextBox/textbox.scss +++ b/packages/webgal/public/game/template/Stage/TextBox/textbox.scss @@ -7,10 +7,10 @@ background-blend-mode: darken; border-radius: 0; bottom: 0; - left: 240px; + left: 0; font-weight: bold; color: white; - padding: calc(1em + 100px) 50px 70px 250px; + padding: calc(1em + 100px) 50px 70px 490px; box-sizing: border-box; display: flex; flex-flow: column; @@ -20,7 +20,7 @@ } .TextBox_main_miniavatarOff { - left: 240px; + left: 0; } .TextBox_Background { @@ -28,16 +28,14 @@ background-color: rgba(167, 186, 214, 0.28); background-image: linear-gradient(118deg, rgba(147, 165, 207, 0.9) 0%, rgba(182, 198, 222, 0.82) 48%, rgba(228, 239, 233, 0.82) 100%); - box-shadow: inset 0 0 48px rgba(255, 255, 255, 0.18); - -webkit-backdrop-filter: blur(16px) saturate(115%); backdrop-filter: blur(16px) saturate(115%); -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.16) 5%, rgba(0, 0, 0, 0.6) 12%, #000 24%), linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.08) 8%, rgba(0, 0, 0, 0.28) 18%, rgba(0, 0, 0, 0.66) 30%, #000 42%); -webkit-mask-composite: source-in; mask-image: - linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.16) 5%, rgba(0, 0, 0, 0.6) 12%, #000 24%), - linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.08) 8%, rgba(0, 0, 0, 0.28) 18%, rgba(0, 0, 0, 0.66) 30%, #000 42%); + linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 0, rgba(0, 0, 0, 0.28) 10%, #000 75%), + linear-gradient(to right, rgba(0, 0, 0, 0.08) 0, rgba(0, 0, 0, 0.28) 10%, #000 42%); mask-composite: intersect; } @@ -94,7 +92,7 @@ font-size: 85%; padding: 0 1em 0 0; position: absolute; - left: 250px; + left: 490px; top: 46px; height: 80px; line-height: 68px; From 35bdbc01e3952e525fb2762f9e84ebb5ed2d06ef Mon Sep 17 00:00:00 2001 From: Mahiru Date: Mon, 23 Mar 2026 00:32:42 +0800 Subject: [PATCH 03/11] template file adjust --- .../game/template/Stage/TextBox/textbox.scss | 26 +++++++++++-------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/packages/webgal/public/game/template/Stage/TextBox/textbox.scss b/packages/webgal/public/game/template/Stage/TextBox/textbox.scss index 792a35a1b..95c468e97 100644 --- a/packages/webgal/public/game/template/Stage/TextBox/textbox.scss +++ b/packages/webgal/public/game/template/Stage/TextBox/textbox.scss @@ -1,12 +1,12 @@ .TextBox_main { z-index: 3; position: absolute; - right: 0; min-height: 430px; max-height: 430px; background-blend-mode: darken; border-radius: 0; - bottom: 0; + bottom: -2px; + right: -2px; left: 0; font-weight: bold; color: white; @@ -28,11 +28,6 @@ background-color: rgba(167, 186, 214, 0.28); background-image: linear-gradient(118deg, rgba(147, 165, 207, 0.9) 0%, rgba(182, 198, 222, 0.82) 48%, rgba(228, 239, 233, 0.82) 100%); - backdrop-filter: blur(16px) saturate(115%); - -webkit-mask-image: - linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.16) 5%, rgba(0, 0, 0, 0.6) 12%, #000 24%), - linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.08) 8%, rgba(0, 0, 0, 0.28) 18%, rgba(0, 0, 0, 0.66) 30%, #000 42%); - -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 0, rgba(0, 0, 0, 0.28) 10%, #000 75%), linear-gradient(to right, rgba(0, 0, 0, 0.08) 0, rgba(0, 0, 0, 0.28) 10%, #000 42%); @@ -90,11 +85,12 @@ .TextBox_showName { font-size: 85%; - padding: 0 1em 0 0; + padding: 0 1em 10px 0; + min-width: 50%; position: absolute; left: 490px; - top: 46px; - height: 80px; + top: 26px; + height: 90px; line-height: 68px; border-radius: 0; z-index: 3; @@ -105,6 +101,14 @@ z-index: 2; background: transparent; border: 0; + border-bottom: 3px solid transparent; + border-image: linear-gradient( + to right, + rgba(255, 255, 255, 0.2) 0%, + rgba(255, 255, 255, 0.5) 5%, + rgba(255, 255, 255, 0) 100% + ) + 1; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; @@ -127,7 +131,7 @@ height: 450px; width: 450px; bottom: 0; - left: -205px; + left: 0; overflow: visible; } From c7eb9c979bc48741268eb52aa34838b789bf27be Mon Sep 17 00:00:00 2001 From: Mahiru Date: Mon, 23 Mar 2026 00:36:29 +0800 Subject: [PATCH 04/11] textbox adjust complete --- .../src/Stage/TextBox/textbox.module.scss | 40 ++++++++++--------- .../TextPreview/textPreview.module.scss | 3 +- 2 files changed, 22 insertions(+), 21 deletions(-) diff --git a/packages/webgal/src/Stage/TextBox/textbox.module.scss b/packages/webgal/src/Stage/TextBox/textbox.module.scss index 4af8cfd86..fcc2fb3fd 100644 --- a/packages/webgal/src/Stage/TextBox/textbox.module.scss +++ b/packages/webgal/src/Stage/TextBox/textbox.module.scss @@ -25,16 +25,16 @@ $height: $baseHeight + $topReserve; .TextBox_main { z-index: 3; position: absolute; - right: 0; + right: -2px; min-height: $height; max-height: $height; background-blend-mode: darken; border-radius: 0; - bottom: 0; - left: 240px; + bottom: -2px; + left: 0; font-weight: bold; color: white; - padding: calc(1em + #{$topReserve}) 50px 70px 250px; + padding: calc(1em + #{$topReserve}) 50px 70px 490px; box-sizing: border-box; display: flex; flex-flow: column; @@ -44,7 +44,7 @@ $height: $baseHeight + $topReserve; } .TextBox_main_miniavatarOff { - left: 240px; + left: 0; } .TextBox_Background { @@ -52,16 +52,9 @@ $height: $baseHeight + $topReserve; background-color: rgba(167, 186, 214, 0.28); background-image: linear-gradient(118deg, rgba(147, 165, 207, 0.9) 0%, rgba(182, 198, 222, 0.82) 48%, rgba(228, 239, 233, 0.82) 100%); - box-shadow: inset 0 0 48px rgba(255, 255, 255, 0.18); - -webkit-backdrop-filter: blur(16px) saturate(115%); - backdrop-filter: blur(16px) saturate(115%); - -webkit-mask-image: - linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.16) 5%, rgba(0, 0, 0, 0.6) 12%, #000 24%), - linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.08) 8%, rgba(0, 0, 0, 0.28) 18%, rgba(0, 0, 0, 0.66) 30%, #000 42%); - -webkit-mask-composite: source-in; mask-image: - linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.16) 5%, rgba(0, 0, 0, 0.6) 12%, #000 24%), - linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.08) 8%, rgba(0, 0, 0, 0.28) 18%, rgba(0, 0, 0, 0.66) 30%, #000 42%); + linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 0, rgba(0, 0, 0, 0.28) 10%, #000 75%), + linear-gradient(to right, rgba(0, 0, 0, 0.08) 0, rgba(0, 0, 0, 0.28) 10%, #000 42%); mask-composite: intersect; } @@ -159,12 +152,13 @@ $height: $baseHeight + $topReserve; font-size: 85%; //border-bottom: 3px solid rgb(176, 176, 176); //min-width: 25%; - padding: 0 1em 0 0; + padding: 0 1em 10px 0; + min-width: 50%; //margin: 0 0 0 0; position: absolute; - left: 250px; - top: 46px; - height: 80px; + left: 490px; + top: 26px; + height: 90px; line-height: 68px; //display: flex; //align-items: center; @@ -180,6 +174,14 @@ $height: $baseHeight + $topReserve; z-index: 2; background: transparent; border: 0; + border-bottom: 3px solid transparent; + border-image: linear-gradient( + to right, + rgba(255, 255, 255, 0.2) 0%, + rgba(255, 255, 255, 0.5) 5%, + rgba(255, 255, 255, 0) 100% + ) + 1; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; @@ -202,7 +204,7 @@ $height: $baseHeight + $topReserve; height: 450px; width: 450px; bottom: 0; - left: -205px; + left: 0; overflow: visible; } diff --git a/packages/webgal/src/UI/Menu/Options/TextPreview/textPreview.module.scss b/packages/webgal/src/UI/Menu/Options/TextPreview/textPreview.module.scss index 420b3bd6d..cdca40b0d 100644 --- a/packages/webgal/src/UI/Menu/Options/TextPreview/textPreview.module.scss +++ b/packages/webgal/src/UI/Menu/Options/TextPreview/textPreview.module.scss @@ -1,6 +1,5 @@ .textPreviewMain { z-index: 1; - padding: 1em; min-height: 480px; width: 100%; } @@ -9,4 +8,4 @@ width: 100%; height: 100%; position: relative; -} \ No newline at end of file +} From 7622fe08660171334f3ccbd6576fdf305ed9c592 Mon Sep 17 00:00:00 2001 From: Mahiru Date: Mon, 23 Mar 2026 00:43:00 +0800 Subject: [PATCH 05/11] fix scene typo --- .../public/game/scene/demo_changeConfig.txt | 2 +- packages/webgal/public/game/scene/demo_en.txt | 4 +-- .../webgal/public/game/scene/demo_escape.txt | 2 +- .../webgal/public/game/scene/demo_zh_cn.txt | 34 +++++++++---------- packages/webgal/public/game/scene/start.txt | 2 +- 5 files changed, 22 insertions(+), 22 deletions(-) diff --git a/packages/webgal/public/game/scene/demo_changeConfig.txt b/packages/webgal/public/game/scene/demo_changeConfig.txt index ddbf8a3c6..7bc6c2760 100644 --- a/packages/webgal/public/game/scene/demo_changeConfig.txt +++ b/packages/webgal/public/game/scene/demo_changeConfig.txt @@ -1,5 +1,5 @@ webgal:我会修改标题 -hold; -setVar:Game_name=WebGal_Change -global; +setVar:Game_name=WebGAL_Change -global; webgal:游戏标题已经被我修改为{Game_name} -hold; webgal:我会修改游戏背景 -hold; setVar:Title_img=bg.webp -global; diff --git a/packages/webgal/public/game/scene/demo_en.txt b/packages/webgal/public/game/scene/demo_en.txt index c886eff48..db76dca4b 100644 --- a/packages/webgal/public/game/scene/demo_en.txt +++ b/packages/webgal/public/game/scene/demo_en.txt @@ -1,7 +1,7 @@ bgm:s_Title.mp3 -volume=80 -enter=3000; unlockBgm:s_Title.mp3 -name=welcome; intro:*Getting started| The image materials used in this demo game are AI-generated images; -intro:*Credit| Created By ondoku3.com; +intro:*Credit| Created by ondoku3.com; changeBg:bg.webp -next; unlockCg:bg.webp -name=良い夜; changeFigure:stand.webp -left -enter=enter-from-left -next; @@ -22,7 +22,7 @@ pixiPerform:snow; For example, let's make it snow as a special effect. -e008_For_example_let's_make.mp3; As you can see, WebGAL has attractive features. |Try it out and experience it. -e009_As_you_can see_WebGAL.mp3; That's all for the feature introduction. -e010_That's_all_for_the_feature introduction.mp3; -Next,I will introduce the history and trivia of WebGAL. -e011_Next_I_will introduce_the_ history.mp3; +Next, I will introduce the history and trivia of WebGAL. -e011_Next_I_will introduce_the_ history.mp3; pixiInit; choose:WebGAL History:choose1|WebGAL Trivia:choose2; ;選択１ diff --git a/packages/webgal/public/game/scene/demo_escape.txt b/packages/webgal/public/game/scene/demo_escape.txt index f0f4cd023..13acdd796 100644 --- a/packages/webgal/public/game/scene/demo_escape.txt +++ b/packages/webgal/public/game/scene/demo_escape.txt @@ -1,3 +1,3 @@ intro:我会显示出来：\:\,\.\;不信你看看 -hold; -WebGal:我会显示出来：\:\,\.\;不信你看看; +WebGAL:我会显示出来：\:\,\.\;不信你看看; choose:我会显示出来：\:\,\.\;不信你看看; diff --git a/packages/webgal/public/game/scene/demo_zh_cn.txt b/packages/webgal/public/game/scene/demo_zh_cn.txt index 0265db5d5..0bd78e80a 100644 --- a/packages/webgal/public/game/scene/demo_zh_cn.txt +++ b/packages/webgal/public/game/scene/demo_zh_cn.txt @@ -1,23 +1,23 @@ bgm:s_Title.mp3 -volume=80 -enter=3000; unlockBgm:s_Title.mp3 -name=雲を追いかけて; -intro:你好|欢迎来到 {egine} 的世界; +intro:你好|欢迎来到 {engine} 的世界; changeBg:WebGalEnter.webp -next; setTransition: -target=bg-main -exit=shockwaveOut; -:你好|欢迎来到 {egine} 的世界; +:你好|欢迎来到 {engine} 的世界; changeBg:bg.webp -next; setTransition: -target=bg-main -enter=shockwaveIn -next; unlockCg:bg.webp -name=良い夜; // 解锁CG并赋予名称 changeFigure:stand.webp -left -enter=enter-from-left -next; miniAvatar:miniavatar.webp; -{heroine}:欢迎使用 {egine}！这是一款全新的网页端视觉小说引擎。 -v1.wav; +{heroine}:欢迎使用 {engine}！这是一款全新的网页端视觉小说引擎。 -v1.wav; changeFigure:stand2.webp -right -next; -{egine} 是使用 Web 技术开发的引擎，因此在网页端有良好的表现。 -v2.wav; -由于这个特性，如果你将 {egine} 部署到服务器或网页托管平台上，玩家只需要一串链接就可以开始游玩！ -v3.wav; +{engine} 是使用 Web 技术开发的引擎，因此在网页端有良好的表现。 -v2.wav; +由于这个特性，如果你将 {engine} 部署到服务器或网页托管平台上，玩家只需要一串链接就可以开始游玩！ -v3.wav; setAnimation:move-front-and-back -target=fig-left -continue; 听起来是不是非常吸引人？ -v4.wav; changeFigure:none -right -next; setTransform:{"position": {"x": 500,"y": 0}} -target=fig-left -next; -{egine} 引擎也具有动画系统和特效系统，使用 {egine} 开发的游戏可以拥有很好的表现效果。 -v5.wav; +{engine} 引擎也具有动画系统和特效系统，使用 {engine} 开发的游戏可以拥有很好的表现效果。 -v5.wav; pixiInit; pixiPerform:snow; 比如，这个下起小雪的特效。 -v6.wav; @@ -35,29 +35,29 @@ WebGAL:很高兴遇见你，{name}！ jumpLabel:toNextPart; label:toNextPart; -你可以通过以下两个分支了解 {egine} 的更多故事。 -v8.wav; -choose:{egine} 发展历程:choose1|{egine} 冷知识:choose2; +你可以通过以下两个分支了解 {engine} 的更多故事。 -v8.wav; +choose:{engine} 发展历程:choose1|{engine} 冷知识:choose2; ;分支1 label:choose1; -{egine} 的开发初衷是能够让更多人可以更方便地制作属于自己的视觉小说。 -v9.wav; -在一开始，{egine} 只具备很少的功能，仅仅能支持立绘和背景的显示、语音播放和分支选择。 -v10.wav; +{engine} 的开发初衷是能够让更多人可以更方便地制作属于自己的视觉小说。 -v9.wav; +在一开始，{engine} 只具备很少的功能，仅仅能支持立绘和背景的显示、语音播放和分支选择。 -v10.wav; setAnimation:move-front-and-back -target=fig-left -next; 在经历一年的发展后，现在已经是支持了很多优秀的表现效果的引擎了！ -v11.wav; -除此以外，{egine} 编辑器的加入也使得制作和导出一个游戏更加方便快捷。 -v12.wav; +除此以外，{engine} 编辑器的加入也使得制作和导出一个游戏更加方便快捷。 -v12.wav; jumpLabel:end; ;分支2 label:choose2; 这个演示游戏使用的素材是 AI 生成的。 -v13.wav; -{egine} 项目只用了一年不到就在 GitHub 获得了 1000 星标！ -v14.wav; -{egine} 的开发历程，是一个在开发中学习开发的过程。因此她经历了3次重构，并且每次几乎都是推倒重来式的。 -v15.wav; -{egine} 的脚本语言是为了简化制作难度而全新设计的！ -v16.wav; +{engine} 项目只用了一年不到就在 GitHub 获得了 1000 星标！ -v14.wav; +{engine} 的开发历程，是一个在开发中学习开发的过程。因此她经历了3次重构，并且每次几乎都是推倒重来式的。 -v15.wav; +{engine} 的脚本语言是为了简化制作难度而全新设计的！ -v16.wav; ; ;l2d ;label:l2d; ;changeFigure:hiyori/hiyori_pro_t11.model3.json -left -motion=Idle -next; -;{egine} 项目现在也开始尝试实验性支持 live2D！今后可能会成为一个正式功能！ +;{engine} 项目现在也开始尝试实验性支持 live2D！今后可能会成为一个正式功能！ ; ;结束分支 label:end; @@ -69,6 +69,6 @@ label:end; setTempAnimation:[{"position": {"x": 500,"y": 0},"duration": 0},{"position": {"x": 400,"y": 0},"duration": 250},{"position": {"x": 600,"y": 0},"duration": 500},{"position": {"x": 500,"y": 0},"duration": 250}] -target=fig-left -next; 当然，这不算什么，因为大多数成熟的引擎都有这些功能。但是在 Web 端，这却是很少见的。 -v20.wav; 我们为可能初次开发游戏的开发者提供了美观的通用 UI 和丰富的预设功能与动画。所以你可以没有顾虑地快速开始制作游戏。 -v21.wav; -{egine} 项目组期待你的作品能够在 {egine} 上呈现！只需要一个链接就可以让万千用户立刻开始享受你的作品。 -v22.wav; -感谢你关注 {egine} 项目！ -v23.wav; +{engine} 项目组期待你的作品能够在 {engine} 上呈现！只需要一个链接就可以让万千用户立刻开始享受你的作品。 -v22.wav; +感谢你关注 {engine} 项目！ -v23.wav; end; diff --git a/packages/webgal/public/game/scene/start.txt b/packages/webgal/public/game/scene/start.txt index 1e072c7c3..b5d22c676 100644 --- a/packages/webgal/public/game/scene/start.txt +++ b/packages/webgal/public/game/scene/start.txt @@ -1,3 +1,3 @@ setVar:heroine=WebGAL; -setVar:egine=WebGAL; +setVar:engine=WebGAL; choose:简体中文:demo_zh_cn.txt|日本語:demo_ja.txt|English:demo_en.txt|Test:function_test.txt; From 2aaae0029f4f9e904d571be2c2d6222143112103 Mon Sep 17 00:00:00 2001 From: Mahiru Date: Mon, 23 Mar 2026 01:13:52 +0800 Subject: [PATCH 06/11] title refine 1 --- .../public/game/template/UI/Title/title.scss | 94 +++++++++++++++---- packages/webgal/src/UI/Title/Title.tsx | 21 +++-- 2 files changed, 93 insertions(+), 22 deletions(-) diff --git a/packages/webgal/public/game/template/UI/Title/title.scss b/packages/webgal/public/game/template/UI/Title/title.scss index 48073c96b..a408bc00d 100644 --- a/packages/webgal/public/game/template/UI/Title/title.scss +++ b/packages/webgal/public/game/template/UI/Title/title.scss @@ -21,32 +21,76 @@ .Title_button { font-weight: bold; - text-align: center; + text-align: left; flex: 0 1 auto; cursor: pointer; - padding: 1em 2em 1em 2em; - margin: 20px 0; - transition: all 0.33s; - background: rgba(255, 255, 255, 0.15); - backdrop-filter: blur(5px); - border-radius: 4px; - transform: skewX(-10deg); - background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)); + padding: 0.7em 0; + margin: 18px 0; + transition: transform 0.22s ease, opacity 0.22s ease; + background: transparent; + backdrop-filter: none; + border: 0; + border-radius: 0; + transform: none; + overflow: visible; &:hover { - text-shadow: 0 0 10px rgba(255, 255, 255, 1); - padding: 1em 6em 1em 3em; + transform: translate3d(0, -3px, 0); + padding: 0.7em 0; + text-shadow: none; + } + + &:hover .Title_button_text_outer { + background-image: none; + color: #ffffff; + -webkit-text-fill-color: #ffffff; + text-shadow: + 0 6px 18px rgba(7, 12, 20, 0.3), + 0 2px 6px rgba(7, 12, 20, 0.2); } } .Title_button_text { - color: transparent; - background: linear-gradient(135deg, #fdfbfb 0%, #dcddde 100%); - -webkit-background-clip: text; - padding: 0 0.5em 0 0.5em; + position: relative; + z-index: 1; + display: inline-block; + padding: 0.08em 0.55em 0.12em 0.35em; font-size: 200%; font-family: WebgalUI, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - letter-spacing: 0.15em; + letter-spacing: 0.16em; + line-height: 1.2; +} + +.Title_button_text_placeholder { + position: relative; + display: inline-block; + color: transparent; + white-space: nowrap; +} + +.Title_button_text_outer { + position: absolute; + left: 0; + top: 0; + white-space: nowrap; + background-image: none; + background-clip: border-box; + -webkit-background-clip: border-box; + color: #ffffff; + -webkit-text-fill-color: #ffffff; + z-index: 2; + text-shadow: + 0 3px 10px rgba(7, 12, 20, 0.22), + 0 1px 3px rgba(7, 12, 20, 0.16); +} + +.Title_button_text_inner { + white-space: nowrap; + position: absolute; + left: 0; + top: 0; + -webkit-text-stroke: 0.09em rgba(12, 20, 32, 0.7); + z-index: 1; } .Title_backup_background { @@ -56,3 +100,21 @@ z-index: 13; background: linear-gradient(135deg, #fdfbfb 0%, #dcddde 100%); } + +.Title_button_disabled { + cursor: not-allowed !important; + opacity: 0.45; + + &:hover { + transform: none; + } + + &:hover .Title_button_text_outer { + background-image: none; + color: #ffffff; + -webkit-text-fill-color: #ffffff; + text-shadow: + 0 3px 10px rgba(7, 12, 20, 0.22), + 0 1px 3px rgba(7, 12, 20, 0.16); + } +} diff --git a/packages/webgal/src/UI/Title/Title.tsx b/packages/webgal/src/UI/Title/Title.tsx index 061df48a6..9b22f3dec 100644 --- a/packages/webgal/src/UI/Title/Title.tsx +++ b/packages/webgal/src/UI/Title/Title.tsx @@ -30,6 +30,15 @@ export default function Title() { const appreciationItems = useSelector((state: RootState) => state.userData.appreciationData); const hasAppreciationItems = appreciationItems.bgm.length > 0 || appreciationItems.cg.length > 0; + const renderButtonText = (text: string) => ( +
+ + {text} + {text} + {text} + +
+ ); return ( <> @@ -63,7 +72,7 @@ export default function Title() { }} onMouseEnter={playSeEnter} > -
{t('start.title')}
+ {renderButtonText(t('start.title'))}
-
{t('continue.title')}
+ {renderButtonText(t('continue.title'))}
-
{t('options.title')}
+ {renderButtonText(t('options.title'))}
-
{t('load.title')}
+ {renderButtonText(t('load.title'))}
{GUIState.enableAppreciationMode && (
-
{t('extra.title')}
+ {renderButtonText(t('extra.title'))}
)}
-
{t('exit.title')}
+ {renderButtonText(t('exit.title'))}
From 8133b08e6eaf912e0b408d322890960d38de90c4 Mon Sep 17 00:00:00 2001 From: Mahiru Date: Mon, 23 Mar 2026 01:24:42 +0800 Subject: [PATCH 07/11] title refine 2 --- .../public/game/template/UI/Title/title.scss | 31 ++------ packages/webgal/src/UI/Title/Title.tsx | 2 +- .../webgal/src/UI/Title/title.module.scss | 78 ++++++++++++++----- 3 files changed, 68 insertions(+), 43 deletions(-) diff --git a/packages/webgal/public/game/template/UI/Title/title.scss b/packages/webgal/public/game/template/UI/Title/title.scss index a408bc00d..0305e216a 100644 --- a/packages/webgal/public/game/template/UI/Title/title.scss +++ b/packages/webgal/public/game/template/UI/Title/title.scss @@ -33,20 +33,14 @@ border-radius: 0; transform: none; overflow: visible; + text-shadow: none; &:hover { - transform: translate3d(0, -3px, 0); + transform: translate3d(0, -3px, 0) scale(1.02); padding: 0.7em 0; - text-shadow: none; - } - - &:hover .Title_button_text_outer { - background-image: none; - color: #ffffff; - -webkit-text-fill-color: #ffffff; - text-shadow: - 0 6px 18px rgba(7, 12, 20, 0.3), - 0 2px 6px rgba(7, 12, 20, 0.2); + filter: drop-shadow(0 10px 16px rgba(6, 10, 18, 0.12)) + drop-shadow(0 5px 8px rgba(6, 10, 18, 0.07)) + drop-shadow(1px 1px 0 rgba(6, 10, 18, 0.05)); } } @@ -59,6 +53,8 @@ font-family: WebgalUI, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; letter-spacing: 0.16em; line-height: 1.2; + transform-origin: left center; + transition: transform 0.22s ease; } .Title_button_text_placeholder { @@ -104,17 +100,4 @@ .Title_button_disabled { cursor: not-allowed !important; opacity: 0.45; - - &:hover { - transform: none; - } - - &:hover .Title_button_text_outer { - background-image: none; - color: #ffffff; - -webkit-text-fill-color: #ffffff; - text-shadow: - 0 3px 10px rgba(7, 12, 20, 0.22), - 0 1px 3px rgba(7, 12, 20, 0.16); - } } diff --git a/packages/webgal/src/UI/Title/Title.tsx b/packages/webgal/src/UI/Title/Title.tsx index 9b22f3dec..f222d6f9a 100644 --- a/packages/webgal/src/UI/Title/Title.tsx +++ b/packages/webgal/src/UI/Title/Title.tsx @@ -110,7 +110,7 @@ export default function Title() { {GUIState.enableAppreciationMode && (
{ if (hasAppreciationItems) { diff --git a/packages/webgal/src/UI/Title/title.module.scss b/packages/webgal/src/UI/Title/title.module.scss index 0cb6e04ad..8a84ad58f 100644 --- a/packages/webgal/src/UI/Title/title.module.scss +++ b/packages/webgal/src/UI/Title/title.module.scss @@ -6,6 +6,7 @@ } .Title_buttonList { + font-family: "思源宋体", serif; display: flex; position: absolute; left: 0; @@ -20,29 +21,70 @@ .Title_button { font-weight: bold; - text-align: center; + text-align: left; flex: 0 1 auto; cursor: pointer; - padding: 1em 2em 1em 2em; - margin: 20px 0; - transition: all 0.33s; - background: rgba(255, 255, 255, 0.15); - backdrop-filter: blur(5px); - border-radius: 4px; - transform: skewX(-10deg); - background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)); -} + padding: 0.7em 0; + margin: 18px 0; + transition: transform 0.22s ease, opacity 0.22s ease; + background: transparent; + backdrop-filter: none; + border: 0; + border-radius: 0; + transform: none; + overflow: visible; + text-shadow: none; -.Title_button:hover { - text-shadow: 0 0 10px rgba(255, 255, 255, 1); - padding: 1em 6em 1em 3em; + &:hover { + transform: translate3d(0, -3px, 0) scale(1.02); + padding: 0.7em 0; + filter: drop-shadow(0 10px 16px rgba(6, 10, 18, 0.12)) + drop-shadow(0 5px 8px rgba(6, 10, 18, 0.07)) + drop-shadow(1px 1px 0 rgba(6, 10, 18, 0.05)); + } } .Title_button_text { - font-size: 165%; - color: #fbfbfb; - padding: 0 0.5em 0 0.5em; - letter-spacing: 0.2em; + position: relative; + z-index: 1; + display: inline-block; + padding: 0.08em 0.55em 0.12em 0.35em; + font-size: 200%; + font-family: WebgalUI, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + letter-spacing: 0.16em; + line-height: 1.2; + transform-origin: left center; + transition: transform 0.22s ease; +} + +.Title_button_text_placeholder { + position: relative; + display: inline-block; + color: transparent; + white-space: nowrap; +} + +.Title_button_text_outer { + position: absolute; + left: 0; + top: 0; + white-space: nowrap; + background-image: none; + background-clip: border-box; + -webkit-background-clip: border-box; + color: #ffffff; + -webkit-text-fill-color: #ffffff; + z-index: 2; + text-shadow: 0 3px 10px rgba(7, 12, 20, 0.22), 0 1px 3px rgba(7, 12, 20, 0.16); +} + +.Title_button_text_inner { + white-space: nowrap; + position: absolute; + left: 0; + top: 0; + -webkit-text-stroke: 0.09em rgba(12, 20, 32, 0.7); + z-index: 1; } .Title_backup_background { @@ -55,5 +97,5 @@ .Title_button_disabled { cursor: not-allowed !important; - opacity: 0.5; + opacity: 0.45; } From 786ba768d976a9bbe90d9a055690a5daff0858bb Mon Sep 17 00:00:00 2001 From: Mahiru Date: Sat, 28 Mar 2026 11:22:41 +0800 Subject: [PATCH 08/11] restore old module scss --- .../game/template/Stage/Choose/choose.scss | 54 ------ .../game/template/Stage/TextBox/textbox.scss | 172 ------------------ .../public/game/template/UI/Title/title.scss | 103 ----------- .../webgal/public/game/template/template.json | 4 - .../src/Stage/TextBox/textbox.module.scss | 76 ++++---- .../TextPreview/textPreview.module.scss | 3 +- packages/webgal/src/UI/Title/Title.tsx | 6 +- .../webgal/src/UI/Title/title.module.scss | 71 ++------ 8 files changed, 58 insertions(+), 431 deletions(-) delete mode 100644 packages/webgal/public/game/template/Stage/Choose/choose.scss delete mode 100644 packages/webgal/public/game/template/Stage/TextBox/textbox.scss delete mode 100644 packages/webgal/public/game/template/UI/Title/title.scss delete mode 100644 packages/webgal/public/game/template/template.json diff --git a/packages/webgal/public/game/template/Stage/Choose/choose.scss b/packages/webgal/public/game/template/Stage/Choose/choose.scss deleted file mode 100644 index 4040078bc..000000000 --- a/packages/webgal/public/game/template/Stage/Choose/choose.scss +++ /dev/null @@ -1,54 +0,0 @@ -.Choose_Main { - position: absolute; - width: 100%; - height: 100%; - display: flex; - flex-flow: column; - justify-content: center; - align-items: center; - z-index: 13; - background: rgba(0, 0, 0, 0.05); -} - -.Choose_item { - font-family: "WebgalUI", serif; - cursor: pointer; - min-width: 50%; - padding: 0.25em 1em 0.25em 1em; - font-size: 265%; - color: #8E354A; - text-align: center; - border-radius: 4px; - border: 3px solid rgba(0, 0, 0, 0); - box-shadow: 0 0 25px rgba(0, 0, 0, 0.25); - background: rgba(255, 255, 255, 0.65); - margin: 0.25em 0 0.25em 0; - transition: background-color 0.5s, border 0.5s, font-weight 0.5s, box-shadow 0.5s; - - &:hover { - background: rgba(255, 255, 255, 0.9); - box-shadow: 0 0 25px rgba(0, 0, 0, 0.35); - border: 3px solid #8E354A; - } -} - -.Choose_item_disabled { - font-family: "WebgalUI", serif; - cursor: not-allowed; - min-width: 50%; - padding: 0.25em 1em 0.25em 1em; - font-size: 265%; - color: rgba(142, 53, 74, 0.5); - text-align: center; - border-radius: 4px; - border: 3px solid rgba(0, 0, 0, 0); - box-shadow: 0 0 25px rgba(0, 0, 0, 0.25); - background: rgba(255, 255, 255, 0.5); - margin: 0.25em 0 0.25em 0; - transition: background-color 0.5s, border 0.5s, font-weight 0.5s, box-shadow 0.5s; -} - -.Choose_item_outer { - color: #000; - min-width: 50%; -} diff --git a/packages/webgal/public/game/template/Stage/TextBox/textbox.scss b/packages/webgal/public/game/template/Stage/TextBox/textbox.scss deleted file mode 100644 index 95c468e97..000000000 --- a/packages/webgal/public/game/template/Stage/TextBox/textbox.scss +++ /dev/null @@ -1,172 +0,0 @@ -.TextBox_main { - z-index: 3; - position: absolute; - min-height: 430px; - max-height: 430px; - background-blend-mode: darken; - border-radius: 0; - bottom: -2px; - right: -2px; - left: 0; - font-weight: bold; - color: white; - padding: calc(1em + 100px) 50px 70px 490px; - box-sizing: border-box; - display: flex; - flex-flow: column; - align-items: flex-start; - letter-spacing: 0.2em; - transition: left 0.33s; -} - -.TextBox_main_miniavatarOff { - left: 0; -} - -.TextBox_Background { - z-index: 2; - background-color: rgba(167, 186, 214, 0.28); - background-image: - linear-gradient(118deg, rgba(147, 165, 207, 0.9) 0%, rgba(182, 198, 222, 0.82) 48%, rgba(228, 239, 233, 0.82) 100%); - mask-image: - linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 0, rgba(0, 0, 0, 0.28) 10%, #000 75%), - linear-gradient(to right, rgba(0, 0, 0, 0.08) 0, rgba(0, 0, 0, 0.28) 10%, #000 42%); - mask-composite: intersect; -} - -@keyframes showSoftly { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} - -.TextBox_textElement_start { - position: relative; - animation: TextDelayShow 1000ms ease-out forwards; - opacity: 0; -} - -.outer { - position: absolute; - white-space: nowrap; - left: 0; - top: 0; - background-image: linear-gradient(#0B346E 0%, #141423 100%); - background-clip: text; - -webkit-background-clip: text; - color: transparent; - z-index: 2; -} - -.inner { - white-space: nowrap; - position: absolute; - left: 0; - top: 0; - -webkit-text-stroke: 0.1em rgba(255, 255, 255, 1); - z-index: 1; -} - -.zhanwei { - color: transparent; - white-space: nowrap; -} - - -.TextBox_textElement_Settled { - position: relative; - opacity: 1; -} - - -.TextBox_showName { - font-size: 85%; - padding: 0 1em 10px 0; - min-width: 50%; - position: absolute; - left: 490px; - top: 26px; - height: 90px; - line-height: 68px; - border-radius: 0; - z-index: 3; - border: 4px solid rgba(255, 255, 255, 0); -} - -.TextBox_ShowName_Background { - z-index: 2; - background: transparent; - border: 0; - border-bottom: 3px solid transparent; - border-image: linear-gradient( - to right, - rgba(255, 255, 255, 0.2) 0%, - rgba(255, 255, 255, 0.5) 5%, - rgba(255, 255, 255, 0) 100% - ) - 1; - box-shadow: none; - -webkit-backdrop-filter: none; - backdrop-filter: none; - -webkit-mask-image: none; - mask-image: none; -} - -@keyframes TextDelayShow { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} - -.miniAvatarContainer { - position: absolute; - height: 450px; - width: 450px; - bottom: 0; - left: 0; - overflow: visible; -} - -.miniAvatarImg { - max-height: 100%; - max-width: 100%; - position: absolute; - bottom: 0; - filter: drop-shadow(15px 0 3px rgba(0, 0, 0, 0.5)); -} - -.nameContainer { - position: absolute; - left: 2em; - top: -3.5em; -} - -.outerName { - position: absolute; - left: 0; - top: 0; - color: #0b346e; - z-index: 2; - text-shadow: 0 2px 8px rgba(255, 255, 255, 0.35), 0 2px 6px rgba(0, 0, 0, 0.18); -} - -.innerName { - position: absolute; - left: 0; - top: 0; - -webkit-text-stroke: 0.08em rgba(255, 255, 255, 0.98); - z-index: 1; - text-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); -} - -.text { - overflow: hidden; -} diff --git a/packages/webgal/public/game/template/UI/Title/title.scss b/packages/webgal/public/game/template/UI/Title/title.scss deleted file mode 100644 index 0305e216a..000000000 --- a/packages/webgal/public/game/template/UI/Title/title.scss +++ /dev/null @@ -1,103 +0,0 @@ -.Title_main { - width: 100%; - height: 100%; - position: absolute; - z-index: 13; -} - -.Title_buttonList { - font-family: "思源宋体", serif; - display: flex; - position: absolute; - left: 0; - min-width: 25%; - height: 100%; - justify-content: center; - align-items: flex-start; - flex-flow: column; - transition: background 0.75s; - padding-left: 120px; -} - -.Title_button { - font-weight: bold; - text-align: left; - flex: 0 1 auto; - cursor: pointer; - padding: 0.7em 0; - margin: 18px 0; - transition: transform 0.22s ease, opacity 0.22s ease; - background: transparent; - backdrop-filter: none; - border: 0; - border-radius: 0; - transform: none; - overflow: visible; - text-shadow: none; - - &:hover { - transform: translate3d(0, -3px, 0) scale(1.02); - padding: 0.7em 0; - filter: drop-shadow(0 10px 16px rgba(6, 10, 18, 0.12)) - drop-shadow(0 5px 8px rgba(6, 10, 18, 0.07)) - drop-shadow(1px 1px 0 rgba(6, 10, 18, 0.05)); - } -} - -.Title_button_text { - position: relative; - z-index: 1; - display: inline-block; - padding: 0.08em 0.55em 0.12em 0.35em; - font-size: 200%; - font-family: WebgalUI, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - letter-spacing: 0.16em; - line-height: 1.2; - transform-origin: left center; - transition: transform 0.22s ease; -} - -.Title_button_text_placeholder { - position: relative; - display: inline-block; - color: transparent; - white-space: nowrap; -} - -.Title_button_text_outer { - position: absolute; - left: 0; - top: 0; - white-space: nowrap; - background-image: none; - background-clip: border-box; - -webkit-background-clip: border-box; - color: #ffffff; - -webkit-text-fill-color: #ffffff; - z-index: 2; - text-shadow: - 0 3px 10px rgba(7, 12, 20, 0.22), - 0 1px 3px rgba(7, 12, 20, 0.16); -} - -.Title_button_text_inner { - white-space: nowrap; - position: absolute; - left: 0; - top: 0; - -webkit-text-stroke: 0.09em rgba(12, 20, 32, 0.7); - z-index: 1; -} - -.Title_backup_background { - width: 100%; - height: 100%; - position: absolute; - z-index: 13; - background: linear-gradient(135deg, #fdfbfb 0%, #dcddde 100%); -} - -.Title_button_disabled { - cursor: not-allowed !important; - opacity: 0.45; -} diff --git a/packages/webgal/public/game/template/template.json b/packages/webgal/public/game/template/template.json deleted file mode 100644 index 55f50f7c8..000000000 --- a/packages/webgal/public/game/template/template.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name":"Default Template", - "webgal-version":"4.5.18" -} diff --git a/packages/webgal/src/Stage/TextBox/textbox.module.scss b/packages/webgal/src/Stage/TextBox/textbox.module.scss index fcc2fb3fd..c50816bc8 100644 --- a/packages/webgal/src/Stage/TextBox/textbox.module.scss +++ b/packages/webgal/src/Stage/TextBox/textbox.module.scss @@ -10,9 +10,7 @@ //text-shadow: 0 0 3px rgba(81,168,221,1); } -$baseHeight: 330px; -$topReserve: 100px; -$height: $baseHeight + $topReserve; +$height: 330px; .TextBox_Container { position: absolute; @@ -25,16 +23,16 @@ $height: $baseHeight + $topReserve; .TextBox_main { z-index: 3; position: absolute; - right: -2px; + right: 25px; min-height: $height; max-height: $height; background-blend-mode: darken; - border-radius: 0; - bottom: -2px; - left: 0; + border-radius: calc($height / 2) 20px 20px calc($height / 2); + bottom: 20px; + left: 275px; font-weight: bold; color: white; - padding: calc(1em + #{$topReserve}) 50px 70px 490px; + padding: 1em 50px 70px 200px; box-sizing: border-box; display: flex; flex-flow: column; @@ -44,18 +42,12 @@ $height: $baseHeight + $topReserve; } .TextBox_main_miniavatarOff { - left: 0; + left: 25px; } .TextBox_Background { z-index: 2; - background-color: rgba(167, 186, 214, 0.28); - background-image: - linear-gradient(118deg, rgba(147, 165, 207, 0.9) 0%, rgba(182, 198, 222, 0.82) 48%, rgba(228, 239, 233, 0.82) 100%); - mask-image: - linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 0, rgba(0, 0, 0, 0.28) 10%, #000 75%), - linear-gradient(to right, rgba(0, 0, 0, 0.08) 0, rgba(0, 0, 0, 0.28) 10%, #000 42%); - mask-composite: intersect; + background: linear-gradient(rgba(245, 247, 250, 1) 0%, rgba(189, 198, 222, 1) 100%); } @keyframes showSoftly { @@ -152,18 +144,17 @@ $height: $baseHeight + $topReserve; font-size: 85%; //border-bottom: 3px solid rgb(176, 176, 176); //min-width: 25%; - padding: 0 1em 10px 0; - min-width: 50%; + padding: 0 2em 0 2em; //margin: 0 0 0 0; position: absolute; - left: 490px; - top: 26px; - height: 90px; + left: 150px; + top: -68px; + height: 80px; line-height: 68px; //display: flex; //align-items: center; // background: rgba(11, 52, 110, 0.9); - border-radius: 0; + border-radius: 40px; // border: 4px solid rgba(255, 255, 255, 0.75); // box-shadow: 3px 3px 10px rgba(100, 100, 100, 0.5); z-index: 3; @@ -172,21 +163,9 @@ $height: $baseHeight + $topReserve; .TextBox_ShowName_Background { z-index: 2; - background: transparent; - border: 0; - border-bottom: 3px solid transparent; - border-image: linear-gradient( - to right, - rgba(255, 255, 255, 0.2) 0%, - rgba(255, 255, 255, 0.5) 5%, - rgba(255, 255, 255, 0) 100% - ) - 1; - box-shadow: none; - -webkit-backdrop-filter: none; - backdrop-filter: none; - -webkit-mask-image: none; - mask-image: none; + background: rgba(11, 52, 110, 1); + border: 4px solid rgba(255, 255, 255, 0.75); + box-shadow: 3px 3px 10px rgba(100, 100, 100, 0.5); } @keyframes TextDelayShow { @@ -204,8 +183,9 @@ $height: $baseHeight + $topReserve; height: 450px; width: 450px; bottom: 0; - left: 0; - overflow: visible; + left: -250px; + border-radius: 100% 0 0 100%; + overflow: hidden; } .miniAvatarImg { @@ -226,18 +206,28 @@ $height: $baseHeight + $topReserve; position: absolute; left: 0; top: 0; - color: #0b346e; + //background-image: linear-gradient(rgba(255, 255, 255, 1) 0%, rgb(225, 237, 255) 100%); + //background-image: linear-gradient( + // #bfd8ff 0%, + // //#f5f7fa 45%, + // #bfbfc7 100% + //); + background: linear-gradient(150deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 35%, rgb(165, 212, 228) 100%); + //background: rgba(255, 255, 255, 1); + background-clip: text; + -webkit-background-clip: text; + color: transparent; z-index: 2; - text-shadow: 0 2px 8px rgba(255, 255, 255, 0.35), 0 2px 6px rgba(0, 0, 0, 0.18); } .innerName { position: absolute; left: 0; top: 0; - -webkit-text-stroke: 0.08em rgba(255, 255, 255, 0.98); + //-webkit-text-stroke: 0.1em rgba(0, 0, 0, 0.25); + //-webkit-text-stroke: 0.1em rgba(255, 255, 255, 1); z-index: 1; - text-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); + //text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.75); } .text { diff --git a/packages/webgal/src/UI/Menu/Options/TextPreview/textPreview.module.scss b/packages/webgal/src/UI/Menu/Options/TextPreview/textPreview.module.scss index cdca40b0d..420b3bd6d 100644 --- a/packages/webgal/src/UI/Menu/Options/TextPreview/textPreview.module.scss +++ b/packages/webgal/src/UI/Menu/Options/TextPreview/textPreview.module.scss @@ -1,5 +1,6 @@ .textPreviewMain { z-index: 1; + padding: 1em; min-height: 480px; width: 100%; } @@ -8,4 +9,4 @@ width: 100%; height: 100%; position: relative; -} +} \ No newline at end of file diff --git a/packages/webgal/src/UI/Title/Title.tsx b/packages/webgal/src/UI/Title/Title.tsx index f222d6f9a..7e5403ada 100644 --- a/packages/webgal/src/UI/Title/Title.tsx +++ b/packages/webgal/src/UI/Title/Title.tsx @@ -32,10 +32,10 @@ export default function Title() { const hasAppreciationItems = appreciationItems.bgm.length > 0 || appreciationItems.cg.length > 0; const renderButtonText = (text: string) => (
- + {text} - {text} - {text} + {text} + {text}
); diff --git a/packages/webgal/src/UI/Title/title.module.scss b/packages/webgal/src/UI/Title/title.module.scss index 8a84ad58f..b0522b872 100644 --- a/packages/webgal/src/UI/Title/title.module.scss +++ b/packages/webgal/src/UI/Title/title.module.scss @@ -6,7 +6,6 @@ } .Title_buttonList { - font-family: "思源宋体", serif; display: flex; position: absolute; left: 0; @@ -21,70 +20,40 @@ .Title_button { font-weight: bold; - text-align: left; + text-align: center; flex: 0 1 auto; cursor: pointer; - padding: 0.7em 0; - margin: 18px 0; - transition: transform 0.22s ease, opacity 0.22s ease; - background: transparent; - backdrop-filter: none; - border: 0; - border-radius: 0; - transform: none; - overflow: visible; - text-shadow: none; + padding: 1em 2em 1em 2em; + margin: 20px 0; + transition: all 0.33s; + background: rgba(255, 255, 255, 0.15); + backdrop-filter: blur(5px); + border-radius: 4px; + transform: skewX(-10deg); + background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)); +} - &:hover { - transform: translate3d(0, -3px, 0) scale(1.02); - padding: 0.7em 0; - filter: drop-shadow(0 10px 16px rgba(6, 10, 18, 0.12)) - drop-shadow(0 5px 8px rgba(6, 10, 18, 0.07)) - drop-shadow(1px 1px 0 rgba(6, 10, 18, 0.05)); - } +.Title_button:hover { + text-shadow: 0 0 10px rgba(255, 255, 255, 1); + padding: 1em 6em 1em 3em; } .Title_button_text { - position: relative; - z-index: 1; - display: inline-block; - padding: 0.08em 0.55em 0.12em 0.35em; - font-size: 200%; - font-family: WebgalUI, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - letter-spacing: 0.16em; - line-height: 1.2; - transform-origin: left center; - transition: transform 0.22s ease; + font-size: 165%; + color: #fbfbfb; + padding: 0 0.5em 0 0.5em; + letter-spacing: 0.2em; } .Title_button_text_placeholder { - position: relative; - display: inline-block; - color: transparent; - white-space: nowrap; } .Title_button_text_outer { - position: absolute; - left: 0; - top: 0; - white-space: nowrap; - background-image: none; - background-clip: border-box; - -webkit-background-clip: border-box; - color: #ffffff; - -webkit-text-fill-color: #ffffff; - z-index: 2; - text-shadow: 0 3px 10px rgba(7, 12, 20, 0.22), 0 1px 3px rgba(7, 12, 20, 0.16); + display: none; } .Title_button_text_inner { - white-space: nowrap; - position: absolute; - left: 0; - top: 0; - -webkit-text-stroke: 0.09em rgba(12, 20, 32, 0.7); - z-index: 1; + display: none; } .Title_backup_background { @@ -97,5 +66,5 @@ .Title_button_disabled { cursor: not-allowed !important; - opacity: 0.45; + opacity: 0.5; } From b515662b015cfdc7502021209108ce6a87dc8f96 Mon Sep 17 00:00:00 2001 From: Mahiru Date: Sat, 28 Mar 2026 11:32:14 +0800 Subject: [PATCH 09/11] restore template (was accidentally deleted) --- .../game/template/Stage/Choose/choose.scss | 54 ++++++ .../game/template/Stage/TextBox/textbox.scss | 172 ++++++++++++++++++ .../public/game/template/UI/Title/title.scss | 106 +++++++++++ .../public/game/template/assets/.gitkeep | 0 .../webgal/public/game/template/template.json | 4 + 5 files changed, 336 insertions(+) create mode 100644 packages/webgal/public/game/template/Stage/Choose/choose.scss create mode 100644 packages/webgal/public/game/template/Stage/TextBox/textbox.scss create mode 100644 packages/webgal/public/game/template/UI/Title/title.scss create mode 100644 packages/webgal/public/game/template/assets/.gitkeep create mode 100644 packages/webgal/public/game/template/template.json diff --git a/packages/webgal/public/game/template/Stage/Choose/choose.scss b/packages/webgal/public/game/template/Stage/Choose/choose.scss new file mode 100644 index 000000000..4040078bc --- /dev/null +++ b/packages/webgal/public/game/template/Stage/Choose/choose.scss @@ -0,0 +1,54 @@ +.Choose_Main { + position: absolute; + width: 100%; + height: 100%; + display: flex; + flex-flow: column; + justify-content: center; + align-items: center; + z-index: 13; + background: rgba(0, 0, 0, 0.05); +} + +.Choose_item { + font-family: "WebgalUI", serif; + cursor: pointer; + min-width: 50%; + padding: 0.25em 1em 0.25em 1em; + font-size: 265%; + color: #8E354A; + text-align: center; + border-radius: 4px; + border: 3px solid rgba(0, 0, 0, 0); + box-shadow: 0 0 25px rgba(0, 0, 0, 0.25); + background: rgba(255, 255, 255, 0.65); + margin: 0.25em 0 0.25em 0; + transition: background-color 0.5s, border 0.5s, font-weight 0.5s, box-shadow 0.5s; + + &:hover { + background: rgba(255, 255, 255, 0.9); + box-shadow: 0 0 25px rgba(0, 0, 0, 0.35); + border: 3px solid #8E354A; + } +} + +.Choose_item_disabled { + font-family: "WebgalUI", serif; + cursor: not-allowed; + min-width: 50%; + padding: 0.25em 1em 0.25em 1em; + font-size: 265%; + color: rgba(142, 53, 74, 0.5); + text-align: center; + border-radius: 4px; + border: 3px solid rgba(0, 0, 0, 0); + box-shadow: 0 0 25px rgba(0, 0, 0, 0.25); + background: rgba(255, 255, 255, 0.5); + margin: 0.25em 0 0.25em 0; + transition: background-color 0.5s, border 0.5s, font-weight 0.5s, box-shadow 0.5s; +} + +.Choose_item_outer { + color: #000; + min-width: 50%; +} diff --git a/packages/webgal/public/game/template/Stage/TextBox/textbox.scss b/packages/webgal/public/game/template/Stage/TextBox/textbox.scss new file mode 100644 index 000000000..95c468e97 --- /dev/null +++ b/packages/webgal/public/game/template/Stage/TextBox/textbox.scss @@ -0,0 +1,172 @@ +.TextBox_main { + z-index: 3; + position: absolute; + min-height: 430px; + max-height: 430px; + background-blend-mode: darken; + border-radius: 0; + bottom: -2px; + right: -2px; + left: 0; + font-weight: bold; + color: white; + padding: calc(1em + 100px) 50px 70px 490px; + box-sizing: border-box; + display: flex; + flex-flow: column; + align-items: flex-start; + letter-spacing: 0.2em; + transition: left 0.33s; +} + +.TextBox_main_miniavatarOff { + left: 0; +} + +.TextBox_Background { + z-index: 2; + background-color: rgba(167, 186, 214, 0.28); + background-image: + linear-gradient(118deg, rgba(147, 165, 207, 0.9) 0%, rgba(182, 198, 222, 0.82) 48%, rgba(228, 239, 233, 0.82) 100%); + mask-image: + linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 0, rgba(0, 0, 0, 0.28) 10%, #000 75%), + linear-gradient(to right, rgba(0, 0, 0, 0.08) 0, rgba(0, 0, 0, 0.28) 10%, #000 42%); + mask-composite: intersect; +} + +@keyframes showSoftly { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +.TextBox_textElement_start { + position: relative; + animation: TextDelayShow 1000ms ease-out forwards; + opacity: 0; +} + +.outer { + position: absolute; + white-space: nowrap; + left: 0; + top: 0; + background-image: linear-gradient(#0B346E 0%, #141423 100%); + background-clip: text; + -webkit-background-clip: text; + color: transparent; + z-index: 2; +} + +.inner { + white-space: nowrap; + position: absolute; + left: 0; + top: 0; + -webkit-text-stroke: 0.1em rgba(255, 255, 255, 1); + z-index: 1; +} + +.zhanwei { + color: transparent; + white-space: nowrap; +} + + +.TextBox_textElement_Settled { + position: relative; + opacity: 1; +} + + +.TextBox_showName { + font-size: 85%; + padding: 0 1em 10px 0; + min-width: 50%; + position: absolute; + left: 490px; + top: 26px; + height: 90px; + line-height: 68px; + border-radius: 0; + z-index: 3; + border: 4px solid rgba(255, 255, 255, 0); +} + +.TextBox_ShowName_Background { + z-index: 2; + background: transparent; + border: 0; + border-bottom: 3px solid transparent; + border-image: linear-gradient( + to right, + rgba(255, 255, 255, 0.2) 0%, + rgba(255, 255, 255, 0.5) 5%, + rgba(255, 255, 255, 0) 100% + ) + 1; + box-shadow: none; + -webkit-backdrop-filter: none; + backdrop-filter: none; + -webkit-mask-image: none; + mask-image: none; +} + +@keyframes TextDelayShow { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +.miniAvatarContainer { + position: absolute; + height: 450px; + width: 450px; + bottom: 0; + left: 0; + overflow: visible; +} + +.miniAvatarImg { + max-height: 100%; + max-width: 100%; + position: absolute; + bottom: 0; + filter: drop-shadow(15px 0 3px rgba(0, 0, 0, 0.5)); +} + +.nameContainer { + position: absolute; + left: 2em; + top: -3.5em; +} + +.outerName { + position: absolute; + left: 0; + top: 0; + color: #0b346e; + z-index: 2; + text-shadow: 0 2px 8px rgba(255, 255, 255, 0.35), 0 2px 6px rgba(0, 0, 0, 0.18); +} + +.innerName { + position: absolute; + left: 0; + top: 0; + -webkit-text-stroke: 0.08em rgba(255, 255, 255, 0.98); + z-index: 1; + text-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); +} + +.text { + overflow: hidden; +} diff --git a/packages/webgal/public/game/template/UI/Title/title.scss b/packages/webgal/public/game/template/UI/Title/title.scss new file mode 100644 index 000000000..3c8975556 --- /dev/null +++ b/packages/webgal/public/game/template/UI/Title/title.scss @@ -0,0 +1,106 @@ +.Title_main { + width: 100%; + height: 100%; + position: absolute; + z-index: 13; +} + +.Title_buttonList { + font-family: "思源宋体", serif; + display: flex; + position: absolute; + left: 0; + min-width: 25%; + height: 100%; + justify-content: center; + align-items: flex-start; + flex-flow: column; + transition: background 0.75s; + padding-left: 120px; +} + +.Title_button { + font-weight: bold; + text-align: left; + flex: 0 1 auto; + cursor: pointer; + padding: 0.7em 0; + margin: 18px 0; + transition: transform 0.22s ease, opacity 0.22s ease; + background: transparent; + backdrop-filter: none; + border: 0; + border-radius: 0; + transform: none; + overflow: visible; + text-shadow: none; + + &:hover { + transform: translate3d(0, -3px, 0) scale(1.02); + padding: 0.7em 0; + filter: drop-shadow(0 10px 16px rgba(6, 10, 18, 0.12)) + drop-shadow(0 5px 8px rgba(6, 10, 18, 0.07)) + drop-shadow(1px 1px 0 rgba(6, 10, 18, 0.05)); + } +} + +.Title_button_text { + position: relative; + z-index: 1; + display: inline-block; + padding: 0.08em 0.55em 0.12em 0.35em; + font-size: 200%; + font-family: WebgalUI, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + letter-spacing: 0.16em; + line-height: 1.2; + transform-origin: left center; + transition: transform 0.22s ease; +} + +.Title_button_text_placeholder { + position: relative; + display: inline-block; + color: transparent; + white-space: nowrap; +} + +.Title_button_text_outer { + display: block; + position: absolute; + left: 0; + top: 0; + white-space: nowrap; + background-image: none; + background-clip: border-box; + -webkit-background-clip: border-box; + color: #ffffff; + -webkit-text-fill-color: #ffffff; + z-index: 2; + text-shadow: + 0 3px 10px rgba(7, 12, 20, 0.22), + 0 1px 3px rgba(7, 12, 20, 0.16); +} + +.Title_button_text_inner { + display: block; + white-space: nowrap; + position: absolute; + left: 0; + top: 0; + color: inherit; + -webkit-text-stroke: 0.09em rgba(12, 20, 32, 0.7); + z-index: 1; +} + +.Title_backup_background { + width: 100%; + height: 100%; + position: absolute; + z-index: 13; + background: linear-gradient(135deg, #fdfbfb 0%, #dcddde 100%); +} + +.Title_button_disabled { + cursor: not-allowed !important; + opacity: 0.45; +} diff --git a/packages/webgal/public/game/template/assets/.gitkeep b/packages/webgal/public/game/template/assets/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/packages/webgal/public/game/template/template.json b/packages/webgal/public/game/template/template.json new file mode 100644 index 000000000..f0ef8309c --- /dev/null +++ b/packages/webgal/public/game/template/template.json @@ -0,0 +1,4 @@ +{ + "name":"WebGAL Refine 2026", + "webgal-version":"4.5.19" +} From c05bd0dadc8a14de65b0472fc7ad0048a46c1d14 Mon Sep 17 00:00:00 2001 From: Mahiru Date: Sat, 28 Mar 2026 22:07:22 +0800 Subject: [PATCH 10/11] adjust color --- .../webgal/public/game/template/Stage/TextBox/textbox.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/webgal/public/game/template/Stage/TextBox/textbox.scss b/packages/webgal/public/game/template/Stage/TextBox/textbox.scss index 95c468e97..a4f83eec8 100644 --- a/packages/webgal/public/game/template/Stage/TextBox/textbox.scss +++ b/packages/webgal/public/game/template/Stage/TextBox/textbox.scss @@ -55,7 +55,7 @@ white-space: nowrap; left: 0; top: 0; - background-image: linear-gradient(#0B346E 0%, #141423 100%); + background-image: linear-gradient(#005CAF 0%, #1D1D1F 100%); background-clip: text; -webkit-background-clip: text; color: transparent; @@ -153,7 +153,7 @@ position: absolute; left: 0; top: 0; - color: #0b346e; + color: #0B346E; z-index: 2; text-shadow: 0 2px 8px rgba(255, 255, 255, 0.35), 0 2px 6px rgba(0, 0, 0, 0.18); } From badc941745e8aa15c0b8f43aa789867c0890061f Mon Sep 17 00:00:00 2001 From: Mahiru Date: Sun, 29 Mar 2026 01:15:56 +0800 Subject: [PATCH 11/11] fix: title style and layout --- .../public/game/template/Stage/TextBox/textbox.scss | 2 +- packages/webgal/public/game/template/UI/Title/title.scss | 5 ----- packages/webgal/src/UI/Title/Title.tsx | 8 +++----- packages/webgal/src/UI/Title/title.module.scss | 3 --- 4 files changed, 4 insertions(+), 14 deletions(-) diff --git a/packages/webgal/public/game/template/Stage/TextBox/textbox.scss b/packages/webgal/public/game/template/Stage/TextBox/textbox.scss index a4f83eec8..1b14fd514 100644 --- a/packages/webgal/public/game/template/Stage/TextBox/textbox.scss +++ b/packages/webgal/public/game/template/Stage/TextBox/textbox.scss @@ -105,7 +105,7 @@ border-image: linear-gradient( to right, rgba(255, 255, 255, 0.2) 0%, - rgba(255, 255, 255, 0.5) 5%, + rgba(255, 255, 255, 0.85) 5%, rgba(255, 255, 255, 0) 100% ) 1; diff --git a/packages/webgal/public/game/template/UI/Title/title.scss b/packages/webgal/public/game/template/UI/Title/title.scss index 3c8975556..ec0dbdcef 100644 --- a/packages/webgal/public/game/template/UI/Title/title.scss +++ b/packages/webgal/public/game/template/UI/Title/title.scss @@ -55,11 +55,6 @@ line-height: 1.2; transform-origin: left center; transition: transform 0.22s ease; -} - -.Title_button_text_placeholder { - position: relative; - display: inline-block; color: transparent; white-space: nowrap; } diff --git a/packages/webgal/src/UI/Title/Title.tsx b/packages/webgal/src/UI/Title/Title.tsx index 7e5403ada..6caf8c922 100644 --- a/packages/webgal/src/UI/Title/Title.tsx +++ b/packages/webgal/src/UI/Title/Title.tsx @@ -32,11 +32,9 @@ export default function Title() { const hasAppreciationItems = appreciationItems.bgm.length > 0 || appreciationItems.cg.length > 0; const renderButtonText = (text: string) => (
- - {text} - {text} - {text} - + {text} + {text} + {text}
); diff --git a/packages/webgal/src/UI/Title/title.module.scss b/packages/webgal/src/UI/Title/title.module.scss index b0522b872..5cdbcaac1 100644 --- a/packages/webgal/src/UI/Title/title.module.scss +++ b/packages/webgal/src/UI/Title/title.module.scss @@ -45,9 +45,6 @@ letter-spacing: 0.2em; } -.Title_button_text_placeholder { -} - .Title_button_text_outer { display: none; }