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
|
:root { --shade-color: #eee; }
body { margin: 0; padding: 0; font-family: sans-serif; }
a { color: inherit; }
.container { display: flex; flex-direction: column;
height: 100vh; width: 100vw; overflow: hidden; }
.body { display: flex; flex-grow: 1; overflow: hidden; position: relative; }
.body::after { content: ''; position: absolute; pointer-events: none;
top: 0; left: 0; right: 0; height: .75rem;
background: linear-gradient(#fff, rgb(255 255 255 / 0%)); }
.header { color: #000; background: #aaa linear-gradient(#888, #999);
display: flex; justify-content: space-between; column-gap: .5rem; }
.header nav { display: flex; margin: 0 .5rem; align-items: end; }
.header nav a { display: block; text-decoration: none;
background: #bbb linear-gradient(#bbb, #ccc);
margin: .25rem 0 0 -1px; padding: .25rem .75rem;
border: 1px solid #888; border-radius: .5rem .5rem 0 0; }
.header nav a.active { font-weight: bold; border-bottom: 1px solid #fff;
background: #fff linear-gradient(#eee, #fff); }
.header nav a.active, .header nav a:hover { padding-bottom: .4rem; }
.header .activity { padding: .25rem .5rem; align-self: center; color: #fff; }
.header .activity.error { color: #f00; }
.sidebar { padding: .25rem .5rem; background: var(--shade-color);
border-right: 1px solid #ccc; overflow: auto;
min-width: 10rem; max-width: 20rem; flex-shrink: 0; }
.sidebar h2 { margin: 0.5em 0 0.25em 0; padding: 0; font-size: 1.2rem; }
.sidebar ul { margin: .5rem 0; padding: 0; }
.sidebar .path { margin: .5rem -.5rem; }
.sidebar .path li { margin: 0; padding: 0; }
.sidebar .path li a { padding: .25rem .5rem; padding-left: 30px;
display: block; text-decoration: none; white-space: nowrap; }
.sidebar .path li a:hover { background-color: rgb(0 0 0 / 10%); }
.sidebar .path li.parent a {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M 4 14 10 8 16 14' stroke='%23888' stroke-width='4' fill='none' /%3E%3C/svg%3E%0A");
background-repeat: no-repeat; background-position: 5px center; }
.sidebar .path li.selected a { font-weight: bold;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='6' fill='%23888' /%3E%3C/svg%3E%0A");
background-repeat: no-repeat; background-position: 5px center; }
.sidebar .path li.child a {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M 4 6 10 12 16 6' stroke='%23888' stroke-width='4' fill='none' /%3E%3C/svg%3E%0A");
background-repeat: no-repeat; background-position: 5px center; }
.browser { overflow: auto; display: flex; flex-wrap: wrap;
align-content: flex-start; justify-content: center; align-items: center;
gap: 3px; padding: 9px; flex-grow: 1; }
.browser:focus-visible { outline: 0; box-shadow: none; }
.tags { padding: .5rem; flex-grow: 1; overflow: auto; }
.tags:focus-visible { outline: 0; box-shadow: none; }
.tags h2 { margin: .5em 0 .25em 0; padding: 0; font-size: 1.1rem; }
.tags p { margin: .25em 0; }
.tags ul { display: flex; margin: .5em 0; padding: 0;
flex-wrap: wrap; gap: .25em; }
.tags ul li { display: block; margin: 0; padding: .25em .5em;
border-radius: .5rem; background: var(--shade-color); }
img.thumbnail { display: block;
background: repeating-conic-gradient(#eee 0% 25%, transparent 0% 50%)
50% / 20px 20px; }
img.thumbnail, .thumbnail.missing { box-shadow: 0 0 3px rgba(0, 0, 0, 0.75);
margin: 3px; border: 0px solid #000; }
.thumbnail.missing { width: 128px; height: 128px; position: relative; }
.thumbnail.missing::after { content: '?'; font-size: 64px;
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.view { display: flex; flex-grow: 1; overflow: hidden;
justify-content: center; align-items: center; }
.view img { max-width: 100%; max-height: 100%; object-fit: contain; }
.view img { z-index: 1; }
.viewbar { padding: .25rem .5rem; background: #eee;
border-left: 1px solid #ccc; min-width: 20rem; overflow: auto; }
.viewbar h2 { margin: 0.5em 0 0.25em 0; padding: 0; font-size: 1.2rem; }
.viewbar h3 { margin: 0.25em 0; padding: 0; font-size: 1.1rem; }
.viewbar ul { margin: 0; padding: 0 0 0 1.25em; list-style-type: "- "; }
.viewbar ul.tags { padding: 0; list-style-type: none; }
.viewbar li { margin: 0; padding: 0; }
.sidebar meter,
.viewbar meter { width: 1.25rem;
/* background: white; border: 1px solid #ccc; */ }
.similar { padding: .5rem; flex-grow: 1; overflow: auto; }
.similar h2 { margin: 1em 0 0.5em 0; padding: 0; font-size: 1.2rem; }
.similar .row { display: flex; margin: .5rem 0; }
.similar .row ul { margin: 0; padding: 0 0 0 1.25em; list-style-type: "- "; }
.duplicates,
.orphans { padding: .5rem; flex-grow: 1; overflow: auto; }
.duplicates .row,
.orphans .row { display: flex; margin: .5rem 0; align-items: center; gap: 3px; }
.orphans .row { margin-bottom: 1.25rem; }
.orphans h2 { margin: 0.25em 0; padding: 0; font-size: 1.1rem; }
|
