mirror of
https://github.com/priyanshujain/margin.git
synced 2026-10-03 11:37:03 +00:00
changes
This commit is contained in:
pj committed
1 parent
11df8697b1
commit
c090fb595f
61 files changed
+52534
-107
No files matched your search
+277
-6
@@ -8,8 +8,17 @@ body,
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
overscroll-behavior: none;
|
||||
background: var(--shell);
|
||||
color: var(--ink);
|
||||
font-family: var(--font-ui);
|
||||
@@ -35,12 +44,15 @@ button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.titlebar {
|
||||
flex: none;
|
||||
height: 46px;
|
||||
position: relative;
|
||||
z-index: 45;
|
||||
height: var(--titlebar-h);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
@@ -49,6 +61,13 @@ button {
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.titlebar .lead {
|
||||
grid-column: 1;
|
||||
justify-self: start;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.titlebar .doc-title {
|
||||
grid-column: 2;
|
||||
font-size: var(--t-2);
|
||||
@@ -150,6 +169,17 @@ body.resizing {
|
||||
padding: 6px 0 10px;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
transition: width 220ms var(--ease);
|
||||
}
|
||||
|
||||
.app:not([data-compact="true"])[data-sidebar="false"] .sidebar {
|
||||
width: 0;
|
||||
border-right-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.resizing .sidebar {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.brand {
|
||||
@@ -657,14 +687,14 @@ body.resizing {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 15px 0 0;
|
||||
padding: 0;
|
||||
padding: 0 0 0.3em;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
text-align: center;
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 500;
|
||||
font-size: 31px;
|
||||
line-height: 1.16;
|
||||
line-height: 1.4;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--ink);
|
||||
resize: none;
|
||||
@@ -818,7 +848,7 @@ body.resizing {
|
||||
|
||||
.editor-toolbar {
|
||||
position: sticky;
|
||||
bottom: 22px;
|
||||
bottom: max(22px, env(safe-area-inset-bottom));
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -891,6 +921,24 @@ body.resizing {
|
||||
box-shadow: var(--shadow-pop);
|
||||
}
|
||||
|
||||
.align-pop {
|
||||
position: absolute;
|
||||
bottom: calc(100% + 10px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 7;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1px;
|
||||
padding: 5px;
|
||||
background: var(--glass);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 999px;
|
||||
box-shadow: var(--shadow-pop);
|
||||
}
|
||||
|
||||
.link-input {
|
||||
width: 220px;
|
||||
height: 28px;
|
||||
@@ -1076,6 +1124,122 @@ body.resizing {
|
||||
padding: 44px 0;
|
||||
}
|
||||
|
||||
.preview-overlay {
|
||||
z-index: 55;
|
||||
}
|
||||
|
||||
.preview-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.preview-bar {
|
||||
flex: none;
|
||||
height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 0 12px;
|
||||
background: var(--paper);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.preview-title {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-family: var(--font-book);
|
||||
font-size: 15px;
|
||||
color: var(--ink);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.preview-count {
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--t-2);
|
||||
color: var(--ink-faint);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.preview-zoom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.preview-zoom span {
|
||||
width: 44px;
|
||||
text-align: center;
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--t-2);
|
||||
color: var(--ink-soft);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.preview-warn {
|
||||
flex: none;
|
||||
padding: 9px 18px;
|
||||
background: var(--accent-wash);
|
||||
color: var(--accent-ink);
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--t-2);
|
||||
text-align: center;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.preview-stage {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: 28px;
|
||||
background: var(--shell);
|
||||
}
|
||||
|
||||
.preview-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
width: max-content;
|
||||
min-width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.preview-page {
|
||||
flex: none;
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
box-shadow: var(--shadow-page);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.preview-canvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.preview-loading {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.preview-loading p {
|
||||
margin: 0;
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--t-3);
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
|
||||
.spinner-dark {
|
||||
border-color: var(--line-strong);
|
||||
border-top-color: var(--accent);
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
@@ -1089,8 +1253,7 @@ body.resizing {
|
||||
}
|
||||
|
||||
.panel {
|
||||
width: 480px;
|
||||
max-width: 100%;
|
||||
width: min(480px, calc(100vw - 32px));
|
||||
max-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -1231,6 +1394,21 @@ body.resizing {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.menu-label {
|
||||
padding: 7px 11px 3px;
|
||||
font-size: var(--t-1);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-faint);
|
||||
}
|
||||
|
||||
.menu-sep {
|
||||
height: 1px;
|
||||
margin: 5px 7px;
|
||||
background: var(--line);
|
||||
}
|
||||
|
||||
.export-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
@@ -1286,6 +1464,7 @@ body.resizing {
|
||||
|
||||
.library {
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
overflow-y: auto;
|
||||
background: var(--shell);
|
||||
}
|
||||
@@ -2489,3 +2668,95 @@ body.resizing {
|
||||
font-size: var(--t-2);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Compact / mobile layout: panes become slide-in drawers over a full-width editor */
|
||||
|
||||
.app[data-compact="true"] {
|
||||
--titlebar-h: calc(46px + env(safe-area-inset-top));
|
||||
}
|
||||
|
||||
.app[data-compact="true"] .titlebar {
|
||||
padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
|
||||
}
|
||||
|
||||
.app[data-compact="true"] .sidebar,
|
||||
.app[data-compact="true"] .dock {
|
||||
position: fixed;
|
||||
top: var(--titlebar-h);
|
||||
bottom: 0;
|
||||
z-index: 40;
|
||||
box-shadow: var(--shadow-pop);
|
||||
}
|
||||
|
||||
.app[data-compact="true"] .sidebar {
|
||||
left: 0;
|
||||
width: min(82vw, 320px);
|
||||
padding-left: env(safe-area-inset-left);
|
||||
border-right: 1px solid var(--line);
|
||||
transform: translateX(-100%);
|
||||
transition: transform 260ms var(--ease);
|
||||
}
|
||||
|
||||
.app[data-compact="true"][data-sidebar="true"] .sidebar {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.app[data-compact="true"] .dock {
|
||||
right: 0;
|
||||
width: min(92vw, 440px);
|
||||
padding-right: max(28px, env(safe-area-inset-right));
|
||||
border-left: 1px solid var(--line);
|
||||
animation: drawer-in-right 260ms var(--ease);
|
||||
}
|
||||
|
||||
@keyframes drawer-in-right {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
to {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-scrim {
|
||||
position: fixed;
|
||||
inset: var(--titlebar-h) 0 0 0;
|
||||
z-index: 35;
|
||||
background: rgba(0, 0, 0, 0.42);
|
||||
-webkit-backdrop-filter: blur(2px);
|
||||
backdrop-filter: blur(2px);
|
||||
animation: scrim-in 200ms var(--ease);
|
||||
}
|
||||
|
||||
@keyframes scrim-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.app[data-compact="true"] .sheet {
|
||||
padding: 56px 18px 160px;
|
||||
}
|
||||
|
||||
.app[data-compact="true"] .chapter-title {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
@media (max-width: 899px) {
|
||||
.overlay {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.library-head {
|
||||
padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
|
||||
}
|
||||
|
||||
.shelf {
|
||||
padding: 20px max(18px, env(safe-area-inset-right)) 60px max(18px, env(safe-area-inset-left));
|
||||
gap: 18px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
}
|
||||
}
|
||||
@@ -10,6 +10,7 @@
|
||||
--pane-sidebar: 248px;
|
||||
--pane-dock: 384px;
|
||||
--measure: 46em;
|
||||
--titlebar-h: 46px;
|
||||
|
||||
--t-1: 11px;
|
||||
--t-2: 12px;
|
||||
|
||||
Reference in new issue
Block a user