186 lines
14 KiB
CSS
186 lines
14 KiB
CSS
/* ═══════════════════════════════════════════════════════════════════════
|
|
Galaxy Strike Online — Table & Ship Styles (mobile-first)
|
|
═══════════════════════════════════════════════════════════════════════ */
|
|
|
|
/* ── Base table styles ───────────────────────────────────────────────── */
|
|
.dungeon-table,.skills-table,.base-rooms-table,.base-upgrades-table,
|
|
.ship-gallery-table,.starbase-management-table,.starbase-shop-table,
|
|
.quests-table,.inventory-table,.shop-table {
|
|
width:100%;border-collapse:collapse;background:var(--card-bg);
|
|
border-radius:8px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.25);
|
|
margin:8px 0;font-size:.8rem;
|
|
}
|
|
.dungeon-table th,.skills-table th,.base-rooms-table th,.base-upgrades-table th,
|
|
.ship-gallery-table th,.starbase-management-table th,.starbase-shop-table th,
|
|
.quests-table th,.inventory-table th,.shop-table th {
|
|
background:var(--gradient-primary);color:var(--text-primary);
|
|
padding:10px 12px;text-align:left;font-weight:600;font-size:.78rem;
|
|
border-bottom:2px solid rgba(255,255,255,.1);
|
|
}
|
|
.dungeon-table td,.skills-table td,.base-rooms-table td,.base-upgrades-table td,
|
|
.ship-gallery-table td,.starbase-management-table td,.starbase-shop-table td,
|
|
.quests-table td,.inventory-table td,.shop-table td {
|
|
padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.07);
|
|
color:#e0e0e0;font-size:.78rem;
|
|
}
|
|
.dungeon-table tr:hover,.skills-table tr:hover,.base-rooms-table tr:hover,
|
|
.base-upgrades-table tr:hover,.ship-gallery-table tr:hover,
|
|
.starbase-management-table tr:hover,.starbase-shop-table tr:hover,
|
|
.quests-table tr:hover,.inventory-table tr:hover,.shop-table tr:hover {
|
|
background:rgba(102,126,234,.1);transition:background .25s;
|
|
}
|
|
|
|
/* Difficulty colors */
|
|
.dungeon-table .difficulty-easy{color:#00ff00}
|
|
.dungeon-table .difficulty-medium{color:#ffff00}
|
|
.dungeon-table .difficulty-hard{color:#ff9900}
|
|
.dungeon-table .difficulty-extreme{color:#ff0000}
|
|
|
|
/* Skills table */
|
|
.skills-table .skill-level{font-weight:bold;color:#667eea}
|
|
.skills-table .skill-progress{width:80px;height:6px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden}
|
|
.skills-table .progress-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);transition:width .3s}
|
|
|
|
/* Base tables */
|
|
.base-rooms-table .room-status-active{color:#00ff00}
|
|
.base-rooms-table .room-status-inactive{color:#ff0000}
|
|
.base-rooms-table .room-status-upgrading{color:#ffff00}
|
|
.base-upgrades-table .upgrade-level{font-weight:bold;color:#667eea}
|
|
|
|
/* Action buttons in tables */
|
|
.dungeon-table .btn-action,.skills-table .btn-action,.base-rooms-table .btn-action,
|
|
.base-upgrades-table .btn-action,.ship-gallery-table .btn-action,
|
|
.starbase-management-table .btn-action,.starbase-shop-table .btn-action,
|
|
.quests-table .btn-action,.inventory-table .btn-action,.shop-table .btn-action {
|
|
padding:5px 10px;border:none;border-radius:4px;cursor:pointer;
|
|
font-size:.72rem;font-weight:600;transition:all .25s;text-transform:uppercase;
|
|
min-height:32px;
|
|
}
|
|
.btn-action.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}
|
|
.btn-action.btn-primary:hover{background:linear-gradient(135deg,#764ba2,#667eea);transform:translateY(-1px)}
|
|
.btn-action.btn-secondary{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2)}
|
|
.btn-action.btn-secondary:hover{background:rgba(255,255,255,.2);transform:translateY(-1px)}
|
|
.btn-action.btn-success{background:linear-gradient(135deg,#00ff00,#00cc00);color:#fff}
|
|
.btn-action.btn-danger{background:linear-gradient(135deg,#ff0000,#cc0000);color:#fff}
|
|
|
|
/* Specialty table cells */
|
|
.starbase-management-table .starbase-level{font-weight:bold;color:#667eea}
|
|
.starbase-shop-table .starbase-cost{font-weight:bold;color:#ffd700}
|
|
.quests-table .quest-type-main{color:#667eea} .quests-table .quest-type-daily{color:#00ff00}
|
|
.quests-table .quest-type-procedural{color:#ff9900} .quests-table .quest-type-completed{color:#888}
|
|
.quests-table .quest-type-failed{color:#ff0000}
|
|
.quests-table .quest-progress,.inventory-table .item-stats{font-size:.72rem}
|
|
.inventory-table .item-rarity-common{color:#888} .inventory-table .item-rarity-uncommon{color:#00ff00}
|
|
.inventory-table .item-rarity-rare{color:#0088ff} .inventory-table .item-rarity-epic{color:#8833ff}
|
|
.inventory-table .item-rarity-legendary{color:#ff8800}
|
|
.shop-table .item-price{font-weight:bold;color:#ffd700}
|
|
.shop-table .item-description{font-size:.72rem;color:#ccc;max-width:180px}
|
|
|
|
/* ── Ship grid ───────────────────────────────────────────────────────── */
|
|
.ship-grid{display:grid;grid-template-columns:1fr;gap:12px;padding:12px 0}
|
|
.ship-card{
|
|
background:var(--card-bg);border-radius:12px;padding:12px;
|
|
border:2px solid var(--primary-color);box-shadow:0 4px 20px rgba(0,0,0,.3);
|
|
transition:all .25s;position:relative;overflow:hidden;
|
|
}
|
|
.ship-card:hover{transform:translateY(-4px);box-shadow:0 8px 28px rgba(0,212,255,.35)}
|
|
.ship-card.active{border-color:var(--success-color);box-shadow:0 6px 22px rgba(0,255,136,.18)}
|
|
.ship-card.active::before{content:"ACTIVE";position:absolute;top:8px;right:8px;background:var(--gradient-secondary);color:var(--text-primary);padding:3px 7px;border-radius:4px;font-size:9px;font-weight:bold;text-transform:uppercase;letter-spacing:.5px}
|
|
|
|
.ship-card-header{display:flex;flex-direction:row;align-items:center;gap:10px;margin-bottom:10px}
|
|
.ship-card-image{width:70px;height:70px;border-radius:8px;object-fit:cover;border:2px solid var(--primary-color);flex-shrink:0}
|
|
.ship-card-info{flex:1;min-width:0}
|
|
.ship-card-rarity{color:var(--text-secondary);font-size:.72rem;font-weight:bold;text-transform:uppercase;letter-spacing:.5px;padding:3px 7px;border-radius:4px;background:var(--hover-bg);border:1px solid var(--border-color);display:inline-block}
|
|
.ship-card-rarity.common{color:#888;border-color:#888}
|
|
.ship-card-rarity.rare{color:var(--primary-color);border-color:var(--primary-color)}
|
|
.ship-card-rarity.epic{color:var(--accent-color);border-color:var(--accent-color)}
|
|
.ship-card-rarity.legendary{color:var(--warning-color);border-color:var(--warning-color)}
|
|
|
|
.ship-card-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}
|
|
.ship-card-stat{display:flex;justify-content:space-between;align-items:center;padding:5px 8px;background:rgba(255,255,255,.04);border-radius:4px;border:1px solid rgba(255,255,255,.08)}
|
|
.ship-card-stat .stat-label{color:var(--text-muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.5px}
|
|
.ship-card-stat .stat-value{color:var(--text-secondary);font-weight:bold;font-size:.72rem}
|
|
.ship-card-stat .stat-value.health{color:var(--success-color)} .ship-card-stat .stat-value.attack{color:var(--warning-color)}
|
|
.ship-card-stat .stat-value.defense{color:var(--accent-color)} .ship-card-stat .stat-value.speed{color:var(--secondary-color)}
|
|
|
|
.ship-card-actions{display:flex;gap:8px}
|
|
.ship-card-actions .btn-action{flex:1;padding:7px 10px;border:none;border-radius:6px;cursor:pointer;font-size:.72rem;font-weight:600;transition:all .25s;text-transform:uppercase;min-height:36px;-webkit-tap-highlight-color:transparent}
|
|
.btn-action.btn-switch{background:var(--gradient-primary);color:var(--text-primary)}
|
|
.btn-action.btn-switch:hover{background:var(--gradient-secondary);transform:translateY(-2px)}
|
|
.btn-action.btn-switch:disabled{background:var(--text-muted);cursor:not-allowed;transform:none}
|
|
.btn-action.btn-upgrade,.btn-action.btn-repair{background:var(--gradient-secondary);color:var(--text-primary)}
|
|
.btn-action.btn-upgrade:hover,.btn-action.btn-repair:hover{background:var(--gradient-primary);transform:translateY(-2px)}
|
|
|
|
/* Ship layout (current ship + grid) */
|
|
.ship-layout{display:flex;flex-direction:column;gap:1rem;margin-top:.75rem}
|
|
.current-ship-section{background:var(--card-bg);border-radius:8px;padding:1rem;border:2px solid var(--primary-color)}
|
|
.ship-grid-section{flex:1;min-width:0}
|
|
.ship-grid-section h4,.current-ship-section h4{color:var(--primary-color);margin-bottom:.75rem;font-size:.92rem;text-transform:uppercase;letter-spacing:1px}
|
|
.current-ship-section h4{text-align:center}
|
|
.current-ship-display{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}
|
|
.current-ship-image img{width:100px;height:100px;object-fit:cover;border-radius:8px;border:2px solid var(--primary-color);box-shadow:0 4px 15px rgba(0,212,255,.3)}
|
|
.current-ship-details{flex:1;text-align:center;min-width:0}
|
|
.current-ship-details h5{color:var(--text-primary);margin-bottom:.75rem;font-size:1.1rem;font-weight:bold}
|
|
.current-ship-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
|
|
.ship-stat{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;background:var(--hover-bg);border-radius:4px;border:1px solid var(--border-color)}
|
|
.ship-stat .stat-label{color:var(--text-muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.5px}
|
|
.ship-stat .stat-value{color:var(--text-secondary);font-weight:bold;font-size:.82rem}
|
|
.ship-stat .stat-value.health{color:var(--success-color)} .ship-stat .stat-value.attack{color:var(--warning-color)}
|
|
.ship-stat .stat-value.defense{color:var(--accent-color)} .ship-stat .stat-value.speed{color:var(--secondary-color)}
|
|
.ship-table-section{margin-top:1.5rem}
|
|
.ship-table-section h4{color:#667eea;margin-bottom:.75rem;font-size:.92rem;text-transform:uppercase;letter-spacing:1px}
|
|
|
|
/* ── Console window ──────────────────────────────────────────────────── */
|
|
.console-window{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(580px,96vw);height:min(380px,70dvh);background:var(--bg-secondary);border:2px solid var(--primary-color);border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,.8);z-index:10000;display:none;flex-direction:column;font-family:'Courier New',monospace}
|
|
.console-header{background:var(--gradient-primary);color:var(--text-primary);padding:10px 15px;border-radius:6px 6px 0 0;display:flex;justify-content:space-between;align-items:center;font-weight:bold;font-size:13px}
|
|
.console-close{background:none;border:none;color:var(--text-primary);font-size:18px;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background .2s}
|
|
.console-close:hover{background:rgba(255,255,255,.2)}
|
|
.console-content{flex:1;display:flex;flex-direction:column;overflow:hidden}
|
|
.console-output{flex:1;padding:12px;overflow-y:auto;background:var(--bg-primary);color:var(--text-primary);font-size:12px;line-height:1.4;border-bottom:1px solid var(--border-color)}
|
|
.console-line{margin-bottom:4px;word-wrap:break-word}
|
|
.console-error{color:var(--error-color)} .console-success{color:var(--success-color)}
|
|
.console-warning{color:var(--warning-color)} .console-info{color:var(--primary-color)}
|
|
.console-input-container{padding:10px;background:var(--bg-secondary)}
|
|
.console-input{width:100%;background:var(--bg-primary);border:1px solid var(--border-color);color:var(--text-primary);padding:7px 11px;font-family:'Courier New',monospace;font-size:12px;border-radius:4px;outline:none}
|
|
.console-input:focus{border-color:var(--primary-color);box-shadow:0 0 0 2px rgba(0,212,255,.2)}
|
|
.console-input::placeholder{color:var(--text-muted)}
|
|
|
|
/* ══════════════════════════════════════════════════════════════════════
|
|
TABLET ≥ 640px
|
|
══════════════════════════════════════════════════════════════════════ */
|
|
@media(min-width:640px){
|
|
.ship-grid{grid-template-columns:repeat(2,1fr)}
|
|
.ship-layout{flex-direction:row}
|
|
.current-ship-section{flex:0 0 320px}
|
|
.current-ship-display{flex-direction:row;align-items:flex-start;text-align:left}
|
|
.current-ship-details{text-align:left}
|
|
.current-ship-details h5{text-align:left}
|
|
.current-ship-stats{grid-template-columns:1fr}
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════════════════════════
|
|
DESKTOP ≥ 1024px
|
|
══════════════════════════════════════════════════════════════════════ */
|
|
@media(min-width:1024px){
|
|
.ship-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
|
|
.ship-card-header{flex-direction:column;align-items:center;text-align:center}
|
|
.ship-card-image{width:80px;height:80px}
|
|
.current-ship-section{flex:0 0 380px}
|
|
.current-ship-stats{grid-template-columns:1fr 1fr}
|
|
}
|
|
|
|
/* ── Responsive table fallback — horizontal scroll ───────────────────── */
|
|
@media(max-width:639px){
|
|
.dungeon-table,.skills-table,.base-rooms-table,.base-upgrades-table,
|
|
.ship-gallery-table,.starbase-management-table,.starbase-shop-table,
|
|
.quests-table,.inventory-table,.shop-table{
|
|
display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;
|
|
}
|
|
.dungeon-table th,.skills-table th,.base-rooms-table th,.base-upgrades-table th,
|
|
.ship-gallery-table th,.starbase-management-table th,.starbase-shop-table th,
|
|
.quests-table th,.inventory-table th,.shop-table th{padding:8px 10px;font-size:.72rem}
|
|
.dungeon-table td,.skills-table td,.base-rooms-table td,.base-upgrades-table td,
|
|
.ship-gallery-table td,.starbase-management-table td,.starbase-shop-table td,
|
|
.quests-table td,.inventory-table td,.shop-table td{padding:8px 10px;font-size:.72rem}
|
|
}
|