Release v1.1.3: playlist drag sorting, local SortableJS, and playlist UI updates
This commit is contained in:
@@ -1876,6 +1876,107 @@ table td .actions form {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.playlist-order-cell {
|
||||
width: 88px;
|
||||
min-width: 88px;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.playlist-order-cell-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.playlist-order-number {
|
||||
min-width: 1.5em;
|
||||
font-weight: 800;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.playlist-drag-handle {
|
||||
flex: 0 0 auto;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
color: var(--muted);
|
||||
background: currentColor;
|
||||
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 4L8 8H16L12 4Z'/%3E%3Cpath d='M4 11H20V13H4V11Z'/%3E%3Cpath d='M4 15H20V17H4V15Z'/%3E%3Cpath d='M4 7H20V9H4V7Z'/%3E%3Cpath d='M12 20L8 16H16L12 20Z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||||
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 4L8 8H16L12 4Z'/%3E%3Cpath d='M4 11H20V13H4V11Z'/%3E%3Cpath d='M4 15H20V17H4V15Z'/%3E%3Cpath d='M4 7H20V9H4V7Z'/%3E%3Cpath d='M12 20L8 16H16L12 20Z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||||
cursor: grab;
|
||||
transition: color 160ms ease;
|
||||
}
|
||||
|
||||
.playlist-drag-handle {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.playlist-drag-handle:hover,
|
||||
.playlist-drag-handle:focus-visible {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .playlist-drag-handle {
|
||||
color: var(--sidebar-text);
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .playlist-drag-handle:hover,
|
||||
html[data-theme='dark'] .playlist-drag-handle:focus-visible {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.playlist-drag-handle:active,
|
||||
tr.is-dragging .playlist-drag-handle {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
tr.sortable-chosen {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
tr.sortable-ghost {
|
||||
opacity: 0.32;
|
||||
background: var(--primary-soft);
|
||||
}
|
||||
|
||||
tr.sortable-drag {
|
||||
box-shadow: var(--shadow-md);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
@media (min-width: 721px) {
|
||||
table.table-cards tr > td:nth-child(1),
|
||||
table.table-cards tr > th:nth-child(1) {
|
||||
width: 1%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.table-cards tr > td:nth-child(2),
|
||||
table.table-cards tr > th:nth-child(2) {
|
||||
width: 36%;
|
||||
}
|
||||
|
||||
table.table-cards tr > td:nth-child(3),
|
||||
table.table-cards tr > th:nth-child(3) {
|
||||
width: 36%;
|
||||
}
|
||||
|
||||
table.table-cards tr > td:nth-child(4),
|
||||
table.table-cards tr > th:nth-child(4) {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
table.table-cards tr > td:nth-child(5),
|
||||
table.table-cards tr > th:nth-child(5) {
|
||||
width: 1%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.actions form {
|
||||
display: inline;
|
||||
}
|
||||
@@ -1911,6 +2012,11 @@ table td .actions form {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .chip {
|
||||
background: rgba(148, 163, 184, 0.16);
|
||||
color: var(--sidebar-text);
|
||||
}
|
||||
|
||||
.slide-editor-top {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
|
||||
@@ -1993,7 +2099,6 @@ table td .actions form {
|
||||
color: #fff;
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
background: rgba(15, 23, 42, 0.2);
|
||||
backdrop-filter: blur(1px);
|
||||
}
|
||||
|
||||
.slide-preview-region h1,
|
||||
|
||||
Reference in New Issue
Block a user