) in 9anime's positions ─────────────────────
9anime centred a leaderboard under "Recently Updated" (its "pizza-x" box,
800px) and could put a 400px box atop the sidebar; the admin's snippet
decides its own size inside. Nothing is drawn when a slot is empty. */
.ak-ad.na-ad-x { margin: 2rem auto; width: calc(100% - 32px); max-width: 800px; text-align: center; }
.ak-ad.na-ad-y { margin: 0 auto 20px; max-width: 400px; text-align: center; }
.ak-ad.ak-ad--footer { margin: 2rem auto; text-align: center; }
/* ── Footer extras ────────────────────────────────────────────────────────
Footer friends (Admin › Settings) under the disclaimer; the Discord button
(9anime had twitter / telegram / reddit only). */
#footer .na-friends { margin-top: 8px; }
#footer .na-friends a { color: #888; }
#footer .na-friends a:hover { color: #fff; }
.socials-group .scg-list .item .sc-social-button.na-dsc-btn { background: #5865f2; color: #fff; }
/* ── Share links (no ShareThis property set) ─────────────────────────────
9anime's `.show-share` row held ShareThis inline buttons; without a
property the CMS draws plain round links in the same row. */
.na-share-links { display: flex; flex-wrap: wrap; gap: 8px; }
.na-share-link { display: inline-block; width: 36px; height: 36px; line-height: 36px; border-radius: 4px; text-align: center; font-size: 16px; color: #fff !important; }
.na-share-link:hover { opacity: .85; }
.na-share-facebook { background: #4267b2; }
.na-share-twitter { background: #6f85d5; }
.na-share-reddit { background: #ff3c1f; }
.na-share-whatsapp { background: #25d366; }
/* ── Loaders ──────────────────────────────────────────────────────────────
9anime drew every loading state the same way: styles.css's three
bouncing purple dots (18px, #5a2e98, sk-bouncedelay 1.4s) centred inside a
`.loading-relative` box (block, min-height 50px):
The gap between the dots is the whitespace between the divs, so the box is
pinned to 16px Poppins wherever the CMS puts it (some sit in 13px blocks);
nowrap keeps an absolutely placed box from wrapping in a narrow button.
Markup the CMS engine injects:
- main.js (player, AjaxForm) and comments.js (edit composer) write an
empty ``; resources/js/nineanime/app.js fills every
empty one with the three dots, so it is the same markup.
- main.js AjaxForm appends that `.loading` as the form's last child and
shows it while the request is out: drawn here as a 50px row under the
submit button. */
.loading {
font-family: Poppins, Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: normal;
word-spacing: normal;
white-space: nowrap;
text-align: left;
}
form > .loading {
position: relative;
top: auto;
left: auto;
transform: none;
width: 100%;
height: 50px;
padding-top: 12.5px;
text-align: center;
}
/* A busy button: where the CMS has a small inline action with no room for a
row, the same dots cover the button's label instead
(`.loading-relative.na-btn-loading` inside the button). */
.na-btn-loading { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto; min-height: 0; }
button:has(> .na-btn-loading:not(.hidden):not([hidden])) { position: relative; color: transparent !important; }
button:has(> .na-btn-loading:not(.hidden):not([hidden])) > :not(.na-btn-loading) { visibility: hidden; }
/* ── Dropdown plugin (main.js) ────────────────────────────────────────────
On touch devices outside `.navbar-nav` the plugin appends a
`.dropdown-backdrop` to the open menu's parent; it must sit under the menu
and catch the outside tap. */
.dropdown-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 990; }
/* ── Quick filter pills (partials/nineanime/sidebar-filter) ──────────────
The pill shows the ticked value ("Slice of Life", "3 selected"); 9anime's
sidebar pills were one line, so there a long value is cut rather than
wrapping the two-column grid. The listing box wraps, as 9anime's did. */
.block_area_sidebar .sidebar-filter .item .btn-filter { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The CMS offers every year since 1980 (9anime listed 25): the Year menu
scrolls instead of running off the screen. */
.sidebar-filter .dropdown-menu.na-menu-scroll { max-height: 320px; overflow-y: auto; }
/* Phones (≤480px): 9anime's bar holds the menu, the logo, the search button
and one 40px account button — there is no room for the CMS bell beside
them without wrapping the header. The bell is hidden there (its menu is
still in the page for notifications-bell.js; /member/notifications is in
the account menu) and an unread dot marks the account button instead. */
@media screen and (max-width: 480px) {
#user .na-noti { display: none; }
#user .header_right-user.logged .dropdown { position: relative; }
#user .top-profile:has(.na-noti-btn.active) .header_right-user.logged .dropdown::after {
content: ""; position: absolute; top: 0; right: 0; z-index: 2; width: 10px; height: 10px;
border-radius: 50%; background: #ff3c1f; box-shadow: 0 0 0 2px #0e0e0e; pointer-events: none;
}
}