/* ============================================================ SHADCN-BOOTSTRAP v1.0 Complete Bootstrap 5 compatible component system with shadcn/ui design language Usage: Dark mode: ============================================================ */ /* ============================================================ 1. DESIGN TOKENS (shadcn HSL color system) ============================================================ */ :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 240 5.9% 10%; --primary-foreground: 0 0% 98%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --success: 142 76% 36%; --success-foreground: 0 0% 100%; --warning: 38 92% 50%; --warning-foreground: 0 0% 100%; --info: 217 91% 60%; --info-foreground: 0 0% 100%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 240 5.9% 10%; --radius: 0.5rem; --radius-sm: 0.375rem; --radius-lg: 0.75rem; --radius-full: 9999px; --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1); } [data-theme="dark"] { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 240 5.9% 10%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --success: 142 71% 29%; --warning: 38 92% 40%; --info: 217 91% 50%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 240 4.9% 83.9%; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3); --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3); } /* ============================================================ 2. RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-sans); font-size: 0.875rem; line-height: 1.6; color: hsl(var(--foreground)); background-color: hsl(var(--background)); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: hsl(var(--primary)); text-decoration: none; transition: color var(--transition); } a:hover { color: hsl(var(--foreground)); } img, svg { display: block; max-width: 100%; } img { height: auto; } hr { border: none; height: 1px; background-color: hsl(var(--border)); margin: 1.5rem 0; } code { font-family: var(--font-mono); font-size: 0.8125em; background-color: hsl(var(--muted)); padding: 0.125em 0.375em; border-radius: var(--radius-sm); color: hsl(var(--foreground)); } pre { font-family: var(--font-mono); font-size: 0.8125rem; background-color: hsl(var(--muted)); color: hsl(var(--foreground)); padding: 1rem; border-radius: var(--radius); overflow-x: auto; line-height: 1.7; } pre code { background: none; padding: 0; font-size: inherit; } ::selection { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } :focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; } /* ============================================================ 3. LAYOUT — Container & Grid ============================================================ */ .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 1rem; } .container-sm { max-width: 640px; margin: 0 auto; padding: 0 1rem; } .container-md { max-width: 768px; margin: 0 auto; padding: 0 1rem; } .container-lg { max-width: 1024px; margin: 0 auto; padding: 0 1rem; } .container-xl { max-width: 1280px; margin: 0 auto; padding: 0 1rem; } .container-fluid { width: 100%; padding: 0 1rem; } .row { display: flex; flex-wrap: wrap; margin-left: -0.75rem; margin-right: -0.75rem; } .row > * { flex-shrink: 0; width: 100%; max-width: 100%; padding-left: 0.75rem; padding-right: 0.75rem; } .row-cols-auto > * { flex: 0 0 auto; width: auto; } .row-cols-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-3 > * { flex: 0 0 auto; width: 33.3333%; } .row-cols-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-6 > * { flex: 0 0 auto; width: 16.6667%; } .col { flex: 1 0 0%; } .col-auto { flex: 0 0 auto; width: auto; } .col-1 { flex: 0 0 8.3333%; max-width: 8.3333%; } .col-2 { flex: 0 0 16.6667%; max-width: 16.6667%; } .col-3 { flex: 0 0 25%; max-width: 25%; } .col-4 { flex: 0 0 33.3333%; max-width: 33.3333%; } .col-5 { flex: 0 0 41.6667%; max-width: 41.6667%; } .col-6 { flex: 0 0 50%; max-width: 50%; } .col-7 { flex: 0 0 58.3333%; max-width: 58.3333%; } .col-8 { flex: 0 0 66.6667%; max-width: 66.6667%; } .col-9 { flex: 0 0 75%; max-width: 75%; } .col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; } .col-11 { flex: 0 0 91.6667%; max-width: 91.6667%; } .col-12 { flex: 0 0 100%; max-width: 100%; } .offset-1 { margin-left: 8.3333%; } .offset-2 { margin-left: 16.6667%; } .offset-3 { margin-left: 25%; } .offset-4 { margin-left: 33.3333%; } .offset-5 { margin-left: 41.6667%; } .offset-6 { margin-left: 50%; } @media (min-width: 640px) { .col-sm { flex: 1 0 0%; } .col-sm-auto { flex: 0 0 auto; width: auto; } .col-sm-1 { flex: 0 0 8.3333%; max-width: 8.3333%; } .col-sm-2 { flex: 0 0 16.6667%; max-width: 16.6667%; } .col-sm-3 { flex: 0 0 25%; max-width: 25%; } .col-sm-4 { flex: 0 0 33.3333%; max-width: 33.3333%; } .col-sm-5 { flex: 0 0 41.6667%; max-width: 41.6667%; } .col-sm-6 { flex: 0 0 50%; max-width: 50%; } .col-sm-7 { flex: 0 0 58.3333%; max-width: 58.3333%; } .col-sm-8 { flex: 0 0 66.6667%; max-width: 66.6667%; } .col-sm-9 { flex: 0 0 75%; max-width: 75%; } .col-sm-10 { flex: 0 0 83.3333%; max-width: 83.3333%; } .col-sm-11 { flex: 0 0 91.6667%; max-width: 91.6667%; } .col-sm-12 { flex: 0 0 100%; max-width: 100%; } .row-cols-sm-1 > * { width: 100%; } .row-cols-sm-2 > * { width: 50%; } .row-cols-sm-3 > * { width: 33.3333%; } .row-cols-sm-4 > * { width: 25%; } } @media (min-width: 768px) { .col-md { flex: 1 0 0%; } .col-md-auto { flex: 0 0 auto; width: auto; } .col-md-1 { flex: 0 0 8.3333%; max-width: 8.3333%; } .col-md-2 { flex: 0 0 16.6667%; max-width: 16.6667%; } .col-md-3 { flex: 0 0 25%; max-width: 25%; } .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; } .col-md-5 { flex: 0 0 41.6667%; max-width: 41.6667%; } .col-md-6 { flex: 0 0 50%; max-width: 50%; } .col-md-7 { flex: 0 0 58.3333%; max-width: 58.3333%; } .col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; } .col-md-9 { flex: 0 0 75%; max-width: 75%; } .col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; } .col-md-11 { flex: 0 0 91.6667%; max-width: 91.6667%; } .col-md-12 { flex: 0 0 100%; max-width: 100%; } .row-cols-md-1 > * { width: 100%; } .row-cols-md-2 > * { width: 50%; } .row-cols-md-3 > * { width: 33.3333%; } .row-cols-md-4 > * { width: 25%; } } @media (min-width: 1024px) { .col-lg { flex: 1 0 0%; } .col-lg-auto { flex: 0 0 auto; width: auto; } .col-lg-1 { flex: 0 0 8.3333%; max-width: 8.3333%; } .col-lg-2 { flex: 0 0 16.6667%; max-width: 16.6667%; } .col-lg-3 { flex: 0 0 25%; max-width: 25%; } .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; } .col-lg-5 { flex: 0 0 41.6667%; max-width: 41.6667%; } .col-lg-6 { flex: 0 0 50%; max-width: 50%; } .col-lg-7 { flex: 0 0 58.3333%; max-width: 58.3333%; } .col-lg-8 { flex: 0 0 66.6667%; max-width: 66.6667%; } .col-lg-9 { flex: 0 0 75%; max-width: 75%; } .col-lg-10 { flex: 0 0 83.3333%; max-width: 83.3333%; } .col-lg-11 { flex: 0 0 91.6667%; max-width: 91.6667%; } .col-lg-12 { flex: 0 0 100%; max-width: 100%; } .row-cols-lg-1 > * { width: 100%; } .row-cols-lg-2 > * { width: 50%; } .row-cols-lg-3 > * { width: 33.3333%; } .row-cols-lg-4 > * { width: 25%; } } @media (min-width: 1280px) { .col-xl { flex: 1 0 0%; } .col-xl-auto { flex: 0 0 auto; width: auto; } .col-xl-1 { flex: 0 0 8.3333%; max-width: 8.3333%; } .col-xl-2 { flex: 0 0 16.6667%; max-width: 16.6667%; } .col-xl-3 { flex: 0 0 25%; max-width: 25%; } .col-xl-4 { flex: 0 0 33.3333%; max-width: 33.3333%; } .col-xl-6 { flex: 0 0 50%; max-width: 50%; } .col-xl-8 { flex: 0 0 66.6667%; max-width: 66.6667%; } .col-xl-12 { flex: 0 0 100%; max-width: 100%; } } .g-0 { --gutter: 0; } .g-1 { --gutter: 0.25rem; } .g-2 { --gutter: 0.5rem; } .g-3 { --gutter: 0.75rem; } .g-4 { --gutter: 1rem; } .g-5 { --gutter: 1.5rem; } .g-0 > * { padding-left: 0; padding-right: 0; } .g-1 > * { padding-left: 0.125rem; padding-right: 0.125rem; } .g-2 > * { padding-left: 0.25rem; padding-right: 0.25rem; } .g-3 > * { padding-left: 0.375rem; padding-right: 0.375rem; } .g-4 > * { padding-left: 0.5rem; padding-right: 0.5rem; } .g-5 > * { padding-left: 0.75rem; padding-right: 0.75rem; } /* ============================================================ 4. TYPOGRAPHY ============================================================ */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600; line-height: 1.25; letter-spacing: -0.025em; color: hsl(var(--foreground)); margin-bottom: 0.5em; } h1, .h1 { font-size: 2.25rem; } h2, .h2 { font-size: 1.875rem; } h3, .h3 { font-size: 1.5rem; } h4, .h4 { font-size: 1.25rem; } h5, .h5 { font-size: 1.125rem; } h6, .h6 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; } .display-1 { font-size: 3.5rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1.1; } .display-2 { font-size: 3rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; } .display-3 { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; } .display-4 { font-size: 2rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; } .display-5 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; } .display-6 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; } p { margin-bottom: 1rem; } p:last-child { margin-bottom: 0; } .lead { font-size: 1.125rem; color: hsl(var(--muted-foreground)); line-height: 1.7; } .small, small { font-size: 0.8125rem; } .mark { background-color: hsl(var(--warning) / 0.2); padding: 0.125em 0.25em; border-radius: 2px; } .blockquote { padding-left: 1rem; border-left: 3px solid hsl(var(--border)); font-style: italic; color: hsl(var(--muted-foreground)); margin: 1rem 0; } .blockquote-footer { font-size: 0.8125rem; color: hsl(var(--muted-foreground)); margin-top: 0.5rem; } .blockquote-footer::before { content: "\2014\00a0"; } .list-unstyled { list-style: none; padding-left: 0; } .list-inline { list-style: none; padding-left: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .list-inline-item { display: inline-block; } .text-lowercase { text-transform: lowercase; } .text-uppercase { text-transform: uppercase; } .text-capitalize { text-transform: capitalize; } /* Text color utilities */ .text-primary { color: hsl(var(--primary)) !important; } .text-secondary { color: hsl(var(--secondary-foreground)) !important; } .text-muted { color: hsl(var(--muted-foreground)) !important; } .text-success { color: hsl(var(--success)) !important; } .text-warning { color: hsl(var(--warning)) !important; } .text-danger { color: hsl(var(--destructive)) !important; } .text-info { color: hsl(var(--info)) !important; } .text-body { color: hsl(var(--foreground)) !important; } .text-light { color: hsl(var(--muted-foreground)) !important; } .text-white { color: #fff !important; } .text-decoration-none { text-decoration: none !important; } a.text-decoration-none:hover { text-decoration: none !important; } /* Background utilities */ .bg-primary { background-color: hsl(var(--primary)) !important; color: hsl(var(--primary-foreground)) !important; } .bg-secondary { background-color: hsl(var(--secondary)) !important; color: hsl(var(--secondary-foreground)) !important; } .bg-success { background-color: hsl(var(--success)) !important; color: hsl(var(--success-foreground)) !important; } .bg-warning { background-color: hsl(var(--warning)) !important; color: hsl(var(--warning-foreground)) !important; } .bg-danger { background-color: hsl(var(--destructive)) !important; color: hsl(var(--destructive-foreground)) !important; } .bg-info { background-color: hsl(var(--info)) !important; color: hsl(var(--info-foreground)) !important; } .bg-light { background-color: hsl(var(--muted)) !important; color: hsl(var(--foreground)) !important; } .bg-dark { background-color: hsl(var(--primary)) !important; color: hsl(var(--primary-foreground)) !important; } .bg-body { background-color: hsl(var(--background)) !important; } .bg-white { background-color: #fff !important; } .bg-transparent { background-color: transparent !important; } /* ============================================================ 5. IMAGES & FIGURES ============================================================ */ .img-fluid { max-width: 100%; height: auto; } .img-thumbnail { padding: 0.25rem; background-color: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); max-width: 100%; height: auto; } .rounded { border-radius: var(--radius) !important; } .rounded-sm { border-radius: var(--radius-sm) !important; } .rounded-lg { border-radius: var(--radius-lg) !important; } .rounded-circle { border-radius: 50% !important; } .rounded-0 { border-radius: 0 !important; } .rounded-top { border-radius: var(--radius) var(--radius) 0 0 !important; } .rounded-bottom { border-radius: 0 0 var(--radius) var(--radius) !important; } .rounded-pill { border-radius: var(--radius-full) !important; } .figure { display: inline-block; } .figure-img { margin-bottom: 0.5rem; line-height: 1; border-radius: var(--radius); } .figure-caption { font-size: 0.8125rem; color: hsl(var(--muted-foreground)); } /* ============================================================ 6. TABLES ============================================================ */ .table-wrapper { width: 100%; overflow-x: auto; border: 1px solid hsl(var(--border)); border-radius: var(--radius); } .table { width: 100%; border-collapse: collapse; font-size: 0.875rem; vertical-align: middle; } .table thead { border-bottom: 1px solid hsl(var(--border)); } .table th { height: 3rem; padding: 0 1rem; text-align: left; font-weight: 500; color: hsl(var(--muted-foreground)); white-space: nowrap; } .table td { padding: 0.75rem 1rem; vertical-align: middle; } .table tbody tr { border-bottom: 1px solid hsl(var(--border)); transition: background-color var(--transition); } .table tbody tr:last-child { border-bottom: none; } .table tbody tr:hover { background-color: hsl(var(--muted) / 0.5); } .table-striped tbody tr:nth-child(even) { background-color: hsl(var(--muted) / 0.3); } .table-striped tbody tr:nth-child(even):hover { background-color: hsl(var(--muted) / 0.5); } .table-hover tbody tr:hover { background-color: hsl(var(--muted) / 0.5); } .table-bordered { border: 1px solid hsl(var(--border)); } .table-bordered th, .table-bordered td { border: 1px solid hsl(var(--border)); } .table-borderless th, .table-borderless td { border: none; } .table-sm th { height: 2.25rem; padding: 0 0.5rem; font-size: 0.8125rem; } .table-sm td { padding: 0.375rem 0.5rem; font-size: 0.8125rem; } .table-active { background-color: hsl(var(--accent)) !important; } .table-group-divider { border-top: 2px solid hsl(var(--border)); } .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Table colors */ .table-primary { --bs-table-bg: hsl(var(--primary) / 0.05); --bs-table-hover-bg: hsl(var(--primary) / 0.1); } .table-success { --bs-table-bg: hsl(var(--success) / 0.05); --bs-table-hover-bg: hsl(var(--success) / 0.1); } .table-warning { --bs-table-bg: hsl(var(--warning) / 0.05); --bs-table-hover-bg: hsl(var(--warning) / 0.1); } .table-danger { --bs-table-bg: hsl(var(--destructive) / 0.05); --bs-table-hover-bg: hsl(var(--destructive) / 0.1); } .table-info { --bs-table-bg: hsl(var(--info) / 0.05); --bs-table-hover-bg: hsl(var(--info) / 0.1); } /* ============================================================ 7. FORMS ============================================================ */ /* Labels */ .form-label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.375rem; color: hsl(var(--foreground)); } .col-form-label { font-size: 0.875rem; font-weight: 500; padding-top: calc(0.5rem + 1px); padding-bottom: calc(0.5rem + 1px); color: hsl(var(--foreground)); } .col-form-label-sm { font-size: 0.8125rem; padding-top: calc(0.25rem + 1px); padding-bottom: calc(0.25rem + 1px); } .col-form-label-lg { font-size: 1rem; padding-top: calc(0.625rem + 1px); padding-bottom: calc(0.625rem + 1px); } /* Text inputs */ .form-control, .form-select { display: block; width: 100%; height: 2.5rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; font-family: inherit; font-weight: 400; line-height: 1.5; color: hsl(var(--foreground)); background-color: transparent; background-clip: padding-box; border: 1px solid hsl(var(--input)); border-radius: var(--radius); transition: border-color var(--transition), box-shadow var(--transition); appearance: none; outline: none; } .form-control::placeholder { color: hsl(var(--muted-foreground)); opacity: 0.7; } .form-control:hover { border-color: hsl(var(--muted-foreground) / 0.3); } .form-control:focus { border-color: hsl(var(--ring)); box-shadow: 0 0 0 2px hsl(var(--ring) / 0.1); } .form-control:disabled, .form-control[readonly] { opacity: 0.5; cursor: not-allowed; background-color: hsl(var(--muted)); } textarea.form-control { height: auto; min-height: 5rem; resize: vertical; } /* Select */ .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 16px 12px; padding-right: 2.5rem; } /* Sizes */ .form-control-sm, .form-select-sm { height: 2.25rem; padding: 0.25rem 0.5rem; font-size: 0.8125rem; border-radius: var(--radius-sm); } .form-control-lg, .form-select-lg { height: 3rem; padding: 0.625rem 1rem; font-size: 1rem; border-radius: var(--radius); } /* Color input */ .form-control-color { width: 3rem; height: 2.5rem; padding: 0.25rem; cursor: pointer; } .form-control-color::-webkit-color-swatch-wrapper { padding: 0; } .form-control-color::-webkit-color-swatch { border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 4px); } /* Range */ .form-range { width: 100%; height: 1.25rem; padding: 0; background: transparent; appearance: none; cursor: pointer; } .form-range::-webkit-slider-runnable-track { width: 100%; height: 0.375rem; background: hsl(var(--muted)); border-radius: var(--radius-full); } .form-range::-webkit-slider-thumb { width: 1rem; height: 1rem; margin-top: -5px; background: hsl(var(--primary)); border: none; border-radius: 50%; appearance: none; transition: box-shadow var(--transition); } .form-range::-webkit-slider-thumb:hover { box-shadow: 0 0 0 4px hsl(var(--ring) / 0.15); } .form-range:disabled { opacity: 0.5; } /* Checkboxes & Radios */ .form-check { display: flex; align-items: flex-start; gap: 0.5rem; min-height: 1.5rem; margin-bottom: 0.375rem; } .form-check-input { flex-shrink: 0; width: 1rem; height: 1rem; margin-top: 0.2rem; appearance: none; background-color: transparent; border: 1px solid hsl(var(--input)); border-radius: 0.25rem; cursor: pointer; transition: all var(--transition); } .form-check-input[type="radio"] { border-radius: 50%; } .form-check-input:checked { background-color: hsl(var(--primary)); border-color: hsl(var(--primary)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 0.75rem; } .form-check-input[type="radio"]:checked { background-image: none; box-shadow: inset 0 0 0 3px hsl(var(--primary-foreground)); } .form-check-input:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; } .form-check-input:disabled { opacity: 0.5; cursor: not-allowed; } .form-check-label { font-size: 0.875rem; color: hsl(var(--foreground)); cursor: pointer; } /* Switch */ .form-switch { padding-left: 2.5rem; position: relative; } .form-switch .form-check-input { width: 2.5rem; height: 1.25rem; border-radius: var(--radius-full); background-color: hsl(var(--muted)); border: 1px solid hsl(var(--border)); transition: all var(--transition); position: absolute; left: 0; top: 0.125rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='hsl(240 5.9%%2010%%20)' stroke='none'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 3px center; background-size: 0.875rem; } .form-switch .form-check-input:checked { background-color: hsl(var(--primary)); border-color: hsl(var(--primary)); background-position: calc(100% - 3px) center; } .form-switch .form-check-label { padding-left: 0; } /* File input */ .form-control[type="file"] { padding: 0.375rem 0.75rem; font-size: 0.8125rem; } .form-control[type="file"]::file-selector-button { padding: 0.375rem 0.75rem; margin-right: 0.75rem; font-size: 0.8125rem; font-weight: 500; color: hsl(var(--foreground)); background-color: hsl(var(--secondary)); border: none; border-radius: var(--radius-sm); cursor: pointer; transition: background-color var(--transition); } .form-control[type="file"]::file-selector-button:hover { background-color: hsl(var(--accent)); } /* Input Group */ .input-group { display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; position: relative; } .input-group > .form-control, .input-group > .form-select { flex: 1 1 auto; min-width: 0; position: relative; z-index: 1; } .input-group > .form-control:focus { z-index: 3; } .input-group-text { display: flex; align-items: center; padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 400; line-height: 1.5; color: hsl(var(--muted-foreground)); background-color: hsl(var(--muted)); border: 1px solid hsl(var(--input)); white-space: nowrap; } .input-group-text:first-child { border-right: 0; border-radius: var(--radius) 0 0 var(--radius); } .input-group-text:last-child { border-left: 0; border-radius: 0 var(--radius) var(--radius) 0; } .input-group > :not(:first-child) { margin-left: -1px; } .input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group > .form-select:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .input-group > .form-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } /* Floating label */ .form-floating { position: relative; } .form-floating > .form-control, .form-floating > .form-select { height: calc(2.5rem + 2px); padding: 1rem 0.75rem 0.25rem; } .form-floating > label { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0.75rem; font-size: 0.875rem; color: hsl(var(--muted-foreground)); pointer-events: none; border: 1px solid transparent; transform-origin: 0 0; transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out; } .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label { transform: scale(0.75) translateY(-0.5rem); opacity: 0.7; } /* Validation */ .form-control.is-valid, .form-select.is-valid { border-color: hsl(var(--success)); } .form-control.is-valid:focus, .form-select.is-valid:focus { box-shadow: 0 0 0 2px hsl(var(--success) / 0.15); } .valid-feedback { font-size: 0.75rem; color: hsl(var(--success)); margin-top: 0.25rem; } .form-control.is-invalid, .form-select.is-invalid { border-color: hsl(var(--destructive)); } .form-control.is-invalid:focus, .form-select.is-invalid:focus { box-shadow: 0 0 0 2px hsl(var(--destructive) / 0.15); } .invalid-feedback { font-size: 0.75rem; color: hsl(var(--destructive)); margin-top: 0.25rem; } .form-text { font-size: 0.75rem; color: hsl(var(--muted-foreground)); margin-top: 0.25rem; } .form-group { margin-bottom: 1.25rem; } .form-group:last-child { margin-bottom: 0; } /* ============================================================ 8. BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; white-space: nowrap; font-size: 0.875rem; font-weight: 500; font-family: inherit; line-height: 1; padding: 0.5rem 1rem; height: 2.5rem; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: all var(--transition); text-decoration: none; outline: none; position: relative; overflow: hidden; user-select: none; } .btn:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; } .btn:disabled, .btn.disabled { opacity: 0.5; pointer-events: none; } .btn:active { transform: scale(0.98); } .btn-primary { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } .btn-primary:hover { opacity: 0.9; text-decoration: none; color: hsl(var(--primary-foreground)); } .btn-secondary { background-color: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); } .btn-secondary:hover { opacity: 0.8; text-decoration: none; } .btn-outline { background: transparent; border-color: hsl(var(--input)); color: hsl(var(--foreground)); } .btn-outline:hover { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); text-decoration: none; } .btn-ghost { background: transparent; border-color: transparent; color: hsl(var(--foreground)); } .btn-ghost:hover { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); text-decoration: none; } .btn-destructive { background-color: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); } .btn-destructive:hover { opacity: 0.9; text-decoration: none; } .btn-success { background-color: hsl(var(--success)); color: hsl(var(--success-foreground)); } .btn-success:hover { opacity: 0.9; text-decoration: none; } .btn-warning { background-color: hsl(var(--warning)); color: hsl(var(--warning-foreground)); } .btn-warning:hover { opacity: 0.9; text-decoration: none; } .btn-info { background-color: hsl(var(--info)); color: hsl(var(--info-foreground)); } .btn-info:hover { opacity: 0.9; text-decoration: none; } .btn-link { background: transparent; border: none; color: hsl(var(--primary)); text-decoration: underline; text-underline-offset: 4px; height: auto; padding: 0; } .btn-link:hover { text-decoration: underline; } /* Outline variants */ .btn-outline-primary { background: transparent; border-color: hsl(var(--primary)); color: hsl(var(--primary)); } .btn-outline-primary:hover { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } .btn-outline-destructive { background: transparent; border-color: hsl(var(--destructive)); color: hsl(var(--destructive)); } .btn-outline-destructive:hover { background-color: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); } .btn-outline-success { background: transparent; border-color: hsl(var(--success)); color: hsl(var(--success)); } .btn-outline-success:hover { background-color: hsl(var(--success)); color: hsl(var(--success-foreground)); } /* Button sizes */ .btn-sm { height: 2.25rem; padding: 0.375rem 0.75rem; font-size: 0.8125rem; } .btn-lg { height: 2.75rem; padding: 0.625rem 2rem; font-size: 1rem; } /* Icon button (square) */ .btn-icon { width: 2.5rem; padding: 0; } .btn-icon.btn-sm { width: 2.25rem; } .btn-icon.btn-lg { width: 2.75rem; } /* Block button */ .btn-block { display: flex; width: 100%; } /* ============================================================ 9. BUTTON GROUP ============================================================ */ .btn-group { display: inline-flex; position: relative; } .btn-group > .btn { border-radius: 0; position: relative; } .btn-group > .btn:not(:first-child) { margin-left: -1px; } .btn-group > .btn:first-child { border-radius: var(--radius) 0 0 var(--radius); } .btn-group > .btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; } .btn-group > .btn:only-child { border-radius: var(--radius); } .btn-group-vertical { display: inline-flex; flex-direction: column; align-items: stretch; } .btn-group-vertical > .btn { border-radius: 0; width: 100%; } .btn-group-vertical > .btn:not(:first-child) { margin-top: -1px; } .btn-group-vertical > .btn:first-child { border-radius: var(--radius) var(--radius) 0 0; } .btn-group-vertical > .btn:last-child { border-radius: 0 0 var(--radius) var(--radius); } /* ============================================================ 10. DROPDOWNS ============================================================ */ .dropdown { position: relative; display: inline-block; } .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 50; min-width: 10rem; padding: 0.25rem; margin-top: 0.25rem; background-color: hsl(var(--popover)); color: hsl(var(--popover-foreground)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); box-shadow: var(--shadow-md); display: none; animation: slideDown 0.12s ease; } .dropdown-menu.show { display: block; } .dropdown-menu-end { left: auto; right: 0; } .dropdown-item { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem 0.5rem; font-size: 0.875rem; color: hsl(var(--foreground)); border: none; background: transparent; border-radius: calc(var(--radius) - 2px); cursor: pointer; text-decoration: none; transition: background-color var(--transition); white-space: nowrap; } .dropdown-item:hover { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); text-decoration: none; } .dropdown-item.active, .dropdown-item:active { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } .dropdown-item.disabled { opacity: 0.5; pointer-events: none; } .dropdown-item-text { padding: 0.5rem 0.5rem; color: hsl(var(--muted-foreground)); font-size: 0.875rem; } .dropdown-divider { height: 1px; background-color: hsl(var(--border)); margin: 0.25rem -0.25rem; border: none; } .dropdown-header { padding: 0.5rem 0.5rem 0.25rem; font-size: 0.75rem; font-weight: 600; color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: 0.05em; } /* ============================================================ 11. NAVS & TABS ============================================================ */ .nav { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; gap: 0.125rem; } .nav-item { } .nav-link { display: inline-flex; align-items: center; padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 500; color: hsl(var(--muted-foreground)); border-radius: var(--radius); text-decoration: none; transition: all var(--transition); cursor: pointer; border: none; background: none; } .nav-link:hover { color: hsl(var(--foreground)); background-color: hsl(var(--accent)); text-decoration: none; } .nav-link.active { color: hsl(var(--foreground)); background-color: hsl(var(--accent)); } .nav-link.disabled { opacity: 0.5; pointer-events: none; } /* Tabs style */ .nav-tabs { border-bottom: 1px solid hsl(var(--border)); gap: 0; } .nav-tabs .nav-link { border-radius: var(--radius) var(--radius) 0 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 0.75rem 1rem; } .nav-tabs .nav-link:hover { border-bottom-color: hsl(var(--muted)); background-color: transparent; } .nav-tabs .nav-link.active { background-color: transparent; border-bottom-color: hsl(var(--primary)); color: hsl(var(--foreground)); } /* Pills style */ .nav-pills .nav-link { border-radius: var(--radius-full); } .nav-pills .nav-link.active { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } /* Fill / Justify */ .nav-fill > .nav-item { flex: 1 1 auto; text-align: center; } .nav-justified > .nav-item { flex: 1 1 auto; text-align: center; } .nav-fill .nav-link, .nav-justified .nav-link { width: 100%; justify-content: center; } /* ============================================================ 12. NAVBAR ============================================================ */ .navbar { display: flex; align-items: center; justify-content: space-between; min-height: 4rem; padding: 0 1.5rem; border-bottom: 1px solid hsl(var(--border)); background-color: hsl(var(--background) / 0.95); position: sticky; top: 0; z-index: 40; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .navbar-brand { font-weight: 600; font-size: 1.125rem; color: hsl(var(--foreground)); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; margin-right: 1.5rem; } .navbar-brand:hover { text-decoration: none; color: hsl(var(--foreground)); } .navbar-nav { display: flex; align-items: center; gap: 0.125rem; list-style: none; margin: 0; padding: 0; } .navbar-text { font-size: 0.875rem; color: hsl(var(--muted-foreground)); } .navbar-collapse { display: flex; align-items: center; gap: 1rem; flex-grow: 1; } .navbar-toggler { display: none; padding: 0.5rem; background: transparent; border: 1px solid hsl(var(--border)); border-radius: var(--radius); cursor: pointer; color: hsl(var(--foreground)); } .navbar-expand-lg .navbar-collapse { display: flex !important; } .navbar-expand-lg .navbar-toggler { display: none; } /* 移动端（< 1024px）：菜单默认折叠，显示 toggler */ @media (max-width: 1023.98px) { .navbar-expand-lg .navbar-collapse { display: none !important; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem 1rem 1rem; background-color: hsl(var(--background)); border-bottom: 1px solid hsl(var(--border)); box-shadow: var(--shadow-md); z-index: 40; } .navbar-expand-lg .navbar-collapse.show { display: flex !important; animation: slideDown 0.2s ease; } .navbar-expand-lg .navbar-nav { flex-direction: column; gap: 0.125rem; width: 100%; } .navbar-expand-lg .navbar-nav .nav-link { width: 100%; padding: 0.625rem 0.75rem; } .navbar-expand-lg .navbar-toggler { display: inline-flex; } } /* Toggler 按钮完整样式 */ .navbar-toggler { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; background: transparent; border: 1px solid hsl(var(--border)); border-radius: var(--radius); cursor: pointer; color: hsl(var(--foreground)); transition: background-color var(--transition); flex-shrink: 0; } .navbar-toggler:hover { background-color: hsl(var(--accent)); } .navbar-toggler:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; } /* Toggler 图标（三道杠） */ .navbar-toggler-icon { display: block; width: 1.125rem; height: 2px; background-color: hsl(var(--foreground)); position: relative; border-radius: 1px; transition: background-color var(--transition); } .navbar-toggler-icon::before, .navbar-toggler-icon::after { content: ""; display: block; width: 1.125rem; height: 2px; background-color: hsl(var(--foreground)); position: absolute; left: 0; border-radius: 1px; transition: transform var(--transition); } .navbar-toggler-icon::before { top: -5px; } .navbar-toggler-icon::after { bottom: -5px; } /* 展开状态：三道杠变 X */ .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon { background-color: transparent; } .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before { top: 0; transform: rotate(45deg); } .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after { bottom: 0; transform: rotate(-45deg); } /* Navbar themes */ .navbar-dark { background-color: hsl(var(--primary)); border-color: hsl(var(--primary)); } .navbar-dark .navbar-brand, .navbar-dark .nav-link { color: hsl(var(--primary-foreground)); } .navbar-dark .nav-link:hover { color: hsl(var(--primary-foreground)); opacity: 0.8; } /* ============================================================ 13. BREADCRUMB ============================================================ */ .breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; list-style: none; padding: 0; margin: 0; font-size: 0.875rem; } .breadcrumb-item { display: flex; align-items: center; gap: 0.25rem; } .breadcrumb-item + .breadcrumb-item::before { content: "/"; color: hsl(var(--muted-foreground)); display: inline-block; margin-right: 0.25rem; } .breadcrumb-item a { color: hsl(var(--muted-foreground)); transition: color var(--transition); } .breadcrumb-item a:hover { color: hsl(var(--foreground)); text-decoration: none; } .breadcrumb-item.active { color: hsl(var(--foreground)); font-weight: 500; } /* ============================================================ 14. PAGINATION ============================================================ */ .pagination { display: flex; align-items: center; gap: 0.25rem; list-style: none; padding: 0; margin: 0; } .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 0.5rem; font-size: 0.875rem; font-weight: 500; border: 1px solid hsl(var(--border)); border-radius: var(--radius); color: hsl(var(--foreground)); background: transparent; text-decoration: none; transition: all var(--transition); cursor: pointer; } .page-link:hover { background-color: hsl(var(--accent)); text-decoration: none; color: hsl(var(--foreground)); } .page-item.active .page-link { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); } .page-item.disabled .page-link { opacity: 0.5; pointer-events: none; } .pagination-sm .page-link { min-width: 1.875rem; height: 1.875rem; font-size: 0.8125rem; } .pagination-lg .page-link { min-width: 2.75rem; height: 2.75rem; font-size: 1rem; } /* ============================================================ 15. CARDS ============================================================ */ .card { background-color: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); overflow: hidden; transition: box-shadow var(--transition); } .card:hover { box-shadow: var(--shadow-sm); } .card-body { padding: 1.5rem; } .card-title { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.375rem; } .card-subtitle { font-size: 0.875rem; color: hsl(var(--muted-foreground)); margin-bottom: 0.75rem; } .card-text { font-size: 0.875rem; margin-bottom: 0.75rem; } .card-text:last-child { margin-bottom: 0; } .card-link { display: inline-block; margin-right: 1rem; font-size: 0.875rem; } .card-link:hover { text-decoration: underline; } .card-header { padding: 1rem 1.5rem; border-bottom: 1px solid hsl(var(--border)); background-color: hsl(var(--muted) / 0.3); } .card-header:first-child { border-radius: var(--radius) var(--radius) 0 0; } .card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6 { margin-bottom: 0; } .card-header p { margin-bottom: 0; } .card-footer { padding: 1rem 1.5rem; border-top: 1px solid hsl(var(--border)); background-color: hsl(var(--muted) / 0.3); } .card-footer:last-child { border-radius: 0 0 var(--radius) var(--radius); } .card-img, .card-img-top, .card-img-bottom { width: 100%; display: block; } .card-img-top { border-radius: var(--radius) var(--radius) 0 0; } .card-img-bottom { border-radius: 0 0 var(--radius) var(--radius); } .card-img-overlay { position: absolute; inset: 0; padding: 1.5rem; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%); color: white; border-radius: var(--radius); } .card-group { display: flex; flex-direction: column; } @media (min-width: 768px) { .card-group { flex-flow: row wrap; } .card-group > .card { flex: 1 0 0%; margin-bottom: 0; } .card-group > .card:not(:first-child) { border-left: 0; } .card-group > .card:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .card-group > .card:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } .card-group > .card:not(:first-child):not(:last-child) { border-radius: 0; } } /* ============================================================ 16. ACCORDION ============================================================ */ .accordion { } .accordion-item { border: 1px solid hsl(var(--border)); border-radius: var(--radius); margin-bottom: -1px; overflow: hidden; } .accordion-item:first-child { border-radius: var(--radius) var(--radius) 0 0; } .accordion-item:last-child { border-radius: 0 0 var(--radius) var(--radius); margin-bottom: 0; } .accordion-item:only-child { border-radius: var(--radius); } .accordion-header { margin: 0; } .accordion-button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1rem 1.25rem; font-size: 0.9375rem; font-weight: 500; font-family: inherit; color: hsl(var(--foreground)); background-color: transparent; border: none; cursor: pointer; text-align: left; transition: all var(--transition); } .accordion-button:hover { background-color: hsl(var(--muted) / 0.5); } .accordion-button::after { content: ""; width: 1rem; height: 1rem; flex-shrink: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 1rem; transition: transform var(--transition); } .accordion-button:not(.collapsed)::after { transform: rotate(180deg); } .accordion-button:not(.collapsed) { color: hsl(var(--foreground)); background-color: hsl(var(--muted) / 0.3); } .accordion-collapse { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; } .accordion-collapse.show { max-height: 500px; } .accordion-body { padding: 1rem 1.25rem; font-size: 0.875rem; color: hsl(var(--muted-foreground)); line-height: 1.7; } /* Flush (no borders) */ .accordion-flush .accordion-item { border-left: 0; border-right: 0; border-radius: 0; } .accordion-flush .accordion-item:first-child { border-top: 0; border-radius: 0; } .accordion-flush .accordion-item:last-child { border-bottom: 0; } /* ============================================================ 17. ALERTS ============================================================ */ .alert { position: relative; display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem; border-radius: var(--radius); border: 1px solid hsl(var(--border)); font-size: 0.875rem; line-height: 1.6; } .alert-heading { font-size: 1rem; font-weight: 600; margin-bottom: 0.25rem; } .alert-link { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .alert-default { background-color: hsl(var(--background)); } .alert-info { border-color: hsl(var(--info) / 0.3); background-color: hsl(var(--info) / 0.05); color: hsl(var(--info)); } .alert-success { border-color: hsl(var(--success) / 0.3); background-color: hsl(var(--success) / 0.05); color: hsl(var(--success)); } .alert-warning { border-color: hsl(var(--warning) / 0.3); background-color: hsl(var(--warning) / 0.05); color: hsl(var(--warning)); } .alert-danger { border-color: hsl(var(--destructive) / 0.3); background-color: hsl(var(--destructive) / 0.05); color: hsl(var(--destructive)); } .alert-dismissible { padding-right: 3rem; } .alert-dismissible .btn-close { position: absolute; top: 0.75rem; right: 0.75rem; } /* ============================================================ 18. BADGES ============================================================ */ .badge { display: inline-flex; align-items: center; justify-content: center; height: 1.375rem; padding: 0 0.625rem; font-size: 0.6875rem; font-weight: 600; line-height: 1; border-radius: var(--radius-full); border: 1px solid transparent; white-space: nowrap; letter-spacing: 0.02em; transition: all var(--transition); } .badge-primary { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } .badge-secondary { background-color: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); } .badge-outline { background: transparent; border-color: hsl(var(--border)); color: hsl(var(--foreground)); } .badge-success { background-color: hsl(var(--success)); color: hsl(var(--success-foreground)); } .badge-warning { background-color: hsl(var(--warning)); color: hsl(var(--warning-foreground)); } .badge-danger { background-color: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); } .badge-info { background-color: hsl(var(--info)); color: hsl(var(--info-foreground)); } .badge-sm { height: 1.125rem; padding: 0 0.375rem; font-size: 0.625rem; } .badge-lg { height: 1.625rem; padding: 0 0.75rem; font-size: 0.75rem; } .badge:empty { display: none; } /* Pill badges (default, already using radius-full) */ .badge-rounded { border-radius: var(--radius); } /* ============================================================ 19. LIST GROUP ============================================================ */ .list-group { display: flex; flex-direction: column; border: 1px solid hsl(var(--border)); border-radius: var(--radius); overflow: hidden; } .list-group-item { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; font-size: 0.875rem; color: hsl(var(--foreground)); background-color: transparent; border-bottom: 1px solid hsl(var(--border)); transition: background-color var(--transition); } .list-group-item:last-child { border-bottom: none; } .list-group-item:hover { background-color: hsl(var(--muted) / 0.5); } .list-group-item.active { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); z-index: 2; } .list-group-item.disabled { opacity: 0.5; pointer-events: none; } .list-group-item-action { cursor: pointer; text-decoration: none; } .list-group-item-action:hover { text-decoration: none; } .list-group-flush { border-radius: 0; border: none; } .list-group-flush .list-group-item { border-left: 0; border-right: 0; } .list-group-flush .list-group-item:first-child { border-top: 0; } .list-group-flush .list-group-item:last-child { border-bottom: 0; } .list-group-numbered { list-style: none; counter-reset: section; padding-left: 0; } .list-group-numbered .list-group-item::before { counter-increment: section; content: counters(section, ".") "."; font-weight: 600; margin-right: 0.5rem; color: hsl(var(--muted-foreground)); } .list-group-horizontal { flex-direction: row; } .list-group-horizontal .list-group-item { border-right: 1px solid hsl(var(--border)); border-bottom: none; } .list-group-horizontal .list-group-item:last-child { border-right: none; } /* ============================================================ 20. MODAL (替换原来的 modal 部分) ============================================================ */ .modal-backdrop { position: fixed; inset: 0; z-index: 100; background-color: rgba(0, 0, 0, 0.8); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; } .modal-backdrop.show { opacity: 1; visibility: visible; } .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); z-index: 105; width: 100%; max-width: 32rem; max-height: 85vh; overflow-y: auto; background-color: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; } .modal.show { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, -50%) scale(1); } .modal-sm { max-width: 24rem; } .modal-lg { max-width: 48rem; } .modal-xl { max-width: 64rem; } .modal-fullscreen { max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; border-radius: 0; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 1.5rem 0; } .modal-title { font-size: 1.125rem; font-weight: 600; } .modal-body { padding: 1.5rem; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0 1.5rem 1.5rem; } /* ============================================================ 21. OFFCANVAS ============================================================ */ .offcanvas-backdrop { position: fixed; inset: 0; z-index: 90; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .offcanvas-backdrop.show { opacity: 1; visibility: visible; } .offcanvas { position: fixed; z-index: 95; background-color: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border)); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; /* 关键：不用 display:none，用 visibility + pointer-events， 这样 transform 过渡才能生效 */ visibility: hidden; pointer-events: none; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s; } .offcanvas.show { visibility: visible; pointer-events: auto; } /* LEFT */ .offcanvas-start { top: 0; left: 0; bottom: 0; width: 20rem; max-width: 80vw; transform: translateX(-100%); border-right: 1px solid hsl(var(--border)); border-left: none; border-top: none; border-bottom: none; border-radius: 0; } .offcanvas-start.show { transform: translateX(0); } /* RIGHT */ .offcanvas-end { top: 0; right: 0; bottom: 0; width: 20rem; max-width: 80vw; transform: translateX(100%); border-left: 1px solid hsl(var(--border)); border-right: none; border-top: none; border-bottom: none; border-radius: 0; } .offcanvas-end.show { transform: translateX(0); } /* TOP */ .offcanvas-top { top: 0; left: 0; right: 0; height: auto; max-height: 50vh; transform: translateY(-100%); border-bottom: 1px solid hsl(var(--border)); border-top: none; border-left: none; border-right: none; border-radius: 0; } .offcanvas-top.show { transform: translateY(0); } /* BOTTOM */ .offcanvas-bottom { bottom: 0; left: 0; right: 0; height: auto; max-height: 50vh; transform: translateY(100%); border-top: 1px solid hsl(var(--border)); border-bottom: none; border-left: none; border-right: none; border-radius: 0; } .offcanvas-bottom.show { transform: translateY(0); } .offcanvas-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.25rem 0.75rem; } .offcanvas-title { font-size: 1.125rem; font-weight: 600; } .offcanvas-body { flex: 1; padding: 0.75rem 1.25rem 1.25rem; overflow-y: auto; } /* ============================================================ 22. TOASTS ============================================================ */ .toast-container { position: fixed; z-index: 110; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; } .toast-container.top-right { top: 1rem; right: 1rem; } .toast-container.top-left { top: 1rem; left: 1rem; } .toast-container.bottom-right { bottom: 1rem; right: 1rem; } .toast-container.bottom-left { bottom: 1rem; left: 1rem; } .toast-container.top-center { top: 1rem; left: 50%; transform: translateX(-50%); } .toast-container.bottom-center { bottom: 1rem; left: 50%; transform: translateX(-50%); } .toast { display: flex; align-items: flex-start; gap: 0.75rem; width: 22rem; max-width: 100%; padding: 1rem; background-color: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); box-shadow: var(--shadow-lg); pointer-events: auto; animation: slideInRight 0.3s ease; } .toast-header { display: flex; align-items: center; gap: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid hsl(var(--border)); margin-bottom: 0.25rem; font-weight: 600; font-size: 0.875rem; } .toast-header .badge { margin-left: auto; } .toast-body { font-size: 0.875rem; color: hsl(var(--muted-foreground)); } /* ============================================================ 23. PROGRESS ============================================================ */ .progress { width: 100%; height: 0.75rem; background-color: hsl(var(--muted)); border-radius: var(--radius-full); overflow: hidden; } .progress-bar { height: 100%; background-color: hsl(var(--primary)); border-radius: var(--radius-full); transition: width 0.5s ease; font-size: 0.6875rem; font-weight: 500; display: flex; align-items: center; justify-content: center; color: hsl(var(--primary-foreground)); min-width: 1.5rem; } .progress-bar-success { background-color: hsl(var(--success)); } .progress-bar-warning { background-color: hsl(var(--warning)); } .progress-bar-danger { background-color: hsl(var(--destructive)); } .progress-bar-info { background-color: hsl(var(--info)); } .progress-sm { height: 0.375rem; } .progress-lg { height: 1.25rem; } .progress-stacked { display: flex; overflow: hidden; } .progress-stacked .progress-bar { border-radius: 0; } .progress-stacked .progress-bar:first-child { border-radius: var(--radius-full) 0 0 var(--radius-full); } .progress-stacked .progress-bar:last-child { border-radius: 0 var(--radius-full) var(--radius-full) 0; } /* Striped / animated */ .progress-bar-striped { background-image: linear-gradient( 45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent ); background-size: 1rem 1rem; } .progress-bar-animated { animation: progressStripe 1s linear infinite; } @keyframes progressStripe { 0% { background-position: 1rem 0; } 100% { background-position: 0 0; } } /* ============================================================ 24. SPINNERS ============================================================ */ .spinner-border { display: inline-block; width: 1.25rem; height: 1.25rem; border: 2px solid hsl(var(--muted)); border-right-color: hsl(var(--primary)); border-radius: 50%; animation: spinnerRotate 0.75s linear infinite; } .spinner-border-sm { width: 1rem; height: 1rem; border-width: 1.5px; } .spinner-border-lg { width: 2rem; height: 2rem; border-width: 3px; } .spinner-grow { display: inline-block; width: 1.25rem; height: 1.25rem; background-color: hsl(var(--primary)); border-radius: 50%; opacity: 0; animation: spinnerGrow 0.75s linear infinite; } .spinner-grow-sm { width: 1rem; height: 1rem; } .spinner-grow-lg { width: 2rem; height: 2rem; } @keyframes spinnerRotate { to { transform: rotate(360deg); } } @keyframes spinnerGrow { 0%, 100% { opacity: 0; transform: scale(0); } 50% { opacity: 1; transform: scale(1); } } /* ============================================================ 25. CAROUSEL ============================================================ */ .carousel { position: relative; overflow: hidden; border-radius: var(--radius); } .carousel-inner { position: relative; width: 100%; overflow: hidden; } .carousel-item { display: none; width: 100%; transition: transform 0.6s ease; } .carousel-item.active { display: block; } .carousel-item img { width: 100%; height: auto; } .carousel-indicators { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; z-index: 10; } .carousel-indicators button { width: 0.625rem; height: 0.625rem; border: none; border-radius: 50%; background-color: rgba(255,255,255,0.5); cursor: pointer; transition: all var(--transition); } .carousel-indicators button.active { background-color: #fff; width: 1.5rem; border-radius: var(--radius-full); } .carousel-control-prev, .carousel-control-next { position: absolute; top: 50%; transform: translateY(-50%); width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; background-color: rgba(255,255,255,0.2); backdrop-filter: blur(4px); border: none; border-radius: 50%; color: #fff; cursor: pointer; z-index: 10; transition: all var(--transition); } .carousel-control-prev:hover, .carousel-control-next:hover { background-color: rgba(255,255,255,0.4); } .carousel-control-prev { left: 1rem; } .carousel-control-next { right: 1rem; } .carousel-caption { position: absolute; bottom: 2rem; left: 0; right: 0; padding: 1rem; text-align: center; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.5); } /* ============================================================ 26. CLOSE BUTTON ============================================================ */ .btn-close { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; padding: 0; font-size: 0; background: transparent; border: none; cursor: pointer; border-radius: var(--radius-sm); transition: all var(--transition); position: relative; } .btn-close::before { content: ""; display: block; width: 0.75rem; height: 0.75rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; } .btn-close:hover { background-color: hsl(var(--accent)); } .btn-close-white::before { filter: invert(1) grayscale(100%) brightness(200%); } /* ============================================================ 27. COLLAPSE ============================================================ */ .collapse { display: none; } .collapse.show { display: block; } .collapsing { height: 0; overflow: hidden; transition: height 0.3s ease; } /* ============================================================ 28. PLACEHOLDERS (Skeleton loading) ============================================================ */ .placeholder { display: inline-block; background: linear-gradient(90deg, hsl(var(--muted)) 25%, hsl(var(--muted) / 0.6) 50%, hsl(var(--muted)) 75% ); background-size: 200% 100%; animation: placeholderShimmer 1.5s ease-in-out infinite; border-radius: var(--radius-sm); min-height: 1em; vertical-align: middle; } .placeholder-glow .placeholder { animation: placeholderGlow 1.5s ease-in-out infinite; } .placeholder-wave .placeholder { animation: placeholderWave 1.5s ease-in-out infinite; } .placeholder-xs { height: 0.5rem; } .placeholder-sm { height: 0.75rem; } .placeholder-lg { height: 1.5rem; } .placeholder-xl { height: 2rem; } .placeholder.col-6 { width: 50%; } .placeholder.col-8 { width: 66.667%; } .placeholder.col-12 { width: 100%; } .bg-primary .placeholder, .bg-dark .placeholder { background: linear-gradient(90deg, rgba(255,255,255,0.3) 25%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.3) 75%); background-size: 200% 100%; } @keyframes placeholderShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @keyframes placeholderGlow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } @keyframes placeholderWave { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* ============================================================ 29. TOOLTIPS (CSS-only) ============================================================ */ [data-tooltip] { position: relative; } [data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 500; background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-radius: var(--radius-sm); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--transition), transform var(--transition); z-index: 60; box-shadow: var(--shadow-md); } [data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); } [data-tooltip-bottom]::after { bottom: auto; top: calc(100% + 8px); } [data-tooltip-bottom]:hover::after { transform: translateX(-50%) translateY(0); } [data-tooltip-left]::after { bottom: auto; top: 50%; right: calc(100% + 8px); left: auto; transform: translateY(-50%) translateX(4px); } [data-tooltip-left]:hover::after { transform: translateY(-50%) translateX(0); } [data-tooltip-right]::after { bottom: auto; top: 50%; left: calc(100% + 8px); transform: translateY(-50%) translateX(-4px); } [data-tooltip-right]:hover::after { transform: translateY(-50%) translateX(0); } /* ============================================================ 30. POPOVERS ============================================================ */ .popover-wrapper { position: relative; display: inline-block; } .popover { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 60; width: 18rem; background-color: hsl(var(--popover)); color: hsl(var(--popover-foreground)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); box-shadow: var(--shadow-lg); display: none; animation: scaleIn 0.15s ease; } .popover.show { display: block; } .popover-header { padding: 0.75rem 1rem; font-size: 0.9375rem; font-weight: 600; border-bottom: 1px solid hsl(var(--border)); } .popover-body { padding: 0.75rem 1rem; font-size: 0.875rem; color: hsl(var(--muted-foreground)); line-height: 1.6; } /* ============================================================ 31. SCROLLSPY ============================================================ */ .scrollspy { position: relative; overflow-y: auto; max-height: 20rem; } .scrollspy-nav { display: flex; flex-direction: column; gap: 0.25rem; list-style: none; padding: 0; margin: 0; position: sticky; top: 0; } .scrollspy-nav .nav-link { font-size: 0.8125rem; padding: 0.375rem 0.75rem; border-left: 2px solid transparent; border-radius: 0; } .scrollspy-nav .nav-link.active { border-left-color: hsl(var(--primary)); background-color: transparent; color: hsl(var(--foreground)); font-weight: 500; } /* ============================================================ 32. SEPARATOR / DIVIDER ============================================================ */ .separator { height: 1px; width: 100%; background-color: hsl(var(--border)); margin: 1.5rem 0; } /* ============================================================ 33. AVATAR ============================================================ */ .avatar { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-full); overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background-color: hsl(var(--muted)); color: hsl(var(--muted-foreground)); font-size: 0.875rem; font-weight: 500; flex-shrink: 0; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar-sm { width: 2rem; height: 2rem; font-size: 0.75rem; } .avatar-lg { width: 3rem; height: 3rem; font-size: 1rem; } .avatar-xl { width: 4rem; height: 4rem; font-size: 1.25rem; } .avatar-group { display: flex; } .avatar-group .avatar { border: 2px solid hsl(var(--background)); margin-left: -0.75rem; } .avatar-group .avatar:first-child { margin-left: 0; } /* ============================================================ 34. SKELETON CARD (Bonus component) ============================================================ */ .skeleton { display: flex; flex-direction: column; gap: 0.75rem; } .skeleton-line { height: 0.875rem; background: linear-gradient(90deg, hsl(var(--muted)) 25%, hsl(var(--muted) / 0.6) 50%, hsl(var(--muted)) 75% ); background-size: 200% 100%; animation: placeholderShimmer 1.5s ease-in-out infinite; border-radius: var(--radius-sm); } .skeleton-line.short { width: 60%; } .skeleton-line.medium { width: 80%; } .skeleton-avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: linear-gradient(90deg, hsl(var(--muted)) 25%, hsl(var(--muted) / 0.6) 50%, hsl(var(--muted)) 75% ); background-size: 200% 100%; animation: placeholderShimmer 1.5s ease-in-out infinite; } /* ============================================================ 35. UTILITIES ============================================================ */ /* Display */ .d-none { display: none !important; } .d-inline { display: inline !important; } .d-inline-block { display: inline-block !important; } .d-block { display: block !important; } .d-flex { display: flex !important; } .d-inline-flex { display: inline-flex !important; } .d-grid { display: grid !important; } @media (min-width: 640px) { .d-sm-none { display: none !important; } .d-sm-flex { display: flex !important; } .d-sm-block { display: block !important; } } @media (min-width: 768px) { .d-md-none { display: none !important; } .d-md-flex { display: flex !important; } .d-md-block { display: block !important; } .d-md-inline-flex { display: inline-flex !important; } } @media (min-width: 1024px) { .d-lg-none { display: none !important; } .d-lg-flex { display: flex !important; } .d-lg-block { display: block !important; } } /* Flexbox */ .flex-row { flex-direction: row !important; } .flex-column { flex-direction: column !important; } .flex-wrap { flex-wrap: wrap !important; } .flex-nowrap { flex-wrap: nowrap !important; } .flex-grow-1 { flex-grow: 1 !important; } .flex-shrink-0 { flex-shrink: 0 !important; } .items-start { align-items: flex-start !important; } .items-center { align-items: center !important; } .items-end { align-items: flex-end !important; } .items-stretch { align-items: stretch !important; } .justify-start { justify-content: flex-start !important; } .justify-center { justify-content: center !important; } .justify-end { justify-content: flex-end !important; } .justify-between { justify-content: space-between !important; } .justify-around { justify-content: space-around !important; } .justify-evenly { justify-content: space-evenly !important; } .align-self-start { align-self: flex-start !important; } .align-self-center { align-self: center !important; } .align-self-end { align-self: flex-end !important; } /* Gap */ .gap-0 { gap: 0 !important; } .gap-1 { gap: 0.25rem !important; } .gap-2 { gap: 0.5rem !important; } .gap-3 { gap: 0.75rem !important; } .gap-4 { gap: 1rem !important; } .gap-5 { gap: 1.5rem !important; } .gap-6 { gap: 2rem !important; } /* Sizing */ .w-25 { width: 25% !important; } .w-50 { width: 50% !important; } .w-75 { width: 75% !important; } .w-100 { width: 100% !important; } .w-auto { width: auto !important; } .h-25 { height: 25% !important; } .h-50 { height: 50% !important; } .h-75 { height: 75% !important; } .h-100 { height: 100% !important; } .h-auto { height: auto !important; } .mw-100 { max-width: 100% !important; } .mh-100 { max-height: 100% !important; } .min-vw-100 { min-width: 100vw !important; } .min-vh-100 { min-height: 100vh !important; } .vw-100 { width: 100vw !important; } .vh-100 { height: 100vh !important; } /* Spacing */ .m-0 { margin: 0 !important; } .m-1 { margin: 0.25rem !important; } .m-2 { margin: 0.5rem !important; } .m-3 { margin: 0.75rem !important; } .m-4 { margin: 1rem !important; } .m-5 { margin: 1.5rem !important; } .m-6 { margin: 2rem !important; } .m-8 { margin: 2.5rem !important; } .m-auto { margin: auto !important; } .mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; } .mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; } .mx-3 { margin-left: 0.75rem !important; margin-right: 0.75rem !important; } .mx-4 { margin-left: 1rem !important; margin-right: 1rem !important; } .mx-5 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; } .mx-auto { margin-left: auto !important; margin-right: auto !important; } .my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } .my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .my-3 { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; } .my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .my-5 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-6 { margin-top: 2rem !important; margin-bottom: 2rem !important; } .my-8 { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; } .mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 0.25rem !important; } .mt-2 { margin-top: 0.5rem !important; } .mt-3 { margin-top: 0.75rem !important; } .mt-4 { margin-top: 1rem !important; } .mt-5 { margin-top: 1.5rem !important; } .mt-6 { margin-top: 2rem !important; } .mt-8 { margin-top: 2.5rem !important; } .mt-auto { margin-top: auto !important; } .me-1 { margin-right: 0.25rem !important; } .me-2 { margin-right: 0.5rem !important; } .me-3 { margin-right: 0.75rem !important; } .me-auto { margin-right: auto !important; } .ms-1 { margin-left: 0.25rem !important; } .ms-2 { margin-left: 0.5rem !important; } .ms-3 { margin-left: 0.75rem !important; } .ms-auto { margin-left: auto !important; } .mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: 0.25rem !important; } .mb-2 { margin-bottom: 0.5rem !important; } .mb-3 { margin-bottom: 0.75rem !important; } .mb-4 { margin-bottom: 1rem !important; } .mb-5 { margin-bottom: 1.5rem !important; } .mb-6 { margin-bottom: 2rem !important; } .mb-8 { margin-bottom: 2.5rem !important; } .p-0 { padding: 0 !important; } .p-1 { padding: 0.25rem !important; } .p-2 { padding: 0.5rem !important; } .p-3 { padding: 0.75rem !important; } .p-4 { padding: 1rem !important; } .p-5 { padding: 1.5rem !important; } .p-6 { padding: 2rem !important; } .p-8 { padding: 2.5rem !important; } .px-0 { padding-left: 0 !important; padding-right: 0 !important; } .px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; } .px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; } .px-5 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; } .py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-5 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .py-6 { padding-top: 2rem !important; padding-bottom: 2rem !important; } .py-8 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; } .pt-0 { padding-top: 0 !important; } .pt-1 { padding-top: 0.25rem !important; } .pt-2 { padding-top: 0.5rem !important; } .pt-3 { padding-top: 0.75rem !important; } .pt-4 { padding-top: 1rem !important; } .pb-0 { padding-bottom: 0 !important; } .pb-1 { padding-bottom: 0.25rem !important; } .pb-2 { padding-bottom: 0.5rem !important; } .pb-3 { padding-bottom: 0.75rem !important; } .pb-4 { padding-bottom: 1rem !important; } .pe-2 { padding-right: 0.5rem !important; } .ps-2 { padding-left: 0.5rem !important; } /* Text alignment */ .text-left { text-align: left !important; } .text-center { text-align: center !important; } .text-right { text-align: right !important; } .text-justify { text-align: justify !important; } .text-start { text-align: left !important; } .text-end { text-align: right !important; } /* Font weight */ .fw-normal { font-weight: 400 !important; } .fw-medium { font-weight: 500 !important; } .fw-semibold { font-weight: 600 !important; } .fw-bold { font-weight: 700 !important; } /* Font size */ .fs-1 { font-size: 2.25rem !important; } .fs-2 { font-size: 1.875rem !important; } .fs-3 { font-size: 1.5rem !important; } .fs-4 { font-size: 1.25rem !important; } .fs-5 { font-size: 1.125rem !important; } .fs-6 { font-size: 1rem !important; } .fs-sm { font-size: 0.8125rem !important; } .fs-xs { font-size: 0.75rem !important; } /* Text overflow */ .text-truncate { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .text-nowrap { white-space: nowrap !important; } .text-break { word-wrap: break-word !important; overflow-wrap: break-word !important; } /* Opacity */ .opacity-0 { opacity: 0 !important; } .opacity-25 { opacity: 0.25 !important; } .opacity-50 { opacity: 0.5 !important; } .opacity-75 { opacity: 0.75 !important; } .opacity-100 { opacity: 1 !important; } /* Overflow */ .overflow-auto { overflow: auto !important; } .overflow-hidden { overflow: hidden !important; } .overflow-visible { overflow: visible !important; } .overflow-scroll { overflow: scroll !important; } /* Position */ .position-static { position: static !important; } .position-relative { position: relative !important; } .position-absolute { position: absolute !important; } .position-fixed { position: fixed !important; } .position-sticky { position: sticky !important; } /* Object fit */ .object-cover { object-fit: cover !important; } .object-contain { object-fit: contain !important; } .object-fill { object-fit: fill !important; } /* Border */ .border { border: 1px solid hsl(var(--border)) !important; } .border-top { border-top: 1px solid hsl(var(--border)) !important; } .border-end { border-right: 1px solid hsl(var(--border)) !important; } .border-bottom { border-bottom: 1px solid hsl(var(--border)) !important; } .border-start { border-left: 1px solid hsl(var(--border)) !important; } .border-0 { border: 0 !important; } .border-primary { border-color: hsl(var(--primary)) !important; } /* Shadow */ .shadow-none { box-shadow: none !important; } .shadow-sm { box-shadow: var(--shadow-sm) !important; } .shadow { box-shadow: var(--shadow) !important; } .shadow-md { box-shadow: var(--shadow-md) !important; } .shadow-lg { box-shadow: var(--shadow-lg) !important; } /* Cursor */ .cursor-pointer { cursor: pointer !important; } .cursor-not-allowed { cursor: not-allowed !important; } .cursor-default { cursor: default !important; } .cursor-grab { cursor: grab !important; } /* User select */ .user-select-none { user-select: none !important; } .user-select-all { user-select: all !important; } /* Pointer events */ .pe-none { pointer-events: none !important; } .pe-auto { pointer-events: auto !important; } /* Z-index */ .z-0 { z-index: 0 !important; } .z-10 { z-index: 10 !important; } .z-20 { z-index: 20 !important; } .z-30 { z-index: 30 !important; } .z-40 { z-index: 40 !important; } .z-50 { z-index: 50 !important; } /* Visually hidden */ .visually-hidden, .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Clearfix */ .clearfix::after { content: ""; display: table; clear: both; } /* Ratio (Aspect ratio) */ .ratio { position: relative; width: 100%; } .ratio::before { content: ""; display: block; padding-top: var(--aspect-ratio); } .ratio > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ratio-1x1 { --aspect-ratio: 100%; } .ratio-4x3 { --aspect-ratio: 75%; } .ratio-16x9 { --aspect-ratio: 56.25%; } .ratio-21x9 { --aspect-ratio: 42.86%; } /* Stretched link */ .stretched-link::after { position: absolute; inset: 0; z-index: 1; content: ""; } /* ============================================================ 36. ANIMATIONS & KEYFRAMES ============================================================ */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes scaleIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @keyframes slideDown { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-100%); } to { opacity: 1; transform: translateX(0); } } .animate-fade-in { animation: fadeIn 0.3s ease forwards; } .animate-slide-up { animation: slideUp 0.3s ease forwards; } .animate-slide-down { animation: slideDown 0.3s ease forwards; } /* Stagger utility */ .stagger-1 { animation-delay: 0.05s; } .stagger-2 { animation-delay: 0.1s; } .stagger-3 { animation-delay: 0.15s; } .stagger-4 { animation-delay: 0.2s; } .stagger-5 { animation-delay: 0.25s; } .stagger-6 { animation-delay: 0.3s; } /* Print utilities */ @media print { .d-print-none { display: none !important; } .d-print-block { display: block !important; } .d-print-flex { display: flex !important; } }