mirror of
https://github.com/Bubka/2FAuth.git
synced 2024-11-26 02:04:52 +01:00
Fix light theme
This commit is contained in:
parent
0e73738ee1
commit
6e41e284b5
7
resources/js/assets/app.scss
vendored
7
resources/js/assets/app.scss
vendored
@ -1390,4 +1390,11 @@ footer.main .field.is-grouped {
|
||||
top: 4px;
|
||||
width: 29px;
|
||||
height: 29px;
|
||||
}
|
||||
|
||||
.light-or-darker {
|
||||
color: $grey-darker;
|
||||
}
|
||||
:root[data-theme="dark"] .light-or-darker {
|
||||
color: $grey-light;
|
||||
}
|
@ -4,6 +4,7 @@
|
||||
import Spinner from '@/components/Spinner.vue'
|
||||
import { useNotifyStore } from '@/stores/notify'
|
||||
import { FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
|
||||
import { UseColorMode } from '@vueuse/components'
|
||||
|
||||
const notify = useNotifyStore()
|
||||
|
||||
@ -153,26 +154,28 @@
|
||||
</nav>
|
||||
<div v-if="visibleAuthentications.length > 0">
|
||||
<div v-for="authentication in visibleAuthentications" :key="authentication.id" class="list-item is-size-6 is-size-7-mobile has-text-grey is-flex is-justify-content-space-between">
|
||||
<div>
|
||||
<UseColorMode v-slot="{ mode }">
|
||||
<div>
|
||||
<span v-if="isFailedEntry(authentication)" v-html="$t('admin.failed_login_on', { login_at: authentication.login_at })" />
|
||||
<span v-else-if="isSuccessfulLogout(authentication)" v-html="$t('admin.successful_logout_on', { login_at: authentication.logout_at })" />
|
||||
<span v-else v-html="$t('admin.successful_login_on', { login_at: authentication.login_at })" />
|
||||
<div>
|
||||
<span v-if="isFailedEntry(authentication)" v-html="$t('admin.failed_login_on', { login_at: authentication.login_at })" />
|
||||
<span v-else-if="isSuccessfulLogout(authentication)" v-html="$t('admin.successful_logout_on', { login_at: authentication.logout_at })" />
|
||||
<span v-else v-html="$t('admin.successful_login_on', { login_at: authentication.login_at })" />
|
||||
</div>
|
||||
<div>
|
||||
{{ $t('commons.IP') }}: <span class="light-or-darker">{{ authentication.ip_address }}</span> -
|
||||
{{ $t('commons.browser') }}: <span class="light-or-darker">{{ authentication.browser }}</span> -
|
||||
{{ $t('commons.operating_system_short') }}: <span class="light-or-darker">{{ authentication.platform }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{{ $t('commons.IP') }}: <span class="has-text-grey-light">{{ authentication.ip_address }}</span> -
|
||||
{{ $t('commons.browser') }}: <span class="has-text-grey-light">{{ authentication.browser }}</span> -
|
||||
{{ $t('commons.operating_system_short') }}: <span class="has-text-grey-light">{{ authentication.platform }}</span>
|
||||
<div :class="mode == 'dark' ? 'has-text-grey-darker' : 'has-text-grey-lighter'" class="is-align-self-center ">
|
||||
<font-awesome-layers class="fa-2x">
|
||||
<FontAwesomeIcon :icon="['fas', deviceIcon(authentication.device)]" transform="grow-6" fixed-width />
|
||||
<FontAwesomeIcon :icon="['fas', isFailedEntry(authentication) ? 'times' : 'check']"
|
||||
:transform="'shrink-7' + (authentication.device == 'desktop' ? ' up-2' : '')"
|
||||
:class="isFailedEntry(authentication) ? 'has-text-danger' + (mode == 'dark' ? '-dark' : '') : 'has-text-success' + (mode == 'dark' ? '-dark' : '')" fixed-width />
|
||||
</font-awesome-layers>
|
||||
</div>
|
||||
</div>
|
||||
<div class="is-align-self-center has-text-grey-darker">
|
||||
<font-awesome-layers class="fa-2x">
|
||||
<FontAwesomeIcon :icon="['fas', deviceIcon(authentication.device)]" transform="grow-6" fixed-width />
|
||||
<FontAwesomeIcon :icon="['fas', isFailedEntry(authentication) ? 'times' : 'check']"
|
||||
:transform="'shrink-7' + (authentication.device == 'desktop' ? ' up-2' : '')"
|
||||
:class="isFailedEntry(authentication) ? 'has-text-danger-dark' : 'has-text-success-dark'" fixed-width />
|
||||
</font-awesome-layers>
|
||||
</div>
|
||||
</UseColorMode>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="authentications.length == 0" class="mt-4">
|
||||
|
@ -1,7 +1,6 @@
|
||||
<script setup>
|
||||
const { copy } = useClipboard({ legacy: true })
|
||||
import { useNotifyStore } from '@/stores/notify'
|
||||
import { UseColorMode } from '@vueuse/components'
|
||||
|
||||
const notify = useNotifyStore()
|
||||
|
||||
@ -48,9 +47,7 @@
|
||||
<div class="block">
|
||||
{{ $t('errors.data_of_qrcode_is_not_valid_URI') }}
|
||||
</div>
|
||||
<UseColorMode v-slot="{ mode }">
|
||||
<div class="block mb-6" :class="mode == 'dark' ? 'has-text-light':'has-text-grey-dark'">{{ qrContent ? qrContent : '[' + trans('commons.nothing') + ']' }}</div>
|
||||
</UseColorMode>
|
||||
<div class="block mb-6 light-or-darker">{{ qrContent ? qrContent : '[' + trans('commons.nothing') + ']' }}</div>
|
||||
<!-- Copy to clipboard -->
|
||||
<div class="block has-text-link" v-if="qrContent">
|
||||
<button class="button is-link is-outlined is-rounded" @click.stop="copyToClipboard(qrContent)">
|
||||
|
@ -3,7 +3,6 @@
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { useBusStore } from '@/stores/bus'
|
||||
import { useNotifyStore } from '@/stores/notify'
|
||||
import { UseColorMode } from '@vueuse/components'
|
||||
import { useTwofaccounts } from '@/stores/twofaccounts'
|
||||
|
||||
const router = useRouter()
|
||||
@ -85,9 +84,7 @@
|
||||
</div>
|
||||
<!-- alternative methods -->
|
||||
<div class="column is-full">
|
||||
<UseColorMode v-slot="{ mode }">
|
||||
<div class="block" :class="mode == 'dark' ? 'has-text-light':'has-text-grey-dark'">{{ $t('twofaccounts.forms.alternative_methods') }}</div>
|
||||
</UseColorMode>
|
||||
<div class="block light-or-darker">{{ $t('twofaccounts.forms.alternative_methods') }}</div>
|
||||
<!-- upload a qr code -->
|
||||
<div class="block has-text-link" v-if="!user.preferences.useBasicQrcodeReader">
|
||||
<label role="button" tabindex="0" class="button is-link is-outlined is-rounded" ref="qrcodeInputLabel" @keyup.enter="qrcodeInputLabel.click()">
|
||||
|
@ -68,9 +68,9 @@
|
||||
'check_now' => 'Check now',
|
||||
'view_on_github' => 'View on Github',
|
||||
'x_is_available' => ':version is available',
|
||||
'successful_login_on' => 'Successful login on <span class="has-text-grey-light">:login_at</span>',
|
||||
'successful_logout_on' => 'Successful logout on <span class="has-text-grey-light">:login_at</span>',
|
||||
'failed_login_on' => 'Failed login on <span class="has-text-grey-light">:login_at</span>',
|
||||
'successful_login_on' => 'Successful login on <span class="light-or-darker">:login_at</span>',
|
||||
'successful_logout_on' => 'Successful logout on <span class="light-or-darker">:login_at</span>',
|
||||
'failed_login_on' => 'Failed login on <span class="light-or-darker">:login_at</span>',
|
||||
'last_accesses' => 'Last accesses',
|
||||
'see_full_log' => 'See full log',
|
||||
'browser_on_platform' => ':browser on :platform',
|
||||
|
Loading…
Reference in New Issue
Block a user