Small UI fixes for libAdwaita

5 files changed, 31 insertions, 45 deletions

diff --git a/main/data/conversation_content_view/view.ui b/main/data/conversation_content_view/view.ui
index f6819b94..3415e6c9 100644
--- a/main/data/conversation_content_view/view.ui
+++ b/main/data/conversation_content_view/view.ui
@@ -31,7 +31,9 @@
                                                 <property name="halign">end</property>
                                                 <property name="valign">start</property>
                                                 <style>
-                                                    <class name="linked"/>
+                                                    <class name="card"/>
+                                                    <class name="toolbar"/>
+                                                    <class name="overlay-toolbar"/>
                                                 </style>
                                             </object>
                                         </child>
diff --git a/main/data/conversation_row.ui b/main/data/conversation_row.ui
index 7be699ba..2eb9071b 100644
--- a/main/data/conversation_row.ui
+++ b/main/data/conversation_row.ui
@@ -144,7 +144,7 @@
                                                 <property name="margin-start">5</property>
                                                 <style>
                                                     <class name="conversation_list_row_xbutton"/>
-                                                    <class name="circular-button"/>
+                                                    <class name="circular"/>
                                                     <class name="flat"/>
                                                 </style>
                                                 <child>
diff --git a/main/data/conversation_view.ui b/main/data/conversation_view.ui
index f13e583d..6e24f4b5 100644
--- a/main/data/conversation_view.ui
+++ b/main/data/conversation_view.ui
@@ -31,7 +31,8 @@
                                                 <property name="halign">end</property>
                                                 <property name="valign">end</property>
                                                 <style>
-                                                    <class name="circular-button"/>
+                                                    <class name="circular"/>
+                                                    <class name="opaque"/>
                                                 </style>
                                                 <child>
                                                     <object class="GtkImage">
diff --git a/main/data/style-dark.css b/main/data/style-dark.css
new file mode 100644
index 00000000..3bd0add0
--- /dev/null
+++ b/main/data/style-dark.css
@@ -0,0 +1,3 @@
+.dino-main .overlay-toolbar {
+    background-color: shade(@view_bg_color, 1.5);
+}
\ No newline at end of file
diff --git a/main/data/theme.css b/main/data/style.css
index 6b93bc8f..63d0a606 100644
--- a/main/data/theme.css
+++ b/main/data/style.css
@@ -43,7 +43,7 @@ window.dino-main .dino-conversation .highlight-once {
 }
 
 window.dino-main .dino-conversation .message-box.highlight {
-    background: alpha(@theme_fg_color, 0.04);
+    background: @window_bg_color;
 }
 
 window.dino-main .dino-conversation .message-box {
@@ -92,11 +92,6 @@ window.dino-main .dino-sidebar > frame {
     transition: background .05s ease;
 }
 
-window.dino-main .circular-button {
-    padding: 0;
-    border-radius: 1000px;
-}
-
 window.dino-main .dino-conversation .message-box.edit-mode {
     background: alpha(@theme_selected_bg_color, 0.1);
 }
@@ -124,17 +119,17 @@ window.dino-main .dino-quote:hover {
     background: alpha(@theme_fg_color, 0.08);
 }
 
-/* Message Menu */
+/* Overlay Toolbar */
 
-.message-menu-box {
-    background-color: @theme_base_color;
-    border: 1px solid alpha(@theme_fg_color, 0.15);
-    border-radius: 5px;
+.dino-main .overlay-toolbar {
+    padding: 2px;
+    border-radius: 6px;
+    border-spacing: 0;
 }
 
-.message-menu-button {
-    padding: 6px;
-    border: none;
+.dino-main .overlay-toolbar > * {
+    margin-top: 0;
+    margin-bottom: 0;
 }
 
 /* Fie Widget */
@@ -189,38 +184,23 @@ window.dino-main .multiparty-participants {
 
 /* Reactions */
 
-window.dino-main menubutton.reaction-box image {
-    margin-left: 5px;
-    margin-right: 5px;
-}
-
-window.dino-main button.reaction-box,
-window.dino-main menubutton.reaction-box > button {
-    border: 1px solid transparent;
-    padding: 3px 5px ;
-    border-radius: 10px;
-    background-color: alpha(@theme_fg_color, 0.07);
-    background-image: none;
-    box-shadow: none;
-    min-height: 0;
-    min-width: 0;
-}
-
-window.dino-main button.reaction-box.own-reaction,
-window.dino-main menubutton.reaction-box.own-reaction > button {
-    color: mix(@theme_selected_bg_color, @theme_fg_color, 0.4);
-    border-color: @theme_selected_bg_color;
-    background-color: alpha(@theme_selected_bg_color, 0.05);
+.dino-main .reaction-grid button {
+    min-height: 16px;
+    min-width: 30px;
+    padding: 4px;
 }
 
-window.dino-main button.reaction-box:hover,
-window.dino-main menubutton.reaction-box:hover > button {
-    background-color: alpha(@theme_fg_color, 0.1);
+.dino-main .reaction-grid button.own-reaction,
+.dino-main .reaction-grid .own-reaction button {
+    background-color: alpha(@accent_bg_color, 0.1);
+    border: 1px solid @accent_bg_color;
+    padding: 3px;
+    color: @accent_color;
 }
 
-window.dino-main button.reaction-box.own-reaction:hover,
-window.dino-main menubutton.reaction-box.own-reaction > button {
-    background-color: alpha(@theme_selected_bg_color, 0.2);
+.dino-main .reaction-grid button.own-reaction:hover,
+.dino-main .reaction-grid .own-reaction button:hover {
+    background-color: alpha(@accent_bg_color, 0.2);
 }
 
 /* Sidebar */