Advertisement
althindor

Pro for FruitTartz

Jul 12th, 2020
1,695
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.45 KB | None | 0 0
  1. /* Profile by AlthIndor */
  2.  
  3. html, body {
  4.  background: url('https://i.imgur.com/DtzdQ6M.png') center calc(50% + 15px) no-repeat, url('https://i.imgur.com/36yzoXi.jpg') 0 0;
  5.  min-height: 800px;
  6. }
  7. html {--dark-pink: #D01250;}
  8. body {position: relative;}
  9.  
  10. body a {
  11.  text-decoration: none !important;
  12.  transition: all .5s ease-in-out;
  13. }
  14.  
  15. #columns, #column_3, #id_footprints, .custom_panel:nth-of-type(1) span ~ a {background: url('https://images2.imgbox.com/bb/19/ivxT6WUe_o.png') no-repeat border-box;}
  16. #column_3 {background-position: top right;}
  17. #id_footprints {background-position: bottom right;}
  18.  
  19. @media screen and (min-width: 1300px) {html, body {min-height: 880px;}}
  20. @media screen and (min-width: 1400px) {html, body {min-height: 960px;}}
  21. @media screen and (min-width: 1500px) {html, body {min-height: 1040px;}}
  22.  
  23. ::selection {
  24.  background: var(--dark-pink);
  25.  color: #FFFFFF;
  26. }
  27.  
  28. /* Fonts */
  29.  
  30. @font-face {
  31.  font-family: 'Cinzel';
  32.  font-style: normal;
  33.  font-weight: 700;
  34.  src: local('Cinzel Bold'), local('Cinzel-Bold'), url(https://fonts.gstatic.com/s/cinzel/v9/8vIK7ww63mVu7gtzTUHuE2Za.woff2) format('woff2');
  35. }
  36.  
  37. @font-face {
  38.  font-family: 'Handlee';
  39.  font-style: normal;
  40.  font-weight: 400;
  41.  src: local('Handlee Regular'), local('Handlee-Regular'), url(https://fonts.gstatic.com/s/handlee/v8/-F6xfjBsISg9aMakPm3wow.woff2) format('woff2');
  42. }
  43.  
  44. @font-face {
  45.  font-family: 'Work Sans';
  46.  font-style: normal;
  47.  font-weight: 400;
  48.  src: url(https://fonts.gstatic.com/s/worksans/v8/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K0nXBi8Jpg.woff2) format('woff2');
  49. }
  50.  
  51. @font-face {
  52.  font-family: 'Work Sans';
  53.  font-style: normal;
  54.  font-weight: 600;
  55.  src: url(https://fonts.gstatic.com/s/worksans/v8/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K5fQBi8Jpg.woff2) format('woff2');
  56. }
  57.  
  58. /* Header */
  59.  
  60. #viewer #gaia_header {
  61.  height: 29px !important;
  62.  border-bottom: 1px solid #808080;
  63.  box-shadow: 0 1px 5px #000;
  64. }
  65. #gaia_header li.spacer {display: none !important;}
  66.  
  67. #gaia_header #header_left, #gaia_header #header_right {
  68.  background: none !important;
  69.  font: 0/29px 'Cinzel', serif !important;
  70.  padding: 0 8px !important;
  71.  box-sizing: border-box;
  72. }
  73. #gaia_header #header_right {float: right;}
  74.  
  75. #gaia_header img {
  76. -webkit-mask: url('https://i.imgur.com/cGGVY2x.png') 0 4px no-repeat;
  77.  mask: url('https://i.imgur.com/cGGVY2x.png') 0 4px no-repeat;
  78.  background: #FFFFFF;
  79.  width: 0 !important;
  80.  padding: 0 34px 0 0;
  81.  margin-right: -1px;
  82.  transition: background .5s ease-in-out;
  83. }
  84. #header_left li:nth-of-type(2) a:hover img {background: #FFD060;}
  85.  
  86. #gaia_header a {
  87.  color: #FFFFFF !important;
  88.  font-size: 11px !important;
  89.  text-transform: uppercase;
  90. }
  91. #gaia_header a:hover {color: #FFD060 !important;}
  92.  
  93. #header_left li:nth-of-type(n+3)::before, #header_right li:nth-of-type(n+2)::before {
  94.  content: '▩';
  95.  color: navajowhite;
  96.  font-size: 11px;
  97.  margin: 0 7px;
  98. }
  99.  
  100. /* Columns */
  101.  
  102. #columns, #column_1, #column_2, #column_3 {
  103.  float: none;
  104.  margin: 0;
  105.  position: absolute;
  106. }
  107.  
  108. #columns, #column_1 {
  109.  width: 1240px;
  110.  height: 780px;
  111. }
  112.  
  113. #columns {
  114.  top: calc(50% - 390px + 15px);
  115.  left: calc(50% - 620px);
  116. }
  117.  
  118. #column_2 {
  119.  width: 260px;
  120.  height: 150px;
  121.  top: 110px;
  122.  left: 950px;
  123.  border: 0 solid transparent;
  124.  border-width: 0 0 100px 0;
  125.  transform-origin: 20px 20px;
  126.  transform: rotate(5deg);
  127.  overflow: visible;
  128. }
  129.  
  130. #column_3 {
  131.  width: 290px;
  132.  height: 250px;
  133.  top: 137px;
  134.  right: 19px;
  135.  clip-path: polygon(0 0, 5px 0, 121px 120px, 130px 118px, 138px 124px, 100% 81px, 100% 100%, 0 100%);
  136. }
  137.  
  138. /* Scrollbars */
  139.  
  140. #columns ::-webkit-scrollbar {
  141.  width: 7px;
  142.  height: 7px;
  143.  background: #00000018;
  144. }
  145. #columns ::-webkit-scrollbar-thumb {background: var(--dark-pink);}
  146.  
  147. #columns * {
  148.  scrollbar-color: var(--dark-pink) #00000018;
  149.  scrollbar-width: thin;
  150. }
  151.  
  152. /* Panels */
  153.  
  154. .panel, .panel h2 {
  155.  background: none;
  156.  color: #202020;
  157.  font: 400 11px/1.71 'Work Sans', sans-serif;
  158.  padding: 0;
  159.  margin: 0;
  160.  box-sizing: border-box;
  161.  overflow: hidden;
  162. }
  163. .panel {position: absolute;}
  164. .panel img {max-width: 100% !important;}
  165. .bbcode-swapping-image {background-image: url('https://i.imgur.com/2MbyLRf.png');}
  166.  
  167. .panel:not(#id_about) h2 {display: none;}
  168.  
  169. .panel a {color: var(--dark-pink);}
  170. .panel a:hover {color: #FFA040;}
  171.  
  172. #id_about, .custom_panel:nth-of-type(2) {
  173.  width: 360px;
  174.  height: 578px !important;
  175.  top: 101px;
  176.  z-index: 2;
  177. }
  178. #id_about {left: 133px;}
  179. .custom_panel:nth-of-type(2) {left: 533px;}
  180.  
  181. .custom_panel:nth-of-type(1) {
  182.  width: 100%;
  183.  height: 100%;
  184.  z-index: 1;
  185. }
  186.  
  187. #id_details, #id_wishlist {z-index: 3;}
  188.  
  189. /* About Me */
  190.  
  191. #id_about h2 {
  192.  float: left;
  193.  width: 155px;
  194.  height: 205px;
  195.  visibility: hidden;
  196. }
  197.  
  198. /* Links */
  199.  
  200. .custom_panel:nth-of-type(1) span, .custom_panel:nth-of-type(1) span ~ a {
  201.  display: block;
  202.  position: absolute;
  203. }
  204.  
  205. .custom_panel:nth-of-type(1) span {
  206.  width: 111px;
  207.  height: 30px;
  208.  text-align: center;
  209. }
  210.  
  211. .custom_panel:nth-of-type(1) span a {
  212.  color: #000;
  213.  font: 14px/31px 'Handlee', cursive;
  214. }
  215.  
  216. .custom_panel:nth-of-type(1) a:hover {
  217.  color: var(--dark-pink);
  218.  text-shadow: 0 0 5px #FFFFFF;
  219. }
  220.  
  221. .custom_panel:nth-of-type(1) span:nth-of-type(1), .custom_panel:nth-of-type(1) span:nth-of-type(2) {
  222.  transform-origin: 0 0;
  223.  transform: rotate(-90deg);
  224. }
  225.  
  226. .custom_panel:nth-of-type(1) span:nth-of-type(1) {
  227.  top: 378px;
  228.  left: 87px;
  229. }
  230.  
  231. .custom_panel:nth-of-type(1) span:nth-of-type(2) {
  232.  top: 267px;
  233.  left: 83px;
  234. }
  235.  
  236. .custom_panel:nth-of-type(1) span:nth-of-type(3) {
  237.  top: 50px;
  238.  left: 655px;
  239. }
  240.  
  241. .custom_panel:nth-of-type(1) span:nth-of-type(4) {
  242.  top: 52px;
  243.  left: 766px;
  244. }
  245.  
  246. .custom_panel:nth-of-type(1) span ~ a {
  247.  background-position: right -260px;
  248.  width: 165px;
  249.  height: 29px;
  250.  font-size: 0;
  251.  bottom: 107px;
  252.  right: 91px;
  253.  opacity: .01;
  254. }
  255. .custom_panel:nth-of-type(1) span ~ a:hover {opacity: 1;}
  256.  
  257. /* Gallery */
  258.  
  259. .custom_panel div[id*='content'], .custom_panel:nth-of-type(2) a {
  260.  width: 100%;
  261.  height: 100%;
  262. }
  263. .custom_panel br {display: none;}
  264.  
  265. .custom_panel:nth-of-type(2) div[id*='content'] {
  266.  display: grid;
  267.  grid-template-columns: repeat(3, 107px);
  268.  grid-auto-rows: 186px;
  269.  gap: 10px;
  270.  overflow: hidden scroll;
  271.  scroll-snap-type: y mandatory;
  272. }
  273.  
  274. .custom_panel:nth-of-type(2) a {
  275.  background: #FFFFFFA0;
  276.  display: flex;
  277.  flex-flow: row nowrap;
  278.  justify-content: center;
  279.  border: 1px solid #000;
  280.  border-radius: 3px;
  281.  box-sizing: border-box;
  282.  overflow: hidden;
  283.  scroll-snap-align: start;
  284.  scroll-snap-stop: always;
  285. }
  286.  
  287. .custom_panel a img {
  288.  object-fit: cover;
  289.  max-height: 100%;
  290.  transition: all .5s ease-in-out;
  291. }
  292.  
  293. .custom_panel a:hover img.user_img {
  294.  filter: brightness(125%);
  295.  opacity: .9;
  296. }
  297. .custom_panel img[class*='bbcode-swap'] {align-self: center;}
  298.  
  299. /* Details */
  300.  
  301. #id_details {
  302.  top: 101px;
  303.  left: 143px;
  304. }
  305. #id_details p:nth-of-type(n+2) {display: none;}
  306.  
  307. .forum_userstatus, #avatar_menu {
  308.  width: 120px;
  309.  text-indent: 1px;
  310.  border: 1px solid #A0A0A0;
  311.  box-sizing: border-box;
  312. }
  313. #avatar_menu .menu_seperator {margin: 0 !important;}
  314.  
  315. .forum_userstatus {
  316.  height: 25px;
  317.  padding-top: 4px;
  318.  margin: 0;
  319. }
  320. .forum_userstatus .statuslinks {background: url('https://i.imgur.com/UzAXOFf.png') 89px -106px !important;}
  321.  
  322. .forum_userstatus .statuslinks span {
  323.  background-position-x: 1px !important;
  324.  font: 700 12px/16px 'Cinzel', serif;
  325. }
  326.  
  327. #avatar_menu a {
  328.  color: #404040;
  329.  font: 10px/1.3 'Open Sans', sans-serif;
  330.  padding-bottom: 4px !important;
  331. }
  332. #avatar_menu a:hover {background: pink;}
  333.  
  334. /* Wish List */
  335.  
  336. #id_wishlist {
  337.  display: grid;
  338.  grid-template-rows: repeat(3, 40px);
  339.  grid-auto-flow: column;
  340.  gap: 10px;
  341.  width: 190px;
  342.  height: 160px;
  343.  top: 472px;
  344.  right: 78px;
  345.  overflow-x: scroll;
  346.  scroll-snap-type: x mandatory;
  347. }
  348. .premium_sparkle {display: none;}
  349.  
  350. #id_wishlist .item {
  351.  padding: 1px;
  352.  position: relative;
  353.  scroll-snap-align:  start;
  354.  scroll-snap-stop: always;
  355. }
  356.  
  357. #id_wishlist .item a {
  358.  display: block;
  359.  background: #D0E4B4;
  360.  width: 30px;
  361.  height: 30px;
  362.  padding: 4px;
  363.  border-radius: 3px;
  364.  box-shadow: 0 1px 1px #00000080;
  365. }
  366. #id_wishlist .item a:hover {background: #D0E4B440;}
  367.  
  368. .owner_checkmark {
  369.  margin: 0;
  370.  bottom: 7px;
  371.  left: 5px;
  372. }
  373.  
  374. /* Visitors */
  375.  
  376. #column_2 {
  377.  transition: top .5s .5s ease-in-out, transform .5s .5s ease-in-out, z-index 0s .5s linear;
  378.  z-index: 2;
  379. }
  380.  
  381. #column_3 {
  382.  transition: z-index 0s .5s linear;
  383.  z-index: 3;
  384. }
  385.  
  386. #id_footprints, #id_footprints .item {
  387.  display: grid;
  388.  justify-content: center;
  389. }
  390.  
  391. #id_footprints {
  392.  grid-template-columns: 100%;
  393.  gap: 10px;
  394.  width: 100%;
  395.  height: 100%;
  396.  top: 0;
  397.  padding-right: 5px;
  398.  border: 10px solid transparent;
  399.  box-shadow: 0 0 2px #00000040;
  400.  transition: top .5s 0s ease-in-out;
  401.  overflow-y: scroll;
  402. }
  403.  
  404. #id_footprints .item {
  405.  grid-template-rows: repeat(2, max-content);
  406.  grid-template-columns: repeat(2, max-content);
  407. }
  408.  
  409. #id_footprints .item a {
  410.  grid-column: 1 / span 2;
  411.  justify-self: center;
  412.  line-height: 1.5;
  413. }
  414.  
  415. #id_footprints .item::before {
  416.  content: 'Visited ';
  417.  white-space: pre;
  418.  grid-row: 2 / span 1;
  419.  justify-self: right;
  420. }
  421.  
  422. #column_2:hover #id_footprints {
  423.  top: 110px;
  424.  transition: top .5s .5s ease-in-out;
  425. }
  426.  
  427. #column_2:hover {
  428.  transition: top .5s ease-in-out, transform .5s ease-in-out, z-index 0s .5s linear;
  429.  top: 0;
  430.  transform: rotate(0deg);
  431.  z-index: 3;
  432. }
  433.  
  434. #column_2:hover + #column_3 {z-index: 2;}
  435.  
  436. /* Misc */
  437.  
  438. #pictures_container, #texts_container {
  439.  width: 1px;
  440.  height: 1px;
  441.  position: absolute;
  442.  top: 0;
  443.  left: 50%;
  444.  overflow: visible;
  445. }
  446. #equipped-item-details_mask:nth-of-type(2), #avatar_menu + div + div {display: none !important;}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement