nineskeletor/assets/styles/app.css

222 lines
3.5 KiB
CSS
Executable File

/* COLOR */
body {
background-color: var(--colorbgbodylight);
color: var(--colorftbodylight);
}
.header {
color: var(--colorfttitledark);
}
.header h1, .header a, #sidebar a, #sidebar hr{
color: var(--colorfttitledark);
}
.header a:hover, #sidebar a:hover {
color: var(--colorfttitledark);
text-decoration:none;
}
.navbar {
background-color: var(--colorbgbodydark);
}
.table,
.table-hover > tbody > tr:hover > *,
.table-striped > tbody > tr:nth-of-type(odd) > * {
color: var(--colorftbodylight);
}
/* FONT */
body {
font-family: var(--fontbody);
}
h1, h2, h3, .navbar-brand, .card-header, .modal-header h4, .widgetheader .title {
font-family: var(--fonttitle);
color: var(--colorfttitlelight);
}
h1 { font-size: var(--fontsizeh1); }
h2 { font-size: var(--fontsizeh2); }
h3 { font-size: var(--fontsizeh3); }
h4 { font-size: var(--fontsizeh4); }
.card-header .custom-control, .grid-item-title h2 {
font-family: var(--fontbody);
}
/* GLOBAL */
html, body {
height:100%;
}
a {
text-decoration: none;
cursor: pointer;
color: var(--colorfttitlelight);
}
a:hover {
color: var(--colorfttitlelight-darker);
}
main {
display:flex;
overflow:hidden;
}
.dataTable {
border-style: solid none solid solid;
border-width: 1px;
}
.avatar {
width:30px;
height:30px;
background-color: var(--colorbgbodydark);
border-radius: 100%;
}
.select2,.select2-container .select2-search--inline {
width:100%!important;
}
/* HEADER */
.header h1 {
text-transform: uppercase;
padding-left: 10px;
padding-top: 15px;
margin: 0px;
line-height:var(--lineheighth1);
}
.header h1 small {
font-size:60%;
}
#header .nav-link {
padding:0.5rem;
}
@media (max-width: 991px) {
#header {
display:none !important;
}
}
/* NAVBAR */
.nav {
vertical-align: middle;
}
.navbar-logo {
padding: 0 0 0 0.5rem !important;
}
.navbar-logo img{
height:20px;
}
.navbar i {
font-size: 20px;
min-width: 30px;
height:20px;
}
/* MENU */
#menu {
height:50px;
padding: 0px 0px 0px 10px !important;
}
#menu .navbar-logo {
margin-right: 10px;
}
@media (max-width: 991px) {
#menu {
display:flex !important;
height: auto;
padding: 0px !important;
}
.navbar-logo {
padding: 10px 5px 10px 10px !important;
}
.navbar-logo img {
height:40px;
}
.navbar i {
font-size: 20px;
min-width: 30px;
height:20px;
}
#switchHeader {
display:none;
}
}
/* SIDEBAR */
#sidebar {
background-color: var(--colorbgbodydark);
width: 100%;
max-width:300px;
overflow-y: auto;
}
#sidebar span {
padding-left: 5px;
}
#sidebar .nav-pills .nav-link {
border-radius:0px;
}
#sidebar .nav-pills .nav-link.active {
background-color: var(--colorbgbodydark-darker);
}
#sidebar .nav-link-items {
display: none;
}
#sidebar .nav-link-item {
padding-left: 2em;
}
@media (max-width: 991px) {
#sidebar {
max-width:65px;
}
#sidebar span {
display: none;
}
#sidebar i {
font-size: 25px;
}
#sidebar .nav-link-item {
padding-left: 1rem;
}
#sidebar .nav-link-section {
display:block;
margin-bottom: 10px;
}
#sidebar .nav-link-title {
display:none;
}
#sidebar .nav-link-items {
display:block !important;
border-bottom: 1px solid var(--colorfttitledark);
}
}
/* PAGE */
#page {
overflow-y: auto;
width:100%;
}