Advertisement
althindor

Code for Myrna Fade

Apr 14th, 2018
214
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 4.10 KB | None | 0 0
  1. /* Code by AlthIndor */
  2.  
  3. html, body {background: url('https://i.imgur.com/uFyCiIk.png') center;}
  4. body::after, #gaia_header, #columns, #column_2 .custom_panel {background: url('https://i.imgur.com/py6yGtd.png');}
  5.  
  6. body::after {
  7.  content: '';
  8.  background-position: 0 -1065px;
  9.  display: block;
  10.  width: 100%;
  11.  height: 35px;
  12.  position: fixed;
  13.  bottom: 0;
  14.  left: 0;
  15.  pointer-events: none;
  16. }
  17.  
  18. /* Fonts */
  19.  
  20. @font-face {
  21.  font-family: 'Nanum Pen Script';
  22.  font-style: normal;
  23.  font-weight: 400;
  24.  src: local('Nanum Pen'), local('NanumPen'), url(https://fonts.gstatic.com/s/nanumpenscript/v6/daaDSSYiLGqEal3MvdA_FOL_3FkN6zn0bw.woff) format('woff');
  25. }
  26.  
  27. /* Header */
  28.  
  29. #gaia_header {
  30.  background-position: center -20px;
  31.  border-bottom: 38px solid transparent;
  32. }
  33. #viewer #gaia_header {position: fixed !important;}
  34.  
  35. #gaia_header #header_left, #gaia_header #header_right {
  36.  background: none;
  37.  color: transparent !important;
  38.  line-height: 32px !important;
  39.  padding: 0 5px 0 5px !important;
  40. }
  41. #gaia_header #header_right {float: right;}
  42.  
  43. #gaia_header li.spacer {display: none !important;}
  44.  
  45. #header_left img {
  46.  background: url('https://i.imgur.com/w0Cbo9w.png') 3px 3px no-repeat;
  47.  width: 0 !important;
  48.  padding: 0 46px 0 0;
  49.  opacity: .65;
  50. }
  51.  
  52. #gaia_header a {
  53.  color: #A0A0C4 !important;
  54.  font-family: 'Nanum Pen Script', serif;
  55.  font-size: 1.6em !important;
  56.  font-weight: normal;
  57.  text-decoration: none;
  58. }
  59.  
  60. /* Columns */
  61.  
  62. #columns, #column_1, #column_2, #column_3 {
  63.  padding: 0;
  64.  margin: 0;
  65.  position: absolute;
  66.  overflow: visible;
  67. }
  68.  
  69. #columns {
  70.  background-position: 0 -84px;
  71.  width: 986px;
  72.  height: 658px;
  73.  left: calc((100% - 986px) / 2);
  74.  top: calc((100% - 658px + 30px) / 2);
  75. }
  76.  
  77. #column_1, #column_2, #column_3 {
  78.  width: 1px;
  79.  height: 1px;
  80.  top: 0;
  81.  left: 0;
  82. }
  83.  
  84. /* Panels */
  85.  
  86. .panel {
  87.  color: #A0A0C4;
  88.  text-align: justify;
  89.  margin: 0;
  90.  position: absolute;
  91.  box-sizing: border-box;
  92.  overflow: hidden;
  93. }
  94. .panel h2 {display: none;}
  95. .panel a {color: #78B8C4;}
  96.  
  97. #column_1 .panel {
  98.  background: none;
  99.  padding: 0;
  100. }
  101. .custom_panel img {max-width: 100%;}
  102.  
  103. /* Details */
  104.  
  105. #id_details {
  106.  width: 120px;
  107.  height: 150px;
  108.  padding: 0;
  109.  top: 174px;
  110.  left: 184px;
  111. }
  112. #id_details p:nth-of-type(n+2) {display: none;}
  113. .forum_userstatus {display: none;}
  114.  
  115. /* Wish List */
  116.  
  117. #id_wishlist {
  118.  display: flex;
  119.  width: 90px;
  120.  height: 65px;
  121.  top: 528px;
  122.  left: 198px;
  123.  overflow-x: scroll;
  124. }
  125. .premium_sparkle {display: none;}
  126. .owner_checkmark {display: none;}
  127.  
  128. #id_wishlist .item {
  129.  background: rgba(0,0,0,.5);
  130.  min-width: 30px;
  131.  width: 30px;
  132.  height: 30px;
  133.  padding: 5px;
  134.  margin: 0 10px 0 0;
  135.  border-radius: 5px;
  136. }
  137.  
  138. /* Contact and Custom Links */
  139.  
  140. #column_1 .custom_panel, #id_contact {
  141.  width: 72px;
  142.  height: 204px;
  143.  top: 435px;
  144. }
  145. #column_1 .custom_panel {left: 413px;}
  146. #column_1 .custom_panel br {display: none;}
  147. #id_contact {left: 1px;}
  148.  
  149. #column_1 .custom_panel a, #id_contact ul:not(.buttons) li, #id_contact ul:not(.buttons) li a {
  150.  display: block;
  151.  width: 100%;
  152.  height: 68px;
  153.  font-size: 0;
  154. }
  155.  
  156. /* Large Customs */
  157.  
  158. #column_2 .custom_panel {
  159.  background-origin: border-box;
  160.  width: 306px;
  161.  height: 323px;
  162.  padding: 0 10px 0 0;
  163.  border: 30px solid transparent;
  164.  border-width: 30px 25px 30px 25px;
  165.  opacity: .5;
  166.  overflow-y: scroll;
  167.  transition: opacity 1s ease-in-out;
  168.  z-index: 1;
  169. }
  170.  
  171. #column_2 .custom_panel:hover {
  172.  opacity: 1;
  173.  z-index: 9;
  174. }
  175.  
  176. #column_2 .custom_panel:nth-of-type(1) {
  177.  background-position: 0px -742px;
  178.  top: 44px;
  179.  left: 506px;
  180. }
  181.  
  182. #column_2 .custom_panel:nth-of-type(2) {
  183.  background-position: -306px -742px;
  184.  top: 316px;
  185.  left: 680px;
  186. }
  187.  
  188. /* Small Customs */
  189.  
  190. #column_3 .custom_panel {
  191.  background: none;
  192.  width: 72px;
  193.  height: 190px;
  194.  padding: 0;
  195. }
  196.  
  197. #column_3 .custom_panel div[id*='content'] {
  198.  width: 90px;
  199.  height: 100%;
  200.  padding-right: 30px;
  201.  overflow-x: hidden;
  202.  overflow-y: scroll;
  203. }
  204.  
  205. #column_3 .custom_panel:nth-of-type(1) {
  206.  top: 430px;
  207.  left: 552px;
  208. }
  209.  
  210. #column_3 .custom_panel:nth-of-type(2) {
  211.  color: #000830;
  212.  top: 76px;
  213.  left: 868px;
  214. }
  215. #column_3 .custom_panel:nth-of-type(2) a {color: #000000;}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement