From 22f0e1f30e692616188027dba6b1bed57b1ff0f8 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Tue, 20 Aug 2024 14:40:56 +0900
Subject: [PATCH] =?UTF-8?q?server-side=20style=E3=82=92=E5=AE=8C=E5=85=A8?=
 =?UTF-8?q?=E3=81=AB=E5=88=86=E9=9B=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../backend/src/server/web/style.embed.css    | 72 +++++++++++++++++++
 .../src/server/web/views/base-embed.pug       |  1 -
 2 files changed, 72 insertions(+), 1 deletion(-)

diff --git a/packages/backend/src/server/web/style.embed.css b/packages/backend/src/server/web/style.embed.css
index 1aad28f973..a7b110d80a 100644
--- a/packages/backend/src/server/web/style.embed.css
+++ b/packages/backend/src/server/web/style.embed.css
@@ -4,6 +4,11 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+html {
+	background-color: var(--bg);
+	color: var(--fg);
+}
+
 html.embed {
 	box-sizing: border-box;
 	background-color: transparent;
@@ -11,6 +16,19 @@ html.embed {
 	max-width: 500px;
 }
 
+#splash {
+	position: fixed;
+	z-index: 10000;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	cursor: wait;
+	background-color: var(--bg);
+	opacity: 1;
+	transition: opacity 0.5s ease;
+}
+
 html.embed #splash {
 	box-sizing: border-box;
 	min-height: 300px;
@@ -25,3 +43,57 @@ html.embed.norounded #splash {
 html.embed.noborder #splash {
 	border: none;
 }
+
+#splashIcon {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	margin: auto;
+	width: 64px;
+	height: 64px;
+	pointer-events: none;
+}
+
+#splashSpinner {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	margin: auto;
+	display: inline-block;
+	width: 28px;
+	height: 28px;
+	transform: translateY(70px);
+	color: var(--accent);
+}
+
+#splashSpinner > .spinner {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 28px;
+	height: 28px;
+	fill-rule: evenodd;
+	clip-rule: evenodd;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+	stroke-miterlimit: 1.5;
+}
+#splashSpinner > .spinner.bg {
+	opacity: 0.275;
+}
+#splashSpinner > .spinner.fg {
+	animation: splashSpinner 0.5s linear infinite;
+}
+
+@keyframes splashSpinner {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
diff --git a/packages/backend/src/server/web/views/base-embed.pug b/packages/backend/src/server/web/views/base-embed.pug
index 14a7d8062e..e8711c5930 100644
--- a/packages/backend/src/server/web/views/base-embed.pug
+++ b/packages/backend/src/server/web/views/base-embed.pug
@@ -52,7 +52,6 @@ html(class='embed')
 			meta(name='robots' content='noindex')
 
 		style
-			include ../style.css
 			include ../style.embed.css
 
 		script.