275 lines
20 KiB
CSS
275 lines
20 KiB
CSS
/* ============================================================
|
|
Results calculator page styles
|
|
============================================================ */
|
|
|
|
html, body { height: 100%; overflow: hidden; }
|
|
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
}
|
|
|
|
.navbar { flex-shrink: 0; z-index: 100; }
|
|
|
|
.content-wrapper { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; position: relative; }
|
|
|
|
.container {
|
|
flex: 1; overflow: hidden; width: 100%;
|
|
display: flex; flex-direction: row; align-items: stretch;
|
|
padding: 8px; box-sizing: border-box; gap: 8px; min-height: 0;
|
|
}
|
|
|
|
.calc-card { background: white; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
|
|
|
|
.col-middle { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: hidden; }
|
|
.col-middle .calc-card.scoring-card { flex: 1; min-height: 0; }
|
|
|
|
.header-section { display: none; }
|
|
.header-section.tournament-4_targets { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
|
|
.header-section.tournament-20_targets { background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%); }
|
|
.header-section.tournament-40_targets { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
|
|
.header-section.tournament-default { background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%); }
|
|
|
|
.header-section::before {
|
|
content: ''; position: absolute; inset: 0;
|
|
background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(255,255,255,0.05) 100%);
|
|
pointer-events: none;
|
|
}
|
|
.header-section * { position: relative; z-index: 2; }
|
|
|
|
.header-logo { height: 50px; max-width: 140px; object-fit: contain; margin-bottom: 15px; filter: brightness(1.2) contrast(1.1); background-color: white; padding: 8px; border-radius: 6px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); }
|
|
.header-title { font-size: 1.6rem; font-weight: 700; color: white; margin-bottom: 8px; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
|
|
.header-subtitle { font-size: 1rem; color: rgba(255,255,255,0.95); margin-bottom: 15px; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
|
|
|
|
.progress-info { display: none; }
|
|
.progress-item { text-align: center; }
|
|
.progress-number { font-size: 1.4rem; font-weight: 700; color: white; display: block; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
|
|
.progress-label { font-size: 0.75rem; color: rgba(255,255,255,0.9); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; }
|
|
.global-actions { display: none; }
|
|
|
|
.global-btn { padding: 12px 24px; border: none; border-radius: 8px; font-size: 1rem; font-weight: bold; cursor: pointer; transition: all 0.2s ease; }
|
|
|
|
.fill-all-btn { background: #ff6b35; color: white; padding: 12px 28px; border: none; border-radius: 6px; cursor: pointer; font-size: 1rem; font-weight: bold; transition: all 0.2s ease; }
|
|
.fill-all-btn:hover { background: #e55a2b; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3); }
|
|
.save-all-btn { background: #17a2b8; color: white; }
|
|
.save-all-btn:hover { background: #138496; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(23, 162, 184, 0.3); }
|
|
|
|
/* Search bar */
|
|
.players-search-bar { padding: 8px 10px; border-bottom: 1px solid #e9ecef; flex-shrink: 0; }
|
|
.players-search-wrap { display: flex; align-items: center; border: 1px solid #dee2e6; border-radius: 6px; background: white; overflow: hidden; transition: border-color 0.15s; transform: none !important; }
|
|
.players-search-wrap:hover { transform: none !important; box-shadow: none; }
|
|
.players-search-wrap:focus-within { border-color: #28a745; }
|
|
.players-search-input { flex: 1; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 5px 8px; font-size: 0.8rem; background: transparent; outline: none !important; min-width: 0; transform: none !important; }
|
|
.players-search-clear { width: 26px; height: 26px; border: none; background: transparent; cursor: pointer; font-size: 0.7rem; color: #adb5bd; display: none; align-items: center; justify-content: center; flex-shrink: 0; transition: color 0.15s; padding: 0; transform: none !important; }
|
|
.players-search-clear.visible { display: flex; }
|
|
.players-search-clear:hover { color: #dc3545; transform: none !important; }
|
|
|
|
/* Participants list */
|
|
.participants-list {
|
|
display: flex; flex-direction: column; gap: 8px;
|
|
width: 240px; flex-shrink: 0; box-sizing: border-box;
|
|
padding: 12px; overflow-y: auto; overflow-x: hidden;
|
|
flex: 1; min-height: 0;
|
|
}
|
|
.participants-list::-webkit-scrollbar { width: 8px; }
|
|
.participants-list::-webkit-scrollbar-track { background: transparent; }
|
|
.participants-list::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
|
|
.participants-list::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
|
|
|
|
.participant-list-item {
|
|
padding: 10px 12px; background: white; border: 2px solid #9ca3af; border-radius: 4px;
|
|
cursor: pointer; transition: all 0.2s ease; display: flex; flex-direction: row;
|
|
gap: 8px; align-items: center; justify-content: space-between;
|
|
}
|
|
.participant-list-item:hover { background: #f9f9f9; }
|
|
.participant-list-item.active { background: #f0f0f0; }
|
|
.participant-list-item.in-progress { border-color: #ffc107; }
|
|
.participant-list-item.active.in-progress { background: #fff5e6; }
|
|
.participant-list-item.completed { border-color: #28a745; }
|
|
.participant-list-item.active.completed { background: #e8f5e8; }
|
|
.participant-list-item-content { display: flex; flex-direction: row; gap: 6px; align-items: center; width: 100%; min-width: 0; }
|
|
.participant-list-item-name { font-size: 0.85rem; font-weight: 700; color: #000 !important; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.participant-list-item-score { font-size: 0.7rem; font-weight: 700; color: #28a745 !important; min-width: fit-content; }
|
|
.participant-list-item-tens { font-size: 0.7rem; font-weight: 700; color: #ffc107 !important; min-width: fit-content; }
|
|
|
|
/* Main card panel */
|
|
.main-card-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 0; background: transparent; min-height: 0; gap: 0; }
|
|
.main-card-panel-empty { display: flex; align-items: center; justify-content: center; flex: 1; color: #999; font-size: 1.1rem; }
|
|
|
|
.participant-card {
|
|
background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
|
padding: 0; width: 100%; border: 2px solid #9ca3af; transition: all 0.3s ease;
|
|
box-sizing: border-box; display: none; flex-direction: column;
|
|
overflow: hidden; flex: 1; min-height: 0;
|
|
}
|
|
.participants-list .participant-card { display: none; }
|
|
.main-card-panel .participant-card.active { display: flex; }
|
|
.participant-card.completed { border-color: #28a745; box-shadow: 0 4px 16px rgba(40, 167, 69, 0.15); }
|
|
.participant-card.in-progress { border-color: #ffc107; box-shadow: 0 6px 24px rgba(255, 193, 7, 0.25); }
|
|
.main-card-panel .participant-card.active { background: #f5f7fa; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
|
|
|
|
.card-header-top {
|
|
background: white; border-bottom: 1px solid #e9ecef;
|
|
display: flex; flex-direction: row; justify-content: space-between;
|
|
align-items: center; padding: 14px 16px; flex-shrink: 0;
|
|
width: 100%; gap: 12px; transition: all 0.2s ease;
|
|
}
|
|
|
|
.collapse-icon { display: none; }
|
|
|
|
.header-info { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; text-align: left; width: 100%; gap: 20px; flex: 1; min-width: 0; position: relative; }
|
|
.header-info .player-name { flex: 0 1 auto; min-width: 0; }
|
|
.header-info .player-stats { position: absolute; left: 50%; transform: translateX(-50%); flex: 0; }
|
|
.header-actions { display: flex; gap: 8px; width: auto; justify-content: flex-end; flex-shrink: 0; }
|
|
|
|
.header-btn { width: 40px; height: 40px; padding: 0; border: none; border-radius: 6px; font-size: 1.1rem; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
|
.header-btn.clear-btn { background: #dc3545; color: white; }
|
|
.header-btn.clear-btn:hover { background: #c82333; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(220, 53, 69, 0.25); }
|
|
.header-btn.zero-fill-btn { background: #6c757d; color: white; }
|
|
.header-btn.zero-fill-btn:hover { background: #5a6268; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(108, 117, 125, 0.25); }
|
|
|
|
.participant-card.completed .card-header-top { background: #f0f8f5; border-bottom-color: #28a745; }
|
|
.participant-card.completed .card-header-top:hover { background: #e8f5e8; }
|
|
.participant-card.in-progress .card-header-top { background: #fffbf0; border-bottom-color: #ffc107; }
|
|
.participant-card.in-progress .card-header-top:hover { background: #fff8e6; }
|
|
|
|
.participant-header { background: linear-gradient(135deg, #f8f9fa 0%, #f0f1f3 100%); border-bottom: 3px solid #e9ecef; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 12px 14px; flex-shrink: 0; text-align: center; width: 100%; }
|
|
.participant-card.completed .participant-header { background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%); border-right-color: #28a745; }
|
|
.participant-card.in-progress .participant-header { background: linear-gradient(135deg, #fffbf0 0%, #fff8e6 100%); border-right-color: #ffc107; }
|
|
|
|
.participant-targets-wrapper { display: flex; flex-direction: column; flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; padding: 10px 12px; padding-right: 4px; gap: 8px; transition: all 0.3s ease; max-height: 100%; }
|
|
.participant-card.collapsed .participant-targets-wrapper { max-height: 0; overflow: hidden; padding: 0; }
|
|
.participant-targets-wrapper::-webkit-scrollbar { width: 12px; }
|
|
.participant-targets-wrapper::-webkit-scrollbar-track { background: transparent; border-radius: 6px; }
|
|
.participant-targets-wrapper::-webkit-scrollbar-thumb { border-radius: 6px; border: 2px solid white; background-clip: padding-box; }
|
|
.participant-card:not(.completed):not(.in-progress) .participant-targets-wrapper::-webkit-scrollbar-thumb { background: #9ca3af; }
|
|
.participant-card:not(.completed):not(.in-progress) .participant-targets-wrapper::-webkit-scrollbar-thumb:hover { background: #6b7280; background-clip: padding-box; }
|
|
.participant-card.completed .participant-targets-wrapper::-webkit-scrollbar-thumb { background: #28a745; }
|
|
.participant-card.completed .participant-targets-wrapper::-webkit-scrollbar-thumb:hover { background: #1f7e34; background-clip: padding-box; }
|
|
.participant-card.in-progress .participant-targets-wrapper::-webkit-scrollbar-thumb { background: #ffc107; }
|
|
.participant-card.in-progress .participant-targets-wrapper::-webkit-scrollbar-thumb:hover { background: #e0a800; background-clip: padding-box; }
|
|
|
|
.player-info { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
|
|
.player-name { font-size: 1.05rem; font-weight: 700; color: #2c3e50; margin: 0; letter-spacing: 0.3px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.player-stats { display: flex; align-items: center; gap: 24px; font-size: 0.85rem; justify-content: center; flex: 0 0 auto; }
|
|
.total-score { font-size: 1.2rem; font-weight: 700; color: #28a745 !important; text-align: center; }
|
|
.score-label { color: #999; font-size: 0.65rem; text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; }
|
|
.tens-count { font-size: 1.2rem; font-weight: 700; color: #ffc107 !important; text-align: center; }
|
|
.tens-label { color: #999; font-size: 0.65rem; text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; }
|
|
|
|
.completion-badge { padding: 4px 10px; border-radius: 12px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
|
|
.badge-done { background: #28a745; color: white; box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3); }
|
|
.badge-pending { background: #ffc107; color: #856404; box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3); }
|
|
.badge-in-progress { background: #5a8fd1; color: white; box-shadow: 0 2px 8px rgba(90, 143, 209, 0.3); }
|
|
.badge-not-started { background: #9ca3af; color: white; box-shadow: 0 2px 6px rgba(156, 163, 175, 0.2); }
|
|
.badge-completed { background: #28a745; color: white; }
|
|
|
|
.participant-info { display: flex; align-items: center; gap: 15px; }
|
|
.participant-name { font-size: 1.4rem; font-weight: bold; color: #333; }
|
|
.participant-id { background: #28a745; color: white; padding: 6px 15px; border-radius: 15px; font-size: 0.9rem; font-weight: bold; }
|
|
|
|
.joker-label { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 6px 12px; background: #fff3cd; border: 2px solid #ffc107; border-radius: 8px; transition: all 0.2s ease; }
|
|
.joker-label:hover { background: #ffc107; border-color: #ff9800; }
|
|
.joker-checkbox-calc { cursor: pointer; width: 18px; height: 18px; }
|
|
.joker-checkbox-calc:disabled { cursor: not-allowed; opacity: 0.6; }
|
|
.joker-text { font-size: 0.9rem; font-weight: 600; color: #856404; }
|
|
|
|
/* Target grid */
|
|
.targets-row { display: grid; gap: 6px; width: 100%; padding: 6px 0; }
|
|
.targets-row.targets-4 { grid-template-columns: repeat(2, 1fr); }
|
|
.targets-row.targets-20 { grid-template-columns: repeat(5, 1fr); }
|
|
.targets-row.targets-40 { grid-template-columns: repeat(8, 1fr); }
|
|
.targets-row .target-group { display: flex; flex-direction: column; width: 100%; }
|
|
|
|
.target-group { border: 1px solid #e9ecef; border-radius: 4px; background: #f8f9fa; display: flex; flex-direction: column; gap: 4px; padding: 0; overflow: hidden; transition: all 0.2s ease; }
|
|
.target-group.completed { border-color: #28a745; background: #f0f8f5; box-shadow: 0 2px 6px rgba(40, 167, 69, 0.1); }
|
|
|
|
.target-number { background: linear-gradient(135deg, #f0f1f3 0%, #e8eaed 100%); border-bottom: 1px solid #e9ecef; font-size: 0.65rem; font-weight: 600; color: #495057; letter-spacing: 0; padding: 3px 4px; text-align: center; flex-shrink: 0; transition: all 0.2s ease; }
|
|
.target-group.completed .target-number { background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%); border-bottom-color: #28a745; color: #28a745; }
|
|
|
|
.shots-container { display: flex; flex-direction: column; gap: 4px; padding: 4px; flex: 1; }
|
|
.shots-container.shots-5 { gap: 3px; }
|
|
|
|
.shot-input {
|
|
width: 100%; padding: 4px 2px; border: 1px solid #ddd; border-radius: 3px;
|
|
text-align: center; font-size: 0.75rem; font-weight: 700; color: #333;
|
|
background-color: white; min-height: 24px; transition: all 0.2s ease;
|
|
}
|
|
.shots-container.shots-5 .shot-input { min-height: 22px; font-size: 0.7rem; }
|
|
.shot-input:focus { outline: none; border-color: #28a745; box-shadow: 0 0 0 1px rgba(40, 167, 69, 0.3); }
|
|
.shot-input.valid { border-color: #28a745; background: white; }
|
|
.shot-input.ten { border-color: #ffc107; background: white; font-weight: 700; color: #ffc107; }
|
|
|
|
/* Participant actions */
|
|
.participant-actions {
|
|
display: flex; gap: 6px; padding: 8px; flex-shrink: 0;
|
|
align-items: center; justify-content: center; flex-direction: row;
|
|
border-top: 3px solid #e9ecef;
|
|
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
|
|
width: 100%;
|
|
}
|
|
|
|
.action-btn { width: 38px; height: 38px; padding: 0; border: none; border-radius: 6px; font-size: 0.95rem; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
|
.clear-btn { background: #f8f9fa; border: 2px solid #dc3545; color: #dc3545; }
|
|
.clear-btn:hover { background: #dc3545; color: white; transform: translateY(-1px); }
|
|
.zero-fill-btn { background: #f8f9fa; border: 2px solid #6c757d; color: #6c757d; }
|
|
.zero-fill-btn:hover { background: #6c757d; color: white; transform: translateY(-1px); }
|
|
.auto-fill-btn { background: #ffc107; color: #856404; }
|
|
.auto-fill-btn:hover { background: #e0a800; }
|
|
|
|
/* Finish bar */
|
|
.finish-section { background: #f8f9fa; padding: 10px 20px; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 15px; flex-shrink: 0; width: 100%; box-sizing: border-box; }
|
|
.finish-title { display: none; }
|
|
.finish-description { display: none; }
|
|
|
|
.finish-btn { background: #28a745; border: none; color: white; padding: 12px 28px; border-radius: 6px; cursor: pointer; font-size: 1rem; font-weight: bold; transition: all 0.2s ease; white-space: nowrap; }
|
|
.finish-btn:hover { background: #1e7e34; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3); }
|
|
.finish-btn:disabled { background: #6c757d; cursor: not-allowed; transform: none; box-shadow: none; }
|
|
|
|
.warning-message { background: #fff3cd; border: 1px solid #ffeaa7; color: #856404; padding: 12px 15px; border-radius: 6px; margin: 15px 0; }
|
|
.finish-section .warning-message { margin: 0; padding: 8px 12px; font-size: 0.9rem; }
|
|
|
|
.saving { opacity: 0.7; pointer-events: none; }
|
|
.saving::after { content: ''; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2px solid #f3f3f3; border-top: 2px solid #28a745; border-radius: 50%; animation: spin 1s linear infinite; }
|
|
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
|
|
|
|
/* Draft panel */
|
|
.draft-panel { width: 240px; flex-shrink: 0; display: flex; flex-direction: column; overflow: hidden; }
|
|
.draft-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 10px; background: #f8f9fa; border-bottom: 1px solid #e9ecef; border-radius: 12px 12px 0 0; flex-shrink: 0; gap: 4px; }
|
|
.draft-round-nav { background: #f0f1f3; border: 2px solid #dee2e6; border-radius: 6px; cursor: pointer; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.9rem; color: #333; flex-shrink: 0; transition: all 0.15s ease; }
|
|
.draft-round-nav:hover:not(:disabled) { background: #e9ecef; border-color: #28a745; color: #28a745; }
|
|
.draft-round-nav:disabled { opacity: 0.35; cursor: not-allowed; }
|
|
.draft-round-label { font-size: 0.78rem; font-weight: 700; color: #333; text-align: center; flex: 1; white-space: nowrap; }
|
|
|
|
.draft-positions { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
|
|
.draft-positions::-webkit-scrollbar { width: 6px; }
|
|
.draft-positions::-webkit-scrollbar-track { background: transparent; }
|
|
.draft-positions::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
|
|
|
|
.draft-position-row { display: flex; align-items: center; gap: 8px; padding: 7px 9px; background: white; border: 2px solid #dee2e6; border-radius: 8px; cursor: pointer; transition: all 0.15s ease; }
|
|
.draft-position-row:hover { border-color: #5a8fd1; background: #f0f5fc; }
|
|
.draft-position-num { width: 26px; height: 26px; border-radius: 6px; background: #5a8fd1; color: white; font-size: 0.85rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
|
.draft-position-row.empty .draft-position-num { background: #9ca3af; }
|
|
.draft-position-name { font-size: 0.8rem; font-weight: 600; color: #2c3e50; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
|
|
.draft-position-row.empty .draft-position-name { color: #adb5bd; font-style: italic; font-weight: 400; }
|
|
|
|
.draft-panel-footer { margin-top: auto; padding: 12px; border-top: 1px solid #e9ecef; display: flex; justify-content: center; align-items: center; }
|
|
|
|
@media (max-width: 1200px) {
|
|
.targets-row { padding: 8px; gap: 5px; }
|
|
.target-group { min-width: 50px; padding: 2px; }
|
|
.shot-input { width: 24px; padding: 1px; font-size: 0.55rem; min-height: 16px; }
|
|
.participant-header { gap: 15px; }
|
|
.player-name { font-size: 1rem; }
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.participant-header { flex-wrap: wrap; gap: 12px; padding: 12px; }
|
|
.targets-row { width: 100%; order: 3; padding: 6px; margin-top: 8px; border-top: 1px solid #e9ecef; }
|
|
.player-name { font-size: 0.9rem; }
|
|
.target-group { min-width: 45px; padding: 2px; }
|
|
.shot-input { width: 22px; padding: 1px; font-size: 0.5rem; min-height: 14px; }
|
|
.target-number { font-size: 0.5rem; }
|
|
}
|