watchstar: Remove PNG fallback for watchstar icon
Instead, for the subset of Grade C browsers without SVG support (currently IE8), we remove the icon and display the label text instead – in a hacky, but acceptable way. Bug: T248062 Change-Id: I87660b69fe65b9ec2989ea606e5f76d427c28fee
This commit is contained in:
parent
8a5fec19c5
commit
87a1d25079
Binary file not shown.
Before Width: | Height: | Size: 562 B |
Binary file not shown.
Before Width: | Height: | Size: 542 B |
Binary file not shown.
Before Width: | Height: | Size: 453 B |
Binary file not shown.
Before Width: | Height: | Size: 447 B |
|
@ -15,5 +15,6 @@
|
|||
@import 'externalLinks.less';
|
||||
}
|
||||
|
||||
@import 'watchstar-ie8.less';
|
||||
@import 'hd.less';
|
||||
@import 'print.less';
|
||||
|
|
|
@ -14,5 +14,6 @@
|
|||
@import 'externalLinks.less';
|
||||
}
|
||||
|
||||
@import 'watchstar-ie8.less';
|
||||
@import 'hd.less';
|
||||
@import 'print.less';
|
||||
|
|
|
@ -0,0 +1,32 @@
|
|||
/*!
|
||||
* Convert watchstar to text label in IE 8.
|
||||
*
|
||||
* Hide the SVG icon and show the text label instead.
|
||||
* This is in a separate file because it uses a
|
||||
* @media query, which can't be nested, so we need to include
|
||||
* this outside the overall '@media screen'.
|
||||
*/
|
||||
|
||||
// stylelint-disable no-duplicate-selectors
|
||||
|
||||
// Support IE 8: Show label instead (Grade C).
|
||||
// See https://stackoverflow.com/a/17699986/1696030
|
||||
// https://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/media-tests/
|
||||
@ie8-media-start: ~'@media \0screen {';
|
||||
@ie8-media-end: ~'} after';
|
||||
@{ie8-media-start}
|
||||
.vectorTabs .mw-watchlink.icon a {
|
||||
width: auto;
|
||||
height: auto;
|
||||
// Copied from 'VectorTabs.less'.
|
||||
padding: 1.25em 8px 0 8px;
|
||||
}
|
||||
|
||||
// LESS nesting doesn't work in this hack.
|
||||
.vectorTabs .mw-watchlink.icon a:before {
|
||||
display: none;
|
||||
}
|
||||
// Bogus extra rule for LESS compiler to render `@media` ending bracket.
|
||||
@{ie8-media-end} {
|
||||
/* This comment makes the block non-empty. */
|
||||
}
|
|
@ -33,27 +33,27 @@
|
|||
}
|
||||
|
||||
#ca-unwatch.icon a:before {
|
||||
.background-image-svg( 'images/unwatch-icon.svg', 'images/unwatch-icon.png' );
|
||||
background-image: linear-gradient( transparent, transparent ), url( images/unwatch-icon.svg );
|
||||
}
|
||||
|
||||
#ca-watch.icon a:before {
|
||||
.background-image-svg( 'images/watch-icon.svg', 'images/watch-icon.png' );
|
||||
background-image: linear-gradient( transparent, transparent ), url( images/watch-icon.svg );
|
||||
}
|
||||
|
||||
#ca-unwatch.icon a:hover:before,
|
||||
#ca-unwatch.icon a:focus:before {
|
||||
.background-image-svg( 'images/unwatch-icon-hl.svg', 'images/unwatch-icon-hl.png' );
|
||||
background-image: linear-gradient( transparent, transparent ), url( images/unwatch-icon-hl.svg );
|
||||
}
|
||||
|
||||
#ca-watch.icon a:hover:before,
|
||||
#ca-watch.icon a:focus:before {
|
||||
.background-image-svg( 'images/watch-icon-hl.svg', 'images/watch-icon-hl.png' );
|
||||
background-image: linear-gradient( transparent, transparent ), url( images/watch-icon-hl.svg );
|
||||
}
|
||||
|
||||
// Loading watchstar link class.
|
||||
#ca-unwatch.icon .loading:before,
|
||||
#ca-watch.icon .loading:before {
|
||||
background-image: url( images/watch-icon-loading.svg );
|
||||
background-image: linear-gradient( transparent, transparent ), url( images/watch-icon-loading.svg );
|
||||
.rotation( 700ms );
|
||||
/* Suppress the hilarious rotating focus outline on Firefox */
|
||||
outline: 0;
|
||||
|
|
Loading…
Reference in New Issue