kibi/f0ckm
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

gfds

Browse Source
This commit is contained in:
kibi
2026-09-29 20:03:40 +02:00
parent ed42b1595c
commit b94b260f20
3 changed files with 329 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/s/css/f0ckm.css
+95 -6
View File
@@ -21640,7 +21640,8 @@ body.onara-modal-open:not(.onara-modal-closing) .posts > a.thumb:not(.onara-acti
filter: none !important;
box-shadow: none !important;
outline: none !important;
transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
scale 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
body.onara-modal-closing .posts > a.thumb:not(.onara-active) {
@@ -21648,7 +21649,9 @@ body.onara-modal-closing .posts > a.thumb:not(.onara-active) {
filter: none !important;
box-shadow: none !important;
outline: none !important;
transition: opacity 0.2s cubic-bezier(0.25, 0, 0.4, 1) !important;
scale: 1;
transition: opacity 0.2s cubic-bezier(0.25, 0, 0.4, 1),
scale 0.3s cubic-bezier(0.25, 0, 0.4, 1) !important;
}
body.onara-modal-open:not(.onara-modal-closing) .posts > a.thumb:not(.onara-active)::after {
@@ -21665,10 +21668,15 @@ body.onara-modal-closing .posts > a.thumb:not(.onara-active)::after {
body.onara-modal-open:not(.onara-modal-closing) .posts > a.thumb.onara-active {
opacity: 1 !important;
filter: none !important;
box-shadow: 0 0 0 3px var(--accent, #9f0), 0 0 20px var(--accent, #9f0), 0 0 35px rgba(255, 255, 255, 0.9) !important;
/* Accent ring + glow, plus a depth shadow underneath for the lifted-out 3D look */
box-shadow: 0 0 0 3px var(--accent, #9f0), 0 0 20px var(--accent, #9f0), 0 0 35px rgba(255, 255, 255, 0.9),
0 18px 40px rgba(0, 0, 0, 0.7) !important;
z-index: 52 !important;
position: relative !important;
transition: box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease !important;
/* Pops out toward the viewer (scale is separate from the magnetic hover's translate) */
scale: 1.1;
transition: box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease,
scale 0.45s cubic-bezier(0.22, 1.3, 0.36, 1) !important;
}
body.onara-modal-open:not(.onara-modal-closing) .posts > a.thumb.onara-active::after {
@@ -21682,15 +21690,17 @@ body.onara-modal-closing .posts > a.thumb.onara-active,
body.onara-modal-closing .posts > a.thumb.loaded.onara-active {
opacity: 1 !important;
filter: none !important;
box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent, 0 0 0 0 transparent !important;
box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent, 0 0 0 0 transparent, 0 0 0 0 transparent !important;
outline-color: transparent !important;
border-color: transparent !important;
z-index: 50 !important;
position: relative !important;
scale: 1;
transition: box-shadow 0.2s cubic-bezier(0.25, 0, 0.4, 1),
outline-color 0.2s cubic-bezier(0.25, 0, 0.4, 1),
border-color 0.2s cubic-bezier(0.25, 0, 0.4, 1),
opacity 0.2s cubic-bezier(0.25, 0, 0.4, 1) !important;
opacity 0.2s cubic-bezier(0.25, 0, 0.4, 1),
scale 0.3s cubic-bezier(0.25, 0, 0.4, 1) !important;
}
body.onara-modal-closing .posts > a.thumb.onara-active::after {
@@ -23511,3 +23521,82 @@ html.album-strip-dragging * {
align-items: center;
height: 100%;
}
/* Magnetic thumbnail hover (f0ckm.js): one ring per grid glides between thumbnails with a slight spring
overshoot; the hovered thumb leans toward the cursor (--pull-x/--pull-y). Flat 1px ring, no glow.
Transform/translate only, so it stays on the compositor. */
div.posts > .thumb-magnet {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
z-index: 3;
pointer-events: none;
box-shadow: 0 0 0 1px var(--white);
opacity: 0;
will-change: transform;
transition:
transform 0.32s cubic-bezier(0.22, 1.25, 0.36, 1),
width 0.32s cubic-bezier(0.22, 1.25, 0.36, 1),
height 0.32s cubic-bezier(0.22, 1.25, 0.36, 1),
opacity 0.15s ease;
}
div.posts > .thumb-magnet.is-on {
opacity: 1;
}
div.posts > .thumb-magnet.no-glide {
transition: opacity 0.15s ease;
}
/* The thumbnail the ring is on (mouse or keyboard) drops its own hover/focus/touch-active shadow, so
only the gliding ring shows; a plain touch tap without the ring keeps its own highlight */
div.posts.has-thumb-magnet > a.magnet-target:not(.notif-item) {
box-shadow: none;
}
div.posts.has-thumb-magnet > a.thumb:not(.notif-item) {
translate: var(--pull-x, 0px) var(--pull-y, 0px);
transition: box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
outline-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
translate 0.3s cubic-bezier(0.22, 1.25, 0.36, 1);
}
/* Rubber-band thumbnail drag (f0ckm.js): follows the mouse 1:1 while held (no translate transition),
then springs back on release with the regular translate transition, a bit slower and bouncier */
div.posts.has-thumb-magnet > a.thumb.thumb-dragging:not(.notif-item),
div.posts > a.thumb.thumb-dragging:not(.notif-item) {
translate: var(--pull-x, 0px) var(--pull-y, 0px);
transition: box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
z-index: 4;
}
div.posts > a.thumb:not(.notif-item):not(.thumb-dragging) {
translate: var(--pull-x, 0px) var(--pull-y, 0px);
}
div.posts > a.thumb.thumb-returning:not(.notif-item) {
transition: box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
outline-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
translate 0.5s cubic-bezier(0.22, 1.45, 0.36, 1);
}
div.posts > .thumb-magnet.is-dragging {
transition: opacity 0.15s ease;
}
html.thumb-drag-active,
html.thumb-drag-active * {
cursor: grabbing !important;
user-select: none !important;
}
div.posts > .thumb-magnet.is-returning {
transition:
transform 0.5s cubic-bezier(0.22, 1.45, 0.36, 1),
opacity 0.15s ease;
}
public/s/css/v0ck.css
+20 -1
View File
@@ -838,4 +838,23 @@
.v0ck:not(.v0ck_hover),
.v0ck:not(.v0ck_hover) * {
cursor: none !important;
}
}
/* Volume: pointer over the whole volume area, not only the 5px slider strip, including the slider's
thumb/track parts (Firefox doesn't hand the input's cursor to them). Only while the controls are
shown, so the idle cursor auto-hide above still applies. */
.v0ck.v0ck_hover .v0ck_volume_group,
.v0ck.v0ck_hover .v0ck_volume_group *,
.v0ck.v0ck_hover .v0ck_volume_group input[type="range"][name="volume"] {
cursor: pointer !important;
}
/* Vendor pseudo-elements in separate rules: one unknown pseudo-element drops a whole selector list */
.v0ck.v0ck_hover .v0ck_volume_group input[type="range"][name="volume"]::-webkit-slider-thumb,
.v0ck.v0ck_hover .v0ck_volume_group input[type="range"][name="volume"]::-webkit-slider-runnable-track {
cursor: pointer !important;
}
.v0ck.v0ck_hover .v0ck_volume_group input[type="range"][name="volume"]::-moz-range-thumb,
.v0ck.v0ck_hover .v0ck_volume_group input[type="range"][name="volume"]::-moz-range-track {
cursor: pointer !important;
}