Warning: mkdir(): No space left on device in /www/wwwroot/NEW14chongjian.com/func.php on line 127
Warning: file_put_contents(./cachefile_yuan/gjbl.net/cache/d0/0d346/4f01a.html): failed to open stream: No such file or directory in /www/wwwroot/NEW14chongjian.com/func.php on line 115
:root {
--bg-primary: #f7f7f7;
--bg-secondary: #ffffff;
--text-primary: #333333;
--text-secondary: #888888;
--accent-green: #07c160;
--card-hover: #fcfcfc;
--divider: #eeeeee;
}[data-theme='dark'] {
--bg-primary: #1e1e1e;
--bg-secondary: #2c2c2c;
--text-primary: #ffffff;
--text-secondary: #aaaaaa;
--accent-green: #07c160;
--card-hover: #363636;
--divider: #3a3a3a;
}@card-border-radius: 12px;* {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}body {
margin: 0;
padding: 0;
background-color: var(--bg-primary);
color: var(--text-primary);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
transition: background-color 0.3s ease, color 0.3s ease;
overflow-x: hidden;
}#cms-app {
max-width: 800px;
margin: 0 auto;
padding: 20px;
position: relative;
overflow-x: hidden;
}/* --- Search Bar --- */
.cms-search-bar {
position: relative;
display: flex;
align-items: center;
margin: 0 5px;
width: 36px;
/* Initial small width */
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}.cms-search-bar.is-expanded {
width: 180px;
/* Expanded width */
}.cms-search-input {
width: 100%;
height: 36px;
padding: 0 10px 0 36px;
border: 1px solid transparent;
border-radius: 18px;
background: transparent;
color: var(--text-primary);
font-size: 16px;
/* Prevent ioses zoom */
transition: all 0.3s ease;
outline: none;
cursor: pointer;
opacity: 0;
/* Input hidden initially */
}.cms-search-bar.is-expanded .cms-search-input {
border-color: var(--divider);
background: var(--bg-primary);
opacity: 1;
cursor: text;
}.cms-search-input:focus {
border-color: var(--accent-green) !important;
background: var(--bg-secondary) !important;
box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.1);
}.cms-search-icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: var(--text-secondary);
width: 20px;
height: 20px;
z-index: 10;
}.cms-search-bar:not(.is-expanded) .cms-search-icon {
pointer-events: auto;
/* Clickable when collapsed */
cursor: pointer;
}/* --- Search Clear Button --- */
.cms-search-clear {
position: absolute;
right: 5px;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
cursor: pointer;
z-index: 10; &:hover {
color: var(--text-primary);
}
}/* --- Search Mode Bar --- */
.cms-search-mode-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
background-color: var(--bg-secondary);
border-radius: @card-border-radius;
margin-bottom: 10px;
gap: 10px;
animation: fadeIn 0.3s ease;
}.cms-search-info {
display: flex;
align-items: center;
font-size: 14px;
color: var(--text-secondary);
}.cms-search-keyword {
color: var(--text-primary);
font-weight: 600;
margin-left: 5px;
}.cms-search-exit {
display: flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: var(--danger);
/* Standardize or use specific color */
cursor: pointer;
padding: 4px 8px;
background: rgba(255, 77, 79, 0.1);
border-radius: 4px;
transition: all 0.2s; &:hover {
background: rgba(255, 77, 79, 0.2);
}
}/* Hidden Nav in Search Mode */
.cms-nav-list.is-hidden {
display: none !important;
}@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-5px);
} to {
opacity: 1;
transform: translateY(0);
}
}/* --- Transitions --- */
.cms-article-container {
position: relative;
min-height: 500px;
overflow: hidden;
}.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}.slide-right-leave-active,
.slide-left-leave-active {
position: absolute;
top: 0;
left: 0;
width: 100%;
}.slide-right-enter-from {
transform: translateX(100%);
opacity: 0;
}.slide-right-leave-to {
transform: translateX(-100%);
opacity: 0;
}.slide-left-enter-from {
transform: translateX(-100%);
opacity: 0;
}.slide-left-leave-to {
transform: translateX(100%);
opacity: 0;
}/* --- View Transitions (Theme Toggle) --- */
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
mix-blend-mode: normal;
}::view-transition-old(root) {
z-index: 1;
}::view-transition-new(root) {
z-index: 99999;
}/* --- Theme Toggle --- */
.cms-theme-icon {
width: 44px;
/* Enlarged hit area */
height: 44px;
cursor: pointer;
color: var(--text-secondary);
display: flex;
align-items: center;
justify-content: center; @media (hover: hover) {
&:hover {
color: var(--text-primary);
}
} svg {
width: 20px;
height: 20px;
fill: currentColor;
}
}/* --- Navigation --- */
.cms-nav-section {
display: flex;
flex-direction: column;
margin-bottom: 10px;
padding: 15px 0;
border-radius: @card-border-radius; .cms-nav-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding: 0 5px; .cms-title {
font-size: 18px;
font-weight: 600;
} .cms-back-btn {
cursor: pointer;
/* padding: 5px; */
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--bg-primary); @media (hover: hover) {
&:hover {
background: var(--divider);
}
}
} .cms-nav-actions {
display: flex;
align-items: center;
gap: 15px; .cms-expand-btn {
font-size: 13px;
color: var(--text-secondary);
cursor: pointer;
padding: 4px 8px;
}
}
} .cms-nav-list {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 10px;
overflow: hidden;
max-height: 95px;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); &.is-expanded {
max-height: 250px;
}
} .cms-nav-item {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
padding: 5px 0;
opacity: 0.7; @media (hover: hover) {
&:hover {
opacity: 1;
}
} .cms-nav-icon-wrap {
width: 55px;
height: 55px;
margin-bottom: 8px;
border-radius: 50%;
background: var(--bg-primary);
display: flex;
align-items: center;
justify-content: center; .cms-icon-svg {
width: 50px;
height: 50px; svg {
width: 100%;
height: 100%;
}
}
} .cms-nav-name {
font-size: 13px;
color: var(--text-secondary);
} &.is-active {
opacity: 1; .cms-nav-icon-wrap {
outline: 4px solid #d8d8d866;
outline-offset: 1px;
} .cms-nav-name {
color: var(--text-primary);
font-weight: 600;
}
}
}
}/* --- Article List & Cards --- */
.cms-article-list {
display: flex;
flex-direction: column;
gap: 12px;
}.cms-article-card {
background-color: var(--bg-secondary);
border-radius: @card-border-radius;
padding: 20px;
cursor: pointer;
display: grid;
grid-template-areas: "header thumb" "content thumb" "content thumb" "content thumb";
grid-template-columns: 1fr 160px;
grid-template-rows: auto auto;
gap: 8px 30px;
transition: all .2s; @media (hover: hover) {
&:hover {
background-color: var(--card-hover);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}
} .cms-article-title {
margin: 0;
font-size: 18px;
line-height: 1.4;
font-weight: 600;
color: var(--text-primary);
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
overflow-wrap: break-word;
} .cms-article-header {
grid-area: header;
} // Flattening to 3 levels: card -> header -> meta/badge
.cms-article-meta {
display: flex;
align-items: center;
gap: 10px;
justify-content: space-between;
} .cms-type-badge {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--bg-primary);
display: flex;
align-items: center;
justify-content: center; .cms-badge-icon {
display: flex;
align-items: center;
justify-content: center;
} svg {
width: 16px;
height: 16px;
}
} .cms-author-name {
font-size: 14px;
color: #576b95;
} .cms-post-time {
font-size: 12px;
flex: 1;
text-align: right;
color: var(--text-secondary);
} .cms-article-content {
grid-area: content;
} .cms-article-thumb {
grid-area: thumb;
width: 100%;
height: 110px;
border-radius: 8px;
overflow: hidden;
background-color: var(--bg-primary); img {
width: 100%;
height: 100%;
object-fit: cover;
} &.is-fallback {
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
opacity: 0.6;
background: var(--bg-primary);
}
} /* --- Molds --- */
&.cms-card-mold-2 .cms-article-thumb {
position: relative; &::after {
content: "▶";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 32px;
height: 32px;
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 12px;
}
} &.cms-card-mold-7 {
background-color: var(--bg-secondary);
border: none;
padding: 15px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
grid-template-areas:
"header header"
"content content"
"content content"
"content content"; .cms-article-title {
font-size: 19px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 8px;
} .cms-author-name {
color: #07c160 !important;
background: rgba(7, 193, 96, 0.05);
padding: 3px 12px;
border-radius: 4px;
font-weight: 600;
} .cms-article-thumb {
display: none !important;
} @media (hover: hover) {
&:hover {}
}
} /* --- Recruitment Tags (Applied generally or specifically to context) --- */
.cms-recruit-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
} .cms-tag {
font-size: 12px;
color: var(--text-secondary);
background: #f5f5f5;
padding: 3px 8px;
border-radius: 4px;
border: none;
} [data-theme='dark'] .cms-tag {
background: #333;
color: #aaa;
} .cms-tag-highlight {
color: #ff4d4f;
background: rgba(255, 77, 79, 0.1);
font-weight: 600;
} [data-theme='dark'] .cms-tag-highlight {
background: rgba(255, 77, 79, 0.2);
} .cms-tag-icon {
display: inline-flex;
align-items: center;
margin-right: 4px;
vertical-align: -2px;
} &.cms-card-mold-20 {
padding: 10px;
grid-template-rows: auto;
grid-template-columns: 1fr 80px;
align-items: center; .cms-article-content {
min-width: 0;
/* Prevent grid blowout */
margin-right: 15px;
/* Add spacing between content and icon */
} .cms-file-info {
display: flex;
gap: 12px;
margin-top: 6px;
font-size: 13px;
color: var(--text-secondary); span {
background: var(--bg-primary);
padding: 2px 8px;
border-radius: 4px;
border: 1px solid var(--divider);
white-space: nowrap;
}
} .cms-article-thumb {
height: 64px; // Compact height for files
width: 64px; // Square thumbnail
border-radius: 6px; &.is-fallback {
background-color: var(--bg-primary);
color: #1296db;
opacity: 1;
border: 1px solid var(--divider);
} .cms-file-icon-wrap {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center; svg {
width: 32px;
height: 32px;
}
}
}
}
}/* Fix video title height */
.cms-list-type-2 .cms-article-title {
height: 2.8em;
line-height: 1.4;
overflow: hidden;
}/* Dynamic Style for No Thumb */
.cms-article-card:not(:has(.cms-article-thumb)) {
grid-template-areas: "header" "content" "content" "content";
grid-template-columns: 1fr;
}.cms-inline-loading {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}/* --- PC Video Style (Mold 2) --- */
@media (min-width: 768px) {
.cms-list-type-2 {
display: grid;
/* Adjust to 220px to fit 3-4 items/row on standard desktops */
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 10px;
padding-bottom: 20px; .cms-scroll-sentinel {
grid-column: 1 / -1;
} .cms-article-card {
display: flex;
flex-direction: column;
padding: 0;
overflow: hidden;
/* Remove grid layout from default card */
grid-template-columns: none;
grid-template-rows: none;
height: 100%; /* Start: Image at top */
.cms-article-thumb {
order: -1;
width: 100%;
height: auto;
aspect-ratio: 16/9;
border-radius: 0;
margin: 0;
} .cms-article-content {
padding: 0 10px;
order: 2; .cms-article-title {
font-size: 16px;
height: auto;
max-height: 2.8em;
-webkit-line-clamp: 2;
}
} /* Hide or simplifying header elements */
.cms-article-header {
order: 3;
padding: 0 10px 10px;
margin-top: auto;
/* Push to bottom */ }
}
} /* --- PC Waterfall Style (Masonry Layout) --- */
.cms-waterfall-box {
display: flex;
align-items: flex-start;
gap: 20px;
padding-bottom: 20px;
} .cms-waterfall-col {
flex: 1;
display: flex;
width: 100%;
overflow: hidden;
flex-direction: column;
gap: 20px;
} .cms-waterfall-col .cms-article-card {
width: 100%;
display: block;
background: var(--bg-secondary);
border-radius: 8px;
padding: 0;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
cursor: pointer;
break-inside: avoid; @media (hover: hover) {
&:hover {}
} .cms-article-thumb {
width: 100%;
height: auto !important;
display: block;
margin: 0;
padding: 0;
border-radius: 0;
background: transparent; img {
width: 100%;
height: auto !important;
display: block;
margin: 0;
padding: 0;
}
} .cms-article-content {
margin: 0;
padding: 0; .cms-article-title {
font-size: 14px;
line-height: 1.4;
margin: 0;
padding: 10px 10px 0;
font-weight: 500;
} .cms-article-meta {
margin: 0;
padding: 10px; .cms-author-name {
font-size: 12px;
color: var(--text-secondary);
}
}
}
}
}/* --- mobiles View --- */
@media (max-width: 768px) {
#cms-app {
padding: 12px 10px; .cms-nav-section {
padding: 15px 0 0;
} } .cms-nav-section {
.cms-expand-btn {
display: none;
} .cms-nav-list {
display: flex;
overflow-x: auto;
max-height: none;
scrollbar-width: none;
gap: 10px;
margin: 0 -10px; &::-webkit-scrollbar {
display: none;
} .cms-nav-item {
flex: 0 0 calc((100% - 35px) / 4.5);
width: auto; .cms-nav-name {
font-size: 11px;
}
}
}
} .cms-article-card {
padding: 10px;
grid-template-columns: 1fr 100px;
gap: 8px 15px;
grid-template-areas: "content thumb" "header thumb"; .cms-article-thumb {
height: 75px;
border-radius: 2px;
} .cms-article-title {
font-size: 16px !important;
font-weight: 400 !important;
} &.cms-card-mold-12,
&.cms-card-mold-19 {
display: flex;
flex-direction: column;
gap: 0;
padding: 0; .cms-article-header {
order: 1;
padding: 10px;
} .cms-article-title {
padding: 10px;
} .cms-article-thumb {
order: 2;
height: 200px;
} .cms-article-content {
order: 3;
}
} &.cms-card-mold-20 {
grid-template-columns: 1fr 80px; .cms-article-thumb {
height: 64px;
width: 64px;
background: var(--bg-primary);
border: 1px solid var(--divider); .cms-file-icon-wrap {
svg {
width: 32px;
height: 32px;
filter: none;
}
}
}
}
}
.cms-list-type-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px; .cms-scroll-sentinel {
grid-column: 1 / span 2;
} .cms-article-card {
display: flex;
flex-direction: column;
padding: 0;
overflow: hidden;
gap: 0; .cms-article-meta {
justify-content: flex-start;
gap: 5px;
} .cms-article-thumb {
order: 1;
height: 180px;
border-radius: 0;
} .cms-article-content {
order: 2;
padding: 8px 10px 0; .cms-article-title {
font-size: 14px;
}
} .cms-article-header {
order: 3;
padding: 0 10px 10px; .cms-post-time {
display: none;
}
}
}
}
}
.cms-scroll-sentinel {
padding: 30px 0;
text-align: center;
color: var(--text-secondary);
font-size: 14px; .cms-dot-loader {
width: 18px;
height: 18px;
border: 2px solid var(--divider);
border-top-color: var(--accent-green);
border-radius: 50%;
animation: cms-spin 0.8s linear infinite;
display: inline-block;
}
}@keyframes cms-spin {
to {
transform: rotate(360deg);
}
}/* --- AI 智能体 (动态注入) --- */
/* 强制定位并层级低于回到顶部按钮 */
body>.web-chat-ai-panel-box,
body>.webchat-bubble-tip-btn {
bottom: 30px !important;
right: 20px !important;
z-index: 99 !important;
}.web-chat-ai-panel {
position: static !important;
margin: 0 !important;
display: flex;
align-items: center;
justify-content: center;
}.web-chat-ai-panel-box .webchat-bubble-tip-btn::after {
padding-top: 75% !important;
text-align: center !important;
}/* 悬浮模块变量 */
:root {
--web-chat-btn-pc-bottom: 35;
--web-chat-btn-pc-right: 20;
--ai-btn-size: 51px;
--module-width: 55px;
}.cms-floating-module {
position: fixed;
bottom: calc(var(--web-chat-btn-pc-bottom) * 1px);
right: calc(var(--web-chat-btn-pc-right) * 1px);
width: var(--module-width);
height: 90px;
/* 默认高度: 按钮 + 下方文字 */
z-index: 9990;
pointer-events: none; /* 胶囊背景 */
&::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
border-radius: 28px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
/* 调整阴影 */
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
z-index: -1;
opacity: 1;
} /* 分割线 (初始隐藏) */
&::after {
content: '';
position: absolute;
bottom: 85px;
/* 位于智能体上方 */
left: 10px;
right: 10px;
height: 1px;
background: rgba(0, 0, 0, 0.05);
opacity: 0;
transform: scaleX(0.8);
transition: all 0.3s ease;
} &.has-back-top {
height: 155px;
/* 展开高度: 顶部按钮 + 分割线 + 文字 + 智能体 */
} &.has-back-top::after {
opacity: 1;
transform: scaleX(1);
}
}.cms-back-top {
position: absolute;
bottom: 30px;
/* 初始位置与智能体一致 */
left: 50%;
transform: translateX(-50%) scale(0.5);
width: 44px;
height: 44px;
border-radius: 50%;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
color: #333;
pointer-events: auto;
z-index: 2;
border: 1px solid rgba(0, 0, 0, 0.05); &:hover {
color: var(--accent-color);
background: #f5f5f5;
} svg {
width: 24px;
height: 24px;
}
}/* 防闪烁: 智能体移入模块前隐藏 */
body>.web-chat-ai-panel-box {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}.cms-floating-module .web-chat-ai-panel-box {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transition: opacity 0.3s ease;
}/* 智能体按钮样式覆盖 */
.cms-floating-module .webchat-bubble-tip-btn {
position: absolute !important;
bottom: 30px !important;
/* 默认: 文字在下方 */
right: 50% !important;
transform: translateX(50%) !important;
margin: 0 !important;
z-index: 3 !important;
top: auto !important;
left: auto !important;
box-shadow: none !important;
transition: bottom 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}/* 文字定位: 默认在下方 */
.web-chat-ai-panel-box .webchat-bubble-tip-btn::after {
content: attr(data-web-chat-name);
position: absolute !important;
width: 100%;
text-align: center;
font-size: 12px !important;
color: #666;
transform: translateX(-50%);
left: 50% !important;
transition: all 0.4s ease; /* 默认: 下方 */
top: 100% !important;
bottom: auto !important;
padding-top: 5px !important;
padding-bottom: 0 !important;
}/* 展开状态逻辑 */
.cms-floating-module.has-back-top .cms-back-top {
bottom: 95px;
/* 上半部分位置 */
opacity: 1;
transform: translateX(-50%) scale(1);
background: #fff;
border-color: transparent;
}/* 展开时智能体按钮下移 */
.cms-floating-module.has-back-top .webchat-bubble-tip-btn {
bottom: 12px !important;
}/* 展开时文字上移 */
.cms-floating-module.has-back-top .webchat-bubble-tip-btn::after {
top: auto !important;
bottom: 100% !important;
/* 移至上方 */
padding-bottom: 5px !important;
padding-top: 0 !important;
}/* --- 无 AI 模式适配 --- */
.cms-floating-module.no-ai {
height: 0;
box-shadow: none !important;
}.cms-floating-module.no-ai::after,
.cms-floating-module.no-ai::before {
display: none !important;
}.cms-floating-module.no-ai.has-back-top {
height: 44px;
}.cms-floating-module.no-ai.has-back-top .cms-back-top {
bottom: 0;
opacity: 1;
transform: translateX(-50%) scale(1);
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s;
}.fade-enter-from,
.fade-leave-to {
opacity: 0;
}.cms-empty-state {
grid-column: 1 / -1;
padding: 80px 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--text-secondary);
animation: fade-in 0.5s ease; .cms-empty-icon {
width: 100px;
height: 100px;
margin-bottom: 20px; svg {
width: 100%;
height: 100%;
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.05));
}
} p {
font-size: 15px;
color: var(--text-tertiary);
/* Assumes tertiary color exists or fallback */
color: #999;
margin: 0;
font-weight: 500;
}
}@keyframes fade-in {
from {
opacity: 0;
transform: translateY(10px);
} to {
opacity: 1;
transform: translateY(0);
}
}.cms-search-loading-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 100px 0;
color: var(--text-secondary);
font-size: 15px;
grid-column: 1 / -1;
animation: fade-in 0.3s ease; .cms-dot-loader {
margin-bottom: 16px;
width: 24px;
height: 24px;
border: 2px solid rgba(0, 0, 0, 0.1);
border-top-color: var(--accent-green);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
}@keyframes spin {
to {
transform: rotate(360deg);
}
}/* --- Pagination --- */
.cms-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
padding: 20px 0;
margin-top: 20px;
}.cms-page-btn {
padding: 8px 16px;
border-radius: 4px;
/* Hardcoded if variable scope unpredictable, or use @card-border-radius if global */
border: 1px solid var(--divider);
background: var(--bg-secondary);
color: var(--text-primary);
cursor: pointer;
transition: all 0.2s;
font-size: 14px; &:disabled {
opacity: 0.5;
cursor: not-allowed;
} &:not(:disabled):hover {
border-color: var(--accent-green);
color: var(--accent-green);
}
}.cms-page-numbers {
display: flex;
gap: 5px;
}.cms-page-number {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
border: 1px solid transparent;
background: transparent;
color: var(--text-primary);
cursor: pointer;
transition: all 0.2s;
font-size: 14px; &:hover {
color: var(--accent-green);
} &.is-active {
background: var(--accent-green);
color: #fff;
box-shadow: 0 4px 10px rgba(7, 193, 96, 0.3);
}
}.cms-page-ellipsis {
color: var(--text-secondary);
padding: 0 5px;
}/* --- Loading Overlay --- */
.cms-list-loading-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 50;
backdrop-filter: blur(2px);
border-radius: @card-border-radius;
}[data-theme='dark'] .cms-list-loading-overlay {
background: rgba(30, 30, 30, 0.7);
}.cms-loading-spinner {
width: 40px;
height: 40px;
border: 3px solid rgba(7, 193, 96, 0.2);
border-top-color: var(--accent-green);
border-radius: 50%;
animation: spin 1s linear infinite;
}/* --- Quick Jump --- */
.cms-page-jump {
display: flex;
align-items: center;
gap: 8px;
margin-left: 10px;
}.cms-jump-input {
width: 50px;
height: 34px;
padding: 0 5px;
border: 1px solid var(--divider);
border-radius: 4px;
background: var(--bg-secondary);
color: var(--text-primary);
text-align: center;
font-size: 14px;
outline: none; &:focus {
border-color: var(--accent-green);
} /* Remove spin buttons */
&::-webkit-inner-spin-button,
&::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
}.cms-jump-btn {
padding: 0 12px;
height: 34px;
border-radius: 4px;
border: 1px solid var(--divider);
background: var(--bg-primary);
color: var(--text-secondary);
font-size: 13px;
cursor: pointer;
transition: all 0.2s; &:hover {
background: var(--bg-secondary);
color: var(--text-primary);
border-color: #ddd;
}}/* mobiles Select - hidden by default */
.cms-page-mobiles-select {
display: none;
}/* --- mobiles Pagination Optimization --- */
@media screen and (max-width: 768px) {
.cms-pagination {
flex-wrap: wrap;
gap: 8px;
// padding: 15px 5px 150px 5px; /* Added large bottom padding to avoid floating module occlusion */
} /* Hide number list and jump input on mobiles */
.cms-page-numbers,
.cms-page-jump {
display: none;
} /* Show Select */
.cms-page-mobiles-select {
display: block; select {
appearance: none;
-webkit-appearance: none;
background: var(--bg-secondary);
border: 1px solid var(--divider);
color: var(--text-primary);
padding: 8px 30px 8px 15px;
/* Right padding for custom arrow or native char */
border-radius: 4px;
font-size: 14px;
height: 36px;
outline: none;
/* Simple arrow indicator */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
}
} /* Make page buttons slightly smaller/more compact */
.cms-page-btn {
padding: 6px 12px;
font-size: 13px;
} /* .cms-page-number is hidden now, but keep style just in case of larger mobiles */
.cms-page-number {
width: 32px;
height: 32px;
font-size: 13px;
} /* Quick jump hidden, but CSS kept for reference or tablet adjustments */
/*
.cms-page-jump { ... }
*/
.cms-jump-input {
width: 60px;
/* Slightly wider for ease */
height: 32px;
} .cms-jump-btn {
height: 32px;
}
}