Enhance various elements styling with light theme On

This commit is contained in:
Bubka 2023-11-22 10:43:11 +01:00
parent a224436d0c
commit d58645f65a
4 changed files with 23 additions and 5 deletions

View File

@ -431,7 +431,7 @@ figure.no-icon {
}
.dots li[data-is-active]~li {
background: $grey;
background: $grey-light;
}
:root[data-theme="dark"] .dots li[data-is-active]~li {
background: $black-bis;
@ -448,6 +448,9 @@ figure.no-icon {
}
.dots.off li {
background: $grey-light;
}
:root[data-theme="dark"] .dots.off li {
background: $black-bis;
}
@ -1296,15 +1299,26 @@ footer.main .field.is-grouped {
border-width: 0 0 1px;
}
.card {
background-color: none;
border: 1px solid $grey-lighter;
box-shadow: none;
}
:root[data-theme="dark"] .card {
background-color: $black-ter;
border: 1px solid $grey-darker;
}
.card-footer {
border-top: 1px solid $grey-lighter;
}
:root[data-theme="dark"] .card-footer {
border-top: 1px solid $grey-darker;
}
.card-footer-item:not(:last-child) {
border-right: 1px solid $grey-lighter;
}
:root[data-theme="dark"] .card-footer-item:not(:last-child) {
border-right: 1px solid $grey-darker;
}

View File

@ -185,7 +185,7 @@
</VueFooter>
</FormWrapper>
</div>
<div v-if="createPATModalIsVisible" class="is-overlay has-background-black-ter modal-otp">
<div v-if="createPATModalIsVisible" class="is-overlay modal-otp modal-background">
<main class="main-section">
<FormWrapper title="settings.forms.new_token">
<form @submit.prevent="generatePAToken" @keydown="form.onKeydown($event)">

View File

@ -425,7 +425,7 @@
<!-- qcode fileupload -->
<div v-if="!isEditMode" class="field is-grouped">
<div class="control">
<div role="button" tabindex="0" class="file is-black is-small" @keyup.enter="qrcodeInputLabel.click()">
<div role="button" tabindex="0" class="file is-small" @keyup.enter="qrcodeInputLabel.click()">
<label class="file-label" :title="$t('twofaccounts.forms.use_qrcode.title')" ref="qrcodeInputLabel">
<input aria-hidden="true" tabindex="-1" class="file-input" type="file" accept="image/*" v-on:change="uploadQrcode" ref="qrcodeInput">
<span class="file-cta">

View File

@ -243,7 +243,9 @@
<div class="media">
<div class="media-left">
<figure class="image is-32x32">
<FontAwesomeIcon :icon="['fas', 'qrcode']" size="2x" class="has-text-grey-darker" />
<UseColorMode v-slot="{ mode }">
<FontAwesomeIcon :icon="['fas', 'qrcode']" size="2x" :class="mode == 'dark' ? 'has-text-grey-darker' : 'has-text-grey-lighter'" />
</UseColorMode>
</figure>
</div>
<div class="media-content">
@ -270,7 +272,9 @@
<div class="media">
<div class="media-left">
<figure class="image is-32x32">
<FontAwesomeIcon :icon="['fas', 'file-lines']" size="2x" class="has-text-grey-darker" />
<UseColorMode v-slot="{ mode }">
<FontAwesomeIcon :icon="['fas', 'file-lines']" size="2x" :class="mode == 'dark' ? 'has-text-grey-darker' : 'has-text-grey-lighter'" />
</UseColorMode>
</figure>
</div>
<div class="media-content">