angel/inventory-plus-plus
1
0
Fork 0
Code Issues 34 Pull Requests Actions Packages Projects 4 Releases Wiki Activity

first drafts for inventory sync page

Browse Source
This commit is contained in:
angel
2026-01-09 18:03:54 -07:00
parent 846f56e50b
commit a7c8fe4d64
40 changed files with 1310 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/site/styles/borders.css
+15 -7
View File
@@ -1,8 +1,13 @@
@theme inline {
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
}
:root {
--border-thin: 1px;
--border-medium: 2px;
}
@layer base {
@@ -19,16 +24,19 @@
}
select {
border-width: 2px;
border-width: var(--border-medium);
border-color: var(--border);
border-radius: var(--radius-lg);
}
.border-thin {
border-width: 1px;
border-width: var(--border-thin);
}
.border-medium {
border-width: var(--border-medium);
}
.border-button {
border-width: 2px;
border-width: var(--border-medium);
border-radius: var(--radius-lg);
}
}
internal/site/styles/components.css
+76
View File
@@ -0,0 +1,76 @@
@layer components {
table {
display: block; /* fixes scrolling when in a flexbox */
border-collapse: collapse;
thead {
border-color: var(--table-border);
border-width: var(--border-thin) var(--border-thin) 0 var(--border-thin);
& > tr {
border-color: var(--table-body-border);
& > :is(th, td) {
border-color: var(--table-body-border);
background-color: var(--table-thead);
}
}
& + tbody {
border-top-width: var(--border-thin);
}
}
tbody {
border-color: var(--table-body-border) var(--table-border);
border-left-width: var(--border-thin);
border-right-width: var(--border-thin);
border-bottom-width: 0;
& > tr {
border-color: var(--table-border);
& > :is(th, td) {
border-color: var(--table-border);
background-color: var(--table-tbody);
}
}
&:has(+ tfoot) {
border-bottom-width: var(--border-thin);
}
}
tfoot {
border-color: var(--table-border);
border-width: 0 var(--border-thin) var(--border-thin) var(--border-thin);
& > tr {
border-color: var(--table-body-border);
& > :is(th, td) {
border-color: var(--table-body-border);
background-color: var(--table-tfoot);
}
}
}
th,
td {
padding: 0.5em;
}
tr {
border-width: 0 0 var(--border-thin) 0;
&:last-child {
border: none;
}
}
th, td {
border-width: 0 var(--border-thin) 0 0;
&:last-child {
border: none;
}
}
}
}
internal/site/styles/index.css
+128 -5
View File
@@ -17,6 +17,7 @@
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
--text-5xl: 3rem;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--radius-lg: var(--radius);
--default-font-family: var(--font-sans);
@@ -180,6 +181,9 @@
.mt-\[3em\] {
margin-top: 3em;
}
.mb-\[0\.5em\] {
margin-bottom: 0.5em;
}
.mb-\[1em\] {
margin-bottom: 1em;
}
@@ -195,18 +199,27 @@
.min-h-full {
min-height: 100%;
}
.w-full {
width: 100%;
}
.max-w-\[50\%\] {
max-width: 50%;
}
.max-w-full {
max-width: 100%;
}
.min-w-fit {
min-width: fit-content;
}
.grow {
flex-grow: 1;
}
.basis-full {
flex-basis: 100%;
}
.cursor-pointer {
cursor: pointer;
}
.flex-col {
flex-direction: column;
}
@@ -231,6 +244,9 @@
.rounded-lg {
border-radius: var(--radius);
}
.rounded-sm {
border-radius: calc(var(--radius) - 4px);
}
.border-\[1px\] {
border-style: var(--tw-border-style);
border-width: 1px;
@@ -244,6 +260,9 @@
.bg-card {
background-color: var(--card);
}
.p-\[0\.5em\] {
padding: 0.5em;
}
.p-\[1em\] {
padding: 1em;
}
@@ -271,9 +290,30 @@
--tw-font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-bold);
}
.font-semibold {
--tw-font-weight: var(--font-weight-semibold);
font-weight: var(--font-weight-semibold);
}
.text-nowrap {
text-wrap: nowrap;
}
.underline {
text-decoration-line: underline;
}
.hover\:bg-accent {
&:hover {
@media (hover: hover) {
background-color: var(--accent);
}
}
}
.hover\:underline {
&:hover {
@media (hover: hover) {
text-decoration-line: underline;
}
}
}
}
@layer base {
select {
@@ -355,6 +395,12 @@
--sidebar-accent-foreground: var(--base-800);
--sidebar-border: var(--base-200);
--sidebar-ring: var(--primary-300);
--table-thead: var(--base-400);
--table-tbody: var(--base-200);
--table-tfoot: var(--base-400);
--table-border: var(--base-300);
--table-body-border: var(--base-500);
--table-inner-border: var(--base-300);
--display-color: var(--foreground);
--text-color: var(--foreground);
@media (prefers-color-scheme: dark) {
@@ -389,10 +435,18 @@
--sidebar-accent-foreground: var(--base-200);
--sidebar-border: var(--base-800);
--sidebar-ring: var(--primary-300);
--table-thead: var(--base-600);
--table-tbody: var(--base-800);
--table-tfoot: var(--base-600);
--table-border: var(--base-700);
--table-body-border: var(--base-500);
--table-inner-border: var(--base-700);
}
}
* {
color: var(--foreground);
@layer theme {
* {
color: var(--foreground);
}
}
.dark {
--background: var(--base-950);
@@ -477,6 +531,10 @@
background-color: var(--sidebar-accent);
}
}
:root {
--border-thin: 1px;
--border-medium: 2px;
}
@layer base {
header, footer {
border-color: var(--sidebar-border);
@@ -488,18 +546,83 @@
border-top-width: 1px;
}
select {
border-width: 2px;
border-width: var(--border-medium);
border-color: var(--border);
border-radius: var(--radius-lg);
}
.border-thin {
border-width: 1px;
border-width: var(--border-thin);
}
.border-medium {
border-width: var(--border-medium);
}
.border-button {
border-width: 2px;
border-width: var(--border-medium);
border-radius: var(--radius-lg);
}
}
@layer components {
table {
display: block;
border-collapse: collapse;
thead {
border-color: var(--table-border);
border-width: var(--border-thin) var(--border-thin) 0 var(--border-thin);
& > tr {
border-color: var(--table-body-border);
& > :is(th, td) {
border-color: var(--table-body-border);
background-color: var(--table-thead);
}
}
& + tbody {
border-top-width: var(--border-thin);
}
}
tbody {
border-color: var(--table-body-border) var(--table-border);
border-left-width: var(--border-thin);
border-right-width: var(--border-thin);
border-bottom-width: 0;
& > tr {
border-color: var(--table-border);
& > :is(th, td) {
border-color: var(--table-border);
background-color: var(--table-tbody);
}
}
&:has(+ tfoot) {
border-bottom-width: var(--border-thin);
}
}
tfoot {
border-color: var(--table-border);
border-width: 0 var(--border-thin) var(--border-thin) var(--border-thin);
& > tr {
border-color: var(--table-body-border);
& > :is(th, td) {
border-color: var(--table-body-border);
background-color: var(--table-tfoot);
}
}
}
th, td {
padding: 0.5em;
}
tr {
border-width: 0 0 var(--border-thin) 0;
&:last-child {
border: none;
}
}
th, td {
border-width: 0 var(--border-thin) 0 0;
&:last-child {
border: none;
}
}
}
}
@property --tw-border-style {
syntax: "*";
inherits: false;
internal/site/styles/source.css
+1
View File
@@ -14,3 +14,4 @@
@import "./interactivity.css";
@import "./svg.css";
@import "./accessibility.css";
@import "./components.css";
internal/site/styles/typography.css
+18 -2
View File
@@ -80,6 +80,13 @@
--sidebar-border: var(--base-200);
--sidebar-ring: var(--primary-300);
--table-thead: var(--base-400);
--table-tbody: var(--base-200);
--table-tfoot: var(--base-400);
--table-border: var(--base-300);
--table-body-border: var(--base-500);
--table-inner-border: var(--base-300);
--display-color: var(--foreground);
--text-color: var(--foreground);
@@ -115,11 +122,20 @@
--sidebar-accent-foreground: var(--base-200);
--sidebar-border: var(--base-800);
--sidebar-ring: var(--primary-300);
--table-thead: var(--base-600);
--table-tbody: var(--base-800);
--table-tfoot: var(--base-600);
--table-border: var(--base-700);
--table-body-border: var(--base-500);
--table-inner-border: var(--base-700);
}
}
* {
color: var(--foreground);
@layer theme {
* {
color: var(--foreground);
}
}
.dark {