gfsd
This commit is contained in:
+280
-3
@@ -3160,6 +3160,50 @@ body.sidebar-right-hidden #sidebar-drag-zone {
|
||||
text-shadow: 0 0 16px rgba(var(--accent-rgb, 153, 255, 0), 0.35);
|
||||
}
|
||||
|
||||
.sidebar-media-placeholder.audio.has-cover {
|
||||
background: radial-gradient(circle at center, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.82) 85%), var(--nav-bg, #1e1e1e);
|
||||
}
|
||||
|
||||
.audio-cover-circle {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 155px;
|
||||
height: 155px;
|
||||
max-width: calc(100% - 40px);
|
||||
max-height: calc(100% - 40px);
|
||||
aspect-ratio: 1 / 1;
|
||||
border-radius: 50%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.88), 0 0 35px rgba(var(--accent-rgb, 153, 255, 0), 0.28), inset 0 0 20px rgba(0, 0, 0, 0.65);
|
||||
border: 2px solid rgba(var(--accent-rgb, 153, 255, 0), 0.4);
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
will-change: transform, box-shadow, border-color;
|
||||
}
|
||||
|
||||
.audio-cover-circle::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle at center, transparent 72%, rgba(0, 0, 0, 0.35) 92%, rgba(0, 0, 0, 0.75) 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sidebar-media-placeholder.audio.has-cover .audio-cover-circle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar-media-placeholder.audio.has-cover i {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.sidebar-media-placeholder.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
@@ -3170,12 +3214,223 @@ body.sidebar-right-hidden #sidebar-drag-zone {
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.album-thumb-item > .sidebar-media-placeholder.audio {
|
||||
z-index: 1;
|
||||
font-size: 1.25rem;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.thumb:has(.sidebar-media-placeholder),
|
||||
.thumb.thumb-fallback:has(.sidebar-media-placeholder) {
|
||||
opacity: 1 !important;
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
.v0ck > .sidebar-media-placeholder.audio,
|
||||
.album-audio-wrapper > .sidebar-media-placeholder.audio,
|
||||
.embed-responsive > .sidebar-media-placeholder.audio {
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
font-size: clamp(2rem, 5.5vw, 3.8rem);
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.v0ck:fullscreen > .sidebar-media-placeholder.audio,
|
||||
.v0ck.v0ck_fullscreen > .sidebar-media-placeholder.audio,
|
||||
#main:fullscreen .v0ck.v0ck_fullscreen > .sidebar-media-placeholder.audio,
|
||||
#onara-modal:fullscreen .v0ck.v0ck_fullscreen > .sidebar-media-placeholder.audio {
|
||||
font-size: clamp(3rem, 7.5vw, 5.5rem);
|
||||
}
|
||||
|
||||
.v0ck:fullscreen .audio-cover-circle,
|
||||
.v0ck.v0ck_fullscreen .audio-cover-circle,
|
||||
#main:fullscreen .v0ck.v0ck_fullscreen .audio-cover-circle,
|
||||
#onara-modal:fullscreen .v0ck.v0ck_fullscreen .audio-cover-circle {
|
||||
width: clamp(260px, 56vmin, 560px);
|
||||
height: clamp(260px, 56vmin, 560px);
|
||||
max-width: calc(100% - 80px);
|
||||
max-height: calc(100% - 100px);
|
||||
}
|
||||
|
||||
.sidebar-media-placeholder.audio i {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: inline-block;
|
||||
transform-origin: center center;
|
||||
will-change: transform, filter;
|
||||
transition: transform 0.015s linear;
|
||||
}
|
||||
|
||||
/* Audio Reactivity Tuner Overlay */
|
||||
.f0ck-tuner-toggle {
|
||||
position: fixed;
|
||||
bottom: 65px;
|
||||
right: 20px;
|
||||
z-index: 99998;
|
||||
background: var(--nav-bg, #1a1a1a);
|
||||
color: var(--accent, #99ff00);
|
||||
border: 1.5px solid var(--accent, #99ff00);
|
||||
border-radius: 20px;
|
||||
padding: 6px 13px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.65);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
transition: transform 0.15s ease, background-color 0.15s ease;
|
||||
}
|
||||
|
||||
.f0ck-tuner-toggle:hover {
|
||||
transform: scale(1.05);
|
||||
background: rgba(var(--accent-rgb, 153, 255, 0), 0.18);
|
||||
}
|
||||
|
||||
.f0ck-audio-tuner-panel {
|
||||
position: fixed;
|
||||
bottom: 110px;
|
||||
right: 20px;
|
||||
z-index: 99999;
|
||||
width: 320px;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
background: rgba(18, 18, 22, 0.95);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(var(--accent-rgb, 153, 255, 0), 0.45);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.9);
|
||||
padding: 14px 16px;
|
||||
color: #e6e6e6;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.f0ck-audio-tuner-panel.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.f0ck-tuner-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.f0ck-tuner-section-title {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
color: var(--accent, #99ff00);
|
||||
margin: 12px 0 6px 0;
|
||||
padding-bottom: 3px;
|
||||
border-bottom: 1px solid rgba(var(--accent-rgb, 153, 255, 0), 0.25);
|
||||
}
|
||||
|
||||
.f0ck-tuner-section-title:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.f0ck-tuner-title {
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
color: var(--accent, #99ff00);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.f0ck-tuner-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #888;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
.f0ck-tuner-close:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.f0ck-tuner-row {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.f0ck-tuner-row-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 4px;
|
||||
color: #bbb;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.f0ck-tuner-row-label span:last-child {
|
||||
font-weight: 700;
|
||||
color: var(--accent, #99ff00);
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.f0ck-tuner-row input[type="range"] {
|
||||
width: 100%;
|
||||
accent-color: var(--accent, #99ff00);
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
height: 4px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.f0ck-tuner-footer {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 14px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.f0ck-tuner-footer button {
|
||||
flex: 1;
|
||||
padding: 8px 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: filter 0.15s ease, background 0.15s ease;
|
||||
}
|
||||
|
||||
.f0ck-tuner-btn-copy {
|
||||
background: var(--accent, #99ff00);
|
||||
color: #000;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.f0ck-tuner-btn-copy:hover {
|
||||
filter: brightness(1.15);
|
||||
}
|
||||
|
||||
.f0ck-tuner-btn-reset {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: #ccc;
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.f0ck-tuner-btn-reset:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sidebar-video-details {
|
||||
display: flex;
|
||||
margin-top: 8px;
|
||||
@@ -8347,16 +8602,18 @@ video.emoji {
|
||||
|
||||
|
||||
/* visualizer */
|
||||
canvas {
|
||||
canvas.audio-visualizer,
|
||||
.v0ck canvas.audio-visualizer,
|
||||
.embed-responsive canvas.audio-visualizer {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
/* This removes the ugly 1px line seen at the bottom when you hover over the audio element */
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 1 !important;
|
||||
}
|
||||
|
||||
/* tags */
|
||||
@@ -13617,6 +13874,26 @@ body.layout-legacy .navbar-header {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.subf0ck-tag-scope {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--color-muted, #888);
|
||||
margin-bottom: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.subf0ck-tag-scope code {
|
||||
font-size: 11px;
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* ===== layout-modern: flexible by default, viewport-locked for item view ===== */
|
||||
@media (min-width: 1000px) {
|
||||
body.layout-modern {
|
||||
|
||||
Reference in New Issue
Block a user