diff options
Diffstat (limited to 'static/css')
| -rw-r--r-- | static/css/core.css | 334 | ||||
| -rw-r--r-- | static/css/login-area.css | 52 | ||||
| -rw-r--r-- | static/css/styles.css | 4 |
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 { |
