进阶 docs.stashapp.cc 2026-10-20 02:59:21 · 24 阅读
第42章 Stash 论坛：自定义 CSS 代码片段实战
Stash 论坛
自定义 CSS 代码片段
社区维基
theme,
stash
DogmaDragon
2025年10月23日 上午11:53
1
自定义 CSS 可以用来修改 Stash 的默认样式表。下面整理了一些实用的 CSS 片段，把代码复制粘贴到 Settings > Interface 面板中的 Custom CSS 编辑器里即可使用，也可以直接访问 localhost:9999/settings?tab=interface 进入该页面。
欢迎大家通过编辑这篇 wiki 帖子来补充新的代码片段。
场景（Scenes）
让每行显示更多缩略图
减小场景和演员网格页面左右的内边距，从而让每行显示更多缩略图。
/* [Scenes tab] Fit more thumbnails on each row */
.grid { padding: 0px !important; }
场景缩略图上以文字形式显示片厂时支持更长的文本
场景缩略图上以文字形式显示片厂（Studio as Text）时，允许显示更长的字符串。
/* [Scenes tab] Allow for longer string when displaying "Studio as Text" on scene thumbnails */
.studio-overlay {
font-weight: 600 !important;
opacity: 1 !important;
width: 60% !important;
text-overflow: ellipsis !important;
}
隐藏场景卡片上的场景信息（分辨率、时长）
/* [Scenes tab] Hide scene specs (resolution, duration) from scene card */
.scene-specs-overlay {
display: none;
}
隐藏场景卡片上的片厂标志/文字
/* [Scenes tab] Hide studio logo/text from scene card */
.studio-overlay {
display: none;
}
缩小标签列表占用的宽度
/* [Scenes tab] Make the list of tags take up less width */
.bs-popover-bottom {
max-width: 500px
}
交换片厂与分辨率/时长的位置
/* [Scenes tab] Swap studio and resolution/duration positions */
.studio-overlay {
bottom: 1rem;
right: 0.7rem;
height: inherit;
top: inherit;
}
.scene-specs-overlay {
right: 0.7rem;
top: 0.7rem;
bottom: inherit;
}
调整墙纸模式下的鼠标悬停行为
/* [Scenes tab] Adjust the mouse over behaviour in wall mode */
@media (min-width: 576px) {
.wall-item:hover::before {
opacity: 0;
}
.wall-item:hover .wall-item-container {
transform: scale(1.5);
}
}
禁用墙纸模式下的悬停缩放
/* [Scenes tab] Disable zoom on hover in wall mode */
.wall-item:hover .wall-item-container {
transform: none;
}
.wall-item:before {
opacity: 0 !important;
}
隐藏场景进度条
隐藏视频播放器下方的大进度条，并让播放器高度占满。
css-scrubber800×149 4.11 KB
/* [Scenes tab] Hide the scene scrubber and max out the player's height */
.scrubber-wrapper {
display: none;
}
隐藏被截断的文字
隐藏卡片标题和日期下方被截断的描述文字。
/* [Scenes Tab] - Hide the truncated text on scene card */
.TruncatedText.scene-card__description {
display: none;
}
重新设计场景页面，只显示收藏
image441×541 35.2 KB
/* Restyles the scene page to only display favourite */
/* Credit: theejuicebox */
.rating-stars.align-middle button::before{
content: "Favorite";
color: #ffffff;
padding: 3px;
padding-left: 6px;
}
div.rating-stars.align-middle button:last-child{
display:inline-block;
padding: 4px;
background-color: #10659a;
}
div.rating-stars.align-middle button{
display:none;
}
图片（Images）
禁用灯箱动画
/* [Images tab] Disable lightbox animation */
.Lightbox-carousel {
transition: none;
}
预览缩略图不裁剪
/* [Images tab] Don't crop preview thumbnails */
.flexbin > * > img {
object-fit: inherit;
max-width: none;
min-width: initial;
}
群组（Groups）
桌面端更好的群组布局（常规尺寸海报）
让正反两面图片大很多，左侧面板占 70%，右侧占 30%。
/* [Groups tab] Better Group layout for desktops: Regular size poster */
.group-details.mb-3.col.col-xl-4.col-lg-6 {
flex-basis: 70%
}
.col-xl-8.col-lg-6{
flex-basis: 30%
}
.group-images{
flex-wrap: wrap
}
.group-image-container {
flex: 0 0 500px
}
桌面端更好的群组布局（大尺寸海报）
让正反两面图片大很多，左侧面板占 70%，右侧占 30%。
/* [Groups tab] Better Group layout for desktops: Larger size poster */
.group-details.mb-3.col.col-xl-4.col-lg-6 {
flex-basis: 70%
}
.col-xl-8.col-lg-6{
flex-basis: 30%
}
.group-images{
flex-direction: column;
flex-wrap: wrap
}
.group-image-container {
flex: 1 1 700px
}
图库（Galleries）
图库网格视图
/* [Galleries tab] Grid view for galleries */
.col.col-sm-6.mx-auto.table .d-none.d-sm-block {
display: none !important;
}
.col.col-sm-6.mx-auto.table .w-100.w-sm-auto {
width: 175px !important;
background-color: rgba(0, 0, 0, .45);
box-shadow: 0 0 2px rgba(0, 0, 0, .35);
}
.col.col-sm-6.mx-auto.table tr {
display: inline-table;
}
禁用灯箱图片切换过渡效果
/* [Gallery tab] Disable lightbox image transition */
.Lightbox-carousel {
transition: unset;
}
隐藏灯箱的页眉和页脚
隐藏灯箱的页眉和页脚，让图片区域更大，鼠标移入时它们会以覆盖层形式浮现。
/* [Gallery tab] Hides the lightbox header and footer to make the image area larger. Mouse reveals them as an overlay to the image*/
/* Credit: https://github.com/peresabcod */
.Lightbox-header,
.Lightbox-footer{
z-index:9999;
position:absolute;
width:100%;
opacity:0;
background-color:#0008;
transition: opacity 0.5s ease;
}
.Lightbox-footer{
bottom:0;}
.Lightbox-navbutton{
opacity:0;
transition: opacity 0.5s ease;
}
.Lightbox-navbutton:hover,
.Lightbox-header:hover,
.Lightbox-footer:hover{
opacity:1;
}
演员（Performers）
演员卡片显示完整演员图片
/* [Performers tab] Show entire performer image in performer card */
.performer.image {
background-size: contain !important;
}
桌面端演员页面显示更大的图片
/* [Performers tab] Show a larger image in performer's page for desktop */
.performer-image-container{
flex: 0 0 50%;
max-width: 50%;
}
/* Changing .col-md-8 settings also affects studios and tags display. 50% should be good enough. */
.col-md-8 {
flex: 0 0 50%;
max-width: 50%;
}
演员页面将演员图片作为背景
/* [Performers tab] Place performer image in the background on performer page */
.performer-image-container.col-md-4.text-center {
flex: 0 0 0%;
max-width: 0%;
}
#performer-page .performer-image-container .btn.btn-link {
position: fixed;
width: 100%;
top: 0;
left: 0;
padding: 0;
}
#performer-page .performer-image-container .btn.btn-link:before {
content: '';
position:absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to left, rgba(0,0,0,0) 0%,rgb(0 0 0 / 75%) 100%);
z-index: 1;
}
#performer-page .performer-image-container .performer {
max-height: none;
max-width: none;
width: 100%;
}
演员列表中显示更大的演员图片
/* [Performers tab] Show larger performer images in performers list */
/* original value: height: 30rem; min-width:13.25rem; */
.performer-card-image{
height: 45rem;
min-width: 20rem;
}
将演员编辑面板中的按钮移到顶部而非底部
在较新版本的 Stash 中，按钮已经同时出现在顶部和底部。
/* [Performers tab] Move the buttons in the Performer's edit panel to the top instead of bottom (in newer version of Stash, the buttons are already positioned both at top and bottom. */
form#performer-edit {
display: flex;
flex-direction: column;
}
#performer-edit > .row {
order: 1;
}
#performer-edit > .row:last-child {
order: 0;
margin-bottom: 1rem;
}
将演员编辑面板中的标签行移到第二个位置（紧随名称之后）
/* [Performers tab] Move the tags row in the Performer's edit panel to the second position (just after name). */
form#performer-edit {
display: flex;
flex-direction: column;
}
#performer-edit > .row:nth-child(24) {
order: -1;
}
#performer-edit > .row:first-child {
order: -2;
}
片厂（Studios）
另一种片厂卡片布局
更改片厂卡片的布局。
studios_layout1920×733 99.8 KB
/* [Studios tab] Changes the layout of studio cards */
/* Credit: Qx#1573 */
.studio-card.grid-card.card div.card-section div.rating-banner { display: none; }
.slick-slide .studio-card-image { height: 300px; }
.studio-card, .recommendation-row .studio-card {
padding: 0;
width: 500px;
height: 300px;
}
.studio-card-image, .recommendation-row .studio-card .studio-card-image {
max-height: 300px;
width: 500px;
}
.studio-card.grid-card.card div.card-section {
position: absolute;
bottom: 0em;
width: inherit;
background-color: rgba(0, 0, 0, 0.7);
overflow: hidden;
height: 2.5em;
transition: 0.5s ease-in-out;
}
.studio-card.grid-card.card div.card-section:hover {
height: 7em;
}
每行显示更多片厂
more_studio_item_before1889×892 151 KB
more_studio_item_after1894×891 156 KB /* [Studios 标签页] 每行显示更多项目 */ /* 致谢：https://github.com/HijackHornet */ :not(.recommendation-row .studio-card).studio-card { width: 15% } :not(.recommendation-row .studio-card-image).studio-card-image { width: 100% } .studio-card h5 { text-align: center !important; display: block; } Tags 不同的标签卡片布局 改变标签页中标签卡片的布局，以及在悬停于不同内容的标签时卡片的显示效果。 tags_layout978×229 60.9 KB /* [标签更改] 改变标签页及悬停时的标签卡片布局 */ /* 致谢：Qx#1573 */ .tag-parent-tags, .tag-sub-tags { display: none;} .tag-card.zoom-0.grid-card.card div.card-section div.card-popovers.btn-group { margin-top: 1em; } .tag-card.zoom-0.grid-card.card div.thumbnail-section a.tag-card-header img.tag-card-image { object-fit: cover; } .tag-card.zoom-0.grid-card.card div.card-section hr { display: none; } .tag-card.zoom-0.grid-card.card { padding: 0; width: 300px; height: 180px; } .tag-card.zoom-0.grid-card.card div.card-section { position: absolute; text-shadow: 2px 2px 2px #000; width: 100%; background-color: rgba(0, 0, 0, 0.3); height: 3em; overflow: hidden; transition: 0.8s ease-in-out; } .tag-card.zoom-0.grid-card.card div.card-section a { text-decoration: none; } .tag-card.zoom-0.grid-card.card div.card-section:hover { height: 22em; } .tag-card.zoom-0.grid-card.card div.card-section a h5.card-section-title.flex-aligned div.TruncatedText { white-space: nowrap; text-overflow: ellipsis; width: 300px; overflow: hidden; display: block; } .tag-card.zoom-0.grid-card.card div.card-section div.TruncatedText.tag-description { position: relative; top: 0.5em; -webkit-text-stroke-width: 1px; font-size: 16px; } .tag-card .card-popovers .btn { text-shadow: 1px 1px 1px #000; stroke: black; stroke-width: 15; } 替代标签布局 更改标签布局以展示更多图片，并在悬停时显示详细信息。 more_tag_before1901×887 129 KB
more_tag_after_11874×880 180 KB
more_tag_after_21896×888 145 KB /*标签布局修改*/ /* 致谢：https://github.com/HijackHornet */ .tag-card { width: 16rem; padding: 0; } .tag-card .card-section { height: 2.5rem; position: absolute; bottom: 0; left: 0; right: 0; background: #0000007a; line-height: none; } .tag-card .card-section .TruncatedText { -webkit-line-clamp: 1 !important; } .tag-card h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { line-height: normal; } .tag-card hr, .tag-description { display: none; } .tag-card .btn-group { position: absolute; width: 100%; bottom: 2.5rem; margin-bottom: 0; opacity: 0; transition: ease 0.2s; } .tag-card .btn-group:hover { opacity: 1; transition: ease 0.2s; background: #0000007a; } .tag-card-image { object-fit: cover; object-position: center; } .zoom-0 .tag-card-image { max-height: none; height: 16rem; width: 12rem; } .zoom-1 .tag-card-image { max-height: none; height: 20rem; width: 15rem; } .zoom-2 .tag-card-image { max-height: none; height: 24rem; width: 18rem; } .zoom-3 .tag-card-image { max-height: none; height: 28rem; width: 21rem; } .zoom-0.tag-card, .zoom-1.tag-card, .zoom-2.tag-card, .zoom-3.tag-card { width: initial; } .tag-card .card-section > a { position: absolute; width: 100%; height: 100%; display: block; left: 0; right: 0; top: 0; bottom: 0; padding: 7px 14px 0px 14px; } .tag-card .card-section .tag-sub-tags { position: relative; margin-top: 2rem; z-index: 1; } .tag-sub-tags { font-size: 0; } .tag-parent-tags { display: none; } 子标签浏览器 此片段基于上述标签布局片段稍作调整，专为将子标签用作层级结构的用户设计。例如，西瓜是水果的子标签，当点击“水果”时，我希望看到橙子和西瓜，但也可能希望更轻松地浏览水果子标签列表。这正是此片段的用途。任何拥有子标签的标签都会显示一个（…）图标。点击名称将显示该标签下的所有子标签；点击图片则正常打开该标签本身。你可以更改图标 URL 中的‘137cbd’以匹配主题颜色。 more_tag_subtag1861×874 147 KB /*标签布局修改*/ /* 致谢：https://github.com/HijackHornet */ .tag-card { width: 16rem; padding: 0; } .tag-card .card-section { height: 2.5rem; position: absolute; bottom: 0; left: 0; right: 0; background: #0000007a; line-height: none; } .tag-card .card-section .TruncatedText { -webkit-line-clamp: 1 !important; } .tag-card h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { line-height: normal; } .tag-card hr, .tag-description { display: none; } .tag-card .btn-group { position: absolute; width: 100%; bottom: 2.5rem; margin-bottom: 0; opacity: 0; transition: ease 0.2s; } .tag-card .btn-group:hover { opacity: 1; transition: ease 0.2s; background: #0000007a; } .tag-card-image { object-fit: cover; object-position: center; } .zoom-0 .tag-card-image { max-height: none; height: 16rem; width: 12rem; } .zoom-1 .tag-card-image { max-height: none; height: 20rem; width: 15rem; } .zoom-2 .tag-card-image { max-height: none; height: 24rem; width: 18rem; } .zoom-3 .tag-card-image { max-height: none; height: 28rem; width: 21rem; } .zoom-0.tag-card, .zoom-1.tag-card, .zoom-2.tag-card, .zoom-3.tag-card { width: initial; } .tag-card .card-section > a { position: absolute; width: 100%; height: 100%; display: block; left: 0; right: 0; top: 0; bottom: 0; padding: 7px 14px 0px 14px; } .tag-card .card-section .tag-sub-tags { position: relative; margin-top: 2rem; z-index: 1; } .tag-sub-tags { font-size: 0; } .tag-parent-tags { display: none; } /*标签子标签浏览片段*/ .tag-card .card-section > a { cursor: default; pointer-events: none; } .tag-card .card-section > hr { margin-top: 2rem; } .tag-card .card-section .tag-sub-tags { position: absolute !important; margin-top: 0 !important; width: 100%; height: 100%; display: block; left: 0; right: 0; top: 0; bottom: 0; padding: 0; } .tag-sub-tags::before { content: ""; display: block; background: url("https://img.icons8.com/material-outlined/24/137cbd/connection-status-off.png") no-repeat; background-size: 1.5rem 1.5rem; width: 1.5rem; height: 1.5rem; float: right; margin: 0.5rem 0.5rem 0 0; } .tag-sub-tags > a { width: 100%; height: 100%; display: block; } .tag-card .btn-group a { z-index: 10; } .tag-sub-tags { font-size: 0; } .tag-parent-tags { display: none; } 全局 更改导航栏按钮的顺序。
使用 0 以下的 order 值可将特定按钮移至未排序按钮的左侧，使用 1 以上的值则将其移至右侧。 /* [全局修改] 更改导航栏按钮顺序 */ nav .navbar-nav:first-child { display: flex; flex-direction: row; } div.nav-link[data-rb-event-key="/tags"] { order: -2; } div.nav-link[data-rb-event-key="/groups"] { order: -1; } div.nav-link[data-rb-event-key="/scenes"] { order: 1; } 隐藏“Donate”按钮 隐藏“Donate”按钮。 /* [全局修改] 隐藏“Donate”按钮 */ .btn-primary.btn.donate.minimal { display: none; } 模糊 NSFW 图片 适用于在 stash 上工作但不希望暴露 NSFW 图片和文字的场景。覆盖范围可能不完备。 /* [全局修改] 模糊 NSFW 图片 */ .scene-card-preview-video, .scene-card-preview-image, .image-card-preview-image, .image-thumbnail, .gallery-card-image, .performer-card-image, .tag-card-image, img.performer, .group-card-image, .gallery .flexbin img, .wall-item-media, .studio-overlay .image-thumbnail, .image-card-preview-image, #scene-details-container .text-input, #scene-details-container .scene-header, #scene-details-container .react-select__single-value, .scene-details .pre, #scene-tabs-tabpane-scene-file-info-panel span.col-8.text-truncate > a, .gallery .flexbin img, .group-details .logo { filter: blur(12px); } .scene-card-video { filter: blur(13px); } .jw-video, .jw-preview, .jw-flag-floating, .image-container, .studio-logo, .scene-cover { filter: blur(20px); } .group-card .text-truncate, .scene-card .card-section { filter: blur(4px); } 模糊 NSFW 图片并在鼠标悬停时取消模糊 模糊 NSFW 图片，鼠标悬停时恢复清晰。 blur21246×502 128 KB /* [全局修改] 模糊 NSFW 图片，鼠标悬停时取消模糊 */ /* Credit: fl0w#9497 */ /* === 更强模糊 === */ /* 场景 */ .scene-card-preview, .vjs-poster, video, .scene-cover, .scrubber-item, /* 图片 */ .image-card-preview, .image-image, .gallery-image, /* 分组 */ .group-card-image, .group-images, /* 图集 */ .gallery-card-image, table > tbody > tr > td > a > img.w-100, /* 演职员 */ .performer-card-image, img.performer, /* 工作室 */ .studio-card-image, /* 标签 */ .tag-card-image { filter: blur(30px); } /* === 较弱模糊 === */ /* 通用 */ .card-section-title, /* 场景 */ .studio-overlay, .scene-header > h3, h3.scene-header, .studio-logo, .image-thumbnail, /* 图片 */ h3.image-header, /* 分组 */ .group-details > div > h2, /* 图集 */ h3.gallery-header, /* 工作室 */ .studio-details .logo, .studio-details > div > h2, /* 标签 */ .logo-container > .logo, .logo-container > h2 { filter: blur(2px); } /* === 悬停时取消模糊 === */ /* 通用 */ .thumbnail-section:hover *, .card:hover .card-section-title, /* 场景 */ .card:hover .studio-overlay, .video-js:hover .vjs-poster, video:hover, .scene-header:hover > h3, div:hover > .scene-header, .studio-logo:hover, .scene-cover:hover, .image-thumbnail:hover, .scene-card-preview:hover, .scrubber-item:hover, /* 图片 */ .image-image:hover, div:hover > .image-header, .gallery-image:hover, /* 分组 */ .group-images:hover, .group-details > div > h2:hover, /* 图集 */ div:hover > .gallery-header, table > tbody > tr > td:hover > a > img.w-100, /* 演职员 */ img.performer:hover, /* 工作室 */ .studio-details .logo:hover, .studio-details:hover > div > h2, /* 标签 */ .logo-container > .logo:hover, .logo-container:hover > h2 { filter: blur(0px); } 隐藏计数为 0 的徽章 隐藏计数为 0 的徽章。 /* [全局修改] 隐藏计数为 0 的徽章 */ /* Credit: echo6ix */ span.badge[data-value="0"] { display: none; } 通过复选框选中的卡片添加边框 为通过复选框选中的任何卡片添加醒目的边框。边框颜色使用 Stash 的 --primary 颜色变量，以与使用 Stash 颜色变量的任何主题保持一致。 Border-around-cards387×278 2.23 KB /* [全局修改] 复选框选中时修改卡片样式 */ /* Credit: echo6ix */ .grid-card.card:has(input:checked) { box-shadow: 0 0 0 1px var(--primary,rgba(255, 255, 255, 0.30)); } 在列表结果头部显示分页 将分页控件重新添加回对象页面的顶部结果头部。 510453394-f4cece94-86b3-494d-a297-4f466d595bf61684×275 31.5 KB /* [全局修改] 在列表结果头部显示分页 */ /* Credit: WithoutPants */ .list-results-header .pagination-index-container div.pagination { display: flex; } 重新设计网格视图以显示心形替代横幅 重新设计网格视图，使心形图标替代横幅显示。 image335×423 26.7 KB /* 重新设计网格视图，使心形图标替代横幅 */ /* Credit: theejuicebox */ div.rating-banner.rating-5 { visibility: hidden; padding: 0; transform: none; } div.rating-banner.rating-5::after { visibility: visible; content: "♥"; color: #ff7373; font-size: 3em; filter: drop-shadow(0 0 2px rgba(0,0,0,.9)); }
more_studio_item_after1894×891 156 KB /* [Studios 标签页] 每行显示更多项目 */ /* 致谢：https://github.com/HijackHornet */ :not(.recommendation-row .studio-card).studio-card { width: 15% } :not(.recommendation-row .studio-card-image).studio-card-image { width: 100% } .studio-card h5 { text-align: center !important; display: block; } Tags 不同的标签卡片布局 改变标签页中标签卡片的布局，以及在悬停于不同内容的标签时卡片的显示效果。 tags_layout978×229 60.9 KB /* [标签更改] 改变标签页及悬停时的标签卡片布局 */ /* 致谢：Qx#1573 */ .tag-parent-tags, .tag-sub-tags { display: none;} .tag-card.zoom-0.grid-card.card div.card-section div.card-popovers.btn-group { margin-top: 1em; } .tag-card.zoom-0.grid-card.card div.thumbnail-section a.tag-card-header img.tag-card-image { object-fit: cover; } .tag-card.zoom-0.grid-card.card div.card-section hr { display: none; } .tag-card.zoom-0.grid-card.card { padding: 0; width: 300px; height: 180px; } .tag-card.zoom-0.grid-card.card div.card-section { position: absolute; text-shadow: 2px 2px 2px #000; width: 100%; background-color: rgba(0, 0, 0, 0.3); height: 3em; overflow: hidden; transition: 0.8s ease-in-out; } .tag-card.zoom-0.grid-card.card div.card-section a { text-decoration: none; } .tag-card.zoom-0.grid-card.card div.card-section:hover { height: 22em; } .tag-card.zoom-0.grid-card.card div.card-section a h5.card-section-title.flex-aligned div.TruncatedText { white-space: nowrap; text-overflow: ellipsis; width: 300px; overflow: hidden; display: block; } .tag-card.zoom-0.grid-card.card div.card-section div.TruncatedText.tag-description { position: relative; top: 0.5em; -webkit-text-stroke-width: 1px; font-size: 16px; } .tag-card .card-popovers .btn { text-shadow: 1px 1px 1px #000; stroke: black; stroke-width: 15; } 替代标签布局 更改标签布局以展示更多图片，并在悬停时显示详细信息。 more_tag_before1901×887 129 KB
more_tag_after_11874×880 180 KB
more_tag_after_21896×888 145 KB /*标签布局修改*/ /* 致谢：https://github.com/HijackHornet */ .tag-card { width: 16rem; padding: 0; } .tag-card .card-section { height: 2.5rem; position: absolute; bottom: 0; left: 0; right: 0; background: #0000007a; line-height: none; } .tag-card .card-section .TruncatedText { -webkit-line-clamp: 1 !important; } .tag-card h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { line-height: normal; } .tag-card hr, .tag-description { display: none; } .tag-card .btn-group { position: absolute; width: 100%; bottom: 2.5rem; margin-bottom: 0; opacity: 0; transition: ease 0.2s; } .tag-card .btn-group:hover { opacity: 1; transition: ease 0.2s; background: #0000007a; } .tag-card-image { object-fit: cover; object-position: center; } .zoom-0 .tag-card-image { max-height: none; height: 16rem; width: 12rem; } .zoom-1 .tag-card-image { max-height: none; height: 20rem; width: 15rem; } .zoom-2 .tag-card-image { max-height: none; height: 24rem; width: 18rem; } .zoom-3 .tag-card-image { max-height: none; height: 28rem; width: 21rem; } .zoom-0.tag-card, .zoom-1.tag-card, .zoom-2.tag-card, .zoom-3.tag-card { width: initial; } .tag-card .card-section > a { position: absolute; width: 100%; height: 100%; display: block; left: 0; right: 0; top: 0; bottom: 0; padding: 7px 14px 0px 14px; } .tag-card .card-section .tag-sub-tags { position: relative; margin-top: 2rem; z-index: 1; } .tag-sub-tags { font-size: 0; } .tag-parent-tags { display: none; } 子标签浏览器 此片段基于上述标签布局片段稍作调整，专为将子标签用作层级结构的用户设计。例如，西瓜是水果的子标签，当点击“水果”时，我希望看到橙子和西瓜，但也可能希望更轻松地浏览水果子标签列表。这正是此片段的用途。任何拥有子标签的标签都会显示一个（…）图标。点击名称将显示该标签下的所有子标签；点击图片则正常打开该标签本身。你可以更改图标 URL 中的‘137cbd’以匹配主题颜色。 more_tag_subtag1861×874 147 KB /*标签布局修改*/ /* 致谢：https://github.com/HijackHornet */ .tag-card { width: 16rem; padding: 0; } .tag-card .card-section { height: 2.5rem; position: absolute; bottom: 0; left: 0; right: 0; background: #0000007a; line-height: none; } .tag-card .card-section .TruncatedText { -webkit-line-clamp: 1 !important; } .tag-card h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { line-height: normal; } .tag-card hr, .tag-description { display: none; } .tag-card .btn-group { position: absolute; width: 100%; bottom: 2.5rem; margin-bottom: 0; opacity: 0; transition: ease 0.2s; } .tag-card .btn-group:hover { opacity: 1; transition: ease 0.2s; background: #0000007a; } .tag-card-image { object-fit: cover; object-position: center; } .zoom-0 .tag-card-image { max-height: none; height: 16rem; width: 12rem; } .zoom-1 .tag-card-image { max-height: none; height: 20rem; width: 15rem; } .zoom-2 .tag-card-image { max-height: none; height: 24rem; width: 18rem; } .zoom-3 .tag-card-image { max-height: none; height: 28rem; width: 21rem; } .zoom-0.tag-card, .zoom-1.tag-card, .zoom-2.tag-card, .zoom-3.tag-card { width: initial; } .tag-card .card-section > a { position: absolute; width: 100%; height: 100%; display: block; left: 0; right: 0; top: 0; bottom: 0; padding: 7px 14px 0px 14px; } .tag-card .card-section .tag-sub-tags { position: relative; margin-top: 2rem; z-index: 1; } .tag-sub-tags { font-size: 0; } .tag-parent-tags { display: none; } /*标签子标签浏览片段*/ .tag-card .card-section > a { cursor: default; pointer-events: none; } .tag-card .card-section > hr { margin-top: 2rem; } .tag-card .card-section .tag-sub-tags { position: absolute !important; margin-top: 0 !important; width: 100%; height: 100%; display: block; left: 0; right: 0; top: 0; bottom: 0; padding: 0; } .tag-sub-tags::before { content: ""; display: block; background: url("https://img.icons8.com/material-outlined/24/137cbd/connection-status-off.png") no-repeat; background-size: 1.5rem 1.5rem; width: 1.5rem; height: 1.5rem; float: right; margin: 0.5rem 0.5rem 0 0; } .tag-sub-tags > a { width: 100%; height: 100%; display: block; } .tag-card .btn-group a { z-index: 10; } .tag-sub-tags { font-size: 0; } .tag-parent-tags { display: none; } 全局 更改导航栏按钮的顺序。
使用 0 以下的 order 值可将特定按钮移至未排序按钮的左侧，使用 1 以上的值则将其移至右侧。 /* [全局修改] 更改导航栏按钮顺序 */ nav .navbar-nav:first-child { display: flex; flex-direction: row; } div.nav-link[data-rb-event-key="/tags"] { order: -2; } div.nav-link[data-rb-event-key="/groups"] { order: -1; } div.nav-link[data-rb-event-key="/scenes"] { order: 1; } 隐藏“Donate”按钮 隐藏“Donate”按钮。 /* [全局修改] 隐藏“Donate”按钮 */ .btn-primary.btn.donate.minimal { display: none; } 模糊 NSFW 图片 适用于在 stash 上工作但不希望暴露 NSFW 图片和文字的场景。覆盖范围可能不完备。 /* [全局修改] 模糊 NSFW 图片 */ .scene-card-preview-video, .scene-card-preview-image, .image-card-preview-image, .image-thumbnail, .gallery-card-image, .performer-card-image, .tag-card-image, img.performer, .group-card-image, .gallery .flexbin img, .wall-item-media, .studio-overlay .image-thumbnail, .image-card-preview-image, #scene-details-container .text-input, #scene-details-container .scene-header, #scene-details-container .react-select__single-value, .scene-details .pre, #scene-tabs-tabpane-scene-file-info-panel span.col-8.text-truncate > a, .gallery .flexbin img, .group-details .logo { filter: blur(12px); } .scene-card-video { filter: blur(13px); } .jw-video, .jw-preview, .jw-flag-floating, .image-container, .studio-logo, .scene-cover { filter: blur(20px); } .group-card .text-truncate, .scene-card .card-section { filter: blur(4px); } 模糊 NSFW 图片并在鼠标悬停时取消模糊 模糊 NSFW 图片，鼠标悬停时恢复清晰。 blur21246×502 128 KB /* [全局修改] 模糊 NSFW 图片，鼠标悬停时取消模糊 */ /* Credit: fl0w#9497 */ /* === 更强模糊 === */ /* 场景 */ .scene-card-preview, .vjs-poster, video, .scene-cover, .scrubber-item, /* 图片 */ .image-card-preview, .image-image, .gallery-image, /* 分组 */ .group-card-image, .group-images, /* 图集 */ .gallery-card-image, table > tbody > tr > td > a > img.w-100, /* 演职员 */ .performer-card-image, img.performer, /* 工作室 */ .studio-card-image, /* 标签 */ .tag-card-image { filter: blur(30px); } /* === 较弱模糊 === */ /* 通用 */ .card-section-title, /* 场景 */ .studio-overlay, .scene-header > h3, h3.scene-header, .studio-logo, .image-thumbnail, /* 图片 */ h3.image-header, /* 分组 */ .group-details > div > h2, /* 图集 */ h3.gallery-header, /* 工作室 */ .studio-details .logo, .studio-details > div > h2, /* 标签 */ .logo-container > .logo, .logo-container > h2 { filter: blur(2px); } /* === 悬停时取消模糊 === */ /* 通用 */ .thumbnail-section:hover *, .card:hover .card-section-title, /* 场景 */ .card:hover .studio-overlay, .video-js:hover .vjs-poster, video:hover, .scene-header:hover > h3, div:hover > .scene-header, .studio-logo:hover, .scene-cover:hover, .image-thumbnail:hover, .scene-card-preview:hover, .scrubber-item:hover, /* 图片 */ .image-image:hover, div:hover > .image-header, .gallery-image:hover, /* 分组 */ .group-images:hover, .group-details > div > h2:hover, /* 图集 */ div:hover > .gallery-header, table > tbody > tr > td:hover > a > img.w-100, /* 演职员 */ img.performer:hover, /* 工作室 */ .studio-details .logo:hover, .studio-details:hover > div > h2, /* 标签 */ .logo-container > .logo:hover, .logo-container:hover > h2 { filter: blur(0px); } 隐藏计数为 0 的徽章 隐藏计数为 0 的徽章。 /* [全局修改] 隐藏计数为 0 的徽章 */ /* Credit: echo6ix */ span.badge[data-value="0"] { display: none; } 通过复选框选中的卡片添加边框 为通过复选框选中的任何卡片添加醒目的边框。边框颜色使用 Stash 的 --primary 颜色变量，以与使用 Stash 颜色变量的任何主题保持一致。 Border-around-cards387×278 2.23 KB /* [全局修改] 复选框选中时修改卡片样式 */ /* Credit: echo6ix */ .grid-card.card:has(input:checked) { box-shadow: 0 0 0 1px var(--primary,rgba(255, 255, 255, 0.30)); } 在列表结果头部显示分页 将分页控件重新添加回对象页面的顶部结果头部。 510453394-f4cece94-86b3-494d-a297-4f466d595bf61684×275 31.5 KB /* [全局修改] 在列表结果头部显示分页 */ /* Credit: WithoutPants */ .list-results-header .pagination-index-container div.pagination { display: flex; } 重新设计网格视图以显示心形替代横幅 重新设计网格视图，使心形图标替代横幅显示。 image335×423 26.7 KB /* 重新设计网格视图，使心形图标替代横幅 */ /* Credit: theejuicebox */ div.rating-banner.rating-5 { visibility: hidden; padding: 0; transform: none; } div.rating-banner.rating-5::after { visibility: visible; content: "♥"; color: #ff7373; font-size: 3em; filter: drop-shadow(0 0 2px rgba(0,0,0,.9)); }
