diff --git a/web/css/styles.css b/web/css/styles.css index e713fe8..31123b6 100644 --- a/web/css/styles.css +++ b/web/css/styles.css @@ -137,7 +137,7 @@ button.nav > img.icon { position: sticky; top: 0; z-index: var(--zHeader); - background: var(--clrBg); + backdrop-filter: blur(20px); } #view header > label { padding: 15px; @@ -147,6 +147,13 @@ button.nav > img.icon { } /* Events & Content */ +.events { + display: flex; + flex-direction: column; +} +.events.reverse { + flex-direction: column-reverse; +} .event { display: flex; flex-direction: row; @@ -303,8 +310,8 @@ button.nav > img.icon { .action-bar button.icon:hover { opacity: 1; } -.action-bar button.heart:hover { - /* TODO fix heart color */ +.action-bar button.heart.liked { + opacity: 1; } details.cw summary { @@ -337,6 +344,7 @@ details.cw summary { background: rgba(0,0,0,0.4); opacity: 1; transition: opacity 0.2s linear; + backdrop-filter: blur(20px); } .modal.closed { opacity: 0; @@ -440,19 +448,11 @@ label[role="profile-nip5"] { /* Media Preview */ -.bg-blur { - backdrop-filter: blur(20px); - position: absolute; - width: 100%; - height: 100%; - z-index: var(--zModal); -} .modal .media-container { text-align: center; position: absolute; width: 100%; height: 100%; - z-index: calc(var(--zModal) + 1); } .modal .media-container > img { object-fit: scale-down; @@ -465,5 +465,8 @@ label[role="profile-nip5"] { .icon.svg { filter: invert(1); } + .icon.svg.dark-noinvert { + filter: invert(0); + } } diff --git a/web/icon/event-liked.svg b/web/icon/event-liked.svg new file mode 100644 index 0000000..4aba7a0 --- /dev/null +++ b/web/icon/event-liked.svg @@ -0,0 +1,6 @@ + + + + diff --git a/web/index.html b/web/index.html index 6488152..60ef930 100644 --- a/web/index.html +++ b/web/index.html @@ -17,6 +17,13 @@ + + + + + + + @@ -33,7 +40,7 @@ - @@ -77,7 +84,7 @@
-
+
@@ -100,31 +107,7 @@
-
- -
-
- -
-
-
-
-
- -
-
-
-
-
- -
-
-
-
-
- -
-
+
@@ -144,14 +127,18 @@

-
+
+
+ +
+
+