diff options
| -rw-r--r-- | main/data/chat_input.ui | 37 | ||||
| -rw-r--r-- | main/data/main_window.ui | 2 | ||||
| -rw-r--r-- | main/data/style.css | 118 |
3 files changed, 113 insertions, 44 deletions
diff --git a/main/data/chat_input.ui b/main/data/chat_input.ui index c440d815..1f6396d6 100644 --- a/main/data/chat_input.ui +++ b/main/data/chat_input.ui @@ -4,7 +4,6 @@ <template class="DinoUiChatInputView"> <property name="hexpand">True</property> <property name="orientation">vertical</property> - <property name="margin-top">4</property> <child> <object class="GtkBox" id="unavailable_box"> <property name="margin_start">14</property> @@ -27,15 +26,24 @@ </object> </child> <child> + <object class="GtkLabel" id="chat_input_status"> + <property name="xalign">0</property> + <property name="margin_bottom">3</property> + <property name="margin_start">14</property> + <property name="margin_end">14</property> + <property name="wrap">True</property> + <attributes> + <attribute name="scale" value="0.8"></attribute> + </attributes> + <style> + <class name="chat-input-status"/> + </style> + </object> + </child> + <child> <object class="GtkBox" id="outer_box"> - <property name="margin_start">14</property> - <property name="margin_end">14</property> <style> <class name="dino-chatinput"/> - <class name="card"/> - <class name="toolbar"/> - <class name="activatable"/> - <class name="compact-card-toolbar"/> </style> <child> <object class="GtkButton" id="file_button"> @@ -126,20 +134,5 @@ </child> </object> </child> - <child> - <object class="GtkLabel" id="chat_input_status"> - <property name="xalign">0</property> - <property name="margin_bottom">3</property> - <property name="margin_start">14</property> - <property name="margin_end">14</property> - <property name="wrap">True</property> - <attributes> - <attribute name="scale" value="0.8"></attribute> - </attributes> - <style> - <class name="chat-input-status"/> - </style> - </object> - </child> </template> </interface> diff --git a/main/data/main_window.ui b/main/data/main_window.ui index 806db779..c2f911c2 100644 --- a/main/data/main_window.ui +++ b/main/data/main_window.ui @@ -30,8 +30,6 @@ <child type="top"> <object class="GtkBox" id="conversation_list_toolbar"> <property name="spacing">6</property> - <property name="margin-start">6</property> - <property name="margin-end">6</property> <style> <class name="toolbar"/> <class name="dino-conversation-list-toolbar"/> diff --git a/main/data/style.css b/main/data/style.css index c84551e6..3c8043b7 100644 --- a/main/data/style.css +++ b/main/data/style.css @@ -9,9 +9,37 @@ statuspage { opacity: 0.5; } +window.dino-main, +window.dino-main > *, +window.dino-main navigation-split-view, +window.dino-main navigation-split-view > .sidebar-pane, +window.dino-main navigation-split-view > .content-pane, +window.dino-main toolbarview, +window.dino-main .dino-conversation { + margin: 0; + padding: 0; +} + +window.dino-main { + outline: none; +} + window.dino-main headerbar.dino-chat-headerbar, window.dino-main .dino-conversation-list-toolbar { min-height: 44px; + margin: 0; + background-color: @window_bg_color; + background-image: none; +} + +window.dino-main .dino-conversation-list-toolbar { + border-bottom: none; + box-shadow: 0 3px 12px alpha(black, 0.18); +} + +window.dino-main headerbar.dino-chat-headerbar { + border-bottom: none; + box-shadow: 0 3px 12px alpha(black, 0.18); } window.dino-main headerbar.dino-chat-headerbar > windowhandle > box, @@ -20,6 +48,45 @@ window.dino-main .dino-conversation-list-toolbar { padding-bottom: 0; } +window.dino-main .dino-conversation-list-toolbar { + padding-left: 6px; + padding-right: 6px; +} + +window.dino-main headerbar button, +window.dino-main .dino-conversation-list-toolbar entry, +window.dino-main .dino-conversation-list-toolbar button, +window.dino-main .navigation-sidebar > row, +window.dino-main box.dino-chatinput, +window.dino-main box.dino-chatinput button, +window.dino-main popover > contents, +window.dino-main popover row { + border-radius: 0; +} + +window.dino-main button.circular, +window.dino-main box.dino-chatinput button.circular { + border-radius: 999em; +} + +window.dino-main .navigation-sidebar { + margin: 0; + padding: 0; +} + +window.dino-main .navigation-sidebar > row { + margin: 0; +} + +window.dino-main navigation-split-view > .sidebar-pane, +window.dino-main navigation-split-view > .content-pane { + margin: 0; +} + +window.dino-main navigation-split-view > .content-pane { + border-left: 1px solid color-mix(in srgb, @window_bg_color 92%, @theme_fg_color); +} + window.dino-main .dino-conversation undershoot, window.dino-main .dino-conversation viewport /* Some themes set this */ { background: none; @@ -94,7 +161,7 @@ window.dino-main .dino-conversation .message-box.edit-mode:hover { } window.dino-main .dino-conversation .message-box.edit-mode frame { - border-radius: 3px; + border-radius: 0; padding: 0 7px; } @@ -120,7 +187,7 @@ window.dino-main .dino-quote:hover { window.dino-main .code-block { background: alpha(@theme_fg_color, 0.06); border: 1px solid alpha(@theme_fg_color, 0.12); - border-radius: 8px; + border-radius: 0; } window.dino-main .code-block-header { @@ -150,14 +217,14 @@ window.dino-main .code-block-content { } picture.avatar { - border-radius: 3px; + border-radius: 0; } /* Overlay Toolbar */ .compact-card-toolbar { padding: 2px; - border-radius: 6px; + border-radius: 0; border-spacing: 0; } @@ -171,7 +238,7 @@ picture.avatar { window.dino-main .file-box-outer, window.dino-main .call-box-outer { background: @theme_base_color; - border-radius: 8px; + border-radius: 0; border: 1px solid var(--border-color); } @@ -182,7 +249,7 @@ window.dino-main .call-box { window.dino-main .file-image-widget { border: 1px solid alpha(@theme_fg_color, 0.1); - border-radius: 6px; + border-radius: 0; } window.dino-main .file-image-widget .file-box-outer { @@ -202,13 +269,13 @@ window.dino-main .file-image-widget .file-box-outer button:hover { } .dino-main .file-image-widget picture { - border-radius: 6px; + border-radius: 0; } .dino-main .file-details { color: white; background: alpha(black, 0.3); - border-radius: 5px; + border-radius: 0; padding: 5px 10px; } @@ -238,6 +305,7 @@ window.dino-main .multiparty-participants { min-height: 16px; min-width: 30px; padding: 4px; + border-radius: 999em; } .dino-main .reaction-grid button.own-reaction, @@ -287,22 +355,32 @@ image.dino-status-online, image.dino-status-chat { background-color: var(--shade-color); opacity: 80%; padding: 12px; - border-radius: 6px 6px 0 0; + border-radius: 0; } /* Chat Input*/ -/* These rules are direved from the libadwaita style for activateable entry rows */ -window.dino-main box.dino-chatinput.activatable { - outline: 0 solid transparent; - outline-offset: 5px; - transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-radius 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +window.dino-main box.dino-chatinput { + margin: 0; + padding: 2px; + background-color: shade(@view_bg_color, 0.96); + background-image: none; + border: none; + box-shadow: 0 -3px 12px alpha(black, 0.18); + outline: none; +} + +window.dino-main box.dino-chatinput button.dino-attach-button { + background-image: none; + border: none; + box-shadow: none; + outline: none; } -window.dino-main box.dino-chatinput.activatable:focus-within { - outline-offset: -1px; - outline-width: 2px; - outline-color: color-mix(in srgb, var(--accent-color) 50%, transparent); +window.dino-main box.dino-chatinput > separator { + min-width: 0; + background: none; + border: none; } .dino-chatinput textview, @@ -319,7 +397,7 @@ window.dino-main box.dino-chatinput.activatable:focus-within { } window.dino-main .image-round-corners picture { - border-radius: 8px; + border-radius: 0; } window.dino-main .file-remove-button { @@ -451,7 +529,7 @@ box.dino-input-error .chat-input-status.input-status-highlight-once { .dino-call-window .text-no-controls { color: black; background: white; - border-radius: 5px; + border-radius: 0; padding: 5px 10px; } |
