/* «ایجاد و ویرایش خبر» — the three things this form draws differently from every other management (تسک ۱۴۰۵/۰۶/۱۹/۰۶). Loaded unscoped, like the panel's other stylesheets, and every rule below is written against a class the news form puts on one of its own fields, so a page that has none of them on it is untouched. This panel is Filament v3, where a palette token is a channel triplet: the value of `--primary-400` is the string «251 191 36», so `color: var(--primary-400)` is thrown away by the browser, declaration and all. The yellow below is therefore taken from `--panel-header-date`, which `panel-identity.css` already wraps back into a real colour — the same amber the header writes the date in, which is what «رنگ زرد استاندارد پنل» (خبر-تکمیل-۰۲۲) means. No new colour is declared here. */ /* ── The body editor's toolbar (خبر-تکمیل-۰۰۳ تا ۰۰۸) ────────────────────── The field used to carry `max-h-96`, which caps the WHOLE component. Filament wraps a rich editor in `overflow-x-auto`, and a box with one axis not `visible` gets `auto` on the other, so the cap turned the entire component — toolbar included — into one scrolling box: three lines into a long article the tools scrolled away and could not be reached without scrolling back (تصویر ۱ و ۲ پیوست تسک). The cap now belongs to the text alone. The toolbar is no longer inside anything that scrolls, so it cannot leave: it sits above the text, at the top of the editor, at every width. Nothing is drawn over the text, nothing is covered, and the component's width is untouched (خبر-تکمیل-۰۰۷). `position: sticky` is kept as well, and it is not decoration: it is what holds the toolbar in place if this component is ever put inside a box that scrolls for some other reason. */ .fi-news-content-editor .fi-fo-rich-editor-toolbar { position: sticky; top: 0; z-index: 2; background-color: rgb(var(--gray-50, 249 250 251)); } :where(.dark) .fi-news-content-editor .fi-fo-rich-editor-toolbar { background-color: rgb(var(--gray-900, 17 24 39)); } /* 24rem is exactly what `max-h-96` used to cap the whole box at, so the form is the height it has always been rather than suddenly a toolbar taller. */ .fi-news-content-editor .fi-fo-rich-editor-editor { max-height: 24rem; overflow-y: auto; } /* ── The four times of an article (خبر-تکمیل-۰۱۹ تا ۰۲۲) ─────────────────── «تاریخ انتشار»، «ساعت انتشار»، «تاریخ به‌روزرسانی» و «ساعت به‌روزرسانی». The value inside the box is yellow; the label above it is not touched at all and stays the white every other label in the panel is (خبر-تکمیل-۰۲۰). Three of the four boxes are disabled most of the time, and a disabled input is greyed by `disabled:text-gray-500` AND by `-webkit-text-fill-color`, which overrides `color` outright in WebKit and Chromium. Both are written here, for the enabled and the disabled state, or the colour would apply on the one box that happens to be editable and nowhere else. */ .fi-news-date-time-value input.fi-fo-date-time-picker-display-text-input, .fi-news-date-time-value input.fi-fo-date-time-picker-display-text-input:disabled { color: var(--panel-header-date); -webkit-text-fill-color: var(--panel-header-date); font-weight: 600; } /* ── The heading of «ویرایش خبر» (خبر-تکمیل-۰۳۲ تا ۰۴۰) ──────────────────── «ویرایش خبر: عنوان واقعی خبر», where the first half is the panel's yellow and the second is the article's own title, read from the record. The size is set on the wrapper in `em` rather than in a fixed size, so it is a third off whatever the page's heading is at that width — Filament draws it `text-2xl` on a phone and `text-3xl` from `sm` up, and one hard-coded size would be a third smaller at one width and something else at the other (خبر-تکمیل-۰۳۷). Both halves inherit that one size (خبر-تکمیل-۰۳۸). */ .fi-news-edit-heading { font-size: 0.667em; line-height: 1.5; /* خبر-تکمیل-۰۳۹ و ۰۴۰ — a long title wraps onto a second line and takes the page no wider than it is; it never pushes a sideways scrollbar onto the page, and a word with no space in it breaks rather than sticking out. */ display: inline; overflow-wrap: anywhere; word-break: break-word; } .fi-news-edit-heading-label { color: var(--panel-header-date); } /* ── تسک ۱۴۰۵/۰۶/۲۰/۱۰/۰۱ — «اصلاح و فشرده‌سازی ظاهری صفحات ایجاد و ویرایش خبر» Everything below is layout and colour on the news create/edit screens. Not one rule here reaches a value, a rule, a permission or a saved byte; they are all written against classes those two screens put on their own elements, so every other page of the panel is untouched. */ /* ── بند ۱ — «انتشار: …» و «به‌روزرسانی: …» کنار تیتر صفحه ──────────────── The two boxes that used to open the form are gone; their two moments are printed after the article's title instead. A white rule about a centimetre past the title, then the publication moment in green, a second rule, then the last change in the yellow that box already used (بند ۱). The moments are a size smaller than the title and never bold, so a long title still reads as the heading; they wrap with it rather than widening the page. */ .fi-news-edit-heading-rule { color: #fff; font-weight: 400; margin-inline-start: 1cm; margin-inline-end: 0.5rem; } .fi-news-edit-heading-moment { font-size: 0.8em; font-weight: 400; white-space: nowrap; } .fi-news-edit-heading-moment-label { color: #fff; } /* «همان قالب فعلی، اما به رنگ سبز» — the panel's own published-status green, the one «وضعیت حال حاضر» is already written in. */ .fi-news-edit-heading-published { color: #16a34a; font-weight: 600; } :where(.dark) .fi-news-edit-heading-published { color: #4ade80; } /* «با همان رنگ زرد فعلی» — literally the colour the «تاریخ به‌روزرسانی» box was painted in above, taken from the same token. */ .fi-news-edit-heading-updated { color: var(--panel-header-date); font-weight: 600; } /* ── بند ۵ — «کوچک‌شدن نمایش تصاویر داخل ویرایشگر متن خبر» ──────────────── A picture dropped into the body was drawn at the editor's full width, so one of them filled the whole visible editor and the text after it was several screens down. Inside the editor it is now a thumbnail the size of the one the «انتخاب عکاس عکس‌های متن خبر» card draws (7rem tall), which is big enough to recognise the picture by and small enough to read around. This is the editor's preview and nothing else: the stored HTML, the file, its dimensions and what the site draws are all untouched (بند ۵، محدودیت‌های فنی). It applies to pictures already in an article as well as to new ones, because it is a rule about how the editor draws, not about what it saves. */ .fi-news-content-editor .fi-fo-rich-editor-editor img, .fi-news-content-editor trix-editor img { max-height: 7rem !important; max-width: 100% !important; width: auto !important; height: auto !important; object-fit: contain; border-radius: 0.375rem; } .fi-news-content-editor .fi-fo-rich-editor-editor figure.attachment, .fi-news-content-editor trix-editor figure.attachment { max-width: 12rem !important; margin-inline: 0; } /* ── بند ۶ — «فشرده‌سازی بخش اطلاعات مرتبط» ─────────────────────────────── The card has no heading strip any more (that is PHP, not CSS). What is left for a stylesheet is the horizontal air: «منبع» sat a third of its column away from the box holding «بالیگپا», because Filament's inline label takes a fixed third of the field's width whatever the label says. It takes the width of the words now, and the box starts immediately after it. The four fields keep their own borders, so which label belongs to which box is still obvious. */ /* The grid is the component container inside the section, not the section. */ .fi-news-related-info .fi-fo-component-ctn { column-gap: 1rem; } /* تسک ۱۴۰۵/۰۶/۲۲/۱۰/۰۲، بند ۱ — «عنوان هر فیلد به بالای همان فیلد منتقل شود». Two rules used to stand here, pulling each title into a column beside its own box: `grid-template-columns: max-content minmax(0, 1fr)` on the wrapper, and a `grid-column: 2 / 3` putting the control in the second column. They are gone, and so is the `inlineLabel()` that went with them — with both removed Filament draws its own two-row layout, the title over the box, which is what the task asks for. The gap between the two is Filament's own `gap-y-2`. */ /* بند ۱ — «فاصله عنوان تا فیلد کم و منظم باشد»: the four titles sit the same short distance above their boxes, whatever kind of control is underneath. */ .fi-news-related-info [data-field-wrapper] > .grid { row-gap: 0.25rem; } /* بند ۶ — the «؟» moved under its own field (see the published field wrapper); here it is only kept from adding a line's worth of height to the row. */ .fi-news-related-info .fi-information-history-mark { line-height: 1; } /* ── بند ۹ — «وضعیت حال حاضر: انتشار» روی یک خط ───────────────────────── */ .fi-news-current-status { display: inline-flex; align-items: baseline; gap: 0.35rem; } .fi-news-current-status-label { font-weight: 500; } /* ── تسک ۱۴۰۵/۰۶/۲۲/۱۰/۰۲، بند ۲ — «فقط ساعت‌ها سفید شوند» ──────────────── «انتشار: ۲۱ شهریور ۱۴۰۵ ـ ۱۶:۴۰» was one colour from end to end, so the clock was green and the one beside it yellow. The date keeps the colour it had — nothing about the text, the separator, the format or the stored value changed — and the clock after the separator is white in both of them. */ .fi-news-edit-heading-published .fi-news-edit-heading-clock, .fi-news-edit-heading-updated .fi-news-edit-heading-clock { color: #fff; } /* ── «روز | ماه | سال» و «ساعت : دقیقه» (تسک بازطراحی انتخاب تاریخ و ساعت) ─── Five native dropdowns in place of the calendar and the clock. Native is the whole design: بند ۱۶ asks for controls that are comfortably touchable on a phone and never cut their own text off, and a phone's own wheel is larger, more familiar and better behaved in RTL than anything drawn here would be. The row wraps rather than shrinking (بند ۱۶ again — «راحتی لمس و خوانایی بر فشرده نگه‌داشتن همه فیلدها در یک ردیف اولویت دارد»), so nothing ever causes a horizontal scroll and the month box is free to be as wide as «اردیبهشت». */ .fi-jalali-select { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.375rem; } /* تسک «اصلاح نهایی UI/UX تاریخ و ساعت انتشار و پایان»، بند ۵ — «عرض فیلدها با نسبت‌های ثابت مانند نصف، یک‌سوم، یک‌چهارم یا یک‌پنجم تعیین نشود … هر Dropdown فقط به‌اندازه محتوای موردنیاز خودش + فضای استاندارد داخلی + فضای فلش Dropdown عرض داشته باشد». `flex: 0 0 auto` is the whole of it: a box no longer grows into the free space of its row, so its width is its content's width. What that content is, is decided by the browser rather than by a number written here — a native ``'s text itself and wins over `color` alone, which is the half of this that only showed on the mobile screenshot. */ -webkit-text-fill-color: var(--fi-jalali-value); font-size: 0.875rem; /* A native select renders its own popup with the page's own colours; the one thing it will not inherit is a transparent background, which on this dark panel draws white-on-white. See the note in the agency panel's own css: the options are given a solid colour of their own. */ /* The panel paints its own chevron on every `select` as a background image; a native dropdown draws one too, and the two together read as a stutter. */ appearance: auto; background-image: none; } .fi-jalali-select select option { /* بند ۱۱ — «مقادیر انتخاب‌شده داخل Dropdownهای مربوطه». The list a native select unfolds is painted by the browser from these two, so it follows the page the same way the closed box does. */ background-color: rgb(255 255 255); color: var(--fi-jalali-value); } :where(.dark) .fi-jalali-select select option { background-color: rgb(24 24 27); } /* بند ۱۳ — «مقادیر انتخاب‌شده» carry their weight as well as their colour, so a value is told from the caption above it by two things and not by one. There used to be a pair of rules here painting these five values in the news form's yellow (خبر-تکمیل-۰۱۹ و ۰۳۱). They were written as `.fi-news-date-time-value .fi-jalali-select select` — a *descendant* of the element carrying `fi-news-date-time-value`, when `extraAttributes()` puts that class on the `fi-jalali-select` element **itself**. The rules therefore never matched anything and the values have always been drawn in the plain colour above; that is why the task's screenshot shows five grey values and no yellow at all. They are not resurrected here, because بند ۱۶ asks this task to change readability and nothing else, and a value in the page's strongest neutral is more readable than the same value in amber — ۱۶٫۹:۱ against ۳٫۴:۱ on the light page. The yellow the earlier task can still be seen asking for, on the *titles* «تاریخ انتشار» و «ساعت انتشار», is a different rule and is untouched. */ .fi-jalali-select.fi-news-date-time-value select { font-weight: 600; } /* بند ۱۴ — a real disabled box, told apart by its own colour and its own plate rather than by an opacity that dimmed a value which was already too faint to read. */ .fi-jalali-select select:disabled { color: var(--fi-jalali-disabled-text); -webkit-text-fill-color: var(--fi-jalali-disabled-text); background-color: var(--fi-jalali-disabled-surface); cursor: not-allowed; } .fi-jalali-select-box:has(select:disabled) .fi-jalali-select-caption { color: var(--fi-jalali-disabled-text); } /* «روز ▼ | ماه ▼ | سال ▼ | ساعت ▼ : دقیقه ▼» — no fraction of the row anywhere, only a floor under each box so nothing is squeezed or untappable (بند ۵ تا ۹). The month name is the longest value the row holds and is never the one that gets cut; the floors are all below what their own content already needs, so on a desktop they change nothing and they only ever come into play where a browser would otherwise draw a control too small to press. */ .fi-jalali-select-day select { min-width: 4rem; } .fi-jalali-select-month select { min-width: 6.5rem; } .fi-jalali-select-year select { min-width: 5rem; } .fi-jalali-select-time select { min-width: 4rem; } .fi-jalali-select-colon { align-self: center; padding-top: 1rem; font-weight: 700; color: var(--fi-jalali-caption); } /* بند ۲۷ — «در موبایل … Horizontal Scroll ایجاد نشود؛ Dropdownها برای لمس بیش از حد کوچک نشوند؛ نام ماه کامل قابل مشاهده باشد … در صورت کمبود عرض، Wrap منطقی مجاز است». Nothing is stretched to the full width any more: the boxes are already small enough that a phone fits three or four of them on a line and wraps the rest, which is the «Wrap منطقی» the task allows and leaves the month name whole. The colon between the two clock boxes is the one thing worth hiding, because a wrap can leave it at the end of a line. */ @media (max-width: 480px) { .fi-jalali-select-colon { display: none; } } /* ── تسک «اصلاح نهایی UI/UX تاریخ و ساعت انتشار و پایان» ───────────────────── */ /* بند ۴ — «عنوان «تاریخ انتشار» … زرد شود». The words are in a `` inside the label, not in the label itself, and that span carries Tailwind's own `text-gray-950 dark:text-white`; one class more here is enough to outrank it, and the yellow is the panel's own date colour rather than a new one. */ .fi-news-publish-date-title .fi-fo-field-wrp-label span { color: var(--panel-header-date); } /* بند ۵ و ۱۱ — «فضای آزاد ایجادشده نباید دوباره با Stretchکردن فیلدها پر شود». Filament lays a `Grid` out as a CSS grid with equal columns, and equal columns are precisely the fractions بند ۵ rules out. The layout component stays exactly what it was — same state, same order, same RTL — and only its own container becomes a wrapping flex line, so each field is as wide as its content and the rest of the row is simply left empty. */ .news-form-tabs .fi-news-datetime-row > .fi-fo-component-ctn { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 1.25rem; row-gap: 0.5rem; } .news-form-tabs .fi-news-datetime-row > .fi-fo-component-ctn > * { flex: 0 0 auto; min-width: 0; max-width: 100%; } /* بند ۱۳، ۱۴ و ۱۵ — «عنوان … یک خط پایین‌تر قرار گیرد و عملاً جای فضای عنوان «تاریخ پایان» را بگیرد … هدف این است که فضای عمودی اضافی حذف شود و ارتفاع کل کادر کمتر شود». The «تاریخ پایان» and «ساعت پایان» labels are gone from the form itself, so what is left to do here is close the gap they used to hold: the heading sits tight against its own row, and the space above the block — 1.5rem, put there when the block was three lines tall — is now what one line of separation needs. */ /* The space above each block is set in the form's own inline `