.admin-only { display: none; } body[data-admin-mode="on"] .admin-only { display: revert; } /* The fixed admin-mode-bar sits at the bottom-right of the viewport at every scroll position, so any page whose real content also reaches the bottom of the document (e.g. the film detail page's .film-links-form, whose last input/button is the last substantial content before the footer) gets its content covered by the bar once scrolled that far. Reserving matching space at the bottom of the content column keeps the bar floating over empty margin instead of over real controls, for every route this base layout renders (:has() needs no markup change and no second {% if is_admin() %} in base.html.twig, which AdminModeContractTest::testAdminModeBarAndScriptStayInsideOneUnbrokenIsAdminBlock pins to exactly one occurrence). */ body:has(.admin-mode-bar) main.shell { padding-bottom: 7rem; } .admin-mode-bar { position: fixed; right: 1rem; bottom: 1rem; z-index: 40; display: flex; flex-direction: column; gap: .5rem; align-items: flex-end; } .admin-mode-toggle { padding: .55rem 1rem; color: var(--paper); font: bold .78rem/1 Arial, sans-serif; letter-spacing: .04em; background: var(--ink); border: 1px solid var(--ink); border-radius: .5rem; box-shadow: 0 .3rem .8rem rgba(0, 0, 0, .2); cursor: pointer; } .view-as-user-form { margin: 0; } .admin-mode-toggle[aria-pressed="false"] { color: var(--ink); background: var(--paper); border-color: var(--line); } .admin-mode-toggle:hover { color: var(--paper); background: var(--accent); border-color: var(--accent); } .admin-mode-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .admin-mode-link { padding: .5rem .9rem; color: var(--ink); font: .78rem/1.2 Arial, sans-serif; text-decoration: none; background: var(--paper); border: 1px solid var(--line); border-radius: .5rem; box-shadow: 0 .3rem .8rem rgba(0, 0, 0, .2); } .admin-mode-link:hover, .admin-mode-link:focus-visible { color: var(--paper); background: var(--ink); border-color: var(--ink); text-decoration: none; } /* The floating bar is a two-mode switch at every width. Admin mode: "Настройки" + "Как пользователь"; view-as-user mode: only "Вернуться в админ-режим". Every other admin link stays reachable from /admin/settings. The link is also .admin-only, whose `display: revert` (0,2,1) would drop the flex centering, so its selector carries one more class (0,3,0). */ .admin-mode-bar .admin-mode-link.admin-only, .admin-mode-bar .admin-view-as-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding-block: 0; padding-inline: 1.1rem; font-size: .85rem; line-height: 1; } @media (prefers-reduced-motion: reduce) { .admin-mode-bar * { transition: none !important; } } body[data-admin-mode="on"] .film-card { display: flex; flex-direction: column; } body[data-admin-mode="on"] .film-card .film-card-link { height: auto; flex: 1; } body[data-admin-mode="on"] .film-links-edit-forms { display: contents; } body[data-admin-mode="on"] .film-card-admin { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-left: auto; } /* Fail-safe standalone rendering (is_admin() true but userMarks/user_context wasn't wired for this render path -- templates/catalog/index.html.twig's {% elseif is_admin() %} branch): here .film-card-admin is its own full-width row directly under .film-card, not an item inside the status/rating widget, so the shared margin-left:auto above would instead shrink-and-right-align the whole block against .film-card's column layout. Reset it and restore the original border-top separator + padding, pushing only the delete button itself to the row's right edge -- exactly the pre-restore-admin-rating-ui look. */ body[data-admin-mode="on"] .film-card-admin--standalone { margin-left: 0; padding: .7rem 1rem .9rem; border-top: 1px solid var(--line); } .film-card-admin--standalone .film-card-delete { margin-left: auto; } /* Admin actions of a card sit under the shared status/rating widget (the admin has no separate status or rating UI any more); the delete/links buttons share one look. */ .film-card-delete:focus-visible, .film-card-links:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .film-card-delete { padding: .3rem .7rem; color: var(--ink); font: .72rem/1 Arial, sans-serif; background: transparent; border: 1px solid var(--line); border-radius: .3rem; cursor: pointer; } /* Navigates to /admin/films/{slug}/links (the general links editor) -- a real page, not an AJAX action, so it's a