677 lines
21 KiB
CSS
677 lines
21 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700;800&display=swap');
|
|
|
|
/* ========================================
|
|
設計系統核心變數
|
|
4px Grid System | 主色：綠色系
|
|
======================================== */
|
|
|
|
:root {
|
|
/* ========== 色彩系統 ========== */
|
|
|
|
/* Grey Scale - 0 (最深) 到 5 (白色) */
|
|
--grey-0: #1a1a1a; /* 主要文字 */
|
|
--grey-1: #4a4a4a; /* 次要文字 */
|
|
--grey-2: #6b6b6b; /* 輔助文字 */
|
|
--grey-3: #9e9e9e; /* 禁用狀態/Placeholder */
|
|
--grey-4: #e0e0e0; /* 邊框/分隔線 */
|
|
--grey-5: #ffffff; /* 白色背景 */
|
|
|
|
/* Primary Colors - 綠色主題 */
|
|
--primary-dark: #018a6a; /* Hover/Active 深色 */
|
|
--primary-main: #01ab83; /* 主要品牌色 */
|
|
--primary-light: #33bc9a; /* 淺色變化 */
|
|
--primary-lighter: #66cdb1; /* 更淺 */
|
|
--primary-lightest: #e6f7f3; /* 背景淺色 */
|
|
|
|
/* Semantic Colors - 語意色彩 */
|
|
--color-success: #01ab83;
|
|
--color-error: #dc2626;
|
|
--color-warning: #f59e0b;
|
|
--color-info: #3b82f6;
|
|
|
|
/* Background Colors - 背景色系統 */
|
|
/* 頁面背景 (Page Background) */
|
|
--bg-page: #f8fdfb; /* 主要頁面背景 - 淺綠色調 */
|
|
|
|
/* 卡片/容器背景 (Card/Container Background) */
|
|
--bg-card: #ffffff; /* 白色卡片背景 */
|
|
--bg-card-hover: #fafafa; /* 卡片 Hover 狀態 */
|
|
|
|
/* 輔助背景 (Secondary Backgrounds) */
|
|
--bg-light: #f8fdfb; /* 淺綠色背景 (同 --bg-page) */
|
|
--bg-light-grey: #f5f5f5; /* 淺灰色背景 */
|
|
--bg-white: #ffffff; /* 白色背景 (同 --bg-card) */
|
|
|
|
|
|
/* ========== 字體系統 ========== */
|
|
|
|
/* Font Sizes */
|
|
--font-display-lg: 4rem; /* 64px - 大標題 */
|
|
--font-display: 3rem; /* 48px - 展示標題 */
|
|
--font-h1: 2.5rem; /* 40px */
|
|
--font-h2: 2rem; /* 32px */
|
|
--font-h3: 1.75rem; /* 28px */
|
|
--font-h4: 1.5rem; /* 24px */
|
|
--font-h5: 1.25rem; /* 20px */
|
|
--font-body-lg: 1.125rem; /* 18px */
|
|
--font-body: 1rem; /* 16px - 預設 */
|
|
--font-body-sm: 0.875rem; /* 14px */
|
|
--font-caption: 0.75rem; /* 12px */
|
|
--font-overline: 0.6875rem; /* 11px */
|
|
|
|
/* Line Heights */
|
|
--line-display-lg: 4.5rem; /* 72px */
|
|
--line-display: 3.5rem; /* 56px */
|
|
--line-h1: 3rem; /* 48px */
|
|
--line-h2: 2.5rem; /* 40px */
|
|
--line-h3: 2.25rem; /* 36px */
|
|
--line-h4: 2rem; /* 32px */
|
|
--line-h5: 1.75rem; /* 28px */
|
|
--line-body-lg: 1.75rem; /* 28px */
|
|
--line-body: 1.5rem; /* 24px */
|
|
--line-body-sm: 1.25rem; /* 20px */
|
|
--line-caption: 1rem; /* 16px */
|
|
--line-overline: 1rem; /* 16px */
|
|
|
|
/* Font Weights */
|
|
--weight-regular: 400;
|
|
--weight-medium: 500;
|
|
--weight-semibold: 600;
|
|
--weight-bold: 700;
|
|
--weight-extrabold: 800;
|
|
|
|
|
|
/* ========== 間距系統 (4px Grid) ========== */
|
|
--spacing-xs: 8px;
|
|
--spacing-sm: 16px;
|
|
--spacing-md: 24px;
|
|
--spacing-lg: 40px;
|
|
|
|
|
|
/* ========== 圓角系統 ========== */
|
|
--radius-none: 0px;
|
|
--radius-sm: 4px;
|
|
--radius: 8px; /* 預設圓角 */
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
--radius-xl: 16px;
|
|
--radius-2xl: 20px;
|
|
--radius-3xl: 24px;
|
|
--radius-full: 9999px;
|
|
|
|
/* Semantic Radius - 語意化圓角 */
|
|
--radius-button: 8px;
|
|
--radius-card: 12px;
|
|
--radius-input: 8px;
|
|
--radius-dialog: 12px;
|
|
--radius-popover: 8px;
|
|
|
|
|
|
/* ========== 陰影系統 ========== */
|
|
--elevation-sm: 0px 4px 12px 0px rgba(1, 171, 131, 0.08);
|
|
--elevation-md: 0px 8px 24px 0px rgba(1, 171, 131, 0.12);
|
|
|
|
|
|
/* ========== Tailwind Semantic Token Mapping ========== */
|
|
/* 這些是為了與 Tailwind 的預設類別整合 */
|
|
--background: var(--bg-page); /* 頁面背景 */
|
|
--foreground: var(--grey-0);
|
|
--card: var(--bg-card); /* 卡片背景 */
|
|
--card-foreground: var(--grey-0);
|
|
--popover: var(--bg-card); /* Popover 使用卡片背景 */
|
|
--popover-foreground: var(--grey-0);
|
|
--primary: var(--primary-main);
|
|
--primary-hover: var(--primary-dark);
|
|
--primary-active: #016b54;
|
|
--primary-foreground: var(--grey-5);
|
|
--secondary: var(--bg-light-grey);
|
|
--secondary-foreground: var(--grey-0);
|
|
--muted: var(--grey-4);
|
|
--muted-foreground: var(--grey-2);
|
|
--accent: var(--primary-light);
|
|
--accent-foreground: var(--grey-5);
|
|
--destructive: var(--color-error);
|
|
--destructive-hover: #ef4444;
|
|
--destructive-foreground: var(--grey-5);
|
|
--success: var(--color-success);
|
|
--warning: var(--color-warning);
|
|
--info: var(--color-info);
|
|
--border: var(--grey-4);
|
|
--input: var(--grey-3);
|
|
--input-background: var(--grey-5);
|
|
--ring: var(--primary-main);
|
|
--chart-1: var(--primary-main);
|
|
--chart-2: var(--primary-light);
|
|
--chart-3: var(--color-warning);
|
|
--chart-4: var(--color-info);
|
|
--chart-5: var(--primary-lighter);
|
|
--radius: 8px;
|
|
}
|
|
|
|
|
|
/* ========================================
|
|
Base Styles
|
|
======================================== */
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
font-size: var(--font-body);
|
|
line-height: var(--line-body);
|
|
}
|
|
|
|
/* 強制所有表單元素使用白色背景 */
|
|
input,
|
|
textarea,
|
|
select,
|
|
[role="combobox"] {
|
|
background-color: var(--input-background);
|
|
}
|
|
}
|
|
|
|
|
|
/* ========================================
|
|
Typography System
|
|
只影響沒有 text-* class 的元素
|
|
======================================== */
|
|
|
|
@layer base {
|
|
h1:not([class*="text-"]):not([class*=" text-"]) {
|
|
font-size: var(--font-h1);
|
|
font-weight: var(--weight-bold);
|
|
line-height: var(--line-h1);
|
|
}
|
|
|
|
h2:not([class*="text-"]):not([class*=" text-"]) {
|
|
font-size: var(--font-h2);
|
|
font-weight: var(--weight-semibold);
|
|
line-height: var(--line-h2);
|
|
}
|
|
|
|
h3:not([class*="text-"]):not([class*=" text-"]) {
|
|
font-size: var(--font-h3);
|
|
font-weight: var(--weight-semibold);
|
|
line-height: var(--line-h3);
|
|
}
|
|
|
|
h4:not([class*="text-"]):not([class*=" text-"]) {
|
|
font-size: var(--font-h4);
|
|
font-weight: var(--weight-semibold);
|
|
line-height: var(--line-h4);
|
|
}
|
|
|
|
h5:not([class*="text-"]):not([class*=" text-"]) {
|
|
font-size: var(--font-h5);
|
|
font-weight: var(--weight-semibold);
|
|
line-height: var(--line-h5);
|
|
}
|
|
|
|
p:not([class*="text-"]):not([class*=" text-"]) {
|
|
font-size: var(--font-body);
|
|
font-weight: var(--weight-regular);
|
|
line-height: var(--line-body);
|
|
}
|
|
|
|
label:not([class*="text-"]):not([class*=" text-"]) {
|
|
font-size: var(--font-body-sm);
|
|
font-weight: var(--weight-semibold);
|
|
line-height: var(--line-body-sm);
|
|
}
|
|
|
|
button:not([class*="text-"]):not([class*=" text-"]) {
|
|
font-size: var(--font-body);
|
|
font-weight: var(--weight-semibold);
|
|
line-height: var(--line-body);
|
|
}
|
|
|
|
input:not([class*="text-"]):not([class*=" text-"]),
|
|
textarea:not([class*="text-"]):not([class*=" text-"]),
|
|
select:not([class*="text-"]):not([class*=" text-"]) {
|
|
font-size: var(--font-body);
|
|
font-weight: var(--weight-regular);
|
|
line-height: var(--line-body);
|
|
}
|
|
}
|
|
|
|
|
|
/* ========================================
|
|
Typography Utility Classes
|
|
======================================== */
|
|
|
|
/* Size Classes */
|
|
.body-lg {
|
|
font-size: var(--font-body-lg);
|
|
font-weight: var(--weight-regular);
|
|
line-height: var(--line-body-lg);
|
|
}
|
|
|
|
.body-sm {
|
|
font-size: var(--font-body-sm);
|
|
font-weight: var(--weight-regular);
|
|
line-height: var(--line-body-sm);
|
|
}
|
|
|
|
.caption {
|
|
font-size: var(--font-caption);
|
|
font-weight: var(--weight-medium);
|
|
line-height: var(--line-caption);
|
|
}
|
|
|
|
.overline {
|
|
font-size: var(--font-overline);
|
|
font-weight: var(--weight-semibold);
|
|
line-height: var(--line-overline);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* Color Classes */
|
|
.text-primary { color: var(--grey-0); }
|
|
.text-secondary { color: var(--grey-1); }
|
|
.text-tertiary { color: var(--grey-2); }
|
|
.text-disabled { color: var(--grey-3); }
|
|
.text-error { color: var(--color-error); }
|
|
.text-success { color: var(--color-success); }
|
|
.text-warning { color: var(--color-warning); }
|
|
.text-info { color: var(--color-info); }
|
|
|
|
.text-link {
|
|
color: var(--primary-main);
|
|
cursor: pointer;
|
|
}
|
|
.text-link:hover {
|
|
color: var(--primary-dark);
|
|
}
|
|
|
|
|
|
/* ========================================
|
|
Button System
|
|
Filled = 主要動作 | Outlined = 次要動作
|
|
======================================== */
|
|
|
|
/* Primary Buttons */
|
|
.button-filled-primary {
|
|
background-color: var(--primary-main);
|
|
color: var(--grey-5);
|
|
}
|
|
.button-filled-primary:hover {
|
|
background-color: var(--primary-dark);
|
|
}
|
|
.button-filled-primary:active {
|
|
background-color: var(--primary-active);
|
|
}
|
|
.button-filled-primary:disabled {
|
|
background-color: #b3e5d9;
|
|
color: var(--grey-5);
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.button-outlined-primary {
|
|
border: 2px solid var(--primary-main);
|
|
background-color: transparent;
|
|
color: var(--grey-0);
|
|
}
|
|
.button-outlined-primary:hover {
|
|
background-color: var(--bg-light);
|
|
}
|
|
|
|
.button-text-primary {
|
|
background-color: transparent;
|
|
color: var(--primary-main);
|
|
border: none;
|
|
}
|
|
.button-text-primary:hover {
|
|
background-color: var(--bg-light);
|
|
}
|
|
|
|
/* Success Buttons */
|
|
.button-filled-success {
|
|
background-color: var(--color-success);
|
|
color: var(--grey-5);
|
|
}
|
|
.button-filled-success:hover {
|
|
background-color: #33bc9a;
|
|
}
|
|
.button-filled-success:active {
|
|
background-color: #018a6a;
|
|
}
|
|
|
|
.button-outlined-success {
|
|
border: 2px solid var(--color-success);
|
|
background-color: transparent;
|
|
color: var(--grey-0);
|
|
}
|
|
|
|
/* Info Buttons */
|
|
.button-filled-info {
|
|
background-color: var(--color-info);
|
|
color: var(--grey-5);
|
|
}
|
|
.button-filled-info:hover {
|
|
background-color: #60a5fa;
|
|
}
|
|
.button-filled-info:active {
|
|
background-color: #2563eb;
|
|
}
|
|
|
|
.button-outlined-info {
|
|
border: 2px solid var(--color-info);
|
|
background-color: transparent;
|
|
color: var(--grey-0);
|
|
}
|
|
|
|
/* Warning Buttons */
|
|
.button-filled-warning {
|
|
background-color: var(--color-warning);
|
|
color: var(--grey-5);
|
|
}
|
|
.button-filled-warning:hover {
|
|
background-color: #fbbf24;
|
|
}
|
|
.button-filled-warning:active {
|
|
background-color: #d97706;
|
|
}
|
|
|
|
.button-outlined-warning {
|
|
border: 2px solid var(--color-warning);
|
|
background-color: transparent;
|
|
color: var(--grey-0);
|
|
}
|
|
|
|
/* Error Buttons */
|
|
.button-filled-error {
|
|
background-color: var(--color-error);
|
|
color: var(--grey-5);
|
|
}
|
|
.button-filled-error:hover {
|
|
background-color: #ef4444;
|
|
}
|
|
.button-filled-error:active {
|
|
background-color: #b91c1c;
|
|
}
|
|
|
|
.button-outlined-error {
|
|
border: 2px solid var(--color-error);
|
|
background-color: transparent;
|
|
color: var(--grey-0);
|
|
}
|
|
|
|
/* Icon Buttons */
|
|
.button-icon {
|
|
color: var(--grey-0);
|
|
border: 2px solid var(--grey-0);
|
|
background-color: var(--bg-light);
|
|
aspect-ratio: 1/1;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.button-icon:hover {
|
|
color: var(--primary-main);
|
|
border-color: var(--primary-main);
|
|
background-color: var(--bg-white);
|
|
}
|
|
.button-icon:active {
|
|
color: var(--primary-dark);
|
|
border-color: var(--primary-dark);
|
|
}
|
|
.button-icon:focus {
|
|
border-color: var(--primary-main);
|
|
box-shadow: 0 0 0 3px rgba(1, 171, 131, 0.3);
|
|
}
|
|
.button-icon:disabled {
|
|
color: var(--grey-3);
|
|
border-color: var(--grey-4);
|
|
background-color: var(--bg-light-grey);
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.button-icon-selected {
|
|
color: var(--grey-5);
|
|
border-color: var(--primary-main);
|
|
background-color: var(--primary-main);
|
|
}
|
|
.button-icon-selected:hover {
|
|
border-color: var(--primary-dark);
|
|
background-color: var(--primary-dark);
|
|
}
|
|
|
|
|
|
/* ========================================
|
|
Input/Textarea System
|
|
統一使用 border-2 (Outlined style)
|
|
======================================== */
|
|
|
|
.input-default,
|
|
.textarea-default {
|
|
border: 2px solid var(--grey-3);
|
|
background-color: var(--grey-5);
|
|
color: var(--grey-0);
|
|
}
|
|
|
|
.input-focus,
|
|
.textarea-focus {
|
|
border: 2px solid var(--primary-main);
|
|
background-color: var(--grey-5);
|
|
color: var(--grey-0);
|
|
}
|
|
|
|
.input-error,
|
|
.textarea-error {
|
|
border: 2px solid var(--color-error);
|
|
background-color: var(--grey-5);
|
|
color: var(--grey-0);
|
|
}
|
|
|
|
.input-disabled,
|
|
.textarea-disabled {
|
|
border: 2px solid var(--grey-4);
|
|
background-color: var(--bg-light-grey);
|
|
color: var(--grey-2);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.input-placeholder::placeholder,
|
|
.textarea-placeholder::placeholder {
|
|
color: var(--grey-3);
|
|
}
|
|
|
|
|
|
/* ========================================
|
|
Card/Container System
|
|
======================================== */
|
|
|
|
.card-default {
|
|
background-color: var(--bg-white);
|
|
border: 1px solid var(--grey-4);
|
|
}
|
|
|
|
.card-hover:hover {
|
|
background-color: var(--bg-white);
|
|
border-color: var(--grey-3);
|
|
}
|
|
|
|
.card-light {
|
|
background-color: var(--bg-light);
|
|
border-color: transparent;
|
|
}
|
|
|
|
.card-grey {
|
|
background-color: var(--bg-light-grey);
|
|
border-color: transparent;
|
|
}
|
|
|
|
|
|
/* ========================================
|
|
Badge/Status System
|
|
======================================== */
|
|
|
|
.badge-success {
|
|
background-color: var(--color-success);
|
|
color: var(--grey-5);
|
|
}
|
|
|
|
.badge-error {
|
|
background-color: var(--color-error);
|
|
color: var(--grey-5);
|
|
}
|
|
|
|
.badge-warning {
|
|
background-color: var(--color-warning);
|
|
color: var(--grey-5);
|
|
}
|
|
|
|
.badge-info {
|
|
background-color: var(--color-info);
|
|
color: var(--grey-5);
|
|
}
|
|
|
|
.badge-neutral {
|
|
background-color: var(--grey-3);
|
|
color: var(--grey-5);
|
|
}
|
|
|
|
|
|
/* ========================================
|
|
Divider System
|
|
======================================== */
|
|
|
|
.divider-light {
|
|
border-color: var(--grey-4);
|
|
}
|
|
|
|
.divider-medium {
|
|
border-color: var(--grey-3);
|
|
}
|
|
|
|
.divider-dark {
|
|
border-color: var(--grey-2);
|
|
}
|
|
|
|
|
|
/* ========================================
|
|
Animations
|
|
======================================== */
|
|
|
|
@keyframes fade-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.animate-fade-in {
|
|
animation: fade-in 0.6s ease-out;
|
|
}
|
|
|
|
|
|
/* ========================================
|
|
Rounded (Border Radius) System
|
|
======================================== */
|
|
|
|
/* 基礎圓角 */
|
|
.rounded-none { border-radius: var(--radius-none); }
|
|
.rounded-sm { border-radius: var(--radius-sm); }
|
|
.rounded { border-radius: var(--radius); }
|
|
.rounded-md { border-radius: var(--radius-md); }
|
|
.rounded-lg { border-radius: var(--radius-lg); }
|
|
.rounded-xl { border-radius: var(--radius-xl); }
|
|
.rounded-2xl { border-radius: var(--radius-2xl); }
|
|
.rounded-3xl { border-radius: var(--radius-3xl); }
|
|
.rounded-full { border-radius: var(--radius-full); }
|
|
|
|
/* 上方圓角 (Top) */
|
|
.rounded-t-none { border-top-left-radius: var(--radius-none); border-top-right-radius: var(--radius-none); }
|
|
.rounded-t-sm { border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm); }
|
|
.rounded-t { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
|
|
.rounded-t-md { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
|
|
.rounded-t-lg { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); }
|
|
.rounded-t-xl { border-top-left-radius: var(--radius-xl); border-top-right-radius: var(--radius-xl); }
|
|
.rounded-t-2xl { border-top-left-radius: var(--radius-2xl); border-top-right-radius: var(--radius-2xl); }
|
|
.rounded-t-3xl { border-top-left-radius: var(--radius-3xl); border-top-right-radius: var(--radius-3xl); }
|
|
.rounded-t-full { border-top-left-radius: var(--radius-full); border-top-right-radius: var(--radius-full); }
|
|
|
|
/* 右方圓角 (Right) */
|
|
.rounded-r-none { border-top-right-radius: var(--radius-none); border-bottom-right-radius: var(--radius-none); }
|
|
.rounded-r-sm { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
|
|
.rounded-r { border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius); }
|
|
.rounded-r-md { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
|
|
.rounded-r-lg { border-top-right-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }
|
|
.rounded-r-xl { border-top-right-radius: var(--radius-xl); border-bottom-right-radius: var(--radius-xl); }
|
|
.rounded-r-2xl { border-top-right-radius: var(--radius-2xl); border-bottom-right-radius: var(--radius-2xl); }
|
|
.rounded-r-3xl { border-top-right-radius: var(--radius-3xl); border-bottom-right-radius: var(--radius-3xl); }
|
|
.rounded-r-full { border-top-right-radius: var(--radius-full); border-bottom-right-radius: var(--radius-full); }
|
|
|
|
/* 下方圓角 (Bottom) */
|
|
.rounded-b-none { border-bottom-left-radius: var(--radius-none); border-bottom-right-radius: var(--radius-none); }
|
|
.rounded-b-sm { border-bottom-left-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
|
|
.rounded-b { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }
|
|
.rounded-b-md { border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
|
|
.rounded-b-lg { border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }
|
|
.rounded-b-xl { border-bottom-left-radius: var(--radius-xl); border-bottom-right-radius: var(--radius-xl); }
|
|
.rounded-b-2xl { border-bottom-left-radius: var(--radius-2xl); border-bottom-right-radius: var(--radius-2xl); }
|
|
.rounded-b-3xl { border-bottom-left-radius: var(--radius-3xl); border-bottom-right-radius: var(--radius-3xl); }
|
|
.rounded-b-full { border-bottom-left-radius: var(--radius-full); border-bottom-right-radius: var(--radius-full); }
|
|
|
|
/* 左方圓角 (Left) */
|
|
.rounded-l-none { border-top-left-radius: var(--radius-none); border-bottom-left-radius: var(--radius-none); }
|
|
.rounded-l-sm { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); }
|
|
.rounded-l { border-top-left-radius: var(--radius); border-bottom-left-radius: var(--radius); }
|
|
.rounded-l-md { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); }
|
|
.rounded-l-lg { border-top-left-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg); }
|
|
.rounded-l-xl { border-top-left-radius: var(--radius-xl); border-bottom-left-radius: var(--radius-xl); }
|
|
.rounded-l-2xl { border-top-left-radius: var(--radius-2xl); border-bottom-left-radius: var(--radius-2xl); }
|
|
.rounded-l-3xl { border-top-left-radius: var(--radius-3xl); border-bottom-left-radius: var(--radius-3xl); }
|
|
.rounded-l-full { border-top-left-radius: var(--radius-full); border-bottom-left-radius: var(--radius-full); }
|
|
|
|
/* 單一角圓角 (Individual Corners) */
|
|
.rounded-tl-none { border-top-left-radius: var(--radius-none); }
|
|
.rounded-tl-sm { border-top-left-radius: var(--radius-sm); }
|
|
.rounded-tl { border-top-left-radius: var(--radius); }
|
|
.rounded-tl-md { border-top-left-radius: var(--radius-md); }
|
|
.rounded-tl-lg { border-top-left-radius: var(--radius-lg); }
|
|
.rounded-tl-xl { border-top-left-radius: var(--radius-xl); }
|
|
.rounded-tl-2xl { border-top-left-radius: var(--radius-2xl); }
|
|
.rounded-tl-3xl { border-top-left-radius: var(--radius-3xl); }
|
|
.rounded-tl-full { border-top-left-radius: var(--radius-full); }
|
|
|
|
.rounded-tr-none { border-top-right-radius: var(--radius-none); }
|
|
.rounded-tr-sm { border-top-right-radius: var(--radius-sm); }
|
|
.rounded-tr { border-top-right-radius: var(--radius); }
|
|
.rounded-tr-md { border-top-right-radius: var(--radius-md); }
|
|
.rounded-tr-lg { border-top-right-radius: var(--radius-lg); }
|
|
.rounded-tr-xl { border-top-right-radius: var(--radius-xl); }
|
|
.rounded-tr-2xl { border-top-right-radius: var(--radius-2xl); }
|
|
.rounded-tr-3xl { border-top-right-radius: var(--radius-3xl); }
|
|
.rounded-tr-full { border-top-right-radius: var(--radius-full); }
|
|
|
|
.rounded-br-none { border-bottom-right-radius: var(--radius-none); }
|
|
.rounded-br-sm { border-bottom-right-radius: var(--radius-sm); }
|
|
.rounded-br { border-bottom-right-radius: var(--radius); }
|
|
.rounded-br-md { border-bottom-right-radius: var(--radius-md); }
|
|
.rounded-br-lg { border-bottom-right-radius: var(--radius-lg); }
|
|
.rounded-br-xl { border-bottom-right-radius: var(--radius-xl); }
|
|
.rounded-br-2xl { border-bottom-right-radius: var(--radius-2xl); }
|
|
.rounded-br-3xl { border-bottom-right-radius: var(--radius-3xl); }
|
|
.rounded-br-full { border-bottom-right-radius: var(--radius-full); }
|
|
|
|
.rounded-bl-none { border-bottom-left-radius: var(--radius-none); }
|
|
.rounded-bl-sm { border-bottom-left-radius: var(--radius-sm); }
|
|
.rounded-bl { border-bottom-left-radius: var(--radius); }
|
|
.rounded-bl-md { border-bottom-left-radius: var(--radius-md); }
|
|
.rounded-bl-lg { border-bottom-left-radius: var(--radius-lg); }
|
|
.rounded-bl-xl { border-bottom-left-radius: var(--radius-xl); }
|
|
.rounded-bl-2xl { border-bottom-left-radius: var(--radius-2xl); }
|
|
.rounded-bl-3xl { border-bottom-left-radius: var(--radius-3xl); }
|
|
.rounded-bl-full { border-bottom-left-radius: var(--radius-full); } |