From 19ca22f4244548dd68dbaf24eeadbe76c02c5131 Mon Sep 17 00:00:00 2001 From: Volker E Date: Tue, 19 Jul 2022 12:25:18 -0700 Subject: [PATCH] styles: Unify on standard external link icon (re-applying) Re-applying: Unify on using standard OOUI 'linkExternal' icon, which is directly replacing Vector's image without relying on ResourceLoader. This time we have lo- and hi-dpi optimized icon. Please note that the icon features standard link color `#36c` which is implemented in a later step. Due to the small icon size and the fact that current external link icon is also not using the legacy color, this seems acceptable to move forward with. Also using relative `em` instead of `px` to support user text zoom capabilities and introducing a `@size-indicator` variable to be replaced by WikimediaUI Base variables later. Alternative to I49de3bfff45. Replacing images and image names to make quicker lookup with icon collection possible future-facing. Note that CSSJanus is flipping the `ltr` string in the background image rule to `rtl`, therefore making sure that both icons are available. Bug: T261391 Change-Id: I1c3cfb4cd83fe4d5d08c06b84cdc192cb90c0dfe --- resources/common/images/external-link-ltr-icon.svg | 6 ------ resources/common/images/external-link-rtl-icon.svg | 6 ------ .../images/link-external-small-ltr-progressive.svg | 7 +++++++ .../images/link-external-small-rtl-progressive.svg | 7 +++++++ resources/common/typography.less | 11 ++++++++--- resources/common/variables.less | 1 + 6 files changed, 23 insertions(+), 15 deletions(-) delete mode 100644 resources/common/images/external-link-ltr-icon.svg delete mode 100644 resources/common/images/external-link-rtl-icon.svg create mode 100644 resources/common/images/link-external-small-ltr-progressive.svg create mode 100644 resources/common/images/link-external-small-rtl-progressive.svg diff --git a/resources/common/images/external-link-ltr-icon.svg b/resources/common/images/external-link-ltr-icon.svg deleted file mode 100644 index 526f9993..00000000 --- a/resources/common/images/external-link-ltr-icon.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/resources/common/images/external-link-rtl-icon.svg b/resources/common/images/external-link-rtl-icon.svg deleted file mode 100644 index 54fb18e8..00000000 --- a/resources/common/images/external-link-rtl-icon.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/resources/common/images/link-external-small-ltr-progressive.svg b/resources/common/images/link-external-small-ltr-progressive.svg new file mode 100644 index 00000000..12a36230 --- /dev/null +++ b/resources/common/images/link-external-small-ltr-progressive.svg @@ -0,0 +1,7 @@ + + + + external link + + + diff --git a/resources/common/images/link-external-small-rtl-progressive.svg b/resources/common/images/link-external-small-rtl-progressive.svg new file mode 100644 index 00000000..b889866e --- /dev/null +++ b/resources/common/images/link-external-small-rtl-progressive.svg @@ -0,0 +1,7 @@ + + + + external link + + + diff --git a/resources/common/typography.less b/resources/common/typography.less index 73bf3002..906bc89b 100644 --- a/resources/common/typography.less +++ b/resources/common/typography.less @@ -140,10 +140,15 @@ pre, } // External links -// Use of `a` element selector due to its widespread usage and for limiting generic class scope. +// Use of `a` element selector for limiting generic class scope due to `.external` widespread usage. .mw-parser-output a.external { - background-image: url( images/external-link-ltr-icon.svg ); + // Use copy of Codex/OOUI WikimediaUI theme's 'linkExternal' icon in progressive color. + // Note that CSSJanus is flipping the `ltr` in the URL to `rtl`. + // Therefore make sure that both icons are available and up-to-date. + background-image: url( images/link-external-small-ltr-progressive.svg ); background-position: center right; background-repeat: no-repeat; - padding-right: 13px; + // Equivalent of `12px` at calculation base of `14px` is `0.857em`. + background-size: 0.857em; + padding-right: 1em; } diff --git a/resources/common/variables.less b/resources/common/variables.less index bc4f5fb1..0e298121 100644 --- a/resources/common/variables.less +++ b/resources/common/variables.less @@ -63,6 +63,7 @@ @size-sidebar-button: unit( 44 / @font-size-browser, em ); // Equals `2.75em`. @size-icon: unit( 20 / @font-size-browser, em ); +@size-indicator: unit( 12 / @font-size-browser, em ); // Copied from mediawiki.ui.icons @icon-padding-md: unit( 12 / @font-size-browser, em );