--
-
-
-
-
+
+
@@ -30,7 +55,10 @@
+ >
diff --git a/package.json b/package.json
index 26cd1ac..8bb61b1 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,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 cbfde73..232a364 100644
Binary files a/screenshots/1080x1920.webp and b/screenshots/1080x1920.webp differ
diff --git a/screenshots/1280x720.webp b/screenshots/1280x720.webp
index 40cf8d7..bf91e3f 100644
Binary files a/screenshots/1280x720.webp and b/screenshots/1280x720.webp differ
diff --git a/screenshots/1920x1080.webp b/screenshots/1920x1080.webp
index 24da127..2ea3937 100644
Binary files a/screenshots/1920x1080.webp and b/screenshots/1920x1080.webp differ
diff --git a/screenshots/2160x3840.webp b/screenshots/2160x3840.webp
index 04c461d..b6deaee 100644
Binary files a/screenshots/2160x3840.webp and b/screenshots/2160x3840.webp differ
diff --git a/screenshots/2160x4096.webp b/screenshots/2160x4096.webp
index 993cda6..63f5a0d 100644
Binary files a/screenshots/2160x4096.webp and b/screenshots/2160x4096.webp differ
diff --git a/screenshots/3840x2160.webp b/screenshots/3840x2160.webp
index 31dcace..267c725 100644
Binary files a/screenshots/3840x2160.webp and b/screenshots/3840x2160.webp differ
diff --git a/screenshots/4096x2160.webp b/screenshots/4096x2160.webp
index 329c6fa..4dc4248 100644
Binary files a/screenshots/4096x2160.webp and b/screenshots/4096x2160.webp differ
diff --git a/screenshots/480x800.webp b/screenshots/480x800.webp
index 4f576b0..8b24520 100644
Binary files a/screenshots/480x800.webp and b/screenshots/480x800.webp differ
diff --git a/screenshots/720x1280.webp b/screenshots/720x1280.webp
index 83129d6..0d8ed4f 100644
Binary files a/screenshots/720x1280.webp and b/screenshots/720x1280.webp differ
diff --git a/screenshots/800x480.webp b/screenshots/800x480.webp
index 3e7560d..7a5f874 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 e981c14..0faaf7c 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,5 +1,17 @@
-/* Import Screenly Design System */
-@import '@screenly/edge-apps/styles';
+/* Skip Tailwind's preflight: it resets `border` on every element (including
+ custom-element hosts like ), 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 */
@font-face {
font-family: 'Inria Sans';
@@ -20,153 +32,3 @@
:root {
--theme-color-primary: #ac1fff;
}
-
-* {
- 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 0.125rem 0.375rem 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);
-}
-
-auto-scaler {
- position: relative;
- z-index: var(--z-index-content);
-}
-
-#app {
- width: 100%;
- height: 100%;
-}
-
-.content {
- display: flex;
- justify-content: center;
- align-items: center;
- height: calc(100% - 5rem);
-}
-
-.timer-section {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 2rem;
-}
-
-.date-text {
- font-family: 'Inter', system-ui, sans-serif;
- font-size: 2.8125rem;
- font-weight: 400;
- color: white;
- letter-spacing: -0.1125rem;
- text-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.25);
-}
-
-.timer-card {
- position: relative;
- display: flex;
- justify-content: center;
- align-items: center;
- width: 41.25rem;
- height: 41.25rem;
- border-radius: 1.5rem;
- border: 0.047rem solid rgba(255, 255, 255, 0.1);
- background:
- linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
- linear-gradient(90deg, rgba(68, 68, 68, 0.4), rgba(68, 68, 68, 0.4)),
- linear-gradient(
- 135deg,
- rgba(255, 255, 255, 0.08) 0%,
- rgba(255, 255, 255, 0.02) 100%
- );
- box-shadow:
- 0 0.84rem 2.52rem 0 rgba(0, 0, 0, 0.15),
- 0 0.047rem 0 0 rgba(255, 255, 255, 0.15) inset,
- 0 -0.047rem 0 0 rgba(255, 255, 255, 0.05) inset;
-}
-
-.progress-ring-container {
- position: absolute;
- inset: 0;
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-.progress-ring-container svg {
- width: 73%;
- height: 73%;
-}
-
-.timer-display {
- position: relative;
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 0.5rem;
- z-index: 1;
-}
-
-.timer-digits {
- font-family: 'Inria Sans', sans-serif;
- font-weight: 700;
- font-size: 5.8rem;
- line-height: 1;
- letter-spacing: 0.15rem;
- color: white;
- font-variant-numeric: tabular-nums;
-}
-
-.timer-digits .accent {
- color: var(--theme-color-primary);
-}
-
-.timer-total {
- font-family: 'Inria Sans', sans-serif;
- font-weight: 400;
- font-size: 1.7rem;
- color: rgba(255, 255, 255, 0.7);
-}
-
-@media (orientation: portrait) {
- #app {
- display: flex;
- flex-direction: column;
- height: 100%;
- }
-
- .content {
- flex: 1;
- height: auto;
- }
-
- .timer-card {
- width: 36rem;
- height: 36rem;
- }
-
- .timer-digits {
- font-size: 5rem;
- }
-
- .date-text {
- font-size: 2.4rem;
- }
-}
00:00:00
- --
+
+ --
+
+
+
+
+
+ 00:00:00
+
+
+ --
+