jenkins-bot has submitted this change and it was merged. Change subject: Replace colors with overhauled WCAG 2.0 compliant palette ......................................................................
Replace colors with overhauled WCAG 2.0 compliant palette Replacing colors with ones from current WCAG 2.0 level AA compliant color palette. Also improving SVG files by svgo optimization where easily applicable and cleaning up some minor Less shortcomings. Bug: T149769 Change-Id: I3d46c95a61112ba808c6ec664a95c94e9cb42c5e --- M resources/mmv/mmv.globals.less M resources/mmv/ui/img/icon_mmv.svg M resources/mmv/ui/img/icon_page.svg M resources/mmv/ui/mmv.ui.dialog.less M resources/mmv/ui/mmv.ui.download.dialog.less M resources/mmv/ui/mmv.ui.download.pane.less M resources/mmv/ui/mmv.ui.metadataPanel.less M resources/mmv/ui/mmv.ui.permission.less M resources/mmv/ui/mmv.ui.progressBar.less M resources/mmv/ui/mmv.ui.tipsyDialog.less M resources/mmv/ui/mmv.ui.viewingOptions.less 11 files changed, 36 insertions(+), 65 deletions(-) Approvals: Gergő Tisza: Looks good to me, approved jenkins-bot: Verified diff --git a/resources/mmv/mmv.globals.less b/resources/mmv/mmv.globals.less index c55f345..dc32fa2 100644 --- a/resources/mmv/mmv.globals.less +++ b/resources/mmv/mmv.globals.less @@ -17,7 +17,7 @@ @dialog-height: 350px; // Border radius for dialogs -@border-radius: 3px; +@border-radius: 2px; // Arrow size for dialogs @arrow-size: 20px; diff --git a/resources/mmv/ui/img/icon_mmv.svg b/resources/mmv/ui/img/icon_mmv.svg index 85cb1be..10dd00f 100644 --- a/resources/mmv/ui/img/icon_mmv.svg +++ b/resources/mmv/ui/img/icon_mmv.svg @@ -1,16 +1,14 @@ <?xml version="1.0" encoding="utf-8"?> -<!-- Generator: Adobe Illustrator 18.0.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 58.4 52.3" enable-background="new 0 0 58.4 52.3" xml:space="preserve"> <g> <g> - <path fill="#347BFF" d="M0,0v44.7h58.4V0H0z M51.9,35.4H6l13.7-17.7l2-0.8l12.9,13.7l6.8-4L51.9,35.4L51.9,35.4L51.9,35.4z"/> - <polygon fill="#FFFFFF" points="48,4.2 49.9,6.1 44.8,11.2 43.5,9.9 43.2,15.2 48.4,14.9 47.1,13.6 52.3,8.5 54.1,10.4 54.5,3.8 - "/> + <path fill="#36c" d="M0,0v44.7h58.4V0H0z M51.9,35.4H6l13.7-17.7l2-0.8l12.9,13.7l6.8-4L51.9,35.4L51.9,35.4L51.9,35.4z"/> + <polygon fill="#FFFFFF" points="48,4.2 49.9,6.1 44.8,11.2 43.5,9.9 43.2,15.2 48.4,14.9 47.1,13.6 52.3,8.5 54.1,10.4 54.5,3.8"/> </g> <rect x="0" y="44.7" fill="#E6E6E6" width="58.4" height="7.7"/> - <rect x="1.9" y="46.2" fill="#347BFF" width="13.8" height="1.6"/> - <rect x="1.9" y="49.3" fill="#347BFF" width="54.7" height="1.6"/> + <rect x="1.9" y="46.2" fill="#36c" width="13.8" height="1.6"/> + <rect x="1.9" y="49.3" fill="#36c" width="54.7" height="1.6"/> </g> </svg> diff --git a/resources/mmv/ui/img/icon_page.svg b/resources/mmv/ui/img/icon_page.svg index 438531f..84f6b6b 100644 --- a/resources/mmv/ui/img/icon_page.svg +++ b/resources/mmv/ui/img/icon_page.svg @@ -1,21 +1,7 @@ <?xml version="1.0" encoding="utf-8"?> -<!-- Generator: Adobe Illustrator 18.0.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 58.4 52.3" enable-background="new 0 0 58.4 52.3" xml:space="preserve"> -<g> - <rect x="0" y="0" fill="#E6E6E6" width="58.4" height="52.3"/> - <g> - <rect x="14.9" y="28.2" fill="#347BFF" width="13.8" height="1.6"/> - <rect x="14.9" y="31.3" fill="#347BFF" width="38.8" height="1.6"/> - <rect x="14.9" y="34.3" fill="#347BFF" width="38.8" height="1.6"/> - <rect x="14.9" y="39.5" fill="#347BFF" width="13.8" height="1.6"/> - <rect x="14.9" y="42.5" fill="#347BFF" width="38.8" height="1.6"/> - <rect x="14.9" y="45.6" fill="#347BFF" width="38.8" height="1.6"/> - </g> - <path fill="#347BFF" d="M14.4,7.8v17.4h22.7V7.8H14.4z M34.6,21.6H16.7l5.3-6.9l0.8-0.3l5,5.3l2.7-1.6L34.6,21.6L34.6,21.6 - L34.6,21.6z"/> - <rect x="0" y="10.8" fill="#CCCCCC" width="9.8" height="41.6"/> - <circle fill="#CCCCCC" cx="5.4" cy="4.8" r="3.7"/> -</g> +<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 58.4 52.3"> + <path fill="#e6e6e6" d="M0 0h58.4v52.3H0z"/> + <path d="M14.9 28.2h13.8v1.6H14.9zm0 3.1h38.8v1.6H14.9zm0 3h38.8v1.6H14.9zm0 5.2h13.8v1.6H14.9zm0 3h38.8v1.6H14.9zm0 3.1h38.8v1.6H14.9zm-.5-37.8v17.4h22.7V7.8H14.4zm20.2 13.8H16.7l5.3-6.9.8-.3 5 5.3 2.7-1.6 4.1 3.5z" fill="#36c"/> + <path fill="#ccc" d="M0 10.8h9.8v41.6H0z"/> + <circle fill="#ccc" cx="5.4" cy="4.8" r="3.7"/> </svg> diff --git a/resources/mmv/ui/mmv.ui.dialog.less b/resources/mmv/ui/mmv.ui.dialog.less index c6885c0..3206901 100644 --- a/resources/mmv/ui/mmv.ui.dialog.less +++ b/resources/mmv/ui/mmv.ui.dialog.less @@ -17,8 +17,6 @@ z-index: 1004; .mw-mmv-dialog-down-arrow { - @arrow-border-color: #aaa; - right: 48px; background-color: @background-color; width: @arrow-size; diff --git a/resources/mmv/ui/mmv.ui.download.dialog.less b/resources/mmv/ui/mmv.ui.download.dialog.less index 45d6c7a..7cc1405 100644 --- a/resources/mmv/ui/mmv.ui.download.dialog.less +++ b/resources/mmv/ui/mmv.ui.download.dialog.less @@ -32,6 +32,6 @@ .mw-mmv-dialog-down-arrow { bottom: @metadatabar-above-fold-height + @progress-bar-height + 45px; - background-color: #f2f2f2; + background-color: #f8f9fa; } } diff --git a/resources/mmv/ui/mmv.ui.download.pane.less b/resources/mmv/ui/mmv.ui.download.pane.less index b1c4b98..540063c 100644 --- a/resources/mmv/ui/mmv.ui.download.pane.less +++ b/resources/mmv/ui/mmv.ui.download.pane.less @@ -151,7 +151,7 @@ &-cta-invite { font-size: small; margin: 0; - color: #777; + color: #72777d; } &-cta { diff --git a/resources/mmv/ui/mmv.ui.metadataPanel.less b/resources/mmv/ui/mmv.ui.metadataPanel.less index a0cbd1c..d005858 100644 --- a/resources/mmv/ui/mmv.ui.metadataPanel.less +++ b/resources/mmv/ui/mmv.ui.metadataPanel.less @@ -5,7 +5,7 @@ @info-box-border-color: #ddd; @info-box-border-shadow-color: #c9c9c9; @secondary-text-color: rgb( 136, 136, 136 ); -@panel-below-fold-background-color: #f5f5f5; +@panel-below-fold-background-color: #f8f9fa; @fold-separator-border-width: 1px; @vertical-padding: 10px; @@ -15,11 +15,9 @@ .mw-mmv-info-box { display: inline-block; overflow: hidden; - border: 1px solid @info-box-border-color; border-bottom: 2px solid @info-box-border-shadow-color; - .box-round( 3px ); - + .box-round( @border-radius ); background-color: @info-box-color; } @@ -29,7 +27,6 @@ .mw-mmv-title-para { @height: @metadatabar-above-fold-inner-height - 2 * @vertical-padding; // needs explicit height for text truncation logic - margin: 0 0 @vertical-padding; // use margin instead of padding for bottom so text is not visible padding: @vertical-padding @horizontal-padding 0 @horizontal-padding; height: @height; @@ -250,12 +247,12 @@ } .mw-mmv-label { - color: #333; + background-color: #ddd; + color: #222; margin-left: 6px; margin-top: 1px; - .box-round( 3px ); + .box-round( @border-radius ); padding: 2px 5px; - background-color: #ddd; font-size: 0.9em; &:hover { background-color: #c9c9c9; diff --git a/resources/mmv/ui/mmv.ui.permission.less b/resources/mmv/ui/mmv.ui.permission.less index 0b133bd..4af3319 100644 --- a/resources/mmv/ui/mmv.ui.permission.less +++ b/resources/mmv/ui/mmv.ui.permission.less @@ -14,7 +14,7 @@ h3 { margin: 10px; padding: 0; - color: #565656; + color: #54595d; font-size: 0.95em; } diff --git a/resources/mmv/ui/mmv.ui.progressBar.less b/resources/mmv/ui/mmv.ui.progressBar.less index cfb046b..68ca120 100644 --- a/resources/mmv/ui/mmv.ui.progressBar.less +++ b/resources/mmv/ui/mmv.ui.progressBar.less @@ -4,12 +4,12 @@ @progress-height: @progress-bar-height; .mw-mmv-progress { + background-color: #c8ccd1; + background-color: rgba( 221, 221, 221, 0.5 ); width: 100%; height: @progress-height; position: absolute; top: -@progress-height; - background-color: #ccc; - background-color: rgba( 221, 221, 221, 0.5 ); } .mw-mmv-progress.empty { @@ -19,7 +19,7 @@ .mw-mmv-progress-percent { width: 0; height: @progress-height; - background: linear-gradient( -45deg, transparent 33%, rgba( 0, 0, 0, 0.1 ) 33%, rgba( 0, 0, 0, 0.1 ) 66%, transparent 66% ), #347bff; + background: linear-gradient( -45deg, transparent 33%, rgba( 0, 0, 0, 0.1 ) 33%, rgba( 0, 0, 0, 0.1 ) 66%, transparent 66% ), #36c; background-size: 35px 20px, 100% 100%, 100% 100%; .animation( mw-mmv-progress-percent-animation 1.5s linear infinite ); } diff --git a/resources/mmv/ui/mmv.ui.tipsyDialog.less b/resources/mmv/ui/mmv.ui.tipsyDialog.less index ade1260..44fa035 100644 --- a/resources/mmv/ui/mmv.ui.tipsyDialog.less +++ b/resources/mmv/ui/mmv.ui.tipsyDialog.less @@ -13,14 +13,14 @@ max-width: 400px; background-color: @background-color; border: 1px solid @border-color; - .box-round( 3px ); + .box-round( @border-radius ); padding: @padding; color: #555; .mw-mmv-tipsy-dialog-title { margin-bottom: 1em; - color: #333; + color: #222; font-size: 130%; } } diff --git a/resources/mmv/ui/mmv.ui.viewingOptions.less b/resources/mmv/ui/mmv.ui.viewingOptions.less index f735c16..7fb7534 100644 --- a/resources/mmv/ui/mmv.ui.viewingOptions.less +++ b/resources/mmv/ui/mmv.ui.viewingOptions.less @@ -1,23 +1,18 @@ @import '../mmv.globals'; @import '../mmv.mixins'; -@shadow-color: #aaa; @divider-border-height: 1px; .mw-mmv-options-dialog { @offset-top: ( @buttons-offset-right + ( 2 * @buttons-offset-each-top ) + 6px ); top: @offset-top; - height: auto; - z-index: 1004; - padding: 15px; &.mw-mmv-enable-confirmation-shown { background-color: #00af89; - box-shadow: 0 2px 0 #00634e; .mw-mmv-dialog-down-arrow { @@ -26,16 +21,16 @@ } &.mw-mmv-disable-confirmation-shown { - background-color: #eee; + background-color: #eaecf0; .mw-mmv-dialog-down-arrow { - background-color: #eee; + background-color: #eaecf0; } } &.mw-mmv-enable-div-shown { .mw-mmv-dialog-down-arrow { - background-color: #eee; + background-color: #eaecf0; } } @@ -76,12 +71,12 @@ .mw-mmv-disable-confirmation { .mw-mmv-options-dialog-header { - color: #333; + color: #222; padding: 0; } .mw-mmv-options-text-header { - color: #555; + color: #222; } } @@ -134,12 +129,11 @@ } .mw-mmv-options-icon { + /* @embed */ + background-image: url( img/icon_mmv.svg ); float: left; width: 58px; height: 52px; - - /* @embed */ - background-image: url( img/icon_mmv.svg ); } .mw-mmv-options-cancel-button, @@ -151,7 +145,7 @@ padding-top: 0; font-weight: normal; font-size: 1.25em; - color: #333; + color: #222; .mw-mmv-options-enable & { top: 35px; @@ -166,20 +160,18 @@ .mw-mmv-options-text-body { font-size: 0.9em; - color: #777; + color: #72777d; } .mw-mmv-options-enable-alert { + background-color: #eaecf0; + color: #222; position: absolute; left: -15px; right: -15px; top: -15px; - + border-top-right-radius: 2px; + border-top-left-radius: 2px; padding: 10px 15px; - - background-color: #eee; - border-top-right-radius: 3px; - border-top-left-radius: 3px; - color: #555; font-weight: 500; } -- To view, visit https://gerrit.wikimedia.org/r/319277 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: I3d46c95a61112ba808c6ec664a95c94e9cb42c5e Gerrit-PatchSet: 2 Gerrit-Project: mediawiki/extensions/MultimediaViewer Gerrit-Branch: master Gerrit-Owner: VolkerE <[email protected]> Gerrit-Reviewer: Gergő Tisza <[email protected]> Gerrit-Reviewer: MarkTraceur <[email protected]> Gerrit-Reviewer: Pginer <[email protected]> Gerrit-Reviewer: Prtksxna <[email protected]> Gerrit-Reviewer: VolkerE <[email protected]> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
