/* Tagging component styles (used by tag_card and any page that shows tags) */ .tag-input { padding: 10px; margin-right: 5px; border-radius: 8px; border: 1px solid #ccc; background: #ffffff; color: #1f2937; } [data-theme="dark"] .tag-input { background: #0f1a30; color: #e5e7eb; border-color: #1f2937; } .apply-tag-btn { background-color: #28a745; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; } .apply-tag-btn:hover { background-color: #218838; } .tag-list { list-style: none; padding: 0; margin: 0; } .tag-list li { padding: 6px 10px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background-color 0.15s; border-radius: 0; } .tag-list li:last-child { border-bottom: none; } [data-theme="dark"] .tag-list li:hover { background-color: #0f1a30; } .tag-list li:hover { background-color: var(--hover); } .applied-tags { margin-top: 20px; } .applied-tags span.tag { display: inline-block; padding: 5px 10px; border-radius: 15px; margin: 5px; font-size: 14px; cursor: pointer; transition: background-color 0.15s, color 0.15s; color: white; background-color: lightgrey; } .applied-tags span.tag.tag-applied { background-color: #17a2b8; } .applied-tags span.tag.tag-unapplied { background-color: #aaaaaa; } .applied-tags .tag.tag-predicted { background-color: #e09c44 !important; color: #fff !important; } .applied-tags .tag.tag-predicted:hover { background-color: #56bb91 !important; color: #fff !important; } .applied-tags span.tag.tag-unapplied:hover, .applied-tags span.tag.tag-predicted:hover { background-color: #56bb91; } .applied-tags span.tag.tag-applied:hover { background-color: lightcoral; } /* Category borders */ .applied-tags span.tag[data-category="mapping_genre"] { border: 2px solid #b1e9b0; /* turquoise thin */ } .applied-tags span.tag[data-category="pattern_type"] { border: 2px solid #ffca92; /* dark red */ } .applied-tags span.tag[data-category="metadata"] { border: 2px solid #ff89bc; /* dark grey */ } .applied-tags span.tag[data-category="other"] { border: none; } /* Tooltip */ .tooltip { position: absolute; background-color: rgba(60, 60, 60, 0.9); color: #fff; padding: 6px 8px 10px 8px; border-radius: 4px; white-space: nowrap; z-index: 1000; font-size: 14px; pointer-events: none; opacity: 0; transition: opacity 0.2s ease-in-out; } .description-author { position: absolute; background-color: rgba(60, 60, 60, 0.0); color: #fff; padding: 0 0; border-radius: 4px; opacity: 0; transition: opacity 0.2s ease-in-out; z-index: 1001; pointer-events: none; font-size: 14px; font-style: italic; } /* Alternating card backgrounds for lists */ .tag-card { background: var(--card-odd); border-radius: 10px; } .tag-card--alt { background: var(--card-even); } /* Ensure tag suggestions overlay other content like the graph */ .beatmap-card-wrapper { position: relative; z-index: 3; } .tag-input-container { position: relative; } .tag-input-container.portal-open > .tag-list { display: none !important; } /* Keep embedded list hidden when input not focused to avoid duplicate underlay */ .tag-input-container:not(:focus-within) > .tag-list { display: none; } .tag-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 12; max-height: 240px; overflow-y: auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 16px var(--shadow-color); color: var(--text-on-surface); } /* When portaled to for overlay safety */ .tag-list.tag-portal { position: fixed; left: 0; top: 0; right: auto; z-index: 5000; max-height: 300px; overflow-y: auto; background: var(--surface-2); color: var(--text-on-surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 16px var(--shadow-color); } /* Ensure dropdown isn’t hidden behind subsequent cards on search results */ .page-search-results .beatmap-card-wrapper { z-index: 1; } .page-search-results .beatmap-card-wrapper:focus-within, .page-search-results .beatmap-card-wrapper:hover { z-index: 999; }