feat(web): add dummy toolbar + tailwindcss colors

1 files changed, 50 insertions, 0 deletions

diff --git a/web/src/components/toolbar/index.css b/web/src/components/toolbar/index.css
new file mode 100644
index 0000000..3f78671
--- /dev/null
+++ b/web/src/components/toolbar/index.css
@@ -0,0 +1,50 @@
+ntv-toolbar {
+  display: flex;
+  border-radius: 4px;
+  background: var(--color-neutral-800);
+  width: min-content;
+}
+
+ntv-toolbar > section {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.5rem;
+}
+
+ntv-toolbar button[data-variant="menu"] {
+  border-radius: 4px;
+  background: var(--color-neutral-700);
+  padding: 0 0.625rem;
+  height: 1.5rem;
+  color: white;
+  font-size: 0.75rem;
+}
+
+ntv-toolbar button[data-variant="icon"] {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4px;
+  background: var(--color-neutral-700);
+  padding: 0.125rem 0.625rem;
+  aspect-ratio: 1;
+  height: 1.5rem;
+  color: white;
+  font-weight: 600;
+  font-size: 0.75rem;
+}
+
+ntv-toolbar button:hover {
+  background: var(--color-neutral-600);
+}
+
+ntv-toolbar input {
+  border: 1px solid var(--color-neutral-700);
+  border-radius: 4px;
+  background: var(--color-neutral-900);
+  width: 2.5rem;
+  height: 1.5rem;
+  color: white;
+  font-size: 0.75rem;
+  text-align: center;
+}