diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..22a9945 --- /dev/null +++ b/styles.css @@ -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%; +}