Advertisement
althindor

Pro for MonokuroBara

Jan 27th, 2019
449
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 11.83 KB | None | 0 0
  1. /* Design by Cassiel Socks and Code by AlthIndor */
  2. /* Falling Petals by Aaron Griffin at Codepen.io */
  3.  
  4. #column_2 .panel:nth-of-type(n+2), #id_details p:first-of-type, #id_contact ul:not(.buttons) li, .custom_panel b {background: url('https://images2.imgbox.com/79/de/17Ee9XFD_o.png') border-box no-repeat;}
  5. html, body {background: url('https://i.imgur.com/xgeYps2.jpg') fixed no-repeat top center / cover;}
  6. body a {text-decoration: none !important;}
  7.  
  8. /* Fonts */
  9.  
  10. @font-face {
  11.  font-family: 'Open Sans';
  12.  font-style: normal;
  13.  font-weight: 400;
  14.  src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
  15. }
  16.  
  17. @font-face {
  18.  font-family: 'Open Sans Condensed';
  19.  font-style: normal;
  20.  font-weight: 700;
  21.  src: local('Open Sans Condensed'), local('OpenSans-Condensed'), url(https://fonts.gstatic.com/s/opensanscondensed/v12/z7NFdQDnbTkabZAIOl9il_O6KJj73e7Ff0GmDuXMRw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/opensanscondensed/v10/gk5FxslNkTTHtojXrkp-xONSK5BxN3NFS4EJkViHIqo.woff) format('woff');
  22. }
  23.  
  24. @font-face {
  25.  font-family: 'Patrick Hand';
  26.  font-style: normal;
  27.  font-weight: 400;
  28.  src: local('Patrick Hand'), local('PatrickHand-Regular'), url(https://fonts.gstatic.com/s/patrickhand/v12/LDI1apSQOAYtSuYWp8ZhfYe8XsLL.woff2) format('woff2');
  29. }
  30.  
  31. /* Header */
  32.  
  33. #viewer #gaia_header, #header_left, #header_right {background: none !important;}
  34. #viewer #gaia_header {position: fixed !important;}
  35. #header_right {float: right !important;}
  36.  
  37. #gaia_header #header_left, #gaia_header #header_right {
  38.  box-sizing: border-box;
  39.  font: normal 0/28px 'Open Sans Condensed', sans-serif !important;
  40.  padding: 0 2px !important;
  41. }
  42. #gaia_header .spacer {display: none !important;}
  43. #gaia_header li {margin: 0 5px !important;}
  44.  
  45. #header_left img {
  46.  background: #FFFFFF;
  47.  height: 0;
  48.  mask-image: url('https://i.imgur.com/5FTB40o.png');
  49.  padding: 16px 37px 0 0;
  50.  transition: background .5s ease-in-out;
  51.  width: 0;
  52. }
  53. #header_left img {-webkit-mask-image: url('https://i.imgur.com/5FTB40o.png');}
  54. #header_left li:nth-of-type(2) a:hover img {background: #FFE490;}
  55.  
  56. #gaia_header a {
  57.  color: #FFFFFF !important;
  58.  font-size: 13px !important;
  59.  font-weight: normal;
  60.  text-transform: uppercase;
  61.  transition: color .5s ease-in-out;
  62. }
  63. #gaia_header a:hover {color: #FFE490 !important;}
  64.  
  65. /* Columns */
  66.  
  67. #columns, #column_1, #column_2 {
  68.  display: block;
  69.  float: none;
  70.  margin: 0;
  71. }
  72. #column_3 {display: none;}
  73.  
  74. #column_1, #column_2 {
  75.  font-size: 0;
  76.  height: 100%;
  77.  position: absolute;
  78.  width: 100%;
  79. }
  80. #column_2 {transform: translateZ(0);}
  81.  
  82. #columns ::-webkit-scrollbar {
  83.  background: rgba(255,255,255,.5);
  84.  border-radius: 5px;
  85.  width: 10px;
  86. }
  87.  
  88. #columns ::-webkit-scrollbar-thumb {
  89.  background: rgba(32,64,128,.6) content-box;
  90.  border: 1px solid transparent;
  91.  border-radius: 5px;
  92. }
  93.  
  94. /* Panels */
  95.  
  96. .panel, .panel h2 {
  97.  box-sizing: border-box;
  98.  margin: 0;
  99.  padding: 0;
  100. }
  101. .panel {overflow: hidden;}
  102.  
  103. .panel a {color: #008000;}
  104. .panel a:hover {color: #004080;}
  105. .panel img {max-width: 100% !important;}
  106.  
  107. .custom_panel, #id_contact {background: none;}
  108. .custom_panel h2, #id_contact h2 {display: none;}
  109.  
  110. #column_2 .panel:nth-of-type(n+2) {
  111.  background-position: top right;
  112.  border: 20px solid transparent;
  113.  border-width: 0px 20px;
  114.  color: #002040;
  115.  font: 11px/1.6 'Open Sans', sans-serif;
  116.  height: 0px;
  117.  width: 430px;
  118. }
  119. #column_2 .panel:nth-of-type(2) {margin-top: 300px;}
  120.  
  121. #column_2 .panel:nth-of-type(n+2):hover {
  122.  border-width: 20px;
  123.  height: 300px;
  124. }
  125.  
  126. #column_2 .panel:nth-of-type(n+3):not(#id_comments), #id_comments dl {
  127.  overflow: hidden scroll;
  128.  padding-right: 10px;
  129. }
  130.  
  131. /* Panel Headers */
  132.  
  133. .panel h2 {
  134.  background: rgba(192,232,255,.8);
  135.  border-radius: 14px;
  136.  box-shadow: 0 0 5px #C0E8FF inset, 0 0 2px rgba(0,0,128,.25), 0 0 10px #D0FFFF;
  137.  color: #FFFFFF;
  138.  height: 28px;
  139.  font: normal 22px/26px 'Patrick Hand', cursive;
  140.  position: fixed;
  141.  text-align: center;
  142.  text-shadow: 0 0 1px #004080;
  143.  text-transform: capitalize;
  144.  transition: background .5s linear;
  145.  width: 170px;
  146. }
  147. .panel:hover h2 {background: sandybrown;}
  148.  
  149. .panel h2::after {
  150.  content: '';
  151.  display: none;
  152.  height: 40px;
  153.  left: 0;
  154.  position: absolute;
  155.  top: 50%;
  156.  width: 100%;
  157. }
  158. .panel:hover h2::after{display: block;}
  159.  
  160. /* Contact */
  161.  
  162. #id_contact {
  163.  height: 130px;
  164.  left: calc(50% - 172px);
  165.  width: 340px;
  166. }
  167.  
  168. #id_contact ul:not(.buttons) li, #id_contact ul:not(.buttons) li a {
  169.  display: block;
  170.  font-size: 0;
  171.  height: 90px;
  172.  width: 90px;
  173. }
  174.  
  175. #id_contact ul:not(.buttons) li {
  176.  float: left;
  177.  transform: scale(.75);
  178.  transition: filter .5s ease-in-out;
  179. }
  180. #id_contact ul:not(.buttons) li:hover {filter: saturate(500%);}
  181.  
  182. #id_contact ul:not(.buttons) li:nth-of-type(1) {background-position: 0 bottom;}
  183. #id_contact ul:not(.buttons) li:nth-of-type(2) {background-position: -90px bottom;}
  184. #id_contact ul:not(.buttons) li:nth-of-type(3) {background-position: -180px bottom;}
  185. #id_contact ul:not(.buttons) li:nth-of-type(odd) {margin-top: 40px;}
  186. #id_contact ul:not(.buttons) li:nth-of-type(n+2) {margin-left: 31px;}
  187.  
  188. /* Details */
  189.  
  190. #id_details p:first-of-type {
  191.  border: 90px solid transparent;
  192.  border-width: 90px 105px;
  193.  left: calc(50% - 165px);
  194.  pointer-events: none;
  195.  position: fixed;
  196.  top: 65px;
  197. }
  198. #id_details p:first-of-type img {filter: drop-shadow(-5px 0 #94B8D4) drop-shadow(5px 0 #94B8D4);}
  199. #id_details p:nth-of-type(n+2) {margin-bottom: 0;}
  200. #id_details .forum_userstatus {display: none;}
  201.  
  202. /* Comments */
  203.  
  204. #id_comments #alerts_banner {display: none;}
  205. #id_comments #alert_container {float: none;}
  206. #id_comments .deletecomment {margin: 0 0 0 10px;}
  207. #id_comments .dropBox {display: none;}
  208. #id_comments dd:nth-last-of-type(n+2) {margin-bottom: 15px;}
  209.  
  210. #id_comments dl {
  211.  box-sizing: border-box;
  212.  height: calc(100% - 35px);
  213.  position: absolute;
  214.  top: 35px;
  215.  width: 100%;
  216. }
  217.  
  218. #id_comments dt {
  219.  border-bottom: 1px dotted rgba(0,0,0,.2);
  220.  height: auto;
  221.  line-height: 1.2;
  222.  margin: 0 0 2px 0;
  223.  padding: 0 0 4px 0;
  224.  text-align: left;
  225. }
  226. #id_comments .username, #id_comments .date {float: none;}
  227. #id_comments .date {font: 85% monospace; padding-left: 1px;}
  228.  
  229. #id_comments h2 + div, #id_comments h2 ~ p {
  230.  background: #004080;
  231.  border-radius: 5px;
  232.  box-shadow: 0 0 2px #FFFFFF;
  233.  float: left;
  234.  height: 24px;
  235.  line-height: 24px;
  236.  text-align: center;
  237.  transition: background-color .5s ease-in-out;
  238.  width: calc(50% - 5px);
  239. }
  240. #id_comments h2 + div {margin: 0 10px 0 0;}
  241. #id_comments h2 + div a, #id_comments h2 ~ p a {color: #FFFFFF;}
  242. #id_comments h2 + div:hover, #id_comments h2 ~ p:hover {background: sandybrown;}
  243.  
  244. /* Wish and Equipped */
  245.  
  246. #id_wishlist, #id_equipment {
  247.  display: grid;
  248.  grid-template-columns: repeat(7, 42px);
  249.  grid-auto-rows: 42px;
  250.  grid-column-gap: calc((100% - (7*42px)) / 6);
  251.  grid-row-gap: 12px;
  252. }
  253. .premium_sparkle {display: none;}
  254.  
  255. #id_wishlist .item, #id_equipment .item {
  256.  background: rgba(0,64,128,.3);
  257.  border-radius: 50%;
  258.  height: 30px;
  259.  outline: 1px dotted #FFFFFF;
  260.  outline-offset: -3px;
  261.  padding: 6px;
  262.  transition: all .5s ease-in-out;
  263.  width: 30px;
  264. }
  265. #id_wishlist .item:hover, #id_equipment .item:hover {background: sandybrown;}
  266.  
  267. #id_wishlist .item img, #id_equipment .item img {transition: all .5s ease-in-out;}
  268. #id_wishlist .item:hover img[src*='thumbnails'], #id_equipment .item:hover img[src*='thumbnails'] {transform: rotate(360deg);}
  269.  
  270. /* Interests */
  271.  
  272. #id_interests {text-align: center;}
  273. #id_interests h3:nth-of-type(n+2) {margin-top: 10px;}
  274. #id_interests li:nth-last-of-type(n+2)::after {content: ',';}
  275. #id_interests li:last-of-type::before {content: 'and ';}
  276. #id_interests a {font-weight: normal;}
  277.  
  278. /* Signature Hack */
  279.  
  280. #id_signature br + br {display: none;}
  281. #id_signature h2 ~ p:first-of-type {margin-top: -30px;}
  282.  
  283. #id_signature img[style*='float'] {
  284.  float: none !important;
  285.  margin-bottom: 10px;
  286. }
  287.  
  288. /* Responsive Sizing */
  289.  
  290. @media screen and (max-width: 1199px) {
  291.  
  292.   #columns {
  293.     height: 980px;
  294.     left: calc(50% - 215px);
  295.     top: 0;
  296.     width: 430px;
  297.   }
  298.   @media screen and (min-height: 980px) {#columns {top: calc(50% - 490px);}}
  299.  
  300.   #column_2 .panel:nth-of-type(n+2) {margin-bottom: 38px;}
  301.   #column_2 .panel:nth-of-type(n+2):hover {margin-bottom: 48px;}
  302.   #column_2 .panel:nth-of-type(n+2) h2 {margin-top: -38px;}
  303.   #column_2 .panel:nth-of-type(n+2):hover h2 {margin-top: -58px;}
  304.   .panel h2 {left: calc(50% - 85px);}
  305.  
  306. }
  307.  
  308. @media screen and (min-width: 1200px) {
  309.  
  310.   #columns {
  311.     height: 560px;
  312.     left: calc(50% - 610px);
  313.     top: calc(50% - 230px);
  314.     width: 1220px;
  315.   }
  316.  
  317.   #column_2 {
  318.     margin-left: 10px;
  319.     overflow: visible;
  320.     width: calc(100% - 20px);
  321.   }
  322.  
  323.   #column_2 .panel:nth-of-type(n+2) {
  324.     position: absolute;
  325.     transition: all .5s ease-in-out;
  326.   }
  327.   #column_2 .panel:nth-of-type(n+3) {top: 259px;}
  328.   #id_about, #id_interests, #id_signature {left: 0;}
  329.   #id_equipment, #id_comments, #id_wishlist {right: 0;}
  330.  
  331.   #column_2 #id_details {
  332.     background-position: -330px -300px;
  333.     left: calc(50% - 130px);
  334.     top: 140px;
  335.     width: 260px;
  336.   }
  337.   #column_2 #id_details:hover {height: 120px;}
  338.  
  339.   #id_details h2 {
  340.     left: calc(50% - 85px);
  341.     top: 395px;
  342.   }
  343.  
  344.   .panel:not(#id_details) h2 {
  345.     top: 216px;
  346.     width: 130px;
  347.   }
  348.  
  349.   #id_about h2 {left: 0;}
  350.   #id_interests h2 {left: 150px;}
  351.   #id_signature h2 {left: 300px;}
  352.   #id_equipment h2 {right: 300px;}
  353.   #id_comments h2 {right: 150px;}
  354.   #id_wishlist h2 {right: 0;}
  355.  
  356. }
  357.  
  358. /* Falling Petals */
  359.  
  360. @keyframes falling1 {
  361.  from {transform: rotate(0deg); right: 0; top: -35px;}
  362.  to {transform: rotate(90deg); right: 350px; top: 100%;}
  363. }
  364.  
  365. @keyframes falling2 {
  366.  from {transform: rotate(90deg); right: 0; top: -35px;}
  367.  to {transform: rotate(0deg); right: 400px; top: 100%;}
  368. }
  369.  
  370. @keyframes falling3 {
  371.  from {transform: rotate(-20deg); right: 0; top: -35px;}
  372.  to {transform: rotate(-70deg); right: 230px; top: 100%;}
  373. }
  374.  
  375. .custom_panel, .custom_panel div[id*='content'] {
  376.  height: 100% !important;
  377.  width: 100% !important;
  378. }
  379.  
  380. .custom_panel {
  381.  left: 0;
  382.  position: fixed;
  383.  text-align: right;
  384.  top: 0;
  385. }
  386. .custom_panel br {display: none;}
  387.  
  388. .custom_panel b {
  389.  display: inline-block;
  390.  height: 0;
  391.  position: relative;
  392.  top: -35px;
  393.  width: 0;
  394. }
  395.  
  396. .custom_panel b:nth-of-type(n) {animation: falling1 5s 0s infinite ease-in-out;}
  397. .custom_panel b:nth-of-type(2n) {animation: falling2 5s 0s infinite ease-out;}
  398. .custom_panel b:nth-of-type(3n) {animation: falling3 5s 0s infinite ease-out;}
  399.  
  400. .custom_panel b:nth-of-type(3n+1) {opacity: .75;}
  401. .custom_panel b:nth-of-type(3n+2) {opacity: .5;}
  402.  
  403. .custom_panel b:nth-of-type(01) {animation-delay: 1.9s;}
  404. .custom_panel b:nth-of-type(02) {animation-delay: 3.9s;}
  405. .custom_panel b:nth-of-type(03) {animation-delay: 2.3s;}
  406. .custom_panel b:nth-of-type(04) {animation-delay: 4.4s;}
  407. .custom_panel b:nth-of-type(05) {animation-delay: 5.0s;}
  408. .custom_panel b:nth-of-type(06) {animation-delay: 3.5s;}
  409. .custom_panel b:nth-of-type(07) {animation-delay: 2.8s;}
  410. .custom_panel b:nth-of-type(08) {animation-delay: 1.5s;}
  411. .custom_panel b:nth-of-type(09) {animation-delay: 3.3s;}
  412. .custom_panel b:nth-of-type(10) {animation-delay: 2.5s;}
  413. .custom_panel b:nth-of-type(11) {animation-delay: 1.2s;}
  414. .custom_panel b:nth-of-type(12) {animation-delay: 4.1s;}
  415. .custom_panel b:nth-of-type(13) {animation-delay: 1.0s;}
  416. .custom_panel b:nth-of-type(14) {animation-delay: 4.7s;}
  417. .custom_panel b:nth-of-type(15) {animation-delay: 3.0s;}
  418.  
  419. .custom_panel b:nth-of-type(n) {
  420.  background-position: -680px bottom;
  421.  height: 31px;
  422.  width: 24px;
  423. }
  424.  
  425. .custom_panel b:nth-of-type(2n+2) {
  426.  background-position: -704px bottom;
  427.  height: 35px;
  428.  width: 25px;
  429. }
  430.  
  431. .custom_panel b:nth-of-type(4n+1) {
  432.  background-position: bottom right;
  433.  height: 26px;
  434.  width: 30px;
  435. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement