/* ===== v71 主题色令牌 =====
本站深色主题 = (layout/html5.html:9),变量定义在 html 上,全页继承。
这三个色值在文件里反复出现 55 处,之前绝大部分漏了深色变体,深色下对比度只有 2.3~4.1:1。
统一令牌后:浅色取值与改动前**完全一致**(零视觉回归),深色自动换成亮一档的值。
注意:深色块必须写在浅色块**之后**(同为 :root/class 级特异性时靠源码顺序决胜)。 */
:root {
--oi33-gold-ink: #b07d10; /* 金系文字/数字 */
--oi33-sub: #5b6b83; /* 正文次要说明 */
--oi33-muted: #8a94a6; /* 弱化灰字 */
--oi33-line: rgba(0, 0, 0, .10); /* 卡片描边/分隔线(深色下纯黑描边会消失) */
--oi33-thumb: #f0f3f8; /* 缩略图/占位底(深色下浅灰会变刺眼白块) */
}
.theme--dark, [data-mantine-color-scheme=dark] {
--oi33-gold-ink: #ffd66a;
--oi33-sub: #a9b7cc;
--oi33-muted: #93a4bd;
--oi33-line: rgba(110, 160, 230, 0.25);
--oi33-thumb: #1b2330;
}
/* ===== frontend/cat.css ===== */
.oi33-cat-card {
overflow: hidden;
}
.oi33-cat-card .section__body {
padding: 0 12px 13px;
}
.oi33-cat-stage {
position: relative;
width: 100%;
height: 250px; /* v19 主栏大舞台 */
overflow: hidden;
touch-action: manipulation;
border-radius: 10px;
background:
linear-gradient(to bottom, rgba(112, 154, 172, .08) 0 68%, rgba(95, 83, 72, .06) 68% 100%);
box-shadow: inset 0 0 0 1px rgba(90, 76, 65, .09);
}
.oi33-cat-floor {
position: absolute;
right: 10px;
bottom: 17px;
left: 10px;
height: 2px;
background: rgba(83, 73, 65, .16);
}
.oi33-cat-actor {
position: absolute;
bottom: 18px;
left: 0;
width: 80px; /* v19 猫 2 倍 */
height: 80px;
margin: 0;
padding: 0;
cursor: pointer;
border: 0;
outline-offset: 2px;
background: transparent;
will-change: transform;
}
.oi33-cat-actor:disabled {
cursor: default;
pointer-events: none;
}
.oi33-cat-sprite {
/* v21 图层容器:姿态帧在各 .oi33-cat-frame 层上,opacity 切换 */
filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.35)) drop-shadow(0 0 3px rgba(0, 0, 0, 0.12));
--oi33-cat-flip: 1;
position: relative;
display: block;
width: 80px; /* v19 猫 2 倍 */
height: 80px;
transform-origin: center bottom;
transform: scaleX(var(--oi33-cat-flip));
}
.oi33-cat-frame {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
image-rendering: pixelated;
image-rendering: crisp-edges;
opacity: 0;
transition: opacity .05s linear;
}
.oi33-cat-stage.is-walking[data-cat-direction="right"] .oi33-cat-sprite {
--oi33-cat-flip: -1;
}
.oi33-cat-stage.is-walking .oi33-cat-sprite {
animation: oi33-cat-walk-bob .42s steps(2, end) infinite;
}
.oi33-cat-message {
min-height: 20px;
margin: 8px 2px 0;
color: #8c6a59;
font-size: 12px;
}
.oi33-cat-food {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 8px;
padding: 8px 10px;
border: 1px solid rgba(176, 122, 75, .18);
border-radius: 8px;
color: #795548;
background: rgba(255, 191, 105, .12);
}
.oi33-cat-food__label {
font-size: 12px;
}
.oi33-cat-food__amount {
color: #d47b2a;
font-size: 18px;
line-height: 1;
}
.oi33-cat-food__actions {
display: flex;
align-items: center;
gap: 8px;
}
.oi33-cat-food__detail {
color: #a8662d;
font-size: 12px;
}
.oi33-cat-noscript {
color: #8c6a59;
font-size: 12px;
}
.theme--dark .oi33-cat-stage {
background:
linear-gradient(to bottom, rgba(123, 164, 181, .09) 0 68%, rgba(255, 255, 255, .035) 68% 100%);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.theme--dark .oi33-cat-floor {
background: rgba(255, 255, 255, .12);
}
.theme--dark .oi33-cat-message,
.theme--dark .oi33-cat-noscript {
color: #c8b4a8;
}
.theme--dark .oi33-cat-food {
border-color: rgba(255, 193, 122, .16);
color: #d8c2b5;
background: rgba(255, 174, 82, .07);
}
.theme--dark .oi33-cat-food__amount {
color: #f0a65a;
}
.theme--dark .oi33-cat-food__detail {
color: #dba36f;
}
@keyframes oi33-cat-walk-bob {
0%, 100% { transform: translateY(0) scaleX(var(--oi33-cat-flip)); }
50% { transform: translateY(-1px) scaleX(var(--oi33-cat-flip)); }
}
@media (prefers-reduced-motion: reduce) {
.oi33-cat-stage.is-walking .oi33-cat-sprite {
animation: none;
}
}
/* ---- 换猫弹层（cat-shop 皮肤系统） ---- */
.oi33-cat-picker {
display: flex;
flex-direction: column;
gap: 4px;
}
.oi33-cat-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
}
.oi33-cat-modal:not([hidden]) { display: flex; }
.oi33-cat-modal__mask {
position: absolute;
inset: 0;
background: rgba(20, 24, 30, 0.45);
}
.oi33-cat-modal__card {
position: relative;
background: #fff;
border-radius: 14px;
padding: 18px;
max-width: 460px;
width: 100%;
max-height: 78vh;
overflow-y: auto;
box-shadow: 0 18px 50px rgba(10, 20, 40, 0.28);
}
.theme--dark .oi33-cat-modal__card {
background: #1d2128;
color: #e3e6ea;
}
.oi33-cat-modal__close {
position: absolute;
top: 12px;
right: 14px;
font: inherit;
font-size: 15px;
color: #8a919b;
background: none;
border: none;
cursor: pointer;
padding: 4px 8px;
}
.oi33-cat-modal__close:hover { color: #333; }
.oi33-cat-picker form { margin: 0; }
.oi33-cat-picker__item {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
font: inherit;
font-size: 13px;
color: #333;
background: #fff;
border: 1px solid transparent;
border-radius: 6px;
padding: 4px 8px;
cursor: pointer;
text-align: left;
}
.oi33-cat-picker__item:hover { background: #f2f8fc; }
.oi33-cat-picker__item.is-active { border-color: #55b6e2; background: rgba(85, 182, 226, 0.08); font-weight: 600; }
.oi33-cat-picker__item.is-active:hover { background: rgba(85, 182, 226, 0.12); }
.oi33-cat-picker__item canvas {
width: 32px;
height: 32px;
image-rendering: pixelated;
}
.oi33-cat-picker__shop {
display: block;
font-size: 13px;
color: #55b6e2;
text-decoration: none;
padding: 4px 8px;
}
.oi33-cat-picker__shop:hover { text-decoration: underline; }
/* 二期：装扮弹层分组与场景色样 */
.oi33-cat-picker__group {
font-size: 12px; font-weight: 600; color: #8a919b;
margin: 6px 2px 2px;
}
.oi33-cat-picker__swatch {
width: 32px; height: 32px; flex: none;
border-radius: 6px; border: 1px solid #e4e7eb;
}
.oi33-cat-picker__empty { font-size: 13px; color: #8a919b; padding: 6px 8px; }
.oi33-cat-picker__empty a { color: #55b6e2; }
/* ===== frontend/cat-shop.css ===== */
.oi33-shop-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 12px;
}
.oi33-shop-card {
border: 1px solid #e4e7eb;
border-radius: 12px;
padding: 12px;
text-align: center;
background: #fff;
}
.oi33-shop-card:hover { border-color: #55b6e2; }
.oi33-shop-card canvas {
width: 80px;
height: 80px;
image-rendering: pixelated;
}
.oi33-shop-card__name { font-weight: 600; margin-top: 6px; }
.oi33-shop-card__price { color: #8a919b; font-size: 13px; margin: 2px 0 8px; }
.oi33-shop-card .button { margin-top: 4px; }
.oi33-shop-owned { display: inline-block; font-size: 12px; color: #2d9e4f; font-weight: 600; }
.oi33-shop-mycat {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.oi33-shop-mycat form { margin: 0; }
.oi33-shop-mycat .oi33-shop-mycat-item {
display: flex;
align-items: center;
gap: 6px;
border: 1px solid #e4e7eb;
border-radius: 999px;
padding: 4px 6px 4px 10px;
cursor: pointer;
background: #fff;
font: inherit;
font-size: 13px;
color: #333;
}
.oi33-shop-mycat .oi33-shop-mycat-item:hover { border-color: #55b6e2; }
.oi33-shop-mycat .oi33-shop-mycat-item.is-active {
border-color: #55b6e2;
background: rgba(85, 182, 226, 0.08);
}
.oi33-shop-mycat canvas {
width: 32px;
height: 32px;
image-rendering: pixelated;
border-radius: 4px;
}
.oi33-shop-blindbox {
display: flex;
align-items: center;
gap: 18px;
padding: 6px 4px;
}
.oi33-shop-blindbox canvas {
width: 110px;
height: 110px;
image-rendering: pixelated;
}
.oi33-shop-notice { margin-bottom: 14px; }
/* 二期：售罄态 / 场景色样 */
.oi33-shop-card.is-soldout { opacity: 0.6; }
.oi33-shop-scene {
width: 80px; height: 80px; margin: 0 auto;
border-radius: 8px; border: 1px solid #e4e7eb;
}
.oi33-shop-subtitle {
font-size: 16px; font-weight: 700; color: #333;
margin: 0 0 6px;
}
/* ===== frontend/cat-shop-admin.css ===== */
.oi33-admin-skin-row.is-disabled { opacity: 0.55; }
.oi33-admin-skin-row canvas {
width: 32px;
height: 32px;
image-rendering: pixelated;
}
.oi33-inline-form {
display: inline-flex;
align-items: center;
gap: 4px;
margin: 0;
}
.oi33-inline-form input[type='text'],
.oi33-inline-form input[type='number'] {
width: 84px;
font: inherit;
font-size: 13px;
padding: 2px 6px;
border: 1px solid #d0d7de;
border-radius: 5px;
background: #fff;
}
.oi33-inline-form .button { padding: 2px 10px; font-size: 12px; }
.oi33-admin-scene {
display: inline-block;
width: 32px; height: 32px;
border-radius: 6px; border: 1px solid #e4e7eb;
vertical-align: middle;
}
/* 个人页小猫卡按钮行 */
.oi33-cat-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 4px;
}
.oi33-cat-actions > * { flex: 1 1 88px; }
/* ===== v18 摸摸互动：爱心 + 气泡 ===== */
.oi33-cat-heart {
position: absolute;
bottom: 104px; /* v19 猫 80px，头顶更高 */
font-size: 20px;
line-height: 1;
color: #ff6b81;
pointer-events: none;
z-index: 5;
text-shadow: 0 1px 4px rgba(255, 107, 129, 0.45);
}
.oi33-cat-message.is-petting {
background: rgba(255, 107, 129, 0.12);
border-radius: 8px;
padding: 2px 10px;
color: #c2557a;
width: fit-content;
}
.theme--dark .oi33-cat-message.is-petting,
[data-mantine-color-scheme=dark] .oi33-cat-message.is-petting {
background: rgba(255, 120, 145, 0.18);
color: #f2a0b3;
}
/* ===== v19 喂小鱼干 / 拖拽 / 舞台响应 ===== */
.oi33-cat-fish {
position: absolute;
bottom: 8px;
width: 30px;
height: 26px;
background-repeat: no-repeat;
background-size: 30px 26px;
image-rendering: pixelated;
pointer-events: none;
z-index: 4;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}
.oi33-cat-actor.is-dragging {
cursor: grabbing;
transform: translateY(-6px);
filter: brightness(1.08) drop-shadow(0 6px 5px rgba(0, 0, 0, 0.22));
transition: transform .08s ease-out;
}
@media (max-width: 639px) {
.oi33-cat-stage { height: 190px; }
}
/* ===== v20 猫牌(自定义名,本人/管理员可见) + 取名编辑器 ===== */
.oi33-cat-name {
position: absolute;
top: 10px;
left: 10px;
z-index: 6;
max-width: calc(100% - 130px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
font-weight: 700;
color: #6b4a2f;
background: rgba(255, 244, 214, 0.92);
border: 2px solid #d8b36a;
border-radius: 8px 8px 8px 2px;
padding: 2px 10px 3px 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
image-rendering: pixelated;
}
.oi33-cat-name::before {
content: '✦ ';
font-size: 10px;
color: #c7741d;
}
.theme--dark .oi33-cat-name,
[data-mantine-color-scheme=dark] .oi33-cat-name {
color: #e8cfa6;
background: rgba(52, 42, 28, 0.92);
border-color: #8a6a35;
}
.oi33-cat-name-editor {
display: flex;
align-items: center;
gap: 6px;
margin: 6px 0 0;
flex-wrap: wrap;
}
.oi33-cat-name-editor input.textbox {
min-width: 180px;
}
.profile-header__blog {
color: #ffe9b0;
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: 8px;
padding: 2px 8px;
border-radius: 999px;
text-decoration: none;
vertical-align: middle;
font-weight: 600;
font-size: 13px;
}
.profile-header__blog:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
.profile-header__blog .icon { font-size: 14px; line-height: 1; }
/* ===== v23 旅行猫:访客 + 信件 ===== */
.oi33-cat-guest {
position: absolute;
bottom: 18px;
width: 80px;
height: 80px;
cursor: pointer;
z-index: 3;
}
.oi33-guest-actor {
position: absolute;
left: 0;
bottom: 0;
width: 80px;
height: 80px;
}
.oi33-guest-actor.is-dragging {
cursor: grabbing;
filter: brightness(1.08) drop-shadow(0 6px 5px rgba(0, 0, 0, 0.22));
}
.oi33-guest-name {
position: absolute;
bottom: 88px;
left: -4px;
max-width: 130px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
font-weight: 700;
color: #5d4a33;
background: rgba(255, 244, 214, 0.95);
border: 1.5px solid #d8b36a;
border-radius: 999px;
padding: 1px 9px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
z-index: 4;
}
.oi33-guest-bubble {
position: absolute;
bottom: 96px;
left: 4px;
background: #fff;
border: 1px solid #e0d6c2;
border-radius: 10px;
padding: 3px 9px;
font-size: 12px;
color: #6b5a44;
box-shadow: 0 2px 8px rgba(60, 40, 20, 0.12);
z-index: 6;
white-space: nowrap;
}
.theme--dark .oi33-guest-name,
[data-mantine-color-scheme=dark] .oi33-guest-name {
color: #e8cfa6;
background: rgba(52, 42, 28, 0.95);
border-color: #8a6a35;
}
.theme--dark .oi33-guest-bubble,
[data-mantine-color-scheme=dark] .oi33-guest-bubble {
background: #2a2a2a;
border-color: #3a3a3a;
color: #d8c8b0;
}
.oi33-cat-trip-note {
margin: 8px 2px 0;
font-size: 12px;
color: #8a6f4e;
}
.theme--dark .oi33-cat-trip-note,
[data-mantine-color-scheme=dark] .oi33-cat-trip-note { color: #c2a87e; }
/* 信 */
.oi33-mail-dot {
display: inline-block;
min-width: 15px;
margin-left: 5px;
padding: 0 4px;
border-radius: 999px;
background: #e5484d;
color: #fff;
font-size: 11px;
font-weight: 700;
line-height: 15px;
text-align: center;
}
.oi33-mail-card { width: min(560px, 92vw); max-height: 72vh; overflow-y: auto; }
.oi33-mail-title { font-size: 17px; font-weight: 700; color: #6b4a2f; margin-bottom: 10px; }
.oi33-mail-item {
background: #fff8e7;
border: 1px solid #ecd9ae;
border-left: 5px solid #d8b36a;
border-radius: 10px;
padding: 10px 14px;
margin-bottom: 10px;
box-shadow: 0 1px 4px rgba(120, 90, 40, 0.08);
}
.oi33-mail-item.is-unread { border-left-color: #e5484d; }
.oi33-mail-head { font-size: 12px; color: #a07838; font-weight: 600; margin-bottom: 5px; }
.oi33-mail-unread-tag {
display: inline-block;
margin-left: 6px;
font-size: 10px;
color: #fff;
background: #e5484d;
border-radius: 4px;
padding: 0 5px;
vertical-align: 1px;
}
.oi33-mail-body { font-size: 14px; line-height: 1.7; color: #4d3d28; }
.oi33-mail-sign { margin-top: 6px; font-size: 12px; color: #9c8359; text-align: right; }
.oi33-mail-read-form { margin: 6px 0 0; text-align: right; }
.oi33-mail-empty { color: #a08a66; font-size: 13px; padding: 6px 0; }
.theme--dark .oi33-mail-item,
[data-mantine-color-scheme=dark] .oi33-mail-item {
background: #2b2618;
border-color: #4a3f26;
color: #e6d5b0;
}
.theme--dark .oi33-mail-body,
[data-mantine-color-scheme=dark] .oi33-mail-body { color: #e2d2ae; }
/* 访客猫行走方向(镜像) */
.oi33-guest-actor { transform: scaleX(1); }
.oi33-guest-actor[data-dir="right"] { transform: scaleX(-1); }
/* ===== v26 喂食菜单 / 访客名片卡 ===== */
.oi33-feed-menu {
position: fixed;
z-index: 9990;
background: #fff;
border: 1px solid #e0d8c8;
border-radius: 12px;
box-shadow: 0 6px 22px rgba(60, 40, 20, 0.18);
padding: 8px;
display: flex;
flex-direction: column;
gap: 6px;
min-width: 190px;
}
.oi33-feed-menu__item { margin: 0; }
.oi33-visitor-card {
position: fixed;
z-index: 9995;
background: #fffdf5;
border: 1px solid #e2d3ae;
border-radius: 12px;
box-shadow: 0 6px 22px rgba(60, 40, 20, 0.2);
padding: 10px 14px;
max-width: 230px;
}
.oi33-vc-title { font-weight: 700; font-size: 14px; color: #6b4a2f; }
.oi33-vc-sub { font-size: 12px; color: #9a835f; margin: 3px 0 7px; }
.oi33-vc-link { display: inline-block; font-size: 13px; color: #fff; background: #55b6e2; border-radius: 999px; padding: 2px 12px; text-decoration: none; }
.oi33-vc-link:hover { background: #3d9fd4; }
.theme--dark .oi33-feed-menu,
[data-mantine-color-scheme=dark] .oi33-feed-menu { background: #262626; border-color: #3a3a3a; }
.theme--dark .oi33-visitor-card,
[data-mantine-color-scheme=dark] .oi33-visitor-card { background: #2b2618; border-color: #4a3f26; }
/* 舞台层叠保险:场景背景在猫/访客之后,永不遮盖 */
.oi33-cat-stage { isolation: isolate; }
.oi33-cat-actor, .oi33-cat-guest { z-index: 2; }
.oi33-cat-name, .oi33-guest-name { z-index: 5; }
/* ===== v29 猫监狱 ===== */
.oi33-jail-flash {
background: #e8f4fd; color: #0b5394;
border: 1px solid #cfe6f7; border-radius: 8px;
padding: 8px 12px; margin: 0 0 14px;
}
.oi33-jail-intro { opacity: .8; }
.oi33-jail-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
gap: 16px;
margin-top: 4px;
}
.oi33-jail-cell {
position: relative;
border: 1px solid rgba(90, 76, 65, .16);
border-radius: 12px;
overflow: hidden;
background: #fff;
box-shadow: 0 1px 3px rgba(90, 76, 65, .07);
}
.oi33-jail-cell__scene {
position: relative;
height: 150px;
overflow: hidden;
background: linear-gradient(to bottom, #3f4a5f 0%, #2b3446 62%, #22293a 100%);
}
.oi33-jail-cat {
position: absolute;
left: 50%;
bottom: 10px;
transform: translateX(-50%);
image-rendering: pixelated;
animation: oi33-jail-breathe 2.6s ease-in-out infinite;
}
@keyframes oi33-jail-breathe {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-3px); }
}
.oi33-jail-cell__bars {
position: absolute; inset: 0;
pointer-events: none;
background: repeating-linear-gradient(90deg,
rgba(91, 101, 118, .92) 0 7px,
rgba(255, 255, 255, .09) 7px 9px,
transparent 9px 26px);
}
.oi33-jail-cell__bar {
position: absolute; left: 0; right: 0;
height: 7px;
pointer-events: none;
background: linear-gradient(to bottom, #7d8899, #4d5566);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.oi33-jail-cell__bar--top { top: 0; }
.oi33-jail-cell__bar--bottom { bottom: 0; height: 9px; }
.oi33-jail-plate { padding: 10px 12px 12px; }
.oi33-jail-cell__owner { font-weight: 600; }
.oi33-jail-cell__reason {
margin: 6px 0;
background: #fff3bf; color: #7a5b00;
border: 1px solid #f0d878;
padding: 4px 8px; border-radius: 6px;
font-size: 13px;
}
.oi33-jail-cell__meta { font-size: 12px; opacity: .65; }
.oi33-jail-badge {
display: inline-block;
margin-top: 6px;
font-size: 12px;
background: #eceff3; color: #5a6472;
border-radius: 999px; padding: 2px 10px;
}
.oi33-jail-badge.is-review { background: #e3f0ff; color: #0b6bcb; }
.oi33-jail-badge.is-rejected { background: #ffe9e6; color: #c0392b; }
.oi33-jail-reply {
margin: 0 12px 8px;
background: #ffe9e6; color: #a3301f;
border: 1px solid #f6c9c2;
border-radius: 8px; padding: 6px 10px;
font-size: 13px;
}
.oi33-jail-letter-view {
margin: 0 12px 8px;
background: #f4f6f8;
border: 1px solid #e2e6ea;
border-radius: 8px; padding: 8px 10px;
font-size: 13px;
white-space: pre-wrap;
word-break: break-word;
}
.oi33-jail-review { margin: 0 12px 8px; }
.oi33-jail-review .textbox { width: 100%; margin-bottom: 6px; }
.oi33-jail-reject-wrap { margin: 0 12px 10px; font-size: 13px; }
.oi33-jail-reject-wrap summary { cursor: pointer; color: #8a4b36; }
.oi33-jail-letter { margin: 4px 12px 12px; }
.oi33-jail-letter .textbox { width: 100%; margin-bottom: 6px; }
.oi33-jail-empty {
text-align: center; opacity: .6;
padding: 26px 0;
}
.oi33-jail-lock-panel {
margin: 0 0 16px;
padding: 12px;
border: 1px dashed #d9b64a;
border-radius: 10px;
background: rgba(249, 200, 60, .08);
}
.oi33-jail-lock-fields { display: flex; gap: 8px; flex-wrap: wrap; }
.oi33-jail-lock-fields .textbox { flex: 1 1 160px; }
/* 主页服刑提示条(user_detail) */
.oi33-cat-jailed-note {
margin: 8px 4px;
padding: 16px 14px;
text-align: center;
border: 1px dashed rgba(90, 76, 65, .28);
border-radius: 10px;
}
.oi33-cat-jailed-note__title { font-weight: 700; }
.oi33-cat-jailed-note__line { margin: 8px 0 0; opacity: .8; }
.oi33-cat-jailed-note__hint { margin: 4px 0 0; font-size: 13px; opacity: .65; }
.oi33-cat-jailed-note__cta { margin: 12px 0 0; }
.theme--dark .oi33-jail-cell { background: #2e3038; }
.theme--dark .oi33-jail-letter-view { background: #3a3c47; border-color: #484a56; }
.theme--dark .oi33-jail-cell__reason { background: #4a3f10; color: #f2dd8c; border-color: #6b5c1d; }
.theme--dark .oi33-jail-flash { background: #12314e; color: #9fd0f5; border-color: #1f4a75; }
/* ===== v31 关押搜索建议 ===== */
.oi33-jail-search-wrap { position: relative; flex: 1 1 240px; }
.oi33-jail-search-wrap .textbox { width: 100%; }
.oi33-jail-suggest {
position: absolute; left: 0; right: 0; top: 100%;
z-index: 30; margin: 2px 0 0; padding: 0;
list-style: none;
background: #fff;
border: 1px solid #dfe3e8;
border-radius: 8px;
box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
max-height: 240px; overflow: auto;
}
.oi33-jail-suggest li {
padding: 7px 10px; cursor: pointer; font-size: 13px;
border-bottom: 1px solid #f0f2f5;
}
.oi33-jail-suggest li:last-child { border-bottom: 0; }
.oi33-jail-suggest li:hover { background: #f2f6fa; }
.theme--dark .oi33-jail-suggest { background: #2e3038; border-color: #484a56; }
.theme--dark .oi33-jail-suggest li { border-color: #3d3f4a; }
.theme--dark .oi33-jail-suggest li:hover { background: #3a3c47; }
/* ===== v32 主页服刑提示条:状态行 + 内嵌悔过书 ===== */
.oi33-cat-jailed-note__status { margin: 8px 0 0; font-size: 13px; opacity: .9; }
.oi33-cat-jailed-note__status.is-bad { color: #c0392b; opacity: 1; }
.oi33-cat-jailed-letter {
margin: 12px auto 0;
max-width: 440px;
text-align: left;
}
.oi33-cat-jailed-letter .textbox { width: 100%; margin-bottom: 6px; }
/* ===== v33 悔过书信纸风(学生书写界面) ===== */
.oi33-cat-jailed-note__status {
display: inline-block;
margin: 10px 0 0;
padding: 3px 12px;
border-radius: 999px;
font-size: 12px;
background: #eceff3; color: #5a6472;
}
.oi33-cat-jailed-note__status.is-bad { background: #fde8e4; color: #b03a2b; }
.oi33-cat-jailed-note__status.is-ok { background: #e3f0ff; color: #0b6bcb; }
.oi33-cat-jailed-letter { margin: 14px auto 0; max-width: 460px; text-align: left; }
.oi33-jail-letter { margin: 6px 12px 12px; }
.oi33-letter-card {
background: #fffdf7;
border: 1px solid #eee3c8;
border-radius: 12px;
padding: 12px 14px 11px;
box-shadow: 0 1px 4px rgba(140, 110, 40, .08);
}
.oi33-letter-card__head {
font-size: 13px; font-weight: 600; color: #8a6d1f;
letter-spacing: 1px;
border-bottom: 2px double #eedfc0;
padding-bottom: 6px; margin-bottom: 10px;
text-align: center;
}
.oi33-letter-paper {
width: 100%;
min-height: 96px;
resize: vertical;
border: 1px solid #e8ddc0;
border-radius: 8px;
background-color: #fffdf4;
background-image: repeating-linear-gradient(transparent 0 27px, rgba(170, 145, 80, .22) 27px 28px);
color: #4a4538;
line-height: 28px;
padding: 4px 10px 0;
font-size: 14px;
}
.oi33-letter-paper:focus {
outline: 0;
border-color: #d9c48a;
box-shadow: 0 0 0 3px rgba(217, 196, 138, .18);
}
.oi33-letter-foot {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 8px;
gap: 8px;
flex-wrap: wrap;
}
.oi33-letter-count { font-size: 12px; opacity: .6; }
.oi33-letter-count.is-near { color: #c97f16; opacity: 1; font-weight: 600; }
.theme--dark .oi33-letter-card { background: #26262c; border-color: #3d3a2e; }
.theme--dark .oi33-letter-card__head { color: #d9c48a; border-color: #4a4436; }
.theme--dark .oi33-letter-paper {
background-color: #2a2a30;
background-image: repeating-linear-gradient(transparent 0 27px, rgba(255, 255, 255, .07) 27px 28px);
color: #d8d4c8;
border-color: #454038;
}
/* ===== v34 md-github 样式(临时静态通道)——md-github addon 的 frontend 需 hydro build 才注入 bundle,
线上从未生效致题面回到原生小字号;样式经 OI33 public 全站上线。md-github build 启用后删除本段。 */
/* ============================================================
Markdown GitHub 风格（全站 .typo 覆盖）
题面 / 题解 / 讨论 / 作业描述等所有 Markdown 渲染统一生效。
样例块（```inputN / outputN，前端转为 .sample 左右栏）保留，
仅同步 GitHub 化配色。
============================================================ */
/* 正文基础（15px 放大，行高 1.7；em 体系自洽，toolbar 定位随字号缩放不偏移） */
.typo { font-size: 16px; line-height: 1.7; }
/* 标题（中性灰黑，GitHub 风）。
注意：字号保持 em 相对值、不设 padding-bottom 加高——
样例块的 toolbar（复制/填充按钮）按 theme 标题尺寸定位，改高度会偏移。 */
.typo h1, .typo h2, .typo h3, .typo h4, .typo h5, .typo h6 {
color: #1f2328;
font-weight: 700;
}
.typo h1 { border-bottom: 1px solid #d8dee4; }
.typo h2 { border-bottom: 1px solid #eaeef2; }
/* 段落 / 列表：不覆盖（间距保持 theme 原样，避免排版松散） */
/* 代码块 / 行内代码
注意：pre 只改颜色类属性（padding/margin/overflow 不动，复制按钮按 theme 盒模型定位）；
字号可以调（不影响绝对定位的按钮）。 */
.typo pre {
background: #f6f8fa;
border: 1px solid #d0d7de;
border-radius: 6px;
}
.typo pre code { background: none; padding: 0; font-size: 14px; }
.typo code { background: #eff1f3; border-radius: 4px; padding: 1px 5px; font-size: 14px; }
.typo pre code { background: none; padding: 0; font-size: 14px; }
/* 表格（只改边框/背景色，不动宽度/间距） */
.typo table { border-collapse: collapse; }
.typo th, .typo td { border: 1px solid #d8dee4; text-align: left; }
.typo th { background: #f6f8fa; font-weight: 600; }
/* 引用（只改左边条与文字色） */
.typo blockquote {
border-left: 4px solid #d0d7de;
color: #57606a;
}
/* 链接 */
.typo a { color: #0969da; }
.typo a:hover { text-decoration: underline; }
/* 样例块（input1/output1 转的 .sample 左右栏）：不特化——
与「题目描述/输入格式」等共用 .typo 样式（标题/字号/颜色自动一致），
布局完全保持 theme 原样（在线编程模式不偏移）。 */
/* ================= 深色模式（GitHub dark 系） ================= */
.theme--dark .typo h1, .theme--dark .typo h2, .theme--dark .typo h3,
.theme--dark .typo h4, .theme--dark .typo h5, .theme--dark .typo h6 { color: #e6edf3; }
.theme--dark .typo h1 { border-bottom-color: #30363d; }
.theme--dark .typo h2 { border-bottom-color: #30363d; }
.theme--dark .typo pre { background: #161b22; border-color: #30363d; }
.theme--dark .typo pre code { color: #c9d1d9; }
.theme--dark .typo code { background: #21262d; color: #c9d1d9; }
.theme--dark .typo th, .theme--dark .typo td { border-color: #30363d; }
.theme--dark .typo th { background: #161b22; }
.theme--dark .typo blockquote { border-left-color: #30363d; color: #8b949e; }
.theme--dark .typo a { color: #58a6ff; }
/* 样例块/代码块的操作条（复制、填充到自测）：去掉大灰底条，按钮胶囊化。
注意：保持 theme 的 inline 排列（不要 flex——absolute 定位下 flex 宽度=内容，
按钮多了会向右溢出）；位置（right/top）不动。 */
.typo .toolbar {
background: transparent !important;
padding: 0 !important;
white-space: nowrap;
}
.typo .toolbar-item + .toolbar-item { margin-left: 6px; }
.typo .toolbar-item > a,
.typo .toolbar-item > button {
font-size: 12px !important; /* 压过 theme 的 font-size:large!important */
background: #fff !important; /* 压过 theme 的 background:none!important */
border: 1px solid #d0d7de;
border-radius: 6px;
padding: 2px 10px;
color: #57606a;
cursor: pointer;
line-height: 1.6;
text-decoration: none;
}
.typo .toolbar-item > a:hover,
.typo .toolbar-item > button:hover {
background: #f6f8fa !important;
border-color: #0969da;
color: #0969da;
}
.theme--dark .typo .toolbar { background: transparent !important; }
.theme--dark .typo .toolbar-item > a,
.theme--dark .typo .toolbar-item > button {
background: #21262d !important;
border-color: #3a4048;
color: #c9d1d9;
}
.theme--dark .typo .toolbar-item > a:hover,
.theme--dark .typo .toolbar-item > button:hover {
background: #30363d !important;
border-color: #58a6ff;
color: #58a6ff;
}
/* 在线编程模式（scratchpad）下样例块与题面对齐：
.row 的 gutter 负 margin（为普通容器 padding 设计的 -0.9375rem）
在 scratchpad 窄容器里导致样例块整体右移——强制归零贴合容器。
两栏只归零外侧 padding（贴容器边），中间 gutter 保留（input/output 不粘在一起）。 */
.mode--scratchpad .typo .row {
margin-left: 0 !important;
margin-right: 0 !important;
}
.mode--scratchpad .typo .sample:first-child { padding-left: 0 !important; }
.mode--scratchpad .typo .sample:last-child { padding-right: 0 !important; }
/* ===== v51/v52 作业×猫粮:爪印标识 / 标题栏按钮 / 弹层 ===== */
.oi33-paw { margin-left: 6px; cursor: help; display: inline-flex; vertical-align: -0.18em; }
.oi33-paw-svg { display: inline-block; vertical-align: -0.18em; }
.oi33-show-modal__title .oi33-paw-svg { vertical-align: -0.2em; }
.oi33-hw-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.oi33-hw-tools .button { margin: 0; }
.oi33-food-modal__card { max-width: 460px; width: 100%; }
.oi33-food-form__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0; }
.oi33-food-form__grid label, .oi33-food-form__row { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.oi33-food-form__row { margin-bottom: 10px; }
.oi33-show-modal__blocks { max-height: 60vh; overflow-y: auto; }
.oi33-show-block {
border: 1px solid rgba(120, 160, 210, 0.25); border-radius: 10px;
padding: 10px 12px; margin-bottom: 10px; background: #fff;
}
.theme--dark .oi33-show-block { background: rgba(30, 46, 78, 0.6); border-color: rgba(110, 160, 230, 0.25); }
.oi33-show-block__head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.oi33-show-block__name { font-weight: 600; font-size: 13px; }
.oi33-show-block__count { font-size: 12px; color: var(--oi33-muted); }
.oi33-show-block__foot { margin-top: 8px; }
.oi33-show-names { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.oi33-show-name { background: rgba(70, 130, 210, 0.1); border-radius: 999px; padding: 2px 10px; font-size: 12px; }
.oi33-show-result { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.oi33-show-entry {
border: 1px solid rgba(120, 160, 210, 0.25); border-radius: 8px;
background: #fff; padding: 8px 10px; max-width: 720px;
}
.oi33-show-entry__head { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--oi33-sub); margin-bottom: 6px; }
.oi33-show-entry__head b { color: #274b8f; }
.oi33-show-code {
margin: 0; padding: 10px 12px; border-radius: 6px; overflow-x: auto;
background: #0f1a2e; color: #dce7ff; font-size: 13px; line-height: 1.55;
max-height: 380px; overflow-y: auto;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
white-space: pre;
}
.oi33-show-entry__tip { margin: 0; font-size: 12px; color: var(--oi33-muted); }
.oi33-show-modal__card { max-width: 460px; width: 100%; }
.oi33-show-modal__title { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.oi33-show-modal__hint { font-size: 12px; color: var(--oi33-muted); margin-bottom: 10px; }
.oi33-show-modal__list { max-height: 320px; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.oi33-show-modal__item {
display: flex; align-items: center; gap: 6px; font-size: 13px;
padding: 4px 6px; border-radius: 6px; cursor: pointer;
}
.oi33-show-modal__item:hover { background: rgba(70, 130, 210, 0.08); }
.oi33-show-modal__empty { grid-column: 1 / -1; color: var(--oi33-muted); font-size: 13px; }
.oi33-show-modal__foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }
.oi33-show-modal__foot .button { margin: 0; }
/* 作业页 v51 轻提示 & 通关盖章 */
.oi33-v51-toast {
position: fixed; right: 18px; bottom: 22px; z-index: 100001;
max-width: 420px; background: #22304a; color: #ffe9a8;
border: 1px solid rgba(255, 215, 106, 0.5); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
border-radius: 10px; padding: 10px 16px; font-size: 13px; line-height: 1.5;
opacity: 0; transform: translateY(10px); transition: all 0.3s ease;
}
.oi33-v51-toast.show { opacity: 1; transform: translateY(0); }
.oi33-stamp-mask {
position: fixed; inset: 0; z-index: 100000; display: flex;
align-items: center; justify-content: center;
background: rgba(10, 16, 30, 0.55);
animation: oi33StampFade 3.4s ease forwards;
}
.oi33-stamp-card {
width: 260px; text-align: center; border-radius: 16px; padding: 22px 18px 20px;
background: radial-gradient(160% 120% at 50% 0%, #24395f, #101a30 75%);
border: 1px solid rgba(255, 215, 106, 0.55);
box-shadow: 0 0 0 5px rgba(16, 26, 48, 0.85), 0 0 44px rgba(255, 200, 90, 0.35);
color: #e7f0ff;
animation: oi33StampPop 0.6s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.oi33-stamp-star { font-size: 30px; color: #ffd76a; text-shadow: 0 0 18px rgba(255, 215, 106, 0.8); }
.oi33-stamp-title { font-size: 20px; font-weight: 800; letter-spacing: 4px; color: #ffd76a; margin: 6px 0 2px; }
.oi33-stamp-sub { font-size: 12px; color: #9db4d8; max-height: 34px; overflow: hidden; }
.oi33-stamp-no { margin-top: 10px; display: inline-block; font-size: 12px; color: #ffe9a8;
border: 1px solid rgba(255, 215, 106, 0.5); border-radius: 999px; padding: 2px 12px; }
.oi33-stamp-food { margin-top: 8px; font-size: 13px; color: #ffd76a; font-weight: 700; }
@keyframes oi33StampPop {
0% { transform: scale(0.4); opacity: 0; }
60% { transform: scale(1.08); opacity: 1; }
100% { transform: scale(1); }
}
@keyframes oi33StampFade {
0%, 78% { opacity: 1; }
100% { opacity: 0; }
}
/* 个人页:每日猫事件气泡 */
.oi33-cat-event { margin: 10px 2px 0; }
.oi33-cat-event__bubble {
position: relative; display: block; max-width: 560px;
background: #f6f9ff; border: 1px solid rgba(110, 160, 230, 0.35);
color: #42536e; border-radius: 12px; padding: 8px 12px 8px 34px;
font-size: 13px; line-height: 1.55; box-shadow: 0 2px 8px rgba(30, 60, 120, 0.06);
}
.oi33-cat-event__bubble::before {
content: '🐾'; position: absolute; left: 9px; top: 8px; font-size: 15px;
}
.oi33-cat-event__food { color: #c07d08; margin-right: 6px; }
.oi33-cat-event[data-fresh='1'] .oi33-cat-event__bubble { animation: oi33EventIn 0.7s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes oi33EventIn {
0% { opacity: 0; transform: translateY(-6px) scale(0.92); }
100% { opacity: 1; transform: none; }
}
.theme--dark .oi33-cat-event__bubble {
background: rgba(30, 46, 78, 0.85); border-color: rgba(110, 160, 230, 0.28); color: #c9d8f0;
}
/* 个人页:通关收集册(星座集卡风) */
.oi33-clear-card { margin-top: 12px; }
.oi33-clear-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
}
.oi33-clear-card__item {
position: relative; display: block; overflow: hidden; border-radius: 12px;
padding: 14px 12px 12px; text-decoration: none !important;
background:
radial-gradient(1.5px 1.5px at 20% 30%, rgba(255, 255, 255, 0.9) 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 70% 20%, rgba(255, 255, 255, 0.7) 50%, transparent 51%),
radial-gradient(1px 1px at 40% 70%, rgba(255, 255, 255, 0.6) 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 85% 65%, rgba(255, 255, 255, 0.5) 50%, transparent 51%),
linear-gradient(160deg, #1d2f55, #0e1730 78%);
border: 1px solid rgba(140, 180, 255, 0.28);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 3px 10px rgba(10, 20, 45, 0.25);
color: #d9e6ff !important;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.oi33-clear-card__item::before {
/* 星座连线:两道低透明金色细线斜跨右上 */
content: ''; position: absolute; right: 8px; top: 22px; width: 40px; height: 1px;
background: rgba(255, 215, 106, 0.5); transform: rotate(-32deg); transform-origin: right center;
box-shadow: 0 14px 0 -0.4px rgba(255, 215, 106, 0.4);
opacity: 0.85;
}
.oi33-clear-card__item:hover {
transform: translateY(-3px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 18px rgba(40, 80, 170, 0.35);
border-color: rgba(255, 215, 106, 0.6);
}
.oi33-clear-card__const {
display: block; font-size: 20px; color: #ffd76a; text-shadow: 0 0 14px rgba(255, 210, 100, 0.7);
}
.oi33-clear-card__no {
position: absolute; top: 10px; right: 12px; font-size: 11px; color: rgba(190, 210, 250, 0.75);
font-family: ui-monospace, Menlo, monospace;
}
.oi33-clear-card__title {
display: block; margin-top: 8px; font-size: 13px; font-weight: 600; color: #eef4ff;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.oi33-clear-card__date { display: block; margin-top: 3px; font-size: 11px; color: rgba(160, 185, 230, 0.75); }
.oi33-clear-card small { color: rgba(190, 210, 250, 0.8); }
.oi33-clear-empty { color: var(--oi33-muted); font-size: 13px; margin: 0; }
.theme--dark .oi33-clear-empty { color: #93a4bd; }
/* ===== v53 优秀代码:记录页设置工具条 + 作业页取消 ===== */
.oi33-hw-pickbar {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
margin: 0 0 12px; padding: 8px 12px;
border: 1px dashed rgba(120, 160, 210, 0.45); border-radius: 10px;
background: rgba(120, 160, 210, 0.06);
}
.oi33-hw-pickbar .button { margin: 0; }
.oi33-hw-pickbar .button.is-on { border-color: #2d9e4f; color: #2d9e4f; }
.oi33-hw-pickbar__meta { font-size: 12px; color: var(--oi33-muted); }
.oi33-show-picklist { display: flex; flex-wrap: wrap; gap: 6px; }
.oi33-show-name { display: inline-flex; align-items: center; gap: 2px; }
.oi33-show-name form { margin: 0; display: inline-flex; }
.oi33-show-name__del {
background: none; border: 0; cursor: pointer; color: #a0432f;
font-size: 12px; padding: 0 2px; line-height: 1;
}
.oi33-show-name__del:hover { color: #d0452a; }
/* ===== v55 优秀代码行内徽标 / 本人提示 / 通关常驻标识 ===== */
/* v59:标题下轻量个人状态行(无边框、小字) */
.oi33-hw-meta {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
padding: 4px 2px 8px; font-size: 12px; color: var(--oi33-muted);
}
.oi33-hw-meta__item { display: inline-flex; align-items: center; gap: 4px; }
.oi33-hw-meta__item:first-child { color: var(--oi33-gold-ink); }
.theme--dark .oi33-hw-meta { color: #93a4bd; }
/* v69:被选入优秀代码的题目行——整行转金(题目/递交时间/状态/分数) + 一条金色左竖线
要点(2026-09-10 多轮实测后定稿):
① 不要流动光带(用户觉得土)→ 只留静态金雾 + 金色文字 + 单条金线;金雾铺在 上
(行背景本就画在 tr,td 无背景),这样整行连续、不留格子缝。
② 状态文字/图标的配色主题是 **!important + (0,2,0) 特异性**
(`.record-status--text.pass{color:#25ad40!important}`)→ 同为 !important 时比特异性,
所以必须写 `a.record-status--text` 这类更高特异性选择器,否则 Accepted 仍是绿的。
③ 状态图标的颜色写在 ::before 伪元素上,要单独打 ::before。
④ 分数是核心宏里的 inline style(getScoreColor),同样必须 !important。
⑤ 状态格左侧原有的彩色竖线(record-status--border + status_* 配色)直接改成金色,
不要再叠一条 box-shadow 竖线 —— 两条并排(绿+金)是用户实测反馈的丑。
⑥ 对比度:浅色白底用深金 #8a6008(约 5.6:1 可读),深色主题才用亮金 #ffd66a。 */
.oi33-row-glow { background-color: rgba(255, 214, 106, 0.10) !important; }
.oi33-row-glow > td { background-color: transparent !important; } /* 金雾铺在 tr 上,整行连续 */
.oi33-row-glow > td:first-child { border-left-color: #e0a92a !important; } /* 绿线→金线,只此一条 */
.oi33-row-glow > td,
.oi33-row-glow > td a,
.oi33-row-glow > td span { color: #8a6008 !important; }
/* 状态文字(AC/WA…)与状态图标:主题以 !important + (0,2,0) 配色,必须用更高特异性才压得住 */
.oi33-row-glow > td a.record-status--text,
.oi33-row-glow > td .record-status--text { color: #8a6008 !important; }
.oi33-row-glow > td .record-status--icon::before { color: #8a6008 !important; }
.theme--dark .oi33-row-glow { background-color: rgba(255, 214, 106, 0.13) !important; }
.theme--dark .oi33-row-glow > td,
.theme--dark .oi33-row-glow > td a,
.theme--dark .oi33-row-glow > td span,
.theme--dark .oi33-row-glow > td .record-status--text { color: #ffd66a !important; }
.theme--dark .oi33-row-glow > td .record-status--icon::before { color: #ffd66a !important; }
.oi33-clear-inline, .oi33-star-inline {
display: inline-flex; align-items: center; gap: 4px; margin-right: 10px;
color: var(--oi33-gold-ink); font-size: 12px; font-weight: 600; letter-spacing: .3px;
}
.theme--dark .oi33-clear-inline, .theme--dark .oi33-star-inline { color: #ffd76a; }
.oi33-star-inline.is-dim { color: var(--oi33-muted); font-weight: 400; }
.oi33-star-svg { vertical-align: -0.18em; }
.oi33-star-svg.is-dim { color: #6a7590; opacity: .72; }
.oi33-star-svg.is-lit { color: #ffd66a; filter: drop-shadow(0 0 3px rgba(255, 214, 106, 0.85)); }
.oi33-star-svg.is-spent { color: var(--oi33-muted); opacity: .45; }
.oi33-hwshow-menu { margin: 0; }
.oi33-hwshow-menu .menu__link { display: flex; gap: 8px; align-items: baseline; }
.oi33-hwshow-menu__no { color: var(--oi33-muted); min-width: 1.4em; }
.oi33-hwshow-menu__title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oi33-hwshow-menu__count { color: var(--oi33-gold-ink); font-size: 12px; }
.oi33-hwshow-empty { color: var(--oi33-muted); font-size: 13px; }
.oi33-clear-star { font-size: 12px; }
.oi33-show-block.is-flash { animation: oi33ShowFlash 1.4s ease; }
@keyframes oi33ShowFlash {
0%, 100% { box-shadow: none; border-color: rgba(120, 160, 210, 0.25); }
25%, 70% { box-shadow: 0 0 0 3px rgba(255, 215, 106, 0.45); border-color: #f2c964; }
}
/* ===== v56 魔法六芒星 / 收藏册 / 卡池 ===== */
.oi33-star-bar {
display: flex; align-items: center; justify-content: space-between;
margin-top: 8px; padding: 8px 10px;
border: 1px solid rgba(120, 120, 200, 0.22); border-radius: 8px;
color: #5a5a8c; background: rgba(140, 140, 220, 0.08);
}
.theme--dark .oi33-star-bar { border-color: rgba(160, 160, 255, 0.18); color: #c9c9ef; background: rgba(120, 120, 220, 0.10); }
.oi33-star-num { font-size: 18px; line-height: 1; color: #6a6ab0; }
.oi33-star-num.is-lit {
color: #ffd76a;
text-shadow: 0 0 6px rgba(255, 215, 106, 0.75), 0 0 14px rgba(255, 215, 106, 0.35);
animation: oi33StarGlow 2.6s ease-in-out infinite;
}
@keyframes oi33StarGlow {
0%, 100% { text-shadow: 0 0 5px rgba(255, 215, 106, 0.6), 0 0 12px rgba(255, 215, 106, 0.28); }
50% { text-shadow: 0 0 9px rgba(255, 215, 106, 0.95), 0 0 20px rgba(255, 215, 106, 0.5); }
}
.oi33-star-chip {
display: inline-flex; align-items: center; gap: 4px; margin-right: 4px;
border: 1px solid rgba(120, 120, 200, 0.4); border-radius: 999px;
padding: 3px 12px; font-size: 12px; font-weight: 600; color: #6a6ab0;
}
.oi33-star-chip.is-lit { color: var(--oi33-gold-ink); border-color: rgba(255, 215, 106, 0.75); text-shadow: 0 0 8px rgba(255, 215, 106, 0.6); }
.oi33-star-list { grid-template-columns: 1fr 1fr; }
.oi33-star-tag { margin-left: 6px; font-size: 11px; color: var(--oi33-muted); }
.oi33-star-tag.is-lit { color: var(--oi33-gold-ink); text-shadow: 0 0 8px rgba(255, 215, 106, 0.55); }
.oi33-star-sep { border: 0; border-top: 1px dashed rgba(0,0,0,.12); margin: 12px 0; }
.theme--dark .oi33-star-sep { border-top-color: rgba(255,255,255,.12); }
.oi33-star-grant__row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.oi33-star-grant__row .textbox { flex: 1 1 180px; }
/* 代码折叠(服务端内联渲染) */
.oi33-code { margin: 8px 0 4px; border: 1px solid rgba(120, 160, 210, 0.25); border-radius: 8px; background: #fff; }
.theme--dark .oi33-code { background: rgba(30, 46, 78, 0.6); border-color: rgba(110, 160, 230, 0.25); }
.oi33-code > summary { cursor: pointer; padding: 7px 10px; font-size: 12px; color: var(--oi33-sub); user-select: none; }
.oi33-code > summary:hover { color: #274b8f; }
.oi33-code .oi33-show-code { border-radius: 0 0 8px 8px; }
.oi33-code__tip { margin: 0; padding: 8px 10px; font-size: 12px; color: var(--oi33-muted); }
/* 收藏册入口(个人页一行) */
.oi33-collect-entry .section__body { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.oi33-collect-entry__title { font-weight: 700; }
.oi33-collect-entry__meta { color: var(--oi33-muted); font-size: 13px; }
.oi33-collect-entry .button { margin: 0 0 0 auto; }
/* 收藏册页 */
.oi33-collect-stats { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 8px; }
.oi33-collect-stat { display: flex; flex-direction: column; }
.oi33-collect-stat__num { font-size: 22px; font-weight: 700; }
.oi33-collect-stat__num.is-lit { color: var(--oi33-gold-ink); text-shadow: 0 0 10px rgba(255, 215, 106, 0.6); }
.oi33-collect-stat__label { font-size: 12px; color: var(--oi33-muted); }
.oi33-collect-note { color: var(--oi33-muted); font-size: 13px; }
.oi33-draw-grid { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 16px; }
/* v74:旧的 108px 抽卡卡片那一套(含 .oi33-draw-grid 的 nth-child 延迟、@keyframes oi33DrawIn、
__icon/__img/__name/__meta 的旧版)已整体删除 —— 它和新版同名重复定义,靠源码顺序互相打架,
并且 oi33DrawIn 这个名字与 v73 弹窗动画重名会互相覆盖。新版见文件后段「v74 星级揭示」一段。 */
.oi33-card-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.oi33-wall-card {
position: relative; border-radius: 12px; padding: 12px 10px; text-align: center;
background: #f2f5fa; border: 1px dashed rgba(120, 140, 180, 0.4); color: var(--oi33-muted);
filter: grayscale(1);
}
.oi33-wall-card.is-owned {
filter: none; color: #e7f0ff; border-style: solid;
background: radial-gradient(1.5px 1.5px at 25% 25%, rgba(255,255,255,.8) 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 75% 65%, rgba(255,255,255,.6) 50%, transparent 51%),
linear-gradient(160deg, #24395f, #101a30 78%);
border-color: rgba(255, 215, 106, 0.45);
}
.oi33-wall-card__icon { display: block; font-size: 30px; }
.oi33-wall-card__img { width: 78px; aspect-ratio: 2 / 3; height: auto; object-fit: contain; border-radius: 8px; }
.oi33-wall-card__name { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; }
.oi33-wall-card__meta { display: block; font-size: 11px; opacity: .8; }
.oi33-wall-card__mask {
position: absolute; right: 8px; top: 8px; font-size: 10px;
background: rgba(0,0,0,.45); color: #fff; border-radius: 999px; padding: 1px 8px;
}
.oi33-star-rows { display: flex; flex-direction: column; gap: 6px; }
.oi33-star-row { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 6px 8px; border-bottom: 1px dashed rgba(0,0,0,.06); }
.oi33-star-row__glyph { color: var(--oi33-muted); }
.oi33-star-row.is-lit .oi33-star-row__glyph { color: #ffd76a; text-shadow: 0 0 8px rgba(255, 215, 106, 0.7); }
.oi33-star-row__title { flex: 1; }
.oi33-star-row__kind, .oi33-star-row__state, .oi33-star-row__at { color: var(--oi33-muted); font-size: 12px; }
.oi33-star-row.is-lit .oi33-star-row__state { color: var(--oi33-gold-ink); }
/* ===== v57 荣誉卡(优秀代码)/ 二游风抽卡 ===== */
.oi33-show-modal__card--wide { max-width: 920px; }
.oi33-honor {
margin: 10px 0; border-radius: 14px; overflow: hidden;
border: 1px solid rgba(242, 201, 100, 0.55);
background: linear-gradient(160deg, #fffdf5, #fff6dd 70%);
box-shadow: 0 2px 10px rgba(180, 140, 30, 0.10);
}
.theme--dark .oi33-honor {
background: radial-gradient(1.5px 1.5px at 20% 25%, rgba(255,255,255,.75) 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 78% 60%, rgba(255,255,255,.5) 50%, transparent 51%),
linear-gradient(160deg, #24395f, #101a30 78%);
border-color: rgba(255, 215, 106, 0.5);
}
.oi33-honor__head {
display: flex; align-items: center; gap: 12px; cursor: pointer;
padding: 12px 14px; list-style: none;
}
.oi33-honor__head::-webkit-details-marker { display: none; }
.oi33-honor__name {
font-size: 17px; font-weight: 800; color: #a06f00;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.theme--dark .oi33-honor__name { color: #ffd76a; text-shadow: 0 0 10px rgba(255, 215, 106, 0.5); }
.oi33-honor__badge {
font-size: 11px; font-weight: 700; color: #7a5300;
background: linear-gradient(135deg, #ffe9a8, #f5c65a);
border-radius: 999px; padding: 2px 10px;
}
.oi33-honor__meta { margin-left: auto; font-size: 12px; color: var(--oi33-muted); }
.oi33-honor__note {
position: relative; margin: 2px 14px 12px; padding: 10px 14px 10px 18px;
background: #fff; border: 1px solid rgba(242, 201, 100, 0.65);
border-left: 3px solid #f2c964; border-radius: 10px;
color: #7a5300; font-size: 13px; line-height: 1.75;
box-shadow: 0 1px 6px rgba(180, 140, 30, 0.08);
}
.theme--dark .oi33-honor__note {
background: rgba(255, 255, 255, 0.04); color: #ffe9a8; border-color: rgba(255, 215, 106, 0.5);
}
.oi33-honor__note-tag {
display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 999px;
background: linear-gradient(135deg, #ffe9a8, #f5c65a); color: #7a5300;
font-size: 11px; font-weight: 700; font-style: normal; vertical-align: 1px;
}
.oi33-honor__note-md > p:first-child { margin-top: 0; }
.oi33-honor__note-md > p:last-child { margin-bottom: 0; }
.oi33-honor__note-md p { margin: 0 0 6px; }
.oi33-honor__note-md ul, .oi33-honor__note-md ol { margin: 4px 0 6px; padding-left: 20px; }
.oi33-honor__codewrap {
margin: 0 14px; max-height: 340px; overflow: hidden; position: relative;
border-radius: 8px;
}
.oi33-honor__codewrap::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 48px;
background: linear-gradient(to bottom, transparent, rgba(15, 26, 46, 0.85));
pointer-events: none;
}
.oi33-honor__codewrap.is-expanded { max-height: none; overflow: auto; }
.oi33-honor__codewrap.is-expanded::after { display: none; }
.oi33-honor__codewrap pre { margin: 0; }
.oi33-honor__expand { margin: 8px 14px 12px; }
.oi33-honor[open] .oi33-honor__expand { display: inline-block; }
.oi33-note-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 6px; }
/* v72:管理行 —— 姓名上行 + 输入框铺满 + 按钮右下角一行;中性卡 + 左金条(金色只留给姓名与主按钮)。
v71 的「固定姓名列」会让短名字右边空出 70~80px(用户实测「输入框离人名太远」),故改为单列。 */
.oi33-note-row {
display: flex; flex-direction: column; gap: 8px;
padding: 10px 12px 10px 14px; border-radius: 10px;
border: 1px solid var(--oi33-line);
border-left: 3px solid #e0a92a;
background: #fafbfc;
}
.theme--dark .oi33-note-row { background: #1b2330; }
.oi33-note-row__who { min-width: 0; }
.oi33-note-row__name {
display: block; font-size: 14px; font-weight: 700; color: var(--oi33-gold-ink);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.oi33-note-form { margin: 0; }
.oi33-note-form .textbox { width: 100%; }
.oi33-note-hidden { display: none; } /* 只装隐藏字段的表单;按钮用 form="id" 关联它 */
.oi33-note-acts { display: flex; justify-content: flex-end; gap: 8px; }
/* 金色主按钮 / 金色描边次按钮 / 圆形取消按钮 —— 替换原先清一色的灰色 rounded button */
.oi33-note-btn {
padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer;
white-space: nowrap; border: 1px solid rgba(242, 201, 100, 0.75);
background: transparent; color: var(--oi33-gold-ink); transition: background .16s ease, filter .16s ease;
}
.oi33-note-btn:hover { background: rgba(255, 214, 106, 0.16); }
.oi33-note-btn.is-primary {
border-color: rgba(255, 215, 106, 0.95); color: #7a5300;
background: linear-gradient(135deg, #ffe9a8, #f5c65a);
box-shadow: 0 2px 8px rgba(160, 120, 20, 0.22);
}
.theme--dark .oi33-note-btn.is-primary { color: #241a00; }
.oi33-note-btn.is-primary:hover { filter: brightness(1.05); }
.oi33-note-x {
width: 30px; height: 30px; padding: 0; border-radius: 50%; line-height: 1; font-size: 14px; cursor: pointer;
border: 1px solid var(--oi33-line); background: transparent; color: var(--oi33-muted);
transition: border-color .16s ease, color .16s ease;
}
.oi33-note-x:hover { border-color: #d0452a; color: #d0452a; }
.theme--dark .oi33-note-x:hover { border-color: #ff8a70; color: #ff8a70; }
/* 二游风卡池 */
.oi33-gacha__banner {
display: flex; gap: 18px; align-items: stretch; flex-wrap: wrap;
border-radius: 16px; padding: 14px;
border: 1px solid rgba(140, 180, 255, 0.35);
background: radial-gradient(80% 120% at 20% 0%, rgba(90, 140, 230, 0.18), transparent 70%),
linear-gradient(160deg, #f7faff, #eef4ff 70%);
}
.theme--dark .oi33-gacha__banner {
background: radial-gradient(80% 120% at 20% 0%, rgba(90, 140, 230, 0.25), transparent 70%),
linear-gradient(160deg, #1b2a49, #0e1730 78%);
}
.oi33-gacha__banner.r-ssr { border-color: rgba(255, 215, 106, 0.8); box-shadow: 0 0 24px rgba(255, 215, 106, 0.25); }
.oi33-gacha__art {
width: 320px; height: 380px; flex: none; border-radius: 12px; overflow: hidden;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(160deg, #24395f, #101a30 78%);
}
.oi33-gacha__art img { width: 100%; height: 100%; object-fit: contain; } /* v61:立牌不裁切 */
.oi33-gacha__art-icon { font-size: 120px; }
.oi33-gacha__info { flex: 1 1 320px; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.oi33-gacha__poolmeta { display: flex; align-items: center; gap: 8px; }
.oi33-gacha__poolname { font-size: 12px; color: var(--oi33-muted); letter-spacing: 3px; text-transform: uppercase; }
.oi33-gacha__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 4px; padding-top: 10px; border-top: 1px dashed rgba(120, 150, 190, 0.35); }
.oi33-gacha__meta-item { font-size: 12px; color: var(--oi33-muted); }
.oi33-gacha__meta-item b { color: var(--oi33-gold-ink); margin: 0 3px; }
.oi33-gacha__up { color: var(--oi33-gold-ink); border: 1px solid rgba(255, 215, 106, 0.8); border-radius: 999px; padding: 1px 8px; font-size: 11px; }
.oi33-gacha__tagline { font-size: 13px; color: var(--oi33-sub); }
.oi33-gacha__cardname { font-size: 26px; font-weight: 800; }
.oi33-gacha__rarity { font-size: 13px; color: var(--oi33-gold-ink); vertical-align: middle; }
.oi33-gacha__desc { margin: 0; font-size: 13px; color: var(--oi33-sub); }
.theme--dark .oi33-gacha__desc, .theme--dark .oi33-gacha__tagline { color: #a9b7cc; }
.oi33-gacha__stock { font-size: 12px; color: var(--oi33-muted); }
.oi33-gacha__rates { font-size: 12px; color: var(--oi33-muted); }
.oi33-gacha__drawbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.oi33-gacha__balance { font-size: 15px; }
.oi33-gacha__balance b { font-size: 24px; color: var(--oi33-gold-ink); text-shadow: 0 0 10px rgba(255, 215, 106, 0.5); }
/* v74:按钮全面降级 —— 用户「不要都是金色按钮」「按钮不必要做那么重和突出」。
抽卡按钮改**描边幽灵**(透明底 + 细金边 + 金字),十连只在描边与字重上略强,不再有渐变底。 */
.oi33-gacha__btn {
font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
display: inline-flex; align-items: baseline; gap: 8px;
padding: 9px 18px; border-radius: 8px;
border: 1px solid rgba(242, 201, 100, 0.55); color: var(--oi33-gold-ink);
background: transparent; transition: border-color .16s ease, background .16s ease;
}
.oi33-gacha__btn:hover:not(:disabled) { border-color: rgba(242, 201, 100, 0.95); background: rgba(255, 214, 106, 0.10); }
.oi33-gacha__btn:active:not(:disabled) { transform: translateY(1px); }
.oi33-gacha__btn b { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; opacity: .78; }
.oi33-gacha__btn.is-ten { border-color: rgba(242, 201, 100, 0.8); font-weight: 700; }
.oi33-gacha__btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* v75:揭示层整层可点,提示退化成一行文案(不再有「一键全开 / 点击继续」两个按钮) */
.oi33-draw-reveal { cursor: pointer; }
.oi33-draw-reveal__hint {
font-size: 13px; letter-spacing: 3px; color: rgba(233, 238, 247, 0.55);
animation: oi33HintPulse 2.4s ease-in-out infinite;
}
@keyframes oi33HintPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
/* 老师免耗提示:挪到余额行右端的小灰字,不再单独占一行与按钮挤在一起 */
.oi33-gacha__hint { margin-left: auto; font-size: 12px; color: var(--oi33-muted); }
/* ===== v82 记录页「设为本题优秀代码」工具条(教师) ===== */
.oi33-hwshow-pick {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
margin-bottom: 12px; padding: 9px 12px; border-radius: 10px;
border: 1px solid rgba(242, 201, 100, 0.45);
background: linear-gradient(160deg, #fffdf5, #fff6dd 70%);
}
.theme--dark .oi33-hwshow-pick {
background: linear-gradient(160deg, #1b2a49, #0e1730 78%);
border-color: rgba(255, 215, 106, 0.25);
}
.oi33-hwshow-pick__link { font-size: 12px; color: var(--oi33-sub); }
/* ===== v80 作业收尾台 ===== */
/* ===== v85 列表页表格化 =====
原先每行是 flex + wrap 的卡片,行内挤了六件元素;且 `.oi33-wrapup-item__at{margin-left:auto}`
在 wrap 容器里一旦换行就会吃掉整行剩余空间 → 文字"跑到中间"。改成表格,列对齐,根除该问题。 */
.oi33-wr-filterbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.oi33-wr-filter { width: 200px; }
.oi33-wr-filterbar .oi33-wr-sub { margin: 0; }
.oi33-wr-sub { margin: 0 0 10px; font-size: 13px; color: var(--oi33-muted); }
.oi33-wr-sub b { color: var(--oi33-gold-ink); }
.oi33-wr-table.is-list thead th {
padding: 6px 10px; font-size: 12px; font-weight: 600; color: var(--oi33-muted);
text-align: left; border-bottom: 1px solid var(--oi33-line); white-space: nowrap;
}
.oi33-wr-table.is-list thead th.is-num { text-align: right; }
.oi33-wr-table.is-list tbody tr:hover { background: rgba(120, 150, 190, 0.06); }
.oi33-wr-table.is-list .oi33-wr-name { min-width: 170px; }
.oi33-wr-table.is-list .oi33-wr-name a { color: inherit; font-weight: 700; text-decoration: none; }
.oi33-wr-table.is-list .oi33-wr-name a:hover { color: var(--oi33-gold-ink); }
.oi33-wr-classes { padding: 8px 10px; }
.oi33-wr-classes .oi33-wrapup-pill { margin: 0 4px 0 0; }
.oi33-wr-num {
padding: 8px 10px; text-align: right; white-space: nowrap;
color: var(--oi33-muted); font-variant-numeric: tabular-nums;
}
.oi33-wr-num.is-todo { color: var(--oi33-gold-ink); font-weight: 700; }
.oi33-wr-date { padding: 8px 10px; white-space: nowrap; font-size: 12px; color: var(--oi33-muted); }
/* 状态列:小圆点 + 文字(不再用大药丸,免得和操作按钮长得一样) */
.oi33-wr-dot {
display: inline-block; width: 7px; height: 7px; border-radius: 50%;
margin-right: 6px; vertical-align: middle; background: #9aa7b8;
}
.oi33-wr-dot.is-expired { background: #e0a92a; box-shadow: 0 0 6px rgba(224, 169, 42, 0.7); }
.oi33-wr-old { margin-left: 8px; font-size: 11px; color: var(--oi33-muted); }
/* 操作列:一个金色主按钮 + 一个纯文字按钮 */
.oi33-wr-text {
font: inherit; font-size: 12px; cursor: pointer; padding: 3px 8px; border: 0;
background: transparent; color: var(--oi33-muted); border-radius: 6px; text-decoration: none;
transition: color .16s ease, background .16s ease;
}
.oi33-wr-text:hover { color: var(--oi33-gold-ink); background: rgba(255, 214, 106, 0.12); }
.oi33-wr-table.is-list .oi33-wr-act a.oi33-note-btn { padding: 4px 12px; font-size: 12px; text-decoration: none; }
.oi33-wr-table.is-list .oi33-wr-act form { margin-left: 6px; }
.oi33-wr-table.is-archived { opacity: 0.68; }
/* v92:归档区里的「已归档班级」小节 */
.oi33-wrapup-archclass { margin-bottom: 18px; }
.oi33-wrapup-archclass:last-of-type { margin-bottom: 10px; }
.oi33-wrapup-archclass__head {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 2px 0 8px; margin-bottom: 6px; border-bottom: 1px dashed var(--oi33-line);
}
.oi33-wrapup-archclass__head .oi33-wrapup-sec__name { font-size: 1rem; }
/* v86:详情页的成绩表(学生 × 题目矩阵) */
.oi33-wr-scroll { overflow-x: auto; } /* 题目多时横向滚动,列不换行 */
.oi33-wr-table.is-matrix thead th {
padding: 6px 8px; font-size: 12px; font-weight: 600; color: var(--oi33-muted);
text-align: center; border-bottom: 1px solid var(--oi33-line); white-space: nowrap;
}
/* 表头默认居中(题目格子要对齐),但「姓名 / 星·进度 / 操作」三列必须与下面的内容同向:
否则表头居中、内容左对齐,看着就是错位的(用户实测「星 / 进度 和下文没对齐」)。 */
.oi33-wr-table.is-matrix thead th.oi33-wr-name { text-align: left; }
.oi33-wr-table.is-matrix thead th.oi33-wr-mstate { text-align: left; }
.oi33-wr-table.is-matrix thead th.oi33-wr-act { text-align: right; }
.oi33-wr-table.is-matrix .oi33-wr-cell { width: 46px; padding: 6px 4px; text-align: center; }
.oi33-wr-cell a { text-decoration: none; font-weight: 700; }
.oi33-wr-cell.is-ac a { color: #2d9e4f; }
.theme--dark .oi33-wr-cell.is-ac a { color: #6fdc8c; }
.oi33-wr-cell.is-fail a { color: #d0452a; }
.theme--dark .oi33-wr-cell.is-fail a { color: #ff8a70; }
.oi33-wr-cell.is-none { color: var(--oi33-muted); }
.oi33-wr-mstate { padding: 6px 10px; white-space: nowrap; font-size: 12px; }
.oi33-wr-mstate .is-pending { color: var(--oi33-gold-ink); font-weight: 700; }
.oi33-wr-mstate .is-lit { color: #2d9e4f; }
.theme--dark .oi33-wr-mstate .is-lit { color: #6fdc8c; }
.oi33-wr-mstate .is-near { color: var(--oi33-sub); }
.oi33-wrapup-arch { margin-top: 14px; }
.oi33-wrapup-arch > summary { cursor: pointer; font-size: 13px; color: var(--oi33-muted); padding: 6px 2px; }
/* 详情页:按小组分节(details/summary 复用 section 骨架) */
.oi33-wrapup-sec__head {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
cursor: pointer; list-style: none; padding: 15px 15px 0;
}
.oi33-wrapup-sec__head::-webkit-details-marker { display: none; }
.oi33-wrapup-sec__name { font-size: 1.15rem; font-weight: 700; }
.oi33-wrapup-sec__meta { font-size: 13px; color: var(--oi33-muted); }
.oi33-wrapup-sec__miss { color: #c0392b; }
.theme--dark .oi33-wrapup-sec__miss { color: #ff8a70; }
.oi33-wrapup-sec__done { margin-left: auto; font-size: 12px; color: var(--oi33-muted); }
.oi33-wrapup-expired { color: var(--oi33-gold-ink); }
.oi33-wrapup-pill {
padding: 1px 8px; border-radius: 999px; font-size: 12px;
background: rgba(120, 150, 190, 0.14); color: var(--oi33-sub);
}
/* v84:收尾台表格 —— 一人一行,状态/细节/动作都在同一行 */
.oi33-wr-hint { margin-left: 12px; font-size: 12px; color: var(--oi33-muted); }
.oi33-wr-bulk { margin: 0 0 10px; display: flex; justify-content: flex-end; }
.oi33-wr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.oi33-wr-table tr { border-bottom: 1px solid var(--oi33-line); }
.oi33-wr-table tr:last-child { border-bottom: 0; }
.oi33-wr-name { padding: 8px 10px 8px 2px; font-weight: 600; white-space: nowrap; }
.oi33-wr-state { padding: 8px 10px; white-space: nowrap; color: var(--oi33-muted); }
.oi33-wr-state.is-pending { color: var(--oi33-gold-ink); }
.oi33-wr-state.is-lit { color: #2d9e4f; }
.theme--dark .oi33-wr-state.is-lit { color: #6fdc8c; }
.oi33-wr-state.is-near { color: var(--oi33-sub); }
.oi33-wr-star { font-size: 12px; }
.oi33-wr-detail { padding: 8px 10px; }
.oi33-wr-detail .oi33-wrapup-pill { margin: 0 6px 0 0; }
.oi33-wr-act { padding: 8px 0 8px 10px; text-align: right; white-space: nowrap; }
.oi33-wr-act form { display: inline-block; margin: 0 8px 0 0; }
.oi33-wr-act .oi33-note-btn { padding: 4px 12px; font-size: 12px; }
.oi33-wr-link { font-size: 12px; color: var(--oi33-sub); }
.oi33-wr-done { margin-right: 8px; font-size: 12px; color: var(--oi33-muted); }
.oi33-wr-sep td {
padding: 12px 2px 4px; font-size: 12px; color: var(--oi33-muted);
border-bottom: 1px dashed var(--oi33-line);
}
.oi33-wr-table tr.is-idle { opacity: 0.55; }
.oi33-wr-table tr.is-idle .oi33-wr-name { font-weight: 400; }
.oi33-gacha__stage { margin-top: 14px; }
/* ===== v74 抽卡「星级揭示」(原神风) =====
揭示层整屏近黑 + 中央径向光晕,光晕与卡框颜色由**本批最高星级**决定(handler 传 drawBest
→ 模板挂 data-best)。揭示层是暗场,不随站点明暗主题变。
注:v73 那版用的是 .oi33-cat-modal 白卡骨架 + @keyframes oi33DrawIn —— 后者与卡片自身的入场
动画**同名**,同名 keyframes 后者覆盖前者,把卡片动画顶掉了。此处整组改名并重做。 */
.oi33-draw-reveal {
position: fixed; inset: 0; z-index: 1100;
display: none; align-items: center; justify-content: center; padding: 24px;
color: #e9eef7;
--oi33-reveal-glow: rgba(120, 170, 255, 0.30);
--oi33-card-frame: rgba(140, 180, 255, 0.45);
}
.oi33-draw-reveal:not([hidden]) { display: flex; }
.oi33-draw-reveal[data-best="4"] { --oi33-reveal-glow: rgba(180, 120, 255, 0.34); --oi33-card-frame: rgba(200, 140, 255, 0.7); }
.oi33-draw-reveal[data-best="5"] { --oi33-reveal-glow: rgba(255, 205, 90, 0.34); --oi33-card-frame: rgba(255, 215, 106, 0.9); }
.oi33-draw-reveal__mask { position: absolute; inset: 0; background: rgba(6, 9, 14, 0.94); }
.oi33-draw-reveal__glow {
position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
width: 130vmin; height: 130vmin; pointer-events: none;
background: radial-gradient(circle, var(--oi33-reveal-glow) 0%, transparent 62%);
}
.oi33-draw-reveal__inner {
position: relative; z-index: 1; width: 100%; max-width: 900px;
max-height: 100%; /* = 揭示层高度(inset:0)减去自身 padding */
overflow-y: auto; text-align: center;
/* v78:兜底不再出现「上下拖动条」——卡片尺寸已按窗口高度自适应(见 .oi33-gacha__results),
这里再把滚动条本身隐藏掉:即使极端矮窗口真的溢出,也不会露出拖动条(滚轮/触控板仍可滚)。 */
scrollbar-width: none;
animation: oi33RevealIn .3s ease-out;
}
.oi33-draw-reveal__inner::-webkit-scrollbar { width: 0; height: 0; }
@keyframes oi33RevealIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.oi33-draw-reveal__title { margin: 0 0 18px; font-size: 14px; letter-spacing: 6px; color: rgba(233, 238, 247, 0.62); }
.oi33-draw-reveal__acts { margin-top: 26px; display: flex; gap: 26px; justify-content: center; align-items: center; }
.oi33-gacha__results {
display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
/* v78:卡片高度随窗口高度自适应 —— 十连最多两行,公式保证「两行 + 标题 + 提示」永远放得下,
这样揭示层内部就不会因为内容超高而冒出滚动条(用户实测的「上下拖动条」)。 */
--oi33-card-h: min(225px, max(120px, calc(50vh - 90px)));
}
/* v74 卡片:满画幅卡面 + 底部黑幕压「卡名 + 星级」;稀有度用星星表达,重复用右上角角标。
配色走 --oi33-card-frame(由揭示层的 data-best 决定),单卡再按 data-stars 覆盖。
v78:尺寸由 --oi33-card-h 推导(宽 = 高 × 2/3),不再写死像素。 */
.oi33-draw-card {
position: relative; width: calc(var(--oi33-card-h) / 1.5); height: var(--oi33-card-h);
border-radius: 12px; /* 2:3 */
-webkit-transform-style: preserve-3d; transform-style: preserve-3d;
transition: transform 0.55s cubic-bezier(.2,1.2,.4,1);
}
.oi33-gacha__stage[data-times="1"] .oi33-draw-card { --oi33-card-h: min(360px, max(180px, calc(78vh - 60px))); }
.oi33-draw-card.is-facedown { transform: rotateY(180deg); }
/* 注意:这里必须带 -webkit- 前缀 —— 老 Safari 不认无前缀的 backface-visibility,
表现为两面都绘制、正面盖住背面(即「看不到翻牌、直接就是正面」)。 */
.oi33-draw-card__back, .oi33-draw-card__front {
position: absolute; inset: 0; border-radius: 12px;
-webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden;
}
.oi33-draw-card__back {
transform: rotateY(180deg);
display: flex; align-items: center; justify-content: center;
background: radial-gradient(60% 60% at 50% 40%, rgba(140, 190, 255, 0.35), transparent 70%),
linear-gradient(160deg, #24395f, #101a30 78%);
border: 1px solid rgba(140, 180, 255, 0.5); color: #8fd0ff; font-size: 46px;
}
.oi33-draw-card__front {
transform: rotateY(0deg);
display: flex; align-items: center; justify-content: center;
background: linear-gradient(160deg, #24395f, #101a30 78%);
border: 1px solid var(--oi33-card-frame, rgba(140, 180, 255, 0.45)); color: #e7f0ff;
}
.oi33-draw-card[data-stars="4"] .oi33-draw-card__front { border-color: rgba(200, 140, 255, 0.85); box-shadow: 0 0 18px rgba(180, 120, 255, 0.4); }
.oi33-draw-card[data-stars="5"] .oi33-draw-card__front { border-color: rgba(255, 215, 106, 0.95); box-shadow: 0 0 26px rgba(255, 215, 106, 0.5); }
.oi33-draw-card__img { width: 100%; height: 100%; object-fit: cover; } /* v74:满画幅(卡面按 2:3 出图) */
.oi33-draw-card__icon { font-size: 56px; }
.oi33-draw-card__scrim {
position: absolute; left: 0; right: 0; bottom: 0; height: 46%; pointer-events: none;
background: linear-gradient(to top, rgba(4, 8, 14, 0.92) 12%, rgba(4, 8, 14, 0.5) 55%, transparent);
}
.oi33-draw-card__cap {
position: absolute; left: 8px; right: 8px; bottom: 9px;
display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.oi33-draw-card__name {
max-width: 100%; font-size: 14px; font-weight: 700; color: #fff;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}
.oi33-draw-card__stars { font-size: 11px; letter-spacing: 1px; color: #cfe0ff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85); }
.oi33-draw-card[data-stars="4"] .oi33-draw-card__stars { color: #d9b8ff; }
.oi33-draw-card[data-stars="5"] .oi33-draw-card__stars { color: #ffd66a; }
.oi33-draw-card__badge {
position: absolute; right: 6px; top: 6px; z-index: 2;
font-size: 10px; font-weight: 700; color: #fff; letter-spacing: .5px;
background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 999px; padding: 1px 7px;
}
.oi33-draw-card__badge.is-dup { color: rgba(255, 255, 255, 0.82); }
.oi33-draw-card.is-empty { opacity: 0.35; }
.oi33-wall-card { cursor: pointer; font: inherit; }
.oi33-wall-card__up {
position: absolute; left: 8px; top: 8px; font-size: 10px; color: #7a5300;
background: linear-gradient(135deg, #ffe9a8, #f5c65a); border-radius: 999px; padding: 1px 8px;
}
.oi33-carddetail { max-width: 460px; width: 100%; text-align: center; }
.oi33-carddetail__art {
width: min(100%, 280px); margin: 0 auto; aspect-ratio: 2 / 3; height: auto; /* v65:2:3 */
border-radius: 12px; overflow: hidden;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(160deg, #24395f, #101a30 78%);
}
.oi33-carddetail__art img { width: 100%; height: 100%; object-fit: contain; }
.oi33-carddetail__art span { font-size: 110px; }
.oi33-carddetail__name { margin-top: 10px; font-size: 20px; font-weight: 800; }
.oi33-carddetail__desc { margin: 8px 4px 6px; font-size: 13px; color: var(--oi33-sub); text-align: left; }
.theme--dark .oi33-carddetail__desc { color: #a9b7cc; }
/* ===== v59 通览页星状态行 / 抽卡重复角标 / 收藏墙裁剪 ===== */
.oi33-hw-state { display: inline-flex; align-items: center; gap: 5px; }
.oi33-hw-state__text { color: var(--oi33-muted); }
.oi33-hw-state__text.is-cleared { color: var(--oi33-gold-ink); font-weight: 600; }
.theme--dark .oi33-hw-state__text { color: #93a4bd; }
.theme--dark .oi33-hw-state__text.is-cleared { color: #ffd76a; }
.oi33-draw-card__count {
position: absolute; right: 8px; top: 8px; z-index: 2;
background: rgba(0, 0, 0, 0.55); color: #ffe9a8; border-radius: 999px;
padding: 1px 8px; font-size: 12px; font-weight: 700;
}
.oi33-card-wall.is-clamped .oi33-wall-card:nth-child(n+25) { display: none; }
.oi33-card-wall .oi33-wall-card { content-visibility: auto; contain-intrinsic-size: 140px 180px; }
.oi33-wall-more { margin-top: 10px; }
/* ===== v61 优秀代码:展开金胶囊 / 防抄 / 水印 / 收藏册入口 ===== */
.oi33-honor__expand {
display: inline-flex; align-items: center; gap: 6px;
margin: 0 14px 12px; padding: 5px 16px; cursor: pointer;
font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .5px;
color: #a06f00; background: linear-gradient(180deg, #fffdf5, #fff3d4);
border: 1px solid rgba(242, 201, 100, 0.85); border-radius: 999px;
transition: box-shadow .18s ease, transform .18s ease;
}
.oi33-honor__expand:hover {
box-shadow: 0 0 12px rgba(255, 214, 106, 0.55);
transform: translateY(-1px);
}
.theme--dark .oi33-honor__expand {
color: #ffd76a; background: rgba(255, 215, 106, 0.08); border-color: rgba(255, 215, 106, 0.6);
}
.oi33-honor__arrow { font-size: 11px; }
.oi33-nocopy { user-select: none; -webkit-user-select: none; }
/* v72:防抄的真漏洞 —— 站点 Prism 的 toolbar 插件会给每个高亮代码块挂一个 "Copy" 按钮
(ui-default/components/highlighter/prismjs.js:44,内部用 clipboard 库主动写剪贴板),
拦截 copy 事件与 user-select:none 都拦不住它(JS 主动写入)。所以在防抄容器里整条隐藏工具栏
(prism 把 pre 包进 .code-toolbar 并把 .toolbar 插在其内,选择器命中;工具栏是绝对定位,不留空档)。*/
.oi33-nocopy .toolbar { display: none !important; }
.oi33-honor__watermark {
position: absolute; right: 10px; bottom: 6px; z-index: 2;
font-size: 11px; letter-spacing: 1px; color: rgba(200, 215, 240, 0.35);
pointer-events: none; user-select: none;
}
.oi33-collect-link { margin-left: 12px; font-size: 12px; color: var(--oi33-gold-ink); text-decoration: none; }
.oi33-collect-link:hover { text-decoration: underline; }
.theme--dark .oi33-collect-link { color: #ffd76a; }
/* 我的六芒星清单:统一网格对齐 */
.oi33-star-row {
display: grid; grid-template-columns: 24px minmax(0, 1fr) 56px 96px 150px;
align-items: center; gap: 10px;
}
.oi33-star-row__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oi33-star-row__kind, .oi33-star-row__at { text-align: right; }
.oi33-star-row__state { text-align: right; }
.oi33-star-row.is-lit .oi33-star-row__state { color: var(--oi33-gold-ink); font-weight: 600; }
/* ===== v62 收藏册:标签页 / 本期卡池列表 ===== */
.oi33-tabs { display: flex; gap: 10px; margin-top: 14px; }
.oi33-tab {
font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
padding: 7px 22px; border-radius: 999px; letter-spacing: 1px;
color: var(--oi33-sub); background: rgba(120, 150, 190, 0.10);
border: 1px solid transparent; transition: all .18s ease;
}
.oi33-tab:hover { background: rgba(120, 150, 190, 0.18); }
.oi33-tab.is-active {
color: #7a5300; background: linear-gradient(180deg, #ffeeb8, #ffdf94);
border-color: rgba(242, 201, 100, 0.9); box-shadow: 0 0 12px rgba(255, 214, 106, 0.35);
}
.theme--dark .oi33-tab { color: #a9b7cc; background: rgba(120, 150, 190, 0.12); }
.theme--dark .oi33-tab.is-active { color: #4a2d00; }
.oi33-pool-list { display: flex; flex-direction: column; }
.oi33-pool-item {
display: grid; grid-template-columns: 46px minmax(0, 1fr) 60px 100px 66px;
align-items: center; gap: 12px; padding: 8px 4px;
border-bottom: 1px dashed rgba(0, 0, 0, .07);
}
.theme--dark .oi33-pool-item { border-bottom-color: rgba(255, 255, 255, .08); }
.oi33-pool-item__thumb {
width: 46px; height: 46px; border-radius: 8px; overflow: hidden; flex: none;
display: flex; align-items: center; justify-content: center;
background: #f0f3f8; font-size: 22px; color: var(--oi33-muted);
}
.oi33-pool-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.oi33-pool-item__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oi33-pool-item__up { margin-left: 6px; font-size: 11px; color: var(--oi33-gold-ink); border: 1px solid rgba(242, 201, 100, .8); border-radius: 999px; padding: 0 8px; }
.oi33-pool-item__rarity { color: var(--oi33-muted); font-size: 12px; }
.oi33-pool-item__stock { color: var(--oi33-muted); font-size: 12px; }
.oi33-pool-item__owned { color: #2d9e4f; font-size: 12px; font-weight: 600; }
/* ===== v64 卡池信息条 + 主推卡道(多主推) ===== */
.oi33-gacha__strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.oi33-gacha__strip .oi33-gacha__poolname { font-size: 12px; letter-spacing: 3px; color: var(--oi33-muted); }
.oi33-gacha__strip .oi33-gacha__tagline { color: var(--oi33-sub); font-size: 13px; }
.oi33-feature-rail {
display: flex; gap: 16px; overflow-x: auto; padding: 4px 2px 10px;
scrollbar-width: thin;
}
.oi33-feature-rail.is-single { justify-content: center; }
.oi33-feature-card {
flex: 0 0 auto; width: 240px; padding: 10px; border-radius: 14px;
border: 1px solid rgba(140, 180, 255, 0.35);
background: linear-gradient(160deg, #f7faff, #eef4ff 70%);
}
.theme--dark .oi33-feature-card { background: linear-gradient(160deg, #1b2a49, #0e1730 78%); border-color: rgba(110, 160, 230, 0.3); }
.oi33-feature-card.r-ssr { border-color: rgba(255, 215, 106, 0.85); box-shadow: 0 0 20px rgba(255, 215, 106, 0.25); }
.oi33-feature-card.r-sr { border-color: rgba(180, 130, 255, 0.7); }
.oi33-feature-card__art {
aspect-ratio: 2 / 3; height: auto; border-radius: 10px; overflow: hidden; /* v65:2:3 */
display: flex; align-items: center; justify-content: center;
background: linear-gradient(160deg, #24395f, #101a30 78%);
}
.oi33-feature-card__art img { width: 100%; height: 100%; object-fit: contain; }
.oi33-feature-card__art .oi33-gacha__art-icon { font-size: 96px; }
.oi33-feature-card__cap { margin-top: 8px; font-size: 15px; font-weight: 700; }
.oi33-feature-card__desc { margin-top: 4px; font-size: 12px; color: var(--oi33-sub); }
.theme--dark .oi33-feature-card__desc { color: #a9b7cc; }
/* ===== v65 优秀代码金闪标记 / 主推卡道箭头 / 个人中心页 ===== */
/* 题目行金闪(与粉爪同级体量;同一行可与 oi33-row-glow 流光共存) */
.oi33-spark { margin-left: 6px; display: inline-flex; vertical-align: -0.18em; text-decoration: none; transition: transform .18s ease, filter .18s ease; }
.oi33-spark:hover { transform: scale(1.18) rotate(8deg); filter: drop-shadow(0 0 5px rgba(255, 214, 106, .85)); }
.oi33-spark-svg { display: inline-block; vertical-align: -0.18em; }
/* 主推卡道左右箭头(绝对定位浮在卡道两侧,不占布局) */
/* v73:给两侧箭头预留 42px —— v65 只留了 4px,而箭头宽 34px 且定位 left/right:-6px,
结果直接压住第一/最后一张卡片 24px(用户实测「抽卡页面 UI 重叠冲突」)。 */
.oi33-rail-wrap { position: relative; padding: 0 42px; }
.oi33-rail-nav {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
width: 34px; height: 34px; line-height: 1; font-size: 20px; font-weight: 700;
border-radius: 999px; cursor: pointer; padding: 0;
color: #7a5300; background: linear-gradient(135deg, #ffe9a8, #f5c65a);
border: 1px solid rgba(255, 215, 106, .9); box-shadow: 0 2px 10px rgba(120, 90, 0, .28);
}
.oi33-rail-nav:hover { filter: brightness(1.06); }
.oi33-rail-nav[hidden] { display: none; }
.oi33-rail-nav.is-prev { left: 3px; }
.oi33-rail-nav.is-next { right: 3px; }
/* 个人中心页 /me */
.oi33-me-hero .section__body { padding-bottom: 14px; }
.oi33-me-hero__main { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.oi33-me-hero__avatar { border-radius: 50%; border: 2px solid rgba(255, 215, 106, .6); }
.oi33-me-hero__id { flex: 1 1 260px; min-width: 0; }
.oi33-me-hero__name { margin: 0; font-size: 22px; }
.oi33-me-hero__name a { color: inherit; }
.oi33-me-hero__meta { margin-top: 6px; display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--oi33-muted); }
.oi33-me-hero__stats { display: flex; gap: 10px; }
.oi33-me-stat {
display: flex; flex-direction: column; align-items: center; gap: 2px;
min-width: 92px; padding: 8px 12px; border-radius: 12px; text-decoration: none;
border: 1px solid rgba(140, 180, 255, .35); background: linear-gradient(160deg, #f7faff, #eef4ff 70%);
}
.theme--dark .oi33-me-stat { background: linear-gradient(160deg, #1b2a49, #0e1730 78%); border-color: rgba(110, 160, 230, .3); }
.oi33-me-stat__num { display: inline-flex; align-items: center; gap: 4px; font-size: 18px; font-weight: 800; color: #3b4a63; }
.theme--dark .oi33-me-stat__num { color: #e7f0ff; }
.oi33-me-stat__num.is-lit { color: #b8860b; }
.theme--dark .oi33-me-stat__num.is-lit { color: #ffd66a; }
.oi33-me-stat__label { font-size: 11px; color: var(--oi33-muted); }
.oi33-me-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.oi33-me-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.oi33-me-links a { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; color: inherit; text-decoration: none; font-size: 14px; }
.oi33-me-links a:hover { background: rgba(140, 180, 255, .14); }
.oi33-me-links .icon { opacity: .75; }
.oi33-me-logout { margin: 18px 0 8px; text-align: right; }
/* 首页侧栏「个人中心」卡 */
.oi33-side-me__buttons { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 8px; }
.oi33-side-me__main {
display: flex; align-items: center; gap: 6px;
padding: 8px 10px; border-radius: 8px; text-decoration: none; font-weight: 700;
color: #3b4a63; background: rgba(140, 180, 255, .12);
border: 1px solid rgba(140, 180, 255, .45);
}
.theme--dark .oi33-side-me__main { color: #e7f0ff; background: rgba(110, 160, 230, .14); border-color: rgba(110, 160, 230, .4); }
.oi33-side-me__main.is-verify {
color: #7a5300; background: linear-gradient(135deg, #ffe9a8, #f5c65a);
border-color: rgba(255, 215, 106, .9); box-shadow: 0 2px 10px rgba(120, 90, 0, .22);
}
.theme--dark .oi33-side-me__main.is-verify { color: #241a00; }
.oi33-side-me__main .icon { opacity: .8; }
.oi33-side-me__main .oi33-side-me__arrow { margin-left: auto; transition: transform .18s ease; }
.oi33-side-me__main:hover .oi33-side-me__arrow { transform: translateX(3px); }
.oi33-side-me__state { margin: 0 0 8px; font-size: 12px; color: var(--oi33-muted); }
.oi33-side-me__links { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.oi33-side-me__links .typo-a { font-size: 13px; }
/* ===== v71 双主题补丁:图标取色 + 深色缺失项(审计结论:后段新增规则 83% 缺深色变体) ===== */
/* 图标颜色改为 CSS 给(partial 内已改 currentColor)。浅色用深金/深粉,深色才用亮色。 */
.oi33-spark-svg { color: #b8860b; } /* 白底 3.3:1;原先写死 #ffd66a 只有 1.19:1 —— 浅色下等于隐形 */
.theme--dark .oi33-spark-svg { color: #ffd66a; }
.oi33-paw-svg { color: #e2568f; } /* 白底约 3.4:1;原先 #ff8fbe 只有 2.0:1 */
.theme--dark .oi33-paw-svg { color: #ff8fb5; }
/* 六芒星三态:补浅色可读值 + 深色变体(深色下 dim/spent 原先等效 2.1:1 / 2.0:1,基本看不见) */
.oi33-star-svg.is-dim { color: #5d6880; opacity: .8; }
.oi33-star-svg.is-lit { color: #b8860b; filter: drop-shadow(0 0 2px rgba(184, 134, 11, .45)); }
.oi33-star-svg.is-spent { color: #7d8798; opacity: .55; }
.theme--dark .oi33-star-svg.is-dim { color: #8fa0bd; opacity: .8; }
.theme--dark .oi33-star-svg.is-lit { color: #ffd66a; filter: drop-shadow(0 0 3px rgba(255, 214, 106, 0.85)); }
.theme--dark .oi33-star-svg.is-spent { color: #8b98ad; opacity: .55; }
/* 深色下会变成刺眼浅色块的地方 → 统一深蓝底 */
.theme--dark .oi33-wall-card { background: #1b2330; border-color: rgba(110, 160, 230, 0.28); color: #93a4bd; }
.theme--dark .oi33-show-entry { background: #1b2330; border-color: rgba(110, 160, 230, 0.25); }
.theme--dark .oi33-show-entry__head b { color: #8fd0ff; }
.theme--dark .oi33-cat-picker__item { background: #1b2330; border-color: rgba(110, 160, 230, 0.25); }
.theme--dark .oi33-cat-picker__item:hover { background: #22304a; }
.theme--dark .oi33-shop-card { background: #1b2330; border-color: rgba(110, 160, 230, 0.25); }
.theme--dark .oi33-shop-mycat .oi33-shop-mycat-item { background: #1b2330; border-color: rgba(110, 160, 230, 0.25); }
.theme--dark .oi33-pool-item__thumb { background: #1b2330; }
/* 白底白字(功能性 bug):输入框只设了 background 没设 color,深色下继承 body 的浅字 → 看不见 */
.oi33-inline-form input[type='text'],
.oi33-inline-form input[type='number'] { color: inherit; }
.theme--dark .oi33-inline-form input[type='text'],
.theme--dark .oi33-inline-form input[type='number'] {
background: #1b2330; border-color: rgba(110, 160, 230, 0.3); color: #e7f0ff;
}
/* 深色弹层里悬停即消失的关闭按钮(原 #333 在 #1d2128 上仅 1.28:1) */
.theme--dark .oi33-cat-modal__close:hover { color: #e7f0ff; }
.theme--dark .oi33-code > summary:hover { color: #8fd0ff; }
/* 荣誉卡:浅色下水印 1.11:1(等于没写)、代码区底部渐隐是一道深蓝脏印(浅色代码底是白的) */
.oi33-honor__watermark { color: rgba(120, 90, 20, 0.42); }
.theme--dark .oi33-honor__watermark { color: rgba(200, 215, 240, 0.4); }
.oi33-honor__codewrap::after { background: linear-gradient(to bottom, transparent, var(--code-bg, #f5f5f5)); }
.theme--dark .oi33-honor__codewrap::after { background: linear-gradient(to bottom, transparent, rgba(15, 26, 46, 0.85)); }
/* ===== v93 学期报告:班级选择胶囊 =====
只给颜色/间距,不碰盒模型(沿用 oi33-wrapup-pill 的形状);颜色一律走令牌,深色自动换档。 */
.oi33-wr-picklabel { font-size: 12px; color: var(--oi33-muted); margin-right: 2px; }
a.oi33-wrapup-pill.oi33-wr-classpick {
text-decoration: none; color: var(--oi33-sub);
border: 1px solid transparent;
}
a.oi33-wrapup-pill.oi33-wr-classpick:hover {
color: var(--oi33-gold-ink);
background: rgba(255, 214, 106, 0.14);
}
a.oi33-wrapup-pill.oi33-wr-classpick.is-on {
color: var(--oi33-gold-ink); font-weight: 700;
border-color: rgba(224, 169, 42, 0.55);
background: rgba(255, 214, 106, 0.16);
}
/* ==================== v93 饱食度 / 快乐度 / 喂食 ==================== */
/* 猫舞台右上角浮层:两条百分比。只对本人渲染(见 user_detail.html)。
pointer-events:none 很关键 —— 否则这块会挡住拖猫/摸猫的点击。 */
.oi33-cat-stats {
position: absolute;
top: 8px; right: 8px;
z-index: 3;
display: flex;
flex-direction: column;
gap: 3px;
padding: 5px 9px 5px 7px;
border-radius: 9px;
background: rgba(255, 255, 255, .74);
border: 1px solid var(--oi33-line);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
font-size: 12px;
line-height: 1.35;
pointer-events: none;
}
.oi33-cat-stats__row { display: flex; align-items: center; gap: 5px; font-weight: 700; }
.oi33-cat-stats__row b {
font-variant-numeric: tabular-nums;
min-width: 33px;
text-align: right;
}
.oi33-cat-stats__row.is-sat { color: #b07d10; }
.oi33-cat-stats__row.is-mood { color: #c94a72; }
.theme--dark .oi33-cat-stats,
[data-mantine-color-scheme=dark] .oi33-cat-stats { background: rgba(16, 23, 34, .74); }
.theme--dark .oi33-cat-stats__row.is-sat,
[data-mantine-color-scheme=dark] .oi33-cat-stats__row.is-sat { color: #ffd66a; }
.theme--dark .oi33-cat-stats__row.is-mood,
[data-mantine-color-scheme=dark] .oi33-cat-stats__row.is-mood { color: #ff8fb5; }
/* 数值刚变过 → 轻轻闪一下(喂食后的乐观更新) */
.oi33-cat-stats__row b.is-bump { animation: oi33StatBump .55s ease-out; }
@keyframes oi33StatBump {
0% { transform: scale(1); }
35% { transform: scale(1.22); }
100% { transform: scale(1); }
}
/* 图标统一块级,避免行内基线把对齐弄歪 */
.oi33-food-svg { display: block; flex: none; }
/* ---- 喂食弹层 ---- */
.oi33-feed-card { max-width: 390px; }
.oi33-feed-title { font-size: 15px; font-weight: 700; margin: 0 0 12px; }
.oi33-feed-row {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 8px;
padding: 9px 10px;
border-radius: 10px;
border: 1px solid var(--oi33-line);
background: rgba(112, 154, 172, .07);
}
.oi33-feed-row__ico { flex: none; display: flex; color: #b07d10; }
.oi33-feed-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.oi33-feed-row__name { font-size: 13.5px; }
.oi33-feed-row__eff { display: flex; gap: 9px; font-size: 11.5px; }
.oi33-feed-row__eff .is-sat { color: var(--oi33-gold-ink); }
.oi33-feed-row__eff .is-mood { color: #c94a72; }
.oi33-feed-row__price {
flex: none;
font-size: 12.5px;
color: var(--oi33-muted);
font-variant-numeric: tabular-nums;
}
.oi33-feed-row__go { flex: none; min-width: 46px; }
.oi33-feed-row__go:disabled { opacity: .45; cursor: default; }
.oi33-feed-balance {
margin: 10px 0 0;
font-size: 12px;
color: var(--oi33-muted);
text-align: right;
}
.oi33-feed-balance b { color: var(--oi33-gold-ink); font-variant-numeric: tabular-nums; }
.theme--dark .oi33-feed-row,
[data-mantine-color-scheme=dark] .oi33-feed-row { background: rgba(112, 154, 172, .13); }
.theme--dark .oi33-feed-row__ico,
[data-mantine-color-scheme=dark] .oi33-feed-row__ico { color: #ffd66a; }
.theme--dark .oi33-feed-row__eff .is-mood,
[data-mantine-color-scheme=dark] .oi33-feed-row__eff .is-mood { color: #ff8fb5; }
/* v93 摸猫生气时冒的「发怒符号」(内联 SVG,不用 emoji)。位置跟着猫的 x 走(JS 里设 left)。 */
.oi33-cat-anger {
position: absolute;
bottom: 78px;
z-index: 4;
width: 26px;
height: 26px;
color: #e2566f;
pointer-events: none;
}
.oi33-cat-anger svg { display: block; width: 100%; height: 100%; }
.theme--dark .oi33-cat-anger,
[data-mantine-color-scheme=dark] .oi33-cat-anger { color: #ff8fa3; }
/* v93 机制②狂喂:吃撑提示 + 按钮禁用态 */
.oi33-feed-note {
margin: -4px 0 12px;
padding: 7px 11px;
border-radius: 8px;
font-size: 12.5px;
line-height: 1.6;
color: #8a5a12;
background: rgba(224, 169, 42, .14);
border: 1px solid rgba(224, 169, 42, .32);
}
.oi33-feed-row__go.is-stuffed,
.oi33-feed-row__go:disabled.is-stuffed { opacity: .35; }
.theme--dark .oi33-feed-note,
[data-mantine-color-scheme=dark] .oi33-feed-note {
color: #f0c860;
background: rgba(224, 169, 42, .16);
border-color: rgba(224, 169, 42, .34);
}
/* ==================== v93 自动喂养:开关 + 三档拖动 ==================== */
/* 用户要求:不要灰按钮,开启后可以拖动设置 正常 / 微胖 / 球 三个标准。 */
.oi33-cat-auto {
margin: 10px 0 2px;
padding: 11px 14px 12px;
border-radius: 10px;
border: 1px solid var(--oi33-line);
background: rgba(112, 154, 172, .06);
}
.oi33-cat-auto__head { display: flex; align-items: center; justify-content: space-between; }
.oi33-cat-auto__title { font-size: 13px; font-weight: 700; color: var(--oi33-sub); }
.theme--dark .oi33-cat-auto__title,
[data-mantine-color-scheme=dark] .oi33-cat-auto__title { color: #c6d2e2; }
/* 胶囊开关(不是灰按钮) */
.oi33-cat-auto__sw {
position: relative; width: 42px; height: 23px; padding: 0;
border-radius: 99px; border: 1px solid var(--oi33-line);
background: #dfe4ec; cursor: pointer;
transition: background .22s, border-color .22s;
}
.oi33-cat-auto__sw i {
position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%;
background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .24);
transition: transform .24s cubic-bezier(.3, 1.4, .5, 1);
}
.oi33-cat-auto.is-on .oi33-cat-auto__sw {
background: linear-gradient(180deg, #f0c552, #e0a92a);
border-color: #d09a1e;
box-shadow: 0 0 0 3px rgba(224, 169, 42, .16);
}
.oi33-cat-auto.is-on .oi33-cat-auto__sw i { transform: translateX(19px); }
/* 三档轨道 */
.oi33-cat-auto__rail {
position: relative; margin: 13px 0 2px; padding: 0 9px 18px;
cursor: pointer; touch-action: none;
-webkit-user-select: none; user-select: none;
}
.oi33-cat-auto__track {
display: block; height: 8px; border-radius: 99px; background: #e6ebf2;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .10); overflow: hidden;
}
.oi33-cat-auto__track i {
display: block; height: 100%; width: 0; border-radius: 99px;
background: linear-gradient(90deg, #f0c552, #e0a92a);
transition: width .18s;
}
.oi33-cat-auto__thumb {
position: absolute; top: -5px; left: 0; width: 18px; height: 18px; border-radius: 50%;
background: #fff; border: 2px solid #e0a92a;
box-shadow: 0 1px 3px rgba(0, 0, 0, .26);
transform: translateX(-50%); transition: left .18s;
}
.oi33-cat-auto__tick {
position: absolute; bottom: 0; font-size: 11.5px; color: var(--oi33-muted);
white-space: nowrap; transition: color .18s;
}
.oi33-cat-auto__tick[data-lv="0"] { left: 0; }
.oi33-cat-auto__tick[data-lv="1"] { left: 50%; transform: translateX(-50%); }
.oi33-cat-auto__tick[data-lv="2"] { left: 100%; transform: translateX(-100%); }
.oi33-cat-auto__tick.is-cur { color: var(--oi33-gold-ink); font-weight: 700; }
.oi33-cat-auto__hint { margin: 3px 0 0; font-size: 11.5px; line-height: 1.65; color: var(--oi33-muted); }
.oi33-cat-auto__hint b { color: var(--oi33-gold-ink); }
/* 关着的时候轨道置灰且不可拖 */
.oi33-cat-auto:not(.is-on) .oi33-cat-auto__rail { opacity: .42; cursor: default; }
.oi33-cat-auto:not(.is-on) .oi33-cat-auto__thumb { border-color: #b9c2cf; }
.theme--dark .oi33-cat-auto,
[data-mantine-color-scheme=dark] .oi33-cat-auto { background: rgba(112, 154, 172, .12); }
.theme--dark .oi33-cat-auto__sw,
[data-mantine-color-scheme=dark] .oi33-cat-auto__sw { background: #2b3546; }
.theme--dark .oi33-cat-auto__track,
[data-mantine-color-scheme=dark] .oi33-cat-auto__track { background: #2b3546; }
.theme--dark .oi33-cat-auto__thumb,
[data-mantine-color-scheme=dark] .oi33-cat-auto__thumb { background: #1b2330; }
/* v93 机制②:昨天吃撑、今天升级的一次性提示 */
.oi33-cat-grew {
margin: 8px 0 0;
padding: 7px 12px;
border-radius: 8px;
font-size: 12.5px;
line-height: 1.6;
color: #8a5a12;
background: rgba(224, 169, 42, .14);
border: 1px solid rgba(224, 169, 42, .32);
}
.theme--dark .oi33-cat-grew,
[data-mantine-color-scheme=dark] .oi33-cat-grew { color: #f0c860; background: rgba(224, 169, 42, .16); }
/* ══════ v93 方案 B:猫卡瘦身(8 层 → 3 层) ══════ */
/* ① 顶栏:文字按钮 → 一排图标(每个都带 data-tooltip) */
.oi33-cat-tools { display: flex; gap: 4px; align-items: center; }
.oi33-cat-ico {
position: relative;
display: flex; align-items: center; justify-content: center;
width: 32px; height: 32px; padding: 0;
border-radius: 9px; border: 1px solid transparent; background: transparent;
color: var(--oi33-sub); cursor: pointer; text-decoration: none;
transition: background .15s, color .15s, border-color .15s;
}
.oi33-cat-ico:hover { background: rgba(112, 154, 172, .16); color: var(--oi33-gold-ink); }
.oi33-cat-ico:active { transform: translateY(1px); }
.oi33-cat-ico .oi33-cat-icon-svg,
.oi33-cat-ico .oi33-food-svg { display: block; }
.oi33-cat-ico.is-primary {
color: var(--oi33-gold-ink);
border-color: rgba(224, 169, 42, .45);
background: rgba(255, 214, 106, .16);
}
.oi33-cat-ico.is-primary:hover { background: rgba(255, 214, 106, .30); }
.theme--dark .oi33-cat-ico,
[data-mantine-color-scheme=dark] .oi33-cat-ico { color: #a9b7cc; }
.theme--dark .oi33-cat-ico:hover,
[data-mantine-color-scheme=dark] .oi33-cat-ico:hover { background: rgba(255, 255, 255, .10); color: #ffd66a; }
/* ② 状态浮层挪到【左上】,把右上让给自动喂养角标
⚠️ 必须写 right:auto —— 真 CSS 里是 right:8px,只加 left 会把元素拉满整宽,
它的 backdrop-filter 还会把底下(含角标)整片糊掉(做预览时踩过)。 */
.oi33-cat-stats { left: 8px; right: auto; }
/* ③ 自动喂养角标:只在开启时出现,关着时零占位;本身就是个按钮,点了开设置 */
.oi33-cat-badge {
position: absolute; top: 8px; right: 8px; z-index: 4;
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px; border-radius: 99px; cursor: pointer;
font: inherit; font-size: 11.5px; font-weight: 700; line-height: 1.5;
color: #5c3d06; background: #f6d472; border: 1px solid #d9a91f;
box-shadow: 0 1px 3px rgba(0, 0, 0, .16);
transition: background .15s;
}
.oi33-cat-badge i {
width: 6px; height: 6px; border-radius: 50%; flex: none;
background: #2d9e4f; box-shadow: 0 0 0 2px rgba(45, 158, 79, .22);
}
.oi33-cat-badge:hover { background: #f9de8e; }
.oi33-cat-badge:active { transform: translateY(1px); }
/* ④ 消息行:左边是猫当下在干嘛(setMessage 实时改),右边是养成进度 —— 一行装两件事 */
.oi33-cat-message {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; flex-wrap: wrap;
}
.oi33-cat-message__say { flex: 1 1 auto; min-width: 0; }
.oi33-cat-message__prog {
flex: none; font-size: 11.5px; color: var(--oi33-muted);
white-space: nowrap;
}
.oi33-cat-message__prog b { color: var(--oi33-gold-ink); }
.oi33-cat-message__prog.is-auto { color: var(--oi33-gold-ink); }
.oi33-cat-message__prog.is-max { color: #2d9e4f; }
/* 摸猫高亮态原来是 width:fit-content,和 flex 打架 —— 改成只染左边那句 */
.oi33-cat-message.is-petting {
width: auto; padding: 0; background: none;
}
.oi33-cat-message.is-petting .oi33-cat-message__say {
background: rgba(255, 107, 129, .12); border-radius: 8px;
padding: 2px 10px; color: #c2557a; width: fit-content;
}
.theme--dark .oi33-cat-message.is-petting .oi33-cat-message__say,
[data-mantine-color-scheme=dark] .oi33-cat-message.is-petting .oi33-cat-message__say {
background: rgba(255, 120, 145, .18); color: #f2a0b3;
}
/* ⑤ 猫事件气泡:浮到舞台右下(它本来就是气泡形态,不再另起一行) */
.oi33-cat-event {
position: absolute; right: 10px; bottom: 10px; left: auto;
z-index: 4; margin: 0; max-width: 74%;
pointer-events: none;
}
.oi33-cat-event__bubble {
max-width: 100%; padding: 6px 12px 6px 28px;
font-size: 12.5px; border-radius: 99px;
box-shadow: 0 2px 10px rgba(30, 60, 120, .14);
}
/* ⑥ 设置弹层(自动喂养 + 随机换装 + 账户明细) */
.oi33-cat-settings-card { max-width: 430px; }
.oi33-cat-settings__act { display: block; }
/* v93 猫名归到【左上角那一列】,排在状态浮层正下方。
之前试过居中:舞台顶部正中是"留白区",塞个名牌进去既像页面标题、又和猫分离,长名字还往两边顶。
★ 关键是用【通用兄弟选择器】自动让位 —— 不用改 DOM 顺序,也不要两套模板:
· 本人页 → 状态浮层渲染了 → 名字下移,排在它下面
· 老师看学生 → 状态浮层【不渲染】(它只对本人出) → 选择器不匹配 → 名字自动落回最上面
⚠️ 必须用 `~` 而不是 `+`:中间可能夹着「自动喂养角标」,用相邻兄弟的话一开自动喂养名字就会跳回顶上。 */
.oi33-cat-name {
left: 10px;
right: auto;
transform: none;
max-width: calc(100% - 118px); /* 右侧给自动喂养角标留位(≈92px + 间距) */
min-width: 0;
}
.oi33-cat-stats ~ .oi33-cat-name { top: 58px; }