Update styles

jensmtg · Sep 5, 2022 · adb61dd · adb61dd
1 parent c2e55f3
commit adb61dd
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 49 deletions.
diff --git a/main.css b/main.css
diff --git a/src/InfluxReactComponent.tsx b/src/InfluxReactComponent.tsx
@@ -9,25 +9,33 @@ export default function InfluxReactComponent(props: InfluxReactComponentProps):
 
 	const { influxFile } = props
 
+	const length = influxFile?.components.length || 0
 
 	return <div className="influx">
+
+		<h3>Influx ({length})</h3>
+
 		{influxFile?.components.map((extended: ExtendedInlinkingFile) => {
 
 			return (
-				<div key={extended.inlinkingFile.file.basename}>
-					<h2>{extended.inlinkingFile.file.basename} &nbsp;
-						<span
-							style={{ opacity: 0.5 }}
+				<div
+					key={extended.inlinkingFile.file.basename}
+					className="influx-inlinked">
+					<div className="influx-inlinked-metacol">
+						<h2>{extended.inlinkingFile.file.basename}</h2>
+					</div>
+					<div className="influx-inlinked-entries">
+						<h2><span
 							dangerouslySetInnerHTML={{ __html: extended.titleInnerHTML }}
-						/>
-					</h2>
-					{extended.inner.map((div: HTMLDivElement, i: number) => (
-						<div
-							key={i}
-							dangerouslySetInnerHTML={{ __html: div.innerHTML }}
-							className={"dvutil"}
-						/>
-					))}
+						/></h2>
+						{extended.inner.map((div: HTMLDivElement, i: number) => (
+							<div
+								key={i}
+								dangerouslySetInnerHTML={{ __html: div.innerHTML }}
+								className={"influx-inlinked-entry"}
+							/>
+						))}
+					</div>
 
 				</div>
 			)

diff --git a/styles.css b/styles.css
@@ -1,33 +1,78 @@
 
 
 .influx {
-    border: 1px solid khaki;
+    /* border: 1px dotted lightsteelblue; */
+    border-radius: 10px;
+    box-shadow: #aaa;
+    padding: 8px;
+    display: flex;
+    flex-direction: column;
 }
 
-.dvutil {
+
+
+.influx h3 {
+    font-size: 10px!important;
+    line-height: 10px;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    margin: 0;
+    color: lightsteelblue;
+    margin-bottom: 10px;
+}
+
+.influx-inlinked {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    display: flex;
+    flex-direction: row;
+}
+
+.influx-inlinked-metacol {
+    width: 160px;
+    display: flex;
+    flex-direction: column;
+    border-right: 1px dotted lightblue;
+    padding-right: 1rem;
+
+}
+
+.influx-inlinked h2 {
+    font-size: 11px!important;
+    line-height: 11px;
+    margin: 0;
+    padding: 0;
+}
+
+.influx-inlinked-entries {
+    width: 100%;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
     padding-left: 1rem;
-    margin-left: 1rem;
+
+}
+
+.influx-inlinked-entry {
+    padding-left: 8px;
+    margin-left: 8px;
     font-size: 11px!important;
-    border-left: 1px solid #aaa;
-    background-color: #fafafa;
-    margin-bottom: 2rem;
+    /* background-color: #f9f9f9; */
+    /* margin-bottom: 2rem; */
     line-height: 13px!important;
 }
 
 
-.markdown-source-view .dvutil * {
+.markdown-source-view .influx-inlinked-entry * {
     margin-block-end: -13px!important;
 
 }
 
-.markdown-source-view .dvutil li:nth-child(1) {
+.markdown-source-view .influx-inlinked-entry li:nth-child(1) {
     margin-block-start: -13px!important;
 }
 
-.block-language-influx {
-    color: 'red'
-}
 
 .ancestor {
-    color: #bbb;
+    color: #666;
 }