Tweak the template/css structure

templates/css/common.css

@@ -0,0 +1,26 @@
+@import url("./vars.css");
+
+@import url("./elements/button.css");
+@import url("./elements/input.css");
+@import url("./elements/lists.css");
+@import url("./elements/select.css");
+@import url("./elements/span.css");
+@import url("./elements/table.css");
+
+.ripcrypt {
+	.window-content {
+		padding: 0;
+		margin: 0;
+	}
+
+	.HeroSummaryCardV1,
+	.HeroSkillsCardV1 {
+		/* height: 270px; */
+		width: 680px;
+		--col-gap: 2px;
+	}
+
+	label, input, select {
+		cursor: pointer;
+	}
+}

templates/css/components/icon.css

@@ -0,0 +1,18 @@
+:host {
+	display: inline-block;
+}
+
+div {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+}
+
+svg {
+	width: var(--size, 1rem);
+	height: var(--size, 1rem);
+	fill: var(--fill);
+	stroke: var(--stroke);
+}

templates/css/elements/button.css

@@ -0,0 +1,24 @@
+.ripcrypt > .window-content button {
+	all: revert;
+	padding: 2px 4px;
+	background: var(--button-background);
+	color: var(--button-text);
+
+	&.icon {
+		padding: 0;
+		border-radius: 50%;
+		outline: none;
+		border: none;
+		width: 20px;
+		height: 20px;
+
+		&:hover:not(:disabled) {
+			cursor: pointer;
+			outline: none;
+		}
+
+		&:disabled {
+			opacity: 0.6;
+		}
+	}
+}

templates/css/elements/input.css

@@ -0,0 +1,19 @@
+.ripcrypt > .window-content {
+	input, .input {
+		all: revert;
+		box-sizing: border-box;
+		border: none;
+		outline: none;
+		font-family: inherit;
+		font-size: inherit;
+		position: relative;
+		background: var(--input-background);
+		color: var(--input-text);
+		padding: 0px 4px;
+
+		&[type="text"],
+		&[type="number"] {
+			border-bottom: var(--input-underline);
+		}
+	}
+}

templates/css/elements/lists.css

@@ -0,0 +1,34 @@
+.ripcrypt > .window-content {
+	ol {
+		list-style-type: none;
+		margin: 0;
+		padding: 0;
+		counter-reset: list-index 0;
+
+		> li {
+			margin: 0;
+			padding: 2px 4px;
+			display: flex;
+			flex-direction: row;
+			gap: 8px;
+			align-items: center;
+			counter-increment: list-index 1;
+			position: relative;
+		}
+
+		&.num-before > li::before,
+		&.num-after > li::after {
+			content: counter(list-index);
+			display: block;
+			position: absolute;
+			font-size: var(--font-size-12);
+		}
+
+		&.num-before > li::before {
+			position: revert;
+		}
+		&.num-after > li::after {
+			right: 4px;
+		}
+	}
+}

templates/css/elements/select.css

@@ -0,0 +1,11 @@
+.ripcrypt > .window-content select {
+	all: revert;
+	appearance: auto;
+	box-sizing: border-box;
+	border: none;
+	outline: none;
+	font-family: inherit;
+	font-size: inherit;
+	display: flex;
+	align-items: center;
+}

templates/css/elements/span.css

@@ -0,0 +1,5 @@
+.ripcrypt > .window-content span {
+	&.small {
+		font-size: var(--font-size-10)
+	}
+}

templates/css/elements/table.css

@@ -0,0 +1,16 @@
+.ripcrypt > .window-content table {
+	all: revert;
+	box-sizing: border-box;
+	border-collapse: collapse;
+
+	thead, tbody, tr {
+		all: revert;
+	}
+
+	td, th {
+		all: revert;
+		padding: 2px 4px;
+		font-weight: initial;
+		text-align: left;
+	}
+}

templates/css/themes/dark.css

@@ -0,0 +1,22 @@
+.theme-rc-dark,
+.theme-dark {
+	--accent-1: #056162;
+	--accent-2: #04262a;
+	--accent-3: #4fb258;
+
+	--base-text: white;
+	--base-background: black;
+
+	--section-header-text: white;
+	--section-header-background: var(--accent-1);
+
+	--alt-row-text: white;
+	--alt-row-background: var(--accent-2);
+
+	--input-underline: 2px dashed var(--accent-3);
+	--input-background: inherit;
+	--input-text: white;
+
+	--button-background: black;
+	--button-text: var(--accent-3);
+}

templates/css/themes/light.css

@@ -0,0 +1,14 @@
+.theme-rc-light,
+.theme-light {
+	--header-text: white;
+	--header-background: black;
+
+	--section-header-text: white;
+	--section-header-background: black;
+
+	--alt-row-text: black;
+	--alt-row-background: rgba(0,0,0, 0.3);
+
+	--base-text: black;
+	--base-background: white;
+}

templates/css/vars.css

@@ -0,0 +1,2 @@
+@import url("./themes/dark.css");
+/* @import url("./themes/light.css"); */