diff options
| author | Grigorii K. Shartsev <me@shgk.me> | 2024-01-02 16:16:42 +0100 |
|---|---|---|
| committer | backportbot[bot] <backportbot[bot]@users.noreply.github.com> | 2024-02-05 09:49:53 +0000 |
| commit | d36f846d350366d11ae794eb885d5bc55cef2389 (patch) | |
| tree | 534d49b591d1ee3c8a59484126abe91ee6aa8e92 /apps/theming | |
| parent | 9a0c5686c72c622e8e1f6b79a89a0a8ee5b34118 (diff) | |
| download | nextcloud-server-d36f846d350366d11ae794eb885d5bc55cef2389.tar.gz nextcloud-server-d36f846d350366d11ae794eb885d5bc55cef2389.zip | |
fix(theming): change color button contrast on user settings
Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
Diffstat (limited to 'apps/theming')
| -rw-r--r-- | apps/theming/src/components/BackgroundSettings.vue | 37 |
1 files changed, 22 insertions, 15 deletions
diff --git a/apps/theming/src/components/BackgroundSettings.vue b/apps/theming/src/components/BackgroundSettings.vue index 0a8c49be45e..deb0a93a51a 100644 --- a/apps/theming/src/components/BackgroundSettings.vue +++ b/apps/theming/src/components/BackgroundSettings.vue @@ -58,16 +58,15 @@ </button> <!-- Custom color picker --> - <NcColorPicker v-model="Theming.color" @input="debouncePickColor"> - <button class="background background__color" - :data-color="Theming.color" - :data-color-bright="invertTextColor(Theming.color)" - :style="{ backgroundColor: Theming.color, '--border-color': Theming.color}" - data-user-theming-background-color - tabindex="0"> - {{ t('theming', 'Change color') }} - </button> - </NcColorPicker> + <div class="background-color" + data-user-theming-background-color> + <NcColorPicker v-model="Theming.color" + @input="debouncePickColor"> + <NcButton type="ternary"> + {{ t('theming', 'Change color') }} + </NcButton> + </NcColorPicker> + </div> <!-- Remove background --> <button :aria-pressed="isBackgroundDisabled" @@ -113,6 +112,7 @@ import { Palette } from 'node-vibrant/lib/color.js' import axios from '@nextcloud/axios' import debounce from 'debounce' import NcColorPicker from '@nextcloud/vue/dist/Components/NcColorPicker.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import Vibrant from 'node-vibrant' import Check from 'vue-material-design-icons/Check.vue' @@ -133,6 +133,7 @@ export default { Check, Close, ImageEdit, + NcButton, NcColorPicker, }, @@ -341,6 +342,17 @@ export default { flex-wrap: wrap; justify-content: center; + .background-color { + display: flex; + justify-content: center; + align-items: center; + width: 176px; + height: 96px; + margin: 8px; + border-radius: var(--border-radius-large); + background-color: var(--color-primary); + } + .background { overflow: hidden; width: 176px; @@ -368,11 +380,6 @@ export default { border-color: var(--color-border); } - &__color { - color: var(--color-primary-text); - background-color: var(--color-primary-default); - } - // Over a background image &__default, &__shipped { |