new colors
This commit is contained in:
m.epshtein
parent
9c32f1363a
commit
01532334a5
12 changed files with 142 additions and 115 deletions
|
|
@ -13,7 +13,7 @@
|
|||
|
||||
.webbpm.account-applications .title {
|
||||
font-size: var(--size-text-title);
|
||||
font-family: 'InterSB';
|
||||
font-family: 'Golos';
|
||||
padding-top: 0;
|
||||
padding-bottom: var(--indent-small);
|
||||
}
|
||||
|
|
@ -21,82 +21,110 @@
|
|||
display: block;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.webbpm.account-applications .font-bold {
|
||||
font-family: 'InterSB';
|
||||
|
||||
|
||||
|
||||
|
||||
.webbpm.ervu_business_metrics .btn {
|
||||
color: var(--color-text-primary) !important;
|
||||
font-family: 'GolosM';
|
||||
padding: 12px 16px;
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
background: var(--block-bg) !important;
|
||||
box-shadow: var( --block-shadow);
|
||||
}
|
||||
.webbpm.ervu_business_metrics .active > div > .btn {
|
||||
color: var(--white) !important;
|
||||
background: var(--block-active-bg) !important
|
||||
}
|
||||
|
||||
.webbpm.account-applications .btn {
|
||||
.webbpm.ervu_business_metrics .selectize-dropdown,
|
||||
.webbpm.ervu_business_metrics .selectize-input,
|
||||
.webbpm.ervu_business_metrics .selectize-input input {
|
||||
font-size: var(--size-text-secondary);
|
||||
font-family: 'Inter';
|
||||
color: var(--color-link);
|
||||
padding: 13px 39px;
|
||||
border: 1px solid var(--color-link);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.webbpm.ervu_business_metrics .selectize-control {
|
||||
display: flex;
|
||||
height: 30px;
|
||||
background-color: transparent;
|
||||
}
|
||||
.webbpm.ervu_business_metrics .selectize-control .selectize-input {
|
||||
min-height: auto;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--input-border);
|
||||
border-radius: var(--indent-xmini) var(--indent-xmini) 0 0;
|
||||
background-color: var(--input-bg);
|
||||
}
|
||||
.webbpm.ervu_business_metrics .selectize-control .selectize-input:after {
|
||||
content: "\f282";
|
||||
color: var(--color-text-primary);
|
||||
font-family: bootstrap-icons !important;
|
||||
font-weight: 800 !important;
|
||||
font-size: var(--size-text-mini);
|
||||
top: calc((50% - var(--size-text-secondary) / 2));
|
||||
right: var(--indent-small);
|
||||
height: auto;
|
||||
width: auto;
|
||||
border: 0;
|
||||
}
|
||||
.webbpm.ervu_business_metrics .selectize-control .selectize-input > input {
|
||||
color: var(--color-text-primary);
|
||||
font-family: 'GolosUI';
|
||||
}
|
||||
.webbpm.ervu_business_metrics .selectize-dropdown {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
.webbpm.account-applications .btn:is(: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);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.webbpm.account-applications .btn-main:not(.info):not(.link) .btn,
|
||||
.webbpm.account-applications :is(.form-signin, .form-signup, .confirm, .confirmation) .btn-primary {
|
||||
color: var(--white);
|
||||
border: 1px solid var(--color-link);
|
||||
background: var(--color-link);
|
||||
}
|
||||
.webbpm.account-applications .btn-main .btn:is(:not(:disabled):not(.disabled):hover, :not(:disabled):not(.disabled):active, :not(:disabled):not(.disabled):focus),
|
||||
.webbpm.account-applications :is(.form-signin, .form-signup, .confirm, .confirmation) .btn-primary:is(:not(:disabled):not(.disabled):hover, :not(:disabled):not(.disabled):active, :not(:disabled):not(.disabled):focus) {
|
||||
color: var(--white);
|
||||
border-color: var(--color-link-hover);
|
||||
background-color: var(--color-link-hover);
|
||||
}
|
||||
|
||||
.webbpm.account-applications .btn:is(:disabled, .disabled) {
|
||||
color: var(--color-text-secondary);
|
||||
border-color: var(--border-light);
|
||||
}
|
||||
|
||||
.webbpm.account-applications .btn-big-group > div {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.webbpm.account-applications .btn-big-group .btn {
|
||||
font-family: 'Inter';
|
||||
color: var(--color-text-primary);
|
||||
min-width: 300px;
|
||||
padding: 40px;
|
||||
.webbpm.ervu_business_metrics .selectize-dropdown-content {
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
background-color: var(--white) !important;
|
||||
box-shadow: var(--bg-shadow);
|
||||
}
|
||||
.webbpm.account-applications .btn-big-group .btn::before {
|
||||
display: flex;
|
||||
|
||||
.webbpm.ervu_business_metrics .nav-tabs {
|
||||
justify-content: center;
|
||||
margin-bottom: 8px;
|
||||
border: 1px solid var(--border);
|
||||
border-bottom: 0;
|
||||
border-radius: var(--indent-small) var(--indent-small) 0 0;
|
||||
}
|
||||
.webbpm.account-applications .btn-big-group vbox:first-child .btn::before {
|
||||
content: url(../img/svg/users-bl.svg);
|
||||
.webbpm.ervu_business_metrics .nav-tabs ~ .tab-active > .active {
|
||||
padding: var(--indent-base) var(--indent-medium);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0 0 var(--indent-small) var(--indent-small);
|
||||
background-color: var(--white);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.webbpm.account-applications .btn-big-group vbox:first-child .btn:is(:hover, :active, :focus)::before {
|
||||
content: url(../img/svg/users.svg);
|
||||
.webbpm.ervu_business_metrics .nav-tabs .nav-item.active {
|
||||
position: relative;
|
||||
}
|
||||
.webbpm.account-applications .btn-big-group vbox:last-child .btn::before {
|
||||
content: url(../img/svg/notes-bl.svg);
|
||||
.webbpm.ervu_business_metrics .nav-tabs .nav-item.active::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
bottom: 1px;
|
||||
border-radius: 2px 2px 0 0;
|
||||
background-color: #1487cf;
|
||||
box-shadow: 0 -1px 2px 0px rgba(20, 135, 207, 0.3);
|
||||
}
|
||||
.webbpm.account-applications .btn-big-group vbox:last-child .btn:is(:hover, :active, :focus)::before {
|
||||
content: url(../img/svg/notes.svg);
|
||||
.webbpm.ervu_business_metrics .nav-tabs .nav-item + .nav-item {
|
||||
margin-left: 16px;
|
||||
}
|
||||
.webbpm.account-applications .btn-big-group vbox {
|
||||
padding-right: 0;
|
||||
.webbpm.ervu_business_metrics .nav-tabs .nav-link {
|
||||
color: var(--color-text-mute);
|
||||
font-family: 'GolosM';
|
||||
font-size: var(--size-text-secondary);
|
||||
text-transform: uppercase;
|
||||
padding: 12px 0;
|
||||
border: 0;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.webbpm.account-applications .btn-big-group vbox + vbox {
|
||||
margin-left: 40px;
|
||||
.webbpm.ervu_business_metrics .nav-tabs .active > .nav-link {
|
||||
color: var(--color-link);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.webbpm.account-applications collapsible-panel .card {
|
||||
margin-bottom: var(--indent-small);
|
||||
border: 1px solid var(--border-light) !important;
|
||||
|
|
@ -106,7 +134,7 @@
|
|||
}
|
||||
.webbpm.account-applications collapsible-panel .card-header,
|
||||
.webbpm.account-applications collapsible-panel .card-block .font-bold {
|
||||
font-family: 'InterSB' !important;
|
||||
font-family: 'Golos' !important;
|
||||
font-size: var(--size-text-primary) !important;
|
||||
}
|
||||
.webbpm.account-applications collapsible-panel .card-block {
|
||||
|
|
@ -140,7 +168,7 @@
|
|||
}
|
||||
|
||||
.webbpm.account-applications ag-grid-angular {
|
||||
font-family: 'Inter';
|
||||
font-family: 'Golos';
|
||||
}
|
||||
|
||||
.webbpm.account-applications ag-grid-angular .grid-setting-icon,
|
||||
|
|
@ -153,7 +181,7 @@
|
|||
}
|
||||
|
||||
.webbpm.account-applications ag-grid-angular .ag-header-row {
|
||||
font-family: 'InterSB';
|
||||
font-family: 'Golos';
|
||||
}
|
||||
|
||||
.webbpm.account-applications ag-grid-angular .ag-header-row:not(:first-child) .ag-header-cell,
|
||||
|
|
|
|||
|
|
@ -1,32 +1,18 @@
|
|||
@font-face {
|
||||
font-family: 'InterL';
|
||||
src: url('../fonts/Inter-Light.otf');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-family: 'Golos';
|
||||
src: url('../fonts/golos-regular.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('../fonts/Inter-Regular.otf');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-family: 'GolosM';
|
||||
src: url('../fonts/golos-medium.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'InterM';
|
||||
src: url('../fonts/Inter-Medium.otf');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-family: 'GolosUI';
|
||||
src: url('../fonts/golos-ul-regular.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'InterSB';
|
||||
src: url('../fonts/Inter-SemiBold.otf');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'InterB';
|
||||
src: url('../fonts/Inter-Bold.otf');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-family: 'GolosUIM';
|
||||
src: url('../fonts/golos-ul-medium.ttf');
|
||||
}
|
||||
|
||||
body.webbpm.account-applications {
|
||||
|
|
@ -36,34 +22,47 @@ body.webbpm.account-applications {
|
|||
}
|
||||
|
||||
.webbpm.account-applications {
|
||||
--color-text-primary: #1d1e21;
|
||||
--color-text-secondary: #acacac;
|
||||
--color-link: #c64e1b;
|
||||
--color-link-hover: #fa773f;
|
||||
--color-form: #3f434b;
|
||||
--color-bg-main: #223d36;
|
||||
--color-light: #868b87;
|
||||
--bg-light: #fafafa;
|
||||
--bg-warn: #ffdcc6;
|
||||
--bg-form: #eee;
|
||||
--border-light: #d2d2d2;
|
||||
--bg-shadow: 0 19px 19px 8px rgba(230, 230, 230, 0.19), 0 0px 4px 0px #f3f3f3;
|
||||
--white: #fff;
|
||||
--color-text-primary: #020c12;
|
||||
--color-text-active: #015e98;
|
||||
--color-text-mute: rgba(2, 12, 18, 0.58);
|
||||
--color-link: #015e98;
|
||||
|
||||
--h-header: 64px;
|
||||
--h-footer: 48px;
|
||||
--w-screen: 75px;
|
||||
--border: rgba(1, 72, 116, 0.1);
|
||||
--shadow: 0 3px 2px -2px rgba(0, 0, 0, 0.15);
|
||||
--bg-red: #f1d2d2;
|
||||
--bg-blue: #a1c2e0;
|
||||
--bg-yellow: #e7dcab;
|
||||
--bg-green: #96b9ad;
|
||||
--bg-orange: #e9decd;
|
||||
|
||||
--size-text-title: 36px;
|
||||
--size-text-subtitle: 20px;
|
||||
--size-text-primary: 18px;
|
||||
--size-text-secondary: 16px;
|
||||
--input-bg: rgba(53, 126, 172, 0.05);
|
||||
--input-border: rgba(53, 126, 172, 0.2);
|
||||
--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);
|
||||
|
||||
--indent-huge: 48px;
|
||||
--indent-big: 40px;
|
||||
--indent-medium: 32px;
|
||||
--indent-small: 24px;
|
||||
--indent-mini: 16px;
|
||||
--indent-extra-mini: 10px;
|
||||
--size-text-header: 32px;
|
||||
--size-text-title: 24px;
|
||||
--size-text-subtitle: 18px;
|
||||
--size-text-primary: 16px;
|
||||
--size-text-secondary: 14px;
|
||||
--size-text-mini: 10px;
|
||||
|
||||
--size-num-title: 36px;
|
||||
|
||||
--indent-xlarge: 40px;
|
||||
--indent-large: 32px;
|
||||
--indent-medium: 24px;
|
||||
--indent-xbase: 20px;
|
||||
--indent-base: 16px;
|
||||
--indent-small: 12px;
|
||||
--indent-mini: 8px;
|
||||
--indent-xmini: 4px;
|
||||
|
||||
--h-header: 68px;
|
||||
}
|
||||
|
||||
.webbpm.account-applications a {
|
||||
|
|
@ -75,7 +74,7 @@ body.webbpm.account-applications {
|
|||
}
|
||||
|
||||
.webbpm.account-applications .header {
|
||||
font-family: 'Inter';
|
||||
font-family: 'Golos';
|
||||
min-height: var(--h-header);
|
||||
border: 0;
|
||||
background-color: var(--color-text-primary);
|
||||
|
|
@ -85,7 +84,7 @@ body.webbpm.account-applications {
|
|||
}
|
||||
.webbpm.account-applications .header .header-logo a {
|
||||
color: var(--white);
|
||||
font-family: 'Inter';
|
||||
font-family: 'Golos';
|
||||
}
|
||||
.webbpm.account-applications .header .header-logo .logo {
|
||||
position: relative;
|
||||
|
|
@ -99,7 +98,7 @@ body.webbpm.account-applications {
|
|||
background: url(../img/svg/mil-logo.svg) no-repeat 0 50%;
|
||||
}
|
||||
.webbpm.account-applications .header .header-logo .main-page {
|
||||
font-family: 'InterSB';
|
||||
font-family: 'Golos';
|
||||
margin-left: calc(62px + 16px);
|
||||
}
|
||||
|
||||
|
|
@ -116,7 +115,7 @@ body.webbpm.account-applications {
|
|||
.webbpm.account-applications .container-inside {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: 'Inter';
|
||||
font-family: 'Golos';
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
|
|
@ -140,7 +139,7 @@ body.webbpm.account-applications {
|
|||
}
|
||||
.webbpm.account-applications :is(.form-signin, .form-signup, .confirm) :is(h1, h2) {
|
||||
color: var(--color-form);
|
||||
font-family: 'InterB';
|
||||
font-family: 'GolosM';
|
||||
font-size: var(--size-text-subtitle);
|
||||
text-align: left;
|
||||
margin-bottom: 0;
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
frontend/src/resources/fonts/golos-medium.ttf
Normal file
BIN
frontend/src/resources/fonts/golos-medium.ttf
Normal file
Binary file not shown.
BIN
frontend/src/resources/fonts/golos-regular.ttf
Normal file
BIN
frontend/src/resources/fonts/golos-regular.ttf
Normal file
Binary file not shown.
BIN
frontend/src/resources/fonts/golos-ul-medium.ttf
Normal file
BIN
frontend/src/resources/fonts/golos-ul-medium.ttf
Normal file
Binary file not shown.
BIN
frontend/src/resources/fonts/golos-ul-regular.ttf
Normal file
BIN
frontend/src/resources/fonts/golos-ul-regular.ttf
Normal file
Binary file not shown.
Loading…
Add table
Add a link
Reference in a new issue