diff --git a/PROJECT/Yamanobo-Ryou/index.html b/PROJECT/Yamanobo-Ryou/index.html
index 8df302f..03ba71f 100644
--- a/PROJECT/Yamanobo-Ryou/index.html
+++ b/PROJECT/Yamanobo-Ryou/index.html
@@ -10,7 +10,7 @@
山田凉上山
-
+
@@ -42,15 +42,15 @@
-
-
+
@@ -1567,10 +1567,17 @@ 游戏
- -
- 暂停
+
-
+ 暂停
Del
+ -
+
+
+
+
@@ -1658,13 +1665,13 @@ 文库
- 随机选择
+ 随机选择
- 新建
+ 新建
- 按名称排序
+ 按名称排序
@@ -1712,16 +1719,16 @@ 文库
- 导入
+ 导入
若要分享导出的数据,请注意其中是否包含个人信息。「重置文库」可将文库恢复至初始状态,仅有内置文本。重置前建议先备份当前文库。
-
- 导出文库
+ 导出文库
-
- 重置文库...
+ 重置文库...
@@ -1776,13 +1783,13 @@ 设定
- 西文
+ 西文
- 中日韩
+ 中日韩
- 禅境模式
+ 禅境模式
- 对调角色
+ 对调角色
- 重置
+ 重置
@@ -1897,13 +1904,17 @@ 设定
@@ -1949,10 +1960,10 @@ 设定
- 导出
+ 导出
- 清空...
+ 清空...
@@ -1977,10 +1988,10 @@ 帮助
本游戏的教程以 PDF 文档的形式提供。这方便您保存至本地,还可以打印出来备用。
@@ -1988,18 +1999,20 @@ 帮助
@@ -2037,11 +2050,12 @@ 图标
山田凉上山
by SAM TOKI STUDIO
- 版本 v1.01 ()
+
版本 v1.03 ()
始于 2024/10/13
+ 新版本已就绪。请重新打开本网页来应用更新 (不要使用刷新按钮)。
@@ -2099,13 +2113,13 @@ 图标
-
- 选项
+ 选项
-
- 选项
+ 选项
-
- 选项
+ 选项
diff --git a/PROJECT/Yamanobo-Ryou/manifests/manifest.json b/PROJECT/Yamanobo-Ryou/manifests/manifest.json
index e623106..1eb3ce6 100644
--- a/PROJECT/Yamanobo-Ryou/manifests/manifest.json
+++ b/PROJECT/Yamanobo-Ryou/manifests/manifest.json
@@ -1,4 +1,5 @@
{
+ "lang": "zh-CN",
"name": "山田凉上山",
"short_name": "山田凉上山",
"icons": [
diff --git a/PROJECT/Yamanobo-Ryou/script_ServiceWorker.js b/PROJECT/Yamanobo-Ryou/script_ServiceWorker.js
new file mode 100644
index 0000000..df4062c
--- /dev/null
+++ b/PROJECT/Yamanobo-Ryou/script_ServiceWorker.js
@@ -0,0 +1,59 @@
+// For SamToki.github.io/Yamanobo-Ryou
+// Released under GNU GPL v3 open source license.
+// (C) 2024 SAM TOKI STUDIO
+
+// Initialization
+ // Declare variables
+ "use strict";
+ // Unsaved
+ const CacheName = "Yamanobo-Ryou_v1.03";
+
+// Listeners
+ // Service worker (https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/#step-5---add-a-service-worker)
+ self.addEventListener("install", Event => {
+ Event.waitUntil((async() => {
+ const CacheContent = await caches.open(CacheName);
+ CacheContent.addAll([
+ "index.html",
+ "icons/favicon.ico",
+ "../styles/common.css",
+ "../styles/common_Dark.css",
+ "../styles/common_Genshin.css",
+ "../styles/common_HighContrast.css",
+ "styles/style.css",
+ "styles/style_Dark.css",
+ "styles/style_Genshin.css",
+ "styles/style_HighContrast.css",
+ "../scripts/common.js",
+ "../scripts/common_UserDataRepairer.js",
+ "scripts/script.js",
+ "manifests/manifest.json",
+ "../cursors/BTRAhoge.cur",
+ "../cursors/Genshin.cur",
+ "../cursors/GenshinFurina.cur",
+ "../cursors/GenshinNahida.cur",
+ "images/Icon.png",
+ "images/Icon_Large.png",
+ "images/Icon_Maskable.png",
+ "images/Preview.jpg",
+ "images/Background.jpg",
+ "images/YamadaRyou.png",
+ "images/GotouHitori.png",
+ "docs/山田凉上山 快速入门.pdf",
+ "docs/山田凉上山 说明文档.pdf"
+ ]);
+ })());
+ });
+ self.addEventListener("fetch", Event => {
+ Event.respondWith((async() => {
+ const CacheContent = await caches.open(CacheName);
+ const CachedResponse = await CacheContent.match(Event.request);
+ if(CachedResponse) {
+ return CachedResponse;
+ } else {
+ const FetchResponse = await fetch(Event.request);
+ CacheContent.put(Event.request, FetchResponse.clone());
+ return FetchResponse;
+ }
+ })());
+ });
diff --git a/PROJECT/Yamanobo-Ryou/scripts/script.js b/PROJECT/Yamanobo-Ryou/scripts/script.js
index e5cb871..108cba5 100644
--- a/PROJECT/Yamanobo-Ryou/scripts/script.js
+++ b/PROJECT/Yamanobo-Ryou/scripts/script.js
@@ -6,7 +6,7 @@
// Declare variables
"use strict";
// Unsaved
- const CurrentVersion = 1.01;
+ const CurrentVersion = 1.03;
var Game0 = {
Terrain: {
WalkedWidth: 0,
@@ -122,9 +122,10 @@
]
};
- // Load user data
+ // Load
window.onload = Load();
function Load() {
+ // User data
if(localStorage.System != undefined) {
System = JSON.parse(localStorage.getItem("System"));
}
@@ -184,6 +185,8 @@
if(localStorage.YamanoboRyou_Library != undefined) {
Library = JSON.parse(localStorage.getItem("YamanoboRyou_Library"));
}
+
+ // Refresh
ChangeValue("Textbox_LibraryFilter", "");
ChangeValue("Textbox_LibraryImport", "");
ChangeText("Ctnr_GameTerrain", "");
@@ -193,13 +196,91 @@
RefreshGame();
RefreshHighscore();
RefreshLibrary();
+
+ // PWA
+ navigator.serviceWorker.register("script_ServiceWorker.js").then(function(ServiceWorkerRegistration) {
+ // Detect update (https://stackoverflow.com/a/41896649)
+ ServiceWorkerRegistration.addEventListener("updatefound", function() {
+ const ServiceWorkerInstallation = ServiceWorkerRegistration.installing;
+ ServiceWorkerInstallation.addEventListener("statechange", function() {
+ if(ServiceWorkerInstallation.state == "installed" && navigator.serviceWorker.controller != null) {
+ Show("Label_HelpPWAUpdateReady");
+ ShowDialog("System_PWAUpdateReady",
+ "Info",
+ "新版本已就绪。请重新打开本网页来应用更新 (不要使用刷新按钮)。",
+ "", "", "", "确定");
+ }
+ });
+ });
+
+ // Read service worker status (https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html)
+ switch(true) {
+ case ServiceWorkerRegistration.installing != null:
+ ChangeText("Label_SettingsPWAServiceWorkerRegistration", "等待生效");
+ break;
+ case ServiceWorkerRegistration.waiting != null:
+ ChangeText("Label_SettingsPWAServiceWorkerRegistration", "等待更新");
+ Show("Label_HelpPWAUpdateReady");
+ ShowDialog("System_PWAUpdateReady",
+ "Info",
+ "新版本已就绪。请重新打开本网页来应用更新 (不要使用刷新按钮)。",
+ "", "", "", "确定");
+ break;
+ case ServiceWorkerRegistration.active != null:
+ ChangeText("Label_SettingsPWAServiceWorkerRegistration", "已生效");
+ break;
+ default:
+ break;
+ }
+ if(navigator.serviceWorker.controller != null) {
+ ChangeText("Label_SettingsPWAServiceWorkerController", "已生效");
+ } else {
+ ChangeText("Label_SettingsPWAServiceWorkerController", "未生效");
+ }
+ });
+
+ // Ready
Focus("Textbox_Game");
setTimeout(HideToast, 0);
}
// Refresh
+ // Webpage
+ function RefreshWebpage() {
+ ShowDialog("System_RefreshingWebpage",
+ "Info",
+ "正在刷新网页...",
+ "", "", "", "确定");
+ ChangeCursorOverall("wait");
+ window.location.reload();
+ }
+
// System
function RefreshSystem() {
+ // Topbar
+ if(IsMobileLayout() == false) {
+ HideHorizontally("Button_Nav");
+ ChangeInert("DropctrlGroup_Nav", false);
+ } else {
+ Show("Button_Nav");
+ ChangeInert("DropctrlGroup_Nav", true);
+ }
+
+ // Fullscreen
+ if(IsFullscreen() == false) {
+ Show("Topbar");
+ ChangeText("Button_GameToggleFullscreen",
+ "");
+ } else {
+ Hide("Topbar");
+ ChangeText("Button_GameToggleFullscreen",
+ "");
+ }
+
// Settings
// Display
if(window.matchMedia("(prefers-contrast: more)").matches == false) {
@@ -289,6 +370,13 @@
ChangeValue("Combobox_SettingsAnim", System.Display.Anim);
ChangeAnimOverall(System.Display.Anim);
+ // PWA
+ if(window.matchMedia("(display-mode: standalone)").matches == true) {
+ ChangeText("Label_SettingsPWAMode", "是");
+ } else {
+ ChangeText("Label_SettingsPWAMode", "否");
+ }
+
// Dev
ChangeChecked("Checkbox_SettingsTryToOptimizePerformance", System.Dev.TryToOptimizePerformance);
if(System.Dev.TryToOptimizePerformance == true) {
@@ -751,7 +839,7 @@
// Victory
if(Game.Status.IsRunning == true && Game.Stats.Progress >= 100) {
Game.Stats.Progress = 100;
- ChangeDisabled("Cmdbtn_GamePauseOrReset", true);
+ ChangeDisabled("Button_GamePauseOrReset", true);
if(Game.Status.IsPaused == false) {
Game.Status.IsPaused = true;
ChangeValue("Textbox_Game", "");
@@ -773,7 +861,7 @@
// Game over
if(Game.Status.IsRunning == true && Game.Stats.Odometer > 20 && Game.Stats.ChaserOdometer >= Game.Stats.Odometer) {
Game.Stats.ChaserOdometer = Game.Stats.Odometer;
- ChangeDisabled("Cmdbtn_GamePauseOrReset", true);
+ ChangeDisabled("Button_GamePauseOrReset", true);
if(Game.Status.IsPaused == false) {
Game.Status.IsPaused = true;
ChangeValue("Textbox_Game", "");
@@ -798,8 +886,8 @@
// Ctrls
if(Game.Status.IsRunning == false) {
- ChangeDisabled("Cmdbtn_GamePauseOrReset", true);
- ChangeText("Cmdbtn_GamePauseOrReset", "暂停");
+ ChangeDisabled("Button_GamePauseOrReset", true);
+ ChangeText("Button_GamePauseOrReset", "暂停");
ChangeDisabled("Fieldset_Library", false);
ChangeDisabled("Fieldset_LibraryTextProperties", false);
ChangeDisabled("Fieldset_LibraryManagement", false);
@@ -807,11 +895,11 @@
ChangeDisabled("Fieldset_SettingsDifficulty", false);
ChangeDisabled("Combobox_SettingsGameFont", false);
} else {
- ChangeDisabled("Cmdbtn_GamePauseOrReset", false);
+ ChangeDisabled("Button_GamePauseOrReset", false);
if(Game.Status.IsPaused == false) {
- ChangeText("Cmdbtn_GamePauseOrReset", "暂停");
+ ChangeText("Button_GamePauseOrReset", "暂停");
} else {
- ChangeText("Cmdbtn_GamePauseOrReset", "重置");
+ ChangeText("Button_GamePauseOrReset", "重置");
}
ChangeDisabled("Fieldset_Library", true);
ChangeDisabled("Fieldset_LibraryTextProperties", true);
@@ -850,17 +938,17 @@
// Difficulty
ChangeValue("Textbox_SettingsChaserSpeedInitial", Game.Difficulty.ChaserSpeed.Initial);
ChangeValue("Textbox_SettingsChaserSpeedFinal", Game.Difficulty.ChaserSpeed.Final);
- RemoveClass("Cmdbtn_SettingsChaserSpeedWestern", "Active");
- RemoveClass("Cmdbtn_SettingsChaserSpeedCJK", "Active");
- RemoveClass("Cmdbtn_SettingsChaserSpeedZenMode", "Active");
+ RemoveClass("Button_SettingsChaserSpeedWestern", "Active");
+ RemoveClass("Button_SettingsChaserSpeedCJK", "Active");
+ RemoveClass("Button_SettingsChaserSpeedZenMode", "Active");
if(Game.Difficulty.ChaserSpeed.Initial == 180 && Game.Difficulty.ChaserSpeed.Final == 240) {
- AddClass("Cmdbtn_SettingsChaserSpeedWestern", "Active");
+ AddClass("Button_SettingsChaserSpeedWestern", "Active");
}
if(Game.Difficulty.ChaserSpeed.Initial == 40 && Game.Difficulty.ChaserSpeed.Final == 60) {
- AddClass("Cmdbtn_SettingsChaserSpeedCJK", "Active");
+ AddClass("Button_SettingsChaserSpeedCJK", "Active");
}
if(Game.Difficulty.ChaserSpeed.Initial == 10 && Game.Difficulty.ChaserSpeed.Final == 10) {
- AddClass("Cmdbtn_SettingsChaserSpeedZenMode", "Active");
+ AddClass("Button_SettingsChaserSpeedZenMode", "Active");
}
ChangeValue("Textbox_SettingsMaxSeparation", Game.Difficulty.MaxSeparation);
@@ -938,18 +1026,18 @@
" " +
" " + ConvertEmptyName(Library.Text[Looper].Name) + "" +
" " +
- " " +
+ " " +
" " +
" " +
- " " +
+ " " +
" " +
" " +
- " " +
+ " " +
" " +
@@ -960,7 +1048,7 @@
AlertSystemError("The library is empty.");
}
if(Library.Text.length == 2) {
- ChangeDisabled("Cmdbtn_LibraryText1Delete", true);
+ ChangeDisabled("Button_LibraryText1Delete", true);
}
// Selection
@@ -1384,8 +1472,7 @@
Object.keys(Objects).forEach(function(ObjectName) {
localStorage.setItem(ObjectName, JSON.stringify(Objects[ObjectName]));
});
- ChangeCursorOverall("wait");
- window.location.reload();
+ RefreshWebpage();
} else {
ShowDialog("System_JSONStringInvalid",
"Error",
@@ -1420,6 +1507,8 @@
switch(Interaction.DialogEvent) {
case "System_LanguageUnsupported":
case "System_MajorUpdateDetected":
+ case "System_PWAUpdateReady":
+ case "System_RefreshingWebpage":
case "System_JSONStringInvalid":
case "System_UserDataExported":
case "Game_DoNotPaste":
@@ -1441,8 +1530,7 @@
switch(Selector) {
case 2:
localStorage.clear();
- ChangeCursorOverall("wait");
- window.location.reload();
+ RefreshWebpage();
break;
case 3:
break;
@@ -1521,8 +1609,7 @@
switch(Selector) {
case 2:
localStorage.removeItem("YamanoboRyou_Library");
- ChangeCursorOverall("wait");
- window.location.reload();
+ RefreshWebpage();
break;
case 3:
break;
@@ -1563,7 +1650,7 @@
document.activeElement.id == "Textbox_Game") { // Except when typing in game.
switch(Hotkey.key.toUpperCase()) {
case "DELETE":
- Click("Cmdbtn_GamePauseOrReset");
+ Click("Button_GamePauseOrReset");
if(System.Display.HotkeyIndicators == "ShowOnAnyKeyPress" || System.Display.HotkeyIndicators == "AlwaysShow") {
ShowHotkeyIndicators();
}
diff --git a/PROJECT/Yamanobo-Ryou/styles/style.css b/PROJECT/Yamanobo-Ryou/styles/style.css
index 985452e..090a819 100644
--- a/PROJECT/Yamanobo-Ryou/styles/style.css
+++ b/PROJECT/Yamanobo-Ryou/styles/style.css
@@ -119,7 +119,7 @@
/* Speed */
#Ctnr_GameSpeed {
position: absolute; top: 25px; left: 0;
- width: 145px; height: calc(100% - 50px);
+ width: 145px; height: calc(100% - 75px);
}
#CtrlGroup_GameSpeed {
width: 100%; height: 100%;
@@ -272,7 +272,7 @@
/* Altitude */
#Ctnr_GameAltitude {
position: absolute; top: 25px; right: 0;
- width: 145px; height: calc(100% - 50px);
+ width: 145px; height: calc(100% - 75px);
}
#CtrlGroup_GameAltitude {
width: 100%; height: 100%;
@@ -350,14 +350,19 @@
/* Game ctrl */
#Ctnr_GameCtrl {
- position: absolute; bottom: 0; left: calc(50% - 60px);
- width: 120px; height: 35px;
+ position: absolute; bottom: 0; left: 0;
+ width: 100%; height: 35px;
}
#Ctnr_GameCtrl .CtrlGroup {
width: 100%; height: 100%;
}
- #Ctnr_GameCtrl .Ctrl {
- width: 100%;
+ #Ctrl_GamePauseOrReset {
+ position: absolute; top: 0; left: calc(50% - 60px);
+ width: 120px;
+ }
+ #Ctrl_GameToggleFullscreen {
+ position: absolute; top: 0; right: 0;
+ width: 35px;
}
#Ctnr_GameCtrl .HotkeyIndicator {
left: calc(50% - 17.5px);
@@ -407,7 +412,7 @@
max-width: 271px;
overflow: hidden;
}
- #Library .Cmdbtn.ShownAsLabel {
+ #Library .Button.ShownAsLabel {
width: 22px; height: 22px;
justify-content: center;
}
@@ -435,7 +440,7 @@
@media (max-width: 880px) {
/* Area specific */
/* Header */
- #CtrlGroup_Nav {
+ #DropctrlGroup_Nav {
height: 177px;
}
diff --git a/PROJECT/scripts/common.js b/PROJECT/scripts/common.js
index aeb4146..8b8ae2f 100644
--- a/PROJECT/scripts/common.js
+++ b/PROJECT/scripts/common.js
@@ -315,7 +315,7 @@
RemoveClass(ID, "Hidden");
RemoveClass(ID, "HiddenHorizontally");
RemoveClass(ID, "HiddenToCorner");
- RemoveClass(ID, "HiddenOnMobileView");
+ RemoveClass(ID, "HiddenInMobileLayout");
RemoveClass(ID, "Faded");
ChangeInert(ID, false);
Interaction.DoNotHide[Interaction.DoNotHide.length] = ID;
@@ -327,7 +327,7 @@
RemoveClass(ID, "Hidden");
RemoveClass(ID, "HiddenHorizontally");
RemoveClass(ID, "HiddenToCorner");
- RemoveClass(ID, "HiddenOnMobileView");
+ RemoveClass(ID, "HiddenInMobileLayout");
RemoveClass(ID, "Faded");
ChangeInert(ID, false);
}
@@ -337,7 +337,7 @@
Elements[Looper].classList.remove("Hidden");
Elements[Looper].classList.remove("HiddenHorizontally");
Elements[Looper].classList.remove("HiddenToCorner");
- Elements[Looper].classList.remove("HiddenOnMobileView");
+ Elements[Looper].classList.remove("HiddenInMobileLayout");
Elements[Looper].classList.remove("Faded");
Elements[Looper].inert = false;
}
@@ -528,6 +528,13 @@
RefreshSystem();
}
+ // PWA
+ function InstallPWA() {
+ if(Document.PWAInstallation != null) {
+ Document.PWAInstallation.prompt();
+ }
+ }
+
// Dev
function SetTryToOptimizePerformance() {
System.Dev.TryToOptimizePerformance = IsChecked("Checkbox_SettingsTryToOptimizePerformance");
@@ -546,13 +553,6 @@
RefreshSystem();
}
- // Miscellaneous
- function InstallPWA() {
- if(Document.PWAInstallation != null) {
- Document.PWAInstallation.prompt();
- }
- }
-
// Listeners
// On scroll
document.addEventListener("scroll", HighlightActiveSectionInNav);
@@ -592,17 +592,27 @@
Interaction.IsInIMEComposition = false;
})
+ // On resizing window
+ window.addEventListener("resize", function() {
+ if(IsMobileLayout() == false) {
+ HideHorizontally("Button_Nav");
+ ChangeInert("DropctrlGroup_Nav", false);
+ } else {
+ Show("Button_Nav");
+ ChangeInert("DropctrlGroup_Nav", true);
+ }
+ HideDropctrlGroups();
+ });
+
// On toggling fullscreen
document.addEventListener("fullscreenchange", function() {
RefreshSystem();
});
// When PWA installation is available
- window.addEventListener("beforeinstallprompt", function(event) { // This does not seem to work.
- Document.PWAInstallation = event;
- if(IsElementExisting("Cmdbtn_SettingsInstallPWA") == true) {
- ChangeDisabled("Cmdbtn_SettingsInstallPWA", false);
- }
+ window.addEventListener("beforeinstallprompt", function(Event) { // This does not seem to work.
+ Document.PWAInstallation = Event;
+ ChangeDisabled("Button_SettingsInstallPWA", false);
});
// Automations
@@ -647,14 +657,18 @@ Automation.HighlightActiveSectionInNav = setInterval(HighlightActiveSectionInNav
// Hide DropctrlGroups
function HideDropctrlGroups() {
- if(Interaction.DoNotHide.includes("CtrlGroup_Nav") == false) {
- AddClass("CtrlGroup_Nav", "HiddenOnMobileView");
- }
let Elements = document.getElementsByClassName("DropctrlGroup");
for(let Looper = 0; Looper < Elements.length; Looper++) {
if(Interaction.DoNotHide.includes(Elements[Looper].id) == false) {
- Elements[Looper].classList.add("HiddenToCorner");
- Elements[Looper].inert = true;
+ if(Elements[Looper].id != "DropctrlGroup_Nav") {
+ Elements[Looper].classList.add("HiddenToCorner");
+ Elements[Looper].inert = true;
+ } else {
+ Elements[Looper].classList.add("HiddenInMobileLayout");
+ if(IsMobileLayout() == true) {
+ Elements[Looper].inert = true;
+ }
+ }
}
}
}
@@ -762,9 +776,9 @@ Automation.HighlightActiveSectionInNav = setInterval(HighlightActiveSectionInNav
// Text
ChangeText("Label_DialogText", Text);
ChangeText("Label_DialogCheckboxOption", CheckboxOption);
- ChangeText("Cmdbtn_DialogOption1", Option1);
- ChangeText("Cmdbtn_DialogOption2", Option2);
- ChangeText("Cmdbtn_DialogOption3", Option3); // Option 3 is the default option, will be selected when pressing Esc key. Therefore: When there is a single "OK", put it here. When there are multiple options, put "Cancel" here.
+ ChangeText("Button_DialogOption1", Option1);
+ ChangeText("Button_DialogOption2", Option2);
+ ChangeText("Button_DialogOption3", Option3); // Option 3 is the default option, will be selected when pressing Esc key. Therefore: When there is a single "OK", put it here. When there are multiple options, put "Cancel" here.
// Functionality
if(CheckboxOption != "") {
diff --git a/PROJECT/styles/common.css b/PROJECT/styles/common.css
index 805a3d7..b98b557 100644
--- a/PROJECT/styles/common.css
+++ b/PROJECT/styles/common.css
@@ -6,7 +6,7 @@
/* About abbreviations */
/* Do not abuse abbreviations. Use only when a word is longer than 8 letters. */
/* For example, abbreviate "Animation" into "Anim", but do not abbreviate "Language" into "Lang". */
- /* Exceptions: "Ctrl", "Cmd", "Avg", etc. */
+ /* Exceptions: "Ctrl", "Avg", etc. */
/* About simplicity */
/* Make rule names as simple as possible. Avoid over-specific names like "#1 #2 .3" unless needed. */
/* Avoid using ":is" as it is a little confusing. */
@@ -96,7 +96,7 @@
}
/* Group frameworks */
- ul.ItemGroup, ul.CtrlGroup {
+ ul.ItemGroup, ul.CtrlGroup, ul.DropctrlGroup {
list-style-type: none;
}
.ItemGroup {
@@ -150,7 +150,7 @@
label {
width: 100%; height: 100%; border-radius: 5px;
color: #000000; text-wrap: nowrap;
- display: flex; align-items: center;
+ display: flex; align-items: center; overflow: hidden;
}
label > * {
margin: 0 0 0 5px;
@@ -250,23 +250,23 @@
}
/* Interactive ctrls */
- .Linkbtn, .Cmdbtn, .Dropbtn, .Combobox {
+ .Button, .Combobox {
width: 100%; height: 100%; border: 1px solid #00000040; border-radius: 5px; padding: 5px 9px;
background-color: #FFFFFF;
- color: #000000; text-wrap: nowrap;
+ color: #000000; text-align: center; text-wrap: nowrap;
display: flex; justify-content: center; align-items: center; overflow: hidden;
}
- .Linkbtn {
- text-align: center;
+ .Combobox {
+ text-align: unset;
}
- .Cmdbtn.Shaped, .Cmdbtn.ShownAsLabel {
+ .Button.Shaped, .Button.ShownAsLabel {
border: none; padding: 0;
background-color: transparent !important;
}
- .Cmdbtn.Shaped .Shape {
+ .Button.Shaped .Shape {
position: absolute; top: 0; left: 0;
}
- .Cmdbtn.ShownAsLabel {
+ .Button.ShownAsLabel {
justify-content: start;
}
.DropctrlGroup {
@@ -278,12 +278,9 @@
.Dropctrl {
width: 100%; height: 35px;
}
- .Dropbtn {
+ .Dropctrl .Button {
border: none !important;
}
- .Dropbtn:not(:hover):not(:active) {
- background-color: transparent !important;
- }
.Combobox {
padding: 5px;
}
@@ -330,7 +327,7 @@
position: absolute; bottom: -9px; left: calc(50% - 12.5px); z-index: 1;
width: 25px; height: 18px; border-radius: 5px;
background-color: #FFFFFF; box-shadow: 0 0 4px 2px #00000040;
- font-size: 14px; text-align: center; text-wrap: nowrap;
+ font-size: 14px; text-align: center;
display: flex; justify-content: center; align-items: center; overflow: hidden;
pointer-events: none;
}
@@ -349,7 +346,7 @@
position: fixed; top: calc(50vh + 5px); left: 0; z-index: 102;
width: 100%; height: 50px;
background-color: #F0D0FFE0; backdrop-filter: blur(5px); box-shadow: 0 0 4px 2px #00000040;
- color: #000000; font-size: 2.00em; text-align: center; text-wrap: nowrap;
+ color: #000000; font-size: 2.00em; text-align: center;
display: flex; justify-content: center; align-items: center; overflow: hidden;
pointer-events: none;
}
@@ -468,7 +465,7 @@
.Active, .IAmHere {
background-color: #D0FFD0;
}
- .Cmdbtn.Shaped.Active .Shape {
+ .Button.Shaped.Active .Shape {
fill: #D0FFD0;
}
.Transparent {
@@ -579,19 +576,19 @@
/* Interactions */
/* Hover */
- a:hover, label:hover, .Linkbtn:hover, .Cmdbtn:hover, .Dropbtn:hover /* .Combobox:hover, .Textbox:hover */ {
+ a:hover, label:hover, .Button:hover /* .Combobox:hover, .Textbox:hover */ {
background-color: #F0D0FF;
}
.Active:hover {
background-color: #B8E8B8;
}
- .Cmdbtn.Shaped:hover .Shape {
+ .Button.Shaped:hover .Shape {
fill: #F0D0FF;
}
- .Cmdbtn.Shaped.Active:hover .Shape {
+ .Button.Shaped.Active:hover .Shape {
fill: #B8E8B8;
}
- .Cmdbtn.ShownAsLabel:hover {
+ .Button.ShownAsLabel:hover {
color: #8040A0;
}
.Textbox.ShownAsLabel:hover, .Textbox.ShownAsLabel:focus-visible {
@@ -599,16 +596,16 @@
}
/* Click */
- a:active, label:active, .Linkbtn:active, .Cmdbtn:active, .Dropbtn:active,
+ a:active, label:active, .Button:active,
.Combobox:active, .Textbox:active, .Textbox.ShownAsLabel:active,
.Active:active {
background-color: #8040A0;
color: #FFFFFF;
}
- .Cmdbtn.Shaped:active .Shape, .Cmdbtn.Shaped.Active:active .Shape {
+ .Button.Shaped:active .Shape, .Button.Shaped.Active:active .Shape {
fill: #8040A0;
}
- .Cmdbtn.ShownAsLabel:active {
+ .Button.ShownAsLabel:active {
color: #D090F0;
}
/* *:active {
@@ -619,13 +616,13 @@
*:focus-visible {
outline: none; box-shadow: 0 0 0 2px #8040A0 !important;
}
- .Cmdbtn.Shaped:focus-visible {
+ .Button.Shaped:focus-visible {
box-shadow: none !important;
}
- .Cmdbtn.Shaped:focus-visible .Shape {
+ .Button.Shaped:focus-visible .Shape {
stroke: #8040A0 !important; stroke-width: 2px !important;
}
- .Dropbtn:focus-visible {
+ .Dropctrl .Button:focus-visible {
box-shadow: 0 0 0 2px inset #8040A0 !important;
}
@@ -656,6 +653,12 @@
position: relative;
width: 100%; height: 100%;
}
+ #Topbar .Button {
+ border: none;
+ }
+ #Topbar .Button:not(:hover):not(:active) {
+ background-color: transparent;
+ }
#Ctrl_Title {
position: absolute; top: 0; left: 0;
width: 35px;
@@ -667,21 +670,10 @@
#Ctrl_Nav {
position: absolute; top: 0; left: unset;
}
- #Topbar .Cmdbtn, #Topbar .Linkbtn {
- border: none;
- }
- #Topbar .Cmdbtn:not(:hover):not(:active), #Topbar .Linkbtn:not(:hover):not(:active) {
- background-color: transparent;
- }
- #Cmdbtn_Nav { /* .HiddenHorizontally */
- width: 0; border: none; padding: 0; margin: 0;
- opacity: 0;
- overflow: hidden;
- pointer-events: none;
- }
- #CtrlGroup_Nav {
- position: absolute; top: 0; left: 0;
- justify-content: start;
+ #DropctrlGroup_Nav {
+ top: 0; left: 0;
+ width: 100%; border: none;
+ background-color: transparent; box-shadow: none;
}
.Nav {
width: 120px;
@@ -733,7 +725,7 @@
}
h4 {
padding: 5px 0;
- font-size: 1.25em; text-align: start;
+ font-size: 1.25em; font-weight: normal; text-align: start;
}
/* Footer */
@@ -778,18 +770,11 @@
left: 0 !important;
width: 35px !important;
}
- #Cmdbtn_Nav {
- width: 35px; height: 35px; padding: 5px;
- opacity: unset;
- pointer-events: unset;
- }
- #CtrlGroup_Nav {
- z-index: 2;
- width: 122px; border: 1px solid #00000040; border-radius: 5px;
+ #DropctrlGroup_Nav {
+ width: 122px; border: 1px solid #00000040;
background-color: #FFFFFF; box-shadow: 0 0 4px 2px #00000040;
- overflow: hidden;
}
- .HiddenOnMobileView { /* .HiddenToCorner */
+ .HiddenInMobileLayout { /* .HiddenToCorner */
width: 0 !important; height: 0 !important; border: none !important; padding: 0 !important; margin: 0 !important;
opacity: 0 !important;
overflow: hidden !important;
diff --git a/PROJECT/styles/common_Dark.css b/PROJECT/styles/common_Dark.css
index 9c52d8c..876cc22 100644
--- a/PROJECT/styles/common_Dark.css
+++ b/PROJECT/styles/common_Dark.css
@@ -72,7 +72,7 @@
}
/* Interactive ctrls */
- .Linkbtn, .Cmdbtn, .Dropbtn, .Combobox {
+ .Button, .Combobox {
border: 1px solid #FFFFFF40;
background-color: #303030;
color: #FFFFFF;
@@ -136,7 +136,7 @@
.Active, .IAmHere {
background-color: #004000;
}
- .Cmdbtn.Shaped.Active .Shape {
+ .Button.Shaped.Active .Shape {
fill: #004000;
}
.Shadow {
@@ -153,19 +153,19 @@
/* Interactions */
/* Hover */
- a:hover, label:hover, .Linkbtn:hover, .Cmdbtn:hover, .Dropbtn:hover /* .Combobox:hover, .Textbox:hover */ {
+ a:hover, label:hover, .Button:hover /* .Combobox:hover, .Textbox:hover */ {
background-color: #583868;
}
.Active:hover {
background-color: #185818;
}
- .Cmdbtn.Shaped:hover .Shape {
+ .Button.Shaped:hover .Shape {
fill: #583868;
}
- .Cmdbtn.Shaped.Active:hover .Shape {
+ .Button.Shaped.Active:hover .Shape {
fill: #185818;
}
- .Cmdbtn.ShownAsLabel:hover {
+ .Button.ShownAsLabel:hover {
color: #D090F0;
}
.Textbox.ShownAsLabel:hover, .Textbox.ShownAsLabel:focus-visible {
@@ -173,16 +173,16 @@
}
/* Click */
- a:active, label:active, .Linkbtn:active, .Cmdbtn:active, .Dropbtn:active,
+ a:active, label:active, .Button:active,
.Combobox:active, .Textbox:active, .Textbox.ShownAsLabel:active,
.Active:active {
background-color: #D090F0;
color: #000000;
}
- .Cmdbtn.Shaped:active .Shape, .Cmdbtn.Shaped.Active:active .Shape {
+ .Button.Shaped:active .Shape, .Button.Shaped.Active:active .Shape {
fill: #D090F0;
}
- .Cmdbtn.ShownAsLabel:active {
+ .Button.ShownAsLabel:active {
color: #8040A0;
}
@@ -190,10 +190,10 @@
*:focus-visible {
box-shadow: 0 0 0 2px #D090F0 !important;
}
- .Cmdbtn.Shaped:focus-visible .Shape {
+ .Button.Shaped:focus-visible .Shape {
stroke: #D090F0 !important;
}
- .Dropbtn:focus-visible {
+ .Dropctrl .Button:focus-visible {
box-shadow: 0 0 0 2px inset #D090F0 !important;
}
@@ -229,7 +229,7 @@
@media (max-width: 880px) {
/* Area specific */
/* Header */
- #CtrlGroup_Nav {
+ #DropctrlGroup_Nav {
border: 1px solid #FFFFFF40;
background-color: #303030; box-shadow: 0 0 4px 2px #00000040;
}
diff --git a/PROJECT/styles/common_Genshin.css b/PROJECT/styles/common_Genshin.css
index d532dc1..d21ce1e 100644
--- a/PROJECT/styles/common_Genshin.css
+++ b/PROJECT/styles/common_Genshin.css
@@ -72,12 +72,12 @@
}
/* Interactive ctrls */
- .Linkbtn, .Cmdbtn, .Dropbtn, .Combobox {
+ .Button, .Combobox {
border: 1px solid #FFFFFF40; border-radius: 20px; padding: 5px 10px;
background-color: #EEE4D9;
color: #485267;
}
- .Cmdbtn.ShownAsLabel {
+ .Button.ShownAsLabel {
border-radius: 5px;
color: #EEE4D9;
}
@@ -137,7 +137,7 @@
background-color: #C8EC86;
color: #485267;
}
- .Cmdbtn.Shaped.Active .Shape {
+ .Button.Shaped.Active .Shape {
fill: #C8EC86;
}
.IAmHere {
@@ -162,28 +162,28 @@
/* Interactions */
/* Hover */
- a:hover, label:hover, .Linkbtn:hover, .Cmdbtn:hover, .Dropbtn:hover /* .Combobox:hover, .Textbox:hover */ {
+ a:hover, label:hover, .Button:hover /* .Combobox:hover, .Textbox:hover */ {
background-color: #EEE4D9; box-shadow: 0 0 0 3px #DEB76C;
color: #485267;
}
.Active:hover {
background-color: #C8EC86;
}
- .Cmdbtn.Shaped:hover {
+ .Button.Shaped:hover {
box-shadow: none;
}
- .Cmdbtn.Shaped:hover .Shape {
+ .Button.Shaped:hover .Shape {
fill: #EEE4D9;
stroke: #DEB76C; stroke-width: 3px;
}
- .Cmdbtn.Shaped.Active:hover .Shape {
+ .Button.Shaped.Active:hover .Shape {
fill: #C8EC86;
}
- .Cmdbtn.ShownAsLabel:hover {
+ .Button.ShownAsLabel:hover {
box-shadow: none;
color: #DEB76C;
}
- .Dropbtn:hover, .ScrollableList label:hover {
+ .Dropctrl .Button:hover, .ScrollableList label:hover {
box-shadow: 0 0 0 3px inset #DEB76C;
}
.Textbox.ShownAsLabel:hover, .Textbox.ShownAsLabel:focus-visible {
@@ -192,16 +192,16 @@
}
/* Click */
- a:active, label:active, .Linkbtn:active, .Cmdbtn:active, .Dropbtn:active,
+ a:active, label:active, .Button:active,
.Combobox:active, .Textbox:active, .Textbox.ShownAsLabel:active,
.Active:active {
background-color: #D0C6BD;
color: #EEE4D9;
}
- .Cmdbtn.Shaped:active .Shape, .Cmdbtn.Shaped.Active:active .Shape {
+ .Button.Shaped:active .Shape, .Button.Shaped.Active:active .Shape {
fill: #D0C6BD;
}
- .Cmdbtn.ShownAsLabel:active {
+ .Button.ShownAsLabel:active {
color: #CC972E;
}
@@ -209,10 +209,10 @@
*:focus-visible {
box-shadow: 0 0 0 3px #DEB76C !important;
}
- .Cmdbtn.Shaped:focus-visible .Shape {
+ .Button.Shaped:focus-visible .Shape {
stroke: #DEB76C !important;
}
- .Dropbtn:focus-visible {
+ .Dropctrl .Button:focus-visible {
box-shadow: 0 0 0 3px inset #DEB76C !important;
}
@@ -228,10 +228,10 @@
background-color: #485267E0; box-shadow: 0 0 4px 2px #00000040;
color: #EEE4D9;
}
- #Topbar .Cmdbtn, #Topbar .Linkbtn {
+ #Topbar .Button, #DropctrlGroup_Nav {
border-radius: 5px;
}
- #Topbar .Cmdbtn:not(:hover):not(:active), #Topbar .Linkbtn:not(:hover):not(:active) {
+ #Topbar .Button:not(:hover):not(:active) {
color: #EEE4D9;
}
#Ctrl_NavUnderline {
@@ -254,12 +254,12 @@
@media (max-width: 880px) {
/* Area specific */
/* Header */
- #CtrlGroup_Nav {
+ #DropctrlGroup_Nav {
border: 1px solid #FFFFFF40;
- background-color: #485267; box-shadow: 0 0 4px 2px #00000040;
+ background-color: #EEE4D9; box-shadow: 0 0 4px 2px #00000040;
}
- #CtrlGroup_Nav .Linkbtn:hover {
- box-shadow: 0 0 0 3px inset #DEB76C;
+ #DropctrlGroup_Nav .Button:not(:hover):not(:active) {
+ color: #485267;
}
}
diff --git a/PROJECT/styles/common_HighContrast.css b/PROJECT/styles/common_HighContrast.css
index da1ea8f..686fd2f 100644
--- a/PROJECT/styles/common_HighContrast.css
+++ b/PROJECT/styles/common_HighContrast.css
@@ -72,7 +72,7 @@
}
/* Interactive ctrls */
- .Linkbtn, .Cmdbtn, .Dropbtn, .Combobox {
+ .Button, .Combobox {
border: 1px solid #FFFFFF;
background-color: #202020;
color: #FFFFFF;
@@ -129,7 +129,7 @@
.Active, .IAmHere {
background-color: #006000;
}
- .Cmdbtn.Shaped.Active .Shape {
+ .Button.Shaped.Active .Shape {
fill: #006000;
}
.Shadow {
@@ -146,20 +146,20 @@
/* Interactions */
/* Hover */
- a:hover, label:hover, .Linkbtn:hover, .Cmdbtn:hover, .Dropbtn:hover /* .Combobox:hover, .Textbox:hover */ {
+ a:hover, label:hover, .Button:hover /* .Combobox:hover, .Textbox:hover */ {
background-color: #00C0FF;
color: #000000;
}
.Active:hover {
background-color: #00D800;
}
- .Cmdbtn.Shaped:hover .Shape {
+ .Button.Shaped:hover .Shape {
fill: #00C0FF;
}
- .Cmdbtn.Shaped.Active:hover .Shape {
+ .Button.Shaped.Active:hover .Shape {
fill: #00D800;
}
- .Cmdbtn.ShownAsLabel:hover {
+ .Button.ShownAsLabel:hover {
color: #00C0FF;
}
.Textbox.ShownAsLabel:hover, .Textbox.ShownAsLabel:focus-visible {
@@ -167,16 +167,16 @@
}
/* Click */
- a:active, label:active, .Linkbtn:active, .Cmdbtn:active, .Dropbtn:active,
+ a:active, label:active, .Button:active,
.Combobox:active, .Textbox:active, .Textbox.ShownAsLabel:active,
.Active:active {
background-color: #00FFFF;
color: #000000;
}
- .Cmdbtn.Shaped:active .Shape, .Cmdbtn.Shaped.Active:active .Shape {
+ .Button.Shaped:active .Shape, .Button.Shaped.Active:active .Shape {
fill: #00FFFF;
}
- .Cmdbtn.ShownAsLabel:active {
+ .Button.ShownAsLabel:active {
color: #00FFFF;
}
@@ -184,10 +184,10 @@
*:focus-visible {
box-shadow: 0 0 0 2px #00FFFF !important;
}
- .Cmdbtn.Shaped:focus-visible .Shape {
+ .Button.Shaped:focus-visible .Shape {
stroke: #00FFFF !important;
}
- .Dropbtn:focus-visible {
+ .Dropctrl .Button:focus-visible {
box-shadow: 0 0 0 2px inset #00FFFF !important;
}
@@ -223,7 +223,7 @@
@media (max-width: 880px) {
/* Area specific */
/* Header */
- #CtrlGroup_Nav {
+ #DropctrlGroup_Nav {
border: 1px solid #FFFFFF;
background-color: #202020; box-shadow: none;
}