Advertisement
althindor

Pro for Trashkuun

Sep 12th, 2018
449
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 6.28 KB | None | 0 0
  1. /* Code by AlthIndor, Graphics by Cassiel Socks and AlthIndor */
  2.  
  3. html, body {background: url('https://images2.imgbox.com/69/02/C0QZmm1W_o.png');}
  4. #columns, #column_2 .panel, #id_contact ul:not(.buttons) li, .media_panel {background: url('https://images2.imgbox.com/5c/a0/G3WbsYsC_o.png');}
  5.  
  6. /* Fonts */
  7.  
  8. @font-face {
  9.  font-family: 'Patrick Hand';
  10.  font-style: normal;
  11.  font-weight: 400;
  12.  src: local('Patrick Hand'), local('PatrickHand-Regular'), url(https://fonts.gstatic.com/s/patrickhand/v11/LDI1apSQOAYtSuYWp8ZhfYe8XsLL.woff2) format('woff2'), url(https://fonts.gstatic.com/s/patrickhand/v11/LDI1apSQOAYtSuYWp8ZhfYe8XsLN.woff) format('woff');
  13. }
  14.  
  15. @font-face {
  16.  font-family: 'PT Serif';
  17.  font-style: normal;
  18.  font-weight: 400;
  19.  src: local('PT Serif'), local('PTSerif-Regular'), url(https://fonts.gstatic.com/s/ptserif/v9/EJRVQgYoZZY2vCFuvAFWzr8.woff2) format('woff2'), url(http://fonts.gstatic.com/s/ptserif/v8/sDRi4fY9bOiJUbgq53yZCfesZW2xOQ-xsNqO47m55DA.woff) format('woff');
  20. }
  21.  
  22. /* Header */
  23.  
  24. #gaia_header {
  25.  background: #CB898B;
  26.  box-shadow: 0 1px 2px rgba(0,0,0,.3);
  27. }
  28.  
  29. #gaia_header #header_left, #gaia_header #header_right {
  30.  background: none;
  31.  color: transparent;
  32.  font: 13px/22px 'Patrick Hand', sans-serif !important;
  33.  padding: 0 7px !important;
  34. }
  35. #gaia_header #header_left {width: auto !important;}
  36. #gaia_header #header_right {float: right;}
  37. #gaia_header .spacer {display: none !important;}
  38.  
  39. #header_left img {
  40.  background: url('https://gaia.hs.llnwd.net/e1/images/gaia_global/gaia_header/br_gaia_logo_header.png') 0 0 no-repeat;
  41.  background-size: auto 200%;
  42.  width: 0;
  43.  height: 17px;
  44.  padding: 0 36px 0 0;
  45.  margin: -1px 4px 0 0;
  46. }
  47. @-moz-document url-prefix() {#header_left img {margin-top: 0 !important;}}
  48.  
  49. #gaia_header a, #gaia_header #header_left::after {
  50.  color: #FFFFFF !important;
  51.  font-weight: normal;
  52.  text-decoration: none;
  53.  text-transform: uppercase;
  54. }
  55.  
  56. #gaia_header #header_left::after {
  57.  content: 'layout//cinnamon tea';
  58.  margin-left: 5px;
  59. }
  60.  
  61. /* Columns */
  62.  
  63. #columns, #column_1, #column_2 {
  64.  float: none;
  65.  margin: 0;
  66.  position: absolute;
  67. }
  68. #column_3 {display: none;}
  69.  
  70. #columns {
  71.  width: 1200px;
  72.  height: 900px;
  73.  top: 40px;
  74.  left: calc(50% - 600px);
  75. }
  76. @media screen and (min-height: 900px) {#columns {top: calc(50% - 450px + 12px);}}
  77.  
  78. #column_1 {
  79.  width: 1px;
  80.  height: 1px;
  81.  overflow: visible;
  82. }
  83.  
  84. #column_2 {
  85.  width: 610px;
  86.  height: 436px;
  87.  top: 251px;
  88.  left: 295px;
  89.  transform: scale(1);
  90.  overflow: visible;
  91. }
  92.  
  93. /* Panels */
  94.  
  95. .panel, .panel h2 {
  96.  padding: 0;
  97.  margin: 0;
  98.  box-sizing: border-box;
  99. }
  100. #column_1 h2 {display: none;}
  101.  
  102. .panel {
  103.  text-align: justify;
  104.  position: absolute;
  105.  overflow: hidden;
  106. }
  107. #id_about img, #id_comments .postcontent img {max-width: 100% !important;}
  108.  
  109. .panel a {
  110.  color: #C00000;
  111.  font-weight: normal;
  112. }
  113.  
  114. #column_2 .panel {
  115.  background-attachment: local;
  116.  background-position: -1210px 0;
  117.  width: 100%;
  118.  height: 400px;
  119.  font: 14px/25px 'PT Serif', serif;
  120.  top: 0;
  121.  left: 0;
  122.  box-shadow: 0 1px 3px 0 rgba(0,0,0,.2);
  123.  overflow-y: scroll;
  124. }
  125. #column_2 .panel:not(#id_wishlist) {padding: 4px 10px 10px 10px;}
  126. #column_2 .panel:hover {z-index: 99;}
  127.  
  128. #id_about {
  129.  border: 5px solid #E0C0C0;
  130.  z-index: 9;
  131. }
  132.  
  133. #id_footprints {
  134.  border: 5px solid #C0C0FF;
  135.  z-index: 8;
  136. }
  137.  
  138. #id_comments {
  139.  border: 5px solid #FFE080;
  140.  z-index: 7;
  141. }
  142.  
  143. #id_wishlist {
  144.  border: 5px solid #A0C0A0;
  145.  z-index: 6;
  146. }
  147.  
  148. /* Panel Headers */
  149.  
  150. #column_2 h2 {
  151.  background: none;
  152.  width: 120px;
  153.  height: 40px;
  154.  font-size: 0;
  155.  position: fixed;
  156.  bottom: 0;
  157.  z-index: 999;
  158. }
  159.  
  160. #id_about h2 {
  161.  left: 440px;
  162.  border-top: 10px solid #E0C0C0;
  163. }
  164.  
  165. #id_wishlist h2 {
  166.  left: 50px;
  167.  border-top: 10px solid #A0C0A0;
  168. }
  169.  
  170. #id_comments h2 {
  171.  left: 180px;
  172.  border-top: 10px solid #FFE080;
  173. }
  174.  
  175. #id_footprints h2 {
  176.  left: 310px;
  177.  border-top: 10px solid #C0C0FF;
  178. }
  179.  
  180. /* Details */
  181.  
  182. #id_details {
  183.  background: none;
  184.  width: 120px;
  185.  height: 150px;
  186.  top: 55px;
  187.  left: 140px;
  188. }
  189.  
  190. /* Comments */
  191.  
  192. #id_comments .date {font-size: 80%;}
  193. #id_comments dd {min-height: 75px;}
  194. #id_comments dd:nth-last-of-type(n+2) {margin-bottom: 26px;}
  195.  
  196. #id_comments dt {
  197.  padding: 0;
  198.  margin: 0 0 3px 0;
  199.  border-bottom: 1px solid #0080FF;
  200. }
  201.  
  202. #id_comments .dropBox {
  203.  background: #FFFFFF;
  204.  width: 48px;
  205.  height: 62px;
  206.  margin: 7px 10px 0 0;
  207.  border: 1px solid #0080FF;
  208.  overflow: hidden;
  209. }
  210.  
  211. #id_comments .dropBox img {
  212.  width: auto;
  213.  height: auto;
  214.  margin: -26px 0 0 -45px;
  215. }
  216.  
  217. /* Comments Links */
  218.  
  219. #id_comments h2 ~ div:not(.clear) {
  220.  width: 130px;
  221.  height: 30px;
  222.  font: bold 20px/18px 'Patrick Hand', sans-serif;
  223.  text-align: center;
  224.  text-shadow: 0 0 2px rgba(0,0,0,.5);
  225.  text-transform: uppercase;
  226.  position: fixed;
  227.  top: -155px;
  228.  left: 680px;
  229.  transform: rotate(26deg);
  230. }
  231. #id_comments #alert_container {width: 100%;}
  232. #id_comments h2 ~ p {display: none;}
  233.  
  234. #alert_container a {
  235.  color: #FFFFFF;
  236.  text-decoration: none;
  237. }
  238.  
  239. /* Wish List */
  240.  
  241. #id_wishlist {padding: 6px 0 0 5px;}
  242. .premium_sparkle {display: none;}
  243.  
  244. #id_wishlist .item {
  245.  background: #FFFFFF;
  246.  width: 30px;
  247.  height: 30px;
  248.  padding: 4px;
  249.  margin: 10px 0 0 11px;
  250.  position: relative;
  251.  border: 1px solid rgba(0,128,255,.5);
  252.  border-radius: 5px;
  253.  box-shadow: 0 1px 2px rgba(0,0,0,.3);
  254. }
  255. #id_wishlist .item:hover {background: #0080FF;}
  256.  
  257. .owner_checkmark {
  258.  margin: 0;
  259.  top: 5px;
  260.  left: 5px;
  261. }
  262.  
  263. /* Contact and Media */
  264.  
  265. #id_contact ul:not(.buttons) li, .media_panel {
  266.  background-position-y: -900px;
  267.  width: 52px;
  268.  height: 52px !important;
  269. }
  270.  
  271. #id_contact, .media_panel {top: 188px;}
  272. #id_contact, #id_contact li a {font-size: 0;}
  273.  
  274. #id_contact ul:not(.buttons) li {
  275.  background-position-x: 0;
  276.  position: relative;
  277. }
  278.  
  279. #id_contact ul:not(.buttons) li:first-of-type, #id_contact ul:not(.buttons) li:last-of-type {display: none;}
  280. #id_contact ul:not(.buttons) li:hover {background-position-x: -104px;}
  281. .media_panel {background-position-x: -52px;}
  282. .media_panel:hover {background-position-x: -156px;}
  283.  
  284. #id_contact {
  285.  background: none;
  286.  left: 389px;
  287. }
  288.  
  289. #id_contact li a {
  290.  width: 100%;
  291.  height: 100%;
  292.  position: absolute;
  293.  top: 0;
  294.  left: 0;
  295. }
  296.  
  297. .media_panel {
  298.  background-origin: border-box;
  299.  left: 759px;
  300.  border: 10px solid transparent;
  301. }
  302.  
  303. .media_panel object {
  304.  position: absolute;
  305.  bottom: -1px;
  306.  left: -9px;
  307.  opacity: .01;
  308. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement