Advertisement
althindor

Pro for The Unknown Name

Mar 23rd, 2019
401
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 7.51 KB | None | 0 0
  1. /* Profile by AlthIndor */
  2.  
  3. html, body {
  4.   background:
  5.     url('https://images2.imgbox.com/a9/cb/FSpasIbl_o.png') top 30px center fixed repeat-x,
  6.     url('https://images2.imgbox.com/f9/3b/FrKB6uae_o.png') bottom center fixed repeat-x,
  7.     repeating-linear-gradient(to right, #FF9CB8 0px, #FF9CB8 60px, #FFB8CC 60px, #FFB8CC 120px) fixed;
  8.   background-size: auto 45px, auto 45px, auto;
  9. }
  10. body a {text-decoration: none !important;}
  11.  
  12. html {
  13.  --profile-height: 430px;
  14.  --dark-color: #483C38;
  15.  --mid-color: #806A64;
  16.  --pink1: #FF9CB8;
  17.  --pink2: #FFB8CC;
  18. }
  19.  
  20. #columns, #id_contact ul:not(.buttons) li, .media_panel {background: url('https://images2.imgbox.com/3b/8a/fD2O23w6_o.png') top right no-repeat border-box;}
  21.  
  22. /* Fonts */
  23.  
  24. @font-face {
  25.  font-family: 'Open Sans';
  26.  font-style: normal;
  27.  font-weight: 400;
  28.  src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
  29. }
  30.  
  31. @font-face {
  32.  font-family: 'Open Sans';
  33.  font-style: normal;
  34.  font-weight: 700;
  35.  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN7rgOUuhp.woff2) format('woff2');
  36. }
  37.  
  38. /* Header */
  39.  
  40. #viewer #gaia_header {
  41.  background: var(--dark-color);
  42.  width: 100%;
  43.  height: 30px !important;
  44.  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  45.  position: fixed !important;
  46. }
  47.  
  48. #gaia_header #header_left, #gaia_header #header_right {
  49.  background: none;
  50.  width: 50% !important;
  51.  font: bold 0/28px 'Open Sans', sans-serif !important;
  52.  padding: 0 3px !important;
  53.  box-sizing: border-box !important;
  54. }
  55. #gaia_header li.spacer {display: none !important;}
  56. #gaia_header li {margin: 0 5px;}
  57.  
  58. #gaia_header #header_left img {
  59.  background: url('https://gaia.hs.llnwd.net/e1/images/gaia_global/gaia_header/br_gaia_logo_header.png') 0 0 no-repeat;
  60.  background-size: auto 200%;
  61.  width: 0;
  62.  height: 16px;
  63.  padding: 0 34px 0 0;
  64. }
  65.  
  66. #gaia_header a {
  67.  color: #FFFFFF !important;
  68.  font-size: 11px !important;
  69.  text-transform: uppercase;
  70. }
  71.  
  72. /* Columns */
  73.  
  74. #columns, #column_1, #column_2 {
  75.  display: block;
  76.  float: none;
  77.  margin: 0;
  78. }
  79. #column_3 {display: none;}
  80.  
  81. #columns {
  82.  width: 830px;
  83.  height: 450px;
  84.  top: calc((100% - 450px + 30px) / 2);
  85.  left: calc(50% - 415px);
  86.  transform: translateZ(0);
  87.  overflow: visible;
  88. }
  89.  
  90. #column_1, #column_2 {
  91.  height: calc(100% - 20px);
  92.  position: absolute;
  93.  top: 0;
  94. }
  95.  
  96. #column_1 {
  97.  width: 250px;
  98.  left: 0;
  99. }
  100.  
  101. #column_2 {
  102.  width: calc(100% - 270px);
  103.  right: 0;
  104.  overflow: visible;
  105. }
  106.  
  107. /* Scrollbars */
  108.  
  109. #columns ::-webkit-scrollbar {
  110.  background: var(--mid-color);
  111.  width: 8px;
  112.  border-radius: 2px;
  113. }
  114.  
  115. #columns ::-webkit-scrollbar-thumb {
  116.  background: #FFFFFF content-box;
  117.  border: 1px solid transparent;
  118.  border-radius: 2px;
  119. }
  120.  
  121. /* Panels */
  122.  
  123. .panel, .panel h2 {
  124.  margin: 0;
  125.  padding: 0;
  126.  box-sizing: border-box;
  127. }
  128.  
  129. .panel a {color: inherit;}
  130. .panel a:hover {color: #FF4080;}
  131.  
  132. .panel {
  133.  color: var(--dark-color);
  134.  font: 10px/1.6em 'Open Sans', sans-serif;
  135.  overflow: hidden;
  136. }
  137. .panel:not(.media_panel) {background: none;}
  138. #column_2 .panel {position: absolute;}
  139.  
  140. #id_wishlist, #id_details {
  141.  width: 250px;
  142.  left: 0;
  143. }
  144.  
  145. /* Headers */
  146.  
  147. #id_wishlist h2, .spoiler-control {
  148.  height: 25px;
  149.  color: #FFFFFF;
  150.  font: 700 12px/2.2em 'Open Sans', sans-serif;
  151.  text-align: center;
  152.  text-shadow: 0 0 1px var(--mid-color);
  153.  text-transform: uppercase;
  154.  border-radius: 3px;
  155. }
  156.  
  157. #id_wishlist h2 {
  158.  background: var(--pink1);
  159.  width: 230px;
  160.  position: fixed;
  161.  margin-top: -35px;
  162. }
  163. .panel:not(#id_wishlist) h2 {display: none;}
  164.  
  165. .custom_panel .spoiler-title {
  166.  position: fixed;
  167.  top: 10px;
  168.  left: 10px;
  169. }
  170.  
  171. .custom_panel .spoiler-control {
  172.  display: block !important;
  173.  background: var(--pink2);
  174.  float: left;
  175.  width: 110px;
  176.  border: none;
  177.  outline: none;
  178.  transition: background .5s ease-in-out;
  179. }
  180. .custom_panel .spoiler-control:hover {background: var(--pink1);}
  181. .custom_panel .spoiler-control-show {margin-right: 10px;}
  182. .custom_panel .spoiler-control span {display: none;}
  183.  
  184. .custom_panel .spoiler-control-show::after {content: 'Comment';}
  185. .custom_panel .spoiler-control-hide::after {content: 'Visitors';}
  186.  
  187. /* Panel Switcher */
  188.  
  189. .custom_panel .spoiler-wrapper {
  190.  padding: 0;
  191.  border: none;
  192. }
  193.  
  194. .custom_panel {margin-top: calc(var(--profile-height) * -1);}
  195. .custom_panel .spoiler {height: var(--profile-height);}
  196.  
  197. .custom_panel .spoiler-hidden .spoiler-control-show, .custom_panel .spoiler-revealed .spoiler-control-hide {
  198.  background: var(--pink1);
  199.  pointer-events: none;
  200. }
  201.  
  202. /* Contact and Media */
  203.  
  204. #id_contact {
  205.  width: 150px;
  206.  font-size: 0;
  207.  right: 105px;
  208.  overflow: visible;
  209. }
  210.  
  211. #id_contact ul:not(.buttons) li, .media_panel {
  212.  width: 40px;
  213.  height: 40px !important;
  214.  border-radius: 50%;
  215.  box-shadow: 0 0 3px 1px #FFFFFF;
  216.  opacity: .01;
  217.  transition: opacity .5s ease-in-out;
  218. }
  219. #id_contact ul:not(.buttons) li:hover, .media_panel:hover {opacity: 1;}
  220. #id_contact h2, .media_panel h2 {display: none;}
  221.  
  222. #id_contact ul:not(.buttons) li {
  223.  float: left;
  224.  margin: 0 10px 0 0;
  225.  position: relative;
  226. }
  227. #id_contact ul:not(.buttons) li:nth-of-type(1) {background-position: 0 bottom;}
  228. #id_contact ul:not(.buttons) li:nth-of-type(2) {background-position: -40px bottom;}
  229. #id_contact ul:not(.buttons) li:nth-of-type(3) {background-position: -80px bottom;}
  230.  
  231. #id_contact ul:not(.buttons) li a {
  232.  display: block;
  233.  width: 100%;
  234.  height: 100%;
  235.  position: absolute;
  236.  top: 0;
  237.  left: 0;
  238. }
  239.  
  240. /* Details */
  241.  
  242. #id_details {height: 220px;}
  243. #id_details h2 {display: none;}
  244. #id_details p:nth-of-type(n+2) {display: none;}
  245. #id_details .forum_userstatus {display: none;}
  246.  
  247. #id_details p {
  248.  position: relative;
  249.  top: 30px;
  250.  z-index: 1;
  251. }
  252.  
  253. /* Visitors and Comments */
  254.  
  255. #id_footprints, #id_comments {
  256.  width: calc(100% - 20px);
  257.  height: calc(100% - 55px);
  258.  padding-right: 10px;
  259.  overflow-x: hidden;
  260.  overflow-y: auto;
  261. }
  262.  
  263. #id_footprints {margin: 45px 0 0 10px;}
  264. #id_comments {margin: 55px 0 0 10px;}
  265.  
  266. /* Comments */
  267.  
  268. #id_comments .dropBox {display: none;}
  269. #id_comments #alerts_banner {display: none;}
  270. #id_comments #alert_container {padding: 0;}
  271. #id_comments .deletecomment {margin: 0 0 0 10px;}
  272.  
  273. #id_comments dt {
  274.  height: auto;
  275.  line-height: normal;
  276.  text-align: inherit;
  277.  margin: 0 0 4px 0;
  278.  padding: 0 0 5px 0;
  279. }
  280. #id_comments .username {float: none;}
  281. #id_comments .date {font: 90% monospace;}
  282. #id_comments .date a {text-transform: uppercase;}
  283.  
  284. #id_comments dd {text-align: justify;}
  285. #id_comments dd:nth-last-of-type(n+2) {margin-bottom: 15px;}
  286. #id_comments dd:last-of-type {margin: 0;}
  287.  
  288. /* Wish List */
  289.  
  290. #id_wishlist {
  291.  display: grid;
  292.  grid-template-columns: repeat(4, 1fr);
  293.  grid-gap: 10px 10px;
  294.  height: 200px;
  295.  padding-right: 10px;
  296.  top: 230px;
  297.  border: 10px solid transparent;
  298.  border-width: 45px 10px 10px 10px;
  299.  border-radius: 5px;
  300.  overflow-y: scroll;
  301. }
  302.  
  303. #id_wishlist .item {
  304.  background: var(--pink2);
  305.  width: 30px;
  306.  height: 30px;
  307.  padding: 6px;
  308.  border-radius: 15px;
  309.  outline: 1px dotted var(--dark-color);
  310.  outline-offset: -4px;
  311.  transition: all .5s ease-in-out;
  312. }
  313.  
  314. #id_wishlist .item:hover {
  315.  background: var(--mid-color);
  316.  outline-color: var(--pink1);
  317. }
  318.  
  319. /* Media */
  320.  
  321. .media_panel {
  322.  background-position: -120px bottom;
  323.  right: 65px;
  324.  border: 3px solid transparent;
  325. }
  326.  
  327. .media_panel object {
  328.  position: absolute;
  329.  bottom: 0;
  330.  left: -8px;
  331.  opacity: .01;
  332. }
  333.  
  334. /* Decorations */
  335.  
  336. #pictures_container, #texts_container {
  337.  width: 1px;
  338.  height: 1px;
  339.  position: absolute;
  340.  top: 0;
  341.  left: 50%;
  342.  overflow: visible;
  343. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement