althindor

Pro for Emet

May 12th, 2026 (edited)
53
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 15.57 KB | None | 0 0
  1. /* Profile Theme by AlthIndor */
  2. /* Designed by Moonchu + Alth */
  3.  
  4. :root {
  5.     --border: #FFC000;
  6.     --highlight: #FFE000;
  7.     --links: #B380FF;
  8.     --spritesheet: url('https://i.imgur.com/z1Luve9.png');
  9.  
  10.     --title1: 'Panel 1 Heading';
  11.     --title2: 'Panel 2 Heading';
  12.     --title3: 'Panel 3 Heading';
  13.     --title4: 'Panel 4 Heading';
  14.     --title5: 'Panel 5 Heading';
  15.     --title6: 'Panel 6 Heading';
  16. }
  17.  
  18. html, body {
  19.     background: #101010;
  20.     min-height: 860px;
  21. }
  22. body {position: relative;}
  23.  
  24. body a, .panel h2, .media_panel {transition: all .5s ease-in-out;}
  25. body a {text-decoration: none !important;}
  26.  
  27. ::selection {
  28.     background: royalblue;
  29.     color: #FFFFFF;
  30. }
  31.  
  32. /* Sprite Sheet */
  33.  
  34. #columns, #column_1 :is(.spoiler-title, .spoiler-control, .spoiler), #column_1 .spoiler-title::after, #column_2, #column_3::before {background: var(--spritesheet);}
  35. #column_1 :is(.spoiler-title, .spoiler-control), #column_1 .spoiler-title::after {background-position: 0 -1478px;}
  36. #column_1 .spoiler-control {background-position-x: -260px;}
  37. #column_1 .spoiler-title::after {background-position-x: right;}
  38. #column_1 .spoiler {background-position: 0 -1330px;}
  39. #column_2 {background-position: -355px -135px;}
  40. #column_3::before {background-position: -151px -990px;}
  41.  
  42. #column_1 .spoiler-wrapper:nth-of-type(1) .spoiler {background-position-x: -394px;}
  43. #column_1 .spoiler-wrapper:nth-of-type(2) .spoiler {background-position-x: -522px;}
  44. #column_1 .spoiler-wrapper:nth-of-type(3) .spoiler {background-position-x: -637px;}
  45. #column_1 .spoiler-wrapper:nth-of-type(4) .spoiler {background-position-x: -753px;}
  46. #column_1 .spoiler-wrapper:nth-of-type(5) .spoiler {background-position-x: -880px;}
  47. #column_1 .spoiler-wrapper:nth-of-type(6) .spoiler {background-position-x: -995px;}
  48.  
  49. #id_contact li *, #id_comments a, .media_panel h2 {mask: var(--spritesheet);}
  50. #id_contact li:nth-of-type(1) * {mask-position: 0 -1330px;}
  51. #id_contact li:nth-of-type(2) * {mask-position: -48px -1330px;}
  52. #id_contact li:nth-of-type(3) * {mask-position: -96px -1330px;}
  53. #id_comments a {mask-position: -142px -1330px;}
  54. .media_panel h2 {mask-position: -196px -1341px;}
  55.  
  56. /* Fonts */
  57.  
  58. @font-face {
  59.     font-family: 'Open Sans';
  60.     font-style: normal;
  61.     font-weight: 300 800;
  62.     src: url('https://fonts.gstatic.com/s/opensans/v44/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2') format('woff2');
  63. }
  64.  
  65. @font-face {
  66.     font-family: 'Big Shoulders';
  67.     font-style: normal;
  68.     font-weight: 800;
  69.     src: url('https://fonts.gstatic.com/s/bigshoulders/v4/qFdR35CPh40oITJ69S3GFqy5-BQAf4qnj7feObrH-dahg9U.woff2') format('woff2');
  70. }
  71.  
  72. /* Wallpaper Animation */
  73.  
  74. #panel-details, #panel-details div {
  75.     width: 100%;
  76.     height: 100%;
  77.     top: 0;
  78.     left: 0;
  79. }
  80. #panel-details div {position: absolute;}
  81.  
  82. #panel-details {
  83.     background: url('https://i.imgur.com/Dak1jCa.jpeg') bottom right / cover;
  84.     position: fixed;
  85.     overflow: hidden;
  86. }
  87.  
  88. @keyframes Twinkle {
  89.     from {background-position-x: 0, right;}
  90.     to {background-position-x: 440px, right;}
  91. }
  92.  
  93. @keyframes Drift {
  94.     from {background-position-x: 0;}
  95.     to {background-position-x: -1000px;}
  96. }
  97.  
  98. #panel-details .hd {
  99.     background:
  100.         url('https://i.imgur.com/XrF1bNC.png'),
  101.         url('https://i.imgur.com/SSoMmQU.jpg') bottom right / cover;
  102.     animation: Twinkle 10s linear infinite;
  103.     mix-blend-mode: color-dodge;
  104. }
  105.  
  106. #panel-details :is(.bd, .ft) {
  107.     animation: Drift 60s linear infinite;
  108.     mix-blend-mode: soft-light;
  109.     opacity: .5;
  110. }
  111. #panel-details .bd {background: url('https://i.imgur.com/cUiXptz.jpeg');}
  112.  
  113. #panel-details .ft {
  114.     background: url('https://i.imgur.com/zvQXH7U.jpeg');
  115.     animation-direction: reverse;
  116. }
  117.  
  118. /* Unsupported Warning */
  119.  
  120. #columns {display: none;}
  121.  
  122. #footer {
  123.     content: url('https://i.imgur.com/ieDBu4C.png');
  124.     background: #FFFFFF40;
  125.     box-shadow: 0 1px 3px #00000040;
  126.     border-radius: 10px;
  127.     padding: 20px;
  128.     position: absolute;
  129.     top: calc(50% - 200px);
  130.     left: calc(50% - 200px);
  131.     z-index: 1;
  132. }
  133.  
  134. body {
  135.     #columns {display: block;}
  136.     #footer {display: none;}
  137. }
  138.  
  139. /* Header */
  140.  
  141. #viewer #gaia_header, #viewer #gaia_header :is(ul, li, a) {
  142.     height: 30px !important;
  143.     box-sizing: border-box;
  144. }
  145.  
  146. #viewer #gaia_header {
  147.     background: #FFFFFF40 !important;
  148.     box-shadow: 0 1px 3px #00000040;
  149. }
  150.  
  151. #gaia_header ul {
  152.     display: flex !important;
  153.     width: auto !important;
  154.     min-width: 340px;
  155.     font: 700 0/23px 'Open Sans', sans-serif !important;
  156. }
  157.  
  158. #gaia_header #header_left {
  159.     background: linear-gradient(-45deg, transparent 21px, rgb(16,16,16,.85) 21px) !important;
  160.     padding: 0 29px 0 5px !important;
  161. }
  162. #header_left li.spacer {display: none !important;}
  163.  
  164. #gaia_header #header_right {
  165.     background: linear-gradient(45deg, transparent 21px, rgb(16,16,16,.85) 21px) !important;
  166.     float: right;
  167.     justify-content: right;
  168.     padding: 0 5px 0 29px !important;
  169. }
  170.  
  171. #gaia_header a, #gaia_header a::before {font-size: 11px !important;}
  172. #header_right a[href*='?mode=edit'], #header_right a[href*='report.php'] {font-size: 0 !important;}
  173. #header_right a[href*='?mode=edit']::before {content: 'edit my profile';}
  174. #header_right a[href*='report.php']::before {content: 'report profile';}
  175.  
  176. #viewer #gaia_header a {
  177.     display: inline-block !important;
  178.     color: #FFFFFF !important;
  179.     text-transform: uppercase;
  180.     padding: 0 5px;
  181.     border-top: 3px solid #FFFFFF00;
  182. }
  183.  
  184. #viewer #gaia_header a:hover {
  185.     color: var(--highlight) !important;
  186.     border-color: var(--highlight);
  187. }
  188.  
  189. #gaia_header img {
  190.     mask: url('https://i.imgur.com/cGGVY2x.png');
  191.     background: currentColor;
  192.     width: 0;
  193.     height: 15px;
  194.     padding: 0 34px 0 0;
  195.     margin-top: -1px;
  196. }
  197.  
  198. /* Columns */
  199.  
  200. #columns, #pictures_container, #texts_container {
  201.     top: calc(50% - 330px);
  202.     left: calc(50% - 550px);
  203. }
  204.  
  205. #columns, #column_1 {
  206.     width: 1100px;
  207.     height: 660px;
  208. }
  209.  
  210. #columns .column {
  211.     font-size: 0;
  212.     margin: 0;
  213. }
  214. #columns .column, #column_3::before {position: absolute;}
  215. #column_3 {display: contents;}
  216.  
  217. #column_1 {
  218.     contain: layout;
  219.     top: 0;
  220.     left: 0;
  221. }
  222.  
  223. #column_2 {
  224.     width: 390px;
  225.     height: 390px;
  226.     top: 135px;
  227.     left: 355px;
  228.     border-radius: 50%;
  229.     clip-path: inset(0 49px 37px 49px);
  230. }
  231.  
  232. #column_3::before {
  233.     content: '';
  234.     pointer-events: none;
  235.     width: 798px;
  236.     height: 208px;
  237.     top: 330px;
  238.     left: 151px;
  239. }
  240.  
  241. /* Panels */
  242.  
  243. .panel, .panel h2 {
  244.     background: none;
  245.     box-sizing: border-box;
  246.     color: #FFFFFF;
  247.     margin: 0;
  248.     padding: 0;
  249. }
  250.  
  251. .panel {
  252.     font: 10px/1.6 'Open Sans', sans-serif;
  253.     position: absolute;
  254.     overflow: hidden;
  255. }
  256. .panel a {color: var(--links);}
  257. .panel a:hover {color: var(--highlight);}
  258. .panel img {max-width: unset !important;}
  259.  
  260. #column_2 .panel {
  261.     width: 100%;
  262.     height: 100%;
  263.     text-align: center;
  264.     padding: 62px 74px;
  265.     top: -500px;
  266.     left: 0;
  267.     overflow-y: scroll;
  268.     scrollbar-width: none;
  269.  
  270.     .buttons {
  271.         top: 45px;
  272.         right: 75px;
  273.     }
  274.  
  275.     transition: top 0s 86400s linear;
  276. }
  277.  
  278. #column_1 h2, #column_2 h2 {display: none;}
  279. #column_2 img {max-width: 100% !important;}
  280.  
  281. .bbcode-swapping-image {
  282.     filter: invert(1);
  283.     mix-blend-mode: screen;
  284. }
  285.  
  286. /* Tab Buttons */
  287.  
  288. #column_1 .custom_panel {display: contents;}
  289. #column_1 :is(div[id*='content'], .spoiler), #column_1 .spoiler-title::after {position: absolute;}
  290.  
  291. #column_1 div[id*='content'] {
  292.     display: grid;
  293.     gap: 10px 0;
  294.     grid-auto-flow: column;
  295.     grid-template: repeat(3, 60px) / 250px 584px 250px;
  296.  
  297.     .spoiler-wrapper, .spoiler-control {
  298.         border: none;
  299.         padding: 0;
  300.     }
  301.     .spoiler-wrapper, .spoiler-title {position: relative;}
  302.     .spoiler-control-show, .spoiler {display: block;}
  303.     .spoiler-control-hide, span {display: none;}
  304.  
  305.     top: 195px;
  306.     left: 8px;
  307.  
  308.     .spoiler-wrapper:nth-of-type(n+4) {
  309.         grid-column: 3;
  310.         text-align: right;
  311.     }
  312.  
  313.     .spoiler-title, .spoiler-control, .spoiler-title::after {
  314.         width: 100%;
  315.         height: 100%;
  316.     }
  317.     .spoiler-title, .spoiler-title::after, .spoiler {transition: all 0s 86400s linear;}
  318.  
  319.     .spoiler-title {
  320.         color: #202020;
  321.         font: 800 20px/60px 'Big Shoulders', sans-serif;
  322.         text-shadow: -1px 0 #D0D0D0, 0 -1px #D0D0D0, 1px 0 #D0D0D0, 0 1px #D0D0D0, -1px -1px #D0D0D0, 1px -1px #D0D0D0, 1px 1px #D0D0D0, -1px 1px #D0D0D0;
  323.         text-transform: uppercase;
  324.         border-radius: 10px;
  325.         overflow: hidden;
  326.     }
  327.  
  328.     .spoiler-control-show {
  329.         opacity: 0;
  330.         transition: opacity .5s ease-in-out, cursor 0s 86400s linear allow-discrete;
  331.     }
  332.     .spoiler-control-show:hover {opacity: 1;}
  333.  
  334.     .spoiler-title::after {
  335.         padding: 0 20px;
  336.         top: 0;
  337.         left: 0;
  338.         box-sizing: border-box;
  339.         pointer-events: none;
  340.     }
  341.     .spoiler-wrapper:nth-of-type(1) .spoiler-title::after {content: var(--title1);}
  342.     .spoiler-wrapper:nth-of-type(2) .spoiler-title::after {content: var(--title2);}
  343.     .spoiler-wrapper:nth-of-type(3) .spoiler-title::after {content: var(--title3);}
  344.     .spoiler-wrapper:nth-of-type(4) .spoiler-title::after {content: var(--title4);}
  345.     .spoiler-wrapper:nth-of-type(5) .spoiler-title::after {content: var(--title5);}
  346.     .spoiler-wrapper:nth-of-type(6) .spoiler-title::after {content: var(--title6);}
  347.  
  348.     .spoiler {
  349.         width: 105px;
  350.         height: 40px;
  351.     }
  352.     .spoiler-wrapper:nth-of-type(-n+3) .spoiler {left: 250px;}
  353.     .spoiler-wrapper:nth-of-type(+n+4) .spoiler {right: 250px;}
  354.  
  355.     .spoiler-wrapper:nth-of-type(3n+1) .spoiler {
  356.         width: 118px;
  357.         height: 64px;
  358.         top: 24px;
  359.     }
  360.     .spoiler-wrapper:nth-of-type(3n+2) .spoiler {top: 22px;}
  361.     .spoiler-wrapper:nth-of-type(3n+3) .spoiler {top: -2px;}
  362. }
  363.  
  364. /* Tab Functionality */
  365.  
  366. #columns:has(#column_1 .spoiler-wrapper:focus-within) #column_2 .panel,
  367. #column_1:focus-within :is(.spoiler-title, .spoiler),
  368. #column_1:focus-within .spoiler-title::after {
  369.     transition: none !important;
  370. }
  371. #column_1:focus-within .spoiler-control {transition: opacity .5s ease-in-out !important;}
  372.  
  373. #columns:has(#column_1 .spoiler-wrapper:nth-of-type(1):focus-within) #column_2 .panel:nth-child(1),
  374. #columns:has(#column_1 .spoiler-wrapper:nth-of-type(2):focus-within) #column_2 .panel:nth-child(2),
  375. #columns:has(#column_1 .spoiler-wrapper:nth-of-type(3):focus-within) #column_2 .panel:nth-child(3),
  376. #columns:has(#column_1 .spoiler-wrapper:nth-of-type(4):focus-within) #column_2 .panel:nth-child(4),
  377. #columns:has(#column_1 .spoiler-wrapper:nth-of-type(5):focus-within) #column_2 .panel:nth-child(5),
  378. #columns:has(#column_1 .spoiler-wrapper:nth-of-type(6):focus-within) #column_2 .panel:nth-child(6) {
  379.     transition: none;
  380.     top: 0;
  381. }
  382.  
  383. #column_1 .spoiler-wrapper:focus-within {
  384.     .spoiler-title, .spoiler-title::after, .spoiler {transition: none;}
  385.     .spoiler-title::after {background-position-x: -520px;}
  386.     .spoiler {background-position-y: -1404px;}
  387.  
  388.     .spoiler-control {
  389.         cursor: default;
  390.         transition: opacity .5s ease-in-out;
  391.     }
  392.  
  393.     .spoiler-title {
  394.         color: #FFFFFF;
  395.         text-shadow: -1px 0 #B380FF, 0 -1px #B380FF, 1px 0 #B380FF, 0 1px #B380FF, -1px -1px #B380FF, 1px -1px #B380FF, 1px 1px #B380FF, -1px 1px #B380FF;
  396.     }
  397. }
  398.  
  399. /* Avatar Panels */
  400.  
  401. #id_details, #column_3 .custom_panel {
  402.     display: grid;
  403.     width: 256px;
  404.     height: 122px;
  405.     line-height: 1.3;
  406.     padding: 13px;
  407.     top: 416px;
  408.     border-radius: 13px;
  409.  
  410.     h2 {
  411.         font-size: 12px;
  412.         line-height: 10px;
  413.         padding-bottom: 4px;
  414.         border-bottom: 2px solid #B380FF;
  415.     }
  416.  
  417.     p:nth-of-type(1), a {
  418.         width: 96px;
  419.         height: 96px;
  420.         border-radius: 3px;
  421.         overflow: hidden;
  422.     }
  423.  
  424.     p:nth-of-type(n+2), div[id*='content'] {
  425.         align-self: end;
  426.         margin-bottom: -3px;
  427.     }
  428. }
  429.  
  430. #id_details {
  431.     grid-template: max-content 1fr repeat(2, max-content) / 106px 1fr;
  432.     text-align: left;
  433.     left: 148px;
  434.  
  435.     p:nth-of-type(1) {
  436.         grid-area: 1/1/-1/2;
  437.         margin: 0;
  438.     }
  439.     img {margin: -15px 0 0 -5px;}
  440.  
  441.     .forum_userstatus {display: none;}
  442.     strong {display: block;}
  443.     p:nth-of-type(n+2) {margin-top: 3px;}
  444.     p:nth-of-type(n+5) {display: none;}
  445. }
  446.  
  447. #column_3 .custom_panel {
  448.     grid-template: max-content 1fr / 1fr 106px;
  449.     right: 148px;
  450.  
  451.     div {
  452.         grid-column: 1;
  453.         margin-left: 10px;
  454.     }
  455.     .buttons {z-index: 1;}
  456.     .clear {display: none;}
  457.  
  458.     a {
  459.         background: url('https://a1cdn.gaiaonline.com/gaia/members/ava/29/1e/370232441fa1e29.png') -20px -15px;
  460.         font-size: 0;
  461.         position: absolute;
  462.         top: 13px;
  463.         right: 13px;
  464.     }
  465. }
  466. #column_3 :is(.custom_panel, .custom_panel h2) {text-align: right;}
  467.  
  468. /* Contact Buttons */
  469.  
  470. #id_contact h2, #id_comments :is(h2, p, dl, #alerts_banner) {display: none;}
  471. #id_comments :is(#alert_container, div) {display: contents;}
  472.  
  473. #id_contact {
  474.     width: 91px;
  475.     height: 77px;
  476.     top: 59px;
  477.     left: 336px;
  478. }
  479. #id_contact li {position: absolute;}
  480.  
  481. #id_contact li *, #id_comments a {
  482.     display: block;
  483.     background: currentColor;
  484.     color: #FFFFFF;
  485.     font-size: 0;
  486. }
  487. #id_contact a:hover, #id_comments a:hover {color: var(--highlight);}
  488.  
  489. #id_contact li:nth-of-type(1) {
  490.     clip-path: polygon(20px 0, 38px 20px, 18px 38px, 0px 18px);
  491.     bottom: 0;
  492.     left: 0;
  493.  
  494.     * {
  495.         width: 38px;
  496.         height: 38px;
  497.     }
  498. }
  499.  
  500. #id_contact li:nth-of-type(2) {
  501.     clip-path: polygon(22px 0, 38px 21px, 16px 37px, 0 16px);
  502.     top: 18px;
  503.     left: 26px;
  504.  
  505.     * {
  506.         width: 38px;
  507.         height: 37px;
  508.     }
  509. }
  510.  
  511. #id_contact li:nth-of-type(3) {
  512.     clip-path: polygon(24px 0, 37px 23px, 13px 38px, 0 14px);
  513.     top: 0;
  514.     right: 0;
  515.  
  516.     * {
  517.         width: 36px;
  518.         height: 37px;
  519.     }
  520. }
  521.  
  522. #id_comments {
  523.     clip-path: polygon(25px 0, 35px 25px, 10px 35px, 0 11px);
  524.     top: 45px;
  525.     left: 422px;
  526.  
  527.     a {
  528.         width: 35px;
  529.         height: 35px;
  530.     }
  531. }
  532.  
  533. /* Media */
  534.  
  535. .media_panel h2, .media_panel iframe {position: absolute;}
  536.  
  537. .media_panel {
  538.     background: #FFFFFF;
  539.     border: 2px solid #202020;
  540.     border-radius: 50%;
  541.  
  542.     h2 {
  543.         background: #202020;
  544.         width: 22px;
  545.         height: 18px;
  546.         font-size: 0;
  547.         top: 9px;
  548.         left: 7px;
  549.     }
  550.  
  551.     width: 40px;
  552.     height: 40px !important;
  553.     bottom: 139px;
  554.     left: calc(50% - 20px);
  555.  
  556.     iframe {
  557.         width: 300px;
  558.         height: 200px;
  559.         top: calc(50% - 100px);
  560.         left: calc(50% - 150px);
  561.         opacity: .001;
  562.     }
  563.  
  564.     overflow: clip;
  565.     overflow-clip-margin: 2px;
  566. }
  567. .media_panel:hover {background-color: #202020;}
  568. .media_panel:hover h2 {background: #FFFFFF;}
  569.  
  570. /* Wish List */
  571.  
  572. #id_wishlist {
  573.     display: flex;
  574.     flex-flow: row wrap;
  575.     align-content: start;
  576.     justify-content: center;
  577.     gap: 10px;
  578.  
  579.     .premium_sparkle, .clear {display: none;}
  580.  
  581.     a {
  582.         display: block;
  583.         background: rgb(from var(--links) r g b / 25%);
  584.         width: 30px;
  585.         height: 30px;
  586.         padding: 4px;
  587.         position: relative;
  588.         border: 1px solid #FFFFFF20;
  589.         border-radius: 5px;
  590.     }
  591.  
  592.     a:hover {
  593.         background: var(--border);
  594.         border-color: #FFFFFF;
  595.     }
  596.  
  597.     .owner_checkmark {
  598.         background: #FFFFFF;
  599.         border: 1px solid #101010;
  600.         border-radius: 3px;
  601.         margin: 0;
  602.         padding: 2px;
  603.         bottom: -3px;
  604.         right: -3px;
  605.     }
  606. }
  607.  
  608. /* Visitors */
  609.  
  610. #id_footprints .item {
  611.     display: flex;
  612.     flex-flow: row nowrap;
  613.     justify-content: center;
  614. }
  615.  
  616. #id_footprints .item::before {
  617.     content: ' ';
  618.     white-space: pre;
  619. }
  620. #id_footprints .item::after {content: '.';}
  621.  
  622. #id_footprints a {
  623.     display: inline-block;
  624.     max-width: calc(100% - 90px);
  625.     order: -1;
  626.     overflow: hidden;
  627.     text-overflow: ellipsis;
  628.     white-space: nowrap;
  629. }
  630.  
  631. /* Rotator Animation */
  632.  
  633. @keyframes RotatorA {
  634.     from {rotate: 0turn;}
  635.     to {rotate: 1turn;}
  636. }
  637.  
  638. #column_1 .custom_panel {
  639.     b {
  640.         background: url('https://i.imgur.com/GfQqEw4.png');
  641.         width: 540px;
  642.         height: 540px;
  643.         position: fixed;
  644.         top: 60px;
  645.         left: 280px;
  646.         animation: RotatorA 30s linear infinite;
  647.     }
  648.     b:nth-of-type(1) {animation-duration: 60s;}
  649.     b:nth-of-type(3) {background-position-y: -1080px;}
  650.  
  651.     b:nth-of-type(2) {
  652.         background-position-y: -540px;
  653.         animation-direction: reverse;
  654.     }
  655. }
  656.  
  657. /* Misc */
  658.  
  659. #column_2 .spoiler-wrapper {
  660.     padding: 0;
  661.     border-color: #FFFFFF;
  662.     border-radius: 3px;
  663. }
  664. #column_2 .spoiler-revealed {padding: 5px;}
  665.  
  666. #column_2 .spoiler-control {
  667.     background: #D8D8D8;
  668.     width: 100px;
  669.     font: inherit;
  670.     text-transform: uppercase;
  671.     padding: 3px 0;
  672.     border: 1px solid #00000080;
  673.     border-radius: 5px;
  674. }
  675. #column_2 .spoiler-control-hide {margin-bottom: 10px;}
Advertisement
Add Comment
Please, Sign In to add comment