Advertisement
althindor

Pro for Sir Alonne

Apr 6th, 2020
635
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 15.63 KB | None | 0 0
  1. /* Designed by Visual Light, Coded by AlthIndor */
  2.  
  3. html, body {
  4.  background: #060620;
  5.  height: 100vh;
  6.  min-height: 780px;
  7. }
  8. html {--green: #048204;}
  9. body {transform: translateZ(0);}
  10. body a {text-decoration: none !important;}
  11.  
  12. #gaia_header, #panel-details div, #id_store, #id_contact li, #id_details h2, #id_comments h2 + div, #id_comments h2 ~ p {background: url('https://images2.imgbox.com/75/36/cE6dp1Y5_o.png');}
  13. #columns {background: url('https://i.imgur.com/Qr05eCL.png') 219px 64px no-repeat, url('https://images2.imgbox.com/75/36/cE6dp1Y5_o.png');}
  14. #column_2 .panel {background: url('https://images2.imgbox.com/75/36/cE6dp1Y5_o.png') border-box, url('https://images2.imgbox.com/75/36/cE6dp1Y5_o.png') border-box;}
  15.  
  16. ::selection {
  17.  background: #000;
  18.  color: var(--green);
  19. }
  20.  
  21. /* Fonts */
  22.  
  23. @font-face {
  24.  font-family: 'Press Start 2P';
  25.  font-style: normal;
  26.  font-weight: 400;
  27.  src: local('Press Start 2P Regular'), local('PressStart2P-Regular'), url(https://fonts.gstatic.com/s/pressstart2p/v8/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2) format('woff2');
  28. }
  29.  
  30. /* User Picture */
  31.  
  32. #panel-details .hd {
  33.  background: url('https://i.imgur.com/AQxAWpt.png') center / cover;
  34.  width: 127px;
  35.  height: 122px;
  36.  left: calc(50% - 466px);
  37.  top: 60px;
  38. }
  39. #panel-details h2 {display: none;}
  40.  
  41. /* Wallpaper */
  42.  
  43. #panel-details, #columns, #column_1 {height: 660px;}
  44. #panel-details, #columns {top: calc(50% - 330px + 20px);}
  45. #panel-details, #panel-details div {position: absolute;}
  46. #panel-details {width: 100%;}
  47.  
  48. #panel-details .bd {
  49.  background-position: 0 -1125px;
  50.  width: calc(50% - 480px);
  51.  height: 155px;
  52. }
  53.  
  54. #panel-details .ft {
  55.  background-position: 0 -1275px;
  56.  width: calc(50% - 200px);
  57.  height: 55px;
  58.  right: 0;
  59.  bottom: 13px;
  60. }
  61.  
  62. /* Header */
  63.  
  64. #viewer #gaia_header {
  65.  background-position: bottom left;
  66.  height: 32px !important;
  67.  box-shadow: 0 -1px #00000040 inset, 0 1px 3px #00000060;
  68. }
  69. #gaia_header li.spacer {display: none !important;}
  70. #gaia_header li {margin: 0 3px;}
  71.  
  72. #gaia_header #header_left, #gaia_header #header_right {
  73.  background: none;
  74.  width: 50% !important;
  75.  font: 0px/32px 'Press Start 2P', sans-serif !important;
  76.  padding: 0 3px !important;
  77.  box-sizing: border-box;
  78. }
  79.  
  80. #gaia_header img {
  81.  background: #606460;
  82. -webkit-mask: url('https://graphics.gaiaonline.com/images/gaia_global/gaia_header/br_gaia_logo_header.png') 0 0 / 100% auto;
  83.  mask: url('https://graphics.gaiaonline.com/images/gaia_global/gaia_header/br_gaia_logo_header.png') 0 0 / 100% auto;
  84.  width: 0 !important;
  85.  height: 0 !important;
  86.  padding: 16px 33px 0 0 !important;
  87. }
  88. #header_left li:nth-of-type(2) a:hover img {background: #C06868;}
  89.  
  90. #gaia_header a {
  91.  background: #000;
  92.  color: #606060 !important;
  93.  font-size: 7px !important;
  94.  font-weight: normal;
  95.  text-transform: uppercase;
  96.  padding: 6px 5px 5px 5px;
  97.  border-radius: 3px;
  98.  box-shadow: 1px 1px #FFFFFF40, -1px -1px #00000040;
  99. }
  100.  
  101. #gaia_header a:hover {
  102.  background: #281010;
  103.  color: #C06868 !important;
  104. }
  105.  
  106. /* Columns */
  107.  
  108. #columns, #column_1, #column_2 {
  109.  float: none;
  110.  margin: 0;
  111.  position: absolute;
  112. }
  113. #columns, #column_1 {width: 1010px;}
  114. #column_3 {display: none;}
  115.  
  116. #columns {
  117.  left: calc(50% - 506px);
  118.  transform: translateZ(0);
  119. }
  120.  
  121. #column_2 {
  122.  width: 670px;
  123.  height: 285px;
  124.  top: 181px;
  125.  left: 31px;
  126. }
  127.  
  128. /* Scrollbars */
  129.  
  130. #columns ::-webkit-scrollbar {
  131.  background: #000000;
  132.  width: 6px;
  133. }
  134. #columns ::-webkit-scrollbar-thumb {background: var(--green);}
  135.  
  136. #columns * {
  137.  scrollbar-color: var(--green) #000000;
  138.  scrollbar-width: thin;
  139. }
  140.  
  141. /* Panels */
  142.  
  143. .panel, .panel h2 {
  144.  color: #FFFFFF;
  145.  padding: 0;
  146.  margin: 0;
  147.  box-sizing: border-box;
  148. }
  149.  
  150. .panel {
  151.  position: absolute;
  152.  overflow: hidden;
  153. }
  154. .panel:not(#id_details) {text-align: justify;}
  155. .panel img {max-width: 100% !important;}
  156. .panel a {color: #048204;}
  157. .panel a:hover {color: inherit;}
  158.  
  159. #id_contact, .media_panel {background: none;}
  160. #column_1 h2 {display: none;}
  161.  
  162. #column_2 .panel {
  163.  background-position: 0 -795px, right -675px;
  164.  width: 100%;
  165.  height: 100%;
  166.  font: 7px/2.4 'Press Start 2P', sans-serif;
  167.  top: -110%;
  168.  left: 0;
  169.  border: 20px solid transparent;
  170.  border-width: 40px 20px 20px 20px;
  171. }
  172. #column_2 .panel:hover {top: 0;}
  173.  
  174. #column_2 .panel:not(#id_details) {
  175.  padding-right: 10px;
  176.  overflow-y: scroll;
  177. }
  178.  
  179. #column_2 #id_about {background-position-y: -795px, -705px;}
  180. #column_2 .custom_panel {background-position-y: -795px, -735px;}
  181. #column_2 #id_comments {background-position-y: -795px, -765px;}
  182. #column_2 #id_footprints {background-position-y: -795px, -795px;}
  183.  
  184. /* Panel Headers */
  185.  
  186. .panel h2 {
  187.  font-size: 0;
  188.  position: fixed;
  189.  opacity: .01;
  190. }
  191. .panel:hover h2 {opacity: 1;}
  192.  
  193. .panel:not(#id_details) h2 {
  194.  background: none;
  195.  height: 90px;
  196.  left: 721px;
  197.  box-shadow: 0 0 1px 2px #800040, 0 0 1px 2px #800040 inset;
  198. }
  199.  
  200. #id_about h2, #id_footprints h2, .custom_panel h2 {width: 130px;}
  201. #id_about h2 {top: 281px;}
  202. .custom_panel h2 {top: 371px;}
  203. #id_footprints h2 {top: 461px;}
  204.  
  205. #id_comments h2 {
  206.  width: 260px;
  207.  top: 191px;
  208. }
  209.  
  210. .panel h2::after {
  211.  content: '';
  212.  display: none;
  213. }
  214. .panel:hover h2::after {display: block;}
  215.  
  216. .panel:not(#id_details) h2::after {
  217.  width: 40px;
  218.  height: 360px;
  219.  position: fixed;
  220.  top: 190px;
  221.  right: 288px;
  222. }
  223.  
  224. #id_details h2::after {
  225.  width: 145px;
  226.  height: 200px;
  227. }
  228.  
  229. /* Details */
  230.  
  231. #id_details p {margin: 14px 0;}
  232. #id_details p:nth-of-type(n+2), .forum_userstatus .pushBox {display: none;}
  233. #id_details .forum_userstatus, #id_details .forum_userstatus span {padding: 0;}
  234.  
  235. .forum_userstatus .statuslinks, .forum_userstatus span {
  236.  background: none !important;
  237.  width: 100% !important;
  238.  height: 100% !important;
  239. }
  240.  
  241. #id_details .forum_userstatus {
  242.  background: #0E0000;
  243.  width: 120px;
  244.  height: 30px;
  245.  border: 1px solid #808080;
  246.  box-shadow: 0 0 0 1px #606060 inset;
  247.  box-sizing: border-box !important;
  248. }
  249.  
  250. #id_details .forum_userstatus span {
  251.  color: var(--green);
  252.  font: bold 14px/28px sans-serif;
  253.  text-align: center;
  254.  text-shadow: 2px 2px 1px #18421C;
  255.  text-indent: -2px;
  256. }
  257.  
  258. /* Comments */
  259.  
  260. #id_comments #alerts_banner, #id_comments .dropBox {display: none;}
  261. #id_comments dd {margin: 0 0 20px 0;}
  262. #id_comments dd:last-of-type {margin: 0;}
  263.  
  264. #id_comments dl {
  265.  clear: both;
  266.  margin-top: 45px;
  267. }
  268.  
  269. #id_comments dt {
  270.  height: auto;
  271.  line-height: normal;
  272.  padding: 0 0 5px 0;
  273.  border: none;
  274. }
  275. #id_comments .date {color: #808080;}
  276.  
  277. /* Comments Buttons */
  278.  
  279. #id_comments h2 + div, #id_comments h2 ~ p {
  280.  background-position: bottom left;
  281.  width: calc(50% - 5px);
  282.  height: 26px;
  283.  line-height: 26px;
  284.  text-align: center;
  285.  position: relative;
  286.  box-shadow: 1px 1px #FFFFFF40 inset, -1px -1px #00000040 inset, 0 1px 3px #00000080;
  287. }
  288. #id_comments h2 + div {float: left;}
  289. #id_comments h2 ~ p {float: right;}
  290.  
  291. #id_comments h2 + div a, #id_comments h2 ~ p a {
  292.  width: 100%;
  293.  height: 100%;
  294.  color: #22281C;
  295.  font-weight: normal;
  296.  text-shadow: 1px 1px #FFFFFF40, -1px -1px #00000020, 0 0 5px #00800080;
  297.  text-transform: uppercase;
  298.  position: absolute;
  299.  top: 0;
  300.  left: 0;
  301. }
  302.  
  303. #id_comments h2 + div:hover, #id_comments h2 ~ p:hover {filter: brightness(125%);}
  304. #id_comments h2 + div:hover a, #id_comments h2 ~ p:hover a {color: #E0E0E0;}
  305.  
  306. #id_comments h2 + div a {font-size: 0;}
  307. #id_comments h2 + div a::after {content: 'Leave New Comment'; font-size: 7px;}
  308.  
  309. /* Contact and Store */
  310.  
  311. #id_contact, #id_store, #id_details h2 {
  312.  top: 10px;
  313.  opacity: .01;
  314. }
  315. #id_contact:hover, #id_store:hover, #id_details:hover h2 {opacity: 1;}
  316. #id_contact {left: 526px;}
  317. #id_details h2 {left: 371px;}
  318.  
  319. #id_contact li, #id_store, #id_details h2 {
  320.  background-position-y: -1090px;
  321.  width: 145px;
  322.  height: 31px;
  323. }
  324. #id_contact li:nth-of-type(1) {background-position-x: -155px;}
  325. #id_contact li:nth-of-type(n+2) {display: none;}
  326. #id_contact span {display: none;}
  327.  
  328. #id_store {
  329.  background-position-x: -310px;
  330.  left: 681px;
  331. }
  332. #id_store *:nth-last-child(n+2) {display: none;}
  333.  
  334. #id_contact li a, #id_store a {
  335.  width: 100%;
  336.  height: 100%;
  337.  font-size: 0;
  338.  position: absolute;
  339.  top: 0;
  340.  left: 0;
  341. }
  342.  
  343. /* Media */
  344.  
  345. .media_panel {
  346.  width: 640px;
  347.  height: 140px !important;
  348.  top: 491px;
  349.  left: 46px;
  350. }
  351.  
  352. .media_panel iframe {
  353.  width: 100%;
  354.  height: 100%;
  355. }
  356.  
  357. /* Enter Button */
  358.  
  359. #texts_container .spoiler-wrapper, #texts_container .spoiler-title, #texts_container .spoiler-control-show, #texts_container .spoiler {height: 100%;}
  360. #texts_container .spoiler-wrapper, #texts_container .spoiler-title, #texts_container .spoiler-control-show {width: 100%;}
  361. #texts_container .spoiler-title, #texts_container .spoiler-control-show, #texts_container .spoiler {position: absolute;}
  362. #texts_container .spoiler-wrapper, #texts_container .spoiler-control-show {border: none;}
  363. #texts_container .spoiler-control-hide, #texts_container .spoiler-control span {display: none !important;}
  364.  
  365. #texts_container .spoiler-wrapper {
  366.  background: #000;
  367.  padding: 0;
  368.  position: fixed;
  369.  top: 0;
  370.  left: 0;
  371.  perspective: 1000px;
  372.  overflow: hidden;
  373. }
  374. #texts_container .spoiler-wrapper * {transform-style: preserve-3d;}
  375.  
  376. #texts_container .spoiler-title, #texts_container .spoiler {
  377.  width: 460px;
  378.  height: 480px;
  379.  top: calc(50% - 240px);
  380.  left: calc(50% - 230px);
  381. }
  382. #texts_container .spoiler-title {z-index: 9;}
  383.  
  384. #texts_container .spoiler-control-show {
  385.  background: none;
  386.  outline: none;
  387. }
  388.  
  389. #texts_container .spoiler {
  390.  display: block !important;
  391.  opacity: .5;
  392.  transition: opacity 1s ease-in-out;
  393. }
  394. #texts_container .spoiler-title:hover + .spoiler, #texts_container .spoiler-revealed .spoiler {opacity: 1;}
  395.  
  396. @keyframes HideDoor {
  397.  0% {opacity: 1;}
  398.  99.99% {height: 100%;}
  399.  100% {opacity: 0; height: 0;}
  400. }
  401.  
  402. @keyframes ZoomDoor {
  403.  from {transform: translateZ(0);}
  404.  to {transform: translateZ(500px);}
  405. }
  406.  
  407. @keyframes OpenDoor {
  408.  from {transform: rotateY(0deg);}
  409.  to {transform: rotateY(80deg);}
  410. }
  411.  
  412. @keyframes RotateHandle {
  413.  from {transform: translateZ(60px) scale3d(.08, .08, .08) rotateZ(-30deg) rotateX(90deg);}
  414.  to {transform: translateZ(60px) scale3d(.08, .08, .08) rotateZ(-70deg) rotateX(90deg);}
  415. }
  416.  
  417. @keyframes MoveShadow {
  418.  from {transform: translateX(0) rotate(35deg);}
  419.  to {transform: translateX(4px) rotate(-50deg);}
  420. }
  421.  
  422. #texts_container .spoiler-revealed span[style*='color']:nth-of-type(1) {animation: OpenDoor 5s 1s cubic-bezier(.2, 1.6, .5, -.4) 1 both;}
  423. #texts_container .spoiler-revealed span[style*='color']:nth-of-type(1) b ~ span {animation: RotateHandle .5s 0s ease-in-out 1 both;}
  424. #texts_container .spoiler-revealed span[style*='color']:nth-of-type(1) b:nth-of-type(4) {animation: MoveShadow 5s 1s cubic-bezier(.2, 1.6, .5, -.4) 1 both;}
  425. #texts_container .spoiler-revealed .spoiler {animation: ZoomDoor 3s 6s ease-in-out 1 both;}
  426. #texts_container .spoiler-revealed {animation: HideDoor 3s 6s ease-in 1 both;}
  427.  
  428. /* Build a Door */
  429.  
  430. #texts_container .spoiler * {
  431.  display: block;
  432.  position: absolute;
  433. }
  434. #texts_container .spoiler br {display: none;}
  435.  
  436. #texts_container .spoiler span[style*='color'] {
  437.  width: 230px;
  438.  height: 100%;
  439.  transform-origin: left center -10px;
  440. }
  441.  
  442. #texts_container .spoiler b ~ span, #texts_container .spoiler span ~ i {transform-origin: center top -60px;}
  443. #texts_container .spoiler b, #texts_container .spoiler span ~ i, #texts_container .spoiler span span {background: url(https://i.imgur.com/65utERE.jpg);}
  444.  
  445. #texts_container .spoiler b {
  446.  background-size: auto 100%;
  447.  height: 100%;
  448.  box-shadow: 0 0 4px #000 inset;
  449. }
  450. #texts_container .spoiler b:nth-of-type(1) {width: 100%;}
  451.  
  452. #texts_container .spoiler b:nth-of-type(2), #texts_container .spoiler b:nth-of-type(3) {
  453.  width: 10px;
  454.  transform-origin: left center;
  455.  filter: brightness(50%);
  456. }
  457. #texts_container .spoiler b:nth-of-type(2) {transform: rotateY(90deg);}
  458. #texts_container .spoiler b:nth-of-type(3) {transform: translateX(230px) rotateY(90deg);}
  459.  
  460. #texts_container .spoiler b:nth-of-type(4) {
  461.  background: #000000C0;
  462.  width: 16px;
  463.  height: 25px;
  464.  top: 239px;
  465.  border-radius: 8px;
  466.  box-shadow: 0 -5px 5px #FFE0A0A0;
  467.  filter: blur(1px);
  468.  transform-origin: center 8px;
  469. }
  470.  
  471. #texts_container .spoiler b ~ span {
  472.  width: 32px;
  473.  height: 0px;
  474.  top: 244px;
  475. }
  476.  
  477. #texts_container .spoiler span ~ i:nth-of-type(1) {background-position: -472px 0;}
  478. #texts_container .spoiler span ~ i:nth-of-type(2) {background-position: -526px 0; transform: rotateY(30deg);}
  479. #texts_container .spoiler span ~ i:nth-of-type(3) {background-position: -580px 0; transform: rotateY(60deg);}
  480. #texts_container .spoiler span ~ i:nth-of-type(4) {background-position: -634px 0; transform: rotateY(90deg);}
  481. #texts_container .spoiler span ~ i:nth-of-type(5) {background-position: -688px 0; transform: rotateY(120deg);}
  482. #texts_container .spoiler span ~ i:nth-of-type(6) {background-position: -742px 0; transform: rotateY(150deg);}
  483. #texts_container .spoiler span ~ i:nth-of-type(7) {background-position: -796px 0; transform: rotateY(180deg);}
  484. #texts_container .spoiler span ~ i:nth-of-type(8) {background-position: -850px 0; transform: rotateY(210deg);}
  485. #texts_container .spoiler span ~ i:nth-of-type(9) {background-position: -904px 0; transform: rotateY(240deg);}
  486. #texts_container .spoiler span ~ i:nth-of-type(10) {background-position: -958px 0; transform: rotateY(270deg);}
  487. #texts_container .spoiler span ~ i:nth-of-type(11) {background-position: -1012px 0; transform: rotateY(300deg);}
  488. #texts_container .spoiler span ~ i:nth-of-type(12) {background-position: -1066px 0; transform: rotateY(330deg);}
  489.  
  490. #texts_container .spoiler i {
  491.  background: inherit;
  492.  width: 32px;
  493.  height: 60px;
  494.  top: 100%;
  495. }
  496.  
  497. #texts_container .spoiler i i {
  498.  background-position-y: -60px;
  499.  width: 46px;
  500.  height: 27px;
  501.  left: -7px;
  502.  transform: rotateX(90deg);
  503.  transform-origin: center top;
  504. }
  505.  
  506. #texts_container .spoiler i i i, #texts_container .spoiler i i i i, #texts_container .spoiler i i i i i i, #texts_container .spoiler i i i i i i i {height: 8px;}
  507. #texts_container .spoiler i i i, #texts_container .spoiler i i i i {left: -2px;}
  508. #texts_container .spoiler i i i , #texts_container .spoiler i i i i i i {transform: rotateX(-22.5deg);}
  509. #texts_container .spoiler i i i i i i {background-position-y: -253px;}
  510.  
  511. #texts_container .spoiler i i i {
  512.  background-position-y: -87px;
  513.  width: 50px;
  514. }
  515.  
  516. #texts_container .spoiler i i i i {
  517.  background-position-y: -95px;
  518.  width: 54px;
  519. }
  520.  
  521. #texts_container .spoiler i i i i i {
  522.  background-position-y: -103px;
  523.  height: 150px;
  524.  left: 0;
  525.  transform: rotateX(-45deg);
  526. }
  527.  
  528. #texts_container .spoiler i i i i i i i {
  529.  background-position-y: -261px;
  530.  width: 52px;
  531.  left: 1px;
  532. }
  533.  
  534. #texts_container .spoiler b ~ span span {
  535.  background-position: -480px -456px;
  536.  width: 184px;
  537.  height: 184px;
  538.  left: calc(50% - 92px);
  539.  transform: translateZ(-60px) translateY(140px) rotateX(90deg);
  540.  clip-path: polygon(37% 0%, 63% 0%, 87% 14%, 100% 37%, 100% 63%, 87% 87%, 63% 100%, 37% 100%, 14% 87%, 0% 63%, 0% 37%, 13% 13%);
  541. }
  542.  
  543. /* Double Doors */
  544.  
  545. #texts_container .spoiler span[style*='color']:nth-of-type(1) {left: 0;}
  546. #texts_container .spoiler span[style*='color']:nth-of-type(2) {left: 230px;}
  547. #texts_container .spoiler span[style*='color']:nth-of-type(2) b:nth-of-type(1) {transform: rotateY(180deg);}
  548.  
  549. #texts_container .spoiler span[style*='color']:nth-of-type(1) b:nth-of-type(4) {
  550.  right: 12px;
  551.  transform: rotate(35deg);
  552. }
  553.  
  554. #texts_container .spoiler span[style*='color']:nth-of-type(2) b:nth-of-type(4) {
  555.  left: 12px;
  556.  transform: rotate(-35deg);
  557. }
  558.  
  559. #texts_container .spoiler span[style*='color']:nth-of-type(1) b ~ span {
  560.  right: 1px;
  561.  transform: translateZ(60px) scale3d(.08, .08, .08) rotateZ(-30deg) rotateX(90deg);
  562. }
  563.  
  564. #texts_container .spoiler span[style*='color']:nth-of-type(2) b ~ span {
  565.  left: 1px;
  566.  transform: translateZ(60px) scale3d(.08, .08, .08) rotateZ(-90deg) rotateX(90deg);
  567. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement