diff --git a/scss/chat/_chat-list-item.scss b/scss/chat/_chat-list-item.scss index 2e7b586772..fbcb973230 100644 --- a/scss/chat/_chat-list-item.scss +++ b/scss/chat/_chat-list-item.scss @@ -8,6 +8,29 @@ padding: 0px 10px; align-items: center; + .status-icon { + flex-shrink: 0; + margin-top: 2px; + margin-bottom: 2px; + } + + .fresh-message-counter { + color: var(--unreadCountLabel); + background-color: var(--unreadCountBg); + text-align: center; + + // For alignment with the message text + margin-top: 1px; + + font-size: 9pt; + margin-left: 5px; + height: 20px; + padding: 0 5pt; + line-height: 20px; + border-radius: 10px; + font-weight: bold; + } + & > .content { flex-grow: 1; margin-left: 10px; @@ -115,28 +138,6 @@ margin-left: 2px; } } - .status-icon { - flex-shrink: 0; - margin-top: 2px; - margin-bottom: 2px; - } - - .fresh-message-counter { - color: var(--unreadCountLabel); - background-color: var(--unreadCountBg); - text-align: center; - - // For alignment with the message text - margin-top: 1px; - - font-size: 9pt; - margin-left: 5px; - height: 20px; - padding: 0 5pt; - line-height: 20px; - border-radius: 10px; - font-weight: bold; - } &:hover, &.context-menu-active { @@ -145,13 +146,13 @@ } .pseudo-chat-list-item.message-search-result { + height: 72px; &:hover .avatars { .small.avatar > .content { outline-color: var(--chatListItemBgHover); } } - height: 72px; .avatars { position: relative; height: 48px /** avatar-size + margin * 2 **/; diff --git a/scss/dialogs/_audit_log.scss b/scss/dialogs/_audit_log.scss index dc8fde7553..8cf81c4fb8 100644 --- a/scss/dialogs/_audit_log.scss +++ b/scss/dialogs/_audit_log.scss @@ -30,6 +30,7 @@ ul { list-style: none; li.time { + padding-bottom: 11px; div { text-transform: capitalize; border-bottom: 2px solid var(--globalText); @@ -37,7 +38,6 @@ font-weight: bold; display: inline-block; } - padding-bottom: 11px; } li.info { diff --git a/scss/dialogs/_qr-import.scss b/scss/dialogs/_qr-import.scss index 6082aa12d8..e92ee1b7ac 100644 --- a/scss/dialogs/_qr-import.scss +++ b/scss/dialogs/_qr-import.scss @@ -1,5 +1,6 @@ div.import-qr-code-dialog { text-align: center; + z-index: $z-index-new-local-scope; // needed for .scan-qr-description .qr-image-loader { max-height: 0px; overflow: hidden; @@ -19,8 +20,6 @@ div.import-qr-code-dialog { .bp4-button { margin: 10px; } - - z-index: $z-index-new-local-scope; // needed for .scan-qr-description } .qr-data { diff --git a/scss/gallery/_attachment-view.scss b/scss/gallery/_attachment-view.scss index 8106a0144d..d92715a840 100644 --- a/scss/gallery/_attachment-view.scss +++ b/scss/gallery/_attachment-view.scss @@ -45,12 +45,12 @@ '../images/download.svg', var(--fullScreenMediaButtons) ); + cursor: pointer; + margin-right: 5px; &:hover { background-color: var(--fullScreenMediaButtons); } - cursor: pointer; - margin-right: 5px; } .bp4-icon-cross { diff --git a/scss/gallery/_media-attachment.scss b/scss/gallery/_media-attachment.scss index 6bea012db2..1fc231f9e2 100644 --- a/scss/gallery/_media-attachment.scss +++ b/scss/gallery/_media-attachment.scss @@ -89,6 +89,11 @@ flex-direction: row; width: calc(100% - 5px); padding: 5px; + align-items: center; + position: relative; + + $size_width: 70px; + $date_width: 120px; &:hover { background: var(--galleryFileRowHover); @@ -128,12 +133,6 @@ } } - align-items: center; - position: relative; - - $size_width: 70px; - $date_width: 120px; - & > .name { flex-grow: 1; //width: calc(100% - $size_width - $date_width); diff --git a/scss/misc/_context_menu.scss b/scss/misc/_context_menu.scss index 93ddc87324..59539a6ab8 100644 --- a/scss/misc/_context_menu.scss +++ b/scss/misc/_context_menu.scss @@ -6,13 +6,13 @@ background-color: transparent; pointer-events: none; - &.active { - pointer-events: all; - } - // prevent double context menu on macOS // (when using touchpad it sometimes selects the text in the context menu, and then show a native context menu on top) user-select: none; + + &.active { + pointer-events: all; + } } .dc-context-menu { diff --git a/src/renderer/components/QrReader/styles.module.scss b/src/renderer/components/QrReader/styles.module.scss index c2c65cc8ca..b4f985dd17 100644 --- a/src/renderer/components/QrReader/styles.module.scss +++ b/src/renderer/components/QrReader/styles.module.scss @@ -90,15 +90,6 @@ } .qrReaderScanLine { - @keyframes pulsating { - from { - opacity: 1; - } - to { - opacity: 0; - } - } - animation-direction: alternate; animation-duration: 0.6s; animation-iteration-count: infinite; @@ -111,6 +102,15 @@ position: absolute; right: 50px; top: 50%; + + @keyframes pulsating { + from { + opacity: 1; + } + to { + opacity: 0; + } + } } .qrReaderFileInput { diff --git a/src/renderer/components/message/styles.module.scss b/src/renderer/components/message/styles.module.scss index 57d25bf9d6..5e1af55405 100644 --- a/src/renderer/components/message/styles.module.scss +++ b/src/renderer/components/message/styles.module.scss @@ -1,16 +1,17 @@ $reaction-transition-duration: 100ms; .message { + transition: margin-bottom ease-out $reaction-transition-duration; &.withReactions { margin-bottom: 10px; } - transition: margin-bottom ease-out $reaction-transition-duration; } .messageFooter { display: flex; flex-direction: row-reverse; justify-content: space-between; + transition: margin-bottom ease-out $reaction-transition-duration; &.onlyMedia { bottom: 0; @@ -20,7 +21,6 @@ $reaction-transition-duration: 100ms; right: 0; } - transition: margin-bottom ease-out $reaction-transition-duration; &.withReactionsNoText { margin-bottom: 10px; } diff --git a/themes/dev_rocket.scss b/themes/dev_rocket.scss index 5855c237ff..a4875acdb3 100644 --- a/themes/dev_rocket.scss +++ b/themes/dev_rocket.scss @@ -481,6 +481,7 @@ div.group-image-wrapper div.group-image-edit-button { .message { .msg-container { + display: flex; .msg-body { display: flex; flex-direction: column; @@ -510,8 +511,6 @@ div.group-image-wrapper div.group-image-edit-button { display: none; } } - - display: flex; } &.incoming { @@ -527,11 +526,10 @@ div.group-image-wrapper div.group-image-edit-button { } &.outgoing { + margin-left: 0; .author-wrapper .author { background-color: black; } - - margin-left: 0; } .author-wrapper {