yangxiangyuan
6dc79a2c12
- 私人剪贴板新增限时直通URL生成功能 - doc_cloud_keeper新增标题复制按钮 - 新增贪蛇出动游戏工具 - 新增OSS中转直链工具 - 添加批量抽帧测试脚本
123 lines
4.1 KiB
CSS
123 lines
4.1 KiB
CSS
/* OSS中转直链 oss_browser_link 样式 */
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
html, body { height: 100%; }
|
|
body {
|
|
font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
|
|
background: linear-gradient(160deg, #10162e 0%, #1a2450 60%, #10162e 100%);
|
|
color: #e8ecff;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
|
|
}
|
|
#obl-root { width: 100%; max-width: 640px; }
|
|
|
|
#obl-header h1 { font-size: 24px; letter-spacing: 1px; }
|
|
#obl-sub { color: #8f9ac8; font-size: 13px; margin-top: 6px; }
|
|
|
|
#obl-file-card {
|
|
display: flex; align-items: center; gap: 14px;
|
|
background: rgba(255,255,255,.06);
|
|
border: 1px solid rgba(255,255,255,.1);
|
|
border-radius: 14px;
|
|
padding: 18px;
|
|
margin-top: 20px;
|
|
}
|
|
#obl-file-icon { font-size: 40px; }
|
|
#obl-file-info { flex: 1; min-width: 0; }
|
|
#obl-file-name { font-weight: 600; font-size: 15px; word-break: break-all; }
|
|
#obl-file-meta { color: #8f9ac8; font-size: 12px; margin-top: 5px; }
|
|
.obl-status {
|
|
font-size: 12px; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
|
|
background: rgba(255,255,255,.1); color: #aab4e0;
|
|
}
|
|
.obl-status.ok { background: rgba(46,204,113,.16); color: #4be08a; }
|
|
.obl-status.miss { background: rgba(255,120,120,.16); color: #ff8f8f; }
|
|
|
|
#obl-link-row { display: flex; gap: 8px; margin-top: 14px; }
|
|
#obl-link-input {
|
|
flex: 1; min-width: 0;
|
|
background: rgba(0,0,0,.3);
|
|
border: 1px solid rgba(255,255,255,.14);
|
|
border-radius: 10px;
|
|
color: #b9c3ef;
|
|
font-size: 12px;
|
|
padding: 10px 12px;
|
|
outline: none;
|
|
}
|
|
|
|
.obl-btn {
|
|
border: none; border-radius: 10px; cursor: pointer;
|
|
font-size: 14px; padding: 12px 16px; color: #fff;
|
|
transition: opacity .15s, transform .05s;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
.obl-btn:active { transform: scale(.97); }
|
|
.obl-btn:disabled { opacity: .5; cursor: not-allowed; }
|
|
.obl-btn.primary { background: linear-gradient(135deg, #3d7bff, #5a4dff); }
|
|
.obl-btn.green { background: linear-gradient(135deg, #20b26a, #17a05e); }
|
|
.obl-btn.ghost {
|
|
background: transparent; color: #aab4e0;
|
|
border: 1px solid rgba(255,255,255,.22);
|
|
}
|
|
|
|
#obl-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
|
|
#obl-link-row .obl-btn { white-space: nowrap; }
|
|
|
|
#obl-steps {
|
|
margin-top: 22px;
|
|
background: rgba(255,255,255,.04);
|
|
border: 1px solid rgba(255,255,255,.08);
|
|
border-radius: 14px;
|
|
padding: 16px 18px;
|
|
}
|
|
#obl-steps h2 { font-size: 15px; margin-bottom: 10px; color: #cfd7ff; }
|
|
#obl-steps ol { padding-left: 20px; }
|
|
#obl-steps li { font-size: 13px; color: #9aa5d2; line-height: 1.9; }
|
|
#obl-steps code {
|
|
background: rgba(0,0,0,.35); padding: 1px 6px; border-radius: 5px;
|
|
font-size: 12px; color: #7fd0ff;
|
|
}
|
|
|
|
/* Toast */
|
|
#obl-toast {
|
|
position: fixed; left: 50%; top: 18%; transform: translateX(-50%);
|
|
background: #2d3a6e; color: #fff; font-size: 14px;
|
|
padding: 10px 18px; border-radius: 10px; z-index: 60;
|
|
box-shadow: 0 6px 24px rgba(0,0,0,.4);
|
|
max-width: 86vw;
|
|
}
|
|
#obl-toast.success { background: #1d9e58; }
|
|
#obl-toast.error { background: #d84a4a; }
|
|
|
|
/* 交互详情弹窗（双模式） */
|
|
#obl-dialog {
|
|
position: fixed; inset: 0; background: rgba(0,0,0,.55);
|
|
display: flex; align-items: center; justify-content: center;
|
|
z-index: 100; padding: 20px;
|
|
}
|
|
#obl-dialog-box {
|
|
width: 100%; max-width: 560px; max-height: 78vh;
|
|
background: #182047; border: 1px solid rgba(255,255,255,.14);
|
|
border-radius: 14px; display: flex; flex-direction: column;
|
|
}
|
|
#obl-dialog-head {
|
|
display: flex; align-items: center; gap: 10px;
|
|
padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.1);
|
|
}
|
|
#obl-dialog-title { flex: 1; font-size: 14px; font-weight: 600; }
|
|
#obl-dialog-head button {
|
|
background: rgba(255,255,255,.1); border: none; color: #dfe5ff;
|
|
border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: 13px;
|
|
}
|
|
#obl-dialog-body {
|
|
padding: 12px 14px; overflow: auto; flex: 1;
|
|
font-size: 12px; line-height: 1.7; color: #b9c3ef; white-space: pre-wrap; word-break: break-all;
|
|
}
|
|
.obl-hidden { display: none !important; }
|
|
|
|
@media (min-width: 720px) {
|
|
#obl-actions { flex-direction: row; flex-wrap: wrap; }
|
|
#obl-actions .obl-btn { flex: 1; }
|
|
}
|