Advertisement
althindor

Pro for kanematsu

Dec 16th, 2019
435
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 8.33 KB | None | 0 0
  1. /* Profile by AlthIndor */
  2.  
  3. @keyframes SpinGalaxy {
  4.  from {transform: rotate3d(1.5, 1, 0, 45deg) rotate(0deg);}
  5.  to {transform: rotate3d(1.5, 1, 0, 45deg) rotate(360deg);}
  6. }
  7.  
  8. html {
  9.  --blue: #344062;
  10.  --gray: #38302E;
  11.  --dark: #0D0B0A;
  12.  --silv: #787888;
  13.  --drop: #0D0B0A80;
  14. }
  15.  
  16. html, body {
  17.  background: var(--dark);
  18.  height: 100vh;
  19.  min-height: 700px;
  20. }
  21. html body {position: relative;}
  22. body a {text-decoration: none !important;}
  23.  
  24. #panel-details {
  25.  background: linear-gradient(to bottom, var(--blue), var(--blue)), url('https://wallpaperaccess.com/full/296702.jpg') fixed center / cover;
  26.  background-blend-mode: hue, normal;
  27.  width: 100%;
  28.  height: 100%;
  29.  position: absolute;
  30.  top: 0;
  31.  left: 0;
  32.  perspective: 1000px;
  33.  overflow: hidden;
  34. }
  35. #panel-details h2, #panel-details div:nth-of-type(n+2) {display: none;}
  36.  
  37. #panel-details .hd {
  38.  content: url('https://i.imgur.com/nveUqFA.jpg');
  39.  position: absolute;
  40.  top: calc(50% - 960px);
  41.  left: calc(50% - 1260px);
  42.  mix-blend-mode: screen;
  43.  transform: rotate3d(1.5, 1, 0, 45deg);
  44.  animation: SpinGalaxy 360s linear infinite;
  45. }
  46.  
  47. /* Fonts */
  48.  
  49. @font-face {
  50.  font-family: 'Raleway';
  51.  font-style: normal;
  52.  font-weight: 600;
  53.  src: local('Raleway SemiBold'), local('Raleway-SemiBold'), url(https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwPIsWqZPAA.woff2) format('woff2');
  54. }
  55.  
  56. @font-face {
  57.  font-family: 'Raleway';
  58.  font-style: normal;
  59.  font-weight: 400;
  60.  src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v14/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
  61. }
  62.  
  63. @font-face {
  64.  font-family: 'Raleway';
  65.  font-style: normal;
  66.  font-weight: 300;
  67.  src: local('Raleway Light'), local('Raleway-Light'), url(https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwIYqWqZPAA.woff2) format('woff2');
  68. }
  69.  
  70. /* Header */
  71.  
  72. #viewer #gaia_header {
  73.  background: var(--dark) !important;
  74.  height: 28px !important;
  75.  box-shadow: 0 2px 1px var(--drop);
  76. }
  77. #gaia_header li.spacer {display: none !important;}
  78.  
  79. #gaia_header #header_left, #gaia_header #header_right {
  80.  background: none !important;
  81.  width: 50% !important;
  82.  height: 100% !important;
  83.  font: 700 0px/28px 'Raleway', sans-serif !important;
  84. }
  85.  
  86. #header_left img {
  87.  background: url('https://i.imgur.com/cGGVY2x.png') no-repeat 0 7px;
  88.  width: 0 !important;
  89.  padding: 0 34px 0 0;
  90.  filter: invert(100%);
  91. }
  92.  
  93. #gaia_header li a {
  94.  display: inline-block !important;
  95.  height: 100%;
  96.  color: #FFFFFF !important;
  97.  font-size: 11px !important;
  98.  font-weight: 600 !important;
  99.  text-transform: uppercase;
  100.  padding: 0 6px;
  101.  vertical-align: top;
  102.  transition: background .5s ease-in-out;
  103. }
  104. #gaia_header li a:hover {background: var(--blue);}
  105.  
  106. /* Columns */
  107.  
  108. #columns, #column_1, #column_2 {
  109.  float: none;
  110.  margin: 0;
  111.  position: absolute;
  112. }
  113. #column_1, #column_2 {height: 100%;}
  114. #column_3 {display: none;}
  115.  
  116. #columns {
  117.  background: url('https://images2.imgbox.com/73/16/koUSzh4G_o.png');
  118.  width: 1000px;
  119.  height: 700px;
  120.  transform: translateZ(0);
  121. }
  122.  
  123. #column_1 {
  124.  width: 100%;
  125.  height: 100%;
  126. }
  127.  
  128. #column_2 {
  129.  width: 350px;
  130.  height: 328px;
  131.  top: 248px;
  132.  right: 110px;
  133. }
  134.  
  135. /* Scrollbars */
  136.  
  137. #columns ::-webkit-scrollbar {
  138.  background: rgba(0,0,0,.2);
  139.  width: 6px;
  140. }
  141. #columns ::-webkit-scrollbar-thumb {background: var(--silv);}
  142.  
  143. .panel {
  144.  scrollbar-color: var(--silv) rgba(0,0,0,.2);
  145.  scrollbar-width: thin;
  146. }
  147.  
  148. /* Panels */
  149.  
  150. .panel, .panel h2 {
  151.  color: #FFFFFF;
  152.  padding: 0;
  153.  margin: 0;
  154.  overflow: hidden;
  155. }
  156.  
  157. .panel {
  158.  background: none;
  159.  position: absolute;
  160.  box-sizing: border-box;
  161. }
  162. .panel a {color: inherit;}
  163. .panel img {max-width: 100% !important;}
  164.  
  165. #column_2 a {
  166.  color: #B7B7C1;
  167.  font-weight: 600;
  168.  transition: color .5s ease-in-out;
  169. }
  170. #column_2 a:hover {color: var(--silv);}
  171.  
  172. #column_2 .panel {
  173.  width: 100%;
  174.  height: 100%;
  175.  font: 11px/1.7 'Raleway', sans-serif;
  176.  top: 0;
  177.  overflow-y: scroll;
  178.  transition: right .5s ease-in-out;
  179. }
  180.  
  181. #id_about, #id_comments {
  182.  text-align: right;
  183.  padding-right: 10px;
  184. }
  185.  
  186. #column_2 .panel:hover, #column_2 #id_about {
  187.  right: 0;
  188.  transition-delay: .5s;
  189. }
  190.  
  191. #column_2 .panel, #column_2 .panel:hover ~ #id_about {
  192.  right: -100%;
  193.  transition-delay: 0s;
  194. }
  195.  
  196. /* Contact and Headers */
  197.  
  198. #column_2 h2, #id_contact li, #id_comments h2 + div, #id_comments h2 ~ p {
  199.  text-align: center;
  200.  transition: background .5s ease-in-out;
  201. }
  202. #column_2 .panel:hover h2, #id_contact li:hover {background: var(--blue) content-box;}
  203.  
  204. #column_2 h2, #id_comments h2 + div, #id_comments h2 ~ p {
  205.  width: 110px;
  206.  height: 32px;
  207.  font: 400 0/32px 'Raleway', sans-serif;
  208.  position: fixed;
  209. }
  210.  
  211. /* Headers */
  212.  
  213. #column_2 h2 {
  214.  background: #2B2321 content-box;
  215.  top: 206px;
  216. }
  217. #column_2 .panel:hover h2 {border-bottom: 10px solid transparent;}
  218. #column_2 #id_about h2 {display: none;}
  219.  
  220. #id_wishlist h2 {right: 350px;}
  221. #id_comments h2 {right: 230px;}
  222. #id_signature h2 {right: 110px;}
  223.  
  224. #column_2 h2::before {font-size: 14px;}
  225. #id_wishlist h2::before {content: 'WISHLIST';}
  226. #id_comments h2::before {content: 'COMMENTS';}
  227. #id_signature h2::before {content: 'SIGNATURE';}
  228.  
  229. /* Contact */
  230.  
  231. #id_contact, #id_contact ul, #id_contact li {height: 40px;}
  232. #id_contact span, #id_contact h2 {display: none;}
  233.  
  234. #id_contact {
  235.  width: 390px;
  236.  top: 196px;
  237.  left: 950px;
  238.  transform-origin: top left;
  239.  transform: rotate(90deg);
  240. }
  241.  
  242. #id_contact li {
  243.  float: left;
  244.  width: 130px;
  245.  font: 300 0/40px 'Raleway', sans-serif;
  246.  position: relative;
  247. }
  248. #id_contact li::before {font-size: 20px;}
  249. #id_contact li:nth-of-type(1)::before {content: 'FRIEND';}
  250. #id_contact li:nth-of-type(2)::before {content: 'MESSAGE';}
  251. #id_contact li:nth-of-type(3)::before {content: 'TRADE';}
  252.  
  253. #id_contact a {
  254.  display: block;
  255.  width: 100%;
  256.  height: 100%;
  257.  position: absolute;
  258.  top: 0;
  259.  left: 0;
  260. }
  261.  
  262. /* Wish List */
  263.  
  264. #id_wishlist {
  265.  display: grid;
  266.  grid-template-columns: repeat(6, 46px);
  267.  grid-auto-rows: 46px;
  268.  gap: 10px;
  269.  padding-left: 5px;
  270. }
  271. #id_wishlist .premium_sparkle {display: none;}
  272.  
  273. #id_wishlist .item {
  274.  background: var(--silv);
  275.  width: 30px;
  276.  height: 30px;
  277.  padding: 6px;
  278.  position: relative;
  279.  border: 2px solid transparent;
  280.  border-radius: 50%;
  281.  box-shadow: 0 0 0 1px var(--gray) inset;
  282.  outline: 1px dotted #FFFFFF80;
  283.  outline-offset: -6px;
  284.  transition: all .5s ease-in-out;
  285. }
  286.  
  287. #id_wishlist .item:hover {
  288.  background: var(--blue);
  289.  box-shadow: 0 0 0 1px var(--silv) inset;
  290. }
  291.  
  292. #id_wishlist .owner_checkmark {
  293.  margin: 0;
  294.  bottom: 4px;
  295.  right: 4px;
  296.  filter: saturate(0%) brightness(500%);
  297. }
  298.  
  299. /* Comments */
  300.  
  301. #id_comments #alerts_banner {display: none;}
  302. #id_comments #alert_container {padding: 0;}
  303. #id_comments .dropBox {display: none;}
  304. #id_comments dd:nth-last-of-type(n+2) {margin: 0 0 15px 0;}
  305. #id_comments dd:last-of-type {margin: 0;}
  306.  
  307. #id_comments h2 + div, #id_comments h2 ~ p {
  308.  background: var(--dark);
  309.  margin: 0;
  310.  bottom: 72px;
  311.  box-shadow: 2px 2px var(--drop);
  312. }
  313. #id_comments h2 + div:hover, #id_comments h2 ~ p:hover {background: var(--silv);}
  314. #id_comments h2 + div {right: 230px;}
  315. #id_comments h2 ~ p {right: 110px;}
  316.  
  317. #id_comments h2 + div a, #id_comments h2 ~ p a {
  318.  display: block;
  319.  width: 100%;
  320.  height: 100%;
  321.  color: #FFFFFF !important;
  322.  font: 400 0/32px 'Raleway', sans-serif;
  323.  position: absolute;
  324. }
  325. #id_comments h2 + div a::after, #id_comments h2 ~ p a::after {font-size: 14px;}
  326. #id_comments h2 + div a::after {content: 'CMT ADD';}
  327. #id_comments h2 ~ p a::after {content: 'CMT ALL';}
  328.  
  329. #id_comments dt {
  330.  height: auto;
  331.  line-height: inherit;
  332.  padding: 0 0 1px 0;
  333.  margin: 0 0 2px 0;
  334.  border-bottom: 1px dotted var(--drop);
  335. }
  336.  
  337. #id_comments .username {
  338.  float: none;
  339.  display: inline;
  340. }
  341. #id_comments .username::after {content: '|';}
  342.  
  343. /* Media */
  344.  
  345. .media_panel {
  346.  background: url('https://i.imgur.com/gqTTTvw.png') -20px -6px !important;
  347.  width: 72px;
  348.  height: 32px !important;
  349.  bottom: 72px;
  350.  left: 118px;
  351. }
  352. .media_panel h2 {display: none;}
  353.  
  354. .media_panel iframe {
  355.  width: 400px;
  356.  height: 300px;
  357.  position: absolute;
  358.  bottom: -2px;
  359.  left: -20px;
  360.  opacity: .01;
  361. }
  362.  
  363. /* Alignment */
  364.  
  365. #pictures_container, #texts_container {
  366.  width: 1px;
  367.  height: 1px;
  368.  position: absolute;
  369.  overflow: visible;
  370. }
  371.  
  372. #columns, #pictures_container, #texts_container {
  373.  top: calc(50% - 360px);
  374.  left: calc(100% - 1000px);
  375. }
  376. @media screen and (min-width: 1680px) {#columns, #pictures_container, #texts_container {left: calc(50% - 200px);}}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement