You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
744 lines
14 KiB
744 lines
14 KiB
/* |
|
DEMO STYLE |
|
*/ |
|
|
|
@import "/css/fonts/montserrat.css"; |
|
@import url("https://use.fontawesome.com/releases/v6.1.0/js/all.js"); |
|
|
|
html, body { |
|
font-family: 'Montserrat', serif; |
|
height: 100%; |
|
z-index:1; |
|
} |
|
|
|
.enterblock { |
|
width: 100%; |
|
max-width: 500px; |
|
height: 100%; |
|
margin: auto; |
|
position: absolute; |
|
top: 0; left: 0; bottom: 0; right: 0; |
|
} |
|
|
|
.custom-font{ |
|
font-family: Montserrat, serif; |
|
} |
|
|
|
.obst_place { |
|
cursor: pointer; |
|
} |
|
|
|
.obst_place:hover { |
|
cursor: pointer; |
|
background-color: #ebd0f7 !important; |
|
color: #6e3288 !important; |
|
} |
|
.template_list_visit { |
|
color: #999 |
|
} |
|
.template_list_visit.active { |
|
color: #000 |
|
} |
|
|
|
.obst_place.active { |
|
background-color: #AF80C3 !important; |
|
color: #fff !important; |
|
} |
|
|
|
.absolute-bottom{ |
|
position: fixed; |
|
bottom: 3rem!important; |
|
right: 3rem!important; |
|
padding-top: 2px; |
|
padding-bottom: 2px; |
|
z-index: 999; |
|
background-color: rgba(255,255,255,0.0); |
|
} |
|
|
|
|
|
|
|
.box-ai { |
|
border-bottom: 1px solid #E8F0FE !important; |
|
border-right: 1px solid #E8F0FE !important; |
|
background-color: #eaf2ff6e; |
|
border-bottom-right-radius: 2rem !important; |
|
position: relative; |
|
top: -30px; |
|
} |
|
|
|
|
|
|
|
.page-title{ |
|
color: #6e3288; |
|
font-weight: 400; |
|
} |
|
|
|
|
|
/* |
|
VERTICAL NAVBAR |
|
TODO: Добавить всем элементам класс-указатель, что они относятся к sidebar |
|
*/ |
|
.cont{ |
|
background-color: #fff; |
|
} |
|
#logout_btn{ |
|
text-decoration: none; |
|
color: #6e3288; |
|
} |
|
@media (max-width: 992px) { |
|
#app_navigation .sidebar-toggler |
|
{ |
|
display: none !important; |
|
} |
|
.cont{ |
|
margin-left: 0px !important; |
|
} |
|
.sidebar.navbar-brand { |
|
color: #6e3288 !important; |
|
background-color: white; |
|
margin-left: 10px; |
|
} |
|
.sidebar.navbar { |
|
width: 100% !important; |
|
box-shadow: 0 .1rem .2rem rgba(0,0,0,.1)!important; |
|
} |
|
.sidebar.navbar-nav{ |
|
display: grid; |
|
grid-template-columns: repeat(3, auto); |
|
grid-gap: 10px; |
|
grid-auto-flow: row; |
|
padding-left: 5px; |
|
padding-right: 5px; |
|
} |
|
.sidebar.nav-item |
|
{ |
|
width: 80%; |
|
text-align: center; |
|
position: relative; |
|
display: flex; |
|
} |
|
.sidebar.nav-item-text{ |
|
opacity: 100% !important; |
|
} |
|
.currentuser-span{ |
|
opacity: 100% !important; |
|
} |
|
.navbar-brand{ |
|
font-size: 1.25rem !important; |
|
padding-top: 0px !important; |
|
} |
|
.sidebar.nav-link |
|
{ |
|
color: #AF80C3 !important; |
|
margin: auto; |
|
display: flex; |
|
flex-direction: column-reverse; |
|
} |
|
.sidebar.nav-item.active .sidebar.nav-link |
|
{ |
|
color: white !important; |
|
z-index: 2; |
|
font-weight: bold; |
|
font-weight: bold; |
|
} |
|
.sidebar.nav-item.active{ |
|
background-color: #50398C; |
|
border-radius: 20px 20px 20px 20px; |
|
height: 70px; |
|
} |
|
} |
|
|
|
@media (min-width: 992px) { |
|
.cont{ |
|
margin-left: 250px; |
|
} |
|
|
|
.sidebar.navbar, |
|
.sidebar.navbar-collapse { |
|
flex-direction: column; |
|
|
|
} |
|
.sidebar.navbar-expand-lg .navbar-nav { |
|
flex-direction: column; |
|
} |
|
.sidebar.navbar-nav{ |
|
flex-direction: column !important; |
|
text-align: end; |
|
align-items: flex-end; |
|
grid-template-columns: repeat(3, auto); |
|
grid-gap: 10px; |
|
grid-auto-flow: row; |
|
padding-left: 5px; |
|
padding-right: 0px; |
|
} |
|
.sidebar.navbar { |
|
width: 250px; |
|
height: 100vh; |
|
min-height: 100%; |
|
align-items: flex-start; |
|
position: fixed !important; |
|
} |
|
.sidebar.navbar-brand { |
|
color: #6e3288 !important; |
|
font-weight: 500 !important; |
|
text-align: center; |
|
height: 70px; |
|
padding-top: 30px !important; |
|
background-color: white; |
|
width: 100%!important; |
|
} |
|
.sidebar.navbar-collapse{ |
|
align-items: start !important; |
|
width: 100%; |
|
} |
|
.sidebar.nav-item |
|
{ |
|
width: 80%; |
|
text-align: end; |
|
position: relative; |
|
display: flex; |
|
} |
|
.sidebar.nav-link |
|
{ |
|
color: #AF80C3 !important; |
|
margin-left: 20px; |
|
} |
|
.sidebar.nav-item.active .sidebar.nav-link |
|
{ |
|
color: white !important; |
|
z-index: 2; |
|
margin-left: 30px; |
|
margin-top: auto; |
|
margin-bottom: auto; |
|
font-weight: bold; |
|
font-weight: bold; |
|
} |
|
.sidebar.nav-item.active{ |
|
background-color: #50398C; |
|
border-radius: 20px 0 0 20px; |
|
height: 70px; |
|
} |
|
.sidebar.nav-item:not(.active):hover{ |
|
font-weight: bold; |
|
color: #6e3288 !important; |
|
} |
|
.sidebar.nav-item:not(.active):hover .icon-item{ |
|
color: #6e3288; |
|
} |
|
.sidebar.nav-item:not(.active):hover .sidebar.nav-link{ |
|
color: #6e3288 !important; |
|
} |
|
.sidebar.nav-item-text{ |
|
white-space: nowrap !important; |
|
} |
|
.icon-item{ |
|
color: #A83971; |
|
line-height: 40px; |
|
width: 50px; |
|
left: -25px; |
|
position: absolute; |
|
display: flex; |
|
top: 0px; |
|
} |
|
.sidebar.nav-item.active.active .icon-item{ |
|
height: 50px; |
|
width: 50px; |
|
background: #A83971; |
|
z-index: 2; |
|
top: 10px; |
|
left: -25px; |
|
position: absolute; |
|
border-radius: 15px 15px 0px 15px; |
|
display: flex; |
|
align-items: center; |
|
color: #C6CB45; |
|
} |
|
.sidebar-toggler |
|
{ |
|
position: absolute; |
|
right: 10px; |
|
bottom: 10px; |
|
} |
|
/* #logout_btn{ |
|
display: none; |
|
}*/ |
|
} |
|
/* |
|
PAGE NAVIGATION |
|
*/ |
|
|
|
.p-link{ |
|
color: black; |
|
font-weight: 500; |
|
} |
|
.p-link.active{ |
|
color: #50398C; |
|
border-bottom: 3px solid #50398C; |
|
font-weight: 500; |
|
} |
|
|
|
|
|
/* |
|
PLUS DROPDOWN |
|
*/ |
|
.plus-item{ |
|
height: 50px; |
|
width: 50px; |
|
background: #866EC6; |
|
border-radius: 15px 15px 0px 15px; |
|
align-items: center; |
|
color: #FFF; |
|
align-items: center; |
|
display: flex; |
|
} |
|
.plus-item-dashboard { |
|
height: 37px; |
|
width: 37px; |
|
background: #fff; |
|
border-radius: 50%; |
|
align-items: center; |
|
color: #6E3288; |
|
align-items: center; |
|
display: flex; |
|
/* padding-left: 3px; |
|
padding-top: 3px; */ |
|
} |
|
.plus-item-sm{ |
|
height: 40px !important; |
|
width: 40px !important; |
|
border-radius: 10px 10px 0px 10px; |
|
} |
|
.plus-dropdown{ |
|
background-color: rgba(255, 255, 255, .50) !important; |
|
backdrop-filter: blur(5px) !important; |
|
} |
|
|
|
.plus-dd-item:hover{ |
|
background-color: white !important; |
|
color: #6e3288 !important; |
|
font-weight: 500; |
|
} |
|
.plus-dd-item{ |
|
color: #6e3288 !important; |
|
} |
|
|
|
/* |
|
Notifications_menu |
|
*/ |
|
.notifications-menu{ |
|
display: flex; |
|
height: 50px; |
|
width: 50px; |
|
background: #C6CB45; |
|
border-radius: 15px 15px 15px 0px; |
|
align-items: center; |
|
color: #FFF; |
|
align-items: center; |
|
} |
|
|
|
/* |
|
GLASS MODAl |
|
*/ |
|
/* |
|
.glass-modal .modal-dialog .modal-content{ |
|
background-color: rgba(255, 255, 255, .5); |
|
backdrop-filter: blur(5px) !important; |
|
} |
|
.modal-backdrop { |
|
background-color: rgba(255, 255, 255, 0.15) !important; |
|
backdrop-filter: blur(5px) !important; |
|
opacity: 95% !important; |
|
} |
|
*/ |
|
|
|
.camera-item{ |
|
width: 100%; |
|
position: fixed; |
|
bottom: 0px; |
|
z-index: 1; |
|
left: 0px; |
|
height: 80px; |
|
|
|
background-color: rgba(150, 150, 150, 0.15) !important; |
|
backdrop-filter: blur(5px) !important; |
|
|
|
} |
|
|
|
.camera-plus{ |
|
height: 60px; |
|
width: 60px; |
|
background: #fff; |
|
border: 2px solid #6E3288; |
|
border-radius: 30px 30px 30px 30px; |
|
left: calc(50% - 30px); |
|
position: relative; |
|
top: calc(40px - 30px); |
|
} |
|
|
|
.preview_img{ |
|
max-width: 100%; |
|
max-height: 100%; |
|
} |
|
|
|
.control_card.hidden_info:hover{ |
|
background-color: #daf; |
|
cursor: pointer; |
|
} |
|
|
|
.breadcrumb-select:focus{ |
|
border-color: inherit !important; |
|
-webkit-box-shadow: none !important; |
|
box-shadow: none !important; |
|
} |
|
|
|
.breadcrumb-select{ |
|
border: none !important; |
|
outline:0px !important; |
|
} |
|
|
|
.user_row{ |
|
cursor: pointer; |
|
} |
|
|
|
|
|
.overflow-auto::-webkit-scrollbar { |
|
width: 8px; |
|
} |
|
|
|
.overflow-auto::-webkit-scrollbar-track { |
|
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); |
|
border-radius: 10px; |
|
} |
|
|
|
.overflow-auto::-webkit-scrollbar-thumb { |
|
border-radius: 10px; |
|
background-color: #AF80C4; |
|
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0); |
|
} |
|
|
|
@media (min-width: 1200px) { |
|
.control_visits_overflow{ |
|
height:90vh; |
|
} |
|
} |
|
|
|
@media (max-width: 1199px) { |
|
.control_visits_overflow{ |
|
height:90vh; |
|
} |
|
} |
|
|
|
@media (max-width: 991px) { |
|
.control_visits_overflow{ |
|
height:85vh; |
|
} |
|
} |
|
|
|
@media (max-width: 767px) { |
|
.control_visits_overflow{ |
|
height:80vh; |
|
margin-bottom: 20px; |
|
} |
|
} |
|
|
|
@media (max-width: 479px) { |
|
.control_visits_overflow{ |
|
height:70vh; |
|
} |
|
} |
|
|
|
.exams-check:checked { |
|
background-color: #198754 !important; |
|
border-color: #198754 !important; |
|
} |
|
.exams-check:disabled{ |
|
opacity: 1 !important; |
|
} |
|
|
|
.exams-check:disabled~.form-check-label, .exams-check[disabled]~.form-check-label { |
|
opacity: 1 !important; |
|
} |
|
|
|
.btn-arrow { |
|
background-color: #fff !important; |
|
color: #777 !important; |
|
} |
|
|
|
.btn-arrow:hover { |
|
color: #000 !important; |
|
} |
|
|
|
.visit_diagnos:first-child { |
|
.row > .col-3 > .diag_up{ |
|
pointer-events:none; |
|
color: #eee !important; |
|
} |
|
} |
|
|
|
.visit_diagnos:last-child { |
|
.row > .col-3 > .diag_down{ |
|
pointer-events:none; |
|
color: #eee !important; |
|
} |
|
} |
|
#conclusion_box{ |
|
display:inline-block; |
|
position:relative; |
|
width: 100%; |
|
} |
|
#conclusion_buttons_box{ |
|
display: none; |
|
} |
|
|
|
#conclusion_box:hover{ |
|
#conclusion_buttons_box{ |
|
display: block; |
|
position:absolute; |
|
top: 4px; |
|
left: 5px; |
|
} |
|
#conclusion_buttons_box > .btn-sm{ |
|
padding: 0px 3px; |
|
} |
|
} |
|
|
|
#conclusion_box:hover > textarea{ |
|
padding-top: 28px; |
|
} |
|
|
|
.btn-plus{ |
|
box-sizing: content-box; |
|
width: 1em; |
|
height: 1em; |
|
padding: 0.25em 0.25em; |
|
color: #000; |
|
border: 0; |
|
border-radius: 0.25rem; |
|
background: transparent; |
|
} |
|
|
|
.tag-span{ |
|
background: rgba(255,255,255, .6); |
|
} |
|
|
|
.change_probe:hover{ |
|
opacity: 50%; |
|
} |
|
|
|
.form-control-sm{ |
|
height: 29px; |
|
} |
|
|
|
.visit-navs .active{ |
|
border-bottom: 4px solid #6e3288 !important; |
|
color: #6e3288 !important; |
|
} |
|
|
|
.visit-navs .nav-link{ |
|
text-decoration: none; |
|
color: #777; |
|
} |
|
|
|
|
|
/* |
|
Waiting spinner |
|
*/ |
|
|
|
.lds-ripple { |
|
/* change color here */ |
|
color: #6e3288 |
|
} |
|
.lds-ripple, |
|
.lds-ripple div { |
|
box-sizing: border-box; |
|
} |
|
.lds-ripple { |
|
display: inline-block; |
|
position: relative; |
|
width: 80px; |
|
height: 80px; |
|
} |
|
.lds-ripple div { |
|
position: absolute; |
|
border: 4px solid currentColor; |
|
opacity: 1; |
|
border-radius: 50%; |
|
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; |
|
} |
|
.lds-ripple div:nth-child(2) { |
|
animation-delay: -0.5s; |
|
} |
|
@keyframes lds-ripple { |
|
0% { |
|
top: 36px; |
|
left: 36px; |
|
width: 8px; |
|
height: 8px; |
|
opacity: 0; |
|
} |
|
4.9% { |
|
top: 36px; |
|
left: 36px; |
|
width: 8px; |
|
height: 8px; |
|
opacity: 0; |
|
} |
|
5% { |
|
top: 36px; |
|
left: 36px; |
|
width: 8px; |
|
height: 8px; |
|
opacity: 1; |
|
} |
|
100% { |
|
top: 0; |
|
left: 0; |
|
width: 80px; |
|
height: 80px; |
|
opacity: 0; |
|
} |
|
} |
|
|
|
/*Кнопки эндоскопа*/ |
|
|
|
.modern_button{ |
|
position: relative; |
|
border-radius: 50%; |
|
outline: none; |
|
border: 0px; |
|
background: rgba(0, 0, 0, 0.2); |
|
backdrop-filter: blur(10.3px); |
|
-webkit-backdrop-filter: blur(10.3px); |
|
color: #fff; |
|
} |
|
.modern_button.modb_lg{ |
|
width: 5em; |
|
height: 5em; |
|
} |
|
.modern_button.modb_md{ |
|
width: 3em; |
|
height: 3em; |
|
} |
|
.modern_button.modb_lg span{ |
|
font-size: 22px; |
|
} |
|
.modern_button.modb_md span{ |
|
font-size: 16px; |
|
} |
|
.red.modern_button:hover{ |
|
color: rgba(255, 0, 0, 1); |
|
} |
|
.red.modern_button.checked{ |
|
background: rgba(255, 0, 0, 1); |
|
} |
|
.red.modern_button.checked:hover{ |
|
color: rgba(255, 255, 255, 1) !important; |
|
} |
|
.green.modern_button:hover{ |
|
color: rgba(0, 255, 0, 1); |
|
} |
|
.green.modern_button.checked{ |
|
background: rgba(0, 255, 0, 1); |
|
} |
|
.green.modern_button.checked:hover{ |
|
color: rgba(255, 255, 255, 1) !important; |
|
} |
|
.orange.modern_button:hover{ |
|
color: rgba(255, 156, 0, 1); |
|
} |
|
.orange.modern_button.checked{ |
|
background: rgba(255, 156, 0, 1); |
|
} |
|
.orange.modern_button.checked:hover{ |
|
color: rgba(255, 255, 255, 1) !important; |
|
} |
|
.modern_button:disabled { |
|
background-color: dimgrey !important; |
|
color: linen !important; |
|
opacity: 1; |
|
} |
|
.modern-card{ |
|
border-radius: inherit; |
|
box-shadow: 5px 5px 10px #141414, -5px -5px 10px #525252; |
|
} |
|
|
|
/*HotKeys*/ |
|
|
|
.hotkey-card:focus{ |
|
border: 1px solid blue !important; |
|
} |
|
|
|
.success-field input{ |
|
/*border: 1px solid #000;*/ |
|
} |
|
|
|
.errors-field input{ |
|
border: 1px solid #F00; |
|
} |
|
|
|
.success-field small{ |
|
display: none; |
|
} |
|
|
|
.errors-field small{ |
|
color: #F00; |
|
margin-left: 10px; |
|
font-size: 0.7em; |
|
font-style: italic; |
|
display: block; |
|
} |
|
|
|
|
|
#passport-error { |
|
display: none; /* Скрыть по умолчанию */ |
|
color: #F00; /* Красный цвет для ошибки */ |
|
} |
|
|
|
select { |
|
border: 1px solid #838383; |
|
border-style: outset; |
|
font-weight: bold; |
|
color: #3F3F3F; |
|
max-width: 100% !important; |
|
overflow: hidden; |
|
} |
|
|
|
option { |
|
max-width: 120px !important; |
|
overflow: hidden; |
|
} |
|
|
|
|
|
.alert-placeholder |
|
{ |
|
position: relative; |
|
color: attr(data-color) !important; |
|
font-size: 20px; |
|
white-space: nowrap; |
|
} |
|
.alert-lg:before{ |
|
top: 4px; |
|
} |
|
.alert-md:before{ |
|
top: 4px; |
|
} |
|
.alert-sm:before{ |
|
top: 1px; |
|
} |
|
.alert-placeholder:before |
|
{ |
|
position: absolute; |
|
right: 15px; |
|
font-family: 'Font Awesome\ 5 Free'; |
|
content: "\f071"; |
|
font-weight: 900; |
|
pointer-events: none; |
|
opacity: 1; |
|
overflow: hidden; |
|
text-overflow: clip; |
|
} |
|
.alert-popover{ |
|
top: 0px !important; |
|
left: calc(50% - 124px) !important; |
|
width: 250px !important; |
|
} |