mirror of
https://github.com/InvoiceShelf/InvoiceShelf.git
synced 2026-04-16 17:54:06 +00:00
88adfe0e50
Define 13 semantic color tokens (surface, text, border, hover) with light/dark values in themes.css. Register with Tailwind via @theme inline. Migrate all 335 Vue files from hardcoded gray/white classes to semantic tokens. Add theme toggle (sun/moon/system) in user avatar dropdown. Replace @tailwindcss/forms with custom form reset using theme vars. Add status badge and alert tokens for dark mode. Theme-aware chart grid/labels, skeleton placeholders, and editor. Inline script in <head> prevents flash of wrong theme on load. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
105 lines
3.0 KiB
Vue
105 lines
3.0 KiB
Vue
<template>
|
|
<BaseContentPlaceholders rounded>
|
|
<BasePage class="bg-surface">
|
|
|
|
<!-- Breadcrumb-->
|
|
<BaseContentPlaceholdersText class="mt-4 h-8 w-40" :lines="1"/>
|
|
<BaseContentPlaceholdersText class="mt-4 h-8 w-56 mb-4" :lines="1"/>
|
|
|
|
<!-- Product -->
|
|
<div class="lg:grid lg:grid-rows-1 lg:grid-cols-7 lg:gap-x-8 lg:gap-y-10 xl:gap-x-16 mt-6">
|
|
|
|
<!-- Product image -->
|
|
<div class="lg:row-end-1 lg:col-span-4">
|
|
<BaseContentPlaceholdersBox class="h-96 sm:w-full" rounded />
|
|
</div>
|
|
|
|
<!-- Product details -->
|
|
<div
|
|
class="
|
|
max-w-2xl
|
|
mx-auto
|
|
mt-10
|
|
lg:max-w-none lg:mt-0 lg:row-end-2 lg:row-span-2 lg:col-span-3
|
|
w-full
|
|
"
|
|
>
|
|
<!-- Average Rating -->
|
|
<div>
|
|
<h3 class="sr-only">Reviews</h3>
|
|
<BaseContentPlaceholdersText class="w-32 h-8" :lines="1" />
|
|
|
|
<p class="sr-only">4 out of 5 stars</p>
|
|
</div>
|
|
|
|
<!-- Module Name and Version -->
|
|
<div class="flex flex-col-reverse">
|
|
<div class="mt-4">
|
|
<BaseContentPlaceholdersText
|
|
class="w-48 xl:w-80 h-12"
|
|
:lines="1"
|
|
/>
|
|
<BaseContentPlaceholdersText
|
|
class="w-64 xl:w-80 h-8 mt-2"
|
|
:lines="1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Module Description -->
|
|
<div>
|
|
<BaseContentPlaceholdersText
|
|
class="w-full h-24 my-10"
|
|
:lines="1"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Module Pricing -->
|
|
<div>
|
|
<BaseContentPlaceholdersText
|
|
class="w-full h-24 mt-6 mb-6"
|
|
:lines="1"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Button Section -->
|
|
<div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2">
|
|
<BaseContentPlaceholdersText class="w-full h-14" :lines="1" />
|
|
</div>
|
|
|
|
<div class="mt-10"></div>
|
|
|
|
<!-- HightLight -->
|
|
<div class="border-t border-line-default mt-10 pt-10">
|
|
<div>
|
|
<BaseContentPlaceholdersText class="w-24 h-6" :lines="1" />
|
|
<BaseContentPlaceholdersText
|
|
class="mt-4 w-full h-20"
|
|
:lines="1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Social Share -->
|
|
<div class="border-t border-line-default mt-10 pt-10">
|
|
<BaseContentPlaceholdersText class="h-6 w-24" :lines="1" />
|
|
<BaseContentPlaceholdersText class="h-10 w-32 mt-4" :lines="1" />
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="
|
|
w-full
|
|
max-w-2xl
|
|
mx-auto
|
|
mt-16
|
|
lg:max-w-none lg:mt-0 lg:col-span-4
|
|
"
|
|
>
|
|
<BaseContentPlaceholdersBox class="h-96 sm:w-full" rounded />
|
|
</div>
|
|
</div>
|
|
</BasePage>
|
|
</BaseContentPlaceholders>
|
|
</template>
|