/* ========================================================================== Tikipal Admin — modern administrative SHELL over the standard Django admin. Grouped sidebar + clean topbar + wide content + warm liquid-glass surfaces. All Django HTML, widgets, permissions, URLs and logic stay intact; this is a controlled visual shell. Local only — no external CDNs, no frameworks. ========================================================================== */ /* ---- design tokens + force a single warm light theme ---------------------- */ :root, html[data-theme="light"], html[data-theme="dark"] { color-scheme: light; /* ===== Tikipal Business — single unified token system ===================== */ /* Page canvas: soft gray (less eye-strain than pure white). Panels/sidebar stay white via --tk-surface so cards still lift off the canvas. */ --tk-bg: #f4f4f5; --tk-surface: #ffffff; --tk-surface-subtle: #ececef; --tk-ink: #17171a; --tk-text: #27272a; --tk-text-secondary: #52525b; --tk-muted: #8b8f99; --tk-disabled: #b7bac1; --tk-border: #e4e4e7; --tk-border-strong: #d4d4d8; --tk-hairline: rgba(23, 23, 26, 0.07); --tk-accent: #ff6332; --tk-accent-hover: #e95a2d; --tk-accent-dark: #db5530; --tk-accent-tint: #fff4ef; --tk-ring: #fe6535; --tk-hover: #fafafa; /* neutral hover fill — NEVER orange */ --tk-selected: #fff4ef; --tk-success: #1b7f4b; --tk-warning: #8a5a00; --tk-danger: #d1352c; --tk-radius-control: 10px; --tk-radius-button: 10px; --tk-radius-dropdown: 12px; --tk-radius-panel: 14px; --tk-radius-pill: 999px; --tk-height-compact: 32px; --tk-height-default: 38px; --tk-height-large: 44px; --tk-space-1: 4px; --tk-space-2: 8px; --tk-space-3: 12px; --tk-space-4: 16px; --tk-space-5: 20px; --tk-space-6: 24px; --tk-space-8: 32px; --tk-shadow-subtle: 0 1px 2px rgba(20, 18, 30, 0.06); --tk-shadow-floating: 0 12px 32px -16px rgba(20, 18, 30, 0.28); --tk-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --tk-sidebar-w: clamp(300px, 23vw, 312px); --tk-sidebar-cw: 78px; --tk-topbar-h: 56px; --tk-accent-tint-2: #ffd9c9; /* deeper tint: active-filter / active-page borders */ /* ---- Django admin variable mapping (points at the unified tokens) -------- */ --primary: var(--tk-surface-subtle); --secondary: var(--tk-surface-subtle); /* was orange → removes dashboard orange bars */ --accent: var(--tk-accent); --primary-fg: var(--tk-ink); --body-fg: var(--tk-ink); --body-bg: var(--tk-bg); --body-quiet-color: var(--tk-text-secondary); --body-medium-color: var(--tk-text-secondary); --body-loud-color: var(--tk-ink); --link-fg: var(--tk-accent-dark); --link-hover-color: var(--tk-accent-hover); --link-selected-fg: var(--tk-accent-dark); --hairline-color: var(--tk-hairline); --border-color: var(--tk-border); --darkened-bg: var(--tk-surface-subtle); --selected-bg: var(--tk-selected); --selected-row: var(--tk-selected); --button-bg: var(--tk-accent); --button-fg: #fff; --button-hover-bg: var(--tk-accent-hover); --default-button-bg: var(--tk-accent); --default-button-hover-bg: var(--tk-accent-hover); --close-button-bg: #8b909b; --close-button-hover-bg: #6b7280; --delete-button-bg: var(--tk-danger); --delete-button-hover-bg: #b02d25; --object-tools-bg: #52525b; --object-tools-fg: #fff; --message-success-bg: #e9f9ee; --message-warning-bg: #fff6e5; --message-error-bg: #fdecec; --font-family-primary: var(--tk-font); } @media (prefers-color-scheme: dark) { :root { color-scheme: light; --primary: var(--tk-surface-subtle); --secondary: var(--tk-surface-subtle); --body-fg: var(--tk-ink); --body-bg: var(--tk-bg); --body-quiet-color: var(--tk-text-secondary); --body-medium-color: var(--tk-text-secondary); --body-loud-color: var(--tk-ink); --link-fg: var(--tk-accent-dark); --hairline-color: var(--tk-hairline); --border-color: var(--tk-border); --darkened-bg: var(--tk-surface-subtle); --selected-bg: var(--tk-selected); --selected-row: var(--tk-selected); --button-bg: var(--tk-accent); --default-button-bg: var(--tk-accent); --object-tools-bg: #52525b; } } .theme-toggle { display: none !important; } /* ---- base surface --------------------------------------------------------- */ html { background: var(--tk-bg); } body.tk-shell { margin: 0; min-height: 100vh; font-family: var(--tk-font); color: var(--tk-ink); /* flat neutral base — no warm gradient/radial behind the UI (separation comes from borders, radii, shadows and spacing, not from a warm fill) */ background: var(--tk-bg); background-attachment: fixed; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.tk-shell a { transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease; } :focus-visible { outline: 2px solid var(--tk-ring); outline-offset: 2px; } .tk-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: var(--tk-height-compact); height: var(--tk-height-compact); border: 1px solid transparent; border-radius: var(--tk-radius-control); background: transparent; color: var(--tk-text-secondary); cursor: pointer; } .tk-iconbtn:hover { background: var(--tk-hover); color: var(--tk-ink); } .tk-iconbtn svg { width: 19px; height: 19px; } /* ========================================================================== SHELL LAYOUT ========================================================================== */ .tk-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--tk-sidebar-w); z-index: 60; display: flex; flex-direction: column; background: var(--tk-surface); border-right: 1px solid var(--tk-border); transition: width .2s ease, transform .22s ease; } .tk-main { margin-left: var(--tk-sidebar-w); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left .2s ease; } body.tk-collapsed .tk-sidebar { width: var(--tk-sidebar-cw); } body.tk-collapsed .tk-main { margin-left: var(--tk-sidebar-cw); } body.tk-noauth .tk-main { margin-left: 0; } /* ---- sidebar brand -------------------------------------------------------- */ .tk-sidebar__head { display: flex; align-items: center; gap: 10px; height: var(--tk-topbar-h); padding: 0 22px; flex: 0 0 auto; /* no bottom border → the header line no longer runs continuously across the sidebar; the sidebar reads as its own panel (its right border separates it) */ } .tk-brand { display: inline-flex; align-items: center; gap: 9px; overflow: hidden; } .tk-brand__logo { height: 21px; width: auto; display: block; } .tk-brand__badge { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tk-accent-dark); background: var(--tk-accent-tint); border: 1px solid var(--tk-accent-tint-2); padding: 2px 7px; border-radius: 999px; } .tk-collapse { margin-left: auto; flex: 0 0 auto; } .tk-collapse svg { transition: transform .2s ease; } body.tk-collapsed .tk-collapse svg { transform: rotate(180deg); } body.tk-collapsed .tk-brand__badge { display: none; } /* ---- sidebar nav ---------------------------------------------------------- */ .tk-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 12px 14px 26px; } .tk-nav__group { margin-bottom: 10px; } .tk-nav__title { display: flex; align-items: center; gap: 9px; margin: 18px 8px 8px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--tk-text-secondary); white-space: nowrap; } .tk-nav__title::before { content: ""; flex: 0 0 auto; width: 13px; height: 2px; border-radius: 2px; background: var(--tk-accent); opacity: .55; } /* the section that holds the active model reads clearly as active */ .tk-nav__group:has(.tk-nav__item.is-active) .tk-nav__title { color: var(--tk-accent-dark); } .tk-nav__group:has(.tk-nav__item.is-active) .tk-nav__title::before { opacity: 1; } .tk-nav__list { list-style: none; margin: 0; padding: 0; } .tk-nav__item { position: relative; margin: 1px 0; display: flex; align-items: center; } .tk-nav__link { flex: 1 1 auto; display: flex; align-items: center; gap: 13px; min-width: 0; padding: 6px 12px; min-height: 42px; box-sizing: border-box; border-radius: var(--tk-radius-control); color: var(--tk-ink) !important; font-size: 13.5px; font-weight: 500; border: 1px solid transparent; } .tk-nav__link:hover { background: var(--tk-hover); } .tk-nav__link:hover .tk-nav__ico { color: var(--tk-accent); } .tk-nav__ico { flex: 0 0 auto; width: 22px; height: 22px; color: var(--tk-muted); display: inline-flex; align-items: center; justify-content: center; margin: 0; } .tk-nav__ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .tk-nav__label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tk-nav__add { flex: 0 0 auto; width: 26px; height: 26px; margin-right: 6px; border-radius: var(--tk-radius-control); display: inline-flex; align-items: center; justify-content: center; color: var(--tk-muted) !important; opacity: 0; transition: opacity .12s ease; } .tk-nav__add svg { width: 15px; height: 15px; } .tk-nav__item:hover .tk-nav__add, .tk-nav__item:focus-within .tk-nav__add { opacity: 1; } .tk-nav__add:hover { background: var(--tk-hover); color: var(--tk-accent-dark) !important; } /* active model: pale orange + white/orange border + left marker + weight */ .tk-nav__item.is-active > .tk-nav__link { background: var(--tk-accent-tint); color: var(--tk-accent-dark) !important; font-weight: 600; border-color: transparent; } .tk-nav__item.is-active > .tk-nav__link .tk-nav__ico { color: var(--tk-accent); } .tk-nav__item.is-active::before { content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); width: 4px; height: 24px; border-radius: 0 4px 4px 0; background: var(--tk-accent); } /* collapsed sidebar */ body.tk-collapsed .tk-nav__title { text-align: center; margin: 12px 0 4px; font-size: 0; } body.tk-collapsed .tk-nav__title::after { content: "•"; font-size: 12px; color: var(--tk-border-strong); } body.tk-collapsed .tk-nav__label, body.tk-collapsed .tk-nav__add { display: none; } body.tk-collapsed .tk-nav__link { justify-content: center; padding: 9px 0; } body.tk-collapsed .tk-nav__item.is-active::before { left: -10px; } /* scrim (mobile) */ .tk-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(20, 18, 30, 0.42); opacity: 0; transition: opacity .2s ease; } /* ========================================================================== TOPBAR ========================================================================== */ .tk-topbar { position: sticky; top: 0; z-index: 40; height: var(--tk-topbar-h); flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 0 24px; background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); border-bottom: 1px solid var(--tk-border); } .tk-burger { display: none; } .tk-topbar__ctx { flex: 1 1 auto; min-width: 0; } /* empty spacer — breadcrumb removed */ /* right cluster: language + account, same system, distinct hierarchy */ .tk-topbar__actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } /* ES/EN — an elegant segmented control (white track + delicate active segment) */ .tk-lang { display: inline-flex; align-items: center; height: 30px; padding: 2px; gap: 2px; box-sizing: border-box; border: 1px solid var(--tk-border); border-radius: 9px; background: #fff; } .tk-lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 100%; padding: 0 9px; border-radius: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; color: var(--tk-text-secondary) !important; } .tk-lang a.is-active { background: var(--tk-accent); color: #fff !important; } .tk-lang a:not(.is-active):hover { color: var(--tk-ink) !important; } /* user menu — pulished account capsule, a touch larger than the language control */ .tk-usermenu { position: relative; } .tk-usermenu__btn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 5px; box-sizing: border-box; border: 1px solid var(--tk-border); border-radius: 10px; background: #fff; cursor: pointer; color: var(--tk-text); font-family: var(--tk-font); } .tk-usermenu__btn:hover { border-color: var(--tk-border-strong); background: var(--tk-hover); } .tk-avatar { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 999px; background: linear-gradient(135deg, var(--tk-accent), var(--tk-accent-dark)); color: #fff; font-weight: 700; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; text-transform: uppercase; } .tk-usermenu__name { font-size: 13px; font-weight: 500; color: var(--tk-text); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tk-usermenu__chev { flex: 0 0 auto; width: 14px; height: 14px; color: var(--tk-muted); margin-left: 1px; } .tk-usermenu__pop { position: absolute; top: calc(100% + 8px); right: 0; min-width: 216px; z-index: 50; background: #fff; -webkit-backdrop-filter: saturate(1.5) blur(18px); backdrop-filter: saturate(1.5) blur(18px); border: 1px solid var(--tk-border); border-radius: var(--tk-radius-dropdown); box-shadow: var(--tk-shadow-floating); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .14s ease, transform .14s ease; } .tk-usermenu.is-open .tk-usermenu__pop { opacity: 1; visibility: visible; transform: translateY(0); } .tk-usermenu.is-open .tk-usermenu__btn { border-color: var(--tk-accent-tint-2); } .tk-usermenu__id { padding: 8px 10px 10px; border-bottom: 1px solid var(--tk-hairline); margin-bottom: 4px; display: flex; flex-direction: column; } .tk-usermenu__idname { font-size: 13px; font-weight: 700; color: var(--tk-ink); } .tk-usermenu__idrole { font-size: 11px; color: var(--tk-muted); } .tk-usermenu__link, .tk-usermenu__logout button { display: block; width: 100%; text-align: left; box-sizing: border-box; padding: 8px 10px; border-radius: var(--tk-radius-control); font-size: 13px; color: var(--tk-ink) !important; background: transparent; border: 0; cursor: pointer; font-family: var(--tk-font); } .tk-usermenu__link:hover, .tk-usermenu__logout button:hover { background: var(--tk-hover); color: var(--tk-ink) !important; } .tk-usermenu__logout { margin: 4px 0 0; border-top: 1px solid var(--tk-hairline); padding-top: 4px; } .tk-usermenu__logout button { color: var(--tk-accent-dark) !important; font-weight: 600; } /* ========================================================================== CONTENT — neutralise Django's fixed widths for a fluid wide layout ========================================================================== */ .tk-content { flex: 1 1 auto; padding: 0; } body.tk-shell #container { display: block; width: auto; min-width: 0; margin: 0; padding: 0; } body.tk-shell #main { display: block; width: auto; margin: 0; } body.tk-shell #main.shifted { margin: 0; } /* ---- SINGLE shared inner canvas for every admin page ---------------------- One container aligns title + Add + toolbar + bulk actions + table + paginator (+ forms). No per-piece max-width, no outer card. Centres within the space after the sidebar (expanded 312 / collapsed 79 / drawer) via margin-inline. */ body.tk-shell #content { width: min(100%, 1200px); max-width: none; margin-inline: auto; box-sizing: border-box; padding: var(--tk-space-6) var(--tk-space-6) 40px; /* desktop gutter 24 (tablet 20 / mobile 16 below) */ } /* page title — single spec everywhere: 22 / 700 / 1.2, sentence case (no upper) */ body.tk-shell #content > h1 { font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--tk-ink); margin: 0 0 var(--tk-space-4); } /* suppress Django's built-in nav sidebar (we provide our own) */ body.tk-shell #nav-sidebar, body.tk-shell .toggle-nav-sidebar { display: none !important; } /* ---- surfaces / modules --------------------------------------------------- */ .module, .tk-card { background: var(--tk-surface); border: 1px solid var(--tk-border); border-radius: var(--tk-radius-panel); box-shadow: var(--tk-shadow-subtle); overflow: hidden; margin-bottom: var(--tk-space-5); } .module > h2, .module > caption, body.dashboard .module caption, #content-main .module caption { background: var(--tk-surface-subtle) !important; color: var(--tk-ink) !important; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 12px 18px; border-bottom: 1px solid var(--tk-hairline); } body.dashboard .module caption a, #content-main .module caption a { color: var(--tk-ink) !important; } /* ---- buttons -------------------------------------------------------------- */ .tk-btn, a.tk-btn { display: inline-flex; align-items: center; gap: 7px; height: var(--tk-height-default); padding: 0 16px; box-sizing: border-box; border-radius: var(--tk-radius-button); font-size: 13px; font-weight: 600; font-family: var(--tk-font); cursor: pointer; border: 1px solid var(--tk-border-strong); background: #fff; color: var(--tk-ink) !important; } .tk-btn:hover { border-color: var(--tk-border-strong); background: var(--tk-hover); color: var(--tk-ink) !important; } .tk-btn--primary, a.tk-btn--primary { background: var(--tk-accent); border-color: var(--tk-accent); color: #fff !important; box-shadow: var(--tk-shadow-subtle); } .tk-btn--primary:hover { background: var(--tk-accent-hover); border-color: var(--tk-accent-hover); color: #fff !important; } .button, input[type="submit"], input[type="button"], .submit-row input, a.button { border-radius: var(--tk-radius-button); font-family: var(--tk-font); font-weight: 600; } /* ========================================================================== CHANGELIST ========================================================================== */ /* ---- changelist content: sits on the flat neutral base (no warm fill) ------ The old café/pink came from a warm body radial + off-white content fill; both are gone. The content area is transparent over the neutral base, so every block reads as a WHITE surface separated only by border / radius / shadow. */ body.change-list #content { position: relative; /* inherits the shared canvas width/gutter */ background: transparent; /* neutral base shows through; surfaces are white */ border: 0; border-radius: 0; box-shadow: none; padding-top: var(--tk-space-8); /* more air between the header/topbar and the hero */ } .change-list #content > h1 { display: block; margin: 0 0 var(--tk-space-4); padding: 0; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--tk-ink); } /* action row above the table: bulk actions (left) + section buttons (right), closed by a very subtle hairline that separates the operative block from the table (breathing space above + below, aligned to the content canvas). */ .tk-actionbar { display: flex; align-items: center; gap: var(--tk-space-3); flex-wrap: wrap; min-height: var(--tk-height-default); padding-bottom: var(--tk-space-4); margin: 0 0 var(--tk-space-4); border-bottom: 1px solid var(--tk-hairline); } #changelist .tk-actionbar .actions { flex: 1 1 auto; width: auto; max-width: none; margin: 0; padding: 0; } /* section action buttons: right-aligned; kill Django's `float:left` AND force full height so the button stays IN FLOW (it was collapsing to 18px and overlapping the table). */ .change-list .object-tools, .change-list .object-tools--list { position: static; float: none; margin: 0 0 0 auto; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--tk-space-2); min-height: var(--tk-height-default); } .change-list .object-tools li { float: none; list-style: none; display: flex; align-items: center; min-height: var(--tk-height-default); } .change-list .object-tools a { float: none; } .change-list .object-tools:empty { display: none; margin: 0; } .object-tools li { list-style: none; } .object-tools a, .object-tools a:link, .object-tools a:visited { /* secondary */ display: inline-flex; align-items: center; gap: 6px; height: var(--tk-height-default); box-sizing: border-box; background: #fff; color: var(--tk-ink); border: 1px solid var(--tk-border); border-radius: var(--tk-radius-button); padding: 0 14px; font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; box-shadow: none; } .object-tools a:hover { border-color: var(--tk-border-strong); color: var(--tk-ink); background: var(--tk-hover); } .object-tools a.addlink { /* primary CTA — integrated, flat */ background: var(--tk-accent); color: #fff; border-color: var(--tk-accent); background-image: none; padding: 0 16px; font-size: 13px; font-weight: 600; box-shadow: none; } .object-tools a.addlink::before { content: "+"; font-size: 16px; font-weight: 400; line-height: 1; margin: 0; } .object-tools a.addlink:hover { background: var(--tk-accent-hover); color: #fff; border-color: var(--tk-accent-hover); } /* jerarquía en la fila de sección: sólo el "Add" real es el CTA primario naranja; cualquier otra herramienta (Import, etc.) queda como secundaria discreta. */ .change-list .object-tools a.addlink:not([href$="/add/"]):not([href$="/add"]) { background: #fff; color: var(--tk-ink); border-color: var(--tk-border); box-shadow: none; } .change-list .object-tools a.addlink:not([href$="/add/"]):not([href$="/add"]):hover { background: var(--tk-hover); color: var(--tk-ink); border-color: var(--tk-border-strong); } .change-list .object-tools a.addlink:not([href$="/add/"]):not([href$="/add"])::before { content: none; } .object-tools a:focus-visible { outline: 2px solid var(--tk-accent-dark); outline-offset: 2px; } /* changelist body flat; table full width; consistent inner padding */ #changelist { background: transparent; } #changelist.module { background: transparent; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible; padding: 0; margin: 0; } #changelist.filtered .changelist-form-container, #changelist .changelist-form-container { min-width: 0; margin-right: 0; padding: 0; } #changelist.filtered { min-height: 0; } body.change-list #content-main, body.change-list #changelist, body.change-list #changelist-form, body.change-list .changelist-form-container, body.change-list #changelist-form .results { min-width: 0; max-width: 100%; } /* ---- bare OPERATIVE toolbar: search + filters + counts, NO outer card ------ No wrapping surface (no bg/border/radius/shadow) — the controls sit directly on the page and read as accompaniment to the list, not a standalone card. Each control keeps its own white fill / border / radius / hover / focus. */ .tk-ops { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0; margin: 0 0 16px; /* title→toolbar 16 (h1 mb) · toolbar→actions 16 */ background: transparent; border: 0; border-radius: 0; box-shadow: none; } /* search group (input + Buscar): grows when alone, capped so it shares one line with the filters when filters exist */ .tk-ops #toolbar { flex: 1 1 380px; max-width: 680px; min-width: 220px; padding: 0; margin: 0; border: 0; background: transparent; float: none; } .tk-ops:has(.tk-filter) #toolbar { flex: 1 1 300px; max-width: 460px; min-width: 190px; } .tk-ops #toolbar form#changelist-search { display: block; } .tk-ops #toolbar form#changelist-search > div { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; } .tk-ops #toolbar #changelist-search label { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); margin: 0; z-index: 2; display: inline-flex; pointer-events: none; } .tk-ops #toolbar #changelist-search label img { width: 15px; height: 15px; opacity: .38; } .tk-ops #toolbar #searchbar { flex: 1 1 auto; width: 100%; max-width: 100%; height: var(--tk-height-default); box-sizing: border-box; padding: 0 14px 0 38px; font-size: 13px; border: 1px solid var(--tk-border); border-radius: var(--tk-radius-control); background: #fff; color: var(--tk-ink); } .tk-ops #toolbar #searchbar::placeholder { color: #a1a1aa; font-size: 13px; font-weight: 400; opacity: 1; } /* softer, refined placeholder */ .tk-ops #toolbar #searchbar:hover { border-color: var(--tk-border-strong); } .tk-ops #toolbar #searchbar:focus { outline: none; border-color: var(--tk-ring); box-shadow: 0 0 0 3px var(--tk-accent-tint); } body.change-list .tk-ops #toolbar input[type="submit"] { /* secondary Buscar — flat, auxiliary */ flex: 0 0 auto; height: var(--tk-height-default); box-sizing: border-box; padding: 0 14px; border-radius: var(--tk-radius-button); -webkit-appearance: none; appearance: none; background: #fff !important; color: var(--tk-text) !important; border: 1px solid var(--tk-border) !important; box-shadow: none !important; background-image: none !important; text-shadow: none; font-weight: 600; font-size: 13px; cursor: pointer; } body.change-list .tk-ops #toolbar input[type="submit"]:hover { background: #f4f4f5 !important; color: var(--tk-text) !important; border-color: var(--tk-border-strong) !important; } body.change-list .tk-ops #toolbar input[type="submit"]:active { background: #efeff0 !important; box-shadow: none !important; } .tk-ops #toolbar #changelist-search .small.quiet, .tk-ops #toolbar #changelist-search .help { color: var(--tk-muted); font-size: 11.5px; white-space: nowrap; } /* compact Business filter controls: small label + semibold value + chevron */ .tk-filter { position: relative; flex: 0 0 auto; } .tk-filter__btn { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: var(--tk-height-default); box-sizing: border-box; padding: 0 12px; border: 1px solid var(--tk-border); border-radius: var(--tk-radius-control); background: #fff; font-size: 13px; color: var(--tk-ink); white-space: nowrap; } .tk-filter__btn::-webkit-details-marker { display: none; } .tk-filter__btn::marker { content: ""; } .tk-filter__btn:hover { border-color: var(--tk-border-strong); background: var(--tk-hover); } .tk-filter__title { font-size: 10px; font-weight: 600; color: var(--tk-muted); text-transform: uppercase; letter-spacing: .02em; } .tk-filter__value { font-size: 13px; font-weight: 600; color: var(--tk-ink); } .tk-filter__chev { width: 14px; height: 14px; color: var(--tk-muted); transition: transform .15s ease; margin-left: 1px; } .tk-filter[open] .tk-filter__btn { border-color: var(--tk-ring); box-shadow: 0 0 0 3px var(--tk-accent-tint); background: #fff; } .tk-filter[open] .tk-filter__chev { transform: rotate(180deg); } /* active filter: soft orange border + barely-there tint + a single small orange dot — never colour all the text or the whole surface. */ .tk-filter.is-active .tk-filter__btn { background: var(--tk-accent-tint); border-color: var(--tk-accent-tint-2); } .tk-filter.is-active .tk-filter__value { color: var(--tk-ink); } .tk-filter.is-active .tk-filter__btn::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--tk-accent); flex: 0 0 auto; } .tk-filter__menu { position: absolute; top: calc(100% + 7px); left: 0; z-index: 30; min-width: 250px; max-width: 300px; max-height: 340px; overflow-y: auto; margin: 0; padding: 7px; list-style: none; background: #fff; border: 1px solid var(--tk-border); border-radius: var(--tk-radius-dropdown); box-shadow: var(--tk-shadow-floating); } .tk-filter__menu li a { display: block; padding: 8px 11px; border-radius: var(--tk-radius-control); font-size: 12.5px; color: var(--tk-text-secondary); } .tk-filter__menu li a:hover { background: var(--tk-hover); color: var(--tk-ink); } .tk-filter__menu li.selected a { background: var(--tk-accent-tint); color: var(--tk-accent-dark); font-weight: 600; } /* counts + clear: tertiary, on their own line under search+filters */ /* counts + clear stay inline as tertiary controls on the same row (no forced 2nd line) */ .tk-ops__extra { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; margin: 0; } .tk-clearfilters, .tk-linkbtn, .tk-clearfilters:link, .tk-clearfilters:visited, .tk-linkbtn:link, .tk-linkbtn:visited { /* tertiary — accompaniment, NOT orange (beats Django a:link) */ display: inline-flex; align-items: center; gap: 6px; height: var(--tk-height-default); padding: 0 10px; border-radius: var(--tk-radius-button); font-size: 12.5px; font-weight: 500; color: var(--tk-text-secondary) !important; background: transparent; border: 1px solid transparent; cursor: pointer; } .tk-clearfilters svg, .tk-linkbtn svg { width: 14px; height: 14px; } /* no background — orange only appears on hover/focus/active-indicator */ .tk-clearfilters:hover, .tk-linkbtn:hover { background: transparent; color: var(--tk-accent-dark) !important; } .tk-clearfilters:focus-visible, .tk-linkbtn:focus-visible { color: var(--tk-accent-dark) !important; } .tk-linkbtn.is-on { color: var(--tk-accent-dark) !important; background: transparent; border-color: transparent; } /* bulk actions BELOW the surface (not in a card); one hairline before the table */ #changelist-form { border-top: 0; } #changelist .actions { padding: 0 0 12px; background: transparent; border: 0; box-sizing: border-box; width: 100%; max-width: 100%; color: var(--tk-text-secondary); font-size: 13px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; } #changelist .actions label { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--tk-text-secondary); } #changelist .actions select { height: var(--tk-height-compact); padding: 0 11px; border: 1px solid var(--tk-border); border-radius: var(--tk-radius-control); background: #fff; font-size: 13px; } body.change-list #changelist .actions button { /* compact Ir — most discreet, flat */ height: var(--tk-height-compact); min-height: var(--tk-height-compact); min-width: 36px; padding: 0 14px; border-radius: var(--tk-radius-button); border: 1px solid var(--tk-border); background: var(--tk-surface-subtle); color: var(--tk-text-secondary); box-shadow: none; font-size: 13px; font-weight: 600; cursor: pointer; } body.change-list #changelist .actions button:hover { border-color: var(--tk-border-strong); color: var(--tk-ink); background: #f4f4f5; } #changelist .actions .action-counter, #changelist .actions .all, #changelist .actions .question { font-size: 12.5px; color: var(--tk-muted); } #changelist .actions .action-counter, #changelist .actions .all, #changelist .actions .question { color: var(--tk-muted); } /* ========================================================================== RESULTS — modern DATA GRID (one designed container: header + rows + footer pagination read as a single component). White surfaces, neutral hairlines, deliberate column grid; orange used ONLY as accent (active sort, selection indicator, focus). Structure lives in change_list_results.html. ========================================================================== */ /* outer layer: designed container, corners clipped, attaches to the paginator */ body.change-list #changelist-form .results.tk-grid { background: #fff; border: 1px solid var(--tk-border); border-radius: var(--tk-radius-panel) var(--tk-radius-panel) 0 0; overflow: hidden; margin: 0; box-shadow: var(--tk-shadow-subtle); } /* inner layer: horizontal scroll is trapped here (mobile-safe, zero global overflow) */ .tk-grid__scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .tk-grid__table { width: 100%; border-collapse: collapse; background: #fff; font-size: 13px; color: var(--tk-text-secondary); } /* ---- header franja: neutral near-white (never beige), compact, strong divider */ .tk-grid__table thead th { background: var(--tk-surface-subtle); border: 0; border-bottom: 1px solid var(--tk-border-strong); padding: 0; height: 40px; vertical-align: middle; white-space: nowrap; } .tk-grid__table thead th .tk-th { display: flex; align-items: center; gap: 6px; padding: 0 14px; height: 40px; } .tk-th__label { display: inline-flex; min-width: 0; } .tk-th__label a, .tk-th__label > span { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tk-text); white-space: nowrap; } .tk-th__label a:hover { color: var(--tk-accent-dark); } /* active sort column: pure white franja, charcoal/near-black label */ .tk-grid__table thead th.sorted { background: #fff; } .tk-grid__table thead th.sorted .tk-th__label a, .tk-grid__table thead th.sorted .tk-th__label > span { color: var(--tk-ink); } /* sort control in a compact chip (never floating) */ .tk-th__sort { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; padding: 2px; border-radius: var(--tk-radius-control); } .tk-th__toggle, .tk-th__remove { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: var(--tk-radius-control); color: var(--tk-muted); } .tk-th__toggle svg, .tk-th__remove svg { width: 14px; height: 14px; } .tk-th__toggle--idle { opacity: 0; transition: opacity .12s ease; } .tk-grid__table thead th:hover .tk-th__toggle--idle { opacity: .55; } .tk-th__toggle--idle:hover { opacity: 1 !important; color: var(--tk-text-secondary); } .tk-th__toggle.is-desc svg { transform: rotate(180deg); } /* active sort: small orange indicator inside the chip */ .tk-grid__table thead th.sorted .tk-th__sort { background: var(--tk-accent-tint); } .tk-grid__table thead th.sorted .tk-th__toggle { color: var(--tk-accent-dark); } .tk-th__prio { font-size: 9.5px; font-weight: 700; color: var(--tk-accent-dark); min-width: 12px; text-align: center; } .tk-th__remove:hover { color: var(--tk-accent-dark); background: var(--tk-accent-tint); } /* ---- rows: white, hairline separated, NO zebra, NO vertical rules --------- */ body.change-list .tk-grid__table tbody tr.tk-row { background: #fff; } .tk-grid__table tbody th, .tk-grid__table tbody td { padding: 9px 12px; border: 0; border-bottom: 1px solid var(--tk-hairline); /* row height kept; normal h-padding 12 */ vertical-align: middle; line-height: 1.35; background: transparent; color: var(--tk-text-secondary); max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; } .tk-grid__table tbody tr:last-child th, .tk-grid__table tbody tr:last-child td { border-bottom: 0; } /* main column (row header): flexible ~34%, first-column padding 14, charcoal semibold, 2-line clamp */ .tk-grid__table tbody th { width: 34%; max-width: 360px; white-space: normal; padding-left: 14px; padding-right: 16px; } .tk-grid__table tbody th a { color: var(--tk-ink); font-size: 14px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tk-grid__table tbody td a { color: var(--tk-text-secondary); font-weight: 500; } .tk-grid__table tbody th a:hover, .tk-grid__table tbody td a:hover { color: var(--tk-accent-dark); } .tk-grid__table tbody a:focus-visible { outline: 2px solid var(--tk-ring); outline-offset: 2px; } .tk-grid__table tbody td.field-slug, .tk-grid__table tbody td .mini { color: var(--tk-muted); } /* hover: subtle COOL gray (not warm) + neutral lateral indicator */ body.change-list .tk-grid__table tbody tr.tk-row:hover { background: rgba(17, 17, 20, 0.028); } body.change-list .tk-grid__table tbody tr.tk-row:hover th:first-child, body.change-list .tk-grid__table tbody tr.tk-row:hover td:first-child { box-shadow: inset 2px 0 0 var(--tk-border-strong); } /* selected: near-white (barely distinguishable) + thin ORANGE lateral line */ body.change-list .tk-grid__table tbody tr.tk-row.selected, body.change-list .tk-grid__table tbody tr.tk-row:has(.action-select:checked) { background: #fffaf7; } body.change-list .tk-grid__table tbody tr.selected th:first-child, body.change-list .tk-grid__table tbody tr.selected td:first-child, body.change-list .tk-grid__table tbody tr:has(.action-select:checked) th:first-child, body.change-list .tk-grid__table tbody tr:has(.action-select:checked) td:first-child { box-shadow: inset 3px 0 0 var(--tk-accent); } /* ---- GENERIC column policy (grouped by TYPE via native Django field-* classes, NOT per-model). Compact groups hug their content so the flexible main/slug columns absorb the slack — no huge empty gaps, no spacer columns, no rules. */ /* selection */ .tk-grid__table td.action-checkbox, .tk-grid__table th.action-checkbox-column { width: 46px; min-width: 46px; text-align: center; padding: 0; } .tk-grid__table th.action-checkbox-column .tk-th { padding: 0; justify-content: center; } /* slug / identifiers → left, muted, ellipsis, ~26% */ .tk-grid__table td.field-slug, .tk-grid__table td.field-id, .tk-grid__table td.field-uuid, .tk-grid__table td.field-code, .tk-grid__table td[class*="field-"][class*="_id"] { width: 26%; max-width: 320px; text-align: left; } /* booleans → hug, centered, tight padding */ .tk-grid__table th[class*="field-is_"], .tk-grid__table td[class*="field-is_"], .tk-grid__table th[class*="field-has_"], .tk-grid__table td[class*="field-has_"], .tk-grid__table th[class*="field-can_"], .tk-grid__table td[class*="field-can_"] { width: 1%; white-space: nowrap; text-align: center; padding-left: 8px; padding-right: 8px; } .tk-grid__table th[class*="field-is_"] .tk-th, .tk-grid__table th[class*="field-has_"] .tk-th, .tk-grid__table th[class*="field-can_"] .tk-th { justify-content: center; } /* short / status / type → hug, compact padding */ .tk-grid__table th.column-size, .tk-grid__table td.field-size, .tk-grid__table th.column-status, .tk-grid__table td.field-status, .tk-grid__table td.field-state, .tk-grid__table td.field-type, .tk-grid__table td.field-role { width: 1%; white-space: nowrap; padding-left: 10px; padding-right: 10px; } /* numbers / amounts → right, tabular figures */ .tk-grid__table th.field-amount, .tk-grid__table td.field-amount, .tk-grid__table td.field-price, .tk-grid__table td.field-total, .tk-grid__table td.field-cost, .tk-grid__table td.field-value, .tk-grid__table td.field-quantity, .tk-grid__table td.field-count, .tk-grid__table td.field-balance, .tk-grid__table td[class*="field-"][class*="price"], .tk-grid__table td[class*="field-"][class*="amount"], .tk-grid__table td[class*="field-"][class*="total"] { width: 1%; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; } .tk-grid__table th.field-amount .tk-th, .tk-grid__table th[class*="field-"][class*="amount"] .tk-th { justify-content: flex-end; } /* dates → tabular figures, consistent left alignment */ .tk-grid__table td[class*="field-"][class*="date"], .tk-grid__table td[class*="field-"][class*="_at"], .tk-grid__table td.field-created, .tk-grid__table td.field-modified, .tk-grid__table td.field-updated, .tk-grid__table td.field-timestamp { white-space: nowrap; font-variant-numeric: tabular-nums; } /* ---- BOOLEAN & STATE representation --------------------------------------- Editable (list_editable) = real native checkbox (obvious control). Read-only = semantic icon + text, never a checkbox, never orange. */ /* EDITABLE booleans: small squircle, NO glyph. checked = solid elegant green, unchecked = white + gray border. (15px, r4, no shadow/glow, no orange.) */ .tk-grid__table input[type="checkbox"] { -webkit-appearance: none; appearance: none; margin: 0; width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--tk-border-strong); background: #fff; vertical-align: middle; cursor: pointer; transition: background .12s ease, border-color .12s ease; } .tk-grid__table input[type="checkbox"]:hover { border-color: var(--tk-muted); } .tk-grid__table input[type="checkbox"]:checked { background: #1f8554; border-color: #1f8554; } .tk-grid__table input[type="checkbox"]:focus-visible { outline: 2px solid var(--tk-ring); outline-offset: 2px; } /* ROW SELECTION (per-row + select-all): unmistakably a checkbox — 16px square with a small white check on charcoal. Distinct from the glyph-less green editable. */ .tk-grid__table input.action-select, .tk-grid__table #action-toggle { width: 16px; height: 16px; border-radius: 4px; } .tk-grid__table input.action-select:checked, .tk-grid__table #action-toggle:checked { background: var(--tk-ink) url('data:image/svg+xml;utf8,') center / 11px no-repeat; border-color: var(--tk-ink); } /* READ-ONLY booleans: icon (green check / grey mark) + word — legible without colour, no orange. (Django renders these as , never .) */ .tk-grid__table td:has(> img[src*="icon-yes"]), .tk-grid__table td:has(> img[src*="icon-no"]), .tk-grid__table td:has(> img[src*="icon-unknown"]) { text-align: center; white-space: nowrap; } .tk-grid__table td img[src*="icon-yes"], .tk-grid__table td img[src*="icon-no"], .tk-grid__table td img[src*="icon-unknown"] { width: 13px; height: 13px; padding: 0; border-radius: 0; background: none; box-sizing: content-box; vertical-align: -2px; } .tk-grid__table td img[src*="icon-no"], .tk-grid__table td img[src*="icon-unknown"] { filter: grayscale(1) opacity(.5); } .tk-grid__table td:has(> img[src*="icon-yes"])::after { content: "Sí"; margin-left: 6px; font-size: 12px; font-weight: 500; color: #1f8554; } .tk-grid__table td:has(> img[src*="icon-no"])::after { content: "No"; margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--tk-muted); } .tk-grid__table td:has(> img[src*="icon-unknown"])::after { content: "—"; margin-left: 6px; font-size: 12px; color: var(--tk-muted); } /* empty values → muted em-dash (tikipal-admin.js normalises "-" → "—" + .tk-empty) */ .tk-grid__table td.tk-empty { color: var(--tk-muted); } /* business-state badges (soft semantic; JS wraps status-column text in .tk-badge) */ .tk-grid__table .tk-badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--tk-radius-pill); font-size: 12px; font-weight: 500; white-space: nowrap; } .tk-grid__table .tk-badge::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; } .tk-badge--success { background: #e8f6ee; color: #1b7f4b; } .tk-badge--warning { background: #fdf3e3; color: #8a5a00; } .tk-badge--danger { background: #fdecec; color: #c0362c; } .tk-badge--neutral { background: var(--tk-surface-subtle); color: var(--tk-text-secondary); } /* ---- pagination: integrated foot of the same container ------------------- */ body.change-list .paginator { background: #fff; border: 1px solid var(--tk-border); border-top: 1px solid var(--tk-hairline); border-radius: 0 0 var(--tk-radius-panel) var(--tk-radius-panel); box-shadow: var(--tk-shadow-subtle); min-height: var(--tk-height-large); box-sizing: border-box; padding: 0 16px; margin: 0 0 var(--tk-space-5); font-size: 12.5px; color: var(--tk-text-secondary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .paginator a, .paginator a:link, .paginator a:visited, .paginator .this-page { min-width: var(--tk-height-compact); height: var(--tk-height-compact); padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--tk-radius-control); border: 1px solid transparent; background: transparent; color: var(--tk-text-secondary); font-weight: 600; } .paginator a:hover, .paginator a:link:hover { border-color: var(--tk-border-strong); color: var(--tk-ink); background: rgba(17, 17, 20, 0.03); } /* active page: pale-orange rounded chip (accent, not a heavy fill) */ .paginator .this-page { background: var(--tk-accent-tint); border-color: var(--tk-accent-tint-2); color: var(--tk-accent-dark); } .paginator .showall, .paginator a.showall:link { background: transparent; border: 0; color: var(--tk-accent-dark); font-weight: 600; padding: 0 8px; } .paginator .end { margin-right: 6px; } /* filter panel: glass, integrated, sticky on desktop */ #changelist-filter { background: var(--tk-surface); border: 1px solid var(--tk-border); border-radius: var(--tk-radius-panel); box-shadow: var(--tk-shadow-subtle); width: 240px; } #changelist-filter h2 { background: transparent; color: var(--tk-ink); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 14px 16px 10px; border-bottom: 1px solid var(--tk-hairline); } #changelist-filter h3 { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tk-muted); padding: 14px 16px 4px; margin: 0; } #changelist-filter ul { padding: 0 8px 8px; margin: 0 0 4px; border-bottom: 1px solid var(--tk-hairline); } #changelist-filter details ul { border-bottom: 0; } #changelist-filter li { list-style: none; margin: 1px 0; } #changelist-filter li a { display: block; padding: 6px 8px; border-radius: var(--tk-radius-control); font-size: 12.5px; color: var(--tk-text-secondary); } #changelist-filter li a:hover { background: rgba(28, 27, 34, 0.05); color: var(--tk-ink); } #changelist-filter li.selected a { background: var(--tk-accent-tint); color: var(--tk-accent-dark); font-weight: 600; } @media (min-width: 1025px) { #changelist-filter { position: sticky; top: calc(var(--tk-topbar-h) + 14px); max-height: calc(100vh - var(--tk-topbar-h) - 40px); overflow-y: auto; } } /* sober empty state — inside its own white container, neutral */ #changelist-form .results:has(#result_list tbody:empty)::after, #changelist:not(:has(#result_list)) #changelist-form::after { content: "Sin resultados para mostrar."; display: block; padding: 44px 16px; text-align: center; color: var(--tk-muted); font-size: 13.5px; background: #fff; border: 1px solid var(--tk-border); border-radius: var(--tk-radius-panel); } /* ========================================================================== CHANGE FORM — Business form system (pilot: Space). CSS-ONLY. Native widgets, ids, names, validation, uploads, autocomplete, raw_id, FilteredSelectMultiple and JavaScript stay intact — presentation only. Generic, meant to be inherited by every model's change form. ========================================================================== */ .change-form #content-main > form { max-width: 1000px; } /* ---- sections: clean white panels (fieldsets + inline groups) ------------- */ .change-form fieldset.module, .change-form .inline-group { background: var(--tk-surface); border: 1px solid var(--tk-border); border-radius: var(--tk-radius-panel); box-shadow: var(--tk-shadow-subtle); margin-bottom: var(--tk-space-5); overflow: hidden; } .change-form fieldset.module > h2, .change-form .inline-group > .tabular > h2, .change-form .inline-group > .stacked > h2, .change-form .inline-group > h2 { background: var(--tk-surface); color: var(--tk-ink); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 14px 20px; margin: 0; border-bottom: 1px solid var(--tk-hairline); } .change-form fieldset.module > h2:empty { display: none; } .change-form fieldset.module .description { padding: 12px 20px 0; color: var(--tk-text-secondary); font-size: 12.5px; } /* ---- form row: 200px label column + flexible control column --------------- */ .change-form .form-row { padding: 0; border: 0; border-bottom: 1px solid var(--tk-hairline); background: transparent; } .change-form fieldset.module .form-row:last-child { border-bottom: 0; } .change-form .form-row > div { min-width: 0; } .change-form .form-row .flex-container { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: start; padding: 13px 20px; } .change-form .form-row .flex-container > label { grid-column: 1; margin: 0; padding-top: 9px; text-align: left; font-size: 13px; font-weight: 600; color: var(--tk-text); line-height: 1.3; float: none; width: auto; } .change-form .form-row .flex-container > label.required::after { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 999px; background: var(--tk-accent); margin-left: 5px; vertical-align: 2px; } .change-form .form-row .flex-container > :not(label) { grid-column: 2; min-width: 0; } /* help + errors under the control column */ .change-form .form-row .help, .change-form .form-row div.help { margin: 2px 0 0; padding: 0 20px 12px 236px; color: var(--tk-muted); font-size: 12px; max-width: 660px; } .change-form .errorlist { margin: 0; padding: 10px 20px 0 236px; list-style: none; color: var(--tk-danger); font-size: 12.5px; font-weight: 500; } .change-form .form-row.errors .flex-container input, .change-form .form-row.errors .flex-container textarea, .change-form .form-row.errors .flex-container select { border-color: var(--tk-danger); box-shadow: 0 0 0 3px rgba(209,53,44,0.10); } /* ---- inputs / textareas / selects: 38px, r10, contained widths ------------ */ .change-form .flex-container input[type="text"], .change-form .flex-container input[type="email"], .change-form .flex-container input[type="url"], .change-form .flex-container input[type="password"], .change-form .flex-container input[type="tel"], .change-form .flex-container input[type="date"], .change-form .flex-container input[type="time"], .change-form .flex-container .vTextField, .change-form .flex-container .vURLField { width: 100%; max-width: 460px; box-sizing: border-box; min-height: var(--tk-height-default); padding: 8px 12px; border: 1px solid var(--tk-border); border-radius: var(--tk-radius-control); background: #fff; font-size: 13px; color: var(--tk-ink); font-family: var(--tk-font); } /* short numeric fields hug their content (capacity, latitude, longitude, price…) */ .change-form .flex-container input[type="number"] { width: 150px; box-sizing: border-box; min-height: var(--tk-height-default); padding: 8px 12px; border: 1px solid var(--tk-border); border-radius: var(--tk-radius-control); background: #fff; font-size: 13px; color: var(--tk-ink); font-family: var(--tk-font); font-variant-numeric: tabular-nums; } .change-form .flex-container textarea, .change-form .flex-container .vLargeTextField { width: 100%; max-width: 640px; box-sizing: border-box; min-height: 84px; resize: vertical; padding: 10px 12px; border: 1px solid var(--tk-border); border-radius: var(--tk-radius-control); background: #fff; font-size: 13px; color: var(--tk-ink); font-family: var(--tk-font); line-height: 1.5; } .change-form .flex-container select { min-height: var(--tk-height-default); box-sizing: border-box; min-width: 200px; max-width: 460px; padding: 8px 12px; border: 1px solid var(--tk-border); border-radius: var(--tk-radius-control); background: #fff; font-size: 13px; color: var(--tk-ink); font-family: var(--tk-font); } .change-form .flex-container ::placeholder { color: #a1a1aa; } .change-form .flex-container input:focus, .change-form .flex-container textarea:focus, .change-form .flex-container select:focus { outline: none; border-color: var(--tk-ring); box-shadow: 0 0 0 3px var(--tk-accent-tint); } /* readonly fields: discreet metadata treatment */ .change-form .form-row .flex-container .readonly { padding-top: 9px; color: var(--tk-text-secondary); font-size: 13px; } /* ---- FORM checkboxes: 16px squircle + orange check (distinct from table) --- */ .change-form input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; min-height: 0; flex: 0 0 auto; border-radius: 5px; border: 1.5px solid var(--tk-border-strong); background: #fff; vertical-align: middle; cursor: pointer; } .change-form input[type="checkbox"]:checked { background: var(--tk-accent) url('data:image/svg+xml;utf8,') center / 11px no-repeat; border-color: var(--tk-accent); } .change-form input[type="checkbox"]:focus-visible { outline: 2px solid var(--tk-ring); outline-offset: 2px; } .change-form input[type="radio"] { width: 16px; height: 16px; accent-color: var(--tk-accent); } /* boolean rows → compact config block (chips that flow), not four huge rows */ .change-form fieldset.module .form-row:has(.checkbox-row) { display: inline-flex; width: auto; vertical-align: top; border-bottom: 0; margin: 4px 0 4px 20px; } .change-form fieldset.module .form-row:has(.checkbox-row) + .form-row:has(.checkbox-row) { margin-left: 8px; } .change-form .checkbox-row { display: inline-flex !important; align-items: center; gap: 8px; grid-template-columns: none !important; padding: 8px 12px; border: 1px solid var(--tk-border); border-radius: var(--tk-radius-control); background: var(--tk-surface-subtle); } .change-form .checkbox-row label.vCheckboxLabel { padding: 0; margin: 0; font-size: 13px; font-weight: 500; color: var(--tk-text); } /* ---- file inputs → compact secondary button ------------------------------- */ .change-form .flex-container input[type="file"] { font-size: 13px; color: var(--tk-text-secondary); padding-top: 6px; } .change-form input[type="file"]::file-selector-button, .change-form input[type="file"]::-webkit-file-upload-button { height: var(--tk-height-compact); padding: 0 12px; margin-right: 10px; border-radius: var(--tk-radius-button); border: 1px solid var(--tk-border-strong); background: #fff; color: var(--tk-ink); font-family: var(--tk-font); font-size: 13px; font-weight: 600; cursor: pointer; } .change-form input[type="file"]::file-selector-button:hover { background: var(--tk-hover); } .change-form .file-upload a { color: var(--tk-accent-dark); } /* ---- related / raw_id: neutral icons, orange on hover, aligned ------------- */ .change-form .flex-container .related-widget-wrapper { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .change-form .vForeignKeyRawIdAdminField { width: 340px !important; max-width: 100%; } .change-form .related-lookup, .change-form .related-widget-wrapper-link, .change-form .datetimeshortcuts a { color: var(--tk-muted); } .change-form .related-lookup:hover, .change-form .related-widget-wrapper-link:hover, .change-form .datetimeshortcuts a:hover { color: var(--tk-accent-dark); } .change-form .related-widget-wrapper-link img, .change-form .related-lookup img { filter: grayscale(1) opacity(0.55); transition: filter .12s ease; } .change-form .related-widget-wrapper-link:hover img, .change-form .related-lookup:hover img { filter: none; } .change-form .inline-related h3 { background: var(--tk-surface-subtle); border-bottom: 1px solid var(--tk-hairline); font-size: 13px; color: var(--tk-text); } /* ========================================================================== FORM EXCEPTIONS (surgical): tabular inline · password button · add-row link ========================================================================== */ /* ---- 1. TABULAR INLINE: compact admin table inside the section panel ------- */ .change-form .inline-group .tabular { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* internal horizontal scroll (mobile-safe) */ .change-form .inline-group .tabular table { width: 100%; border-collapse: collapse; background: #fff; font-size: 13px; margin: 0; } .change-form .inline-group .tabular thead th { background: var(--tk-surface-subtle); border: 0; border-bottom: 1px solid var(--tk-border-strong); padding: 8px 12px; font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: .02em; color: var(--tk-text-secondary); white-space: nowrap; text-align: left; vertical-align: middle; } .change-form .inline-group .tabular tbody td, .change-form .inline-group .tabular tbody th { padding: 8px 12px; border: 0; border-bottom: 1px solid var(--tk-hairline); vertical-align: middle; background: transparent; /* no zebra, hairlines only */ } .change-form .inline-group .tabular tbody tr:last-child td { border-bottom: 0; } .change-form .inline-group .tabular th.original, .change-form .inline-group .tabular td.original { width: 1%; white-space: nowrap; color: var(--tk-text-secondary); } /* controls contained within cells (compact 32px, no full-width stretch) */ .change-form .inline-group .tabular td input[type="text"], .change-form .inline-group .tabular td input[type="url"], .change-form .inline-group .tabular td input[type="email"], .change-form .inline-group .tabular td input[type="number"], .change-form .inline-group .tabular td input[type="tel"], .change-form .inline-group .tabular td .vTextField, .change-form .inline-group .tabular td select, .change-form .inline-group .tabular td textarea { max-width: 100%; min-height: 32px; box-sizing: border-box; padding: 5px 8px; margin: 0; border: 1px solid var(--tk-border); border-radius: var(--tk-radius-control); font-size: 13px; background: #fff; } .change-form .inline-group .tabular td input[type="number"] { width: 110px; } /* DELETE column: clearly differentiated (red when marked) */ .change-form .inline-group .tabular th.delete, .change-form .inline-group .tabular td.delete { width: 1%; text-align: center; white-space: nowrap; } .change-form .inline-group .tabular td.delete input[type="checkbox"] { border-color: var(--tk-border-strong); } .change-form .inline-group .tabular td.delete input[type="checkbox"]:checked { background: var(--tk-danger); border-color: var(--tk-danger); } .change-form .inline-group .tabular td.delete a.inline-deletelink, .change-form .inline-deletelink { color: var(--tk-danger); font-size: 12.5px; font-weight: 500; } .change-form .inline-group .tabular td.delete a.inline-deletelink:hover { color: #b02d25; } /* errors inside a cell: no 236px offset, red */ .change-form .inline-group .tabular .errorlist { padding: 4px 8px 0; color: var(--tk-danger); } .change-form .inline-group .tabular tr.errors td, .change-form .inline-group .tabular td.errors { box-shadow: inset 0 0 0 9999px rgba(209,53,44,0.03); } /* ---- 2. PASSWORD reset button (UserAdmin ReadOnlyPasswordHashWidget) ------- Scoped to the password field row only — NOT a global .button selector. */ .change-form .field-password a.button { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; box-sizing: border-box; border-radius: var(--tk-radius-control); border: 1px solid var(--tk-border); background: var(--tk-surface-subtle); color: var(--tk-text-secondary); font-size: 13px; font-weight: 600; text-transform: none; box-shadow: none; } .change-form .field-password a.button:hover { background: var(--tk-hover); border-color: var(--tk-border-strong); color: var(--tk-ink); } .change-form .field-password a.button:focus-visible { outline: 2px solid var(--tk-ring); outline-offset: 2px; } /* ---- 3. ADD-ROW link ("Agregar … adicional"): neutral, no Django green ----- */ .change-form .add-row a, .change-form .add-row a.addlink { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; margin: 4px 0; box-sizing: border-box; border-radius: var(--tk-radius-control); border: 1px solid transparent; background: transparent; background-image: none; /* kill Django's green icon-addlink.svg background */ color: var(--tk-text-secondary); font-size: 13px; font-weight: 600; } .change-form .add-row a::before { content: "+"; font-size: 15px; font-weight: 400; line-height: 1; color: currentColor; } .change-form .add-row a:hover { color: var(--tk-accent-dark); background: transparent; } .change-form .add-row a:focus-visible { outline: 2px solid var(--tk-ring); outline-offset: 2px; } /* ---- FilteredSelectMultiple: two clean white panels ----------------------- */ .change-form .selector { display: flex; gap: 14px; align-items: stretch; width: 100%; max-width: 900px; } .change-form .selector-available, .change-form .selector-chosen { flex: 1 1 0; min-width: 0; margin: 0; border: 1px solid var(--tk-border); border-radius: var(--tk-radius-dropdown); background: #fff; overflow: hidden; display: flex; flex-direction: column; } .change-form .selector .selector-available-title, .change-form .selector .selector-chosen-title { padding: 10px 12px; margin: 0; border-bottom: 1px solid var(--tk-hairline); background: var(--tk-surface-subtle); } .change-form .selector .selector-available-title label, .change-form .selector .selector-chosen-title label { font-size: 12px; font-weight: 600; color: var(--tk-text); text-transform: capitalize; } .change-form .selector .selector-available-title .helptext, .change-form .selector .selector-chosen-title .helptext { display: none; } .change-form .selector .selector-filter { padding: 8px 10px; margin: 0; border-bottom: 1px solid var(--tk-hairline); display: flex; align-items: center; gap: 6px; } .change-form .selector .selector-filter input { flex: 1 1 auto; min-height: 32px; border: 1px solid var(--tk-border); border-radius: var(--tk-radius-control); padding: 4px 10px; font-size: 13px; } .change-form .selector select { border: 0; border-radius: 0; width: 100%; height: 210px; padding: 4px; background: #fff; } .change-form .selector select option { padding: 5px 8px; border-radius: 6px; } .change-form .selector select option:checked { background: var(--tk-accent-tint); color: var(--tk-accent-dark); } .change-form .selector-chosen .selector-chosen-title { background: var(--tk-surface-subtle); } .change-form .selector .selector-chooser { align-self: center; margin: 0 -6px; padding: 0; background: transparent; border-radius: 999px; } .change-form .selector .selector-chooser li { margin: 4px 0; } .change-form .selector .selector-add, .change-form .selector .selector-remove { border-radius: var(--tk-radius-control); } .change-form .selector-clearall, .change-form .selector-chooseall { color: var(--tk-text-secondary); font-size: 12px; } .change-form .selector-clearall:hover, .change-form .selector-chooseall:hover { color: var(--tk-accent-dark); } .change-form .selector + .help, .change-form .form-row .selector-chosen .help { max-width: none; } /* ---- submit row: primary orange · secondaries white · delete destructive --- */ .submit-row { background: var(--tk-surface); border: 1px solid var(--tk-border); border-radius: var(--tk-radius-panel); box-shadow: var(--tk-shadow-subtle); padding: 12px 16px; margin-top: var(--tk-space-5); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .submit-row input[type="submit"], .submit-row a.deletelink { height: var(--tk-height-default); min-height: var(--tk-height-default); box-sizing: border-box; display: inline-flex; align-items: center; padding: 0 16px; border-radius: var(--tk-radius-button); font-weight: 600; font-size: 13px; text-transform: none; cursor: pointer; } .submit-row input[type="submit"] { border: 1px solid var(--tk-border-strong); background: #fff; color: var(--tk-ink); } .submit-row input[type="submit"]:hover { border-color: var(--tk-border-strong); background: var(--tk-hover); color: var(--tk-ink); } .submit-row input[type="submit"].default { background: var(--tk-accent); border-color: var(--tk-accent); color: #fff; order: -1; box-shadow: var(--tk-shadow-subtle); } .submit-row input[type="submit"].default:hover { background: var(--tk-accent-hover); border-color: var(--tk-accent-hover); color: #fff; } .submit-row a.deletelink { margin-left: auto; background: #fff; border: 1px solid var(--tk-border-strong); color: var(--tk-danger); } .submit-row a.deletelink:hover { background: #fdecec; border-color: #f3c0c0; } /* messages */ ul.messagelist { margin: 0 0 18px; padding: 0; } ul.messagelist li { border-radius: var(--tk-radius-control); border: 1px solid var(--tk-border); padding: 12px 16px 12px 44px; font-size: 13px; box-shadow: var(--tk-shadow-subtle); } ul.messagelist li.success { background: var(--message-success-bg); border-color: #b7e4c7; color: #1b5e34; } ul.messagelist li.warning { background: var(--message-warning-bg); border-color: #f3d9a6; color: #8a5a00; } ul.messagelist li.error { background: var(--message-error-bg); border-color: #f3c0c0; color: #b3261e; } /* ========================================================================== DASHBOARD (admin index) — 2-column layout INSIDE the 1200 canvas. Fixes Django's `#content-related { float:right; margin-right:-300px }` overflow with a grid (no negative margins). Stock template; CSS-only. Apps / models / links / permissions / recent-actions / URLs all preserved. ========================================================================== */ body.dashboard #content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 300px); grid-template-areas: "title title" "main related"; gap: 0 var(--tk-space-6); align-items: start; } body.dashboard #content > h1 { grid-area: title; font-size: 22px; font-weight: 700; } body.dashboard #content-main { grid-area: main; float: none; width: auto; min-width: 0; margin: 0; } body.dashboard #content-related { grid-area: related; float: none; width: auto; min-width: 0; margin: 0; position: static; } body.dashboard #content > br.clear { display: none; } /* ---- app module = clean white panel (no orange bars, sentence-case title) -- */ body.dashboard #content-main .module { background: var(--tk-surface); border: 1px solid var(--tk-border); border-radius: var(--tk-radius-panel); box-shadow: var(--tk-shadow-subtle); overflow: hidden; margin-bottom: var(--tk-space-5); } body.dashboard #content-main .module table { width: 100%; border-collapse: collapse; } body.dashboard #content-main .module caption { background: var(--tk-surface) !important; color: var(--tk-ink) !important; font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--tk-hairline); } body.dashboard #content-main .module caption a, body.dashboard #content-main .module caption a:link, body.dashboard #content-main .module caption a:visited { color: var(--tk-ink); } /* model rows: 42px, hairline, hover #fafafa */ body.dashboard #content-main .module tbody th, body.dashboard #content-main .module tbody td { border-bottom: 1px solid var(--tk-hairline); padding: 0; height: 42px; vertical-align: middle; background: transparent; } body.dashboard #content-main .module tbody tr:last-child th, body.dashboard #content-main .module tbody tr:last-child td { border-bottom: 0; } body.dashboard #content-main .module tbody tr:hover { background: var(--tk-surface-subtle); } body.dashboard #content-main .module tbody th { text-align: left; width: 100%; } body.dashboard #content-main .module tbody th a, body.dashboard #content-main .module tbody th a:link, body.dashboard #content-main .module tbody th a:visited { display: block; padding: 0 16px; line-height: 42px; color: var(--tk-text); font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.dashboard #content-main .module tbody th a:hover { color: var(--tk-accent-dark); } /* Add (secondary) / Change·View (tertiary): dark links, orange only on hover, no green icons */ body.dashboard #content-main .module tbody td { text-align: right; white-space: nowrap; width: 1%; padding-right: 8px; } body.dashboard #content-main .module td a, body.dashboard #content-main .module td a:link, body.dashboard #content-main .module td a:visited { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; margin-left: 4px; border-radius: var(--tk-radius-control); color: var(--tk-text-secondary); font-size: 12.5px; font-weight: 500; background: transparent; background-image: none; /* kill Django green + / pencil icons */ } body.dashboard #content-main .module td a:hover { color: var(--tk-accent-dark); background: var(--tk-surface-subtle); } body.dashboard #content-main .module td a.addlink::before { content: "+"; font-size: 14px; font-weight: 400; line-height: 1; } /* ---- recent actions panel (right, secondary) ------------------------------ */ body.dashboard #content-related .module { background: var(--tk-surface); border: 1px solid var(--tk-border); border-radius: var(--tk-radius-panel); box-shadow: var(--tk-shadow-subtle); overflow: hidden; margin: 0; } body.dashboard #content-related .module h2 { background: var(--tk-surface) !important; color: var(--tk-ink) !important; font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; padding: 13px 16px; border-bottom: 1px solid var(--tk-hairline); } body.dashboard #content-related .module h3 { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--tk-muted); padding: 12px 16px 2px; margin: 0; } body.dashboard #content-related .actionlist { margin: 0; padding: 4px 8px 10px; list-style: none; } body.dashboard #content-related .actionlist li { list-style: none; padding: 8px 10px 8px 20px; border-radius: var(--tk-radius-control); position: relative; font-size: 12.5px; color: var(--tk-muted); background-image: none; /* remove Django coloured action icons */ } body.dashboard #content-related .actionlist li::before { content: ""; position: absolute; left: 9px; top: 14px; width: 5px; height: 5px; border-radius: 999px; background: var(--tk-border-strong); } body.dashboard #content-related .actionlist li a, body.dashboard #content-related .actionlist li a:link { color: var(--tk-text); font-weight: 500; } body.dashboard #content-related .actionlist li a:hover { color: var(--tk-accent-dark); } body.dashboard #content-related p { color: var(--tk-muted); font-size: 12.5px; padding: 14px 16px; margin: 0; } /* responsive: stack (list first, recent actions after) */ @media (max-width: 1024px) { body.dashboard #content { grid-template-columns: 1fr; grid-template-areas: "title" "main" "related"; } body.dashboard #content-related { margin-top: var(--tk-space-4); } } /* ========================================================================== LOGIN — centred card, no shell chrome ========================================================================== */ body.tk-noauth .tk-topbar { display: none; } body.tk-noauth .tk-main { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px; } body.tk-noauth .tk-content { flex: none; padding: 0; width: 100%; max-width: 420px; } .login #content { max-width: 380px; width: 100%; margin: 0 auto; } .login #content-main { width: 100%; } .login #content-main, .login #login-form { max-width: 380px; margin: 0 auto; } .login #login-form { background: var(--tk-surface); border: 1px solid var(--tk-border); border-radius: var(--tk-radius-panel); box-shadow: var(--tk-shadow-subtle); padding: 24px; } .login .form-row { padding: 8px 0; border: 0; background: transparent; } .login .form-row label { font-size: 12.5px; font-weight: 600; color: var(--tk-ink); margin-bottom: 6px; display: block; } .login input[type="text"], .login input[type="password"] { width: 100%; box-sizing: border-box; min-height: var(--tk-height-large); padding: 0 14px; font-size: 14px; border: 1px solid var(--tk-border-strong); border-radius: var(--tk-radius-control); background: #fff; } .login input:focus { border-color: var(--tk-ring); box-shadow: 0 0 0 3px var(--tk-accent-tint); outline: none; } .login .submit-row { background: transparent; border: 0; box-shadow: none; padding: 16px 0 0; margin: 0; } .login .submit-row input[type="submit"] { width: 100%; height: var(--tk-height-large); font-size: 14px; background: var(--tk-accent); color: #fff; border: 0; border-radius: var(--tk-radius-control); box-shadow: var(--tk-shadow-subtle); } .login .submit-row input[type="submit"]:hover { background: var(--tk-accent-hover); } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 960px) { .tk-sidebar, body.tk-collapsed .tk-sidebar { transform: translateX(-100%); box-shadow: var(--tk-shadow-floating); width: min(88vw, 340px); } body.tk-drawer-open .tk-sidebar { transform: translateX(0); } body.tk-drawer-open .tk-scrim { opacity: 1; } .tk-main, body.tk-collapsed .tk-main { margin-left: 0; } .tk-collapse { display: none; } /* the mobile drawer always shows full labels — ignore desktop collapse state */ body.tk-collapsed .tk-nav__label, body.tk-collapsed .tk-nav__add, body.tk-collapsed .tk-brand__badge { display: inline-flex; } body.tk-collapsed .tk-nav__title { font-size: 11px; text-align: left; margin: var(--tk-space-4) var(--tk-space-3) var(--tk-space-2); } body.tk-collapsed .tk-nav__title::after { content: none; } body.tk-collapsed .tk-nav__link { justify-content: flex-start; padding: 8px 10px; } .tk-burger { display: inline-flex; } .tk-topbar { padding: 0 var(--tk-space-5); } /* tablet gutter 20 */ body.tk-shell #content { padding: var(--tk-space-5) var(--tk-space-5) 32px; } /* tablet gutter 20 */ .tk-usermenu__name { display: none; } .tk-usermenu__btn { padding: 4px; } } @media (max-width: 767px) { body.tk-shell #content { padding: var(--tk-space-4) var(--tk-space-4) 32px; } /* mobile gutter 16 */ /* changelist hero stacks: title, then search full width; section buttons wrap above the table */ .change-list #content > h1 { display: block; padding: 0; margin: 0 0 var(--tk-space-3); border-bottom: 0; } .change-list .object-tools, .change-list .object-tools--list { margin: 0 0 0 auto; padding: 0; border-bottom: 0; } .change-list .object-tools li { flex: 0 1 auto; } .change-list .object-tools a { width: auto; } #toolbar { padding: 0; } #toolbar form#changelist-search > div { flex-wrap: wrap; } #toolbar #searchbar { max-width: none; min-width: 0; } #changelist .actions { padding: var(--tk-space-3) 0; } #result_list { min-width: 620px; } #changelist-filter { width: auto; } .change-form #content-main > form { max-width: none; } /* form rows stack: label above control (block flow beats Django's mobile grid/flex — documented conflict) */ .change-form .form-row .flex-container:not(.checkbox-row) { display: block !important; padding: 12px 16px; } .change-form .form-row .flex-container:not(.checkbox-row) > label { display: block; padding: 0 0 5px; } .change-form .form-row .flex-container:not(.checkbox-row) > :not(label) { display: block; } .change-form .flex-container input[type="text"], .change-form .flex-container input[type="url"], .change-form .flex-container input[type="email"], .change-form .flex-container input[type="password"], .change-form .flex-container input[type="tel"], .change-form .flex-container input[type="date"], .change-form .flex-container input[type="time"], .change-form .flex-container .vTextField, .change-form .flex-container .vURLField, .change-form .flex-container textarea, .change-form .flex-container select, .change-form .vForeignKeyRawIdAdminField { max-width: 100% !important; width: 100%; } .change-form .flex-container input[type="number"] { width: 160px; } .change-form .form-row .help, .change-form .form-row div.help, .change-form .errorlist { padding-left: 16px; padding-right: 16px; } .change-form fieldset.module .form-row:has(.checkbox-row) { margin: 6px 0 6px 16px; } .change-form .selector { flex-direction: column; max-width: none; } .change-form .selector-chooser { align-self: center; } /* sticky save bar — safe-area aware, never covers content */ .submit-row { position: sticky; bottom: 0; z-index: 20; margin-bottom: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); } } @media (max-width: 400px) { .tk-topbar { gap: 8px; } .tk-lang a { padding: 5px 8px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } } /* ========================================================================== OPERATOR REWORK (appended override) — restore develop density + IA feel. Goals: native app grouping, sidebar search, compact rows, full-width changelists, sticky table header, and NO decorative glass/blur. Everything here only tunes presentation; no Django/data/permission change. ========================================================================== */ /* --- density tokens: tighter than the first pass -------------------------- */ :root, html[data-theme="light"], html[data-theme="dark"] { --tk-sidebar-w: 264px; /* was clamp(300,23vw,312) */ --tk-topbar-h: 52px; } /* --- DE-GLASS: solid pearl chrome, no backdrop blur anywhere --------------- */ .tk-topbar { background: #ffffff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .tk-usermenu__pop, .tk-filter__menu { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: #ffffff !important; } /* --- SIDEBAR: compact operational rows (no tiles) ------------------------- */ .tk-nav { padding: 8px 10px 22px; } .tk-nav__group { margin-bottom: 4px; } .tk-nav__title { margin: 12px 8px 4px; } .tk-nav__link { min-height: 30px; padding: 3px 9px; gap: 10px; font-size: 13px; } .tk-nav__ico svg { width: 17px; height: 17px; } .tk-nav__item { margin: 0; } /* restrained active state: subtle tint + orange rail, no big pill */ .tk-nav__item.is-active > .tk-nav__link { background: var(--tk-selected); } /* --- SIDEBAR SEARCH (restored "Empiece a escribir para filtrar…") --------- */ .tk-navsearch { position: relative; flex: 0 0 auto; margin: 4px 12px 2px; display: flex; align-items: center; } .tk-navsearch__ico { position: absolute; left: 10px; width: 15px; height: 15px; color: var(--tk-muted); pointer-events: none; } .tk-navsearch input { width: 100%; height: 32px; box-sizing: border-box; padding: 0 10px 0 30px; border: 1px solid var(--tk-border); border-radius: var(--tk-radius-control); background: #fff; color: var(--tk-ink); font-size: 12.5px; font-family: var(--tk-font); } .tk-navsearch input::placeholder { color: var(--tk-muted); } .tk-navsearch input:focus { outline: none; border-color: var(--tk-accent); box-shadow: 0 0 0 3px var(--tk-accent-tint); } body.tk-collapsed .tk-navsearch { display: none; } [data-tk-navitem][hidden], [data-tk-navgroup][hidden] { display: none !important; } /* --- CHANGELISTS: use the workspace width (no narrow centred column) ------- */ body.change-list.tk-shell #content { width: auto !important; max-width: none !important; margin-inline: 0 !important; padding-left: var(--tk-space-5); padding-right: var(--tk-space-5); } /* --- TABLE DENSITY: more rows per viewport -------------------------------- */ .tk-grid__table tbody th, .tk-grid__table tbody td { padding: 6px 12px; line-height: 1.3; } .tk-grid__table thead th, .tk-grid__table thead th .tk-th { height: 34px; } /* --- STICKY HEADER: table body scrolls, header + h-scroll stay in sync ----- */ .tk-grid__scroll { max-height: calc(100vh - 210px); overflow: auto; } .tk-grid__table thead th { position: sticky; top: 0; z-index: 5; background: var(--tk-surface-subtle); /* solid, no blur */ } .tk-grid__table thead th.sorted { background: #fff; } /* ========================================================================== COMPACT DENSITY PASS (appended) — keep the new polish, restore the old operational density. Geometry + typography only. No IA/behaviour change. ========================================================================== */ :root, html[data-theme="light"], html[data-theme="dark"] { --tk-topbar-h: 46px; --tk-sidebar-w: 248px; /* operations radii: near-square controls, no public-site rounding */ --tk-radius-control: 6px; --tk-radius-button: 6px; --tk-radius-dropdown: 7px; --tk-radius-panel: 8px; } /* --- TOPBAR: disappears into the workspace ---------------------------------*/ .tk-topbar { padding: 0 16px; gap: 8px; } .tk-lang { height: 26px; } .tk-usermenu__btn { height: 28px; padding: 0 6px; } .tk-avatar { width: 22px; height: 22px; font-size: 11px; } .tk-usermenu__name { font-size: 12.5px; } /* --- SIDEBAR: tighter nav ------------------------------------------------- */ .tk-nav { padding: 6px 8px 20px; } .tk-nav__group { margin-bottom: 2px; } .tk-nav__title { margin: 9px 8px 3px; font-size: 10.5px; letter-spacing: .06em; } .tk-nav__link { min-height: 28px; padding: 2px 8px; gap: 9px; font-size: 12.5px; } .tk-nav__ico svg { width: 15px; height: 15px; } .tk-nav__add { font-size: 11px; } .tk-nav__add svg { width: 13px; height: 13px; } /* --- SIDEBAR SEARCH: navigation utility, not a product input --------------- */ .tk-navsearch { margin: 3px 10px 2px; } .tk-navsearch input { height: 29px; font-size: 12.5px; padding: 0 10px 0 28px; } .tk-navsearch__ico { width: 14px; height: 14px; left: 9px; } /* --- PAGE TITLE: workspace heading, not a public H1 ------------------------ */ body.tk-shell #content > h1 { font-size: 20px; margin-bottom: var(--tk-space-3, 12px); } /* --- MAIN GUTTERS: table is the workspace --------------------------------- */ body.change-list.tk-shell #content { padding-left: 16px !important; padding-right: 16px !important; padding-top: 14px; } /* --- SEARCH / FILTER TOOLBAR + BULK ROW: compact 30px controls ------------- */ .tk-ops input[type="text"], #changelist-search input[type="text"], input#searchbar { height: 30px; font-size: 12.5px; } .tk-filter__btn, .tk-filter summary { height: 30px; font-size: 12.5px; padding: 0 10px; } .tk-ops .button, .tk-ops input[type="submit"], .tk-ops button { height: 30px; font-size: 12.5px; } #changelist-form select[name="action"], .tk-actionbar select, .actions select { height: 30px; font-size: 12.5px; } .actions button, .tk-actionbar button, button[name="index"] { height: 30px; font-size: 12.5px; } .tk-actionbar { gap: 8px; } /* --- PRIMARY OBJECT ACTION (+ Añadir Espacio): primary but compact -------- */ .object-tools a, a.addlink, .tk-actionbar .object-tools a { height: 30px; line-height: 30px; padding: 0 14px; font-size: 12.5px; } /* --- TABLE HEADER: tighter, solid pearl, sticky (kept) -------------------- */ .tk-grid__table thead th, .tk-grid__table thead th .tk-th { height: 29px; } .tk-th__label a, .tk-th__label > span { font-size: 10.5px; } /* --- TABLE BODY ROWS: the single biggest density win --------------------- */ .tk-grid__table tbody th, .tk-grid__table tbody td { padding: 5px 10px; line-height: 1.25; font-size: 12px; /* ~38-40px rows */ } .tk-grid__table tbody th a { font-size: 12.5px; } /* primary column slightly stronger */ /* quieter boolean/status controls */ .tk-grid__table tbody td img { width: 14px; height: 14px; } .tk-grid__table tbody td .tk-badge { font-size: 10.5px; padding: 1px 7px; } /* --- FILTER MENUS: dense ---------------------------------------------------*/ .tk-filter__menu li a { padding: 5px 10px; font-size: 12px; } /* --- FORMS: 32-34px controls ---------------------------------------------- */ #content .vTextField, #content input[type="text"], #content input[type="email"], #content input[type="url"], #content input[type="number"], #content input[type="password"], #content select { min-height: 32px; height: 32px; font-size: 12.5px; } .aligned label, form .form-row label { font-size: 12.5px; } .help, .helptext { font-size: 11.5px; } /* --- BUTTON SYSTEM: compact operations scale ------------------------------ */ .submit-row input, .submit-row a.button { height: 33px; line-height: 33px; padding: 0 16px; font-size: 12.5px; } /* --- SHADOWS: hairlines over floats (panels flat; only popovers keep one) - */ .module, .tk-card { box-shadow: none; } /* --- COMPACT PASS supplement: control-height token + inline-editable widgets */ :root, html[data-theme="light"], html[data-theme="dark"] { --tk-height-default: 32px; /* was 38 — drives search/filters/buttons/inputs */ --tk-height-compact: 28px; /* icon buttons */ } /* editable changelist cells: compact the inline inputs/selects that set row height */ .tk-grid__table tbody td input:not([type="checkbox"]):not([type="radio"]), .tk-grid__table tbody td select { height: 28px; min-height: 28px; box-sizing: border-box; font-size: 12px; padding: 0 8px; border-radius: var(--tk-radius-control); } .tk-grid__table tbody td input[type="number"] { width: 92px; } .tk-grid__table tbody td select { padding-right: 22px; } /* compact editable checkbox footprint */ .tk-grid__table tbody td input[type="checkbox"] { margin: 0; } /* --- COMPACT PASS final micro-tighten: rows toward 38-42px ---------------- */ .tk-grid__table tbody th, .tk-grid__table tbody td { padding-top: 4px; padding-bottom: 4px; line-height: 1.2; } .tk-grid__table tbody td input:not([type="checkbox"]):not([type="radio"]), .tk-grid__table tbody td select { height: 26px; min-height: 26px; } /* ========================================================================== SIDEBAR GROUP HEADERS — subtle "curtain" band (editorial, restrained). A very soft coral tint behind each app-group header + an integrated left accent rule and a hairline base, so groups read as structured without becoming cards. Compact: ~22-24px band, no shadow / radius / glass. Density preserved: sidebar width, row height and item spacing unchanged. ========================================================================== */ .tk-nav__title { margin: 4px 0 3px; /* full-bleed to nav content width; tight rhythm */ padding: 4px 8px; /* compact ~22px band */ gap: 7px; background: linear-gradient(180deg, rgba(254,101,53,0.085) 0%, rgba(254,101,53,0.025) 100%); border-bottom: 1px solid var(--tk-hairline); border-radius: 0; /* editorial band, never a card */ box-shadow: none; font-size: 10.5px; font-weight: 600; letter-spacing: .085em; color: var(--tk-text-secondary); } /* dash → slim integrated left accent rule */ .tk-nav__title::before { width: 3px; height: 11px; border-radius: 2px; background: var(--tk-accent); opacity: .9; } /* the group holding the active model gets a marginally warmer band + rule */ .tk-nav__group:has(.tk-nav__item.is-active) .tk-nav__title { background: linear-gradient(180deg, rgba(254,101,53,0.14) 0%, rgba(254,101,53,0.04) 100%); } /* ========================================================================== SPATIAL SCALE + TYPOGRAPHY LOCK ChatGPT-like navigation proportion (15–16% of viewport, capped) + a locked compact operations type scale + a responsive workspace gutter. Density targets unchanged (rows 28 / search 29 / thead 30 / rows 24-26 / inputs 32). ========================================================================== */ :root, html[data-theme="light"], html[data-theme="dark"] { --tk-sidebar-w: clamp(288px, 21vw, 300px); /* target 300px on desktop, capped at 300 */ } /* subtle vertical hairline between sidebar and workspace (no dark border) */ .tk-sidebar { border-right: 1px solid var(--tk-hairline); } /* --- workspace gutter: sidebar -> hairline -> breathing room -> content ---- */ /* left = intentional separation; table still uses all remaining width. */ body.change-list.tk-shell #content { padding-left: 22px !important; padding-right: 18px !important; padding-top: 14px; } @media (min-width: 1280px) { body.change-list.tk-shell #content { padding-left: 28px !important; } } @media (min-width: 1680px) { body.change-list.tk-shell #content { padding-left: 32px !important; padding-right: 22px !important; } } /* --- TYPOGRAPHY LOCK (compact operations scale) --------------------------- */ .tk-nav__link { font-size: 13px; } /* sidebar model row */ .tk-nav__title { font-size: 11px; letter-spacing: .09em; } /* category */ .tk-navsearch input { font-size: 12.5px; } /* sidebar search */ .tk-nav__add { font-size: 11.5px; } /* + Añadir (secondary) */ body.tk-shell #content > h1 { font-size: 20px; } /* page title */ .tk-grid__table tbody th, .tk-grid__table tbody td { font-size: 12px; } /* table body */ .tk-grid__table tbody th a { font-size: 12.5px; font-weight: 600; } /* primary/object column */ .tk-th__label a, .tk-th__label > span { font-size: 10.5px; letter-spacing: .05em; } /* table header */ .aligned label, form .form-row label { font-size: 12.5px; } /* form labels */ .help, .helptext { font-size: 11.5px; } /* help text */ .tk-ops #toolbar #searchbar, .tk-filter__btn, .tk-filter summary, .object-tools a, a.addlink, .actions button, .tk-actionbar button { font-size: 12.5px; } /* buttons/filters */ /* ========================================================================== UNIFIED CHANGELIST WORKSPACE (single width for every changelist) One 1120px working column, centred inside the post-sidebar main area so the content is balanced (similar breathing room left & right) — never glued to the sidebar and never a marketing-centred page. Wide tables keep all columns and scroll internally via .tk-grid__scroll. No per-model width logic. ========================================================================== */ body.change-list.tk-shell #content { width: auto !important; max-width: 1120px !important; margin-inline: auto !important; /* centre in the available main workspace */ padding-left: 16px !important; padding-right: 16px !important; padding-top: 14px; box-sizing: border-box; } /* keep a safe sidebar->content gutter even if centring math would shrink it */ @media (min-width: 1024px) and (max-width: 1439px) { body.change-list.tk-shell #content { padding-left: 28px !important; padding-right: 20px !important; } } /* wide grids: the table (not the page) scrolls inside the 1120 workspace */ body.change-list .results.tk-grid { max-width: 100%; } .tk-grid__scroll { width: 100%; overflow-x: auto; overflow-y: auto; } /* change forms: comfortable column, centred; expand to workspace only w/ inlines */ body.change-form.tk-shell #content { max-width: 1000px !important; margin-inline: auto !important; } body.change-form.tk-shell:has(.inline-group, .inline-related, .selector) #content { max-width: 1120px !important; } /* ========================================================================== TOP BANNER LOOK REMOVED (topbar kept IN FLOW — no overlay) The old strip was the topbar's own background + bottom border. We drop those (transparent, borderless, no shadow) and remove the empty centre spacer, so only the right-side actions remain and the top reads as clean whitespace — NOT a banner. The topbar stays in normal flow, so the page title sits directly below it and is fully visible, with intentional breathing room. (An earlier absolute-overlay version hid the title beneath the topbar.) ========================================================================== */ .tk-topbar { background: transparent !important; border-bottom: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* GLOBAL header spans the full main viewport (it is a sibling of #content, never constrained by the 1120 workspace). The flex spacer pushes the ES/EN + account controls to the FAR RIGHT on every width, while keeping the mobile drawer burger on the left — the native, responsive-correct mechanism. */ .tk-topbar__ctx { display: block !important; flex: 1 1 auto; min-width: 0; } /* Align the main workspace with the sidebar grid: the page title starts on the same visual line as the first sidebar category ("API KEY PERMISSIONS"). The offset lives on #content so the whole workspace moves together (title + toolbar + table keep their internal rhythm). Measured, not guessed. */ body.change-list.tk-shell #content, body.change-form.tk-shell #content, body.dashboard.tk-shell #content { padding-top: 69px !important; } /* compact title -> toolbar spacing; title keeps the workspace left edge */ body.tk-shell #content > h1 { margin-bottom: 12px; margin-right: 0; } /* ========================================================================== SIDEBAR SPACING REFINEMENT — ChatGPT-like macro rhythm, Tikipal identity. More air in the MACRO spacing (brand block, search, group-to-group), while the MICRO spacing (row height, icon/label) stays compact and operational. No IA/grouping/active/search/collapse/width/typography change. ========================================================================== */ /* brand block breathes above & below (logo size unchanged, header not bulky) */ .tk-sidebar__head { height: 58px; } /* search anchored: clean gap below the brand + before the first section */ .tk-navsearch { margin: 8px 12px 12px; } /* let the section rhythm own the vertical spacing */ .tk-nav { padding-top: 2px; } .tk-nav__group { margin-bottom: 0; } /* section headers: more elevated + clearer header->row gap; still compact band */ .tk-nav__title { margin: 14px 0 6px; padding-top: 5px; padding-bottom: 5px; line-height: 1.15; } .tk-nav__group:first-child .tk-nav__title { margin-top: 2px; } /* first header not double-spaced under search */ /* model rows: SAME height; a hair of separation so they read less stacked */ .tk-nav__item { margin-bottom: 2px; }