Advertisement
althindor

Pro for Resviana

Aug 7th, 2022
1,276
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 12.75 KB | None | 0 0
  1. /* Design by FlaMarie */
  2. /* Coded by AlthIndor */
  3.  
  4. :root {
  5.   --blue1: #88D8E828;
  6.   --blue2: #5888B8;
  7.   --blue3: #183864;
  8.   --pink1: #F0B0C8;
  9.   --pink2: #B86C80;
  10.   --text1: #604020;
  11. }
  12.  
  13. html, body {
  14.   background: url('https://i.imgur.com/Ey2QrOT.jpg') fixed center / cover no-repeat thistle;
  15.   height: unset;
  16.   min-height: 100vh;
  17. }
  18. @media screen and (max-height: 1246px) {html {overflow-y: scroll;}}
  19.  
  20. body {
  21.   display: grid;
  22.   grid-template: minmax(calc(100vh - 80px), max-content) / 1fr max-content 1fr;
  23.   align-items: center;
  24.   padding: 40px 0;
  25.   box-sizing: border-box;
  26. }
  27. #panel-details, #footer {display: none;}
  28.  
  29. * {cursor: url('https://i.imgur.com/mgPKGXa.png'), auto !important;}
  30. a, a *, button, button * {cursor: url('https://i.imgur.com/UCnMoKl.png'), url('https://i.imgur.com/mgPKGXa.png'), auto !important;}
  31.  
  32. body a {
  33.   text-decoration: none !important;
  34.   transition: color .5s ease-in-out, background-color .5s ease-in-out, opacity .5s ease-in-out;
  35. }
  36.  
  37. /* Fonts */
  38.  
  39. @font-face {
  40.   font-family: 'Noto Serif';
  41.   font-style: normal;
  42.   font-weight: 400;
  43.   src: local('Noto Serif'), url('https://fonts.gstatic.com/s/notoserif/v21/ga6Iaw1J5X9T9RW6j9bNfFcWaA.woff2') format('woff2');
  44. }
  45.  
  46. @font-face {
  47.   font-family: 'Noto Serif';
  48.   font-style: normal;
  49.   font-weight: 700;
  50.   src: local('Noto Serif Bold'), url('https://fonts.gstatic.com/s/notoserif/v21/ga6Law1J5X9T9RW6j9bNdOwzfReecQ.woff2') format('woff2');
  51. }
  52.  
  53. @font-face {
  54.   font-family: 'Parisienne';
  55.   font-style: normal;
  56.   font-weight: 400;
  57.   src: local('Parisienne'), url('https://fonts.gstatic.com/s/parisienne/v13/E21i_d3kivvAkxhLEVZpQyhwDw.woff2') format('woff2');
  58. }
  59.  
  60. @font-face {
  61.   font-family: 'Font Awesome 5 Free';
  62.   font-style: normal;
  63.   font-weight: 900;
  64.   src: url('https://ka-f.fontawesome.com/releases/v5.15.2/webfonts/free-fa-solid-900.woff2') format('woff2');
  65. }
  66.  
  67. /* Header */
  68.  
  69. #viewer #gaia_header, #header_left, #header_right {background: none !important;}
  70. #viewer #header_left img {display: none !important;}
  71. #gaia_header li {margin: 0 3px;}
  72. #gaia_header li.spacer {display: none !important;}
  73.  
  74. #viewer #gaia_header {
  75.   position: absolute !important;
  76.   top: 6px !important;
  77. }
  78. @media screen and (min-width: 1440px) {#viewer #gaia_header {position: fixed !important;}}
  79.  
  80. #gaia_header #header_left, #gaia_header #header_right {
  81.   width: unset !important;
  82.   font: 400 0/18px 'Noto Serif', serif !important;
  83.   padding: 0 3px !important;
  84. }
  85. #gaia_header #header_right {float: right;}
  86.  
  87. #header_left li:nth-of-type(2) a::before {content: '​';}
  88.  
  89. #header_left li:nth-of-type(2) a::after {
  90.   content: url('https://i.imgur.com/cGGVY2x.png');
  91.   margin: 2px 0 0 1px;
  92.   filter: invert(.25) sepia(100%) saturate(200%) hue-rotate(-20deg);
  93. }
  94.  
  95. #gaia_header a {
  96.   background: #FFFFFF;
  97.   color: var(--text1) !important;
  98.   font-size: 10px !important;
  99.   padding: 0 4px;
  100.   border: 3px double #E0C868;
  101.   border-radius: 5px;
  102. }
  103. #viewer #gaia_header a {display: inline-flex !important}
  104. #viewer #gaia_header a:hover {opacity: .75;}
  105.  
  106. #header_right a[href*='edit'], #header_right a[href*='report'] {font-size: 0 !important;}
  107. #header_right a[href*='edit']::before, #header_right a[href*='report']::before {font-size: 10px;}
  108. #header_right a[href*='edit']::before {content: 'Edit My Profile';}
  109. #header_right a[href*='report']::before {content: 'Report Profile';}
  110.  
  111. /* Columns */
  112.  
  113. #columns, #columns .column {
  114.   float: none;
  115.   display: block;
  116.   font-size: 0;
  117.   margin: 0;
  118.   position: absolute;
  119. }
  120. #columns, #column_1 {contain: layout;}
  121. #column_3 {display: none !important;}
  122.  
  123. #columns {
  124.   grid-column: 2;
  125.   width: 570px;
  126.   height: 0;
  127.   position: static;
  128.   border: 24px solid transparent;
  129.   border-width: 370px 24px 307px 24px;
  130.   border-image: url('https://i.imgur.com/ekXU7VC.png') 370 24 307 24 fill;
  131.   transition: height .5s ease-in-out;
  132. }
  133.  
  134. #columns:hover {
  135.   height: 490px;
  136.   transition: height .5s .5s ease-in-out;
  137. }
  138.  
  139. #column_1 {
  140.   width: 100%;
  141.   height: 470px;
  142.   top: 10px;
  143. }
  144.  
  145. #column_2 {
  146.   background: var(--blue1);
  147.   width: 270px;
  148.   height: 330px;
  149.   top: 70px;
  150.   left: 280px;
  151.   border: 10px solid transparent;
  152.   border-radius: 5px;
  153. }
  154.  
  155. /* Scrollbars */
  156.  
  157. #column_2 ::-webkit-scrollbar {width: 0;}
  158. #column_2 .panel {scrollbar-width: none;}
  159.  
  160. #id_equipment {scrollbar-width: thin;}
  161. #id_equipment::-webkit-scrollbar, #id_equipment::-webkit-scrollbar-thumb {width: 8px;}
  162. #id_equipment::-webkit-scrollbar {background: #F0F0F0;}
  163. #id_equipment::-webkit-scrollbar-thumb {background: #CDCDCD;}
  164.  
  165. /* Panels */
  166.  
  167. .panel, .panel h2 {
  168.   text-align: center;
  169.   padding: 0;
  170.   margin: 0;
  171.   box-sizing: border-box;
  172. }
  173.  
  174. .panel {
  175.   background: none;
  176.   color: var(--text1);
  177.   font: 10px/1.6 'Noto Serif', serif;
  178.   position: absolute;
  179.   overflow: hidden;
  180.   overscroll-behavior: contain;
  181. }
  182.  
  183. .panel a {color: var(--blue3);}
  184. .panel a:hover {color: goldenrod;}
  185.  
  186. #id_about img, #id_comments .postcontent img {max-width: 100%;}
  187.  
  188. #column_2 .panel {
  189.   width: 100%;
  190.   height: 100%;
  191.   left: 0;
  192.   overflow-y: scroll;
  193. }
  194.  
  195. #column_2 .panel:hover, #column_2 #id_about {
  196.   top: 0;
  197.   transition: top .5s .5s ease-in-out;
  198. }
  199.  
  200. #column_2 .panel, #column_2 .panel:hover ~ #id_about {
  201.   top: 100%;
  202.   transition: top .5s 0s ease-in-out;
  203. }
  204.  
  205. /* Headers */
  206.  
  207. .panel h2 {
  208.   background: var(--blue2);
  209.   width: 90px;
  210.   height: 40px;
  211.   color: #FFFFFF;
  212.   font: 700 22px/42px 'Parisienne', cursive;
  213.   text-transform: capitalize;
  214.   position: fixed;
  215.   top: 440px;
  216.   border-radius: 5px;
  217.   transition: all .5s ease-in-out;
  218. }
  219. #column_1 h2, #id_about h2 {display: none;}
  220. .panel:hover h2 {background: var(--blue3);}
  221.  
  222. #id_wishlist h2 {left: 280px;}
  223. #id_footprints h2 {left: 380px;}
  224. #id_comments h2 {left: 480px;}
  225.  
  226. .panel h2::after {
  227.   height: calc(100% + 30px);
  228.   position: absolute;
  229.   bottom: 0;
  230. }
  231. .panel:hover h2::after {content: '';}
  232.  
  233. #id_wishlist h2::after {
  234.   width: calc(100% + 10px);
  235.   left: 0;
  236. }
  237.  
  238. #id_footprints h2::after {
  239.   width: calc(100% + 20px);
  240.   left: -10px;
  241. }
  242.  
  243. #id_comments h2::after {
  244.   width: calc(100% + 10px);
  245.   right: 0;
  246. }
  247.  
  248. /* Buttons */
  249.  
  250. #id_store, #id_store a, #id_contact li, #id_contact a, .media_panel {
  251.   width: 40px;
  252.   height: 40px !important;
  253. }
  254.  
  255. #id_store, #id_contact li, .media_panel {
  256.   background-color: var(--pink1);
  257.   border-radius: 5px;
  258.   transition: all .5s ease-in-out;
  259. }
  260. #id_store:hover, #id_contact li:hover, .media_panel:hover {background-color: var(--pink2);}
  261.  
  262. #id_store, #id_contact {
  263.   color: #FFFFFF;
  264.   text-align: center;
  265. }
  266. #id_store {left: 430px;}
  267. #id_contact {left: 280px;}
  268.  
  269. .media_panel {
  270.   background-image: url('https://i.imgur.com/ZrLV2TW.png');
  271.   background-position: -8px 0;
  272.   width: 90px;
  273.   left: 480px;
  274. }
  275.  
  276. #id_contact li {
  277.   float: left;
  278.   margin: 0 10px 0 0;
  279.   position: relative;
  280.   overflow: hidden;
  281. }
  282. #id_contact span {display: none;}
  283.  
  284. #id_contact a, #id_store a {
  285.   font-size: 0;
  286.   position: absolute;
  287.   left: 0;
  288. }
  289.  
  290. #id_store::before, #id_contact li::before {font: 900 20px/40px 'Font Awesome 5 Free';}
  291. #id_store::before {content: '';}
  292. #id_contact li:nth-of-type(1)::before {content: '';}
  293. #id_contact li:nth-of-type(2)::before {content: '';}
  294. #id_contact li:nth-of-type(3)::before {content: '';}
  295.  
  296. #id_store h3, #id_store div, #id_store h2 ~ p:first-of-type {display: none;}
  297. #id_store p:last-of-type {display: contents;}
  298.  
  299. /* Details */
  300.  
  301. #id_details, #id_details p:first-of-type {
  302.   background: var(--blue1);
  303.   width: 260px;
  304.   border-radius: 5px;
  305. }
  306. #id_details h2, .forum_userstatus {display: none;}
  307. #id_details p {margin: 0;}
  308.  
  309. #id_details {
  310.   display: flex;
  311.   flex-flow: column nowrap;
  312.   justify-content: space-between;
  313.   height: 80px;
  314.   padding: 10px;
  315.   top: 390px;
  316. }
  317.  
  318. @keyframes Bounce {
  319.   from {margin-top: 10px;}
  320.   to {margin-top: 20px;}
  321. }
  322.  
  323. #id_details p:first-of-type {
  324.   height: 330px;
  325.   text-align: left;
  326.   position: fixed;
  327.   top: 0;
  328.   left: 0;
  329. }
  330.  
  331. #id_details img {
  332.   image-rendering: pixelated;
  333.   margin: 10px 0 0 10px;
  334.   transform-origin: 0 0;
  335.   transform: scale(2);
  336.   animation: Bounce 2s ease-in-out infinite alternate;
  337. }
  338.  
  339. /* Items */
  340.  
  341. #id_equipment, #id_wishlist {
  342.   display: grid;
  343.   gap: 10px;
  344.   overflow: hidden auto;
  345.   scroll-snap-type: y mandatory;
  346. }
  347. #id_equipment .clear, #id_wishlist .clear {display: none;}
  348. .premium_sparkle {display: none;}
  349.  
  350. #id_equipment {
  351.   grid-template-columns: repeat(5, 40px);
  352.   grid-auto-rows: 40px;
  353.   width: 260px;
  354.   height: 40px;
  355.   top: 340px;
  356. }
  357.  
  358. #id_wishlist {
  359.   grid-template-columns: repeat(5, 46px);
  360.   grid-auto-rows: 46px;
  361.   border: 2px solid transparent;
  362.   border-width: 2px 0;
  363. }
  364.  
  365. #id_equipment .item, #id_wishlist .item {
  366.   position: relative;
  367.   scroll-snap-align: start;
  368. }
  369.  
  370. #id_wishlist .item {
  371.   outline: 1px dotted var(--pink1);
  372.   outline-offset: -6px;
  373. }
  374. #id_wishlist .item:hover {outline-color: var(--pink2);}
  375.  
  376. #id_equipment a, #id_wishlist a {
  377.   display: block;
  378.   width: 30px;
  379.   height: 30px;
  380.   transition: all .5s ease-in-out;
  381. }
  382.  
  383. #id_equipment a {
  384.   background: var(--pink1);
  385.   padding: 5px;
  386.   border-radius: 5px;
  387. }
  388. #id_equipment a:hover {background: var(--pink2);}
  389.  
  390. #id_wishlist a {
  391.   background: #FFFFFF;
  392.   padding: 6px;
  393.   border: 2px solid transparent;
  394.   border-radius: 50%;
  395.   box-shadow: 0 0 0 1px var(--pink1) inset;
  396. }
  397.  
  398. #id_wishlist .item:hover a {
  399.   background: var(--pink1);
  400.   box-shadow: 0 0 0 1px #FFFFFF inset;
  401. }
  402.  
  403. .owner_checkmark {
  404.   margin: 0;
  405.   bottom: 3px;
  406.   left: 2px;
  407. }
  408.  
  409. /* Comments */
  410.  
  411. #id_comments #alerts_banner, #id_comments .date a, #id_comments .deletecomment, #id_comments .clear {display: none;}
  412. #id_comments #alert_container {display: contents;}
  413.  
  414. #id_comments dl {
  415.   clear: both;
  416.   margin-top: 50px;
  417. }
  418.  
  419. #id_comments dt {
  420.   height: unset;
  421.   line-height: normal;
  422.   text-align: left;
  423.   padding: 0 0 4px 0;
  424.   margin: 0 0 3px 0;
  425.   border-bottom: 1px dotted var(--text1);
  426. }
  427. #id_comments .date {margin-left: .3em;}
  428.  
  429. #id_comments dd {
  430.   text-align: justify;
  431.   margin: 0 0 20px 0;
  432. }
  433. #id_comments dd:last-of-type {margin: 0;}
  434.  
  435. #id_comments .dropBox {
  436.   background: var(--pink1);
  437.   width: 48px;
  438.   height: 52px;
  439.   margin: 5px 8px 0 0;
  440.   border: 2px solid transparent;
  441.   border-radius: 5px;
  442.   overflow: hidden;
  443. }
  444.  
  445. #id_comments .dropBox img {
  446.   width: 120px;
  447.   height: 150px;
  448.   margin: -29px 0 0 -46px;
  449. }
  450.  
  451. /* Comments Buttons */
  452.  
  453. #id_comments h2 + div, #id_comments h2 ~ p {
  454.   background: var(--blue2);
  455.   width: calc(50% - 5px);
  456.   height: 30px;
  457.   border-radius: 5px;
  458.   overflow: hidden;
  459. }
  460. #id_comments h2 + div {float: left;}
  461. #id_comments h2 ~ p {float: right;}
  462.  
  463. #id_comments h2 + div a, #id_comments h2 ~ p a {
  464.   display: block;
  465.   color: #FFFFFF;
  466.   font-size: 0;
  467.   line-height: 30px;
  468. }
  469. #id_comments h2 + div a:hover, #id_comments h2 ~ p a:hover {background: var(--blue3);}
  470.  
  471. #id_comments h2 + div a::before, #id_comments h2 ~ p a::before {font-size: 10px;}
  472. #id_comments h2 + div a::before {content: 'Post Comment';}
  473. #id_comments h2 ~ p a::before {content: 'All Comments';}
  474.  
  475. /* Media */
  476.  
  477. .media_panel iframe {
  478.   width: 300px;
  479.   height: 200px;
  480.   position: absolute;
  481.   bottom: 0;
  482.   left: -12px;
  483.   transform-origin: bottom left;
  484.   transform: scaleY(1.1);
  485.   opacity: .001;
  486. }
  487.  
  488. /* Misc */
  489.  
  490. #pictures_container, #texts_container {
  491.   grid-row: 1;
  492.   width: 0;
  493.   height: 0;
  494.   background: red;
  495.   position: relative;
  496. }
  497.  
  498. #pictures_container {
  499.   grid-column: 1;
  500.   justify-self: right;
  501. }
  502.  
  503. #texts_container {
  504.   grid-column: 3;
  505.   justify-self: left;
  506. }
  507.  
  508. .spoiler-revealed {
  509.   padding: 5px;
  510.   border: 1px dotted var(--text1);
  511. }
  512.  
  513. /* Enter */
  514.  
  515. #texts_container .text_decoration:nth-of-type(1) {
  516.   width: 618px;
  517.   height: 40px;
  518.   color: var(--text1);
  519.   font: 20px/39px 'Noto Serif', cursive;
  520.   text-align: center;
  521.   text-shadow: 0 0 10px #D0A036;
  522.   text-transform: uppercase;
  523.   top: 12px !important;
  524.   left: -618px !important;
  525.   pointer-events: none;
  526.   transition: opacity .5s .5s ease-in-out;
  527. }
  528.  
  529. #columns:hover ~ #texts_container .text_decoration:nth-of-type(1) {
  530.   transition: opacity .5s ease-in-out;
  531.   opacity: 0;
  532. }
  533.  
  534. @keyframes FadeCover {
  535.   0% {opacity: 1; height: 100%;}
  536.   99.999% {opacity: 0; height: 100%;}
  537.   100% {opacity: 0; height: 0;}
  538. }
  539.  
  540. #texts_container .spoiler-wrapper, #texts_container .spoiler-control {
  541.   width: 100%;
  542.   height: 100%;
  543.   top: 0;
  544.   left: 0;
  545.   border: none;
  546. }
  547. #texts_container .spoiler-control-hide, #texts_container .spoiler-control span {display: none !important;}
  548.  
  549. #texts_container .spoiler-wrapper {
  550.   padding: 0;
  551.   position: fixed;
  552. }
  553. #texts_container .spoiler-revealed {animation: FadeCover 1s ease-in-out 1 both;}
  554.  
  555. #texts_container .spoiler-control-show {
  556.   display: block !important;
  557.   background: url('https://i.imgur.com/Esg05wK.png') center no-repeat, url('https://i.imgur.com/Ey2QrOT.jpg') fixed center / cover no-repeat thistle;
  558.   position: absolute;
  559.   outline: none;
  560. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement