Advertisement
althindor

Pro for Sayuu

Feb 24th, 2019
449
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.87 KB | None | 0 0
  1. /* Profile by AlthIndor */
  2.  
  3. html, body {background: url('https://i.imgur.com/pF0SXcV.png') fixed bottom left / cover #102030;}
  4. body a {text-decoration: none !important;}
  5.  
  6. @supports (background-blend-mode: screen) {
  7.   html, body {
  8.    background: url('https://images2.imgbox.com/c2/08/PU8imW4c_o.png') fixed center repeat-x, url('https://i.imgur.com/pF0SXcV.png') fixed bottom left no-repeat #102030;
  9.    background-blend-mode: screen, normal;
  10.   }
  11. }
  12.  
  13. .custom_panel:nth-of-type(n+2), #id_comments, #id_contact ul:not(.buttons) li, .spoiler-control-show {background: url('https://images2.imgbox.com/bd/27/hsjsgcFR_o.png');}
  14. #column_1, .custom_panel:nth-of-type(1) .spoiler-control-show {background: url('https://images2.imgbox.com/c2/83/hOB34St6_o.png') center no-repeat;}
  15.  
  16. /* Fonts */
  17.  
  18. @font-face {
  19.  font-family: 'Open Sans';
  20.  font-weight: 400;
  21.  src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
  22. }
  23.  
  24. @font-face {
  25.  font-family: 'Open Sans';
  26.  font-weight: 600;
  27.  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UNirkOUuhp.woff2) format('woff2'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UNirkOUuhv.woff) format('woff');
  28. }
  29.  
  30. @font-face {
  31.  font-family: 'Overlock';
  32.  font-weight: 700;
  33.  src: local('Overlock Bold'), local('Overlock-Bold'), url(https://fonts.gstatic.com/s/overlock/v8/Z9XSDmdMWRiN1_T9Z7xizfmLtrw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/overlock/v8/Z9XSDmdMWRiN1_T9Z7xizfmLtro.woff) format('woff');
  34. }
  35.  
  36. @font-face {
  37.  font-family: 'Overlock';
  38.  font-weight: 900;
  39.  src: local('Overlock Black'), local('Overlock-Black'), url(https://fonts.gstatic.com/s/overlock/v8/Z9XSDmdMWRiN1_T9Z7xaz_mLtrw.woff2) format('woff2');
  40. }
  41.  
  42. /* Header */
  43.  
  44. #viewer #gaia_header {
  45.  background: linear-gradient(to right, rgba(208,32,48,.8), rgba(255,128,64,.8));
  46.  height: 26px !important;
  47.  box-shadow: 0 1px 2px rgba(0,0,0,.5);
  48. }
  49.  
  50. #gaia_header #header_left, #gaia_header #header_right {
  51.  background: none;
  52.  font: 700 0/24px 'Overlock', sans-serif !important;
  53.  padding: 0 7px !important;
  54.  box-sizing: border-box;
  55. }
  56. #gaia_header #header_right {float: right;}
  57. #gaia_header .spacer {display: none !important;}
  58.  
  59. #header_left img {
  60.  background: url('https://i.imgur.com/cGGVY2x.png') 0 2px no-repeat;
  61.  width: 0;
  62.  padding: 0 34px 0 0;
  63.  margin: 0 -2px 0 0;
  64.  filter: invert(100%) drop-shadow(0 0 .5px rgba(0,0,0,.5));
  65. }
  66.  
  67. #gaia_header a, #header_left li::after, #header_right li::before {
  68.  color: #FFFFFF !important;
  69.  font-size: 12px !important;
  70.  text-shadow: 0 0 1px rgba(0,0,0,.5);
  71. }
  72.  
  73. #gaia_header a {
  74.  letter-spacing: .05em;
  75.  text-transform: uppercase;
  76.  transition: opacity .5s ease-in-out;
  77. }
  78. #gaia_header a:hover {opacity: .75;}
  79.  
  80. #header_left li:nth-last-of-type(n+2)::after, #header_right li:nth-of-type(n+2)::before {
  81.  content: '●';
  82.  margin: 0 6px;
  83.  position: relative;
  84.  top: -1px;
  85.  opacity: .75;
  86. }
  87.  
  88. /* Columns */
  89.  
  90. #columns, #column_1 {
  91.  float: none;
  92.  margin: 0;
  93.  position: absolute;
  94. }
  95. #column_2, #column_3 {display: none;}
  96.  
  97. #columns, #column_1 {
  98.  width: 100%;
  99.  height: 100%;
  100.  top: 0;
  101.  left: 0;
  102. }
  103. #column_1 {background-position: 50% calc(50% + 12px);}
  104.  
  105. /* Panels */
  106.  
  107. .panel, .panel h2 {
  108.  padding: 0;
  109.  margin: 0;
  110.  box-sizing: border-box;
  111. }
  112.  
  113. .panel {
  114.  color: #404040;
  115.  font: 10px/1.6em 'Open Sans', sans-serif;
  116.  text-align: justify;
  117.  text-align-last: center;
  118.  position: absolute;
  119.  overflow: hidden;
  120. }
  121. .panel:not(.custom_panel) h2 {display: none;}
  122.  
  123. .panel a {
  124.  color: crimson;
  125.  position: relative;
  126.  transition: color .5s ease-in-out;
  127. }
  128. .panel a:hover {color: rebeccapurple;}
  129.  
  130. .custom_panel, .spoiler-wrapper, .spoiler-title {
  131.  width: 395px;
  132.  height: 340px !important;
  133. }
  134.  
  135. .spoiler-wrapper, .spoiler-title {
  136.  top: 0;
  137.  left: 0;
  138. }
  139. .spoiler-wrapper + br {display: none;}
  140.  
  141. .custom_panel {
  142.  padding-top: 38px;
  143.  left: calc(50% + 41px);
  144. }
  145.  
  146. /* Spoiler Buttons and Header */
  147.  
  148. .custom_panel h2 {
  149.  background: none;
  150.  font: 900 14px/30px 'Overlock', serif;
  151.  letter-spacing: .03em;
  152.  text-align: center;
  153.  text-shadow: 0 0 3px #000;
  154.  z-index: 999;
  155.  pointer-events: none;
  156. }
  157.  
  158. .spoiler-wrapper, .spoiler-title button {border: none;}
  159. .spoiler-title span {display: none;}
  160. .spoiler {display: none;}
  161.  
  162. .spoiler-wrapper {
  163.  padding: 0;
  164.  position: absolute;
  165. }
  166.  
  167. .spoiler-title .spoiler-control {
  168.  display: block !important;
  169.  outline: none;
  170. }
  171.  
  172. .spoiler-title .spoiler-control-show, .custom_panel h2 {
  173.  width: 95px;
  174.  height: 32px;
  175.  position: fixed;
  176.  top: calc(50% - 266px);
  177. }
  178.  
  179. .spoiler-title .spoiler-control-show {
  180.  opacity: .01;
  181.  transition: opacity .5s ease-in-out;
  182.  z-index: 998;
  183. }
  184. .spoiler-title .spoiler-control-show:hover {opacity: 1;}
  185.  
  186. .spoiler-title .spoiler-control-hide {
  187.  background: none !important;
  188.  width: 100%;
  189.  height: calc(100% - 38px);
  190.  margin-top: 38px;
  191.  cursor: default !important;
  192. }
  193.  
  194. .custom_panel:nth-of-type(1) h2, .custom_panel:nth-of-type(1) .spoiler-control-show {left: calc(50% + 41px);}
  195. .custom_panel:nth-of-type(1) .spoiler-control-show {background-position: -611px -37px !important;}
  196.  
  197. .custom_panel:nth-of-type(2) h2, .custom_panel:nth-of-type(2) .spoiler-control-show {left: calc(50% + 141px);}
  198. .custom_panel:nth-of-type(2) .spoiler-control-show {background-position: 0 bottom !important;}
  199.  
  200. .custom_panel:nth-of-type(3) h2, .custom_panel:nth-of-type(3) .spoiler-control-show {left: calc(50% + 241px);}
  201. .custom_panel:nth-of-type(3) .spoiler-control-show {background-position: -95px bottom !important;}
  202.  
  203. .custom_panel:nth-of-type(4) h2, .custom_panel:nth-of-type(4) .spoiler-control-show {left: calc(50% + 341px);}
  204. .custom_panel:nth-of-type(4) .spoiler-control-show {background-position: -190px bottom !important;}
  205.  
  206. /* Spoiler Function */
  207.  
  208. #column_1 .custom_panel {top: -100%;}
  209. #column_1 .custom_panel:focus-within {top: calc(50% - 266px);}
  210. #column_1 .custom_panel:focus-within .spoiler-control-show {opacity: 1;}
  211.  
  212. #column_1 .custom_panel:first-of-type {
  213.  background: none !important;
  214.  top: calc(50% - 266px) !important;
  215. }
  216.  
  217. /* Contact and Comments */
  218.  
  219. #id_contact, #id_comments {left: calc(50% - 444px);}
  220.  
  221. #id_contact {
  222.  background: none;
  223.  top: calc(50% - 236px);
  224. }
  225.  
  226. #id_comments {
  227.  background-position: right -156px;
  228.  top: calc(50% - 53px);
  229. }
  230. #id_comments #alert_container {padding: 0;}
  231. #id_comments #alerts_banner, #id_comments p, #id_comments dl {display: none;}
  232.  
  233. #id_contact ul:not(.buttons) li, #id_contact ul:not(.buttons) li a, #id_comments, #id_comments a {
  234.  display: block;
  235.  width: 53px !important;
  236.  height: 52px !important;
  237.  font-size: 0;
  238. }
  239. #id_contact ul:not(.buttons) li a, #id_comments a {position: absolute;}
  240.  
  241. #id_contact ul:not(.buttons) li {
  242.  position: relative;
  243.  margin-bottom: 9px;
  244. }
  245. #id_contact ul:not(.buttons) li:nth-of-type(1) {background-position: right 0px;}
  246. #id_contact ul:not(.buttons) li:nth-of-type(2) {background-position: right -52px;}
  247. #id_contact ul:not(.buttons) li:nth-of-type(3) {background-position: right -104px;}
  248.  
  249. #id_contact ul:not(.buttons) li, #id_comments {
  250.  opacity: .01;
  251.  transition: opacity .5s ease-in-out;
  252. }
  253. #id_contact ul:not(.buttons) li:hover, #id_comments:hover {opacity: 1;}
  254.  
  255. /* Details */
  256.  
  257. #id_details {
  258.  background: none;
  259.  display: flex;
  260.  flex-flow: row wrap;
  261.  align-content: center;
  262.  width: 390px;
  263.  height: 150px;
  264.  top: calc(50% + 103px);
  265.  left: calc(50% + 43px);
  266. }
  267. #id_details .forum_userstatus {display: none;}
  268.  
  269. #id_details p:first-of-type {
  270.  margin: 0 0 0 20px;
  271.  position: absolute;
  272. }
  273.  
  274. #id_details p:nth-of-type(n+2), #id_details::before, #id_details::after {
  275.  width: calc(100% - 130px);
  276.  margin: 0 0 0 130px;
  277. }
  278.  
  279. #id_details::before, #id_details::after, #id_details p::after {
  280.  display: block;
  281.  font-weight: bold;
  282.  opacity: .5;
  283. }
  284.  
  285. #id_details::before {
  286.  content: 'Music by Kezia Amelia ft. Renardi Effendi';
  287.  margin-bottom: 10px;
  288. }
  289. #id_details::after {content: 'Profile Theme by AlthIndor';}
  290.  
  291. #id_details p:last-of-type::after {
  292.  content: 'Profile Art Made by Piewat';
  293.  margin-top: 10px;
  294. }
  295.  
  296. /* Wish List */
  297.  
  298. .custom_panel ol {
  299.  display: grid;
  300.  grid-template-columns: repeat(8, 40px);
  301.  grid-column-gap: calc((100% - (40px * 8)) / 7);
  302.  grid-row-gap: 10px;
  303.  margin: 5px 0 0 0 !important;
  304.  padding: 0 2px;
  305. }
  306.  
  307. .custom_panel ol a {
  308.  display: inline-block;
  309.  background: #FFFFFF;
  310.  width: 30px;
  311.  height: 30px;
  312.  padding: 5px;
  313.  border-radius: 50%;
  314.  box-shadow: 0 0 2px rgba(0,0,0,.3);
  315.  outline: 1px dotted #FF0000;
  316.  outline-offset: -3px;
  317.  transition: all .5s ease-in-out;
  318. }
  319.  
  320. .custom_panel ol a:hover {
  321.  background: #30B0FF;
  322.  box-shadow: 0 0 2px #FFFFFF;
  323.  outline-color: #FFFFFF;
  324. }
  325.  
  326. /* Media */
  327.  
  328. .media_panel {
  329.  background: url('https://i.imgur.com/43iYKtm.gif') center no-repeat;
  330.  width: 30px;
  331.  height: 30px !important;
  332.  top: calc(50% + 243px);
  333.  left: calc(50% - 20px);
  334. }
  335.  
  336. .media_panel object {
  337.  position: absolute;
  338.  bottom: -2px;
  339.  left: -10px;
  340.  opacity: .01;
  341. }
  342.  
  343. .media_panel h2 {
  344.  background: none;
  345.  padding: 0;
  346.  color: #FFFFFF;
  347.  font: 600 10px/0 'Open Sans', sans-serif;
  348.  text-shadow: -1px 0 1px #000, 1px 0 1px #000, 0 -1px 1px #000, 0 1px 1px #000;
  349.  text-transform: capitalize;
  350.  position: fixed;
  351.  top: calc(50% + 298px);
  352.  left: calc(50% - 13px);
  353.  pointer-events: none;
  354. }
  355. .media_panel:hover h2 {display: initial;}
  356.  
  357. /* Misc */
  358.  
  359. .custom_panel .buttons {
  360.  width: 45px;
  361.  position: fixed;
  362.  left: calc(50% + 460px);
  363. }
  364. .custom_panel:nth-of-type(1) .buttons {top: calc(50% - 240px);}
  365. .custom_panel:nth-of-type(2) .buttons {top: calc(50% - 220px);}
  366. .custom_panel:nth-of-type(3) .buttons {top: calc(50% - 200px);}
  367. .custom_panel:nth-of-type(4) .buttons {top: calc(50% - 180px);}
  368.  
  369. .media_panel .buttons {
  370.  position: fixed;
  371.  top: calc(50% + 252px);
  372.  left: calc(50% + 15px);
  373. }
  374.  
  375. .picture_decoration {top: 50px !important;}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement