[Git][gajim/gajim][master] 2 commits: refactor: Use GTK theme colors for floating overlay box

Daniel Brötzmann pushed to branch master at gajim / gajim

Commits: c7ab8603 by wurstsalat at 2022-11-01T21:59:26+01:00 refactor: Use GTK theme colors for floating overlay box

- - - - - 266c1290 by wurstsalat at 2022-11-01T23:44:44+01:00 refactor: CSS: Order classes, reduce redundancy

- - - - -

12 changed files:

- gajim/data/gui/call_window.ui - gajim/data/gui/groupchat_state.ui - gajim/data/gui/main.ui - gajim/data/gui/message_actions_box.ui - gajim/data/style/gajim.css - gajim/gtk/adhoc.py - gajim/gtk/app_side_bar.py - gajim/gtk/chat_stack.py - gajim/gtk/component_search.py - gajim/gtk/conversation/message_selection.py - gajim/gtk/groupchat_join.py - gajim/gtk/message_actions_box.py

Changes:

===================================== gajim/data/gui/call_window.ui ===================================== @@ -366,7 +366,7 @@ <property name="icon-name">audio-input-microphone-symbolic</property> <style> <class name="dim-label"/> - <class name="audio-mic-animation"/> + <class name="pulse-transform"/> </style> </object> <packing>

===================================== gajim/data/gui/groupchat_state.ui ===================================== @@ -1,5 +1,5 @@ <?xml version="1.0" encoding="UTF-8"?> -<!-- Generated with glade 3.38.2 --> +<!-- Generated with glade 3.40.0 --> <interface> <requires lib="gtk+" version="3.24"/> <object class="GtkStack" id="groupchat_state"> @@ -44,6 +44,9 @@ <property name="position">2</property> </packing> </child> + <style> + <class name="floating-overlay-box"/> + </style> </object> <packing> <property name="name">not-joined</property> @@ -94,6 +97,9 @@ <property name="position">2</property> </packing> </child> + <style> + <class name="floating-overlay-box"/> + </style> </object> <packing> <property name="name">joining</property> @@ -128,14 +134,14 @@ <property name="position">1</property> </packing> </child> + <style> + <class name="floating-overlay-box"/> + </style> </object> <packing> <property name="name">fetching</property> <property name="position">2</property> </packing> </child> - <style> - <class name="groupchat-state"/> - </style> </object> </interface>

===================================== gajim/data/gui/main.ui ===================================== @@ -59,7 +59,7 @@ </packing> </child> <style> - <class name="app-page-box"/> + <class name="app-sidebar"/> </style> </object> <packing>

===================================== gajim/data/gui/message_actions_box.ui ===================================== @@ -24,7 +24,7 @@ </object> </child> <style> - <class name="chatcontrol-actionbar-button"/> + <class name="message-actions-box-button"/> <class name="flat"/> </style> </object> @@ -49,7 +49,7 @@ </object> </child> <style> - <class name="chatcontrol-actionbar-button"/> + <class name="message-actions-box-button"/> </style> </object> <packing> @@ -76,7 +76,7 @@ </object> </child> <style> - <class name="chatcontrol-actionbar-button"/> + <class name="message-actions-box-button"/> </style> </object> <packing> @@ -100,7 +100,7 @@ </object> </child> <style> - <class name="chatcontrol-actionbar-button"/> + <class name="message-actions-box-button"/> </style> </object> <packing> @@ -126,7 +126,7 @@ </object> </child> <style> - <class name="chatcontrol-actionbar-button"/> + <class name="message-actions-box-button"/> </style> </object> <packing> @@ -151,7 +151,7 @@ </object> </child> <style> - <class name="chatcontrol-actionbar-button"/> + <class name="message-actions-box-button"/> </style> </object> <packing> @@ -177,7 +177,7 @@ </object> </child> <style> - <class name="chatcontrol-actionbar-button"/> + <class name="message-actions-box-button"/> </style> </object> <packing> @@ -205,7 +205,7 @@ </object> </child> <style> - <class name="chatcontrol-actionbar-button"/> + <class name="message-actions-box-button"/> </style> </object> <packing>

===================================== gajim/data/style/gajim.css ===================================== @@ -1,175 +1,212 @@ /* Gajim Application CSS File */

-.chatcontrol-actionbar-button { - padding: 0px 5px 0px 5px; - background-color: @theme_base_color; - border: none; -} - -.message-action-box { margin: 8px 13px 8px 8px } - -.no-border { border: none; } -.scrolled-no-border { border: none; } -.no-scroll-indicator undershoot.top, undershoot.bottom { background-image: none; } -.scrollbar-style scrollbar trough {background-color:@theme_base_color; } -.scrollbar-style scrollbar {border:none; } -.one-line-scrollbar scrollbar.vertical slider { min-height: 20px; } - -.dialog-margin > box { margin: 18px;} - -#MessageWindow, #RosterWindow paned { background-color: @theme_base_color; } - -.solid-background { - background-color: @theme_base_color; -} - -#DropArea {background-color: @theme_base_color;} - -.chatcontrol-separator-top {margin-top: 5px;} +/* GTK named colors +Taken from: https://gitlab.gnome.org/GNOME/gtk/-/blob/gtk-3-24/gtk/theme/Adwaita/_colors... +@theme_fg_color +@theme_text_color +@theme_bg_color +@theme_base_color +@theme_selected_bg_color +@theme_selected_fg_color +@insensitive_bg_color +@insensitive_fg_color +@insensitive_base_color +@theme_unfocused_fg_color +@theme_unfocused_text_color +@theme_unfocused_bg_color +@theme_unfocused_base_color +@theme_unfocused_selected_bg_color +@theme_unfocused_selected_fg_color +@unfocused_insensitive_color +@borders +@unfocused_borders +@warning_color +@error_color +@success_color +*/ + +/* GTK specific changes =================================================== */ +/* Remove backdrop anomation */ +row:backdrop { transition: none; } +/* Treeview */ +treeview.space { padding: 6px; } +/* GtkLinkButton style */ +button.flat.link { padding: 0; border: 0; }

-.chatcontrol-separator {margin-bottom: 5px;} +messagedialog.confirmation-dialog > box { margin-top: 18px; }

-.message-input-border { - border: 2px solid @theme_unfocused_bg_color; - border-radius: 4px; +/* InfoBar */ +infobar.info > revealer > box { + color: #3A87AD; + background-color: #D9EDF7; } -.message-input-focus { - border: 2px solid @theme_selected_bg_color; - border-radius: 4px; +infobar.question > revealer > box { + color: #295A72; + background-color: #AFDAF0; } - -.transparent-selection > selection { - background-color: transparent; - color: @theme_fg_color; +infobar.warning > revealer > box { + color: #D06821; + background-color: #FFEBC0; } - -row:backdrop { transition: none; } - -.conversation-row:hover button { - opacity: 1; +infobar.error > revealer > box { + color: #B94A48; + background-color: #F2DEDE; }

-.conversation-row { - padding: 10px 3px 4px 6px; - border-radius: 4px; +/* ========================================================================= */ +/* Text style */ +.bold { font-weight: bold; } +.bold16 { + font-size: 1.33rem; + font-weight: bold; } - -.merged { padding-top: 1px;} - -.conversation-row grid textview:not(.sourceview) { - background: transparent; +.bold24 { + font-size: 2.0rem; + font-weight: bold; } -.conversation-row grid textview:not(.sourceview) text { - background: transparent; +.large-header { + font-size: 1.75rem; + font-weight: bold; } -.retracted-message { - opacity: 0.4; +.small-label { + font-size: 90%; } -@keyframes highlight { - from { background: rgb(140, 160, 180); } - to { background: transparent; } +.draft { + font-style: italic; + color: @warning_color; } -.conversation-search-highlight { - animation-duration: 3s; - animation-timing-function: ease-out; - animation-iteration-count: 1; - animation-name: highlight; + +/* General Padding / Margin */ +.margin-right18 { margin-right: 18px; } +.margin-top6 { margin-top: 6px; } +.margin-top12 { margin-top: 12px; } +.margin-3 { margin: 3px; } +.margin-12 { margin: 12px; } +.margin-18 { margin: 18px; } +.padding-6 { margin: 6px; } +.padding-12 { margin: 12px; } +.padding-18 { margin: 18px; } +.padding-left30 { padding-left: 30px; } + +/* Colors */ +.success-color { color: @success_color; } +.error-color { color: @error_color; } +.warning-color { color: @warning_color; } +.selected-color { color: @theme_selected_bg_color; } +.insensitive-fg-color {color: @insensitive_fg_color;} +.encrypted-color { color: rgb(75, 181, 67); } +.unencrypted-color { color: @error_color; } +.receipt-received-color { color: rgb(75, 181, 67); } + +/* Generic animations */ +@keyframes pulse-opacity { + 0% { opacity: 1.0; } + 20% { opacity: 0.7; } + 45% { opacity: 1.0; } } -.conversation-system-row { - padding: 18px; +.pulse-opacity { + animation-name: pulse-opacity; + animation-duration: 2.0s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; } -.conversation-date-row { - padding: 12px; +.dnd-target { + animation-name: pulse-opacity; + animation-duration: 1.6s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; } -.conversation-command-row label { - font-weight: 600; - border-radius: 6px; - padding: 12px; +@keyframes pulse-transform { + 0% { -gtk-icon-transform: scale(1.0); } + 20% { -gtk-icon-transform: scale(1.1); } + 35% { -gtk-icon-transform: scale(1.0); } } -.conversation-subject-box, -.conversation-call-box { - border-radius: 6px; - padding: 12px; +.pulse-transform { + animation-name: pulse-transform; + animation-duration: 2.0s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; } -.conversation-call-box label { - font-size: 90%; + +/* General purpose classes ================================================= */ +.dialog-margin > box { margin: 18px;} +.solid-background { background-color: @theme_base_color; } +.no-border { border: none; } +.scrolled-no-border { border: none; } +.preview-image { box-shadow: 0px 0px 3px 0px alpha(@theme_text_color, 0.2); } + +/* Scrollbars */ +.no-scroll-indicator undershoot.top, undershoot.bottom { background-image: none; } +.scrollbar-style scrollbar trough {background-color:@theme_base_color; } +.scrollbar-style scrollbar {border:none; } +.one-line-scrollbar scrollbar.vertical slider { min-height: 20px; } + +/* Treeview */ +.gajim-treeview { padding: 5px; } +.gajim-treeview check { padding: 0px; } +.gajim-scrolled { + border: 1px solid; + border-color:@unfocused_borders; } -.conversation-meta { - opacity: 0.6; - font-size: 90%; + +/* .inline-toolbar linked from top */ +.ontop-bar { + border-width: 1px; + border-bottom: none; + border-radius: 3px 3px 0 0; + padding: 5px; } -.conversation-read-marker { - color: @insensitive_fg_color; - font-size: 90%; - font-style: italic; + +/* Container with buttons linked from below */ +.linked-up * { + border-top: none; + border-top-left-radius: 0; + border-top-right-radius: 0; } -.conversation-nickname { - font-size: 90%; + +/* Unread counter */ +.unread-counter { + background-color: rgb(22, 100, 169); + color: rgb(242, 242, 242); font-weight: bold; + font-size: 80%; + padding-left: 6px; + padding-right: 6px; + border-radius: 10px; } -.code-widget { - border: 1px solid @borders; - border-radius: 4px; - margin-top: 6px; - margin-bottom: 6px; -} -.code-widget-header { - background-color: alpha(@insensitive_fg_color, 0.4); - padding: 0 6px; - border-top-left-radius: 3px; - border-top-right-radius: 3px; -} -.code-widget-header label { - font-size: 90%; -} -.code-widget-header button { - padding: 0; -} - -.file-transfer { - padding: 10px; - margin: 5px; - background-color: @theme_unfocused_base_color; - border: 1px solid @borders; - border-radius: 5px; +.unread-counter-silent { + background-color: rgb(95, 95, 95); }

-.preview-box { - border: 1px solid; - border-color: @borders; +.badge { + color: rgb(242, 242, 242); + padding-left: 6px; + padding-right: 6px; + padding-top: 2px; + padding-bottom: 2px; border-radius: 4px; - padding: 10px; - background-color: @theme_unfocused_base_color; -} -.preview-image-button, -.preview-image-button:hover { - padding: 0px; - border: none; - transition: none; - -gtk-icon-effect: none; - -gtk-icon-shadow: none; - background-image: none; - text-shadow: none; - box-shadow: none; -} -.preview-button { - border: 1px solid @borders; + font-size: 80%; + font-weight: bold; }

.link-button { min-height: 0px; }

-.avatar-selector { - border: 2px dotted @theme_selected_bg_color; - border-radius: 12px; - padding: 18px; +.floating-overlay-box { + background-color: alpha(shade(@theme_bg_color, 0.3), 0.9); + padding: 12px; + border-radius: 6px; +} +.floating-overlay-box > label, +.floating-overlay-box > spinner { + color: @theme_bg_color; }

-/* Main Window */ +/* Main Window ============================================================= */ .mainwindow-grid { background: @theme_base_color; }

-/* Generic elements */ +/* Generic sidebar / chatlist elements */ .account-identifier-bar { border-radius: 6px; } @@ -177,32 +214,31 @@ .selection-bar { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } -.small-label { - font-size: 90%; -}

-/* ChatList with Workspace and Account sidebars */ +/* AppSidebar, WorkspaceSidebar, AccountSidebar */ .chatlist-left-grid { border-right: 1px solid @unfocused_borders; background: @theme_bg_color; }

-.app-sidebar-row { - margin: 2px 0 2px 2px; -} -.app-sidebar-row image { - background: @unfocused_borders; - padding: 4px; -} - -.app-page-box { +/* AppSidebar */ +.app-sidebar { margin-top: 3px; } -.app-page-box > separator { +.app-sidebar > separator { background-color: @unfocused_borders; margin-left: 12px; margin-right: 12px; } +.app-sidebar-item { + margin: 2px 0 2px 2px; +} +.app-sidebar-item image { + background: @unfocused_borders; + padding: 4px; +} + +/* AppPage */ .app-page { padding: 18px; } @@ -210,7 +246,7 @@ .app-message-listbox row { border: 1px solid @borders; }

-/* Workspace sidebar */ +/* WorkspaceSidebar */ .workspace-scrolled { background: transparent; } @@ -255,8 +291,11 @@ .workspace-add button { .workspace-avatar { border: 2px solid transparent; } +.dnd-target .workspace-avatar { + border: 2px dashed @theme_selected_bg_color; +}

-/* Account sidebar */ +/* AccountSidebar */ .account-sidebar { background: transparent; margin-bottom: 6px; @@ -297,7 +336,7 @@ .account-box > separator { background-color: darker(@theme_bg_color); }

-/* Account Page */ +/* AccountPage */ .account-page { background: transparent; } @@ -307,11 +346,13 @@ .account-page-roster { .account-page-box { padding: 18px; } + /* Roster */ .roster treeview { padding: 0 3px; } -/* Notification listbox */ + +/* NotificationManager */ .notification-listbox { background: transparent; } @@ -324,7 +365,7 @@ .notification-listbox row:nth-last-child(2) { border-bottom: 1px solid @borders; }

-/*Middle Grid*/ +/* Middle Grid (ChatList and widgets on top) */ .middle-grid > scrolledwindow { background: transparent; }

.chatlist-top-bar { @@ -338,6 +379,7 @@ .chat-filter-icons button { color: @insensitive_fg_color; }

+/* ChatList */ .chatlist { background: transparent; } @@ -371,6 +413,13 @@ .chatlist-row:selected button { .chatlist-row:selected image { color: @theme_fg_color; } +.dnd-target-chatlist { + animation-name: pulse-opacity; + animation-duration: 2.0s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + border: 2px dashed @theme_selected_bg_color; +}

@keyframes composing { 0% { @@ -395,18 +444,6 @@ .chatstate-icon { animation-timing-function: ease-in-out; animation-iteration-count: infinite; } -.unread-counter { - background-color: rgb(22, 100, 169); - color: rgb(242, 242, 242); - font-weight: bold; - font-size: 80%; - padding-left: 6px; - padding-right: 6px; - border-radius: 10px; -} -.unread-counter-silent { - background-color: rgb(95, 95, 95); -} .header-box label { padding: 12px 18px 6px 18px; font-weight: bold; @@ -417,7 +454,7 @@ .header-box-first label { padding: 0px 18px 6px 18px; }

-/* Search view */ +/* SearchView */ .search-view { padding: 12px; border-left: 1px solid @borders; @@ -426,85 +463,271 @@ .search-view { .search-view-row-grid textview { background: transparent; } -.search-view-row-grid textview text { - background: transparent; +.search-view-row-grid textview text { + background: transparent; +} +.search-view-row-grid label { + font-size: 90%; +} +.search-view-counter label { + font-style: italic; + color: @insensitive_fg_color; +} +.search-view-header { + padding: 12px 6px 6px 6px; +} +.search-view-header label { + font-size: 90%; + color: @insensitive_fg_color; +} + +/* MessageActionsBox */ +.message-actions-box { margin: 8px 13px 8px 8px } +.message-actions-box-button { + padding: 0px 5px 0px 5px; + background-color: @theme_base_color; + border: none; +} + +/* MessageInputTextView */ +.message-input-border { + border: 2px solid @theme_unfocused_bg_color; + border-radius: 4px; +} +.message-input-focus { + border: 2px solid @theme_selected_bg_color; + border-radius: 4px; +} + +/* ConversationView ======================================================== */ + +/* Conversation row styles */ +.merged { padding-top: 1px;} +.retracted-message { opacity: 0.4; } +.transparent-selection > selection { + background-color: transparent; + color: @theme_fg_color; +} +@keyframes highlight { + from { background: rgb(140, 160, 180); } + to { background: transparent; } +} +.conversation-search-highlight { + animation-duration: 3s; + animation-timing-function: ease-out; + animation-iteration-count: 1; + animation-name: highlight; +} + +/* BaseRow */ +.conversation-row { + padding: 10px 3px 4px 6px; + border-radius: 4px; +} +.conversation-row:hover button { + opacity: 1; +} +.conversation-row grid textview:not(.sourceview), +.conversation-row grid textview:not(.sourceview) text { + background: transparent; +} + +/* FileTransferJingleRow */ +.file-transfer { + padding: 10px; + margin: 5px; + background-color: @theme_unfocused_base_color; + border: 1px solid @borders; + border-radius: 5px; +} + +/* SystemRow */ +.conversation-system-row { + padding: 18px; +} + +/* DateRow */ +.conversation-date-row { + padding: 12px; +} + +/* CommandRow */ +.conversation-command-row label { + font-weight: 600; + border-radius: 6px; + padding: 12px; +} + +/* Row widgets */ +.conversation-subject-box, +.conversation-call-box { + border-radius: 6px; + padding: 12px; +} +.conversation-call-box label { + font-size: 90%; +} + +/* QuoteWidget */ +.conversation-quote { + padding-bottom: 6px; +} +.conversation-quote textview text, +.conversation-quote label { + color: alpha(@theme_text_color, 0.6); +} +.conversation-quote-bar { + background-color: alpha(@theme_text_color, 0.2); +} + +/* CodeWidget */ +.code-widget { + border: 1px solid @borders; + border-radius: 4px; + margin-top: 6px; + margin-bottom: 6px; +} +.code-widget-header { + background-color: alpha(@insensitive_fg_color, 0.4); + padding: 0 6px; + border-top-left-radius: 3px; + border-top-right-radius: 3px; +} +.code-widget-header label { + font-size: 90%; +} +.code-widget-header button { + padding: 0; +} + +/* PreviewWidget */ +.preview-box { + border: 1px solid; + border-color: @borders; + border-radius: 4px; + padding: 10px; + background-color: @theme_unfocused_base_color; +} +.preview-image-button, +.preview-image-button:hover { + padding: 0px; + border: none; + transition: none; + -gtk-icon-effect: none; + -gtk-icon-shadow: none; + background-image: none; + text-shadow: none; + box-shadow: none; +} +.preview-button { + border: 1px solid @borders; } -.search-view-row-grid label { + +/* Conversation meta elements */ +.conversation-meta { + opacity: 0.6; font-size: 90%; } -.search-view-counter label { - font-style: italic; +.conversation-read-marker { color: @insensitive_fg_color; + font-size: 90%; + font-style: italic; } -.search-view-header { - padding: 12px 6px 6px 6px; -} -.search-view-header label { +.conversation-nickname { font-size: 90%; - color: @insensitive_fg_color; + font-weight: bold; }

-.resource-selector list row { - padding: 6px; - border-bottom: 1px solid @borders; +/* MoreMenuButton */ +.conversation-more-button { + padding-top: 0px; + padding-bottom:0px; + min-height: 16px; + opacity: 0; + transition: none; + border: none; } - -/* Profile window */ -#NicknameEntry:disabled { - font-size: 2.3rem; - font-weight: bold; +.conversation-more-button:checked { + opacity: 1; + background-image: none; +} +.conversation-more-button:active { + background-image: none; +} +.conversation-more-button:hover { border: none; - padding: 0px 0px 0px 0px; - background-color: @theme_unfocused_bg_color; - color: @theme_fg_color; + transition: none; + -gtk-icon-effect: none; + -gtk-icon-shadow: none; + background-image: none; + text-shadow: none; + box-shadow: none; }

-#ProfileWindow grid { padding: 18px; } -#ProfileWindow grid > button { - padding-left: 4px; - padding-right: 4px; -} -#ProfileWindow popover { padding: 6px; } -#ProfileWindow actionbar box { - padding: 0px; +/* Multi-purpose elements / widgets ======================================== */ + +/* ContactFlowBox */ +.contact-flowbox-item { + background-color: alpha(@borders, 0.4); + border-radius: 12px; + padding: 6px; } -#ProfileWindow actionbar button { - margin-top: 12px; +.contact-flowbox-item button { + background: none; + border: 1px solid alpha(@borders, 0.4); } -.profile-scrolled { +.contact-flowbox-item button:hover { border: 1px solid @borders; - border-radius: 4px; } -.profile-scrolled-read textview { - background: transparent; + +/* ResourceSelector */ +.resource-selector list row { + padding: 6px; + border-bottom: 1px solid @borders; } -.profile-scrolled-read textview text { - background: transparent; - color: @theme_text_color; + +/* AvatarSelector */ +.avatar-selector { + border: 2px dotted @theme_selected_bg_color; + border-radius: 12px; + padding: 18px; }

-/* Contact Info Window */ -.stack-border { - border: 1px solid; - border-color: @borders; +/* DataFormWidget */ +.field-fixed { font-size: 1.33rem; font-weight: bold; padding-top:5px;} +.data-form-title { font-size: 1.33rem; font-weight: bold; } +.data-form-widget grid { margin: 0px 18px 18px 18px; } +.data-form-widget treeview { padding: 5px; } +.data-form-widget scrolledwindow { border: 1px solid; border-color:@unfocused_borders; } +.data-form-widget textview { padding: 5px; } + +/* Assistant */ +.assistant-grid { padding: 18px; margin: 6px;} +.assistant-grid > box stack { padding: 18px; } + +/* Miscellaneous widgets ================================================== */ + +/* Notification (Windows) */ +#NotificationPopup { + background-color: #333333; + padding: 4px; } -.stack-header { - background-color: @insensitive_bg_color; - border-width: 0 1px 0 1px; - border-style: none solid none solid; - border-color: @borders; - padding: 9px 9px; +#NotificationPopup label { + color: #FFF; } -#ContactNameEntry:disabled { - font-size: 2.0rem; +#NotificationPopup button { + border-width: 0; + background-image: none; + background-color: inherit; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; +} +#NotificationPopupTitle { font-weight: bold; - border: none; - padding: 0px 0px 0px 0px; - background-color: @insensitive_bg_color; - color: @theme_fg_color; }

-/* Emoticon Popover */ +/* Emoticon Popover (ModifierChooser) */ popover#EmoticonPopover button { background: none; border: none; box-shadow:none; padding: 0px;} popover#EmoticonPopover button > label { font-size: 2.0rem; } popover#EmoticonPopover flowboxchild > label { font-size: 2.0rem; } @@ -516,30 +739,7 @@ .emoji-chooser-heading { font-size: 1.15rem; font-weight: bold; padding: 5px;} .emoji-chooser-flowbox { padding-left: 5px; padding-right: 11px; } .emoji-modifier-chooser-flowbox { padding-left: 5px; }

-/* HistorySyncAssistant */ -#HistorySyncAssistant notebook { padding: 18px; } -#HistorySyncAssistant progressbar text { color: #000; font-size: 1.6rem; padding: 10px;} -#HistorySyncAssistant list { border: 1px solid; border-color: @borders; } -#HistorySyncAssistant list > row { padding: 10px 30px 10px 30px; } -#HistorySyncAssistant list > row > label { color: @insensitive_fg_color; } -#HistorySyncAssistant list > row.activatable > label { color: @theme_text_color; } -#HistorySyncAssistant list > row.activatable:selected > label { color: @theme_selected_fg_color; } -#FinishedLabel { font-size: 1.2rem; font-weight: bold; } - -/* Server Info */ -#ServerInfo { border: 1px solid; border-color: @borders; } -#ServerInfo > row:first-child { border-top: 1px solid; border-color: @borders; } -#ServerInfo > row { padding: 10px 20px 10px 10px; } -#ServerInfo > label { padding:10px; color: @insensitive_fg_color; font-weight: bold; } -#ServerInfo > row.activatable:active { box-shadow: none; } - -/* Features Info */ -#FeaturesInfoGrid { padding: 6px; } -#FeaturesInfoGrid > list { border: 1px solid; border-color: @borders; } -#FeaturesInfoGrid > list > row:first-child { border-top: 1px solid; border-color: @borders; } -#FeaturesInfoGrid > list > row { padding: 10px 20px 10px 10px; } -#FeaturesInfoGrid > list > label { padding:10px; color: @insensitive_fg_color; font-weight: bold; } -#FeaturesInfoGrid > list > row.activatable:active { box-shadow: none; } +/* Settings widgets ======================================================== */

/* SettingsBox */ .settings-box > row { border-bottom: 1px solid; border-color: @theme_unfocused_bg_color; } @@ -558,7 +758,7 @@ window.settings-dialog list { }

/* GenericSetting */ -#SubDescription { color: @insensitive_fg_color; font-size: 90%;} +#SubDescription { color: @insensitive_fg_color; font-size: 90%; } #GenericSettingBox { margin-left: 30px; } #GenericSettingBox > label { padding-right: 3px; }

@@ -590,6 +790,27 @@ list.settings-menu row { list.settings-menu row label { padding-left: 12px; } + +popover.combo list { + min-width: 200px; + margin: 12px; +} +popover.combo { padding: 0px; } +popover.combo list { + border-style: none; + background-color: transparent; +} +popover.combo list > row { + padding: 0px 12px 0px 12px; + min-height: 40px; +} +popover.combo list > row:not(:last-child) { border-bottom: 1px solid alpha(#cdc7c2, 0.5); } +popover.combo scrollbar.vertical { padding-top: 2px; padding-bottom: 2px; } +popover.combo scrollbar.vertical { + padding-top: 2px; + padding-bottom: 2px; +} + .settings-stack viewport > box { margin-left: 30px; margin-right: 30px; @@ -601,28 +822,92 @@ .settings-border { border-color: @borders; }

-/* InfoBar */ -infobar.info > revealer > box { - color: #3A87AD; - background-color: #D9EDF7; +/* Dialogs ================================================================= */ + +/* ProfileWindow */ +#NicknameEntry:disabled { + font-size: 2.3rem; + font-weight: bold; + border: none; + padding: 0px 0px 0px 0px; + background-color: @theme_unfocused_bg_color; + color: @theme_fg_color; } -infobar.question > revealer > box { - color: #295A72; - background-color: #AFDAF0; + +#ProfileWindow grid { padding: 18px; } +#ProfileWindow grid > button { + padding-left: 4px; + padding-right: 4px; } -infobar.warning > revealer > box { - color: #D06821; - background-color: #FFEBC0; +#ProfileWindow popover { padding: 6px; } +#ProfileWindow actionbar box { + padding: 0px; } -infobar.error > revealer > box { - color: #B94A48; - background-color: #F2DEDE; +#ProfileWindow actionbar button { + margin-top: 12px; +} +.profile-scrolled { + border: 1px solid @borders; + border-radius: 4px; +} +.profile-scrolled-read textview { + background: transparent; +} +.profile-scrolled-read textview text { + background: transparent; + color: @theme_text_color; +} + +/* ContactInfo / GroupchatDetails */ +.stack-border { + border: 1px solid; + border-color: @borders; +} +.stack-header { + background-color: @insensitive_bg_color; + border-width: 0 1px 0 1px; + border-style: none solid none solid; + border-color: @borders; + padding: 9px 9px; +} +#ContactNameEntry:disabled { + font-size: 2.0rem; + font-weight: bold; + border: none; + padding: 0px 0px 0px 0px; + background-color: @insensitive_bg_color; + color: @theme_fg_color; }

-/*SendFileDialog*/ +/* HistorySyncAssistant */ +#HistorySyncAssistant notebook { padding: 18px; } +#HistorySyncAssistant progressbar text { color: #000; font-size: 1.6rem; padding: 10px;} +#HistorySyncAssistant list { border: 1px solid; border-color: @borders; } +#HistorySyncAssistant list > row { padding: 10px 30px 10px 30px; } +#HistorySyncAssistant list > row > label { color: @insensitive_fg_color; } +#HistorySyncAssistant list > row.activatable > label { color: @theme_text_color; } +#HistorySyncAssistant list > row.activatable:selected > label { color: @theme_selected_fg_color; } +#FinishedLabel { font-size: 1.2rem; font-weight: bold; } + +/* ServerInfo */ +#ServerInfo { border: 1px solid; border-color: @borders; } +#ServerInfo > row:first-child { border-top: 1px solid; border-color: @borders; } +#ServerInfo > row { padding: 10px 20px 10px 10px; } +#ServerInfo > label { padding:10px; color: @insensitive_fg_color; font-weight: bold; } +#ServerInfo > row.activatable:active { box-shadow: none; } + +/* Features */ +#FeaturesInfoGrid { padding: 6px; } +#FeaturesInfoGrid > list { border: 1px solid; border-color: @borders; } +#FeaturesInfoGrid > list > row:first-child { border-top: 1px solid; border-color: @borders; } +#FeaturesInfoGrid > list > row { padding: 10px 20px 10px 10px; } +#FeaturesInfoGrid > list > label { padding:10px; color: @insensitive_fg_color; font-weight: bold; } +#FeaturesInfoGrid > list > row.activatable:active { box-shadow: none; } + +/* SendFileDialog */ #SendFileDialog grid list > row { padding: 10px 20px 10px 10px; }

-/* Accounts Window */ +/* AccountsWindow */ .accounts-menu { border-right: 1px solid; border-color: @borders;} .accounts-settings-border {border: 1px solid; border-color: @borders;} .accounts-settings stack > box { margin:30px; } @@ -631,9 +916,10 @@ .accounts-label-row { padding-bottom: 10px; font-size: 1.6rem; font-weight: bold; - color: @insensitive_fg_color;} + color: @insensitive_fg_color; +}

-/* Account Creation */ +/* AccountWizard */ .tls-error-list { border: 1px solid; border-color: @borders; } @@ -645,12 +931,10 @@ .tls-error-list > row:last-child { border-bottom: 0px; }

-/* Start Chat Accounts Treeview */ +/* StartChatDialog */ .start-chat-treeview { padding: 5px; } .start-chat-treeview:focus {outline: none; } .start-chat-scrolled { border: 1px solid; border-color:@unfocused_borders; } - -/* StartChatListBox */ .start-chat-row { border-bottom: 1px solid; border-color: @theme_unfocused_bg_color; } .start-chat-row:last-child { border-bottom: 0px; } .start-chat-row.activatable:active { box-shadow: none; } @@ -658,23 +942,11 @@ .start-chat-row { padding: 10px 20px 10px 10px; } .start-chat-row:not(.activatable) label { color: @insensitive_fg_color; } .start-chat-row:focus { outline: none; }

-/* ContactFlowBox */ -.contact-flowbox-item { - background-color: alpha(@borders, 0.4); - border-radius: 12px; - padding: 6px; -} -.contact-flowbox-item button { - background: none; - border: 1px solid alpha(@borders, 0.4); -} -.contact-flowbox-item button:hover { - border: 1px solid @borders; -} - /* GroupChatRoster */ -.groupchat-roster { border-left: 1px solid; - border-color: @borders; } +.groupchat-roster { + border-left: 1px solid; + border-color: @borders; +} .groupchat-roster treeview { padding-left: 4px; }

/* GroupchatConfig */ @@ -686,58 +958,6 @@ #GroupchatConfig stacksidebar > scrolledwindow { } #GroupchatConfig treeview { padding: 5px; }

-.message-selection-box { - background-color: alpha(rgb(70, 70, 70), 0.9); - padding: 12px; - border-radius: 6px; -} -.message-selection-box > label { - color: rgb(230, 230, 230); -} - -.groupchat-state box { - background-color: alpha(rgb(70, 70, 70), 0.9); - padding: 12px; - border-radius: 6px; -} -.groupchat-state box > label { - color: rgb(230, 230, 230); -} -.groupchat-state box > spinner { - color: rgb(230, 230, 230); -} - -/* Popover Treeview */ -.popover_treeview { border-radius: 3px; background-color: @theme_bg_color; } -.popover_treeview { padding: 6px; } -.popover_treeview :hover { background-color: @theme_selected_bg_color; } - -/* .inline-toolbar linked from top */ -.ontop-bar { - border-width: 1px; - border-bottom: none; - border-radius: 3px 3px 0 0; - padding: 5px; -} - -/* Container with buttons linked from below */ -.linked-up * { - border-top: none; - border-top-left-radius: 0; - border-top-right-radius: 0; -} - -/* Highlighted label */ -.tagged { - background-color: @theme_selected_bg_color; - color: @theme_selected_fg_color; - padding: 0 3px; - margin: 0 -3px; - border-radius: 3px; - text-shadow: none; - opacity: 0.95; -} - /* ThemesWindow */ #ThemesWindow grid { padding: 12px; }

@@ -751,231 +971,10 @@ .theme_listbox row:hover { background-color: @theme_base_color; } .theme_remove_button { background-color: @theme_base_color; border: none; - background-image: none; } - + background-image: none; +} .theme_remove_button:focus {outline: none;}

.theme_popover_listbox { padding: 10px; } .theme_popover_listbox row { padding: 5px; } .theme_popover_listbox row:focus { outline: none; } - - -/* Text style */ - -.bold { font-weight: bold; } -.bold16 { - font-size: 1.33rem; - font-weight: bold; -} -.bold24 { - font-size: 2.0rem; - font-weight: bold; -} -.large-header { - font-size: 1.75rem; - font-weight: bold; -} -.insensitive-fg-color {color: @insensitive_fg_color;} - -.draft { - font-style: italic; - color: @warning_color; -} - -/* Padding/Margins */ -.margin-right18 { margin-right: 18px; } -.margin-top6 { margin-top: 6px; } -.margin-top12 { margin-top: 12px; } -.margin-3 { margin: 3px; } -.margin-12 { margin: 12px; } -.margin-18 { margin: 18px; } -.padding-6 { margin: 6px; } -.padding-12 { margin: 12px; } -.padding-18 { margin: 18px; } -.padding-left30 { padding-left: 30px; } - -/* Treeview */ -treeview.space { padding: 6px; } - -/* GtkLinkButton style */ -button.flat.link { padding: 0; border: 0; } - -/*MessageWindow Notebook*/ -.notebook-tab-label { min-width: 80px; } - -/*Icon colors*/ -.success-color { color: @success_color; } -.error-color { color: @error_color; } -.warning-color { color: @warning_color; } -.selected-color { color: @theme_selected_bg_color; } - -/*Encryption*/ -.encrypted-color { color: rgb(75, 181, 67); } -.unencrypted-color { color: @error_color; } - -/*Receipts*/ -.receipt-received-color { color: rgb(75, 181, 67); } - -/*Dataforms*/ -.field-fixed { font-size: 1.33rem; font-weight: bold; padding-top:5px;} -.data-form-title { font-size: 1.33rem; font-weight: bold; } -.data-form-widget grid { margin: 0px 18px 18px 18px; } -.data-form-widget treeview { padding: 5px; } -.data-form-widget scrolledwindow { border: 1px solid; border-color:@unfocused_borders; } -.data-form-widget textview { padding: 5px; } - -/*Image Preview*/ -.preview-image { box-shadow: 0px 0px 3px 0px alpha(@theme_text_color, 0.2); } - -/* Badge */ -.badge { - color: rgb(242, 242, 242); - padding-left: 6px; - padding-right: 6px; - padding-top: 2px; - padding-bottom: 2px; - border-radius: 4px; - font-size: 80%; - font-weight: bold; -} - -.dnd-target { - animation-name: pulse-opacity; - animation-duration: 2.0s; - animation-timing-function: ease-in-out; - animation-iteration-count: infinite; -} -.dnd-target .workspace-avatar { - border: 2px dashed @theme_selected_bg_color; -} - -.dnd-target-chatlist { - animation-name: pulse-opacity; - animation-duration: 2.0s; - animation-timing-function: ease-in-out; - animation-iteration-count: infinite; - border: 2px dashed @theme_selected_bg_color; -} - -@keyframes pulse-opacity { - 0% { opacity: 1.0; } - 20% { opacity: 0.7; } - 45% { opacity: 1.0; } -} -.pulse-opacity { - animation-name: pulse-opacity; - animation-duration: 2.0s; - animation-timing-function: ease-in-out; - animation-iteration-count: infinite; -} - -@keyframes pulse { - 0% { -gtk-icon-transform: scale(1.0); } - 20% { -gtk-icon-transform: scale(1.1); } - 35% { -gtk-icon-transform: scale(1.0); } -} - -.audio-mic-animation { - animation-name: pulse; - animation-duration: 2.0s; - animation-timing-function: ease-in-out; - animation-iteration-count: infinite; -} - -/* Treeview */ -.adhoc-treeview { padding: 5px; } -.adhoc-scrolled { border: 1px solid; border-color:@unfocused_borders; } - -/* Search Dialog */ -.search-treeview { padding: 5px; } -.search-scrolled { border: 1px solid; border-color:@unfocused_borders; } - -.gajim-treeview { padding: 4px; } -.gajim-treeview check { padding: 0px; } -.gajim-scrolled { border: 1px solid; border-color:@unfocused_borders; } - - -#GroupchatJoin > box {padding: 18px; } - -.assistant-grid { padding: 18px; margin: 6px;} -.assistant-grid > box stack { padding: 18px; } - -/* Windows notification */ -#NotificationPopup { - background-color: #333333; - padding: 4px; -} -#NotificationPopup label { - color: #FFF; -} -#NotificationPopup button { - border-width: 0; - background-image: none; - background-color: inherit; - box-shadow: none; - text-shadow: none; - -gtk-icon-shadow: none; -} -#NotificationPopupTitle { - font-weight: bold; -} - - -popover.combo list { - min-width: 200px; - margin: 12px; -} -popover.combo { padding: 0px; } -popover.combo list { - border-style: none; - background-color: transparent; -} -popover.combo list > row { - padding: 0px 12px 0px 12px; - min-height: 40px; -} -popover.combo list > row:not(:last-child) { border-bottom: 1px solid alpha(#cdc7c2, 0.5); } -popover.combo scrollbar.vertical { padding-top: 2px; padding-bottom: 2px; } -popover.combo scrollbar.vertical { - padding-top: 2px; - padding-bottom: 2px; -} - -messagedialog.confirmation-dialog > box { margin-top: 18px; } - -.conversation-quote { - padding-bottom: 6px; -} -.conversation-quote textview text, -.conversation-quote label { - color: alpha(@theme_text_color, 0.6); -} -.conversation-quote-bar { - background-color: alpha(@theme_text_color, 0.2); -} -.conversation-more-button { - padding-top: 0px; - padding-bottom:0px; - min-height: 16px; - opacity: 0; - transition: none; - border: none;} - -.conversation-more-button:checked { - opacity: 1; - background-image: none; -} - -.conversation-more-button:active { - background-image: none; -} - -.conversation-more-button:hover { - border: none; - transition: none; - -gtk-icon-effect: none; - -gtk-icon-shadow: none; - background-image: none; - text-shadow: none; - box-shadow: none; -}

===================================== gajim/gtk/adhoc.py ===================================== @@ -202,13 +202,13 @@ def __init__(self) -> None:

self._commands: dict[str, AdHocCommand] = {} self._scrolled = Gtk.ScrolledWindow() - self._scrolled.get_style_context().add_class('adhoc-scrolled') + self._scrolled.get_style_context().add_class('gajim-scrolled') self._scrolled.set_max_content_height(400) self._scrolled.set_max_content_width(400) self._scrolled.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC) self._treeview = Gtk.TreeView() - self._treeview.get_style_context().add_class('adhoc-treeview') + self._treeview.get_style_context().add_class('gajim-treeview') self._store = Gtk.ListStore(str, str) self._treeview.set_model(self._store) column = Gtk.TreeViewColumn(_('Commands'))

===================================== gajim/gtk/app_side_bar.py ===================================== @@ -54,7 +54,7 @@ class AppRow(Gtk.ListBoxRow): def __init__(self) -> None: Gtk.ListBoxRow.__init__(self) self.get_style_context().add_class('workspace-sidebar-item') - self.get_style_context().add_class('app-sidebar-row') + self.get_style_context().add_class('app-sidebar-item')

self._unread_label = Gtk.Label() self._unread_label.get_style_context().add_class(

===================================== gajim/gtk/chat_stack.py ===================================== @@ -111,7 +111,7 @@ def __init__(self): self._drop_area.set_no_show_all(True) self._drop_area.set_hexpand(True) self._drop_area.set_vexpand(True) - self._drop_area.set_name('DropArea') + self._drop_area.get_style_context().add_class('solid-background') self._drop_area.add(dnd_icon) self._drop_area.add(dnd_label)

===================================== gajim/gtk/component_search.py ===================================== @@ -219,7 +219,7 @@ def __init__(self) -> None:

self._scrolled = Gtk.ScrolledWindow() self._scrolled.set_propagate_natural_height(True) - self._scrolled.get_style_context().add_class('search-scrolled') + self._scrolled.get_style_context().add_class('gajim-scrolled') self._scrolled.set_no_show_all(True)

self.add(self._label) @@ -273,7 +273,7 @@ def process_result(self, form: Optional[Node]) -> None: self._treeview = Gtk.TreeView() self._treeview.set_hexpand(True) self._treeview.set_vexpand(True) - self._treeview.get_style_context().add_class('search-treeview') + self._treeview.get_style_context().add_class('gajim-treeview') self._treeview.connect('button-press-event', self._on_button_press)

for field, counter in zip(form.reported.iter_fields(),

===================================== gajim/gtk/conversation/message_selection.py ===================================== @@ -33,7 +33,7 @@ def __init__(self) -> None: self.set_halign(Gtk.Align.CENTER) self.set_valign(Gtk.Align.END)

- self.get_style_context().add_class('message-selection-box') + self.get_style_context().add_class('floating-overlay-box')

label = Gtk.Label(label=_('Click messages to select them')) self.attach(label, 0, 0, 2, 1)

===================================== gajim/gtk/groupchat_join.py ===================================== @@ -48,6 +48,7 @@ def __init__(self, account: str, jid: str) -> None: self.set_title(_('Join Group Chat')) self.set_type_hint(Gdk.WindowTypeHint.DIALOG) self.set_default_size(500, 550) + self.get_style_context().add_class('dialog-margin')

self._destroyed = False self.account = account

===================================== gajim/gtk/message_actions_box.py ===================================== @@ -68,7 +68,7 @@ def __init__(self) -> None: self._contact: Optional[ChatContactT] = None

self._ui = get_builder('message_actions_box.ui') - self.get_style_context().add_class('message-action-box') + self.get_style_context().add_class('message-actions-box')

self.attach(self._ui.box, 0, 0, 1, 1)

View it on GitLab: https://dev.gajim.org/gajim/gajim/-/compare/53814974db90d1564eb49c41bdd4d025...