RC-88 | String Set Input

templates/Apps/AllItemSheetV1/style.css

@@ -2,6 +2,11 @@
 	--input-height: 1rem;
 	--col-gap: 8px;
 
+	--string-tags-tag-text: var(--header-text);
+	--string-tags-tag-background: var(--header-background);
+	--string-tags-add-text: white;
+	--string-tags-add-background: var(--accent-1);
+
 	display: grid;
 	grid-template-rows: minmax(0, 1fr);
 	grid-auto-rows: minmax(0, 1fr);
@@ -13,6 +18,11 @@
 	> :nth-child(odd) {
 		background: var(--alt-row-background);
 		color: var(--alt-row-text);
+
+		--string-tags-tag-text: var(--header-text);
+		--string-tags-tag-background: var(--header-background);
+		--string-tags-add-text: var(--button-text);
+		--string-tags-add-background: var(--button-background);
 	}
 
 	label, .label {
@@ -25,7 +35,15 @@
 		font-weight: bold;
 	}
 
-	.input-group {
-		display: contents;
+	[data-input-type="string-set"] {
+		padding: 2px 4px;
+		display: flex;
+		flex-direction: row;
+		column-gap: var(--col-gap);
+		grid-row: span 2;
+
+		label, .label {
+			padding: 0;
+		}
 	}
 }

templates/css/common.css

@@ -5,6 +5,7 @@
 @import url("./elements/lists.css");
 @import url("./elements/select.css");
 @import url("./elements/span.css");
+@import url("./elements/string-tags.css");
 @import url("./elements/table.css");
 
 .ripcrypt {

templates/css/elements/string-tags.css

@@ -0,0 +1,28 @@
+.ripcrypt string-tags {
+	--input-background: var(--string-tags-input-background);
+
+	display: grid;
+	grid-template-columns: 1fr min-content;
+	grid-template-rows: repeat(2, minmax(0, 1fr));
+
+	padding: 2px;
+	border: var(--string-tags-border);
+
+	.tags {
+		grid-column: 1 / -1;
+	}
+
+	.tag {
+		background: var(--tag-background, var(--header-background));
+		color: var(--tag-text, var(--header-text));
+		padding: 2px 4px;
+	}
+
+	button.icon.icon {
+		font-family: var(--font-awesome);
+		background: var(--string-tags-add-background);
+		color: var(--string-tags-add-text);
+		width: 30px;
+		border-radius: 4px;
+	}
+}

templates/css/themes/dark.css

@@ -7,6 +7,9 @@
 	--base-text: white;
 	--base-background: black;
 
+	--header-text: black;
+	--header-background: var(--accent-3);
+
 	--section-header-text: white;
 	--section-header-background: var(--accent-1);
 
@@ -19,4 +22,11 @@
 
 	--button-background: black;
 	--button-text: var(--accent-3);
+
+	/* Additional Variables */
+	--string-tags-border: inherit;
+	--string-tags-tag-background: inherit;
+	--string-tags-tag-text: inherit;
+	--string-tags-add-background: inherit;
+	--string-tags-add-text: var(--accent-3);
 }