Advertisement
LeafJelly

Official ArtFight Seafoam CSS Theme

Jun 30th, 2024 (edited)
3,674
2
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 10.65 KB | Source Code | 2 0
  1. /*
  2. * Official Seafoam 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/seabg2.jpg);
  17.     background-size: contain!important;
  18.     background-repeat: repeat-x;
  19.     background-position: bottom;
  20.     background-attachment: fixed;
  21. }
  22.  
  23.  
  24. /* PageDoll
  25. * Adjust the margin-top to move your pagedoll up and down
  26. * Adjust the Height and Width to best fit your image
  27. * Looks best with a Transparent png
  28. */
  29. .card-body.panel-body.profile-avatar-panel {
  30.     background-image: url(https://images.artfight.net/resources/spunch-200.gif) !important;
  31.     background-size:contain !important;
  32.     background-repeat:no-repeat!important;
  33.     background-position:center!important;
  34.     background:none;
  35.     height: 200px;
  36.     width: 200px;
  37.     border: none;
  38.     margin-top:-40px;
  39. }
  40. .card-body span.icon-user{display:none}
  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/seaheader.png);
  49.   background-size:250px;
  50.   border: none !important;
  51.   padding:15px !important;
  52. }
  53.  
  54. .profile-header-wrapper.clearfix {
  55.   background:rgba(0,72,84,.8);
  56.   border: #6fddc0 solid 2px;
  57.   width:84.5% !important;
  58.   margin-left:0;
  59.   display: inline-block  !important;
  60. }
  61.  
  62. .profile-header-name a {
  63.   color: #1a5164!important;
  64. }
  65. .element-disabled.text-muted.h5{
  66.   color: #0d3e50!important;
  67.   opacity: .8;
  68. }
  69. .d-none.d-md-block.mt-3.profile-header-normal-status {
  70.   font-size:smaller;
  71. }
  72.  
  73. .card-header.panel-heading{font-weight: bold;}
  74. .card.panel.float-left.d-none.d-md-block.profile-avatar-wrapper {
  75.   background: none;
  76.   border:none;
  77. }
  78. .panel-heading{
  79.   background-image: url(https://images.artfight.net/resources/seaheader.png);
  80.   background-size:250px;
  81.   border: #23A196 solid 2px;
  82.   color: #003b4b !important;
  83. }
  84. .username-navbar span {
  85.   color: #b5ffbb!important;
  86. }
  87.  
  88. .profile-header-mobile-status .card-body{
  89.   background:none;
  90.   padding:.5em;
  91. }
  92. .d-block .d-md-none .mt-3 .profile-header-mobile-status{margin:0}
  93. .card.profile-avatar-wrapper, .profile-header-mobile-status .card {
  94.     background: none; border:none;
  95. }
  96. /*Navigation Tabs*/
  97. .nav-tabs {
  98.     width: 16%;
  99.     margin: -0.3rem 0 -1rem -1rem !important;
  100.     display: inline-block !important;
  101.     padding: 4px !important;
  102.     border: none;
  103.     font-variant: small-caps;
  104.     float: right;
  105. }
  106.  
  107. .nav-tabs .nav-item {
  108.   text-align: center;
  109.   border: none;
  110. }
  111.  
  112. .nav-link.active, a.btn.btn-primary.active, .page-item.active .page-link{
  113.     background: #6fddc0 !important;
  114.     font-style: italic;
  115.     text-transform: uppercase;
  116.     color: #05276b !important;
  117. }
  118.  
  119. .nav-tabs .nav-item:hover, .nav-tabs .nav-link:hover {
  120.   background: #5bc8ab!important;
  121.   color: #164980!important;
  122. }
  123. .nav-tabs .nav-link{
  124.   background: rgba(0,72,84,.8);
  125.   color:#c4ffda;
  126.   padding:5px;
  127.   border:#7bdddd solid !important;
  128.   border-width: 2px 2px 2px 0 !important;
  129. }
  130.  
  131. /* Profile Description Box*/
  132. .profile-description.mb-4.clearfix {
  133.   margin:1rem 4px 1rem 1rem !important;
  134.   background: rgba(0,72,84,.8);
  135.   min-height: 350px !important;
  136.   max-height: 600px !important;
  137.   overflow: auto!important;
  138.   border: #a8ffd2 solid 2px;
  139.   padding: 20px 25px;
  140.   float: right;
  141.   width: 72%;#3d0020
  142. }
  143.  
  144. /* Followers and Links */
  145. .profile-links.col-md-6 {
  146.   min-width: 100%;
  147.   padding:0;
  148. }
  149.  
  150. .profile-links .table-card{
  151.   font-size:small;
  152. }
  153.  
  154. td a{
  155.   color: #d4e3ed;
  156. }
  157. td a:hover{
  158.   color: #aad1eb1;
  159. }
  160. .card-footer.panel-footer.text-right a{
  161.   color:#18415c;
  162. }
  163.  
  164. .card-footer.panel-footer.text-right a:hover{
  165.   color:#0e5d91;
  166. }
  167.  
  168. .w-25.text-right.bg-light.active {
  169.   background: url() top;
  170.     border: #17716d solid;
  171.     border-width: 0 0 1px 0;
  172.     background-color: #209b95 !important;
  173.     color: #FFF;
  174. }
  175. .table.table-bordered.table-card {
  176.   background: rgba(0,72,84,0.8);color#FFF;
  177.   color:#FFF!important;
  178.   border: #23A196  solid;
  179.   border-width: 0 2px 2px 2px;
  180. }
  181. .table-bordered td {
  182.   padding:4px 11px;
  183.   border: #44a8a4 solid 1px;
  184. }
  185.  
  186.  
  187. td.w-25.text-right.bg-light.active {
  188.     font-weight: lighter;
  189. }
  190.  
  191. .profile-followers.col-md-6 {
  192.     min-width: 100%;
  193.     padding:0;
  194. }
  195.  
  196. .profile-followers .card-body.panel-body{
  197.   background:rgba(0,72,84, .9);
  198.   text-align: center;
  199.   padding: 2px 36px;
  200.   Height:200px;
  201.   overflow:auto;
  202.   border: #23A196 solid;
  203.   border-width: 0 2px;
  204. }
  205.  
  206. .progress {
  207.     background-color: #05475a!important;
  208. }
  209.  
  210. .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 {
  211.     border-bottom: #267871 solid 2px !important;
  212. }
  213.  
  214. .achievement-panel .card-body.panel-body {
  215.     border: #23A196  solid;
  216.     border-width: 0 2px 2px 2px;
  217. }
  218.  
  219. .card-body.panel-body,{
  220.   background: rgba(0,72,84,0.8);
  221.   overflow:auto;
  222. }
  223.  
  224. .col-6.col-md-4.profile-follower {
  225.   min-width: 100% !important;
  226.   font-weight:lighter;
  227.   padding:2px
  228. }
  229.  
  230. .card-footer.panel-footer.text-right {
  231.     padding: 3px;
  232.     background-color: #41ab9d;
  233.     border:#23A196 1px solid !important;
  234. }
  235.  
  236. .btn-warning, .btn-danger, .btn-success, .btn.btn-primary, #profile-dropdown, .dropdown-menu.dropdown-menu-right.show {
  237.     background: #6fddc0;
  238.     border: #2f8fa5 solid 1px;
  239.     color: #1c5795!important;
  240. }
  241.  
  242. .btn.btn-primary:hover{
  243.     background: #5bc8ab;
  244.     color: #0f3b69!important;
  245. }
  246.  
  247. .btn-warning:hover, .alert-warning{
  248.     background: #e5af3f;
  249.     border: #9d5810 solid 1px;
  250.     color: #8d4200 !important;
  251. }
  252.  
  253. .btn-success:hover, .alert-success{
  254.     background: #1ba879;
  255.     border: #0d7453 solid 1px;
  256.     color: #00441b !important;
  257. }
  258.  
  259. .btn-danger:hover, .alert-danger{
  260.     background: #ca5858;
  261.     border: #830202 solid 1px;
  262.     color: #4b0000 !important;
  263. }
  264.  
  265. .card.panel.panel-default.mt-3 {
  266.   background: none;
  267. }
  268.  
  269. /*Profile Galleries*/
  270. .card.panel.panel-default.profile-gallery-header.profile-attacks-header.mt-3{
  271.   width:100%;
  272. }
  273.  
  274. .profile-attacks-header .panel-heading, .profile-defenses-header .panel-heading, .profile-characters-header .panel-heading {
  275.     font-variant:small-caps;
  276. }
  277.  
  278. h2.d-flex.align-items-center.mb-0 {
  279.     font-size: 23px;
  280. }
  281.  
  282. .panel-heading a{
  283.   color: #0059ab;
  284.   font-variant: normal;
  285. }
  286. .panel-heading a:hover {
  287.   color: #0078e7;
  288. }
  289.  
  290. .card.p-1.m-1.thumb-attack.attack-thumb.thumbnail, .card.p-1.m-1.thumb-attack.character-thumb.thumbnail {
  291.     border: #f38585 solid 3px !important;
  292.     background: rgba(255, 164, 164, 0.8);
  293. }
  294. .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,.btn.btn-primary.form-control.btn-submit-once  {
  295.   background: #23A196 !important;
  296.   border: #178ca0 1px solid !important;
  297.   color:#c4ffda !important;
  298.   font-variant:small-caps;
  299. }
  300.  
  301. .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, .btn.btn-primary.form-control.btn-submit-once:hover{
  302.     background: #24b0a4 !important;
  303.     border: #09a7b3 1px solid
  304.     color:#e2fbeb!important;
  305. }
  306.  
  307. .text-break i {
  308.   color: #c4ffda !important;
  309. }
  310. .text-break i:hover{
  311.   color:#aff1c8!important;
  312.   text-decoration: none !important;
  313. }
  314.  
  315. /*Comments*/
  316. .comment .panel-body {
  317.   background: rgba(0,72,84, .9)!important;
  318. }
  319.  
  320. .comments h2, h2.profile-stats-title, h2.profile-characters-title, h2.profile-attacks-title,{
  321.     background: rgba(0,72,84, .5);
  322.     padding: 2px 10px;
  323.     margin: 30px auto 5px auto;
  324.     text-align: center;
  325.     width: 22%;
  326. }
  327.  
  328. h2.profile-defenses-title {
  329.     background: rgba(0,72,84, .5);
  330.     padding: 2px 10px;
  331. }
  332.  
  333. /*Site User Interface*/
  334. .artfight-nav.navbar.navbar-dark.navbar-static-top.navbar-expand-md.mb-0 {
  335.   border-bottom: 3px #168b95 solid;
  336.   background: #27a89e !important;
  337. }
  338.  
  339. .navbar-brand div, .navbar-dark .navbar-nav .nav-link{
  340.     color: #002338 !important;
  341. }
  342.  
  343. .navbar-brand div:hover, .navbar-dark .navbar-nav .nav-link:hover{
  344.     color: #00588c !important;
  345. }
  346.  
  347. .dropdown-menu {
  348.   background: #30aea0; color:#005758;
  349. }
  350. .dropdown-divider {
  351.   border-color: #a5fff2;
  352. }
  353. .dropdown-menu a, .dropdown-menu .d-flex.align-items-center {
  354.   color: #005758 !important;
  355. }
  356. .dropdown-header {
  357.   Color: #a5fff2;
  358. }
  359. .badge.badge-info, .badge.badge-primary, .badge.badge-danger, {
  360.   background: #79ffc7;color: #000!important;
  361. }
  362. .dropdown-item:hover {
  363.   Background: #209189;
  364.   Color: #003435!important;
  365. }
  366.  
  367. .alert.alert-info {
  368.     background: #e49faa !important;
  369.     border: #d15673 solid 1px;
  370. }
  371. .alert.alert-info a {
  372.   color: #b93554 !important;
  373. }
  374.  
  375. .comment a, {
  376.   color:#ffc5d3;
  377. }
  378.  
  379. a .nav-link {
  380.   color: #79ffc7;
  381. }
  382.  
  383. .comments .card.panel {
  384.   background: none;border:#9effc5 solid 1px;
  385. }
  386.  
  387. .footer .contain {
  388.     background-color: #003750 !important;
  389.     color: #a3daff !important;
  390.     border: none;
  391. }
  392. .page-item.disabled .page-link,  .page-link:hover {
  393.   background: #27a89e !important;
  394.   border: none;
  395. }
  396. .page-link {
  397.   background: #27a89e;
  398.   border: none;
  399. }
  400.  
  401. .achievement-panel .card {
  402.   background: rgba(0, 55, 80, .6); border:none;
  403. }
  404.  
  405. p, div{
  406.     color: #f7ffea;
  407. }
  408.  
  409. a {
  410.     color:#71daa6;
  411. }
  412.  
  413. a:hover{
  414.     color:#bbffdd;
  415. }
  416.  
  417. /*Mobile Fixes*/
  418. @media screen and (max-width: 766px){
  419.  .container-fluid, .comments h2, h2.profile-stats-title, h2.profile-characters-title, h2.profile-attacks-title, h2.d-flex.align-items-center.mb-0 {
  420.     width: 100%!important;
  421.  }
  422.  
  423.  .profile-header-wrapper.clearfix{
  424.     width: 100%!important;
  425.     Margin:.5rem 0!important;
  426.  }
  427.  
  428.  .nav-tabs {
  429.      width: 100% !important;
  430.      float: none !important;
  431.      margin: .5rem 0 !important;
  432.      padding: 0!important;
  433.      display: flex!important;
  434.  }
  435.  .nav-tabs .nav-link {
  436.     border-width:1px !important;
  437.  }
  438.  .profile-links.col-md-6, .profile-followers.col-md-6{padding:0 1rem!important}
  439.  
  440.   .profile-description.mb-4.clearfix {
  441.     float: none !important;
  442.     width: 100% !important;
  443.     Margin:.5rem 0!important;
  444.   }
  445.   .profile-body {
  446.     max-height: none!important;
  447.     min-height: auto !important;
  448.   }
  449.   .col-6.col-md-4.profile-follower {
  450.     height: inherit!important;
  451.     min-width: inherit !important;
  452.   }
  453.  
  454.   .profile-followers .card-body.panel-body{
  455.     height: inherit !important;
  456.   }
  457.  
  458.   h3.profile-header-name.text-center, .element-disabled{
  459.   color: #0d3e50!important;
  460.   opacity: .9 ;
  461.   font-weight:bold !important;
  462.   }
  463.  
  464.   .card-body span.icon-user {display:block;background:rgba(0,72,84,0.2);}
  465. }
Tags: Artfight
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement