/* Gajim Application CSS File */ /* GTK named colors Taken from: https://gitlab.gnome.org/GNOME/gtk/-/blob/gtk-3-24/gtk/theme/Adwaita/_colors-public.scss @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; } .tabular-digits { font-feature-settings: "tnum"; } messagedialog.confirmation-dialog > box { margin-top: 18px; } /* InfoBar */ infobar.info > revealer > box { color: #3A87AD; background-color: #D9EDF7; } infobar.question > revealer > box { color: #295A72; background-color: #AFDAF0; } infobar.warning > revealer > box { color: #D06821; background-color: #FFEBC0; } infobar.error > revealer > box { color: #B94A48; background-color: #F2DEDE; } /* ========================================================================= */ /* Text style */ .bold { font-weight: bold; } .monospace { font-family: monospace; } .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; } .small-label { font-size: 90%; } .draft { font-style: italic; color: @warning_color; } /* 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; } .info-color { color: rgb(75, 150, 200); } .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; } } .pulse-opacity { animation-name: pulse-opacity; animation-duration: 2.0s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .dnd-target { animation-name: pulse-opacity; animation-duration: 1.6s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } @keyframes pulse-transform { 0% { -gtk-icon-transform: scale(1.0); } 20% { -gtk-icon-transform: scale(1.1); } 35% { -gtk-icon-transform: scale(1.0); } } .pulse-transform { animation-name: pulse-transform; animation-duration: 2.0s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } @keyframes spin { to { -gtk-icon-transform: rotate(1turn); } } .spin { animation-name: spin; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite; } /* General purpose classes ================================================= */ .dialog-margin > box { margin: 18px;} .solid-background { background-color: @theme_base_color; } .border { border: 1px solid @borders; } .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; } /* ListBox */ .gajim-listbox { background: transparent; } .gajim-listbox row { padding: 12px; border-bottom: 1px solid @borders; } /* Drag and drop */ .dnd-area { border: 2px dashed @theme_selected_bg_color; border-radius: 6px; padding: 18px; } /* .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; } /* 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; } .unread-counter-silent { background-color: rgb(95, 95, 95); } .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; } .idle-time { font-size: 80%; font-weight: lighter; } .group { 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; background-color: rgb(128, 128, 128); } .link-button { min-height: 0px; } .floating-overlay-box { background-color: alpha(shade(@theme_bg_color, 0.3), 0.8); padding: 12px; border-radius: 6px; } .floating-overlay-box > label, .floating-overlay-box > spinner { color: shade(@theme_bg_color, 4.0); } /* Main Window ============================================================= */ .mainwindow-grid { background: @theme_base_color; } /* Generic sidebar / chatlist elements */ .account-identifier-bar { border-radius: 6px; } .selection-bar { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } /* AppSidebar, WorkspaceSidebar, AccountSidebar */ .chatlist-left-grid { border-right: 1px solid @unfocused_borders; background: @theme_bg_color; } /* AppSidebar */ .app-sidebar { margin-top: 3px; } .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; } .app-message-listbox row { border: 1px solid @borders; } /* WorkspaceSidebar */ .workspace-scrolled { background: transparent; } .workspace-sidebar { background: transparent; margin-right: 6px; } .workspace-sidebar-item { padding-top: 0px; padding-bottom: 0px; } .workspace-sidebar-item:selected, .workspace-sidebar-item:hover, .workspace-sidebar-item:focus { background: transparent; box-shadow: none; outline: none; } .workspace-sidebar-item .selection-bar { margin-top: 6px; margin-bottom: 6px; } .workspace-sidebar-item:selected .selection-bar { background-color: lighter(@theme_selected_bg_color); } .workspace-sidebar-item:hover .selection-bar { background-color: @theme_selected_bg_color; } .workspace-sidebar-item image { border-radius: 9px; margin: 4px 0 4px 4px; } .workspace-add:hover, .workspace-add:focus { background: transparent; box-shadow: none; outline: none; } .workspace-add button { margin: 6px 8px 6px 14px; } .workspace-avatar { border: 2px solid transparent; } .dnd-target .workspace-avatar { border: 2px dashed @theme_selected_bg_color; } /* AccountSidebar */ .account-sidebar { background: transparent; margin-bottom: 6px; } .account-sidebar-item { padding-top: 3px; padding-bottom: 3px; } .account-sidebar-item:hover, .account-sidebar-item:selected, .account-sidebar-item:focus { background: transparent; box-shadow: none; outline: none; } .account-sidebar-item .selection-bar { margin-top: 3px; margin-bottom: 3px; } .account-sidebar-item:selected .selection-bar { background-color: lighter(@theme_selected_bg_color); } .account-sidebar-item:hover .selection-bar { background-color: @theme_selected_bg_color; } .account-sidebar-item image { border-radius: 9px; padding: 3px; } .account-sidebar-item .account-identifier-bar { padding: 0 3px; margin: 3px 0; } .account-box { background-color: mix(@theme_base_color, @theme_fg_color, 0.15); } .account-box > separator { background-color: darker(@theme_bg_color); } /* AccountPage */ .account-page { background: transparent; } .account-page-roster { padding: 12px; } .account-page-box { padding: 18px; } /* Roster */ .roster treeview { padding: 0 3px; } /* NotificationManager */ .notification-listbox { background: transparent; } .notification-listbox row { padding: 12px; border: 1px solid @borders; border-bottom: 0px; } .notification-listbox row:nth-last-child(2) { border-bottom: 1px solid @borders; } /* Middle Grid (ChatList and widgets on top) */ .middle-grid > scrolledwindow { background: transparent; } .chatlist-top-bar { padding: 12px; background: transparent; } .chat-filter-icons { background: transparent; } .chat-filter-icons button { color: @insensitive_fg_color; } /* ChatList */ .chatlist { background: transparent; } .chatlist-row { transition: none; padding: 4px 0px 4px 6px; margin: 0 10px 3px 10px; border: 2px solid transparent; border-radius: 6px; } .chatlist-row:active, .chatlist-row:selected:active { box-shadow: none; } .chatlist-row:selected { background-color: mix(@theme_base_color, @theme_fg_color, 0.1); outline: none; } .chatlist-row:selected label:not(.unread-counter){ color: @theme_text_color; } .chatlist-row button { min-width: 25px; min-height: 25px; padding: 0px } .chatlist-row:selected button { color: @theme_fg_color; border-color: @borders; } .chatlist-row:selected image { color: @theme_fg_color; } .chatlist-row:selected spinner { 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% { -gtk-icon-transform: translate(0px, 2px); } 10% { -gtk-icon-transform: translate(0px, -1px) rotate(20deg); } 30% { -gtk-icon-transform: translate(0px, -1px) rotate(-20deg); } 40% { -gtk-icon-transform: translate(0px, 2px); } 100% { -gtk-icon-transform: translate(0px, 2px); } } .chatstate-icon { animation-name: composing; animation-duration: 2.0s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .header-box label { padding: 12px 18px 6px 18px; font-weight: bold; color: @insensitive_fg_color; font-size: 90%; } .header-box-first label { padding: 0px 18px 6px 18px; } /* SearchView */ .search-view { padding: 13px 12px 12px 12px; border-left: 1px solid @borders; background-color: @theme_base_color; } .search-view-row { padding: 4px 3px 4px 6px; border-radius: 4px; } .search-view-row-grid textview { 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 ======================================================== */ /* BaseRow */ .conversation-row { padding: 10px 3px 4px 6px; border-radius: 4px; margin-left: 8px; margin-right: 2px; } .conversation-row:hover button { opacity: 1; } .conversation-row:selected * { background-color: @theme_selected_bg_color; color: @theme_selected_fg_color; } .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; } /* 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; } /* 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-stack > 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; } /* Audiovisualizer */ .audiovisualizer { background-color: @insensitive_fg_color; border-color: @theme_unfocused_bg_color; } .audiovisualizer:checked { background-color: @theme_selected_bg_color; border-color: @theme_unfocused_bg_color; } .audiovisualizer:selected { background-color: lighter(@theme_selected_bg_color); border-color: @theme_unfocused_bg_color; } /* Conversation meta elements */ .conversation-meta { opacity: 0.6; font-size: 90%; } .conversation-read-marker { color: @insensitive_fg_color; font-size: 90%; font-style: italic; } .conversation-nickname { font-size: 90%; font-weight: bold; } /* MoreMenuButton */ .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; } /* Multi-purpose elements / widgets ======================================== */ /* 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; } /* ResourceSelector */ .resource-selector list row { padding: 6px; border-bottom: 1px solid @borders; } /* AvatarSelector */ .avatar-selector { border: 2px dotted @theme_selected_bg_color; border-radius: 12px; padding: 18px; } /* 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; } #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; } /* Settings widgets ======================================================== */ /* SettingsBox */ .settings-box > row { border-bottom: 1px solid @theme_unfocused_bg_color; } .settings-box > row:last-child { border-bottom: 0px; } .settings-box > row.activatable:active { box-shadow: none; } .settings-box > row { padding: 10px 20px 10px 10px; } .settings-box > row:not(.activatable) label { color: @insensitive_fg_color; } .settings-stack > box, .settings-stack viewport > box { margin: 30px 25px; } window.settings-dialog row { border-bottom: 0px; } window.settings-dialog list { background: transparent; margin: 12px; } /* GenericSetting */ #SubDescription { color: @insensitive_fg_color; font-size: 90%; } #GenericSettingBox { margin-left: 30px; } #GenericSettingBox > label { padding-right: 3px; } /* Generic Popover Menu with Buttons */ .PopoverButtonListbox { padding-left: 0px; padding-right: 0px; } .PopoverButtonListbox > list { margin-top: 10px; margin-bottom: 10px; } .PopoverButtonListbox > list > row { padding: 10px 20px 10px 20px; } .PopoverButtonListbox > list > row.activatable:active { box-shadow: none; background-color: @theme_selected_bg_color; } /* Settings ListBox */ list.settings { border: 1px solid @borders; } list.settings > row:not(:last-child) { border-bottom: 1px solid @theme_unfocused_bg_color; } list.settings row { min-height: 52px; } list.settings > row > box { margin: 10px 20px 10px 10px; } /* Settings Window */ list.settings-menu row { border-bottom: 1px solid; border-color: @theme_unfocused_bg_color; padding: 14px; min-width: 170px; } 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; } /* 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; } #ProfileWindow grid { padding: 18px; } #ProfileWindow grid > button { padding-left: 4px; padding-right: 4px; } #ProfileWindow popover { padding: 6px; } #ProfileWindow actionbar box { padding: 0px; } #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; } /* 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; } /* AccountsWindow */ .accounts-menu { border-right: 1px solid @borders; } .accounts-menu-listbox > row { border-bottom: 1px solid @theme_unfocused_bg_color; padding: 10px 20px 10px 10px; } .accounts-label-row { padding-top: 10px; padding-bottom: 10px; font-size: 1.6rem; font-weight: bold; color: @insensitive_fg_color; } /* AccountWizard */ .tls-error-list { border: 1px solid; border-color: @borders; } .tls-error-list > row { border-bottom: 1px solid; border-color: @theme_unfocused_bg_color; padding: 6px; } .tls-error-list > row:last-child { border-bottom: 0px; } /* OMEMO */ .fingerprint { color: @insensitive_fg_color; font-family: monospace; font-size: 90%; } .omemo-inactive-color { color: @insensitive_fg_color; } .omemo-trust-manager list row { border-bottom: 1px solid; border-color: @unfocused_borders; padding: 10px 20px 10px 10px; } .omemo-trust-manager list { border: 1px solid; border-color:@unfocused_borders; } .omemo-trust-manager list > row { outline: none; } .omemo-trust-popover row { padding: 10px 15px 10px 10px; } /* StartChatDialog */ .start-chat-treeview { padding: 5px; } .start-chat-treeview:focus {outline: none; } .start-chat-scrolled { border: 1px solid; border-color:@unfocused_borders; } .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; } .start-chat-row { padding: 10px 20px 10px 10px; } .start-chat-row:not(.activatable) label { color: @insensitive_fg_color; } .start-chat-row:focus { outline: none; } /* GroupchatConfig */ #GroupchatConfig stack { border-bottom: 1px solid; border-color: @borders;} #GroupchatConfig stacksidebar > scrolledwindow { background-color: @theme_base_color; border-bottom: 1px solid; border-color: @borders; } #GroupchatConfig treeview { padding: 5px; } /* ThemesWindow */ #ThemesWindow grid { padding: 12px; } .theme_listbox row { border-bottom: 1px solid; border-color: @theme_unfocused_bg_color; padding: 5px 10px 5px 10px;} .theme_listbox row:last-child { border-bottom: 0px; } .theme_listbox row.activatable:active { box-shadow: none; } .theme_listbox row:not(.activatable) label { color: @insensitive_fg_color; } .theme_listbox row:focus { outline: none; } .theme_listbox row:hover { background-color: @theme_base_color; } .theme_remove_button { background-color: @theme_base_color; border: 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; }