Advertisement
althindor

Pro for Wolf Anubite

Aug 17th, 2018
407
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 6.97 KB | None | 0 0
  1. /* Profile by AlthIndor */
  2.  
  3. html, body {background: url('https://i.imgur.com/XLiW3Qd.jpg') fixed bottom -20px right 10px no-repeat, linear-gradient(45deg, #FFFFFF, #FDF8F0) fixed;}
  4.  
  5. /* Fonts */
  6.  
  7. @font-face {
  8.  font-family: 'Open Sans Condensed';
  9.  font-style: normal;
  10.  font-weight: 700;
  11.  src: local('Open Sans Condensed'), local('OpenSans-Condensed'), url(https://fonts.gstatic.com/s/opensanscondensed/v10/gk5FxslNkTTHtojXrkp-xONSK5BxN3NFS4EJkViHIqo.woff) format('woff');
  12. }
  13.  
  14. @font-face {
  15.  font-family: 'Open Sans';
  16.  font-style: normal;
  17.  font-weight: 400;
  18.  src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
  19. }
  20.  
  21. /* Header */
  22.  
  23. #gaia_header {
  24.  background: #303020;
  25.  border-bottom: 2px solid transparent;
  26.  box-shadow: 0 2px 1px 0 rgba(0,0,0,.3);
  27. }
  28.  
  29. #gaia_header #header_left, #gaia_header #header_right {
  30.  background: none;
  31.  color: transparent !important;
  32.  font: bold 11px 'Open Sans Condensed', sans-serif;
  33.  padding: 0 8px 0 6px !important;
  34.  box-sizing: border-box;
  35. }
  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: 100% auto;
  42.  width: 0;
  43.  height: 0;
  44.  padding: 18px 38px 0 0;
  45.  margin-right: 6px;
  46. }
  47.  
  48. #gaia_header a {
  49.  color: #FFFFFF !important;
  50.  text-decoration: none !important;
  51.  text-transform: uppercase;
  52.  opacity: .8;
  53.  transition: all .5s ease-in-out;
  54. }
  55.  
  56. #gaia_header a:hover {
  57.  color: #F4F0E4 !important;
  58.  opacity: 1;
  59. }
  60.  
  61. /* Columns */
  62.  
  63. #columns, #column_1, #column_2, #column_3 {
  64.  float: none;
  65.  margin: 0;
  66.  position: absolute;
  67. }
  68.  
  69. #columns {
  70.  width: 422px;
  71.  height: 550px;
  72.  position: fixed;
  73.  top: auto;
  74.  bottom: 30px;
  75.  left: calc(50% - 211px);
  76.  overflow: hidden;
  77. }
  78.  
  79. #column_1, #column_2, #column_3 {
  80.  width: 1px;
  81.  height: 1px;
  82.  bottom: 0;
  83.  right: 0;
  84.  overflow: visible;
  85. }
  86.  
  87. /* Panels */
  88.  
  89. .panel, .panel h2 {
  90.  padding: 0;
  91.  margin: 0;
  92. }
  93.  
  94. .panel {
  95.  color: #FFFFFF;
  96.  font: 12px/1.6em 'Open Sans', sans-serif;
  97.  text-align: justify;
  98.  position: absolute;
  99.  bottom: 0;
  100.  box-sizing: border-box;
  101.  overflow: hidden;
  102. }
  103. #id_about img, #id_comments .postcontent img {max-width: 100% !important;}
  104.  
  105. .panel a {
  106.  color: #F4F0E4;
  107.  font-weight: normal;
  108. }
  109.  
  110. #id_about, #id_comments, #id_footprints {
  111.  background: #303020;
  112.  width: 416px;
  113.  height: 480px;
  114.  padding-right: 10px;
  115.  bottom: -600px;
  116.  right: 3px;
  117.  border: 10px solid transparent;
  118.  box-shadow: 0 0 0 1px #FFFFFF, 0 0 0 3px #303020;
  119.  overflow-y: scroll;
  120.  z-index: 1;
  121. }
  122. #id_about:hover, #id_comments:hover, #id_footprints:hover {bottom: 64px;}
  123.  
  124. #id_contact {right: 0;}
  125. .custom_panel {right: 324px;}
  126. .media_panel {right: 378px;}
  127.  
  128. #id_footprints {
  129.  text-align: center;
  130.  padding: 0;
  131. }
  132.  
  133. .panel h2 {
  134.  position: fixed;
  135.  bottom: 30px;
  136. }
  137.  
  138. .panel:not(.media_panel) h2 {
  139.  font-size: 0;
  140.  z-index: -1;
  141. }
  142.  
  143. #id_about h2 {left: calc(50% - 211px + 108px);}
  144. #id_comments h2 {left: calc(50% - 211px + 162px);}
  145. #id_footprints h2 {left: calc(50% - 211px + 216px);}
  146. #id_contact h2, .custom_panel h2 {display: none;}
  147.  
  148. /* Panel Drops */
  149.  
  150. #id_about::after, #id_comments::after, #id_footprints::after {
  151.  content: '';
  152.  background: url('https://images2.imgbox.com/ac/4e/pobSFKvZ_o.png');
  153.  width: 40px;
  154.  height: 32px;
  155.  position: fixed;
  156.  bottom: -598px;
  157. }
  158. #id_about:hover::after, #id_comments:hover::after, #id_footprints:hover::after {bottom: 62px;}
  159.  
  160. #id_about::after {left: calc(50% - 211px + 108px + 3px);}
  161. #id_comments::after {left: calc(50% - 211px + 162px + 3px);}
  162. #id_footprints::after {left: calc(50% - 211px + 216px + 3px);}
  163.  
  164. /* Things That Are Buttons */
  165.  
  166. .panel:not(.media_panel) h2, #id_contact ul:not(.buttons) li, .custom_panel, .media_panel {
  167.  width: 44px;
  168.  height: 44px !important;
  169.  border: 2px solid transparent;
  170.  border-radius: 5px;
  171.  box-shadow: 0 0 0 1px #FFFFFF inset;
  172.  box-sizing: border-box;
  173. }
  174. #id_contact ul:not(.buttons) li:hover, .custom_panel:hover, .media_panel:hover {background-color: #504030;}
  175. #id_about:hover h2, #id_comments:hover h2, #id_footprints:hover h2 {background-color: #504030;}
  176.  
  177. .panel h2, #id_contact ul:not(.buttons) li, .media_panel {
  178.  background: url('https://i.imgur.com/vcNz49l.png') #303020;
  179.  background-size: 36px auto;
  180. }
  181. .media_panel {background-position: 2px -106px;}
  182.  
  183. .custom_panel {background: url('https://images2.imgbox.com/ac/4e/pobSFKvZ_o.png') no-repeat -48px 8px #303020;}
  184.  
  185. #id_contact ul:not(.buttons) li:nth-of-type(1) {background-position: 2px 2px;}
  186. #id_contact ul:not(.buttons) li:nth-of-type(2) {background-position: 2px -34px;}
  187. #id_contact ul:not(.buttons) li:nth-of-type(3) {background-position: 2px -70px;}
  188.  
  189. #id_contact ul:not(.buttons) a, .custom_panel a {
  190.  display: block;
  191.  width: 44px;
  192.  height: 44px;
  193. }
  194. #id_contact li, #id_contact a, .custom_panel a {font-size: 0;}
  195.  
  196. #id_about h2 {background-position: 2px -250px;}
  197. #id_comments h2 {background-position: 2px -214px;}
  198. #id_footprints h2 {background-position: 2px -394px;}
  199.  
  200. /* Contact Buttons */
  201.  
  202. #id_contact {
  203.  background: none;
  204.  width: calc((44px * 3) + 20px);
  205.  height: 44px;
  206. }
  207. #id_contact ul:not(.buttons) li {float: left;}
  208. #id_contact ul:not(.buttons) li:nth-of-type(n+2) {margin-left: 10px;}
  209.  
  210. /* Comments */
  211.  
  212. #id_comments #alerts_banner {display: none;}
  213. #id_comments .deletecomment {margin: 0 0 0 10px;}
  214. #id_comments .deletecomment a {color: yellowgreen;}
  215.  
  216. #id_comments dt {
  217.  padding: 0 0 2px 0;
  218.  margin: 0 0 2px 0;
  219.  border-bottom: 1px dotted rgba(255,255,255,.3);
  220. }
  221.  
  222. #id_comments dd {margin: 0 0 15px 0;}
  223. #id_comments dd:last-of-type {margin: 0;}
  224.  
  225. #id_comments .dropBox {
  226.  background: rgba(255,255,255,.2);
  227.  width: 48px;
  228.  height: 48px;
  229.  margin: 5px 10px 0 0;
  230.  border: 1px dotted rgba(255,255,255,.3);
  231.  overflow: hidden;
  232. }
  233.  
  234. #id_comments .dropBox img {
  235.  width: 120px;
  236.  height: 150px;
  237.  margin: -26px 0 0 -46px;
  238.  filter: sepia(100%);
  239. }
  240. #id_comments .dropBox img:hover {filter: none;}
  241.  
  242. /* Comments Buttons */
  243.  
  244. #id_comments #alert_container {padding: 0;}
  245.  
  246. #id_comments h2 ~ div:not(.clear), #id_comments h2 ~ p {
  247.  background: rgba(255,255,255,.2);
  248.  display: block;
  249.  float: left;
  250.  width: calc(50% - 5px);
  251.  height: 30px;
  252.  font: bold 11px 'Open Sans Condensed', sans-serif;
  253.  text-align: center;
  254.  text-transform: uppercase;
  255.  line-height: 28px;
  256.  padding: 0;
  257. }
  258. #id_comments h2 ~ div span {width: 100%;}
  259. #id_comments h2 ~ p {margin-left: 10px;}
  260.  
  261. /* Media */
  262.  
  263. .media_panel h2 {
  264.  background: #F4F0E4;
  265.  color: #000000;
  266.  font-weight: normal;
  267.  text-transform: capitalize;
  268.  padding: 5px;
  269.  bottom: 65px;
  270.  right: calc(50% - 211px + 422px - 10px);
  271.  border: 1px solid rgba(0,0,0,.5);
  272.  box-shadow: 0 0 0 1px #F4F0E4;
  273.  pointer-events: none;
  274.  z-index: 999;
  275. }
  276.  
  277. .media_panel h2 {display: none;}
  278. .media_panel:hover h2 {display: block;}
  279.  
  280. .media_panel object {
  281.  width: 200px;
  282.  height: 200px;
  283.  position: absolute;
  284.  bottom: 0;
  285.  left: -8px;
  286.  opacity: .001;
  287. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement