taleem-player 0.5.0 → 0.7.0-rc
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +169 -146
- package/dist/css/taleem.css +347 -0
- package/dist/css/themes/dark.css +6 -0
- package/dist/css/themes/light.css +6 -0
- package/dist/css/themes/paper.css +6 -0
- package/dist/taleem-player.esm.js +221 -14372
- package/dist/taleem-player.umd.js +221 -14366
- package/package.json +11 -8
- package/dist/taleem-player.esm.css +0 -181
- package/dist/taleem-player.umd.css +0 -181
|
@@ -0,0 +1,347 @@
|
|
|
1
|
+
|
|
2
|
+
/* =====================================================
|
|
3
|
+
TALEEM — Single Public Stylesheet
|
|
4
|
+
|
|
5
|
+
/* -------------------------------
|
|
6
|
+
Global Page Reset
|
|
7
|
+
------------------------------- */
|
|
8
|
+
|
|
9
|
+
html,body {
|
|
10
|
+
height: 100%;
|
|
11
|
+
overflow: hidden;
|
|
12
|
+
margin: 0;
|
|
13
|
+
font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
|
14
|
+
background: var(--backgroundColor, #0b1220);
|
|
15
|
+
color: var(--primaryColor, #e6e9ff);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
#app {
|
|
19
|
+
position: relative;
|
|
20
|
+
width: 100vw;
|
|
21
|
+
min-height: 100vh;
|
|
22
|
+
overflow: hidden;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* -------------------------------
|
|
26
|
+
Browser / Player Layers
|
|
27
|
+
------------------------------- */
|
|
28
|
+
.taleem-browser-bg {
|
|
29
|
+
position: absolute;
|
|
30
|
+
inset: 0;
|
|
31
|
+
z-index: 0;
|
|
32
|
+
background-size: cover;
|
|
33
|
+
background-position: center;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.taleem-browser-slide {
|
|
37
|
+
position: relative;
|
|
38
|
+
z-index: 1;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/* -------------------------------
|
|
42
|
+
Base Slide Grammar
|
|
43
|
+
------------------------------- */
|
|
44
|
+
.slide {
|
|
45
|
+
height: 100vh;
|
|
46
|
+
box-sizing: border-box;
|
|
47
|
+
|
|
48
|
+
display: flex;
|
|
49
|
+
flex-direction: column;
|
|
50
|
+
justify-content: center;
|
|
51
|
+
align-items: center;
|
|
52
|
+
|
|
53
|
+
padding: 64px 80px;
|
|
54
|
+
gap: 32px;
|
|
55
|
+
|
|
56
|
+
overflow: hidden;
|
|
57
|
+
background: transparent;
|
|
58
|
+
color: var(--primaryColor, #e6e9ff);
|
|
59
|
+
|
|
60
|
+
font-size: 2.4rem;
|
|
61
|
+
line-height: 1.6;
|
|
62
|
+
letter-spacing: 0.01em;
|
|
63
|
+
text-align: center;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/* -------------------------------
|
|
67
|
+
Global Image Safety
|
|
68
|
+
------------------------------- */
|
|
69
|
+
.slide img {
|
|
70
|
+
max-width: 100%;
|
|
71
|
+
max-height: 100%;
|
|
72
|
+
height: auto;
|
|
73
|
+
width: auto;
|
|
74
|
+
display: block;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* -------------------------------
|
|
78
|
+
Headings
|
|
79
|
+
------------------------------- */
|
|
80
|
+
.slide h1 {
|
|
81
|
+
margin: 0;
|
|
82
|
+
letter-spacing: -0.015em;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* -------------------------------
|
|
86
|
+
Slide Types
|
|
87
|
+
------------------------------- */
|
|
88
|
+
.slide.titleSlide h1 {
|
|
89
|
+
font-size: 5.6rem;
|
|
90
|
+
font-weight: 700;
|
|
91
|
+
line-height: 1.2;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.slide.titleAndSubtitle h1 {
|
|
95
|
+
font-size: 5.8rem;
|
|
96
|
+
font-weight: 700;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.slide.titleAndSubtitle h2 {
|
|
100
|
+
font-size: 3.8rem;
|
|
101
|
+
font-weight: 400;
|
|
102
|
+
opacity: 0.8;
|
|
103
|
+
margin: 0;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.slide.titleAndPara h1 {
|
|
107
|
+
font-size: 4.8rem;
|
|
108
|
+
font-weight: 600;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.slide.titleAndPara p {
|
|
112
|
+
font-size: 3rem;
|
|
113
|
+
max-width: 70ch;
|
|
114
|
+
opacity: 0.9;
|
|
115
|
+
margin: 0;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
/* -------------------------------
|
|
119
|
+
Bullet List
|
|
120
|
+
------------------------------- */
|
|
121
|
+
.slide.bulletList ul {
|
|
122
|
+
list-style: disc;
|
|
123
|
+
padding-left: 2rem;
|
|
124
|
+
margin: 0;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.slide.bulletList li {
|
|
128
|
+
font-size: 3.6rem;
|
|
129
|
+
margin-bottom: 1rem;
|
|
130
|
+
text-align: left;
|
|
131
|
+
font-weight: 500;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
/* -------------------------------
|
|
135
|
+
Image Variants
|
|
136
|
+
------------------------------- */
|
|
137
|
+
.slide.imageSlide {
|
|
138
|
+
padding: 0;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.slide.imageSlide img {
|
|
142
|
+
object-fit: contain;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.slide.imageWithTitle {
|
|
146
|
+
position: relative;
|
|
147
|
+
padding: 48px;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.slide.imageWithTitle img {
|
|
151
|
+
height: calc(100vh - 96px);
|
|
152
|
+
border-radius: 12px;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.slide.imageWithTitle h1 {
|
|
156
|
+
position: absolute;
|
|
157
|
+
bottom: 64px;
|
|
158
|
+
left: 50%;
|
|
159
|
+
transform: translateX(-50%);
|
|
160
|
+
font-size: 4.6rem;
|
|
161
|
+
background: rgba(0, 0, 0, 0.45);
|
|
162
|
+
padding: 0.4em 0.8em;
|
|
163
|
+
border-radius: 6px;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.slide.imageWithCaption {
|
|
167
|
+
display: flex;
|
|
168
|
+
flex-direction: column;
|
|
169
|
+
justify-content: center;
|
|
170
|
+
gap: 32px;
|
|
171
|
+
height: 100vh;
|
|
172
|
+
overflow: hidden;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.slide.imageWithCaption img {
|
|
176
|
+
max-height: 55vh; /* reduce slightly */
|
|
177
|
+
object-fit: contain;
|
|
178
|
+
flex-shrink: 0;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.slide.imageWithCaption p {
|
|
182
|
+
max-height: 20vh; /* hard cap text */
|
|
183
|
+
overflow: hidden;
|
|
184
|
+
text-overflow: ellipsis;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
/* -------------------------------
|
|
188
|
+
Two Column Text
|
|
189
|
+
------------------------------- */
|
|
190
|
+
|
|
191
|
+
|
|
192
|
+
.slide.twoColumnText {
|
|
193
|
+
flex-direction: row;
|
|
194
|
+
justify-content: center; /* center the columns block */
|
|
195
|
+
align-items: center;
|
|
196
|
+
gap: 64px;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.slide.twoColumnText > div {
|
|
200
|
+
flex: 1;
|
|
201
|
+
max-width: 520px; /* keeps columns visually centered */
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
|
|
205
|
+
/* QUOTE SLIDE */
|
|
206
|
+
.slide.quoteSlide {
|
|
207
|
+
display: flex;
|
|
208
|
+
flex-direction: column;
|
|
209
|
+
justify-content: center;
|
|
210
|
+
gap: 32px;
|
|
211
|
+
height: 100vh;
|
|
212
|
+
overflow: hidden;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.slide.quoteSlide blockquote {
|
|
216
|
+
max-height: 60vh;
|
|
217
|
+
overflow: hidden;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.slide.quoteSlide cite {
|
|
221
|
+
flex-shrink: 0;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
/* -------------------------------
|
|
225
|
+
Quote Slide
|
|
226
|
+
------------------------------- */
|
|
227
|
+
.slide.quoteSlide blockquote {
|
|
228
|
+
font-size: 3.8rem;
|
|
229
|
+
font-style: italic;
|
|
230
|
+
max-width: 60ch;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.slide.quoteSlide cite {
|
|
234
|
+
font-size: 2.4rem;
|
|
235
|
+
opacity: 0.75;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
/* -------------------------------
|
|
239
|
+
Big Number
|
|
240
|
+
------------------------------- */
|
|
241
|
+
.slide.bigNumber .number {
|
|
242
|
+
font-size: 9rem;
|
|
243
|
+
font-weight: 700;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
/* -------------------------------
|
|
247
|
+
Fill Image (Full Bleed)
|
|
248
|
+
------------------------------- */
|
|
249
|
+
.slide.fillImage {
|
|
250
|
+
padding: 0;
|
|
251
|
+
height: 100vh;
|
|
252
|
+
display: block;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.slide.fillImage img {
|
|
256
|
+
width: 100%;
|
|
257
|
+
height: 100%;
|
|
258
|
+
object-fit: cover;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
/* -------------------------------
|
|
262
|
+
Demo / Player UI (Optional)
|
|
263
|
+
------------------------------- */
|
|
264
|
+
#timebar {
|
|
265
|
+
position: fixed;
|
|
266
|
+
bottom: 0;
|
|
267
|
+
left: 0;
|
|
268
|
+
right: 0;
|
|
269
|
+
height: 32px;
|
|
270
|
+
background: rgba(0, 0, 0, 0.6);
|
|
271
|
+
backdrop-filter: blur(6px);
|
|
272
|
+
z-index: 10;
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
|
|
276
|
+
|
|
277
|
+
/* ///////fixes */
|
|
278
|
+
|
|
279
|
+
/* -------------------------------
|
|
280
|
+
Image + Bullets (Side by Side)
|
|
281
|
+
------------------------------- */
|
|
282
|
+
|
|
283
|
+
.slide.imageRightBulletsLeft,
|
|
284
|
+
.slide.imageLeftBulletsRight {
|
|
285
|
+
display: flex;
|
|
286
|
+
flex-direction: row;
|
|
287
|
+
align-items: center;
|
|
288
|
+
gap: 64px;
|
|
289
|
+
text-align: left;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
/* image on right */
|
|
293
|
+
.slide.imageRightBulletsLeft img {
|
|
294
|
+
order: 2;
|
|
295
|
+
}
|
|
296
|
+
/* -------------------------------
|
|
297
|
+
Table Slide
|
|
298
|
+
------------------------------- */
|
|
299
|
+
|
|
300
|
+
.slide.table {
|
|
301
|
+
display: flex;
|
|
302
|
+
justify-content: center;
|
|
303
|
+
align-items: center;
|
|
304
|
+
|
|
305
|
+
width: 100%;
|
|
306
|
+
height: 100vh;
|
|
307
|
+
|
|
308
|
+
padding: 64px 80px;
|
|
309
|
+
box-sizing: border-box;
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
/* actual table */
|
|
313
|
+
.slide.table table {
|
|
314
|
+
border-collapse: collapse;
|
|
315
|
+
width: 100%;
|
|
316
|
+
max-width: 1200px;
|
|
317
|
+
|
|
318
|
+
font-size: 2.8rem;
|
|
319
|
+
line-height: 1.4;
|
|
320
|
+
text-align: center;
|
|
321
|
+
|
|
322
|
+
color: var(--primaryColor, #e6e9ff);
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
/* header cells (title row) */
|
|
326
|
+
.slide.table thead th {
|
|
327
|
+
font-weight: 700; /* title row bold */
|
|
328
|
+
padding: 20px 24px;
|
|
329
|
+
|
|
330
|
+
border: 2px solid rgba(255, 255, 255, 0.35);
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
/* body cells */
|
|
334
|
+
.slide.table tbody td {
|
|
335
|
+
padding: 20px 24px;
|
|
336
|
+
|
|
337
|
+
border: 2px solid rgba(255, 255, 255, 0.25);
|
|
338
|
+
}
|
|
339
|
+
/* hide empty table header row */
|
|
340
|
+
.slide.table thead th:empty {
|
|
341
|
+
display: none;
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
.slide.table thead tr:has(th:empty) {
|
|
345
|
+
display: none;
|
|
346
|
+
}
|
|
347
|
+
|