Show number of unread conversations in app badgenotifs-controls

3 files changed, 34 insertions, 0 deletions

diff --git a/ui/styles/app-bar.css b/ui/styles/app-bar.css
index ce52712..272810a 100644
--- a/ui/styles/app-bar.css
+++ b/ui/styles/app-bar.css
@@ -7,6 +7,8 @@
   align-items: stretch;
   background-color: var(--colour-header-bg);
   color: var(--light-text);
+  z-index: 2;
+  position: relative;
 }
 
 .app-bar > * {
diff --git a/ui/styles/forms.css b/ui/styles/forms.css
index f4d218f..19d31b7 100644
--- a/ui/styles/forms.css
+++ b/ui/styles/forms.css
@@ -26,3 +26,11 @@ form.form > button {
 .disabled {
   color: var(--light-text);
 }
+
+button {
+  cursor: pointer;
+}
+button:active {
+  border-color: red;
+  background-color: blue;
+}
diff --git a/ui/styles/messages.css b/ui/styles/messages.css
index 5488fa5..52355b7 100644
--- a/ui/styles/messages.css
+++ b/ui/styles/messages.css
@@ -1,3 +1,27 @@
+.channel-meta {
+  border-width: 0 1px 1px 1px;
+  border-color: red;
+  border-style: solid;
+  border-radius: 0 0 4px 4px;
+  background-color: mistyrose;
+  overflow: clip;
+  transition: margin-top 0.25s ease-in;
+  z-index: 1;
+  margin-top: -5rem;
+}
+
+.channel-meta.expanded {
+  margin-top: 0rem;
+}
+
+.channel-meta .handle {
+  text-align: center;
+}
+
+.channel-meta .inner {
+  padding: 1rem;
+}
+
 .message-run {
   border-radius: 0.25rem;
   margin-top: 1rem;