feat: add responsive react workbench
This commit is contained in:
gqt
@@ -0,0 +1,91 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
font-family: "Avenir Next", "PingFang SC", sans-serif;
|
||||
color: #25352f;
|
||||
background: #e9eeeb;
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
--ink: #20342d;
|
||||
--forest: #1f332c;
|
||||
--forest-2: #2b473e;
|
||||
--moss: #70897e;
|
||||
--paper: #f8f7f2;
|
||||
--paper-2: #efeee8;
|
||||
--line: #d5dcd8;
|
||||
--ember: #d6784d;
|
||||
--ember-dark: #a95434;
|
||||
--danger: #a4433c;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
body { margin: 0; min-width: 320px; min-height: 100vh; background: #e9eeeb; }
|
||||
button, input, textarea { font: inherit; }
|
||||
button, a { -webkit-tap-highlight-color: transparent; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
|
||||
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
|
||||
.eyebrow { margin: 0; font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ember-dark); }
|
||||
|
||||
.app-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
|
||||
.sidebar { position: sticky; top: 0; height: 100vh; padding: 22px 16px 18px; color: #edf3ef; background: var(--forest); display: flex; flex-direction: column; overflow: hidden; }
|
||||
.sidebar::after { content: ""; position: absolute; inset: auto -80px -100px auto; width: 220px; height: 220px; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; box-shadow: 0 0 0 34px rgba(255,255,255,.025), 0 0 0 68px rgba(255,255,255,.018); pointer-events: none; }
|
||||
.brand-lockup { display: flex; align-items: center; gap: 11px; padding: 0 4px 22px; border-bottom: 1px solid rgba(255,255,255,.1); }
|
||||
.brand-lockup__mark { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; color: white; background: var(--ember); border-radius: 9px 9px 3px 9px; font-family: Georgia, serif; font-size: 1.05rem; box-shadow: 0 7px 18px rgba(0,0,0,.16); }
|
||||
.brand-lockup strong { display: block; font-size: .74rem; letter-spacing: .13em; }
|
||||
.brand-lockup small { display: block; margin-top: 2px; color: #99ada5; font-size: .58rem; letter-spacing: .06em; }
|
||||
.nav-label { margin: 26px 8px 10px; color: #82988f; font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
|
||||
.primary-nav { display: grid; gap: 6px; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 8px; color: #bdcbc6; font-size: .85rem; transition: color .18s ease, background .18s ease, transform .18s ease; }
|
||||
.nav-item:hover { color: white; background: rgba(255,255,255,.06); transform: translateX(2px); }
|
||||
.nav-item--active { color: white; background: var(--forest-2); box-shadow: inset 3px 0 var(--ember); }
|
||||
.sidebar-note { display: flex; gap: 9px; margin-top: auto; padding: 12px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; background: rgba(0,0,0,.08); position: relative; z-index: 1; }
|
||||
.status-dot { width: 7px; height: 7px; margin-top: 4px; flex: none; border-radius: 50%; background: #8ccba8; box-shadow: 0 0 0 4px rgba(140,203,168,.12); }
|
||||
.sidebar-note strong, .sidebar-note small { display: block; }
|
||||
.sidebar-note strong { font-size: .68rem; }
|
||||
.sidebar-note small { margin-top: 3px; color: #91a69e; font-size: .59rem; line-height: 1.45; }
|
||||
.sidebar-version { position: relative; z-index: 1; margin: 14px 8px 0; color: #627b71; font-size: .56rem; letter-spacing: .12em; }
|
||||
.route-canvas { min-width: 0; min-height: 100vh; background: radial-gradient(circle at 90% 5%, rgba(214,120,77,.08), transparent 22%), var(--paper); }
|
||||
.mobile-header { display: none; }
|
||||
|
||||
.placeholder-page { min-height: 100vh; display: grid; place-content: center; justify-items: center; padding: 40px; text-align: center; animation: page-enter .45s ease both; }
|
||||
.placeholder-page__mark { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 24px; color: var(--ember); border: 1px solid #d8c6bb; border-radius: 50%; background: rgba(255,255,255,.62); box-shadow: 0 15px 45px rgba(41,57,51,.08); }
|
||||
.placeholder-page h1 { margin: 10px 0 8px; font-family: "Songti SC", Georgia, serif; font-size: clamp(2rem, 4vw, 3.8rem); font-weight: 600; letter-spacing: -.05em; }
|
||||
.placeholder-page > p:last-child { margin: 0; color: #77847f; }
|
||||
|
||||
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 8px; cursor: pointer; font-weight: 650; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
|
||||
.button:focus-visible { outline: 3px solid rgba(214,120,77,.3); outline-offset: 2px; }
|
||||
.button:disabled { opacity: .52; cursor: not-allowed; }
|
||||
.button:not(:disabled):active { transform: translateY(1px); }
|
||||
.button--md { min-height: 38px; padding: 0 14px; font-size: .8rem; }
|
||||
.button--sm { min-height: 31px; padding: 0 10px; font-size: .72rem; }
|
||||
.button--icon { width: 38px; height: 38px; padding: 0; }
|
||||
.button--primary { color: white; background: var(--ember); box-shadow: 0 7px 18px rgba(166,79,48,.19); }
|
||||
.button--primary:hover { background: #c9673f; }
|
||||
.button--secondary { color: var(--ink); background: white; border: 1px solid var(--line); }
|
||||
.button--ghost { color: inherit; background: transparent; }
|
||||
.button--ghost:hover { background: rgba(72,94,85,.08); }
|
||||
.button--danger { color: white; background: var(--danger); }
|
||||
.badge { display: inline-flex; align-items: center; gap: 5px; min-height: 23px; padding: 0 8px; border-radius: 999px; background: var(--paper-2); color: #5b6b65; font-size: .66rem; font-weight: 700; }
|
||||
|
||||
.dialog-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(13,24,20,.48); backdrop-filter: blur(4px); animation: fade-in .2s ease; }
|
||||
.mobile-menu { position: fixed; inset: 0 auto 0 0; z-index: 51; width: min(310px, 88vw); padding: 22px 16px; color: #edf3ef; background: var(--forest); box-shadow: 24px 0 80px rgba(0,0,0,.3); animation: slide-in .25s ease; }
|
||||
.mobile-menu__close { position: absolute; top: 12px; right: 10px; z-index: 2; }
|
||||
|
||||
@keyframes page-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
|
||||
@keyframes fade-in { from { opacity: 0; } }
|
||||
@keyframes slide-in { from { transform: translateX(-100%); } }
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.app-shell { display: block; padding-top: 58px; }
|
||||
.sidebar { display: none; }
|
||||
.mobile-header { position: fixed; inset: 0 0 auto; z-index: 40; height: 58px; padding: 0 14px; display: flex; align-items: center; gap: 9px; color: #edf3ef; background: var(--forest); box-shadow: 0 4px 20px rgba(25,45,37,.18); }
|
||||
.mobile-header .brand-lockup__mark { width: 29px; height: 29px; }
|
||||
.mobile-header strong { font-size: .7rem; letter-spacing: .1em; }
|
||||
.mobile-header > :last-child { margin-left: auto; }
|
||||
.route-canvas { min-height: calc(100vh - 58px); }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
|
||||
}
|
||||
Reference in New Issue
Block a user