fdsfads
This commit is contained in:
+443
-135
@@ -3101,7 +3101,6 @@ body.sidebar-right-hidden #sidebar-drag-zone::after {
|
||||
.sidebar-video-card.touch-active {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.sidebar-video-card.sidebar-card-swapping {
|
||||
@@ -3134,10 +3133,6 @@ body.sidebar-right-hidden #sidebar-drag-zone::after {
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.sidebar-video-card:hover .sidebar-video-thumb {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
|
||||
.sidebar-video-badges {
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
@@ -9983,12 +9978,6 @@ div.logwrap>p {
|
||||
}
|
||||
}
|
||||
|
||||
.admin-icon {
|
||||
margin-right: 6px;
|
||||
color: #ffeb3b;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.topf0ckers {
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
@@ -11836,10 +11825,12 @@ video.autoplay-gif {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
border-radius: 3px;
|
||||
border-radius: 0;
|
||||
border: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.15));
|
||||
background: var(--navigation-links-bg, rgba(255, 255, 255, 0.08));
|
||||
color: var(--white, #fff);
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
@@ -11895,20 +11886,29 @@ video.autoplay-gif {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* Cancel buttons */
|
||||
/* Cancel buttons: regular theme buttons (style guide), accent on hover like the others */
|
||||
.input-actions .cancel-reply,
|
||||
.input-actions .cancel-edit-btn {
|
||||
background: #555;
|
||||
color: #fff;
|
||||
border: 1px solid #555;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.input-actions .cancel-reply:hover,
|
||||
.input-actions .cancel-edit-btn:hover {
|
||||
background: #666;
|
||||
border-color: #666;
|
||||
color: #fff;
|
||||
/* Comment / DM input buttons: style guide (square, flat, theme colours, no glow) */
|
||||
.input-actions,
|
||||
.input-actions * {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.input-actions button:active {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.input-actions button:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.emoji-picker {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Light / Paper Theme */
|
||||
@@ -15138,6 +15138,94 @@ html[theme='paper'] .badge.badge-untagged {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ── #tags box (tags, rating badge, add-tag button): style guide (square, flat, theme colours, no glow) ──
|
||||
Same rules as the .gapRight action row. Rating badges keep their rating colours. */
|
||||
span#tags,
|
||||
span#tags *,
|
||||
span#tags *::before,
|
||||
span#tags *::after {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
span#tags :is(.badge, .rating-tag, .rating-label, .tag-btn, a, i) {
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
/* The "new tag" highlight fades the background only: flat, no glow */
|
||||
span#tags .new-tag-glow {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* One height for everything in the row: tags, rating badge, add-tag button and the tag input. Each used
|
||||
to get its height from its own padding/borders (25.4 / 26.4 / 21 / 20px); now they share --tag-h
|
||||
(the rating badge's height: 1.4em line + its label border) and centre their content inside it */
|
||||
span#tags {
|
||||
--tag-h: calc(1.4em + 4px);
|
||||
}
|
||||
|
||||
span#tags .tags-inner > .badge,
|
||||
span#tags .tag-btn,
|
||||
span#tags .tag-ac-wrapper {
|
||||
box-sizing: border-box;
|
||||
height: var(--tag-h);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
span#tags .tag-controls {
|
||||
padding-top: 2.5px;
|
||||
padding-bottom: 2.5px;
|
||||
}
|
||||
|
||||
span#tags .tag-ac-wrapper form {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
span#tags .tag-ac-input {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
span#tags .tag-btn {
|
||||
min-width: 26px;
|
||||
background: var(--navigation-links-bg, rgba(255, 255, 255, 0.08));
|
||||
border: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.15));
|
||||
color: var(--white, #fff) !important;
|
||||
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
|
||||
span#tags .tag-btn:hover,
|
||||
span#tags .tag-btn.is-active {
|
||||
background: var(--nav-link-hover-bg, rgba(255, 255, 255, 0.15));
|
||||
border-color: var(--accent);
|
||||
color: var(--accent) !important;
|
||||
}
|
||||
|
||||
/* Rating-coloured tag buttons keep their rating colour (hover still shows the accent border) */
|
||||
span#tags .tag-btn.is-sfw:not(:hover) {
|
||||
color: #28a745 !important;
|
||||
}
|
||||
|
||||
span#tags .tag-btn.is-nsfw:not(:hover) {
|
||||
color: #dc3545 !important;
|
||||
}
|
||||
|
||||
span#tags :is(.tag-btn, .rating-tag.can-cycle, .badge a):hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
span#tags :is(.tag-btn, .rating-tag.can-cycle):active {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
span#tags :is(.tag-btn, .rating-tag, .badge a):focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.rules {
|
||||
@@ -17844,16 +17932,141 @@ i.iconset#a_oc {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* Profile stat chips: style guide (square, flat, theme colours, no glow). !important beats the
|
||||
per-theme shadow rules (amoled/light/paper) that would bring the shadow back */
|
||||
.profile_head_user_stats > * {
|
||||
background: var(--bg);
|
||||
padding: 0px 5px 0px 5px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 1px 1px 1px black;
|
||||
/* Same 30px height as #edit-profile-btn (border included), text centred */
|
||||
box-sizing: border-box;
|
||||
height: 30px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.15));
|
||||
padding: 0 8px;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
.profile_head_user_stats a {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* Normal cursor on the chips; pointer only where something happens: the joined date (hover tooltip)
|
||||
and the comment / tag / hall count links */
|
||||
.profile_head_user_stats > * {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.profile_head_user_stats > .stat-joined,
|
||||
.profile_head_user_stats a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Edit-profile toggle and edit-banner button on the profile banner: square, flat, theme colours, one
|
||||
size (30x30); accent on hover and while editing. The banner button is positioned by its wrapper. */
|
||||
#edit-profile-btn {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
left: 5px;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
#edit-profile-btn,
|
||||
#inline-banner-edit-btn {
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
background: var(--dropdown-bg, #232323);
|
||||
border: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.15));
|
||||
color: var(--white, #fff);
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
|
||||
#edit-profile-btn:hover,
|
||||
#edit-profile-btn.is-active,
|
||||
#inline-banner-edit-btn:hover {
|
||||
background: var(--nav-link-hover-bg, #333);
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
#edit-profile-btn:active,
|
||||
#inline-banner-edit-btn:active {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
#edit-profile-btn:focus-visible,
|
||||
#inline-banner-edit-btn:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
/* Profile content (uploads / favourites panels): style guide (square, flat, theme colours, no glow).
|
||||
Each section is a panel with a title bar; the thumbnails inside keep their own grid styling. */
|
||||
.user_content_wrapper {
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.user_content_wrapper > .user-uploads,
|
||||
.user_content_wrapper > .favs {
|
||||
min-width: 0;
|
||||
background: var(--dropdown-bg, #232323);
|
||||
border: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.15));
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.uploads-header,
|
||||
.favs-header {
|
||||
background: var(--black);
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
background: var(--bg, #111);
|
||||
border-bottom: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.15));
|
||||
padding: 6px 8px;
|
||||
font-weight: bold;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
.uploads-header a,
|
||||
.favs-header a {
|
||||
color: var(--accent);
|
||||
font-weight: normal;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.uploads-header a:hover,
|
||||
.favs-header a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.user_content_wrapper div.user-uploads div.posts,
|
||||
.user_content_wrapper div.favs div.posts {
|
||||
background: transparent;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.user_content_wrapper .private-favs-msg {
|
||||
padding: 12px 8px;
|
||||
color: var(--text-muted, rgba(255, 255, 255, 0.6));
|
||||
}
|
||||
|
||||
|
||||
@@ -22047,8 +22260,11 @@ div#flash,
|
||||
padding: 6px 12px;
|
||||
box-shadow: none !important;
|
||||
opacity: 0;
|
||||
/* Hidden = really hidden: no Tab stops or screen-reader access to its buttons. visibility flips only
|
||||
after the slide/fade out has finished (0.2s delay), and immediately when showing (see .visible) */
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transition: transform 0.2s ease, opacity 0.2s ease;
|
||||
transition: transform 0.2s ease, opacity 0.2s ease, visibility 0s linear 0.2s;
|
||||
user-select: none;
|
||||
font-family: var(--font, monospace) !important;
|
||||
max-width: 100vw;
|
||||
@@ -22057,7 +22273,9 @@ div#flash,
|
||||
#bulk-action-bar.visible {
|
||||
transform: translateX(-50%) translateY(0);
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
transition: transform 0.2s ease, opacity 0.2s ease, visibility 0s linear 0s;
|
||||
}
|
||||
|
||||
.bulk-count-box {
|
||||
@@ -22085,79 +22303,79 @@ div#flash,
|
||||
}
|
||||
|
||||
.bulk-actions-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* Equal columns: every action button is exactly as wide as the widest one */
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: 1fr;
|
||||
align-items: stretch;
|
||||
gap: 6px;
|
||||
flex-wrap: nowrap;
|
||||
/* Sized to its content so 1fr resolves to the widest button, not to a share of the bar */
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.bulk-btn {
|
||||
/* All bar buttons: style guide (square, flat, theme colours, no glow), one size, one look.
|
||||
Delete / Add Tags / close used to have their own filled or red variants; they are plain now. */
|
||||
.bulk-btn,
|
||||
.bulk-btn-primary,
|
||||
.bulk-btn-danger,
|
||||
.bulk-btn-close {
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 5px 10px;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
margin: 0;
|
||||
padding: 0 10px;
|
||||
border-radius: 0 !important;
|
||||
font-size: 12px;
|
||||
font-weight: normal !important;
|
||||
font-family: var(--font, monospace) !important;
|
||||
border: 1px solid var(--nav-border-color, #444);
|
||||
background: var(--nav-bg, #2b2b2b);
|
||||
color: var(--white, #fff);
|
||||
line-height: 1;
|
||||
border: 1px solid var(--nav-border-color, #444) !important;
|
||||
background: var(--navigation-links-bg, var(--nav-bg, #2b2b2b)) !important;
|
||||
color: var(--white, #fff) !important;
|
||||
cursor: pointer;
|
||||
box-shadow: none !important;
|
||||
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
|
||||
text-shadow: none !important;
|
||||
filter: none !important;
|
||||
transform: none !important;
|
||||
transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bulk-btn:hover {
|
||||
background: var(--nav-link-hover-bg, #333);
|
||||
color: var(--accent, #9f0);
|
||||
border-color: var(--accent, #9f0);
|
||||
transform: none !important;
|
||||
.bulk-btn:hover,
|
||||
.bulk-btn:focus-visible,
|
||||
.bulk-dropdown-wrap:has(.bulk-dropdown-menu.show) > .bulk-btn {
|
||||
background: var(--nav-link-hover-bg, #333) !important;
|
||||
color: var(--accent, #9f0) !important;
|
||||
border-color: var(--accent, #9f0) !important;
|
||||
}
|
||||
|
||||
.bulk-btn:focus-visible {
|
||||
outline: 2px solid var(--accent, #9f0);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.bulk-btn:active {
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.bulk-btn-primary {
|
||||
background: var(--accent, #9f0) !important;
|
||||
color: var(--black, #000) !important;
|
||||
border: 1px solid var(--accent, #9f0) !important;
|
||||
font-weight: bold !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.bulk-btn-primary:hover {
|
||||
filter: brightness(1.15);
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
/* Close (x) sits outside the equal-width group: same height and look, square */
|
||||
.bulk-btn-close {
|
||||
padding: 5px 8px;
|
||||
background: var(--nav-bg, #2b2b2b);
|
||||
color: var(--white, #fff);
|
||||
border: 1px solid var(--nav-border-color, #444);
|
||||
width: 30px;
|
||||
flex: 0 0 30px;
|
||||
padding: 0;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.bulk-btn-close:hover {
|
||||
background: #ff4444 !important;
|
||||
color: #fff !important;
|
||||
border-color: #ff4444 !important;
|
||||
.bulk-btn .bulk-chevron {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.bulk-btn-danger {
|
||||
background: transparent !important;
|
||||
color: #ff5555 !important;
|
||||
border: 1px solid #ff5555 !important;
|
||||
font-weight: bold !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.bulk-btn-danger:hover {
|
||||
background: #ff4444 !important;
|
||||
color: #fff !important;
|
||||
border-color: #ff4444 !important;
|
||||
filter: none !important;
|
||||
.bulk-dropdown-wrap {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Bulk rating dropdown wrapper */
|
||||
@@ -22463,13 +22681,14 @@ div#flash,
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* Phones: icon-only buttons, still all the same size */
|
||||
.bulk-btn {
|
||||
padding: 5px 7px;
|
||||
font-size: 11.5px;
|
||||
padding: 0 8px;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.bulk-btn .btn-text-full {
|
||||
.bulk-btn > span,
|
||||
.bulk-btn .bulk-chevron {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -22561,53 +22780,6 @@ div#flash,
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.album-counter-pill {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
background: rgba(16, 16, 20, 0.75);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
color: #fff;
|
||||
padding: 5px 14px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
|
||||
letter-spacing: 0.03em;
|
||||
user-select: none;
|
||||
transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.album-gallery-container:hover .album-counter-pill,
|
||||
.album-gallery-container:focus-within .album-counter-pill {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.album-gallery-container.v0ck_hover .album-counter-pill,
|
||||
.album-gallery-container.strip-peek .album-counter-pill,
|
||||
.album-gallery-container:has(.v0ck.v0ck_hover) .album-counter-pill,
|
||||
.album-counter-pill.is-visible,
|
||||
.album-counter-pill.strip-peek {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.album-counter-pill i {
|
||||
color: var(--accent);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.album-thumbnails-strip {
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
@@ -22748,6 +22920,13 @@ div#flash,
|
||||
|
||||
.album-gallery-container.is-video-active .album-thumbnails-strip,
|
||||
.album-gallery-container.is-audio-active .album-thumbnails-strip {
|
||||
/* Follows the player controls: lifted above them only while they are shown (.v0ck_hover), back
|
||||
down with them when they auto-hide, on the same 0.3s timing as the controls' slide */
|
||||
transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), bottom 0.3s ease;
|
||||
}
|
||||
|
||||
.album-gallery-container.is-video-active:has(.v0ck.v0ck_hover) .album-thumbnails-strip,
|
||||
.album-gallery-container.is-audio-active:has(.v0ck.v0ck_hover) .album-thumbnails-strip {
|
||||
bottom: 58px;
|
||||
}
|
||||
|
||||
@@ -22762,8 +22941,8 @@ div#flash,
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.album-gallery-container.is-video-active .album-thumbnails-strip,
|
||||
.album-gallery-container.is-audio-active .album-thumbnails-strip {
|
||||
.album-gallery-container.is-video-active:has(.v0ck.v0ck_hover) .album-thumbnails-strip,
|
||||
.album-gallery-container.is-audio-active:has(.v0ck.v0ck_hover) .album-thumbnails-strip {
|
||||
bottom: 48px;
|
||||
}
|
||||
.album-gallery-container.is-youtube-active .album-thumbnails-strip {
|
||||
@@ -22855,11 +23034,6 @@ div#flash,
|
||||
.album-controls-overlay {
|
||||
padding: 0 8px;
|
||||
}
|
||||
.album-counter-pill {
|
||||
top: 10px;
|
||||
padding: 3px 10px;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
.album-thumb-item {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
@@ -23202,4 +23376,138 @@ html.range-tap-lock input[type="range"].range-unlocked {
|
||||
|
||||
a#nav-upload-link {
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
/* Background toggle (l key / player button): the fade out matches the 1.5s fade in instead of the quick
|
||||
0.22s navigation fade-out. bg-toggle-fade is set by toggleBackground() while the background is off. */
|
||||
#bg.fader-out.bg-toggle-fade,
|
||||
body.onara-modal-open #bg.bg-toggle-fade:is(.fader-in, .fader-out) {
|
||||
transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.45, 0, 0.2, 1) !important;
|
||||
}
|
||||
|
||||
/* ── Album thumbnail strip: style guide (square, flat, theme colours, no glow) ──
|
||||
Same look as the bulk bar / tuner: theme panel background, nav border, accent for state. No blur,
|
||||
no shadows, no hover/active scaling (the active thumb is marked by its accent border instead).
|
||||
Positioning, show/hide and the mobile sizes are left to the rules above. */
|
||||
.album-thumbnails-strip,
|
||||
.album-thumb-item,
|
||||
.album-thumb-mime-badge {
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
}
|
||||
|
||||
.album-thumbnails-strip {
|
||||
background: var(--dropdown-bg, #232323);
|
||||
border: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.15));
|
||||
padding: 4px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.album-thumb-item {
|
||||
border: 2px solid var(--nav-border-color, rgba(255, 255, 255, 0.15));
|
||||
opacity: 0.55;
|
||||
transition: opacity 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.album-thumb-item:hover,
|
||||
.album-thumb-item:focus-visible {
|
||||
opacity: 0.9;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.album-thumb-item.active {
|
||||
opacity: 1;
|
||||
border-color: var(--accent, #9f0);
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.album-thumb-item:focus-visible {
|
||||
outline: 2px solid var(--accent, #9f0);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.album-thumb-mime-badge {
|
||||
background: var(--bg, #111);
|
||||
color: var(--white, #fff);
|
||||
border: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.15));
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* Dragging the album strip: grabbing cursor everywhere until the mouse is released (the thumbnails'
|
||||
own pointer cursor would otherwise win, and leaving the strip would drop back to the page cursor) */
|
||||
html.album-strip-dragging,
|
||||
html.album-strip-dragging * {
|
||||
cursor: grabbing !important;
|
||||
user-select: none !important;
|
||||
}
|
||||
|
||||
/* Legacy comment slide (comments.js slideLegacyComments): while it runs, the container's height comes
|
||||
from --comments-slide-h (animated) and it clips its content, so the comments disappear exactly at its
|
||||
top edge, right under the .blahlol box. !important + the extra class outrank layouts that pin the
|
||||
container (Onara: height: auto !important; overflow: visible !important). Registered so the height
|
||||
animates smoothly instead of jumping. */
|
||||
@property --comments-slide-h {
|
||||
syntax: '<length>';
|
||||
inherits: false;
|
||||
initial-value: 0px;
|
||||
}
|
||||
|
||||
#comments-container.is-comments-sliding,
|
||||
#onara-modal #comments-container.is-comments-sliding {
|
||||
height: var(--comments-slide-h) !important;
|
||||
min-height: 0 !important;
|
||||
max-height: none !important;
|
||||
overflow: hidden !important;
|
||||
flex: 0 0 auto !important;
|
||||
}
|
||||
|
||||
/* Legacy .blahlol meta row (infobox off): ID / user / OC badge on the left, time (+ expiry) on the right */
|
||||
.blahlol-meta-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px 12px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
/* .blahlol hands down a 32px line-height (the time link has its own 28px): use the tags' 1.4 so the
|
||||
row is as compact as the tag row below it */
|
||||
.blahlol-meta-row,
|
||||
.blahlol-meta-row * {
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.blahlol-meta-row > .blahlol-id-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.blahlol-meta-row > .blahlol-meta-right {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* Meta row: the time (smaller font) gets exactly the same box height as the user badge instead of a
|
||||
line box from its own font size; the text is centred inside it */
|
||||
.blahlol-meta-row > .blahlol-id-badge,
|
||||
.blahlol-meta-row > .blahlol-meta-right {
|
||||
box-sizing: border-box;
|
||||
height: 1.4em;
|
||||
}
|
||||
|
||||
.blahlol-meta-right > .badge,
|
||||
.blahlol-meta-right .timestamp-link,
|
||||
.blahlol-meta-right .timeago {
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user