Advertisement
althindor

New Code for Lhocki

Nov 26th, 2017
199
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 6.33 KB | None | 0 0
  1. /* Code by AlthIndor */
  2.  
  3. html, body {
  4.  background: url('https://wallpapercave.com/wp/JpstKRv.jpg') fixed center no-repeat;
  5.  background-size: cover;
  6. }
  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/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/v10/gk5FxslNkTTHtojXrkp-xONSK5BxN3NFS4EJkViHIqo.woff) format('woff');
  22. }
  23.  
  24. /* Header */
  25.  
  26. #gaia_header {
  27.  background: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0));
  28.  background-origin: border-box;
  29.  border-bottom: 4px solid transparent;
  30. }
  31.  
  32. #gaia_header #header_left, #gaia_header #header_right {
  33.  background: none !important;
  34.  width: 50% !important;
  35.  font-size: 0 !important;
  36.  box-sizing: border-box;
  37. }
  38.  
  39. #gaia_header #header_right {
  40.  float: right !important;
  41.  padding-right: 3px !important;
  42. }
  43.  
  44. #gaia_header li {
  45.  text-align: center;
  46.  padding: 0 5px 0 5px;
  47. }
  48. #gaia_header .spacer {display: none !important;}
  49.  
  50. #header_left img {
  51.  background: url('http://s.cdn.gaiaonline.com/images/gaia_global/gaia_header/br_gaia_logo_header.png') no-repeat !important;
  52.  background-size: 38px auto !important;
  53.  width: 0 !important;
  54.  height: 0 !important;
  55.  padding: 18px 38px 0 0 !important;
  56.  margin: 0 -1px 0 1px;
  57. }
  58.  
  59. #gaia_header a {
  60.  color: #FFFFFF !important;
  61.  font-family: 'Open Sans Condensed', sans-serif;
  62.  font-size: 10px !important;
  63.  letter-spacing: .03em;
  64.  text-decoration: none;
  65.  text-transform: uppercase;
  66. }
  67.  
  68. /* Columns */
  69.  
  70. #columns, #column_1, #column_2, #column_3 {
  71.  float: none;
  72.  display: block;
  73.  padding: 0;
  74.  margin: 0;
  75. }
  76.  
  77. #column_1, #column_2 {
  78.  width: 1px;
  79.  height: 1px;
  80. }
  81.  
  82. /* Panels */
  83.  
  84. .panel {
  85.  color: #FFFFFF;
  86.  font-family: 'Open Sans', sans-serif;
  87.  text-align: center;
  88.  padding: 0;
  89.  margin: 0;
  90. }
  91.  
  92. .panel a {
  93.  color: inherit;
  94.  font-weight: normal;
  95. }
  96.  
  97. .panel h2, #column_3::before {
  98.  background: none;
  99.  height: 16px;
  100.  font-family: 'Open Sans Condensed', sans-serif;
  101.  font-size: 16px;
  102.  line-height: 14px;
  103.  text-align: center;
  104.  padding: 0;
  105.  margin: 0 0 22px 0;
  106. }
  107.  
  108. #id_about, #id_comments, #column_3 {
  109.  background: rgba(0,0,0,.9);
  110.  display: block;
  111.  width: 340px;
  112.  height: 340px;
  113.  padding: 20px 0 0 0;
  114.  position: fixed;
  115.  top: calc(50% - 170px);
  116.  border-radius: 50%;
  117.  box-sizing: border-box;
  118.  overflow: hidden;
  119.  opacity: .5;
  120.  transition: all 1s ease-in-out;
  121. }
  122.  
  123. #id_about:hover, #id_comments:hover, #column_3:hover {
  124.  opacity: 1;
  125.  transform: rotate(360deg);
  126. }
  127.  
  128. #id_about {left: calc(50% - 170px - 360px);}
  129. #id_comments {left: calc(50% - 170px);}
  130. #column_3 {left: calc(50% - 170px + 360px);}
  131.  
  132. /* Inner Sections */
  133.  
  134. #id_about h2 ~ ul:not(.buttons), #id_comments dl, #id_wishlist {
  135.  width: calc(100% - 102px);
  136.  height: calc(100% - 100px);
  137.  padding: 0 100px 0 0;
  138.  margin: 0 0 0 60px;
  139.  overflow-x: hidden;
  140.  overflow-y: scroll;
  141. }
  142.  
  143. /* Comments */
  144.  
  145. #id_comments #alerts_banner {display: none;}
  146. #id_comments .deletecomment {display: none;}
  147. #id_comments .dropBox {display: none;}
  148. #id_comments dd:nth-last-of-type(n+2) {margin-bottom: 10px;}
  149. #id_comments dl ~ .clear {display: none;}
  150.  
  151. #id_comments dt {
  152.  height: auto;
  153.  line-height: normal;
  154.  text-align: center;
  155.  padding: 0 0 2px 0;
  156. }
  157. #id_comments .username {float: none;}
  158.  
  159. /* Buttons */
  160.  
  161. #id_comments h2 ~ div, #id_comments div ~ p, .media_panel {
  162.  background-image: url('https://i.imgur.com/vcNz49l.png');
  163.  background-size: 20px auto;
  164. }
  165.  
  166. /* Comments Links */
  167.  
  168. #id_comments h2 ~ div, #id_comments div ~ p {
  169.  padding: 0;
  170.  margin: 0;
  171.  position: absolute;
  172. }
  173.  
  174. #id_comments h2 ~ div {
  175.  background-position: -4px -4px;
  176.  width: 12px;
  177.  height: 12px;
  178.  top: 21px;
  179.  left: 112px;
  180.  border: 1px solid rgba(255,255,255,.5);
  181.  border-radius: 50%;
  182. }
  183.  
  184. #id_comments div ~ p {
  185.  background-position: 0 -120px;
  186.  width: 18px;
  187.  height: 18px;
  188.  top: 18px;
  189.  right: 112px;
  190. }
  191.  
  192. #id_comments h2 ~ div a, #id_comments div ~ p a, #id_comments #alert_container {
  193.  display: block;
  194.  width: 100%;
  195.  height: 100%;
  196.  font-size: 0;
  197.  padding: 0;
  198. }
  199.  
  200. /* Wish List */
  201.  
  202. #id_wishlist {
  203.  display: flex;
  204.  flex-flow: row wrap;
  205.  align-content: flex-start;
  206.  justify-content: center;
  207.  background: none;
  208.  margin-top: 38px;
  209. }
  210. #id_wishlist .clear {display: none;}
  211. #id_wishlist .premium_sparkle {display: none;}
  212. #id_wishlist .owner_checkmark {margin: 1px 0 0 -4px;}
  213. #id_wishlist h2 {display: none;}
  214.  
  215. #id_wishlist .item {
  216.  background: rgba(255,255,255,.2);
  217.  width: 30px;
  218.  height: 30px;
  219.  padding: 4px;
  220.  margin: 0 3px 6px 3px;
  221.  position: relative;
  222.  border-radius: 50%;
  223.  transition: background .5s ease-in-out;
  224. }
  225. #id_wishlist .item:hover {background: #FFFFFF;}
  226.  
  227. /* Fix A Bug In Chrome */
  228.  
  229. #column_3::before {
  230.  content: 'WISH LIST';
  231.  width: 200px;
  232.  color: #FFFFFF;
  233.  margin: 0;
  234.  position: absolute;
  235.  top: 20px;
  236.  left: calc((100% - 200px) / 2);
  237. }
  238.  
  239. /* Media */
  240.  
  241. .media_panel, .media_panel .buttons {
  242.  position: fixed;
  243.  left: 7px;
  244. }
  245.  
  246. .media_panel {
  247.  background-color: rgba(0,0,0,.9);
  248.  background-size: 30px auto;
  249.  background-position: 0 -90px;
  250.  width: 30px;
  251.  height: 30px !important;
  252.  font-size: 0;
  253.  top: 30px;
  254.  border: 2px solid transparent;
  255.  border-radius: 5px;
  256.  overflow: hidden;
  257.  opacity: .3;
  258.  transition: opacity 1s ease-in-out;
  259. }
  260. .media_panel:hover {opacity: 1;}
  261.  
  262. .media_panel h2 {display: none;}
  263. .media_panel .buttons {top: 70px;}
  264.  
  265. .media_panel object {
  266.  width: 200px;
  267.  height: 200px;
  268.  position: absolute;
  269.  bottom: -2px;
  270.  left: -10px;
  271.  opacity: 0;
  272. }
  273.  
  274. /* Enter Button */
  275.  
  276. #texts_container {position: relative; z-index: 999;}
  277. #texts_container .text-decoration {z-index: 999 !important;}
  278. #texts_container .spoiler-revealed {display: none;}
  279.  
  280. #texts_container .spoiler-control-show {
  281.  background: #000;
  282.  width: 100%;
  283.  height: 100%;
  284.  font-size: 0;
  285.  position: fixed;
  286.  top: 0;
  287.  left: 0;
  288.  border: none;
  289. }
  290.  
  291. #texts_container .spoiler-control-show::after {
  292.  content: 'CLICK TO ENTER';
  293.  width: 100%;
  294.  height: 100px;
  295.  color: #FFFFFF;
  296.  font-family: 'Open Sans Condensed', sans-serif;
  297.  font-size: 100px;
  298.  line-height: 90px;
  299.  text-align: center;
  300.  position: absolute;
  301.  top: calc((100% - 100px) / 2);
  302.  left: 0;
  303. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement