From 636ac886ae354d023c895ec1e41ae0ce30aefeeb Mon Sep 17 00:00:00 2001
From: rynan4818 <14249877+rynan4818@users.noreply.github.com>
Date: Sat, 26 Dec 2020 22:51:27 +0900
Subject: [PATCH] =?UTF-8?q?miss,energy,mod=E8=A1=A8=E7=A4=BA=E3=81=AE?=
=?UTF-8?q?=E8=BF=BD=E5=8A=A0=20no-performance,bsr=20=E3=81=AE=E9=9D=9E?=
=?UTF-8?q?=E8=A1=A8=E7=A4=BA=E6=96=B9=E6=B3=95=E3=81=AE=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
README.md | 32 +++++---
index.html | 14 ++++
index_rtl.html | 14 ++++
js/events.js | 5 ++
js/options.js | 21 +----
js/ui.js | 146 ++++++++++++++++++++++-------------
modifiers/bsr.css | 3 +
modifiers/energy.css | 4 +
modifiers/miss.css | 3 +
modifiers/mod.css | 3 +
modifiers/no-performance.css | 3 +
modifiers/rtl.css | 10 ++-
modifiers/top.css | 5 +-
rtl2.css | 4 +
style.css | 38 ++++++++-
15 files changed, 220 insertions(+), 85 deletions(-)
create mode 100644 modifiers/bsr.css
create mode 100644 modifiers/energy.css
create mode 100644 modifiers/miss.css
create mode 100644 modifiers/mod.css
create mode 100644 modifiers/no-performance.css
diff --git a/README.md b/README.md
index 3366b37..652a2b2 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
# Beat Saber Overlay 改良版
-これは、Reselim氏が製作した[Beat Saber Overlay](https://github.com/Reselim/beat-saber-overlay)に、bsr表示(bsr)とスコア表示無し(no-performance)等のオプションを追加し、機能改善した物です。
+これは、Reselim氏が製作した[Beat Saber Overlay](https://github.com/Reselim/beat-saber-overlay)に各種表示オプションを追加し、機能改善した物です。
Beat SaberをOBS等で配信や録画する時に譜面情報をオーバーレイ表示します。
@@ -10,10 +10,9 @@ Beat SaberをOBS等で配信や録画する時に譜面情報をオーバーレ
1. [Beat Saber HTTP Status](https://github.com/opl-/beatsaber-http-status) か、拙作の[Beat Saber HTTP Status +Database](https://github.com/rynan4818/beatsaber-http-status-db)をダウンロードしてインストールします。
-- **BeatSaber 1.12.1～1.13.0を使用されている方は、12/6現在 HTTP Statusの正式配布がまだされてていません。[こちらのβ版を使用して下さい](https://github.com/opl-/beatsaber-http-status/issues/55#issuecomment-722054828) また、プレイ動画カットツール用のHTTP Status +Databaseは[こちらで1.12.1～1.13.0対応版を配布しています](https://github.com/rynan4818/beatsaber-http-status-db/issues/1)**
-
-- HTTP StatusはRelease v1.11.1以降のバージョンを使用して下さい。(6/28現在 ModAssistantで対応済み)
-- [bs-movie-cut(プレイ動画カットツール）](https://github.com/rynan4818/bs-movie-cut)を使用する場合は、HTTP Status +DatabaseはRelease v2020/06/08以降を使用して下さい。
+- **BeatSaber 1.12.1～1.13.0を使用されている方は、'20/12/26現在 HTTP Statusの正式配布がまだされてていません。**
+ * **HTTP Statusは[こちらのβ版を使用して下さい](https://github.com/opl-/beatsaber-http-status/issues/55#issuecomment-722054828)**
+ * **プレイ動画カットツール用のHTTP Status +Databaseは[こちらで1.12.1～1.13.0対応版を配布しています](https://github.com/rynan4818/beatsaber-http-status-db/releases)**
2. [リリースページ](https://github.com/rynan4818/beat-saber-overlay/releases)から最新のリリースをダウンロードします。
@@ -52,15 +51,24 @@ file:///C:/TOOL/beat-saber-overlay/index.html?modifiers=top,bsr
- `test`
* テストのために背景を黒にします。
- `bsr`
- * bsrの検索・表示をします。（今回追加）
+ * bsrの検索・表示をします。
+- `miss`
+ * ミス数を表示します。
+- `mod`
+ * Modifierを表示します。(DA,FS等)
+- `energy`
+ * ライフ値バーを表示します
- `no-performance`
- * スコア表示を消します。 （今回追加）
+ * スコア表示を消します。
- `no-hidden`
- * 終了時に表示を消しません。（今回追加）
+ * 終了時に表示を消しません。
### `ip`または`port`
別のマシンのBeat Saber HTTP Statusに接続する場合に設定します。
+```
+file:///C:/TOOL/beat-saber-overlay/index.html?ip=192.168.1.10&port=6557&modifiers=top,bsr
+```
## `rtl`の表示修正
@@ -121,6 +129,8 @@ file:///C:/TOOL/beat-saber-overlay/simple.html?modifiers=bsr
| pre_bsr | 一つ前にプレイした譜面のbsr情報を表示します。 |
| pre_bsr_text | pre_bsrの項目名を起動時に保持し、NJS表示が出来ない場合は表示を消します。 |
| energy | ライフ値(xxx%)に書き換えます。 |
+| energy_bar | ライフ値に応じたwidthスタイル値(xxx%)を設定ます。 |
+| energy_group | No Fail時にvisibilityスタイルをhiddenにします。 |
オプションで以下の関数が存在すれば、呼び出されます。関数のスクリプトは最初に読み込んで下さい。
@@ -129,7 +139,8 @@ file:///C:/TOOL/beat-saber-overlay/simple.html?modifiers=bsr
| op_performance(data,now_energy) | performanceが更新されるタイミングで呼び出されます |
| op_timer_update(time, delta, progress, percentage) | 曲時間表示が更新されるタイミングで呼び出されます |
| op_timer_update_sec(time, delta, progress, percentage) | 曲時間表示(秒毎)が更新されるタイミングで呼び出されます |
-| op_beatmap(data) | 譜面情報が更新されるタイミングで呼び出されます |
+| op_beatmap(data,now_map,pre_map) | 譜面情報が更新されるタイミングで呼び出されます |
+| op_beatsaver_res(now_map) | BeatSaverの譜面情報問い合わせのレスポンスがあった場合に呼び出されます |
| op_hide() | オーバーレイを隠すタイミングで呼び出されます |
| op_show() | オーバーレイを表示するタイミングで呼び出されます |
| op_hello(data) | HTTP Status の hello イベント時に呼び出されます |
@@ -143,6 +154,7 @@ file:///C:/TOOL/beat-saber-overlay/simple.html?modifiers=bsr
| op_finished(data) | HTTP Status の finished イベント時に呼び出されます |
| op_failed(data) | HTTP Status の failed イベント時に呼び出されます |
| op_scoreChanged(data) | HTTP Status の scoreChanged イベント時に呼び出されます |
+| op_energyChanged(data) | HTTP Status の energyChanged イベント時に呼び出されます(本家HTTPStatusは未実装) |
| op_pause(data) | HTTP Status の pause イベント時に呼び出されます |
| op_resume(data) | HTTP Status の resume イベント時に呼び出されます |
| op_menu(data) | HTTP Status の menu イベント時に呼び出されます |
@@ -154,6 +166,8 @@ file:///C:/TOOL/beat-saber-overlay/simple.html?modifiers=bsr
| delta | 曲の経過時間(msec) |
| progress | 曲の経過時間(sec) |
| percentage | 曲の経過割合 |
+| now_map | 現在の譜面のBeatSaver API 問い合わせ結果のJSONオブジェクト。但し、op_beatmapの時は前回と同じ譜面のプレイ時のみ格納、それ以外はnull |
+| pre_map | 前回の譜面のBeatSaver API 問い合わせ結果のJSONオブジェクト。 |
## bsrの表示位置や文字サイズを変更したい場合
表示位置を変更したい場合は`index.html`の以下の部分を修正して下さい。
diff --git a/index.html b/index.html
index 4fc68fb..d3f9f07 100644
--- a/index.html
+++ b/index.html
@@ -15,12 +15,23 @@
0%
+
+ 0
+ Miss
+
+
0
Combo
0
+
+
@@ -60,6 +71,9 @@
0 NJS
+
+ MOD
+
diff --git a/index_rtl.html b/index_rtl.html
index 106ceb4..5a68640 100644
--- a/index_rtl.html
+++ b/index_rtl.html
@@ -16,12 +16,23 @@
E
+
+ Miss
+ 0
+
+
Combo
0
0
+
+
@@ -40,6 +51,9 @@
bsr 00000
+
+ MOD
+
0 NJS
diff --git a/js/events.js b/js/events.js
index fa151ce..c3bedbd 100644
--- a/js/events.js
+++ b/js/events.js
@@ -62,6 +62,11 @@ const events = {
if (typeof op_scoreChanged !== "undefined") op_scoreChanged(data);
},
+ energyChanged(data) {
+ ui.performance(data);
+ if (typeof op_energyChanged !== "undefined") op_energyChanged(data);
+ },
+
pause(data) {
ui.timer.pause(data.status.beatmap.paused + (Date.now() - data.time));
if (typeof op_pause !== "undefined") op_pause(data);
diff --git a/js/options.js b/js/options.js
index fe177d3..bad7c81 100644
--- a/js/options.js
+++ b/js/options.js
@@ -5,7 +5,7 @@ var pre_bsr_data = null;
const check_id = ["overlay","rank","percentage","combo","score","progress","performance",
"image","title","subtitle","artist","difficulty","bpm","njs","bsr","bsr_text",
"mapper","mapper_header","mapper_footer","song_time","song_length","mod","miss",
- "pre_bsr","pre_bsr_text","njs_text","energy"]
+ "pre_bsr","pre_bsr_text","njs_text","energy","energy_bar","energy_group"]
var html_id = {};
for (var i = 0, len = check_id.length; i < len; ++i) {
if (document.getElementById(check_id[i]) === null) {
@@ -24,26 +24,13 @@ if (html_id["njs_text"]) var njs_text_org = document.getElementById("njs_te
const handlers = {
modifiers(string) {
string.split(",").forEach((modifier) => {
- if (modifier === "bsr") {
- bsr_display = true;
- return;
- }
if (modifier === "no-hidden") {
disp_hidden = false;
+ if (html_id["overlay"]) document.getElementById("overlay").classList.remove("hidden");
return;
}
- if (modifier === "no-performance") {
- if (html_id["performance"]) {
- var dom_obj = document.getElementById("performance");
- var dom_obj_parent = dom_obj.parentNode;
- dom_obj_parent.removeChild(dom_obj);
- }
- html_id["rank"] = false;
- html_id["percentage"] = false;
- html_id["score"] = false;
- html_id["combo"] = false;
- html_id["miss"] = false;
- return;
+ if (modifier === "bsr") {
+ bsr_display = true;
}
var link = document.createElement("link");
diff --git a/js/ui.js b/js/ui.js
index dabe8ea..75a5d8c 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -1,18 +1,27 @@
const ui = (() => {
if (html_id["overlay"]) var main = document.getElementById("overlay");
- var now_bsr = null;
+ var now_map = null;
+ var pre_map = null;
+ var pre_songHash = null;
var now_energy = 50;
var mod_instaFail = false;
var mod_batteryEnergy = false;
var obstacle_time = 0;
+ var failed = false;
const performance = (() => {
+ const cut_energy = 1;
+ const misscut_energy = -10;
+ const miss_energy = -15;
+ const drain_energy = -0.13; //per msec
+ const battery_unit = 25;
if (html_id["rank"]) var rank = document.getElementById("rank");
if (html_id["percentage"]) var percentage = document.getElementById("percentage");
if (html_id["score"]) var score = document.getElementById("score");
if (html_id["combo"]) var combo = document.getElementById("combo");
if (html_id["miss"]) var miss = document.getElementById("miss");
if (html_id["energy"]) var energy = document.getElementById("energy");
+ if (html_id["energy_bar"]) var energy_bar = document.getElementById("energy_bar");
function format(number) {
return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
@@ -28,53 +37,64 @@ const ui = (() => {
percentage.innerText = (performance.currentMaxScore > 0 ? (Math.floor((performance.score / performance.currentMaxScore) * 1000) / 10) : 0) + "%";
}
if (now_energy !== null) {
- if (data.event === "obstacleEnter") {
- obstacle_time = data.time;
- }
- if (mod_instaFail === false && mod_batteryEnergy === false) {
- switch(data.event) {
- case "noteCut":
- now_energy += 1;
- break;
- case "noteMissed":
- if (data.noteCut.saberType == null) {
- now_energy -= 15;
- } else {
- now_energy -= 10;
- }
- break;
- case "bombCut":
- now_energy -= 15;
- break;
- case "obstacleExit":
- var delta_t = data.time - obstacle_time;
- now_energy -= delta_t * 0.13;
- break;
+ if (typeof performance.energy !== "undefined") {
+ if (data.event === "energyChanged") {
+ now_energy = performance.energy * 100;
}
} else {
- switch(data.event) {
- case "noteMissed":
- case "bombCut":
- if (mod_instaFail === true) {
- now_energy = 0;
- } else {
- now_energy -= 25;
- }
- break;
- case "obstacleExit":
- if (mod_instaFail === true) {
- now_energy = 0;
- } else {
+ if (data.event === "obstacleEnter") {
+ obstacle_time = data.time;
+ }
+ if (mod_instaFail === false && mod_batteryEnergy === false) {
+ switch(data.event) {
+ case "noteCut":
+ now_energy += cut_energy;
+ break;
+ case "noteMissed":
+ if (data.noteCut.saberType == null) {
+ now_energy += miss_energy;
+ } else {
+ now_energy += misscut_energy;
+ }
+ break;
+ case "bombCut":
+ now_energy += miss_energy;
+ break;
+ case "obstacleExit":
var delta_t = data.time - obstacle_time;
- now_energy -= parseInt(delta_t * 0.13) * 25;
- }
- break;
+ now_energy += delta_t * drain_energy;
+ break;
+ }
+ } else {
+ switch(data.event) {
+ case "noteMissed":
+ case "bombCut":
+ if (mod_instaFail === true) {
+ now_energy = 0;
+ } else {
+ now_energy -= battery_unit;
+ }
+ break;
+ case "obstacleExit":
+ if (mod_instaFail === true) {
+ now_energy = 0;
+ } else {
+ var delta_t = data.time - obstacle_time;
+ now_energy += parseInt(delta_t * drain_energy) * battery_unit;
+ }
+ break;
+ }
}
}
if (now_energy > 100) now_energy = 100;
- if (data.event === "failed") now_energy = 0;
+ if (data.event === "failed") {
+ now_energy = 0;
+ failed = true;
+ }
if (now_energy < 0) now_energy = 0;
+ if (failed) now_energy = 0;
if (html_id["energy"]) energy.innerText = Math.round(now_energy) + "%";
+ if (html_id["energy_bar"]) energy_bar.setAttribute("style", `width: ${Math.round(now_energy)}%`);
}
if (typeof op_performance !== "undefined") op_performance(data,now_energy);
@@ -166,6 +186,8 @@ const ui = (() => {
})();
const beatmap = (() => {
+ const beatsaver_url = 'https://beatsaver.com/api/maps/by-hash/';
+ const request_timeout = 5000; //msec
if (html_id["image"]) var cover = document.getElementById("image");
if (html_id["title"]) var title = document.getElementById("title");
@@ -185,6 +207,7 @@ const ui = (() => {
if (html_id["pre_bsr"]) var pre_bsr = document.getElementById("pre_bsr");
if (html_id["pre_bsr_text"]) var pre_bsr_text = document.getElementById("pre_bsr_text");
if (html_id["energy"]) var energy = document.getElementById("energy");
+ if (html_id["energy_group"]) var energy_group = document.getElementById("energy_group");
var httpRequest = new XMLHttpRequest();
function format(number) {
@@ -203,11 +226,14 @@ const ui = (() => {
var beatmap = data.status.beatmap;
var time = data.time;
var mod_data = data.status.mod;
+ var visibility = "visible";
+ failed = false;
mod_instaFail = mod_data.instaFail;
mod_batteryEnergy = mod_data.batteryEnergy;
if (mod_instaFail === false && mod_batteryEnergy === false) {
if (mod_data.noFail === true) {
now_energy = null;
+ visibility = "hidden";
if (html_id["energy"]) energy.innerText = "NF";
} else {
now_energy = 50;
@@ -215,6 +241,7 @@ const ui = (() => {
} else {
now_energy = 100;
}
+ if (html_id["energy_group"]) energy_group.setAttribute("style", `visibility: ${visibility}`);
if (beatmap.difficulty === "ExpertPlus") {
beatmap.difficulty = "Expert+";
}
@@ -225,22 +252,33 @@ const ui = (() => {
if (html_id["subtitle"]) subtitle.innerText = beatmap.songSubName;
if (html_id["bsr"]) bsr.innerText = '';
if (html_id["bsr_text"]) bsr_text.innerText = '';
- pre_bsr_data = now_bsr;
- now_bsr = null;
httpRequest.onreadystatechange = function() {
- if(this.readyState == 4 && this.status == 200 && this.response) {
- now_bsr = this.response.key;
- if (html_id["bsr"]) bsr.innerText = this.response.key;
- if (html_id["bsr_text"]) bsr_text.innerText = bsr_text_org;
+ if(this.readyState == 4 && this.status == 200) {
+ now_map = this.response;
+ if (now_map !== null) {
+ if (html_id["bsr"]) bsr.innerText = now_map.key;
+ if (html_id["bsr_text"]) bsr_text.innerText = bsr_text_org;
+ }
+ if (typeof op_beatsaver_res !== "undefined") op_beatsaver_res(now_map);
}
}
- if (bsr_display && beatmap.songHash != null && beatmap.songHash.match(/^[0-9A-F]{40}/i)) {
- httpRequest.open('GET', 'https://beatsaver.com/api/maps/by-hash/' + beatmap.songHash.substr(0, 40), true);
- httpRequest.timeout = 5000;
- httpRequest.responseType = 'json';
- httpRequest.send(null);
+ if (pre_songHash === beatmap.songHash) {
+ if (bsr_display && now_map !== null) {
+ if (html_id["bsr"]) bsr.innerText = now_map.key;
+ if (html_id["bsr_text"]) bsr_text.innerText = bsr_text_org;
+ }
+ } else {
+ pre_songHash = beatmap.songHash;
+ pre_map = now_map;
+ now_map = null;
+ if (bsr_display && beatmap.songHash !== null && beatmap.songHash.match(/^[0-9A-F]{40}/i)) {
+ httpRequest.open('GET', beatsaver_url + beatmap.songHash.substr(0, 40), true);
+ httpRequest.timeout = request_timeout;
+ httpRequest.responseType = 'json';
+ httpRequest.send(null);
+ }
}
if (html_id["artist"]) artist.innerText = beatmap.songAuthorName;
@@ -272,7 +310,7 @@ const ui = (() => {
if (mod_data.disappearingArrows === true) mod_text += "DA,";
if (mod_data.ghostNotes === true) mod_text += "GN,";
if (mod_data.songSpeed === "Faster") mod_text += "FS,";
- if (mod_data.songSpeed === "Faster") mod_text += "SS,";
+ if (mod_data.songSpeed === "Slower") mod_text += "SS,";
if (mod_data.noFail === true) mod_text += "NF,";
if (mod_data.obstacles === false) mod_text += "NO,";
if (mod_data.noBombs === true) mod_text += "NB,";
@@ -285,12 +323,12 @@ const ui = (() => {
if (html_id["pre_bsr"]) pre_bsr.innerText = "";
if (html_id["pre_bsr_text"]) pre_bsr_text.innerText = "";
} else {
- if (html_id["pre_bsr"]) pre_bsr.innerText = pre_bsr_data;
+ if (html_id["pre_bsr"]) pre_bsr.innerText = pre_map.key;
if (html_id["pre_bsr_text"]) pre_bsr_text.innerText = pre_bsr_text_org;
}
timer.start(Date.now(), beatmap.length);
- if (typeof op_beatmap !== "undefined") op_beatmap(data);
+ if (typeof op_beatmap !== "undefined") op_beatmap(data,now_map,pre_map);
}
})();
diff --git a/modifiers/bsr.css b/modifiers/bsr.css
new file mode 100644
index 0000000..5373721
--- /dev/null
+++ b/modifiers/bsr.css
@@ -0,0 +1,3 @@
+#bsr-group {
+ display: inline-block;
+}
diff --git a/modifiers/energy.css b/modifiers/energy.css
new file mode 100644
index 0000000..0189544
--- /dev/null
+++ b/modifiers/energy.css
@@ -0,0 +1,4 @@
+.energy-container {
+ visibility: visible;
+ height: 20px;
+}
diff --git a/modifiers/miss.css b/modifiers/miss.css
new file mode 100644
index 0000000..ecc0a14
--- /dev/null
+++ b/modifiers/miss.css
@@ -0,0 +1,3 @@
+#miss_group {
+ display: block;
+}
\ No newline at end of file
diff --git a/modifiers/mod.css b/modifiers/mod.css
new file mode 100644
index 0000000..3f213c2
--- /dev/null
+++ b/modifiers/mod.css
@@ -0,0 +1,3 @@
+#mod-group {
+ visibility: visible;
+}
diff --git a/modifiers/no-performance.css b/modifiers/no-performance.css
new file mode 100644
index 0000000..a86221c
--- /dev/null
+++ b/modifiers/no-performance.css
@@ -0,0 +1,3 @@
+#performance {
+ display: none;
+}
diff --git a/modifiers/rtl.css b/modifiers/rtl.css
index a227520..f3cd38e 100644
--- a/modifiers/rtl.css
+++ b/modifiers/rtl.css
@@ -3,10 +3,18 @@
right: 40px;
}
+#bpm-group {
+ direction: ltr;
+}
+
#score {
transform: translate(2px, 0);
}
#difficulty, #bpm {
direction: ltr;
-}
\ No newline at end of file
+}
+
+#energy_bar {
+ float: left;
+}
diff --git a/modifiers/top.css b/modifiers/top.css
index bf97d7d..1686044 100644
--- a/modifiers/top.css
+++ b/modifiers/top.css
@@ -4,10 +4,13 @@
#performance {
order: 1;
- margin: 20px 0 0 0;
flex-direction: column-reverse;
}
#overlay.hidden #beatmap, #overlay.hidden #performance > * {
transform: translate(0, -15px);
+}
+
+.energy-background {
+ margin: 10px 0 0 0;
}
\ No newline at end of file
diff --git a/rtl2.css b/rtl2.css
index f3d7b46..2aa6d8a 100644
--- a/rtl2.css
+++ b/rtl2.css
@@ -15,3 +15,7 @@
#score {
transform: translate(2px, 0);
}
+
+.energy-container {
+ margin: 4px 0 4px auto;
+}
diff --git a/style.css b/style.css
index a53b2a6..f8845df 100644
--- a/style.css
+++ b/style.css
@@ -74,7 +74,7 @@ body {
margin: 2px 0 0 0;
}
-#difficulty, #bpm-group, #njs-group {
+#difficulty, #bpm-group, #njs-group, #mod-group {
display: inline-block;
font-size: 10px;
@@ -83,8 +83,13 @@ body {
letter-spacing: 3px;
}
+#mod-group {
+ visibility: hidden;
+ margin: 0 8px;
+}
+
#bsr-group {
- display: inline-block;
+ display: none;
font-size: 18px;
font-weight: 800;
@@ -159,7 +164,7 @@ body {
#performance {
display: flex;
flex-direction: column;
- margin: 0 0 20px 0;
+ margin: 0 0 0 0;
}
.performance-group {
@@ -191,6 +196,10 @@ body {
letter-spacing: 2px;
}
+#miss_group {
+ display: none;
+}
+
/* Animations and state */
#overlay {
@@ -198,6 +207,29 @@ body {
--hide: cubic-bezier(0.55, 0.085, 0.68, 0.53) 200ms;
}
+.energy-container {
+ visibility: hidden;
+ margin: 4px 0 4px 0;
+ height: 12px;
+ width: 300px;
+ border-radius: 10px 0px 0px 10px;
+}
+
+.energy-background {
+ height: 10px;
+ background-color: rgba(80, 80, 80, 0.8);
+ border-radius: 5px;
+}
+
+#energy_bar {
+ background-color: white;
+ height: 100%;
+ width: 50%;
+ bottom: 0;
+ transition: all 100ms;
+ border-radius: 5px;
+}
+
#overlay #beatmap, #overlay #performance > * {
transition:
opacity var(--show),