1031 lines
16 KiB
CSS
1031 lines
16 KiB
CSS
:root{
|
|
--bg:#000;
|
|
--surface:#131213;
|
|
--surface-2:#232323;
|
|
--surface-hover:#010010;
|
|
--text:#f2f2f2;
|
|
--text-strong:#f5f5f5;
|
|
--muted:#c9c9c9;
|
|
--border:#707070;
|
|
--border-strong:#808080;
|
|
--focus:#817567;
|
|
--seek-accent:#817567;
|
|
--page-max:975px;
|
|
--player-height:95px;
|
|
}
|
|
|
|
*{
|
|
box-sizing:border-box;
|
|
border-radius:0!important;
|
|
}
|
|
|
|
html,
|
|
body{
|
|
margin:0;
|
|
min-height:100%;
|
|
background:var(--bg);
|
|
}
|
|
|
|
body{
|
|
min-height:100vh;
|
|
color:var(--text);
|
|
font-family:"Courier New",Courier,monospace;
|
|
font-size:13px;
|
|
line-height:1.2;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
audio{
|
|
font-family:inherit;
|
|
}
|
|
|
|
button{
|
|
cursor:pointer;
|
|
}
|
|
|
|
.page{
|
|
width:min(var(--page-max),calc(100% - 32px));
|
|
min-height:100vh;
|
|
max-height:100vh;
|
|
margin:0 auto;
|
|
padding:32px 0 calc(var(--player-height) + 56px);
|
|
}
|
|
|
|
.page.page-home{
|
|
display:flex;
|
|
flex-direction:column;
|
|
}
|
|
|
|
.view-tabs{
|
|
display:flex;
|
|
gap:8px;
|
|
margin-bottom:13px;
|
|
}
|
|
|
|
.tab-button{
|
|
padding:6px 10px;
|
|
border:0;
|
|
background:transparent;
|
|
color:var(--text);
|
|
}
|
|
|
|
.tab-button.active{
|
|
background:color-mix(in srgb,var(--seek-accent) 11%,transparent);
|
|
}
|
|
|
|
.icon-tab-button{
|
|
display:inline-flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
width:34px;
|
|
height:30px;
|
|
padding:4px;
|
|
}
|
|
|
|
.icon-tab-button svg{
|
|
width:20px;
|
|
height:20px;
|
|
fill:currentColor;
|
|
}
|
|
|
|
.search-hero{
|
|
display:flex;
|
|
flex:1;
|
|
align-items:center;
|
|
justify-content:center;
|
|
min-height:calc(100vh - 220px);
|
|
}
|
|
|
|
.search-hero.is-compact{
|
|
min-height:0;
|
|
}
|
|
|
|
.search-hero-inner{
|
|
width:100%;
|
|
max-width:780px;
|
|
}
|
|
|
|
.page-home .search-form-hero{
|
|
transform:translateY(-4vh);
|
|
}
|
|
|
|
.search-input{
|
|
width:100%;
|
|
height:40px;
|
|
padding:8px 10px;
|
|
border:1px solid #ffffff22;
|
|
outline:none;
|
|
background:transparent;
|
|
color:var(--text);
|
|
font-size:13px;
|
|
margin-bottom:3px;
|
|
margin-top:3px;
|
|
}
|
|
|
|
.search-input:focus{
|
|
border-color:color-mix(in srgb,var(--seek-accent) 45%,transparent);
|
|
outline-offset:2px;
|
|
}
|
|
|
|
.status{
|
|
display:flex;
|
|
align-items:center;
|
|
min-height:26px;
|
|
color:var(--muted);
|
|
}
|
|
|
|
.results-section{
|
|
width:100%;
|
|
overflow:auto;
|
|
}
|
|
|
|
.results-section-home{
|
|
display:none;
|
|
}
|
|
|
|
.results-section-active{
|
|
display:block;
|
|
max-height:min(72vh,755px);
|
|
}
|
|
|
|
.results-table{
|
|
width:100%;
|
|
min-width:900px;
|
|
border-collapse:collapse;
|
|
table-layout:fixed;
|
|
}
|
|
button .play-button:hover{
|
|
border-color:#fff!important;
|
|
border:1px solid #fff!important;
|
|
}
|
|
.results-table thead th{
|
|
position:sticky;
|
|
top:0;
|
|
z-index:2;
|
|
background:var(--bg);
|
|
}
|
|
|
|
.results-table th,
|
|
.results-table td{
|
|
padding:6px 7px;
|
|
text-align:left;
|
|
vertical-align:top;
|
|
}
|
|
|
|
.results-table th{
|
|
color:var(--muted);
|
|
font-weight:400;
|
|
}
|
|
|
|
.results-table tr:hover td{
|
|
background:color-mix(in srgb,var(--seek-accent) 12%,transparent);
|
|
}
|
|
|
|
.col-index{
|
|
width:36px;
|
|
}
|
|
|
|
.col-channel{
|
|
width:190px;
|
|
}
|
|
|
|
.col-duration{
|
|
width:67px;
|
|
}
|
|
|
|
.col-meta{
|
|
width:67px;
|
|
}
|
|
|
|
.col-play{
|
|
width:67px;
|
|
text-align:center!important;
|
|
}
|
|
|
|
.col-download{
|
|
width:33px;
|
|
padding-right:2px!important;
|
|
padding-left:2px!important;
|
|
text-align:center!important;
|
|
}
|
|
|
|
.col-fav{
|
|
width:33px;
|
|
padding-right:2px!important;
|
|
padding-left:2px!important;
|
|
text-align:center!important;
|
|
}
|
|
|
|
.col-playlist{
|
|
width:33px;
|
|
padding-right:2px!important;
|
|
padding-left:2px!important;
|
|
text-align:center!important;
|
|
white-space:nowrap;
|
|
}
|
|
|
|
.col-title,
|
|
.col-channel{
|
|
overflow:hidden;
|
|
}
|
|
|
|
.empty{
|
|
padding:16px 8px!important;
|
|
color:var(--muted);
|
|
}
|
|
|
|
.link-button{
|
|
padding:0;
|
|
border:0;
|
|
background:transparent;
|
|
color:var(--text);
|
|
font-size:13px;
|
|
text-align:left;
|
|
}
|
|
|
|
.link-button:hover{
|
|
color:#f7f7f7;
|
|
text-decoration:underline;
|
|
}
|
|
|
|
.title-button{
|
|
display:inline-block;
|
|
max-width:100%;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
}
|
|
|
|
.result-meta{
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
gap:6px;
|
|
}
|
|
|
|
.badge{
|
|
display:inline-block;
|
|
padding:4px 5px;
|
|
border:1px solid var(--border-strong);
|
|
background:rgba(9,5,11,0.07);
|
|
color:var(--text);
|
|
font-size:11px;
|
|
padding-left:-1px;
|
|
padding-right:-1px;
|
|
}
|
|
|
|
.badge.live{
|
|
border-color:#b15f5f;
|
|
background:#2a1717;
|
|
color:#ffd0d0;
|
|
}
|
|
|
|
.star-button,
|
|
.download-button{
|
|
display:inline-flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
width:100%;
|
|
min-width:22px;
|
|
min-height:22px;
|
|
padding:0;
|
|
border:0;
|
|
background:transparent;
|
|
color:var(--muted);
|
|
}
|
|
|
|
.star-button{
|
|
font-size:19px;
|
|
}
|
|
|
|
.star-button.favorited{
|
|
color:#ffd96b;
|
|
}
|
|
|
|
.download-button svg{
|
|
width:17px;
|
|
height:17px;
|
|
fill:currentColor;
|
|
}
|
|
|
|
.download-button:hover{
|
|
color:var(--seek-accent);
|
|
}
|
|
|
|
.playlist-action-button{
|
|
display:inline-flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
min-width:18px;
|
|
height:20px;
|
|
margin:0 1px;
|
|
padding:0 3px;
|
|
border:0;
|
|
background:transparent;
|
|
color:var(--text);
|
|
font-size:15px;
|
|
}
|
|
|
|
.playlist-action-button:hover{
|
|
background:var(--surface-2);
|
|
}
|
|
|
|
.player{
|
|
position:fixed;
|
|
right:0;
|
|
bottom:0;
|
|
left:0;
|
|
z-index:100;
|
|
display:flex;
|
|
flex-direction:column;
|
|
align-items:center;
|
|
justify-content:center;
|
|
min-height:var(--player-height);
|
|
gap:.44rem;
|
|
padding:.65rem 1rem;
|
|
border-top:1px solid #02020233;
|
|
background:rgba(7,6,9,.55);
|
|
}
|
|
|
|
.player.hidden{
|
|
display:none;
|
|
}
|
|
|
|
.now-playing{
|
|
width:100%;
|
|
max-width:900px;
|
|
min-width:0;
|
|
text-align:center;
|
|
}
|
|
|
|
#playerTitle,
|
|
#playerMeta{
|
|
width:100%;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
}
|
|
|
|
#playerTitle{
|
|
font-weight:600;
|
|
}
|
|
|
|
#playerMeta{
|
|
margin-top:.18rem;
|
|
color:var(--muted);
|
|
font-size:.78rem;
|
|
}
|
|
|
|
.player-controls{
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
width:100%;
|
|
max-width:1200px;
|
|
gap:.4rem;
|
|
margin-bottom:2px;
|
|
}
|
|
|
|
.queue-control-button{
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
min-width:2.2rem;
|
|
height:2rem;
|
|
padding:0 .7rem;
|
|
border:1px solid var(--border);
|
|
background:rgba(255,255,255,.03);
|
|
color:var(--text);
|
|
}
|
|
|
|
.queue-control-button:hover{
|
|
background:rgba(255,255,255,.08);
|
|
}
|
|
|
|
.queue-control-button:disabled{
|
|
color:#555;
|
|
opacity:.45;
|
|
}
|
|
|
|
.queue-control-button.active{
|
|
border-color:var(--seek-accent);
|
|
color:var(--seek-accent);
|
|
}
|
|
|
|
.icon-control-button{
|
|
position:relative;
|
|
width:2.25rem;
|
|
min-width:2.25rem;
|
|
padding:0;
|
|
}
|
|
|
|
.play-button:hover{
|
|
border-color:#fff;
|
|
}
|
|
|
|
.icon-control-button svg{
|
|
width:17px;
|
|
height:17px;
|
|
fill:currentColor;
|
|
}
|
|
|
|
.primary-control{
|
|
width:2.5rem;
|
|
min-width:2.5rem;
|
|
height:2.25rem;
|
|
border-color:var(--text);
|
|
}
|
|
|
|
.primary-control .pause-icon{
|
|
display:none;
|
|
}
|
|
|
|
.primary-control.is-playing .play-icon{
|
|
display:none;
|
|
}
|
|
|
|
.primary-control.is-playing .play-icon:hover{
|
|
border-color:#fff;
|
|
}
|
|
.primary-control.is-playing .pause-icon{
|
|
display:block;
|
|
}
|
|
|
|
|
|
|
|
.mode-control.inactive{
|
|
border-color:#555;
|
|
color:#777;
|
|
opacity:.72;
|
|
}
|
|
|
|
.control-indicator{
|
|
position:absolute;
|
|
right:3px;
|
|
bottom:3px;
|
|
width:4px;
|
|
height:4px;
|
|
border:1px solid currentColor;
|
|
}
|
|
|
|
.mode-control.active .control-indicator{
|
|
border-color:var(--seek-accent);
|
|
background:var(--seek-accent);
|
|
}
|
|
|
|
.loop-one-icon{
|
|
display:none!important;
|
|
}
|
|
button .primary-icon:hover{
|
|
border-color:#fff;
|
|
}
|
|
|
|
#loopButton.loop-one .loop-all-icon{
|
|
display:none;
|
|
}
|
|
|
|
#loopButton.loop-one .loop-one-icon{
|
|
display:block!important;
|
|
}
|
|
|
|
.loop-one-number{
|
|
fill:var(--bg);
|
|
stroke:var(--seek-accent);
|
|
stroke-width:.45;
|
|
}
|
|
|
|
.player-seek{
|
|
flex:1;
|
|
min-width:133px;
|
|
height:20px;
|
|
margin:0;
|
|
appearance:none;
|
|
background:transparent;
|
|
}
|
|
|
|
.player-seek::-webkit-slider-runnable-track{
|
|
height:3px;
|
|
background:linear-gradient(
|
|
to right,
|
|
var(--seek-accent) 0,
|
|
var(--seek-accent) var(--progress,0%),
|
|
rgba(255,255,255,.14) var(--progress,0%),
|
|
rgba(255,255,255,.14) 100%
|
|
);
|
|
}
|
|
|
|
.player-seek::-webkit-slider-thumb{
|
|
width:12px;
|
|
height:12px;
|
|
margin-top:-4px;
|
|
appearance:none;
|
|
border:1px solid var(--border);
|
|
border-radius:50%!important;
|
|
background:var(--seek-accent);
|
|
}
|
|
|
|
.player-seek::-moz-range-track{
|
|
height:3px;
|
|
background:rgba(255,255,255,.14);
|
|
}
|
|
|
|
.player-seek::-moz-range-progress{
|
|
height:3px;
|
|
background:var(--seek-accent);
|
|
}
|
|
|
|
.player-seek::-moz-range-thumb{
|
|
width:12px;
|
|
height:12px;
|
|
border:1px solid var(--border);
|
|
border-radius:50%!important;
|
|
background:var(--seek-accent);
|
|
}
|
|
|
|
#currentTime,
|
|
#duration{
|
|
width:3.5rem;
|
|
color:var(--muted);
|
|
font-size:.78rem;
|
|
text-align:center;
|
|
}
|
|
|
|
.player-volume{
|
|
width:95px;
|
|
height:20px;
|
|
appearance:none;
|
|
background:transparent;
|
|
padding-right:3px;
|
|
padding-left:3px;
|
|
}
|
|
|
|
.player-volume::-webkit-slider-runnable-track{
|
|
height:3px;
|
|
background:rgba(255,255,255,.1);
|
|
}
|
|
|
|
.player-volume::-webkit-slider-thumb{
|
|
width:12px;
|
|
height:12px;
|
|
margin-top:-4px;
|
|
appearance:none;
|
|
border:1px solid var(--border);
|
|
border-radius:50%!important;
|
|
background:var(--seek-accent);
|
|
}
|
|
|
|
.player-volume::-moz-range-track{
|
|
height:3px;
|
|
background:rgba(255,255,255,.1);
|
|
}
|
|
|
|
.player-volume::-moz-range-thumb{
|
|
width:12px;
|
|
height:12px;
|
|
border:1px solid var(--border);
|
|
border-radius:50%!important;
|
|
background:var(--seek-accent);
|
|
}
|
|
|
|
.seek-theme-picker{
|
|
position:relative;
|
|
}
|
|
|
|
.theme-picker-button{
|
|
color:var(--seek-accent);
|
|
}
|
|
|
|
.seek-theme-menu{
|
|
position:absolute;
|
|
right:0;
|
|
bottom:calc(100% + 7px);
|
|
z-index:220;
|
|
min-width:111px;
|
|
padding:4px;
|
|
border:1px solid var(--border-strong);
|
|
background:var(--surface);
|
|
}
|
|
|
|
.seek-theme-menu[hidden]{
|
|
display:none;
|
|
}
|
|
|
|
.seek-theme-option{
|
|
display:flex;
|
|
align-items:center;
|
|
width:100%;
|
|
gap:7px;
|
|
min-height:30px;
|
|
padding:5px 7px;
|
|
border:0;
|
|
background:transparent;
|
|
color:var(--text);
|
|
text-align:left;
|
|
}
|
|
|
|
.seek-theme-option:hover,
|
|
.seek-theme-option[aria-selected="true"]{
|
|
background:var(--surface-hover);
|
|
}
|
|
|
|
.seek-color-swatch{
|
|
width:11px;
|
|
height:11px;
|
|
border:1px solid rgba(255,255,255,.7);
|
|
background:var(--swatch);
|
|
}
|
|
|
|
.scroll-sentinel{
|
|
display:flex;
|
|
align-items:center;
|
|
min-height:42px;
|
|
padding:10px 8px;
|
|
color:var(--muted);
|
|
}
|
|
|
|
.scroll-sentinel:empty{
|
|
display:none;
|
|
}
|
|
|
|
.scroll-sentinel.loading::after,
|
|
tr.loading-row td::after{
|
|
display:inline-block;
|
|
width:1ch;
|
|
content:"";
|
|
animation:loading-dots 1s steps(4,end) infinite;
|
|
}
|
|
|
|
tr.loading-row td::before{
|
|
content:"> ";
|
|
}
|
|
|
|
@keyframes loading-dots{
|
|
0%{content:""}
|
|
25%{content:"."}
|
|
50%{content:".."}
|
|
75%,100%{content:"..."}
|
|
}
|
|
|
|
.queue-panel{
|
|
width:min(1000px,calc(100% - 22px));
|
|
margin:18px auto;
|
|
border:0px solid var(--border-strong);
|
|
background:var(--bg);
|
|
}
|
|
|
|
.queue-panel-header{
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:space-between;
|
|
gap:12px;
|
|
padding:10px 12px;
|
|
border-bottom:1px solid rgba(120,120,120,.3);
|
|
}
|
|
|
|
.queue-panel-actions{
|
|
display:flex;
|
|
gap:8px;
|
|
}
|
|
|
|
.queue-panel-actions select,
|
|
.queue-panel-actions button{
|
|
padding:5px 7px;
|
|
border:1px solid var(--border-strong);
|
|
background:transparent;
|
|
color:var(--text);
|
|
font:inherit;
|
|
font-size:12px;
|
|
}
|
|
|
|
.queue-list{
|
|
display:flex;
|
|
flex-direction:column;
|
|
max-height:260px;
|
|
overflow:auto;
|
|
}
|
|
|
|
.queue-item{
|
|
display:flex;
|
|
align-items:flex-start;
|
|
gap:10px;
|
|
width:100%;
|
|
padding:9px 12px;
|
|
border:0;
|
|
border-bottom:0px solid rgba(120,120,120,.2);
|
|
background:transparent;
|
|
color:var(--text);
|
|
text-align:left;
|
|
}
|
|
|
|
.queue-item:hover{
|
|
background:var(--surface-hover);
|
|
}
|
|
|
|
.queue-item-index{
|
|
width:24px;
|
|
color:var(--muted);
|
|
}
|
|
|
|
.queue-item-main{
|
|
display:flex;
|
|
flex-direction:column;
|
|
min-width:0;
|
|
}
|
|
|
|
.queue-item-title,
|
|
.queue-item-meta{
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
}
|
|
|
|
.queue-item-meta{
|
|
color:var(--muted);
|
|
font-size:11px;
|
|
}
|
|
|
|
.queue-empty{
|
|
padding:14px 12px;
|
|
color:var(--muted);
|
|
}
|
|
|
|
#audioPlayer{
|
|
display:none;
|
|
}
|
|
|
|
|
|
@media (max-width:700px){
|
|
:root{
|
|
--player-height:164px;
|
|
}
|
|
|
|
.page{
|
|
width:100%;
|
|
padding:18px 10px calc(var(--player-height) + 36px);
|
|
}
|
|
|
|
.search-hero{
|
|
min-height:calc(100vh - 250px);
|
|
}
|
|
|
|
.search-input{
|
|
height:42px;
|
|
font-size:16px;
|
|
}
|
|
|
|
.results-section-active{
|
|
max-height:min(54dvh,620px);
|
|
overflow-x:hidden;
|
|
}
|
|
|
|
.results-table{
|
|
min-width:0;
|
|
}
|
|
|
|
.results-table th,
|
|
.results-table td{
|
|
padding:8px 4px;
|
|
}
|
|
|
|
.results-table td:nth-child(3),
|
|
.results-table th:nth-child(3),
|
|
.results-table td:nth-child(5),
|
|
.results-table th:nth-child(5){
|
|
display:none;
|
|
}
|
|
|
|
.col-index{ width:28px; }
|
|
.col-duration{ width:46px; }
|
|
.col-play{ width:42px; }
|
|
.col-download{ width:30px; }
|
|
.col-fav{ width:28px; }
|
|
.col-playlist{ width:52px; }
|
|
|
|
.title-button{
|
|
display:-webkit-box;
|
|
overflow:hidden;
|
|
white-space:normal;
|
|
-webkit-box-orient:vertical;
|
|
-webkit-line-clamp:2;
|
|
}
|
|
|
|
.player{
|
|
padding:.56rem .56rem;
|
|
overflow:hidden;
|
|
}
|
|
|
|
.player-controls{
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
flex-wrap:wrap;
|
|
gap:.35rem;
|
|
width:100%;
|
|
min-width:0;
|
|
}
|
|
|
|
.queue-control-button{
|
|
min-width:2.05rem;
|
|
height:1.95rem;
|
|
padding:0 .55rem;
|
|
flex:0 0 auto;
|
|
}
|
|
|
|
.icon-control-button{
|
|
width:2.05rem;
|
|
min-width:2.05rem;
|
|
}
|
|
|
|
.primary-control{
|
|
width:2.25rem;
|
|
min-width:2.25rem;
|
|
height:2.05rem;
|
|
}
|
|
|
|
.icon-control-button svg{
|
|
width:15px;
|
|
height:15px;
|
|
}
|
|
|
|
.player-volume{
|
|
display:none !important;
|
|
}
|
|
|
|
#currentTime,
|
|
#duration{
|
|
flex:0 0 auto;
|
|
width:2.85rem;
|
|
min-width:2.85rem;
|
|
font-size:.72rem;
|
|
text-align:center;
|
|
}
|
|
|
|
.seek-theme-picker{
|
|
flex:0 0 auto;
|
|
white-space:nowrap;
|
|
}
|
|
|
|
.theme-picker-button{
|
|
min-width:2rem;
|
|
height:1.95rem;
|
|
padding:0 .4rem;
|
|
}
|
|
|
|
.player-seek{
|
|
order:999;
|
|
flex:0 0 100%;
|
|
width:100%;
|
|
min-width:100%;
|
|
max-width:100%;
|
|
height:28px;
|
|
margin:0;
|
|
}
|
|
|
|
.queue-panel{
|
|
width:calc(100% - 20px);
|
|
}
|
|
|
|
.queue-panel-header{
|
|
flex-direction:column;
|
|
align-items:flex-start;
|
|
}
|
|
|
|
.queue-panel-actions{
|
|
width:100%;
|
|
}
|
|
|
|
.queue-panel-actions select,
|
|
.queue-panel-actions button{
|
|
min-height:40px;
|
|
}
|
|
}
|
|
|
|
@media (max-width:420px){
|
|
:root{
|
|
--player-height:156px;
|
|
}
|
|
|
|
.page{
|
|
padding:14px 8px calc(var(--player-height) + 30px);
|
|
}
|
|
|
|
.player{
|
|
padding:.5rem .42rem;
|
|
gap:.32rem;
|
|
}
|
|
|
|
.player-controls{
|
|
gap:.22rem;
|
|
}
|
|
|
|
.queue-control-button{
|
|
min-width:1.85rem;
|
|
height:1.8rem;
|
|
padding:0 .38rem;
|
|
}
|
|
|
|
.icon-control-button{
|
|
width:1.85rem;
|
|
min-width:1.85rem;
|
|
}
|
|
|
|
.primary-control{
|
|
width:2rem;
|
|
min-width:2rem;
|
|
height:1.9rem;
|
|
}
|
|
|
|
.icon-control-button svg{
|
|
width:14px;
|
|
height:14px;
|
|
}
|
|
|
|
#currentTime,
|
|
#duration{
|
|
width:2.35rem;
|
|
min-width:2.35rem;
|
|
font-size:.66rem;
|
|
}
|
|
|
|
.theme-picker-button{
|
|
min-width:1.8rem;
|
|
height:1.8rem;
|
|
padding:0 .28rem;
|
|
}
|
|
|
|
.player-seek{
|
|
height:26px;
|
|
}
|
|
|
|
#playerTitle{
|
|
font-size:.86rem;
|
|
}
|
|
|
|
#playerMeta{
|
|
font-size:.68rem;
|
|
}
|
|
}
|
|
|
|
.drag-handle{
|
|
display:inline-flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
min-width:18px;
|
|
margin-right:8px;
|
|
color:var(--muted);
|
|
cursor:grab;
|
|
user-select:none;
|
|
}
|
|
|
|
.drag-handle:active{
|
|
cursor:grabbing;
|
|
}
|
|
|
|
.results-table tr.dragging td{
|
|
opacity:.45;
|
|
}
|
|
|
|
.results-table tr.drag-over td{
|
|
background:color-mix(in srgb,var(--seek-accent) 12%,transparent);
|
|
}
|
|
/* keep title cell on one line */
|
|
.results-table td.col-title {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* make the title button shrink safely instead of wrapping */
|
|
.results-table td.col-title .title-button {
|
|
display: inline-block;
|
|
max-width: calc(100% - 24px);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
vertical-align: middle;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* keep drag handle visible and clickable */
|
|
.results-table td.col-title .drag-handle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 18px;
|
|
margin-right: 8px;
|
|
flex: 0 0 auto;
|
|
cursor: grab;
|
|
user-select: none;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.results-table td.col-title .drag-handle:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.results-table tr.dragging {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.results-table tr.drag-over {
|
|
outline: 1px solid rgba(255, 255, 255, 0.2);
|
|
outline-offset: -1px;
|
|
}
|