Advertisement
althindor

Pro for Chris Hans Pohl

Jun 13th, 2019
395
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 4.86 KB | None | 0 0
  1. /* Profile by AlthIndor */
  2.  
  3. html, body {background: url('https://i.imgur.com/Z7zfsgJ.png') center;}
  4. body a {text-decoration: none !important;}
  5.  
  6. @font-face {
  7.  font-family: 'PT Serif';
  8.  font-style: normal;
  9.  font-weight: 400;
  10.  src: local('PT Serif'), local('PTSerif-Regular'), url(https://fonts.gstatic.com/s/ptserif/v10/EJRVQgYoZZY2vCFuvAFWzr8.woff2) format('woff2');
  11. }
  12.  
  13. @font-face {
  14.  font-family: 'Pacifico';
  15.  font-style: normal;
  16.  font-weight: 400;
  17.  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v13/FwZY7-Qmy14u9lezJ-6H6Mk.woff2) format('woff2');
  18. }
  19.  
  20. /* Header */
  21.  
  22. #viewer #gaia_header {
  23.  background: rgba(255,0,0,.4);
  24.  height: 30px !important;
  25.  box-shadow: 0 1px 2px rgba(0,0,0,.5);
  26. }
  27.  
  28. #gaia_header #header_left, #gaia_header #header_right {
  29.  background: none;
  30.  font: 0/29px 'Pacifico', cursive !important;
  31.  padding: 0 7px !important;
  32.  box-sizing: border-box;
  33. }
  34. #gaia_header #header_right {float: right;}
  35. #gaia_header .spacer {display: none !important;}
  36.  
  37. #header_left img {
  38.  background: url('https://i.imgur.com/cGGVY2x.png') 0 3px no-repeat;
  39.  width: 0;
  40.  padding: 0 34px 0 0;
  41.  margin: 0 -2px 0 0;
  42.  filter: invert(100%) drop-shadow(0 0 .5px rgba(0,0,0,.5));
  43. }
  44.  
  45. #gaia_header a, #header_left li::after, #header_right li::before {
  46.  color: #FFFFFF !important;
  47.  font-size: 11px !important;
  48.  font-weight: normal;
  49.  text-transform: capitalize !important;
  50.  text-shadow: 0 0 1px rgba(0,0,0,.5);
  51. }
  52.  
  53. #gaia_header a {
  54.  letter-spacing: .05em;
  55.  text-transform: uppercase;
  56.  transition: opacity .5s ease-in-out;
  57. }
  58. #gaia_header a:hover {opacity: .75;}
  59.  
  60. #header_left li:nth-last-of-type(n+2)::after, #header_right li:nth-of-type(n+2)::before {
  61.  content: '●';
  62.  margin: 0 6px;
  63.  position: relative;
  64.  top: -1px;
  65.  opacity: .75;
  66. }
  67.  
  68. /* Columns */
  69.  
  70. #columns, #column_1, #column_2, #column_3 {
  71.  float: none;
  72.  margin: 0;
  73. }
  74.  
  75. #columns {
  76.  background: url('https://images2.imgbox.com/8b/e4/RlrlSYgN_o.png');
  77.  width: 1010px;
  78.  height: 560px;
  79.  position: fixed;
  80.  top: calc(50% - 280px);
  81.  left: calc(50% - 504px);
  82. }
  83.  
  84. #column_1, #column_2, #column_3 {
  85.  width: 1px;
  86.  height: 1px;
  87.  position: absolute;
  88.  top: 0;
  89.  left: 0;
  90.  overflow: visible;
  91. }
  92.  
  93. #columns ::-webkit-scrollbar {
  94.  background: rgba(255,255,255,.25);
  95.  width: 10px;
  96.  border-radius: 5px;
  97. }
  98.  
  99. #columns ::-webkit-scrollbar-thumb {
  100.  background: rgba(255,255,255,.75) content-box;
  101.  border: 1px solid transparent;
  102.  border-radius: 5px;
  103. }
  104.  
  105. /* Panels */
  106.  
  107. .panel, .panel h2 {
  108.  background: none;
  109.  color: #FFFFFF;
  110.  font: 12px/1.6em 'PT Serif', serif;
  111.  text-align: justify;
  112.  padding: 0;
  113.  margin: 0;
  114.  position: absolute;
  115.  box-sizing: border-box;
  116.  overflow: hidden;
  117. }
  118.  
  119. .panel a {
  120.  color: #C00000;
  121.  transition: color .5s ease-in-out;
  122. }
  123. .panel a:hover {color: #FF0000;}
  124.  
  125. #id_about, #id_friends {
  126.  transform-origin: top left;
  127.  transform: rotate(-5deg);
  128. }
  129. #id_about h2, #id_friends h2 {display: none;}
  130.  
  131. /* About Me */
  132.  
  133. #id_about {
  134.  width: 445px;
  135.  height: 320px;
  136.  text-shadow: 0 1px 1px #000;
  137.  padding-right: 15px;
  138.  top: 140px;
  139.  left: 365px;
  140.  border: 15px solid transparent;
  141.  overflow-y: scroll;
  142. }
  143. #id_about img {max-width: 100% !important;}
  144.  
  145. /* Friends */
  146.  
  147. #id_friends {
  148.  height: 360px;
  149.  top: 142px;
  150.  left: 182px;
  151. }
  152.  
  153. #id_friends h2 ~ div {display: none;}
  154. #id_friends h2 ~ p {display: none;}
  155. #id_friends p {margin: 0;}
  156.  
  157. #id_friends .dropBox {
  158.  background: #404040;
  159.  border: 2px solid #202020;
  160.  filter: saturate(10%);
  161.  transition: filter .5s ease-in-out;
  162. }
  163. #id_friends li:hover .dropBox {filter: none;}
  164.  
  165. #id_friends .style1 {
  166.  width: 100%;
  167.  height: 100%;
  168.  padding: 0 30px 0 0;
  169.  overflow: hidden scroll;
  170. }
  171.  
  172. #id_friends .style1 li {
  173.  float: none;
  174.  background: rgba(128,128,128,.5);
  175.  width: 56px;
  176.  height: auto;
  177.  padding: 5px 10px;
  178.  margin: 0 0 10px 0;
  179.  position: relative;
  180.  border-radius: 3px;
  181.  transition: background .5s ease-in-out;
  182. }
  183. #id_friends .style1 li:hover {background: rgba(255,0,0,.4);}
  184.  
  185. #id_friends .style1 a {
  186.  display: block;
  187.  width: 100%;
  188.  height: 100%;
  189.  font-size: 0;
  190.  position: absolute;
  191.  top: 0;
  192.  left: 0;
  193.  z-index: 2;
  194. }
  195.  
  196. /* Media */
  197.  
  198. .media_panel {
  199.  width: 20px;
  200.  height: 20px !important;
  201.  top: 80px;
  202.  left: 860px;
  203. }
  204.  
  205. .media_panel::after {
  206.  content: url('https://i.imgur.com/MWTKBXK.gif');
  207.  position: absolute;
  208.  margin: 5px 0 0 2px;
  209.  transform: rotate(5deg);
  210.  pointer-events: none;
  211. }
  212.  
  213. .media_panel h2 {
  214.  display: none;
  215.  font-size: 10px;
  216.  text-transform: capitalize;
  217.  position: fixed;
  218.  top: calc(50% - 280px + 27px);
  219.  right: calc(50% - 504px + 165px);
  220.  transform-origin: top right;
  221.  transform: rotate(-4.8deg);
  222.  pointer-events: none;
  223. }
  224. .media_panel:hover h2 {display: initial;}
  225.  
  226. .media_panel iframe {
  227.  position: absolute;
  228.  bottom: 0;
  229.  left: 0;
  230.  opacity: .01;
  231. }
  232.  
  233. .media_panel .buttons {
  234.  position: fixed;
  235.  top: calc(50% - 280px + 82px);
  236.  right: calc(50% - 504px + 90px);
  237. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement