feat: migrate to Tailwind CSS v4 (#7614)
* chore: update deps * feat: use jsonc/x language * chore: update eslint 10.0 * fix: no-useless-assignment * feat: add CLAUDE.md * chore: ignore * feat: claude * fix: lint * chore: suppot eslint v10 * fix: lint * fix: lint * fix: type check * fix: unit test * fix: Suggested fix * fix: unit test * chore: update stylelint v17 * chore: update all major deps * fix: echarts console warn * chore: update vitest v4 * feat: add skills ignores * chore: update deps * chore: update deps * fix: cspell * chore: update deps * chore: update tailwindcss v4 * chore: remove postcss config * fix: no use catalog * chore: tailwind v4 config * fix: tailwindcss v4 sort * feat: use eslint-plugin-better-tailwindcss * fix: Interference between enforce-consistent-line-wrapping, jsx-curly-brace-presence and Prettier * fix: Interference between enforce-consistent-line-wrapping, jsx-curly-brace-presence and Prettier * fix(lint): resolve prettier and better-tailwindcss formatting conflicts * fix(tailwind): update theme references and lint sources * style(format): normalize apps docs and playground vue files * style(format): normalize core ui-kit components * style(format): normalize effects ui and layout components
This commit is contained in:
@@ -88,11 +88,11 @@ useScrollLock();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-background fixed z-[2000] size-full">
|
||||
<div class="fixed z-2000 size-full bg-background">
|
||||
<transition name="slide-left">
|
||||
<div v-show="!showUnlockForm" class="size-full">
|
||||
<div
|
||||
class="flex-col-center text-foreground/80 hover:text-foreground group fixed left-1/2 top-6 z-[2001] -translate-x-1/2 cursor-pointer text-xl font-semibold"
|
||||
class="group fixed top-6 left-1/2 z-2001 flex-col-center -translate-x-1/2 cursor-pointer text-xl font-semibold text-foreground/80 hover:text-foreground"
|
||||
@click="toggleUnlockForm"
|
||||
>
|
||||
<LockKeyhole
|
||||
@@ -100,20 +100,20 @@ useScrollLock();
|
||||
/>
|
||||
<span>{{ $t('ui.widgets.lockScreen.unlock') }}</span>
|
||||
</div>
|
||||
<div class="flex h-full w-full items-center justify-center">
|
||||
<div class="flex-center size-full">
|
||||
<div class="flex w-full justify-center gap-4 px-4 sm:gap-6 md:gap-8">
|
||||
<div
|
||||
class="bg-accent relative flex h-[140px] w-[140px] items-center justify-center rounded-xl text-[36px] sm:h-[160px] sm:w-[160px] sm:text-[42px] md:h-[200px] md:w-[200px] md:text-[72px]"
|
||||
class="relative flex-center h-[140px] w-[140px] rounded-xl bg-accent text-[36px] sm:h-[160px] sm:w-[160px] sm:text-[42px] md:h-[200px] md:w-[200px] md:text-[72px]"
|
||||
>
|
||||
<span
|
||||
class="absolute left-3 top-3 text-xs font-semibold sm:text-sm md:text-xl"
|
||||
class="absolute top-3 left-3 text-xs font-semibold sm:text-sm md:text-xl"
|
||||
>
|
||||
{{ meridiem }}
|
||||
</span>
|
||||
{{ hour }}
|
||||
</div>
|
||||
<div
|
||||
class="bg-accent flex h-[140px] w-[140px] items-center justify-center rounded-xl text-[36px] sm:h-[160px] sm:w-[160px] sm:text-[42px] md:h-[200px] md:w-[200px] md:text-[72px]"
|
||||
class="flex-center h-[140px] w-[140px] rounded-xl bg-accent text-[36px] sm:h-[160px] sm:w-[160px] sm:text-[42px] md:h-[200px] md:w-[200px] md:text-[72px]"
|
||||
>
|
||||
{{ minute }}
|
||||
</div>
|
||||
@@ -128,7 +128,7 @@ useScrollLock();
|
||||
class="flex-center size-full"
|
||||
@keydown.enter.prevent="handleSubmit"
|
||||
>
|
||||
<div class="flex-col-center mb-10 w-[90%] max-w-[300px] px-4">
|
||||
<div class="mb-10 flex-col-center w-[90%] max-w-[300px] px-4">
|
||||
<VbenAvatar :src="avatar" class="enter-x mb-6 size-20" />
|
||||
<div class="enter-x mb-2 w-full items-center">
|
||||
<Form />
|
||||
|
||||
Reference in New Issue
Block a user