VolkerE has uploaded a new change for review. ( https://gerrit.wikimedia.org/r/384094 )
Change subject: Use standard close icon ...................................................................... Use standard close icon Making use of standard close icon and add `opacity` transition for slight user feedback on states. Bug: T50067 Change-Id: Ief0dc70d7a59ec1b21e0bcf6fea022c4f4394199 --- M resources/ext.gettingstarted.return.less D resources/images/x.png D resources/images/x.svg M resources/lightbulb/lightbulb.postEdit.less 4 files changed, 26 insertions(+), 13 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/GettingStarted refs/changes/94/384094/1 diff --git a/resources/ext.gettingstarted.return.less b/resources/ext.gettingstarted.return.less index f77ce1c..bef28b6 100644 --- a/resources/ext.gettingstarted.return.less +++ b/resources/ext.gettingstarted.return.less @@ -93,11 +93,21 @@ } .mw-gettingstarted-cta-close { + .background-image-svg( 'images/close.svg', 'images/close.png' ); float: right; - width: 13px; - height: 13px; + width: 20px; + height: 20px; margin-left: 20px; /* Prevents text from getting close */ - .background-image-svg( 'images/x.svg', 'images/x.png' ); + opacity: 0.87; // = `#222` on `background-color: #fff` + .transition( opacity 100ms ); + + &:hover { + opacity: 0.73; // = `#454545` on `background-color: #fff`, closest to `#444` + } + + &:active { + opacity: 1; + } } .mw-gettingstarted-cta-heading { diff --git a/resources/images/x.png b/resources/images/x.png deleted file mode 100644 index fd361f8..0000000 --- a/resources/images/x.png +++ /dev/null Binary files differ diff --git a/resources/images/x.svg b/resources/images/x.svg deleted file mode 100644 index 938fd51..0000000 --- a/resources/images/x.svg +++ /dev/null @@ -1,7 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?> -<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> -<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> -<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" - viewBox="0 0 96 96" enable-background="new 0 0 96 96" xml:space="preserve"> -<polygon fill="#AAAAAB" points="96,14 82,0 48,34 14,0 0,14 34,48 0,82 14,96 48,62 82,96 96,82 62,48 "/> -</svg> diff --git a/resources/lightbulb/lightbulb.postEdit.less b/resources/lightbulb/lightbulb.postEdit.less index 0180021..26b25e8 100644 --- a/resources/lightbulb/lightbulb.postEdit.less +++ b/resources/lightbulb/lightbulb.postEdit.less @@ -50,12 +50,22 @@ } .mw-gettingstarted-lightbulb-notification-hide { + .background-image-svg( '../images/close.svg', '../images/close.png' ); position: absolute; - width: 13px; - height: 13px; - .background-image-svg( '../images/x.svg', '../images/x.png' ); + width: 20px; + height: 20px; top: 19px; right: 19px; + opacity: 0.87; // = `#222` on `background-color: #fff` + .transition( opacity 100ms ); + + &:hover { + opacity: 0.73; // = `#454545` on `background-color: #fff`, closest to `#444` + } + + &:active { + opacity: 1; + } } .mw-gettingstarted-lightbulb-notification-body { -- To view, visit https://gerrit.wikimedia.org/r/384094 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: Ief0dc70d7a59ec1b21e0bcf6fea022c4f4394199 Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/GettingStarted Gerrit-Branch: master Gerrit-Owner: VolkerE <volke...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits