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