From d1dc53c6323b67e7c8e36f884212568b4c66bcd7 Mon Sep 17 00:00:00 2001 From: Mateus Machado Luna Date: Wed, 25 Jul 2018 16:25:55 -0300 Subject: [PATCH] Introduces new oficial color scheme. Begins modification of color variables. --- .../advanced-search/advanced-search.vue | 2 +- .../edition/collection-edition-form.vue | 12 +- .../edition/filter-edition-form.vue | 4 +- .../edition/importer-edition-form.vue | 6 +- .../edition/importer-mapping-form.vue | 8 +- .../components/edition/item-edition-form.vue | 24 ++-- .../edition/metadatum-edition-form.vue | 4 +- .../components/edition/term-edition-form.vue | 6 +- .../components/lists/collections-list.vue | 4 +- src/admin/components/lists/filters-list.vue | 26 ++-- src/admin/components/lists/items-list.vue | 4 +- src/admin/components/lists/metadata-list.vue | 20 +-- src/admin/components/lists/processes-list.vue | 4 +- .../components/lists/taxonomies-list.vue | 4 +- src/admin/components/lists/terms-list.vue | 6 +- .../components/navigation/primary-menu.vue | 10 +- .../components/navigation/tainacan-header.vue | 4 +- .../navigation/tainacan-subheader.vue | 6 +- .../components/navigation/tainacan-title.vue | 2 +- .../other/available-importers-modal.vue | 4 +- src/admin/components/other/file-item.vue | 4 +- src/admin/components/other/help-button.vue | 6 +- .../components/other/processes-popup.vue | 24 ++-- .../pages/lists/available-importers-page.vue | 2 +- src/admin/pages/lists/collections-page.vue | 2 +- src/admin/pages/lists/items-page.vue | 16 +-- src/admin/pages/lists/taxonomies-page.vue | 2 +- src/admin/pages/singles/item-page.vue | 18 +-- src/admin/scss/_buttons.scss | 8 +- src/admin/scss/_checkboxes.scss | 6 +- .../scss/_dropdown-and-autocomplete.scss | 14 +- src/admin/scss/_inputs.scss | 6 +- src/admin/scss/_modals.scss | 22 +-- src/admin/scss/_notices.scss | 4 +- src/admin/scss/_pagination.scss | 12 +- src/admin/scss/_radios.scss | 4 +- src/admin/scss/_selects.scss | 2 +- src/admin/scss/_switches.scss | 10 +- src/admin/scss/_tables.scss | 26 ++-- src/admin/scss/_tabs.scss | 4 +- src/admin/scss/_tags.scss | 4 +- src/admin/scss/_tainacan-form.scss | 10 +- src/admin/scss/_tooltips.scss | 6 +- src/admin/scss/_variables.scss | 125 +++++++++++++----- src/admin/scss/_view-mode-cards.scss | 12 +- src/admin/scss/_view-mode-grid.scss | 8 +- src/admin/scss/_view-mode-records.scss | 14 +- src/admin/scss/tainacan-admin.scss | 4 +- src/admin/theme-items-list.vue | 24 ++-- .../filter-types/tainacan-filter-item.vue | 4 +- .../metadata-types/tainacan-form-item.vue | 4 +- src/theme-helper/view-mode-cards.vue | 12 +- src/theme-helper/view-mode-records.vue | 12 +- 53 files changed, 322 insertions(+), 269 deletions(-) diff --git a/src/admin/components/advanced-search/advanced-search.vue b/src/admin/components/advanced-search/advanced-search.vue index f09f8388c..3e55945fc 100644 --- a/src/admin/components/advanced-search/advanced-search.vue +++ b/src/admin/components/advanced-search/advanced-search.vue @@ -633,7 +633,7 @@ } .tainacan-input-disabled { - background-color: $gray; + background-color: $gray3; } } diff --git a/src/admin/components/edition/collection-edition-form.vue b/src/admin/components/edition/collection-edition-form.vue index 6c1197d61..e5a95dd77 100644 --- a/src/admin/components/edition/collection-edition-form.vue +++ b/src/admin/components/edition/collection-edition-form.vue @@ -818,7 +818,7 @@ export default { .section-label { font-size: 16px !important; font-weight: 500 !important; - color: $tertiary !important; + color: $blue5 !important; line-height: 1.2em; } @@ -854,7 +854,7 @@ export default { font-weight: bold; z-index: 99; text-align: center; - color: gray; + color: $gray4; @media screen and (max-width: 769px) { font-size: 1.2rem; @@ -892,7 +892,7 @@ export default { font-weight: bold; z-index: 99; text-align: center; - color: gray; + color: $gray4; } .thumbnail-buttons-row { position: relative; @@ -901,7 +901,7 @@ export default { } } .selected-cover-page { - border: 1px solid $tainacan-input-background; + border: 1px solid $gray2; padding: 8px; font-size: .75rem; .span { vertical-align: middle;} @@ -915,11 +915,11 @@ export default { padding: 4px 6px; .icon { font-size: 20px; } &.disabled { - .icon { color: $tainacan-input-background; } + .icon { color: $gray2; } } } .moderators-empty-list { - color: gray; + color: $gray4; font-size: 0.85rem; } diff --git a/src/admin/components/edition/filter-edition-form.vue b/src/admin/components/edition/filter-edition-form.vue index 3c7dc2e10..8b7da97db 100644 --- a/src/admin/components/edition/filter-edition-form.vue +++ b/src/admin/components/edition/filter-edition-form.vue @@ -264,8 +264,8 @@ export default { form { padding: 1.0em 2.0em; - border-top: 1px solid $draggable-border-color; - border-bottom: 1px solid $draggable-border-color; + border-top: 1px solid $gray2; + border-bottom: 1px solid $gray2; margin-top: 1.0em; } diff --git a/src/admin/components/edition/importer-edition-form.vue b/src/admin/components/edition/importer-edition-form.vue index f50569697..9faf4ed11 100644 --- a/src/admin/components/edition/importer-edition-form.vue +++ b/src/admin/components/edition/importer-edition-form.vue @@ -389,13 +389,13 @@ export default { .section-label { font-size: 16px !important; font-weight: 500 !important; - color: $tertiary !important; + color: $blue5 !important; line-height: 1.2em; } .source-metadatum { padding: 2px 0; - border-bottom: 1px solid $tainacan-input-background; + border-bottom: 1px solid $gray2; width: 100%; margin-bottom: 6px; display: flex; @@ -411,7 +411,7 @@ export default { } .mapping-header-label { - color: $gray-light; + color: $gray4; margin: 12px 0 6px 0; } diff --git a/src/admin/components/edition/importer-mapping-form.vue b/src/admin/components/edition/importer-mapping-form.vue index ecc5ba074..d932ebc05 100644 --- a/src/admin/components/edition/importer-mapping-form.vue +++ b/src/admin/components/edition/importer-mapping-form.vue @@ -403,7 +403,7 @@ export default { h1, h2 { font-size: 20px; font-weight: 500; - color: $tertiary; + color: $blue5; display: inline-block; } a.back-link{ @@ -452,13 +452,13 @@ export default { .section-label { font-size: 16px !important; font-weight: 500 !important; - color: $tertiary !important; + color: $blue5 !important; line-height: 1.2em; } .source-metadatum { padding: 2px 0; - border-bottom: 1px solid $tainacan-input-background; + border-bottom: 1px solid $gray2; width: 100%; margin-bottom: 6px; display: flex; @@ -474,7 +474,7 @@ export default { } .mapping-header-label { - color: $gray-light; + color: $gray4; margin: 12px 0 6px 0; } diff --git a/src/admin/components/edition/item-edition-form.vue b/src/admin/components/edition/item-edition-form.vue index 9762bb4bd..45b703661 100644 --- a/src/admin/components/edition/item-edition-form.vue +++ b/src/admin/components/edition/item-edition-form.vue @@ -896,7 +896,7 @@ export default { height: 36px; width: 36px; border: none; - background-color: $tainacan-input-background; + background-color: $gray2; color: $secondary; padding: 0px; border-top-left-radius: 2px; @@ -954,7 +954,7 @@ export default { label { font-size: 16px !important; font-weight: 500 !important; - color: $tertiary !important; + color: $blue5 !important; line-height: 1.2em; } } @@ -983,11 +983,11 @@ export default { height: 72px; width: 72px; border: none; - background-color: $tainacan-input-background; + background-color: $gray2; color: $secondary; margin-bottom: 6px; &:hover { - background-color: $primary-light; + background-color: $turquoise2; cursor: pointer; } } @@ -1001,12 +1001,12 @@ export default { margin-right: 24px; .icon { font-size: 18px !important; - color: $gray; + color: $gray3; } } } .section-attachments { - border: 1px solid $draggable-border-color; + border: 1px solid $gray2; height: 250px; max-width: 100%; resize: vertical; @@ -1069,7 +1069,7 @@ export default { font-weight: bold; z-index: 99; text-align: center; - color: gray; + color: $gray4; top: 70px; max-width: 90px; } @@ -1086,7 +1086,7 @@ export default { position: absolute; bottom: 0; z-index: 999999; - background-color: $primary-lighter; + background-color: $turquoise1; width: 100%; height: 65px; display: flex; @@ -1101,12 +1101,12 @@ export default { } @keyframes blink { - from { color: $tertiary; } - to { color: $gray-light; } + from { color: $blue5; } + to { color: $gray4; } } .update-warning { - color: $tertiary; + color: $blue5; animation-name: blink; animation-duration: 0.5s; animation-delay: 0.5s; @@ -1115,7 +1115,7 @@ export default { } .update-info-section { - color: $gray-light; + color: $gray4; margin-right: auto; } diff --git a/src/admin/components/edition/metadatum-edition-form.vue b/src/admin/components/edition/metadatum-edition-form.vue index 6a11ab045..78345c9a4 100644 --- a/src/admin/components/edition/metadatum-edition-form.vue +++ b/src/admin/components/edition/metadatum-edition-form.vue @@ -338,8 +338,8 @@ form.inCollapse { padding: 1.0em 2.0em; - border-top: 1px solid $draggable-border-color; - border-bottom: 1px solid $draggable-border-color; + border-top: 1px solid $gray2; + border-bottom: 1px solid $gray2; margin-top: 1.0em; } diff --git a/src/admin/components/edition/term-edition-form.vue b/src/admin/components/edition/term-edition-form.vue index 3a52eb1b7..78e97ef21 100644 --- a/src/admin/components/edition/term-edition-form.vue +++ b/src/admin/components/edition/term-edition-form.vue @@ -245,7 +245,7 @@ form { padding: 2.0rem 0rem 1rem 3rem; - border-left: 1px solid $draggable-border-color; + border-left: 1px solid $gray2; margin-top: 1.0em; .tainacan-page-title { @@ -254,7 +254,7 @@ h2 { font-size: 20px; font-weight: 500; - color: $tertiary; + color: $blue5; display: inline-block; } hr{ @@ -283,7 +283,7 @@ font-weight: bold; z-index: 99; text-align: center; - color: gray; + color: $gray4; } #button-delete-header, #button-edit-header { diff --git a/src/admin/components/lists/collections-list.vue b/src/admin/components/lists/collections-list.vue index e1501ac22..1575ad21d 100644 --- a/src/admin/components/lists/collections-list.vue +++ b/src/admin/components/lists/collections-list.vue @@ -388,10 +388,10 @@ export default { height: 40px; .select-all { - color: $gray-light; + color: $gray4; font-size: 14px; &:hover { - color: $gray-light; + color: $gray4; } } } diff --git a/src/admin/components/lists/filters-list.vue b/src/admin/components/lists/filters-list.vue index bd987e655..d11ba4719 100644 --- a/src/admin/components/lists/filters-list.vue +++ b/src/admin/components/lists/filters-list.vue @@ -476,7 +476,7 @@ export default { .page-title { border-bottom: 1px solid $secondary; h2 { - color: $tertiary; + color: $blue5; font-weight: 500; } margin: 1em 0em 2.0em 0em; @@ -532,7 +532,7 @@ export default { padding-right: 6em; } .grip-icon { - fill: $gray; + fill: $gray3; top: 2px; position: relative; } @@ -550,7 +550,7 @@ export default { } .label-details { font-weight: normal; - color: $gray; + color: $gray3; } .not-saved { font-style: italic; @@ -574,8 +574,8 @@ export default { form { padding: 1.0em 2.0em; - border-top: 1px solid $draggable-border-color; - border-bottom: 1px solid $draggable-border-color; + border-top: 1px solid $gray2; + border-bottom: 1px solid $gray2; margin-top: 1.0em; } &.not-sortable-item, &.not-sortable-item:hover { @@ -583,7 +583,7 @@ export default { background-color: white !important; .handle .label-details, .handle .icon { - color: $gray !important; + color: $gray3 !important; } } &.not-focusable-item, &.not-focusable-item:hover { @@ -593,11 +593,11 @@ export default { color: $secondary; } .handle .label-details, .handle .icon { - color: $gray !important; + color: $gray3 !important; } } &.disabled-metadatum { - color: $gray; + color: $gray3; } } .active-filter-item:hover:not(.not-sortable-item) { @@ -630,7 +630,7 @@ export default { } } .sortable-ghost { - border: 1px dashed $draggable-border-color; + border: 1px dashed $gray2; display: block; padding: 0.7em 0.9em; margin: 4px; @@ -638,7 +638,7 @@ export default { position: relative; .grip-icon { - fill: $gray; + fill: $gray3; top: 2px; position: relative; } @@ -678,12 +678,12 @@ export default { line-height: 1.3em; height: 40px; position: relative; - border: 1px solid $draggable-border-color; + border: 1px solid $gray2; border-radius: 1px; transition: left 0.2s ease; .grip-icon { - fill: $gray; + fill: $gray3; top: -3px; position: relative; display: inline-block; @@ -721,7 +721,7 @@ export default { } &:before { top: -1px; - border-color: transparent $draggable-border-color transparent transparent; + border-color: transparent $gray2 transparent transparent; border-right-width: 16px; border-top-width: 20px; border-bottom-width: 20px; diff --git a/src/admin/components/lists/items-list.vue b/src/admin/components/lists/items-list.vue index 7a3112196..8e689e988 100644 --- a/src/admin/components/lists/items-list.vue +++ b/src/admin/components/lists/items-list.vue @@ -607,10 +607,10 @@ export default { height: 40px; .select-all { - color: $gray-light; + color: $gray4; font-size: 14px; &:hover { - color: $gray-light; + color: $gray4; } } } diff --git a/src/admin/components/lists/metadata-list.vue b/src/admin/components/lists/metadata-list.vue index f7e4b7158..1ac2711fc 100644 --- a/src/admin/components/lists/metadata-list.vue +++ b/src/admin/components/lists/metadata-list.vue @@ -752,7 +752,7 @@ export default { .page-title { border-bottom: 1px solid $secondary; h2 { - color: $tertiary; + color: $blue5; font-weight: 500; } margin: 1em 0em 2.0em 0em; @@ -818,7 +818,7 @@ export default { padding-right: 6em; } .grip-icon { - fill: $gray; + fill: $gray3; top: 2px; position: relative; } @@ -836,7 +836,7 @@ export default { } .label-details { font-weight: normal; - color: $gray; + color: $gray3; } .not-saved { font-style: italic; @@ -863,7 +863,7 @@ export default { background-color: white !important; .handle .label-details, .handle .icon { - color: $gray !important; + color: $gray3 !important; } } &.not-focusable-item, &.not-focusable-item:hover { @@ -873,11 +873,11 @@ export default { color: $secondary; } .handle .label-details, .handle .icon { - color: $gray !important; + color: $gray3 !important; } } &.disabled-metadatum { - color: $gray; + color: $gray3; } } .active-metadatum-item:hover:not(.not-sortable-item) { @@ -910,7 +910,7 @@ export default { } } .sortable-ghost { - border: 1px dashed $draggable-border-color; + border: 1px dashed $gray2; display: block; padding: 0.7em 0.9em; margin: 4px; @@ -956,12 +956,12 @@ export default { line-height: 1.3em; height: 40px; position: relative; - border: 1px solid $draggable-border-color; + border: 1px solid $gray2; border-radius: 1px; transition: left 0.2s ease; .grip-icon { - fill: $gray; + fill: $gray3; top: -3px; position: relative; display: inline-block; @@ -999,7 +999,7 @@ export default { } &:before { top: -1px; - border-color: transparent $draggable-border-color transparent transparent; + border-color: transparent $gray2 transparent transparent; border-right-width: 16px; border-top-width: 20px; border-bottom-width: 20px; diff --git a/src/admin/components/lists/processes-list.vue b/src/admin/components/lists/processes-list.vue index 4b0314e01..a1c42a7d3 100644 --- a/src/admin/components/lists/processes-list.vue +++ b/src/admin/components/lists/processes-list.vue @@ -318,10 +318,10 @@ height: 40px; .select-all { - color: $gray-light; + color: $gray4; font-size: 14px; &:hover { - color: $gray-light; + color: $gray4; } } } diff --git a/src/admin/components/lists/taxonomies-list.vue b/src/admin/components/lists/taxonomies-list.vue index 2a819606a..81dc63c96 100644 --- a/src/admin/components/lists/taxonomies-list.vue +++ b/src/admin/components/lists/taxonomies-list.vue @@ -275,10 +275,10 @@ height: 40px; .select-all { - color: $gray-light; + color: $gray4; font-size: 14px; &:hover { - color: $gray-light; + color: $gray4; } } } diff --git a/src/admin/components/lists/terms-list.vue b/src/admin/components/lists/terms-list.vue index be2bb8fa9..538c5f22a 100644 --- a/src/admin/components/lists/terms-list.vue +++ b/src/admin/components/lists/terms-list.vue @@ -383,7 +383,7 @@ export default { margin-left: 30px; .gray-icon, .gray-icon .icon { - color: $tainacan-placeholder-color !important; + color: $gray4 !important; } .gray-icon .icon i::before, .gray-icon i::before { font-size: 21px !important; @@ -415,7 +415,7 @@ export default { } .label-details { font-weight: normal; - color: $gray; + color: $gray3; } .not-saved { font-style: italic; @@ -452,7 +452,7 @@ export default { cursor: default; .term-name { - color: $primary; + color: $turquoise3; } } diff --git a/src/admin/components/navigation/primary-menu.vue b/src/admin/components/navigation/primary-menu.vue index a6668ae9c..f8c98db20 100644 --- a/src/admin/components/navigation/primary-menu.vue +++ b/src/admin/components/navigation/primary-menu.vue @@ -97,7 +97,7 @@ export default { @import "../../scss/_variables.scss"; #primary-menu { - background-color: $primary; + background-color: $turquoise4; padding: 100px 0px 0px 0px; -webkit-transition: max-width 0.2s linear; /* Safari */ transition: max-width 0.2s linear; @@ -113,7 +113,7 @@ export default { } .separator { height: 2px; - background-color: $separator-color; + background-color: $turquoise5; width: 100%; margin: 24px 0; } @@ -134,11 +134,11 @@ export default { } a:hover, a.is-active { - background-color: $primary; - color: $tertiary; + background-color: $turquoise4; + color: $blue5; .activities-icon { - fill: $tertiary; + fill: $blue5; } } a:focus { diff --git a/src/admin/components/navigation/tainacan-header.vue b/src/admin/components/navigation/tainacan-header.vue index c6cf47bd3..54aaa8afe 100644 --- a/src/admin/components/navigation/tainacan-header.vue +++ b/src/admin/components/navigation/tainacan-header.vue @@ -205,7 +205,7 @@ border-width: 0 !important; height: 27px; font-size: 11px; - color: $gray-light; + color: $gray4; transition: width linear 0.15s; -webkit-transition: width linear 0.15s; width: 160px; @@ -215,7 +215,7 @@ } .icon:not(.add-i) { pointer-events: all; - color: $tertiary; + color: $blue5; cursor: pointer; height: 27px; font-size: 18px; diff --git a/src/admin/components/navigation/tainacan-subheader.vue b/src/admin/components/navigation/tainacan-subheader.vue index c378f4943..6bba71cc2 100644 --- a/src/admin/components/navigation/tainacan-subheader.vue +++ b/src/admin/components/navigation/tainacan-subheader.vue @@ -212,7 +212,7 @@ export default { // Tainacan Header #tainacan-subheader { - background-color: $primary-lighter; + background-color: $turquoise1; height: $subheader-height; max-height: $subheader-height; width: 100%; @@ -252,7 +252,7 @@ export default { h1 { font-size: 18px; font-weight: 500; - color: $tertiary; + color: $blue5; line-height: 22px; margin-bottom: 12px; max-width: 450px; @@ -281,7 +281,7 @@ export default { -webkit-transition: height 0.5s linear, padding 0.5s linear; a { - color: $tertiary; + color: $blue5; text-align: center; white-space: nowrap; overflow: hidden; diff --git a/src/admin/components/navigation/tainacan-title.vue b/src/admin/components/navigation/tainacan-title.vue index 1cddcf1b0..80240175d 100644 --- a/src/admin/components/navigation/tainacan-title.vue +++ b/src/admin/components/navigation/tainacan-title.vue @@ -149,7 +149,7 @@ export default { h1, h2 { font-size: 20px; font-weight: 500; - color: $tertiary; + color: $blue5; display: inline-block; } a.back-link{ diff --git a/src/admin/components/other/available-importers-modal.vue b/src/admin/components/other/available-importers-modal.vue index 22622e6dd..10ccfdd50 100644 --- a/src/admin/components/other/available-importers-modal.vue +++ b/src/admin/components/other/available-importers-modal.vue @@ -85,7 +85,7 @@ export default { .importer-types-container { .importer-type { - border-bottom: 1px solid $tainacan-input-background; + border-bottom: 1px solid $gray2; padding: 15px 8.3333333%; cursor: pointer; @@ -96,7 +96,7 @@ export default { border-bottom: none; } &:hover { - background-color: $tainacan-input-background; + background-color: $gray2; } } } diff --git a/src/admin/components/other/file-item.vue b/src/admin/components/other/file-item.vue index c97547a87..b23d5709e 100644 --- a/src/admin/components/other/file-item.vue +++ b/src/admin/components/other/file-item.vue @@ -110,7 +110,7 @@ export default { overflow: hidden; position: relative; display: inline-block; - background-color: $tainacan-input-background; + background-color: $gray2; &.rounded { border-bottom-left-radius: 5px; @@ -144,7 +144,7 @@ export default { } figcaption { - background-color: $tainacan-input-background; + background-color: $gray2; border-top-left-radius: 5px; border-top-right-radius: 5px; padding: 8px 15px; diff --git a/src/admin/components/other/help-button.vue b/src/admin/components/other/help-button.vue index 7a09c602f..d05e496a8 100644 --- a/src/admin/components/other/help-button.vue +++ b/src/admin/components/other/help-button.vue @@ -46,8 +46,8 @@ export default { } .help-tooltip { z-index: 99999999999999999999; - color: $tertiary; - background-color: $primary-light; + color: $blue5; + background-color: $turquoise2; border: none; display: block; border-radius: 5px; @@ -86,7 +86,7 @@ export default { border-style: solid; } &:before { - border-color: $primary-light transparent transparent transparent; + border-color: $turquoise2 transparent transparent transparent; border-right-width: 18px; border-top-width: 12px; border-left-width: 18px; diff --git a/src/admin/components/other/processes-popup.vue b/src/admin/components/other/processes-popup.vue index 208f3cd3e..74f4bc825 100644 --- a/src/admin/components/other/processes-popup.vue +++ b/src/admin/components/other/processes-popup.vue @@ -5,7 +5,7 @@ @click="showProcessesList = !showProcessesList" class="header-title">{{ getUnfinishedProcesses() + ' ' + $i18n.get('info_unfinished_processes') }} - + - + @@ -86,7 +86,7 @@
+ class="icon has-text-blue5">

{{ hasAnyProcessExecuting ? (bgProcesses[0].progress_label ? bgProcesses[0].progress_label + ((bgProcesses[0].progress_value && bgProcesses[0].progress_value >= 0) ? ' - ' + bgProcesses[0].progress_value : '') : $i18n.get('label_no_details_of_process')): @@ -187,8 +187,8 @@ export default { .control.is-loading::after { border: 2px solid $success; - border-right-color: $tainacan-input-background; - border-top-color: $tainacan-input-background; + border-right-color: $gray2; + border-top-color: $gray2; } .processes-popup{ @@ -205,7 +205,7 @@ export default { .popup-header, .popup-footer { display: flex; align-items: center; - color: $tertiary; + color: $blue5; .header-title, .footer-title { margin-right: auto; } @@ -238,13 +238,13 @@ export default { .popup-list-subheader { background-color: white !important; padding: 6px 12px 12px 12px; - color: $gray-light; + color: $gray4; font-size: 0.625rem; a { float: right; } } li:hover { - background-color: $tainacan-input-background; + background-color: $gray2; .action-icon{ visibility: visible; @@ -255,7 +255,7 @@ export default { display: none; } .process-item>.process-title .mdi-menu-left, .process-item>.process-title .mdi-menu-right { - color: $gray !important; + color: $gray3 !important; } } @@ -280,7 +280,7 @@ export default { } .mdi-menu-left, .mdi-menu-right { - color: $primary-light; + color: $turquoise2; } } .action-icon { @@ -301,7 +301,7 @@ export default { overflow: hidden; max-width: calc(100% - 40px); font-size: 0.625rem; - color: $gray-light; + color: $gray4; animation-name: expand; animation-duration: 0.3s; } @@ -318,7 +318,7 @@ export default { border-style: solid; } &:before { - border-color: transparent transparent $primary-light transparent; + border-color: transparent transparent $turquoise2 transparent; border-right-width: 8px; border-bottom-width: 8px; border-left-width: 8px; diff --git a/src/admin/pages/lists/available-importers-page.vue b/src/admin/pages/lists/available-importers-page.vue index a6b3e3c59..6813858be 100644 --- a/src/admin/pages/lists/available-importers-page.vue +++ b/src/admin/pages/lists/available-importers-page.vue @@ -66,7 +66,7 @@ export default { flex: wrap; .importer-type { - border: 1px solid $tainacan-input-background; + border: 1px solid $gray2; padding: 15px; margin: 20px; cursor: pointer; diff --git a/src/admin/pages/lists/collections-page.vue b/src/admin/pages/lists/collections-page.vue index 2ff1a2cd8..52dee8dd1 100644 --- a/src/admin/pages/lists/collections-page.vue +++ b/src/admin/pages/lists/collections-page.vue @@ -87,7 +87,7 @@ v-if="status == undefined || status == ''" id="button-create-collection" tag="button" - class="button is-primary" + class="button is-secondary" :to="{ path: $routerHelper.getNewCollectionPath() }"> {{ $i18n.getFrom('collections', 'new_item') }} diff --git a/src/admin/pages/lists/items-page.vue b/src/admin/pages/lists/items-page.vue index 855659f98..b8a3bccf3 100644 --- a/src/admin/pages/lists/items-page.vue +++ b/src/admin/pages/lists/items-page.vue @@ -548,7 +548,7 @@ v-if="!hasFiltered && (status == undefined || status == '')" id="button-create-item" tag="button" - class="button is-primary" + class="button is-secondary" :to="{ path: $routerHelper.getNewItemPath(collectionId) }"> {{ $i18n.getFrom('items', 'add_new') }} @@ -1033,7 +1033,7 @@ h1 { font-size: 20px; font-weight: 500; - color: $tertiary; + color: $blue5; display: inline-block; } @@ -1050,7 +1050,7 @@ h1 { font-size: 20px; font-weight: 500; - color: $tertiary; + color: $blue5; display: inline-block; } @@ -1119,7 +1119,7 @@ .icon { pointer-events: all; cursor: pointer; - color: $tertiary; + color: $blue5; height: 27px; font-size: 18px !important; height: 2rem !important; @@ -1151,8 +1151,8 @@ height: 21px; width: 23px; border: none; - background-color: $primary-lighter; - color: $tertiary; + background-color: $turquoise1; + color: $blue5; padding: 0; border-top-right-radius: 2px; border-bottom-right-radius: 2px; @@ -1204,7 +1204,7 @@ } .gray-icon, .gray-icon .icon { - color: $tainacan-placeholder-color !important; + color: $gray4 !important; padding-right: 10px; } .gray-icon .icon i::before, .gray-icon i::before { @@ -1254,7 +1254,7 @@ .icon { pointer-events: all; cursor: pointer; - color: $tertiary; + color: $blue5; height: 27px; font-size: 18px !important; height: 2rem !important; diff --git a/src/admin/pages/lists/taxonomies-page.vue b/src/admin/pages/lists/taxonomies-page.vue index b087a7e06..a275f1e33 100644 --- a/src/admin/pages/lists/taxonomies-page.vue +++ b/src/admin/pages/lists/taxonomies-page.vue @@ -58,7 +58,7 @@ v-if="status == undefined || status == ''" id="button-create-taxonomy" tag="button" - class="button is-primary" + class="button is-secondary" :to="{ path: $routerHelper.getNewTaxonomyPath() }"> {{ $i18n.getFrom('taxonomies', 'new_item') }} diff --git a/src/admin/pages/singles/item-page.vue b/src/admin/pages/singles/item-page.vue index 3ac191f23..17087087a 100644 --- a/src/admin/pages/singles/item-page.vue +++ b/src/admin/pages/singles/item-page.vue @@ -273,7 +273,7 @@ height: 36px; width: 36px; border: none; - background-color: $tainacan-input-background; + background-color: $gray2; color: $secondary; padding: 0px; border-top-left-radius: 2px; @@ -333,7 +333,7 @@ } .field { - border-bottom: 1px solid $draggable-border-color; + border-bottom: 1px solid $gray2; padding: 10px 25px; .label { @@ -352,7 +352,7 @@ label { font-size: 16px !important; font-weight: 500 !important; - color: $tertiary !important; + color: $blue5 !important; line-height: 1.2em; } } @@ -381,11 +381,11 @@ height: 72px; width: 72px; border: none; - background-color: $tainacan-input-background; + background-color: $gray2; color: $secondary; margin-bottom: 6px; &:hover { - background-color: $primary-light; + background-color: $turquoise2; cursor: pointer; } } @@ -404,12 +404,12 @@ .icon { font-size: 18px !important; - color: $gray; + color: $gray3; } } } .section-attachments { - border: 1px solid $draggable-border-color; + border: 1px solid $gray2; height: 250px; max-width: 100%; resize: vertical; @@ -443,7 +443,7 @@ font-weight: bold; z-index: 99; text-align: center; - color: gray; + color: $gray4; top: 70px; max-width: 90px; } @@ -454,7 +454,7 @@ position: absolute; bottom: 0; z-index: 999999; - background-color: $primary-lighter; + background-color: $turquoise1; width: 100%; height: 65px; diff --git a/src/admin/scss/_buttons.scss b/src/admin/scss/_buttons.scss index 066d6485a..ec1ac4e9d 100644 --- a/src/admin/scss/_buttons.scss +++ b/src/admin/scss/_buttons.scss @@ -14,7 +14,7 @@ background: $secondary !important; } &.is-primary:hover, &.is-primary:focus { - background: $primary !important; + background: $turquoise3 !important; } &.is-success:hover, &.is-success:focus { background: $success !important; @@ -29,7 +29,7 @@ &.is-outlined { color: #150e38 !important; background-color: white !important; - border-color: $gray-light !important; + border-color: $gray4 !important; } &:focus { outline: 0px; @@ -37,8 +37,8 @@ &[disabled], &:hover[disabled] { border: none !important; cursor: not-allowed !important; - color: $gray-light !important; - background-color: $tainacan-input-background !important; + color: $gray4 !important; + background-color: $gray2 !important; } &.is-white[disabled] { background-color: white !important; diff --git a/src/admin/scss/_checkboxes.scss b/src/admin/scss/_checkboxes.scss index d53bbff13..eaa10f554 100644 --- a/src/admin/scss/_checkboxes.scss +++ b/src/admin/scss/_checkboxes.scss @@ -10,7 +10,7 @@ flex-shrink: 0; border-radius: 0; display: inline-block; - border: 1px solid $gray-light; + border: 1px solid $gray4; transition: background 150ms ease-out; box-shadow: none !important; } @@ -19,10 +19,10 @@ &:active input[type="checkbox"] + .check, &:hover input[type="checkbox"] + .check { box-shadow: none !important; - border-color: $gray-light !important; + border-color: $gray4 !important; } input[type="checkbox"]:checked + .check { background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23000' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center !important; - border-color: $gray-light !important; + border-color: $gray4 !important; } } \ No newline at end of file diff --git a/src/admin/scss/_dropdown-and-autocomplete.scss b/src/admin/scss/_dropdown-and-autocomplete.scss index 1e8989ff4..27ba0ff00 100644 --- a/src/admin/scss/_dropdown-and-autocomplete.scss +++ b/src/admin/scss/_dropdown-and-autocomplete.scss @@ -28,9 +28,9 @@ label { margin-bottom: 0; } &.control { font-size: 13px !important; } .b-checkbox { width: 100% }; - &:hover { background-color: $primary-lighter; } - .is-small { color: gray; } - &.is-active { background-color: $primary-light; } + &:hover { background-color: $turquoise1; } + .is-small { color: $gray4; } + &.is-active { background-color: $turquoise2; } } } } @@ -45,7 +45,7 @@ .input { margin-bottom: 0px !important; } .input.has-selected, .input:focus, .input:active { background-color: white; - border: 1px solid $tainacan-input-background !important; + border: 1px solid $gray2 !important; } .tag { background: white; @@ -53,7 +53,7 @@ padding-left: 0.5em; &.is-delete { - color: $gray-light; + color: $gray4; &::after { height: 30% !important; width: 1px !important; @@ -71,7 +71,7 @@ } .selected-list-box { padding: 4px 0px; - border: 1px solid $tainacan-input-background; + border: 1px solid $gray2; background-color: white; display: flex; font-size: 12px; @@ -85,7 +85,7 @@ padding-left: 0.5em; &.is-delete { - color: $gray-light; + color: $gray4; &::after { height: 30% !important; width: 1px !important; diff --git a/src/admin/scss/_inputs.scss b/src/admin/scss/_inputs.scss index 5c6ee6c6b..c2d5d339c 100644 --- a/src/admin/scss/_inputs.scss +++ b/src/admin/scss/_inputs.scss @@ -7,10 +7,10 @@ &:focus, &:active { box-shadow: none !important; background-color: white; - border: 1px solid $tainacan-input-background !important; + border: 1px solid $gray2 !important; } &[disabled] { - color: $tainacan-placeholder-color; - background-color: $tainacan-input-background; + color: $gray4; + background-color: $gray2; } } diff --git a/src/admin/scss/_modals.scss b/src/admin/scss/_modals.scss index 1d21781c3..ab9f9630d 100644 --- a/src/admin/scss/_modals.scss +++ b/src/admin/scss/_modals.scss @@ -7,7 +7,7 @@ h1, h2 { font-size: 20px; font-weight: 500; - color: $tertiary; + color: $blue5; display: inline-block; } a.back-link{ @@ -45,7 +45,7 @@ background-color: rgba(0, 0, 0, 0.70); } .modal-card { - background-color: $modal-backgound-color; + background-color: $turquoise2; color: $secondary; border-radius: 10px; flex-wrap: wrap; @@ -54,7 +54,7 @@ margin: 0 auto !important; .modal-card-head, .modal-card-body, .modal-card-foot { - background-color: $modal-backgound-color; + background-color: $turquoise2; color: $secondary; border: none; padding-bottom: 12px; @@ -102,8 +102,8 @@ } .button:not(.is-success) { background-color: white; - color: $tertiary; - border: 1px solid $gray-light; + color: $blue5; + border: 1px solid $gray4; } } } @@ -146,7 +146,7 @@ // h1, h2 { // font-size: 20px; // font-weight: 500; -// color: $tertiary; +// color: $blue5; // display: inline-block; // margin-bottom: 3px; // } @@ -158,7 +158,7 @@ // border-top: none; // border-left: none; // border-right: none; -// border-bottom: 3px solid $primary; +// border-bottom: 3px solid $turquoise3; // } // } @@ -179,11 +179,11 @@ // padding: 12px; // } // .attachment.details { -// box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 14px $primary-light; +// box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 14px $turquoise2; // } // .attachment.details .check, .wp-core-ui .attachment.selected .check:focus, .wp-core-ui .media-frame.mode-grid .attachment.selected .check { -// background-color: $primary-light; -// box-shadow: 0 0 0 1px #fff,0 0 0 2px $primary-light; +// background-color: $turquoise2; +// box-shadow: 0 0 0 1px #fff,0 0 0 2px $turquoise2; // } // } // .media-sidebar { @@ -222,7 +222,7 @@ // cursor: default; // } // .media-button.button-secondary { -// color: $tertiary; +// color: $blue5; // border-color: #999; // background: white; // box-shadow: none; diff --git a/src/admin/scss/_notices.scss b/src/admin/scss/_notices.scss index df2ce6e8b..55594525e 100644 --- a/src/admin/scss/_notices.scss +++ b/src/admin/scss/_notices.scss @@ -4,8 +4,8 @@ box-shadow: none; &.is-dark { - background-color: $tainacan-input-background; - color: $gray-light; + background-color: $gray2; + color: $gray4; } &.is-warning { background-color: #e7dede; diff --git a/src/admin/scss/_pagination.scss b/src/admin/scss/_pagination.scss index a4b3c5fc6..21e8ddaa1 100644 --- a/src/admin/scss/_pagination.scss +++ b/src/admin/scss/_pagination.scss @@ -4,14 +4,14 @@ align-items: center; font-size: 0.85em !important; font-weight: normal !important; - border-top: 1px solid $gray; + border-top: 1px solid $gray3; padding-top: 0; padding-bottom: 0; margin-left: $page-side-padding; margin-right: $page-side-padding; padding-left: 0.75rem; padding-right: 0.75rem; - color: $gray-light; + color: $gray4; @media screen and (max-width: 768px) { flex-wrap: wrap; @@ -41,7 +41,7 @@ .label { font-size: 1em !important; font-weight: normal !important; - color: $gray-light; + color: $gray4; } } select { @@ -62,7 +62,7 @@ } a[disabled="disabled"] { - color: $gray-light; + color: $gray4; } .pagination-link, .pagination-previous, .pagination-next { background-color: transparent; @@ -70,11 +70,11 @@ border: none; } .pagination-link.is-current { - color: $gray-light; + color: $gray4; } .pagination-link::after:not(:last-child) { content: ','; - color: $gray-light; + color: $gray4; } .mdi-chevron-left::before { content: "\F40A"; diff --git a/src/admin/scss/_radios.scss b/src/admin/scss/_radios.scss index 4b324194c..0d39efa6b 100644 --- a/src/admin/scss/_radios.scss +++ b/src/admin/scss/_radios.scss @@ -3,7 +3,7 @@ input[type="radio"] + .check { width: 13px !important; height: 13px !important; - border: 1px solid $gray-light !important; + border: 1px solid $gray4 !important; } input[type="radio"] + .check::before { background: black !important; @@ -16,7 +16,7 @@ box-shadow: none !important; } input[type="radio"]:checked + .check { - border-color: $gray-light !important; + border-color: $gray4 !important; } &:focus input[type="radio"]:checked + .check { box-shadow: none !important; diff --git a/src/admin/scss/_selects.scss b/src/admin/scss/_selects.scss index 148723253..09d0af163 100644 --- a/src/admin/scss/_selects.scss +++ b/src/admin/scss/_selects.scss @@ -11,7 +11,7 @@ margin-bottom: 0px !important; color: $tainacan-input-color; option:checked, option:hover { - background-color: $primary-lighter !important; + background-color: $turquoise1 !important; } &:focus, &:active { box-shadow: none !important; diff --git a/src/admin/scss/_switches.scss b/src/admin/scss/_switches.scss index 5e7ddec16..e20a2e276 100644 --- a/src/admin/scss/_switches.scss +++ b/src/admin/scss/_switches.scss @@ -1,8 +1,8 @@ .switch { input[type="checkbox"] + .check { - background-color: $gray-light; - border: 2px solid $gray-light; + background-color: $gray4; + border: 2px solid $gray4; width: 2.7em; height: 1.7em; transition: none; @@ -13,7 +13,7 @@ } } &:hover input[type="checkbox"]:checked + .check { - background-color: $primary-light; + background-color: $turquoise2; } input[type="checkbox"]:checked + .check { @@ -26,7 +26,7 @@ } } &:hover input[type="checkbox"] + .check { - background-color: $gray-light; + background-color: $gray4; } &:focus input[type="checkbox"] + .check, @@ -38,7 +38,7 @@ font-size: 9px; input[type="checkbox"] + .check { - border: 1.5px solid $gray-light; + border: 1.5px solid $gray4; width: 2.55em; height: 1.7em; diff --git a/src/admin/scss/_tables.scss b/src/admin/scss/_tables.scss index 7746802c6..b7615a398 100644 --- a/src/admin/scss/_tables.scss +++ b/src/admin/scss/_tables.scss @@ -45,7 +45,7 @@ } // Only to be used in case we can implement Column resizing // th:not(:last-child) { - // border-right: 1px solid $tainacan-input-background !important; + // border-right: 1px solid $gray2 !important; // } .thumbnail-cell { @@ -57,7 +57,7 @@ min-width: 80px; max-width: 80px; p { - color: $gray-light; + color: $gray4; font-size: 11px; line-height: 1.5; } @@ -66,7 +66,7 @@ min-width: 80px; max-width: 160px; p { - color: $gray-light; + color: $gray4; font-size: 11px; line-height: 1.5; } @@ -75,7 +75,7 @@ min-width: 120px; max-width: 200px; p { - color: $gray-light; + color: $gray4; font-size: 11px; line-height: 1.5; } @@ -84,7 +84,7 @@ min-width: 120px; max-width: 240px; p { - color: $gray-light; + color: $gray4; font-size: 11px; line-height: 1.5; } @@ -109,7 +109,7 @@ position: sticky; position: -webkit-sticky; background-color: white; - border-bottom: 1px solid $tainacan-input-background; + border-bottom: 1px solid $gray2; top: 0px; z-index: 9; padding: 10px; @@ -117,7 +117,7 @@ .th-wrap { font-size: 12px !important; - color: $gray-light; + color: $gray4; font-weight: normal !important; text-overflow: ellipsis; overflow-x: hidden; @@ -130,9 +130,9 @@ background-color: transparent; &.selected-row { - background-color: $primary-lighter; + background-color: $turquoise1; .checkbox-cell .checkbox, .actions-cell .actions-container { - background-color: $primary-lighter-hover; + background-color: $turquoise2; } } td { @@ -187,21 +187,21 @@ } &:hover { - background-color: $tainacan-input-background !important; + background-color: $gray1 !important; cursor: pointer; .checkbox-cell { position: sticky !important; position: -webkit-sticky !important; - background-color: $gray-hover; + background-color: $gray2; .checkbox { - background-color: $gray-hover !important; + background-color: $gray2 !important; } } .actions-cell { .actions-container { - background: $gray-hover !important; + background: $gray2 !important; } } diff --git a/src/admin/scss/_tabs.scss b/src/admin/scss/_tabs.scss index c0f498d99..2f2d74cdd 100644 --- a/src/admin/scss/_tabs.scss +++ b/src/admin/scss/_tabs.scss @@ -9,7 +9,7 @@ } } li.is-active a { - border-bottom: 5px solid $primary; - color: $primary; + border-bottom: 5px solid $turquoise5; + color: $turquoise5; } } \ No newline at end of file diff --git a/src/admin/scss/_tags.scss b/src/admin/scss/_tags.scss index 4c2c23164..af331052b 100644 --- a/src/admin/scss/_tags.scss +++ b/src/admin/scss/_tags.scss @@ -1,5 +1,5 @@ .tags { - border: solid 1px $tainacan-input-background !important; + border: solid 1px $gray2 !important; border-radius: 20px; flex-wrap: nowrap; margin-bottom: 0.375rem !important; @@ -8,7 +8,7 @@ overflow: hidden; &:hover{ - background-color: $tainacan-input-background; + background-color: $gray2; } .tag { diff --git a/src/admin/scss/_tainacan-form.scss b/src/admin/scss/_tainacan-form.scss index fab67e0e7..53bc5d4bb 100644 --- a/src/admin/scss/_tainacan-form.scss +++ b/src/admin/scss/_tainacan-form.scss @@ -25,14 +25,14 @@ overflow: hidden; } .required-metadatum-asterisk { - color: $gray; + color: $gray3; &.is-danger { color: $danger; } } .input, .textarea { background-color: white; - border: 1px solid $tainacan-input-background; + border: 1px solid $gray2; color: $tainacan-input-color; transition: background-color 0.1s; @@ -70,9 +70,9 @@ select { color: $tainacan-input-color; background-color: white !important; - border: 1px solid $tainacan-input-background !important; + border: 1px solid $gray2 !important; &:focus>option:checked, &:focus>option:hover { - background-color: $primary-lighter !important; + background-color: $turquoise1 !important; } } } @@ -82,7 +82,7 @@ .button { justify-content: space-between; width: 100%; - border: 1px solid $tainacan-input-background !important; + border: 1px solid $gray2 !important; border-radius: 0 !important; padding: 2px 14px 2px 18px !important } diff --git a/src/admin/scss/_tooltips.scss b/src/admin/scss/_tooltips.scss index 48f9361e8..6ad92875b 100644 --- a/src/admin/scss/_tooltips.scss +++ b/src/admin/scss/_tooltips.scss @@ -9,8 +9,8 @@ } .tooltip-inner { - background: $primary-lighter; - color: $gray-light; + background: $turquoise1; + color: $gray4; font-size: 11px; border-radius: 5px; padding: 20px; @@ -24,7 +24,7 @@ border-style: solid; position: absolute; margin: 5px; - border-color: $primary-lighter; + border-color: $turquoise1; z-index: 1; } &[x-placement^="top"] { diff --git a/src/admin/scss/_variables.scss b/src/admin/scss/_variables.scss index c1491ccc7..3fd902e28 100644 --- a/src/admin/scss/_variables.scss +++ b/src/admin/scss/_variables.scss @@ -2,38 +2,72 @@ @import "../../../node_modules/bulma/sass/utilities/initial-variables"; @import "../../../node_modules/bulma/sass/utilities/functions"; -// Tainacan custom colors -$primary: #2cb4c1; -$primary-invert: findColorInvert($primary); -$secondary: #298596; -$secondary-invert: findColorInvert($secondary); -$tertiary: #01295c; -$tertiary-invert: findColorInvert($tertiary); - -$primary-light:#c1dae0; -$primary-lighter: #e6f6f8; -$primary-lighter-hover: #d1e6e6; -$primary-dark: #55A0AF; -$primary-darker: darken($primary-dark, 5%); - -$success: #25a189; -$success-invert: findColorInvert($success); - -$modal-backgound-color: #bfd8dd; -$separator-color: #2b98a4; +// NEW TAINACAN CUSTOM COLORS ------------------ +// Blue, used mainly for repository +$blue1: #e6f4ff; +$blue1-invert: findColorInvert($blue1); +$blue2: #cce3f2; +$blue2-invert: findColorInvert($blue2); +$blue3: #44638e; +$blue3-invert: findColorInvert($blue3); +$blue4: #284472; +$blue4-invert: findColorInvert($blue4); +$blue5: #01295c; +$blue5-invert: findColorInvert($blue5); +// Turquoise, used mainly for collection level +$turquoise1: #e6f6f8; +$turquoise1-invert: findColorInvert($turquoise1); +$turquoise2: #ceedef; +$turquoise2-invert: findColorInvert($turquoise2); +$turquoise3: #76c6cc; +$turquoise3-invert: findColorInvert($turquoise3); +$turquoise4: #4ea2ad; +$turquoise4-invert: findColorInvert($turquoise4); +$turquoise5: #298596; +$turquoise5-invert: findColorInvert($turquoise5); +// Gray, used mostyl for information +$gray1: #f2f2f2; +$gray1-invert: findColorInvert($gray1); +$gray2: #dbdbdb; +$gray2-invert: findColorInvert($gray2); +$gray3: #cbcbcb; +$gray3-invert: findColorInvert($gray3); +$gray4: #898d8f; +$gray4-invert: findColorInvert($gray4); +$gray5: #454647; +$gray5-invert: findColorInvert($gray5); +// Red, used for error messages +$red1: #eadadc; +$red1-invert: findColorInvert($red1); +$red2: #a23939; +$red2-invert: findColorInvert($red2); +// Green, used for success buttons +$green1: #daece6; +$green1-invert: findColorInvert($green1); +$green2: #25a189; +$green2-invert: findColorInvert($green2); +// Warning, used for warning messages +$yellow1: #fcebd9; +$yellow1-invert: findColorInvert($yellow1); +$yellow2: #e69810; +$yellow2-invert: findColorInvert($yellow2); +// Text, no quite black $tainacan-input-color: #1d1d1d; -$tainacan-input-background: #e5e5e5; -$tainacan-placeholder-color: #898d8f; -$draggable-border-color: #d8d8d8; -$gray-hover: #dcdcdc; -$gray: #b1b1b1; -$gray-invert: findColorInvert($gray); -$gray-light: #898d8f; -$gray-light-invert: findColorInvert($gray-light); -$danger: #a23939; +// Maps some of bulma's colors to custom variables +$primary: $turquoise3; +$primary-invert: findColorInvert($turquoise3); +$secondary: $turquoise5; +$secondary-invert: findColorInvert($turquoise5); +$success: $green2; +$success-invert: findColorInvert($success); +$danger: $red2; $danger-invert: findColorInvert($danger); +$warning: $yellow2; +$warning-invert: findColorInvert($warning); +$gray: $gray4; +$gray-invert: findColorInvert($gray4); @import "../../../node_modules/bulma/sass/utilities/derived-variables.sass"; @@ -43,17 +77,36 @@ $colors: ( "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), - "primary": ($primary, $primary-invert), - "secondary": ($secondary, $secondary-invert), + "primary": ($turquoise3, $turquoise3-invert), + "secondary": ($turquoise5, $turquoise5-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert) ); $addColors: ( - "gray": ($gray, $gray-invert), - "gray-light": ($gray-light, $gray-light-invert), - "tertiary": ($tertiary, $tertiary-invert), + "gray": ($gray4, $gray-invert), + "blue1": ($blue1, $blue1-invert), + "blue2": ($blue2, $blue2-invert), + "blue3": ($blue3, $blue3-invert), + "blue4": ($blue4, $blue4-invert), + "blue5": ($blue5, $blue5-invert), + "turquoise1": ($turquoise1, $turquoise1-invert), + "turquoise2": ($turquoise2, $turquoise2-invert), + "turquoise3": ($turquoise3, $turquoise3-invert), + "turquoise4": ($turquoise4, $turquoise4-invert), + "turquoise5": ($turquoise5, $turquoise5-invert), + "gray1": ($gray1, $gray1-invert), + "gray2": ($gray2, $gray2-invert), + "gray3": ($gray3, $gray3-invert), + "gray4": ($gray4, $gray4-invert), + "gray5": ($gray5, $gray5-invert), + "red1": ($red1, $red1-invert), + "red2": ($red2, $red2-invert), + "green1": ($green1, $green1-invert), + "green2": ($green2, $green2-invert), + "yellow1": ($yellow1, $yellow1-invert), + "yellow2": ($yellow2, $yellow2-invert) ); $colors: map-merge($colors, $addColors); @@ -84,13 +137,13 @@ $link-invert: $secondary; $link-focus-border: $secondary; // Placeholder -$text-light: $tainacan-placeholder-color; +$text-light: $gray4; // Table -$table-head-cell-color: $gray-light; +$table-head-cell-color: $gray4; $table-head-cell-border-width: 0 0 1px !important; $table-row-active-color: #e5e5e5; -$table-foot-cell-color: $gray-light; +$table-foot-cell-color: $gray4; $table-foot-cell-border-width: 1px 0 0 !important; $table-cell-padding: 1.0em 0.75em; diff --git a/src/admin/scss/_view-mode-cards.scss b/src/admin/scss/_view-mode-cards.scss index 836b8d115..dd7b5522a 100644 --- a/src/admin/scss/_view-mode-cards.scss +++ b/src/admin/scss/_view-mode-cards.scss @@ -8,9 +8,9 @@ justify-content: center; .selected-card { - background-color: $primary-lighter; + background-color: $turquoise1; .metadata-title { - background-color: $primary-lighter-hover; + background-color: $turquoise2; } } @@ -29,7 +29,7 @@ } &:hover { - background-color: $tainacan-input-background !important; + background-color: $gray2 !important; } .card-checkbox { @@ -56,7 +56,7 @@ .card-line { height: 1px; - background-color: $tainacan-input-background; + background-color: $gray2; margin-left: -44px; margin-right: -44px; opacity: 0; @@ -87,7 +87,7 @@ } } &:hover .metadata-title { - background-color: $gray-hover !important; + background-color: $gray3 !important; } .media { @@ -97,7 +97,7 @@ padding: 0.75rem 1.375rem; flex: 1; font-size: 0.6875rem; - color: gray; + color: $gray4; overflow: hidden; width: 100%; height: 172px; diff --git a/src/admin/scss/_view-mode-grid.scss b/src/admin/scss/_view-mode-grid.scss index 4792be0ef..b10aca595 100644 --- a/src/admin/scss/_view-mode-grid.scss +++ b/src/admin/scss/_view-mode-grid.scss @@ -8,7 +8,7 @@ justify-content: center; .selected-grid-item { - background-color: $primary-lighter; + background-color: $turquoise1; } .tainacan-grid-item { @@ -18,7 +18,7 @@ text-align: center; &:hover { - background-color: $tainacan-input-background; + background-color: $gray2; } .grid-item-checkbox { @@ -37,7 +37,7 @@ padding: 8px; transition: visibility 0.2s, opacity 0.2s; margin-top: -43px; - background-color: $tainacan-input-background; + background-color: $gray2; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; @@ -51,7 +51,7 @@ } &.selected-grid-item { .actions-area { - background-color: $primary-lighter; + background-color: $turquoise1; } } diff --git a/src/admin/scss/_view-mode-records.scss b/src/admin/scss/_view-mode-records.scss index 09b160832..21ab10723 100644 --- a/src/admin/scss/_view-mode-records.scss +++ b/src/admin/scss/_view-mode-records.scss @@ -8,9 +8,9 @@ justify-content: center; .selected-record { - background-color: $primary-lighter; + background-color: $turquoise1; .metadata-title { - background-color: $primary-lighter-hover; + background-color: $turquoise2; } } @@ -29,7 +29,7 @@ } &:hover { - background-color: $tainacan-input-background !important; + background-color: $gray2 !important; } .record-checkbox { @@ -56,7 +56,7 @@ .record-line { height: 1px; - background-color: $tainacan-input-background; + background-color: $gray2; margin-left: -44px; margin-right: -44px; opacity: 0; @@ -87,7 +87,7 @@ } } &:hover .metadata-title { - background-color: $gray-hover !important; + background-color: $gray3 !important; } .media { @@ -97,7 +97,7 @@ padding: 0.75rem 1.375rem; flex: 1; font-size: 0.6875rem; - color: gray; + color: $gray4; overflow: hidden; width: 100%; @@ -108,7 +108,7 @@ white-space: nowrap; overflow: hidden; font-weight: 500; - color: $gray-light; + color: $gray4; } .metadata-value { diff --git a/src/admin/scss/tainacan-admin.scss b/src/admin/scss/tainacan-admin.scss index 650f50c53..c19a7f997 100644 --- a/src/admin/scss/tainacan-admin.scss +++ b/src/admin/scss/tainacan-admin.scss @@ -56,10 +56,10 @@ a:hover { &.disabled { pointer-events: none; cursor: default; - color: $tainacan-input-background !important; + color: $gray2 !important; .icon { - color: $tainacan-input-background !important; + color: $gray2 !important; } } } diff --git a/src/admin/theme-items-list.vue b/src/admin/theme-items-list.vue index f77ba0626..a8d5a59f4 100644 --- a/src/admin/theme-items-list.vue +++ b/src/admin/theme-items-list.vue @@ -70,7 +70,7 @@ export default { background: $secondary !important; } &.is-primary:hover, &.is-primary:focus { - background: $primary !important; + background: $turquoise3 !important; } &.is-success:hover, &.is-success:focus { background: $success !important; @@ -85,7 +85,7 @@ export default { &.is-outlined { color: #150e38 !important; background-color: white; - border-color: $gray-light !important; + border-color: $gray4 !important; } &:focus { outline: 0px; @@ -102,7 +102,7 @@ export default { } .input, .textarea { font-size: 14px; - border: 1px solid $tainacan-input-background; + border: 1px solid $gray2; border-radius: 1px !important; background-color: white; box-shadow: none !important; @@ -110,7 +110,7 @@ export default { &:focus, &:active { box-shadow: none !important; background-color: white; - border: 1px solid $tainacan-input-background !important; + border: 1px solid $gray2 !important; } } .dropdown { @@ -134,7 +134,7 @@ export default { height: 1.0em; flex-shrink: 0; border-radius: 0; - border: 1px solid $gray-light; + border: 1px solid $gray4; transition: background 150ms ease-out; box-shadow: none !important; } @@ -143,11 +143,11 @@ export default { &:active input[type="checkbox"] + .check, &:hover input[type="checkbox"] + .check { box-shadow: none !important; - border-color: $gray-light !important; + border-color: $gray4 !important; } input[type="checkbox"]:checked + .check { background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23000' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center !important; - border-color: $gray-light !important; + border-color: $gray4 !important; } } .b-radio.radio { @@ -155,7 +155,7 @@ export default { input[type="radio"] + .check { width: 13px !important; height: 13px !important; - border: 1px solid $gray-light !important; + border: 1px solid $gray4 !important; } input[type="radio"] + .check::before { background: black !important; @@ -168,7 +168,7 @@ export default { box-shadow: none !important; } input[type="radio"]:checked + .check { - border-color: $gray-light !important; + border-color: $gray4 !important; } &:focus input[type="radio"]:checked + .check { box-shadow: none !important; @@ -197,8 +197,8 @@ export default { } } li.is-active a { - border-bottom: 5px solid $primary; - color: $primary; + border-bottom: 5px solid $turquoise3; + color: $turquoise3; } } @@ -237,7 +237,7 @@ export default { .search-control { .gray-icon, .gray-icon .icon { - color: $tainacan-placeholder-color !important; + color: $gray4 !important; i::before { font-size: 21px; } diff --git a/src/classes/filter-types/tainacan-filter-item.vue b/src/classes/filter-types/tainacan-filter-item.vue index 8dbdc2904..c4fa86ab2 100644 --- a/src/classes/filter-types/tainacan-filter-item.vue +++ b/src/classes/filter-types/tainacan-filter-item.vue @@ -196,7 +196,7 @@ transform: none; margin-top: -0.6em; right: 0.95em; - color: $primary; + color: $turquoise3; } } @@ -221,7 +221,7 @@ border: none !important; } input, input:active, input:focus { - border: 1px solid $tainacan-input-background !important; + border: 1px solid $gray2 !important; } .control.has-icons-left .icon { top: 0px !important; diff --git a/src/classes/metadata-types/tainacan-form-item.vue b/src/classes/metadata-types/tainacan-form-item.vue index be372a8ab..b329cf18a 100644 --- a/src/classes/metadata-types/tainacan-form-item.vue +++ b/src/classes/metadata-types/tainacan-form-item.vue @@ -218,7 +218,7 @@ } .field { - border-bottom: 1px solid $draggable-border-color; + border-bottom: 1px solid $gray2; padding: 10px 25px; .label { @@ -230,7 +230,7 @@ .metadata-type { font-size: 13px; font-weight: 400; - color: $gray; + color: $gray3; top: -0.2em; position: relative; } diff --git a/src/theme-helper/view-mode-cards.vue b/src/theme-helper/view-mode-cards.vue index 5933dc2aa..026afcdab 100644 --- a/src/theme-helper/view-mode-cards.vue +++ b/src/theme-helper/view-mode-cards.vue @@ -99,13 +99,13 @@ export default {