// ==UserScript==
// @name 【云】收藏功能移动端适配
// @namespace http://tampermonkey.net/
// @version 1.0
// @description 为收藏功能脚本添加移动端适配样式
// @author 您
// @match https://fubiji.site/*
// @license MIT
// @grant GM_addStyle
// ==/UserScript==
(function() {
'use strict';
// 移动端适配样式
GM_addStyle(`
/* 移动端媒体查询 - 768px以下设备 */
@media (max-width: 768px) {
/* 悬浮按钮适配 */
.favorites-toggle {
top: 10px !important;
right: 10px !important;
padding: 6px 4px !important;
font-size: 10px !important;
z-index: 9999 !important;
width: 45px !important;
min-width: 45px !important;
max-width: 45px !important;
text-align: center !important;
box-sizing: border-box !important;
}
.preload-all-btn {
top: 10px !important;
right: 65px !important;
padding: 6px 4px !important;
font-size: 10px !important;
z-index: 9999 !important;
width: 45px !important;
min-width: 45px !important;
max-width: 45px !important;
text-align: center !important;
box-sizing: border-box !important;
}
.clear-unloaded-views-btn {
top: 10px !important;
right: 120px !important;
padding: 6px 4px !important;
font-size: 10px !important;
z-index: 9999 !important;
width: 45px !important;
min-width: 45px !important;
max-width: 45px !important;
text-align: center !important;
box-sizing: border-box !important;
}
.blacklist-toggle {
top: 10px !important;
right: 175px !important;
padding: 6px 4px !important;
font-size: 10px !important;
z-index: 9999 !important;
width: 45px !important;
min-width: 45px !important;
max-width: 45px !important;
text-align: center !important;
box-sizing: border-box !important;
}
/* 主面板适配 */
.favorites-panel {
position: fixed !important;
top: 5px !important;
left: 5px !important;
right: 5px !important;
width: auto !important;
max-width: calc(100vw - 10px) !important;
max-height: calc(100vh - 10px) !important;
overflow: hidden !important;
border-radius: 6px !important;
}
.favorites-header {
padding: 10px 15px !important;
flex-wrap: wrap !important;
}
.favorites-title {
font-size: 14px !important;
}
.favorites-close {
font-size: 18px !important;
padding: 5px !important;
}
/* 搜索和排序区域适配 */
.favorites-search {
padding: 10px 15px !important;
}
.search-input {
font-size: 14px !important;
padding: 10px 12px !important;
}
.favorites-sort {
padding: 8px 15px !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
.sort-select {
padding: 6px 8px !important;
font-size: 13px !important;
min-width: 100px !important;
}
.show-images-btn {
padding: 6px 10px !important;
font-size: 12px !important;
margin-top: 5px !important;
width: 100% !important;
}
/* 内容区域适配 */
.favorites-content {
max-height: calc(100vh - 280px) !important;
padding: 8px !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px !important;
}
.favorite-item {
max-width: none !important;
min-width: auto !important;
padding: 6px !important;
border-radius: 6px !important;
}
.favorite-title {
font-size: 11px !important;
line-height: 1.3 !important;
margin-top: 6px !important;
white-space: normal !important;
max-height: 2.6em !important;
overflow: hidden !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
}
.favorite-info {
margin-top: 6px !important;
font-size: 9px !important;
flex-wrap: wrap !important;
gap: 4px !important;
}
.favorite-images {
aspect-ratio: 1.2 !important;
gap: 2px !important;
border-radius: 6px !important;
}
.favorite-image {
border-radius: 4px !important;
}
/* 操作按钮区域适配 */
.favorites-actions {
padding: 10px 15px !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
.favorites-action-btn {
padding: 8px 12px !important;
font-size: 13px !important;
flex: 1 1 calc(50% - 4px) !important;
min-width: 120px !important;
}
/* 设置区域适配 */
.favorites-settings {
padding: 10px 15px !important;
}
.auto-update-toggle {
font-size: 11px !important;
gap: 6px !important;
}
.storage-info {
font-size: 10px !important;
flex-wrap: wrap !important;
gap: 5px !important;
}
/* 黑名单面板适配 */
.blacklist-panel {
position: fixed !important;
top: 5px !important;
left: 5px !important;
right: 5px !important;
width: auto !important;
max-width: calc(100vw - 10px) !important;
max-height: calc(100vh - 10px) !important;
border-radius: 6px !important;
}
.blacklist-header {
padding: 10px 15px !important;
}
.blacklist-content {
padding: 15px !important;
max-height: calc(100vh - 200px) !important;
}
.blacklist-search-input,
.blacklist-input {
padding: 10px 12px !important;
font-size: 14px !important;
}
.blacklist-item {
padding: 10px 12px !important;
margin-bottom: 10px !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
.blacklist-item-text {
font-size: 13px !important;
min-width: 100% !important;
margin-bottom: 5px !important;
}
.blacklist-item-remove {
padding: 6px 10px !important;
font-size: 12px !important;
align-self: flex-start !important;
}
.blacklist-actions {
padding: 10px 15px !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
.blacklist-action-btn {
padding: 8px 12px !important;
font-size: 13px !important;
flex: 1 1 calc(50% - 4px) !important;
}
/* 图片查看器适配 */
.image-viewer-content {
max-width: 95% !important;
max-height: 95vh !important;
padding: 0 10px !important;
}
.image-viewer img {
max-height: 85vh !important;
border-radius: 6px !important;
}
.image-viewer-close {
top: -35px !important;
right: 0 !important;
width: 36px !important;
height: 36px !important;
font-size: 20px !important;
}
.image-viewer-nav {
width: 44px !important;
height: 44px !important;
font-size: 20px !important;
}
.image-viewer-nav.prev {
left: -50px !important;
}
.image-viewer-nav.next {
right: -50px !important;
}
.image-viewer-info,
.image-viewer-counter {
font-size: 12px !important;
padding: 6px 12px !important;
border-radius: 15px !important;
}
.image-viewer-counter {
top: -35px !important;
}
.image-viewer-info {
bottom: -35px !important;
}
/* 列表页按钮适配 */
.list-page .list-item-buttons {
position: static !important;
left: auto !important;
top: auto !important;
transform: none !important;
margin: 8px 0 !important;
flex-wrap: wrap !important;
gap: 6px !important;
min-width: auto !important;
}
.list-page .format-standard {
padding: 10px !important;
}
/* 按钮大小适配 */
.favorite-btn,
.super-like-btn,
.view-count,
.preload-btn,
.blacklist-btn {
padding: 6px 10px !important;
font-size: 12px !important;
min-width: 45px !important;
margin: 2px !important;
}
.view-count {
gap: 2px !important;
}
.view-count-icon {
font-size: 9px !important;
}
/* 列表项图片区域适配 */
.list-item-images {
height: 150px !important;
margin-top: 6px !important;
border-radius: 6px !important;
}
.list-item-image {
height: 150px !important;
border-radius: 4px !important;
}
.list-item-image-nav {
width: 28px !important;
height: 28px !important;
font-size: 14px !important;
}
.list-item-image-nav.prev {
left: 3px !important;
}
.list-item-image-nav.next {
right: 3px !important;
}
.list-item-image-dot {
width: 5px !important;
height: 5px !important;
}
/* 分页控件适配 */
.pagination-container {
flex-wrap: wrap !important;
gap: 5px !important;
margin: 10px 0 !important;
padding: 8px 5px !important;
}
.pagination-btn {
padding: 6px 8px !important;
font-size: 11px !important;
margin: 1px !important;
min-width: 32px !important;
}
.page-size-container {
margin: 5px 0 !important;
font-size: 11px !important;
width: 100% !important;
justify-content: center !important;
}
.page-size-select {
padding: 4px 6px !important;
font-size: 11px !important;
}
.pagination-info {
font-size: 11px !important;
margin: 0 !important;
width: 100% !important;
text-align: center !important;
}
/* 超级喜欢徽章适配 */
.super-like-badge {
width: 14px !important;
height: 14px !important;
font-size: 9px !important;
top: -1px !important;
right: -1px !important;
}
/* 收藏计数和黑名单计数适配 */
.favorites-count,
.blacklist-count {
width: 20px !important;
height: 20px !important;
font-size: 10px !important;
margin-left: 4px !important;
}
/* 消息提示适配 */
.favorites-message {
padding: 12px 16px !important;
font-size: 13px !important;
max-width: 90% !important;
word-wrap: break-word !important;
border-radius: 6px !important;
}
/* 导出提醒按钮适配 */
.export-reminder-btn {
top: 60px !important;
left: 10px !important;
padding: 6px 10px !important;
font-size: 11px !important;
border-radius: 6px !important;
}
}
/* 小屏幕设备进一步优化 - 480px以下 */
@media (max-width: 480px) {
.favorites-content {
grid-template-columns: 1fr !important;
}
.favorites-panel {
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100vw !important;
height: 100vh !important;
max-width: 100vw !important;
max-height: 100vh !important;
border-radius: 0 !important;
}
.blacklist-panel {
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100vw !important;
height: 100vh !important;
max-width: 100vw !important;
max-height: 100vh !important;
border-radius: 0 !important;
}
.favorites-content {
max-height: calc(100vh - 320px) !important;
}
.blacklist-content {
max-height: calc(100vh - 220px) !important;
}
.favorites-actions {
flex-direction: column !important;
}
.favorites-action-btn {
flex: 1 !important;
width: 100% !important;
}
.blacklist-actions {
flex-direction: column !important;
}
.blacklist-action-btn {
flex: 1 !important;
width: 100% !important;
}
/* 隐藏部分悬浮按钮以节省空间 */
.clear-unloaded-views-btn,
.blacklist-toggle {
display: none !important;
}
/* 调整剩余按钮位置 */
.favorites-toggle {
right: 10px !important;
width: 40px !important;
min-width: 40px !important;
max-width: 40px !important;
padding: 6px 2px !important;
font-size: 9px !important;
}
.preload-all-btn {
right: 60px !important;
width: 40px !important;
min-width: 40px !important;
max-width: 40px !important;
padding: 6px 2px !important;
font-size: 9px !important;
}
.clear-unloaded-views-btn {
right: 120px !important;
}
.blacklist-toggle {
right: 175px !important;
}
/* 图片查看器进一步优化 */
.image-viewer-nav.prev {
left: -40px !important;
}
.image-viewer-nav.next {
right: -40px !important;
}
.image-viewer-close {
top: -30px !important;
}
.image-viewer-counter {
top: -30px !important;
}
.image-viewer-info {
bottom: -30px !important;
}
}
/* 横屏模式优化 */
@media (max-width: 768px) and (orientation: landscape) {
.favorites-content {
grid-template-columns: repeat(3, 1fr) !important;
max-height: calc(100vh - 250px) !important;
}
.blacklist-content {
max-height: calc(100vh - 180px) !important;
}
}
/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
.favorite-btn:hover,
.super-like-btn:hover,
.view-count:hover,
.preload-btn:hover,
.blacklist-btn:hover {
transform: none !important;
background-color: initial !important;
}
.favorite-item:hover {
transform: none !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}
.image-viewer-nav:hover,
.image-viewer-close:hover {
transform: translateY(-50%) !important;
background: rgba(255,255,255,0.2) !important;
}
.image-viewer-close:hover {
transform: none !important;
}
/* 增加触摸目标大小 */
.favorite-btn,
.super-like-btn,
.view-count,
.preload-btn,
.blacklist-btn {
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.image-viewer-nav,
.image-viewer-close {
min-width: 44px !important;
min-height: 44px !important;
}
.list-item-image-nav {
min-width: 32px !important;
min-height: 32px !important;
}
}
`);
console.log('收藏功能移动端适配脚本已加载');
})();