@import "fonts/fonts.css"; /* Define the following variables on your project css file. --sidebar-font-size: 16px; --header-height: 70px; --list-card-max-width: 1220px; --primary-color: #0d47a1; --secondary-color: #1CA9D5; */ /* Global css*/ html .dashboard { color: black; } .dashboard .clickable { cursor: pointer !important; } .dashboard #hide_controls #toggle *, .dashboard #header_main a, .dashboard #sidebar_main a { user-select: none; -webkit-user-select: none; -moz-user-select: none; } /* On link hover, his items with this class will be displayed*/ .dashboard li > a .onHover { display: none; } .dashboard li > a:hover .onHover, .dashboard li > a .onHover.uk-open { display: block; } /* Sidebar with hide controls*/ .dashboard #sidebar_main { display: flex; flex-direction: column; } .dashboard #sidebar_main .sidebar_main_header { height: var(--header-height); border-bottom: none; } .dashboard #sidebar_main .sidebar_main_header .logo { height: calc(var(--header-height) - 20px); } .dashboard .sidebar_main_active #sidebar_main .menu_section { overflow: auto; flex: 1; margin-bottom: 45px; } .dashboard .sidebar_mini #sidebar_main .menu_section>ul>li>ul { margin-top: var(--header-height); } .dashboard .sidebar_main_active .submenu_trigger ul { display: block; } .dashboard #sidebar_main .sidebar_main_header .portalLogo{ background: url("~src/assets/logo-large-monitor.png") no-repeat; background-size: contain ; margin-left: 35px; margin-top: 5px; } .dashboard .sidebar_mini #sidebar_main .sidebar_main_header .portalLogo{ background: url("~src/assets/logo-small-monitor.png") no-repeat !important; background-size: 50px 50px !important; /* background-size: contain !important; margin-left: 5px;*/ } .dashboard #hide_controls { bottom: 0; left: 0; position: fixed; z-index: 1205; height: 45px; width: 0; background: rgba(255, 255, 255, 0); } .dashboard .sidebar_main_active #hide_controls { /*background: #F0F4F2;*/ /*border-top: 1px solid rgba(0,0,0,.30);*/ width: 319px; transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1); -moz-transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1); /*border-right: 1px solid rgba(0,0,0,.12);*/ } @media only screen and (max-width: 767px) { .dashboard .sidebar_main_active #hide_controls { width: 280px; } } .dashboard #hide_controls #toggle { color: #646a6f; margin-left: 5px; margin-top: 5px; cursor: pointer; width: max-content; } /* .dashboard #hide_controls #toggle:hover, .dashboard #hide_controls #toggle:not(.sidebar_main_open) { color: var(--primary-color); } .dashboard #hide_controls:hover #toggle:hover .material-icons, .dashboard #hide_controls #toggle:not(.sidebar_main_open) .material-icons { color: var(--primary-color); border: var(--primary-color) solid 1px; }*/ .dashboard #hide_controls #toggle .material-icons { transform: rotateY(0deg); transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); -webkit-transform: rotateY(0deg); -webkit-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); -moz-transform: rotateY(0deg); -moz-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); background: rgba(0, 0, 0, 0); border-radius: 50%; border: rgba(0, 0, 0, 0) solid 1px; text-align: center; width: 26px !important; height: 26px !important; line-height: 26px !important; font-size: 24px; vertical-align: -7px; } .dashboard .sidebar_main_active #hide_controls #toggle .material-icons { transform: rotateY(180deg); transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); -webkit-transform: rotateY(180deg); -webkit-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); -moz-transform: rotateY(180deg); -moz-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); } .dashboard .header_full #sidebar_main .sidebar_main_header { min-height: auto; } .dashboard #sidebar_main .menu_section > ul > li > a { /*font-weight: 700;*/ overflow: unset; } .dashboard #sidebar_main .menu_section > ul > li:not([class*=md-bg-]) > a:hover { /*background-color: #F0F0F0;*/ color: var(--portal-main-color); } .dashboard #sidebar_main .menu_section > ul > li > a > .menu_icon { width: 30px; } .dashboard #sidebar_main .menu_section > ul > li > a > .menu_on_hover { width: 40px; } .dashboard #sidebar_main .menu_section > ul > li > ul > li > a:hover { background-color: #F0F0F0; margin-right: 5px; } .dashboard #sidebar_main .menu_section > ul li > a { font-size: var(--sidebar-font-size); color: rgba(0, 0, 0, 0.7); } .dashboard #sidebar_main .menu_section > ul li > a > .menu_on_hover { width: 40px; } .dashboard #sidebar_main .menu_section .uk-dropdown { min-width: 150px; } .dashboard #sidebar_main .menu_section .uk-dropdown > ul { display: block; margin: 0; text-align: start; } .dashboard #sidebar_main .menu_section .uk-dropdown > ul > li > a { padding: 5px 10px; color: black !important; } .dashboard #sidebar_main .menu_section > ul ul > li > a { line-height: 20px; } .dashboard #sidebar_main .menu_section > ul li > a { display: flex; align-items: center; } /* Header */ body.dashboard { padding-top: var(--header-height); } .dashboard .header_full #sidebar_main { top: var(--header-height); } .dashboard #header_main { -webkit-box-shadow: none; box-shadow: none; height: var(--header-height); } .dashboard #header_main > .uk-navbar { height: var(--header-height); } .dashboard #header_main > .uk-navbar .user_actions > li > * { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; box-sizing: border-box; min-height: var(--header-height); } .dashboard #header_main #sidebar_main_toggle { margin: calc(var(--header-height) - 48px) 0; } .dashboard #header_main .material-icons { color: white; } /* Card */ .dashboard .md-card .md-card-content { color: rgba(0, 0, 0, 0.8); } .dashboard .md-card .md-card-toolbar .md-card-toolbar-actions { color: rgba(0, 0, 0, 0.8); } .dashboard .md-card .md-card-toolbar .md-card-toolbar-heading-text { font-weight: 700; float: none; } /* Breadcrumb*/ .dashboard #breadcrumbs { background: inherit; } .dashboard #breadcrumbs > li a, .dashboard #breadcrumbs > li span { color: rgba(0, 0, 0, 0.4); font-size: 12px; line-height: 20px; } .dashboard #breadcrumbs > li + li a:before, .dashboard #breadcrumbs > li + li span:before { font-weight: 400 !important; margin-top: -9px; font-size: 16px; } /* Notification */ /* Change z-index, because of sidebar's and header's z-index are bigger that default */ .dashboard .uk-notification { z-index: 2000; } .dashboard .uk-notification-message { border-radius: 3px; font-size: 14px; } .dashboard .uk-notification-message.uk-notification-message-success { background-color: #e0f0d5; color: #669a59; } .dashboard .uk-notification-message.uk-notification-message-danger { background-color: #f2dede; color: #b25654; } .dashboard .uk-notification-close.uk-close::after { font-size: 16px; } .dashboard .uk-notification-close.uk-icon.uk-close svg { display: none; } /* Form */ .dashboard .uk-form-stacked .uk-form-label { font-size: 14px; font-weight: 700; padding: 0; margin-top: 5px; } .dashboard .md-input { color: black; } /* Modal*/ .dashboard .uk-modal .large-modal { width: 800px; } .dashboard .uk-modal .uk-close::after { display: none; } /* Sortable*/ .dashboard .uk-sortable > * { cursor: move; } .dashboard .uk-sortable-drag .md-card.md-card-hover { -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); } .dashboard .uk-sortable-drag { overflow: unset !important; } .uk-drag .dashboard .disable-sortable { pointer-events: none; } .dashboard .uk-sortable .uk-sortable-nodrag { cursor: default; } /* List view*/ .dashboard .list-view { max-width: 1220px; } /* Section Tools*/ .dashboard .section { padding-top: 10px; padding-bottom: 10px; padding-right: 10px; border: rgba(0, 0, 0, 0) solid 1px; position: relative; } .dashboard .section .tools { position: absolute; top: 0; left: 50%; transform: translate(-50%, -100%); display: none; } .dashboard .section:not(.list-view) { border: white solid 1px; } .dashboard .section:not(.list-view):hover { border: var(--secondary-color) solid 1px; } .dashboard .section:not(.list-view):hover .tools { display: block; } .dashboard .section:hover .tools .md-btn-group .md-btn-mini { border-bottom-left-radius: 0; padding: 0; -webkit-box-shadow: none; box-shadow: none; margin-left: -1px !important; } .dashboard .section:hover .tools .md-btn-group .md-btn-mini:first-child { border-top-left-radius: 5px; } .dashboard .section:hover .tools .md-btn-group .md-btn-mini:last-child { border-top-right-radius: 5px; } .dashboard .section .md-btn { background-color: var(--secondary-color); width: 20px; color: white; } .dashboard .section:hover .tools .md-btn-group .md-btn-mini * { color: white; } .dashboard .section:hover .tools .md-btn-group::before { content: ""; border-bottom: 24px solid var(--secondary-color); border-left:solid 12px transparent; width: 0; position: absolute; top: 0; bottom: 0; left: -12px; } .dashboard .section:hover .tools .md-btn-group::after { content: ""; border-bottom: 24px solid var(--secondary-color); border-right: solid 12px transparent; width: 0; position: absolute; top: 0; bottom: 0; right: -11px; } /* New section*/ .dashboard .new-section { padding-top: 10px; padding-bottom: 10px; padding-right: 10px; border: #cecece dashed 2px; background-color: white; min-height: 100px; position: relative; } .dashboard .new-section .tools { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .dashboard .new-section .tools .md-btn { background-color: var(--secondary-color); position: relative; min-width: 40px; min-height: 40px; border-radius: 50%; } .dashboard .new-section .tools .md-btn .material-icons { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; } /* Dropdown*/ .dashboard .uk-dropdown { opacity: 1; transform: none; -webkit-transform: none; min-width: 160px; padding: 15px; } .dashboard .uk-dropdown .uk-nav.uk-dropdown-nav > li > a { padding: 5px 10px; } /* Badge */ .dashboard .badge { height: 59px; position: absolute; top: 0; left: 0; z-index: 1; } .dashboard .badge.small-badge { height: 70px; } .dashboard .badge.right-badge { top: 0; left: auto; transform: rotate(90deg); right: 0; } .dashboard .default.uk-badge { padding: 1px 15px; height: auto; position: absolute; left: -5px; top: 0; background-color: var(--primary-color); } .dashboard { background-color: white; } .dashboard #sidebar_main{ /*background-color: #F0F4F2;*/ } .dashboard .md-card { background: #FFFFFF no-repeat padding-box; /* box-shadow: 1px 10px 12px #00000026; border: 1px solid #E0E0E0;*/ border-radius: 5px; opacity: 1; } .dashboard [class*="uk-icon-"][class*="uk-button-"]:not(.uk-button-default) { color: #fff; } .selectedFilterLabel { /*background: var(--portal-main-color) !important;*/ color: #424242 !important; padding: 6px 10px !important; border-radius: 5px !important; } /* .selectedFilterLabel:hover { background: var(--portal-dark-color) !important; } .selectedFilterLabel .uk-link-text { color: var(--portal-main-contrast) !important; } .selectedFilterLabel .material-icons{ color: var(--portal-main-contrast) !important; }*/ #style_switcher_toggle{ left: -36px !important; width: 36px !important; } .uk-grid.uk-grid-small > .uk-grid-margin{ margin-top: 15px !important; }