diff --git a/frontend/src/resources/css/components-lkrp.css b/frontend/src/resources/css/components-lkrp.css index 45fa789c..049c79b2 100644 --- a/frontend/src/resources/css/components-lkrp.css +++ b/frontend/src/resources/css/components-lkrp.css @@ -1,26 +1,33 @@ -.webbpm.ervu_lkrp_ul .container-inside > div > div > [page-object] { +.webbpm.ervu_lkrp_fl .container-inside > div > div > [page-object] { display: flex; } -.webbpm.ervu_lkrp_ul a { - color: var(--color-link); - - &:hover; -} - -.webbpm.ervu_lkrp_ul .title { +.webbpm.ervu_lkrp_fl .title { font-size: var(--size-text-title); font-family: 'InterB'; padding-top: 0; padding-bottom: var(--indent-big); .form-group { + display: block; margin-bottom: 0; } + .component-float { + display: block; + width: auto; + } + input { + font-size: var(--size-text-title); + height: auto; + padding: 0; + border: 0; + background-color: transparent; + } } -.webbpm.ervu_lkrp_ul .subtitle { +.webbpm.ervu_lkrp_fl .subtitle { + position: relative; font-size: var(--size-text-subtitle); font-family: 'InterSB'; @@ -59,6 +66,12 @@ text.icon-building::before { background-image: url(../img/svg/building-wt.svg); } + text.icon-doc::before { + background-image: url(../img/svg/doc-wt.svg); + } + text.icon-cross::before { + background-image: url(../img/svg/cross-wt.svg); + } .info { float: none !important; display: flex; @@ -78,7 +91,7 @@ } } -.webbpm.ervu_lkrp_ul .btn { +.webbpm.ervu_lkrp_fl .btn { font-size: var(--size-text-secondary); font-family: 'Inter'; color: var(--white); @@ -96,16 +109,82 @@ } } -.webbpm.ervu_lkrp_ul .left-block { +.webbpm.ervu_lkrp_fl [class^="link-"] { + position: relative; + margin-bottom: 24px; + + .btn { + font-size: var(--size-text-primary); + padding: 0 0 0 36px; + background-color: transparent !important; + + &::before { + content: ""; + position: absolute; + left: 0; + width: 24px; + height: 24px; + } + } +} +.webbpm.ervu_lkrp_fl .link-back .btn { + color: var(--color-text-primary) !important; + &::before { + background-image: url(../img/svg/arrow-left.svg); + } +} +.webbpm.ervu_lkrp_fl .link-data .btn { + color: var(--color-link); + + &:not(:disabled):not(.disabled):hover, + &:not(:disabled):not(.disabled):active, + &:not(:disabled):not(.disabled):focus { + color: var(--color-link-hover); + } + &::before { + background-image: url(../img/svg/data.svg); + } +} + +.webbpm.ervu_lkrp_fl .left-block { width: 75%; padding-right: var(--indent-medium); } -.webbpm.ervu_lkrp_ul .right-block { +.webbpm.ervu_lkrp_fl .right-block { width: 25%; } -.webbpm.ervu_lkrp_ul .fieldset { +.webbpm.ervu_lkrp_fl .warning-group { + background-color: var(--bg-warn); + padding: 16px; + border-radius: 4px; + + .warn-title { + font-family: 'InterSB'; + } + static-route-navigation-button:not(.info):not(.link) { + padding-top: 0 !important; + margin-top: 16px; + border-top: 0 !important; + + .btn { + color: var(--color-link); + padding: 13px 39px; + border: 1px solid var(--color-link); + background-color: transparent; + + &:not(:disabled):not(.disabled):hover, + &:not(:disabled):not(.disabled):active, + &:not(:disabled):not(.disabled):focus { + color: var(--color-link-hover); + border-color: var(--color-link-hover); + } + } + } +} + +.webbpm.ervu_lkrp_fl .fieldset { padding: 24px; margin-bottom: 0; border: 1px solid var(--border-light); @@ -118,19 +197,58 @@ } .form-group { margin-bottom: 0; - } + } + hbox:not(.subtitle) > .horizontal-container { + flex-wrap: wrap; + } + .link .btn { + color: var(--color-link); + padding: 0; + background: transparent !important; + + &:not(:disabled):not(.disabled):hover, + &:not(:disabled):not(.disabled):active, + &:not(:disabled):not(.disabled):focus { + color: var(--color-link-hover); + } + } + input { + height: auto; + min-height: auto; + padding: 0; + border: 0; + background-color: transparent; + + & + .input-group-addon { + display: none; + } + } + text-field { + .form-group { + width: 100%; + + .component-float { + width: 100%; + } + } + } + .lined { + padding-top: 24px; + margin-top: 16px; + border-top: 1px solid var(--border-light); + } } -.webbpm.ervu_lkrp_ul .left-block .fieldset { +.webbpm.ervu_lkrp_fl .left-block .fieldset { hyper-link .link { color: var(--color-text-primary); font-size: var(--size-text-secondary); padding-left: 20px; background: url(../img/svg/pin.svg) 0 50% no-repeat; - } - hyper-link, button-component:not(.info) { + } + hyper-link, button-component:not(.info):not(.link) { display: block; - padding-top: 16px; + padding-top: 24px; margin-top: 16px; border-top: 1px solid var(--border-light); } @@ -138,10 +256,13 @@ padding-top: 0; margin-top: 12px; border: 0; - } + } + .link .btn { + font-size: var(--size-text-primary); + } } -.webbpm.ervu_lkrp_ul .right-block .fieldset { +.webbpm.ervu_lkrp_fl .right-block .fieldset { font-size: var(--size-text-secondary); padding-top: 52px; @@ -156,13 +277,13 @@ } } -.webbpm.ervu_lkrp_ul field-set + field-set { +.webbpm.ervu_lkrp_fl field-set + field-set { margin-top: var(--indent-medium); } /*@media ((max-width: 780px) or ((orientation: landscape) and (max-device-width : 1024px))) {*/ @media (max-width: 1024px) { - .webbpm.ervu_lkrp_ul .main-block { + .webbpm.ervu_lkrp_fl .main-block { & > .horizontal-container { flex-direction: column-reverse; } @@ -172,7 +293,7 @@ } } - .webbpm.ervu_lkrp_ul .right-block { + .webbpm.ervu_lkrp_fl .right-block { width: 100%; .fieldset { @@ -186,26 +307,37 @@ } } - .webbpm.ervu_lkrp_ul .left-block { + .webbpm.ervu_lkrp_fl .left-block { width: 100%; } } @media only screen and (max-width: 480px) { - .webbpm.ervu_lkrp_ul .left-block { + .webbpm.ervu_lkrp_fl .left-block { .subtitle text { + width: 100%; padding: 60px 0 0; &::before { top: 0; left: calc(50% - 48px/2 + 12px); - } + } + .form-group { + width: 100%; + + & > div:last-child { + text-align: center; + width: 100%; + } + } } - .fieldset { - legend + div > hbox:not(.subtitle) > .horizontal-container { - flex-direction: column; - } - button-component:not(.info) { + .subtitle text .link { + position: absolute; + right: 0; + } + .fieldset { + button-component:not(.info):not(.link), + static-route-navigation-button:not(.info):not(.link) { display: flex; justify-content: center; } diff --git a/frontend/src/resources/css/inbox-lkrp.css b/frontend/src/resources/css/inbox-lkrp.css index 231fd3da..a0106484 100644 --- a/frontend/src/resources/css/inbox-lkrp.css +++ b/frontend/src/resources/css/inbox-lkrp.css @@ -29,12 +29,13 @@ body { -webkit-text-size-adjust: 100%; } -.webbpm.ervu_lkrp_ul { +.webbpm.ervu_lkrp_fl { --color-text-primary: #1d1e21; --color-link: #c64e1b; --color-link-hover: #fa773f; --color-bg-main: #223d36; --bg-light: #fafafa; + --bg-warn: #ffdcc6; --border-light: #d2d2d2; --h-header: 64px; @@ -52,7 +53,7 @@ body { --indent-small: 24px; } -.webbpm.ervu_lkrp_ul a { +.webbpm.ervu_lkrp_fl a { color: var(--color-link); text-decoration: none; &:hover, @@ -62,24 +63,25 @@ body { } } -.webbpm.ervu_lkrp_ul .header { +.webbpm.ervu_lkrp_fl .header { min-height: var(--h-header); border: 0; - background-color: var(--color-bg-main); + background-color: var(--color-text-primary); .header-logo { margin-left: var(--w-screen); .logo a { - width: 24px; - height: 24px; - background: url(../img/svg/logo.svg) no-repeat 0 50%; + width: 62px; + height: 40px; + background: url(../img/svg/mil-logo.svg) no-repeat 0 50%; } - .main-page { - margin-left: calc(32px + 24px); + .main-page { + font-family: 'InterSB'; + margin-left: calc(62px + 16px); a { color: var(--white); - font-family: 'InterSB'; + font-family: 'Inter'; } } } @@ -143,13 +145,13 @@ body { } } -.webbpm.ervu_lkrp_ul footer { +.webbpm.ervu_lkrp_fl footer { height: var(--h-footer); border: 0; background-color: var(--color-text-primary); } -.webbpm.ervu_lkrp_ul .container { +.webbpm.ervu_lkrp_fl .container { padding-top: var(--h-header); bottom: var(--h-footer); @@ -161,7 +163,7 @@ body { /*@media ((max-width: 780px) or ((orientation: landscape) and (max-device-width : 1024px))) {*/ @media (max-width: 1024px) { - .webbpm.ervu_lkrp_ul { + .webbpm.ervu_lkrp_fl { --w-screen: 32px; --size-text-title: 28px; @@ -174,7 +176,7 @@ body { } @media (max-width: 480px) { - .webbpm.ervu_lkrp_ul { + .webbpm.ervu_lkrp_fl { --w-screen: 16px; --size-text-title: 24px; @@ -185,7 +187,7 @@ body { --indent-small: 16px; } - .webbpm.ervu_lkrp_ul .header .main-page { + .webbpm.ervu_lkrp_fl .header .main-page { display: none; } }