Advertisement
althindor

Re-Code for Star HeaIer

Apr 28th, 2025
170
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 7.53 KB | None | 0 0
  1. /* Design by Star HeaIer */
  2. /* Re-Coded by AlthIndor */
  3.  
  4. html, body {
  5.     background: url('https://i.imgur.com/NmXALhC.png') repeat center top #D8E48D;
  6.     min-height: 1095px;
  7. }
  8. body {position: relative;}
  9.  
  10. body a {
  11.     text-decoration: none;
  12.     transition: all .5s ease-in-out;
  13. }
  14.  
  15. #gaia_header a, .panel a {
  16.     color: green !important;
  17.     font-weight: 600 !important;
  18. }
  19. #gaia_header a:hover, .panel a:hover {text-decoration: line-through !important;}
  20. .panel a:hover {color: inherit !important;}
  21.  
  22. * {cursor: url('https://i.imgur.com/kc9xjRz.png'), default !important;}
  23. .bbcode-swapping-image {mix-blend-mode: multiply;}
  24.  
  25. /* Fonts */
  26.  
  27. @font-face {
  28.     font-family: 'Open Sans';
  29.     font-style: normal;
  30.     font-weight: 300 800;
  31.     font-stretch: 100%;
  32.     src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.woff2) format('woff2');
  33. }
  34.  
  35. @font-face {
  36.     font-family: 'Open Sans';
  37.     font-style: normal;
  38.     font-weight: 300 800;
  39.     font-stretch: 100%;
  40.     src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2) format('woff2');
  41. }
  42.  
  43. /* Header */
  44.  
  45. #gaia_header, #gaia_header ul {background: none !important;}
  46. #gaia_header ul, #gaia_header li {margin: 0 5px !important;}
  47. #gaia_header li.spacer {display: none !important;}
  48.  
  49. #gaia_header ul {
  50.     width: auto !important;
  51.     font: 400 0/29px 'Open Sans', sans-serif !important;
  52. }
  53.  
  54. #gaia_header #header_right {
  55.     float: right;
  56.     margin: 0 8px 0 0 !important;
  57. }
  58.  
  59. #gaia_header a {font-size: 10px !important;}
  60. #gaia_header a:hover {opacity: .5;}
  61.  
  62. #header_left img {
  63.     -webkit-mask: url('https://i.imgur.com/5FTB40o.png') 0 0 no-repeat;
  64.     mask: url('https://i.imgur.com/5FTB40o.png') 0 0 no-repeat;
  65.     background: currentColor;
  66.     width: 0;
  67.     height: 16px;
  68.     padding: 0 37px 0 0;
  69. }
  70.  
  71. /* Columns */
  72.  
  73. #columns, #pictures_container, #texts_container {
  74.     top: 100px;
  75.     left: calc(50% - (910px / 2));
  76. }
  77. #pictures_container, #texts_container {position: absolute;}
  78.  
  79. #columns {
  80.     background: url('https://i.imgur.com/wkWDZOv.png') -22px -8px;
  81.     width: 910px;
  82.     height: 895px;
  83. }
  84. #columns .column {display: contents;}
  85.  
  86. /* Scrollbars */
  87.  
  88. #columns ::-webkit-scrollbar, #columns ::-webkit-scrollbar-thumb {
  89.     width: 8px;
  90.     border-radius: 4px;
  91. }
  92. #columns ::-webkit-scrollbar {background: #00800010;}
  93. #columns ::-webkit-scrollbar-thumb {background: green;}
  94.  
  95. @supports not selector(::-webkit-scrollbar) {
  96.     .panel, dl {
  97.         scrollbar-color: green #00800010;
  98.         scrollbar-width: thin;
  99.     }
  100. }
  101.  
  102. /* Panels */
  103.  
  104. .panel {
  105.     background: none;
  106.     color: #316F94;
  107.     font: 10px/1.65 'Open Sans', sans-serif;
  108.     margin: 0;
  109.     padding: 0;
  110.     position: absolute;
  111.     box-sizing: border-box;
  112. }
  113. .panel h2 {display: none;}
  114. .panel img {max-width: 100% !important;}
  115.  
  116. #id_footprints, #id_wishlist, #id_about, #id_comments dl {overflow: hidden scroll;}
  117. #id_footprints, #id_about, #id_comments dl {padding-right: 10px;}
  118.  
  119. #id_footprints, #id_wishlist {
  120.     width: 151px;
  121.     height: 181px;
  122.     top: 148px;
  123. }
  124. #id_footprints {left: 540px;}
  125. #id_wishlist {left: 722px;}
  126.  
  127. #id_about, #id_comments {
  128.     width: 438px;
  129.     height: 215px;
  130.     left: 378px;
  131. }
  132. #id_about {top: 375px;}
  133. #id_comments {top: 622px;}
  134.  
  135. /* Details */
  136.  
  137. @keyframes AviBounce {
  138.     from {translate: 0 0;}
  139.     to {translate: 0 -15px;}
  140. }
  141.  
  142. #id_details {
  143.     top: 182px;
  144.     left: 384px;
  145. }
  146. #id_details p:nth-of-type(n+2), .forum_userstatus {display: none;}
  147. #id_details p {margin: 0;}
  148.  
  149. @media (prefers-reduced-motion: no-preference) {
  150.     #id_details {animation: AviBounce 2.5s ease-in-out infinite alternate;}
  151. }
  152.  
  153. /* Visitors */
  154.  
  155. #id_footprints {line-height: 1.2;}
  156.  
  157. #id_footprints .item {
  158.     display: flex;
  159.     flex-flow: column nowrap;
  160.     margin-top: 1px;
  161. }
  162. #id_footprints .item:nth-of-type(n+2) {margin-top: 7px;}
  163.  
  164. #id_footprints a {
  165.     display: inline-flex;
  166.     width: max-content;
  167. }
  168.  
  169. /* Wish List */
  170.  
  171. #id_wishlist {
  172.     display: flex;
  173.     flex-flow: row wrap;
  174.     gap: 7px 6px;
  175.     scroll-snap-type: y mandatory;
  176. }
  177. #id_wishlist .premium_sparkle {display: none;}
  178.  
  179. #id_wishlist .item {
  180.     position: relative;
  181.     scroll-snap-align: start;
  182.     scroll-snap-stop: always;
  183. }
  184.  
  185. #id_wishlist a {
  186.     display: block;
  187.     background: #FFFFFF80;
  188.     width: 30px;
  189.     height: 30px;
  190.     padding: 5px;
  191.     border-radius: 5px;
  192. }
  193. #id_wishlist a:hover {background: #FFFFFF;}
  194.  
  195. .owner_checkmark {
  196.     background: #FFFFFF;
  197.     margin: 0;
  198.     padding: 1px;
  199.     bottom: 0;
  200.     right: 0;
  201.     border: 1px solid currentColor;
  202.     pointer-events: none;
  203. }
  204.  
  205. /* Comments */
  206.  
  207. #id_comments {
  208.     display: grid;
  209.     grid-template: 25px 1fr / 1fr 1fr;
  210.     gap: 10px;
  211. }
  212. #id_comments :is(#alerts_banner, .date a, .avatarImage, .deletecomment, .clear) {display: none;}
  213. #id_comments #alert_container {display: contents;}
  214.  
  215. #id_comments dl {grid-column: 1/3;}
  216. #id_comments dd {margin: 0 0 10px 0;}
  217. #id_comments dd:last-of-type {margin: 0;}
  218.  
  219. #id_comments dt {
  220.     text-align: left;
  221.     padding: 0;
  222.     border-bottom: 1px dashed currentColor;
  223. }
  224. #id_comments .date {margin-left: 1ex;}
  225.  
  226. /* Comments Links */
  227.  
  228. #id_comments :is(h2 + div, h2 ~ p, h2 + div a, h2 ~ p a) {
  229.     width: 100%;
  230.     height: 100%;
  231.     color: #FFFFFF !important;
  232. }
  233.  
  234. #id_comments :is(h2 + div, h2 ~ p) {
  235.     background: green;
  236.     line-height: 23px;
  237.     text-align: center;
  238.     border-radius: 5px;
  239.     overflow: hidden;
  240. }
  241.  
  242. #id_comments :is(h2 + div, h2 ~ p) a {
  243.     display: block;
  244.     font-size: 0;
  245.     text-decoration: none !important;
  246. }
  247. #id_comments :is(h2 + div, h2 ~ p) a:hover {opacity: .5;}
  248.  
  249. #id_comments :is(h2 + div, h2 ~ p) a::before {font-size: 10px;}
  250. #id_comments h2 + div a::before {content: 'POST NEW COMMENT';}
  251. #id_comments h2 ~ p a::before {content: 'VIEW ALL COMMENTS';}
  252.  
  253. @supports selector(#id_comments:has(#alert_container)) {
  254.     #id_comments h2 + div::before {
  255.         content: 'COMMENTS DISABLED';
  256.         font-weight: 600;
  257.     }
  258.     #id_comments:has(#alert_container) h2 + div::before {content: unset;}
  259. }
  260.  
  261. /* Buttons */
  262.  
  263. #id_contact {
  264.     top: 611px;
  265.     right: 6px;
  266. }
  267. #id_contact li {margin-bottom: 11px;}
  268.  
  269. #id_contact li * {
  270.     display: block;
  271.     background: url('https://i.imgur.com/I8AAqiL.png') top center no-repeat;
  272.     width: 72px;
  273.     height: 72px;
  274.     font-size: 0;
  275.     border-radius: 50%;
  276. }
  277. #id_contact li:nth-of-type(2) * {background-position-y: -72px;}
  278. #id_contact li:nth-of-type(3) * {background-position-y: -144px;}
  279.  
  280. #id_contact a:hover {
  281.     opacity: .5;
  282.     rotate: 1turn;
  283. }
  284.  
  285. /* Media */
  286.  
  287. .media_panel {
  288.     background: url('https://i.imgur.com/MWTKBXK.gif') center no-repeat !important;
  289.     width: 20px;
  290.     height: 20px !important;
  291.     font-size: 0;
  292.     top: 108px;
  293.     left: 317px;
  294.     overflow: hidden;
  295. }
  296. form .media_panel {overflow: visible;}
  297.  
  298. .media_panel iframe {
  299.     width: 300px;
  300.     height: 200px;
  301.     position: absolute;
  302.     bottom: calc(50% - 20px);
  303.     left: calc(50% - 35px);
  304.     opacity: .001;
  305. }
  306.  
  307. /* Avatars */
  308.  
  309. .avatar_decoration {left: 841px !important;}
  310. .avatar_decoration:nth-child(1) {top: 362px !important;}
  311. .avatar_decoration:nth-child(2) {top: 421px !important;}
  312. .avatar_decoration:nth-child(3) {top: 480px !important;}
  313. .avatar_decoration:nth-child(4) {top: 539px !important;}
  314.  
  315. .avatar_decoration img[width='48'] {
  316.     background: gainsboro;
  317.     border: 3px solid #1CAC1C;
  318.     border-radius: 50%;
  319.     transition: rotate .5s ease-in-out;
  320. }
  321. .avatar_decoration img[width='48']:hover {rotate: 1turn;}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement