1 changed files with 168 additions and 228 deletions
@ -1,300 +1,240 @@ |
|||||||
/* ===== OTB shared branding ===== */ |
/* ===== OTB shared theme system ===== */ |
||||||
html[data-theme="dark"]{ |
|
||||||
--otb-bg:#081225; |
:root{ |
||||||
--otb-bg2:#09172d; |
--otb-bg-main:#050b19; |
||||||
--otb-text:#e8eefc; |
--otb-bg-grad-1:#1f2a57; |
||||||
--otb-muted:#aab6d6; |
--otb-bg-grad-2:#08111f; |
||||||
--otb-panel:rgba(18,24,37,.98); |
--otb-bg-grad-3:#143c2d; |
||||||
--otb-panel-soft:rgba(18,24,37,.78); |
--otb-panel:#0b1330; |
||||||
--otb-line:rgba(255,255,255,.08); |
--otb-text:#f1f5ff; |
||||||
|
--otb-muted:#c5cde4; |
||||||
|
--otb-link:#9fd2ff; |
||||||
|
--otb-accent:#62f0cf; |
||||||
|
--otb-border:rgba(255,255,255,0.08); |
||||||
|
--otb-shadow:0 16px 40px rgba(0,0,0,0.28); |
||||||
} |
} |
||||||
|
|
||||||
html[data-theme="light"]{ |
html[data-theme="light"]{ |
||||||
--otb-bg:#f4f7fb; |
--otb-bg-main:#eef3fb; |
||||||
--otb-bg2:#eef3f9; |
--otb-bg-grad-1:#f7f9fd; |
||||||
--otb-text:#0f172a; |
--otb-bg-grad-2:#edf3fb; |
||||||
--otb-muted:#475569; |
--otb-bg-grad-3:#e7f2ec; |
||||||
--otb-panel:rgba(255,255,255,.98); |
--otb-panel:#ffffff; |
||||||
--otb-panel-soft:rgba(255,255,255,.88); |
--otb-text:#172033; |
||||||
--otb-line:rgba(15,23,42,.10); |
--otb-muted:#55627c; |
||||||
|
--otb-link:#0b63ce; |
||||||
|
--otb-accent:#0e8f73; |
||||||
|
--otb-border:rgba(18,32,60,0.10); |
||||||
|
--otb-shadow:0 10px 28px rgba(16,24,40,0.08); |
||||||
} |
} |
||||||
|
|
||||||
body{ |
html, body{ |
||||||
padding-bottom:56px; |
background: |
||||||
|
linear-gradient(90deg, var(--otb-bg-grad-1) 0%, var(--otb-bg-grad-2) 48%, var(--otb-bg-grad-3) 100%), |
||||||
|
var(--otb-bg-main) !important; |
||||||
|
color:var(--otb-text) !important; |
||||||
} |
} |
||||||
|
|
||||||
.site-container{ |
a{ color:var(--otb-link); } |
||||||
max-width:1100px; |
|
||||||
margin:0 auto; |
.site-header{ background:transparent; } |
||||||
padding:20px 18px 0 18px; |
|
||||||
|
.site-brand strong, |
||||||
|
.site-navlinks > a, |
||||||
|
.dropdown-toggle, |
||||||
|
.site-title strong, |
||||||
|
.site-title span{ |
||||||
|
color:var(--otb-text) !important; |
||||||
|
} |
||||||
|
|
||||||
|
.site-title span, |
||||||
|
.small, |
||||||
|
.lead, |
||||||
|
.sub, |
||||||
|
.portal-sub, |
||||||
|
.portal-note, |
||||||
|
.muted{ |
||||||
|
color:var(--otb-muted) !important; |
||||||
|
} |
||||||
|
|
||||||
|
.card, |
||||||
|
.heroCard, |
||||||
|
.sideCard, |
||||||
|
.feature, |
||||||
|
.portal-card, |
||||||
|
.detail-card, |
||||||
|
.pay-card, |
||||||
|
.snapshot-wrap, |
||||||
|
.note, |
||||||
|
.tableWrap{ |
||||||
|
background:var(--otb-panel) !important; |
||||||
|
border:1px solid var(--otb-border) !important; |
||||||
|
color:var(--otb-text) !important; |
||||||
|
box-shadow:var(--otb-shadow); |
||||||
} |
} |
||||||
|
|
||||||
.site-header{ |
.dropdown-menu{ |
||||||
width:100%; |
background:var(--otb-panel) !important; |
||||||
|
border:1px solid var(--otb-border) !important; |
||||||
|
box-shadow:var(--otb-shadow); |
||||||
} |
} |
||||||
|
|
||||||
.site-nav{ |
.dropdown-menu a{ |
||||||
display:flex; |
color:var(--otb-text) !important; |
||||||
align-items:center; |
|
||||||
justify-content:space-between; |
|
||||||
gap:18px; |
|
||||||
padding:12px 0 22px 0; |
|
||||||
} |
} |
||||||
|
|
||||||
.site-brand{ |
input, |
||||||
display:flex; |
select, |
||||||
align-items:center; |
textarea{ |
||||||
gap:14px; |
background:rgba(255,255,255,0.06) !important; |
||||||
text-decoration:none; |
color:var(--otb-text) !important; |
||||||
color:inherit; |
border:1px solid var(--otb-border) !important; |
||||||
} |
} |
||||||
|
|
||||||
.site-brand img{ |
html[data-theme="light"] input, |
||||||
height:60px; |
html[data-theme="light"] select, |
||||||
width:auto; |
html[data-theme="light"] textarea{ |
||||||
display:block; |
background:#f6f8fc !important; |
||||||
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{ |
::placeholder{ |
||||||
display:flex; |
color:var(--otb-muted); |
||||||
flex-direction:column; |
opacity:0.85; |
||||||
line-height:1.1; |
|
||||||
} |
} |
||||||
|
|
||||||
.site-title strong{ |
.btn, |
||||||
letter-spacing:.2px; |
.portal-btn{ |
||||||
color:var(--otb-text); |
border:1px solid var(--otb-border) !important; |
||||||
} |
} |
||||||
|
|
||||||
.site-title span{ |
.otb-statusbar{ |
||||||
color:var(--otb-muted); |
background:#0b1326 !important; |
||||||
font-size:13px; |
border-top:1px solid rgba(255,255,255,0.06); |
||||||
margin-top:2px; |
|
||||||
} |
} |
||||||
|
|
||||||
.site-nav-right{ |
.otb-statusbar-inner{ |
||||||
|
max-width:1200px; |
||||||
|
margin:0 auto; |
||||||
|
padding:10px 18px; |
||||||
|
color:#f3f7ff; |
||||||
display:flex; |
display:flex; |
||||||
|
justify-content:center; |
||||||
align-items:center; |
align-items:center; |
||||||
gap:14px; |
gap:10px; |
||||||
flex-wrap:wrap; |
flex-wrap:wrap; |
||||||
justify-content:flex-end; |
font-size:13px; |
||||||
|
line-height:1.4; |
||||||
} |
} |
||||||
|
|
||||||
.site-navlinks{ |
.otb-statusbar strong{ color:#f8fbff; } |
||||||
display:flex; |
|
||||||
gap:12px; |
|
||||||
flex-wrap:wrap; |
|
||||||
justify-content:flex-end; |
|
||||||
align-items:center; |
|
||||||
} |
|
||||||
|
|
||||||
.site-navlinks > a, |
.otb-statusbar a{ |
||||||
.dropdown-toggle{ |
color:#62f0cf !important; |
||||||
text-decoration:none; |
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{ |
.otb-dot{ |
||||||
position:relative; |
width:4px; |
||||||
|
height:4px; |
||||||
|
border-radius:50%; |
||||||
|
background:rgba(255,255,255,0.25); |
||||||
display:inline-block; |
display:inline-block; |
||||||
} |
} |
||||||
|
|
||||||
.dropdown-toggle{ |
html[data-theme="light"] .otb-statusbar{ |
||||||
display:inline-block; |
background:#edf2fb !important; |
||||||
cursor:pointer; |
border-top:1px solid rgba(18,32,60,0.08); |
||||||
} |
} |
||||||
|
|
||||||
.dropdown-menu{ |
html[data-theme="light"] .otb-statusbar-inner{ |
||||||
position:absolute; |
color:#23314a; |
||||||
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, |
html[data-theme="light"] .otb-statusbar strong{ |
||||||
.dropdown:focus-within .dropdown-menu{ |
color:#16233a; |
||||||
display:block; |
|
||||||
} |
} |
||||||
|
|
||||||
.dropdown-menu a{ |
html[data-theme="light"] .otb-dot{ |
||||||
display:block; |
background:rgba(23,32,51,0.22); |
||||||
padding:9px 10px; |
|
||||||
border-radius:10px; |
|
||||||
color:var(--otb-muted); |
|
||||||
text-decoration:none; |
|
||||||
white-space:nowrap; |
|
||||||
margin:0; |
|
||||||
} |
} |
||||||
|
|
||||||
.dropdown-menu a + a{ |
.portal-shell, |
||||||
margin-top:4px; |
.portal-wrap{ |
||||||
|
max-width:1200px; |
||||||
|
margin:0 auto; |
||||||
|
padding:32px 20px 72px; |
||||||
} |
} |
||||||
|
|
||||||
.dropdown-menu a:hover{ |
.portal-card{ |
||||||
color:var(--otb-text); |
max-width:760px; |
||||||
background:rgba(255,255,255,.04); |
margin:0 auto; |
||||||
} |
} |
||||||
|
|
||||||
.otb-theme-switch{ |
@media (max-width: 900px){ |
||||||
position:relative; |
.site-container, |
||||||
display:inline-block; |
.container{ |
||||||
width:54px; |
padding-left:16px !important; |
||||||
height:30px; |
padding-right:16px !important; |
||||||
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{ |
.site-nav{ |
||||||
transform:translateX(24px); |
display:flex; |
||||||
|
flex-direction:column; |
||||||
|
align-items:flex-start; |
||||||
|
gap:14px; |
||||||
} |
} |
||||||
|
|
||||||
.otb-statusbar{ |
.site-nav-right{ |
||||||
position:fixed; |
width:100%; |
||||||
left:0; |
|
||||||
right:0; |
|
||||||
bottom:0; |
|
||||||
z-index:9999; |
|
||||||
display:flex; |
display:flex; |
||||||
align-items:center; |
flex-direction:column; |
||||||
justify-content:center; |
align-items:flex-start; |
||||||
min-height:42px; |
gap:12px; |
||||||
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{ |
.site-navlinks{ |
||||||
width:100%; |
width:100%; |
||||||
max-width:1100px; |
|
||||||
display:flex; |
display:flex; |
||||||
gap:10px; |
|
||||||
align-items:center; |
|
||||||
justify-content:center; |
|
||||||
flex-wrap:wrap; |
flex-wrap:wrap; |
||||||
text-align:center; |
gap:10px 16px; |
||||||
color:var(--otb-muted); |
align-items:center; |
||||||
font-size:12px; |
|
||||||
line-height:1.35; |
|
||||||
} |
} |
||||||
|
|
||||||
.otb-statusbar strong{ |
.dropdown-menu{ |
||||||
color:var(--otb-text); |
min-width:220px; |
||||||
font-weight:700; |
|
||||||
} |
} |
||||||
|
|
||||||
.otb-statusbar a{ |
.portal-shell, |
||||||
color:#62e6b7; |
.portal-wrap{ |
||||||
text-decoration:none; |
padding:24px 16px 64px; |
||||||
font-weight:600; |
|
||||||
} |
} |
||||||
|
|
||||||
.otb-statusbar a:hover{ |
|
||||||
text-decoration:underline; |
|
||||||
} |
} |
||||||
|
|
||||||
.otb-dot{ |
@media (max-width: 640px){ |
||||||
width:6px; |
.site-brand img{ |
||||||
height:6px; |
width:48px; |
||||||
border-radius:999px; |
height:48px; |
||||||
display:inline-block; |
|
||||||
background:rgba(255,255,255,.25); |
|
||||||
flex:0 0 auto; |
|
||||||
} |
} |
||||||
|
|
||||||
@media (max-width: 900px){ |
.site-title strong{ |
||||||
.site-nav{ |
font-size:20px; |
||||||
align-items:flex-start; |
|
||||||
flex-direction:column; |
|
||||||
} |
} |
||||||
|
|
||||||
.site-nav-right{ |
.site-title span{ |
||||||
width:100%; |
font-size:13px; |
||||||
justify-content:space-between; |
|
||||||
} |
} |
||||||
|
|
||||||
.site-navlinks{ |
.site-navlinks{ |
||||||
justify-content:flex-start; |
gap:8px 14px; |
||||||
} |
|
||||||
|
|
||||||
.dropdown{ |
|
||||||
width:100%; |
|
||||||
} |
} |
||||||
|
|
||||||
.dropdown-toggle{ |
.otb-statusbar-inner{ |
||||||
width:100%; |
font-size:12px; |
||||||
} |
gap:8px; |
||||||
|
padding:10px 12px; |
||||||
.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{ |
.portal-card{ |
||||||
font-size:11px; |
max-width:100%; |
||||||
line-height:1.25; |
|
||||||
} |
} |
||||||
} |
} |
||||||
|
|||||||
Loading…
Reference in new issue