--
-
- --:--
- --
+
+
+
--
+
+ --:--
+ --
-
- --
-
+ ), which strips their shadow-DOM
+ :host styling. The design system's own reset.css already normalizes
+ box-sizing/margin/padding, so preflight isn't needed here. */
+@layer theme, base, utilities;
+
+@import 'tailwindcss/theme.css' layer(theme);
+/* @screenly/edge-apps/styles goes in the `base` layer so Tailwind utilities
+ (declared after `base` above) always win the cascade, regardless of
+ selector specificity — unlayered CSS otherwise beats layered CSS. */
+@import '@screenly/edge-apps/styles' layer(base);
+@import 'tailwindcss/utilities.css' layer(utilities);
/* App-specific styles */
@@ -10,153 +20,3 @@
font-style: normal;
font-display: swap;
}
-
-* {
- box-sizing: border-box;
-}
-
-body {
- margin: 0;
- padding: 0;
- overflow: hidden;
- color: white;
- font-family: 'Inter', system-ui, sans-serif;
- background: url('/static/images/bg.webp') no-repeat center center;
- background-size: cover;
- text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
-}
-
-body::before {
- content: '';
- position: fixed;
- inset: 0;
- z-index: var(--z-index-backdrop);
- pointer-events: none;
- background: rgba(0, 0, 0, 0.2);
- backdrop-filter: blur(7px);
-}
-
-.text-shadow {
- text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
-}
-
-auto-scaler {
- position: relative;
- z-index: var(--z-index-content);
-}
-
-#app {
- width: 100%;
- height: 100%;
-}
-
-.content {
- margin-top: 160px;
- margin-left: 300px;
-}
-
-.current {
- display: flex;
- flex-direction: column;
-}
-
-.city {
- font-size: 32px;
- text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
-}
-
-.time-wrapper {
- display: flex;
- align-items: baseline;
- gap: 0.5rem;
-}
-
-.time {
- font-family: 'Kelly Slab', serif;
- font-size: 160px;
- font-weight: 400;
- line-height: 1;
- letter-spacing: -5px;
- margin: 1rem 0;
- text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
-}
-
-.clock-period {
- font-size: 2.25rem;
- opacity: 0.9;
-}
-
-.status-row {
- display: inline-flex;
- align-items: center;
- gap: 1rem;
- padding: 0.625rem 1.25rem;
- border-radius: 1rem;
- border: 1px solid rgba(255, 255, 255, 0.06);
- background: linear-gradient(
- 135deg,
- rgba(255, 255, 255, 0.06) 0%,
- rgba(255, 255, 255, 0.01) 100%
- );
- box-shadow:
- 0 13.438px 40.315px 0 rgba(0, 0, 0, 0.15),
- 0 1.68px 0 0 rgba(255, 255, 255, 0.1) inset,
- 0 -1.68px 0 0 rgba(255, 255, 255, 0.03) inset;
- width: fit-content;
-}
-
-.date {
- font-size: 1rem;
- text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
-}
-
-.temperature-wrapper {
- display: flex;
- align-items: center;
- gap: 0.375rem;
-}
-
-.temperature {
- font-size: 1rem;
- text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
-}
-
-.temperature-icon {
- width: 1rem;
- height: 1rem;
-}
-
-@media (orientation: portrait) {
- #app {
- display: flex;
- flex-direction: column;
- height: 100%;
- }
-
- main.content {
- margin: 0;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: flex-start;
- flex: 1;
- height: 100%;
- padding-left: 60px;
- }
-
- .current {
- margin-left: 60px;
- }
-
- .city {
- font-size: 40px;
- }
-
- .time {
- font-size: 180px;
- }
-
- .status-row {
- font-size: 24px;
- }
-}
+ --
+
- --°
+ --°
diff --git a/package.json b/package.json
index 9b18253..701c5f2 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
"dependencies": {},
"prettier": "./.prettierrc.json",
"devDependencies": {
- "@screenly/edge-apps": "^1.2.1",
+ "@screenly/edge-apps": "^1.3.0",
"@playwright/test": "^1.60.0",
"@types/bun": "^1.3.14",
"@types/jsdom": "^28.0.3",
diff --git a/screenshots/1080x1920.webp b/screenshots/1080x1920.webp
index 21a5e68..19b9248 100644
Binary files a/screenshots/1080x1920.webp and b/screenshots/1080x1920.webp differ
diff --git a/screenshots/1280x720.webp b/screenshots/1280x720.webp
index 3d0df4a..e3d8445 100644
Binary files a/screenshots/1280x720.webp and b/screenshots/1280x720.webp differ
diff --git a/screenshots/1920x1080.webp b/screenshots/1920x1080.webp
index 1b2de67..7ccf737 100644
Binary files a/screenshots/1920x1080.webp and b/screenshots/1920x1080.webp differ
diff --git a/screenshots/2160x3840.webp b/screenshots/2160x3840.webp
index 2172827..d41d8fd 100644
Binary files a/screenshots/2160x3840.webp and b/screenshots/2160x3840.webp differ
diff --git a/screenshots/2160x4096.webp b/screenshots/2160x4096.webp
index 0c97b29..5f2e6fc 100644
Binary files a/screenshots/2160x4096.webp and b/screenshots/2160x4096.webp differ
diff --git a/screenshots/3840x2160.webp b/screenshots/3840x2160.webp
index 4436e27..7fe895a 100644
Binary files a/screenshots/3840x2160.webp and b/screenshots/3840x2160.webp differ
diff --git a/screenshots/4096x2160.webp b/screenshots/4096x2160.webp
index bf558ad..11f4e53 100644
Binary files a/screenshots/4096x2160.webp and b/screenshots/4096x2160.webp differ
diff --git a/screenshots/480x800.webp b/screenshots/480x800.webp
index 7d3f73a..ad438c3 100644
Binary files a/screenshots/480x800.webp and b/screenshots/480x800.webp differ
diff --git a/screenshots/720x1280.webp b/screenshots/720x1280.webp
index 83a3fc1..dba34f6 100644
Binary files a/screenshots/720x1280.webp and b/screenshots/720x1280.webp differ
diff --git a/screenshots/800x480.webp b/screenshots/800x480.webp
index ffffe32..027baab 100644
Binary files a/screenshots/800x480.webp and b/screenshots/800x480.webp differ
diff --git a/src/css/style.css b/src/css/style.css
index 952eb6e..4431213 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,5 +1,15 @@
-/* Import Screenly Design System */
-@import '@screenly/edge-apps/styles';
+/* Skip Tailwind's preflight: it resets `border` on every element (including
+ custom-element hosts like
- --°
+ --°