Advertisement
LeafJelly

Official ArtFight Stardust CSS Theme

Jun 25th, 2024 (edited)
4,270
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 11.18 KB | Source Code | 0 0
  1. /*
  2. * Official Stardust CSS Theme
  3. * Code by @cyxxie and @leafjelly
  4. * Assets by @leafjelly
  5. * Pagedoll by @Spiderccino
  6. * Feel free to report any bugs!
  7. * This code is free-to-use! You may modify as you see fit
  8. */
  9.  
  10. .container-fluid{
  11.  max-width:1300px!important;
  12.  margin:auto;
  13. }
  14.  
  15. #wrapper {
  16.     background: url(https://images.artfight.net/resources/stardustbg.png);
  17.     background-color:#000;
  18.     background-size: 350px!important;
  19.     background-attachment: fixed;
  20. }
  21.  
  22.  
  23. /* PageDoll
  24. * Adjust the margin-top to move your pagedoll up and down
  25. * Adjust the Height and Width to best fit your image
  26. * Looks best with a Transparent png
  27. */
  28. .card-body.panel-body.profile-avatar-panel {
  29.     background-image: url(https://images.artfight.net/resources/wormston-200.gif) !important;
  30.     background-size:contain !important;
  31.     background-repeat:no-repeat!important;
  32.     background-position:center!important;
  33.     background:none;
  34.     height: 200px;
  35.     width: 200px;
  36.     border: none;
  37.     margin-top:-50px;
  38. }
  39. .card-body span.icon-user{display:none}
  40. @media screen and (max-width: 766px) {.card-body span.icon-user {display:block;background: rgba(0, 0, 0, .5);}}
  41.  
  42. /*User Info*/
  43. .card.panel.float-left.d-none.d-md-block.profile-avatar-wrapper {
  44.   border: none;
  45. }
  46.  
  47. .profile-header-background.panel-heading.bg-light.p-2.border.rounded.position-relative {
  48.   background-image: url(https://images.artfight.net/resources/starheader.png);
  49.   background-size:200px;
  50.   background-attachment:fixed;
  51.   border: #393488 solid !important;
  52.   padding: 12px !important;
  53.   border-width: 0px 0px 1px 0px !important;
  54. }
  55.  
  56. .profile-header-wrapper.clearfix {
  57.   background:rgba(0,0,0,.8);
  58.   border:#6e65ff 1px solid;
  59.   width:84.5% !important;
  60.   margin-left:0;
  61.   display: inline-block  !important;
  62. }
  63.  
  64. .profile-header-name a {
  65.   color:  #8fd5ff!important;
  66.   font-weight:normal!important;
  67. }
  68. .element-disabled.text-muted.h5, .h3.profile-header-name.text-center {
  69.   color: #8fd5ff!important;
  70.   opacity: .5 !important;
  71.   font-weight: normal;
  72. }
  73. .d-none.d-md-block.mt-3.profile-header-normal-status {
  74.   font-size:smaller;
  75. }
  76.  
  77. .card-header.panel-heading{font-weight:normal;}
  78. .card.panel.float-left.d-none.d-md-block.profile-avatar-wrapper {
  79.   background: none;
  80.   border:none;
  81. }
  82. .panel-heading{
  83.   background-image: url(https://images.artfight.net/resources/starheader.png);
  84.   background-size:200px;
  85.   background-attachment:fixed;
  86.   border: #6e65ff solid 1px;
  87.   color: #a1e1f4 !important;
  88. }
  89. .username-navbar span {
  90.   color: #877feb!important;
  91. }
  92.  
  93. .profile-header-mobile-status .card-body{
  94.   background:none;
  95.   padding:.5em;
  96. }
  97. .d-block .d-md-none .mt-3 .profile-header-mobile-status{margin:0}
  98. .card.profile-avatar-wrapper, .profile-header-mobile-status .card {
  99.     background: none; border-none;
  100. }
  101. /*Navigation Tabs*/
  102. .nav-tabs {
  103.     width: 16%;
  104.     margin: -0.3rem 0 -1rem -1rem !important;
  105.     display: inline-block !important;
  106.     padding: 4px !important;
  107.     border: none;
  108.     font-variant: small-caps;
  109.     float: right;
  110.  
  111. .nav-tabs .nav-item {
  112.   text-align: center;
  113.   border: none;
  114.   background: rgba(0,0,0,.8) !important;
  115. }
  116.  
  117. .nav-link.active, a.btn.btn-primary.active, .page-item.active .page-link {
  118.     background: #7d73ff !important;
  119.     font-style: italic;
  120.     text-transform: uppercase;
  121.     color: #000 !important;
  122. }
  123.  
  124. .nav-tabs .nav-item:hover, .nav-tabs .nav-link:hover {
  125.     background: #655ce0;
  126.     color: #001e39 !important;
  127. }
  128. .nav-tabs .nav-link{
  129.   color:#72b4d6;
  130.   padding:5px;
  131.   border: #6e65ff solid !important;
  132.   border-width: 1px 1px 1px 0 !important;
  133.   text-align:center;
  134. }
  135.  
  136. /* Profile Description Box*/
  137. .profile-description.mb-4.clearfix {
  138.   margin:1rem 4px 1rem 1rem !important;
  139.   background: rgba(0,0,0,.8);
  140.   min-height: 350px !important;
  141.   max-height: 600px !important;
  142.   overflow: auto!important;
  143.   border: #6e65ff solid 1px;
  144.   padding: 20px 25px;
  145.   float: right;
  146.   width: 72%;
  147. }
  148.  
  149. /* Followers and Links */
  150. .profile-links.col-md-6 {
  151.   min-width: 100%;
  152.   padding:0;
  153. }
  154.  
  155. .profile-links .table-card{
  156.   font-size:small;
  157. }
  158.  
  159. td a, .card-footer.panel-footer.text-right a, .panel-heading a{
  160.   color:#9ad2f7;
  161. }
  162. td a:hover, .card-footer.panel-footer.text-right a:hover, .panel-heading a:hover{
  163.   color:#54bbff;
  164. }
  165.  
  166. .w-25.text-right.bg-light.active {
  167.   background: url() top;
  168.     border:#393488  solid;
  169.     border-width: 0 0 1px 0;
  170.     background-color: #121126 !important;
  171.     color: #d0bfd8;
  172. }
  173. .table.table-bordered.table-card {
  174.   background: rgba(0,0,0,0.8);
  175.   color:#d0bfd8!important;
  176.   border: #6e65ff solid;
  177.   border-width: 0 1px 1px 1px;
  178. }
  179.  
  180. .achievement-panel .card-body.panel-body {
  181.     border: #6e65ff solid;
  182.     border-width: 0 1px 1px 1px;
  183. }
  184.  
  185. .table-bordered td {
  186.   padding:4px 11px;
  187.   border: #393488  solid 1px;
  188. }
  189.  
  190.  
  191. td.w-25.text-right.bg-light.active {
  192.     font-weight: lighter;
  193. }
  194.  
  195. .profile-followers.col-md-6 {
  196.     min-width: 100%;
  197.     padding:0;
  198. }
  199.  
  200. .profile-followers .card-body.panel-body{
  201.   background:rgba(0,0,0, .8);
  202.   text-align: center;
  203.   padding: 2px 36px;
  204.   Height:200px;
  205.   overflow:auto;
  206.   border: #6e65ff solid;
  207.   border-width: 0px 1px;  
  208. }
  209.  
  210. .progress {
  211.     background-color: #3d3460 !important;
  212. }
  213.  
  214. .profile-followers .card-header.panel-heading, .profile-overall-stats .card-header.panel-heading, .profile-current-stats .card-header.panel-heading, .achievement-panel  .card-header.panel-heading {
  215.     border-bottom: #393488 solid 1px !important;
  216. }
  217.  
  218. .card-body.panel-body,{
  219.   background: rgba(0,0,0,0.8);
  220.   overflow:auto;
  221. }
  222.  
  223. .col-6.col-md-4.profile-follower {
  224.   min-width: 100% !important;
  225.   font-weight:lighter;
  226.   padding:2px
  227. }
  228.  
  229. .card-footer.panel-footer.text-right {
  230.     padding: 3px;
  231.     background-color: #000000;
  232.     border: #6e65ff solid;
  233.     border-width: 0 1px 1px 1px !important;
  234.     border-top: #393488 solid 1px !important;
  235. }
  236.  
  237. .btn-warning, .btn-danger, .btn-success, .btn.btn-primary, #profile-dropdown, .dropdown-menu.dropdown-menu-right.show, .btn.btn-primary.form-control.btn-submit-once   {
  238.     background: #7d73ff;
  239.     border: #6e65ff solid 1px;
  240.     color: #000!important;
  241. }
  242.  
  243. .btn.btn-primary:hover, .btn.btn-primary.form-control.btn-submit-once:hover{
  244.     background: #655ce0;
  245.     color: #001e39 !important;
  246. }
  247.  
  248. .btn-warning:hover, .alert-warning{
  249.     background: #a55f28;
  250.     border: #e2984a solid 1px;
  251.     color: #fadfc7 !important;
  252. }
  253.  
  254. .btn-success:hover, .alert-success{
  255.     background: #086848;
  256.     border: #55ab90 solid 1px;
  257.     color: #a0d5b5 !important;
  258. }
  259.  
  260. .btn-danger:hover, .alert-danger{
  261.     background: #751a1a;
  262.     border: #ba3f3f solid 1px;
  263.     color: #fca0a0 !important;
  264. }
  265.  
  266. .card.panel.panel-default.mt-3 {
  267.   background: none;
  268. }
  269.  
  270. /*Profile Galleries*/
  271. .card.panel.panel-default.profile-gallery-header.profile-attacks-header.mt-3{
  272.   width:100%;
  273. }
  274.  
  275. .profile-attacks-header .panel-heading, .profile-defenses-header .panel-heading, .profile-characters-header .panel-heading {
  276.     font-variant:small-caps;
  277. }
  278.  
  279. h2.d-flex.align-items-center.mb-0 {
  280.     font-size: 23px;
  281.     font-weight: normal;
  282.     letter-spacing: 1px;
  283. }
  284.  
  285. .card.p-1.m-1.thumb-attack.attack-thumb.thumbnail, .card.p-1.m-1.thumb-attack.character-thumb.thumbnail {
  286.     background: rgba(3,5,22,.7)!important;
  287.     border:#3851ff solid 1px!important;
  288. }
  289. .nametag.thumbnail-width.h5.p-1.my-auto.bg-light.border.rounded.text-center.text-truncate, .nametag.bookmark-character.flex-shrink-0.h5.p-1.ml-1.my-auto.bg-light.border.rounded {
  290.     background: #7d73ff!important;
  291.     border: #6e65ff solid 1px!important;
  292.     color: #000!important;
  293.     font-variant:small-caps;
  294. }
  295.  
  296. .nametag.thumbnail-width.h5.p-1.my-auto.bg-light.border.rounded.text-center.text-truncate:hover, .nametag.bookmark-character.flex-shrink-0.h5.p-1.ml-1.my-auto.bg-light.border.rounded:hover{
  297.     background:#655ce0!important;
  298.     color: #001e39 !important;
  299. }
  300.  
  301. .text-break i {
  302.   color: #000 !important;
  303. }
  304. .text-break i:hover{
  305.   color:#000!important;
  306. }
  307.  
  308. /*Comments*/
  309. .comment .panel-body {
  310.   background: rgba(0,0,0, .8)!important;
  311. }
  312.  
  313. .comments h2, h2.profile-stats-title, h2.profile-characters-title, h2.profile-attacks-title,{
  314.     background: rgba(0,0,0, .5);
  315.     padding: 2px 10px;
  316.     margin: 30px auto 5px auto;
  317.     text-align: center;
  318.     width: 22%;
  319. }
  320.  
  321. h2.profile-defenses-title {
  322.     background: rgba(0,0,0, .5);
  323.     padding: 2px 10px;
  324. }
  325.  
  326.  
  327.  
  328.  
  329. /*Site User Interface*/
  330. .artfight-nav.navbar.navbar-dark.navbar-static-top.navbar-expand-md.mb-0 {
  331.     border-bottom: 3px #240450 solid;
  332.     background: #000 !important;
  333. }
  334.  
  335. .navbar-brand div, .navbar-dark .navbar-nav .nav-link{
  336.     color: #8e7cca!important;
  337. }
  338.  
  339. .navbar-brand div:hover, .navbar-dark .navbar-nav .nav-link:hover{
  340.     color: #b3a5e2!important;
  341. }
  342.  
  343. .dropdown-menu {
  344.   background: #000; color:#005758;
  345. }
  346. .dropdown-divider {
  347.   border-color: #83a3ee;
  348. }
  349. .dropdown-menu a, .dropdown-menu .d-flex.align-items-center {
  350.   color: #8e7cca!important;
  351. }
  352. .dropdown-header {
  353.   Color: #83a3ee;
  354. }
  355.  
  356. .dropdown-menu.dropdown-menu-right.show a {
  357.     color: #000 !important;
  358. }
  359.  
  360. .dropdown-menu.dropdown-menu-right.show a:hover {
  361.     background:#655ce0!important;
  362. }
  363.  
  364. .badge.badge-info, .badge.badge-primary, .badge.badge-danger, {
  365.   background: #8ecaff;color: #000!important;
  366. }
  367. .dropdown-item:hover {
  368.   Background: #201730;
  369.   Color: #9bb0ff!important;
  370. }
  371.  
  372. .alert.alert-info {
  373.     background: #1f4faa !important;
  374.     border: #4082df solid 1px;
  375.     color:#a2d2ff;
  376. }
  377. .alert.alert-info a {
  378.   color: #a2d2ff!important;
  379. }
  380.  
  381. .comment a, {
  382.   color:#ffc5d3;
  383. }
  384.  
  385. a .nav-link {
  386.   color: #79ffc7;
  387. }
  388.  
  389. .comments .card.panel {
  390.   background: none;border:#6e65ff solid 1px;
  391. }
  392.  
  393. .footer .contain {
  394.     background-color:#010010 !important;
  395.     border: none;
  396. }
  397.  
  398. .footer .contain div{
  399.     color: #98aed7!important;
  400. }
  401.  
  402. .footer .contain a {
  403.     color:#817bc6!important;
  404. }
  405. .footer .contain a:hover {
  406.     color: #6963ad!important;
  407. }
  408. .page-item.disabled .page-link,  .page-link:hover {
  409.   background: #27a89e !important;
  410.   border: none;
  411. }
  412. .page-link {
  413.   background: #27a89e;
  414.   border: none;
  415. }
  416.  
  417. .achievement-panel .card {
  418.   background: rgba(0, 55, 80, .6); border:none;
  419. }
  420.  
  421. p, div{
  422.     color:#a8c8d7;
  423. }
  424.  
  425. a {
  426.     color:#968eff;
  427. }
  428.  
  429. a:hover{
  430.     color:#b2acff;
  431. }
  432.  
  433. /*Mobile Fixes*/
  434. @media screen and (max-width: 766px){
  435.  .container-fluid, .comments h2, h2.profile-stats-title, h2.profile-characters-title, h2.profile-attacks-title, h2.d-flex.align-items-center.mb-0 {
  436.     width: 100%!important;
  437.  }
  438.  
  439.  .profile-header-wrapper.clearfix{
  440.     width: 100%!important;
  441.     Margin:.5rem 0!important;
  442.  }
  443.  
  444.  .nav-tabs {
  445.      width: 100% !important;
  446.      float: none !important;
  447.      margin: .5rem 0 !important;
  448.      padding: 0!important;
  449.      display: flex!important;
  450.  }
  451.  .nav-tabs .nav-link {
  452.     border-width:1px !important;
  453.  }
  454.  .profile-links.col-md-6, .profile-followers.col-md-6{padding:0 1rem!important}
  455.  
  456.   .profile-description.mb-4.clearfix {
  457.     float: none !important;
  458.     width: 100% !important;
  459.     Margin:.5rem 0!important;
  460.   }
  461.   .profile-body {
  462.     max-height: none!important;
  463.     min-height: auto !important;
  464.   }
  465.   .col-6.col-md-4.profile-follower {
  466.     height: inherit!important;
  467.     min-width: inherit !important;
  468.   }
  469.  
  470.   .profile-followers .card-body.panel-body{
  471.     height: inherit !important;
  472.   }
  473.  
  474.   h3.profile-header-name.text-center, .element-disabled{
  475.   color: #8fd5ff!important;
  476.   opacity: .7 ;
  477.   font-weight:bold !important;
  478.   }
  479. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement