mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-17 20:52:14 +00:00
e4a4050b81
Moving styles from the existing styles to common/layout or components stylesheets they should be associated with. Components are identified using PascalCase. Lowercase names are used for things that are not components. This distinction should help us reason with the code better and make it clearer where CSS belongs, saving us lots of wasted effort discussing conventions. Patch isn't making actual CSS changes themselves - for testing purposes this should be a NOOP. In preparation for the gradient removal, 'background-gradient.less' is marked as legacy. Merged 'externalLinks.less' into content.less, they belong to content. Bug: T249073 Change-Id: I8dbc29b7a19f7613b57b0984a8befaeae9c08798
65 lines
2.1 KiB
Plaintext
65 lines
2.1 KiB
Plaintext
@import '../../variables.less';
|
|
@import 'mediawiki.mixins.less';
|
|
@import 'mediawiki.mixins.rotation.less';
|
|
|
|
/* Watch/Unwatch Icon Styling */
|
|
/* Only use icon if the menu item is not collapsed into the "More" dropdown
|
|
* (in which case it is inside .vectorMenu instead of .vectorTabs). */
|
|
.vectorTabs {
|
|
// `#ca-unwatch` & `#ca-watch` both carry `.mw-watchlink` as well.
|
|
@width-watchlink: unit( 28 / @font-size-tabs / @font-size-browser, em );
|
|
@height-watchlink: unit( 40 / @font-size-tabs / @font-size-browser, em );
|
|
@size-watchlink-icon: unit( 16 / @font-size-tabs / @font-size-browser, em );
|
|
|
|
.mw-watchlink.icon a {
|
|
width: @width-watchlink;
|
|
/* This hides the text but shows the background image */
|
|
/* Must not exceed parent's height, otherwise the background disappears on Chrome (T196610) */
|
|
height: 0;
|
|
padding: @height-watchlink 0 0 0;
|
|
overflow: hidden;
|
|
|
|
&:before {
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 50%;
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
top: unit( 14 / @font-size-tabs / @font-size-browser, em );
|
|
left: unit( 5 / @font-size-tabs / @font-size-browser, em );
|
|
width: @size-watchlink-icon;
|
|
height: @size-watchlink-icon;
|
|
}
|
|
}
|
|
|
|
#ca-unwatch.icon a:before {
|
|
background-image: linear-gradient( transparent, transparent ), url( images/unwatch-icon.svg );
|
|
}
|
|
|
|
#ca-watch.icon a:before {
|
|
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: linear-gradient( transparent, transparent ), url( images/unwatch-icon-hl.svg );
|
|
}
|
|
|
|
#ca-watch.icon a:hover:before,
|
|
#ca-watch.icon a:focus:before {
|
|
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: linear-gradient( transparent, transparent ), url( images/watch-icon-loading.svg );
|
|
.rotation( 700ms );
|
|
/* Suppress the hilarious rotating focus outline on Firefox */
|
|
outline: 0;
|
|
cursor: default;
|
|
pointer-events: none;
|
|
.transform-origin( 50% 50% );
|
|
}
|
|
}
|