312 lines
9 KiB
CSS
312 lines
9 KiB
CSS
.webbpm.ervu_dashboard {
|
|
--white: #fff;
|
|
--color-text-primary: #020c12;
|
|
--color-text-mute: rgba(2, 12, 18, 0.58);
|
|
--color-link: #015e98;
|
|
|
|
--border: rgba(1, 72, 116, 0.1);
|
|
--shadow: 0 3px 2px -2px rgba(0, 0, 0, 0.15);
|
|
|
|
--page-bg: rgba(38, 117, 166, 0.025);
|
|
--header-bg: rgba(53, 126, 172, 0.05);
|
|
--block-bg: rgba(53, 126, 172, 0.1);
|
|
--block-active-bg: linear-gradient(155deg, #1497cf 0%, #064f99 100%);
|
|
--block-shadow: 0 3px 2px -2px rgba(0, 75, 118, 0.15);
|
|
|
|
--size-text-title: min(1.6vw, 2rem); /*32px*/
|
|
--size-text-subtitle: min(1.2vw, 1.5rem); /*24px*/
|
|
--size-text-addprimary: min(1vw, 1.25rem); /*20px*/
|
|
--size-text-primary: min(0.9vw, 1.125rem); /*18px*/
|
|
--size-text-secondary: min(0.7vw, 0.875rem); /*14px*/
|
|
|
|
--size-num-title: min(3vw, 3.75rem); /*60px*/
|
|
--size-num-subtitle: min(2.4vw, 3rem); /*48px*/
|
|
--size-num-addtitle: min(2vw, 2.5rem); /*40px*/
|
|
--size-num-primary: min(1.6vw, 2rem); /*32px*/
|
|
--size-num-secondary: min(1.2vw, 1.5rem); /*24px*/
|
|
|
|
--indent-huge: min(2.4vw, 3rem); /*48*/
|
|
--indent-xlarge: min(2vw, 2.5rem); /*40*/
|
|
--indent-large: min(1.6vw, 2rem); /*32*/
|
|
--indent-medium: min(1.2vw, 1.5rem); /*24*/
|
|
--indent-xbase: min(1vw, 1.25rem); /*20*/
|
|
--indent-base: 16px;
|
|
--indent-small: 12px;
|
|
--indent-mini: 8px;
|
|
--indent-xmini: min(0.2vw, 0.25rem); /*4px*/
|
|
|
|
--h-header: min(3.9vw, 4.875rem); /*78*/
|
|
--w-screen: min(1vw, 1.25rem); /*20*/
|
|
}
|
|
|
|
.webbpm.ervu_dashboard {
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: var(--color-text-primary);
|
|
font-family: 'Gilroy';
|
|
}
|
|
|
|
.webbpm.ervu_dashboard .container {
|
|
padding: var(--h-header) 0 0;
|
|
bottom: 0;
|
|
}
|
|
.webbpm.ervu_dashboard .container-inside {
|
|
position: relative;
|
|
font-family: 'Gilroy';
|
|
font-size: var(--size-text-primary);
|
|
height: 100%;
|
|
padding: 0 var(--w-screen) var(--indent-mini) var(--w-screen);
|
|
overflow: auto;
|
|
}
|
|
|
|
.webbpm.ervu_dashboard .header-logo {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-left: var(--w-screen);
|
|
}
|
|
.webbpm.ervu_dashboard .header-logo .logo a {
|
|
width: 100px;
|
|
height: var(--h-header);
|
|
background: url('../../../src/resources/img/logo-full.svg') no-repeat 0 50%;
|
|
background-size: auto 100%;
|
|
}
|
|
.webbpm.ervu_dashboard .header-logo .logo-title {
|
|
font-family: 'GilroySB';
|
|
margin-left: min(6vw, 7.5rem); /*120*/
|
|
}
|
|
|
|
.webbpm.ervu_dashboard .header-menu {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-left: auto;
|
|
margin-right: var(--w-screen);
|
|
}
|
|
.webbpm.ervu_dashboard .header-menu process,
|
|
.webbpm.ervu_dashboard .header-menu process + div,
|
|
.webbpm.ervu_dashboard .header-menu admin-menu {
|
|
}
|
|
|
|
.webbpm.ervu_dashboard .header-menu .update-data {
|
|
color: var(--color-text-primary);
|
|
opacity: 0.4;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.webbpm.ervu_dashboard .header-menu .user-data .user-data-name,
|
|
.webbpm.ervu_dashboard .header-menu .user-data .user-data-name:is(:focus, :active) {
|
|
color: var(--color-text-primary);
|
|
font-size: var(--size-text-primary);
|
|
padding: var(--indent-mini) var(--indent-huge) var(--indent-mini) var(--indent-xbase);
|
|
margin: 0;
|
|
border-radius: 100px;
|
|
border: 1px solid var(--color-success);
|
|
background: var(--color-dark-20);
|
|
box-shadow: none;
|
|
outline: transparent;
|
|
}
|
|
.webbpm.ervu_dashboard .header-menu .user-data.show .user-data-name {
|
|
background-color: var(--color-success);
|
|
}
|
|
.webbpm.ervu_dashboard .header-menu .user-data .user-data-name::after {
|
|
position: absolute;
|
|
content: "\f282";
|
|
color: var(--color-text-primary);
|
|
font-family: bootstrap-icons;
|
|
font-weight: 800;
|
|
font-size: var(--size-text-secondary);
|
|
top: calc(50% - var(--size-text-secondary) / 2);
|
|
right: var(--indent-base);
|
|
margin: 0;
|
|
border: 0;
|
|
}
|
|
.webbpm.ervu_dashboard .header-menu .user-data.show .user-data-name::after {
|
|
top: calc(50% - (var(--size-text-secondary) + var(--indent-xmini)) / 2);
|
|
transform: rotate(180deg);
|
|
}
|
|
.webbpm.ervu_dashboard .header-menu .user-data .dropdown-menu {
|
|
width: max-content;
|
|
max-width: 600px;
|
|
padding: var(--indent-mini) 0;
|
|
border-radius: 24px;
|
|
border: 1px solid var(--color-text-secondary);
|
|
background: var(--color-dark-20);
|
|
backdrop-filter: var(--bg-blur-40);
|
|
box-shadow: var(--bg-shadow);
|
|
}
|
|
.webbpm.ervu_dashboard .header-menu .user-data .dropdown-item {
|
|
color: var(--color-text-primary);
|
|
white-space: normal;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.webbpm.ervu_dashboard .header-menu .logout {
|
|
max-width: max-content;
|
|
}
|
|
.webbpm.ervu_dashboard .header-menu .logout > button {
|
|
color: var(--color-text-primary);
|
|
line-height: 1.3;
|
|
padding: var(--indent-mini) var(--indent-xbase);
|
|
border: 1px solid var(--color-success);
|
|
background-color: var(--color-dark-20);
|
|
outline: none;
|
|
}
|
|
.webbpm.ervu_dashboard .header-menu .logout .nav-link {
|
|
padding-right: 0;
|
|
border-radius: var(--indent-medium) 0 0 var(--indent-medium);
|
|
border-right: 0;
|
|
}
|
|
.webbpm.ervu_dashboard .header-menu .logout .exit {
|
|
border-radius: 0 var(--indent-medium) var(--indent-medium) 0;
|
|
border-left: 0;
|
|
}
|
|
|
|
.webbpm.ervu_dashboard .header {
|
|
display: flex;
|
|
font-family: 'Gilroy';
|
|
font-size: var(--size-text-primary);
|
|
width: 100%;
|
|
height: auto;
|
|
min-height: var(--h-header);
|
|
background: transparent;
|
|
}
|
|
.webbpm.ervu_dashboard .header > div > * {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/*----------------- Login ---------------- */
|
|
.webbpm.ervu_dashboard :is(.form-signin, .form-signup, .confirm) {
|
|
color: var(--color-text-primary);
|
|
width: 560px;
|
|
padding: 60px 80px;
|
|
margin: 30px auto;
|
|
border: 0;
|
|
border-radius: 20px;
|
|
border: 1px solid var(--color-text-secondary);
|
|
background-color: var(--color-dark-20);
|
|
box-shadow: var(--bg-shadow);
|
|
backdrop-filter: var(--bg-blur-40);
|
|
}
|
|
|
|
.webbpm.ervu_dashboard :is(.form-signin, .form-signup) .row.title {
|
|
position: relative;
|
|
padding: 0;
|
|
}
|
|
|
|
.webbpm.ervu_dashboard .form-signin h1,
|
|
.webbpm.ervu_dashboard .form-signin h2,
|
|
.webbpm.ervu_dashboard .form-signup h2,
|
|
.webbpm.ervu_dashboard .confirm h2 {
|
|
font-family: 'GilroySB';
|
|
font-size: 32px;
|
|
text-align: left;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.webbpm.ervu_dashboard :is(.form-signin, .form-signup, .confirm) .logo {
|
|
position: absolute;
|
|
top: -10px;
|
|
right: 0;
|
|
width: 145px;
|
|
height: 40px;
|
|
background: none;
|
|
}
|
|
|
|
.webbpm.ervu_dashboard .form-signin .row.registration > * + *,
|
|
.webbpm.ervu_dashboard .form-signin .login-btn-box .password,
|
|
.webbpm.ervu_dashboard .form-signin .login-btn-box .btn + .btn {
|
|
margin-left: 20px;
|
|
}
|
|
/*--------------- end Login -------------- */
|
|
|
|
@supports not selector(::-webkit-scrollbar) {
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--color-text-primary) transparent;
|
|
}
|
|
}
|
|
::-webkit-scrollbar {
|
|
width: 4px;
|
|
height: 4px;
|
|
background-color: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
border-radius: 8px;
|
|
background-color: var(--color-text-primary);
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
height: 4px;
|
|
background-color: transparent;
|
|
}
|
|
|
|
@media ((max-width: 780px) or (orientation: portrait)) {
|
|
.webbpm.ervu_dashboard {
|
|
--size-text-title: 2rem; /*32px*/
|
|
--size-text-subtitle: 1.5rem; /*24px*/
|
|
--size-text-addprimary: 1.25rem; /*20px*/
|
|
--size-text-primary: 1.125rem; /*18px*/
|
|
--size-text-secondary: 0.875rem; /*14px*/
|
|
|
|
--size-num-title: 3.75rem; /*60px*/
|
|
--size-num-subtitle: 3rem; /*48px*/
|
|
--size-num-addtitle: 2.5rem; /*40px*/
|
|
--size-num-primary: 2rem; /*32px*/
|
|
--size-num-secondary: 1.5rem; /*24px*/
|
|
|
|
--indent-huge: 3rem; /*48*/
|
|
--indent-xlarge: 2.5rem; /*40*/
|
|
--indent-large: 2rem; /*32*/
|
|
--indent-medium: 1.5rem; /*24*/
|
|
--indent-xbase: 1.25rem; /*20*/
|
|
--indent-base: 1rem; /*16*/
|
|
--indent-small: 0.75rem; /*12px*/
|
|
--indent-mini: 0.5rem; /*8px*/
|
|
--indent-xmini: 0.25rem; /*4px*/
|
|
|
|
--h-header: 4.875rem; /*78*/
|
|
--w-screen: 1rem; /*40*/
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.webbpm.ervu_dashboard {
|
|
--size-text-title: 1.75rem; /*28px*/
|
|
--size-text-primary: 1rem; /*16px*/
|
|
|
|
--size-num-title: 3rem; /*48*/
|
|
--size-num-subtitle: 2.5rem; /*40*/
|
|
--size-num-addtitle: 2rem; /*32px*/
|
|
--size-num-primary: 1.75rem; /*28px*/
|
|
}
|
|
|
|
.webbpm.ervu_dashboard .header-menu .user-data .dropdown-menu {
|
|
max-width: calc(100vw - var(--w-screen) * 2);
|
|
}
|
|
}
|
|
|
|
.webbpm.ervu_dashboard .progress {
|
|
width: 64px;
|
|
height: 64px;
|
|
border: 5px dotted var(--color-text-primary);
|
|
border-radius: 100%;
|
|
display: inline-block;
|
|
position: relative;
|
|
background: transparent;
|
|
box-sizing: border-box;
|
|
animation: rotation 2.5s linear infinite;
|
|
}
|
|
.webbpm.ervu_dashboard .loader.modal .modal-content {
|
|
border: 0;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
@keyframes rotation {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|