User:Kai/common.css: Difference between revisions

MCP (via update-page on MediaWiki MCP Server)
MCP (via update-page on MediaWiki MCP Server)
Line 53: Line 53:
   max-width: 1100px;
   max-width: 1100px;
   margin: 20px auto;
   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;
   background: transparent;
   color: #a0aec0;
   color: var(--color-base, #e2e8f0);
  border: none;
   font-family: inherit;
  padding: 8px 18px;
   padding: 0;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
  display: inline-block;
}
 
.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;
  min-width: 160px;
  display: inline-block;
  transition: border-color 0.2s;
}
 
.tlc-search-input:empty:before {
  content: attr(data-placeholder);
  color: #a0aec0;
}
 
.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;
  user-select: none;
  display: inline-block;
  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;
}
}


Line 175: Line 69:
   display: flex;
   display: flex;
   min-height: 80px;
   min-height: 80px;
   background: #1a202c;
   background: var(--background-color-base, #1a202c);
   border-radius: 8px;
   border-radius: 8px;
   overflow: hidden;
   overflow: hidden;
   border: 1px solid #2d3748;
   border: 1px solid var(--border-color-base, #2d3748);
}
}


Line 193: Line 87:
}
}


/* Tier Rank Colors */
.tier-s { background: #ff7f7f; color: #1a202c; }
.tier-s { background: #ff7f7f; color: #1a202c; }
.tier-a { background: #ffbf7f; color: #1a202c; }
.tier-a { background: #ffbf7f; color: #1a202c; }
Line 214: Line 109:
.tlc-tier-dropzone.drag-over {
.tlc-tier-dropzone.drag-over {
   background-color: rgba(99, 179, 237, 0.15) !important;
   background-color: rgba(99, 179, 237, 0.15) !important;
   outline: 2px dashed #63b3ed;
   outline: 2px dashed var(--color-progressbar-primary, #63b3ed);
   outline-offset: -2px;
   outline-offset: -2px;
}
}


.tlc-pool-container {
.tlc-pool-container {
   background: #1a202c;
   background: transparent;
   border-radius: 8px;
   padding: 0;
   border: 1px solid #2d3748;
   margin-top: 16px;
  padding: 16px;
}
}


Line 228: Line 122:
   margin: 0 0 12px 0;
   margin: 0 0 12px 0;
   font-size: 16px;
   font-size: 16px;
   color: #cbd5e0;
   color: var(--color-base, #cbd5e0);
}
}


.tlc-card-pool {
.tlc-card-pool {
   min-height: 120px;
   min-height: 120px;
   background: #14171d;
   background: transparent;
   border-radius: 6px;
   border-radius: 6px;
   border: 1px dashed #4a5568;
   border: 1px dashed var(--border-color-base, #4a5568);
}
 
.tlc-card-pool.hidden {
  display: none !important;
}
}


.HeroCard, .hero-card-container, .hero-roster-card, .itembox, .tlc-card {
.HeroCard, .hero-card-container, .hero-roster-card, .tlc-card {
   cursor: grab !important;
   cursor: grab !important;
   user-select: none;
   user-select: none;
Line 249: Line 139:
}
}


.HeroCard:active, .hero-card-container:active, .hero-roster-card:active, .itembox:active, .tlc-card:active {
.HeroCard:active, .hero-card-container:active, .hero-roster-card:active, .tlc-card:active {
   cursor: grabbing !important;
   cursor: grabbing !important;
}
}
Line 256: Line 146:
   opacity: 0.4 !important;
   opacity: 0.4 !important;
   transform: scale(0.95);
   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;
}
}