Skip to content

Commit 9cf72b5

Browse files
Stash-KennyGKennyGDogmaDragon
authored
Add Group Details plugin for Group Cards (#700)
Co-authored-by: KennyG <kennyg@kennyg.com> Co-authored-by: DogmaDragon <103123951+DogmaDragon@users.noreply.github.com>
1 parent d6f4db8 commit 9cf72b5

20 files changed

Lines changed: 1171 additions & 0 deletions

‎plugins/GroupDetails/GroupDetails.css‎

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
.group-card .card-popovers {
2+
flex-wrap: wrap;
3+
}
4+
5+
/* Stacked layout: line1 = duration + scene count; line2 = resolution (so extra chips stay on their own row). */
6+
.group-card .card-popovers .gd-metrics-row {
7+
display: flex;
8+
flex-direction: column;
9+
align-items: stretch;
10+
width: 100%;
11+
flex: 1 1 100%;
12+
box-sizing: border-box;
13+
gap: 0.12rem;
14+
padding: 0.15rem 2px;
15+
}
16+
17+
.group-card .card-popovers .gd-metrics-line1 {
18+
display: grid;
19+
grid-template-columns: 1fr;
20+
align-items: center;
21+
width: 100%;
22+
}
23+
24+
.group-card .card-popovers .gd-metrics-line1 .scene-count {
25+
justify-self: center;
26+
}
27+
28+
.group-card .card-popovers .gd-metrics-line2 {
29+
display: flex;
30+
justify-content: flex-end;
31+
align-items: center;
32+
width: 100%;
33+
}
34+
35+
.group-card .card-popovers .gd-res-bucket {
36+
display: inline-flex;
37+
align-items: center;
38+
justify-content: center;
39+
min-height: 1.15em;
40+
line-height: 1;
41+
/* Let hover hit the wrapper so the native `title` tooltip on .gd-res-bucket shows (SVG children do not inherit it). */
42+
cursor: help;
43+
}
44+
45+
.group-card .card-popovers .gd-res-bucket > * {
46+
pointer-events: none;
47+
}
48+
49+
.group-card .card-popovers .gd-resolution-png {
50+
height: 1em;
51+
width: auto;
52+
max-width: 2.4em;
53+
display: block;
54+
object-fit: contain;
55+
}
56+
57+
.group-card .card-popovers .gd-res-bucket-fallback {
58+
font-size: 0.68rem;
59+
font-weight: 600;
60+
letter-spacing: 0.04em;
61+
opacity: 0.95;
62+
}
63+
64+
.group-card .card-popovers .gd-stat {
65+
display: inline-flex;
66+
align-items: center;
67+
justify-content: center;
68+
min-width: 0;
69+
padding: 0.2rem 0.15rem;
70+
font-size: 0.9rem;
71+
line-height: 1.1;
72+
color: var(--text, #d5dbe3);
73+
opacity: 0.95;
74+
white-space: nowrap;
75+
}
76+
77+
.group-card .gd-date-line {
78+
display: flex;
79+
justify-content: space-between;
80+
align-items: center;
81+
width: 100%;
82+
}
83+
84+
.group-card .gd-date-text {
85+
min-width: 0;
86+
}
87+
88+
.group-card .gd-date-duration {
89+
margin-left: 0.5rem;
90+
margin-right: 0;
91+
margin-inline-start: 0.5rem;
92+
margin-inline-end: 0;
93+
padding: 0;
94+
justify-content: flex-end;
95+
font-size: inherit;
96+
line-height: inherit;
97+
font-weight: inherit;
98+
color: inherit;
99+
opacity: inherit;
100+
cursor: help;
101+
}
102+
103+
.group-card .card-popovers .gd-performer-count {
104+
position: relative;
105+
}
106+
107+
.group-card,
108+
.group-card .card-popovers {
109+
overflow: visible;
110+
}
111+
112+
.group-card .card-popovers .gd-performer-count .btn {
113+
pointer-events: none;
114+
}
115+
116+
.group-card .card-popovers .gd-performer-popover {
117+
position: absolute;
118+
left: 50%;
119+
top: calc(100% + 0.35rem);
120+
transform: translate(-50%, 0.2rem);
121+
z-index: 40;
122+
display: block;
123+
width: max-content;
124+
max-width: min(32rem, calc(100vw - 1.5rem));
125+
max-height: 360px;
126+
overflow: visible;
127+
opacity: 0;
128+
visibility: hidden;
129+
pointer-events: none;
130+
transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
131+
}
132+
133+
.group-card .card-popovers .gd-performer-count.gd-open .gd-performer-popover {
134+
opacity: 1;
135+
visibility: visible;
136+
pointer-events: auto;
137+
transform: translate(-50%, 0);
138+
transition-delay: 0ms;
139+
}
140+
141+
.group-card .card-popovers .gd-performer-popover .popover-body {
142+
display: flex;
143+
flex-wrap: wrap;
144+
justify-content: center;
145+
align-content: flex-start;
146+
gap: 0.45rem;
147+
overflow: auto;
148+
max-height: 360px;
149+
padding: 0.55rem 0.6rem 0.55rem;
150+
}
151+
152+
.group-card .card-popovers .gd-performer-image {
153+
width: 96px;
154+
height: 120px;
155+
border-radius: 0.25rem;
156+
object-fit: cover;
157+
object-position: top;
158+
background: #324252;
159+
}
160+
161+
.group-card .card-popovers .gd-performer-item {
162+
display: inline-flex;
163+
flex-direction: column;
164+
align-items: center;
165+
text-align: center;
166+
width: 96px;
167+
margin: 0;
168+
}
169+
170+
.group-card .card-popovers .gd-performer-item .gd-performer-thumb {
171+
display: block;
172+
width: 96px;
173+
text-decoration: none;
174+
}
175+
176+
.group-card .card-popovers .gd-performer-name {
177+
display: inline-block;
178+
max-width: 100%;
179+
margin: 0.2rem auto 0;
180+
padding: 0.06rem 0.42rem;
181+
overflow: hidden;
182+
text-overflow: ellipsis;
183+
white-space: nowrap;
184+
font-size: 0.76rem;
185+
line-height: 1.2;
186+
text-align: center;
187+
border-radius: 0.25rem;
188+
background: #d7e4f1;
189+
color: #1a2330;
190+
text-decoration: none;
191+
}

0 commit comments

Comments
 (0)