Advertisement
althindor

Code for Hasty Zorua

Apr 8th, 2018
202
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 6.39 KB | None | 0 0
  1. /* Code by AlthIndor, Graphics by Visual Light */
  2.  
  3. html, body {
  4.  background: linear-gradient(to bottom, rgba(128,0,0,.5), rgba(0,0,0,.5)), url('https://i.imgur.com/zR5FhJt.png') fixed center repeat;
  5.  cursor: url('https://i.imgur.com/m4UEHf0.png'), auto !important;
  6. }
  7.  
  8. /* Fonts */
  9.  
  10. @font-face {
  11.  font-family: 'Open Sans Condensed';
  12.  font-style: normal;
  13.  font-weight: 700;
  14.  src: local('Open Sans Condensed'), local('OpenSans-Condensed'), url(https://fonts.gstatic.com/s/opensanscondensed/v10/gk5FxslNkTTHtojXrkp-xONSK5BxN3NFS4EJkViHIqo.woff) format('woff');
  15. }
  16.  
  17. @font-face {
  18.  font-family: 'La Belle Aurore';
  19.  font-style: normal;
  20.  font-weight: 400;
  21.  src: local('La Belle Aurore'), local('LaBelleAurore'), url(https://fonts.gstatic.com/s/labelleaurore/v8/RrQIbot8-mNYKnGNDkWlocovHeI4HO2C.woff) format('woff');
  22. }
  23.  
  24. /* Header */
  25.  
  26. #gaia_header {
  27.  background: rgba(0,0,0,.3) !important;
  28.  border-bottom: 3px solid transparent;
  29. }
  30.  
  31. #gaia_header #header_left, #gaia_header #header_right {
  32.  background: none !important;
  33.  font-size: 0px !important;
  34.  padding: 0 3px 0 3px !important;
  35. }
  36. #gaia_header #header_right {float: right !important;}
  37.  
  38. #gaia_header li {padding: 0 5px 0 5px;}
  39. #gaia_header li.spacer {display: none !important;}
  40. #header_left li:nth-of-type(2) {padding: 0;}
  41.  
  42. #header_left img {
  43.  background-position: 3px -780px !important;
  44.  width: 0 !important;
  45.  padding: 0 43px 0 0 !important;
  46. }
  47.  
  48. #gaia_header a {
  49.  color: #B00000 !important;
  50.  line-height: 26px !important;
  51.  text-decoration: none;
  52.  text-shadow: 0 1px 1px rgba(0,0,0,.5);
  53. }
  54.  
  55. /* Open Sans Links */
  56.  
  57. #gaia_header a, #id_comments h2 ~ :not(dl) a {
  58.  font-family: 'Open Sans Condensed', script, serif;
  59.  font-size: 12px !important;
  60.  text-transform: uppercase;
  61.  transition: color .5s ease-in-out;
  62. }
  63. #gaia_header a:hover, #id_comments h2 ~ :not(dl) a:hover {color: #D0D0D0 !important;}
  64. @media screen and (-webkit-min-device-pixel-ratio:0) {#gaia_header a {line-height: 28px !important;}}
  65.  
  66. /* Texture Atlas */
  67.  
  68. #header_left img, #columns, #column_2 .panel {background: url('https://i.imgur.com/iGer6Ib.png') no-repeat;}
  69.  
  70. /* Scrollbars */
  71.  
  72. #columns {
  73.  scrollbar-track-color: #800000;
  74.  scrollbar-arrow-color: #000000;
  75.  scrollbar-face-color: #000000;
  76.  scrollbar-shadow-color: #800000;
  77. }
  78.  
  79. #columns ::-webkit-scrollbar {
  80.  background: #800000;
  81.  width: 13px;
  82.  border-radius: 3px;
  83. }
  84.  
  85. #columns ::-webkit-scrollbar-thumb {
  86.  background: #000000;
  87.  border: 1px solid #800000;
  88.  border-radius: 5px;
  89. }
  90.  
  91. /* Columns */
  92.  
  93. #columns, #column_1, #column_2, #column_3, .panel, .panel h2 {
  94.  padding: 0;
  95.  margin: 0;
  96.  position: absolute;
  97. }
  98.  
  99. #columns {
  100.  background-position: -35px -15px;
  101.  width: 1200px;
  102.  height: 740px;
  103.  position: fixed;
  104.  top: calc((100% - 740px + 30px) / 2);
  105.  left: calc((100% - 1200px) / 2);
  106. }
  107.  
  108. #column_1 {
  109.  background: url('https://i.imgur.com/C1CXT30.gif') 5px -7px no-repeat;
  110.  width: 315px;
  111.  height: 315px;
  112.  top: 6px;
  113.  left: 283px;
  114.  border-radius: 50%;
  115. }
  116.  
  117. #column_2 {
  118.  width: 600px;
  119.  height: 327px;
  120.  top: 242px;
  121.  right: 20px;
  122.  z-index: 1;
  123. }
  124.  
  125. #column_3 {display: none;}
  126.  
  127. /* Panels */
  128.  
  129. .panel {
  130.  text-align: justify;
  131.  box-sizing: border-box;
  132. }
  133.  
  134. .panel a {
  135.  color: #C86068;
  136.  text-decoration: none;
  137. }
  138.  
  139. #column_2 .panel {
  140.  background-position: -615px -267px;
  141.  width: 100%;
  142.  height: 100% !important;
  143.  color: #FFFFFF;
  144.  padding-right: 10px;
  145.  border: 10px solid transparent;
  146.  border-left: none;
  147.  overflow-x: hidden;
  148.  overflow-y: scroll;
  149. }
  150. #column_2 .panel img {max-width: 600px;}
  151.  
  152. .custom_panel {
  153.  top: 500px;
  154.  z-index: 9;
  155. }
  156.  
  157. .custom_panel:hover {
  158.  top: 0;
  159.  z-index: 999;
  160. }
  161.  
  162. .panel h2 {
  163.  background: none;
  164.  width: 110px;
  165.  height: 40px;
  166.  color: #302040;
  167.  font-family: 'La Belle Aurore', script, serif;
  168.  font-size: 20px;
  169.  font-style: italic;
  170.  line-height: 41px;
  171.  text-align: center;
  172.  text-indent: -4px;
  173.  text-shadow: 0 0 1px rgba(255,255,255,.5);
  174.  text-transform: capitalize;
  175.  position: fixed;
  176.  top: calc((100% - 740px + 30px) / 2 + 560px);
  177.  border: 5px solid transparent;
  178.  border-width: 28px 5px 0 5px;
  179. }
  180.  
  181. .custom_panel:nth-child(2) h2 {left: calc((100% - 1200px) / 2 + 575px);}
  182. .custom_panel:nth-child(3) h2 {left: calc((100% - 1200px) / 2 + 695px);}
  183. .custom_panel:nth-child(4) h2 {left: calc((100% - 1200px) / 2 + 815px);}
  184. .custom_panel:nth-child(5) h2 {left: calc((100% - 1200px) / 2 + 935px);}
  185. .custom_panel:nth-child(6) h2 {left: calc((100% - 1200px) / 2 + 1055px);}
  186.  
  187. /* Transparent Bridge */
  188.  
  189. #column_2::after {
  190.  content: '';
  191.  display: block;
  192.  width: 600px;
  193.  height: 24px;
  194.  position: fixed;
  195.  top: calc((100% - 740px + 30px) / 2 + 560px);
  196.  left: calc((100% - 1200px) / 2 + 575px);
  197.  z-index: 99;
  198. }
  199.  
  200. /* Comments */
  201.  
  202. #id_comments {
  203.  top: 0;
  204.  left: 0;
  205. }
  206. #id_comments h2 {display: none;}
  207. #id_comments #alerts_banner {display: none;}
  208. #id_comments .username {text-transform: uppercase;}
  209. #id_comments .deletecomment {display: none;}
  210. #id_comments .date {color: #C86068;}
  211. #id_comments .date a {font-weight: normal;}
  212.  
  213. #id_comments dd, #id_comments dt {
  214.  background: rgba(255,255,255,.1);
  215.  padding: 0 7px 0 7px;
  216.  box-sizing: border-box;
  217. }
  218. #id_comments dd {padding-bottom: 7px;}
  219. #id_comments dd:last-of-type {margin-bottom: 0;}
  220.  
  221. #id_comments dt {
  222.  margin-top: 10px;
  223.  border-bottom: none;
  224. }
  225. #id_comments dt:first-of-type {margin-top: 40px;}
  226.  
  227. #id_comments .dropBox {
  228.  width: 48px;
  229.  height: 48px;
  230.  margin: 3px 8px 0px 0px;
  231.  border: 1px solid #C86068;
  232.  overflow: hidden;
  233. }
  234.  
  235. #id_comments .dropBox img {
  236.  width: 120px;
  237.  height: 150px;
  238.  margin-top: -26px;
  239.  margin-left: -46px;
  240. }
  241.  
  242. /* Comments Buttons */
  243.  
  244. #id_comments h2 ~ div:not(.clear), #id_comments h2 ~ div span,  #id_comments h2 ~ p {
  245.  display: block;
  246.  text-align: center;
  247.  padding: 0;
  248. }
  249.  
  250. #id_comments h2 ~ div:not(.clear), #id_comments h2 ~ p {
  251.  float: left;
  252.  background: #800000;
  253.  width: calc(50% - 5px);
  254.  height: 30px;
  255.  line-height: 30px;
  256.  text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000;
  257.  margin: 0;
  258.  border-radius: 5px;
  259. }
  260. #id_comments h2 ~ div span {width: 100%;}
  261. #id_comments h2 ~ p {margin-left: 10px;}
  262.  
  263. /* Media */
  264.  
  265. .media_panel {
  266.  background: none;
  267.  width: 30px;
  268.  height: 30px !important;
  269.  position: fixed;
  270.  top: calc((100% - 740px + 30px) / 2 + 345px);
  271.  left: calc((100% - 1200px) / 2 + 482px);
  272.  overflow: hidden;
  273. }
  274. .media_panel h2 {display: none;}
  275.  
  276. .media_panel object {
  277.  width: 200px;
  278.  height: 200px;
  279.  position: absolute;
  280.  bottom: -2px;
  281.  left: -10px;
  282.  opacity: 0;
  283. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement