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/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 ---------------------------- 6 files changed, 456 insertions(+), 470 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/data') 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. */ -} -- cgit v1.2.3-54-g00ecf