💄 (#114): add table css

Signed-off-by: Vinicius Reis <vinicius.reis@nextcloud.com>
nextcloud · Mar 31, 2022 · 9d4bffe · 9d4bffe
1 parent 28ac4bd
commit 9d4bffe
Showing 1 changed file with 29 additions and 0 deletions.
diff --git a/css/prosemirror.scss b/css/prosemirror.scss
@@ -252,6 +252,35 @@ div.ProseMirror {
 		}
 	}
 
+	// TODO: create new css variables to improve the theming capability.
+	table {
+		border-collapse: collapse;
+		border-spacing: 0;
+		width: 100%;
+		table-layout: fixed;
+		white-space: normal; // force text to wrapping
+
+		td, th {
+			border: 1px solid var(--color-border);
+			color: var(--color-main-text);
+			padding: 0.5em 0.75em;
+			vertical-align: top;
+			max-width: 100%;
+		}
+		thead tr {
+			background-color: var(--color-background-darker);
+			th {
+				font-weight: bold;
+				border-color: var(--color-border-dark);
+			}
+		}
+		tbody tr {
+			background-color: var(--color-main-background);
+			&:hover, &:active, &:focus {
+				background-color: var(--color-background-dark);
+			}
+		}
+	}
 }
 
 .ProseMirror-focused .ProseMirror-gapcursor {