You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
693 lines
12 KiB
693 lines
12 KiB
/* ===== OTB shared branding ===== */ |
|
html[data-theme="dark"]{ |
|
--otb-bg:#081225; |
|
--otb-bg2:#09172d; |
|
--otb-text:#e8eefc; |
|
--otb-muted:#aab6d6; |
|
--otb-panel:rgba(18,24,37,.98); |
|
--otb-panel-soft:rgba(18,24,37,.78); |
|
--otb-line:rgba(255,255,255,.08); |
|
} |
|
|
|
html[data-theme="light"]{ |
|
--otb-bg:#f4f7fb; |
|
--otb-bg2:#eef3f9; |
|
--otb-text:#0f172a; |
|
--otb-muted:#475569; |
|
--otb-panel:rgba(255,255,255,.98); |
|
--otb-panel-soft:rgba(255,255,255,.88); |
|
--otb-line:rgba(15,23,42,.10); |
|
} |
|
|
|
body{ |
|
padding-bottom:56px; |
|
} |
|
|
|
.site-container{ |
|
max-width:1100px; |
|
margin:0 auto; |
|
padding:20px 18px 0 18px; |
|
} |
|
|
|
.site-header{ |
|
width:100%; |
|
} |
|
|
|
.site-nav{ |
|
display:flex; |
|
align-items:center; |
|
justify-content:space-between; |
|
gap:18px; |
|
padding:12px 0 22px 0; |
|
} |
|
|
|
.site-brand{ |
|
display:flex; |
|
align-items:center; |
|
gap:14px; |
|
text-decoration:none; |
|
color:inherit; |
|
} |
|
|
|
.site-brand img{ |
|
height:60px; |
|
width:auto; |
|
display:block; |
|
object-fit:contain; |
|
background:rgba(255,255,255,0.92); |
|
padding:6px 12px; |
|
border-radius:999px; |
|
box-shadow:0 8px 24px rgba(0,0,0,0.35); |
|
} |
|
|
|
.site-title{ |
|
display:flex; |
|
flex-direction:column; |
|
line-height:1.1; |
|
} |
|
|
|
.site-title strong{ |
|
letter-spacing:.2px; |
|
color:var(--otb-text); |
|
} |
|
|
|
.site-title span{ |
|
color:var(--otb-muted); |
|
font-size:13px; |
|
margin-top:2px; |
|
} |
|
|
|
.site-nav-right{ |
|
display:flex; |
|
align-items:center; |
|
gap:14px; |
|
flex-wrap:wrap; |
|
justify-content:flex-end; |
|
} |
|
|
|
.site-navlinks{ |
|
display:flex; |
|
gap:12px; |
|
flex-wrap:wrap; |
|
justify-content:flex-end; |
|
align-items:center; |
|
} |
|
|
|
.site-navlinks > a, |
|
.dropdown-toggle{ |
|
text-decoration:none; |
|
padding:8px 10px; |
|
border-radius:12px; |
|
color:var(--otb-muted); |
|
border:1px solid transparent; |
|
} |
|
|
|
.site-navlinks > a:hover, |
|
.dropdown-toggle:hover{ |
|
color:var(--otb-text); |
|
border-color:var(--otb-line); |
|
background:rgba(255,255,255,.03); |
|
} |
|
|
|
.dropdown{ |
|
position:relative; |
|
display:inline-block; |
|
} |
|
|
|
.dropdown-toggle{ |
|
display:inline-block; |
|
cursor:pointer; |
|
} |
|
|
|
.dropdown-menu{ |
|
position:absolute; |
|
top:calc(100% + 8px); |
|
right:0; |
|
min-width:220px; |
|
display:none; |
|
padding:10px; |
|
border-radius:14px; |
|
background:var(--otb-panel); |
|
border:1px solid var(--otb-line); |
|
box-shadow:0 16px 40px rgba(0,0,0,.35); |
|
z-index:9999; |
|
} |
|
|
|
.dropdown:hover .dropdown-menu, |
|
.dropdown:focus-within .dropdown-menu{ |
|
display:block; |
|
} |
|
|
|
.dropdown-menu a{ |
|
display:block; |
|
padding:9px 10px; |
|
border-radius:10px; |
|
color:var(--otb-muted); |
|
text-decoration:none; |
|
white-space:nowrap; |
|
margin:0; |
|
} |
|
|
|
.dropdown-menu a + a{ |
|
margin-top:4px; |
|
} |
|
|
|
.dropdown-menu a:hover{ |
|
color:var(--otb-text); |
|
background:rgba(255,255,255,.04); |
|
} |
|
|
|
.otb-theme-switch{ |
|
position:relative; |
|
display:inline-block; |
|
width:54px; |
|
height:30px; |
|
flex:0 0 auto; |
|
} |
|
|
|
.otb-theme-switch input{ |
|
opacity:0; |
|
width:0; |
|
height:0; |
|
} |
|
|
|
.otb-theme-slider{ |
|
position:absolute; |
|
inset:0; |
|
cursor:pointer; |
|
background:rgba(255,255,255,.10); |
|
border:1px solid var(--otb-line); |
|
transition:.2s; |
|
border-radius:999px; |
|
} |
|
|
|
.otb-theme-slider:before{ |
|
content:""; |
|
position:absolute; |
|
height:22px; |
|
width:22px; |
|
left:3px; |
|
top:3px; |
|
background:var(--otb-text); |
|
transition:.2s; |
|
border-radius:50%; |
|
} |
|
|
|
.otb-theme-switch input:checked + .otb-theme-slider:before{ |
|
transform:translateX(24px); |
|
} |
|
|
|
.otb-statusbar{ |
|
position:fixed; |
|
left:0; |
|
right:0; |
|
bottom:0; |
|
z-index:9999; |
|
display:flex; |
|
align-items:center; |
|
justify-content:center; |
|
min-height:42px; |
|
padding:8px 14px; |
|
background:var(--otb-panel); |
|
border-top:1px solid var(--otb-line); |
|
backdrop-filter:blur(8px); |
|
box-shadow:0 -8px 24px rgba(0,0,0,.28); |
|
} |
|
|
|
.otb-statusbar-inner{ |
|
width:100%; |
|
max-width:1100px; |
|
display:flex; |
|
gap:10px; |
|
align-items:center; |
|
justify-content:center; |
|
flex-wrap:wrap; |
|
text-align:center; |
|
color:var(--otb-muted); |
|
font-size:12px; |
|
line-height:1.35; |
|
} |
|
|
|
.otb-statusbar strong{ |
|
color:var(--otb-text); |
|
font-weight:700; |
|
} |
|
|
|
.otb-statusbar a{ |
|
color:#62e6b7; |
|
text-decoration:none; |
|
font-weight:600; |
|
} |
|
|
|
.otb-statusbar a:hover{ |
|
text-decoration:underline; |
|
} |
|
|
|
.otb-dot{ |
|
width:6px; |
|
height:6px; |
|
border-radius:999px; |
|
display:inline-block; |
|
background:rgba(255,255,255,.25); |
|
flex:0 0 auto; |
|
} |
|
|
|
@media (max-width: 900px){ |
|
.site-nav{ |
|
align-items:flex-start; |
|
flex-direction:column; |
|
} |
|
|
|
.site-nav-right{ |
|
width:100%; |
|
justify-content:space-between; |
|
} |
|
|
|
.site-navlinks{ |
|
justify-content:flex-start; |
|
} |
|
|
|
.dropdown{ |
|
width:100%; |
|
} |
|
|
|
.dropdown-toggle{ |
|
width:100%; |
|
} |
|
|
|
.dropdown-menu{ |
|
position:static; |
|
right:auto; |
|
top:auto; |
|
min-width:100%; |
|
margin-top:6px; |
|
} |
|
|
|
.site-brand img{ |
|
height:54px; |
|
} |
|
} |
|
|
|
@media (max-width: 700px){ |
|
body{ |
|
padding-bottom:72px; |
|
} |
|
|
|
.otb-statusbar-inner{ |
|
font-size:11px; |
|
line-height:1.25; |
|
} |
|
} |
|
|
|
|
|
:root{ |
|
--bg:#0b0f19; |
|
--card:#101826; |
|
--line:#1c2a40; |
|
--text:#e7eefc; |
|
--muted:#9ab0d1; |
|
--good:#41d17d; |
|
--warn:#ffcc66; |
|
--bad:#ff7676; |
|
|
|
--toggle-off:#1c2a40; |
|
--toggle-on:#2f6fff; |
|
} |
|
|
|
[data-theme="light"]{ |
|
--bg:#f3f6fb; |
|
--card:#ffffff; |
|
--line:#dfe6f2; |
|
--text:#111827; |
|
--muted:#5b6472; |
|
--good:#1f9d55; |
|
--warn:#b26a00; |
|
--bad:#c63d3d; |
|
|
|
--toggle-off:#dfe6f2; |
|
--toggle-on:#2f6fff; |
|
} |
|
|
|
*{box-sizing:border-box} |
|
html,body{height:100%} |
|
body{ |
|
margin:0; |
|
font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial, sans-serif; |
|
background: var(--bg); |
|
color:var(--text); |
|
} |
|
|
|
.wrap{max-width:980px;margin:28px auto;padding:0 16px} |
|
.top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px} |
|
.title{font-size:28px;font-weight:800;letter-spacing:.2px} |
|
.sub{color:var(--muted);margin-top:6px;font-size:13px} |
|
|
|
.top-right{ |
|
display:flex; |
|
align-items:center; |
|
gap:10px; |
|
} |
|
|
|
.status-pill{ |
|
font-size:12px; |
|
font-weight:800; |
|
padding:6px 10px; |
|
border-radius:999px; |
|
border:1px solid rgba(255,255,255,.10); |
|
background: rgba(0,0,0,.18); |
|
} |
|
[data-theme="light"] .status-pill{ |
|
border:1px solid rgba(0,0,0,.10); |
|
background: rgba(255,255,255,.65); |
|
} |
|
|
|
.cycle{ |
|
font-size:12px; |
|
color:var(--muted); |
|
max-width:340px; |
|
white-space:nowrap; |
|
overflow:hidden; |
|
text-overflow:ellipsis; |
|
} |
|
|
|
.card{ |
|
background: var(--card); |
|
border:1px solid rgba(255,255,255,.06); |
|
border-radius:18px; |
|
padding:16px; |
|
box-shadow: 0 18px 70px rgba(0,0,0,.22); |
|
} |
|
|
|
.section-title{ |
|
font-size:14px; |
|
letter-spacing:.12em; |
|
text-transform:uppercase; |
|
color:var(--muted); |
|
margin:8px 6px 10px; |
|
} |
|
|
|
.sep{ |
|
height:1px; |
|
background: rgba(255,255,255,.10); |
|
margin:14px 4px; |
|
} |
|
[data-theme="light"] .sep{ |
|
background: rgba(0,0,0,.10); |
|
} |
|
|
|
.rows{display:flex;flex-direction:column;gap:10px} |
|
|
|
.row{ |
|
display:flex; |
|
align-items:center; |
|
justify-content:space-between; |
|
gap:12px; |
|
padding:10px 10px; |
|
border:1px solid rgba(255,255,255,.06); |
|
border-radius:14px; |
|
background: rgba(0,0,0,.12); |
|
} |
|
[data-theme="light"] .row{ |
|
background: rgba(255,255,255,.55); |
|
border:1px solid rgba(0,0,0,.06); |
|
} |
|
|
|
.left{display:flex;align-items:center;gap:10px;min-width:0} |
|
.ic{ |
|
width:34px;height:34px; |
|
display:flex;align-items:center;justify-content:center; |
|
border-radius:12px; |
|
background: rgba(255,255,255,.06); |
|
border:1px solid rgba(255,255,255,.06); |
|
font-weight:800; |
|
} |
|
[data-theme="light"] .ic{ |
|
background: rgba(0,0,0,.03); |
|
border:1px solid rgba(0,0,0,.06); |
|
} |
|
.mid{min-width:0} |
|
.val{font-size:18px;font-weight:800;letter-spacing:.2px} |
|
.subline{font-size:12px;color:var(--muted);margin-top:2px} |
|
.right{display:flex;align-items:center;justify-content:flex-end} |
|
|
|
canvas.spark{ |
|
width:96px; |
|
height:26px; |
|
display:block; |
|
color: var(--muted); |
|
} |
|
|
|
/* Oracle panel */ |
|
.oracle-panel{ |
|
display:flex; |
|
flex-direction:column; |
|
gap:12px; |
|
} |
|
|
|
.oracle-top{ |
|
display:flex; |
|
justify-content:space-between; |
|
align-items:flex-start; |
|
gap:12px; |
|
} |
|
|
|
.oracle-updated{ |
|
font-size:12px; |
|
color:var(--muted); |
|
} |
|
|
|
.oracle-summary{ |
|
display:flex; |
|
align-items:center; |
|
gap:8px; |
|
} |
|
|
|
.oracle-meta{ |
|
display:grid; |
|
grid-template-columns:repeat(2,minmax(0,1fr)); |
|
gap:10px; |
|
} |
|
|
|
.oracle-meta-item{ |
|
border:1px solid rgba(255,255,255,.06); |
|
border-radius:14px; |
|
padding:10px 12px; |
|
background: rgba(0,0,0,.12); |
|
} |
|
[data-theme="light"] .oracle-meta-item{ |
|
background: rgba(255,255,255,.55); |
|
border:1px solid rgba(0,0,0,.06); |
|
} |
|
|
|
.oracle-meta-label{ |
|
display:block; |
|
font-size:12px; |
|
color:var(--muted); |
|
margin-bottom:4px; |
|
} |
|
|
|
.oracle-meta-value{ |
|
display:block; |
|
font-size:18px; |
|
font-weight:800; |
|
} |
|
|
|
.oracle-assets{ |
|
display:flex; |
|
flex-direction:column; |
|
gap:10px; |
|
} |
|
|
|
.oracle-asset-row{ |
|
display:flex; |
|
justify-content:space-between; |
|
align-items:center; |
|
gap:12px; |
|
padding:10px 12px; |
|
border:1px solid rgba(255,255,255,.06); |
|
border-radius:14px; |
|
background: rgba(0,0,0,.12); |
|
} |
|
[data-theme="light"] .oracle-asset-row{ |
|
background: rgba(255,255,255,.55); |
|
border:1px solid rgba(0,0,0,.06); |
|
} |
|
|
|
.oracle-asset-left{ |
|
min-width:0; |
|
} |
|
|
|
.oracle-asset-key{ |
|
font-size:15px; |
|
font-weight:800; |
|
} |
|
|
|
.oracle-asset-sub{ |
|
font-size:12px; |
|
color:var(--muted); |
|
margin-top:3px; |
|
} |
|
|
|
.oracle-asset-right{ |
|
display:flex; |
|
flex-direction:column; |
|
align-items:flex-end; |
|
gap:6px; |
|
} |
|
|
|
.oracle-badges{ |
|
display:flex; |
|
gap:6px; |
|
flex-wrap:wrap; |
|
justify-content:flex-end; |
|
} |
|
|
|
.oracle-badge{ |
|
display:inline-flex; |
|
align-items:center; |
|
justify-content:center; |
|
font-size:11px; |
|
font-weight:800; |
|
padding:4px 8px; |
|
border-radius:999px; |
|
border:1px solid rgba(255,255,255,.10); |
|
background: rgba(255,255,255,.04); |
|
} |
|
[data-theme="light"] .oracle-badge{ |
|
border:1px solid rgba(0,0,0,.10); |
|
background: rgba(0,0,0,.04); |
|
} |
|
|
|
.badge-fresh{ |
|
color:var(--good); |
|
} |
|
|
|
.badge-stale{ |
|
color:var(--bad); |
|
} |
|
|
|
.badge-billing{ |
|
color:var(--toggle-on); |
|
} |
|
|
|
.oracle-price{ |
|
font-size:14px; |
|
font-weight:800; |
|
} |
|
|
|
/* Theme switch */ |
|
.switch{ |
|
position:relative; |
|
display:inline-block; |
|
width:44px; |
|
height:24px; |
|
} |
|
.switch input{ |
|
opacity:0; |
|
width:0; |
|
height:0; |
|
} |
|
.slider{ |
|
position:absolute; |
|
cursor:pointer; |
|
inset:0; |
|
background: var(--toggle-off); |
|
border:1px solid rgba(255,255,255,.10); |
|
transition: .2s; |
|
border-radius: 999px; |
|
} |
|
[data-theme="light"] .slider{ |
|
border:1px solid rgba(0,0,0,.10); |
|
} |
|
.slider:before{ |
|
position:absolute; |
|
content:""; |
|
height:18px; |
|
width:18px; |
|
left:3px; |
|
top:50%; |
|
transform: translateY(-50%); |
|
background: #fff; |
|
transition: .2s; |
|
border-radius: 50%; |
|
box-shadow: 0 6px 18px rgba(0,0,0,.25); |
|
} |
|
.switch input:checked + .slider{ |
|
background: var(--toggle-on); |
|
} |
|
.switch input:checked + .slider:before{ |
|
transform: translateY(-50%) translateX(20px); |
|
} |
|
|
|
/* Tooltip */ |
|
.spark-tip{ |
|
position:fixed; |
|
z-index:9999; |
|
display:none; |
|
padding:8px 10px; |
|
border-radius:12px; |
|
background: var(--card); |
|
border:1px solid rgba(255,255,255,.08); |
|
color: var(--text); |
|
pointer-events:none; |
|
box-shadow: 0 18px 50px rgba(0,0,0,.35); |
|
} |
|
[data-theme="light"] .spark-tip{ |
|
border:1px solid rgba(0,0,0,.10); |
|
box-shadow: 0 18px 40px rgba(0,0,0,.18); |
|
} |
|
.spark-tip-date{ |
|
font-size:12px; |
|
color: var(--muted); |
|
margin-bottom:2px; |
|
} |
|
.spark-tip-val{ |
|
font-size:13px; |
|
font-weight:900; |
|
} |
|
.spark-tip-vs{ |
|
font-weight:700; |
|
color: var(--toggle-on); |
|
margin-left:4px; |
|
} |
|
|
|
@media (max-width: 720px){ |
|
.top{ |
|
flex-direction:column; |
|
gap:10px; |
|
} |
|
|
|
.top-right{ |
|
width:100%; |
|
justify-content:space-between; |
|
} |
|
|
|
.cycle{ |
|
max-width:220px; |
|
} |
|
|
|
.row, |
|
.oracle-asset-row{ |
|
align-items:flex-start; |
|
flex-direction:column; |
|
} |
|
|
|
.right, |
|
.oracle-asset-right{ |
|
width:100%; |
|
align-items:flex-start; |
|
} |
|
|
|
.oracle-meta{ |
|
grid-template-columns:1fr; |
|
} |
|
} |
|
|
|
.monitor-version-badge { |
|
display: inline-block; |
|
margin-left: 0.55rem; |
|
font-size: 0.85rem; |
|
font-weight: 600; |
|
opacity: 0.72; |
|
vertical-align: middle; |
|
}
|
|
|