RC-88 | String Set Input

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);
 }