forked from efemkay/obsidian-modular-css-layout
-
Notifications
You must be signed in to change notification settings - Fork 0
/
MCL Gallery Cards.css
341 lines (286 loc) · 15.2 KB
/
MCL Gallery Cards.css
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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
/* === README ===
Snippet: MCL Gallery Cards / Author: Faiz Khuzaimah / twitter: @faizkhuzaimah / github: https://github.com/efemkay
Version 0.9.0 (updated 2023-xx-xx) (not official yet)
- image float
Version 0.8.1 (updated 2022-12-10)
- fix gallery margin-left for minimal to be more targetted (fix issue with note embed issue)
- fix issue with Breadcrumbs plugin and minimal-float where the plugin "banner" flushed to left
Version 0.8.0 (updated 2022-11-28)
- adjustment for SNW plugin indicators in image gallery. Option to hide (default) or show.
- fix gap between the images in image gallery (especially the vertical vs horizontal gap)
Version 0.6.2 (updated 2022-10-22)
- rollover main branch to support Obsidian 1.0.0
This snippet is part of MCL collection of snippets for customising layout, and it provides the following
- "gallery" callout-metadata i.e. [!<any-callout>|gallery] for flex/grid layout
- use together with MCL Multi Column [!blank-container] for invisible container
- YAML `cssClass: image-gallery` to achieve similar to callout but using only Contextual Typography plugin & <p>
- Image Zoom via css
- Dimension control for images in lists <ul>
Credits to @kepano Minimal Theme and @SlRvb ITS Theme for inspiration
*/
/* === Master Setting === */
/* set the defaults */
body{
--img-border-radius: 15px;
--img-max-height: 300px;
--img-max-width: 350px;
--img-max-height-list: 270px;
--img-max-width-list: 300px;
--callout-gallery-gap: 5px;
--gallery-snw-display: none;
}
img {border-radius: var(--img-border-radius);}
/* === Image Gallery using <p> and Callout === */
/* Editing and Reading View - Gallery using <p> and Callout. Using <p> (in Reading View) to contain and format as gallery view using metadata="gallery" to contain and format as gallery view */
/* Create display: flex and key adjustment on margin and gap */
.image-gallery div[data-embed-type="image"] > p,
div[data-callout-metadata*="gallery"].callout > .callout-content > p
{ display: flex; gap: var(--callout-gallery-gap); margin-top: calc( var(--callout-gallery-gap) ); margin-bottom: 0; }
.image-gallery div[data-embed-type="image"].el-embed-image.el-p { margin-top: var(--callout-gallery-gap); }
div[data-callout-metadata*="gallery"].callout > .callout-content { --callout-content-padding: 0.5rem 0 0 0; }
/* Introduce subtle border and make the gallery as object-fit: cover */
.image-gallery div[data-embed-type="image"] > p img,
div[data-callout-metadata*="gallery"].callout > .callout-content > p img
{ max-height: var(--img-max-height); border: 1px solid var(--background-modifier-border); object-fit: cover; display: block;}
/* display: block for img is important to control the hidden margin-bottom but for Minimal, it uses display: flex for top level divs which pose another "margin" issues no plan to solve yet as this is not critical */
/* Editing View - as alternate to <p> in Reading View since there's no natural container in Editing View using <p> */
.image-gallery div:not(.cm-callout):not(.HyperMD-list-line).image-embed img
{ max-height: calc(var(--img-max-height)/1.5); display: unset; object-fit: cover; margin-right: var(--callout-gallery-gap); }
/* previously i have max-width: 50% */
/* Special Adjustment for Shimmering Focus. Reading View. Overriding max-width */
body:not(.is-mobile) .app-container.app-container .image-gallery p img[src],
body:not(.is-mobile) .app-container.app-container div[data-callout-metadata*="gallery"].callout img[src]
{ max-width: 100%; width: unset; margin-block: unset;}
/* Special Adjustment for Minimal theme. Left margin. Editing Live Preview. */
.markdown-source-view.mod-cm6 div[data-callout-metadata*="gallery"] .internal-embed.image-embed
{ margin-left: 0 !important; width: unset;}
/* Special Adjustment for Minimal theme. Override width: 100% */
.full-width-media .image-gallery .image-embed img:not(.emoji):not([width]) { width: unset; }
/* Special Adjustment - for SNW plugin */
.image-gallery div[data-embed-type="image"] > p .snw-embed-preview,
.image-gallery .internal-embed.image-embed ~ .snw-reference.snw-embed,
div[data-callout-metadata*="gallery"].callout > .callout-content > p .snw-embed-preview
{ display: var(--gallery-snw-display); width: min-content; height: min-content; }
div[data-callout-metadata*="gallery"].callout > .callout-content > p .internal-embed.image-embed ~ br {display: none;}
/* === Images in Lists === */
/* limit the width when in a list (ul only) */
body:not(.list-image-control-off) :is(.HyperMD-list-line,ul) .image-embed.image-embed img:not([width])
{ max-height: var(--img-max-height-list); max-width: var(--img-max-width-list); margin-inline: 0; display: unset; object-fit: cover; }
/* clamping max width to viewport when in mobile. possibly can adopt for desktop as well */
body.is-mobile:not(.list-image-control-off) :is(.HyperMD-list-line,ul) .image-embed.image-embed img:not([width])
{ max-width: clamp(calc(var(--img-max-width-list)/2), var(--img-max-width-list), 100%);}
/*
div:not(.cm-callout).image-embed img { max-height: 200px; max-width: 300px; height: 200px; object-fit: cover;}
*/
/* === Image Float === */
/* variables */
body {
--float-left-margin: 4px 12px 4px 0;
--float-right-margin: 4px 0 4px 12px;
--float-snw-display: none;
}
/* float in both Live Preview and Reading View */
img[alt*="left"], .internal-embed.image-embed[alt*="float-left"] {float: left }
img[alt*="right"], .internal-embed.image-embed[alt*="float-right"] {float: right; }
img[alt*="left"] { margin: var(--float-left-margin); }
img[alt*="right"] { margin: var(--float-right-margin); }
div.no-float {clear: both; display: inline-grid; height: 10px; width: 100%; background-color: blue;}
/* Special Adjustment for SNW plugin */
.internal-embed.image-embed:is([alt="left"],[alt*="|left"],[alt*="left|"],[alt*="float-left"],[alt="right"],[alt*="|right"],[alt*="right|"],[alt*="float-right"]) + .snw-reference.snw-embed { display: var(--float-snw-display); }
.internal-embed.image-embed:is([alt="left"],[alt*="|left"],[alt*="left|"],[alt*="float-left"],[alt="right"],[alt*="|right"],[alt*="right|"],[alt*="float-right"]) + .snw-reference.snw-embed + br { display: none;}
/* Special Adjustment for Themes */
/* Blue Topaz. uses body[class*="notebook-liked-markdown-page"] as identifier */
body[class*="notebook-liked-markdown-page"] .view-content .internal-embed.is-loaded img[alt*="left"]:not([class*="emoji"]) { margin: var(--float-left-margin) !important; }
body[class*="notebook-liked-markdown-page"] .view-content .internal-embed.is-loaded img[alt*="right"]:not([class*="emoji"]) { margin: var(--float-right-margin) !important; }
/* Minimal. Uses body[class*="minimal-tab-title"] as identifier */
body[class*="minimal-tab-title"] .markdown-source-view.mod-cm6 .internal-embed.image-embed {width: auto; max-width: unset; margin-left: 0 !important;}
/* Duplicate from Multi Column, in case users don't enable that snippet (row 426-437) */
/* Special Adjustment for Minimal theme. Undo the theme flex layout by default. To apply per note basis */
.contextual-typography .minimal-float.markdown-preview-view.markdown-preview-view .markdown-preview-sizer { display: unset; }
/* Special Adjustment for Minimal theme Live Preview float support. Need to revert cm-content width to default theme but cm-embed to auto */
.minimal-float:not([class*="wide-"]).markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer { width: calc(var(--line-width-adaptive) - var(--folding-offset)); max-width: calc(var(--max-width) - var(--folding-offset)); margin-right: auto; margin-left: max(calc(50% + var(--folding-offset) - var(--line-width-adaptive)/ 2), calc(50% + var(--folding-offset) - var(--max-width)/ 2))!important; }
.minimal-float:not([class*="wide-"]).markdown-source-view.mod-cm6.is-readable-line-width .cm-line { width: auto; max-width: 100%; margin-left: 0 !important; }
.minimal-float:not([class*="wide-"]).markdown-source-view.mod-cm6.is-readable-line-width .cm-embed-block.cm-callout> :is(.callout[data-callout-metadata*="left"], .callout[data-callout-metadata*="right"]) { max-width: 98%; }
.minimal-float:not([class*="wide-"]).markdown-source-view.mod-cm6 .cm-embed-block.cm-callout > .callout { width: auto; }
/* Special Adjustment for Minimal theme Live Preview float support. Undo margin-left for Image */
.minimal-float:not([class*="wide-"]).markdown-source-view.mod-cm6 .cm-embed-block.cm-callout :is(.callout[data-callout-metadata*="left"], .callout[data-callout-metadata*="right"]) .internal-embed.image-embed { margin-left: auto !important; }
/* fix to support Breadcrumbs plugin */
body[class*="minimal-tab-title"].contextual-typography .minimal-float.markdown-preview-view.markdown-preview-view .BC-trail.markdown-preview-sizer { display: flex; }
/* === Image Zoom === */
/* must check "Enable Image Zoom via CSS" via Style Settings */
/* set scale to 100% for images */
.image-zoom .view-content :is(.cm-editor, .markdown-preview-view) img { max-width: 100%; cursor: zoom-in; }
/* css zoom for images */
body.image-zoom:not(.is-mobile) .view-content :is(.cm-editor,.markdown-preview-view) img:active,
body.image-zoom:not(.is-mobile) .view-content .image-embed:active,
.image-zoom :is(.HyperMD-list-line,ul) .image-embed.image-embed img:active {
cursor: zoom-out; display: block; background: rgba(0,0,0,0.5);
max-height: calc(100% + 1px); max-width: calc(100% - 20px); height: calc(100% + 1px); width: 100%;
object-fit: contain; margin: -0.5px auto 0; padding: 0; text-align: center;
position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
}
/* === Mermaid SVG max-width 100% and zoom on click === */
/* for Mermaid SVG zoom, must check "Enable Mermaid Zoom via CSS" via Style Settings */
/* set scale to 100% for mermaid diagram */
body:not(.mermaid-scale-off) .view-content :is(.cm-editor, .markdown-preview-view) .mermaid svg { max-width: 100%; height: 100%}
.mermaid-zoom .view-content :is(.markdown-preview-view) .mermaid svg { cursor: zoom-in; }
/* css zoom for mermaid diagram */
body.mermaid-zoom:not(.is-mobile) .view-content :is(.cm-edito,.markdown-preview-view) .mermaid svg:active {
cursor: zoom-out; display: block; object-fit:contain; margin: -0.5px auto 0; padding: 0;
max-height: calc(100% + 1px); max-width: calc(100% - 20px); height: calc(100% + 1px); width: 100%;
text-align: center; z-index: 100; position: fixed; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8);
}
/* === ALPHA VERSION table-card === */
/* setting the borders */
.table-card table > tbody > tr,
.table-card.markdown-source-view.mod-cm6 .dataview.table-view-table .table-view-tbody tr {border: 1px solid black; border-radius: 0.5em;}
.table-card.markdown-source-view.mod-cm6 .dataview.table-view-table .table-view-tbody td {border-right: unset;}
:is(.theme-light, .theme-dark) .table-card table,
.table-card:is(*,.is-live-preview.is-live-preview) table :is(td,tr) {background-color: unset;}
.table-card .dataview.table-view-table.dataview.table-view-table {border: unset;} /* for primary */
.table-card table tbody { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 0.5em; clear: both;}
.table-card table > tbody > tr {display: flex; flex-direction: column; padding-inline: 0.5em;}
.table-card:is(*,.is-live-preview) table.table-view-table > tbody > tr > td:not(:first-child) {border-top: 1px solid gray; }
.table-card table.table-view-table > tbody > tr {margin: unset;}
/* thead adjustment */
/* table > thead {display: flex; } */
.table-card table > thead {float: right;}
.table-card table.table-view-table > thead > tr {margin: unset;}
.table-card table.table-view-table > thead > tr > th {border: unset;}
.table-card .dataview.table-view-table.dataview.table-view-table :is(thead, th) {padding-block: unset;}
/* === ALPHA VERSION testing Timeline in lists === */
/*
.tag-mcltimeline > ul > li > *:not(ul) { text-align: center; align-self: baseline; }
.tag-mcltimeline > ul > li {
display: grid;
grid-template-columns: 0 3fr 7fr;
grid-template-rows: auto;
grid-template-areas:
"indicator timeline details"
"indicator . details";
grid-column-gap: 1em;
}
.tag-mcltimeline > ul > li > ul { grid-area: details; text-align: left; }
.tag-mcltimeline > ul > li > .collapse-indicator { grid-area: indicator; }
.tag-mcltimeline > ul ul { margin-left: 0.5em; }
*/
/* @settings
name: Modular CSS Layout - Gallery Cards
id: modular-css-layout-gc
settings:
-
id: gc-general-title
title: General Image Settings
type: heading
level: 2
collapsed: true
-
id: image-zoom
title: Enable Image Zoom via CSS
type: class-toggle
-
id: img-border-radius
title: Image Border Radius (any unit, no space)
type: variable-text
default: 15px
-
id: gc-callout-title
title: Image Gallery Settings
description: For image gallery using `gallery` callout-metadata and `image-gallery` YAML
type: heading
level: 2
collapsed: true
-
id: gallery-snw-display
title: Hide Strange New World Indicators in Image Gallery
type: variable-select
default: none
options:
-
label: Show
value: inline-block
-
label: Hide
value: none
-
id: callout-gallery-gap
title: Gallery Callout Gap (any unit, no space)
type: variable-text
default: 5px
-
id: img-max-height
title: Max Height for Images (any unit, no space)
type: variable-text
default: 300px
-
id: img-max-width
title: Max Width for Images (any unit, no space)
type: variable-text
default: 350px
-
id: gc-float-title
title: Image Float / Aside
type: heading
level: 2
collapsed: true
-
id: float-left-margin
title: Max Height for Images (any unit, no space)
description: Enter in following order - "top right bottom left"
type: variable-text
default: 4px 12px 4px 0px
-
id: float-right-margin
title: Max Height for Images (any unit, no space)
description: Enter in following order - "top right bottom left"
type: variable-text
default: 4px 0px 4px 12px
-
id: float-snw-display
title: Hide SNW indicator in Image Float / Aside
type: variable-select
default: none
options:
-
label: Show
value: inline-block
-
label: Hide
value: none
-
id: gc-list-title
title: Image in List Settings
type: heading
level: 2
collapsed: true
-
id: list-image-control-off
title: Disable Control for Image in List
description: Disabling will revert image dimension to Obsidian default behaviour
type: class-toggle
-
id: img-max-height-list
title: Max Height for Images (any unit, no space)
type: variable-text
default: 270px
-
id: img-max-width-list
title: Max Width for Images (any unit, no space)
type: variable-text
default: 300px
-
id: gc-mermaid-title
title: Mermaid SVG Settings
type: heading
level: 2
collapsed: true
-
id: mermaid-scale-off
title: Disable scaling for Mermaid diagram
description: Disabling will revert Mermaid diagram dimension to Obsidian default behaviour
type: class-toggle
-
id: mermaid-zoom
title: Enable Image Zoom via CSS
type: class-toggle
*/