gfds
This commit is contained in:
+369
-190
@@ -2665,10 +2665,14 @@ body.layout-modern .global-sidebar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
overflow: hidden;
|
||||
overflow: clip;
|
||||
top: var(--navbar-h, 50px) !important;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
/* Visibility lives on the pill (below): the strip can't be hovered anymore since it's click-through */
|
||||
opacity: 1;
|
||||
/* The strip itself is click-through (overrides the inline pointer-events JS sets), so it never blocks
|
||||
what's underneath, e.g. the page modal's close button. Only the pill below takes pointer events;
|
||||
events on a pseudo-element still target #sidebar-drag-zone, so the drag/click handlers keep working. */
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
#sidebar-drag-zone::after {
|
||||
@@ -2679,32 +2683,26 @@ body.layout-modern .global-sidebar-right {
|
||||
height: 40px;
|
||||
border-radius: 2px;
|
||||
background: var(--accent, #888);
|
||||
/* Resting: only a sliver peeks past the edge */
|
||||
transform: translateX(3px);
|
||||
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), height 0.28s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
opacity: 0.45;
|
||||
transition: height 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
|
||||
}
|
||||
|
||||
#sidebar-drag-zone:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
body.sidebar-right-hidden #sidebar-drag-zone {
|
||||
body.sidebar-right-hidden #sidebar-drag-zone::after {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Hovering the pill brightens and grows it — no lateral movement keeps the cursor stable */
|
||||
#sidebar-drag-zone:hover::after {
|
||||
transform: translateX(-3px);
|
||||
opacity: 1;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
/* Touch devices: no hover, so the handle stays fully out */
|
||||
/* Touch devices: no hover, so the handle stays fully visible */
|
||||
@media (pointer: coarse) {
|
||||
#sidebar-drag-zone {
|
||||
opacity: 0.7;
|
||||
padding-right: 3px;
|
||||
}
|
||||
#sidebar-drag-zone::after {
|
||||
transform: none;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3838,13 +3836,12 @@ body.sidebar-right-hidden #sidebar-drag-zone {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
overscroll-behavior-x: contain;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
|
||||
/* No visible scrollbar: drag, swipe, or turn the mouse wheel (f0ckm.js maps it to sideways) */
|
||||
scrollbar-width: none !important;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
.f0ck-tuner-subtabs-nav::-webkit-scrollbar,
|
||||
.f0ck-tuner-mode-bar::-webkit-scrollbar { height: 4px; }
|
||||
.f0ck-tuner-subtabs-nav::-webkit-scrollbar-thumb,
|
||||
.f0ck-tuner-mode-bar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); }
|
||||
.f0ck-tuner-mode-bar::-webkit-scrollbar { display: none; width: 0; height: 0; }
|
||||
/* Buttons keep their natural width (grow to fill when there is room); mode-bar buttons set flex:1 inline */
|
||||
.f0ck-tuner-subtabs-nav > .f0ck-tuner-subtab-btn { flex: 1 0 auto; }
|
||||
.f0ck-tuner-mode-bar > .f0ck-tuner-mode-btn { flex: 1 0 auto !important; }
|
||||
@@ -7465,7 +7462,7 @@ body.layout-modern.sidebar-right-hidden .pagination-container-fluid {
|
||||
|
||||
.location a:hover,
|
||||
.location .location-link:hover {
|
||||
color: #4ade80;
|
||||
color: var(--accent);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@@ -7669,6 +7666,18 @@ body:has(.index-container) > .pagewrapper > #main {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Main page scroller: scrolls as before (wheel, touch, keyboard, infinite scroll) but draws no scrollbar */
|
||||
.index-container {
|
||||
scrollbar-width: none !important;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.index-container::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 361px) {
|
||||
.embed-responsive-image {
|
||||
bottom: unset !important;
|
||||
@@ -10580,7 +10589,6 @@ ul.navbar-nav-guests li.nav-item {
|
||||
|
||||
.user_content_wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-column-gap: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
@@ -11453,6 +11461,33 @@ input#s_avatar {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Own uploads awaiting approval: count on the right of the "Pending" entry */
|
||||
.nav-user-menu a.nav-menu-pending {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.nav-menu-count {
|
||||
min-width: 18px;
|
||||
padding: 1px 5px;
|
||||
box-sizing: border-box;
|
||||
background: var(--accent);
|
||||
color: #000;
|
||||
font-size: 0.75em;
|
||||
font-weight: 800;
|
||||
line-height: 1.4;
|
||||
text-align: center;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* Nothing waiting: still shown, but quiet */
|
||||
.nav-menu-count.is-zero {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: var(--text-muted, #8a8f98);
|
||||
}
|
||||
|
||||
.nav-user-divider {
|
||||
display: none;
|
||||
height: 1px;
|
||||
@@ -12648,10 +12683,6 @@ span.badge.badge-current {
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
#help-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.comment-content img {
|
||||
/*max-height: 200px;*/
|
||||
max-width: 480px;
|
||||
@@ -12963,8 +12994,21 @@ html[theme='paper'] .steuerung.steuerung-icon button:hover,
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
/* "Back to top" below the comments, all screen sizes; f0ckm.js toggles .is-visible once the
|
||||
container it sits in is scrolled far enough (class name kept from when it was mobile-only) */
|
||||
.mobile-scroll-to-top {
|
||||
display: none;
|
||||
/* Same size as the steuerung chevrons (.steuerung-icon: x-large, 1.6em wide, icon at 0.85em) */
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.6em;
|
||||
height: 1.6em;
|
||||
padding: 0;
|
||||
font-size: x-large;
|
||||
line-height: 1;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease, visibility 0s linear 0.2s;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--white);
|
||||
@@ -12973,39 +13017,26 @@ html[theme='paper'] .steuerung.steuerung-icon button:hover,
|
||||
cursor: pointer;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.mobile-scroll-to-top .fa-solid {
|
||||
font-size: 0.85em;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (max-width: 999px) {
|
||||
/* Only once the reader is far enough down for it to help (f0ckm.js toggles .is-visible) */
|
||||
.mobile-scroll-to-top {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease, visibility 0s linear 0.2s;
|
||||
}
|
||||
.mobile-scroll-to-top.is-visible {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s ease, visibility 0s;
|
||||
}
|
||||
.mobile-scroll-to-top.is-visible {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: opacity 0.15s ease, visibility 0s;
|
||||
}
|
||||
|
||||
/* At 600–999px: center the button in the free space left of the sidebar.
|
||||
Shift left by half the sidebar width so transform:translateX(-50%) lands
|
||||
at the center of the available area rather than the full viewport. */
|
||||
@media (min-width: 600px) and (max-width: 999px) {
|
||||
.mobile-scroll-to-top {
|
||||
left: calc(50% - min(140px, 40vw));
|
||||
transition: left 0.3s ease-in-out;
|
||||
}
|
||||
/* Hover / press feedback like the steuerung controls (is-clicked is set by the shared feedback) */
|
||||
.mobile-scroll-to-top.is-visible:hover { opacity: 0.8; }
|
||||
.mobile-scroll-to-top.is-visible:active,
|
||||
.mobile-scroll-to-top.is-visible.is-clicked { opacity: 0.6; }
|
||||
|
||||
body.sidebar-right-hidden .mobile-scroll-to-top {
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
/* Horizontal centre next to the right sidebar is computed in f0ckm.js (inline `left`);
|
||||
50% above is only the fallback before the script has run */
|
||||
|
||||
.steuerung.steuerung-icon .fa-solid {
|
||||
font-size: 0.85em;
|
||||
@@ -13489,7 +13520,7 @@ body > nav.navbar {
|
||||
|
||||
/* On mobile: right group stays in the single top row */
|
||||
.nav-right-group {
|
||||
gap: 5px;
|
||||
gap: 15px;
|
||||
padding: 0 4px;
|
||||
margin-left: auto;
|
||||
}
|
||||
@@ -14589,99 +14620,100 @@ div.posts>a::after {
|
||||
background: #333;
|
||||
}
|
||||
|
||||
/* Video Player Settings Menu */
|
||||
/* Video Player Settings Menu: style guide (square, flat, theme colours, no glow) */
|
||||
.v0ck_settings_container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
/* Fix alignment */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.v0ck_settings_menu {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
/* Position above the button */
|
||||
right: 0;
|
||||
margin-bottom: 5px;
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
padding: 5px 0;
|
||||
margin-bottom: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 100px;
|
||||
align-items: stretch;
|
||||
min-width: 190px;
|
||||
padding: 4px 0;
|
||||
box-sizing: border-box;
|
||||
background: var(--bg, #111);
|
||||
border: 1px solid var(--accent);
|
||||
border-radius: 0;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
|
||||
z-index: 20;
|
||||
/* Ensure it's above other controls */
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.v0ck_settings_menu.v0ck_hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.v0ck_settings_menu,
|
||||
.v0ck_settings_menu * {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Rows: label left, control right; one flat hover surface */
|
||||
.v0ck_menu_item {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #fff;
|
||||
padding: 8px 15px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
white-space: nowrap;
|
||||
transition: background-color 0.2s;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.v0ck_menu_item:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ... (rest of CSS) */
|
||||
/* Specific styling for SWF/BG buttons now in menu */
|
||||
#toggleswf {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
/* Center text */
|
||||
}
|
||||
|
||||
/* Background Row Styling */
|
||||
.v0ck_bg_row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
/* Label on left, switch on right? Or center? User asked for "items centered". */
|
||||
/* If items centered, maybe justify-content: center with a gap? */
|
||||
/* Let's try space-between for the row content (Label ... Switch) looks better usually,
|
||||
but if the menu is wide, it might look odd.
|
||||
Let's stick to space-between for the row, but ensure the menu itself centers the row?
|
||||
The row IS the menu item.
|
||||
Let's use space-between for label and switch.
|
||||
*/
|
||||
justify-content: space-between;
|
||||
padding: 8px 15px;
|
||||
gap: 14px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 8px 12px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: var(--text-color, #fff);
|
||||
font-family: inherit;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
line-height: 1.2;
|
||||
text-transform: uppercase;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.v0ck_menu_item:hover {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.v0ck_bg_row {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Plain action rows (Download): accent on hover, separated from the toggles above */
|
||||
button.v0ck_menu_item {
|
||||
margin-top: 4px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
button.v0ck_menu_item:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.v0ck_switch_label {
|
||||
margin-right: 10px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Cool Switch Styling */
|
||||
/* Square switch: accent track with black knob when on */
|
||||
.v0ck_cool_switch {
|
||||
width: 36px;
|
||||
height: 20px;
|
||||
background-color: #555;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
width: 32px;
|
||||
height: 16px;
|
||||
box-sizing: border-box;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
transition: background-color 0.15s, border-color 0.15s;
|
||||
}
|
||||
|
||||
.v0ck_cool_switch::after {
|
||||
@@ -14689,39 +14721,24 @@ div.posts>a::after {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
transition: transform 0.3s;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #fff;
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
|
||||
.v0ck_cool_switch.active {
|
||||
background-color: var(--gray);
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.v0ck_cool_switch.active::after {
|
||||
background: #000;
|
||||
transform: translateX(16px);
|
||||
}
|
||||
|
||||
.v0ck_cool_switch:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* Update Menu Item Styling for Centering */
|
||||
.v0ck_menu_item {
|
||||
/* ... existing styles ... */
|
||||
/* We want to center the SWF button text */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Ensure menu itself centers items? */
|
||||
.v0ck_settings_menu {
|
||||
/* ... existing styles ... */
|
||||
align-items: center;
|
||||
/* Center items horizontally */
|
||||
min-width: 160px;
|
||||
/* Ensure enough width */
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
/* Fix hover effect for settings button (viewBox scaling issue) */
|
||||
@@ -15178,7 +15195,6 @@ html[theme='paper'] .badge.badge-untagged {
|
||||
|
||||
#help-button:hover {
|
||||
opacity: 1 !important;
|
||||
color: var(--white) !important;
|
||||
}
|
||||
|
||||
#shortcut-theme {
|
||||
@@ -15416,52 +15432,150 @@ body.layout-modern .tag-ac-input {
|
||||
filter: drop-shadow(0 0 15px var(--accent));
|
||||
}
|
||||
|
||||
/* Upload Drag Modal */
|
||||
/* Upload modal: a dropdown right under the navbar "Upload" link (f0ck_upload_init.js positions it),
|
||||
style guide (square, flat, theme colours). The rest of the page stays visible: no dim, no blur,
|
||||
the full-screen layer lets clicks through, only the panel takes them. */
|
||||
#upload-drag-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
backdrop-filter: blur(5px);
|
||||
z-index: 10001;
|
||||
inset: 0;
|
||||
/* Above the sticky navbar (10070) and so its MOTD row; below the mobile nav menu (10075) */
|
||||
z-index: 10072;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#upload-drag-modal.show {
|
||||
display: flex;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#upload-drag-modal .modal-content {
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--shade3, #333);
|
||||
padding: 0;
|
||||
width: 900px;
|
||||
max-width: 95vw;
|
||||
position: relative;
|
||||
max-height: 90vh;
|
||||
position: fixed;
|
||||
top: calc(var(--navbar-h, 50px) + 6px);
|
||||
left: 8px;
|
||||
width: min(760px, calc(100vw - 16px));
|
||||
max-width: none;
|
||||
max-height: calc(100vh - var(--navbar-h, 50px) - 18px);
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
background: var(--bg, #111);
|
||||
border: 1px solid var(--accent);
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
|
||||
pointer-events: auto;
|
||||
scrollbar-width: none;
|
||||
animation: upload-dropdown-in 0.16s ease-out;
|
||||
}
|
||||
|
||||
#upload-drag-modal .modal-content::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@keyframes upload-dropdown-in {
|
||||
from { opacity: 0; transform: translateY(-6px); }
|
||||
to { opacity: 1; transform: none; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
#upload-drag-modal .modal-content { animation: none; }
|
||||
}
|
||||
|
||||
#upload-drag-modal .modal-content,
|
||||
#upload-drag-modal .modal-content *,
|
||||
#upload-drag-modal .modal-content *::before,
|
||||
#upload-drag-modal .modal-content *::after {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
#upload-drag-modal .modal-close {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--white);
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
z-index: 10;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
color: var(--text-color, var(--white, #fff));
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s, border-color 0.15s;
|
||||
}
|
||||
|
||||
#upload-drag-modal .modal-close:hover {
|
||||
color: var(--accent);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
/* Header / scrolling body / footer: the panel itself doesn't scroll (so the close button stays put),
|
||||
.modal-body does; the title sticks to its top, the upload button + progress + status to its bottom */
|
||||
#upload-drag-modal .modal-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#upload-drag-modal .modal-body {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
padding: 0 18px;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
#upload-drag-modal .modal-body::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#upload-drag-modal .upload-title {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
/* Above everything the form layers inside the panel (badges 5-100, tag input 9998, emoji picker 10000);
|
||||
all of it lives in the panel's own stacking context, so these numbers don't leak outside */
|
||||
z-index: 10001;
|
||||
margin: 0 -18px 12px;
|
||||
padding: 16px 62px 12px 18px;
|
||||
background: var(--bg, #111);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
font-size: 1.05em;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#upload-drag-modal .modal-close {
|
||||
z-index: 10002;
|
||||
}
|
||||
|
||||
#upload-drag-modal .upload-footer {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 10001;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin: 4px -1rem -1rem;
|
||||
padding: 12px 1rem 14px;
|
||||
background: var(--bg, #111);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
#upload-drag-modal .upload-footer .upload-status {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#upload-drag-modal .upload-container {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Private Society Gate */
|
||||
@@ -15547,11 +15661,52 @@ body.layout-modern .tag-ac-input {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Navbar "Upload" while its dropdown is open (f0ck_upload_init.js) */
|
||||
nav.navbar #nav-upload-link.is-active,
|
||||
nav.navbar #nav-upload-link.is-active i {
|
||||
color: var(--accent) !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
nav.navbar #nav-upload-link.is-active {
|
||||
box-shadow: inset 0 -2px 0 var(--accent);
|
||||
}
|
||||
|
||||
nav.navbar #nav-upload-link.is-active i {
|
||||
display: inline-block;
|
||||
transform: rotate(180deg);
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
|
||||
/* Navbar entries (settings gear, user/anon menu "Settings") whose page is open in the page modal */
|
||||
nav.navbar a[data-page-modal].is-active,
|
||||
nav.navbar a[data-page-modal].is-active i {
|
||||
color: var(--accent) !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
nav.navbar a.desktop-only[data-page-modal].is-active {
|
||||
box-shadow: inset 0 -2px 0 var(--accent);
|
||||
}
|
||||
|
||||
/* Entry whose page is open in the page modal (clicking it again closes the page) */
|
||||
.global-sidebar-right-footer>a.is-active {
|
||||
opacity: 1;
|
||||
color: var(--accent);
|
||||
box-shadow: inset 0 -2px 0 var(--accent);
|
||||
}
|
||||
|
||||
#help-button {
|
||||
cursor: pointer;
|
||||
padding: 0 10px;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Divider between every entry; the last one (random, far right) closes the row */
|
||||
.global-sidebar-right-footer>#help-button:not(:last-child) {
|
||||
border-right: 1px solid var(--gray);
|
||||
}
|
||||
|
||||
.global-sidebar-right-footer>:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.git-hash {
|
||||
@@ -17389,6 +17544,35 @@ body.layout-legacy .gapRight>.iconset#a_favo {
|
||||
fill: inherit;
|
||||
}
|
||||
|
||||
/* ── .gapRight action row: style guide (square, flat, theme colours, no glow) ──
|
||||
Forced because some actions set rounded corners / shadows inline (chan rehost pills) or via
|
||||
infobox rules (text-shadow, hover scale). The favourite heart keeps its pink "favourited" colour. */
|
||||
.gapRight,
|
||||
.gapRight *,
|
||||
.gapRight *::before,
|
||||
.gapRight *::after {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.gapRight :is(button, a, i, svg, .iconset) {
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
/* No hover scale; not !important, so the favourite "pop" animation still plays */
|
||||
.gapRight :is(button, a, i, svg, .iconset):hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.gapRight :is(button, a, i, svg, .iconset):active {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.gapRight :is(button, a, i, svg, .iconset):focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* OC Toggle Icon - inherits from .gapRight i.iconset */
|
||||
i.iconset#a_oc {
|
||||
color: inherit;
|
||||
@@ -17753,8 +17937,8 @@ textarea#profile_description {
|
||||
|
||||
|
||||
.user-infobox-avatar img {
|
||||
width: auto;
|
||||
height: 22px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
@@ -17809,18 +17993,8 @@ textarea#profile_description {
|
||||
body.layout-legacy .user-infobox-block .gapRight > #a_favo.fa-regular,
|
||||
body.layout-modern .user-infobox-block .gapRight > #a_favo.fa-regular {
|
||||
font-weight: 400 !important;
|
||||
background: transparent !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.user-infobox-block #a_favo.fa-regular:hover,
|
||||
.user-infobox-block .gapRight #a_favo.fa-regular:hover,
|
||||
.user-infobox-block .user-infobox-actions #a_favo.fa-regular:hover,
|
||||
body.layout-legacy .user-infobox-block .gapRight > #a_favo.fa-regular:hover,
|
||||
body.layout-modern .user-infobox-block .gapRight > #a_favo.fa-regular:hover {
|
||||
background: transparent !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.user-infobox-block #a_favo.fa-regular::before,
|
||||
.user-infobox-block .gapRight #a_favo.fa-regular::before,
|
||||
@@ -21641,16 +21815,17 @@ body.layout-modern #onara-modal .item-layout-container .item-main-content {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#onara-modal a,
|
||||
#onara-modal button,
|
||||
#onara-modal .btn,
|
||||
#onara-modal [role="button"],
|
||||
#onara-modal label,
|
||||
#onara-modal .rating-tag,
|
||||
#onara-modal .sidebar-tag {
|
||||
/* Clickables keep the pointer. :is() takes its most specific argument (a[href]), so this outranks the
|
||||
`cursor: default` block above, including for clickables that are direct children of .item-main-content */
|
||||
#onara-modal :is(a, a[href], button, .btn, [role="button"], label, .rating-tag, .sidebar-tag,
|
||||
.iconset, .mobile-scroll-to-top, .danmaku-marker, summary, select) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#onara-modal :is(button, .btn, [role="button"]):disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
#onara-modal input,
|
||||
#onara-modal textarea,
|
||||
#onara-modal [contenteditable="true"] {
|
||||
@@ -23012,3 +23187,7 @@ html.range-tap-lock input[type="range"].range-unlocked {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
a#nav-upload-link {
|
||||
user-select: none;
|
||||
}
|
||||
+27
-3
@@ -5,7 +5,7 @@
|
||||
padding: 0;
|
||||
animation: uploadReveal 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
||||
opacity: 0;
|
||||
margin: 0 auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -25,17 +25,29 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Title line: title left, upload limit right (wraps under it on narrow screens) */
|
||||
.upload-title {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px 14px;
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
/* Upload Limit Info */
|
||||
/* Upload Limit Info (inside the title line; keeps its own small, normal-case text) */
|
||||
.upload-limit-info {
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.upload-title .upload-limit-info {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.upload-limit-info i {
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
@@ -1011,6 +1023,18 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Groups button + progress + status (pinned in the upload dropdown, see f0ckm.css); same spacing as the form */
|
||||
.upload-footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
/* Only takes space when there is a message; the progress bar is display:none until an upload runs */
|
||||
.upload-status:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.upload-status.error {
|
||||
color: #ff6b6b;
|
||||
}
|
||||
|
||||
@@ -326,6 +326,144 @@
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
/* Comment markers (danmaku.js): one tick per timeline comment; click = jump there + show the pill.
|
||||
The layer passes clicks through (normal scrubbing); each tick has a 10px hit area around a 2px line. */
|
||||
.danmaku-markers {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.danmaku-marker {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 10px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
transform: translateX(-50%);
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.danmaku-marker::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 2px;
|
||||
transform: translateX(-50%);
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
|
||||
transition: width 0.12s, background 0.12s;
|
||||
}
|
||||
|
||||
/* No own timestamp: placed at a random time on load */
|
||||
.danmaku-marker.is-random::before {
|
||||
background: rgba(255, 255, 255, 0.45);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.danmaku-marker:hover::before {
|
||||
width: 4px;
|
||||
background: #ffd844;
|
||||
}
|
||||
|
||||
/* Hover preview of a marker's comment (plain text), above the progress bar */
|
||||
.danmaku-marker-preview {
|
||||
position: absolute;
|
||||
z-index: 30;
|
||||
max-width: min(320px, 80%);
|
||||
padding: 6px 9px;
|
||||
background: rgba(0, 0, 0, 0.88);
|
||||
border-left: 2px solid var(--accent);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
line-height: 1.35;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transform: translateY(4px);
|
||||
transition: opacity 0.12s, transform 0.12s;
|
||||
}
|
||||
|
||||
.danmaku-marker-preview.is-visible {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.danmaku-marker-preview .dmp-head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
margin-bottom: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.danmaku-marker-preview .dmp-time {
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.danmaku-marker-preview .dmp-user {
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.danmaku-marker-preview .dmp-text {
|
||||
overflow-wrap: anywhere;
|
||||
max-height: 140px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Rendered like the flying pills, sized for a small preview */
|
||||
.danmaku-marker-preview .dmp-text .dpill-line,
|
||||
.danmaku-marker-preview .dmp-text .dpill-greentext {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.danmaku-marker-preview .dmp-text .dpill-greentext {
|
||||
color: #789922;
|
||||
}
|
||||
|
||||
.danmaku-marker-preview .dmp-text .dpill-emoji {
|
||||
display: inline-block;
|
||||
height: 1.6em;
|
||||
width: auto;
|
||||
max-width: 4em;
|
||||
vertical-align: middle;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.danmaku-marker-preview .dmp-text :is(.dpill-img, .dpill-video) {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 90px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin-top: 4px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.danmaku-marker-preview .dmp-text .dpill-spoiler:not(.revealed) {
|
||||
background: #000;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.danmaku-marker-preview .dmp-text .dpill-spoiler:not(.revealed) * {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.danmaku-marker-preview .dmp-text .dpill-blur:not(.revealed) {
|
||||
filter: blur(6px);
|
||||
}
|
||||
|
||||
/* Seek Marker Ripple */
|
||||
.v0ck_seek_marker {
|
||||
position: absolute;
|
||||
|
||||
Reference in New Issue
Block a user