Cool Character [C] CSS (Code)

MCDogResource

Info


Created
1 year, 5 months ago
Creator
MCDogResource
Favorites
6

Profile


/* Main */

body {

  background-image: url("https://f2.toyhou.se/file/f2-toyhou-se/images/39884815_R0Vnj0CK3BR3Iy1.png");

  background-attachment: fixed;

  background-size:cover;

  font-family:verdana;

  color:#fff;

}

 

a {

    color: #98a4cc;

}

 

a:hover, a:active {

color: #8585bb!important;

transition-duration: 0.5s;

letter-spacing: 2px;

}

 

.card {

    background-color: #292929;

    border-width:0px;

    display: flex;

    flex-direction: column;

    position: relative;

}

 

.content-main {

    background-color:rgba(0,0,0,0.5);

}

 

.modal-content {

    background-color: #000;

    border: 5px solid #b8b8cd;

    border-radius: 25px;

}

 

 

/* Navbar + Footer */

.navbar {

    background: #000;

    border-bottom: 5px thick double #b8b8cd;

}

 

.navbar-inverse .navbar-nav .nav-link {

    color: #b8b8cd;

}

 

.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 {

    color: #b8b8cd;

}

 

.navbar .dropdown-menu {

    background-color: #000;

    border: none;

    border: 5px solid #b8b8cd;

    border-top-left-radius: 0;

    border-top-right-radius: 0;

    border-bottom-right-radius: 25px;

    border-bottom-left-radius: 25px;

    margin: 0;

}

 

.navbar .dropdown-menu a {

    color: #b8b8cd;

}

 

.navbar .dropdown-menu .dropdown-header {

    color: #8dc0cd;

}

 

.navbar .dropdown-menu .dropdown-divider {

    background-color: #b8b8cd;

    border-top: 3px solid #b8b8cd;

}

 

.navbar .dropdown-menu a:hover, a:active {

    background-color: rgba(184,184,205,0.5);

    transition-duration: 0.5s;

}

 

.navbar .btn {

    border-radius:10px;

    border-width:0px;

}

 

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {

    background-color: #000;

    color: #98a4cc;

}

 

.footer {

    background: #000;

    border-top: 5px thick double #b8b8cd;

}

 

 

/* Character profile */

.character-profile .profile-info-section .card {

    border-width: 0;

    position:absolute;

    right:0px;

    top:-15px;

    max-width:70%;

    border-bottom-left-radius:50px;

}

 

.character-profile .profile-info-section .card .card-block {

    background-color: #000;

    border-bottom-left-radius:50px;

    border-left: 5px solid #b8b8cd;

    border-bottom: 5px solid #b8b8cd;

}

 

.character-profile .profile-tags-content {

    border-left: 0px solid #552aa4;

}

 

.character-profile .profile-tags-content .badge {

    background-color: #8dc0cd;

}

 

abbr[title] {

    font-style:italic;

}

 

.img-thumbnail {

    background-color: #000;

    border: 5px solid #b8b8cd;

    border-radius: 0.25rem;

    padding: 0.25rem;

    transition: none;

    border-radius:60px;

}

 

.character-profile .profile-name-section .profile-name-info .display-4 {

   background-color:#b8b8cd;

   padding:10px;

   margin-left:-15px;

   border-radius:25px;

   color:#000;

}

 

.gallery-thumb .thumb-image>a>.thumb-sensitive {

    align-items: center;

    background-color: rgba(184,184,205,.5);

    border-radius: 0.25rem;

    color: #000;

    display: flex;

    height: 100%;

    justify-content: center;

    left: 0;

    opacity: 0;

    position: absolute;

    top: 0;

    transition-duration: 0.5s;

    transition-property: opacity;

    width: 100%;

    border-radius:60px;

}

 

.gallery-row .gallery-item .gallery-edit .badge:last-of-type {

    background-color:#8dc0cd;

    border-radius:10px;

    border-width:0px;

}

 

.gallery-row .gallery-item .gallery-edit .badge {

    background-color:#Bb9ce6;

    border-radius:10px;

    border-width:0px;

}

 

.image-gallery.gallery-row {

    justify-content: center;

}

 

.img-thumbnail>img {

    max-width: 100%;

    border-radius:50px;

}

 

 

/* Sidebar */

.sidebar {

    background: #000;

    border-right: 5px solid #b8b8cd;

}

 

.side-nav li.header {

    background-color: #b8b8cd;

    color: #fff;

}

 

.side-nav li.subheader {

    background-color: rgba(184,184,205,.5);

    color: #fff;

}

 

.favorited, .favorited:hover {

    color: #8dc0cd;

}

 

.side-nav li.active>a, .side-nav li.active>a:focus, .side-nav li.active>a:hover, .side-nav li.active>a:link {

    color: #8dc0cd;

}

 

 

/* Character innards */

.form-control:hover {

    background-color: #000;

    border-width: 0px;

    border-radius: 10px;

    color: #a4cbcc;

    display: block;

    font-size: .9rem;

    font-weight: 400;

}

 

.form-control{

    border-width: 0px;

    border-radius: 10px;

    color: #a4cbcc;

    display: block;

    font-size: .9rem;

    font-weight: 400;

}

 

[th-toggle].btn-secondary:before {

    background-color: #a4cbcc;

}

 

[th-toggle].btn-primary:before {

    background-color: #98a4cc;

}

 

.mfp-wrap .image-left-bar {

    background-color: #000;

}

 

.mfp-wrap .mfp-content .mfp-figure figcaption .mfp-bottom-bar {

    border-top: 5px solid #b8b8cd!important;

}

 

.image-bottom-bar h2 {

    border-bottom: 2px solid rgba(184,184,205,0.5);

}

 

.mfp-wrap .mfp-content .mfp-figure {

    background: #fff;

    border-radius:20px;

}

 

.mfp-wrap .mfp-content .mfp-figure .mfp-close {

    color: #b8b8cd;

    transition-duration: 0.5s;

}

 

.mfp-wrap .mfp-content {

    background-color: #1c141d;

    box-shadow: 9px 9px 9px rgba(0,0,0,0.2);

    margin-left: 40px;

    margin-right: 40px;

    min-width: 50%;

}

 

.link-panel:before {

    border: 15px solid #484848;

}

 

.link-character-icon {

    border-radius:50px;

}

 

.alert-success {

    background-color: #9fe0d5;

    border-color: #9fe0d5;

    color: #fff;

}

 

#user-character-selector .user-character-selector-right {

    background-color: #000;

    border-radius:20px;

}

 

#user-character-selector .user-character-selector-right.user-character-selector-header {

    border-bottom: 1px solid #484848;

}

 

#user-character-selector .user-character-selector-left .user-character-selector-header, #user-character-selector .user-character-selector-left.user-character-selector-header {

    border-bottom: 1px solid #e7e7d9;

    border-top-left-radius:20px;

}

 

#user-character-selector .user-character-selector-sidebar .user-character-selector-folder-list {

    border-bottom-left-radius:20px;

}

 

#user-character-selector .user-character-selector-sidebar .user-character-selector-folder-list>.list-group-item>a {

    background-color: transparent;

    color: #b8b8cd;

    padding: 0.75rem 1.25rem;

}

 

#user-character-selector .user-character-selector-sidebar .user-character-selector-folder-list>.list-group-item {

    background-color: #484848;

    border-color: hsla(60,29%,97%,.15);

    border-left: none;

    border-right: none;

    padding: 0;

}

 

.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 {

    border-radius:20px;

}

 

.gallery-row .gallery-item .gallery-edit {

    bottom: 5px;

    position: absolute;

    right: 5px;

}

 

.literature .literature-header-content .literature-header-subinfo {

    border-left: 1px solid #202020;

}

 

 

/* Bootstrap modification */

.btn.btn-default {

    background-color: #b8b8cd;

    border-radius:15px;

}

 

.btn.btn-default {

    background-color: #b8b8cd;

    border-radius:15px;

    border-color:#A39fb9;

    border-width: 0px;

}

 

.btn.btn-default:hover {

    background-color:#625971;

    border-color:#625971;

    border-width: 0px;

    transition: 0.5s;

  }

 

.btn-danger {

    background-color: #Bb9ce6;

    border-color: #Bb9ce6;

    color: #fff;

    border-radius:10px;

    border-width:0px;

}

 

.btn-danger:hover {

    background-color: #6a62aa;

    border-color: #6a62aa;

    color: #fff;

    border-radius:10px;

    border-width:0px;

}

 

.btn-warning {

    background-color: #8879d0;

    border-color: #8879d0;

    color: #fff;

    border-radius:10px;

    border-width:0px;

}

 

.btn-warning:hover {

    background-color: #5656a6;

    border-color: #5656a6;

    color: #fff;

    border-radius:10px;

    border-width:0px;

}

 

.btn-primary {

    background-color: #b8b8cd;

    border-color: #b8b8cd;

    color: #fff;

    border-radius:10px;

    border-width:0px;

}

 

.btn-primary:hover {

    background-color: #948cad;

    border-color: #948cad;

    color: #fff;

    border-radius:10px;

    border-width:0px;

}

 

.btn.btn-secondary {

    background-color: #000;

    border-color: #000;

    color: #fff;

    border-radius:10px;

    border-width:0px;

}

 

.btn.btn-secondary:hover {

    background-color: #000;

    border-color: #000;

    color: #fff;

    border-radius:10px;

    border-width:0px;

}

 

.bg-faded {

    background-color: #000;

}

 

.btn-success {

    background-color: #9fe0d5;

    border-color: #9fe0d5;

    color: #fff;

    border-radius:10px;

    border-width:0px;

}

 

.btn-success:hover {

    background-color: #78b5bb;

    border-color: #78b5bb;

    color: #fff;

    border-radius:10px;

    border-width:0px;

}

 

.text-primary {

    color: #b8b8cd!important;

}

 

.text-secondary {

    color: #98a4cc!important;

}

 

.text-info {

    color: #8dc0cd!important;

}

 

.text-success {

    color: #9fe0d5!important;

}

 

.text-warning {

    color: #8879d0!important;

}

 

.text-danger {

    color: #Bb9ce6!important;

}

 

.bg-primary {

    background-color: #b8b8cd!important;

}

 

.bg-secondary {

    background-color: #98a4cc!important;

}

 

.bg-info {

    background-color: #8dc0cd!important;

}

 

.bg-success {

    background-color: #9fe0d5!important;

}

 

.bg-warning {

    background-color: #8879d0!important;

}

 

.bg-danger {

    background-color: #Bb9ce6!important;

}

 

.bg-dark {

    background-color: #202020!important;

}

 

.bg-light {

    background-color: #D7d2d8!important;

}

 

.btn-info {

    background-color: #8dc0cd;

    border-color: #8dc0cd;

    color: #fff;

    border-radius:10px;

    border-width:0px;

}

 

.btn-info:hover {

    background-color: #6485a2;

    border-color: #6485a2;

    color: #fff;

    border-radius:10px;

    border-width:0px;

}

 

.text-muted {

    color: #6c7187!important;

}

 

.btn-outline-primary.active, .btn-outline-primary:active, .show>.btn-outline-primary.dropdown-toggle {

    background-color: #b8b8cd;

    border-color: #b8b8cd;

    color: #fff;

}

 

.btn-outline-primary:hover {

    background-color: #b8b8cd;

    border-color: #b8b8cd;

    color: #fff;

}

 

.progress {

    background-color: #202020;

}

 

.progress-bar {

    background-color: #b8b8cd;

}

 

.card-outline-primary {

    border-color: #b8b8cd;

}

 

.card-outline-secondary {

    border-color: #98a4cc;

}

 

.card-outline-info {

    border-color: #8dc0cd;

}

 

.card-outline-success {

    border-color: #9fe0d5;

}

 

.card-outline-warning {

    border-color: #8879d0;

}

 

.card-outline-danger {

    border-color: #Bb9ce6;

}

 

.btn-outline-info {

    border-color: #8dc0cd;

    color: #8dc0cd;

}

 

.btn-outline-info.active, .btn-outline-info:active, .show>.btn-outline-info.dropdown-toggle {

    background-color: #8dc0cd;

    border-color: #8dc0cd;

}

 

.btn-outline-success {

    border-color: #9fe0d5;

    color: #9fe0d5;

}

 

.btn-outline-success.active, .btn-outline-success:active, .show>.btn-outline-success.dropdown-toggle {

    background-color: #9fe0d5;

    border-color: #9fe0d5;

}

 

.btn-outline-warning {

    border-color: #8879d0;

    color: #8879d0;

}

 

.btn-outline-warning.active, .btn-outline-warning:active, .show>.btn-outline-warning.dropdown-toggle {

    background-color: #8879d0;

    border-color: #8879d0;

}

 

.btn-outline-danger {

    border-color: #Bb9ce6;

    color: #Bb9ce6;

}

 

.btn-outline-danger.active, .btn-outline-danger:active, .show>.btn-outline-danger.dropdown-toggle {

    background-color: #Bb9ce6;

    border-color: #Bb9ce6;

}

 

 

#footer:after {

    content: 'CSS by maniCARNY';

    color:#fff;

}