aboutsummaryrefslogtreecommitdiff
path: root/static/css
diff options
context:
space:
mode:
Diffstat (limited to 'static/css')
-rw-r--r--static/css/core.css334
-rw-r--r--static/css/login-area.css52
-rw-r--r--static/css/styles.css4
3 files changed, 364 insertions, 26 deletions
diff --git a/static/css/core.css b/static/css/core.css
new file mode 100644
index 00000000..d13338d4
--- /dev/null
+++ b/static/css/core.css
@@ -0,0 +1,334 @@
+/* Shared CSS File */
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: "Mali", sans-serif;
+ font-size: 11px;
+}
+
+*,
+input,
+button {
+ outline: none;
+ border: none;
+}
+
+hr {
+ border: 0;
+ height: 1px;
+ background: #fff;
+}
+
+html {
+ background-color: #000;
+ color: #fff;
+}
+
+#video-background {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ object-fit: cover;
+ z-index: -100;
+}
+
+#video-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: #000;
+ opacity: 0.35;
+ z-index: -99;
+}
+
+#body-wrapper {
+ position: relative;
+ z-index: 1;
+ width: 1000px;
+ margin: 0 auto;
+}
+
+#content-wrapper {
+ display: flex;
+}
+
+#left-sidebar {
+ width: 200px;
+ border-top: 1px solid #fff;
+ border-top-left-radius: 14px;
+}
+
+#main-content {
+ width: 580px;
+ padding: 0 20px;
+ border-top: 1px solid #fff;
+}
+
+#right-sidebar {
+ width: 200px;
+ border-top: 1px solid #fff;
+}
+
+.flip-container {
+ perspective: 1000px;
+}
+.flipper {
+ position: relative;
+ transform-style: preserve-3d;
+ transition: transform 0.6s;
+}
+.front,
+.back {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ backface-visibility: hidden;
+ display: flex;
+ align-items: center;
+ justify-content: start;
+}
+.back {
+ transform: rotateX(180deg);
+}
+
+.glitch,
+.glow {
+ color: #dfbfbf;
+ position: relative;
+ font-size: 18px;
+ font-weight: bold;
+ animation: glitch 5s 5s infinite;
+}
+
+.glitch::before,
+.glow::before {
+ content: attr(data-text);
+ position: absolute;
+ left: -2px;
+ text-shadow: -5px 0 magenta;
+ background: black;
+ overflow: hidden;
+ top: 0;
+ animation: noise-1 3s linear infinite alternate-reverse,
+ glitch 5s 5.05s infinite;
+}
+
+.glitch::after,
+.glow::after {
+ content: attr(data-text);
+ position: absolute;
+ left: 2px;
+ text-shadow: -5px 0 lightgreen;
+ background: black;
+ overflow: hidden;
+ top: 0;
+ animation: noise-2 3s linear infinite alternate-reverse, glitch 5s 5s infinite;
+}
+
+@keyframes glitch {
+ 1% {
+ transform: rotateX(10deg) skewX(90deg);
+ }
+ 2% {
+ transform: rotateX(0deg) skewX(0deg);
+ }
+}
+@keyframes noise-1 {
+ 3.3333333333% {
+ clip-path: inset(9px 0 46px 0);
+ }
+ 6.6666666667% {
+ clip-path: inset(54px 0 5px 0);
+ }
+ 10% {
+ clip-path: inset(13px 0 46px 0);
+ }
+ 13.3333333333% {
+ clip-path: inset(54px 0 31px 0);
+ }
+ 16.6666666667% {
+ clip-path: inset(80px 0 1px 0);
+ }
+ 20% {
+ clip-path: inset(61px 0 29px 0);
+ }
+ 23.3333333333% {
+ clip-path: inset(39px 0 32px 0);
+ }
+ 26.6666666667% {
+ clip-path: inset(25px 0 43px 0);
+ }
+ 30% {
+ clip-path: inset(68px 0 5px 0);
+ }
+ 33.3333333333% {
+ clip-path: inset(4px 0 42px 0);
+ }
+ 36.6666666667% {
+ clip-path: inset(90px 0 4px 0);
+ }
+ 40% {
+ clip-path: inset(75px 0 25px 0);
+ }
+ 43.3333333333% {
+ clip-path: inset(56px 0 17px 0);
+ }
+ 46.6666666667% {
+ clip-path: inset(24px 0 26px 0);
+ }
+ 50% {
+ clip-path: inset(90px 0 8px 0);
+ }
+ 53.3333333333% {
+ clip-path: inset(22px 0 65px 0);
+ }
+ 56.6666666667% {
+ clip-path: inset(45px 0 29px 0);
+ }
+ 60% {
+ clip-path: inset(93px 0 3px 0);
+ }
+ 63.3333333333% {
+ clip-path: inset(80px 0 12px 0);
+ }
+ 66.6666666667% {
+ clip-path: inset(93px 0 4px 0);
+ }
+ 70% {
+ clip-path: inset(75px 0 17px 0);
+ }
+ 73.3333333333% {
+ clip-path: inset(96px 0 1px 0);
+ }
+ 76.6666666667% {
+ clip-path: inset(68px 0 5px 0);
+ }
+ 80% {
+ clip-path: inset(10px 0 64px 0);
+ }
+ 83.3333333333% {
+ clip-path: inset(78px 0 18px 0);
+ }
+ 86.6666666667% {
+ clip-path: inset(14px 0 36px 0);
+ }
+ 90% {
+ clip-path: inset(54px 0 4px 0);
+ }
+ 93.3333333333% {
+ clip-path: inset(18px 0 65px 0);
+ }
+ 96.6666666667% {
+ clip-path: inset(79px 0 14px 0);
+ }
+ 100% {
+ clip-path: inset(82px 0 11px 0);
+ }
+}
+@keyframes noise-2 {
+ 0% {
+ clip-path: inset(45px 0 42px 0);
+ }
+ 3.3333333333% {
+ clip-path: inset(97px 0 2px 0);
+ }
+ 6.6666666667% {
+ clip-path: inset(98px 0 2px 0);
+ }
+ 10% {
+ clip-path: inset(67px 0 19px 0);
+ }
+ 13.3333333333% {
+ clip-path: inset(28px 0 8px 0);
+ }
+ 16.6666666667% {
+ clip-path: inset(85px 0 2px 0);
+ }
+ 20% {
+ clip-path: inset(94px 0 2px 0);
+ }
+ 23.3333333333% {
+ clip-path: inset(75px 0 3px 0);
+ }
+ 26.6666666667% {
+ clip-path: inset(47px 0 42px 0);
+ }
+ 30% {
+ clip-path: inset(69px 0 9px 0);
+ }
+ 33.3333333333% {
+ clip-path: inset(79px 0 22px 0);
+ }
+ 36.6666666667% {
+ clip-path: inset(50px 0 5px 0);
+ }
+ 40% {
+ clip-path: inset(2px 0 53px 0);
+ }
+ 43.3333333333% {
+ clip-path: inset(74px 0 19px 0);
+ }
+ 46.6666666667% {
+ clip-path: inset(8px 0 57px 0);
+ }
+ 50% {
+ clip-path: inset(96px 0 3px 0);
+ }
+ 53.3333333333% {
+ clip-path: inset(19px 0 36px 0);
+ }
+ 56.6666666667% {
+ clip-path: inset(18px 0 43px 0);
+ }
+ 60% {
+ clip-path: inset(28px 0 50px 0);
+ }
+ 63.3333333333% {
+ clip-path: inset(17px 0 3px 0);
+ }
+ 66.6666666667% {
+ clip-path: inset(77px 0 4px 0);
+ }
+ 70% {
+ clip-path: inset(64px 0 29px 0);
+ }
+ 73.3333333333% {
+ clip-path: inset(57px 0 29px 0);
+ }
+ 76.6666666667% {
+ clip-path: inset(7px 0 62px 0);
+ }
+ 80% {
+ clip-path: inset(27px 0 10px 0);
+ }
+ 83.3333333333% {
+ clip-path: inset(44px 0 5px 0);
+ }
+ 86.6666666667% {
+ clip-path: inset(18px 0 34px 0);
+ }
+ 90% {
+ clip-path: inset(61px 0 39px 0);
+ }
+ 93.3333333333% {
+ clip-path: inset(3px 0 51px 0);
+ }
+ 96.6666666667% {
+ clip-path: inset(28px 0 22px 0);
+ }
+ 100% {
+ clip-path: inset(48px 0 37px 0);
+ }
+}
+
+.glow {
+ text-shadow: 0 0 1000px #dfbfbf;
+ color: transparent;
+ position: absolute;
+ top: 0;
+}
diff --git a/static/css/login-area.css b/static/css/login-area.css
index a707919c..3d8b75ac 100644
--- a/static/css/login-area.css
+++ b/static/css/login-area.css
@@ -1,31 +1,38 @@
#login-area {
- width: 250px;
- height: 350px;
- background: url("../images/backgrounds/login-area.png") no-repeat;
- background-size: 250px 350px;
+ width: 200px;
+ height: 280px;
+ /* background: url("../images/core/sidebar/login-area.png") no-repeat; */
+ 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-repeat: no-repeat;
+ background-size: 200px 280px;
margin: auto;
padding: 0px;
border: 0px;
position: relative;
+ top: -65px;
}
#login-form {
display: block;
- padding-top: 151px;
- padding-left: 20px;
- padding-right: 20px;
+ position: relative;
+ top: 118px;
}
#login-form input[type="text"],
#login-form input[type="password"] {
display: block;
- margin: 0px auto 18px auto;
- width: 180px;
- font-size: 12px;
+ margin: 10px auto;
+ width: 144px;
+ font-size: 11px;
padding: 4px 8px;
background: transparent;
- color: #fff;
+ color: #4a2e6f;
border-radius: 4px;
+ font-weight: bold;
}
/* Reset auto fill */
@@ -37,41 +44,42 @@
}
#login-form input::placeholder {
- color: #dcdcdc;
+ color: #4a2e6f;
+ font-weight: normal;
}
#login-form input[type="submit"] {
- width: 131px;
- height: 26px;
+ width: 106px;
+ height: 22px;
cursor: pointer;
position: absolute;
- bottom: 55px;
- left: 61px;
+ top: 96px;
+ left: 48px;
border-radius: 2px;
background: transparent;
}
#login-area > #register-now-button {
display: block;
- width: 60px;
+ width: 50px;
height: 12px;
cursor: pointer;
border-radius: 2px;
position: absolute;
- bottom: 30px;
- right: 40px;
+ bottom: 23px;
+ right: 32px;
background: transparent;
}
#login-area > #forgot-password-button {
display: block;
- width: 80px;
+ width: 64px;
height: 12px;
cursor: pointer;
border-radius: 2px;
position: absolute;
- bottom: 106px;
- right: 26px;
+ bottom: 85px;
+ right: 21px;
background: transparent;
}
diff --git a/static/css/styles.css b/static/css/styles.css
index 15cdd367..775ab13f 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -295,15 +295,11 @@ blockquote {
box-sizing: border-box;
border-radius: 8px;
text-align: left !important;
-<<<<<<< HEAD
- overflow-x: scroll;
-=======
overflow-x: auto;
// Custom Horizontal Scrollbar
scrollbar-width: thin;
scrollbar-color: #311b4f #311b4f26;
->>>>>>> 164950f013807651da5dca224a70fadef6986953
}
.comment {