RC-90 | Add support for bar-input controls in item sheets

templates/Apps/AllItemSheetV1/style.css

@@ -14,8 +14,11 @@
 	--input-text: white;
 	--input-background: var(--accent-2);
 
+	--pill-width: 100%;
+	--pill-border-radius: 4px;
+
 	display: grid;
-	grid-template-columns: auto minmax(0, 1fr);
+	grid-template-columns: auto 200px;
 	column-gap: var(--col-gap);
 	row-gap: var(--row-gap);
 

templates/css/common.css

@@ -3,6 +3,7 @@
 @import url("./elements/button.css");
 @import url("./elements/input.css");
 @import url("./elements/lists.css");
+@import url("./elements/pill-bar.css");
 @import url("./elements/select.css");
 @import url("./elements/span.css");
 @import url("./elements/string-tags.css");

templates/css/elements/pill-bar.css

@@ -0,0 +1,47 @@
+.ripcrypt > .window-content .pill-bar {
+	display: flex;
+	flex-direction: row;
+	width: var(--pill-width, 100px);
+	border: 2px solid var(--pill-border);
+	border-radius: var(--pill-border-radius, 999px);
+	background: var(--pill-background);
+	align-items: center;
+	gap: 8px;
+
+	> input {
+		color: var(--pill-input-text);
+		background: var(--pill-input-background);
+		border-radius: var(--pill-border-radius, 999px);
+		flex-shrink: 1;
+		flex-grow: 1;
+		min-width: 50px;
+		max-width: unset;
+		width: initial;
+		flex-basis: 50px;
+		text-align: center;
+
+		&:disabled {
+			color: var(--pill-input-disabled-text);
+			background: var(--pill-input-disabled-background);
+		}
+	}
+
+	> :first-child {
+		order: 1;
+	}
+	> :last-child {
+		order: 3;
+	}
+
+	&::after {
+		display: block;
+		content: "";
+		order: 1;
+		position: relative;
+		width: 2px;
+		height: 75%;
+		transform: rotate(30deg);
+		background: var(--pill-divider, var(--pill-border));
+		z-index: 1;
+	}
+}

templates/css/elements/string-tags.css

@@ -2,8 +2,8 @@
 	--input-background: var(--string-tags-input-background);
 
 	display: grid;
-	grid-template-columns: 1fr min-content;
-	grid-template-rows: repeat(2, minmax(0, 1fr));
+	grid-template-columns: minmax(0, 1fr) min-content;
+	grid-template-rows: repeat(2, min-content);
 
 	border: var(--string-tags-border);
 

templates/css/themes/dark.css

@@ -33,4 +33,12 @@
 	--string-tags-tag-text: inherit;
 	--string-tags-add-background: inherit;
 	--string-tags-add-text: var(--accent-3);
+
+	--pill-border: var(--accent-2);
+	--pill-background: var(--accent-2);
+	--pill-divider: var(--accent-3);
+	--pill-input-text: white;
+	--pill-input-background: var(--accent-2);
+	--pill-input-disabled-text: white;
+	--pill-input-disabled-background: black;
 }