def
/
otb-shared-brand
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

v0.3.4 add real light mode and shared responsive theme

main
def 4 weeks ago
parent
95b19e103b
commit
947d392a16
1 changed files with 168 additions and 228 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 396
      brand.css

396
brand.css
Unescape View File

@ -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;
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{ .site-header{ background:transparent; }
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-brand strong,
.site-navlinks > a, .site-navlinks > a,
.dropdown-toggle{ .dropdown-toggle,
text-decoration:none; .site-title strong,
padding:8px 10px; .site-title span{
border-radius:12px; color:var(--otb-text) !important;
color:var(--otb-muted); }
border:1px solid transparent;
} .site-title span,
.small,
.site-navlinks > a:hover, .lead,
.dropdown-toggle:hover{ .sub,
color:var(--otb-text); .portal-sub,
border-color:var(--otb-line); .portal-note,
background:rgba(255,255,255,.03); .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);
} }
.dropdown{ .dropdown-menu{
position:relative; background:var(--otb-panel) !important;
display:inline-block; border:1px solid var(--otb-border) !important;
box-shadow:var(--otb-shadow);
} }
.dropdown-toggle{ .dropdown-menu a{
display:inline-block; color:var(--otb-text) !important;
cursor:pointer;
} }
.dropdown-menu{ input,
position:absolute; select,
top:calc(100% + 8px); textarea{
right:0; background:rgba(255,255,255,0.06) !important;
min-width:220px; color:var(--otb-text) !important;
display:none; border:1px solid var(--otb-border) !important;
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"] input,
.dropdown:focus-within .dropdown-menu{ html[data-theme="light"] select,
display:block; html[data-theme="light"] textarea{
background:#f6f8fc !important;
} }
.dropdown-menu a{ ::placeholder{
display:block;
padding:9px 10px;
border-radius:10px;
color:var(--otb-muted); color:var(--otb-muted);
text-decoration:none; opacity:0.85;
white-space:nowrap;
margin:0;
} }
.dropdown-menu a + a{ .btn,
margin-top:4px; .portal-btn{
border:1px solid var(--otb-border) !important;
} }
.dropdown-menu a:hover{ .otb-statusbar{
color:var(--otb-text); background:#0b1326 !important;
background:rgba(255,255,255,.04); border-top:1px solid rgba(255,255,255,0.06);
} }
.otb-theme-switch{ .otb-statusbar-inner{
position:relative; max-width:1200px;
display:inline-block; margin:0 auto;
width:54px; padding:10px 18px;
height:30px; color:#f3f7ff;
flex:0 0 auto; display:flex;
justify-content:center;
align-items:center;
gap:10px;
flex-wrap:wrap;
font-size:13px;
line-height:1.4;
} }
.otb-theme-switch input{ .otb-statusbar strong{ color:#f8fbff; }
opacity:0;
width:0;
height:0;
}
.otb-theme-slider{ .otb-statusbar a{
position:absolute; color:#62f0cf !important;
inset:0; text-decoration:none;
cursor:pointer;
background:rgba(255,255,255,.10);
border:1px solid var(--otb-line);
transition:.2s;
border-radius:999px;
} }
.otb-theme-slider:before{ .otb-dot{
content:""; width:4px;
position:absolute; height:4px;
height:22px;
width:22px;
left:3px;
top:3px;
background:var(--otb-text);
transition:.2s;
border-radius:50%; border-radius:50%;
background:rgba(255,255,255,0.25);
display:inline-block;
} }
.otb-theme-switch input:checked + .otb-theme-slider:before{ html[data-theme="light"] .otb-statusbar{
transform:translateX(24px); background:#edf2fb !important;
border-top:1px solid rgba(18,32,60,0.08);
} }
.otb-statusbar{ html[data-theme="light"] .otb-statusbar-inner{
position:fixed; color:#23314a;
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{ html[data-theme="light"] .otb-statusbar strong{
color:var(--otb-text); color:#16233a;
font-weight:700;
} }
.otb-statusbar a{ html[data-theme="light"] .otb-dot{
color:#62e6b7; background:rgba(23,32,51,0.22);
text-decoration:none;
font-weight:600;
} }
.otb-statusbar a:hover{ .portal-shell,
text-decoration:underline; .portal-wrap{
max-width:1200px;
margin:0 auto;
padding:32px 20px 72px;
} }
.otb-dot{ .portal-card{
width:6px; max-width:760px;
height:6px; margin:0 auto;
border-radius:999px;
display:inline-block;
background:rgba(255,255,255,.25);
flex:0 0 auto;
} }
@media (max-width: 900px){ @media (max-width: 900px){
.site-container,
.container{
padding-left:16px !important;
padding-right:16px !important;
}
.site-nav{ .site-nav{
align-items:flex-start; display:flex;
flex-direction:column; flex-direction:column;
align-items:flex-start;
gap:14px;
} }
.site-nav-right{ .site-nav-right{
width:100%; width:100%;
justify-content:space-between; display:flex;
flex-direction:column;
align-items:flex-start;
gap:12px;
} }
.site-navlinks{ .site-navlinks{
justify-content:flex-start;
}
.dropdown{
width:100%; width:100%;
display:flex;
flex-wrap:wrap;
gap:10px 16px;
align-items:center;
} }
.dropdown-toggle{ .dropdown-menu{
width:100%; min-width:220px;
} }
.dropdown-menu{ .portal-shell,
position:static; .portal-wrap{
right:auto; padding:24px 16px 64px;
top:auto;
min-width:100%;
margin-top:6px;
} }
}
@media (max-width: 640px){
.site-brand img{ .site-brand img{
height:54px; width:48px;
height:48px;
}
.site-title strong{
font-size:20px;
}
.site-title span{
font-size:13px;
} }
}
@media (max-width: 700px){ .site-navlinks{
body{ gap:8px 14px;
padding-bottom:72px;
} }
.otb-statusbar-inner{ .otb-statusbar-inner{
font-size:11px; font-size:12px;
line-height:1.25; gap:8px;
padding:10px 12px;
}
.portal-card{
max-width:100%;
} }
} }

Write Preview
Loading…
Cancel
Save