/* Futscore visitor bookmarks - device-local quick-access. Loaded directly via html_css() (not the gulp bundle). Scoped to .fs-bm-* and .js-bookmark-btn so it never bleeds into other components. */ /* ===== home-page widget ===== */ .fs-bm-widget { margin: 22px auto 6px; } .fs-bm-widget[hidden] { display: none; } .fs-bm-widget__head { display: flex; align-items: center; margin-bottom: 12px; } .fs-bm-widget__title { font-size: 18px; font-weight: 700; color: #1a1a2e; letter-spacing: .2px; } .fs-bm-widget__title i { color: #d71149; margin-right: 8px; } /* horizontal strip - mirrors the home .hm-card-scroll behaviour */ .fs-bm-track { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 10px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .fs-bm-track::-webkit-scrollbar { height: 6px; } .fs-bm-track::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .18); border-radius: 3px; } /* ===== card ===== */ .fs-bm-card { position: relative; flex: 0 0 152px; width: 152px; background: #fff; border: 1px solid #eef0f4; border-radius: 16px; padding: 16px 12px 14px; text-align: center; box-shadow: 0 2px 8px rgba(20, 20, 50, .06); transition: transform .18s ease, box-shadow .18s ease; overflow: hidden; } .fs-bm-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(20, 20, 50, .12); } /* Elegant staggered entrance, applied only on the widget's first reveal (the JS adds .fs-bm-card--in + a per-card animation-delay). `backwards` fill keeps each card invisible until its turn, then reverts to base styles so :hover lift still works. */ @keyframes fsBmCardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .fs-bm-card--in { animation: fsBmCardIn .45s cubic-bezier(.22, .61, .36, 1) backwards; } @media (prefers-reduced-motion: reduce) { .fs-bm-card--in { animation: none; } } /* stretched link covers the whole card; remove button sits above it */ .fs-bm-card__link { position: absolute; inset: 0; z-index: 1; } .fs-bm-card__remove { position: absolute; top: 6px; right: 6px; z-index: 2; width: 22px; height: 22px; line-height: 20px; padding: 0; border: none; border-radius: 50%; background: rgba(20, 20, 50, .08); color: #6b7a90; font-size: 15px; cursor: pointer; opacity: 0; transition: opacity .15s ease, background .15s ease, color .15s ease; } .fs-bm-card:hover .fs-bm-card__remove, .fs-bm-card__remove:focus { opacity: 1; } .fs-bm-card__remove:hover, .fs-bm-card__remove:focus { background: #d71149; color: #fff; outline: none; } /* drag handle - mirrors the remove button (top-left). touch-action:none so a drag from the grip reorders instead of scrolling the strip; the rest of the card keeps native touch scrolling. */ .fs-bm-card__grip { position: absolute; top: 6px; left: 6px; z-index: 2; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 6px; background: rgba(20, 20, 50, .08); color: #6b7a90; font-size: 11px; cursor: grab; opacity: 0; touch-action: none; transition: opacity .15s ease, background .15s ease, color .15s ease; } .fs-bm-card:hover .fs-bm-card__grip, .fs-bm-card__grip:focus { opacity: 1; } .fs-bm-card__grip:hover, .fs-bm-card__grip:focus { background: #1a1a2e; color: #fff; outline: none; } .fs-bm-card__grip:active { cursor: grabbing; } /* ===== drag-to-reorder states ===== The original card stays in the row as the placeholder gap (--ghost) while a fixed-position clone (--fallback), appended to , follows the cursor. The clone's position is driven by an inline transform set in JS every move, so this only styles its look. transition:none is critical - the base .fs-bm-card has `transition: transform .18s`, which would otherwise animate (and lag) the clone. */ /* the clone that flies under the cursor */ .fs-bm-card--fallback { transition: none !important; box-shadow: 0 18px 40px rgba(20, 20, 50, .28) !important; opacity: .98 !important; cursor: grabbing; } /* the placeholder gap left behind in the row: a clean dashed drop-slot (mirrors the CTA card's dashed look) rather than a faded duplicate of the dragged card, which otherwise reads as a confusing double image next to the flying clone. */ .fs-bm-card--ghost { background: #fdeaf0; border: 1.5px dashed #e3b9c8; box-shadow: none; transform: none; } .fs-bm-card--ghost > * { visibility: hidden; } /* the placeholder shouldn't lift on hover while it's acting as the drop-slot */ .fs-bm-card--ghost:hover { transform: none; } /* keep the grab cursor + no text selection across the page during a drag */ body.fs-bm-dragging, body.fs-bm-dragging * { cursor: grabbing !important; } body.fs-bm-dragging { user-select: none; } .fs-bm-card__thumb { display: flex; align-items: center; justify-content: center; gap: 4px; height: 60px; margin-bottom: 10px; } .fs-bm-card__thumb img { max-width: 56px; max-height: 56px; object-fit: contain; } /* people get a round, cropped portrait */ .fs-bm-card--player .fs-bm-card__thumb img, .fs-bm-card--staff .fs-bm-card__thumb img, .fs-bm-card--official .fs-bm-card__thumb img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; } .fs-bm-card__icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #f3f5f9; color: #9aa6b8; font-size: 22px; } .fs-bm-card__chip { display: inline-block; margin-bottom: 6px; padding: 1px 9px; border-radius: 999px; background: #f3f5f9; color: #6b7a90; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; } .fs-bm-card__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #1a1a2e; font-size: 13px; font-weight: 600; line-height: 1.3; min-height: 34px; } /* ===== discovery fill: trailing ghost "Jelajahi" CTA card ===== Grows to absorb the leftover row width so a sparse 1-2 bookmark set fills the strip instead of trailing off into dead space; on a full (overflowing) row flex-grow has no free space to claim, so it keeps its 152px basis and scrolls. */ .fs-bm-card--cta { flex: 1 0 152px; width: auto; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; background: transparent; border: 1.5px dashed #e3b9c8; box-shadow: none; } .fs-bm-card--cta:hover { background: #fff5f8; border-color: #d71149; box-shadow: none; } .fs-bm-card__cta-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #fdeaf0; color: #d71149; font-size: 18px; } .fs-bm-card__cta-label { color: #d71149; font-size: 13px; font-weight: 700; line-height: 1.25; text-align: center; } /* ===== detail-page toggle button ===== */ /* Base look for heroes WITHOUT a styled .btn cluster (e.g. the match page). Dark heroes (.ev-hero__actions/.td-hero__share) restyle .btn at higher specificity, so this base only shows where there is no cluster. */ .js-bookmark-btn { border: 1px solid rgba(0, 0, 0, .14); background: #fff; color: #d71149; } /* Active (saved) state must win inside any hero, hence !important - the dark-hero clusters set .btn backgrounds inline-after this file in document order. */ .js-bookmark-btn.is-bookmarked { background: #d71149 !important; border-color: #d71149 !important; color: #fff !important; } .js-bookmark-btn .fa-solid.fa-bookmark { color: inherit; } .bm-pop { animation: fsBmPop .28s ease; } @keyframes fsBmPop { 0% { transform: scale(1); } 45% { transform: scale(1.3); } 100% { transform: scale(1); } } @media (max-width: 768px) { .fs-bm-card { flex-basis: 136px; width: 136px; } .fs-bm-card__remove, .fs-bm-card__grip { opacity: 1; } }