355 lines
12 KiB
Markdown
355 lines
12 KiB
Markdown
---
|
|
name: opencloud-style
|
|
description: "Use when modifying OpenCloud visual design, Tailwind classes, component styling, layout, typography, or page-level visual hierarchy. Ensures the project keeps its current clean sky-atlas visual language — airy, fresh, bright, observational — and avoids inconsistent dark or purple defaults."
|
|
---
|
|
|
|
# OpenCloud Visual Style
|
|
|
|
Use this skill whenever changing OpenCloud visual design, component styling, Tailwind classes, layout, typography, or any page-level appearance.
|
|
|
|
## Visual Direction
|
|
|
|
OpenCloud should feel like a clean sky atlas: airy, fresh, bright, and observational.
|
|
|
|
- Base surfaces: `white`, `slate-50`, `sky-50`, soft translucent white (`bg-white/80`, `bg-white/88`).
|
|
- Main accent: teal/cyan for navigation, identity, account surfaces.
|
|
- Secondary accent: sky blue for upload and action highlights.
|
|
- Supporting accent: amber only for rarity, badges, pending/review states.
|
|
- Danger accent: rose/red only for destructive or rejected states.
|
|
- Avoid purple as a default accent.
|
|
- Avoid black selected states except for text or rare high-contrast badges.
|
|
|
|
---
|
|
|
|
## Typography
|
|
|
|
**Font stack** (`src/style.css`, `App.vue`):
|
|
```
|
|
"IBM Plex Sans", "Noto Sans SC", "PingFang SC", sans-serif
|
|
```
|
|
Monospace: `"IBM Plex Mono", "SFMono-Regular", monospace`
|
|
|
|
**Type scale:**
|
|
|
|
| Size | Use |
|
|
|------|-----|
|
|
| `text-[11px]` | Header subtitle, heatmap weekday labels |
|
|
| `text-xs` | Uppercase section labels, captions, metadata, tags, help text |
|
|
| `text-sm` | Body text, descriptions, nav items, form labels, detail sections |
|
|
| `text-base` | Hero description paragraphs |
|
|
| `text-lg` | Logo brand name, card titles, item counters |
|
|
| `text-xl` | Modal titles, subsection headings, stat cards |
|
|
| `text-2xl` | Subsection headings, stat values, settings section titles |
|
|
| `text-3xl` | Stat values, avatar initials |
|
|
| `text-4xl` | Page H1 headings (all page heroes) |
|
|
| `text-5xl` | Login/Register hero text only |
|
|
| `text-6xl`+ | Decorative single characters, error page emoji |
|
|
|
|
**Font weights:**
|
|
- `font-medium` (500) — body text, nav items, form labels, tags
|
|
- `font-semibold` (600) — modal titles, item names, emphasis
|
|
- `font-bold` (700) — headings, stat values, card titles
|
|
- `font-black` (900) — Login/Register hero only, with `leading-[1.05]`
|
|
|
|
**Letter tracking:**
|
|
|
|
| Tracking | Where |
|
|
|----------|-------|
|
|
| `tracking-[0.12em]` | Nav links, upload/button text (uppercase) |
|
|
| `tracking-[0.18em]` | Info panel section labels |
|
|
| `tracking-[0.20em]` | Stat card labels |
|
|
| `tracking-[0.22em]` | Header subtitle, modal subtitle, quick-upload header |
|
|
| `tracking-[0.24em]` | Page hero section labels |
|
|
| `tracking-[0.26em]` | Login/Register hero labels |
|
|
|
|
---
|
|
|
|
## Border Radius
|
|
|
|
**All border-radius is `0px` by default** — enforced via Naive UI theme override and global CSS:
|
|
|
|
```css
|
|
[class~='rounded'], [class*='rounded-'] { border-radius: 0 !important; }
|
|
```
|
|
|
|
Only exceptions (all `!important` or explicit inline):
|
|
- Close/map buttons: `rounded-full` / `border-radius: 9999px`
|
|
- ImageDetailModal shell: `rounded-[30px]`
|
|
- MapView info panel cards: `rounded-2xl`
|
|
- MiniLocationMap marker dot: `rounded-full`
|
|
- UploadView native inputs: `rounded-lg`
|
|
|
|
---
|
|
|
|
## Shadows
|
|
|
|
**Signature pattern: hard offset box shadows** — `shadow-[Xpx_Xpx_0_0_rgba(...)]` with zero blur.
|
|
|
|
| Shadow | Offset | Use |
|
|
|--------|--------|-----|
|
|
| `shadow-[3px_3px_0_0_rgba(...)]` | 3/3 | Small header buttons, login button |
|
|
| `shadow-[4px_4px_0_0_rgba(...)]` | 4/4 | Logo box, primary CTAs, hidden header, profile avatar |
|
|
| `shadow-[6px_6px_0_0_rgba(...)]` | 6/6 | Navigation bar, search box |
|
|
| `shadow-[8px_8px_0_0_rgba(...)]` | 8/8 | Dropdown menus, archive panel, account card |
|
|
| `shadow-[10px_10px_0_0_rgba(...)]` | 10/10 | Login/Register hero sections |
|
|
| `shadow-[12px_12px_0_0_rgba(...)]` | 12/12 | Login/Register cards, CommunityView section, AuthConfirm card |
|
|
|
|
**Shadow colors by context:**
|
|
- `rgba(15,23,42,...)` — slate-900, neutral (most common)
|
|
- `rgba(14,165,233,...)` — sky-500 (sky-colored buttons)
|
|
- `rgba(20,184,166,...)` — teal-500 (teal accents)
|
|
|
|
**Standard Tailwind shadows** also used sparingly:
|
|
- `shadow-sm` — stat cards, gallery cards, encyclopedia cards
|
|
- `shadow-lg` — cloud card hover lift
|
|
- `shadow-2xl` — modal shells
|
|
|
|
---
|
|
|
|
## Gradients
|
|
|
|
All page backgrounds use gradients — avoid flat single-color backgrounds.
|
|
|
|
| Gradient | Where |
|
|
|----------|-------|
|
|
| `linear-gradient(180deg,#e0f2fe_0%,#f8fafc_100%)` | Page hero sections (standard) |
|
|
| `linear-gradient(180deg,#f0fdfa_0%,#f8fafc_100%)` | Community page, soft app pages |
|
|
| `linear-gradient(135deg,#f0fdfa_0%,#fff_48%,#eff6ff_100%)` | Login hero |
|
|
| `linear-gradient(135deg,#eff6ff_0%,#fff_42%,#f0fdfa_100%)` | Register hero |
|
|
| `linear-gradient(180deg,#f8fafc_0%,#eef6ff_55%,#f8fafc_100%)` | Admin page |
|
|
| `linear-gradient(135deg,#ecfeff_0%,#ccfbf1_100%)` | Brand chip/avatar |
|
|
| `linear-gradient(180deg,#f0fdfa_0%,#fff_100%)` | Account card header |
|
|
|
|
**App shell background** (`App.vue`):
|
|
```
|
|
radial-gradient(circle_at_top_left, rgba(12,148,136,0.12), transparent 28%)
|
|
linear-gradient(180deg, #f8fbfd 0%, #eef4f8 100%)
|
|
```
|
|
Plus a dotted grid overlay: `bg-[size:32px_32px] opacity-35`.
|
|
|
|
**Body background** (`style.css`):
|
|
```
|
|
linear-gradient(180deg, rgba(15,23,42,0.02), rgba(15,23,42,0)), #eef4f8
|
|
```
|
|
|
|
---
|
|
|
|
## Layout
|
|
|
|
**Page max-widths:**
|
|
- `max-w-7xl` — AppHeader, GalleryView, AdminView
|
|
- `max-w-6xl` — UploadView, ProfileView, EncyclopediaView
|
|
- `max-w-4xl` — ProfileSettingsView, CommunityView
|
|
- `max-w-3xl` — QuickUploadModal, MapPickerModal, AuthConfirmView
|
|
- `max-w-2xl` — ResetPasswordView, NotFoundView, ForbiddenView, CloudEditModal
|
|
|
|
**Page hero pattern** (consistent across all views):
|
|
```
|
|
border-b border-sky-100 bg-[linear-gradient(180deg,#e0f2fe_0%,#f8fafc_100%)]
|
|
max-w-{6xl|7xl} mx-auto px-4 py-10
|
|
text-sm font-medium uppercase tracking-[0.24em] text-sky-700 (subtitle)
|
|
h1 mt-3 text-4xl font-bold text-slate-900 (title)
|
|
p mt-4 max-w-2xl text-sm leading-7 text-slate-600 (description)
|
|
```
|
|
|
|
**Horizontal padding:** `px-4` / `sm:px-6` / `lg:px-8`
|
|
|
|
**Column systems:**
|
|
- Gallery masonry: `columns-2 gap-3 md:columns-3 xl:columns-4 [column-gap:0.75rem]`
|
|
- Card grids: `gap-4 md:grid-cols-2 xl:grid-cols-3` or `gap-4 md:grid-cols-4`
|
|
- Two-column splits: `lg:grid-cols-[1.1fr_0.9fr]`, `lg:grid-cols-[1.4fr_0.9fr]`
|
|
|
|
**Gap scale:** `gap-4`, `gap-5`, `gap-6` for card grids; `gap-2` for nav items; `space-y-6`/`space-y-8` between sections.
|
|
|
|
---
|
|
|
|
## Component Conventions
|
|
|
|
### Buttons
|
|
|
|
**Primary CTA (upload, action):**
|
|
```
|
|
inline-flex h-8 items-center border border-sky-200 bg-sky-100 px-3
|
|
text-sm font-medium uppercase tracking-[0.12em] text-sky-800
|
|
shadow-[4px_4px_0_0_rgba(14,165,233,0.14)]
|
|
transition-colors hover:bg-sky-50 hover:text-sky-900
|
|
```
|
|
Mobile: `h-8 md:h-10 md:px-4`
|
|
|
|
**Secondary/neutral:**
|
|
```
|
|
inline-flex h-8 items-center border border-slate-200 bg-white/80 px-3
|
|
text-sm font-medium text-slate-700
|
|
shadow-[3px_3px_0_0_rgba(15,23,42,0.06)]
|
|
hover:border-teal-200 hover:bg-teal-50 hover:text-teal-800
|
|
```
|
|
|
|
**Danger/delete:** `text-rose-600 hover:bg-rose-50 hover:text-rose-700`
|
|
|
|
**Map floating buttons:** `w-10 h-10 bg-white rounded-lg shadow-md flex items-center justify-center hover:bg-gray-50`
|
|
|
|
**Naive UI buttons** use `secondary strong` as default; `type="primary"` for primary actions; `block size="large"` for block forms.
|
|
|
|
### Cards
|
|
|
|
**Standard card:**
|
|
```
|
|
border bg-white text-left shadow-sm
|
|
transition-all hover:-translate-y-1 hover:shadow-lg
|
|
```
|
|
|
|
**Encyclopedia unlocked variant:** `border-amber-300 shadow-amber-100/60`
|
|
|
|
**Naive UI NCard:** `class="border border-slate-200 shadow-sm"`
|
|
|
|
### Modals
|
|
|
|
**Overlay:** `fixed inset-0 z-[110|130] bg-slate-950/60` (or `bg-black/85` for image detail)
|
|
|
|
**Shell:** `bg-white shadow-2xl` with max-w matching content width. ImageDetailModal uses `rounded-[30px]`; others are square.
|
|
|
|
**Close button:** Circular (`rounded-full`, `border-radius: 9999px`), semi-transparent background.
|
|
|
|
**Sections:** `border-b border-slate-200` separates header/body/footer.
|
|
|
|
### Inputs & Forms
|
|
|
|
**Native HTML inputs:**
|
|
```
|
|
border border-slate-300 px-3 py-2.5 text-sm
|
|
focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-500
|
|
```
|
|
|
|
**Labels:** `block text-sm font-medium text-slate-700 mb-1`
|
|
|
|
**Required marker:** `<span class="text-red-500">*</span>`
|
|
|
|
**Error text:** `text-sm text-red-500 mt-1`
|
|
|
|
**Checkboxes:** `h-5 w-5 border-slate-300 text-sky-500 focus:ring-sky-500`
|
|
|
|
### Tags & Badges
|
|
|
|
All use `inline-flex border px-3 py-1 text-xs font-medium` with color variants:
|
|
|
|
- `common`: `bg-sky-100 text-sky-700 border-sky-200`
|
|
- `uncommon`: `bg-amber-100 text-amber-700 border-amber-200`
|
|
- `rare`: `bg-rose-100 text-rose-700 border-rose-200`
|
|
- `approved`/`success`: `bg-emerald-100 text-emerald-700 border-emerald-200`
|
|
- `pending`: `bg-amber-100 text-amber-700 border-amber-200`
|
|
- `rejected`: `bg-rose-100 text-rose-700 border-rose-200`
|
|
- `hidden`/neutral: `bg-slate-100 text-slate-600`
|
|
|
|
### Menus & Dropdowns
|
|
|
|
**Account dropdown:**
|
|
```
|
|
border border-slate-200 bg-white shadow-[8px_8px_0_0_rgba(15,23,42,0.08)]
|
|
```
|
|
|
|
**Menu items:**
|
|
```
|
|
flex items-center gap-3 px-4 py-2.5 text-sm font-medium text-slate-700
|
|
transition-colors hover:bg-teal-50 hover:text-teal-800
|
|
```
|
|
|
|
**Danger menu item:** `text-rose-600 hover:bg-rose-50 hover:text-rose-700`
|
|
|
|
### Navigation
|
|
|
|
**Header:** `sticky top-0 z-50 h-28 md:h-16 bg-white/88 backdrop-blur-xl border-b border-slate-200/80`, scroll-hides with `transition-transform duration-300`.
|
|
|
|
**Selected nav item:** `bg-teal-100 text-teal-800 ring-1 ring-teal-200`
|
|
|
|
---
|
|
|
|
## Core Palette
|
|
|
|
Use these Tailwind families first:
|
|
|
|
- `slate` — text, borders, neutral panels
|
|
- `sky` — page gradients, upload/action emphasis, map/cloud atmosphere
|
|
- `teal` — navigation selected states, account identity, calm success-adjacent UI
|
|
- `cyan` — subtle sky gradients and avatar/logo surfaces
|
|
- `emerald` — explicit success/approved state only
|
|
- `amber` — pending/review/uncommon rarity
|
|
- `rose` — rejected/destructive/rare rarity
|
|
|
|
**Key hex values:**
|
|
|
|
| Role | Value |
|
|
|------|-------|
|
|
| Page background | `#eef4f8` / `#f3f7fb` |
|
|
| Body text | `#0f172a` (slate-900) |
|
|
| Secondary text | `#334155` (slate-700) |
|
|
| Muted text | `#64748b` (slate-500) |
|
|
| Borders | `#d9e3ee`, `#e2e8f0`, `#cbd5e1` |
|
|
| Selection | `rgba(15,118,110,0.18)` (teal-700) |
|
|
| Text on primary | `#0f172a` (dark, not white — Naive UI override) |
|
|
|
|
**Naive UI theme tokens** (`App.vue`):
|
|
```
|
|
primaryColor: '#0f766e' (teal-700)
|
|
infoColor: '#0369a1' (sky-700)
|
|
successColor: '#0f766e' (teal-700)
|
|
warningColor: '#d97706' (amber-600)
|
|
errorColor: '#dc2626' (red-600)
|
|
```
|
|
|
|
---
|
|
|
|
## Animation & Transitions
|
|
|
|
**Hover effects:**
|
|
- Cards: `transition-all hover:-translate-y-1 hover:shadow-lg` (lift)
|
|
- Images: `transition duration-500 group-hover:scale-[1.04]` (subtle zoom)
|
|
- Gallery items: `transition-transform duration-300 hover:-translate-y-1`
|
|
- Badges on cards: `transition-opacity md:opacity-0 md:group-hover:opacity-100`
|
|
|
|
**Modal transitions:**
|
|
- ImageDetailModal: opacity 180ms, shell scale+translateY 220ms, `cubic-bezier(0.22, 1, 0.36, 1)`
|
|
- Other modals: default Vue transitions
|
|
|
|
**Header scroll:** `transition-transform duration-300`
|
|
|
|
**Image loading:** `transition-opacity duration-300` for thumbnail-to-hires crossfade, low-res preview gets `blur-[1px]` until full-res loads.
|
|
|
|
**Skeleton shimmer:**
|
|
```
|
|
animate-pulse bg-[linear-gradient(110deg,#0f172a_0%,#1e293b_45%,#334155_55%,#0f172a_100%)]
|
|
bg-[length:220%_100%]
|
|
```
|
|
|
|
---
|
|
|
|
## Icons
|
|
|
|
**Library:** `@vicons/tabler` (Tabler Icons), rendered via `<NIcon size="16|18|20|22|30|42">` from Naive UI.
|
|
|
|
Common icons: `User`, `Settings`, `Logout`, `Shield`, `Search`, `X`, `Clock`, `Location`/`MapIcon`, `CloudUpload`, `Map`/`Satellite`, `Adjustments`, `Calendar`, `Refresh`, `InfoCircle`, `Lock`, `Check`, `Eye`/`EyeOff`, `Trash`
|
|
|
|
---
|
|
|
|
## Anti-Patterns
|
|
|
|
- Do not use purple as a fallback visual direction.
|
|
- Do not use `bg-slate-900 text-white` for ordinary selected navigation.
|
|
- Do not introduce dark-mode-heavy sections unless the surrounding page already uses that language.
|
|
- Do not overuse rounded rectangles; the project uses sharp, atlas-like panels.
|
|
- Do not mix random accent colors within the same feature. Pick one accent family and keep it consistent.
|
|
- Do not use flat single-color backgrounds where a gradient belongs.
|
|
- Do not add border-radius without an explicit reason — `0px` is the project default.
|
|
- Do not use white text on primary buttons — Naive UI primary buttons use dark text (`#0f172a`).
|
|
|
|
---
|
|
|
|
## Validation
|
|
|
|
After style changes, run:
|
|
|
|
```bash
|
|
npx vue-tsc -b
|
|
```
|
|
|
|
Run `npm run build` if the change touches routes, imported components, or package dependencies.
|