Advertisement
althindor

Code for Kino Fuzen

Dec 27th, 2017
278
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 6.20 KB | None | 0 0
  1. /* Code by AlthIndor */
  2.  
  3. html, body {
  4.  background: url('https://i.imgur.com/30QLPDT.png');
  5.  background-size: cover;
  6. }
  7.  
  8. /* Animations */
  9.  
  10. @keyframes mainDelay {
  11.  from {opacity: 0; pointer-events: none;}
  12.  to {opacity: 1; pointer-events: all;}
  13. }
  14.  
  15. /* Fonts */
  16.  
  17. @font-face {
  18.  font-family: 'Inconsolata';
  19.  font-style: normal;
  20.  font-weight: 400;
  21.  src: local('Inconsolata'), url(http://fonts.gstatic.com/s/inconsolata/v12/BjAYBlHtW3CJxDcjzrnZCIbN6UDyHWBl620a-IRfuBk.woff) format('woff');
  22. }
  23.  
  24. /* Header */
  25.  
  26. #gaia_header {background: rgba(0,0,0,.8) !important;}
  27.  
  28. #gaia_header #header_left, #gaia_header #header_right {
  29.  background: none !important;
  30.  font-size: 0 !important;
  31. }
  32. #gaia_header #header_right {float: right !important;}
  33.  
  34. #gaia_header li {
  35.  padding: 0 5px 0 5px;
  36.  margin: 0;
  37.  text-align: center;
  38. }
  39. #gaia_header .spacer {display: none !important;}
  40.  
  41. #gaia_header #header_left img {
  42.  background: url('https://i.imgur.com/F6Qmy0x.png') -750px -350px no-repeat !important;
  43.  width: 0 !important;
  44.  padding: 0 37px 0 0;
  45.  margin: 4px -2px 0 0;
  46. }
  47.  
  48. #gaia_header a {color: #FFB000 !important;}
  49. #gaia_header a:hover {color: #FFFFFF !important;}
  50.  
  51. /* Scrollbars */
  52.  
  53. #columns {
  54.  scrollbar-track-color: #FFB000;
  55.  scrollbar-arrow-color: #000000;
  56.  scrollbar-face-color: #000000;
  57.  scrollbar-shadow-color: #FFB000;
  58. }
  59.  
  60. #columns ::-webkit-scrollbar {
  61.  background: #FFB000;
  62.  width: 17px;
  63. }
  64.  
  65. #columns ::-webkit-scrollbar-thumb {
  66.  background: #000000;
  67.  border: 1px solid #FFB000;
  68. }
  69.  
  70. /* Columns */
  71.  
  72. #columns, #column_1, #column_2 {
  73.  padding: 0;
  74.  margin: 0;
  75.  position: absolute;
  76.  box-sizing: border-box;
  77.  overflow: hidden;
  78. }
  79.  
  80. #columns {
  81.  background: url('https://i.imgur.com/F6Qmy0x.png');
  82.  background-origin: border-box;
  83.  width: 900px;
  84.  height: 350px;
  85.  top: calc((100% - 352px) / 2 + 80px);
  86.  left: calc((100% - 900px) / 2);
  87.  border: 4px solid transparent;
  88.  border-top-width: 22px;
  89.  box-shadow: 0 2px 6px 1px rgba(0,0,0,.6);
  90.  overflow: visible;
  91.  z-index: 9;
  92.  animation: mainDelay 0s linear 33s both;
  93. }
  94.  
  95. #column_1 {
  96.  width: 222px;
  97.  height: 198px;
  98.  bottom: 0;
  99.  left: 0;
  100. }
  101.  
  102. #column_2 {
  103.  width: calc(100% - 224px);
  104.  height: 100%;
  105.  bottom: 0;
  106.  right: 0;
  107.  border: 1px solid rgba(255,176,0,.8);
  108.  border-right: none;
  109. }
  110. @-moz-document url-prefix() {#column_2 {background: linear-gradient(to left, #F2F2F2 17px, rgba(0,0,0,0) 17px); border-right: 1px solid rgba(255,176,0,.8);}}
  111.  
  112. /* Header Text */
  113.  
  114. #gaia_header a, #column_2 .panel h2, #id_contact li, #id_contact li a, .forum_userstatus span {
  115.  font-family: 'Inconsolata', monospace !important;
  116.  font-weight: bold !important;
  117.  letter-spacing: .05em;
  118.  text-decoration: none;
  119.  text-shadow: 0 0 2px #000;
  120.  text-transform: uppercase;
  121. }
  122.  
  123. #gaia_header a, #id_contact li, .forum_userstatus span {font-size: 12px !important;}
  124. #column_2 .panel h2, #id_contact li, #id_contact li a, .forum_userstatus span {color: rgba(255,255,255,.9) !important;}
  125. #id_contact li, #id_contact li a, .forum_userstatus span {text-align: center !important;}
  126.  
  127. /* Panels */
  128.  
  129. .panel {
  130.  background: none;
  131.  color: #FFFFFF;
  132.  font-family: 'Inconsolata', monospace;
  133.  font-size: 12px;
  134.  padding: 0;
  135.  margin: 0;
  136.  position: absolute;
  137.  box-sizing: border-box;
  138. }
  139.  
  140. .panel a {
  141.  color: #FFB000;
  142.  font-weight: normal;
  143. }
  144.  
  145. #column_2 .panel {
  146.  width: 100%;
  147.  height: 100%;
  148.  text-align: justify;
  149.  padding: 0 5px 0 0;
  150.  top: -400px;
  151.  left: 0;
  152.  border: 5px solid transparent;
  153.  border-right: none;
  154.  box-sizing: border-box;
  155.  overflow-x: hidden;
  156.  overflow-y: scroll;
  157. }
  158. #column_2 .panel:hover {top: 0;}
  159. #column_2 .panel img {max-width: 100% !important;}
  160.  
  161. #column_2 .panel h2 {
  162.  background: rgba(255,176,0,.9);
  163.  width: 224px;
  164.  height: 40px;
  165.  font-size: 14px;
  166.  line-height: 40px;
  167.  text-align: right;
  168.  padding: 0 10px 0 0;
  169.  margin: 0;
  170.  position: fixed;
  171.  left: calc((100% - 900px) / 2 + 4px);
  172.  box-sizing: border-box;
  173.  z-index: 999;
  174. }
  175. #column_1 .panel h2 {display: none;}
  176.  
  177. #id_about h2 {top: calc((100% - 352px) / 2 + 102px);}
  178. #id_equipment h2 {top: calc((100% - 352px) / 2 + 144px);}
  179. .custom_panel h2 {top: calc((100% - 352px) / 2 + 186px);}
  180.  
  181. /* Details */
  182.  
  183. #id_details {
  184.  width: 140px;
  185.  height: 166px;
  186.  padding: 8px 10px;
  187.  top: 0;
  188.  right: 0;
  189.  z-index: 8;
  190. }
  191.  
  192. #id_details #animated_item ~ p {display: none;}
  193. #id_details p:nth-of-type(n+2) {display: none;}
  194.  
  195. #id_details .forum_userstatus {
  196.  background: none;
  197.  width: 80px;
  198.  height: 40px;
  199.  padding: 0;
  200.  margin: 0;
  201.  position: absolute;
  202.  top: auto;
  203.  bottom: 0;
  204.  left: -82px;
  205.  border: none;
  206. }
  207. .forum_userstatus .pushBox {display: none;}
  208.  
  209. .forum_userstatus .statuslinks, .forum_userstatus span  {
  210.  background: none !important;
  211.  height: 100% !important;
  212. }
  213.  
  214. .forum_userstatus span {
  215.  float: none !important;
  216.  width: 100% !important;
  217.  line-height: 40px;
  218.  padding: 0 !important;
  219. }
  220.  
  221. /* Contact */
  222.  
  223. #id_contact {
  224.  width: 80px;
  225.  top: 0;
  226.  left: 0;
  227.  z-index: 9;
  228. }
  229.  
  230. #id_contact ul:not(.buttons) li {
  231.  width: 100%;
  232.  height: 40px;
  233.  color: #FFFFFF;
  234.  line-height: 14px;
  235.  padding: 6px;
  236.  box-sizing: border-box;
  237. }
  238. #id_contact ul:not(.buttons) li:nth-of-type(n+2) {margin-top: 2px;}
  239. #id_contact ul:not(.buttons) li a {text-decoration: none;}
  240.  
  241. /* Equipment */
  242.  
  243. .premium_sparkle {display: none;}
  244. .owner_checkmark {display: none;}
  245.  
  246. #id_equipment .item {
  247.  background: #FFB000;
  248.  text-align: center;
  249.  padding: 5px;
  250.  margin: 0 5px 10px 0;
  251.  overflow: hidden;
  252. }
  253. #id_equipment .item:hover {background-color: #FFFFFF;}
  254.  
  255. #id_equipment .item a {
  256.  display: block;
  257.  width: 100%;
  258.  height: 100%;
  259.  position: relative;
  260. }
  261.  
  262. /* Media Panel */
  263.  
  264. .media_panel {
  265.  width: 100%;
  266.  height: 30px !important;
  267.  bottom: 0;
  268.  left: 0;
  269.  overflow: hidden;
  270. }
  271.  
  272. .media_panel object {
  273.  width: 100%;
  274.  height: 360px;
  275.  position: absolute;
  276.  bottom: 0;
  277.  left: 0;
  278.  opacity: 0;
  279. }
  280.  
  281. /* Starting Window */
  282.  
  283. body::before {
  284.  content: '';
  285.  background: url('https://images2.imgbox.com/f2/3a/r9gHlQez_o.gif'), url('https://i.imgur.com/F6Qmy0x.png');
  286.  background-repeat: no-repeat, no-repeat;
  287.  background-position: 6px 25px, 0 -350px;
  288.  display: block;
  289.  width: 750px;
  290.  height: 250px;
  291.  position: fixed;
  292.  top: calc((100% - 352px) / 2 - 60px);
  293.  left: calc((100% - 900px) / 2 - 100px);
  294.  box-shadow: 0 2px 6px 1px rgba(0,0,0,.6);
  295.  z-index: 1;
  296. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement