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-18 00:32:53 +02:00
parent c8cfe07c70
commit 74f7884525
19 changed files with 1996 additions and 483 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/s/css/f0ckm.css
+244 -81
View File
@@ -42,13 +42,13 @@
--posts-meta-bg: #000000b8;
--x2154: #215483;
--bg-canvas-opacity: 0.81;
--bg-canvas-blur: 151px;
--bg-canvas-blur: 30px; /* runtime value set by applyBackgroundOpacitySettings() */
--bg-canvas-zoom: 1.38;
--bg-canvas-color: rgba(0, 0, 0, 0.09);
--bg-canvas-color-opacity: 0.09;
--onara-bg-opacity: 0.4;
--onara-bg-opacity: 0.6;
--onara-backdrop-blur: 5px;
--onara-grid-dim-opacity: 0.38;
--onara-grid-dim-opacity: 1.0;
}
html:not([theme]), html[theme=""] {
@@ -1844,7 +1844,7 @@ html[theme="f0ck95"] #next {
html[theme="4d"] {
--accent: #f2ef0b;
--accent-rgb: 31, 178, 176;
--accent-rgb: 242, 239, 11;
--bg: #242424;
--black: #000;
--white: #fff;
@@ -3215,7 +3215,7 @@ body.sidebar-right-hidden #sidebar-drag-zone {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(var(--accent-rgb, 153, 255, 0), 0.12), rgba(0, 0, 0, 0.45)), var(--nav-bg, #1e1e1e);
background: linear-gradient(135deg, rgba(var(--accent-rgb, 128, 128, 128), 0.12), rgba(0, 0, 0, 0.45)), var(--nav-bg, #1e1e1e);
color: var(--accent);
font-size: 2em;
}
@@ -3233,6 +3233,23 @@ body.sidebar-right-hidden #sidebar-drag-zone {
background: #000000;
}
.audio-cover-backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border-radius: inherit;
transition: opacity 0.25s ease, filter 0.25s ease;
will-change: opacity, transform, filter;
overflow: hidden;
}
.audio-reactive-bg {
position: absolute;
top: 0;
@@ -3242,8 +3259,9 @@ body.sidebar-right-hidden #sidebar-drag-zone {
pointer-events: none;
z-index: 0;
opacity: 0;
transition: opacity 0.3s ease;
will-change: background, opacity;
transition: opacity 0.35s ease;
will-change: opacity, transform;
overflow: hidden;
}
.audio-cover-circle {
@@ -3256,8 +3274,8 @@ body.sidebar-right-hidden #sidebar-drag-zone {
transform: translate(-50%, -50%);
width: 125px;
height: 125px;
max-width: calc(100% - 40px);
max-height: calc(100% - 40px);
max-width: none;
max-height: none;
aspect-ratio: 1 / 1;
border-radius: 50%;
background-size: cover;
@@ -3270,29 +3288,13 @@ body.sidebar-right-hidden #sidebar-drag-zone {
outline: none !important;
overflow: visible;
pointer-events: none;
z-index: 1;
z-index: 2;
will-change: transform, box-shadow, border-color;
}
/* Motion trail ghost — faint blurred echo of the eye that smears on fast movement */
/* Motion trail ghost — disabled so cover art is not projected around the eye */
.eye-trail-ghost {
position: absolute;
top: 50%;
left: 50%;
width: clamp(300px, 72vmin, 700px);
height: clamp(300px, 72vmin, 700px);
max-width: calc(100% - 60px);
max-height: calc(100% - 80px);
border-radius: 50%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: transparent;
pointer-events: none;
z-index: 0;
opacity: 0;
will-change: transform, opacity, filter;
mix-blend-mode: screen;
display: none !important;
}
.audio-eye-inner-canvas {
@@ -3345,6 +3347,21 @@ body.sidebar-right-hidden #sidebar-drag-zone {
display: none !important;
}
.thumb > .sidebar-media-placeholder .audio-cover-backdrop,
.album-thumb-item > .sidebar-media-placeholder .audio-cover-backdrop,
.item-preview .sidebar-media-placeholder .audio-cover-backdrop,
.sidebar-activity-item .sidebar-media-placeholder .audio-cover-backdrop,
.recent-comment-media .sidebar-media-placeholder .audio-cover-backdrop,
.posts .sidebar-media-placeholder .audio-cover-backdrop,
.thumb > .sidebar-media-placeholder .audio-reactive-bg,
.album-thumb-item > .sidebar-media-placeholder .audio-reactive-bg,
.item-preview .sidebar-media-placeholder .audio-reactive-bg,
.sidebar-activity-item .sidebar-media-placeholder .audio-reactive-bg,
.recent-comment-media .sidebar-media-placeholder .audio-reactive-bg,
.posts .sidebar-media-placeholder .audio-reactive-bg {
display: none !important;
}
.thumb > .sidebar-media-placeholder > i,
.album-thumb-item > .sidebar-media-placeholder > i,
.item-preview .sidebar-media-placeholder > i {
@@ -6098,6 +6115,7 @@ html[theme="f0ck95"] .admin-search button {
/* f0ck95dARK */
html[theme='f0ck95d'] {
--accent: #fff;
--accent-rgb: 255, 255, 255;
--bg: #0e0f0f;
--black: #000;
--white: #fff;
@@ -6524,6 +6542,9 @@ div.posts>a:not(.notif-item) {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
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);
}
div.posts>a:not(.notif-item)::before {
@@ -7119,11 +7140,7 @@ body.layout-modern.sidebar-right-hidden .pagination-container-fluid {
.content.fade-in-zoom,
._204863.fade-in-zoom,
.item_title.fade-in-zoom,
.item-title.fade-in-zoom,
#onara-modal .content.fade-in-zoom,
#onara-modal ._204863.fade-in-zoom,
#onara-modal .item_title.fade-in-zoom,
#onara-modal .item-title.fade-in-zoom {
.item-title.fade-in-zoom {
animation: contentFadeInZoom 0.35s cubic-bezier(0.16, 1, 0.3, 1) both !important;
will-change: transform, opacity;
}
@@ -7131,11 +7148,7 @@ body.layout-modern.sidebar-right-hidden .pagination-container-fluid {
.content.fade-out-zoom,
._204863.fade-out-zoom,
.item_title.fade-out-zoom,
.item-title.fade-out-zoom,
#onara-modal .content.fade-out-zoom,
#onara-modal ._204863.fade-out-zoom,
#onara-modal .item_title.fade-out-zoom,
#onara-modal .item-title.fade-out-zoom {
.item-title.fade-out-zoom {
animation: contentFadeOutZoom 0.18s cubic-bezier(0.3, 0, 0.8, 1) forwards !important;
pointer-events: none;
will-change: transform, opacity;
@@ -10486,10 +10499,11 @@ button#togglebg {
#bg.fader-out,
.fader-out {
opacity: 0 !important;
transition: opacity 0.22s cubic-bezier(0.25, 0, 0.4, 1) !important;
}
.fast-fade {
transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
transition: opacity 0.2s cubic-bezier(0.25, 0, 0.4, 1) !important;
}
.grid-transition {
@@ -10780,7 +10794,6 @@ input#s_avatar {
.tag-name {
color: var(--white, #fff);
font-weight: bold;
font-size: 1.1em;
font-family: var(--font, monospace);
word-break: break-word;
@@ -20818,19 +20831,22 @@ a.lazy-thumb.filtered-upload-ghost:hover::after {
ONARA ALTERNATIVE FLAVOR: Fullscreen See-Through Modal Wrapper
========================================================================== */
/* Prevent scrolling on background document when Onara modal is active */
body.onara-modal-open {
/* Prevent scrolling on background document when Onara modal is active or closing */
body.onara-modal-open,
body.onara-modal-closing {
overflow: hidden !important;
}
/* Override html's scrollbar-gutter: stable so the page fills full viewport width */
html:has(body.onara-modal-open) {
html:has(body.onara-modal-open),
html:has(body.onara-modal-closing) {
overflow: hidden !important;
scrollbar-gutter: auto !important;
}
/* Background main page elements and containers are transparent so #bg canvas and grid shine through */
body.onara-modal-open .pagewrapper {
body.onara-modal-open .pagewrapper,
body.onara-modal-closing .pagewrapper {
pointer-events: none !important;
user-select: none !important;
margin-top: var(--navbar-h, 50px) !important;
@@ -20838,21 +20854,32 @@ body.onara-modal-open .pagewrapper {
}
body.onara-modal-open .index-container,
body.onara-modal-open div.posts {
body.onara-modal-closing .index-container,
body.onara-modal-open div.posts,
body.onara-modal-closing div.posts {
background: transparent !important;
}
body.onara-modal-open .pagewrapper > *:not(.index-layout-wrapper):not(#main),
body.onara-modal-open .index-container > *:not(.posts),
body.onara-modal-open #footbar,
body.onara-modal-open .pagination-container-fluid {
body.onara-modal-open:not(.onara-modal-closing) .pagewrapper > *:not(.index-layout-wrapper):not(#main),
body.onara-modal-open:not(.onara-modal-closing) .index-container > *:not(.posts),
body.onara-modal-open:not(.onara-modal-closing) #footbar,
body.onara-modal-open:not(.onara-modal-closing) .pagination-container-fluid {
opacity: var(--onara-grid-dim-opacity, 1) !important;
filter: none !important;
transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
body.onara-modal-closing .pagewrapper > *:not(.index-layout-wrapper):not(#main),
body.onara-modal-closing .index-container > *:not(.posts),
body.onara-modal-closing #footbar,
body.onara-modal-closing .pagination-container-fluid {
opacity: 1 !important;
filter: none !important;
transition: opacity 0.2s cubic-bezier(0.25, 0, 0.4, 1) !important;
}
/* All non-active background thumbnails shine through with the configured grid opacity */
body.onara-modal-open .posts > a.thumb:not(.onara-active) {
body.onara-modal-open:not(.onara-modal-closing) .posts > a.thumb:not(.onara-active) {
opacity: var(--onara-grid-dim-opacity, 1) !important;
filter: none !important;
box-shadow: none !important;
@@ -20860,36 +20887,71 @@ body.onara-modal-open .posts > a.thumb:not(.onara-active) {
transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
body.onara-modal-open .posts > a.thumb:not(.onara-active)::after {
body.onara-modal-closing .posts > a.thumb:not(.onara-active) {
opacity: 1 !important;
filter: none !important;
box-shadow: none !important;
outline: none !important;
transition: opacity 0.2s cubic-bezier(0.25, 0, 0.4, 1) !important;
}
body.onara-modal-open:not(.onara-modal-closing) .posts > a.thumb:not(.onara-active)::after {
visibility: hidden !important;
opacity: 0 !important;
}
body.onara-modal-closing .posts > a.thumb:not(.onara-active)::after {
visibility: hidden !important;
opacity: 0 !important;
}
/* ONLY the single currently active thumbnail in the background shines through with prominent glow */
body.onara-modal-open .posts > a.thumb.onara-active {
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;
z-index: 50 !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;
}
body.onara-modal-open .posts > a.thumb.onara-active::after {
body.onara-modal-open:not(.onara-modal-closing) .posts > a.thumb.onara-active::after {
visibility: visible !important;
opacity: 1 !important;
transition: opacity 0.25s ease !important;
}
body.onara-modal-open .posts > a.thumb.loaded {
/* Smooth fade-out of active thumbnail border / glow when Onara modal closes */
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;
outline-color: transparent !important;
border-color: transparent !important;
z-index: 50 !important;
position: relative !important;
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;
}
body.onara-modal-closing .posts > a.thumb.onara-active::after {
opacity: 0 !important;
transition: opacity 0.2s cubic-bezier(0.25, 0, 0.4, 1) !important;
}
body.onara-modal-open .posts > a.thumb.loaded,
body.onara-modal-closing .posts > a.thumb.loaded {
opacity: 1 !important;
filter: none !important;
z-index: 50 !important;
position: relative !important;
}
body.onara-modal-open #bg,
body.onara-modal-open #bg.fader-in,
body.onara-modal-open #bg.fader-out,
body.onara-modal-open #bg.fast-fade {
body.onara-modal-open:not(.onara-modal-closing) #bg,
body.onara-modal-open:not(.onara-modal-closing) #bg.fader-in {
z-index: 51 !important;
cursor: pointer !important;
transition: width 0.3s ease-in-out !important;
@@ -20897,6 +20959,18 @@ body.onara-modal-open #bg.fast-fade {
opacity: var(--bg-canvas-opacity, 1.0) !important;
}
body.onara-modal-closing #bg,
body.onara-modal-closing #bg.fader-in,
body.onara-modal-closing #bg.fader-out,
body.onara-modal-closing #bg.fast-fade,
body.onara-modal-open #bg.fader-out {
z-index: 51 !important;
cursor: default !important;
pointer-events: none !important;
opacity: 0 !important;
transition: opacity 0.2s cubic-bezier(0.25, 0, 0.4, 1) !important;
}
/* Navbar and right sidebar stay fully visible, sharp, and interactive */
body.onara-modal-open nav.navbar {
opacity: 1 !important;
@@ -20962,33 +21036,34 @@ body.onara-modal-open .admin-bar.open {
overscroll-behavior-x: contain !important;
box-sizing: border-box !important;
opacity: 0;
transform: scale(0.99);
transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
right 0.3s ease-in-out !important;
cursor: pointer;
will-change: opacity, backdrop-filter;
transition: right 0.3s ease-in-out !important;
}
.onara-modal-wrapper::-webkit-scrollbar {
display: none;
}
body.onara-modal-open .onara-modal-wrapper,
.onara-modal-wrapper.onara-fade-in {
/* Static server-load fallback when page is directly visited on an onara item URL */
body.onara-modal-open .onara-modal-wrapper:not(.onara-fade-out):not(.onara-fade-in) {
display: flex !important;
opacity: 1 !important;
transform: scale(1) !important;
pointer-events: auto !important;
}
/* Silky animated opening */
.onara-modal-wrapper.onara-fade-in {
display: flex !important;
animation: onaraModalFadeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
pointer-events: auto !important;
}
/* Silky animated closing */
.onara-modal-wrapper.onara-fade-out {
display: flex !important;
opacity: 0 !important;
transform: scale(0.99) !important;
animation: onaraModalFadeOut 0.22s cubic-bezier(0.25, 0, 0.4, 1) forwards !important;
pointer-events: none !important;
transition: opacity 0.24s cubic-bezier(0.3, 0, 0.8, 1),
transform 0.24s cubic-bezier(0.3, 0, 0.8, 1),
right 0.3s ease-in-out !important;
}
/* Sidebar hidden: modal expands to right edge */
@@ -21013,25 +21088,33 @@ body.sidebar-right-hidden .onara-modal-wrapper {
}
}
@keyframes onaraFadeIn {
from {
@keyframes onaraModalFadeIn {
0% {
opacity: 0;
transform: scale(0.99);
backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
background: rgba(0, 0, 0, 0);
}
to {
100% {
opacity: 1;
transform: scale(1);
backdrop-filter: blur(var(--onara-backdrop-blur, 5px)) saturate(130%);
-webkit-backdrop-filter: blur(var(--onara-backdrop-blur, 5px)) saturate(130%);
background: rgba(0, 0, 0, var(--onara-bg-opacity, 0.6));
}
}
@keyframes onaraFadeOut {
from {
@keyframes onaraModalFadeOut {
0% {
opacity: 1;
transform: scale(1);
backdrop-filter: blur(var(--onara-backdrop-blur, 5px)) saturate(130%);
-webkit-backdrop-filter: blur(var(--onara-backdrop-blur, 5px)) saturate(130%);
background: rgba(0, 0, 0, var(--onara-bg-opacity, 0.6));
}
to {
100% {
opacity: 0;
transform: scale(0.99);
backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
background: rgba(0, 0, 0, 0);
}
}
@@ -21059,6 +21142,78 @@ body.sidebar-right-hidden .onara-modal-wrapper {
padding: 20px 0 80px 0 !important;
box-sizing: border-box !important;
cursor: pointer;
will-change: transform, opacity;
}
/* Smooth modal content elevation during entrance & exit */
.onara-modal-wrapper.onara-fade-in .onara-modal-content {
animation: onaraContentScaleIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}
.onara-modal-wrapper.onara-fade-out .onara-modal-content {
animation: onaraContentScaleOut 0.2s cubic-bezier(0.25, 0, 0.4, 1) forwards !important;
}
@keyframes onaraContentScaleIn {
0% {
opacity: 0;
transform: translateY(16px) scale(0.985);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes onaraContentScaleOut {
0% {
opacity: 1;
transform: translateY(0) scale(1);
}
100% {
opacity: 0;
transform: translateY(10px) scale(0.985);
}
}
/* Keep .blahlol completely static on new item load — never fade in or animate */
.blahlol,
.blahlol *,
#onara-item-mount .blahlol,
#onara-item-mount .blahlol * {
animation: none !important;
transition: none !important;
}
.blahlol,
#onara-item-mount .blahlol {
opacity: 1 !important;
transform: none !important;
visibility: visible !important;
}
#onara-item-mount .item-layout-container {
animation: none !important;
transform: none !important;
opacity: 1 !important;
}
/* Modern loading shimmer spinner inside mount */
.onara-mount-loading {
display: flex;
align-items: center;
justify-content: center;
min-height: 360px;
width: 100%;
color: var(--accent, #99ff00);
font-size: 2rem;
opacity: 0;
animation: onaraMountSpinnerFade 0.25s 0.12s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes onaraMountSpinnerFade {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 0.75; transform: scale(1); }
}
#onara-item-mount {
@@ -22036,6 +22191,11 @@ div#flash,
bottom: 58px;
}
/* YouTube controls occupy ~56px at the bottom — lift strip above them */
.album-gallery-container.is-youtube-active .album-thumbnails-strip {
bottom: 62px;
}
.album-gallery-container.is-video-active .image-modal-btn,
.album-gallery-container.is-audio-active .image-modal-btn {
display: none !important;
@@ -22046,6 +22206,9 @@ div#flash,
.album-gallery-container.is-audio-active .album-thumbnails-strip {
bottom: 48px;
}
.album-gallery-container.is-youtube-active .album-thumbnails-strip {
bottom: 52px;
}
}
.album-thumb-item {