From 99d9cb383abb1a33f6d0572deb4292dbf358f3ce Mon Sep 17 00:00:00 2001 From: Marvin W Date: Sun, 8 Jan 2023 21:40:09 +0100 Subject: Small UI fixes for libAdwaita --- main/CMakeLists.txt | 3 +- main/data/conversation_content_view/view.ui | 4 +- main/data/conversation_row.ui | 2 +- main/data/conversation_view.ui | 3 +- main/data/style-dark.css | 3 + main/data/style.css | 447 ++++++++++++++++++++ main/data/theme.css | 467 --------------------- main/src/ui/application.vala | 4 - .../conversation_view.vala | 3 +- .../reactions_widget.vala | 11 +- 10 files changed, 466 insertions(+), 481 deletions(-) create mode 100644 main/data/style-dark.css create mode 100644 main/data/style.css delete mode 100644 main/data/theme.css (limited to 'main') diff --git a/main/CMakeLists.txt b/main/CMakeLists.txt index de5f2667..363b4185 100644 --- a/main/CMakeLists.txt +++ b/main/CMakeLists.txt @@ -90,7 +90,8 @@ set(RESOURCE_LIST unified_main_content.ui unified_window_placeholder.ui - theme.css + style.css + style-dark.css ) compile_gresources( 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 @@ end start 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 @@ 5 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 @@ end end 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/style.css b/main/data/style.css new file mode 100644 index 00000000..63d0a606 --- /dev/null +++ b/main/data/style.css @@ -0,0 +1,447 @@ +/** + * This theme file is applied after the operating system theme + * It provides sane defaults for things that are very Dino-specific. + */ + +statuspage { + opacity: 0.5; +} + +window.dino-main .dino-header-right { + background: @theme_base_color; +} + +window.dino-main .dino-header-left { + background: @insensitive_bg_color; +} + +window.dino-main headerbar.dino-left label.title { + opacity: 0; + font-size: 0; + color: transparent; +} + +window.dino-main .dino-conversation { + background: @theme_base_color; +} + +window.dino-main .dino-conversation undershoot, +window.dino-main .dino-conversation viewport /* Some themes set this */ { + background: none; +} + +@keyframes highlight { + from { background: alpha(@warning_color, 0.5); } + to { background: transparent; } +} + +window.dino-main .dino-conversation .highlight-once { + animation-duration: 3s; + animation-timing-function: ease-out; + animation-iteration-count: 1; + animation-name: highlight; +} + +window.dino-main .dino-conversation .message-box.highlight { + background: @window_bg_color; +} + +window.dino-main .dino-conversation .message-box { + padding: 6px 15px 6px 15px; +} + +window.dino-main .dino-conversation .message-box:not(.has-skeleton) { + padding-left: 58px; +} + +window.dino-main .unread-count-notify { + background-color: alpha(@theme_fg_color, 0.8); + color: @theme_base_color; + font-family: monospace; + border-radius: 999em; + padding: 0 .35em; +} + +window.dino-main .unread-count-notify:backdrop { + background-color: alpha(@theme_unfocused_fg_color, 0.8); + color: @theme_unfocused_base_color; +} + +window.dino-main .unread-count { + background-color: alpha(@theme_fg_color, 0.1); + color: @theme_fg_color; + font-family: monospace; + border-radius: 999em; + padding: .2em .41em; +} + +window.dino-main .unread-count:backdrop { + background-color: alpha(@theme_unfocused_fg_color, 0.1); + color: @theme_unfocused_fg_color; +} + +window.dino-main .dino-sidebar > frame { + background: @insensitive_bg_color; + border-left: 1px solid @borders; + border-bottom: 1px solid @borders; +} + +/* Message */ + +.message-box { + transition: background .05s ease; +} + +window.dino-main .dino-conversation .message-box.edit-mode { + background: alpha(@theme_selected_bg_color, 0.1); +} + +window.dino-main .dino-conversation .message-box.edit-mode:hover { + background: alpha(@theme_selected_bg_color, 0.12); +} + +window.dino-main .dino-conversation .message-box.error { + background: alpha(@error_color, 0.1); +} + +window.dino-main .dino-conversation .message-box.error:hover { + background: alpha(@error_color, 0.12); +} + +window.dino-main .dino-quote { + border-left: 3px solid alpha(@theme_fg_color, 0.2); + background: alpha(@theme_fg_color, 0.05); + border-color: alpha(@theme_fg_color, 0.2); + padding: 10px; +} + +window.dino-main .dino-quote:hover { + background: alpha(@theme_fg_color, 0.08); +} + +/* Overlay Toolbar */ + +.dino-main .overlay-toolbar { + padding: 2px; + border-radius: 6px; + border-spacing: 0; +} + +.dino-main .overlay-toolbar > * { + margin-top: 0; + margin-bottom: 0; +} + +/* Fie Widget */ + +window.dino-main .file-box-outer, +window.dino-main .call-box-outer { + background: @theme_base_color; + border-radius: 3px; + border: 1px solid alpha(@theme_fg_color, 0.1); +} + +window.dino-main .file-box, +window.dino-main .call-box { + margin: 12px 16px 12px 12px; +} + +window.dino-main .file-image-widget { + border: 1px solid alpha(@theme_fg_color, 0.1); + border-radius: 3px; +} + +window.dino-main .file-image-widget .file-box-outer { + color: #eee; + background: rgba(0, 0, 0, 0.5); +} + +window.dino-main .file-image-widget .file-box-outer button { + color: #eee; + background: transparent; + border: none; + box-shadow: none; +} + +window.dino-main .file-image-widget .file-box-outer button:hover { + background: rgba(100, 100, 100, 0.5); +} + +/* Call widget */ + +window.dino-main .call-box-outer.incoming { + border-color: alpha(@theme_selected_bg_color, 0.3); +} + +window.dino-main .incoming-call-box { + background: alpha(@theme_selected_bg_color, 0.1); +} + +window.dino-main .multiparty-participants { + border-top: 1px solid alpha(@theme_fg_color, 0.05); + background: alpha(@theme_fg_color, 0.04); +} + +/* Reactions */ + +.dino-main .reaction-grid button { + min-height: 16px; + min-width: 30px; + padding: 4px; +} + +.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; +} + +.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 */ + +window.dino-main .dino-sidebar > frame.collapsed { + border-bottom: 1px solid @borders; +} + +window.dino-main .dino-sidebar frame.auto-complete { + background: @theme_base_color; +} + +window.dino-main .dino-sidebar frame.auto-complete list > row { + transition: none; +} + +/* File overlay */ + +window.dino-main .dino-white-overlay { + background: @theme_base_color; +} + +window.dino-main .dino-file-overlay { + border-radius: 5px; + border: 1px solid alpha(black, 0.2); + box-shadow: 0 2px 3px alpha(black, 0.1); +} + +/* Chat Input*/ + +window.dino-main .dino-chatinput frame box { + background: transparent; +} + +window.dino-main .dino-attach-button { + min-width: 24px; /* Make button the same width as avatars */ +} + +window.dino-main .dino-attach-button, +window.dino-main .dino-chatinput-button button { + border: none; + background: transparent; + box-shadow: none; + min-height: 0; + padding: 7px 5px; + color: alpha(@theme_fg_color, 0.7); + outline: none; +} + +window.dino-main .dino-attach-button:hover, +window.dino-main .dino-chatinput-button button:hover { + color: @theme_selected_bg_color; +} + +window.dino-main .dino-attach-button:backdrop, +window.dino-main .dino-chatinput-button button:backdrop { + color: alpha(@theme_unfocused_fg_color, 0.6); +} + +window.dino-main .dino-attach-button:active, +window.dino-main .dino-attach-button:checked, +window.dino-main .dino-chatinput-button button:active, +window.dino-main .dino-chatinput-button button:checked { + color: alpha(@theme_selected_bg_color, 0.8); +} + +window.dino-main .dino-attach-button:checked:backdrop, +window.dino-main .dino-chatinput-button button:checked:backdrop { + color: alpha(@theme_unfocused_selected_bg_color, 0.8); +} + + +.dino-chatinput, +.dino-chatinput textview, +.dino-chatinput textview text { + background-color: @theme_base_color; +} + + +/*Chat input warning*/ + +box.dino-input-warning frame border { + border-color: @warning_color; +} + +box.dino-input-warning frame separator { + background-color: @warning_color; + border: none; +} + +box.dino-input-warning label { + color: mix(@warning_color, @theme_fg_color, 0.5); +} + + +/*Chat input error*/ + +box.dino-input-error frame { + border-color: @error_color; +} + +box.dino-input-error frame separator { + background-color: @error_color; + border: none; +} + +box.dino-input-error .chat-input-status { + color: @error_color; +} + +@keyframes input-error-highlight { + 0% { transform: translate(0,0); } + 25% { transform: translate(-10px,0); } + 75% { transform: translate(10px,0); } + 100% { transform: translate(0,0); } +} + +box.dino-input-error .chat-input-status.input-status-highlight-once { + animation-duration: 0.5s; + animation-timing-function: ease-in-out; + animation-iteration-count: 1; + animation-name: input-error-highlight; +} + +/* Call window */ + +.dino-call-window decoration { + border-radius: 0; +} + +.dino-call-window .titlebar { + min-height: 0; +} + +.dino-call-window headerbar, .call-button { + box-shadow: none; +} + +.dino-call-window button.call-button { + outline: 0; + border-radius: 1000px; +} + +.dino-call-window button.white-button { + color: #1d1c1d; + background: rgba(255,255,255,0.85); + border: lightgrey; +} +.dino-call-window button.white-button:hover { + background: rgba(255,255,255,1); +} + +.dino-call-window button.transparent-white-button { + color: white; + background: rgba(255,255,255,0.15); + border: none; +} +.dino-call-window button.transparent-white-button:hover { + background: rgba(255,255,255,0.25); +} + +.dino-call-window menubutton.call-mediadevice-settings-button button.toggle { + border-radius: 1000px; + min-height: 0; + min-width: 0; + padding: 3px; + margin: 2px; + transition-duration: 0; +} + +.dino-call-window menubutton.call-mediadevice-settings-button button.toggle:hover, +.dino-call-window menubutton.call-mediadevice-settings-button button.toggle:checked { /* Effect that makes the button slightly larger on hover :) */ + border-radius: 1000px; + min-height: 0; + min-width: 0; + padding: 5px; + margin: 0; +} + +.dino-call-window .participant-header-bar .titles { + background: none; + border: none; + border-radius: 0; + color: #ededec; + text-shadow: 0 0 2px black; +} + +.dino-call-window .call-header-background { + background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0)); + border: 0; + border-radius: 0; +} + +.dino-call-window .participant-header-bar button { + background: none; +} + +.dino-call-window .participant-header-bar button:hover { + background: rgba(255,255,255,0.15); + border-color: rgba(255,255,255,0); + box-shadow: none; +} + +.dino-call-window .participant-header-bar button image { + color: alpha(white, 0.7); + -gtk-icon-shadow: none; +} + +.dino-call-window .participant-header-bar button:hover image { + color: white; +} + +.dino-call-window .participant-header-bar button.unencrypted image { + color: @error_color; +} + +.dino-call-window .call-bottom-bar { + background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.3)); + border: 0; +} + +.dino-call-window { + background-color: #212121; +} + +.dino-call-window .participant-name { + color: white; + text-shadow: 1px 1px 2px black; +} + +.dino-call-window .text-no-controls { + color: black; + background: white; + border-radius: 5px; + padding: 5px 10px; +} + +.dino-call-window .own-video { + box-shadow: 0 0 2px 0 rgba(0,0,0,0.5); +} + +.qrcode-container > contents { + background: white; /* Color of the quiet zone. MUST have the same "reflectance" as light modules of the QR code. */ +} diff --git a/main/data/theme.css b/main/data/theme.css deleted file mode 100644 index 6b93bc8f..00000000 --- a/main/data/theme.css +++ /dev/null @@ -1,467 +0,0 @@ -/** - * This theme file is applied after the operating system theme - * It provides sane defaults for things that are very Dino-specific. - */ - -statuspage { - opacity: 0.5; -} - -window.dino-main .dino-header-right { - background: @theme_base_color; -} - -window.dino-main .dino-header-left { - background: @insensitive_bg_color; -} - -window.dino-main headerbar.dino-left label.title { - opacity: 0; - font-size: 0; - color: transparent; -} - -window.dino-main .dino-conversation { - background: @theme_base_color; -} - -window.dino-main .dino-conversation undershoot, -window.dino-main .dino-conversation viewport /* Some themes set this */ { - background: none; -} - -@keyframes highlight { - from { background: alpha(@warning_color, 0.5); } - to { background: transparent; } -} - -window.dino-main .dino-conversation .highlight-once { - animation-duration: 3s; - animation-timing-function: ease-out; - animation-iteration-count: 1; - animation-name: highlight; -} - -window.dino-main .dino-conversation .message-box.highlight { - background: alpha(@theme_fg_color, 0.04); -} - -window.dino-main .dino-conversation .message-box { - padding: 6px 15px 6px 15px; -} - -window.dino-main .dino-conversation .message-box:not(.has-skeleton) { - padding-left: 58px; -} - -window.dino-main .unread-count-notify { - background-color: alpha(@theme_fg_color, 0.8); - color: @theme_base_color; - font-family: monospace; - border-radius: 999em; - padding: 0 .35em; -} - -window.dino-main .unread-count-notify:backdrop { - background-color: alpha(@theme_unfocused_fg_color, 0.8); - color: @theme_unfocused_base_color; -} - -window.dino-main .unread-count { - background-color: alpha(@theme_fg_color, 0.1); - color: @theme_fg_color; - font-family: monospace; - border-radius: 999em; - padding: .2em .41em; -} - -window.dino-main .unread-count:backdrop { - background-color: alpha(@theme_unfocused_fg_color, 0.1); - color: @theme_unfocused_fg_color; -} - -window.dino-main .dino-sidebar > frame { - background: @insensitive_bg_color; - border-left: 1px solid @borders; - border-bottom: 1px solid @borders; -} - -/* Message */ - -.message-box { - 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); -} - -window.dino-main .dino-conversation .message-box.edit-mode:hover { - background: alpha(@theme_selected_bg_color, 0.12); -} - -window.dino-main .dino-conversation .message-box.error { - background: alpha(@error_color, 0.1); -} - -window.dino-main .dino-conversation .message-box.error:hover { - background: alpha(@error_color, 0.12); -} - -window.dino-main .dino-quote { - border-left: 3px solid alpha(@theme_fg_color, 0.2); - background: alpha(@theme_fg_color, 0.05); - border-color: alpha(@theme_fg_color, 0.2); - padding: 10px; -} - -window.dino-main .dino-quote:hover { - background: alpha(@theme_fg_color, 0.08); -} - -/* Message Menu */ - -.message-menu-box { - background-color: @theme_base_color; - border: 1px solid alpha(@theme_fg_color, 0.15); - border-radius: 5px; -} - -.message-menu-button { - padding: 6px; - border: none; -} - -/* Fie Widget */ - -window.dino-main .file-box-outer, -window.dino-main .call-box-outer { - background: @theme_base_color; - border-radius: 3px; - border: 1px solid alpha(@theme_fg_color, 0.1); -} - -window.dino-main .file-box, -window.dino-main .call-box { - margin: 12px 16px 12px 12px; -} - -window.dino-main .file-image-widget { - border: 1px solid alpha(@theme_fg_color, 0.1); - border-radius: 3px; -} - -window.dino-main .file-image-widget .file-box-outer { - color: #eee; - background: rgba(0, 0, 0, 0.5); -} - -window.dino-main .file-image-widget .file-box-outer button { - color: #eee; - background: transparent; - border: none; - box-shadow: none; -} - -window.dino-main .file-image-widget .file-box-outer button:hover { - background: rgba(100, 100, 100, 0.5); -} - -/* Call widget */ - -window.dino-main .call-box-outer.incoming { - border-color: alpha(@theme_selected_bg_color, 0.3); -} - -window.dino-main .incoming-call-box { - background: alpha(@theme_selected_bg_color, 0.1); -} - -window.dino-main .multiparty-participants { - border-top: 1px solid alpha(@theme_fg_color, 0.05); - background: alpha(@theme_fg_color, 0.04); -} - -/* 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); -} - -window.dino-main button.reaction-box:hover, -window.dino-main menubutton.reaction-box:hover > button { - background-color: alpha(@theme_fg_color, 0.1); -} - -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); -} - -/* Sidebar */ - -window.dino-main .dino-sidebar > frame.collapsed { - border-bottom: 1px solid @borders; -} - -window.dino-main .dino-sidebar frame.auto-complete { - background: @theme_base_color; -} - -window.dino-main .dino-sidebar frame.auto-complete list > row { - transition: none; -} - -/* File overlay */ - -window.dino-main .dino-white-overlay { - background: @theme_base_color; -} - -window.dino-main .dino-file-overlay { - border-radius: 5px; - border: 1px solid alpha(black, 0.2); - box-shadow: 0 2px 3px alpha(black, 0.1); -} - -/* Chat Input*/ - -window.dino-main .dino-chatinput frame box { - background: transparent; -} - -window.dino-main .dino-attach-button { - min-width: 24px; /* Make button the same width as avatars */ -} - -window.dino-main .dino-attach-button, -window.dino-main .dino-chatinput-button button { - border: none; - background: transparent; - box-shadow: none; - min-height: 0; - padding: 7px 5px; - color: alpha(@theme_fg_color, 0.7); - outline: none; -} - -window.dino-main .dino-attach-button:hover, -window.dino-main .dino-chatinput-button button:hover { - color: @theme_selected_bg_color; -} - -window.dino-main .dino-attach-button:backdrop, -window.dino-main .dino-chatinput-button button:backdrop { - color: alpha(@theme_unfocused_fg_color, 0.6); -} - -window.dino-main .dino-attach-button:active, -window.dino-main .dino-attach-button:checked, -window.dino-main .dino-chatinput-button button:active, -window.dino-main .dino-chatinput-button button:checked { - color: alpha(@theme_selected_bg_color, 0.8); -} - -window.dino-main .dino-attach-button:checked:backdrop, -window.dino-main .dino-chatinput-button button:checked:backdrop { - color: alpha(@theme_unfocused_selected_bg_color, 0.8); -} - - -.dino-chatinput, -.dino-chatinput textview, -.dino-chatinput textview text { - background-color: @theme_base_color; -} - - -/*Chat input warning*/ - -box.dino-input-warning frame border { - border-color: @warning_color; -} - -box.dino-input-warning frame separator { - background-color: @warning_color; - border: none; -} - -box.dino-input-warning label { - color: mix(@warning_color, @theme_fg_color, 0.5); -} - - -/*Chat input error*/ - -box.dino-input-error frame { - border-color: @error_color; -} - -box.dino-input-error frame separator { - background-color: @error_color; - border: none; -} - -box.dino-input-error .chat-input-status { - color: @error_color; -} - -@keyframes input-error-highlight { - 0% { transform: translate(0,0); } - 25% { transform: translate(-10px,0); } - 75% { transform: translate(10px,0); } - 100% { transform: translate(0,0); } -} - -box.dino-input-error .chat-input-status.input-status-highlight-once { - animation-duration: 0.5s; - animation-timing-function: ease-in-out; - animation-iteration-count: 1; - animation-name: input-error-highlight; -} - -/* Call window */ - -.dino-call-window decoration { - border-radius: 0; -} - -.dino-call-window .titlebar { - min-height: 0; -} - -.dino-call-window headerbar, .call-button { - box-shadow: none; -} - -.dino-call-window button.call-button { - outline: 0; - border-radius: 1000px; -} - -.dino-call-window button.white-button { - color: #1d1c1d; - background: rgba(255,255,255,0.85); - border: lightgrey; -} -.dino-call-window button.white-button:hover { - background: rgba(255,255,255,1); -} - -.dino-call-window button.transparent-white-button { - color: white; - background: rgba(255,255,255,0.15); - border: none; -} -.dino-call-window button.transparent-white-button:hover { - background: rgba(255,255,255,0.25); -} - -.dino-call-window menubutton.call-mediadevice-settings-button button.toggle { - border-radius: 1000px; - min-height: 0; - min-width: 0; - padding: 3px; - margin: 2px; - transition-duration: 0; -} - -.dino-call-window menubutton.call-mediadevice-settings-button button.toggle:hover, -.dino-call-window menubutton.call-mediadevice-settings-button button.toggle:checked { /* Effect that makes the button slightly larger on hover :) */ - border-radius: 1000px; - min-height: 0; - min-width: 0; - padding: 5px; - margin: 0; -} - -.dino-call-window .participant-header-bar .titles { - background: none; - border: none; - border-radius: 0; - color: #ededec; - text-shadow: 0 0 2px black; -} - -.dino-call-window .call-header-background { - background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0)); - border: 0; - border-radius: 0; -} - -.dino-call-window .participant-header-bar button { - background: none; -} - -.dino-call-window .participant-header-bar button:hover { - background: rgba(255,255,255,0.15); - border-color: rgba(255,255,255,0); - box-shadow: none; -} - -.dino-call-window .participant-header-bar button image { - color: alpha(white, 0.7); - -gtk-icon-shadow: none; -} - -.dino-call-window .participant-header-bar button:hover image { - color: white; -} - -.dino-call-window .participant-header-bar button.unencrypted image { - color: @error_color; -} - -.dino-call-window .call-bottom-bar { - background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.3)); - border: 0; -} - -.dino-call-window { - background-color: #212121; -} - -.dino-call-window .participant-name { - color: white; - text-shadow: 1px 1px 2px black; -} - -.dino-call-window .text-no-controls { - color: black; - background: white; - border-radius: 5px; - padding: 5px 10px; -} - -.dino-call-window .own-video { - box-shadow: 0 0 2px 0 rgba(0,0,0,0.5); -} - -.qrcode-container > contents { - background: white; /* Color of the quiet zone. MUST have the same "reflectance" as light modules of the QR code. */ -} diff --git a/main/src/ui/application.vala b/main/src/ui/application.vala index 8e252dc6..6f0fdf62 100644 --- a/main/src/ui/application.vala +++ b/main/src/ui/application.vala @@ -33,10 +33,6 @@ public class Dino.Ui.Application : Adw.Application, Dino.Application { Environment.set_application_name("Dino"); Window.set_default_icon_name("im.dino.Dino"); - CssProvider provider = new CssProvider(); - provider.load_from_resource("/im/dino/Dino/theme.css"); - StyleContext.add_provider_for_display(Gdk.Display.get_default(), provider, STYLE_PROVIDER_PRIORITY_APPLICATION); - create_actions(); add_main_option_entries(options); diff --git a/main/src/ui/conversation_content_view/conversation_view.vala b/main/src/ui/conversation_content_view/conversation_view.vala index 70115512..5481cfc5 100644 --- a/main/src/ui/conversation_content_view/conversation_view.vala +++ b/main/src/ui/conversation_content_view/conversation_view.vala @@ -9,6 +9,7 @@ namespace Dino.Ui.ConversationSummary { [GtkTemplate (ui = "/im/dino/Dino/conversation_content_view/view.ui")] public class ConversationView : Widget, Plugins.ConversationItemCollection, Plugins.NotificationCollection { + private const int MESSAGE_MENU_BOX_OFFSET = -20; public Conversation? conversation { get; private set; } @@ -173,7 +174,7 @@ public class ConversationView : Widget, Plugins.ConversationItemCollection, Plug currently_highlighted.add_css_class("highlight"); // Move message menu - message_menu_box.margin_top = (int)(widget_y - 10); + message_menu_box.margin_top = (int)(widget_y + MESSAGE_MENU_BOX_OFFSET); } } diff --git a/main/src/ui/conversation_content_view/reactions_widget.vala b/main/src/ui/conversation_content_view/reactions_widget.vala index 890c1206..fe465676 100644 --- a/main/src/ui/conversation_content_view/reactions_widget.vala +++ b/main/src/ui/conversation_content_view/reactions_widget.vala @@ -123,9 +123,10 @@ public class ReactionsWidget : Grid { public ReactionsWidget() { this.row_spacing = this.column_spacing = 5; this.margin_top = 2; + this.add_css_class("reaction-grid"); add_button = new MenuButton() { tooltip_text= _("Add reaction") }; - add_button.get_style_context().add_class("reaction-box"); + add_button.add_css_class("pill"); Util.menu_button_set_icon_with_size(add_button, "dino-emoticon-add-symbolic", 14); EmojiChooser chooser = new EmojiChooser(); @@ -140,8 +141,8 @@ public class ReactionsWidget : Grid { Label reaction_label = new Label("" + reaction + "") { use_markup=true }; Label count_label = new Label("") { use_markup=true }; Button button = new Button(); - button.get_style_context().add_class("reaction-box"); - Box reaction_box = new Box(Orientation.HORIZONTAL, 4); + button.add_css_class("pill"); + Box reaction_box = new Box(Orientation.HORIZONTAL, 4) { halign=Align.CENTER }; reaction_box.append(reaction_label); reaction_box.append(count_label); button.set_child(reaction_box); @@ -161,9 +162,9 @@ public class ReactionsWidget : Grid { reaction_counts[reaction].label = "" + count.to_string() + ""; if (own) { - reaction_buttons[reaction].get_style_context().add_class("own-reaction"); + reaction_buttons[reaction].add_css_class("own-reaction"); } else { - reaction_buttons[reaction].get_style_context().remove_class("own-reaction"); + reaction_buttons[reaction].remove_css_class("own-reaction"); } // Build tooltip -- cgit v1.2.3-54-g00ecf