althindor

Pro for AngelBabis

Nov 25th, 2018
336
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 7.99 KB | None | 0 0
  1. /* Code by AlthIndor, Graphics by Cassiel Socks */
  2.  
  3. html, body {background: url('https://i.imgur.com/fp6b6vN.jpg') fixed no-repeat center / cover; overflow-x: hidden;}
  4. #columns {background: url('https://images2.imgbox.com/fd/08/kmOXxcjg_o.png') no-repeat;}
  5.  
  6. :root {
  7.  --dark-color: #641680;
  8.  --light-color: #FFDEAD;
  9.  --border-color: rgba(0,0,0,.5);
  10.  --button-color: rgba(68,64,60,.6);
  11.  --header-color: rgba(128,255,0,.7);
  12. }
  13.  
  14. #columns ::-webkit-scrollbar {
  15.  background: #000000;
  16.  width: 10px;
  17.  border-radius: 5px;
  18. }
  19.  
  20. #columns ::-webkit-scrollbar-thumb {
  21.  background: #FFFFFF;
  22.  border: 1px solid #000000;
  23.  border-radius: 5px;
  24. }
  25.  
  26. /* Fonts */
  27.  
  28. @font-face {
  29.  font-family: 'Sancreek';
  30.  font-style: normal;
  31.  font-weight: 400;
  32.  src: local('Sancreek Regular'), local('Sancreek-Regular'), url(https://fonts.gstatic.com/s/sancreek/v8/pxiHypAnsdxUm159X4D5V14.woff2) format('woff2'), url(https://fonts.gstatic.com/s/sancreek/v8/pxiHypAnsdxUm159X4D5V1g.woff) format('woff');
  33. }
  34.  
  35. @font-face {
  36.  font-family: 'Open Sans';
  37.  font-style: normal;
  38.  font-weight: 400;
  39.  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');
  40. }
  41.  
  42. /* Header */
  43.  
  44. #gaia_header {
  45.  background: var(--header-color);
  46.  border-bottom: 3px solid transparent;
  47.  box-shadow: 0 2px 1px #000;
  48. }
  49.  
  50. #gaia_header #header_left, #gaia_header #header_right {
  51.  background: none;
  52.  font: 0/28px 'Sancreek', serif !important;
  53.  padding: 0 7px !important;
  54.  box-sizing: border-box;
  55. }
  56. #gaia_header #header_right {float: right;}
  57. #gaia_header .spacer {display: none !important;}
  58.  
  59. #header_left img {
  60.  background: url('https://gaia.hs.llnwd.net/e1/images/gaia_global/gaia_header/br_gaia_logo_header.png') 0 0 no-repeat;
  61.  background-size: auto 200%;
  62.  width: 0;
  63.  height: 19px;
  64.  padding: 0 41px 0 0;
  65.  margin: -5px -4px 0 -1px;
  66.  filter: drop-shadow(0 0 1px rgba(0,0,0,.5));
  67. }
  68.  
  69. #gaia_header a {
  70.  color: #FFFFFF !important;
  71.  letter-spacing: .03em;
  72.  font-size: 12px !important;
  73.  font-weight: normal;
  74.  text-decoration: none;
  75.  text-shadow: 0 0 2px rgba(0,0,0,.5);
  76.  text-transform: uppercase;
  77. }
  78. #gaia_header a:hover {color: var(--light-color) !important;}
  79.  
  80. #header_left li:nth-last-of-type(n+2)::after, #header_right li:nth-of-type(n+2)::before {
  81.  content: '◆';
  82.  color: var(--button-color);
  83.  font-size: 13px;
  84.  margin: 0 5px;
  85. }
  86.  
  87. /* Columns */
  88.  
  89. #columns, #column_1, #column_2, #column_3 {
  90.  float: none;
  91.  margin: 0;
  92.  position: absolute;
  93. }
  94.  
  95. #columns {
  96.  width: 1300px;
  97.  height: 1060px;
  98.  top: 60px;
  99.  left: calc(50% - 650px);
  100.  transform: translateZ(0);
  101.  z-index: 3;
  102. }
  103.  
  104. #column_1, #column_2, #column_3 {
  105.  width: 1px;
  106.  height: 1px;
  107.  top: 0;
  108.  left: 0;
  109.  overflow: visible;
  110. }
  111.  
  112. #column_1 {z-index: 2;}
  113. #column_2 {z-index: 1;}
  114.  
  115. /* Panels */
  116.  
  117. .panel {
  118.  background: none;
  119.  color: #F5F5DC;
  120.  font: 12px/1.5em 'Open Sans', sans-serif;
  121.  text-align: justify;
  122.  padding: 0;
  123.  margin: 0;
  124.  position: absolute;
  125.  box-sizing: border-box;
  126. }
  127. .panel h2 {display: none;}
  128. .panel a {text-decoration: none;}
  129.  
  130. #id_about, #id_comments {
  131.  width: 370px;
  132.  height: 370px;
  133.  top: 330px;
  134.  border: 15px solid transparent;
  135.  border-top-width: 25px;
  136.  overflow-x: hidden;
  137.  overflow-y: scroll;
  138. }
  139. #id_about img, #id_comments .postcontent img {max-width: 100% !important;}
  140.  
  141. #id_about a, #id_comments a {
  142.  color: #00FF00;
  143.  font-weight: normal;
  144. }
  145. #id_about a:hover, #id_comments a:hover {color: var(--light-color);}
  146.  
  147. #id_about {
  148.  line-height: 1.7em;
  149.  padding-right: 15px;
  150.  left: 660px;
  151. }
  152.  
  153. #id_comments {
  154.  direction: rtl;
  155.  padding-left: 15px;
  156.  left: 270px;
  157. }
  158. #id_comments dl {direction: ltr;}
  159.  
  160. #id_wishlist, #id_footprints {overflow: hidden;}
  161. #id_wishlist:hover, #id_footprints:hover {overflow-y: auto;}
  162.  
  163. /* Comments */
  164.  
  165. #id_comments #alerts_banner {display: none;}
  166. #id_comments .deletecomment {margin: 0 0 0 10px;}
  167. #id_comments .date {font: 85%/20px monospace;}
  168. #id_comments dd:nth-last-of-type(n+2) {margin-bottom: 15px;}
  169. #id_comments dd:last-of-type {margin-bottom: 0;}
  170.  
  171. #id_comments dt {
  172.  height: auto;
  173.  line-height: normal;
  174.  text-align: left;
  175.  padding: 0;
  176.  margin: 0 0 2px 0;
  177.  border-bottom: 1px dotted #808080;
  178. }
  179.  
  180. #id_comments .username {
  181.  float: none;
  182.  margin-bottom: -2px;
  183. }
  184.  
  185. #id_comments .dropBox {
  186.  background: rgba(255,255,255,.2);
  187.  width: 50px;
  188.  height: 50px;
  189.  margin: 3px 10px 0px 0px;
  190.  border: 1px solid transparent;
  191.  border-radius: 3px;
  192.  box-sizing: border-box;
  193.  overflow: hidden;
  194.  filter: sepia(50%);
  195. }
  196. #id_comments dd:hover .dropBox {filter: none;}
  197.  
  198. #id_comments .dropBox img {
  199.  width: 120px;
  200.  height: 150px;
  201.  margin: -27px 0 0 -46px;
  202. }
  203.  
  204. /* Contact and Comments Links */
  205.  
  206. #id_contact ul:not(.buttons) li, #id_comments h2 + div {
  207.  background: url('https://i.imgur.com/vcNz49l.png') center 0 #404040;
  208.  background-clip: content-box;
  209.  background-size: 40px auto;
  210.  width: 40px;
  211.  height: 40px;
  212.  font-size: 0;
  213.  position: relative;
  214.  border: 5px solid #000;
  215. }
  216. #id_contact ul:not(.buttons) li:hover, #id_comments h2 + div:hover {background-color: var(--header-color);}
  217. #id_comments h2 ~ p {display: none;}
  218.  
  219. #id_contact ul:not(.buttons) li a, #id_comments h2 + div a {
  220.  display: block;
  221.  width: 100%;
  222.  height: 100%;
  223.  position: absolute;
  224.  top: 0;
  225.  left: 0;
  226. }
  227.  
  228. #id_contact ul:not(.buttons) li {float: left;}
  229. #id_contact ul:not(.buttons) li:nth-of-type(2) {background-position-y: -40px; margin-left: 10px;}
  230. #id_contact ul:not(.buttons) li:nth-of-type(3) {background-position-y: -80px; margin-left: 660px;}
  231. #id_comments h2 + div {background-position: 0 -240px;}
  232.  
  233. #id_contact {
  234.  width: 820px;
  235.  top: 96px;
  236.  left: 210px;
  237. }
  238.  
  239. #id_comments h2 + div {
  240.  position: fixed;
  241.  top: 96px;
  242.  right: 210px;
  243. }
  244.  
  245. /* Wish List Drawer Version */
  246.  
  247. #id_wishlist {
  248.  display: grid;
  249.  grid-template-rows: auto;
  250.  grid-template-columns: repeat(8, 1fr);
  251.  grid-row-gap: 10px;
  252.  grid-column-gap: 6px;
  253.  grid-auto-flow: row dense;
  254.  justify-items: center;
  255.  width: 500px;
  256.  height: 70px;
  257.  top: 720px;
  258.  left: 401px;
  259.  border: 10px solid transparent;
  260.  border-radius: 10px;
  261.  transition: all .5s ease-in-out, padding 0s linear;
  262.  z-index: 9;
  263. }
  264. #id_wishlist .clear {display: none;}
  265.  
  266. #id_wishlist .owner_checkmark {
  267.  margin: 0;
  268.  top: calc(50% + 4px);
  269.  left: calc(50% - 16px);
  270. }
  271. .premium_sparkle {display: none;}
  272.  
  273. #id_wishlist:hover {
  274.  background: #3A3834;
  275.  height: 130px;
  276.  padding-right: 8px;
  277.  margin-top: -60px;
  278.  box-shadow: 0 0 0 3px #101010;
  279. }
  280.  
  281. #id_wishlist .item {
  282.  background: var(--button-color);
  283.  background-clip: padding-box;
  284.  width: 30px;
  285.  height: 30px;
  286.  text-align: center;
  287.  padding: 7px;
  288.  position: relative;
  289.  border: 3px solid var(--border-color);
  290.  border-radius: 10px;
  291. }
  292. #id_wishlist .item:hover {background: var(--dark-color);}
  293.  
  294. /* Visitors */
  295.  
  296. #id_footprints, #id_footprints a {font-weight: bold;}
  297. #id_footprints a {color: var(--dark-color);}
  298. #id_footprints a:hover {color: #000000;}
  299.  
  300. #id_footprints {
  301.  background: rgba(255,255,176,.2);
  302.  width: 300px;
  303.  height: 90px;
  304.  color: #000000;
  305.  text-shadow: 0 0 4px var(--light-color);
  306.  top: 903px;
  307.  left: 478px;
  308.  border: 5px solid transparent;
  309.  border-radius: 5px;
  310. }
  311.  
  312. /* Fog Animation */
  313.  
  314. @keyframes fog_move {
  315.  0% {background-position-x: -1920px;}
  316.  100% {background-position-x: 0;}
  317. }
  318.  
  319. @keyframes fog_mid_o {
  320.  0% {opacity: .6;}
  321.  22% {opacity: 1;}
  322.  40% {opacity: .8;}
  323.  58% {opacity: .4;}
  324.  80% {opacity: .7;}
  325.  100% {opacity: .6;}
  326. }
  327.  
  328. body::before, body::after {
  329.  content: '';
  330.  width: 100%;
  331.  height: 100%;
  332.  position: fixed;
  333.  top: 0;
  334.  left: 0;
  335. }
  336.  
  337. body::before {
  338.  background: url('https://i.imgur.com/RDH7yir.png') bottom left repeat-x;
  339.  animation: fog_mid_o 20s linear infinite, fog_move 260s ease-in-out infinite alternate;
  340.  z-index: 1;
  341. }
  342.  
  343. body::after {
  344.  background: url('https://i.imgur.com/XAxKvxK.png') bottom left repeat-x;
  345.  animation: fog_mid_o 15s linear infinite, fog_move 240s ease-in-out infinite alternate-reverse;
  346.  z-index: 2;
  347. }
Add Comment
Please, Sign In to add comment