diff --git a/res/css/components/views/beacon/_ShareLatestLocation.scss b/res/css/components/views/beacon/_ShareLatestLocation.scss index 5d037fdbd55..cbdf34b9d7f 100644 --- a/res/css/components/views/beacon/_ShareLatestLocation.scss +++ b/res/css/components/views/beacon/_ShareLatestLocation.scss @@ -20,9 +20,20 @@ limitations under the License. color: $secondary-content; } -.mx_ShareLatestLocation_copy { +// double class to be more specific than the general mx_CopyableText CSS rule +.mx_CopyableText.mx_ShareLatestLocation_copy { // override copyable text style to make compact .mx_CopyableText_copyButton { + height: 13px; margin-left: $spacing-8 !important; + position: relative; + top: -1px; + width: 13px; + + &::before { + background-color: $secondary-content; + height: 13px; + width: 13px; + } } } diff --git a/res/css/views/context_menus/_MessageContextMenu.scss b/res/css/views/context_menus/_MessageContextMenu.scss index 90a1c58ee36..751a85f50c7 100644 --- a/res/css/views/context_menus/_MessageContextMenu.scss +++ b/res/css/views/context_menus/_MessageContextMenu.scss @@ -91,7 +91,12 @@ limitations under the License. } .mx_MessageContextMenu_iconCopy::before { + height: 12px; + left: 2px; mask-image: url($copy-button-url); + position: relative; + width: 12px; + top: 3px; } .mx_MessageContextMenu_iconEdit::before { diff --git a/res/css/views/elements/_CopyableText.scss b/res/css/views/elements/_CopyableText.scss index ceafd422730..e035b388613 100644 --- a/res/css/views/elements/_CopyableText.scss +++ b/res/css/views/elements/_CopyableText.scss @@ -16,6 +16,7 @@ limitations under the License. */ .mx_CopyableText { + align-items: flex-start; display: flex; justify-content: space-between; width: max-content; @@ -31,19 +32,25 @@ limitations under the License. .mx_CopyableText_copyButton { flex-shrink: 0; - width: 20px; - height: 20px; + // using em here to adapt to the local font size + width: 1em; + height: 1em; cursor: pointer; margin-left: 20px; display: block; + // center to first line + position: relative; + top: .15em; &::before { content: ""; - mask-image: url($copy-button-url); + mask-position: center center; + mask-repeat: no-repeat; + mask-size: contain; background-color: $message-action-bar-fg-color; - width: 20px; - height: 20px; + width: 1em; + height: 1em; display: block; background-repeat: no-repeat; } diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index ab524ad2df9..898974f73c0 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -603,6 +603,16 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss mask-size: 75%; } } + + .mx_EventTile_copyButton { + height: 17px; + mask-image: url($copy-button-url); + mask-position: center center; + mask-repeat: no-repeat; + mask-size: contain; + right: 9px; + width: 17px; + } } } @@ -623,10 +633,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss cursor: pointer; } -.mx_EventTile_copyButton { - mask-image: url($copy-button-url); -} - .mx_EventTile_collapseButton, .mx_EventTile_expandButton { mask-position: center; diff --git a/res/img/element-icons/copy.svg b/res/img/element-icons/copy.svg new file mode 100644 index 00000000000..5563442a30f --- /dev/null +++ b/res/img/element-icons/copy.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/res/img/feather-customised/clipboard.svg b/res/img/feather-customised/clipboard.svg deleted file mode 100644 index b25b97176c7..00000000000 --- a/res/img/feather-customised/clipboard.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index c028175a088..0e3af16fced 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/res/themes/legacy-light/css/_legacy-light.scss @@ -210,7 +210,7 @@ $event-highlight-bg-color: $yellow-background; // event timestamp $event-timestamp-color: #acacac; -$copy-button-url: "$(res)/img/feather-customised/clipboard.svg"; +$copy-button-url: "$(res)/img/element-icons/copy.svg"; // e2e $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 0ed91eed838..709f100e823 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -325,7 +325,7 @@ $focus-brightness: 105%; // Icon URLs // ******************** -$copy-button-url: "$(res)/img/feather-customised/clipboard.svg"; +$copy-button-url: "$(res)/img/element-icons/copy.svg"; // ******************** // Location sharing