diff --git a/src/admin/components/edition/category-edition-form.vue b/src/admin/components/edition/category-edition-form.vue index deca3fabf..aaa57a0d7 100644 --- a/src/admin/components/edition/category-edition-form.vue +++ b/src/admin/components/edition/category-edition-form.vue @@ -1,13 +1,9 @@ @@ -43,51 +47,61 @@ export default { a.help-button .icon { i, i::before { font-size: 0.9em !important; } - color: $gray; - &:hover { - color: $primary !important; + } + + .help-backdrop { + background-color: transparent; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 9999999999999999999; + display: none; + visibility: hidden; + opacity: 0; + + &.opened { + visibility: visible; + display: block; } + + } - - .help-tooltip.opened { - visibility: visible; - opacity: 1; - margin-bottom: 14px; - } - .help-tooltip { - color: #000; - background-color: #e8f9f5; - border: 1px solid #338591; - border-radius: 10px; + z-index: 99999999999999999999; + color: $secondary; + background-color: $primary-light; + border: none; + border-radius: 5px; margin: 0px 0px 0px -37px; position: absolute; - z-index: 999999999999999; - bottom: 100%; + bottom: calc(100% - 6px); left: 0%; min-width: 250px; display: block; + transition: margin-bottom 0.3s ease, opacity 0.4s ease; visibility: hidden; opacity: 0; - transition: opacity 0.4s ease, margin-bottom 0.3s ease; + + &.opened { + margin-bottom: 14px; + visibility: visible; + opacity: 1; + } .help-tooltip-header { - padding: 0.8em 0.8em 0.6em 0.8em; - border-bottom: 1px solid #909293; - font-size: 18px; - font-weight: bold; + padding: 0.8em 0.8em 0em 0.8em; h5 { + font-size: 16px; + font-weight: 700; margin-right: 25px; } .icon { - color: #909293 !important; - right: 14px; - top: 14px; + right: 12px; + top: 12px; position: absolute; - &:hover { - color: black !important; - } } } @@ -96,28 +110,21 @@ export default { font-size: 11px; } - &:after, &:before { content: ""; display: block; position: absolute; - left: 24px; + left: 28px; width: 0; height: 0; border-style: solid; } - &:after { - border-color: #e8f9f5 transparent transparent transparent; - border-right-width: 20px; - border-top-width: 16px; - border-left-width: 20px; - } &:before { - border-color: #338591 transparent transparent transparent; - border-right-width: 20px; - border-top-width: 16px; - border-left-width: 20px; - bottom: -20px; + border-color: $primary-light transparent transparent transparent; + border-right-width: 18px; + border-top-width: 12px; + border-left-width: 18px; + bottom: -15px; } } diff --git a/src/admin/scss/_variables.scss b/src/admin/scss/_variables.scss index c0104254f..6e41910f3 100644 --- a/src/admin/scss/_variables.scss +++ b/src/admin/scss/_variables.scss @@ -15,7 +15,7 @@ $primary-lighter: #e6f6f8; $primary-dark: #55A0AF; $primary-darker: darken($primary-dark, 5%); -$success: #25a088; +$success: #25a189; $success-invert: findColorInvert($success); $separator-color: #2b98a4; diff --git a/src/admin/scss/tainacan-admin.scss b/src/admin/scss/tainacan-admin.scss index b203251b4..72f7dcc7d 100644 --- a/src/admin/scss/tainacan-admin.scss +++ b/src/admin/scss/tainacan-admin.scss @@ -130,7 +130,7 @@ html { // Input components used in forms are gray in Tainacan .tainacan-form { - color: black; + color: $tainacan-input-color; .form-submit { justify-content: space-between !important; padding: 1em 1.2em 0.4em 1.2em; @@ -140,7 +140,7 @@ html { padding: 2px 30px !important; } .button.is-outlined { - color: $tertiary; + color: #150e38; } &.has-only-save { justify-content: end !important; @@ -252,6 +252,7 @@ html { } .button.is-small { height: 26px !important; + line-height: 12px; } .button:not(.is-small):not(.is-medium):not(.is-large) { height: 30px !important; diff --git a/src/admin/tainacan-admin-i18n.php b/src/admin/tainacan-admin-i18n.php index 416408d86..5a974f11f 100644 --- a/src/admin/tainacan-admin-i18n.php +++ b/src/admin/tainacan-admin-i18n.php @@ -235,6 +235,8 @@ return [ 'info_there_is_no_filter' => __( 'There is no filter here yet.', 'tainacan' ), 'info_changes' => __( 'Changes', 'tainacan' ), 'info_possible_external_sources' => __( 'Possible external sources: CSV, Instagram, Youtube, etc.', 'tainacan' ), + 'info_help_term_name' => __( 'The name of the Term.', 'tainacan' ), + 'info_help_term_description' => __( 'The description of the Term.', 'tainacan' ), // Tainacan Field Types 'tainacan-text' => __( 'Text', 'tainacan' ),