release: publish Twitch VOD Manager 1.0.3
Polish navigation, settings, streamer and queue workflows; add safe pause and partial-file lifecycle handling; apply the product identity across Windows surfaces; and replace the public README with a complete English product guide and isolated screenshot.
This commit is contained in:
Sucukdeluxe
+692
-27
@@ -43,6 +43,25 @@
|
||||
--border-soft: var(--workspace-border);
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
input:not([type]),
|
||||
input[type="text"],
|
||||
input[type="search"],
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
input[type="url"],
|
||||
input[type="tel"],
|
||||
input[type="number"],
|
||||
textarea,
|
||||
[contenteditable="true"] {
|
||||
-webkit-user-select: text;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
body.theme-twitch,
|
||||
body.theme-dark,
|
||||
body.theme-discord,
|
||||
@@ -238,6 +257,11 @@ textarea:disabled,
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.topbar-brand img.topbar-brand-mark {
|
||||
object-fit: cover;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.topbar-brand-name {
|
||||
overflow: hidden;
|
||||
color: var(--workspace-text);
|
||||
@@ -249,6 +273,7 @@ textarea:disabled,
|
||||
|
||||
.top-nav {
|
||||
display: flex;
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
height: 40px;
|
||||
align-items: center;
|
||||
@@ -260,8 +285,25 @@ textarea:disabled,
|
||||
border-radius: var(--workspace-radius);
|
||||
}
|
||||
|
||||
.top-nav::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: var(--top-nav-active-width, 0px);
|
||||
height: var(--top-nav-active-height, 0px);
|
||||
pointer-events: none;
|
||||
background: var(--workspace-primary);
|
||||
border-radius: var(--workspace-radius-small);
|
||||
transform: translate3d(var(--top-nav-active-x, 0px), var(--top-nav-active-y, 0px), 0);
|
||||
transition: transform 420ms cubic-bezier(0.22, 0.76, 0.22, 1), width 420ms cubic-bezier(0.22, 0.76, 0.22, 1), height 420ms cubic-bezier(0.22, 0.76, 0.22, 1);
|
||||
}
|
||||
|
||||
.top-nav-item.nav-item {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 34px;
|
||||
min-width: 34px;
|
||||
height: 32px;
|
||||
@@ -285,8 +327,12 @@ textarea:disabled,
|
||||
|
||||
.top-nav-item.nav-item.active {
|
||||
color: var(--workspace-primary-text);
|
||||
background: var(--workspace-primary);
|
||||
border-color: var(--workspace-primary);
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.top-nav-item.nav-item.active:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.top-nav-item.nav-item svg {
|
||||
@@ -656,6 +702,7 @@ textarea:disabled,
|
||||
}
|
||||
|
||||
.context-sidebar .streamers {
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
padding: 0 10px;
|
||||
@@ -663,7 +710,32 @@ textarea:disabled,
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.context-sidebar .streamers::before {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: var(--streamer-active-width, 0px);
|
||||
height: var(--streamer-active-height, 0px);
|
||||
pointer-events: none;
|
||||
background: var(--workspace-control);
|
||||
border-radius: var(--workspace-radius-small);
|
||||
content: '';
|
||||
opacity: 0;
|
||||
transform: translate3d(var(--streamer-active-x, 0px), var(--streamer-active-y, 0px), 0);
|
||||
}
|
||||
|
||||
.context-sidebar .streamers.streamer-indicator-visible::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.context-sidebar .streamers.streamer-indicator-ready::before {
|
||||
transition: transform 360ms cubic-bezier(0.22, 0.76, 0.22, 1), width 360ms cubic-bezier(0.22, 0.76, 0.22, 1), height 360ms cubic-bezier(0.22, 0.76, 0.22, 1);
|
||||
}
|
||||
|
||||
.context-sidebar .streamer-item {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
min-height: 36px;
|
||||
gap: 8px;
|
||||
margin: 1px 0;
|
||||
@@ -683,15 +755,95 @@ textarea:disabled,
|
||||
|
||||
.context-sidebar .streamer-item.active {
|
||||
color: var(--workspace-primary);
|
||||
background: var(--workspace-control);
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.context-sidebar .streamer-item.active:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.context-sidebar .streamer-item.active::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.context-sidebar .streamer-item .remove {
|
||||
display: inline-flex;
|
||||
flex: 0 0 16px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: auto;
|
||||
opacity: 0.75;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.streamer-context-menu {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
display: grid;
|
||||
min-width: 122px;
|
||||
padding: 4px;
|
||||
background: var(--workspace-panel-raised);
|
||||
border: 1px solid var(--workspace-border);
|
||||
border-radius: var(--workspace-radius-small);
|
||||
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.streamer-context-action {
|
||||
display: inline-flex;
|
||||
min-height: 30px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 9px;
|
||||
color: var(--workspace-text);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 5px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.streamer-context-action:hover,
|
||||
.streamer-context-action:focus-visible {
|
||||
color: var(--workspace-text);
|
||||
background: var(--workspace-control-hover);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.streamer-context-action.is-active::after {
|
||||
margin-left: 16px;
|
||||
color: #55d68a;
|
||||
content: "✓";
|
||||
}
|
||||
|
||||
.streamer-context-record {
|
||||
color: #ff7770;
|
||||
}
|
||||
|
||||
.context-sidebar .streamer-section-counter {
|
||||
display: inline-flex;
|
||||
min-height: 20px;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
margin-right: 6px;
|
||||
padding: 0 7px;
|
||||
color: var(--workspace-text-muted);
|
||||
background: var(--workspace-control);
|
||||
border: 1px solid var(--workspace-border);
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.context-sidebar .streamer-section-counter:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.context-sidebar .streamer-avatar,
|
||||
.context-sidebar .streamer-avatar-fallback {
|
||||
width: 24px;
|
||||
@@ -709,6 +861,19 @@ textarea:disabled,
|
||||
border-top: 1px solid var(--workspace-border);
|
||||
}
|
||||
|
||||
.context-sidebar .streamer-section {
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.context-sidebar .streamer-section .streamers {
|
||||
min-height: 0;
|
||||
flex: 1 1 auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.context-sidebar .queue-header {
|
||||
min-height: 30px;
|
||||
padding: 0 2px;
|
||||
@@ -727,6 +892,59 @@ textarea:disabled,
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.context-sidebar .queue-count {
|
||||
display: inline-flex;
|
||||
min-width: 20px;
|
||||
min-height: 20px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 7px;
|
||||
color: #ffffff;
|
||||
background: #1f7a43;
|
||||
border: 1px solid #1f7a43;
|
||||
border-radius: 999px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.context-panel[data-context-for="vods"][data-vods-layout="tabs"][data-vods-workspace="streamers"] .queue-section {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.context-panel[data-context-for="vods"][data-vods-layout="tabs"][data-vods-workspace="queue"] .streamer-section {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.context-panel[data-context-for="vods"][data-vods-layout="tabs"][data-vods-workspace="queue"] .queue-section {
|
||||
flex: 1 1 auto;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.context-panel[data-context-for="vods"][data-vods-layout="tabs"][data-vods-workspace="queue"] .queue-list {
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.context-panel[data-context-for="vods"][data-vods-layout="split"] .context-switcher {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.context-panel[data-context-for="vods"][data-vods-layout="split"] .streamer-section,
|
||||
.context-panel[data-context-for="vods"][data-vods-layout="split"] .queue-section {
|
||||
min-height: 0;
|
||||
flex: 1 1 50%;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.context-panel[data-context-for="vods"][data-vods-layout="split"] .queue-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.context-panel[data-context-for="vods"][data-vods-layout="split"] .queue-list {
|
||||
min-height: 0;
|
||||
max-height: none;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.context-sidebar .queue-item {
|
||||
margin: 3px 0;
|
||||
padding: 7px;
|
||||
@@ -951,6 +1169,7 @@ textarea:disabled,
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
scrollbar-gutter: stable;
|
||||
padding: 16px;
|
||||
background: var(--workspace-panel);
|
||||
}
|
||||
@@ -1202,13 +1421,13 @@ textarea:focus {
|
||||
input[type="checkbox"] {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: var(--workspace-panel-raised);
|
||||
background-color: var(--workspace-panel-raised);
|
||||
border: 1px solid var(--workspace-border-strong);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked {
|
||||
background: var(--workspace-primary);
|
||||
background-color: var(--workspace-primary);
|
||||
border-color: var(--workspace-primary);
|
||||
}
|
||||
|
||||
@@ -1318,14 +1537,101 @@ input[type="range"] {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.vod-filter-row {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.vod-filter-row .vod-filter-count {
|
||||
flex: 0 0 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.vod-filter-row .vod-hide-downloaded {
|
||||
flex: 0 0 auto;
|
||||
margin-left: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.vod-filter-row .vod-sort-label {
|
||||
flex: 0 0 auto;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.vod-filter-row #vodSortSelect {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.vod-bulk-bar {
|
||||
padding: 8px 10px;
|
||||
position: fixed;
|
||||
z-index: 30;
|
||||
bottom: 38px;
|
||||
left: calc((100vw + var(--workspace-sidebar-width) + var(--workspace-content-gap)) / 2);
|
||||
width: max-content;
|
||||
max-width: calc(100vw - var(--workspace-sidebar-width) - 56px);
|
||||
margin: 0;
|
||||
padding: 9px 10px;
|
||||
flex-wrap: nowrap;
|
||||
color: var(--workspace-text);
|
||||
background: var(--workspace-panel-raised);
|
||||
border: 1px solid var(--workspace-primary);
|
||||
border-radius: var(--workspace-radius-small);
|
||||
box-shadow: none;
|
||||
animation: none;
|
||||
background: rgba(31, 31, 31, 0.96);
|
||||
border: 1px solid var(--workspace-border-strong);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.04);
|
||||
backdrop-filter: blur(12px);
|
||||
transform: translateX(-50%);
|
||||
animation: vod-bulk-dock-in 240ms cubic-bezier(0.22, 0.76, 0.22, 1);
|
||||
}
|
||||
|
||||
.vod-bulk-bar .vod-bulk-count {
|
||||
width: 112px;
|
||||
flex: 0 0 112px;
|
||||
padding: 0 8px 0 4px;
|
||||
box-sizing: border-box;
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.streamer-profile-stat {
|
||||
min-height: 18px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.streamer-profile-stat strong {
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.streamer-profile-stat svg {
|
||||
display: block;
|
||||
flex: 0 0 14px;
|
||||
}
|
||||
|
||||
.vod-bulk-bar .vod-bulk-spacer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vod-bulk-bar .btn-pill {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.vod-bulk-bar #vodBulkAddBtn {
|
||||
color: #fff;
|
||||
background: #16803d;
|
||||
border-color: #1c9a4a;
|
||||
}
|
||||
|
||||
.vod-bulk-bar #vodBulkAddBtn:hover:not(:disabled) {
|
||||
background: #1a9146;
|
||||
border-color: #22c55e;
|
||||
}
|
||||
|
||||
@keyframes vod-bulk-dock-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, 12px) scale(0.98);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.vod-grid {
|
||||
@@ -1347,8 +1653,35 @@ input[type="range"] {
|
||||
}
|
||||
|
||||
.vod-card.selected {
|
||||
border-color: var(--workspace-primary);
|
||||
box-shadow: inset 0 0 0 1px var(--workspace-primary);
|
||||
border-color: #22c55e;
|
||||
box-shadow: inset 0 0 0 1px #22c55e, 0 0 0 1px rgba(34, 197, 94, 0.24);
|
||||
}
|
||||
|
||||
input[type="checkbox"].vod-select-checkbox {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
z-index: 4;
|
||||
opacity: 1;
|
||||
background-color: rgba(18, 22, 20, 0.94);
|
||||
border: 2px solid rgba(255, 255, 255, 0.82);
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
input[type="checkbox"].vod-select-checkbox:hover:not(:disabled) {
|
||||
border-color: #86efac;
|
||||
}
|
||||
|
||||
input[type="checkbox"].vod-select-checkbox:checked {
|
||||
background-color: rgba(18, 36, 25, 0.96);
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2322c55e' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5 8.5 6.5 11.5 12.5 5'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 14px;
|
||||
border-color: #22c55e;
|
||||
}
|
||||
|
||||
input[type="checkbox"].vod-select-checkbox:focus-visible {
|
||||
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.28), 0 1px 5px rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
.vod-thumbnail,
|
||||
@@ -1357,20 +1690,73 @@ input[type="range"] {
|
||||
}
|
||||
|
||||
.vod-info {
|
||||
min-width: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.vod-title {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
margin-bottom: 7px;
|
||||
overflow: hidden;
|
||||
color: var(--workspace-text);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.vod-meta,
|
||||
.vod-date,
|
||||
.vod-duration {
|
||||
.vod-meta {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.vod-meta > span {
|
||||
display: inline-flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
overflow: hidden;
|
||||
color: var(--workspace-text-muted);
|
||||
font-size: 11px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.vod-meta svg {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
flex: 0 0 auto;
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
stroke-width: 1.8;
|
||||
}
|
||||
|
||||
.vod-views {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.vod-duration-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 22px;
|
||||
padding: 3px 8px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid rgba(255, 255, 255, 0.72);
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.7);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
z-index: 4;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.streamer-profile-header {
|
||||
@@ -1383,6 +1769,13 @@ input[type="range"] {
|
||||
border-radius: var(--workspace-radius);
|
||||
box-shadow: none;
|
||||
animation: none;
|
||||
width: 100%;
|
||||
min-height: 94px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.streamer-profile-header.is-hidden {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.streamer-profile-header::before {
|
||||
@@ -1530,6 +1923,11 @@ input[type="range"] {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#settingsTab .settings-card[data-settings-pane] {
|
||||
margin-bottom: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
#settingsTab .settings-card:last-child {
|
||||
margin-bottom: 0;
|
||||
border-bottom: 0;
|
||||
@@ -1669,6 +2067,10 @@ input[type="range"] {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.status-dot.public {
|
||||
background: #f59e0b;
|
||||
}
|
||||
|
||||
.update-banner {
|
||||
position: static;
|
||||
display: none;
|
||||
@@ -1770,6 +2172,14 @@ input[type="range"] {
|
||||
border-color: var(--workspace-border-strong);
|
||||
}
|
||||
|
||||
.update-modal-actions button {
|
||||
min-height: 44px;
|
||||
height: auto;
|
||||
padding: 7px 12px;
|
||||
line-height: 1.25;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.update-modal-eyebrow,
|
||||
.update-changelog-toggle,
|
||||
.template-guide-preview-label {
|
||||
@@ -2167,6 +2577,20 @@ input[type="range"] {
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.top-nav::before {
|
||||
transition: transform 420ms cubic-bezier(0.22, 0.76, 0.22, 1), width 420ms cubic-bezier(0.22, 0.76, 0.22, 1), height 420ms cubic-bezier(0.22, 0.76, 0.22, 1) !important;
|
||||
}
|
||||
|
||||
.context-sidebar .streamers.streamer-indicator-ready::before {
|
||||
transition: transform 360ms cubic-bezier(0.22, 0.76, 0.22, 1), width 360ms cubic-bezier(0.22, 0.76, 0.22, 1), height 360ms cubic-bezier(0.22, 0.76, 0.22, 1) !important;
|
||||
}
|
||||
|
||||
.context-switcher.segmented-indicator-ready::before,
|
||||
.language-picker.segmented-indicator-ready::before,
|
||||
[data-context-for="settings"] .context-list.segmented-indicator-ready::before {
|
||||
transition: transform 360ms cubic-bezier(0.22, 0.76, 0.22, 1), width 360ms cubic-bezier(0.22, 0.76, 0.22, 1), height 360ms cubic-bezier(0.22, 0.76, 0.22, 1) !important;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
@@ -2295,7 +2719,7 @@ input[type="range"] {
|
||||
|
||||
.update-banner.workspace-update {
|
||||
position: relative;
|
||||
display: flex;
|
||||
display: none;
|
||||
width: auto;
|
||||
min-width: 90px;
|
||||
height: 40px;
|
||||
@@ -2309,7 +2733,7 @@ input[type="range"] {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.update-banner.workspace-update.show {
|
||||
.update-banner.workspace-update.show:not([hidden]) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@@ -2422,6 +2846,8 @@ input[type="range"] {
|
||||
|
||||
.context-switcher {
|
||||
display: flex;
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% - 24px);
|
||||
min-height: 36px;
|
||||
@@ -2433,8 +2859,39 @@ input[type="range"] {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.context-switcher::before,
|
||||
.language-picker::before,
|
||||
[data-context-for="settings"] .context-list::before {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: var(--segment-active-width, 0px);
|
||||
height: var(--segment-active-height, 0px);
|
||||
pointer-events: none;
|
||||
background: var(--workspace-primary);
|
||||
border-radius: 5px;
|
||||
content: '';
|
||||
opacity: 0;
|
||||
transform: translate3d(var(--segment-active-x, 0px), var(--segment-active-y, 0px), 0);
|
||||
}
|
||||
|
||||
.context-switcher.segmented-indicator-visible::before,
|
||||
.language-picker.segmented-indicator-visible::before,
|
||||
[data-context-for="settings"] .context-list.segmented-indicator-visible::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.context-switcher.segmented-indicator-ready::before,
|
||||
.language-picker.segmented-indicator-ready::before,
|
||||
[data-context-for="settings"] .context-list.segmented-indicator-ready::before {
|
||||
transition: transform 360ms cubic-bezier(0.22, 0.76, 0.22, 1), width 360ms cubic-bezier(0.22, 0.76, 0.22, 1), height 360ms cubic-bezier(0.22, 0.76, 0.22, 1);
|
||||
}
|
||||
|
||||
.context-switcher button {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex: 1 1 0;
|
||||
height: 28px;
|
||||
align-items: center;
|
||||
@@ -2455,7 +2912,53 @@ input[type="range"] {
|
||||
|
||||
.context-switcher button.active {
|
||||
color: var(--workspace-primary-text);
|
||||
background: var(--workspace-primary);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.context-switcher button.active:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#settingsTab .language-picker {
|
||||
display: grid;
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 4px;
|
||||
padding: 4px;
|
||||
overflow: hidden;
|
||||
background: var(--workspace-border);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
#settingsTab .language-picker .lang-option {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
justify-content: center;
|
||||
min-width: 0;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#settingsTab .language-picker .lang-option > span:not(.flag-icon) {
|
||||
color: #fff;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
|
||||
#settingsTab .language-picker .lang-option:hover {
|
||||
background: var(--workspace-control);
|
||||
}
|
||||
|
||||
#settingsTab .language-picker .lang-option.active {
|
||||
color: var(--workspace-primary-text);
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#settingsTab .language-picker .lang-option.active:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.context-panel-heading {
|
||||
@@ -2483,6 +2986,16 @@ input[type="range"] {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
[data-context-for="settings"] .context-list {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
[data-context-for="settings"] .context-list::before {
|
||||
background: var(--workspace-control);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.context-link {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
@@ -2530,6 +3043,16 @@ input[type="range"] {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
[data-context-for="settings"] .context-link {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
[data-context-for="settings"] .context-link.active,
|
||||
[data-context-for="settings"] .context-link.active:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.context-sidebar .section-title,
|
||||
.context-sidebar .streamer-item,
|
||||
.context-sidebar .queue-title {
|
||||
@@ -2880,8 +3403,8 @@ input[type="range"] {
|
||||
|
||||
.top-nav-item.nav-item.active:hover {
|
||||
color: var(--workspace-primary-text);
|
||||
background: var(--workspace-primary-hover);
|
||||
border-color: var(--workspace-primary-hover);
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.top-nav .top-nav-item:focus-visible {
|
||||
@@ -2891,7 +3414,7 @@ input[type="range"] {
|
||||
}
|
||||
|
||||
#settingsTab .settings-card:has(#downloadPath) {
|
||||
width: min(720px, 100%);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#settingsTab .form-row:has(#downloadPath) {
|
||||
@@ -2909,6 +3432,114 @@ input[type="range"] {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.download-settings-storage {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.download-settings-layout {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
align-items: start;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.download-settings-column {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
#settingsTab .download-settings-section {
|
||||
min-width: 0;
|
||||
padding: 16px;
|
||||
background: var(--workspace-panel-raised);
|
||||
border: 1px solid var(--workspace-border);
|
||||
border-radius: var(--workspace-radius);
|
||||
}
|
||||
|
||||
#settingsTab .download-settings-section h4 {
|
||||
margin: 0 0 14px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.download-settings-section-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
#settingsTab .download-settings-section-heading h4 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.download-settings-section .form-group:last-child,
|
||||
.download-settings-section .filename-template-grid:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.download-settings-toggles {
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
#settingsTab .download-settings-toggles .toggle-row {
|
||||
min-height: 32px;
|
||||
gap: 10px;
|
||||
margin: 0;
|
||||
padding: 5px 7px;
|
||||
border-radius: var(--workspace-radius-small);
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
#settingsTab .download-settings-toggles .toggle-row:hover {
|
||||
background: var(--workspace-control-hover);
|
||||
}
|
||||
|
||||
#settingsTab .download-settings-toggles input[type="checkbox"],
|
||||
#settingsTab .sidebar-layout-setting input[type="checkbox"] {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
flex: 0 0 20px;
|
||||
background-size: 15px;
|
||||
}
|
||||
|
||||
.metadata-cache-setting {
|
||||
margin-top: 14px;
|
||||
margin-bottom: 0;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid var(--workspace-border);
|
||||
}
|
||||
|
||||
.template-presets {
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
#settingsTab .download-settings-section #filenameTemplateHint {
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
.sidebar-layout-setting {
|
||||
margin-top: 18px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--workspace-border);
|
||||
}
|
||||
|
||||
#settingsTab .sidebar-layout-setting .toggle-row {
|
||||
gap: 10px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#settingsTab .sidebar-layout-setting .form-note {
|
||||
margin: 7px 0 0 30px;
|
||||
}
|
||||
|
||||
#clipsTab.active {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(420px, 1.35fr) minmax(280px, 0.65fr);
|
||||
@@ -3111,9 +3742,9 @@ input[type="range"] {
|
||||
|
||||
@media (min-width: 1180px) {
|
||||
.topbar-navigation-cluster {
|
||||
flex: 0 1 1000px;
|
||||
width: 1000px;
|
||||
max-width: calc(100vw - 254px);
|
||||
flex: 1 1 auto;
|
||||
width: auto;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.topbar-navigation-cluster .topbar-brand {
|
||||
@@ -3141,7 +3772,7 @@ input[type="range"] {
|
||||
}
|
||||
|
||||
.topbar-navigation-cluster .top-nav-item.nav-item {
|
||||
flex: 1 1 auto;
|
||||
flex: 1 0 var(--top-nav-item-width, 100px);
|
||||
width: auto;
|
||||
min-width: 44px;
|
||||
max-width: none;
|
||||
@@ -3165,6 +3796,34 @@ input[type="range"] {
|
||||
border: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.topbar-navigation-cluster .top-nav-item[data-tab="vods"] {
|
||||
--top-nav-item-width: 110px;
|
||||
}
|
||||
|
||||
.topbar-navigation-cluster .top-nav-item[data-tab="clips"] {
|
||||
--top-nav-item-width: 110px;
|
||||
}
|
||||
|
||||
.topbar-navigation-cluster .top-nav-item[data-tab="cutter"] {
|
||||
--top-nav-item-width: 138px;
|
||||
}
|
||||
|
||||
.topbar-navigation-cluster .top-nav-item[data-tab="merge"] {
|
||||
--top-nav-item-width: 180px;
|
||||
}
|
||||
|
||||
.topbar-navigation-cluster .top-nav-item[data-tab="stats"] {
|
||||
--top-nav-item-width: 110px;
|
||||
}
|
||||
|
||||
.topbar-navigation-cluster .top-nav-item[data-tab="archive"] {
|
||||
--top-nav-item-width: 90px;
|
||||
}
|
||||
|
||||
.topbar-navigation-cluster .top-nav-item[data-tab="settings"] {
|
||||
--top-nav-item-width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1179px) {
|
||||
@@ -3195,6 +3854,12 @@ input[type="range"] {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.download-settings-layout {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
#clipsTab.active {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
|
||||
Reference in New Issue
Block a user