Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* Layout by CD-ARIAx3 */
- /* + Code by AlthIndor */
- html, body {
- background: url('https://images2.imgbox.com/ef/23/gPsoRPoY_o.jpg') no-repeat top center / 100% auto, url('https://images2.imgbox.com/fd/4b/4TcCo2Q9_o.png'), url('https://i.imgur.com/FTjoJM5.png') center / 206px auto #000;
- background-blend-mode: screen, hard-light, normal;
- min-height: 1120px;
- height: 100vh;
- }
- body {position: relative;}
- body a {
- text-decoration: none !important;
- transition: all .5s ease-in-out;
- }
- ::selection {
- background: #303030;
- color: #FFFFFF;
- }
- #gaia_header a, #column_2, #column_2::before, #column_3::after, #id_contact li, #id_comments h2 + div, .custom_panel b {background: url('https://images2.imgbox.com/d3/cd/guZ3zIsf_o.png') no-repeat border-box;}
- #column_2::before, #column_3::before, #column_3::after, .custom_panel b {display: block; position: absolute;}
- #column_2::before, #column_3::before, #column_3::after {content: '';}
- /* Fonts */
- @font-face {
- font-family: 'PT Serif';
- font-style: normal;
- font-weight: 400;
- src: local('PT Serif'), local('PTSerif-Regular'), url(https://fonts.gstatic.com/s/ptserif/v11/EJRVQgYoZZY2vCFuvAFWzr8.woff2) format('woff2');
- }
- @font-face {
- font-family: 'PT Serif';
- font-style: normal;
- font-weight: 700;
- src: local('PT Serif Bold'), local('PTSerif-Bold'), url(https://fonts.gstatic.com/s/ptserif/v11/EJRSQgYoZZY2vCFuvAnt66qSVys.woff2) format('woff2');
- }
- @font-face {
- font-family: 'Open Sans';
- font-style: normal;
- font-weight: 600;
- src: local('Open Sans Semibold'), local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UNirkOUuhp.woff2) format('woff2');
- }
- @font-face {
- font-family: 'Open Sans';
- font-style: normal;
- font-weight: 700;
- src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN7rgOUuhp.woff2) format('woff2');
- }
- /* Header */
- #viewer #gaia_header, #gaia_header #header_left, #gaia_header #header_right {background: none;}
- #gaia_header li.spacer {display: none !important;}
- #gaia_header li {margin: 0 5px;}
- #gaia_header #header_left, #gaia_header #header_right {
- background: none;
- width: 50% !important;
- font: 700 0/41px 'PT Serif', serif !important;
- padding: 0 4px !important;
- box-sizing: border-box;
- }
- #header_left img {
- background: url('https://i.imgur.com/cGGVY2x.png') no-repeat 0 4px;
- width: 0 !important;
- padding: 0 34px 0 0;
- filter: drop-shadow(0 0 2px #FFFFFF);
- }
- #gaia_header a {
- background-position: -650px bottom;
- color: #000000 !important;
- font-size: 11px;
- text-shadow: 0 0 3px #FFFFFF;
- text-transform: uppercase;
- padding: 4px 6px;
- border: 2px solid transparent;
- border-radius: 5px;
- box-shadow: 0 0 1px 1px #00000080 inset, 0 1px 3px #000;
- }
- #gaia_header a:hover {filter: brightness(125%) saturate(60%);}
- /* Columns */
- #columns, #column_1, #column_2, #column_3 {
- float: none;
- margin: 0;
- position: absolute;
- top: 0;
- }
- #columns, #column_1 {
- width: 100%;
- height: 100%;
- }
- #column_2 {
- width: 1200px;
- height: 1120px;
- left: calc(50% - 600px);
- }
- #column_3 {
- width: 120px;
- height: 120px;
- top: 443px;
- left: calc(50% - 600px + 259px);
- }
- /* Scrollbars */
- #columns ::-webkit-scrollbar {
- background: #00000040;
- width: 6px;
- }
- #columns ::-webkit-scrollbar-thumb {background: goldenrod;}
- #columns * {
- scrollbar-color: goldenrod #00000040;
- scrollbar-width: thin;
- }
- /* Panels */
- .panel {
- background: none;
- color: #FFFFFF;
- font: 10px/1.6 'Open Sans', sans-serif;
- padding: 0;
- margin: 0;
- position: absolute;
- box-sizing: border-box;
- overflow: visible;
- }
- .panel h2 {display: none;}
- .panel img {max-width: 100% !important;}
- .panel a {
- color: #000;
- text-shadow: 0 0 4px gold;
- }
- .panel a:hover {color: inherit;}
- #id_about, #id_comments dl {
- overflow-x: hidden;
- overflow-y: scroll;
- }
- #id_about {
- width: 402px;
- height: 180px;
- text-align: right;
- padding-right: 10px;
- top: 460px;
- left: 490px;
- }
- #id_comments {
- width: 320px;
- height: 100px;
- top: 782px;
- left: 555px;
- }
- /* Contact and Comment Buttons */
- #id_contact {
- top: 356px;
- left: 840px;
- }
- #id_contact span {display: none;}
- #id_contact li, #id_comments h2 + div {
- background-position-y: -1120px;
- filter: drop-shadow(0 0 3px #FFFFFF80);
- opacity: .8;
- transition: all .5s ease-in-out;
- }
- #id_contact li:nth-of-type(2), #id_comments h2 + div {height: 24px;}
- #id_contact li:hover, #id_comments h2 + div:hover {
- filter: drop-shadow(0 0 5px gold);
- opacity: 1;
- }
- #id_comments h2 + div {
- background-position-x: -1129px;
- width: 25px;
- position: absolute;
- top: -426px;
- left: 261px;
- }
- #id_contact li {
- float: left;
- margin-left: 10px;
- position: relative;
- }
- #id_contact li:nth-of-type(1), #id_contact li:nth-of-type(3) {
- width: 19px;
- height: 19px;
- }
- #id_contact li:nth-of-type(1) {background-position-x: -1164px;}
- #id_contact li:nth-of-type(3) {background-position-x: -1231px;}
- #id_contact li:nth-of-type(2) {
- background-position-x: -1193px;
- width: 28px;
- }
- #id_contact a, #id_comments h2 + div a {
- display: block;
- width: 100%;
- height: 100%;
- font-size: 0;
- position: absolute;
- top: 0;
- left: 0;
- }
- /* Avatar */
- #id_details {
- width: 120px;
- height: 150px;
- top: 281px;
- right: 114px;
- overflow: hidden;
- }
- #id_details p:nth-of-type(n+2) {display: none;}
- #id_details .forum_userstatus {display: none;}
- /* Comments */
- #id_comments #alerts_banner, #id_comments .dropBox, #id_comments .date a, #id_comments h2 ~ p {display: none;}
- #id_comments dt, #id_comments dd {direction: ltr;}
- #id_comments dd {margin: 0 0 15px 0;}
- #id_comments dd:last-of-type {margin: 0;}
- #id_comments dl {
- width: 100%;
- height: 100%;
- padding-left: 10px;
- box-sizing: border-box;
- direction: rtl;
- }
- #id_comments dt {
- clear: unset;
- height: auto;
- line-height: 1;
- text-align: inherit;
- padding: 0 0 5px 0;
- border-bottom: 1px dotted #FFFFFF40;
- }
- #id_comments .date {
- display: inline-flex;
- text-indent: -6px;
- overflow: hidden;
- }
- #id_comments .username::after {
- content: ' on ';
- white-space: pre;
- }
- /* Media */
- .media_panel {
- background: url('https://i.imgur.com/gqTTTvw.png') -27px -10px;
- width: 60px;
- height: 24px !important;
- top: 510px;
- right: 217px;
- opacity: .8;
- filter: drop-shadow(0 0 3px #FFFFFF80);
- overflow: hidden;
- }
- .media_panel iframe {
- width: 400px;
- height: 300px;
- position: absolute;
- bottom: -6px;
- left: -27px;
- opacity: .01;
- }
- /* Keys Falling Animation */
- @keyframes FallKeysClockwise {
- from {transform: translateY(0) rotate(0deg);}
- to {transform: translateY(1255px) rotate(360deg);}
- }
- @keyframes FallKeysAntiClockwise {
- from {transform: translateY(0) rotate(360deg);}
- to {transform: translateY(1255px) rotate(0deg);}
- }
- @media screen and (min-height: 1120px) {
- @keyframes FallKeysClockwise {
- from {transform: translateY(0) rotate(0deg);}
- to {transform: translateY(calc(100vh + 135px)) rotate(360deg);}
- }
- @keyframes FallKeysAntiClockwise {
- from {transform: translateY(0) rotate(360deg);}
- to {transform: translateY(calc(100vh + 135px)) rotate(0deg);}
- }
- }
- #column_1 div {
- width: 100%;
- position: absolute;
- }
- #column_1 .custom_panel, #column_1 .custom_panel h2 + div {height: 100%;}
- #column_1 .clear {
- background: linear-gradient(to top, #00000080 2px, #664C28 2px);
- height: 21px;
- border-bottom: 2px solid #664C28;
- box-shadow: 0 0 5px #00000080;
- }
- #column_1 b {
- background-position: left -280px;
- background-size: auto 578px;
- width: 154px;
- height: 132px;
- top: -135px;
- left: calc(50% - 76px);
- animation: FallKeysClockwise 10s linear infinite;
- filter: drop-shadow(0 0 5px #00000080);
- }
- #column_1 b:nth-of-type(even) {
- background-position: left bottom;
- animation: FallKeysAntiClockwise 10s linear infinite;
- }
- #column_1 b:nth-of-type(01) {left: calc(50% - 76px + 511px); animation-delay: +2.1s;}
- #column_1 b:nth-of-type(02) {left: calc(50% - 76px - 475px); animation-delay: +6.7s;}
- #column_1 b:nth-of-type(03) {left: calc(50% - 76px + 741px); animation-delay: -5.5s;}
- #column_1 b:nth-of-type(04) {left: calc(50% - 76px + 145px); animation-delay: -2.0s;}
- #column_1 b:nth-of-type(05) {left: calc(50% - 76px + 654px); animation-delay: -3.8s;}
- #column_1 b:nth-of-type(06) {left: calc(50% - 76px + 603px); animation-delay: +7.7s;}
- #column_1 b:nth-of-type(07) {left: calc(50% - 76px - 641px); animation-delay: -1.0s;}
- #column_1 b:nth-of-type(08) {left: calc(50% - 76px - 336px); animation-delay: +4.9s;}
- #column_1 b:nth-of-type(09) {left: calc(50% - 76px + 442px); animation-delay: -7.0s;}
- #column_1 b:nth-of-type(10) {left: calc(50% - 76px - 290px); animation-delay: -6.2s;}
- #column_1 b:nth-of-type(11) {left: calc(50% - 76px - 117px); animation-delay: -4.6s;}
- #column_1 b:nth-of-type(12) {left: calc(50% - 76px + 227px); animation-delay: -6.4s;}
- #column_1 b:nth-of-type(13) {left: calc(50% - 76px - 701px); animation-delay: -0.0s;}
- #column_1 b:nth-of-type(14) {left: calc(50% - 76px + 094px); animation-delay: -2.4s;}
- #column_1 b:nth-of-type(15) {left: calc(50% - 76px - 375px); animation-delay: -5.8s;}
- #column_1 b:nth-of-type(16) {left: calc(50% - 76px - 605px); animation-delay: -1.5s;}
- #column_1 b:nth-of-type(17) {left: calc(50% - 76px + 294px); animation-delay: -3.5s;}
- #column_1 b:nth-of-type(18) {left: calc(50% - 76px - 555px); animation-delay: +3.1s;}
- #column_1 b:nth-of-type(19) {left: calc(50% - 76px + 796px); animation-delay: -5.0s;}
- #column_1 b:nth-of-type(20) {left: calc(50% - 76px - 793px); animation-delay: +5.0s;}
- /* Crown Animation */
- @keyframes CrownShine {
- from {transform: translateY(0);}
- to {transform: translateY(-200%);}
- }
- @keyframes CrownClip {
- 0% {opacity: 0;}
- 79.999% {opacity: 0;}
- 80% {opacity: 1;}
- 100% {opacity: 1;}
- }
- #column_3::before, #column_3::after {
- width: 100%;
- height: 100%;
- }
- #column_3::before {
- background: linear-gradient(20deg, #000 40%, #C0C0C0 50%, #000 52.5%);
- top: 100%;
- mix-blend-mode: color-dodge;
- animation: CrownShine 3s ease-in-out infinite, CrownClip 15s linear infinite both;
- }
- #column_3::after {
- background-position: -1130px -2065px;
- top: 0;
- }
- /* Key Float Animation */
- @keyframes KeyFloat {
- 0% {transform: translateY(20px);}
- 100% {transform: translateY(-10px);}
- }
- #column_2::before {
- background-position: -896px -1170px;
- width: 354px;
- height: 436px;
- top: 622px;
- left: 818px;
- animation: KeyFloat 3s ease-in-out infinite alternate;
- }
- /* Stars Twinkle Animation */
- @keyframes StarsFlicker {
- 04% {opacity: .55;}
- 06% {opacity: .70;}
- 08% {opacity: .85;}
- 10% {opacity: .70;}
- 12% {opacity: .85;}
- 14% {opacity: .85;}
- 16% {opacity: .70;}
- 18% {opacity: .85;}
- 20% {opacity: .55;}
- 24% {opacity: .55;}
- 26% {opacity: .85;}
- 28% {opacity: .55;}
- 38% {opacity: .70;}
- 40% {opacity: .55;}
- 42% {opacity: .85;}
- 44% {opacity: .55;}
- 56% {opacity: .55;}
- 58% {opacity: .85;}
- 60% {opacity: .55;}
- 68% {opacity: .55;}
- 70% {opacity: .40;}
- 72% {opacity: .55;}
- 92% {opacity: .55;}
- 94% {opacity: .40;}
- 98% {opacity: .55;}
- }
- #column_2 .custom_panel {
- width: 960px;
- height: 385px;
- top: 0;
- left: calc(50% - 480px);
- pointer-events: none;
- }
- #column_2 .custom_panel b {
- background-position-x: right;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- animation: StarsFlicker 10s linear infinite both;
- }
- #column_2 .custom_panel b:nth-of-type(2) {
- background-position-y: -385px;
- animation-delay: -1s;
- }
- #column_2 .custom_panel b:nth-of-type(3) {
- background-position-y: -770px;
- animation-delay: -2s;
- }
- #column_2 .custom_panel b:nth-of-type(4) {
- background-position-y: -1155px;
- animation-delay: -3s;
- }
- #column_2 .custom_panel b:nth-of-type(5) {
- background-position-y: -1540px;
- animation-delay: -4s;
- }
- #column_2 .custom_panel b:nth-of-type(6) {
- background-position-y: -1925px;
- animation-delay: -5s;
- }
- /* Misc */
- #pictures_container, #texts_container {
- width: 1px;
- height: 1px;
- position: absolute;
- top: 0;
- left: 50%;
- overflow: visible;
- }
- /* Enter Button */
- @keyframes HideSpoiler {
- 0% {opacity: 1;}
- 66% {opacity: 1;}
- 99.999% {height: 100%;}
- 100% {opacity: 0; height: 0;}
- }
- #texts_container .spoiler-wrapper, #texts_container .spoiler-control {border: none;}
- #texts_container .spoiler-control-hide, #texts_container span {display: none !important;}
- #texts_container .spoiler-wrapper {padding: 0;}
- #texts_container .spoiler-control {outline: none;}
- #texts_container .spoiler-control-show {
- display: block !important;
- background: url('https://i.imgur.com/DhIQjOO.png') top 100px right 100px no-repeat, url('https://i.imgur.com/tDtIDHo.png') center / cover;
- width: 100%;
- height: 100%;
- position: fixed;
- top: 0;
- left: 0;
- }
- #texts_container .spoiler-revealed .spoiler-control-show {
- background: url('https://i.imgur.com/DhIQjOO.png') top 100px right 100px no-repeat, url('https://i.imgur.com/bPOQtU4.gif') center / cover, url('https://i.imgur.com/tDtIDHo.png') center / cover;
- animation: HideSpoiler 3s linear 1 both;
- pointer-events: none;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement