refactor: separate media module

source/03 images tables.css

@@ -0,0 +1,120 @@
+
+/* ───────────────────────────────────────────────── */
+/** Tables
+──────────────────────────────────────────────────── */
+/* most table styling via Obsidian Variables */
+
+/* FIX wrong variable in Obsidian core */
+.markdown-rendered th {
+	line-height: var(--table-line-height);
+}
+
+/* make lists in tables take up less space */
+.markdown-rendered table :is(ul, ol) {
+	line-height: 1.1;
+	/* stylelint-disable-next-line declaration-no-important */
+	margin-block: 0 0 !important;
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.markdown-preview-view table {
+	margin-top: 0.5em;
+	margin-bottom: 1.2em;
+}
+
+.is-live-preview.markdown-source-view.mod-cm6 .cm-embed-block:hover {
+	border-radius: 0;
+}
+
+/* FIX disable buggy hover effect on odd table rows */
+body .markdown-rendered tbody tr:nth-child(odd):hover {
+	background-color: var(--table-row-alt-background);
+}
+
+/* automatically turn off readable line length when there is a table */
+.unrestricted-line-length-tables:not(.is-mobile)
+	:is(.markdown-source-view, .markdown-preview-view):has(
+		table,
+		.HyperMD-table-2
+	) {
+	--file-line-width: 100%;
+}
+
+/* Obsidian 1.5: Active Table Cells (requires Obsidian installer 1.1.9) */
+body.highlight-active-cell .table-cell-wrapper:has( .cm-s-obsidian) {
+	outline: 2.5px solid var(--color-accent);
+}
+
+/* FIX lists in tables looking off */
+.table-cell-wrapper .list-bullet {
+	float: none;
+}
+
+/* ───────────────────────────────────────────────── */
+/** Images
+──────────────────────────────────────────────────── */
+/* .workspace-leaf-content so images in modal aren't affected, :not([data-type="image"]) so
+ * images as files aren't affected */
+body:not(.is-mobile, .max-image-size-toggle)
+	.workspace-leaf-content:not([data-type="image"])
+	img:not(:active),
+body:not(.is-mobile, .max-image-size-toggle)
+	.oz-image-widget-cm6
+	> img:not(:active) {
+	max-width: calc(var(--image-size) * 1%);
+	cursor: zoom-in;
+}
+
+/* Remove Image Size Toggle in Style settings, since only used for command
+ * (see dummy setting in Style Settings) */
+.style-settings-container .setting-item[data-id="max-image-size-toggle"] {
+	display: none;
+}
+
+/* images as file with reduced with to avoid collusions with breadcrumbs or
+ * traffic lights */
+.workspace-leaf-content .image-container img {
+	max-width: 97%;
+	margin-top: 1em;
+}
+
+/* Image Alt as caption
+(except when no explicit alt is provided and urls are the alt text) */
+body:not(.no-image-alttext-caption)
+	.image-embed[alt]:not(
+		[alt$=".png"],
+		[alt$=".jpg"],
+		[alt$=".jpeg"],
+		[alt$=".tiff"]
+	)::after {
+	padding-top: 2px;
+	margin-bottom: 1em;
+	font-family: var(--font-interface);
+	font-size: var(--font-smaller);
+	font-style: italic;
+	color: var(--text-gray);
+	content: attr(alt);
+}
+
+/* centers image caption */
+body:not(.no-image-alttext-caption) .image-embed::after {
+	display: block;
+	text-align: center;
+}
+
+/* .emoji class are Twitter Images for Emojis from Emoji Toolbar */
+.view-content img[src]:not(.emoji, .link-favicon) {
+	border: var(--thin-muted-border);
+	border-radius: var(--radius-s);
+}
+
+/* center image */
+.markdown-source-view.mod-cm6 .cm-content > img,
+.view-content .image-embed img:not(.emoji) {
+	display: block;
+	/* stylelint-disable-next-line declaration-no-important */
+	margin-right: auto !important;
+	/* stylelint-disable-next-line declaration-no-important */
+	margin-left: auto !important;
+}