aboutsummaryrefslogtreecommitdiff
path: root/static/css
diff options
context:
space:
mode:
Diffstat (limited to 'static/css')
-rw-r--r--static/css/en/login-area.css8
-rw-r--r--static/css/ja/login-area.css8
-rw-r--r--static/css/shared/core.css112
-rw-r--r--static/css/shared/left-sidebar.css50
-rw-r--r--static/css/shared/login-area.css3
5 files changed, 155 insertions, 26 deletions
diff --git a/static/css/en/login-area.css b/static/css/en/login-area.css
index c339605f..1e18972e 100644
--- a/static/css/en/login-area.css
+++ b/static/css/en/login-area.css
@@ -1,10 +1,6 @@
#login-area {
- background-image: -webkit-image-set(url("../../images/core/sidebar/[email protected]") 1x,
- url("../../images/core/sidebar/[email protected]") 2x,
- url("../../images/core/sidebar/[email protected]") 3x);
- background-image: image-set(url("../../images/core/sidebar/[email protected]") 1x,
- url("../../images/core/sidebar/[email protected]") 2x,
- url("../../images/core/sidebar/[email protected]") 3x);
+ background-image: url("../../images/core/sidebar/[email protected]");
+ background-image: url("../../images/core/sidebar/[email protected]");
}
#login-area>#register-now-button {
diff --git a/static/css/ja/login-area.css b/static/css/ja/login-area.css
index 4404eada..475b239b 100644
--- a/static/css/ja/login-area.css
+++ b/static/css/ja/login-area.css
@@ -1,10 +1,6 @@
#login-area {
- background-image: -webkit-image-set(url("../../images/core/sidebar/[email protected]") 1x,
- url("../../images/core/sidebar/[email protected]") 2x,
- url("../../images/core/sidebar/[email protected]") 3x);
- background-image: image-set(url("../../images/core/sidebar/[email protected]") 1x,
- url("../../images/core/sidebar/[email protected]") 2x,
- url("../../images/core/sidebar/[email protected]") 3x);
+ background-image: url("../../images/core/sidebar/[email protected]");
+ background-image: url("../../images/core/sidebar/[email protected]");
}
#login-area>#register-now-button {
diff --git a/static/css/shared/core.css b/static/css/shared/core.css
index 884ddbbf..06e571f3 100644
--- a/static/css/shared/core.css
+++ b/static/css/shared/core.css
@@ -1,24 +1,46 @@
/* Reset and Base Styles */
+@font-face {
+ font-family: 'TheHeart';
+ src: url('../../fonts/THEHEART.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Yomogi';
+ src: url('../../fonts/YOMOGI.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
* {
margin: 0;
padding: 0;
box-sizing: border-box;
- font-family: "Mali", sans-serif;
- font-size: 11px;
outline: none;
border: none;
-}
-
-/* Root Variables */
-:root {
- --resolution-multiplier: 1;
+ color: #fff;
}
/* HTML and Body Base */
html {
background-color: #000;
color: #fff;
- min-width: 1024px;
+ min-width: 1200px;
+}
+
+html[lang='en'],
+html[lang='en'] input,
+.en {
+ font-family: 'TheHeart', sans-serif;
+ font-size: 14px;
+}
+
+html[lang='ja'],
+html[lang='ja'] input,
+.ja {
+ font-family: 'Yomogi', sans-serif;
+ font-size: 12px;
}
body {
@@ -33,10 +55,23 @@ hr {
background: #fff;
}
-a:visited {
+a {
+ color: #fff;
+ text-decoration: none;
+}
+
+a:link,
+a:visited,
+a:hover,
+a:active {
color: #fff;
}
+a:hover {
+ text-decoration: underline;
+}
+
+/* Image Styles */
img {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
@@ -46,6 +81,16 @@ img {
image-rendering: crisp-edges;
}
+#video-background {
+ position: fixed;
+ right: 0;
+ bottom: 0;
+ min-width: 100%;
+ min-height: 100%;
+ z-index: -100;
+ object-fit: cover;
+}
+
/* Video Overlay */
#video-overlay {
position: fixed;
@@ -54,7 +99,7 @@ img {
width: 100%;
height: 100%;
background-color: #000;
- opacity: 0.35;
+ opacity: 0.5;
z-index: -99;
}
@@ -62,7 +107,7 @@ img {
#body-wrapper {
position: relative;
z-index: 1;
- width: 1000px;
+ width: 1200px;
margin: 0 auto;
}
@@ -70,6 +115,44 @@ img {
display: flex;
}
+/* SCANLINES */
+#scanlines {
+ position: fixed;
+ left: 0;
+ top: 0;
+ width: 100vw;
+ height: 100vh;
+ pointer-events: none;
+ z-index: 300;
+ opacity: 0.18;
+}
+
+#scanlines:before {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ pointer-events: none;
+ background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .4) 50%);
+ background-size: 100% 4px;
+ will-change: background, background-size;
+ animation: scanlines 0.2s linear infinite;
+}
+
+@keyframes scanlines {
+ from {
+ background: linear-gradient(to bottom, transparent 10%, rgba(0, 0, 0, .4) 50%);
+ background-size: 100% 4px;
+ }
+
+ to {
+ background: linear-gradient(to bottom, rgba(0, 0, 0, .4) 50%, transparent 50%);
+ background-size: 100% 4px;
+ }
+}
+
/* Sidebar and Main Content */
#left-sidebar {
width: 200px;
@@ -77,8 +160,13 @@ img {
border-top-left-radius: 14px;
}
+.left-sidebar {
+ position: relative;
+ top: -65px;
+}
+
#main-content {
- width: 580px;
+ width: 780px;
padding: 0 20px;
border-top: 1px solid #fff;
}
diff --git a/static/css/shared/left-sidebar.css b/static/css/shared/left-sidebar.css
new file mode 100644
index 00000000..a962b239
--- /dev/null
+++ b/static/css/shared/left-sidebar.css
@@ -0,0 +1,50 @@
+@font-face {
+ font-family: 'SweetFairy';
+ src: url('../../fonts/SWEETFAIRY.otf') format('opentype');
+ font-weight: bold;
+ font-style: normal;
+}
+
+/* Navigation Links */
+.navigation-links {
+ margin: 24px 0px;
+}
+
+.navigation-title {
+ font-family: 'SweetFairy', sans-serif;
+ filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white) drop-shadow(0px 1px 1px #623795) drop-shadow(0px 1px 1px #623795);
+ color: #623795;
+}
+
+.navigation-title-container {
+ background-color: #311B4F;
+ padding: 10px;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 8px;
+}
+
+html[lang='en'] .navigation-title {
+ font-size: 18px;
+}
+
+html[lang='ja'] .navigation-title {
+ font-size: 14px;
+}
+
+.navigation-item {
+ display: flex;
+ align-items: center;
+ margin: 4px 0px;
+}
+
+.navigation-items-container {
+ background-color: #f4f1e90f;
+ padding: 10px;
+ border-bottom-left-radius: 8px;
+ border-bottom-right-radius: 8px;
+}
+
+.navigation-item img {
+ width: 20px;
+ margin-right: 8px;
+} \ No newline at end of file
diff --git a/static/css/shared/login-area.css b/static/css/shared/login-area.css
index 680e95c3..f0b90d47 100644
--- a/static/css/shared/login-area.css
+++ b/static/css/shared/login-area.css
@@ -3,7 +3,6 @@
width: 200px;
height: 280px;
position: relative;
- top: -65px;
margin: auto;
background-repeat: no-repeat;
background-size: 200px 280px;
@@ -24,7 +23,7 @@
width: 144px;
margin: 10px auto;
padding: 4px 8px;
- font-size: 11px;
+ font-size: 16px;
font-weight: bold;
color: #4a2e6f;
background: transparent;