working
This commit is contained in:
345
style.css
Normal file
345
style.css
Normal file
@@ -0,0 +1,345 @@
|
||||
body, html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
overflow: hidden;
|
||||
background-color: #1E1E2F; /* Dark background for the app */
|
||||
color: #E0E0E0;
|
||||
-webkit-tap-highlight-color: transparent; /* Disable tap highlight */
|
||||
}
|
||||
|
||||
#app-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh; /* Full viewport height */
|
||||
width: 100vw; /* Full viewport width */
|
||||
}
|
||||
|
||||
.player-area {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around; /* Distribute photo and info */
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
position: relative; /* For potential absolute positioned elements inside */
|
||||
}
|
||||
|
||||
#current-player-area {
|
||||
background-color: #2A2A3E; /* Slightly lighter dark shade for current player */
|
||||
border-bottom: 2px solid #4A4A5E;
|
||||
}
|
||||
|
||||
#next-player-area {
|
||||
background-color: #242434; /* Slightly different shade for next player */
|
||||
cursor: pointer; /* For swipe up indication */
|
||||
}
|
||||
|
||||
.player-photo-container {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.player-photo {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 3px solid #E0E0E0;
|
||||
background-color: #555; /* Placeholder if image fails */
|
||||
}
|
||||
|
||||
#current-player-area .player-photo {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.player-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#current-player-name {
|
||||
font-size: 2.5em;
|
||||
margin: 10px 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#next-player-name {
|
||||
font-size: 1.8em;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.timer-display {
|
||||
font-size: 3.5em;
|
||||
font-weight: bold;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.small-timer {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.timer-display.negative {
|
||||
color: #FF6B6B; /* Red for negative time */
|
||||
}
|
||||
|
||||
.pulsating-background {
|
||||
animation: pulse-bg 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes pulse-bg {
|
||||
0% { background-color: #2A2A3E; }
|
||||
50% { background-color: #3A3A4E; }
|
||||
100% { background-color: #2A2A3E; }
|
||||
}
|
||||
|
||||
.pulsating-text {
|
||||
animation: pulse-text 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes pulse-text {
|
||||
0% { opacity: 1; }
|
||||
50% { opacity: 0.6; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
.pulsating-negative-text .timer-display.negative {
|
||||
animation: pulse-negative-text 1s infinite ease-in-out;
|
||||
}
|
||||
@keyframes pulse-negative-text {
|
||||
0% { color: #FF6B6B; transform: scale(1); }
|
||||
50% { color: #FF4040; transform: scale(1.05); }
|
||||
100% { color: #FF6B6B; transform: scale(1); }
|
||||
}
|
||||
|
||||
|
||||
.player-skipped {
|
||||
opacity: 0.4;
|
||||
background-color: #333 !important; /* Distinctly greyed out */
|
||||
}
|
||||
|
||||
.player-skipped .player-name, .player-skipped .timer-display {
|
||||
color: #888 !important;
|
||||
}
|
||||
|
||||
|
||||
#controls {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 10px 0;
|
||||
background-color: #1A1A2A; /* Darker bar for controls */
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
box-shadow: 0 -2px 5px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.control-button {
|
||||
padding: 10px 15px;
|
||||
font-size: 0.9em;
|
||||
background-color: #4A90E2;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.control-button:hover {
|
||||
background-color: #357ABD;
|
||||
}
|
||||
.control-button:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
|
||||
/* Modal Styles */
|
||||
.modal {
|
||||
display: none; /* Hidden by default */
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgba(0,0,0,0.6);
|
||||
color: #333; /* Text color inside modal */
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: #fefefe;
|
||||
margin: 5% auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modal-content h2, .modal-content h3 {
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.close-modal-btn {
|
||||
color: #aaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.close-modal-btn:hover,
|
||||
.close-modal-btn:focus {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#player-list-editor {
|
||||
margin-bottom: 20px;
|
||||
max-height: 30vh; /* Limit height and make scrollable */
|
||||
overflow-y: auto;
|
||||
border: 1px solid #ccc;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.player-editor-entry {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.player-editor-entry:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.player-editor-entry span {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.player-editor-entry button {
|
||||
margin-left: 5px;
|
||||
padding: 5px 8px;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
#add-edit-player-form label {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
#add-edit-player-form input[type="text"],
|
||||
#add-edit-player-form input[type="file"],
|
||||
#add-edit-player-form input[type="checkbox"] {
|
||||
width: calc(100% - 22px);
|
||||
padding: 10px;
|
||||
margin-top: 5px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#add-edit-player-form input[type="checkbox"] {
|
||||
width: auto;
|
||||
margin-right: 5px;
|
||||
}
|
||||
#add-edit-player-form input[type="file"] {
|
||||
padding: 3px; /* Less padding for file input appearance */
|
||||
}
|
||||
|
||||
.photo-preview-modal {
|
||||
display: block;
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
margin: 10px auto;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#remove-photo-btn {
|
||||
display: block;
|
||||
margin: 5px auto 10px auto;
|
||||
padding: 6px 10px;
|
||||
font-size: 0.8em;
|
||||
background-color: #e07070;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
||||
.player-form-buttons, .player-form-actions {
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.player-form-actions button {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.modal-main-action {
|
||||
margin-top: 20px;
|
||||
padding: 12px 20px;
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
font-size: 1.1em;
|
||||
cursor: pointer;
|
||||
}
|
||||
.modal-main-action:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 600px) {
|
||||
#current-player-name {
|
||||
font-size: 2em;
|
||||
}
|
||||
#next-player-name {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.timer-display {
|
||||
font-size: 2.8em;
|
||||
}
|
||||
.small-timer {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
.player-photo {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
#current-player-area .player-photo {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.control-button {
|
||||
font-size: 0.8em;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
.modal-content {
|
||||
margin: 2% auto;
|
||||
width: 95%;
|
||||
max-height: 95vh;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
Reference in New Issue
Block a user