This commit is contained in:
2026-09-12 06:01:50 +02:00
parent 2913b03d50
commit 4f6223640f
15 changed files with 991 additions and 159 deletions
+124 -80
View File
@@ -33,10 +33,24 @@
--pagination-background: #2b2b2b;
--metadata-bg: #2b2b2b;
--badge-bg: #171717;
--badge-sfw: #02500b;
--badge-nsfw: #E10DC3;
--badge-nsfl: #660000;
--badge-untagged: #555555;
--badge-tag: #090909;
--posts-meta-bg: #000000b8;
--x2154: #215483;
}
html:not([theme]), html[theme=""] {
--badge-bg: #171717;
--badge-sfw: #02500b;
--badge-nsfw: #E10DC3;
--badge-nsfl: #660000;
--badge-untagged: #555555;
--badge-tag: #090909;
}
html, body {
touch-action: pan-x pan-y;
}
@@ -3017,45 +3031,15 @@ body.sidebar-right-hidden #sidebar-drag-zone {
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.sidebar-video-card:hover {
.sidebar-video-card:hover,
.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:active {
transform: scale(0.99);
}
.sidebar-video-card.sidebar-card-swapping {
opacity: 0.35;
filter: grayscale(0.6);
transition: opacity 0.5s ease, filter 0.5s ease;
}
.sidebar-video-card.sidebar-card-entering {
animation: sidebarCardEnter 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes sidebarCardEnter {
0% {
opacity: 0;
transform: scale(0.91) translateY(8px);
filter: brightness(1.2) contrast(0.95);
}
40% {
opacity: 0.75;
transform: scale(0.97) translateY(3px);
}
75% {
opacity: 0.95;
transform: scale(0.995) translateY(0.5px);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
filter: brightness(1) contrast(1);
}
opacity: 0.5;
}
.sidebar-video-card .sidebar-video-link {
@@ -3080,43 +3064,15 @@ body.sidebar-right-hidden #sidebar-drag-zone {
object-fit: cover;
display: block;
transition: transform 0.3s ease;
-webkit-user-drag: none;
user-select: none;
-webkit-user-select: none;
}
.sidebar-video-card:hover .sidebar-video-thumb {
transform: scale(1.04);
}
.sidebar-video-play-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.25);
color: #fff;
font-size: 1.2em;
opacity: 0;
transition: opacity 0.2s ease, background 0.2s ease;
}
.sidebar-video-play-overlay i {
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.65);
display: flex;
align-items: center;
justify-content: center;
padding-left: 3px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.sidebar-video-card:hover .sidebar-video-play-overlay {
opacity: 1;
background: rgba(0, 0, 0, 0.35);
}
.sidebar-video-badge {
position: absolute;
bottom: 6px;
@@ -3131,20 +3087,21 @@ body.sidebar-right-hidden #sidebar-drag-zone {
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
z-index: 10;
}
.sidebar-video-badge.rating-sfw {
background-color: var(--badge-sfw);
background-color: var(--badge-sfw, #02500b);
border: 1px solid rgba(0, 0, 0, 0.2);
}
.sidebar-video-badge.rating-nsfw {
background-color: var(--badge-nsfw);
background-color: var(--badge-nsfw, #E10DC3);
border: 1px solid rgba(0, 0, 0, 0.2);
}
.sidebar-video-badge.rating-nsfl {
background-color: var(--badge-nsfl);
background-color: var(--badge-nsfl, #660000);
border: 1px solid rgba(0, 0, 0, 0.2);
}
@@ -3167,6 +3124,7 @@ body.sidebar-right-hidden #sidebar-drag-zone {
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.15);
line-height: 1;
z-index: 10;
}
.sidebar-media-placeholder {
@@ -3313,11 +3271,6 @@ html[theme='paper'] .sidebar-video-channel {
color: #64748b;
}
html[theme='light'] .sidebar-video-play-overlay,
html[theme='paper'] .sidebar-video-play-overlay {
background: rgba(0, 0, 0, 0.2);
}
/* Theme 95 */
html[theme='95'] .sidebar-tabs {
background: #c0c0c0;
@@ -3346,6 +3299,68 @@ html[theme='95'] .sidebar-video-title {
font-family: 'MS Sans Serif', sans-serif;
}
/* Sidebar Tag Feed Header & Active Card Highlighting */
.sidebar-tag-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
background: rgba(18, 18, 24, 0.95);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
margin-bottom: 6px;
position: sticky;
top: -6px;
z-index: 10;
}
.sidebar-tag-title {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.85em;
font-weight: 700;
color: var(--accent, #a78bfa);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sidebar-tag-title i {
opacity: 0.85;
}
.sidebar-tag-count {
font-size: 0.85em;
font-weight: 500;
color: var(--text-muted, #888);
margin-left: 4px;
}
.sidebar-tag-order-btn {
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
color: var(--text-color, #ccc);
border-radius: 4px;
padding: 3px 8px;
font-size: 0.82em;
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
transition: all 0.15s ease;
}
.sidebar-tag-order-btn:hover {
background: rgba(255, 255, 255, 0.12);
color: #fff;
border-color: var(--accent, #a78bfa);
}
.sidebar-video-card.active-tag-item {
border-color: var(--accent, #a78bfa) !important;
}
#sidebar-activity-container.sidebar-comments-list {
flex: 1;
overflow-y: auto;
@@ -5646,11 +5661,16 @@ div.posts {
margin-bottom: 35px;
}
/* Mobile: Ensure at least 3 columns unless user picked a larger size */
/* Mobile: Ensure at least 3 columns for S/M, and at least 2 columns for L/XL */
@media (max-width: 600px) {
html:not([data-thumb-size="l"]):not([data-thumb-size="xl"]) div.posts {
grid-template-columns: repeat(3, 1fr);
}
html[data-thumb-size="l"] div.posts,
html[data-thumb-size="xl"] div.posts {
grid-template-columns: repeat(2, 1fr);
}
}
div.posts>a:not(.notif-item) {
@@ -6476,6 +6496,28 @@ body.layout-modern.sidebar-right-hidden .pagination-container-fluid {
overflow: visible;
}
.item_title:has(.info-title-edit-wrap) .item_title_text {
cursor: pointer;
display: inline-block;
max-width: 100%;
transition: color 0.15s ease, opacity 0.15s ease;
}
.item_title:has(.info-title-edit-wrap) .item_title_text:hover {
color: #fff;
}
.item_title_text.no-title,
.item_title_text em {
font-style: italic;
color: var(--text-muted, rgba(255, 255, 255, 0.45));
}
.item_title:has(.info-title-edit-wrap) .item_title_text.no-title:hover em,
.item_title:has(.info-title-edit-wrap) .item_title_text:hover em {
color: var(--accent, #9f0);
}
/* .location {
padding-left: 5px;
} */
@@ -7339,7 +7381,7 @@ span#tags:not(.tags-expanded) .tags-inner>span:nth-child(n+11) {
.badge-success {
color: var(--white);
background-color: var(--badge-sfw);
background-color: var(--badge-sfw, #02500b);
padding-right: 5px;
padding-left: 5px;
border-radius: 3px;
@@ -7349,7 +7391,7 @@ span#tags:not(.tags-expanded) .tags-inner>span:nth-child(n+11) {
.badge-danger {
color: var(--white);
background-color: var(--badge-nsfw);
background-color: var(--badge-nsfw, #E10DC3);
padding-right: 5px;
padding-left: 5px;
border-radius: 3px;
@@ -12982,7 +13024,8 @@ div.posts>a.thumb[data-size="2"] {
grid-row: span 2;
}
.thumb>.preview-video {
.thumb>.preview-video,
.sidebar-video-thumb-wrap>.preview-video {
position: absolute;
top: 0;
left: 0;
@@ -12996,7 +13039,8 @@ div.posts>a.thumb[data-size="2"] {
transition: opacity 0.2s ease-in;
}
.thumb>.preview-video.playing {
.thumb>.preview-video.playing,
.sidebar-video-thumb-wrap>.preview-video.playing {
opacity: 1;
}
@@ -13562,17 +13606,17 @@ body.layout-modern>.pagewrapper:not(:has(.index-layout-wrapper)):not(:has(.item-
}
#a_toggle.rating-btn.is-sfw {
background-color: var(--badge-sfw);
background-color: var(--badge-sfw, #02500b);
border-color: rgba(0, 0, 0, 0.15);
}
#a_toggle.rating-btn.is-nsfw {
background-color: var(--badge-nsfw);
background-color: var(--badge-nsfw, #E10DC3);
border-color: rgba(0, 0, 0, 0.15);
}
#a_toggle.rating-btn.is-nsfl {
background-color: var(--badge-nsfl);
background-color: var(--badge-nsfl, #660000);
border-color: rgba(0, 0, 0, 0.15);
}
+6 -6
View File
@@ -404,21 +404,21 @@
}
.item-rating-option input:checked + .item-rating-label.sfw {
background: var(--badge-sfw);
background: var(--badge-sfw, #02500b);
color: #fff;
border-color: var(--badge-sfw);
border-color: var(--badge-sfw, #02500b);
}
.item-rating-option input:checked + .item-rating-label.nsfw {
background: var(--badge-nsfw);
background: var(--badge-nsfw, #E10DC3);
color: #fff;
border-color: var(--badge-nsfw);
border-color: var(--badge-nsfw, #E10DC3);
}
.item-rating-option input:checked + .item-rating-label.nsfl {
background: var(--badge-nsfl);
background: var(--badge-nsfl, #660000);
color: #fff;
border-color: var(--badge-nsfl);
border-color: var(--badge-nsfl, #660000);
}
/* Visibility Container - Only checked option is colored, unchecked options are gray */