/* * bootstrap3-shadcn.css * A shadcn/ui-inspired override for Bootstrap 3 * Drop this AFTER bootstrap.min.css in your * * Color system: zinc/black on white (shadcn default) */ /* ============================================================ DESIGN TOKENS ============================================================ */ :root { /* Zinc palette */ --zn-50: #fafafa; --zn-100: #f4f4f5; --zn-200: #e4e4e7; --zn-300: #d4d4d8; --zn-400: #a1a1aa; --zn-500: #71717a; --zn-600: #52525b; --zn-700: #3f3f46; --zn-800: #27272a; --zn-900: #18181b; /* Semantic tokens */ --background: #ffffff; --foreground: var(--zn-900); --muted: var(--zn-100); --muted-fg: var(--zn-500); --border: var(--zn-200); --input-border: var(--zn-300); --ring: var(--zn-900); --radius: 6px; --radius-sm: 4px; --radius-lg: 8px; /* Destructive */ --destructive: #ef4444; --destructive-fg: #ffffff; /* Typography */ --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05); --shadow: 0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.10); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10); } /* ============================================================ BASE ============================================================ */ body { font-family: var(--font-sans); color: var(--foreground); background-color: var(--background); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } *, *::before, *::after { box-sizing: border-box; } a { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; } a:hover { color: var(--zn-600); } code, pre, kbd, samp { font-family: var(--font-mono); } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-sans); font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0.01em; border-radius: var(--radius); padding: 8px 16px; height: 36px; border-width: 1px; border-style: solid; cursor: pointer; text-decoration: none; white-space: nowrap; user-select: none; transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, opacity 0.15s ease; box-shadow: var(--shadow-sm); } .btn:focus, .btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; box-shadow: none; } .btn:active { transform: translateY(1px); } .btn.disabled, .btn[disabled], fieldset[disabled] .btn { opacity: 0.5; pointer-events: none; cursor: not-allowed; } /* Primary — solid black */ .btn-primary { background-color: var(--zn-900); border-color: var(--zn-900); color: #ffffff; } .btn-primary:hover, .btn-primary:focus, .btn-primary.focus { background-color: var(--zn-700); border-color: var(--zn-700); color: #ffffff; } .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { background-color: var(--zn-800); border-color: var(--zn-800); color: #ffffff; } /* Default — outlined */ .btn-default { background-color: var(--background); border-color: var(--border); color: var(--foreground); box-shadow: var(--shadow-sm); } .btn-default:hover, .btn-default:focus, .btn-default.focus { background-color: var(--zn-100); border-color: var(--zn-300); color: var(--foreground); } .btn-default:active, .btn-default.active { background-color: var(--zn-200); border-color: var(--zn-300); } /* Secondary / ghost */ .btn-secondary, .btn-ghost { background-color: transparent; border-color: transparent; color: var(--foreground); box-shadow: none; } .btn-secondary:hover, .btn-ghost:hover { background-color: var(--zn-100); border-color: transparent; color: var(--foreground); } /* Info → subtle blue */ .btn-info { background-color: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; } .btn-info:hover { background-color: #dbeafe; border-color: #93c5fd; color: #1d4ed8; } /* Success */ .btn-success { background-color: #f0fdf4; border-color: #bbf7d0; color: #15803d; } .btn-success:hover { background-color: #dcfce7; border-color: #86efac; color: #15803d; } /* Warning */ .btn-warning { background-color: #fffbeb; border-color: #fde68a; color: #b45309; } .btn-warning:hover { background-color: #fef3c7; border-color: #fcd34d; color: #b45309; } /* Danger */ .btn-danger { background-color: var(--destructive); border-color: var(--destructive); color: var(--destructive-fg); } .btn-danger:hover { background-color: #dc2626; border-color: #dc2626; color: #ffffff; } /* Sizes */ .btn-lg { font-size: 15px; height: 42px; padding: 10px 20px; border-radius: var(--radius-lg); } .btn-sm { font-size: 13px; height: 30px; padding: 5px 12px; border-radius: var(--radius-sm); } .btn-xs { font-size: 12px; height: 24px; padding: 3px 8px; border-radius: var(--radius-sm); } /* Block button */ .btn-block { width: 100%; display: flex; } /* Button groups */ .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:not(:first-child):not(:last-child) { border-radius: 0; } .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); } /* ============================================================ FORMS & INPUTS ============================================================ */ label { font-size: 14px; font-weight: 500; color: var(--foreground); margin-bottom: 5px; } .form-control { font-family: var(--font-sans); font-size: 14px; color: var(--foreground); background-color: var(--background); border: 1px solid var(--input-border); border-radius: var(--radius); padding: 8px 12px; height: 36px; line-height: 1.5; box-shadow: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; -webkit-appearance: none; appearance: none; } .form-control:focus { border-color: var(--ring); box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.12); outline: none; } .form-control::placeholder { color: var(--muted-fg); } .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { background-color: var(--zn-100); opacity: 0.7; cursor: not-allowed; } textarea.form-control { height: auto; min-height: 80px; resize: vertical; } select.form-control { 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='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px; cursor: pointer; } /* Validation states */ .has-error .form-control { border-color: var(--destructive); } .has-error .form-control:focus { box-shadow: 0 0 0 3px rgba(239,68,68,0.15); } .has-error .control-label, .has-error .help-block { color: var(--destructive); } .has-success .form-control { border-color: #16a34a; } .has-success .control-label, .has-success .help-block { color: #16a34a; } .has-warning .form-control { border-color: #d97706; } .help-block { font-size: 13px; color: var(--muted-fg); margin-top: 4px; } /* Input groups */ .input-group-addon { font-size: 14px; background-color: var(--zn-100); border: 1px solid var(--input-border); color: var(--muted-fg); padding: 0 12px; border-radius: var(--radius); } .input-group .form-control:not(:first-child), .input-group-addon:not(:first-child) { border-left: 0; border-radius: 0 var(--radius) var(--radius) 0; } .input-group .form-control:not(:last-child), .input-group-addon:not(:last-child) { border-right: 0; border-radius: var(--radius) 0 0 var(--radius); } /* Checkbox & Radio */ .checkbox label, .radio label { font-weight: 400; cursor: pointer; padding-left: 24px; position: relative; } input[type="checkbox"], input[type="radio"] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border: 1px solid var(--input-border); background: var(--background); vertical-align: middle; cursor: pointer; margin-top: 0; position: relative; top: -1px; transition: border-color 0.15s, background-color 0.15s; flex-shrink: 0; } input[type="checkbox"] { border-radius: var(--radius-sm); } input[type="radio"] { border-radius: 50%; } input[type="checkbox"]:checked { background-color: var(--zn-900); border-color: var(--zn-900); 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='none' stroke='%23ffffff' 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; } input[type="radio"]:checked { border-color: var(--zn-900); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='%2318181b'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } input[type="checkbox"]:focus, input[type="radio"]:focus { outline: 2px solid var(--ring); outline-offset: 2px; } /* Form layout helpers */ .form-group { margin-bottom: 16px; } .form-horizontal .control-label { padding-top: 8px; font-weight: 500; } /* ============================================================ CARDS / PANELS ============================================================ */ .panel { background-color: var(--background); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-bottom: 20px; } .panel-body { padding: 20px 24px; } .panel-heading { padding: 16px 24px; border-bottom: 1px solid var(--border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; background-color: transparent; } .panel-title { font-size: 15px; font-weight: 600; color: var(--foreground); } .panel-footer { padding: 12px 24px; border-top: 1px solid var(--border); background-color: var(--zn-50); border-radius: 0 0 var(--radius-lg) var(--radius-lg); color: var(--muted-fg); font-size: 13px; } /* Remove colored panel variants' gradient backgrounds */ .panel-primary { border-color: var(--zn-900); } .panel-primary > .panel-heading { background-color: var(--zn-900); color: #fff; border-color: var(--zn-900); } .panel-success > .panel-heading { background-color: #f0fdf4; color: #15803d; border-color: #bbf7d0; } .panel-info > .panel-heading { background-color: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; } .panel-warning > .panel-heading { background-color: #fffbeb; color: #b45309; border-color: #fde68a; } .panel-danger > .panel-heading { background-color: #fef2f2; color: #b91c1c; border-color: #fecaca; } .well { background-color: var(--zn-50); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: none; padding: 20px 24px; } .well-sm { padding: 12px 16px; } .well-lg { padding: 28px 32px; } /* ============================================================ MODALS & ALERTS ============================================================ */ /* Modal */ .modal-dialog { margin-top: 60px; } .modal-content { background-color: var(--background); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .modal-header { padding: 20px 24px 16px; border-bottom: 1px solid var(--border); } .modal-title { font-size: 17px; font-weight: 600; color: var(--foreground); } .modal-header .close { font-size: 20px; color: var(--muted-fg); opacity: 1; line-height: 1; margin-top: 0; transition: color 0.15s; text-shadow: none; } .modal-header .close:hover { color: var(--foreground); opacity: 1; } .modal-body { padding: 20px 24px; font-size: 14px; color: var(--muted-fg); } .modal-footer { padding: 16px 24px 20px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .modal-footer .btn + .btn { margin-left: 0; /* gap handles spacing now */ margin-bottom: 0; } /* Backdrop */ .modal-backdrop { background-color: rgba(0, 0, 0, 0.6); } .modal-backdrop.in { opacity: 1; } /* Alerts */ .alert { font-size: 14px; border-radius: var(--radius); border-width: 1px; border-style: solid; padding: 12px 16px; display: flex; align-items: flex-start; gap: 10px; } .alert-dismissable .close, .alert-dismissible .close { position: relative; top: 0; right: 0; color: inherit; opacity: 0.6; text-shadow: none; font-size: 16px; line-height: 1; margin-left: auto; padding: 0; } .alert-dismissable .close:hover, .alert-dismissible .close:hover { opacity: 1; } .alert-success { background-color: #f0fdf4; border-color: #bbf7d0; color: #15803d; } .alert-info { background-color: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; } .alert-warning { background-color: #fffbeb; border-color: #fde68a; color: #b45309; } .alert-danger { background-color: #fef2f2; border-color: #fecaca; color: #b91c1c; } /* ============================================================ NAVIGATION ============================================================ */ /* Navbar */ .navbar { border: none; /* border-bottom: 1px solid var(--border); */ box-shadow: none; min-height: 56px; border-radius: 0; } .navbar-default { background-color: var(--background); border-color: var(--border); } .navbar-default .navbar-brand { color: var(--foreground); font-weight: 700; font-size: 16px; padding: 16px 15px; } .navbar-default .navbar-brand:hover { color: var(--zn-700); } .navbar-default .navbar-nav > li > a { color: var(--muted-fg); font-size: 14px; font-weight: 500; padding: 18px 14px; transition: color 0.15s; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: var(--foreground); background-color: transparent; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: var(--foreground); background-color: transparent; font-weight: 600; box-shadow: inset 0 -2px 0 var(--foreground); } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover { background-color: var(--zn-100); color: var(--foreground); } .navbar-default .navbar-toggle { border: 1px solid var(--border); border-radius: var(--radius); } .navbar-default .navbar-toggle .icon-bar { background-color: var(--zn-600); } .navbar-default .navbar-toggle:hover { background-color: var(--zn-100); } /* Nav pills */ .nav-pills > li > a { font-size: 14px; font-weight: 500; color: var(--muted-fg); border-radius: var(--radius); padding: 6px 12px; transition: background-color 0.15s, color 0.15s; } .nav-pills > li > a:hover { background-color: var(--zn-100); color: var(--foreground); } .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { background-color: var(--zn-900); color: #ffffff; } /* Nav tabs */ .nav-tabs { border-bottom: 1px solid var(--border); } .nav-tabs > li > a { font-size: 14px; font-weight: 500; color: var(--muted-fg); border: none; border-radius: 0; padding: 8px 14px; margin-right: 0; transition: color 0.15s; background: transparent; } .nav-tabs > li > a:hover { color: var(--foreground); background-color: transparent; border-color: transparent; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: var(--foreground); background-color: transparent; border: none; border-bottom: 2px solid var(--foreground); margin-bottom: -1px; font-weight: 600; } /* Dropdown menus */ .dropdown-menu { background-color: var(--background); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 4px; min-width: 160px; font-size: 14px; } .dropdown-menu > li > a { color: var(--foreground); padding: 7px 12px; border-radius: var(--radius-sm); transition: background-color 0.1s; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background-color: var(--zn-100); color: var(--foreground); } .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover { background-color: var(--zn-900); color: #ffffff; } .dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover { color: var(--muted-fg); } .dropdown-menu .divider { background-color: var(--border); margin: 4px 0; } .dropdown-header { color: var(--muted-fg); font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding: 6px 12px 4px; } /* Breadcrumbs */ .breadcrumb { background-color: transparent; border-radius: 0; padding: 0; font-size: 13px; margin-bottom: 16px; } .breadcrumb > li, .breadcrumb > li + li::before { color: var(--muted-fg); } .breadcrumb > .active { color: var(--foreground); font-weight: 500; } /* Pagination */ .pagination > li > a, .pagination > li > span { color: var(--foreground); background-color: var(--background); border-color: var(--border); font-size: 14px; padding: 6px 12px; transition: background-color 0.15s, border-color 0.15s; } .pagination > li > a:hover, .pagination > li > span:hover { background-color: var(--zn-100); border-color: var(--zn-300); color: var(--foreground); } .pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > span { background-color: var(--zn-900); border-color: var(--zn-900); color: #ffffff; } .pagination > .disabled > a, .pagination > .disabled > span { color: var(--muted-fg); background-color: var(--background); border-color: var(--border); } .pagination > li:first-child > a { border-radius: var(--radius) 0 0 var(--radius); } .pagination > li:last-child > a { border-radius: 0 var(--radius) var(--radius) 0; } /* ============================================================ TABLES ============================================================ */ .table { font-size: 14px; color: var(--foreground); border-collapse: collapse; width: 100%; } .table th { font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-fg); padding: 10px 16px; border-bottom: 1px solid var(--border); background-color: var(--zn-50); white-space: nowrap; } .table td { padding: 12px 16px; border-top: 1px solid var(--border); vertical-align: middle; } .table > thead > tr > th { border-bottom-width: 1px; } .table-bordered { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .table-bordered th, .table-bordered td { border-color: var(--border); } .table-bordered > thead > tr > th:first-child { border-radius: var(--radius-lg) 0 0 0; } .table-bordered > thead > tr > th:last-child { border-radius: 0 var(--radius-lg) 0 0; } .table-striped > tbody > tr:nth-of-type(odd) > td { background-color: var(--zn-50); } .table-hover > tbody > tr:hover > td { background-color: var(--zn-100); } .table-condensed th, .table-condensed td { padding: 6px 12px; } /* Responsive table container */ .table-responsive { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .table-responsive > .table { margin-bottom: 0; } .table-responsive > .table-bordered { border: 0; } /* ============================================================ BADGES, LABELS, TAGS ============================================================ */ .badge { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; background-color: var(--zn-900); color: #ffffff; border-radius: 9999px; padding: 2px 7px; line-height: 1.4; } .label { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; border-radius: 9999px; padding: 2px 8px; line-height: 1.4; } .label-default { background-color: var(--zn-200); color: var(--zn-700); } .label-primary { background-color: var(--zn-900); color: #fff; } .label-success { background-color: #dcfce7; color: #15803d; } .label-info { background-color: #dbeafe; color: #1d4ed8; } .label-warning { background-color: #fef3c7; color: #b45309; } .label-danger { background-color: #fee2e2; color: #b91c1c; } /* ============================================================ PROGRESS BARS ============================================================ */ .progress { background-color: var(--zn-200); border-radius: 9999px; /* height: 8px; */ box-shadow: none; } .progress-bar { background-color: var(--zn-900); border-radius: 9999px; box-shadow: none; transition: width 0.4s ease; } .progress-bar-success { background-color: #16a34a; } .progress-bar-info { background-color: #2563eb; } .progress-bar-warning { background-color: #d97706; } .progress-bar-danger { background-color: var(--destructive); } /* ============================================================ MISC COMPONENTS ============================================================ */ /* Jumbotron */ .jumbotron { background-color: var(--zn-50); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px 48px; } .jumbotron h1, .jumbotron .h1 { color: var(--foreground); } .jumbotron p { color: var(--muted-fg); } /* List group */ .list-group { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); } .list-group-item { border: none; border-top: 1px solid var(--border); padding: 12px 16px; font-size: 14px; color: var(--foreground); transition: background-color 0.15s; } .list-group-item:first-child { border-top: none; border-radius: 0; } a.list-group-item:hover, button.list-group-item:hover { background-color: var(--zn-50); color: var(--foreground); } .list-group-item.active, .list-group-item.active:hover { background-color: var(--zn-900); border-color: var(--zn-900); color: #ffffff; } /* Tooltip */ .tooltip-inner { background-color: var(--zn-900); color: #ffffff; font-size: 12px; border-radius: var(--radius-sm); padding: 4px 8px; max-width: 240px; } .tooltip.top .tooltip-arrow { border-top-color: var(--zn-900); } .tooltip.bottom .tooltip-arrow { border-bottom-color: var(--zn-900); } .tooltip.left .tooltip-arrow { border-left-color: var(--zn-900); } .tooltip.right .tooltip-arrow { border-right-color: var(--zn-900); } /* Popover */ .popover { border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); font-size: 14px; } .popover-title { background-color: var(--zn-50); border-bottom: 1px solid var(--border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; font-size: 14px; font-weight: 600; color: var(--foreground); } /* Scrollbar (Webkit) */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--zn-100); } ::-webkit-scrollbar-thumb { background: var(--zn-300); border-radius: 9999px; } ::-webkit-scrollbar-thumb:hover { background: var(--zn-400); }