-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsharing.css
More file actions
70 lines (70 loc) · 5.6 KB
/
Copy pathsharing.css
File metadata and controls
70 lines (70 loc) · 5.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
.share-dialog {
width: min(360px, calc(100% - 32px));
max-height: calc(100dvh - 32px);
padding: 20px;
border: 1px solid var(--border);
border-radius: 20px;
background: var(--paper);
color: var(--ink);
box-shadow: var(--floating-shadow);
overflow: auto;
}
.share-dialog::backdrop { background: rgba(20, 24, 32, .32); }
.share-header { display: flex; align-items: center; gap: 10px; }
.share-dialog p { line-height: 1.55; font-size: 13px; }
#share-board-title { flex: 1; min-width: 0; margin: 0; font-size: 18px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-mark, .share-icon svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.share-mark { color: var(--muted); }
#share-consent { margin: 12px 0 0; color: var(--muted); }
.share-dialog [lang] { display: block; }
.share-dialog [lang] + [lang] { margin-top: 3px; }
.share-link-row { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.share-dialog input { flex: 1; min-width: 0; height: 44px; padding: 10px; border: 1px solid var(--field-border); border-radius: 10px; background: var(--canvas); color: var(--ink); font-size: 13px; }
.share-footer { display: grid; grid-template-columns: 1fr auto; margin-top: 16px; }
.share-details { grid-area: 1 / 1 / 2 / -1; min-width: 0; }
.share-details summary { list-style: none; }
.share-details summary::-webkit-details-marker { display: none; }
.share-notice { color: var(--muted); margin: 12px 0 0; }
.share-actions { grid-area: 1 / 2; align-self: start; display: flex; align-items: center; gap: 8px; }
.share-icon { position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
#share-close, .share-details summary { border-color: transparent; }
.share-icon:focus-visible, .presentation-tools button:focus-visible { outline: 2px solid var(--thread); outline-offset: 3px; }
.share-icon { text-decoration: none; }
.share-icon:disabled { opacity: .5; cursor: wait; }
.share-icon[aria-busy="true"] svg { visibility: hidden; }
.share-icon[aria-busy="true"]::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: share-pending 800ms linear infinite; }
@keyframes share-pending { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .share-icon[aria-busy="true"]::after { animation: none; } }
@media (hover: hover) { .share-icon:not(:disabled):hover { background: var(--control-hover); } }
#share-enable, #share-copy { background: var(--thread); color: var(--paper); }
#share-stop { color: var(--danger); }
#share-copy .share-copied-glyph, #share-copy[data-copied="true"] .share-copy-glyph { display: none; }
#share-copy[data-copied="true"] .share-copied-glyph { display: block; }
.share-dialog[data-state="shareLive"] .share-mark, .share-dialog[data-state="shareCopied"] .share-mark { color: var(--thread); }
#share-status:not(.sr-only) { margin: 12px 0 0; }
#export-share-button[data-sharing="true"] { color: var(--thread); box-shadow: inset 0 0 0 1px var(--thread); }
.share-viewer #presentation {
position: fixed; inset: 0; overflow: hidden; touch-action: none; user-select: none;
background: var(--canvas) radial-gradient(circle, var(--grid) 1px, transparent 1.2px) 0 0 / 28px 28px;
cursor: grab;
}
.share-viewer #presentation:active { cursor: grabbing; }
.share-viewer #presentation:focus-visible { outline: 2px solid var(--thread); outline-offset: -3px; }
.presentation-heading { max-width: calc(100% - 90px); height: 36px; }
.presentation-heading .app-logo { margin-inline: 5.5px; }
.presentation-heading h1 { min-width: 0; margin: 0; padding: 3px 6px; color: var(--ink); font-size: 21px; font-weight: 620; letter-spacing: -0.025em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.presentation-tools button { cursor: pointer; }
.presentation-tools .menu-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fullscreen-exit, [aria-pressed="true"] .fullscreen-enter { display: none; }
[aria-pressed="true"] .fullscreen-exit { display: inline; }
#presentation-status:not(.sr-only) { position: fixed; z-index: 4; bottom: max(78px, calc(env(safe-area-inset-bottom) + 60px)); left: 50%; transform: translateX(-50%); width: max-content; max-width: min(520px, calc(100% - 32px)); margin: 0; padding: 12px 16px; border-radius: 14px; background: var(--panel-strong); box-shadow: var(--floating-shadow); color: var(--muted); font-size: 13px; line-height: 1.5; }
.share-viewer #presentation svg > rect { fill: transparent; }
.share-viewer #presentation svg .note-text { fill: var(--ink); }
.share-viewer #presentation svg .edge { stroke: var(--thread); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.share-viewer #presentation svg .edge-label { fill: var(--ink); stroke: var(--canvas); }
.share-viewer #presentation svg marker path { fill: var(--thread); }
.share-viewer #presentation svg g rect { fill: var(--paper); stroke: var(--overview-node-outline); stroke-width: 1.15px; vector-effect: non-scaling-stroke; }
.share-viewer #presentation svg rect[data-color="yellow"] { fill: var(--note-yellow); }
.share-viewer #presentation svg rect[data-color="mint"] { fill: var(--note-mint); }
.share-viewer #presentation svg rect[data-color="blue"] { fill: var(--note-blue); }
.share-viewer #presentation svg rect[data-color="rose"] { fill: var(--note-rose); }