User:Kai/common.css: Difference between revisionsGive feedback
No edit summary |
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 { | |||
max-width: 1100px; | |||
margin: 20px auto; | |||
background: #14171d; | |||
color: #e2e8f0; | |||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; | |||
border-radius: 12px; | |||
padding: 24px; | |||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); | |||
border: 1px solid #2d3748; | |||
} | |||
.tlc-header { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
margin-bottom: 20px; | |||
flex-wrap: wrap; | |||
gap: 16px; | |||
} | |||
.tlc-tabs { | |||
display: flex; | |||
background: #1a202c; | |||
padding: 4px; | |||
border-radius: 8px; | |||
border: 1px solid #2d3748; | |||
} | |||
.tlc-tab-btn { | |||
background: transparent; | |||
color: #a0aec0; | |||
border: none; | |||
padding: 8px 18px; | |||
font-size: 14px; | |||
font-weight: 600; | |||
border-radius: 6px; | |||
cursor: pointer; | |||
transition: all 0.2s ease; | |||
} | |||
.tlc-tab-btn:hover { | |||
color: #ffffff; | |||
} | |||
.tlc-tab-btn.active { | |||
background: #3182ce; | |||
color: #ffffff; | |||
box-shadow: 0 2px 8px rgba(49, 130, 206, 0.4); | |||
} | |||
.tlc-actions { | |||
display: flex; | |||
align-items: center; | |||
gap: 10px; | |||
} | |||
.tlc-search-input { | |||
background: #1a202c; | |||
border: 1px solid #4a5568; | |||
color: #fff; | |||
padding: 8px 14px; | |||
border-radius: 6px; | |||
font-size: 14px; | |||
outline: none; | |||
transition: border-color 0.2s; | |||
} | |||
.tlc-search-input:focus { | |||
border-color: #63b3ed; | |||
} | |||
.tlc-btn { | |||
padding: 8px 16px; | |||
border-radius: 6px; | |||
font-size: 14px; | |||
font-weight: 600; | |||
border: none; | |||
cursor: pointer; | |||
transition: transform 0.1s ease, filter 0.2s ease; | |||
} | |||
.tlc-btn:active { | |||
transform: scale(0.97); | |||
} | |||
.tlc-btn-primary { | |||
background: #38a169; | |||
color: white; | |||
} | |||
.tlc-btn-primary:hover { | |||
filter: brightness(1.1); | |||
} | |||
.tlc-btn-secondary { | |||
background: #4a5568; | |||
color: white; | |||
} | |||
.tlc-btn-secondary:hover { | |||
background: #718096; | |||
} | |||
.tlc-board { | |||
display: flex; | |||
flex-direction: column; | |||
gap: 8px; | |||
margin-bottom: 24px; | |||
} | |||
.tlc-tier-row { | |||
display: flex; | |||
min-height: 80px; | |||
background: #1a202c; | |||
border-radius: 8px; | |||
overflow: hidden; | |||
border: 1px solid #2d3748; | |||
} | |||
.tlc-tier-label { | |||
width: 75px; | |||
min-width: 75px; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
font-size: 26px; | |||
font-weight: 800; | |||
color: #111; | |||
user-select: none; | |||
} | |||
.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-e { background: #bf7fff; color: #1a202c; } | |||
.tier-f { background: #ff7fff; color: #1a202c; } | |||
.tlc-tier-dropzone { | |||
flex: 1; | |||
display: flex; | |||
flex-wrap: wrap; | |||
align-content: flex-start; | |||
gap: 8px; | |||
padding: 8px; | |||
min-height: 80px; | |||
transition: background-color 0.2s ease, border-color 0.2s ease; | |||
} | |||
.tlc-tier-dropzone.drag-over { | |||
background-color: rgba(99, 179, 237, 0.15) !important; | |||
outline: 2px dashed #63b3ed; | |||
outline-offset: -2px; | |||
} | |||
.tlc-pool-container { | |||
background: #1a202c; | |||
border-radius: 8px; | |||
border: 1px solid #2d3748; | |||
padding: 16px; | |||
} | |||
.tlc-pool-header h3 { | |||
margin: 0 0 12px 0; | |||
font-size: 16px; | |||
color: #cbd5e0; | |||
} | |||
.tlc-card-pool { | |||
min-height: 120px; | |||
background: #14171d; | |||
border-radius: 6px; | |||
border: 1px dashed #4a5568; | |||
} | |||
.tlc-card-pool.hidden { | |||
display: none !important; | |||
} | |||
.hero-card-container, .hero-roster-card, .itembox, .tlc-card { | |||
cursor: grab !important; | |||
user-select: none; | |||
transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; | |||
} | |||
.hero-card-container:active, .hero-roster-card:active, .itembox:active, .tlc-card:active { | |||
cursor: grabbing !important; | |||
} | |||
.tlc-card-dragging { | |||
opacity: 0.4 !important; | |||
transform: scale(0.95); | |||
} | |||
.tlc-card-hidden { | |||
display: none !important; | |||
} | |||
.tlc-modal { | |||
position: fixed; | |||
top: 0; | |||
left: 0; | |||
width: 100vw; | |||
height: 100vh; | |||
background: rgba(0, 0, 0, 0.7); | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
z-index: 9999; | |||
} | |||
.tlc-modal.hidden { | |||
display: none; | |||
} | |||
.tlc-modal-content { | |||
background: #1a202c; | |||
border: 1px solid #4a5568; | |||
padding: 24px; | |||
border-radius: 10px; | |||
width: 90%; | |||
max-width: 550px; | |||
position: relative; | |||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8); | |||
} | |||
.tlc-modal-close { | |||
position: absolute; | |||
right: 16px; | |||
top: 12px; | |||
font-size: 24px; | |||
cursor: pointer; | |||
color: #a0aec0; | |||
} | |||
.tlc-modal-close:hover { | |||
color: #fff; | |||
} | |||
#tlc-export-output { | |||
width: 100%; | |||
background: #0f141c; | |||
border: 1px solid #2d3748; | |||
color: #63b3ed; | |||
font-family: monospace; | |||
padding: 10px; | |||
border-radius: 6px; | |||
margin: 12px 0; | |||
resize: vertical; | |||
} | } | ||