Advertisement
althindor

Pro for Crimson Carmen

Jun 9th, 2022
1,399
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 15.14 KB | None | 0 0
  1. /* Design by Cassiel Socks, Code by AlthIndor */
  2.  
  3. :root {
  4.   --lite-color: #FFC8A8;
  5.   --medm-color: #FF4400;
  6.   --dark-color: #B00000;
  7.   --glow-color: #FF8800;
  8. }
  9.  
  10. ::selection {
  11.   background: var(--dark-color);
  12.   color: #FFFFFF;
  13. }
  14.  
  15. html, body {
  16.   background: linear-gradient(to right, transparent 100px, #000000C0 100px, #000000C0 180px, transparent 180px, transparent 300px, #000000C0 300px, #000000C0 400px, transparent 400px),
  17.     linear-gradient(to left, transparent 100px, #000000C0 100px, #000000C0 180px, transparent 180px, transparent 300px, #000000C0 300px, #000000C0 400px, transparent 400px),
  18.     url('https://i.ibb.co/L1mVqq1/wallpaper.png') top center;
  19.   min-height: 880px;
  20. }
  21. body {position: relative;}
  22.  
  23. body a {
  24.   text-decoration: none !important;
  25.   transition: background .5s ease-in-out, color .5s ease-in-out, filter .5s ease-in-out, opacity .5s ease-in-out;
  26. }
  27.  
  28. body::before {
  29.   content: '';
  30.   background: #0000004C;
  31.   width: 570px;
  32.   height: 100%;
  33.   position: absolute;
  34.   top: 0;
  35.   left: calc(50% - 285px);
  36.   box-shadow: 5px 0 5px #00000080 inset, -5px 0 5px inset #00000080;
  37. }
  38.  
  39. #columns, #id_friends h2 ~ p:first-of-type, #id_friends h2 ~ p a, #columns::after {background: url('https://i.ibb.co/Gn9YVSL/layout.png');}
  40. #id_friends h2 ~ p:first-of-type, #id_friends h2 ~ p a {background-position-y: -752px;}
  41. #id_friends h2 ~ p:first-of-type {background-position-x: -1118px;}
  42. #id_friends h2 ~ p a {background-position-x: -1170px;}
  43. #columns::after {background-position: -454px -650px;}
  44.  
  45. /* Fonts */
  46.  
  47. @font-face {
  48.   font-family: 'Alex Brush';
  49.   font-style: normal;
  50.   font-weight: 400;
  51.   src: local('Alex Brush Regular'), local('AlexBrush-Regular'), url('https://fonts.gstatic.com/s/alexbrush/v11/SZc83FzrJKuqFbwMKk6EhUXz7Q.woff2') format('woff2');
  52. }
  53.  
  54. @font-face {
  55.   font-family: 'Open Sans';
  56.   font-style: normal;
  57.   font-weight: 400;
  58.   src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
  59. }
  60.  
  61. @font-face {
  62.   font-family: 'Open Sans';
  63.   font-style: normal;
  64.   font-weight: 600;
  65.   src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UNirkOUuhp.woff2) format('woff2');
  66. }
  67.  
  68. /* Header */
  69.  
  70. #gaia_header, #header_left, #header_right {box-sizing: border-box;}
  71. #gaia_header li {margin: 0 5px;}
  72. #gaia_header li.spacer {display: none !important;}
  73.  
  74. #viewer #gaia_header {
  75.   background: none !important;
  76.   padding: 10px !important;
  77. }
  78.  
  79. #gaia_header #header_left, #gaia_header #header_right {
  80.   background: #FF000028;
  81.   width: unset !important;
  82.   min-width: 340px;
  83.   height: 30px !important;
  84.   font: 0/30px 'Open Sans', sans-serif !important;
  85.   padding: 0 10px !important;
  86.   border-radius: 10px;
  87. }
  88.  
  89. #gaia_header #header_right {
  90.   display: grid !important;
  91.   grid-auto-flow: column;
  92.   justify-content: right;
  93.   float: right;
  94. }
  95. #gaia_header #header_right li:last-of-type {grid-column: 2;}
  96.  
  97. #header_right a[href*='edit'], #header_right a[href*='report'] {font-size: 0 !important;}
  98. #header_right a[href*='edit']::before, #header_right a[href*='report']::before {font-size: 10px;}
  99. #header_right a[href*='edit']::before {content: 'Edit Mine';}
  100. #header_right a[href*='report']::before {content: 'Report Profile';}
  101.  
  102. #header_left img {
  103.  -webkit-mask: url('https://i.imgur.com/cGGVY2x.png') 0 4px no-repeat;
  104.   mask: url('https://i.imgur.com/cGGVY2x.png') 0 4px no-repeat;
  105.   background: var(--lite-color);
  106.   width: 0;
  107.   padding: 0 34px 0 0;
  108.   transition: background .5s ease-in-out;
  109. }
  110. #header_left li:nth-of-type(2) a:hover img {background: #FCE4CA;}
  111.  
  112. #gaia_header a {
  113.   color: var(--lite-color) !important;
  114.   font-size: 10px !important;
  115.   text-transform: uppercase;
  116.   filter: drop-shadow(0 0 5px var(--glow-color));
  117. }
  118.  
  119. #gaia_header a:hover {
  120.   color: #FCE4CA !important;
  121.   filter: drop-shadow(0 0 5px #FFFFFF);
  122. }
  123.  
  124. /* Columns */
  125.  
  126. #columns, #columns .column {
  127.   float: none;
  128.   font-size: 0;
  129.   margin: 0;
  130. }
  131. #column_2, #column_3 {display: contents;}
  132.  
  133. #columns {
  134.   width: 1220px;
  135.   height: 740px;
  136.   top: calc(50% - 370px);
  137.   left: calc(50% - 610px);
  138.   contain: layout;
  139. }
  140.  
  141. #column_1 {
  142.   display: grid;
  143.   grid-template-columns: 100%;
  144.   grid-auto-rows: max-content;
  145.   position: absolute;
  146. }
  147. #id_details {grid-row: 1;}
  148. #id_forum {grid-row: 2;}
  149. #id_guilds {grid-row: 3;}
  150.  
  151. #columns::after {
  152.   content: '';
  153.   width: 30px;
  154.   height: 90px;
  155.   position: absolute;
  156.   bottom: 0;
  157.   left: 454px;
  158.   pointer-events: none;
  159. }
  160.  
  161. /* Basic Layout */
  162.  
  163. #column_1, #column_2 .panel, #id_equipment, #id_wishlist {overflow: hidden scroll;}
  164.  
  165. #column_1, #id_journal, #id_interests, #id_footprints {width: 325px;}
  166. #id_about, #id_signature, #id_comments, .custom_panel {width: 230px;}
  167. #column_1, #id_journal, #id_footprints, #id_interests {height: 50px;}
  168. #id_about, .custom_panel, #id_signature, #id_comments {height: 190px !important;}
  169.  
  170. #column_1, #id_about, .custom_panel, #id_journal, #id_wishlist {direction: rtl;}
  171. #column_1 .panel, #id_about h2 ~ *, .custom_panel div, #id_journal *, #id_wishlist .item {direction: ltr;}
  172.  
  173. #column_1, #id_about, .custom_panel, #id_journal {
  174.   text-align: left;
  175.   padding-left: 10px !important;
  176.   left: 20px;
  177. }
  178.  
  179. #id_interests, #id_comments, #id_signature, #id_footprints {
  180.   text-align: right;
  181.   padding-right: 10px;
  182.   right: 20px;
  183. }
  184.  
  185. #column_1, #id_interests {top: 75px;}
  186. #id_about, #id_comments {top: 155px;}
  187. #id_signature, .custom_panel {top: 375px;}
  188. #id_footprints, #id_journal {top: 595px;}
  189.  
  190. #id_equipment, #id_wishlist {
  191.   width: 460px;
  192.   height: 40px;
  193.   top: 665px;
  194. }
  195. #id_equipment {left: 10px;}
  196. #id_wishlist {right: 10px;}
  197.  
  198. /* Scrollbars */
  199.  
  200. #columns ::-webkit-scrollbar, #columns ::-webkit-scrollbar-thumb {
  201.   width: 8px;
  202.   border-radius: 5px;
  203. }
  204. #columns ::-webkit-scrollbar {background: #000;}
  205. #columns ::-webkit-scrollbar-thumb {background: var(--dark-color);}
  206.  
  207. #column_1, .panel {
  208.   scrollbar-color: var(--dark-color) #000;
  209.   scrollbar-width: thin;
  210. }
  211.  
  212. /* Panels */
  213.  
  214. .panel, .panel h2 {
  215.   background: none;
  216.   padding: 0;
  217.   margin: 0;
  218. }
  219.  
  220. .panel {
  221.   color: #FFFFFF;
  222.   font: 10px/1.7 'Open Sans', sans-serif;
  223.   text-align: left;
  224. }
  225. .column:not(#column_1) .panel {position: absolute;}
  226. .panel img {max-width: 100% !important;}
  227.  
  228. .panel a {color: var(--lite-color);}
  229. .panel a:hover {color: var(--medm-color);}
  230.  
  231. /* Headers */
  232.  
  233. .panel h2, #column_1::before {
  234.   color: var(--lite-color);
  235.   font: 20px/1 'Alex Brush', cursive;
  236.   text-shadow: 0 0 5px var(--glow-color), 0 0 10px var(--glow-color);
  237.   text-transform: capitalize;
  238.   margin-top: -22px;
  239.   position: fixed;
  240. }
  241. #id_equipment h2, #id_wishlist h2 {margin-top: -12px;}
  242. #id_equipment h2 {left: 20px;}
  243. #id_wishlist h2 {right: 20px;}
  244.  
  245. :where(#column_1, #id_contact, #id_store, #id_friends) h2 {display: none;}
  246. #column_1::before {content: 'Details';}
  247.  
  248. #column_1::before, :where(#id_about, .custom_panel, #id_journal, #id_equipment) h2 {left: 20px;}
  249. :where(#id_interests, #id_comments, #id_signature, #id_footprints, #id_wishlist) h2 {right: 20px;}
  250.  
  251. /* Comments */
  252.  
  253. #id_comments #alerts_banner, #id_comments .dropBox {display: none;}
  254. #id_comments #alert_container {display: contents;}
  255.  
  256. #id_comments dl {
  257.   clear: both;
  258.   margin-top: 42px;
  259. }
  260.  
  261. #id_comments dt {
  262.   height: unset;
  263.   line-height: unset;
  264.   padding: 0 0 5px 0;
  265.   margin-bottom: 5px;
  266.   border-bottom: 1px dashed var(--medm-color);
  267. }
  268. #id_comments .username {float: none;}
  269.  
  270. #id_comments dd {
  271.   display: flex;
  272.   flex-flow: wrap column-reverse;
  273.   margin: 0 0 17px 0;
  274. }
  275. #id_comments dd:last-of-type {margin: 0;}
  276.  
  277. #id_comments .deletecomment {
  278.   display: grid;
  279.   grid-auto-flow: column dense;
  280.   justify-content: right;
  281.   float: none;
  282.   margin: 0;
  283. }
  284. #id_comments .deletecomment br {display: none;}
  285.  
  286. #id_comments .deletecomment::after {
  287.   content: ' or ';
  288.   grid-column: 2;
  289.   white-space: pre;
  290. }
  291.  
  292. /* Comments Buttons */
  293.  
  294. #id_comments h2 + div, #id_comments h2 ~ p {
  295.   width: calc(50% - 5px);
  296.   text-align: center;
  297.   margin: 0;
  298. }
  299. #id_comments h2 + div {float: left;}
  300. #id_comments h2 ~ p {float: right;}
  301.  
  302. #id_comments h2 + div a, #id_comments h2 ~ p a {
  303.   display: block;
  304.   background: var(--dark-color);
  305.   width: 100%;
  306.   height: 25px;
  307.   font-size: 0;
  308.   border-radius: 5px;
  309. }
  310.  
  311. #id_comments h2 + div a:hover, #id_comments h2 ~ p a:hover {
  312.   background: var(--medm-color);
  313.   color: #FFFFFF;
  314. }
  315.  
  316. #id_comments h2 + div a::before, #id_comments h2 ~ p a::before {font: bold 10px/25px 'Open Sans', sans-serif;}
  317. #id_comments h2 + div a::before {content: 'POST COMMENT';}
  318. #id_comments h2 ~ p a::before {content: 'ALL COMMENTS';}
  319.  
  320. /* Contact and Store */
  321.  
  322. #id_contact, #id_store {
  323.   width: auto;
  324.   height: 52px;
  325.   text-align: center;
  326.   color: var(--lite-color);
  327.   top: 13px;
  328.   overflow: hidden;
  329. }
  330. #id_contact {left: 194px;}
  331. #id_store {left: 915px;}
  332.  
  333. #id_store :where(h3, div, p) {display: none;}
  334. #id_store p:last-of-type {display: contents;}
  335.  
  336. #id_contact li, #id_store {width: 109px;}
  337. #id_contact li {float: left;}
  338. #id_contact li:nth-of-type(2) {margin-left: 29px;}
  339. #id_contact li:nth-of-type(3) {margin-left: 335px;}
  340.  
  341. #id_contact li *, #id_store a {
  342.   font: 0/70px 'Alex Brush', cursive;
  343.   filter: drop-shadow(0 0 5px var(--glow-color)) drop-shadow(0 0 5px var(--glow-color));
  344. }
  345. #id_contact li *::before, #id_store a::before {font-size: 24px;}
  346. #id_contact li:nth-of-type(1) *::before {content: 'Friend';}
  347. #id_contact li:nth-of-type(2) *::before {content: 'Mail';}
  348. #id_contact li:nth-of-type(3) *::before {content: 'Trade';}
  349. #id_store a::before {content: 'Store';}
  350.  
  351. #id_contact li a:hover, #id_store a:hover {
  352.   color: #FCE4CA;
  353.   filter: drop-shadow(0 0 5px #FFFFFF) drop-shadow(0 0 5px #FFFFFF);
  354. }
  355.  
  356. /* Details */
  357.  
  358. #id_details, #id_forum {
  359.   padding-bottom: 5px;
  360.   margin-bottom: 5px;
  361.   border-bottom: 1px dashed var(--medm-color);
  362. }
  363.  
  364. #id_details p, #id_forum p {margin: 0;}
  365. #id_details .forum_userstatus {display: none;}
  366.  
  367. #id_details p:first-of-type {
  368.   position: fixed;
  369.   top: 560px;
  370.   left: 530px;
  371.   filter: drop-shadow(0 0 10px #FF880080);
  372. }
  373.  
  374. #id_guilds::before {
  375.   content: 'Member of:';
  376.   font-weight: bold;
  377. }
  378.  
  379. #id_guilds ul {margin-left: 10px;}
  380. #id_guilds li {list-style-type: disc;}
  381.  
  382. /* Friends */
  383.  
  384. #id_friends {
  385.   top: 84px;
  386.   left: 623px;
  387.   overflow: visible;
  388. }
  389.  
  390. #id_friends h2 ~ div, #id_friends p ~ p, #id_friends .style2 {display: none;}
  391. #id_friends .style1 :where(p, span, div) {display: contents;}
  392.  
  393. #id_friends :where(li, a, h2 ~ p:first-of-type) {
  394.   width: 48px;
  395.   height: 48px;
  396. }
  397. #id_friends li:nth-of-type(n+9) {display: none;}
  398.  
  399. #id_friends li, #id_friends h2 ~ p:first-of-type {
  400.   margin: -2px 0 0 -2px;
  401.   position: absolute;
  402.   border: 2px solid #000;
  403.   border-radius: 50%;
  404.   overflow: hidden;
  405.   transition: all .5s ease-in-out;
  406. }
  407. #id_friends li:hover {filter: brightness(110%) drop-shadow(0 0 10px var(--glow-color));}
  408.  
  409. #id_friends a {
  410.   font-size: 0;
  411.   position: absolute;
  412.   top: 0;
  413.   left: 0;
  414. }
  415.  
  416. #id_friends h2 ~ p:first-of-type {
  417.   background-color: #282020;
  418.   text-align: center;
  419.   top: 412px;
  420.   left: 163px;
  421. }
  422.  
  423. #id_friends h2 ~ p:first-of-type:hover {
  424.   background-color: var(--medm-color);
  425.   filter: drop-shadow(0 0 10px var(--glow-color));
  426. }
  427.  
  428. #id_friends h2 ~ p:first-of-type a {opacity: 0;}
  429. #id_friends h2 ~ p:first-of-type:hover a {opacity: 1;}
  430.  
  431. /* Friends Tiles Position */
  432.  
  433. #id_friends li:nth-of-type(1) {top: 000px; left: 000px;}
  434. #id_friends li:nth-of-type(2) {top: 020px; left: 064px;}
  435. #id_friends li:nth-of-type(3) {top: 053px; left: 121px;}
  436. #id_friends li:nth-of-type(4) {top: 102px; left: 168px;}
  437. #id_friends li:nth-of-type(5) {top: 159px; left: 200px;}
  438. #id_friends li:nth-of-type(6) {top: 224px; left: 216px;}
  439. #id_friends li:nth-of-type(7) {top: 290px; left: 214px;}
  440. #id_friends li:nth-of-type(8) {top: 355px; left: 196px;}
  441.  
  442. /* Friends Page */
  443.  
  444. #friendGroup, #friendGroup ul {
  445.   display: grid;
  446.   grid-auto-rows: max-content;
  447.   gap: 10px;
  448. }
  449.  
  450. #friendGroup, #friendGroup p, #friendGroup ul {margin: 0;}
  451. #friendGroup h2 ~ a, #friendGroup h2 ~ .clear {display: none;}
  452.  
  453. #friendGroup {
  454.   grid-template-columns: 1fr 1fr;
  455.   background: #FF000028;
  456.   width: 732px;
  457.   padding: 20px;
  458.   position: absolute;
  459.   left: calc(50% - 366px);
  460.   top: 50%;
  461.   transform: translateY(-50%);
  462.   border-radius: 10px;
  463.   box-sizing: border-box;
  464. }
  465.  
  466. #friendGroup h2 {
  467.   margin: 0;
  468.   top: -12px;
  469.   left: 20px;
  470. }
  471.  
  472. #friendGroup ul {
  473.   grid-column: 1 / span 2;
  474.   grid-template-columns: repeat(9, 68px);
  475.   grid-auto-rows: max-content;
  476.   padding-top: 15px;
  477.   border-top: 1px dashed var(--medm-color);
  478. }
  479.  
  480. #friendGroup li {
  481.   float: none;
  482.   background: #282020;
  483.   width: 48px;
  484.   border-radius: 5px;
  485.   transition: all .5s ease-in-out;
  486. }
  487. #friendGroup li:hover {background: var(--medm-color);}
  488.  
  489. #friendGroup li span {display: contents;}
  490. #friendGroup li .user_info {display: none;}
  491.  
  492. #friendGroup li a {
  493.   display: inline-block;
  494.   width: 48px;
  495.   line-height: 1;
  496.   text-overflow: ellipsis;
  497.   margin-bottom: 5px;
  498.   overflow: hidden;
  499. }
  500. #friendGroup li:hover a {color: #FFFFFF;}
  501.  
  502. #friendGroup h2 ~ div {
  503.   grid-area: 1/2/2/3;
  504.   justify-self: right;
  505. }
  506.  
  507. /* Interests */
  508.  
  509. #id_interests h3 {font-size: inherit;}
  510. #id_interests h3::after {content: ':';}
  511. #id_interests a {text-transform: capitalize;}
  512.  
  513. #id_interests ul:nth-last-of-type(n+2) {
  514.   border-bottom: 1px dashed orangered;
  515.   padding-bottom: 5px;
  516.   margin-bottom: 5px;
  517. }
  518. #id_interests li:nth-last-of-type(n+2)::after {content: ',';}
  519. #id_interests li:last-of-type::before {content: ' and ';}
  520. #id_interests li:last-of-type::after {content: '.';}
  521.  
  522. /* Items */
  523.  
  524. #id_equipment, #id_wishlist {
  525.   display: grid;
  526.   grid-template-columns: repeat(9, 40px);
  527.   grid-auto-rows: 40px;
  528.   gap: 10px;
  529.   text-align: center;
  530.   scroll-snap-type: y mandatory;
  531. }
  532. #id_equipment .clear, #id_wishlist .clear {display: none;}
  533. .premium_sparkle {display: none;}
  534.  
  535. #id_equipment .item, #id_wishlist .item {
  536.   background: #FF000028;
  537.   min-width: 40px;
  538.   height: 30px;
  539.   padding: 5px 0;
  540.   position: relative;
  541.   border-radius: 10px;
  542.   scroll-snap-align: start;
  543.   transition: all .5s ease-in-out;
  544. }
  545. #id_equipment .item:hover, #id_wishlist .item:hover {background: var(--medm-color);}
  546.  
  547. .owner_checkmark {
  548.   margin: 0;
  549.   bottom: 5px;
  550.   left: 5px;
  551.   filter: hue-rotate(40deg);
  552. }
  553.  
  554. /* Journal */
  555.  
  556. #id_journal h2 ~ p {margin-bottom: 0;}
  557. #id_journal h3 {font-size: inherit;}
  558. #id_journal h3::after {content: ':';}
  559. #id_journal ul {margin-left: 10px;}
  560. #id_journal li {list-style-type: disc;}
  561.  
  562. #id_journal h2 ~ p::after {
  563.   content: ' ';
  564.   display: block;
  565.   white-space: pre;
  566. }
  567.  
  568. #id_journal ul::before {
  569.   content: 'Entries:';
  570.   font-weight: bold;
  571.   margin-left: -10px;
  572. }
  573.  
  574. /* Visitors */
  575.  
  576. #id_footprints .item {
  577.   display: grid;
  578.   grid-auto-flow: column;
  579.   justify-content: end;
  580. }
  581.  
  582. #id_footprints .item::before {
  583.   content: ' visited ';
  584.   grid-column: 2;
  585.   white-space: pre;
  586. }
  587. #id_footprints .item::after {content: '.';}
  588.  
  589. /* Misc */
  590.  
  591. #pictures_container, #texts_container {
  592.   width: 0;
  593.   height: 0;
  594.   position: absolute;
  595.   top: calc(50% - 370px);
  596.   left: 50%;
  597. }
  598. #equipped-item-details_mask ~ #equipped-item-details_mask, #avatar_menu + div + div {display: none !important;}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement