rain
629 lines
13 KiB
CSS
629 lines
13 KiB
CSS
/* Unified pagination style for Layui and custom pagers. */
|
|
.cxz-pagination,
|
|
.uc-pagination,
|
|
.je-pagination,
|
|
.txl-pagination,
|
|
#articlePage {
|
|
display: flex !important;
|
|
justify-content: center !important;
|
|
align-items: center !important;
|
|
flex-wrap: wrap !important;
|
|
gap: 6px !important;
|
|
padding: 18px 12px !important;
|
|
min-height: 64px;
|
|
text-align: center;
|
|
}
|
|
|
|
.cxz-pagination:empty,
|
|
.uc-pagination:empty,
|
|
.je-pagination:empty,
|
|
.txl-pagination:empty,
|
|
#articlePage:empty {
|
|
display: none !important;
|
|
}
|
|
|
|
.layui-laypage {
|
|
display: inline-flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
flex-wrap: wrap !important;
|
|
gap: 6px !important;
|
|
margin: 0 !important;
|
|
font-size: 0 !important;
|
|
}
|
|
|
|
.layui-laypage a,
|
|
.layui-laypage span,
|
|
.txl-pagination .page-btn {
|
|
display: inline-flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
min-width: 34px !important;
|
|
width: 34px !important;
|
|
height: 34px !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
border: 1px solid #dfe5ef !important;
|
|
border-radius: 7px !important;
|
|
background: #fff !important;
|
|
color: #344054 !important;
|
|
font-size: 13px !important;
|
|
font-weight: 600 !important;
|
|
line-height: 34px !important;
|
|
box-shadow: none;
|
|
transition:
|
|
color 0.18s ease,
|
|
border-color 0.18s ease,
|
|
background 0.18s ease,
|
|
box-shadow 0.18s ease,
|
|
transform 0.18s ease;
|
|
}
|
|
|
|
.layui-laypage a:hover,
|
|
.txl-pagination .page-btn:hover {
|
|
border-color: var(--primary, #102b6a) !important;
|
|
color: var(--primary, #102b6a) !important;
|
|
background: #f7f9ff !important;
|
|
box-shadow: 0 4px 10px rgba(16, 43, 106, 0.1);
|
|
}
|
|
|
|
.layui-laypage .layui-laypage-prev,
|
|
.layui-laypage .layui-laypage-next {
|
|
min-width: 74px !important;
|
|
width: auto !important;
|
|
padding: 0 14px !important;
|
|
}
|
|
|
|
.layui-laypage .layui-laypage-count,
|
|
.layui-laypage .layui-laypage-limits {
|
|
width: auto !important;
|
|
min-width: 0 !important;
|
|
padding: 0 10px !important;
|
|
white-space: nowrap !important;
|
|
}
|
|
|
|
.layui-laypage .layui-laypage-limits select {
|
|
width: auto !important;
|
|
min-width: 78px !important;
|
|
padding: 0 26px 0 10px !important;
|
|
}
|
|
|
|
.layui-laypage .layui-laypage-curr {
|
|
position: relative !important;
|
|
display: inline-flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
min-width: 34px !important;
|
|
width: 34px !important;
|
|
height: 34px !important;
|
|
padding: 0 !important;
|
|
border: 0 !important;
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
line-height: 34px !important;
|
|
}
|
|
|
|
.layui-laypage .layui-laypage-curr .layui-laypage-em {
|
|
position: absolute !important;
|
|
inset: 0 !important;
|
|
border-radius: 7px !important;
|
|
background: var(--primary, #102b6a) !important;
|
|
box-shadow: 0 6px 14px rgba(16, 43, 106, 0.22);
|
|
}
|
|
|
|
.layui-laypage .layui-laypage-curr em:last-child {
|
|
position: relative !important;
|
|
display: inline-flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
width: 34px !important;
|
|
height: 34px !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
color: #fff !important;
|
|
font-style: normal !important;
|
|
font-weight: 700 !important;
|
|
line-height: 34px !important;
|
|
text-align: center !important;
|
|
}
|
|
|
|
.layui-laypage .layui-laypage-spr {
|
|
min-width: 28px !important;
|
|
padding: 0 2px !important;
|
|
border-color: transparent !important;
|
|
background: transparent !important;
|
|
color: #98a2b3 !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.layui-laypage .layui-disabled,
|
|
.layui-laypage .layui-disabled:hover,
|
|
.txl-pagination .page-btn.disabled,
|
|
.txl-pagination .page-btn.disabled:hover {
|
|
border-color: #edf0f5 !important;
|
|
background: #f7f8fb !important;
|
|
color: #b8c0cc !important;
|
|
box-shadow: none !important;
|
|
cursor: not-allowed !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
.layui-laypage input,
|
|
.layui-laypage button,
|
|
.layui-laypage select {
|
|
height: 34px !important;
|
|
border-radius: 7px !important;
|
|
border-color: #dfe5ef !important;
|
|
font-size: 13px !important;
|
|
}
|
|
|
|
.layui-laypage button {
|
|
padding: 0 14px !important;
|
|
background: var(--primary, #102b6a) !important;
|
|
color: #fff !important;
|
|
border-color: var(--primary, #102b6a) !important;
|
|
font-weight: 700 !important;
|
|
}
|
|
|
|
.txl-pagination .page-btn.active {
|
|
border-color: var(--primary, #102b6a) !important;
|
|
background: var(--primary, #102b6a) !important;
|
|
color: #fff !important;
|
|
box-shadow: 0 6px 14px rgba(16, 43, 106, 0.22);
|
|
}
|
|
|
|
.cxz-status-hit {
|
|
color: #27ae60;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.cxz-status-miss {
|
|
color: #e74c3c;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.cxz-status-opened {
|
|
color: var(--primary, #102b6a);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.cxz-status-pending {
|
|
color: var(--orange, #f15a22);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.cxz-recommend-locked {
|
|
color: var(--text-muted, #6b7280);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.cxz-data-table th:nth-child(1),
|
|
.cxz-data-table th:nth-child(2),
|
|
.cxz-data-table th:nth-child(4),
|
|
.cxz-data-table th:nth-child(7),
|
|
.cxz-data-table th:nth-child(9),
|
|
.cxz-data-table td:nth-child(1),
|
|
.cxz-data-table td:nth-child(2),
|
|
.cxz-data-table td:nth-child(4),
|
|
.cxz-data-table td:nth-child(7),
|
|
.cxz-data-table td:nth-child(9) {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.cxz-data-table td:nth-child(1),
|
|
.cxz-data-table td:nth-child(2) {
|
|
word-break: keep-all;
|
|
}
|
|
|
|
.cxz-data-table td:nth-child(9) {
|
|
min-width: 72px;
|
|
}
|
|
|
|
.cxz-data-table th:nth-child(4),
|
|
.cxz-data-table td:nth-child(4) {
|
|
min-width: 190px;
|
|
}
|
|
|
|
.cxz-number-wrap {
|
|
display: inline-flex;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
max-width: 360px;
|
|
padding: 2px 0;
|
|
overflow: visible;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(16, 43, 106, 0.22) transparent;
|
|
vertical-align: top;
|
|
}
|
|
|
|
button.cxz-number-wrap {
|
|
min-height: 25px;
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
font: inherit;
|
|
text-align: left;
|
|
}
|
|
|
|
.cxz-number-wrap--overflow {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.cxz-number-wrap--fit {
|
|
cursor: default;
|
|
}
|
|
|
|
.cxz-number-wrap--overflow:hover .cxz-number-ball {
|
|
border-color: rgba(16, 43, 106, 0.32);
|
|
background: #fff8f4;
|
|
}
|
|
|
|
.cxz-number-wrap--recommend {
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
gap: 8px;
|
|
max-width: 280px;
|
|
max-height: none;
|
|
overflow: visible;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.cxz-number-preview {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
flex: 1 1 auto;
|
|
flex-wrap: nowrap;
|
|
min-width: 0;
|
|
overflow: visible;
|
|
gap: 5px;
|
|
}
|
|
|
|
.cxz-number-preview--short {
|
|
display: none;
|
|
}
|
|
|
|
.cxz-number-wrap--fit {
|
|
max-width: 280px;
|
|
}
|
|
|
|
.cxz-number-wrap--fit .cxz-number-preview {
|
|
overflow: visible;
|
|
}
|
|
|
|
.cxz-number-wrap--fit .cxz-number-more {
|
|
display: none;
|
|
}
|
|
|
|
.cxz-number-wrap--overflow .cxz-number-preview {
|
|
max-width: none;
|
|
}
|
|
|
|
.cxz-number-wrap--overflow .cxz-number-preview--full {
|
|
display: none;
|
|
}
|
|
|
|
.cxz-number-wrap--overflow .cxz-number-preview--short {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.cxz-number-wrap--recommend .cxz-number-group {
|
|
flex: 0 0 auto;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.cxz-number-wrap--recommend .cxz-number-group + .cxz-number-group::before,
|
|
.cxz-number-wrap--popup .cxz-number-group + .cxz-number-group::before {
|
|
content: "";
|
|
width: 1px;
|
|
height: 16px;
|
|
margin: 0 2px;
|
|
border-radius: 1px;
|
|
background: #ffd5c6;
|
|
}
|
|
|
|
.cxz-number-wrap--open {
|
|
max-width: none;
|
|
max-height: none;
|
|
overflow: visible;
|
|
}
|
|
|
|
.cxz-number-wrap--open-1 {
|
|
flex-wrap: nowrap;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.cxz-number-wrap--open-1 .cxz-number-group {
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.cxz-number-wrap--open-2 {
|
|
width: 256px;
|
|
max-width: 256px;
|
|
}
|
|
|
|
.cxz-number-wrap::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
|
|
.cxz-number-wrap::-webkit-scrollbar-thumb {
|
|
border-radius: 999px;
|
|
background: rgba(16, 43, 106, 0.22);
|
|
}
|
|
|
|
.cxz-number-group {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
}
|
|
|
|
.cxz-data-table td .cxz-number-ball {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 25px;
|
|
height: 25px;
|
|
margin: 0 !important;
|
|
border-radius: 50%;
|
|
border: 1px solid rgba(241, 90, 34, 0.22);
|
|
background: #fff4ef;
|
|
box-shadow: none;
|
|
color: var(--orange, #f15a22);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
}
|
|
|
|
.cxz-data-table td .cxz-number-text {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 42px;
|
|
height: 25px;
|
|
padding: 0 10px;
|
|
border: 1px solid rgba(241, 90, 34, 0.22);
|
|
border-radius: 999px;
|
|
background: #fff4ef;
|
|
color: var(--orange, #f15a22);
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
line-height: 23px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.cxz-data-table td .cxz-number-wrap--open .cxz-number-ball {
|
|
width: 26px;
|
|
height: 26px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.cxz-number-wrap--open .cxz-number-group {
|
|
gap: 4px;
|
|
}
|
|
|
|
.cxz-data-table td .bule-q.cxz-number-ball {
|
|
border-color: rgba(16, 43, 106, 0.22);
|
|
background: #eef4ff;
|
|
color: var(--primary, #102b6a);
|
|
}
|
|
|
|
.cxz-data-table td .cxz-number-ball--wrong {
|
|
position: relative;
|
|
border-color: rgba(231, 76, 60, 0.52);
|
|
background: #fff;
|
|
color: #e74c3c;
|
|
}
|
|
|
|
.cxz-data-table td .cxz-number-ball--wrong::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 5px;
|
|
right: 5px;
|
|
top: 50%;
|
|
height: 2px;
|
|
border-radius: 2px;
|
|
background: currentColor;
|
|
transform: rotate(-24deg);
|
|
}
|
|
|
|
.cxz-number-count {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
height: 25px;
|
|
padding: 0 7px;
|
|
border-radius: 999px;
|
|
background: #f3f6fb;
|
|
color: #667085;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
line-height: 25px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.cxz-number-empty {
|
|
color: var(--text-muted, #6b7280);
|
|
}
|
|
|
|
.cxz-number-more {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 0 0 auto;
|
|
height: 25px;
|
|
margin-left: 0;
|
|
padding: 0 10px;
|
|
border: 1px solid #dfe5ef;
|
|
border-radius: 999px;
|
|
background: #fff;
|
|
color: var(--primary, #102b6a);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
line-height: 23px;
|
|
cursor: pointer;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.cxz-number-more:hover {
|
|
border-color: var(--primary, #102b6a);
|
|
background: #f7f9ff;
|
|
}
|
|
|
|
.cxz-data-table td .cxz-number-wrap--recommend .cxz-number-more {
|
|
height: auto;
|
|
margin-left: 6px;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
color: #409eff;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
line-height: inherit;
|
|
}
|
|
|
|
.cxz-data-table td .cxz-number-wrap--recommend:hover .cxz-number-more {
|
|
border-color: transparent;
|
|
background: transparent;
|
|
color: #de2103;
|
|
}
|
|
|
|
.cxz-data-table td .cxz-number-wrap--recommend {
|
|
border: 0;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.cxz-data-table td .cxz-number-wrap--recommend:hover {
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.cxz-number-popup .recommend-number-text,
|
|
.cxz-number-popup .recommend-separator {
|
|
color: #de2103;
|
|
}
|
|
|
|
.cxz-number-popup .recommend-number-hit {
|
|
color: #de2103;
|
|
}
|
|
|
|
.cxz-number-popup .recommend-number-blue {
|
|
color: #1c89f8;
|
|
}
|
|
|
|
.cxz-number-popup .recommend-number-missed {
|
|
color: #999;
|
|
}
|
|
|
|
.cxz-data-table td .cxz-number-wrap--recommend .recommend-number-text,
|
|
.cxz-data-table td .cxz-number-wrap--recommend .recommend-separator,
|
|
.cxz-data-table td .cxz-number-wrap--recommend .recommend-number-hit,
|
|
.cxz-data-table td .cxz-number-wrap--recommend .recommend-number-blue,
|
|
.cxz-data-table td .cxz-number-wrap--recommend .recommend-number-missed,
|
|
.cxz-number-popup .recommend-number-text,
|
|
.cxz-number-popup .recommend-separator,
|
|
.cxz-number-popup .recommend-number-hit,
|
|
.cxz-number-popup .recommend-number-blue,
|
|
.cxz-number-popup .recommend-number-missed {
|
|
font-weight: 700 !important;
|
|
}
|
|
|
|
.cxz-number-popup {
|
|
padding: 20px 22px 22px;
|
|
background: #fff;
|
|
}
|
|
|
|
.cxz-number-popup-title {
|
|
margin-bottom: 14px;
|
|
color: var(--primary, #102b6a);
|
|
font-size: 16px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.cxz-number-wrap--popup {
|
|
max-width: none;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.cxz-pagination,
|
|
.uc-pagination,
|
|
.je-pagination,
|
|
.txl-pagination,
|
|
#articlePage {
|
|
gap: 5px !important;
|
|
padding: 14px 8px !important;
|
|
min-height: 58px;
|
|
}
|
|
|
|
.layui-laypage {
|
|
gap: 6px !important;
|
|
}
|
|
|
|
.layui-laypage a,
|
|
.layui-laypage span,
|
|
.txl-pagination .page-btn {
|
|
min-width: 30px !important;
|
|
width: 30px !important;
|
|
height: 30px !important;
|
|
padding: 0 !important;
|
|
font-size: 12px !important;
|
|
line-height: 30px !important;
|
|
}
|
|
|
|
.layui-laypage .layui-laypage-prev,
|
|
.layui-laypage .layui-laypage-next {
|
|
min-width: 66px !important;
|
|
width: auto !important;
|
|
padding: 0 10px !important;
|
|
}
|
|
|
|
.layui-laypage .layui-laypage-curr,
|
|
.layui-laypage .layui-laypage-curr em:last-child {
|
|
min-width: 30px !important;
|
|
width: 30px !important;
|
|
height: 30px !important;
|
|
line-height: 30px !important;
|
|
}
|
|
|
|
.cxz-number-wrap {
|
|
max-width: 300px;
|
|
gap: 4px;
|
|
}
|
|
|
|
.cxz-number-wrap--recommend {
|
|
max-width: 238px;
|
|
}
|
|
|
|
.cxz-number-wrap--overflow .cxz-number-preview {
|
|
max-width: none;
|
|
}
|
|
|
|
.cxz-number-wrap--open {
|
|
max-width: none;
|
|
}
|
|
|
|
.cxz-number-wrap--open-2 {
|
|
width: 246px;
|
|
max-width: 246px;
|
|
}
|
|
|
|
.cxz-number-group {
|
|
gap: 4px;
|
|
}
|
|
|
|
.cxz-data-table td .cxz-number-ball {
|
|
width: 23px;
|
|
height: 23px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.cxz-data-table td .cxz-number-text {
|
|
height: 23px;
|
|
min-width: 38px;
|
|
padding: 0 8px;
|
|
font-size: 12px;
|
|
line-height: 21px;
|
|
}
|
|
}
|