/* ─────────────────────────────────────────────────────────────────────────────
«عکس‌ها»، «جزئیات عکس» و «بارگذاری عکس‌های هیدن از طریق کد گالری»
تسک ۱۴۰۵/۰۶/۰۸/۰۳
A stylesheet of its own rather than more rules in `agency-galleries.css`,
for the reason «تخفیف‌ها» and «مدیریت واترمارک» have theirs: these are one
management's surfaces, and the two surveyed stylesheets are the panel's
shared ones. Loaded after them and before the standards block, so a rule
here out-ranks the shared sheet by order and is still out-ranked by
«استانداردسازی نمای پنل», which is where a managed role belongs.
───────────────────────────────────────────────────────────────────────────── */
/* ── بند ۳.۱ — the three figures beside «عکس‌ها» ───────────────────────────── */
/* «کل عکس‌ها» white, «قابل نمایش» green, «هیدن» red — the name and the number
together, which is what بند ۳.۱ asks for in as many words.
Two classes plus the heading, for the reason the gallery figures are written
that way: «عدد آمار هدر» is a managed standard and its block is printed after
every stylesheet, so a rule of equal weight would lose to it. The standard
still decides the size and the weight of these figures, and the colour of any
figure without a class of its own. */
.fi-gallery-stats-heading .fi-gallery-stats-heading-stat.fi-photo-stat-all,
.fi-gallery-stats-heading .fi-gallery-stats-heading-stat.fi-photo-stat-all .fi-gallery-stats-heading-count {
color: var(--std-color-white, #ffffff);
}
.fi-gallery-stats-heading .fi-gallery-stats-heading-stat.fi-photo-stat-visible,
.fi-gallery-stats-heading .fi-gallery-stats-heading-stat.fi-photo-stat-visible .fi-gallery-stats-heading-count {
color: var(--std-color-success-400, #4ade80);
}
.fi-gallery-stats-heading .fi-gallery-stats-heading-stat.fi-photo-stat-hidden,
.fi-gallery-stats-heading .fi-gallery-stats-heading-stat.fi-photo-stat-hidden .fi-gallery-stats-heading-count {
color: var(--std-color-danger-400, #f87171);
}
/* ── بند ۱ of تسک ۱۴۰۵/۰۶/۰۸/۱۴ — the three names are white ───────────────── */
/* «همه»، «ویو» و «مخفی» in white, and only the figure behind each keeps the
colour of its state: «سه عنوان آماری هدر … همگی با رنگ سفید نمایش داده شوند.
فقط اعداد وضعیت رنگی خود را داشته باشند». The rules between them were never
coloured and are not mentioned here.
The word «مخفی» is what this is for. It was red beside a red figure, which
made a line with nothing hidden on it read as a warning; the state is the
number, and only the number now says so. */
.fi-page-photo-list .fi-gallery-stats-heading .fi-gallery-stats-heading-stat .fi-gallery-stats-heading-label {
color: var(--std-color-white, #ffffff);
}
/* ── بند ۲۱ و ۲۲ — the galleries' own heading line ────────────────────────── */
/* بند ۲۲: every group keeps the colour of its name, and every number is white.
The label and the figure are two elements now, so this says nothing about the
names — only about the numbers, and only on «گالری‌ها».
Scoped to that page: the same markup carries the photographs' figures, where
بند ۳.۱ asks for the number to be coloured with its name. */
.fi-page-gallery-list .fi-gallery-stats-heading .fi-gallery-stats-heading-stat .fi-gallery-stats-heading-count {
color: var(--std-color-white, #ffffff);
}
/* بند ۲۱: «عکس‌های هیدن» in a red of its own — lighter than «آمده از فتوامان»'s,
so the two reds on one line are told apart at a glance rather than read as
one figure split in two. */
.fi-gallery-stats-heading .fi-gallery-stats-heading-stat.fi-gallery-stat-hidden {
color: var(--std-color-danger-300, #fca5a5);
}
/* …and it is the one figure that leads somewhere (بند ۲۵), so it says so under
the pointer without being drawn as a link in the middle of a sentence. */
.fi-gallery-stats-heading-link {
text-decoration: none;
cursor: pointer;
}
.fi-gallery-stats-heading-link:hover .fi-gallery-stats-heading-label,
.fi-gallery-stats-heading-link:hover .fi-gallery-stats-heading-count {
text-decoration: underline;
}
/* ── بند ۲۳ و ۲۴ — a zero is white ────────────────────────────────────────── */
/* «۰ عکس» and «۰ عکس هیدن» are not states, so they are not drawn in a colour
that means one. The badge keeps its own quiet surface and its writing turns
white.
`extraAttributes` lands on the `.fi-ta-text-item` wrapper, and the badge is a
`` inside it — measured in a browser rather than
assumed, because writing the rule same-element leaves the badge exactly the
grey it was and the cell looks untouched. */
.fi-ta-text-item.fi-gallery-count-zero .fi-badge,
:where(.dark) .fi-ta-text-item.fi-gallery-count-zero .fi-badge {
color: var(--std-color-white, #ffffff);
}
/* ── بند ۵ — «تاریخ عکس» reads yellow ─────────────────────────────────────── */
/* `->color('warning')` on a table cell is not enough in this panel: «رنگ متن
سلول جدول» is a managed standard and its block is printed after every
stylesheet, so the cell computes to the standard's near-black — or, on the
dark page, to its white. Measured in a browser rather than assumed.
So the column is excepted by specificity, and the yellow is *named* rather
than taken from `var(--text)`, which for a `warning` column resolves two
steps darker than the panel's own identity yellow. This is the yellow of the
header date and the dashboard icons.
The cell's class is the column name camel-kebabed — `event_date` →
`fi-ta-cell-event-date`.
بند ۱۶ of تسک ۱۴۰۵/۰۶/۰۸/۱۰ moved the yellow onto «تاریخ بازی», which is the
only date of the match this table shows now; بند ۱۸ gives the day the file
arrived a green of its own, so the two can never be read for each other. */
.fi-ta-cell-event-date .fi-ta-text-item.fi-color {
color: var(--warning-600, #d97706);
}
:where(.dark) .fi-ta-cell-event-date .fi-ta-text-item.fi-color {
color: var(--warning-400, #fbbf24);
}
.fi-ta-cell-created-at .fi-ta-text-item.fi-color {
color: var(--success-600, #16a34a);
}
:where(.dark) .fi-ta-cell-created-at .fi-ta-text-item.fi-color {
color: var(--success-400, #4ade80);
}
/* ── بند ۱۴ — the face on «جزئیات عکس» ───────────────────────────────────── */
.fi-page-photo-detail .fi-photo-detail-avatar {
width: 2rem;
height: 2rem;
border-radius: 9999px;
object-fit: cover;
vertical-align: middle;
}
/* ── بند ۱۶ — the three stored copies, as links ──────────────────────────── */
.fi-photo-files {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 2rem;
align-items: center;
}
.fi-photo-file {
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-height: 2rem;
}
.fi-photo-file-link {
display: inline-flex;
align-items: center;
color: var(--std-color-success-400, #4ade80);
}
.fi-photo-file-icon {
width: 1.25rem;
height: 1.25rem;
}
/* A copy that was never produced is said to be missing rather than given an
icon that leads nowhere. */
.fi-photo-file-missing {
color: var(--std-color-gray-400, #9ca3af);
}
/* ── بند ۲۶ … ۲۸ — «بارگذاری عکس‌های هیدن» wears red ──────────────────────── */
/* The heading, the icon before it and nothing else on the line: the gallery's
code and the creator's face keep the colours the ordinary route gives them,
because they are the same information here. */
.fi-hidden-upload-heading {
display: inline-flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.fi-page-hidden-upload-by-code .fi-header-heading .fi-hidden-upload-heading,
.fi-page-hidden-upload-by-code .fi-header-heading .fi-hidden-upload-heading > .fi-hidden-upload-heading-icon {
color: var(--danger-500, #ef4444);
}
.fi-hidden-upload-heading-icon {
width: 1.75rem;
height: 1.75rem;
flex-shrink: 0;
}
/* بند ۲۷: the gallery card on this page is not the white paper of the ordinary
route — it is the same card, the same size, the same information, on a
controlled pale red, so a manager can see at a glance which of the two
upload routes they are standing in.
The writing on it is darkened rather than left at the light card's tokens:
the surface changed, so the contrast has to be said again. */
.fi-page-hidden-upload-by-code .fi-gallery-header,
:where(.dark) .fi-page-hidden-upload-by-code .fi-gallery-header {
background: #fdecec;
border-color: #f3b8b8;
}
.fi-page-hidden-upload-by-code .fi-gallery-header .fi-gallery-header-title,
.fi-page-hidden-upload-by-code .fi-gallery-header .fi-gallery-header-title-text,
:where(.dark) .fi-page-hidden-upload-by-code .fi-gallery-header .fi-gallery-header-title,
:where(.dark) .fi-page-hidden-upload-by-code .fi-gallery-header .fi-gallery-header-title-text {
color: var(--danger-700, #b91c1c);
}
.fi-page-hidden-upload-by-code .fi-gallery-header .fi-gallery-header-info,
:where(.dark) .fi-page-hidden-upload-by-code .fi-gallery-header .fi-gallery-header-info {
color: #7f1d1d;
}
.fi-page-hidden-upload-by-code .fi-gallery-header-badge,
:where(.dark) .fi-page-hidden-upload-by-code .fi-gallery-header-badge {
border-color: rgb(127 29 29 / 0.35);
}
/* بند ۲۸: «بارگذاری عکس» — the section's own heading, red on this route only. */
.fi-page-hidden-upload-by-code .fi-upload-files-section .fi-sc-section-header-heading,
.fi-page-hidden-upload-by-code .fi-upload-files-section .fi-section-header-heading {
color: var(--danger-500, #ef4444);
}
/* ── بند ۲۹ — the warning window ─────────────────────────────────────────── */
.fi-hidden-upload-warning-actions {
display: flex;
justify-content: center;
gap: 0.75rem;
width: 100%;
}
.fi-hidden-upload-warning .fi-modal-header,
.fi-hidden-upload-warning .fi-modal-content {
text-align: center;
}
/* ─────────────────────────────────────────────────────────────────────────────
«اصلاح و تکمیل مدیریت عکس‌ها و جزئیات عکس» — تسک ۱۴۰۵/۰۶/۰۸/۰۷
───────────────────────────────────────────────────────────────────────────── */
/* ── عکس-۰۴ — every column heading centred ────────────────────────────────── */
/* The words in the head of the table, and only there: the cells underneath keep
the alignment each column asked for, so an amount stays where an amount
belongs and the writing in a row stays right-aligned with the page.
One rule is enough because Filament puts the heading's words — and, on a
sortable column, the `role="button"` span carrying them — straight into the
`` as inline content. Measured in a browser: every heading of this list
computes to `center`, the marked ones and the plain ones alike. */
.fi-page-photo-list .fi-ta-header-cell {
text-align: center;
}
/* ── عکس-۰۶ — «فایل»: the picture, with the master behind it ──────────────── */
.fi-photo-file-cell {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
}
.fi-photo-file-cell-image {
width: 3.5rem;
height: 3.5rem;
object-fit: cover;
border-radius: 0.5rem;
display: block;
}
/* A frame whose display copy was never written: a bounded empty square rather
than a broken picture, so the row keeps its height. */
.fi-photo-file-cell-blank {
background-color: var(--std-color-gray-200, #e5e7eb);
}
:where(.dark) .fi-photo-file-cell-blank {
background-color: var(--std-color-gray-700, #374151);
}
/* The download mark sits on the picture, small and legible on any photograph
because it carries its own dark disc. */
.fi-photo-file-cell-download {
position: absolute;
inset-block-end: 0.125rem;
inset-inline-start: 0.125rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.25rem;
height: 1.25rem;
border-radius: 9999px;
background: rgb(17 24 39 / 0.72);
color: var(--std-color-white, #ffffff);
}
.fi-photo-file-cell-download svg {
width: 0.875rem;
height: 0.875rem;
}
.fi-photo-file-cell:hover .fi-photo-file-cell-download {
background: rgb(17 24 39 / 0.92);
}
/* ── عکس-۰۸ — the file name reads as a link ──────────────────────────────── */
/* Underlined, and underlined at rest rather than on hover: عکس-۰۸ asks for
«زیرخط آن مشخص باشد», which is about a name a manager can *see* is a link
before the pointer is anywhere near it. */
.fi-ta-cell-filename a.fi-ta-col-has-column-url,
.fi-ta-cell-filename .fi-photo-filename-link,
.fi-ta-cell-filename .fi-photo-filename-link span {
text-decoration: underline;
text-underline-offset: 0.2em;
}
/* ── عکس-۱۳ — a readable option list ─────────────────────────────────────── */
/* Alternate rows carry a faint wash so one option is told from the next, and a
badge that has one leads its name — the very look the competition and team
lists already have (`fi-team-option`), applied to every list of this
management rather than to those two alone. */
.fi-dropdown-panel .fi-fo-select-option-label:nth-child(odd),
.fi-fo-select-options .choices__item:nth-child(odd),
.fi-select-options .choices__item--choice:nth-child(odd) {
background-color: rgb(148 163 184 / 0.08);
}
:where(.dark) .fi-dropdown-panel .fi-fo-select-option-label:nth-child(odd),
:where(.dark) .fi-fo-select-options .choices__item:nth-child(odd),
:where(.dark) .fi-select-options .choices__item--choice:nth-child(odd) {
background-color: rgb(255 255 255 / 0.04);
}
/* ── عکس-۱۷ — «پیش‌نمایش عکس» on the details page ────────────────────────── */
.fi-photo-preview {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.fi-photo-preview-stage {
display: flex;
align-items: center;
justify-content: center;
min-height: 14rem;
border-radius: 0.5rem;
background: rgb(0 0 0 / 0.04);
overflow: hidden;
}
:where(.dark) .fi-photo-preview-stage {
background: rgb(255 255 255 / 0.05);
}
/* Bounded, and never stretched: «تا حد مناسب و بدون برهم‌زدن نسبت واقعی تصویر». */
.fi-photo-preview-image {
max-height: 32rem;
max-width: 100%;
object-fit: contain;
border-radius: 0.5rem;
}
.fi-photo-preview-empty,
.fi-photo-preview-meta {
color: var(--std-color-gray-500, #6b7280);
font-size: 0.875rem;
}
:where(.dark) .fi-photo-preview-empty,
:where(.dark) .fi-photo-preview-meta {
color: var(--std-color-gray-400, #9ca3af);
}
.fi-photo-preview-meta {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1.5rem;
}
.fi-photo-preview-ltr {
unicode-bidi: isolate;
}
/* ── عکس-۱۹ و عکس-۲۰ — the header of «جزئیات عکس» ────────────────────────── */
/* The state is an eye now, not a word. */
.fi-page-photo-detail .fi-photo-detail-state {
display: inline-flex;
align-items: center;
}
.fi-page-photo-detail .fi-photo-detail-state-icon {
width: 1.75rem;
height: 1.75rem;
}
.fi-page-photo-detail .fi-photo-detail-state.fi-photo-stat-visible {
color: var(--std-color-success-400, #4ade80);
}
.fi-page-photo-detail .fi-photo-detail-state.fi-photo-stat-hidden {
color: var(--std-color-danger-400, #f87171);
}
/* عکس-۲۰: a ring around the face, in the panel's own yellow, so the portrait is
bounded against the dark header instead of dissolving into it. The panel's
colour rather than a new one — «طراحی جدید و متفاوت با سایر بخش‌های پنل ساخته
نشود». */
.fi-page-photo-detail .fi-photo-detail-avatar {
border: 2px solid var(--std-color-primary-500, #f59e0b);
box-shadow: 0 0 0 2px rgb(0 0 0 / 0.25);
}
/* ═════════════════════════════════════════════════════════════════════════
تسک ۱۴۰۵/۰۶/۰۸/۱۰ — «اصلاح فهرست عکس‌ها، جزئیات عکس، فیلترهای سریع و پنجره
فراداده»
═════════════════════════════════════════════════════════════════════════ */
/* ── بند ۳ و ۴ — the bar above the table is one line ──────────────────────── */
/*
* The filters used to hide behind the «فیلترها» button. بند ۴ puts them in the
* bar itself, «کنار جستجو», and says they must not fall to a second row on a
* desktop.
*
* Filament draws the two as siblings inside `.fi-ta-header-ctn` — the filters
* above the toolbar — and lays the filters themselves out as a grid whose cells
* are *filters*, each stacking its own fields downwards. Left alone that gives
* a column of nine boxes above the search field, which is neither of the two
* things the بند asks for.
*
* So three things are undone, in order: the header is a row with the toolbar
* first (and so, in this right-to-left panel, the search box at the right end);
* the filters' own grid is a nowrap row rather than a grid; and each filter's
* inner grid is a nowrap row too, so the five steps of the chain read across
* rather than down.
*
* `flex-wrap: nowrap` with `overflow-x: auto` is the whole of «در دسکتاپ نباید
* به ردیف دوم شکسته شوند»: on a screen too narrow to hold them the bar scrolls
* sideways, and the three filters stay on the line they were put on.
*/
@media (min-width: 1024px) {
.fi-page-photo-list .fi-ta-header-ctn {
display: flex;
flex-wrap: nowrap;
align-items: flex-end;
gap: 0.75rem;
}
.fi-page-photo-list .fi-ta-header-toolbar {
order: 1;
flex: 0 0 auto;
}
.fi-page-photo-list .fi-ta-filters-above-content-ctn {
order: 2;
flex: 1 1 auto;
min-width: 0;
overflow-x: auto;
}
/* The filters' own box has a heading, a frame and a background of its own
above the table; inside the bar it is only the fields, the reset and the
apply button, on one line. */
.fi-page-photo-list .fi-ta-filters {
display: flex;
flex-wrap: nowrap;
align-items: flex-end;
gap: 0.75rem;
border: 0;
padding: 0;
background: transparent;
box-shadow: none;
}
.fi-page-photo-list .fi-ta-filters-heading {
display: none;
}
.fi-page-photo-list .fi-ta-filters-header,
.fi-page-photo-list .fi-ta-filters-actions-ctn {
flex: 0 0 auto;
margin: 0;
}
/* «اعمال فیلترها» and «بازنشانی فیلترها» belong beside the search box, at
the end of the bar the eye starts from. Left where Filament puts them —
after the fields — they are the first thing to scroll out of sight on a
bar that has nine filters on it. */
.fi-page-photo-list .fi-ta-filters-actions-ctn {
order: -1;
}
/* The grid of filters, and each filter's own grid of fields. */
.fi-page-photo-list .fi-ta-filters > .fi-sc.fi-grid,
.fi-page-photo-list .fi-ta-filters .fi-sc-component > div > .fi-sc.fi-grid {
display: flex;
flex-wrap: nowrap;
align-items: flex-end;
gap: 0.75rem;
}
/* A flex row sizes its items to their content, and a select's content is
a placeholder — so without a floor every filter collapses to a column of
single letters. The floor is the field's, and the cell takes its size
from it. */
.fi-page-photo-list .fi-ta-filters .fi-grid-col {
flex: 0 0 auto;
}
.fi-page-photo-list .fi-ta-filters .fi-fo-field-wrp {
min-width: 10rem;
}
}
/* بند ۳: «کادر جستجو تقریباً ۱٫۵ برابر عرض فعلی» — Filament's own search field
is 14rem wide in this panel, so 21rem is that one and a half, and the height
and the frame are untouched. */
.fi-page-photo-list .fi-ta-search-field .fi-input-wrp,
.fi-page-photo-list .fi-ta-search-field input {
min-width: 21rem;
}
/* بند ۱۱ — «عرض فیلتر رقابت از دسته‌بندی مادر بیشتر باشد، چون متن رقابت
طولانی‌تر است»، و «طول نام‌هایی مانند سیستان و بلوچستان باید کامل جا شود». */
.fi-page-photo-list .fi-photo-filter {
min-width: 0;
}
.fi-page-photo-list .fi-photo-filter-province {
min-width: 11rem;
}
.fi-page-photo-list .fi-photo-filter-parent {
min-width: 13rem;
}
.fi-page-photo-list .fi-photo-filter-competition {
min-width: 19rem;
}
/* بند ۱۰: an option of any of these lists is one line. A رقابت reads
«لیگ برتر امید استان تهران | فصل ۱۴۰۵», and a line that wraps is a line a
manager has to read twice. */
.fi-page-photo-list .fi-fo-select-option-label,
.fi-page-photo-list .fi-team-option {
display: flex;
align-items: center;
gap: 0.4rem;
white-space: nowrap;
}
/* ── عکس-فراداده-۰۵ تا ۰۸ — a filter's list is as wide as what is in it ──── */
/*
* «عرض پنجره بازشده تقریباً محدود به عرض خود فیلد است؛ در نتیجه متن کامل
* گزینه‌ها دیده نمی‌شود یا بریده می‌شود» — and the cause is two lines, neither of
* them ours:
*
* - Filament's select writes the *field's* width into the list's `style`
* attribute every time it opens it (`dropdown.style.width =
* selectButton.offsetWidth`), so the list is the field however long the
* names in it are;
* - its theme then caps the panel at `max(14rem, 100% - 1.5rem) !important`.
*
* `min-width` is the answer to the first, and it is deliberate rather than a
* `!important` over the inline width: the width Filament writes stays the
* **floor**, so «حداقل عرض آن از عرض خود فیلد کوچک‌تر نباشد» holds by
* construction, and `max-content` is what grows it to the longest name the list
* actually holds. Nothing here says how wide any one filter is — the content
* does.
*
* The cap answers عکس-فراداده-۰۷: no list is ever wider than the screen it has
* to fit on. It carries `!important` because the theme's own cap does, and it
* is under the cap on the option below it, so the floor can never climb past
* it — a `min-width` larger than a `max-width` wins, and that is exactly the
* overflow this بند forbids.
*
* Where the list *opens* is Filament's `shift()` middleware, which already
* keeps it inside the viewport and needs no help; and the list is laid over the
* table rather than inside the filter bar because the page is a
* `fi-fixed-positioning-context` (بند ۱ of تسک ۱۴۰۵/۰۶/۰۸/۱۶ — see
* `ListPhotos::getPageClasses()`), which is عکس-فراداده-۰۸'s «علت واقعی
* لایه‌بندی» rather than a z-index raised until the symptom went away. The
* vertical scroll is the theme's `max-height` and is untouched.
*/
.fi-page-photo-list .fi-ta-filters .fi-select-input-ctn > .fi-dropdown-panel {
min-width: max-content;
max-width: min(38rem, calc(100vw - 2rem)) !important;
}
/* The cap on one option, two rem under the cap on the list, so the list's own
`max-content` can never reach it. An option longer than this is the only one
that wraps — «نام گزینه‌ها تا جای ممکن کامل و خوانا نمایش داده شود» is what
the width above is for, and this is only the end of it. */
.fi-page-photo-list .fi-ta-filters .fi-select-input-ctn > .fi-dropdown-panel .fi-select-input-option > span {
display: block;
max-width: min(36rem, calc(100vw - 4rem));
}
.fi-page-photo-list .fi-ta-filters .fi-select-input-ctn > .fi-dropdown-panel .fi-fo-select-option-label,
.fi-page-photo-list .fi-ta-filters .fi-select-input-ctn > .fi-dropdown-panel .fi-team-option {
flex-wrap: wrap;
white-space: normal;
}
/* بند ۱۲ — «ردیف‌های یکی‌درمیان در فهرست‌های بازشونده».
The difference is one step of the panel's own greys, not a colour: «اختلاف
رنگ ملایم و هماهنگ با تم تیره پنل باشد». */
.fi-page-photo-list .fi-dropdown-list .fi-dropdown-list-item:nth-child(even),
.fi-page-photo-list .fi-fo-select-options li:nth-child(even),
.fi-page-photo-list .choices__list--dropdown .choices__item:nth-child(even) {
background-color: var(--std-color-gray-100, #f3f4f6);
}
:where(.dark) .fi-page-photo-list .fi-dropdown-list .fi-dropdown-list-item:nth-child(even),
:where(.dark) .fi-page-photo-list .fi-fo-select-options li:nth-child(even),
:where(.dark) .fi-page-photo-list .choices__list--dropdown .choices__item:nth-child(even) {
background-color: var(--std-color-gray-800, #1f2937);
}
/* ── بند ۱۹ — یکی‌درمیان در خود جدول ──────────────────────────────────────── */
/*
* «در جدول طولانی، چشم بتواند هر ردیف را تا انتهای ستون‌ها دنبال کند». Two very
* close backgrounds, the second a single step from the first, so the stripe is
* a guide rather than a pattern. Hovering still wins, because the row under the
* pointer has to be the one that stands out.
*/
.fi-page-photo-list .fi-ta-row:nth-child(even) {
background-color: var(--std-color-gray-50, #f9fafb);
}
:where(.dark) .fi-page-photo-list .fi-ta-row:nth-child(even) {
background-color: color-mix(in oklab, var(--std-color-gray-800, #1f2937) 45%, transparent);
}
/* ── بند ۲۰ — «ستون گالری ۲۵ درصد عریض‌تر» ────────────────────────────────── */
/*
* The cell's class keeps the dot of the column's name (`gallery.title`), so the
* selector escapes it. The floor and the longer `limit()` in `PhotosTable` go
* together: characters without room only wrap, room without characters only
* leaves white space.
*/
.fi-page-photo-list .fi-ta-cell-gallery\.title {
min-width: 15rem;
}
/* ── بند ۲۹ تا ۳۱ — the page is never silently busy ───────────────────────── */
/*
* بند ۶ of تسک ۱۴۰۵/۰۶/۰۸/۱۶ — «در مرکز محدوده قابل مشاهده صفحه نمایش داده
* شود … به بالای سند نچسبد … مستقل از محل اسکرول کاربر قابل مشاهده باشد».
*
* It was `position: sticky; top: 0`, and sticky is only sticky inside its own
* scrolling box: this one is the page, so the mark sat at the top of the
* *document* and a manager reading the fiftieth row of the list saw nothing at
* all while the page was busy — which is «صفحه ظاهراً فریز شده به نظر می‌رسد»
* word for word. `fixed` is against the viewport, so it is in the middle of
* whatever the manager is looking at whatever they have scrolled to.
*
* The frame covers the screen and is transparent to the pointer, so it is the
* card in the middle of it that is seen and nothing underneath is blocked from
* being clicked once the mark goes. The card keeps the agency's own turning
* yellow mark and the wording it had — «از لوگوی زرد فعلی آژانس و همان زبان
* بصری موجود استفاده کند».
*/
.fi-page-photo-list .fi-photo-loading {
display: none;
position: fixed;
inset: 0;
z-index: 40;
align-items: center;
justify-content: center;
pointer-events: none;
}
/* بند ۷ — «به‌محض اینکه اطلاعات موردنیاز پنجره آماده نمایش است، وضعیت بارگذاری
باید خاتمه پیدا کند». While a window of this page is open the page beneath it
is not what anybody is waiting for, so the page's own mark stands down. The
inline `display: flex` is Livewire's, so this has to outrank it. */
.fi-page-photo-list .fi-photo-loading.fi-photo-loading-stood-down {
display: none !important;
}
.fi-page-photo-list .fi-photo-loading-card {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: 0.75rem 1rem;
border-radius: 0.75rem;
background-color: color-mix(in oklab, var(--std-color-gray-900, #111827) 85%, transparent);
color: var(--std-color-white, #ffffff);
}
.fi-page-photo-list .fi-photo-loading-mark {
width: 2.25rem;
height: 2.25rem;
object-fit: contain;
animation: fi-photo-loading-breath 1.4s ease-in-out infinite;
}
.fi-page-photo-list .fi-photo-loading-text {
font-size: 0.95rem;
}
@keyframes fi-photo-loading-breath {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.45;
transform: scale(0.88);
}
}
@media (prefers-reduced-motion: reduce) {
.fi-page-photo-list .fi-photo-loading-mark {
animation: none;
}
}
/* ── عکس-۰۲ و عکس-۰۳ — the page's own space, while it is being fetched ───── */
/*
* «اگر اطلاعات صفحه عکس‌ها هنوز آماده نشده است، فضای خود صفحه عکس‌ها نمایش داده
* شود» و «لوگوی بارگذاری در فضای صفحه عکس‌ها و در محل مناسب و مرکزی نمایش داده
* شود».
*
* Not the fixed overlay above — that one is laid over a page that is already
* drawn. This is the page itself before there is anything in it, so it takes a
* good part of the height the table is about to fill and stands the mark in the
* middle of it. The mark and the words are the overlay's own elements, so both
* states of this management turn the same logo at the same size.
*/
.fi-page-photo-list .fi-photo-list-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
min-height: 60vh;
}
/* One mark at a time. The overlay answers for *any* Livewire request this page
makes, and fetching the page's own data is one — so while the page is showing
its own loading space the overlay has nothing to add, and two logos turning
over one another is what it would otherwise draw. */
.fi-page-photo-list:has(.fi-photo-list-loading) .fi-photo-loading {
display: none !important;
}
/* ── بند ۳۲ تا ۳۶ — «جزئیات عکس» ─────────────────────────────────────────── */
/* بند ۳۶: the face and the eye sit on the title's own centre line. The heading
is a flex row; without this its items align to the top of the tallest of
them, which is the words, and a 2rem portrait beside a 1.5rem line then reads
as sitting high. */
.fi-page-photo-detail .fi-gallery-stats-heading {
display: flex;
align-items: center;
gap: 0.55rem;
}
.fi-page-photo-detail .fi-photo-detail-state {
display: inline-flex;
align-items: center;
}
/* بند ۳۴: the readings must not stack into one narrow column. The section is
three columns wide from `xl` up (see `PhotoForm`), and its preview neighbour
keeps the remaining third. */
.fi-page-photo-detail .fi-photo-detail-preview-image {
max-height: 26rem;
}
/* بند ۲۱ — «شناسه در صورت نمایش، زرد باشد»: the one part of an option line that
is a number to quote rather than words to read. */
.fi-option-line {
display: inline-flex;
align-items: center;
gap: 0.25rem;
white-space: nowrap;
}
.fi-option-identifier {
color: var(--std-color-warning-600, #d97706);
}
:where(.dark) .fi-option-identifier {
color: var(--std-color-warning-400, #fbbf24);
}
.fi-option-sep {
color: var(--std-color-gray-400, #9ca3af);
}
/* ═════════════════════════════════════════════════════════════════════════
تسک ۱۴۰۵/۰۶/۰۸/۱۳ — «اصلاح چیدمان مدیریت عکس‌ها و تکمیل پنجره جزئیات فراداده»
═════════════════════════════════════════════════════════════════════════ */
/* ── بند ۲ — the heading is one line ──────────────────────────────────────── */
/*
* «تمام اطلاعات هدر باید در یک خط و بدون شکست نامناسب جهت متن نمایش داده شوند».
*
* The word itself is Persian now (`PhotoCounts::VISIBLE_HEADER_LABEL`), which
* is what actually fixed the reordering — a Latin run on a right-to-left line
* takes its colon and its figure with it. These two rules keep the line whole
* afterwards: nothing wraps, and each named figure is a direction of its own so
* a number can never be pulled away from the word it belongs to.
*/
.fi-page-photo-list .fi-gallery-stats-heading {
white-space: nowrap;
}
.fi-page-photo-list .fi-gallery-stats-heading .fi-gallery-stats-heading-stat {
unicode-bidi: isolate;
}
/* ── بند ۳ و ۴ — the tools go up to the title line ────────────────────────── */
/*
* بند ۳: «مرتب‌سازی تاریخ بازی، جستجو و آیکون تنظیم ستون‌ها … در بالای جدول و در
* سمت چپ همان خط عنوان اصلی جدول/صفحه قرار بگیرند»، and بند ۴: what is left
* behind — the filters — takes the whole width.
*
* The three tools are Filament's `fi-ta-header-toolbar`, which is drawn inside
* the table's own header beside the filters. Sharing that line cost the filters
* a third of the page: nine controls were squeezed into 942 of 1536 pixels and
* the bar scrolled sideways for the sake of a search box.
*
* `.fi-page-header-main-ctn` is the one box that holds both the page's ``
* and the table, so the toolbar is positioned against it: `inset-block-end:
* 100%` of `.fi-page-main` puts the toolbar's lower edge exactly on the top
* edge of the content, which is the line the heading sits on. No height is
* assumed and no offset is typed in — a heading of two lines moves the toolbar
* with it.
*
* The filters then have the header row to themselves, which is the whole of
* بند ۴.
*/
@media (min-width: 1024px) {
.fi-page-photo-list .fi-page-main {
position: relative;
}
.fi-page-photo-list .fi-ta-header-toolbar {
position: absolute;
inset-block-end: 100%;
/* «در سمت چپ همان خط عنوان»: the heading is at the start of a
right-to-left line, so the far side — the one the tools want — is the
inline *end*. */
inset-inline-end: 0;
z-index: 10;
width: auto;
/* The gap Filament leaves between the page header and the content is
2rem, so lifting the toolbar by exactly that much lands its lower
edge on the heading's own — measured in a browser: heading
124–160, toolbar 123–160. */
margin-block-end: 2rem;
padding: 0;
}
/* …and what is left in the bar is only the filters, across the whole of it. */
.fi-page-photo-list .fi-ta-filters-above-content-ctn {
flex: 1 1 100%;
width: 100%;
}
}
/* The heading and the tools now share one line, so on the narrow end of the
desktop range the search box gives way rather than running into «عکس‌ها |
تعداد کل: … | ویو: … | مخفی: …». Measured at 1024px: the tools end at 566 and
the heading of the real archive would begin at about 522. */
@media (min-width: 1024px) and (max-width: 1279px) {
.fi-page-photo-list .fi-ta-search-field .fi-input-wrp,
.fi-page-photo-list .fi-ta-search-field input {
min-width: 12rem;
}
}
/* ── بند ۵ — «اعمال فیلترها» above «بازنشانی فیلترها» ─────────────────────── */
/*
* Two buttons side by side cost the filters two buttons' width; one above the
* other costs them one. `PhotosTable` asks Filament for the footer position, so
* the reset is a real button rather than a word in the filters' heading, and
* both are in `fi-ta-filters-actions-ctn` — this stacks them.
*
* The heading strip they used to share is empty now and would otherwise leave a
* gap at the start of the bar.
*/
@media (min-width: 1024px) {
.fi-page-photo-list .fi-ta-filters-header {
display: none;
}
.fi-page-photo-list .fi-ta-filters-actions-ctn {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.35rem;
flex: 0 0 auto;
}
.fi-page-photo-list .fi-ta-filters-actions-ctn .fi-btn {
width: 100%;
justify-content: center;
}
}
/* ── بند ۶ — the download mark is a light green ───────────────────────────── */
/*
* «رنگ آیکون دانلود به یک سبز روشن، واضح و هماهنگ با رابط فعلی پنل تغییر کند …
* آیکون باید روی تصاویر روشن و تیره هر دو قابل تشخیص باشد».
*
* It was white on a dark disc, which disappears into any dark corner of a
* photograph. The green is the panel's own `success-400` — the light step, the
* same green the watermark tick and the open eye are drawn in — and the disc
* under it is kept and darkened, because a light mark on a light photograph
* needs something to sit on. The two together are legible either way round.
*/
.fi-photo-file-cell-download {
background: rgb(17 24 39 / 0.82);
color: var(--std-color-success-400, #4ade80);
}
.fi-photo-file-cell:hover .fi-photo-file-cell-download {
background: rgb(17 24 39 / 0.95);
color: var(--std-color-success-300, #86efac);
}
/* ── بند ۱۷ و ۱۸ — the «فراداده» cell ─────────────────────────────────────── */
/*
* بند ۱۷: «هر چیزی که در ستون فراداده نمایش داده می‌شود … تقریباً دو برابر اندازه
* فعلی شود». The cell is a badge — a tick or a number — and a badge is its text,
* its padding and its own icon, so the size is set on the badge itself and
* everything in it follows.
*
* بند ۱۸: «مقادیر ستون فراداده قابل کلیک هستند، ولی در وضعیت فعلی این موضوع
* واضح نیست». The pointer becomes a hand and the badge lifts a step on hover —
* the standard visual change the rest of the panel uses — so a manager can see
* the value is a way in before they press it.
*/
/*
* عکس-فراداده-۱۲ — «زیر خود عدد یک خط ظریف قرار گیرد … هدف این است که مدیر بدون
* آزمون و خطا متوجه شود عدد قابل کلیک است».
*
* The pointer and the lift below already said it, but only once the pointer was
* over the cell — which is the trial the بند names. The line says it standing
* still.
*
* It is a `text-decoration` on the badge rather than a border under it, so it is
* propagated to the words inside and to nothing else: the line is as wide as the
* number and no wider than it. The colour is the number's own thinned rather
* than a new one, and the line is a single pixel under a 1.5rem character —
* «رنگ و ظاهر آن با طراحی فعلی جدول هماهنگ باشد و خط زیر آن بیش از حد ضخیم یا
* برجسته نباشد».
*/
.fi-page-photo-list .fi-photo-metadata-cell .fi-badge {
font-size: 1.5rem;
line-height: 1.2;
padding: 0.35rem 0.75rem;
cursor: pointer;
transition: filter 150ms ease, background-color 150ms ease;
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: color-mix(in oklab, currentcolor 55%, transparent);
text-underline-offset: 0.22em;
}
.fi-page-photo-list .fi-photo-metadata-cell .fi-badge .fi-icon {
width: 1.5rem;
height: 1.5rem;
}
.fi-page-photo-list .fi-photo-metadata-cell button,
.fi-page-photo-list .fi-photo-metadata-cell .fi-ta-text-item {
cursor: pointer;
}
.fi-page-photo-list .fi-photo-metadata-cell:hover .fi-badge {
filter: brightness(1.25);
}
/* ══════════════════════════════════════════════════════════════════════════
«ریت عکس» — تسک ۱۴۰۵/۰۶/۱۰/۲۰ (RATE-001 … RATE-011)
══════════════════════════════════════════════════════════════════════════ */
/* ── The table's «Rate» cell (بند ۱۹ … ۲۱ و ۲۴) ───────────────────────────── */
/* A badge rather than coloured text on purpose — «استانداردسازی نمای پنل» owns
`.fi-ta-text-item` and prints its colour last, so a bare text cell would draw
near-black whatever `->color()` said. What is left here is the cell saying it
can be opened: it is a button in every other respect already. */
.fi-page-photo-list .fi-ta-cell-rate .fi-badge,
.fi-page-photo-list .fi-ta-cell-rate button {
cursor: pointer;
}
.fi-page-photo-list .fi-ta-cell-rate .fi-badge {
white-space: nowrap;
transition: filter 150ms ease;
}
.fi-page-photo-list .fi-ta-cell-rate:hover .fi-badge {
filter: brightness(1.25);
}
/* ── «تغییر Rate عکس» — the window (بند ۲۴ و ۲۵) ──────────────────────────── */
.fi-photo-rate-window {
display: flex;
align-items: center;
gap: 1rem;
}
.fi-photo-rate-window-thumb {
flex: 0 0 auto;
width: 6.5rem;
height: 6.5rem;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 0.5rem;
background: color-mix(in oklab, currentcolor 8%, transparent);
}
.fi-photo-rate-window-thumb img {
max-width: 100%;
max-height: 100%;
/* The frame's own proportions — a preview squeezed into a square says the
wrong thing about the picture it is asking a manager to judge. */
object-fit: contain;
}
.fi-photo-rate-window-empty {
padding: 0.5rem;
text-align: center;
opacity: 0.7;
}
.fi-photo-rate-window-current {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.fi-photo-rate-window-label {
opacity: 0.7;
}
.fi-photo-rate-window-value {
display: flex;
align-items: center;
gap: 0.5rem;
}
/* The panel's own yellow, named rather than left to `var(--text)` — that
resolves to a brown two steps darker than the yellow the header date and the
dashboard icons use. */
.fi-photo-rate-window .fi-photo-rate-stars {
color: var(--warning-600, #d97706);
letter-spacing: 0.05em;
}
:where(.dark) .fi-photo-rate-window .fi-photo-rate-stars {
color: var(--warning-400, #fbbf24);
}
/* ── «Rate» on «جزئیات عکس» — the real stars (بند ۲۳) ─────────────────────── */
.fi-photo-rate-detail {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.fi-photo-rate-detail-label {
opacity: 0.75;
}
.fi-photo-rate-detail-stars {
display: flex;
align-items: center;
/* Ten stars have to fit the third of a row this box gets on a narrow
screen, so they wrap rather than push the box wider. */
flex-wrap: wrap;
gap: 0.1rem;
color: var(--warning-600, #d97706);
}
:where(.dark) .fi-photo-rate-detail-stars {
color: var(--warning-400, #fbbf24);
}
.fi-photo-rate-detail-star {
width: 1.15rem;
height: 1.15rem;
}
/* آژانس ـ تاپ‌شات ـ ظاهر ـ ۰۰۳: «بارگذاری عکس» — the heading of the file box,
yellow on this management only.
Written here rather than as an exception in «استانداردسازی نمای پنل» for the
reason the sibling rule above is: that management's «عنوان کادر» is
`.fi-sc-section-label`, the heading a section gets when it is given a *label*,
and a section given a *heading* draws `.fi-section-header-heading`, which no
standard owns. The very same box's red on «بارگذاری عکس‌های هیدن» is written
exactly this way, and one box should not be coloured two different ways on two
pages. The colour is the panel's own yellow, not a new one. */
.fi-page-starred-upload-by-code .fi-upload-files-section .fi-sc-section-header-heading,
.fi-page-starred-upload-by-code .fi-upload-files-section .fi-section-header-heading {
color: var(--warning-500, #f59e0b);
}
:where(.dark) .fi-page-starred-upload-by-code .fi-upload-files-section .fi-sc-section-header-heading,
:where(.dark) .fi-page-starred-upload-by-code .fi-upload-files-section .fi-section-header-heading {
color: var(--warning-400, #fbbf24);
}
/* ── The rate list, in stars (آژانس ـ تاپ‌شات ـ ریت ـ ۰۰۱ و ۰۰۲) ───────────── */
/* Every row of «ریت عکس‌ها» is its own rate: ریت ۲ is two marks, ریت ۷ is
seven. It used to be one mark and a figure — «۷ ★» — which is a thing to read
rather than a thing to see, and nine of them in a column all looked the same.
The value, the order, the search and what choosing a row does are untouched:
this is the label and nothing else (آژانس ـ تاپ‌شات ـ ایمنی ـ ۰۰۱). */
.fi-rate-option {
display: inline-flex;
align-items: center;
min-width: 0;
}
/* The panel's own yellow — the very colour «کد عکاس» and every other emphatic
number in the agency is written in. No second yellow is defined here.
`letter-spacing` because ten stars set solid read as a bar rather than as ten
things; `white-space: nowrap` because a rate that wrapped onto two lines
would be counted wrong. */
.fi-rate-option-stars {
white-space: nowrap;
letter-spacing: 0.08em;
color: var(--warning-500, #f59e0b);
}
:where(.dark) .fi-rate-option-stars {
color: var(--warning-400, #fbbf24);
}
/* ── «بارگذاری عکس‌های ستاره‌دار از طریق کد گالری» (بند ۷، ۹ و ۱۲) ─────────── */
.fi-page-starred-upload-by-code .fi-starred-upload-section {
margin-block-start: 1rem;
}
/* بند ۱۲: «۱۲۰ عکس | Rate: ۸ ★ | قابل نمایش», directly above «شروع بارگذاری»
so it is read on the way to the button rather than after it. */
.fi-photo-upload-summary {
margin-block-start: 1.25rem;
padding: 0.6rem 0.9rem;
border-radius: 0.5rem;
border: 1px solid color-mix(in oklab, currentcolor 15%, transparent);
background: color-mix(in oklab, currentcolor 5%, transparent);
letter-spacing: 0.02em;
}
|