monitor-dashboard/src/assets/dashboard-theme/structure.css

154 lines
3.4 KiB
CSS
Raw Normal View History

:root {
--sidebar-width: 320px;
--sidebar-mini-width: 130px;
--sidebar-font-size: 14px;
--header-height: 100px;
--background-color: #F9FBFC;
}
#sidebar_main .badge {
height: 59px;
position: absolute;
top: 0;
left: -5px;
z-index: 1;
background-color: transparent;
display: block !important;
}
#sidebar_main #sidebar_content {
width: var(--sidebar-width);
position: fixed;
height: 100%;
top: 0;
bottom: 0;
left: 0;
z-index: 981;
background: #fff;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition-property: width;
}
.sidebar_main_swipe.sidebar_mini #sidebar_switcher_toggle {
left: var(--sidebar-mini-width);
}
.sidebar_main_swipe #sidebar_switcher_toggle {
left: var(--sidebar-width);
}
#sidebar_main .menu_section {
min-height: 30vh;
}
#sidebar_main .menu_section ul:not(.uk-dropdown-nav) > li, #sidebar_main .special_section ul:not(.uk-dropdown-nav) > li {
padding: 5px 0;
}
#sidebar_main .menu_section ul:not(.uk-dropdown-nav) > li > a, #sidebar_main .special_section ul:not(.uk-dropdown-nav) > li > a {
display: block;
font-size: var(--sidebar-font-size);
color: rgba(var(--text-color), 0.5);
}
#sidebar_main .menu_section ul:not(.uk-dropdown-nav) > li:hover > a, #sidebar_main .special_section ul:not(.uk-dropdown-nav) > li:hover > a {
color: var(--secondary-color);
}
#sidebar_main .menu_section ul:not(.uk-dropdown-nav) li.uk-active > a, #sidebar_main .special_section ul:not(.uk-dropdown-nav) > li.uk-active > a {
color: var(--primary-color);
font-weight: 700;
}
#sidebar_switcher_toggle {
top: 50%;
transform: translateY(-50%);
position: fixed;
background: #ffffff;
border: 1px solid rgb(var(--text-color));
border-left: 0;
cursor: pointer;
padding: 0 4px;
width: 10px;
height: 66px;
z-index: 981;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition-property: left;
}
.sidebar_main_swipe #page_content {
padding-left: var(--sidebar-width);
padding-top: var(--header-height);
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
}
/*Sidebar close*/
.sidebar_main_swipe:not(.sidebar_main_active):not(.sidebar_mini) #page_content {
padding-left: 0;
}
.sidebar_main_swipe:not(.sidebar_main_active):not(.sidebar_mini) #sidebar_main #sidebar_content {
display: none;
width: 0;
}
.sidebar_main_swipe:not(.sidebar_main_active):not(.sidebar_mini) #sidebar_switcher_toggle {
left: 10px;
}
/*Sidebar mini*/
.sidebar_main_swipe.sidebar_mini #page_content {
padding-left: var(--sidebar-mini-width);
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
}
.sidebar_mini #sidebar_main #sidebar_content {
width: var(--sidebar-mini-width);
}
#sidebar_main #sidebar_content {
border-right: 1px solid rgb(var(--text-color));
}
#page_content {
min-height: calc(100vh - var(--header-height));
background-color: var(--background-color);
}
#page_content_header + #page_content_inner {
margin-top: 100px;
}
#page_content_header {
position: fixed;
background: var(--background-color);
top: var(--header-height);
z-index: 980;
width: 100%;
height: 100px;
}
#page_content_inner {
padding: 90px;
}
navbar > * {
background-color: var(--background-color);
}