Repository navigation
Expand file tree
/
Copy pathstyles.css
More file actions
105 lines (103 loc) · 10.6 KB
/
Copy pathstyles.css
File metadata and controls
105 lines (103 loc) · 10.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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
.dcc-view {
--dcc-border: var(--background-modifier-border);
--dcc-surface: var(--background-secondary);
--dcc-hover: var(--background-primary-alt);
--dcc-accent: var(--interactive-accent);
max-width: 1180px;
margin: 0 auto;
padding: 1.25rem 1rem 2rem;
}
.dcc-view h1, .dcc-view h2, .dcc-view p { margin-top: 0; }
.dcc-header, .dcc-panel-heading, .dcc-controls, .dcc-recent-list li { display: flex; align-items: center; }
.dcc-header { justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.dcc-header h1 { margin-bottom: .25rem; }
.dcc-subtitle, .dcc-metric-detail, .dcc-recent-date, .dcc-gallery-hint { color: var(--text-muted); font-size: .8rem; }
.dcc-button, .dcc-file-type-select, .dcc-list-select, .dcc-gallery-trigger, .dcc-gallery-close, .dcc-gallery-nav, .dcc-gallery-open {
min-height: 2.25rem;
border: 1px solid var(--dcc-border);
border-radius: .5rem;
background: var(--dcc-surface);
color: var(--text-normal);
cursor: pointer;
padding: .45rem .8rem;
}
.dcc-button:hover, .dcc-button.is-selected, .dcc-gallery-trigger:hover, .dcc-gallery-open:hover, .dcc-gallery-nav:hover:not(:disabled) { border-color: var(--dcc-accent); background: var(--dcc-accent); color: var(--text-on-accent); }
.dcc-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.dcc-metric, .dcc-panel { border: 1px solid var(--dcc-border); border-radius: .7rem; background: var(--dcc-surface); }
.dcc-metric { min-height: 5.5rem; padding: .9rem 1rem; }
.dcc-metric-value { display: block; color: var(--text-normal); font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.dcc-metric-label { display: block; font-weight: 600; }
.dcc-controls { flex-wrap: wrap; gap: .65rem; margin-bottom: .75rem; }
.dcc-file-type-select, .dcc-search { min-height: 2.4rem; border: 1px solid var(--dcc-border); border-radius: .5rem; background: var(--background-primary); color: var(--text-normal); padding: .5rem .75rem; }
.dcc-file-type-select { flex: 0 1 11rem; }
.dcc-list-select { max-width: 16rem; min-height: 2.25rem; }
.dcc-search { min-width: min(100%, 22rem); flex: 1 1 18rem; }
.dcc-depth-controls { display: flex; flex-wrap: wrap; gap: .4rem; }
.dcc-panel { margin-bottom: 1rem; padding: 1rem; }
.dcc-panel-heading { justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--dcc-border); margin-bottom: .75rem; padding-bottom: .75rem; }
.dcc-panel-heading h2, .dcc-panel > h2 { margin-bottom: 0; font-size: 1rem; }
.dcc-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin-right: auto; }
.dcc-tab { min-height: 2rem; border: 1px solid var(--dcc-border); border-radius: .4rem; background: transparent; color: var(--text-muted); cursor: pointer; padding: .3rem .6rem; }
.dcc-tab:hover, .dcc-tab.is-selected { border-color: var(--dcc-accent); background: var(--dcc-accent); color: var(--text-on-accent); }
.dcc-gallery-trigger { min-width: 2.25rem; font-size: 1.1rem; }
.dcc-pinned-bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: -.25rem 0 .75rem; border: 1px solid var(--dcc-accent); border-radius: .5rem; background: var(--background-primary-alt); color: var(--text-muted); font-size: .8rem; padding: .5rem .7rem; }
.dcc-unpin-button { min-height: 2rem; border: 1px solid var(--dcc-border); border-radius: .4rem; background: var(--dcc-surface); color: var(--text-normal); cursor: pointer; padding: .3rem .6rem; }
.dcc-tree { min-height: 8rem; overflow-x: auto; }
.dcc-tree-columns, .dcc-folder summary, .dcc-tree-file { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem 4.5rem 4.5rem 3rem; align-items: center; box-sizing: border-box; width: 100%; }
.dcc-tree-columns { color: var(--text-muted); font-size: .75rem; font-weight: 600; padding: 0 .45rem .45rem; }
.dcc-tree-column-count, .dcc-tree-column-bookmark, .dcc-tree-column-pin { text-align: right; }
.dcc-folder { border-left: 1px solid var(--dcc-border); }
.dcc-folder summary { min-height: 2rem; border-radius: .35rem; cursor: pointer; list-style: none; padding: .25rem .45rem; }
.dcc-folder summary::-webkit-details-marker { display: none; }
.dcc-folder summary:hover, .dcc-tree-file:hover { background: var(--dcc-hover); }
.dcc-folder[open] > summary .dcc-tree-name { color: var(--text-normal); }
.dcc-tree-primary { display: flex; min-width: 0; align-items: center; gap: .35rem; padding-left: calc(var(--dcc-depth, 0) * 1.2rem); }
.dcc-tree-folder-mark { display: inline-block; flex: 0 0 1rem; color: var(--text-muted); text-align: center; transition: transform 160ms ease; }
.dcc-folder[open] > summary .dcc-tree-folder-mark { transform: rotate(90deg); }
.dcc-tree-children { padding-left: 0; }
.dcc-tree-name { min-width: 0; overflow-wrap: anywhere; padding-left: calc(var(--dcc-depth, 0) * 1.2rem); }
.dcc-tree-primary .dcc-tree-name { padding-left: 0; }
.dcc-tree-count { color: var(--text-muted); font-size: .8rem; font-variant-numeric: tabular-nums; text-align: right; }
.dcc-tree-file { min-height: 2rem; gap: .35rem; padding: .25rem .45rem; }
.dcc-file-mark { display: inline-block; width: 1rem; color: var(--text-muted); text-align: center; }
.dcc-link { overflow-wrap: anywhere; }
.dcc-pin { justify-self: end; width: 2rem; height: 2rem; border: 0; border-radius: .35rem; background: transparent; color: var(--text-muted); cursor: pointer; }
.dcc-pin:hover { background: var(--dcc-hover); color: var(--dcc-accent); }
.dcc-bookmark { justify-self: end; width: 2rem; height: 2rem; border: 0; border-radius: .35rem; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 1.1rem; }
.dcc-bookmark:hover, .dcc-bookmark[aria-pressed="true"] { background: var(--dcc-hover); color: var(--dcc-accent); }
.dcc-recent-list { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.dcc-recent-list li { justify-content: space-between; gap: 1rem; min-height: 2rem; padding: .25rem 0; }
.dcc-empty { color: var(--text-muted); padding: 1rem 0; }
.dcc-list-error { border: 1px solid var(--text-error); border-radius: .5rem; background: var(--background-primary-alt); color: var(--text-error); padding: .65rem .8rem; }
.dcc-gallery-backdrop { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.58); backdrop-filter: blur(8px); padding: 1rem; }
.dcc-gallery-dialog { display: grid; grid-template-rows: auto minmax(0,1fr) auto auto; width: min(1100px,100%); height: min(900px,92dvh); max-height: calc(100dvh - 2rem); overflow: hidden; border: 1px solid var(--dcc-border); border-radius: .8rem; background: var(--background-primary); box-shadow: 0 1.5rem 4rem rgba(0,0,0,.35); }
.dcc-gallery-header, .dcc-gallery-footer { display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; }
.dcc-gallery-header { border-bottom: 1px solid var(--dcc-border); }
.dcc-gallery-heading { min-width: 0; flex: 1; }
.dcc-gallery-header h2 { margin: 0; overflow-wrap: anywhere; font-size: 1rem; }
.dcc-gallery-path { overflow: hidden; color: var(--text-muted); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.dcc-gallery-position { color: var(--text-muted); font-size: .8rem; }
.dcc-gallery-close { width: 2.25rem; height: 2.25rem; font-size: 1.4rem; line-height: 1; }
.dcc-gallery-body { display: grid; grid-template-columns: 3rem minmax(0,1fr) 3rem; min-height: 0; overflow: hidden; background: var(--background-secondary); }
.dcc-gallery-nav { align-self: center; justify-self: center; width: 2.25rem; height: 2.75rem; font-size: 2rem; line-height: 1; }
.dcc-gallery-preview { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; overflow: auto; padding: 1rem; }
.dcc-gallery-image, .dcc-gallery-media { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.dcc-gallery-audio { width: min(520px, 100%); }
.dcc-gallery-fallback { width: min(560px, 100%); border: 1px solid var(--dcc-border); border-radius: .7rem; background: var(--background-primary); padding: 1.5rem; }
.dcc-gallery-fallback h3 { margin: .5rem 0; overflow-wrap: anywhere; }
.dcc-gallery-fallback p, .dcc-gallery-fallback code { color: var(--text-muted); font-size: .85rem; }
.dcc-gallery-fallback code { display: block; overflow-wrap: anywhere; white-space: pre-wrap; }
.dcc-gallery-footer { justify-content: flex-end; border-top: 1px solid var(--dcc-border); }
.dcc-gallery-hint { margin-right: auto; }
.dcc-gallery-unsupported-toggle { min-height: 2.25rem; border: 1px solid var(--dcc-border); border-radius: .5rem; background: var(--dcc-surface); color: var(--text-normal); cursor: pointer; padding: .45rem .8rem; }
.dcc-gallery-unsupported-toggle:hover, .dcc-gallery-unsupported-toggle[aria-pressed="true"] { border-color: var(--dcc-accent); background: var(--dcc-accent); color: var(--text-on-accent); }
.dcc-gallery-thumbnails { display: flex; min-height: 0; gap: .5rem; overflow-x: auto; overflow-y: hidden; border-top: 1px solid var(--dcc-border); padding: .6rem .8rem; }
.dcc-gallery-thumbnail { position: relative; display: flex; flex: 0 0 5.5rem; flex-direction: column; gap: .25rem; min-height: 4.5rem; overflow: hidden; border: 1px solid var(--dcc-border); border-radius: .5rem; background: var(--dcc-surface); color: var(--text-normal); cursor: pointer; padding: .3rem; text-align: left; }
.dcc-gallery-thumbnail:hover, .dcc-gallery-thumbnail.is-active { border-color: var(--dcc-accent); background: var(--dcc-accent); color: var(--text-on-accent); }
.dcc-gallery-thumbnail img { width: 100%; height: 3rem; object-fit: cover; }
.dcc-gallery-thumbnail-type { display: grid; place-items: center; height: 3rem; color: var(--text-muted); font-size: .7rem; font-weight: 700; }
.dcc-gallery-thumbnail-label { overflow: hidden; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.dcc-button:focus-visible, .dcc-search:focus-visible, .dcc-file-type-select:focus-visible, .dcc-list-select:focus-visible, .dcc-link:focus-visible, .dcc-folder summary:focus-visible, .dcc-pin:focus-visible, .dcc-bookmark:focus-visible, .dcc-tab:focus-visible, .dcc-unpin-button:focus-visible, .dcc-gallery-close:focus-visible, .dcc-gallery-nav:focus-visible, .dcc-gallery-open:focus-visible, .dcc-gallery-unsupported-toggle:focus-visible, .dcc-gallery-thumbnail:focus-visible { outline: 2px solid var(--dcc-accent); outline-offset: 2px; }
@media (max-width: 720px) { .dcc-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dcc-header { align-items: flex-start; } }
@media (max-width: 460px) { .dcc-metrics { grid-template-columns: 1fr; } .dcc-gallery-backdrop { padding: .4rem; } .dcc-gallery-body { grid-template-columns: 2.5rem minmax(0,1fr) 2.5rem; } }
@media (prefers-reduced-motion: reduce) { .dcc-view * { transition-duration: .01ms !important; } }