diff --git a/index.html b/index.html index 33eb398..6ff6724 100644 --- a/index.html +++ b/index.html @@ -6,18 +6,27 @@ Asset Metadata - + -
-
-
-
+
+
+
+
- Host Name + Host Name +
+
+ N/A
-
N/A
-
-
+
+
- Screen Name + Screen Name +
+
+ N/A
-
N/A
-
-
+
+
- Hardware + Hardware +
+
+ N/A
-
N/A
-
-
+
+
- Version + Version +
+
+ N/A
-
N/A
-
-
+
+
- Coordinates + Coordinates +
+
+ N/A
-
N/A
-
-
+
+
- Labels + Labels
-
+
diff --git a/package.json b/package.json index 2202159..dbd1f81 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "prettier": "./.prettierrc.json", "devDependencies": { "@playwright/test": "^1.60.0", - "@screenly/edge-apps": "^1.2.1", + "@screenly/edge-apps": "^1.3.0", "@types/bun": "^1.3.14", "@types/jsdom": "^28.0.3", "bun-types": "^1.3.14", diff --git a/screenshots/1080x1920.webp b/screenshots/1080x1920.webp index 4e94029..942bbbb 100644 Binary files a/screenshots/1080x1920.webp and b/screenshots/1080x1920.webp differ diff --git a/screenshots/1280x720.webp b/screenshots/1280x720.webp index df83098..0d9d6d3 100644 Binary files a/screenshots/1280x720.webp and b/screenshots/1280x720.webp differ diff --git a/screenshots/1920x1080.webp b/screenshots/1920x1080.webp index 4d6d98c..cf172a1 100644 Binary files a/screenshots/1920x1080.webp and b/screenshots/1920x1080.webp differ diff --git a/screenshots/2160x3840.webp b/screenshots/2160x3840.webp index 4b84b51..049d542 100644 Binary files a/screenshots/2160x3840.webp and b/screenshots/2160x3840.webp differ diff --git a/screenshots/2160x4096.webp b/screenshots/2160x4096.webp index 9d1bfde..6ad62fd 100644 Binary files a/screenshots/2160x4096.webp and b/screenshots/2160x4096.webp differ diff --git a/screenshots/3840x2160.webp b/screenshots/3840x2160.webp index 2ab051b..96474ee 100644 Binary files a/screenshots/3840x2160.webp and b/screenshots/3840x2160.webp differ diff --git a/screenshots/4096x2160.webp b/screenshots/4096x2160.webp index 8407022..3c8d3f2 100644 Binary files a/screenshots/4096x2160.webp and b/screenshots/4096x2160.webp differ diff --git a/screenshots/480x800.webp b/screenshots/480x800.webp index 4927cfa..02779ed 100644 Binary files a/screenshots/480x800.webp and b/screenshots/480x800.webp differ diff --git a/screenshots/720x1280.webp b/screenshots/720x1280.webp index f88bdf9..ee0cc0d 100644 Binary files a/screenshots/720x1280.webp and b/screenshots/720x1280.webp differ diff --git a/screenshots/800x480.webp b/screenshots/800x480.webp index 40be50f..68c7c7f 100644 Binary files a/screenshots/800x480.webp and b/screenshots/800x480.webp differ diff --git a/src/app.ts b/src/app.ts index af78a5a..5db30f5 100644 --- a/src/app.ts +++ b/src/app.ts @@ -31,11 +31,14 @@ export default async function init(): Promise { if (labelsContainer) { if (tags && tags.length > 0) { labelsContainer.innerHTML = tags - .map((tag) => `${escapeHtml(tag)}`) + .map( + (tag) => + `${escapeHtml(tag)}`, + ) .join('') } else { labelsContainer.innerHTML = - 'No labels assigned' + 'No labels assigned' } } diff --git a/src/css/style.css b/src/css/style.css index 0ec09ef..560b23e 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,186 +1,10 @@ -@import '@screenly/edge-apps/styles'; - -:root { - --card-border: rgba(255, 255, 255, 0.15); -} - -*, -*::before, -*::after { - box-sizing: border-box; -} - -html, -body { - margin: 0; - padding: 0; - width: 100%; - height: 100%; - overflow: hidden; -} - -body { - background: url('/static/images/bg.webp') no-repeat center center; - background-size: cover; - font-family: 'Inter', system-ui, sans-serif; -} - -body::before { - content: ''; - position: fixed; - inset: 0; - z-index: var(--z-index-backdrop); - pointer-events: none; - background: rgba(0, 0, 0, 0.15); -} - -auto-scaler { - position: relative; - z-index: var(--z-index-content); - width: 100%; - height: 100%; -} - -#app { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; -} - -.widgets { - flex: 1; - display: flex; - flex-direction: column; - align-items: flex-end; - justify-content: flex-start; - padding: calc(1.5 * var(--su)); - gap: calc(0.75 * var(--su)); - overflow: hidden; -} - -.card { - width: calc(25 * var(--su)); - background: linear-gradient( - 106deg, - rgba(255, 255, 255, 0.12) 3%, - rgba(255, 255, 255, 0.04) 100% - ); - border: 1px solid var(--card-border); - border-radius: calc(1 * var(--su)); - padding: calc(1 * var(--su)); - backdrop-filter: blur(32px); - -webkit-backdrop-filter: blur(32px); - box-shadow: - 0 1px 0 0 rgba(255, 255, 255, 0.15) inset, - 0 -1px 0 0 rgba(255, 255, 255, 0.05) inset, - 0 calc(0.2 * var(--su)) calc(1.5 * var(--su)) rgba(0, 0, 0, 0.25); - display: flex; - flex-direction: column; - gap: calc(0.7 * var(--su)); -} - -.card-header { - display: flex; - align-items: center; - gap: calc(0.5 * var(--su)); - flex-shrink: 0; -} - -.card-icon { - width: calc(2 * var(--su)); - height: calc(2 * var(--su)); - flex-shrink: 0; -} - -.card-label { - font-size: calc(0.65 * var(--su)); - font-weight: 700; - letter-spacing: 0.08em; - text-transform: uppercase; - color: rgba(255, 255, 255, 0.8); - line-height: 1; -} - -.card-value { - font-size: calc(1.2 * var(--su)); - font-weight: 600; - color: #fff; - line-height: 1.15; - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - letter-spacing: -0.02em; -} - -.label-chips { - display: flex; - flex-wrap: wrap; - gap: calc(0.4 * var(--su)); - overflow: hidden; - align-content: flex-start; -} - -.label-chip { - display: inline-block; - background: rgba(255, 255, 255, 0.15); - color: #fff; - border: 1px solid rgba(255, 255, 255, 0.4); - border-radius: calc(0.35 * var(--su)); - padding: calc(0.15 * var(--su)) calc(0.45 * var(--su)); - font-size: calc(0.6 * var(--su)); - font-weight: 700; - letter-spacing: 0.06em; - text-transform: uppercase; - white-space: nowrap; - line-height: 1.4; -} - -.no-labels { - font-size: calc(0.75 * var(--su)); - color: rgba(255, 255, 255, 0.8); - font-style: italic; -} - -@media (orientation: portrait) { - .widgets { - align-items: stretch; - gap: calc(2.5 * var(--su)); - } - - .card { - width: 100%; - padding: calc(4 * var(--su)); - border-radius: calc(2.5 * var(--su)); - gap: calc(1.5 * var(--su)); - } - - .card-header { - gap: calc(1.5 * var(--su)); - } - - .card-icon { - width: calc(6 * var(--su)); - height: calc(6 * var(--su)); - } - - .card-label { - font-size: calc(2 * var(--su)); - } - - .card-value { - font-size: calc(3.5 * var(--su)); - } - - .label-chips { - gap: calc(1 * var(--su)); - } - - .label-chip { - font-size: calc(2 * var(--su)); - padding: calc(0.75 * var(--su)) calc(1.5 * var(--su)); - border-radius: calc(1 * var(--su)); - } -} +/* Tailwind CSS, skipping Preflight (resets border/margin/padding on every + element via a universal selector and breaks custom-element hosts like + ). @screenly/edge-apps/styles goes in the `base` layer so any + Tailwind utility classes added later always win the cascade, regardless + of selector specificity. */ +@layer theme, base, utilities; + +@import 'tailwindcss/theme.css' layer(theme); +@import '@screenly/edge-apps/styles' layer(base); +@import 'tailwindcss/utilities.css' layer(utilities); diff --git a/src/main.ts b/src/main.ts index b7cf069..9405061 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,4 +1,7 @@ import './css/style.css' +// Import components to register them as custom elements +// This registers , , , and +import '@screenly/edge-apps/components' import init from './app' document.addEventListener('DOMContentLoaded', init)