User:Kai/common.css: Difference between revisionsGive feedback
MCP (via update-page on MediaWiki MCP Server) Tag: Manual revert |
MCP (via update-page on MediaWiki MCP Server) |
||
| Line 47: | Line 47: | ||
opacity: 0.3; /* Slightly more visible so users can still read/click them */ | opacity: 0.3; /* Slightly more visible so users can still read/click them */ | ||
filter: grayscale(100%); | filter: grayscale(100%); | ||
} | |||
/* Tier List Creator Styles */ | |||
.tier-list-creator-wrapper { | |||
margin: 0; | |||
padding: 0; | |||
width: 100%; | |||
background: transparent; | |||
color: var(--color-base, #e2e8f0); | |||
font-family: inherit; | |||
} | |||
.tlc-header { | |||
display: flex; | |||
justify-content: flex-start; | |||
align-items: center; | |||
margin-bottom: 8px; | |||
} | |||
.tlc-btn { | |||
padding: 5px 12px; | |||
border-radius: 4px; | |||
font-size: 12px; | |||
font-weight: 600; | |||
border: none !important; | |||
cursor: pointer; | |||
user-select: none; | |||
display: inline-block; | |||
transition: filter 0.2s ease; | |||
} | |||
.tlc-btn:active { | |||
transform: none !important; | |||
} | |||
.tlc-btn-secondary { | |||
background: var(--background-color-interactive, #2d3748); | |||
color: var(--color-base, #fff); | |||
border: none !important; | |||
} | |||
.tlc-btn-secondary:hover { | |||
filter: brightness(1.2); | |||
} | |||
.tlc-board { | |||
display: flex; | |||
flex-direction: column; | |||
gap: 4px; | |||
margin-bottom: 12px; | |||
} | |||
.tlc-tier-row { | |||
display: flex; | |||
min-height: 55px; | |||
border-radius: 6px; | |||
overflow: hidden; | |||
border: none !important; | |||
} | |||
/* Opaque Tier Row Backgrounds */ | |||
.tlc-tier-row[data-tier="S"] { background: rgba(255, 127, 127, 0.18); } | |||
.tlc-tier-row[data-tier="A"] { background: rgba(255, 191, 127, 0.18); } | |||
.tlc-tier-row[data-tier="B"] { background: rgba(255, 255, 127, 0.18); } | |||
.tlc-tier-row[data-tier="C"] { background: rgba(127, 255, 127, 0.18); } | |||
.tlc-tier-row[data-tier="D"] { background: rgba(127, 191, 255, 0.18); } | |||
.tlc-tier-row[data-tier="F"] { background: rgba(255, 127, 255, 0.18); } | |||
.tlc-tier-label { | |||
width: 50px; | |||
min-width: 50px; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
font-size: 20px; | |||
font-weight: 800; | |||
color: #111; | |||
user-select: none; | |||
} | |||
/* Tier Rank Badge Colors */ | |||
.tier-s { background: #ff7f7f; color: #1a202c; } | |||
.tier-a { background: #ffbf7f; color: #1a202c; } | |||
.tier-b { background: #ffff7f; color: #1a202c; } | |||
.tier-c { background: #7fff7f; color: #1a202c; } | |||
.tier-d { background: #7fbfff; color: #1a202c; } | |||
.tier-f { background: #ff7fff; color: #1a202c; } | |||
.tlc-tier-dropzone { | |||
flex: 1; | |||
display: flex; | |||
flex-wrap: wrap; | |||
align-content: flex-start; | |||
gap: 4px; | |||
padding: 4px; | |||
min-height: 55px; | |||
transition: background-color 0.2s ease, border-color 0.2s ease; | |||
} | |||
.tlc-tier-dropzone.drag-over { | |||
background-color: rgba(99, 179, 237, 0.25) !important; | |||
outline: 2px dashed var(--color-progressbar-primary, #63b3ed); | |||
outline-offset: -2px; | |||
} | |||
.tlc-pool-container { | |||
background: transparent; | |||
padding: 0; | |||
margin-top: 8px; | |||
} | |||
.tlc-pool-header h3 { | |||
margin: 0 0 6px 0; | |||
font-size: 14px; | |||
color: var(--color-base, #cbd5e0); | |||
} | |||
.tlc-card-pool { | |||
min-height: 90px; | |||
background: transparent; | |||
border-radius: 6px; | |||
border: none !important; | |||
} | |||
.HeroCard, .hero-card-container, .hero-roster-card, .tlc-card { | |||
cursor: pointer !important; | |||
user-select: none; | |||
transition: transform 0.15s ease, opacity 0.15s ease; | |||
display: inline-block; | |||
position: relative; | |||
} | |||
.HeroCard a, .HeroCard .hero-link-wrapper, .hero-card-container a, .hero-roster-card a { | |||
pointer-events: none !important; | |||
cursor: pointer !important; | |||
} | |||
.HeroCard:active, .hero-card-container:active, .hero-roster-card:active, .tlc-card:active { | |||
cursor: grabbing !important; | |||
} | |||
.tlc-card-dragging { | |||
opacity: 0.4 !important; | |||
transform: scale(0.95); | |||
} | |||
/* Subtle selection scale only, no outline, border, or glow */ | |||
.tlc-card-selected { | |||
outline: none !important; | |||
border: none !important; | |||
box-shadow: none !important; | |||
transform: scale(1.04) !important; | |||
z-index: 10; | |||
} | } | ||