Add support for the tabs in the two contentful Actor sheets

styles/Apps/common.css

@@ -6,4 +6,26 @@
 		gap: 0.5rem;
 		overflow: auto;
 	}
+
+	> .window-content nav.system-tabs {
+		display: flex;
+		flex-direction: row;
+		justify-content: left;
+		align-items: center;
+		gap: 8px;
+
+		button {
+			border: none;
+			text-shadow: none;
+			box-shadow: none;
+
+			&.active {
+				outline: 1px solid var(--tab-button-active-border);
+			}
+
+			&:hover {
+				background: var(--tab-button-hover-bg);
+			}
+		}
+	}
 }

styles/main.css

@@ -1,9 +1,10 @@
 @layer resets, themes, elements, components, partials, apps, exceptions;
 
 /* Resets */
+@import url("./resets/button.css") layer(resets);
 @import url("./resets/hr.css") layer(resets);
 @import url("./resets/inputs.css") layer(resets);
-@import url("./resets/button.css") layer(resets);
+@import url("./resets/tabs.css") layer(resets);
 
 /* Themes */
 @import url("./themes/dark.css") layer(themes);

styles/resets/tabs.css

@@ -0,0 +1,10 @@
+.taf > .window-content {
+	nav.tabs.system-tabs {
+		all: initial;
+	}
+
+	nav.sheet-tabs.top-tabs {
+		margin-inline: 0;
+		margin-top: calc(var(--spacer-8) * -1);
+	}
+}

styles/themes/dark.css

@@ -4,6 +4,9 @@
 	--spinner-outer-colour: white;
 	--spinner-inner-colour: #FF3D00;
 
+	--tab-button-active-border: rebeccapurple;
+	--tab-button-hover-bg: var(--color-cool-3);
+
 	/* Chip Variables */
 	--chip-color: #fff7ed;
 	--chip-background: #2b3642;

styles/themes/light.css

@@ -4,6 +4,9 @@
 	--spinner-outer-colour: black;
 	--spinner-inner-colour: #FF3D00;
 
+	--tab-button-active: rebeccapurple;
+	--tab-button-hover-bg: var(--color-light-3);
+
 	/* Chip Variables */
 	--chip-color: #18181b;
 	--chip-background: #fafafa;