Update pill styling

libris · Feb 28, 2024 · baf62f7 · baf62f7
1 parent fe733b0
commit baf62f7
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/lxl-web/src/colors.css b/lxl-web/src/colors.css
@@ -28,6 +28,7 @@ see https://tailwindcss.com/docs/customizing-colors#using-css-variables */
 	--bg-positive: var(--color-accent-light);
 	--bg-positive-inv: var(--color-primary);
 	--bg-cards: var(--color-white);
+	--bg-pill: var(--color-brown);
 }
 
 /* Dark mode */

diff --git a/lxl-web/src/lib/components/DecoratedData.svelte b/lxl-web/src/lib/components/DecoratedData.svelte
@@ -139,6 +139,9 @@
 {/if}
 
 <style>
+	a {
+		color: inherit;
+	}
 	.definition {
 		text-decoration: underline;
 		text-decoration-style: dotted;
@@ -148,6 +151,11 @@
 	}
 
 	.pill {
-		@apply inline-block rounded-md border border-accent-dark p-1 no-underline;
+		@apply mr-1 inline-block rounded-full bg-pill/8 px-3 py-1 no-underline;
+
+		&:hover,
+		&:focus {
+			@apply bg-pill/16;
+		}
 	}
 </style>
diff --git a/lxl-web/tailwind.config.js b/lxl-web/tailwind.config.js
@@ -24,7 +24,8 @@ export default {
 			head: 'rgb(var(--bg-head) / 1)',
 			positive: 'rgb(var(--bg-positive) / 1)',
 			'positive-inv': 'rgb(var(--bg-positive-inv) / 1)',
-			cards: 'rgb(var(--bg-cards) / 1)'
+			cards: 'rgb(var(--bg-cards) / 1)',
+			pill: 'rgb(var(--bg-pill) / <alpha-value>)'
 		},
 		opacity: {
 			80: '.80',