Something went wrong. Try again.
A local, collaborative music player (main-branch-only mirror of forge.ejuarezg.com/ejuarezg/jam-session)
Something went wrong. Try again.
18 kB · 1096 lines
CSS
at main
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097* { margin: 0; padding: 0; box-sizing: border-box;}
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #1a1a2e; color: #e0e0e0; min-height: 100vh;}
header { background: #16213e; padding: 1.25rem; text-align: center; border-bottom: 2px solid #e94560;}
header h1 { color: #e94560; font-size: 1.75rem; font-weight: 700; letter-spacing: 0.05em;}
main { max-width: 640px; margin: 0 auto; padding: 1.5rem 1rem;}
section { background: #0f3460; border-radius: 12px; padding: 1.25rem; margin-bottom: 1.25rem;}
section h2 { color: #e94560; font-size: 1.1rem; margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;}
#now-playing-info { text-align: center;}
#current-title { font-size: 1.25rem; font-weight: 600; color: #ffffff;}
#current-duration { color: #888; font-size: 0.9rem; margin-top: 0.25rem;}
/* === Progress Bar === */.progress-bar { width: 100%; height: 4px; background: rgba(26, 26, 46, 0.4); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 2px; margin: 10px 0 6px 0;}.progress-fill { height: 100%; background: #e94560; border-radius: 2px; width: 0%; transition: width 0.3s ease;}.progress-time-labels { display: flex; justify-content: space-between; font-size: 14px; color: #888; margin-bottom: 10px;}
/* === Disconnect Panel === */.disconnect-panel { background: #0f3460; border-left: 3px solid #e94560; border-radius: 8px; padding: 1.25rem; margin-bottom: 1.25rem; text-align: center; animation: disconnectAppear 200ms ease-out;}@keyframes disconnectAppear { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); }}.disconnect-icon { font-size: 24px; color: #e94560; display: block; margin-bottom: 8px;}.disconnect-heading { color: #e94560; font-size: 20px; font-weight: 700; margin-bottom: 8px; text-transform: none; letter-spacing: normal;}.disconnect-body { color: #e0e0e0; font-size: 16px; margin-bottom: 12px; line-height: 1.5;}.reconnect-btn { background: #e94560; color: #ffffff; border: none; border-radius: 8px; padding: 10px 24px; min-height: 44px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.2s;}.reconnect-btn:hover { background: #d13350;}
#queue-list { list-style: none; display: flex; flex-direction: column; gap: 0.5rem;}
#queue-list li { background: #1a1a2e; border-radius: 8px; padding: 0.75rem 1rem; display: flex; align-items: center; gap: 8px;}.queue-actions-left { display: flex; align-items: center; gap: 4px; flex-shrink: 0;}.queue-item-main { flex: 1; min-width: 0; overflow: hidden;}.queue-item-main .track-title { font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}.queue-actions-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0;}#queue-list li .track-duration { color: #888; font-size: 0.85rem;}
.empty-message { color: #666; text-align: center; font-style: italic;}
#add-form { display: flex; gap: 0.5rem;}
#url-input { flex: 1; padding: 0.75rem 1rem; border: 2px solid #0f3460; border-radius: 8px; background: #1a1a2e; color: #e0e0e0; font-size: 1rem; outline: none; transition: border-color 0.2s;}
#url-input:focus { border-color: #e94560;}
button { padding: 0.75rem 1.25rem; background: #e94560; color: #ffffff; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background 0.2s;}
button:hover { background: #d13350;}
button:disabled { opacity: 0.6; cursor: not-allowed;}
#refresh-btn { display: block; margin: 0 auto; background: #0f3460;}
#refresh-btn:hover { background: #1a4a80;}
@media (max-width: 480px) { main { padding: 1rem 0.75rem; } header h1 { font-size: 1.5rem; } header { padding: 1rem 0.75rem; }
/* Queue: 2-row stacked layout */ #queue-list li { flex-direction: column; align-items: stretch; gap: 6px; padding: 12px 8px; } .queue-actions-left { order: 2; width: 100%; justify-content: flex-start; } .queue-item-main { order: 1; width: 100%; } .queue-item-main .track-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-break: break-word; font-weight: 500; } .queue-actions-right { order: 3; width: 100%; justify-content: flex-end; margin-left: auto; }
/* Drag handle hidden on mobile */ .drag-handle { display: none; }
/* Settings: stack vertically */ .settings-row { flex-direction: column; gap: 8px; } .settings-label-col { width: 100%; } .settings-control-col { width: 100%; }
.queue-placeholder { flex-direction: column; padding: 14px 10px; } .queue-placeholder .placeholder-dismiss { margin-top: 6px; align-self: flex-end; }}
.dragging { opacity: 0.5;}
.drag-over { border-top: 2px solid #e94560;}
.drag-handle { cursor: grab; margin-right: 0.5rem; color: #666; user-select: none;}
.removing { animation: fadeOut 0.3s ease forwards;}
@keyframes fadeOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-10px); }}
@keyframes slideIn { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; }}
/* === Placeholder (yt-dlp resolution) === */@keyframes shimmer { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; }}.queue-placeholder { background: rgba(26, 26, 46, 0.6); color: #888; cursor: default; display: flex; align-items: center; justify-content: center; padding: 1rem; border-radius: 8px; font-size: 16px; font-style: italic;}.queue-placeholder.resolving { animation: shimmer 1.2s ease-in-out infinite;}.queue-placeholder.error { animation: none; background: rgba(233, 69, 96, 0.1); color: #e94560; font-style: normal; justify-content: space-between;}.queue-placeholder .placeholder-dismiss { background: transparent; border: none; color: #e94560; font-size: 16px; cursor: pointer; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0;}.queue-placeholder .placeholder-dismiss:hover { color: #ff6b81;}
#error-toast { position: fixed; top: 0; left: 50%; transform: translateX(-50%); padding: 0.75rem 3rem 0.75rem 1.5rem; border-radius: 0 0 8px 8px; font-weight: 600; font-size: 14px; z-index: 1000; animation: slideIn 0.3s ease; display: flex; align-items: center; white-space: nowrap;}#error-toast.success { background: #2ecc71; color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);}#error-toast.error { background: #e94560; color: #ffffff;}#error-toast.info { background: #0f3460; color: #ffffff;}.toast-dismiss { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); min-width: 44px; min-height: 44px; background: transparent; border: none; color: rgba(255, 255, 255, 0.7); font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0;}.toast-dismiss:hover { color: #ffffff; opacity: 1;}
.empty-state { text-align: center; padding: 2rem 1rem; color: #666; font-size: 1.1rem;}
.empty-state-icon { font-size: 2.5rem; display: block; margin-bottom: 0.75rem;}
.remove-btn { background: transparent; color: #e94560; padding: 0.25rem 0.5rem; font-size: 0.85rem; cursor: pointer; border: none;}
.remove-btn:hover { color: #ff6b81; background: transparent;}
/* === Nickname Identity === */
.nickname-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 4px; flex-wrap: wrap;}
#nickname-display { color: #ffffff; font-size: 16px; font-weight: 400; line-height: 1.5;}
.edit-icon { cursor: pointer; color: #888; font-size: 16px; padding: 2px 6px; line-height: 1; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; user-select: none;}
.edit-icon:hover { color: #e94560;}
.nickname-input { background: #1a1a2e; color: #e0e0e0; border: 2px solid #0f3460; border-radius: 8px; padding: 4px 8px; font-size: 16px; font-family: inherit; max-width: 220px;}
.nickname-input:focus { border-color: #e94560; outline: none;}
.nickname-input.nickname-error-border { border-color: #e94560;}
.nickname-error { color: #e94560; font-size: 14px; font-weight: 400; flex-basis: 100%; margin-top: 4px;}
/* === Voting === */
.vote-btn { background: transparent; color: #666; border: none; padding: 0; font-size: 18px; cursor: pointer; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; order: -2; transition: color 0.15s ease; line-height: 1;}
.vote-btn.voted { color: #e94560;}
.vote-btn:hover { color: #e94560;}
.vote-btn.voted:hover { color: #d13350;}
.vote-count { color: #888; font-size: 14px; min-width: 20px; text-align: center; flex-shrink: 0; order: -1; transition: color 0.15s ease;}
.vote-count.flash { color: #e94560;}
@keyframes votePulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); }}
.vote-btn.pulse { animation: votePulse 150ms ease-out;}
.drag-handle { cursor: grab; margin-right: 0.5rem; margin-left: 0.5rem; color: #666; user-select: none;}
/* === Arrow Buttons === */.arrow-btns { display: inline-flex; flex-direction: column; gap: 2px; flex-shrink: 0; margin: 0 4px;}.arrow-up,.arrow-down { min-width: 44px; min-height: 22px; background: transparent; border: none; color: #666; font-size: 16px; cursor: pointer; padding: 0 4px; transition: color 0.15s ease; line-height: 1; display: inline-flex; align-items: center; justify-content: center;}.arrow-up:hover,.arrow-down:hover { color: #e94560; background: transparent;}
/* === Host Controls === */
.host-controls { display: flex; justify-content: center; gap: 8px; margin-top: 12px; margin-bottom: 8px;}
.host-btn { background: #e94560; color: #ffffff; border: none; border-radius: 8px; min-width: 44px; min-height: 44px; padding: 8px 12px; font-size: 20px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s; line-height: 1;}
.host-btn:hover { background: #d13350;}
.host-btn-icon { line-height: 1;}
/* === Skip Vote === */
.skip-vote-row { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 8px; margin-bottom: 4px;}
.skip-vote-row .vote-btn { min-width: 44px; min-height: 44px; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; padding: 0; color: #666; transition: color 0.15s ease; line-height: 1;}
.skip-vote-row .vote-btn:hover { color: #e94560;}
.skip-vote-row .vote-btn.voted { color: #e94560;}
.skip-vote-row .vote-btn.voted:hover { color: #d13350;}
.skip-vote-row .vote-btn.disabled { color: #888; cursor: not-allowed;}
.skip-vote-row .vote-btn.disabled:hover { color: #888;}
.skip-badge { font-size: 14px; color: #888; transition: color 0.15s ease;}
.skip-badge.flash { color: #e94560;}
/* === Host Settings === */
#host-settings { display: none; background: #0f3460; border-radius: 12px; padding: 24px; margin-bottom: 32px;}
#host-settings-heading { display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: #e94560; font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 16px;}
#host-settings-toggle { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; user-select: none;}
.settings-subsection { margin-bottom: 24px;}
.settings-subsection-heading { color: #888; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; padding-bottom: 4px; border-bottom: 1px solid #1a1a2e;}
.settings-row { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px;}.settings-label-col { flex: 1; min-width: 0;}.settings-control-col { flex-shrink: 0; display: flex; align-items: center;}
.settings-label { color: #e0e0e0; font-size: 16px; font-weight: 400; display: block; margin-bottom: 2px;}
.settings-description { color: #888; font-size: 14px; margin-top: 2px; margin-bottom: 8px; line-height: 1.4;}
.slider-group { display: flex; align-items: center; gap: 8px;}
.slider-group input[type="range"] { flex: 1; accent-color: #e94560; height: 6px; cursor: pointer;}
.slider-group input[type="number"] { width: 56px; min-height: 44px; background: #1a1a2e; border: 2px solid #0f3460; border-radius: 8px; color: #e0e0e0; font-size: 16px; text-align: right; padding: 4px 8px; font-family: inherit;}
.slider-group input[type="number"]:focus { border-color: #e94560; outline: none;}
.settings-unit { color: #888; font-size: 14px; min-width: 16px;}
/* Toggle Switch */.toggle-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;}
.toggle-switch input[type="checkbox"] { display: none;}
.toggle-slider { position: relative; width: 44px; height: 24px; background: #666; border-radius: 12px; flex-shrink: 0; transition: background 0.2s ease;}
.toggle-slider::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #ffffff; border-radius: 50%; transition: transform 0.2s ease;}
.toggle-switch.active .toggle-slider { background: #e94560;}
.toggle-switch.active .toggle-slider::after { transform: translateX(20px);}
.toggle-label-text { color: #e0e0e0; font-size: 14px; font-weight: 600; min-width: 32px;}
.toggle-switch.active .toggle-label-text { color: #e94560;}
/* Session management */.session-name-input { flex: 1; min-height: 44px; background: #1a1a2e; border: 2px solid #0f3460; border-radius: 8px; color: #e0e0e0; font-size: 16px; padding: 8px 12px; font-family: inherit;}
.session-name-input:focus { border-color: #e94560; outline: none;}
#save-session-btn,#load-session-btn { min-height: 44px; padding: 8px 16px; background: #e94560; color: #ffffff; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.2s;}
#save-session-btn:hover,#load-session-btn:hover { background: #d13350;}
#stop-server-btn { display: block; min-height: 44px; min-width: 100%; margin-top: 12px; padding: 8px 16px; background: #e94560; color: #ffffff; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.2s;}
#stop-server-btn:hover { background: #d13350;}
/* === Stop Server Modal === */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 1001; display: flex; align-items: center; justify-content: center;}
.modal-card { background: #0f3460; border-radius: 12px; padding: 24px; max-width: 400px; width: 90%; animation: modalFadeIn 200ms ease;}
@keyframes modalFadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); }}
.modal-heading { color: #e94560; font-size: 20px; font-weight: 700; margin-bottom: 16px;}
.modal-body { color: #e0e0e0; font-size: 16px; margin-bottom: 16px; line-height: 1.5;}
.modal-session-name { width: 100%; min-height: 44px; background: #1a1a2e; border: 2px solid #0f3460; border-radius: 8px; color: #e0e0e0; font-size: 16px; padding: 8px 12px; font-family: inherit; margin-bottom: 16px;}
.modal-session-name:focus { border-color: #e94560; outline: none;}
.modal-buttons { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;}
.modal-btn { min-height: 44px; min-width: 120px; padding: 8px 16px; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.2s;}
.modal-btn-accent { background: #e94560; color: #ffffff;}
.modal-btn-accent:hover { background: #d13350;}
.modal-btn-secondary { background: #0f3460; color: #e0e0e0; border: 2px solid #888;}
.modal-btn-secondary:hover { background: #1a4a80;}
/* === Session Picker === */
#session-picker { background: #1a1a2e; border-radius: 8px; padding: 12px; margin-top: 8px; margin-bottom: 12px;}
.session-picker-list { list-style: none; padding: 0; margin: 0;}
.session-picker-item { padding: 12px; border-radius: 8px; cursor: pointer; transition: background 0.15s; display: flex; justify-content: space-between; align-items: center; gap: 8px;}
.session-picker-item:hover { background: #0f3460;}
.session-picker-name { color: #e0e0e0; font-size: 16px; font-weight: 600;}
.session-picker-meta { color: #888; font-size: 14px; flex-shrink: 0;}
.picker-empty { color: #888; font-size: 14px; text-align: center; padding: 8px; margin: 0;}