Advertisement
althindor

Code for ReppyBars

Apr 25th, 2018
213
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 5.46 KB | None | 0 0
  1. /* Cody By AlthIndor, Graphics by Visual Light */
  2.  
  3. #site, #wishlist, #bar li {background: url('https://i.imgur.com/PB0BaQg.png') !important;}
  4. body {background: url('https://i.imgur.com/brWj1nP.jpg') fixed bottom center / cover;}
  5. a {text-decoration: none !important;}
  6.  
  7. /* Fonts */
  8.  
  9. @font-face {
  10.  font-family: 'Open Sans';
  11.  font-style: normal;
  12.  font-weight: 400;
  13.  src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
  14. }
  15.  
  16. /* Header */
  17.  
  18. #gaia_header {
  19.  background: none;
  20.  overflow: hidden;
  21. }
  22.  
  23. #gaia_header #header_left, #gaia_header #header_right {
  24.  background: none;
  25.  width: 50%;
  26.  color: transparent;
  27.  font-size: 8px;
  28.  line-height: 26px !important;
  29. }
  30. #header_left .spacer {display: none;}
  31.  
  32. #header_left img {
  33.  background: url('https://i.imgur.com/s0NkOhU.png') 6px 1px no-repeat;
  34.  width: 0px !important;
  35.  padding: 0 52px 0 0;
  36. }
  37.  
  38. #header_right .favorites_add {
  39.  background: none !important;
  40.  margin: 0 -1px 0 8px;
  41. }
  42.  
  43. #header_right .favorites_add::before {
  44.  content: '❤';
  45.  font-size: 16px;
  46.  position: absolute;
  47.  top: -4px;
  48.  left: 1px;
  49. }
  50.  
  51. #gaia_header a {
  52.  color: #FFFFFF !important;
  53.  font-family: 'Open Sans', sans-serif;
  54.  font-size: 10px;
  55.  font-weight: bold;
  56.  letter-spacing: 0.05em;
  57.  text-transform: uppercase;
  58.  opacity: .9;
  59.  transition: .5s ease-in-out;
  60. }
  61. #gaia_header a:hover {color: #FFA0B0 !important;}
  62.  
  63. /* Remove Sections */
  64.  
  65. #header {display: none;}
  66. #details {display: none;}
  67. #friends {display: none;}
  68. #journal {display: none;}
  69. #multimedia {display: none;}
  70. #signature {display: none;}
  71. .section h2 {display: none;}
  72.  
  73. #profile .avatar {display: none;}
  74. #profile .items {display: none;}
  75.  
  76. /* Main Profile */
  77.  
  78. #site, #content, #content #sidebar, #content #main {
  79.  padding: 0;
  80.  margin: 0;
  81. }
  82.  
  83. #site {
  84.  width: 960px;
  85.  height: 710px;
  86.  position: absolute;
  87.  top: calc((100% - 710px)  / 2);
  88.  left: calc((100% - 960px) / 2);
  89. }
  90.  
  91. #content #sidebar, #content #main {
  92.  width: 1px;
  93.  height: 1px;
  94.  position: absolute;
  95.  top: 0;
  96.  left: 0;
  97.  overflow: visible;
  98. }
  99.  
  100. #content #main {
  101.  min-height: 0;
  102.  border: none;
  103. }
  104.  
  105. /* Sections */
  106.  
  107. .section {
  108.  background: none !important;
  109.  color: #403038;
  110.  font-family: 'Open Sans', sans-serif;
  111.  font-size: 11px;
  112.  line-height: 1.6em;
  113.  text-align: justify !important;
  114.  position: absolute;
  115.  box-sizing: border-box;
  116. }
  117.  
  118. .section:not(#profile) {
  119.  width: 450px;
  120.  left: 128px;
  121.  border: 10px solid transparent;
  122.  overflow-x: hidden;
  123.  overflow-y: scroll;
  124. }
  125. #about, #comments, #wishlist:hover {height: 239px;}
  126. #about, #comments {padding: 0 10px 0 0;}
  127.  
  128. .section a, .section a:visited {
  129.  color: #904864 !important;
  130.  font-weight: bold;
  131. }
  132.  
  133. /* Contact Bar */
  134.  
  135. #profile {
  136.  width: 190px;
  137.  padding: 0;
  138.  position: absolute !important;
  139.  top: 46px;
  140.  left: 645px;
  141. }
  142.  
  143. #bar {
  144.  margin: 0;
  145.  height: 100%;
  146. }
  147. #bar, #bar li a {background: none !important;}
  148.  
  149. #bar li, #bar li a {
  150.  display: block;
  151.  width: 49px !important;
  152.  height: 49px;
  153.  font-size: 0;
  154.  padding: 0;
  155.  border-radius: 50%;
  156. }
  157. #bar li {opacity: 0; transition: opacity .5s ease-in-out;}
  158. #bar li:hover {opacity: 1;}
  159.  
  160. #bar #onlineButton, #bar #offlineButton, #bar #ignoreButton {display: none;}
  161. #bar #addButton, #bar #msgButton {margin-right: 21px;}
  162. #bar #addButton {background-position: -1px -711px !important;}
  163. #bar #msgButton {background-position: -51px -711px !important;}
  164. #bar #tradeButton {background-position: -101px -711px !important;}
  165.  
  166. /* About */
  167.  
  168. #about {top: 106px;}
  169. #about .links {display: none;}
  170.  
  171. /* Comments */
  172.  
  173. #comments {
  174.  top: 358px;
  175.  z-index: 2;
  176. }
  177. #comments #alerts_banner, #comments .admin, #comments h2 ~ p, #comments dt {display: none;}
  178. #comments dd::before, #comments dd::after {display: none;}
  179. #comments dl, #comments .date {padding: 0;}
  180. #comments dl dd, #comments dd:last-of-type .message {margin: 0;}
  181.  
  182. #comments dl dd {
  183.  background: none;
  184.  border: none;
  185. }
  186.  
  187. #comments .date {
  188.  display: block;
  189.  float: right;
  190.  font-style: normal;
  191. }
  192.  
  193. #comments .date ~ p {
  194.  line-height: 18px;
  195.  text-transform: uppercase;
  196. }
  197.  
  198. #comments .message {
  199.  background: none !important;
  200.  min-height: 0px !important;
  201.  font-size: inherit;
  202.  left: 0;
  203.  padding: 0;
  204.  margin: 0 0 15px 0;
  205. }
  206.  
  207. #comments .postcontent {
  208.  text-align: inherit;
  209.  padding: 4px 0 0 0;
  210.  margin: 3px 0 0 0;
  211.  border-top: 1px solid #403038;
  212. }
  213.  
  214. /* Comments Links */
  215.  
  216. #comments .links {
  217.  width: 190px;
  218.  height: 24px;
  219.  position: fixed;
  220.  top: calc((100% - 710px)  / 2 + 608px);
  221.  left: calc((100% - 960px) / 2 + 645px);
  222. }
  223. #comments .links, #comments .links * {margin: 0;}
  224. #comments .alert_container li:nth-last-of-type(1) {display: none;}
  225.  
  226. #comments .links * {
  227.  display: block;
  228.  width: 100%;
  229.  height: 100%;
  230.  font-size: 0;
  231. }
  232.  
  233. /* Wish List */
  234.  
  235. #wishlist {
  236.  background-position: -128px -358px !important;
  237.  background-origin: border-box !important;
  238.  height: 0;
  239.  padding: 0;
  240.  top: 358px;
  241.  z-index: 1;
  242. }
  243. #wishlist:hover {z-index: 9;}
  244.  
  245. #wishlist::before {
  246.  content: '';
  247.  width: 456px;
  248.  height: 45px;
  249.  position: fixed;
  250.  top: calc((100% - 710px)  / 2 + 596px);
  251.  left: calc((100% - 960px) / 2 + 126px);
  252. }
  253.  
  254. #wishlist li, #wishlist li a {display: block;}
  255. #wishlist li {float: left;}
  256. #wishlist .item {background: none;}
  257.  
  258. #wishlist li a {
  259.  background: rgba(255,160,176,.5);
  260.  width: 30px;
  261.  height: 30px;
  262.  padding: 3px;
  263.  margin: 0 9px 9px 0;
  264.  border-radius: 3px;
  265.  transition: background .5s ease-in-out;
  266. }
  267. #wishlist li a:hover {background: #FFFFFF;}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement