diff --git a/frontend/src/resources/css/inbox-dashboard.css b/frontend/src/resources/css/inbox-dashboard.css index 1d01882..3425576 100644 --- a/frontend/src/resources/css/inbox-dashboard.css +++ b/frontend/src/resources/css/inbox-dashboard.css @@ -29,14 +29,13 @@ --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-xbase: 20px; --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*/ + --h-header: 68px; } .webbpm.ervu_dashboard { @@ -49,13 +48,14 @@ .webbpm.ervu_dashboard .container { padding: var(--h-header) 0 0; bottom: 0; + background-color: var(--page-bg); } .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); + height: 100%; + padding: 0 var(--indent-xbase) var(--indent-mini) var(--indent-xbase); overflow: auto; } @@ -63,112 +63,21 @@ 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%; + margin-left: var(--indent-xbase); } .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); + color: var(--color-text-primary); width: 100%; height: auto; min-height: var(--h-header); - background: transparent; + background-color: var(--header-bg); } .webbpm.ervu_dashboard .header > div > * { position: relative; @@ -176,51 +85,6 @@ 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; @@ -241,51 +105,6 @@ 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; diff --git a/frontend/src/resources/template/app/component/app_header.html b/frontend/src/resources/template/app/component/app_header.html index f9090c5..e64c86f 100644 --- a/frontend/src/resources/template/app/component/app_header.html +++ b/frontend/src/resources/template/app/component/app_header.html @@ -1,15 +1,5 @@