Scribd
Upload
25 views6 pages

Blackv 2

The document contains CSS code for styling various elements on a dark theme website. It defines colors, backgrounds, borders and other styles for elements like navbars, cards, buttons, tables and more to create a dark color scheme.

Uploaded by

joaovctor20022004
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
25 views6 pages

Blackv 2

The document contains CSS code for styling various elements on a dark theme website. It defines colors, backgrounds, borders and other styles for elements like navbars, cards, buttons, tables and more to create a dark color scheme.

Uploaded by

joaovctor20022004
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 6

html body.navbar-sticky .app-content .

content-wrapper {
padding: 30px 25px 5px 25px;
margin: 60px 20px 20px 20px;
background-color: #262626;
border-radius: 30px;
}
.badge badge-demo bg-label-danger ms-auto {
background-color: #ff6300;
font-size: 0px;
}
.rounded-pill {
border-radius: 0px;
border: 0px;

}
d-flex align-items-center align-self-start{
color: #26262600;
margin-left: 20px;
margin-bottom: 1px;
font-size: 0px;
}
body.dark-layout .main-menu .shadow-bottom {
background: linear-gradient(180deg, #262626 44%, #262626 73%, #2c303c00);
}
.dhr-marquee {
color: #fff;
font-size: 11px;
font-weight: 900;
letter-spacing: .6px;
line-height: 50px;
height: 36px;
margin: 0px;
padding: 0px;
display: inline-block;
}

body.dark-layout .card .card-body {


color: #e9e9e9;
background-color: #262626;
border-color: #26262600 !important;
border-radius: 25px;
margin-top: 20px;
}

body.dark-layout .btn[class*="btn-"] {
color: #fff !important;
border-color: #262626 !important;
background-color: #FF7300 !important;
border-radius: 20px;

.card .card-header .card-title {


margin-bottom: 0;
color: #fff;
}

.header-navbar .navbar-wrapper {
width: 100%;
background: #dee2e7;
}

body.dark-layout .header-navbar .user-name {


color: #262626 !important;
}

body.dark-layout input.form-control:not(:focus), body.dark-layout .custom-file-


label:not(:focus), body.dark-layout textarea.form-control:not(:focus) {
border-color: #262626;
border-radius: 30px;
}

body.dark-layout .card .card-header, body.dark-layout .card .card-footer {


color: #8a99b5;
background-color: #26262600;
border-color: #262626 !important;
}

.table {
width: 100%;
color: #262626;
background-color: #1a233a;
border-radius: 30px;
}

body.dark-layout .card {
background-color: #272e4800;
box-shadow: none;
border-radius: 30px;
border: 1px solid #5a8def00 !important;
}

@media (min-width: 992px)


body.vertical-layout.vertical-menu-modern .main-menu.menu-dark {
border-right: 1px solid #26262600;
}

.header-navbar.fixed-top {
left: 260px;
position: fixed;
background-color: #1a233a !important;
}

.header-navbar .navbar-wrapper {
width: 100%;
background: #1a233a;
}

@media (max-width: 1200px) {


.header-navbar.fixed-top {
left: 0 !important;
}
}

avatar {
white-space: nowrap;
background-color: #c3c3c3;
border-radius: 50%;
position: relative;
cursor: pointer;
color: #262626;
display: inline-flex;
font-size: 0.8rem;
text-align: center;
vertical-align: middle;
margin: 0;
}

body.dark-layout .nav-tabs ~ .tab-content, body.dark-layout .nav ~ .tab-content,


body.dark-layout .pills-stacked ~ .tab-content {
background-color: #1a233a;
}

.card .card-header ~ .card-content .card-body {


padding-top: 25px;
}

body.dark-layout ul li {
color: #8a99b5 !important;
border-radius: 25px !important;
}

body.dark-layout select.form-control, body.dark-layout .custom-select {


background-color: #1a233a;
color: #8a99b5;
border-color: #262626;
border-radius: 25px;
}
.text-success {
color: #FF7300 !important;
}
.bg-success {
background-color: #FF7300 !important;
border-radius: 10px;
}
a.bg-success:hover, a.bg-success:focus, button.bg-success:hover, button.bg-
success:focus {
background-color: #262626 !important;
}
body.dark-layout p, body.dark-layout small, body.dark-layout span, body.dark-layout
label {
color: #fff;
}
body.dark-layout .main-menu-content .navigation-main {
background-color: #262626;
}
body.dark-layout {
background-color: #000000d9;
}
body.dark-layout h1, body.dark-layout h2, body.dark-layout h3, body.dark-layout h4,
body.dark-layout h5, body.dark-layout h6 {
color: #fff;
}
.text-muted {
color: #fff !important;
}
body.dark-layout .divider .divider-text {
background-color: transparent;
color: #fff;
}
.main-menu.menu-dark .navigation > li.nav-item.open.has-sub.open, .main-menu.menu-
dark .navigation > li.nav-item.open.has-sub.sidebar-group-active, .main-menu.menu-
dark .navigation > li.nav-item.sidebar-group-active.has-sub.open, .main-menu.menu-
dark .navigation > li.nav-item.sidebar-group-active.has-sub.sidebar-group-active {
border-radius: 0.267rem;
border: 1px solid #000000;
background-color: #ff7300;
transition: none;
}
body.dark-layout .main-menu-content .navigation-main .nav-item i {
color: #262626;
}
a {
color: #5A8DEE;
text-decoration: none;
background-color: #ff730000;
}
body.dark-layout input.form-control, body.dark-layout .custom-file-label,
body.dark-layout textarea.form-control {
background-color: #dfe3e7;
color: #000000;
}
body.dark-layout input.form-control:not(:focus), body.dark-layout .custom-file-
label:not(:focus), body.dark-layout textarea.form-control:not(:focus) {
border-color: #ff7300;
border-radius: 30px;
}
body.dark-layout .divider .divider-text {
background-color: #6f111100;
color: #fff;
}
.divider.divider-primary .divider-text:before, .divider.divider-primary .divider-
text:after {
border-color: #262626 !important;
}
.divider.divider-success .divider-text:before, .divider.divider-success .divider-
text:after {
border-color: #262626 !important;
}
.table {
width: 100%;
color: #262626;
background-color: #262626;
border-radius: 30px;
}
body.dark-layout .table tbody td, body.dark-layout .table tbody th {
border-color: #262626;
color: #fff;
}
body.dark-layout .table thead th {
border-color: #262626;
color: #fff;
}
body.dark-layout .header-navbar .navbar-container .nav .nav-item .nav-link i {
color: #ff7300;
}
.header-navbar .navbar-wrapper {
width: 100%;
background: #262626;
}
body.dark-layout select.form-control, body.dark-layout .custom-select {
background-color: #dfe3e7;
color: #000000;
border-color: #262626;
border-radius: 25px;
}
.primary {
color: #ff7300 !important;
}
body.dark-layout .main-menu {
background-color: #262626 !important;
}
.text-primary {
color: #262626 !important;
}
body.dark-layout .modal .modal-header {
background-color: #FF7300;
border-bottom: 1px solid #262626;
}
.text-danger {
color: #ff0002 !important;
}
.text-danger {
color: #000000 !important;
}
.badge {
color: #fff;
font-family: "Rubik", Helvetica, Arial, serif;
background-color: #f10001;
text-transform: uppercase;
}
.badge.badge-danger {
background-color: #fb0001;
}
body.dark-layout .pagination .page-item .page-link {
border: 2px solid #fff;
border-right: 0;
border-left: 0;
color: #fff;
}
.pagination .page-item.active .page-link, .pagination .page-item.active .page-
link:hover {
border-radius: 0.267rem;
background-color: #ff7300 !important;
color: #262626;
}
body.dark-layout .modal .modal-content, body.dark-layout .modal .modal-body,
body.dark-layout .modal .modal-footer {
background-color: #dfe3e7;
}
body.dark-layout .dropdown-menu {
background-color: #262626;
border: 1px solid #ff7300;
}
body.dark-layout .dropdown-menu .dropdown-item:hover, body.dark-layout .dropdown-
menu .dropdown-item:focus {
background: #ff7300;
}
body.dark-layout .dropdown-menu .dropdown-item {
color: #fff;
}
body.dark-layout .nav-tabs ~ .tab-content, body.dark-layout .nav ~ .tab-content,
body.dark-layout .pills-stacked ~ .tab-content {
background-color: #262626;
}
body.dark-layout code {
background-color: #ff7300;
}
code {
padding: .1rem .4rem;
font-size: 90%;
color: #262626;
background-color: #000000;
border-radius: 0.1335rem;
}
.alert.alert-success {
background: #FF7300 !important;
color: #fff !important;
border: none;
}
.ace-twilight {
background-color: #272e48;
color: #262626;
}
.ace-twilight .ace_gutter {
background: #000000;
color: #262626;
}
body.dark-layout .divider .divider-text {
background-color: #ff7300;
border-top-left-radius: 25px;
color: #fff;
border-top-right-radius: 25px;
}
body.dark-layout .dropdown-menu:before {
background: #262626;
border-top: 1px solid #262626;
border-left: 1px solid #262626;
}
badge badge-demo bg-label-danger ms-auto {
color: #262626; font-size: 0px; background-color: #262626;
}

You might also like