mirror of
https://github.com/priyanshujain/margin.git
synced 2026-10-02 11:07:04 +00:00
changes
This commit is contained in:
pj committed
1 parent
20ae0b7387
commit
734ded73ac
14 files changed
+893
-43
No files matched your search
@@ -193,6 +193,49 @@ button {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.chapter .grip {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
align-self: center;
|
||||
margin: 0 -5px 0 -6px;
|
||||
color: var(--ink-faint);
|
||||
opacity: 0;
|
||||
cursor: grab;
|
||||
transition: opacity 120ms var(--ease);
|
||||
}
|
||||
|
||||
.chapter:hover .grip,
|
||||
.chapter[data-active="true"] .grip {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.chapter .grip:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.chapter[data-dragging="true"] {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.chapter[data-drop-before="true"]::after,
|
||||
.chapter[data-drop-after="true"]::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
height: 2px;
|
||||
background: var(--accent);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.chapter[data-drop-before="true"]::after {
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.chapter[data-drop-after="true"]::after {
|
||||
bottom: -1px;
|
||||
}
|
||||
|
||||
.add-chapter {
|
||||
margin: 8px 18px 4px;
|
||||
padding: 9px 12px;
|
||||
@@ -277,6 +320,14 @@ button {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.prose a {
|
||||
color: var(--accent);
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--line-strong);
|
||||
text-underline-offset: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.prose blockquote {
|
||||
margin: 1.7rem 0;
|
||||
padding-left: 1.2rem;
|
||||
@@ -528,6 +579,80 @@ button {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.tool-wrap {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.link-pop-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
.link-pop {
|
||||
position: absolute;
|
||||
bottom: calc(100% + 10px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 7;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
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;
|
||||
padding: 0 12px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--ink);
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--t-2);
|
||||
}
|
||||
|
||||
.link-input::placeholder {
|
||||
color: var(--ink-faint);
|
||||
}
|
||||
|
||||
.link-btn {
|
||||
height: 28px;
|
||||
padding: 0 12px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
background: var(--accent);
|
||||
color: var(--accent-contrast);
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--t-2);
|
||||
font-weight: 600;
|
||||
transition: opacity 120ms var(--ease);
|
||||
}
|
||||
|
||||
.link-btn:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.link-btn.ghost {
|
||||
padding: 0 8px;
|
||||
background: transparent;
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
|
||||
.link-btn.ghost:hover {
|
||||
background: var(--accent-wash);
|
||||
color: var(--ink);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.figure {
|
||||
margin: 1.8rem 0;
|
||||
}
|
||||
@@ -940,3 +1065,238 @@ button {
|
||||
.btn-primary:hover {
|
||||
background: var(--accent-ink);
|
||||
}
|
||||
|
||||
/* Cover */
|
||||
.cover-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 11px;
|
||||
margin: 2px 10px 4px;
|
||||
padding: 8px 12px;
|
||||
border-radius: var(--r-sm);
|
||||
color: var(--ink-soft);
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--t-3);
|
||||
cursor: pointer;
|
||||
transition: background 120ms var(--ease), color 120ms var(--ease);
|
||||
}
|
||||
|
||||
.cover-item .title {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.cover-item svg {
|
||||
color: var(--ink-faint);
|
||||
}
|
||||
|
||||
.cover-item:hover {
|
||||
background: var(--accent-wash);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.cover-item[data-active="true"] {
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
box-shadow: 0 1px 2px rgba(35, 32, 27, 0.05);
|
||||
}
|
||||
|
||||
.cover-item[data-active="true"] svg {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.cover-item[data-active="true"]::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
top: 8px;
|
||||
bottom: 8px;
|
||||
width: 3px;
|
||||
background: var(--accent);
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
|
||||
.cover-pane {
|
||||
width: 100%;
|
||||
max-width: var(--measure);
|
||||
padding: 64px 24px 120px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.cover-stage {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cover-art {
|
||||
width: min(360px, 80%);
|
||||
container-type: size;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: var(--r-md);
|
||||
border: 1px solid var(--line);
|
||||
box-shadow: var(--shadow-page);
|
||||
}
|
||||
|
||||
.cover-face {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cover-face-image {
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cover-face-default {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 12cqw 10cqw;
|
||||
}
|
||||
|
||||
.cover-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cover-title {
|
||||
font-family: var(--font-book);
|
||||
font-weight: 500;
|
||||
font-size: 9.5cqw;
|
||||
line-height: 1.08;
|
||||
letter-spacing: -0.01em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cover-rule {
|
||||
display: block;
|
||||
width: 15cqw;
|
||||
height: 1px;
|
||||
margin: 5.5cqw 0;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.cover-subtitle {
|
||||
font-family: var(--font-book);
|
||||
font-style: italic;
|
||||
font-size: 4.6cqw;
|
||||
line-height: 1.3;
|
||||
margin: 0;
|
||||
opacity: 0.84;
|
||||
}
|
||||
|
||||
.cover-author {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 9cqw;
|
||||
margin: 0;
|
||||
padding: 0 8cqw;
|
||||
font-family: var(--font-ui);
|
||||
font-weight: 600;
|
||||
font-size: 3.4cqw;
|
||||
letter-spacing: 0.24em;
|
||||
text-transform: uppercase;
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
.cover-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.cover-palettes {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.cover-swatch {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: var(--r-sm);
|
||||
border: 1px solid var(--line-strong);
|
||||
font-family: var(--font-book);
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: transform 120ms var(--ease), box-shadow 120ms var(--ease);
|
||||
}
|
||||
|
||||
.cover-swatch:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.cover-swatch[data-on="true"] {
|
||||
box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent);
|
||||
}
|
||||
|
||||
.cover-color {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: var(--r-sm);
|
||||
border: 1px solid var(--line-strong);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cover-color input {
|
||||
position: absolute;
|
||||
inset: -4px;
|
||||
width: calc(100% + 8px);
|
||||
height: calc(100% + 8px);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cover-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.cover-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 9px 14px;
|
||||
border-radius: var(--r-sm);
|
||||
border: 1px solid var(--line-strong);
|
||||
background: var(--raised);
|
||||
color: var(--ink);
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--t-3);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: border-color 120ms var(--ease), color 120ms var(--ease);
|
||||
}
|
||||
|
||||
.cover-btn:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.cover-hint {
|
||||
margin: 0;
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--t-2);
|
||||
color: var(--ink-faint);
|
||||
text-align: center;
|
||||
}
|
||||
Reference in new issue
Block a user