diff --git a/admin.html b/admin.html
index ac7a19d..215191b 100644
--- a/admin.html
+++ b/admin.html
@@ -12,7 +12,7 @@
-
+
diff --git a/favorites.html b/favorites.html
index b0b3e22..9e23388 100644
--- a/favorites.html
+++ b/favorites.html
@@ -12,7 +12,7 @@
-
+
diff --git a/index.html b/index.html
index ea4ef13..aa09eeb 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,7 @@
-
+
diff --git a/offline.html b/offline.html
index 6c2dbbb..f86bf62 100644
--- a/offline.html
+++ b/offline.html
@@ -11,7 +11,7 @@
-
+
diff --git a/style.css b/style.css
index 148e1c0..0ff248c 100644
--- a/style.css
+++ b/style.css
@@ -176,8 +176,8 @@ main {
top: 0;
z-index: 10;
display: grid;
- grid-template-columns: minmax(220px, 340px) 1fr auto;
- gap: 12px;
+ grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
+ gap: 10px 12px;
align-items: center;
padding: 12px 0;
backdrop-filter: blur(16px);
@@ -214,8 +214,7 @@ main {
box-shadow: 0 0 0 3px rgba(103, 232, 249, 0.08);
}
-.segments,
-.view-toggle {
+.segments {
display: flex;
justify-content: flex-end;
gap: 6px;
@@ -223,13 +222,23 @@ main {
scrollbar-width: none;
}
-.segments::-webkit-scrollbar,
-.view-toggle::-webkit-scrollbar {
+.view-toggle {
+ grid-column: 1 / -1;
+ justify-self: start;
+ display: inline-grid;
+ grid-template-columns: repeat(3, minmax(86px, auto));
+ gap: 3px;
+ padding: 4px;
+ background: rgba(17, 22, 36, 0.78);
+ border: 1px solid var(--border);
+ border-radius: var(--radius);
+}
+
+.segments::-webkit-scrollbar {
display: none;
}
-.segment,
-.view-option {
+.segment {
min-width: max-content;
height: 36px;
padding: 0 13px;
@@ -240,13 +249,39 @@ main {
cursor: pointer;
}
-.segment.is-active,
-.view-option.is-active {
+.view-option {
+ min-width: 86px;
+ height: 30px;
+ padding: 0 12px;
+ color: var(--muted);
+ background: transparent;
+ border: 1px solid transparent;
+ border-radius: calc(var(--radius) - 2px);
+ cursor: pointer;
+ font-size: 0.82rem;
+ font-weight: 650;
+ transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
+}
+
+.segment.is-active {
color: #061014;
background: #67e8f9;
border-color: #67e8f9;
}
+.view-option:hover,
+.view-option:focus-visible {
+ color: #fff;
+ background: rgba(255, 255, 255, 0.04);
+ outline: none;
+}
+
+.view-option.is-active {
+ color: #07111a;
+ background: #67e8f9;
+ border-color: #67e8f9;
+}
+
.section {
margin-top: 18px;
}
@@ -941,6 +976,15 @@ main {
justify-content: flex-start;
}
+ .view-toggle {
+ width: 100%;
+ grid-template-columns: repeat(3, 1fr);
+ }
+
+ .view-option {
+ min-width: 0;
+ }
+
.grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
diff --git a/sw.js b/sw.js
index 476cf21..b3eb85e 100644
--- a/sw.js
+++ b/sw.js
@@ -1,10 +1,10 @@
-const CACHE_NAME = 'mischlabs-pwa-v17';
+const CACHE_NAME = 'mischlabs-pwa-v18';
const APP_SHELL = [
'/',
'/index.html',
'/favorites.html',
'/offline.html',
- '/style.css?v=28',
+ '/style.css?v=29',
'/auth.js?v=1',
'/app.js?v=34',
'/favorites.js?v=1',