MCDogWarrior

Cool Character [CSS]

Jun 9th, 2022 (edited)
208
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 11.86 KB | None | 0 0
  1. /* Main */
  2. body {
  3.   background-image: url("https://f2.toyhou.se/file/f2-toyhou-se/images/39884815_R0Vnj0CK3BR3Iy1.png");
  4.   background-attachment: fixed;
  5.   background-size:cover;
  6.   font-family:verdana;
  7.   color:#fff;
  8. }
  9.  
  10. a {
  11.     color: #98a4cc;
  12. }
  13.  
  14. a:hover, a:active {
  15. color: #8585bb!important;
  16. transition-duration: 0.5s;
  17. letter-spacing: 2px;
  18. }
  19.  
  20. .card {
  21.     background-color: #292929;
  22.     border-width:0px;
  23.     display: flex;
  24.     flex-direction: column;
  25.     position: relative;
  26. }
  27.  
  28. .content-main {
  29.     background-color:rgba(0,0,0,0.5);
  30. }
  31.  
  32. .modal-content {
  33.     background-color: #000;
  34.     border: 5px solid #b8b8cd;
  35.     border-radius: 25px;
  36. }
  37.  
  38.  
  39. /* Navbar + Footer */
  40. .navbar {
  41.     background: #000;
  42.     border-bottom: 5px thick double #b8b8cd;
  43. }
  44.  
  45. .navbar-inverse .navbar-nav .nav-link {
  46.     color: #b8b8cd;
  47. }
  48.  
  49. .navbar-inverse .navbar-brand, .navbar-inverse .navbar-brand:focus, .navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-toggler, .navbar-inverse .navbar-toggler:focus, .navbar-inverse .navbar-toggler:hover {
  50.     color: #b8b8cd;
  51. }
  52.  
  53. .navbar .dropdown-menu {
  54.     background-color: #000;
  55.     border: none;
  56.     border: 5px solid #b8b8cd;
  57.     border-top-left-radius: 0;
  58.     border-top-right-radius: 0;
  59.     border-bottom-right-radius: 25px;
  60.     border-bottom-left-radius: 25px;
  61.     margin: 0;
  62. }
  63.  
  64. .navbar .dropdown-menu a {
  65.     color: #b8b8cd;
  66. }
  67.  
  68. .navbar .dropdown-menu .dropdown-header {
  69.     color: #8dc0cd;
  70. }
  71.  
  72. .navbar .dropdown-menu .dropdown-divider {
  73.     background-color: #b8b8cd;
  74.     border-top: 3px solid #b8b8cd;
  75. }
  76.  
  77. .navbar .dropdown-menu a:hover, a:active {
  78.     background-color: rgba(184,184,205,0.5);
  79.     transition-duration: 0.5s;
  80. }
  81.  
  82. .navbar .btn {
  83.     border-radius:10px;
  84.     border-width:0px;
  85. }
  86.  
  87. .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  88.     background-color: #000;
  89.     color: #98a4cc;
  90. }
  91.  
  92. .footer {
  93.     background: #000;
  94.     border-top: 5px thick double #b8b8cd;
  95. }
  96.  
  97.  
  98. /* Character profile */
  99. .character-profile .profile-info-section .card {
  100.     border-width: 0;
  101.     position:absolute;
  102.     right:0px;
  103.     top:-15px;
  104.     max-width:70%;
  105.     border-bottom-left-radius:50px;
  106. }
  107.  
  108. .character-profile .profile-info-section .card .card-block {
  109.     background-color: #000;
  110.     border-bottom-left-radius:50px;
  111.     border-left: 5px solid #b8b8cd;
  112.     border-bottom: 5px solid #b8b8cd;
  113. }
  114.  
  115. .character-profile .profile-tags-content {
  116.     border-left: 0px solid #552aa4;
  117. }
  118.  
  119. .character-profile .profile-tags-content .badge {
  120.     background-color: #8dc0cd;
  121. }
  122.  
  123. abbr[title] {
  124.     font-style:italic;
  125. }
  126.  
  127. .img-thumbnail {
  128.     background-color: #000;
  129.     border: 5px solid #b8b8cd;
  130.     border-radius: 0.25rem;
  131.     padding: 0.25rem;
  132.     transition: none;
  133.     border-radius:60px;
  134. }
  135.  
  136. .character-profile .profile-name-section .profile-name-info .display-4 {
  137.    background-color:#b8b8cd;
  138.    padding:10px;
  139.    margin-left:-15px;
  140.    border-radius:25px;
  141.    color:#000;
  142. }
  143.  
  144. .gallery-thumb .thumb-image>a>.thumb-sensitive {
  145.     align-items: center;
  146.     background-color: rgba(184,184,205,.5);
  147.     border-radius: 0.25rem;
  148.     color: #000;
  149.     display: flex;
  150.     height: 100%;
  151.     justify-content: center;
  152.     left: 0;
  153.     opacity: 0;
  154.     position: absolute;
  155.     top: 0;
  156.     transition-duration: 0.5s;
  157.     transition-property: opacity;
  158.     width: 100%;
  159.     border-radius:60px;
  160. }
  161.  
  162. .gallery-row .gallery-item .gallery-edit .badge:last-of-type {
  163.     background-color:#8dc0cd;
  164.     border-radius:10px;
  165.     border-width:0px;
  166. }
  167.  
  168. .gallery-row .gallery-item .gallery-edit .badge {
  169.     background-color:#Bb9ce6;
  170.     border-radius:10px;
  171.     border-width:0px;
  172. }
  173.  
  174. .image-gallery.gallery-row {
  175.     justify-content: center;
  176. }
  177.  
  178. .img-thumbnail>img {
  179.     max-width: 100%;
  180.     border-radius:50px;
  181. }
  182.  
  183.  
  184. /* Sidebar */
  185. .sidebar {
  186.     background: #000;
  187.     border-right: 5px solid #b8b8cd;
  188. }
  189.  
  190. .side-nav li.header {
  191.     background-color: #b8b8cd;
  192.     color: #fff;
  193. }
  194.  
  195. .side-nav li.subheader {
  196.     background-color: rgba(184,184,205,.5);
  197.     color: #fff;
  198. }
  199.  
  200. .favorited, .favorited:hover {
  201.     color: #8dc0cd;
  202. }
  203.  
  204. .side-nav li.active>a, .side-nav li.active>a:focus, .side-nav li.active>a:hover, .side-nav li.active>a:link {
  205.     color: #8dc0cd;
  206. }
  207.  
  208.  
  209. /* Character innards */
  210. .form-control:hover {
  211.     background-color: #000;
  212.     border-width: 0px;
  213.     border-radius: 10px;
  214.     color: #a4cbcc;
  215.     display: block;
  216.     font-size: .9rem;
  217.     font-weight: 400;
  218. }
  219.  
  220. .form-control{
  221.     border-width: 0px;
  222.     border-radius: 10px;
  223.     color: #a4cbcc;
  224.     display: block;
  225.     font-size: .9rem;
  226.     font-weight: 400;
  227. }
  228.  
  229. [th-toggle].btn-secondary:before {
  230.     background-color: #a4cbcc;
  231. }
  232.  
  233. [th-toggle].btn-primary:before {
  234.     background-color: #98a4cc;
  235. }
  236.  
  237. .mfp-wrap .image-left-bar {
  238.     background-color: #000;
  239. }
  240.  
  241. .mfp-wrap .mfp-content .mfp-figure figcaption .mfp-bottom-bar {
  242.     border-top: 5px solid #b8b8cd!important;
  243. }
  244.  
  245. .image-bottom-bar h2 {
  246.     border-bottom: 2px solid rgba(184,184,205,0.5);
  247. }
  248.  
  249. .mfp-wrap .mfp-content .mfp-figure {
  250.     background: #fff;
  251.     border-radius:20px;
  252. }
  253.  
  254. .mfp-wrap .mfp-content .mfp-figure .mfp-close {
  255.     color: #b8b8cd;
  256.     transition-duration: 0.5s;
  257. }
  258.  
  259. .mfp-wrap .mfp-content {
  260.     background-color: #1c141d;
  261.     box-shadow: 9px 9px 9px rgba(0,0,0,0.2);
  262.     margin-left: 40px;
  263.     margin-right: 40px;
  264.     min-width: 50%;
  265. }
  266.  
  267. .link-panel:before {
  268.     border: 15px solid #484848;
  269. }
  270.  
  271. .link-character-icon {
  272.     border-radius:50px;
  273. }
  274.  
  275. .alert-success {
  276.     background-color: #9fe0d5;
  277.     border-color: #9fe0d5;
  278.     color: #fff;
  279. }
  280.  
  281. #user-character-selector .user-character-selector-right {
  282.     background-color: #000;
  283.     border-radius:20px;
  284. }
  285.  
  286. #user-character-selector .user-character-selector-right.user-character-selector-header {
  287.     border-bottom: 1px solid #484848;
  288. }
  289.  
  290. #user-character-selector .user-character-selector-left .user-character-selector-header, #user-character-selector .user-character-selector-left.user-character-selector-header {
  291.     border-bottom: 1px solid #e7e7d9;
  292.     border-top-left-radius:20px;
  293. }
  294.  
  295. #user-character-selector .user-character-selector-sidebar .user-character-selector-folder-list {
  296.     border-bottom-left-radius:20px;
  297. }
  298.  
  299. #user-character-selector .user-character-selector-sidebar .user-character-selector-folder-list>.list-group-item>a {
  300.     background-color: transparent;
  301.     color: #b8b8cd;
  302.     padding: 0.75rem 1.25rem;
  303. }
  304.  
  305. #user-character-selector .user-character-selector-sidebar .user-character-selector-folder-list>.list-group-item {
  306.     background-color: #484848;
  307.     border-color: hsla(60,29%,97%,.15);
  308.     border-left: none;
  309.     border-right: none;
  310.     padding: 0;
  311. }
  312.  
  313. .display-character img, .display-character-tiny img, .display-group img, .display-group-tiny img, .display-literature img, .display-literature-tiny img, .display-user img, .display-user-tiny img {
  314.     border-radius:20px;
  315. }
  316.  
  317. .gallery-row .gallery-item .gallery-edit {
  318.     bottom: 5px;
  319.     position: absolute;
  320.     right: 5px;
  321. }
  322.  
  323. .literature .literature-header-content .literature-header-subinfo {
  324.     border-left: 1px solid #202020;
  325. }
  326.  
  327.  
  328. /* Bootstrap modification */
  329. .btn.btn-default {
  330.     background-color: #b8b8cd;
  331.     border-radius:15px;
  332. }
  333.  
  334. .btn.btn-default {
  335.     background-color: #b8b8cd;
  336.     border-radius:15px;
  337.     border-color:#A39fb9;
  338.     border-width: 0px;
  339. }
  340.  
  341. .btn.btn-default:hover {
  342.     background-color:#625971;
  343.     border-color:#625971;
  344.     border-width: 0px;
  345.     transition: 0.5s;
  346.   }
  347.  
  348. .btn-danger {
  349.     background-color: #Bb9ce6;
  350.     border-color: #Bb9ce6;
  351.     color: #fff;
  352.     border-radius:10px;
  353.     border-width:0px;
  354. }
  355.  
  356. .btn-danger:hover {
  357.     background-color: #6a62aa;
  358.     border-color: #6a62aa;
  359.     color: #fff;
  360.     border-radius:10px;
  361.     border-width:0px;
  362. }
  363.  
  364. .btn-warning {
  365.     background-color: #8879d0;
  366.     border-color: #8879d0;
  367.     color: #fff;
  368.     border-radius:10px;
  369.     border-width:0px;
  370. }
  371.  
  372. .btn-warning:hover {
  373.     background-color: #5656a6;
  374.     border-color: #5656a6;
  375.     color: #fff;
  376.     border-radius:10px;
  377.     border-width:0px;
  378. }
  379.  
  380. .btn-primary {
  381.     background-color: #b8b8cd;
  382.     border-color: #b8b8cd;
  383.     color: #fff;
  384.     border-radius:10px;
  385.     border-width:0px;
  386. }
  387.  
  388. .btn-primary:hover {
  389.     background-color: #948cad;
  390.     border-color: #948cad;
  391.     color: #fff;
  392.     border-radius:10px;
  393.     border-width:0px;
  394. }
  395.  
  396. .btn.btn-secondary {
  397.     background-color: #000;
  398.     border-color: #000;
  399.     color: #fff;
  400.     border-radius:10px;
  401.     border-width:0px;
  402. }
  403.  
  404. .btn.btn-secondary:hover {
  405.     background-color: #000;
  406.     border-color: #000;
  407.     color: #fff;
  408.     border-radius:10px;
  409.     border-width:0px;
  410. }
  411.  
  412. .bg-faded {
  413.     background-color: #000;
  414. }
  415.  
  416. .btn-success {
  417.     background-color: #9fe0d5;
  418.     border-color: #9fe0d5;
  419.     color: #fff;
  420.     border-radius:10px;
  421.     border-width:0px;
  422. }
  423.  
  424. .btn-success:hover {
  425.     background-color: #78b5bb;
  426.     border-color: #78b5bb;
  427.     color: #fff;
  428.     border-radius:10px;
  429.     border-width:0px;
  430. }
  431.  
  432. .text-primary {
  433.     color: #b8b8cd!important;
  434. }
  435.  
  436. .text-secondary {
  437.     color: #98a4cc!important;
  438. }
  439.  
  440. .text-info {
  441.     color: #8dc0cd!important;
  442. }
  443.  
  444. .text-success {
  445.     color: #9fe0d5!important;
  446. }
  447.  
  448. .text-warning {
  449.     color: #8879d0!important;
  450. }
  451.  
  452. .text-danger {
  453.     color: #Bb9ce6!important;
  454. }
  455.  
  456. .bg-primary {
  457.     background-color: #b8b8cd!important;
  458. }
  459.  
  460. .bg-secondary {
  461.     background-color: #98a4cc!important;
  462. }
  463.  
  464. .bg-info {
  465.     background-color: #8dc0cd!important;
  466. }
  467.  
  468. .bg-success {
  469.     background-color: #9fe0d5!important;
  470. }
  471.  
  472. .bg-warning {
  473.     background-color: #8879d0!important;
  474. }
  475.  
  476. .bg-danger {
  477.     background-color: #Bb9ce6!important;
  478. }
  479.  
  480. .bg-dark {
  481.     background-color: #202020!important;
  482. }
  483.  
  484. .bg-light {
  485.     background-color: #D7d2d8!important;
  486. }
  487.  
  488. .btn-info {
  489.     background-color: #8dc0cd;
  490.     border-color: #8dc0cd;
  491.     color: #fff;
  492.     border-radius:10px;
  493.     border-width:0px;
  494. }
  495.  
  496. .btn-info:hover {
  497.     background-color: #6485a2;
  498.     border-color: #6485a2;
  499.     color: #fff;
  500.     border-radius:10px;
  501.     border-width:0px;
  502. }
  503.  
  504. .text-muted {
  505.     color: #6c7187!important;
  506. }
  507.  
  508. .btn-outline-primary.active, .btn-outline-primary:active, .show>.btn-outline-primary.dropdown-toggle {
  509.     background-color: #b8b8cd;
  510.     border-color: #b8b8cd;
  511.     color: #fff;
  512. }
  513.  
  514. .btn-outline-primary:hover {
  515.     background-color: #b8b8cd;
  516.     border-color: #b8b8cd;
  517.     color: #fff;
  518. }
  519.  
  520. .progress {
  521.     background-color: #202020;
  522. }
  523.  
  524. .progress-bar {
  525.     background-color: #b8b8cd;
  526. }
  527.  
  528. .card-outline-primary {
  529.     border-color: #b8b8cd;
  530. }
  531.  
  532. .card-outline-secondary {
  533.     border-color: #98a4cc;
  534. }
  535.  
  536. .card-outline-info {
  537.     border-color: #8dc0cd;
  538. }
  539.  
  540. .card-outline-success {
  541.     border-color: #9fe0d5;
  542. }
  543.  
  544. .card-outline-warning {
  545.     border-color: #8879d0;
  546. }
  547.  
  548. .card-outline-danger {
  549.     border-color: #Bb9ce6;
  550. }
  551.  
  552. .btn-outline-info {
  553.     border-color: #8dc0cd;
  554.     color: #8dc0cd;
  555. }
  556.  
  557. .btn-outline-info.active, .btn-outline-info:active, .show>.btn-outline-info.dropdown-toggle {
  558.     background-color: #8dc0cd;
  559.     border-color: #8dc0cd;
  560. }
  561.  
  562. .btn-outline-success {
  563.     border-color: #9fe0d5;
  564.     color: #9fe0d5;
  565. }
  566.  
  567. .btn-outline-success.active, .btn-outline-success:active, .show>.btn-outline-success.dropdown-toggle {
  568.     background-color: #9fe0d5;
  569.     border-color: #9fe0d5;
  570. }
  571.  
  572. .btn-outline-warning {
  573.     border-color: #8879d0;
  574.     color: #8879d0;
  575. }
  576.  
  577. .btn-outline-warning.active, .btn-outline-warning:active, .show>.btn-outline-warning.dropdown-toggle {
  578.     background-color: #8879d0;
  579.     border-color: #8879d0;
  580. }
  581.  
  582. .btn-outline-danger {
  583.     border-color: #Bb9ce6;
  584.     color: #Bb9ce6;
  585. }
  586.  
  587. .btn-outline-danger.active, .btn-outline-danger:active, .show>.btn-outline-danger.dropdown-toggle {
  588.     background-color: #Bb9ce6;
  589.     border-color: #Bb9ce6;
  590. }
  591.  
  592.  
  593. #footer:after {
  594.     content: 'CSS by maniCARNY';
  595.     color:#fff;
  596. }
Add Comment
Please, Sign In to add comment