/* * Django's admin markup, wearing Edumin's look. * * Two vocabularies that do not meet: Django emits #changelist, .form-row, * fieldset.module, .submit-row; Edumin styles .card, .table, .form-control. * CLAUDE.md 42 records a re-skin failing precisely because this file did not * exist and a shell was swapped underneath markup nothing had adapted. * * Scoped to the new shell only. /admin/ never loads this. */ /* Light is the default; dark is the same tokens with different values. `data-theme-version` is Edumin's own switch -- the stylesheet we ship carries 344 rules keyed off it -- so setting that one attribute restyles Edumin's components and this bridge together, instead of maintaining two palettes. */ :root { --brand: #BE1325; --brand-ink: #fff; --ink: #252525; --ink-muted: #595959; --ink-dim: #9aa0a6; --line: #e6e6e8; --field: #f3f3f4; /* the ground behind cards */ --surface: #fff; /* cards, header, sidebar */ --surface-2: #faf9f9; /* table headings, filter panel */ --input-bg: #fff; --dropdown-bg: #fff; /* the panel a dropdown opens OVER the page */ --shadow: rgba(37, 37, 37, .06); --line-strong: #C3C3C9; /* a border meant to be seen, not merely to divide */ --danger: #B3261E; /* the app's semantic red -- NOT --brand, which is the school's and is not per-school here */ /* A switch that is OFF. Its own token rather than `--surface-2`, which is #faf9f9 -- a hair off the white card it sits on, so an off switch was a control you could not see (owner, 2026-09-03). Chosen to clear 3:1 against `--surface`, which is what WCAG 1.4.11 asks of the boundary of a control that carries no text: it is the ONLY thing saying the switch is there at all when it is off. */ --switch-off: #93939B; --switch-knob: #fff; /* The edge of an OUTLINED control, and the reason it is not `--line-strong`: that token's own comment says «a border meant to be seen» and it measures 1.76:1 against this card, so a button drawn with it reads as disabled beside a filled one. Same value as `--switch-off` and for the same reason -- CLAUDE.md 78 picked that against the 3:1 of WCAG 1.4.11 -- but a different ROLE: that one is a fill, this is a border. `--line` divides, `--line-strong` separates, this one is ANSWERED BY A PERSON. */ --control-edge: #93939B; /* The product's blue, promoted out of the dashboard so a changelist can reach it. It was `--viz-info` on `.dash-root` and nowhere else, which made it invisible to everything that is not a chart -- and it is the one blue here that has already been validated against `--brand` for colour vision (CLAUDE.md 67: dE 26.4 light / 24.5 dark, both PASS). Picking a fresh blue would have been picking an unvalidated one. 4.41:1 against the white card, so it clears 3:1 as an indicator that is the only thing saying a state exists. */ --info: #2a78d6; } [data-theme-version="dark"] { --brand: #D8394A; /* lifted: #BE1325 on a dark ground fails contrast */ --brand-ink: #fff; --ink: #E6E6E9; --ink-muted: #A8AAB3; --ink-dim: #7C7F89; --line: #2E2E33; --field: #171719; --surface: #1F1F23; --surface-2: #26262B; --input-bg: #1A1A1E; --dropdown-bg: #17171E; /* owner, 2026-09-03 */ --shadow: rgba(0, 0, 0, .45); --line-strong: #3B3B42; --danger: #E79890; /* lifted: #B3261E on this ground fails contrast */ /* Same rule against the dark card (#1F1F23), which needs a LIGHTER grey to clear it -- `--surface-2` (#26262B) was 1.1:1 here, and the knob was `--surface`, i.e. the card colour, so both halves vanished at once. */ --switch-off: #6B6B75; --switch-knob: #E6E6E9; --control-edge: #6B6B75; --info: #3987e5; /* 4.51:1 against #1F1F23 */ } body { font-family: 'alexandria', sans-serif; background: var(--field); color: var(--ink); margin: 0; } /* ------------------------------------------------------------------ layout */ .nav-header { background: var(--brand); position: fixed; top: 0; right: 0; width: 17.1875rem; height: 74px; z-index: 6; display: flex; align-items: center; justify-content: center; } .nav-header .brand-logo { color: #fff; font-weight: 700; font-size: 1.02rem; text-decoration: none; text-align: center; } .header { position: fixed; top: 0; right: 17.1875rem; left: 0; height: 74px; z-index: 5; display: flex; align-items: center; padding: 0 26px; background: var(--surface); border-bottom: 1px solid var(--line); } .header .header-content { width: 100%; display: flex; align-items: center; justify-content: space-between; } .dashboard_bar { font-size: 1.1rem; font-weight: 700; color: var(--ink); } .header-right { display: flex; align-items: center; gap: 16px; list-style: none; margin: 0; padding: 0; } .ui-switch { border: 1px solid var(--line); border-radius: 999px; padding: .3rem .8rem; font-size: .8rem; color: var(--ink-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .ui-switch:hover { background: var(--surface-2); color: var(--ink); } .deznav { position: fixed; top: 74px; right: 0; width: 17.1875rem; height: calc(100vh - 74px); overflow-y: auto; background: var(--surface); border-left: 1px solid var(--line); z-index: 5; padding-top: 8px; } .deznav ul { padding: 0; margin: 0; list-style: none; } .deznav a { display: flex; align-items: center; gap: 12px; padding: 11px 24px; color: var(--ink-muted); text-decoration: none; font-size: .93rem; } .deznav a i { font-size: 19px; width: 22px; text-align: center; color: var(--ink-dim); } .deznav a:hover { background: var(--surface-2); } /* The current page: a filled bar plus an edge marker. The fill alone is one colour among thirty rows the reader has to find by scanning; the marker gives the eye an edge to land on, and survives being scrolled past in peripheral vision. */ .deznav a.active { background: var(--brand); color: #fff; font-weight: 700; position: relative; } .deznav a.active i { color: #fff; } .deznav a.active::before { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 4px; background: #fff; opacity: .85; } [dir="ltr"] .deznav a.active::before { right: auto; left: 0; } /* The group heading above the current item, so "where am I" answers with the section as well as the row. */ .deznav .menu-title.is-current { color: var(--brand); font-weight: 700; } /* A break inside a group, for a block that belongs under the same heading but is not the same kind of thing. Quieter than the heading above it on purpose: it separates without claiming to be a section of its own, and a rule as loud as a title would read as one. Inset to the text, not the full width, so the sidebar keeps one left edge. */ .deznav .menu-divider { height: 1px; background: var(--line); margin: 8px 24px; } .menu-title { color: var(--ink-dim); font-size: .72rem; letter-spacing: .04em; padding: 14px 24px 6px; display: block; } .content-body { margin-right: 17.1875rem; margin-top: 74px; min-height: calc(100vh - 74px); padding: 1.5rem 0; } .container-fluid { padding: 0 1.75rem; } .card { background: var(--surface); color: var(--ink); border: 0; border-radius: 14px; box-shadow: 0 1px 2px var(--shadow); margin-bottom: 1.5rem; } .card-body { padding: 1.5rem; } /* ------------------------------------------------- Django admin, bridged */ #content h1, .card-body > h1 { font-size: 1.15rem; font-weight: 700; color: var(--ink); margin: 0 0 1rem; } /* the add button and other object tools */ .object-tools { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; gap: .5rem; justify-content: flex-start; } .object-tools a, .object-tools a:link, .object-tools a:visited { background: var(--brand); color: #fff; border-radius: 8px; padding: .5rem 1rem; font-size: .85rem; text-decoration: none; display: inline-block; } /* search + filters row */ /* No card around the search. It was a full-width bordered box with a 450px form floating inside it, so most of the loudest element on the page was empty. */ #toolbar { flex: 3 1 20rem; min-width: 0; } #toolbar #searchbar { flex: 1 1 auto; min-width: 0; } #toolbar form, #toolbar form > div { display: flex; align-items: center; gap: .5rem; width: 100%; } #toolbar label img { display: block; width: 16px; opacity: .45; } #toolbar input[type="text"], #toolbar select { border: 1px solid var(--line); border-radius: 8px; padding: .45rem .7rem; font-family: inherit; font-size: .88rem; background-color: var(--input-bg); color: var(--ink); } /* --- the action ladder --------------------------------------------------- Three rungs, and they are told apart by FILL, BORDER and INK rather than by hue -- so the hierarchy survives greyscale and every form of colour blindness, which is what "do not say it with colour alone" means for a control that carries no icon. primary filled `--brand` أضف · احفظ · ارسال -- ONE per screen secondary outlined ابحث -- a real action that changes nothing tertiary quiet fill مسح الفلاتر · الغاء (`.ec-clear-filters`) ابحث was byte-identical to «أضف امتحان»: two filled brand buttons in one row, one of which creates a record (owner, 2026-09-05). Giving it the quiet fill instead would have collided with «مسح الفلاتر» one control further along, which is tertiary and undoes a filter -- so it takes the rung between them rather than either end. It is built the SAME WAY as the field beside it -- .45rem of padding, a 1px border, .88rem of type -- which is what makes the two the same height (33.1px, measured on a render in both themes). The filled tier gets away with inheriting the body's 14px because it has no border to line up with; compensating for the border in the padding instead, which was the first attempt here, leaves this two pixels short. */ #toolbar input[type="submit"] { background: transparent; color: var(--ink); font-weight: 600; border: 1px solid var(--control-edge); border-radius: 8px; padding: .45rem 1.1rem; font-family: inherit; font-size: .88rem; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } #toolbar input[type="submit"]:hover { background: var(--surface-2); border-color: var(--brand); color: var(--brand); } #toolbar input[type="submit"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { #toolbar input[type="submit"] { transition: none; } } /* the results table */ #result_list { width: 100%; border-collapse: collapse; background: var(--surface); } #result_list thead th { background: var(--surface-2); color: var(--ink-muted); font-size: .8rem; font-weight: 600; text-align: start; padding: .8rem .75rem; border: 0; position: sticky; top: 0; z-index: 2; box-shadow: inset 0 -1px 0 var(--line); } #result_list thead th a { color: var(--ink-muted); text-decoration: none; } #result_list td, #result_list th { padding: .75rem; font-size: .9rem; color: var(--ink-muted); border-bottom: 1px solid var(--line); vertical-align: middle; } #result_list tbody tr:hover > td, #result_list tbody tr:hover > th { background: var(--surface-2); } /* The whole row opens the record (changelist-header.js). The pointer is the only thing that says so before the click lands. */ #result_list tbody tr.ec-row-link { cursor: pointer; } #result_list a { color: var(--ink); text-decoration: none; } #result_list a:hover { color: var(--brand); } .paginator { padding: 1rem 0 0; color: var(--ink-muted); font-size: .85rem; } .paginator a, .paginator .this-page { padding: .3rem .6rem; border-radius: 6px; text-decoration: none; } .paginator .this-page { background: var(--brand); color: #fff; } .actions { padding: .75rem 0; display: flex; gap: .5rem; align-items: center; font-size: .88rem; } .actions select { border: 1px solid var(--line); border-radius: 8px; padding: .4rem .6rem; font-family: inherit; } .actions button { background: var(--brand); color: #fff; border: 0; border-radius: 8px; padding: .4rem 1rem; cursor: pointer; } /* ------------------------------------------------------------- change form * * Django stacks every field in a single column, and this bridge then capped * each one at 460px. On a 1440px window that is a narrow ribbon of inputs with * half the card empty beside it, and a teacher -- twenty fields -- is a * 2,600px scroll to reach the save button. * * The fieldset is a grid instead: two columns where there is room, one where * there is not, and no fixed breakpoint anywhere -- `auto-fill` with a 26rem * minimum means the column count follows the space the form actually has, * including inside a narrowed window or beside the open sidebar. * * Fields that genuinely need the width opt out and span the row: a textarea, a * multi-select, a file input. Squeezing a five-row list of subjects into half * a column is how you get the clipped boxes this replaces. */ fieldset.module { border: 0; padding: 0; margin: 0 0 2rem; } fieldset.module.aligned { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); gap: 0 2.5rem; align-items: start; max-width: 74rem; } /* The section heading names the group, so it owns the whole row and carries a rule under it. It was the same weight as the field labels below it, which left the form with no hierarchy at all. */ fieldset.module > h2 { grid-column: 1 / -1; font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0 0 1.1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); } /* Inline forms keep the single column they have always had. * * nested_admin and Django's own StackedInline both emit `fieldset.module * aligned` inside `.inline-related`, so the grid above would reach them -- * a parent's nested student blocks would silently become two-column. That * might well be an improvement; it is not one I have looked at, and a layout * change nobody has seen is exactly what CLAUDE.md 45 is a record of. Once * the top-level forms are accepted, delete this rule and look at the result. */ .inline-related fieldset.module.aligned { display: block; max-width: none; } /* --- a student and its admission, side by side --------------------------- * * `nested_admin` nests the admission group INSIDE the student's own fieldset * and marks that fieldset `has-inlines`, so the two read as one long column: * الاسم, الحالة, السائق, الجنس, and then قبول الطالب somewhere below the fold. * They are one record seen from two sides -- who the student is, and where the * school has put them -- and the second is what you check while typing the * first (owner, 2026-09-03). * * `has-inlines` is nested_admin's own class and matches only a fieldset that * actually contains a nested group, so nothing else on the site moves. The * group spans every row of the grid rather than sitting in one cell, or it * would align with whichever field happened to be beside it. */ @media (min-width: 1100px) { /* The grid goes on the student BLOCK, not on its fieldset: nested_admin marks the fieldset `has-inlines` but CLOSES it before the nested group, which is therefore a SIBLING of the fields rather than a child of them. Read from the markup, after a first version keyed on the fieldset laid out a grid with nothing in its second column. */ .inline-related:has(> .inline-group.djn-group-nested) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 0 2rem; align-items: start; } /* The row's own heading -- name, drag handle, delete -- belongs to the whole record, so it spans both. */ .inline-related:has(> .inline-group.djn-group-nested) > h3 { grid-column: 1 / -1; } .inline-related:has(> .inline-group.djn-group-nested) > fieldset.module { grid-column: 1; } .inline-related:has(> .inline-group.djn-group-nested) > .inline-group { grid-column: 2; align-self: start; margin: 0; } } /* The nested group is a panel, not a continuation of the column above it: a step down the surface ramp, its own edge, and its heading at the weight of a section rather than of a field label. */ .inline-related .inline-group.djn-group-nested { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: .2rem .9rem .9rem; } .inline-related .inline-group.djn-group-nested > fieldset.module { margin: 0; } .inline-related .inline-group.djn-group-nested h2.inline-heading { font-size: .88rem; font-weight: 700; color: var(--ink); margin: .1rem 0 .5rem; padding: .55rem 0 .5rem; border-bottom: 1px solid var(--line); } /* The nested rows sit ON that panel, so they take no second background and no second border -- one edge per group, not one per row. */ .inline-related .inline-group.djn-group-nested .djn-item.inline-related { background: transparent; border: 0; padding: 0; margin: 0 0 .4rem; } /* The template row every inline formset carries for "add another". * * `display: none` on it lives in Django's `admin/css/forms.css`, which jet * ships as a ZERO-BYTE file (CLAUDE.md 40) -- deliberate, and fine for /admin/ * because jet's own base.css re-declares the rule. This shell loads no jet CSS, * so the blank template row was VISIBLE under every inline on /admin-new/: an * empty row that looks like a real one and saves nothing. Same class of silent * breakage as the nine custom properties in CLAUDE.md 53. */ .empty-form { display: none; } /* The grade/order table on المواد and الفترات. * * One row per grade, and the only control is the order. The template does the * structure -- no dropdown, no delete column, no heading -- so this is width, * weight and colour only. */ /* Two columns of real content do not need the width of the page between them: uncapped, الترتيب ends up a hand's width from the grade it belongs to. */ .offering-order table { width: 100%; max-width: 34rem; } /* The same header treatment as a changelist, so the two read as one system. Without it these fall through to Edumin's default `th`, which is brand-red -- a column heading that looks like an error message. */ .offering-order thead th { background: var(--surface-2); color: var(--ink-muted); font-size: .8rem; font-weight: 600; text-align: start; padding: .5rem .7rem; } .offering-order tbody th.offering-grade { font-weight: 500; color: var(--ink); text-align: start; padding: .45rem .7rem; white-space: nowrap; } .offering-order tbody td { padding: .35rem .7rem; vertical-align: middle; } /* Specificity, not taste: the generic `.form-row input[type=number]` rule above is (0,2,1) and sets width:100%, so anything shorter has to outrank it. */ .offering-order .form-row .field-order input[type="number"] { width: 7rem; text-align: center; } .offering-order thead th.column-order { width: 8rem; } .offering-order .offering-help { padding: .6rem .7rem 0; } .form-row { padding: .5rem 0 .9rem; border: 0; min-width: 0; } .form-row > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; } /* Wide by nature. `:has()` is the whole mechanism; a browser without it simply leaves these in one column, which is the old behaviour rather than a break. */ .form-row:has(textarea), .form-row:has(select[multiple]) { grid-column: 1 / -1; } /* Two fields that are one question -- Django wraps each in a `.field-box` when a fieldset row names more than one (the class is `field-box` in 4.2; the `fieldBox` spelling belongs to older Django and to grappelli, and matching it silently matched nothing). See `PAIRED` in forms/validation.py. * * The row spans the fieldset's whole line and then repeats the fieldset's OWN * column template inside itself, so the pair lands in exactly the tracks every * other field uses: aligned with the rows above and below, at the same widths, * with no number to keep in step. At one column it stacks, which is the same * thing the fieldset does. */ .form-row:has(> .field-box) { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); gap: 0 2.5rem; align-items: start; } .form-row > div.field-box { min-width: 0; } /* The label is the quiet half of the pair. It read at the same weight and colour as the value, so nothing on the form was louder than anything else. */ .form-row label { font-weight: 600; color: var(--ink-muted); font-size: .82rem; float: none; width: auto; padding: 0; letter-spacing: .01em; } .form-row .help, .form-row p.help { font-size: .78rem; color: var(--ink-dim); margin: 0; padding: 0; max-width: 46em; } /* ONE text-input treatment for the whole shell. * * There were four. The form's own inputs, the composer's title and content, the * student search, the long-set filter and the single-select filter had each been * written where they were needed, so a text box's padding, size, corner radius * and focus behaviour depended on which feature had added it -- `.5rem/.9rem/8px` * beside `.6rem/.9rem/9px` beside `.4rem/.85rem/8px`, and a focus that was a ring * on one and a border-colour change on the next. Nobody chose that; it is what * five separate rules add up to (owner: "why is this text field different from * the others", 2026-09-03). * * Anything that takes typed text is in this selector list. Local rules below may * still set width, margin or height -- what they may not do is redecide the * decoration. */ .form-row input[type="text"], .form-row input[type="password"], .form-row input[type="email"], .form-row input[type="number"], .form-row input[type="url"], .form-row input[type="date"], .form-row input[type="time"], .form-row input[type="search"], .form-row textarea, .form-row select, .ec-compose-field input[type="text"], .ec-compose-field textarea, .ec-thread-field textarea, .ec-student-search, .ec-checkset-filter, .ec-combo-search, .ec-roster-filter, /* The years table is not inside a `.form-row`, so it was getting the calendar glyph from the bare element selector and NONE of the padding, border, size or focus below -- a date box that did not look like any other date box on the panel (owner, 2026-09-05). Joining the list rather than styling it locally is the whole point of there being a list. */ .ec-years-table input[type="date"] { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 8px; padding: .5rem .7rem; font-family: inherit; font-size: .9rem; /* Arabic needs the room. Alexandria puts the two dots of ي BELOW the baseline, and a control whose content box is only as tall as the font's own default line box clips them -- «عربي» renders as «عربى», which is a different letter, not a cosmetic difference (owner, 2026-09-03). Stated once here, with the rest of the one text-input treatment, so a sixth control cannot be added without it. */ line-height: 1.6; background-color: var(--input-bg); color: var(--ink); } .form-row textarea { min-height: 7rem; } /* A multi-select was showing four and a half rows, clipped mid-line -- the one widget on the page where you have to SEE the options to use it. The height is NOT set here: change-form.js gives each one a `size` matching how many options it actually has, so a list of one is one row tall and a list of forty stops at ten. A fixed min-height solves the clipping and replaces it with an empty box, which is the same mistake facing the other way. `:not(.admin-autocomplete)` because Django's autocomplete fields are select2-ified, and sizing the underlying element brings it back into view beside its own replacement -- the mistake CLAUDE.md 45 records. */ .form-row select[multiple]:not(.admin-autocomplete) { padding: .35rem; max-height: 16rem; } /* Every interactive thing gets a visible ring. There was none. */ .form-row input:focus-visible, .form-row select:focus-visible, .form-row textarea:focus-visible, .ec-compose-field input[type="text"]:focus-visible, .ec-compose-field textarea:focus-visible, .ec-thread-field textarea:focus-visible, .ec-thread-send:focus-visible, .ec-student-search:focus-visible, .ec-checkset-filter:focus-visible, .ec-combo-search:focus-visible, .submit-row input:focus-visible, .submit-row a:focus-visible, .related-widget-wrapper-link:focus-visible, .object-tools a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* A read-only value is a