...
Position is set via JS in the toggle event handler.
───────────────────────────────────────────────────────────────────────── */
[popover].ft-popover {
position: fixed;
inset: auto; /* reset UA :popover-open { inset: 0 } so right/bottom don't stretch the element */
top: 0;
left: 0;
margin: 0;
padding: 0;
border: none;
background: transparent;
overflow: visible;
color: inherit;
}
.ft-popover-box {
background-color: var(--color-bg-t1);
border-radius: var(--radius-md);
box-shadow: 0 0.25rem 1rem -0.25rem black;
padding: var(--pad3);
}
#socialPopover .ft-popover-box {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--pad3);
}
#socialPopover .sociallogo[href] {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
}
#addToQueueBttn {
margin-left: 1em;
}
#slider {
height: 100%;
width: 0.1875rem;
}
.ui-slider {
position: relative;
display: flex;
justify-content: center;
}
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 1.25rem;
height: 1.25rem;
cursor: grab;
background-color: var(--color-text);
border-radius: 0.4rem;
box-shadow: 0 0.5rem 0.5rem -0.25rem black;
touch-action: none;
}
.ui-slider .ui-slider-range {
position: absolute;
z-index: 1;
font-size: 0.7em;
display: block;
border: 0;
background-position: 0 0;
}
.ui-slider-horizontal .ui-slider-range-min {
left: 0;
background-color: var(--color-orange);
}
/* Vertical volume slider */
.ui-slider-vertical {
width: 0.1875rem;
height: 5rem;
background-color: rgba(204, 204, 204, 0.2);
}
.ui-slider-vertical .ui-slider-handle {
margin-bottom: -0.1875rem;
width: 2rem;
height: 0.5rem;
border-radius: 0.125rem;
background-color: var(--color-text);
box-shadow: 0 1px 4px -1px black;
}
.ui-slider-vertical .ui-slider-range {
left: 0;
width: 100%;
bottom: 0;
}
.ui-slider-vertical .ui-slider-range-min {
bottom: 0;
background-color: var(--color-accent);
}
/* Tick marks on either side of the track */
#volplace {
position: relative;
}
#volplace::before,
#volplace::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 0.625rem;
background-image: repeating-linear-gradient(
to bottom,
rgba(255,255,255,0.35) 0px,
rgba(255,255,255,0.35) 1px,
transparent 1px,
transparent 5px
);
pointer-events: none;
}
#volplace::before {
left: 0;
}
#volplace::after {
right: 0;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
font-weight: normal;
}
.ui-widget.ui-widget-content {
border: none;
background-color: rgba(204, 204, 204, 0.43);
}
.ui-widget-content {
border: 1px solid #dddddd;
background: #ffffff;
color: #333333;
}
/* ============================================
Stage Wrapper
============================================ */
#stage {
grid-area: stage;
display: grid;
grid-template-rows: 1fr auto;
grid-template-areas:
"visual"
"controls";
}
/* ============================================
The Stage
============================================ */
#djStage > div:not(#screenBox):not(#ft-eq) {
position: relative;
z-index: 2;
}
#djStage {
grid-area: visual;
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
overflow: hidden;
border-top-left-radius: 1.5rem;
border-top-right-radius: 1.5rem;
box-shadow: inset 0 -4rem 4rem -3rem rgba(0, 0, 0, 0.5), inset 0 16rem 32rem -3rem rgba(0, 0, 0, 0.75),
inset 0 4rem 2rem -4rem black;
}
#deck {
grid-area: deck;
display: flex;
max-width: 100vw;
}
#deck.dance .avtr:not(.animate) {
transform-origin: bottom;
animation: MoveSideSide 2s linear infinite;
}
.spot {
flex: 1;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
margin-right: var(--pad2);
margin-left: var(--pad2);
min-width: 0;
}
.spot.empty .djplaque {
color: rgba(255, 255, 255, 0.5);
}
.avtr {
display: none;
position: absolute;
z-index: 0;
bottom: 1.4rem;
width: 100%;
height: 6rem;
background-size: contain;
background-repeat: no-repeat;
background-position: center bottom;
}
.avtr.animate {
animation: MoveUpDown 1s linear infinite;
}
.djplaque {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
align-items: center;
min-width: 0;
padding: 0 var(--pad2);
font-size: 0.75rem;
line-height: 1.5rem;
color: #fff;
background-image: linear-gradient(to bottom, var(--color-bg-t2), rgb(21,21,21));
box-shadow: inset 0 1px rgba(255,255,255,0.2);
border-top-left-radius: var(--radius-md);
border-top-right-radius: var(--radius-md);
}
.djActive {
background-image: linear-gradient(to top, color-mix(in srgb, var(--color-bg-t2) 50%, var(--color-accent) 50%), var(--color-accent));
}
.djname {
grid-area: 1 / 1;
min-width: 0;
padding: 0 1.75rem;
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.playcount {
display: none;
}
.addmeButt {
display: inline-block;
background-color: transparent;
border: none;
}
#prgbar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 0.1875rem;
z-index: 1;
}
#prgbarbar {
position: absolute;
left: 0;
height: 0.1875rem;
}
#screenBox {
position: absolute;
top: -100%;
width: 100%;
height: 100%;
z-index: 0;
transition: top 2s ease-in-out;
pointer-events: none;
}
@keyframes ft-eq-bounce {
0%, 100% { height: 15%; }
50% { height: 85%; }
}
#ft-eq {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
justify-content: space-around;
gap: 0.5rem;
padding: 0.5rem;
box-sizing: border-box;
z-index: 0;
}
.ft-eq-bar {
flex: 1;
min-height: 15%;
background-color: var(--color-accent);
opacity: 0.25;
animation: ft-eq-bounce 10s ease-in-out infinite;
transform: scaleX(2) scaleY(2);
filter: blur(50px);
}
.ft-eq-bar:nth-child(1) { animation-duration: 11s; animation-delay: 0s; background-color: color-mix(in srgb, var(--color-accent) 80%, rebeccapurple 20%); }
.ft-eq-bar:nth-child(2) { animation-duration: 07s; animation-delay: -03s; background-color: color-mix(in srgb, var(--color-accent) 80%, cyan 20%); }
.ft-eq-bar:nth-child(3) { animation-duration: 13s; animation-delay: -06s; background-color: color-mix(in srgb, var(--color-accent) 80%, deepskyblue 20%); }
.ft-eq-bar:nth-child(4) { animation-duration: 08s; animation-delay: -01s; background-color: color-mix(in srgb, var(--color-accent) 80%, lime 20%); }
.ft-eq-bar:nth-child(5) { animation-duration: 10s; animation-delay: -04.5s; background-color: color-mix(in srgb, var(--color-accent) 80%, orange 20%); }
.ft-eq-bar:nth-child(6) { animation-duration: 06s; animation-delay: -02s; background-color: color-mix(in srgb, var(--color-accent) 80%, yellow 20%); }
.ft-eq-bar:nth-child(7) { animation-duration: 12s; animation-delay: -05.5s; background-color: color-mix(in srgb, var(--color-accent) 80%, magenta 20%); }
.ft-eq-bar:nth-child(8) { animation-duration: 07.5s; animation-delay: -03.5s; background-color: color-mix(in srgb, var(--color-accent) 80%, deeppink 20%); }
.ft-eq-bar:nth-child(9) { animation-duration: 10.5s; animation-delay: -01.5s; background-color: color-mix(in srgb, var(--color-accent) 80%, violet 20%); }
.ft-eq-bar:nth-child(10) { animation-duration: 08.5s; animation-delay: -05s; background-color: color-mix(in srgb, var(--color-accent) 80%, indigo 20%); }
.ft-eq-bar:nth-child(11) { animation-duration: 11.5s; animation-delay: -02.5s; background-color: color-mix(in srgb, var(--color-accent) 80%, blue 20%); }
.ft-eq-bar:nth-child(12) { animation-duration: 06.5s; animation-delay: -04s; background-color: color-mix(in srgb, var(--color-accent) 80%, navy 20%); }
#scScreen,
#playerArea {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#screenover {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.15));
}
/* ============================================
View Panel (Playlists / History / Cards)
============================================ */
#queuebox {
grid-area: content;
display: none;
flex-direction: column;
position: relative;
padding-top: var(--pad4);
overflow: hidden;
}
.queuetop {
background-color: var(--color-bg-t1);
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 1.5rem 1.5rem var(--radius-md) var(--radius-md);
}
#queueFilter {
width: 100%;
border-bottom: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
#filterMachine {
padding: 0;
}
#mainqueue {
padding: var(--pad1) 0.75rem;
}
@media only screen and (hover: hover) {
#mainqueue {
padding-right: 0;
}
}
#mainqueue.emptyList:before,
#mainqueue.loading:before,
#mainqueue.overFiltered:before {
display: flex;
justify-content: center;
padding: var(--pad2);
font-style: italic;
color: rgba(255, 255, 255, 0.4);
}
#mainqueue.emptyList:before {
content: "this playlist is empty";
}
#mainqueue.loading:before {
content: "loading...";
}
#mainqueue.overFiltered:before {
content: "no tracks meet your search criteria";
}
#mainqueue .material-symbols-outlined, #thehistory .material-symbols-outlined {
margin: 0 var(--pad1);
font-size: 1.2rem;
}
#thehistory button.material-symbols-outlined:not(.previewicon) {
background: none;
border: none;
padding: 0;
cursor: pointer;
color: inherit;
box-shadow: none;
}
#mainqueue .previewicon {
position: absolute;
z-index: 1;
left: 0.2rem;
}
#queuelist .pvbar {
margin: var(--pad1) 0;
padding-right: var(--pad2);
background-color: var(--color-bg-t1);
border-top: 1px solid var(--color-bg-t2);
border-bottom: 1px solid var(--color-bg);
border-radius: var(--radius-md);
cursor: grab;
overflow: hidden;
}
#queuelist .q-art {
flex-shrink: 0;
width: 2.25rem;
height: 2.25rem;
background-size: cover;
background-position: center;
background-color: var(--color-bg-t2);
}
#queuelist .pvbarWrap {
align-items: center;
}
#queuelist .pvbar.editing .edittags {
display: none;
}
#queuelist .pvbar.editing .closeeditor {
display: block;
}
#queuelist .listwords {
flex: 1;
margin-left: var(--pad3);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
#listpickerWrap {
flex: 1;
}
#listpicker {
width: 100%;
}
#qControlButtons {
display: flex;
}
#cancelqsearch {
display: none;
margin-left: var(--pad2);
}
#addbox,
#plmanager {
display: none;
flex-direction: column;
height: 100%;
overflow: hidden;
}
#plmanager {
padding: var(--pad2);
}
.ortxt {
padding: var(--pad1);
text-align: center;
}
#qsearch {
margin: var(--pad2);
margin-bottom: 0;
}
#queuelist {
flex: 1;
height: 100%;
background-color: var(--color-bg-s1);
overflow: auto;
}
#searchResults {
flex: 1;
background-color: var(--color-bg-t2);
}
#mergeContain {
overflow: auto;
display: none;
position: absolute;
z-index: 15;
width: calc(100% - 2rem);
margin: 0.5rem 1rem 0 1rem;
box-shadow: 0 0.25rem 0.5rem -0.125rem black;
}
#mergeArrow {
position: absolute;
bottom: 100%;
right: 1.85rem;
width: 0;
height: 0;
border-left: 1rem solid transparent;
border-right: 1rem solid transparent;
border-bottom: 1rem solid var(--color-bg-t2);
}
#mergeBox {
background-color: var(--color-bg-t2);
padding: 1rem;
border-radius: var(--radius-md);
}
#mergeSetup {
display: flex;
align-items: center;
justify-content: space-between;
}
#mergeHappening {
display: none;
}
#mergepicker,
#mergepicker2 {
width: calc(50% - 3rem);
font-size: 0.875rem;
border: none;
font-family: var(--font-family);
padding-left: 0.5rem;
color: var(--color-text-light);
white-space: nowrap;
}
#mergeBox .material-symbols-outlined {
font-size: 1rem !important;
font-weight: 700;
cursor: default;
vertical-align: middle;
}
#mergeCompleted {
display: none;
}
.importResult {
display: flex;
align-items: center;
padding: var(--pad1) 0;
border-bottom: 1px solid var(--color-bg-s2);
}
.importResult .material-symbols-outlined {
margin-left: var(--pad2);
font-size: 1rem;
}
a.importLinkCheck {
color: var(--color-text-light);
line-height: 0;
}
.imtxt {
flex: 1;
padding-right: var(--pad2);
}
.tagPromptBox {
font-size: 0.875rem;
}
.closeeditor {
display: none;
}
.tagPromptBox input.tagMachine {
width: 100%;
margin: 0 0 var(--pad2);
}
/* ============================================
Theme Bar
============================================ */
#themebox {
grid-area: controls;
z-index: 15;
position: relative;
display: flex;
align-items: center;
max-width: 100vw;
padding: var(--pad2) var(--pad3);
font-size: 1rem;
text-align: center;
color: #fff;
background-color: var(--color-bg-s1);
border-bottom-left-radius: 1.5rem;
border-bottom-right-radius: 1.5rem;
}
.themeLeft,
.themeRight {
display: flex;
align-items: center;
flex-shrink: 0;
gap: var(--pad2);
}
.themeCenter {
flex: 1;
min-width: 0;
overflow: hidden;
}
@keyframes theme-ticker {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
#currentTheme {
white-space: nowrap;
overflow: hidden;
}
#currentTheme.is-ticker .ticker-run {
display: inline-block;
white-space: nowrap;
animation: theme-ticker 14s linear infinite;
}
.ticker-sep {
padding: 0 0.5em;
opacity: 0.4;
}
/* ============================================
Chat
============================================ */
#actualChat {
grid-area: content;
display: flex;
flex-direction: column;
overflow: hidden;
}
#chatsWrap {
flex: 1;
height: 100%;
padding-inline: var(--pad2);
overflow: auto;
}
#chats {
margin: 0 auto;
max-width: 54ch;
}
#newchat {
width: 100%;
}
#newchatForm {
grid-column: 2/3;
width: 100%;
}
.newChat {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto auto;
gap: var(--pad2);
margin: var(--pad3);
color: var(--color-text);
word-break: break-word;
}
.newChat .ft-avatar {
position: relative;
z-index: 2;
width: 2rem;
height: 2rem;
cursor: pointer;
}
#actualChat.avatarsOff .ft-avatar {
display: none;
}
.nowplayn {
position: relative;
background-color: transparent;
}
.newChat.nowplayn,
.nowplayn + .newChat {
border: 0;
}
.npmsg,
.lcrsp {
position: relative;
z-index: 2;
width: 100%;
color: var(--color-text-muted);
font-size: 0.75rem;
}
.npmsg {
grid-column: 1 / -1;
}
.npmsg-fires {
position: absolute;
z-index: 2;
right: 0;
top: 0;
font-size: 0.625rem;
line-height: 0;
pointer-events: none;
}
.chatContent {
grid-column: 2 / -1;
grid-row: 1 / -1;
display: grid;
grid-template-columns: subgrid;
}
.chatContent .utitle {
position: absolute;
z-index: 2;
left: -1.5rem;
color: var(--color-text-dim);
}
.chatHead {
position: relative;
display: flex;
align-items: center;
}
.chatHead::after {
content: "";
flex: 1;
height: 1px;
background: rgba(255, 255, 255, 0.1);
margin-left: var(--pad1);
}
.chatName {
margin-right: var(--pad1);
font-size: 0.75rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.4);
cursor: pointer;
}
.modDelete {
position: absolute;
right: 0;
top: 0;
font-size: 1rem;
padding: 0 0.25rem;
font-weight: 400;
background-color: #333;
cursor: pointer;
display: none;
color: #999;
}
.modDelete:hover {
background-color: #dd2e44;
color: #ddd;
}
.chatText {
position: relative;
font-size: 0.75rem;
grid-column: 1 / -1;
}
.chatText.deleteMe:hover {
background-color: var(--color-bg-t2);
}
.chatText.deleteMe:hover .modDelete {
display: block;
}
.chatText a {
position: relative;
display: block;
}
.chatText .inlineImage {
display: block;
max-width: 100%;
}
.chatText .hideImage {
position: absolute;
z-index: 2;
top: 0.5rem;
right: 0.5rem;
display: flex;
justify-content: center;
align-items: center;
width: 1.5rem;
height: 1.5rem;
font-size: 1.25rem;
color: white;
background-color: rgba(255, 0, 0, 0.5);
border-radius: var(--radius-pill);
}
.chatText.hideImg .inlineImage {
position: relative;
height: 2.5rem;
opacity: 0;
visibility: hidden;
}
.chatText.hideImg a.inlineImgLink::after {
content: "image hidden";
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.66rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.5);
background-color: black;
}
.chatText.hideImg .hideImage {
background-color: #444;
transform: rotate(45deg);
}
.badoop::before {
content: "";
display: flex;
align-items: flex-start;
justify-content: center;
position: absolute;
z-index: 1;
top: calc(var(--pad3) * -1);
left: calc(var(--pad3) * -1);
bottom: calc(var(--pad3) * -1);
width: 0;
padding: 0.2rem;
font-size: 1.2rem;
font-weight: 700;
line-height: 3.2;
color: #777;
background-color: #444;
border-top-right-radius: var(--radius-pill);
border-bottom-right-radius: var(--radius-pill);
}
.chatTime {
grid-column: 3 / -1;
grid-row: 1 / 2;
position: relative;
z-index: 2;
font-size: 0.66rem;
font-weight: 400;
line-height: 1.8;
color: rgba(255, 255, 255, 0.47);
text-align: right;
white-space: nowrap;
}
.chatCard {
display: block;
margin: var(--pad2) 0;
max-width: 100%;
}
#chatbottom {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
justify-items: center;
gap: 0.5rem;
height: var(--height-footer);
padding-right: var(--pad3);
}
#pickEmoji {
grid-column: 1/2;
margin-left: var(--pad3);
}
#pickerResults {
overflow-y: auto;
height: 33vh;
overflow-x: hidden;
text-align: center;
}
.pickerSecSelected {
color: #fff;
border-bottom: 2px solid #fff;
}
#pickerResults span {
margin-right: var(--pad2);
display: inline-block;
margin-bottom: var(--pad2);
}
#pickerResults h3 {
margin-bottom: var(--pad3);
margin-top: var(--pad2);
text-align: center;
}
#emojiPicker {
position: absolute;
z-index: 99;
left: 1.5rem;
right: 1.5rem;
bottom: calc(100% + 0.5rem);
padding: var(--pad3);
background-color: var(--color-bg-t2);
box-shadow: 0 0.25rem 1rem black;
border-radius: var(--radius-md);
}
#pickerNav {
overflow: hidden;
white-space: nowrap;
text-align: center;
}
#pickerSearch {
width: 100%;
margin: var(--pad2) 0;
}
#pickerNav span {
margin-right: var(--pad2);
cursor: pointer;
filter: saturate(0);
opacity: 0.6;
}
#pickerNav .on {
color: var(--color-orange);
filter: none;
opacity: 1;
}
img.emoji,
.rohnmoji {
height: 1.25em;
width: 1.25em;
margin: 0 0.05em 0 0.1em;
vertical-align: -0.1em;
}
.rohnmoji {
background-image: url(../img/rohn.png);
display: inline-block;
background-size: cover;
}
#morechats {
position: absolute;
bottom: 100%;
display: none;
justify-content: center;
width: 100%;
pointer-events: none;
}
#morechats.show {
display: flex;
}
#morechats .butt {
height: auto;
padding: 0.2em;
font-size: 0.7rem;
background-color: var(--color-bg-t1);
border-bottom-color: var(--color-bg-t1);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
box-shadow: none;
pointer-events: auto;
}
#morechats .butt i {
margin: 0 0.25em;
font-size: 0.85rem;
font-weight: bold;
}
#atPicker {
display: none;
position: absolute;
z-index: 2;
bottom: 100%;
left: 1.5rem;
padding: 0.25rem;
background: var(--color-bg-t1);
box-shadow: 0 -0.25rem 0.5rem black;
}
#atPicker.show {
display: block;
}
#atPicker .butt {
margin: 0.25rem;
height: auto;
padding: 0.25em 0.5em;
text-transform: none;
letter-spacing: 0;
}
#atPicker i {
margin: 0.25rem;
padding: 0.25em 0.5em;
font-size: 0.75rem;
color: var(--color-text-muted);
}
/* ============================================
History
============================================ */
#thehistoryWrap {
grid-area: content;
display: none;
flex-direction: column;
overflow: hidden;
#histFilterBar {
flex-shrink: 0;
padding: var(--pad3) var(--pad3) 0 var(--pad3);
}
#histFilter {
width: 100%;
padding: var(--pad2) var(--pad3);
color: var(--color-text);
font-size: 0.875rem;
background: var(--color-bg-s2);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
outline: none;
box-sizing: border-box;
&:focus-visible {
border-color: var(--color-accent);
}
}
}
#thehistory {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--pad1);
overflow-y: auto;
padding: 0 var(--pad2) 0 var(--pad3);
.pvbar {
flex: 1;
display: flex;
align-items: center;
gap: var(--pad2);
padding: var(--pad2) var(--pad3) var(--pad2) var(--pad4);
}
.listwords {
flex: 1;
}
.tracklink-btn {
color: var(--color-primary);
}
}
/* ── History Timeline ── */
.hist-day-group {
&.collapsed {
.hist-day-header::before { transform: rotate(-90deg); }
.hist-day-items { display: none; }
}
}
.hist-day-header {
display: flex;
align-items: center;
gap: 0.35rem;
position: sticky;
top: 0;
z-index: 2;
padding: var(--pad1) var(--pad2);
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--color-text-muted);
background-color: var(--color-bg);
border: 1px solid var(--color-text-dim);
border-radius: 99px;
cursor: pointer;
user-select: none;
&::before {
content: '▾';
display: inline-block;
transition: transform 0.15s;
font-size: 0.75rem;
line-height: 1;
}
}
.hist-day-items {
position: relative;
display: flex;
flex-direction: column;
padding-left: calc(var(--hist-time-w) + var(--hist-connector-w));
/* Vertical backbone line */
&::before {
content: '';
position: absolute;
left: calc(var(--hist-time-w) + var(--hist-connector-w) - 1px);
top: 0;
bottom: 0;
width: 1px;
background: var(--color-text-muted);
pointer-events: none;
}
}
.hist-entry {
display: flex;
align-items: center;
position: relative;
/* Timestamp */
.hist-timestamp {
position: absolute;
left: calc(-1 * (var(--hist-time-w) + var(--hist-connector-w)));
width: var(--hist-time-w);
text-align: right;
padding-right: 0.4rem;
pointer-events: none;
font-size: 0.65rem;
color: var(--color-text-muted);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* Horizontal connector line */
&::before {
content: '';
position: absolute;
left: calc(-1 * var(--hist-connector-w));
width: var(--hist-connector-w);
height: 1px;
background: var(--color-text-dim);
}
/* Timeline node avatar */
& > .ft-avatar {
position: absolute;
left: calc(var(--hist-avatar-size) / -2);
width: var(--hist-avatar-size);
height: var(--hist-avatar-size);
border: 2px solid var(--color-border);
z-index: 1;
}
}
.histart {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
height: 2.5rem;
width: 2.5rem;
background-size: cover;
background-position: center;
}
.histlink {
color: var(--color-text);
}
.hist-dj-avatar[data-label] {
overflow: visible;
}
.hist-dj-avatar[data-label]::after {
content: attr(data-label);
position: absolute;
right: 120%;
padding: 0.2rem 0.5rem;
font-size: 0.7rem;
font-family: var(--font-family);
white-space: nowrap;
color: var(--color-text-light);
background: var(--color-bg-t2);
border-radius: var(--radius-sm);
pointer-events: none;
opacity: 0;
transition: opacity 150ms ease;
z-index: 100;
}
.hist-dj-avatar[data-label]:hover::after {
opacity: 1;
}
/* ============================================
Card Case
============================================ */
#cardsWrap {
grid-area: content;
display: none;
overflow: auto;
padding: 1rem;
}
/* ============================================
Discover
============================================ */
#discover {
grid-area: content;
display: none;
flex-direction: column;
overflow: auto;
width: 100%;
height: 100%;
}
#mainGrid.view-discover #discover {
display: flex;
}
#mainGrid.login.view-discover #discover {
grid-area: login;
display: flex;
}
#mainGrid.login.view-discover #login {
display: none;
}
.miniLoginNavOnly {
display: none;
}
.miniLoginInvisible {
display: none !important;
}
#minidiscover, #minijoin {
color: var(--orange);
cursor: pointer;
}
#thediscovers {
display: flex;
flex-wrap: wrap;
gap: var(--pad2);
padding: var(--pad3);
width: 100%;
box-sizing: border-box;
}
#thediscovers .pvbar {
display: flex;
flex-direction: column;
flex: 1 1 10rem;
min-width: 10rem;
max-width: 15rem;
padding: var(--pad2);
background-color: var(--color-bg-t1);
border-radius: var(--radius-md);
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
}
.discart {
width: 100%;
aspect-ratio: 1;
background-size: cover;
background-position: center;
border-radius: var(--radius-sm);
margin-bottom: var(--pad2);
display: flex;
align-items: center;
justify-content: center;
}
#thediscovers .pvbarWrap {
display: contents;
}
#thediscovers .qtxt {
display: block;
flex: 1;
}
#thediscovers .listwords {
font-size: 0.8rem;
font-weight: 500;
line-height: 1.3;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
#thediscovers .histdj {
font-size: 0.7rem;
color: var(--color-text-dim);
margin-top: var(--pad1);
}
/* ============================================
Login
============================================ */
#welcomeInfo {
padding-bottom: var(--pad4);
}
#login {
grid-area: login;
padding: var(--pad4);
overflow: auto;
max-width: 40rem;
height: 100%;
}
#login h4 {
font-size: 1.25rem;
font-weight: 300;
}
#login h4 a {
font-size: 1rem;
}
#login .butt {
width: auto;
}
.inputline {
display: flex;
flex-direction: column;
margin-top: 1rem;
max-width: 20rem;
}
.inputline > * {
margin: var(--pad1) 0;
}
.formlinks {
margin-top: var(--pad3);
}
#login .formlinks a {
margin-right: 1rem;
cursor: pointer;
color: var(--color-accent);
}
#login a {
color: var(--color-accent);
}
#login .formlinks a:last-child {
margin-right: 0;
}
#login .formlinks .selected {
display: none;
}
/* ============================================
Modals
============================================ */
#overlay {
position: fixed;
top: 0;
left: 0;
z-index: 100;
display: none;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
overflow: hidden;
}
#overlay.show {
display: flex;
}
.modalThing {
display: none;
flex-direction: column;
max-width: 100vw;
max-height: 100vh;
background-color: var(--color-bg-s2);
overflow: hidden;
}
.modalThing.show {
display: flex;
}
.modalHeader {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--pad4);
color: var(--color-text-light);
background-color: var(--color-bg-t1);
}
.modalHeader h2 {
margin-right: auto;
}
.closeModal {
margin-right: var(--pad1);
}
.modalContent {
flex: 1;
display: flex;
padding: var(--pad4);
overflow: auto;
}
#accountSettingsBox {
width: 26rem;
max-width: 100vw;
min-height: 20rem;
max-height: 100vh;
}
#accountSettingsBox .modalContent {
flex-direction: column;
}
#accountSettingsTabs {
border-radius: 0;
border-bottom: 1px solid var(--color-bg-t1);
background-color: var(--color-bg-t1);
}
#accountSettingsTabs .tab {
border-radius: 0;
flex: none;
padding: var(--pad2) var(--pad4);
}
#accountSettingsClose {
margin-left: auto;
border-radius: 0;
}
#avatarPickerSection {
display: none;
}
.tabPanel {
display: none;
flex-direction: column;
flex: 1;
width: 100%;
}
.tabPanel.active {
display: flex;
}
.settingline {
margin-bottom: var(--pad2);
}
#cardsMain {
display: grid;
grid-gap: 0.625rem;
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}
.cardsEmpty {
grid-column: 1 / -1;
padding: var(--pad4);
color: var(--color-text-subtle);
text-align: center;
.emoji {
font-size: 5rem;
margin-bottom: var(--pad2);
}
}
.caseCardSpot {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.caseCardSpot canvas {
display: block;
width: 100%;
height: auto;
border: 1px solid #333;
}
span.cardShareChat,
span.cardGiftChat {
position: absolute;
font-size: 0.875rem;
background-color: #000;
padding: 0.5rem;
border-radius: var(--radius-md);
display: none;
}
span.cardShareChat {
top: 33%;
}
span.cardGiftChat {
bottom: 33%;
}
span.cardGiftChat:hover,
span.cardShareChat:hover {
background-color: var(--color-orange);
color: #000;
}
.caseCardSpot:hover .cardShareChat,
.caseCardSpot:hover .cardGiftChat {
display: block;
}
#importDubContent {
display: none;
}
input.tagMachine,
#supercopSearch,
#changeUsername {
width: 100%;
padding: 0.5rem;
margin-bottom: 1rem;
}
#songlink {
border-radius: var(--radius-sm);
}
#songlink svg {
width: 100%;
height: 100%;
padding: 0.25rem;
}
#importSources {
padding: 0;
background: none;
}
#importContent,
#importDubContent {
padding: var(--pad2) var(--pad3);
background-color: var(--color-bg-t2);
}
#dubimportButton {
margin-top: 0.625rem;
display: none;
}
#byId {
display: flex;
align-items: center;
}
#byId .butt:disabled {
opacity: 0.4;
}
#plMachine,
#plMachineById {
line-height: 1.875rem;
width: 100%;
padding: 0.5rem;
}
#plMachineById {
padding-right: 2.5rem;
}
.responseBox {
background-color: var(--color-orange);
margin: 0.625rem;
padding: 0.5rem;
color: #000;
border-radius: var(--radius-sm);
}
.responseBox:empty {
display: none;
}
#mergeLists,
#shuffleQueue {
margin-left: 1em;
}
/* ============================================
Unauthenticated / Disconnected State
============================================ */
#reconnecting {
display: none;
padding: var(--pad1) var(--pad2);
background-color: #bb4433;
animation: pulse 500ms infinite linear alternate;
}
body.disconnected #queuebox,
body.disconnected #newchat {
opacity: 0.5;
pointer-events: none;
user-select: none;
}
body.disconnected #reconnecting {
display: block;
}
body.disconnected #logOutButton {
display: none;
}
/* ============================================
About Page
============================================ */
body.blog {
overflow: auto;
}
#blog {
flex: 1;
padding: var(--pad5);
background-color: var(--color-bg-t2);
}
/* ============================================
Floating UI Tooltip
============================================ */
#ft-tooltip {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background-color: var(--color-bg-s2);
color: var(--color-text-light);
padding: 0.2rem 0.5rem;
border-radius: var(--radius-sm);
font-size: 0.8rem;
pointer-events: none;
white-space: nowrap;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
visibility: hidden;
opacity: 0;
transition: opacity 120ms ease;
}
#ft-tooltip.is-visible {
opacity: 1;
}
/* ============================================
Initially Hidden Elements
============================================ */
#ftSuperCopButton,
#modTab,
#audilert,
#sc-widget,
.notice,
#emojiPicker {
display: none;
}
/* ============================================
Media Queries
============================================ */
/* ── 640px: 2-column layout, header gains view nav buttons ── */
@media only screen and (min-width: 640px) {
/* Promote content panels to their semantic grid areas */
#usersbox { grid-area: people; }
#actualChat { grid-area: chat; }
#queuebox,
#thehistoryWrap,
#cardsWrap,
#discover { grid-area: view; }
/* Header view buttons are now visible */
#playlists,
#history,
#cardcase,
#discover-nav { display: block; }
/* Mini-nav view tabs are redundant at this size */
#mm-playlists,
#mm-history,
#mm-cards,
#mm-discover { display: none; }
/* Grid templates */
#mainGrid,
#mainGrid.mmqueue,
#mainGrid.mmchat {
grid-template-rows: auto auto 1fr;
grid-template-columns: 3fr 2fr;
grid-template-areas:
"head nav"
"stage chat"
"view chat";
}
#mainGrid.mmusrs {
grid-template-areas:
"head nav"
"stage people"
"view people";
}
#mainGrid.login {
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr;
grid-template-areas:
"head"
"stage"
"login";
}
/* At 640px+: active view panel shows via view-class regardless of layout mode */
#mainGrid.view-playlists #queuebox { display: flex; }
#mainGrid.view-history #thehistoryWrap { display: flex; }
#mainGrid.view-cards #cardsWrap { display: block; }
#mainGrid.view-discover #discover { display: flex; }
/* Re-show secondary panels suppressed by mobile rules */
#mainGrid.mmqueue #actualChat,
#mainGrid.mmchat #actualChat { display: flex; }
#mainGrid.mmusrs #usersbox { display: flex; }
.newChat { margin-left: var(--pad2); }
}
/* ── max 799px: touch-only users list ── */
@media only screen and (max-width: 799px) {
#allUsersWrap .prson {
cursor: none;
pointer-events: none;
}
.miniLoginInvisible { display: none !important; }
.miniLoginNavOnly { display: block !important; }
.header_icon[data-label]::after {
left: 50%;
top: calc(100% + 0.5rem);
transform: translateX(-50%);
}
}
/* ── 800px: 3-column layout, header becomes vertical sidebar ── */
@media only screen and (min-width: 800px) {
body.screen #albumArt {
display: none;
}
body.screen #screenBox {
top: 0;
}
#mainGrid,
#mainGrid.mmqueue,
#mainGrid.mmchat {
grid-template-rows: auto auto 1fr;
grid-template-columns: auto minmax(28rem, 1fr) minmax(18rem, 24rem);
grid-template-areas:
"head . nav"
"head stage chat"
"head view chat";
}
#mainGrid.mmusrs {
grid-template-areas:
"head . nav"
"head stage people"
"head view people";
}
#mainGrid.login {
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr;
grid-template-areas:
"head"
"stage"
"login";
}
#mainGrid.login #topbar {
flex-direction: row;
align-items: center;
padding: var(--pad1) var(--pad3);
}
#importPromptBox .modalContent {
width: 30rem;
}
#topbar {
flex-direction: column;
justify-content: center;
padding-top: var(--pad2);
padding-bottom: var(--pad4);
}
#viewnav {
flex-direction: column;
margin-left: 0;
}
.header_icon {
margin-bottom: 0.5rem;
}
#mainGrid.login #queuebox,
#mainGrid.login #thehistoryWrap {
display: none;
}
#loggedInUser,
#roomlogo {
margin-right: 0;
margin-left: 0;
}
#loggedInUser {
margin-top: 0.5rem;
}
#roomlogo {
margin-bottom: 0.5rem;
}
/* #idtitle {
display: block;
} */
#actualChat {
min-width: 20rem;
max-width: 28rem;
}
#deck {
margin-left: 2.5vw;
margin-right: 2.5vw;
}
.chatText {
grid-column: 1 / 2;
}
}
/* ── 1024px: 4-column layout, all panels always visible ── */
@media only screen and (min-width: 1024px) {
#mainGrid,
#mainGrid.mmqueue,
#mainGrid.mmchat,
#mainGrid.mmusrs {
grid-template-rows: auto 1fr;
grid-template-columns: min-content minmax(min-content, auto) min-content minmax(min-content, auto);
grid-template-areas:
"head people stage chat"
"head people view chat";
}
/* At 1024px: chat/people panels always visible regardless of nav class.
The active view panel is still governed by view-class (inherited from 640px rules). */
#mainGrid.mmusrs #actualChat,
#mainGrid.mmchat #usersbox,
#mainGrid.mmqueue #usersbox,
#mainGrid.mmqueue #actualChat {
display: flex;
}
#mainGrid.login {
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr;
grid-template-areas:
"head"
"stage"
"login";
}
#mainGrid.login #topbar {
flex-direction: row;
}
#mainGrid.login #stage {
width: 100%;
max-width: 36rem;
justify-self: center;
}
#mainGrid #minimodeoptions {
display: none;
}
/* Stage wrapper + view panels: right-column sizing */
#stage,
#queuebox,
#thehistoryWrap,
#cardsWrap {
width: 46vw;
max-width: 56rem;
justify-self: flex-end;
}
#nowplaying,
#djStage {
margin-top: 1.5rem;
}
#djStage {
height: 30vh;
min-height: 15rem;
}
.avtr {
display: block;
}
#albumArt {
height: 6.5rem;
width: 6.5rem;
}
.djplaque {
justify-content: space-between;
}
#allUsersWrap {
align-self: flex-end;
transform: translateX(1vw);
}
#usersWaitlist {
display: none;
flex-direction: column;
gap: var(--pad2) 0;
padding: var(--pad4) var(--pad4) var(--pad2);
border-bottom: 1px solid var(--color-border);
&.has-entries {
display: flex;
}
}
.waitlist-label {
justify-content: flex-end;
}
.waitlist-item {
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
gap: var(--pad2);
& > * { order: 0 !important; }
}
.waitlist-pos {
justify-self: start;
}
.waitlist-name {
justify-content: flex-end;
text-align: right;
}
.waitlist-item .prsnRole {
justify-self: center;
}
.waitlist-item .ft-avatar {
width: 1.5rem;
height: 1.5rem;
}
#allUsers {
grid-template-columns: 1fr auto auto;
grid-auto-flow: dense;
padding-top: var(--pad5);
}
#allUsers .ft-avatar {
grid-column: -2 / -1;
}
#allUsers .prsnRole {
grid-column: -3 / -2;
}
#allUsers .djOrder {
grid-column: 1 / 2;
}
#allUsers .prsnNameRole {
grid-column: 1 / 2;
justify-content: flex-end;
}
#allUsers .prsnName {
order: 2;
}
.newChat {
margin-left: var(--pad4);
}
.nowplayn {
padding-left: calc(var(--pad5) - var(--pad4));
}
#pickEmoji {
margin-left: var(--pad4);
}
#usersStats {
justify-content: flex-start;
padding: var(--pad3) var(--pad4);
}
}
@media only screen and (min-width: 1370px) {
#mainGrid.login #queuebox {
display: none;
}
#mainGrid.login #thehistoryWrap {
width: 100%;
}
}