diff --git a/src/app/_modules/administration/page/administration-page.component.scss b/src/app/_modules/administration/page/administration-page.component.scss index a0a333e..7195ade 100644 --- a/src/app/_modules/administration/page/administration-page.component.scss +++ b/src/app/_modules/administration/page/administration-page.component.scss @@ -13,7 +13,7 @@ font-weight: 700; line-height: 60px; /* 100% */ letter-spacing: 0.76px; - color: #2D2D2D; + color: var(--second-act); } } :host{ diff --git a/src/app/_modules/administration/site-pages/administrate-site-pages.component.scss b/src/app/_modules/administration/site-pages/administrate-site-pages.component.scss index d431c74..36ca89f 100644 --- a/src/app/_modules/administration/site-pages/administrate-site-pages.component.scss +++ b/src/app/_modules/administration/site-pages/administrate-site-pages.component.scss @@ -63,7 +63,7 @@ height: 40px; margin-right: 16px; border-radius: 100px; - background-color: #0070BA; + background-color: var(--prime); color: #ffffff; span{ display: none; diff --git a/src/app/_modules/auth/login/login.component.scss b/src/app/_modules/auth/login/login.component.scss index 04a086b..8ee2064 100644 --- a/src/app/_modules/auth/login/login.component.scss +++ b/src/app/_modules/auth/login/login.component.scss @@ -16,7 +16,7 @@ display: flex; flex-direction: row; align-items: center; - border-bottom: 1px solid #C0C0C0; + border-bottom: 1px solid var(--second-dis); h2 { margin: 0; font-family: PT Sans Narrow; @@ -25,7 +25,7 @@ font-weight: 700; line-height: 44px; /* 122.222% */ letter-spacing: 0.36px; - color: var(--dark-1); + color: var(--second-act); } .close { width: 24px; @@ -63,11 +63,11 @@ } &:hover{ - border-color: #6C6C6C; + border-color: var(--second); outline: none; } &:focus, &:focus-visible { - border-color: #0070BA; + border-color: var(--prime); outline: none; } @@ -120,7 +120,7 @@ .footer { display: flex; flex-grow: 0; - border-top: 1px solid #C0C0C0; + border-top: 1px solid var(--second-dis); // border-radius: 0 0 24px 24px; padding: 16px 24px; justify-content: flex-end; diff --git a/src/app/_modules/companies/company/company.component.scss b/src/app/_modules/companies/company/company.component.scss index 5d5957b..7bc1ce4 100644 --- a/src/app/_modules/companies/company/company.component.scss +++ b/src/app/_modules/companies/company/company.component.scss @@ -72,7 +72,7 @@ .content { padding: 24px 40px; - border-bottom: #6c6c6c solid 1px; + border-bottom: var(--second) solid 1px; .properties { display: flex; flex-direction: row; diff --git a/src/app/_modules/filter-fields/field/filter-field.component.scss b/src/app/_modules/filter-fields/field/filter-field.component.scss index c30e330..fd154e2 100644 --- a/src/app/_modules/filter-fields/field/filter-field.component.scss +++ b/src/app/_modules/filter-fields/field/filter-field.component.scss @@ -8,7 +8,7 @@ margin-right: 16px; padding: 10px 0 2px; flex-shrink: 0; - color: #6c6c6c; + color: var(--second); } .value { flex-grow: 1; diff --git a/src/app/_modules/form-fields/types/document/form-field-document.component.scss b/src/app/_modules/form-fields/types/document/form-field-document.component.scss index f7b512e..6056df3 100644 --- a/src/app/_modules/form-fields/types/document/form-field-document.component.scss +++ b/src/app/_modules/form-fields/types/document/form-field-document.component.scss @@ -3,7 +3,7 @@ display: flex; height: 100px; padding: 16px; - border: var(--blue-1) dashed 1px; + border: var(--prime) dashed 1px; border-radius: 4px; overflow: hidden; font-size: 20px; @@ -12,7 +12,7 @@ } p { margin: auto; - color: #c0c0c0; + color: var(--second-dis); text-align: center; span { color: var(--orange-2); diff --git a/src/app/_modules/form-fields/types/html/single/field-html-single.component.scss b/src/app/_modules/form-fields/types/html/single/field-html-single.component.scss index e8ad2c9..5cb393a 100644 --- a/src/app/_modules/form-fields/types/html/single/field-html-single.component.scss +++ b/src/app/_modules/form-fields/types/html/single/field-html-single.component.scss @@ -1,6 +1,6 @@ :host::ng-deep editor{ border-radius: 12px; - border: solid 1px #C0C0C0; + border: solid 1px var(--second-dis); font-family: "PT Sans"; .tox-tinymce{ border:none; diff --git a/src/app/_modules/form-fields/types/image/form-field-image.component.scss b/src/app/_modules/form-fields/types/image/form-field-image.component.scss index 047f0ec..22a47d8 100644 --- a/src/app/_modules/form-fields/types/image/form-field-image.component.scss +++ b/src/app/_modules/form-fields/types/image/form-field-image.component.scss @@ -3,7 +3,7 @@ display: flex; height: 100px; padding: 16px; - border: var(--blue-1) dashed 1px; + border: var(--prime) dashed 1px; border-radius: 4px; overflow: hidden; font-size: 20px; @@ -12,7 +12,7 @@ } p { margin: auto; - color: #c0c0c0; + color: var(--second-dis); text-align: center; span { color: var(--orange-2); diff --git a/src/app/_modules/form-fields/types/relation/form-field-relation.component.scss b/src/app/_modules/form-fields/types/relation/form-field-relation.component.scss index aa2016c..b9931de 100644 --- a/src/app/_modules/form-fields/types/relation/form-field-relation.component.scss +++ b/src/app/_modules/form-fields/types/relation/form-field-relation.component.scss @@ -1,19 +1,19 @@ .combobox { position: relative; font-family: "PT Sans"; - border: solid 1px #C0C0C0; + border: solid 1px var(--second-dis); border-radius: 12px; font-size: 20px; - color: var(--dark-1); + color: var(--second-act); padding: 8px 12px 8px 16px; background: no-repeat left 16px center / 173px 19px url('~src/assets/images/icons/placeholder.svg'); &:hover{ - border-color: #6C6C6C; + border-color: var(--second); outline: none; } &.active { - border-color: #0070BA; + border-color: var(--prime); outline: none; } diff --git a/src/app/_modules/form-fields/types/relation/single/radio/relation-radio.component.scss b/src/app/_modules/form-fields/types/relation/single/radio/relation-radio.component.scss index c796890..825ef10 100644 --- a/src/app/_modules/form-fields/types/relation/single/radio/relation-radio.component.scss +++ b/src/app/_modules/form-fields/types/relation/single/radio/relation-radio.component.scss @@ -7,7 +7,7 @@ $blue-pressed: #003366; $blue-disabled: #9ECCE8; $grey: #939393; -$grey-hover: #6C6C6C; +$grey-hover: var(--second); $grey-pressed: #707070; $grey-disabled: #E0E0E0; diff --git a/src/app/_modules/form-fields/types/topics/form-field-topics.component.scss b/src/app/_modules/form-fields/types/topics/form-field-topics.component.scss index 44b0bd5..507a477 100644 --- a/src/app/_modules/form-fields/types/topics/form-field-topics.component.scss +++ b/src/app/_modules/form-fields/types/topics/form-field-topics.component.scss @@ -47,7 +47,7 @@ .name { width: 256px; - color: #6c6c6c; + color: var(--second); } .field { diff --git a/src/app/_modules/layout/footer/footer.component.scss b/src/app/_modules/layout/footer/footer.component.scss index ef35f12..45346f5 100644 --- a/src/app/_modules/layout/footer/footer.component.scss +++ b/src/app/_modules/layout/footer/footer.component.scss @@ -41,7 +41,7 @@ .line{ width: 100%; height: 1px; - background-color: var(--blue-1); + background-color: var(--prime); margin-bottom: 40px; } diff --git a/src/app/_modules/layout/header/user-bar/header-user-bar.component.scss b/src/app/_modules/layout/header/user-bar/header-user-bar.component.scss index 8482429..65894b5 100644 --- a/src/app/_modules/layout/header/user-bar/header-user-bar.component.scss +++ b/src/app/_modules/layout/header/user-bar/header-user-bar.component.scss @@ -9,13 +9,13 @@ justify-content: center; background-color: #fff; border-radius: 32px; - border: 1px solid #C0C0C0; + border: 1px solid var(--second-dis); .avatar { width: 38px; height: 38px; - color: var(--blue-1); - border: 1px solid var(--blue-1); + color: var(--prime); + border: 1px solid var(--prime); background: #fff; border-radius: 100%; display: flex; @@ -35,7 +35,7 @@ .name{ margin: 8px 4px 0 12px; - color: #2D2D2D; + color: var(--second-act); white-space: nowrap; } @@ -67,7 +67,7 @@ li { display: block; padding: 12px 20px; - color: #2D2D2D; + color: var(--second-act); cursor: pointer; border-bottom: #E0E0E0 solid 1px; white-space: nowrap; diff --git a/src/app/_modules/pages/page/breadcrumbs/page-breadcrumbs.component.scss b/src/app/_modules/pages/page/breadcrumbs/page-breadcrumbs.component.scss index 0fb38a3..8c8654c 100644 --- a/src/app/_modules/pages/page/breadcrumbs/page-breadcrumbs.component.scss +++ b/src/app/_modules/pages/page/breadcrumbs/page-breadcrumbs.component.scss @@ -7,7 +7,7 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - color:var(--blue-1); + color:var(--prime); li { padding: 0; display: inline; @@ -19,7 +19,7 @@ font-weight: 400; line-height: 16px; /* 160% */ - color: var(--blue-1); + color: var(--prime); &::before { display: inline; diff --git a/src/app/_modules/pages/page/page.component.scss b/src/app/_modules/pages/page/page.component.scss index af38c0e..6c3a337 100644 --- a/src/app/_modules/pages/page/page.component.scss +++ b/src/app/_modules/pages/page/page.component.scss @@ -7,7 +7,7 @@ .row { display: block; width: 100%; - border-bottom: 1px solid #C0C0C0; + border-bottom: 1px solid var(--second-dis); background-color: #FFF; .page-header { display: flex; @@ -62,7 +62,7 @@ .label { margin-right: 8px; font-size: 20px; - color: #2D2D2D; + color: var(--second-act); } } } diff --git a/src/app/_modules/pages/sections/add/add-section.component.scss b/src/app/_modules/pages/sections/add/add-section.component.scss index ea1d828..1873f41 100644 --- a/src/app/_modules/pages/sections/add/add-section.component.scss +++ b/src/app/_modules/pages/sections/add/add-section.component.scss @@ -9,7 +9,7 @@ .toggle { position: relative; padding-left: 32px; - color: var(--blue-1); + color: var(--prime); // background: var(--white) url("~src/assets/images/icons/add_24dp.svg") no-repeat center; cursor: pointer; z-index: 1; @@ -103,7 +103,7 @@ border-bottom: #E0E0E0 solid 1px; column-gap: 12px; cursor: pointer; - color: #2D2D2D; + color: var(--second-act); background: transparent; @@ -114,7 +114,7 @@ .sub-row { padding: 12px 16px 12px 32px; border-bottom: #E0E0E0 solid 1px; - color: #6C6C6C; + color: var(--second); cursor: pointer; &:hover { background-color: #f7f7f7; diff --git a/src/app/_modules/pages/sections/types/basic/contact/contact-section.component.scss b/src/app/_modules/pages/sections/types/basic/contact/contact-section.component.scss index b1e93a4..1e07cfd 100644 --- a/src/app/_modules/pages/sections/types/basic/contact/contact-section.component.scss +++ b/src/app/_modules/pages/sections/types/basic/contact/contact-section.component.scss @@ -1,7 +1,7 @@ .contact { h2 { - color: #2D2D2D; + color: var(--second-act); font-family: PT Sans Narrow; font-size: 24px; font-style: normal; diff --git a/src/app/_modules/pages/sections/types/basic/document/document-section.component.scss b/src/app/_modules/pages/sections/types/basic/document/document-section.component.scss index 51e1f36..a751852 100644 --- a/src/app/_modules/pages/sections/types/basic/document/document-section.component.scss +++ b/src/app/_modules/pages/sections/types/basic/document/document-section.component.scss @@ -15,5 +15,5 @@ a{ font-size: 20px; } .description{ - color: #6C6C6C; + color: var(--second); } \ No newline at end of file diff --git a/src/app/_modules/pages/sections/types/basic/html/html-section.component.scss b/src/app/_modules/pages/sections/types/basic/html/html-section.component.scss index 6a1f6c8..832c4f4 100644 --- a/src/app/_modules/pages/sections/types/basic/html/html-section.component.scss +++ b/src/app/_modules/pages/sections/types/basic/html/html-section.component.scss @@ -1,12 +1,12 @@ :host{ - color: var(--dark-1); + color: var(--second-act); font-family: PT Sans; font-size: 20px; font-style: normal; font-weight: 400; line-height: 32px; a { - color: var(--blue-1); + color: var(--prime); &:hover{ color: var(--blue-3); }; diff --git a/src/app/_modules/pages/sections/types/basic/image-group/image-group-section.component.scss b/src/app/_modules/pages/sections/types/basic/image-group/image-group-section.component.scss index 02f8538..1a1ad59 100644 --- a/src/app/_modules/pages/sections/types/basic/image-group/image-group-section.component.scss +++ b/src/app/_modules/pages/sections/types/basic/image-group/image-group-section.component.scss @@ -8,10 +8,10 @@ display: flex; justify-content: space-between; width: 100%; - border-top: 1px solid #C0C0C0; - border-bottom: 1px solid #C0C0C0; + border-top: 1px solid var(--second-dis); + border-bottom: 1px solid var(--second-dis); .title { - color: #6C6C6C; + color: var(--second); font-size: 20px; font-style: normal; font-weight: 400; diff --git a/src/app/_modules/pages/sections/types/basic/images/images-section.component.scss b/src/app/_modules/pages/sections/types/basic/images/images-section.component.scss index d0145c2..8a98047 100644 --- a/src/app/_modules/pages/sections/types/basic/images/images-section.component.scss +++ b/src/app/_modules/pages/sections/types/basic/images/images-section.component.scss @@ -71,7 +71,7 @@ .item{ width: 72px; height: 52px; - border: 1px solid var(--blue-1); + border: 1px solid var(--prime); img{ object-fit: cover; width: 100%; @@ -198,7 +198,7 @@ display: block; width: 72px; height: 52px; - border: 2px solid var(--blue-1); + border: 2px solid var(--prime); img{ width: 100%; diff --git a/src/app/_modules/pages/sections/types/basic/member/item/member-section-item.component.scss b/src/app/_modules/pages/sections/types/basic/member/item/member-section-item.component.scss index 7e92c1b..aa73e91 100644 --- a/src/app/_modules/pages/sections/types/basic/member/item/member-section-item.component.scss +++ b/src/app/_modules/pages/sections/types/basic/member/item/member-section-item.component.scss @@ -28,7 +28,7 @@ font-weight: 700; line-height: 32px; /* 133.333% */ letter-spacing: 0.24px; - color:#6C6C6C + color:var(--second) } .position { font-size: 20px; @@ -91,7 +91,7 @@ } .description{ - color: #6C6C6C; + color: var(--second); } } diff --git a/src/app/_modules/pages/sections/types/basic/member/list/member-section-list.component.scss b/src/app/_modules/pages/sections/types/basic/member/list/member-section-list.component.scss index 8ef1d83..f7576b8 100644 --- a/src/app/_modules/pages/sections/types/basic/member/list/member-section-list.component.scss +++ b/src/app/_modules/pages/sections/types/basic/member/list/member-section-list.component.scss @@ -8,10 +8,10 @@ display: flex; justify-content: space-between; width: 100%; - border-top: 1px solid #C0C0C0; - border-bottom: 1px solid #C0C0C0; + border-top: 1px solid var(--second-dis); + border-bottom: 1px solid var(--second-dis); .title { - color: #6C6C6C; + color: var(--second); font-size: 20px; font-style: normal; font-weight: 400; diff --git a/src/app/_modules/pages/tree/pages-tree.component.scss b/src/app/_modules/pages/tree/pages-tree.component.scss index 6efd2c4..d891ba1 100644 --- a/src/app/_modules/pages/tree/pages-tree.component.scss +++ b/src/app/_modules/pages/tree/pages-tree.component.scss @@ -59,7 +59,7 @@ height: 40px; margin-right: 16px; border-radius: 100px; - background-color: #0070BA; + background-color: var(--prime); color: #ffffff; span{ display: none; diff --git a/src/app/_modules/publications/list/item/news/news.component.scss b/src/app/_modules/publications/list/item/news/news.component.scss index 3bcdf64..cb9a123 100644 --- a/src/app/_modules/publications/list/item/news/news.component.scss +++ b/src/app/_modules/publications/list/item/news/news.component.scss @@ -1,6 +1,6 @@ :host-context(publications-list-item:not(:last-child)){ .item { - border-bottom: 1px solid #C0C0C0; + border-bottom: 1px solid var(--second-dis); } } @@ -34,7 +34,7 @@ .date { font-size: 20px; line-height: 18px; - color: #6C6C6C; + color: var(--second); } .title a h2 { @@ -48,7 +48,7 @@ font-style: normal; font-weight: 400; line-height: 32px; /* 160% */ - color: var(--dark-1); + color: var(--second-act); a{ display: block; ::after{ vertical-align: -4px; diff --git a/src/app/_modules/publications/list/list.component.scss b/src/app/_modules/publications/list/list.component.scss index 6fbc1cb..76787bc 100644 --- a/src/app/_modules/publications/list/list.component.scss +++ b/src/app/_modules/publications/list/list.component.scss @@ -8,11 +8,11 @@ .button { display: inline-block; font-size: 20px; - color: var(--blue-1); + color: var(--prime); vertical-align: 4px; padding-left: 8px; &:hover{ - color: var(--blue-2); + color: var(--prime-hov); cursor: pointer; } }; diff --git a/src/assets/css/basics.scss b/src/assets/css/basics.scss index c5ca4fa..3ed247b 100644 --- a/src/assets/css/basics.scss +++ b/src/assets/css/basics.scss @@ -1,5 +1,33 @@ @import "~@angular/material/prebuilt-themes/indigo-pink.css"; + + +:root { + --radius-1: 12px; + --radius-2: 20px; + --white: #ffffff; + + + --prime: #0070BA; + --prime-hov: #005799; + --prime-act: #004077; + --prime-dis: #A1CAE5; + + --second: #6C6C6C; + --second-hov: #4D4D4D; + --second-act: #2D2D2D; + --second-dis: #C0C0C0; + + + --blue-0: #2EB2E8; + + + --blue-3: #004077; + --blue-4: #A1CAE5; + + +} + .style-color{ background-color: #f6f6f6; } @@ -49,7 +77,7 @@ body { height: 100%; padding: 0; margin: 0; - color: var(--dark-1); + color: var(--second-act); } .limiter { @@ -60,7 +88,7 @@ body { h2 { - color: var(--dark-1); + color: var(--second-act); font-family: PT Sans Narrow; font-size: 50px; font-style: normal; @@ -71,7 +99,7 @@ h2 { margin:0; } h3 { - color: var(--dark-1); + color: var(--second-act); font-family: PT Sans Narrow; font-size: 36px; font-style: normal; @@ -82,7 +110,7 @@ h3 { margin:0; } h4 { - color: var(--dark-1); + color: var(--second-act); font-family: PT Sans Narrow; font-size: 24px; font-style: normal; @@ -95,7 +123,7 @@ h4 { a { text-decoration: none; - color: var(--blue-1); + color: var(--prime); cursor: pointer; &:hover{ color: var(--blue-3); @@ -152,7 +180,7 @@ html-section ul{ content: ""; width: 16px; height: 2px; - background-color: var(--blue-1); + background-color: var(--prime); margin-bottom: 5px; margin-right: 16px; } @@ -206,7 +234,7 @@ html-section ul{ line-height: 32px; } h4{ - color:#6C6C6C; + color:var(--second); } } diff --git a/src/assets/css/buttons.scss b/src/assets/css/buttons.scss index 8f7a123..56c45ce 100644 --- a/src/assets/css/buttons.scss +++ b/src/assets/css/buttons.scss @@ -6,8 +6,8 @@ button, .btn, a.btn { gap: 10px; cursor: pointer; border-radius: 12px; - border: 1px solid#0070BA; - background:#0070BA; + border: 1px solidvar(--prime); + background:var(--prime); color: #FFF; font-family: PT Sans Narrow; font-size: 24px; @@ -17,8 +17,8 @@ button, .btn, a.btn { letter-spacing: 0.24px; &:hover{ - border: 1px solid #005799; - background: #005799; + border: 1px solid var(--prime-hov); + background: var(--prime-hov); } &:active{ @@ -33,10 +33,10 @@ button, .btn, a.btn { &.outline{ background:#FFF; - color: #0070BA; + color: var(--prime); &:hover{ - border: 1px solid #005799; - color: #005799; + border: 1px solid var(--prime-hov); + color: var(--prime-hov); } &:active{ @@ -59,7 +59,7 @@ button, .btn, a.btn { border-radius: 0; border: none; background-color: transparent; - color: var(--dark-1); + color: var(--second-act); font-family: PT Sans Narrow; font-size: 12px; font-style: normal; diff --git a/src/assets/css/forms.scss b/src/assets/css/forms.scss index 382445a..ac86926 100644 --- a/src/assets/css/forms.scss +++ b/src/assets/css/forms.scss @@ -3,17 +3,17 @@ input, select, textarea { height: 40px; padding: 8px 16px; border-radius: 12px; - border: solid 1px #C0C0C0; + border: solid 1px var(--second-dis); font-family: "PT Sans"; font-size: 20px; - color: var(--dark-1); + color: var(--second-act); background-color: #fff; &:hover{ - border-color: #6C6C6C; + border-color: var(--second); outline: none; } &:focus, &:focus-visible { - border-color: #0070BA; + border-color: var(--prime); outline: none; } @@ -37,21 +37,21 @@ input, select, textarea { padding: 2px; border-radius: 12px; background-color: #fff; - border: 1px solid #6C6C6C; + border: 1px solid var(--second); cursor: pointer; transition: background-color 0.3s; &:before { display: block; width: 18px; height: 18px; - background-color: #C0C0C0; + background-color: var(--second-dis); border-radius: 9px; transition: transform 0.3s; content: ''; } &.active { - background-color:var(--blue-1); - border-color:var(--blue-1); + background-color:var(--prime); + border-color:var(--prime); &:before { transform: translateX(20px); background-color: #fff; @@ -59,8 +59,8 @@ input, select, textarea { } &.active{ &:hover { - background-color:var(--blue-2); - border-color:var(--blue-2); + background-color:var(--prime-hov); + border-color:var(--prime-hov); &:before { transform: translateX(20px); } @@ -74,9 +74,9 @@ input, select, textarea { } } &:not(.active):hover { - border-color:#4D4D4D; + border-color:var(--second-hov); &:before { - background-color: #6C6C6C; + background-color: var(--second); } } &.disabled { diff --git a/src/assets/css/main-menu.scss b/src/assets/css/main-menu.scss index 7912d3f..41d5c94 100644 --- a/src/assets/css/main-menu.scss +++ b/src/assets/css/main-menu.scss @@ -115,7 +115,7 @@ align-items: center; a { - color: #0070BA; + color: var(--prime); font-size: 20px; font-style: normal; font-weight: 400; @@ -123,7 +123,7 @@ &.parent-item{ >span{ display: inline-block; - border-bottom: 2px solid #0070BA; + border-bottom: 2px solid var(--prime); } } } @@ -195,12 +195,12 @@ >a.active>span{ - color: var(--blue-1) + color: var(--prime) } a{ span{ - color: #6C6C6C; + color: var(--second); font-family: PT Sans Narrow; font-size: 24px; font-style: normal; @@ -211,10 +211,10 @@ } :hover{ - color:var(--blue-2) + color:var(--prime-hov) } .current-item{ - color:var(--blue-1) + color:var(--prime) } >pages-menu.parent-item{ //second level @@ -234,7 +234,7 @@ background-color: #EDEDED; border-radius: 8px; span{ - color:#2D2D2D + color:var(--second-act) } } } diff --git a/src/styles.scss b/src/styles.scss index 6da33e0..32130c2 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,16 +1,4 @@ -:root { - --radius-1: 12px; - --radius-2: 20px; - --white: #ffffff; - --blue-0: #2EB2E8; - --blue-1: #0070BA; - --blue-2: #005799; - --blue-3: #004077; - --blue-4: #A1CAE5; - --dark-1: #2D2D2D; - -} * { font-family: "PT Sans"; @@ -32,7 +20,7 @@ display: flex; .block { background: #fff; - border: 1px solid #C0C0C0; + border: 1px solid var(--second-dis); border-radius: 12px; padding: 12px 24px; display: flex;