Advertisement
althindor

Pro for Bunah

Jul 2nd, 2019
479
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.58 KB | None | 0 0
  1. /* Graphics by Cassiel Socks, Code by AlthIndor */
  2.  
  3. html {
  4.  --global-shadow: 0 2px 1px rgba(0,0,0,.25);
  5.  --light-effects: hue-rotate(-120deg) saturate(75%);
  6.  --primary-color: #E05470;
  7.  --secndry-color: #4D77BB;
  8. }
  9.  
  10. html, body {background: url('https://i.imgur.com/hLbExAW.jpg') fixed center / cover;}
  11. body a {text-decoration: none !important;}
  12.  
  13. #columns, #id_contact ul:not(.buttons) li, .media_panel, #id_comments h2 + div, #id_comments h2 ~ p {background: url('https://images2.imgbox.com/15/bc/1NSnVORZ_o.png');}
  14.  
  15. /* Fonts */
  16.  
  17. @font-face {
  18.  font-family: 'Open Sans';
  19.  font-style: normal;
  20.  font-weight: 400;
  21.  src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
  22. }
  23.  
  24. @font-face {
  25.  font-family: 'Lobster Two';
  26.  font-style: normal;
  27.  font-weight: 400;
  28.  src: local('Lobster Two'), local('LobsterTwo'), url(https://fonts.gstatic.com/s/lobstertwo/v11/BngMUXZGTXPUvIoyV6yN5-fN5qU.woff2) format('woff2');
  29. }
  30.  
  31. /* Header */
  32.  
  33. #viewer #gaia_header {
  34.  background: #E84094;
  35.  height: 30px !important;
  36.  width: calc(100% - 20px) !important;
  37.  top: 10px !important;
  38.  left: 10px !important;
  39.  border-radius: 5px;
  40.  box-shadow: var(--global-shadow);
  41. }
  42.  
  43. #gaia_header #header_left, #gaia_header #header_right {
  44.  background: none !important;
  45.  font: 0/30px 'Lobster Two', cursive !important;
  46.  padding: 0 8px !important;
  47.  box-sizing: border-box;
  48. }
  49. #gaia_header #header_right {float: right;}
  50. #gaia_header .spacer {display: none !important;}
  51.  
  52. #header_left img {
  53.  background: url('https://graphics.gaiaonline.com/images/gaia_global/gaia_header/br_gaia_logo_header.png') 0 0 no-repeat;
  54.  background-size: 100% auto;
  55.  width: 0;
  56.  height: 18px;
  57.  padding: 0 38px 0 0;
  58.  margin: 0 -1px 0 0;
  59. }
  60.  
  61. #gaia_header a, #gaia_header li::before, #gaia_header li::after {
  62.  color: #FFFFFF !important;
  63.  font-weight: normal;
  64. }
  65. #gaia_header a {font-size: 16px !important;}
  66.  
  67. #header_left li:nth-last-of-type(n+2)::after, #header_right li:nth-of-type(n+2)::before {
  68.  content: '❤';
  69.  color: #FFFFFF !important;
  70.  font-size: 10px;
  71.  margin: 0 6px;
  72.  position: relative;
  73.  top: -1px;
  74.  opacity: .75;
  75. }
  76.  
  77. /* Columns */
  78.  
  79. #columns, #column_1, #column_2, #column_3 {
  80.  display: block;
  81.  float: none;
  82.  margin: 0;
  83.  position: absolute;
  84. }
  85.  
  86. #columns {
  87.  width: 1220px;
  88.  height: 860px;
  89.  top: 45px;
  90.  left: calc(50% - 610px);
  91. }
  92. @media screen and (min-height: 920px) {#columns {top: calc(50% - 410px);}}
  93.  
  94. #column_1, #column_2, #column_3 {
  95.  width: 1px;
  96.  height: 1px;
  97.  top: 0;
  98.  left: 0;
  99.  overflow: visible;
  100. }
  101.  
  102. #columns ::-webkit-scrollbar {
  103.  background: #F0F0F0;
  104.  width: 8px;
  105. }
  106.  
  107. #columns ::-webkit-scrollbar-thumb {
  108.  background: #CDCDCD content-box;
  109.  border: 1px solid transparent;
  110. }
  111.  
  112. /* Panels */
  113.  
  114. .panel {
  115.  color: #404040;
  116.  font: 11px/1.6 'Open Sans', cursive;
  117.  text-align: justify;
  118.  margin: 0;
  119.  padding: 0;
  120.  position: absolute;
  121.  box-sizing: border-box;
  122. }
  123.  
  124. .panel a {
  125.  color: #FF0080;
  126.  font-weight: normal;
  127.  transition: color .5s ease-in-out;
  128. }
  129. .panel a:hover {color: var(--secndry-color);}
  130.  
  131. .panel h2 {display: none;}
  132. .panel img {max-width: 100% !important;}
  133. .panel:not(.media_panel) {background: none;}
  134.  
  135. #id_about, #id_comments dl, #id_friends .style1, #id_wishlist, .custom_panel div[id*='content'] {
  136.  padding-right: 10px;
  137.  overflow: hidden scroll;
  138.  scrollbar-color: #CDCDCD #F0F0F0;
  139.  scrollbar-width: thin;
  140. }
  141.  
  142. #id_about {
  143.  width: 240px;
  144.  height: 240px;
  145.  top: 90px;
  146.  left: 290px;
  147. }
  148.  
  149. /* Details */
  150.  
  151. #id_details {
  152.  width: 120px;
  153.  height: 150px;
  154.  top: 116px;
  155.  left: 918px;
  156.  overflow: hidden;
  157. }
  158. .forum_userstatus {display: none;}
  159.  
  160. /* Comments */
  161.  
  162. #id_comments #alert_container {padding: 0;}
  163. #id_comments #alerts_banner {display: none;}
  164. #id_comments .deletecomment {margin: 0 0 0 10px;}
  165. #id_comments .dropBox {display: none;}
  166. #id_comments dd {margin-bottom: 15px;}
  167. #id_comments dd:last-of-type {margin-bottom: 0;}
  168.  
  169. #id_comments {
  170.  width: 240px;
  171.  height: 450px;
  172.  top: 90px;
  173.  left: 583px;
  174. }
  175.  
  176. #id_comments dl {
  177.  width: 100%;
  178.  height: calc(100% - 50px);
  179.  box-sizing: border-box;
  180. }
  181.  
  182. #id_comments dt {
  183.  height: auto;
  184.  line-height: inherit;
  185.  padding: 0 0 5px 0;
  186.  margin: 0 0 3px 0;
  187.  border-bottom: 1px dotted #404040;
  188. }
  189.  
  190. #id_comments .username, #id_comments .date {
  191.  display: block;
  192.  float: none;
  193.  text-align: left;
  194. }
  195. #id_comments .date {font: 10px monospace;}
  196.  
  197. /* Comment Buttons */
  198.  
  199. #id_comments h2 + div, #id_comments h2 ~ p {
  200.  float: left;
  201.  width: 115px;
  202.  height: 40px;
  203.  position: relative;
  204.  border-radius: 5px;
  205.  box-shadow: var(--global-shadow);
  206.  transition: filter .5s ease-in-out;
  207. }
  208. #id_comments h2 + div:hover, #id_comments h2 ~ p:hover {filter: var(--light-effects);}
  209.  
  210. #id_comments h2 + div {
  211.  background-position: 0 bottom;
  212.  margin-right: 10px;
  213. }
  214. #id_comments h2 ~ p {background-position: -115px bottom;}
  215.  
  216. /* Wish List */
  217.  
  218. #id_wishlist {
  219.  width: 60px;
  220.  height: 357px;
  221.  top: 408px;
  222.  left: 470px;
  223.  scroll-snap-type: mandatory;
  224.  scroll-snap-points-y: repeat(52px);
  225. }
  226. .premium_sparkle, .owner_checkmark {margin: 0;}
  227.  
  228. @supports (scroll-snap-type: y mandatory) {
  229.   #id_wishlist {scroll-snap-type: y mandatory;}
  230.   #id_wishlist .item {scroll-snap-align: end;}
  231. }
  232.  
  233. #id_wishlist .item {
  234.  width: 100%;
  235.  height: 44px;
  236.  text-align: center;
  237.  margin-bottom: 8px;
  238.  position: relative;
  239. }
  240. #id_wishlist .item:last-of-type(2) {margin-bottom: 1px;}
  241.  
  242. #id_wishlist .item a {
  243.  display: flex;
  244.  align-items: center;
  245.  justify-content: center;
  246.  background: var(--primary-color);
  247.  width: 100%;
  248.  height: 42px;
  249.  border-radius: 5px;
  250.  box-shadow: var(--global-shadow);
  251.  transition: background .5s ease-in-out;
  252. }
  253. #id_wishlist .item a:hover {background: var(--secndry-color);}
  254. #id_wishlist img[src*='thumbnails'] {filter: drop-shadow(0 1px .5px #FFFFFF80);}
  255.  
  256. .premium_sparkle {
  257.  top: 1px;
  258.  right: 0;
  259. }
  260.  
  261. .owner_checkmark {
  262.  right: 4px;
  263.  bottom: 6px;
  264.  filter: saturate(0%) brightness(500%) drop-shadow(0 1px #000);
  265. }
  266.  
  267. /* Friends */
  268.  
  269. #id_friends {
  270.  width: 240px;
  271.  height: 170px;
  272.  top: 595px;
  273.  left: 583px;
  274. }
  275. #id_friends h2 + div {display: none;}
  276. #id_friends h2 ~ p {display: none;}
  277. #id_friends p {margin: 0;}
  278.  
  279. #id_friends .style1 {
  280.  width: 100%;
  281.  height: 100%;
  282.  box-sizing: border-box;
  283.  scroll-snap-type: mandatory;
  284.  scroll-snap-points-y: repeat(89px);
  285. }
  286.  
  287. #id_friends .style1 li {
  288.  background: var(--primary-color);
  289.  width: calc(50% - 5px);
  290.  height: 78px;
  291.  margin: 0 0 11px 0;
  292.  position: relative;
  293.  border-radius: 5px;
  294.  box-shadow: var(--global-shadow);
  295.  transition: background .5s ease-in-out;
  296. }
  297. #id_friends .style1 li:nth-of-type(even) {margin-left: 10px;}
  298. #id_friends .style1 li:last-of-type {margin-bottom: 3px;}
  299. #id_friends .style1 li:nth-last-of-type(2):nth-of-type(odd) {margin-bottom: 3px;}
  300. #id_friends .style1 li:hover {background: var(--secndry-color);}
  301.  
  302. @supports (scroll-snap-type: y mandatory) {
  303.   #id_friends .style1 {scroll-snap-type: y mandatory;}
  304.   #id_friends .style1 li {scroll-snap-align: start;}
  305. }
  306.  
  307. #id_friends .dropBox {
  308.  background: #FFFFFF40;
  309.  width: 48px;
  310.  padding: 2px;
  311.  margin: 19px auto 0 auto;
  312.  border: 1px dotted white;
  313.  border-radius: 3px;
  314. }
  315.  
  316. #id_friends a {
  317.  width: 100%;
  318.  height: 100%;
  319.  color: #FFFFFF;
  320.  line-height: 2;
  321.  margin: 0;
  322.  position: absolute;
  323.  top: 0;
  324.  left: 0;
  325. }
  326.  
  327. /* Gallery */
  328.  
  329. .custom_panel {
  330.  width: 200px;
  331.  height: 200px !important;
  332.  top: 565px;
  333.  left: 878px;
  334. }
  335. .custom_panel br {display: none;}
  336.  
  337. .custom_panel div[id*='content'] {
  338.  height: 100% !important;
  339.  scroll-snap-type: mandatory;
  340.  scroll-snap-points-y: repeat(calc(100% + 7px));
  341. }
  342.  
  343. @supports (scroll-snap-type: y mandatory) {
  344.   .custom_panel div[id*='content'] {scroll-snap-type: y mandatory;}
  345.   .custom_panel a {scroll-snap-align: start;}
  346. }
  347.  
  348. .custom_panel a {
  349.  display: flex;
  350.  justify-content: center;
  351.  background: var(--primary-color);
  352.  width: 100%;
  353.  height: calc(100% - 3px);
  354.  margin-bottom: 3px;
  355.  border: 5px solid transparent;
  356.  border-radius: 5px;
  357.  box-shadow: var(--global-shadow);
  358.  box-sizing: border-box;
  359.  transition: background .5s ease-in-out;
  360. }
  361. .custom_panel a:hover {background: var(--secndry-color);}
  362. .custom_panel a:nth-last-of-type(n+2) {margin-bottom: 10px;}
  363.  
  364. .custom_panel img {
  365.  filter: brightness(125%) saturate(150%);
  366.  object-fit: cover;
  367. }
  368. .custom_panel img[class*='bbcode'] {align-self: center;}
  369. .custom_panel .bbcode-swapping-image {background: url('https://i.imgur.com/Fk5mUXF.png');}
  370.  
  371. /* Contact and Media */
  372.  
  373. #id_contact, .media_panel {top: 286px;}
  374.  
  375. #id_contact {
  376.  height: auto;
  377.  width: 174px;
  378.  left: 867px;
  379.  overflow: visible;
  380. }
  381. #id_contact span {display: none;}
  382.  
  383. #id_contact ul:not(.buttons) li, .media_panel {
  384.  width: 48px;
  385.  height: 48px !important;
  386.  border-radius: 5px;
  387.  box-shadow: var(--global-shadow);
  388.  transition: filter .5s ease-in-out;
  389. }
  390. #id_contact ul:not(.buttons) li:hover, .media_panel:hover {filter: var(--light-effects);}
  391.  
  392. #id_contact ul:not(.buttons) li {
  393.  float: left;
  394.  margin-right: 10px;
  395.  position: relative;
  396. }
  397. #id_contact ul:not(.buttons) li:nth-of-type(1) {background-position: right 0;}
  398. #id_contact ul:not(.buttons) li:nth-of-type(2) {background-position: right -48px;}
  399. #id_contact ul:not(.buttons) li:nth-of-type(3) {background-position: right -96px;}
  400.  
  401. #id_contact a, #id_comments h2 + div a, #id_comments h2 ~ p a {
  402.  display: block;
  403.  width: 100%;
  404.  height: 100%;
  405.  font-size: 0;
  406.  position: absolute;
  407.  top: 0;
  408.  left: 0;
  409. }
  410.  
  411. .media_panel {
  412.  background-position: right -144px;
  413.  background-origin: border-box;
  414.  width: 48px;
  415.  left: 1041px;
  416.  border: 10px solid transparent;
  417.  overflow: hidden;
  418. }
  419.  
  420. .media_panel iframe {
  421.  position: absolute;
  422.  bottom: 0;
  423.  left: -20px;
  424.  opacity: .01;
  425. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement