krisolo/storyforge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: make storyforge web v4 responsive

Browse Source
This commit is contained in:
kris
2026-03-22 12:15:11 +08:00
parent 9ed5f24364
commit 37709d37b7
1 changed files with 388 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

388
web/storyforge-web-v4/assets/styles.css
View File

@@ -38,6 +38,7 @@ body {
radial-gradient(circle at top left, rgba(129, 180, 255, 0.18), transparent 28%),
linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
color: var(--text);
overflow-x: hidden;
}
a {
@@ -55,6 +56,7 @@ select {
display: grid;
grid-template-columns: 272px minmax(0, 1fr);
min-height: 100vh;
width: 100%;
}
.sidebar {
@@ -65,6 +67,7 @@ select {
position: sticky;
top: 0;
height: 100vh;
overflow: auto;
}
.brand {
@@ -186,6 +189,7 @@ select {
.content {
padding: 18px 22px 26px;
min-width: 0;
}
.topbar {
@@ -206,6 +210,7 @@ select {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.workspace-switch,
@@ -236,6 +241,7 @@ select {
align-items: center;
gap: 10px;
min-width: 340px;
max-width: 100%;
padding: 12px 14px;
color: var(--muted);
}
@@ -482,6 +488,7 @@ select {
.layout-grid {
display: grid;
gap: 18px;
min-width: 0;
}
.grid-4 {
@@ -510,6 +517,7 @@ select {
border-radius: var(--radius-xl);
box-shadow: var(--shadow-soft);
overflow: hidden;
min-width: 0;
}
.panel.pad {
@@ -572,6 +580,7 @@ select {
border-radius: 18px;
border: 1px solid var(--line);
background: linear-gradient(180deg, #fff 0%, #f9fbff 100%);
min-width: 0;
}
.task-item,
@@ -684,6 +693,7 @@ select {
.table-wrap {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
table {
@@ -978,6 +988,384 @@ tbody tr:hover {
font-size: 13px;
}
@media (max-width: 1400px) {
.grid-5 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-split {
grid-template-columns: 240px minmax(0, 1fr) 280px;
}
}
@media (max-width: 1180px) {
.app-shell {
grid-template-columns: minmax(0, 1fr);
}
.sidebar {
position: relative;
top: auto;
height: auto;
border-right: none;
border-bottom: 1px solid rgba(201, 220, 239, 0.75);
padding: 18px 18px 14px;
}
.brand {
padding-bottom: 14px;
}
.nav-group {
margin-top: 10px;
}
.nav-group + .nav-group {
margin-top: 14px;
}
.nav-title {
padding: 0 4px 8px;
}
.nav-group .nav-item {
display: inline-flex;
width: auto;
margin: 0 8px 8px 0;
}
.sidebar-foot {
margin-top: 12px;
}
.content {
padding: 16px 18px 24px;
}
.topbar {
flex-direction: column;
align-items: stretch;
}
.topbar-left,
.topbar-right {
flex-wrap: wrap;
width: 100%;
}
.workspace-switch,
.search {
width: 100%;
min-width: 0;
}
.screen-head {
align-items: flex-start;
flex-direction: column;
}
.screen-head p {
max-width: none;
}
.grid-main,
.grid-split,
.two-col,
.three-col {
grid-template-columns: minmax(0, 1fr);
}
.grid-4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-5 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.detail-grid {
grid-template-columns: minmax(0, 1fr);
}
.toolbar {
flex-direction: column;
align-items: stretch;
}
.toolbar-stack {
min-width: 0;
}
table {
min-width: 760px;
}
}
@media (max-width: 760px) {
.sidebar {
padding: 14px 14px 12px;
}
.brand {
gap: 10px;
padding: 4px 4px 12px;
}
.brand-mark {
width: 38px;
height: 38px;
border-radius: 12px;
}
.brand h1 {
font-size: 17px;
}
.brand p {
font-size: 11px;
}
.nav-group .nav-item {
width: calc(50% - 8px);
justify-content: flex-start;
margin-right: 8px;
}
.sidebar-foot {
padding: 12px;
}
.content {
padding: 12px 12px 22px;
}
.topbar {
padding: 14px;
border-radius: 18px;
}
.top-pill {
padding: 7px 10px;
}
.auth-inline {
flex-wrap: wrap;
width: 100%;
}
.auth-status {
max-width: none;
width: 100%;
}
.auth-modal-backdrop,
.action-modal-backdrop {
padding: 12px;
align-items: end;
}
.auth-modal,
.action-modal {
width: 100%;
max-height: min(90vh, 100%);
border-radius: 20px;
padding: 18px;
}
.auth-head {
flex-direction: column;
align-items: flex-start;
}
.auth-actions {
flex-direction: column-reverse;
}
.auth-actions .btn {
width: 100%;
justify-content: center;
}
.screen {
margin-top: 14px;
}
.screen-head {
margin-bottom: 14px;
}
.screen-head h2 {
font-size: 24px;
}
.action-row {
width: 100%;
}
.action-row .btn {
flex: 1 1 calc(50% - 10px);
min-width: 0;
}
.grid-4,
.grid-5,
.mini-grid,
.calendar {
grid-template-columns: minmax(0, 1fr);
}
.stat-card strong {
font-size: 24px;
}
.stat-foot {
gap: 8px;
flex-direction: column;
align-items: flex-start;
}
.panel.pad,
.hero-card,
.task-item,
.queue-card,
.review-card,
.sheet-html,
.insight-card,
.playbook-item {
padding: 14px;
}
.task-meta,
.entity-meta,
.row-meta,
.chip-row,
.kpi-inline,
.timeline {
gap: 6px;
}
.toolbar {
padding: 14px;
}
.search-inline {
width: 100%;
min-width: 0;
}
.filters {
gap: 8px;
}
.filter {
min-width: calc(50% - 4px);
flex: 1 1 calc(50% - 4px);
}
.entity-cell {
align-items: flex-start;
}
.avatar-lg {
width: 40px;
height: 40px;
border-radius: 13px;
}
.bar-row {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
table {
min-width: 680px;
}
}
@media (max-width: 560px) {
.sidebar {
padding: 12px;
}
.brand {
padding: 2px 2px 10px;
}
.nav-group {
display: flex;
align-items: center;
gap: 8px;
overflow-x: auto;
padding-bottom: 4px;
margin-top: 8px;
scrollbar-width: none;
}
.nav-group::-webkit-scrollbar {
display: none;
}
.nav-title {
padding: 0 4px 0 2px;
flex: 0 0 auto;
white-space: nowrap;
}
.nav-group .nav-item {
width: auto;
margin-right: 0;
flex: 0 0 auto;
white-space: nowrap;
padding: 9px 11px;
}
.nav-item .icon {
width: 24px;
height: 24px;
border-radius: 8px;
font-size: 12px;
}
.sidebar-foot {
display: none;
}
.topbar-right {
gap: 8px;
}
.search {
padding: 10px 12px;
}
.action-row .btn,
.btn {
width: 100%;
}
.filter {
min-width: 100%;
flex-basis: 100%;
}
.panel-head {
align-items: flex-start;
flex-direction: column;
}
.hero-card h3 {
font-size: 17px;
}
.screen-head h2 {
font-size: 22px;
}
table {
min-width: 620px;
}
}
.slot {
margin-top: 8px;
padding: 8px 10px;