feat: add styles for polling app UI

Responsive single-column layout (max 480px) with styles for:
- Option items with label/vote-button rows
- Voted state highlighting (green tint)
- Active/closed timer color states
- Disabled button opacity
- Full-width copy URL button

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
ako
2026-03-11 14:49:17 +01:00
parent a76f00a08a
commit 343a55a673

93
styles.css Normal file
View File

@@ -0,0 +1,93 @@
body {
font-family: sans-serif;
max-width: 480px;
margin: 40px auto;
padding: 0 16px;
}
#add-option {
display: flex;
gap: 8px;
margin-bottom: 8px;
}
#option-input {
flex: 1;
padding: 8px;
font-size: 1rem;
border: 1px solid #ccc;
border-radius: 4px;
}
#duplicate-msg {
color: #c00;
font-size: 0.9rem;
margin-bottom: 12px;
}
button {
padding: 8px 16px;
font-size: 1rem;
cursor: pointer;
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
}
button:hover:not(:disabled) {
background: #f0f0f0;
}
button:disabled {
opacity: 0.5;
cursor: default;
}
#timer-section {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.timer.active {
font-weight: bold;
color: #1a6e1a;
}
.timer.closed {
font-weight: bold;
color: #c00;
}
.option-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
border: 1px solid #ddd;
border-radius: 4px;
margin-bottom: 8px;
}
.option-label {
flex: 1;
}
.vote-btn {
padding: 4px 12px;
font-size: 0.9rem;
white-space: nowrap;
}
.vote-btn.voted {
background: #e6f4e6;
border-color: #4a9e4a;
color: #2a6e2a;
}
#copy-btn {
margin-top: 16px;
width: 100%;
}