Turning it into a class selector similar and amending the distances
to not rely on `line-height` in order to prevent unwanted side-effects
in non Latin scripts.
Follow-up to I85b5172a851bcfbf00606f355453f591782f9cc2
Depends-On: I2edf9f40e5b4b9296195cb581e216f82b28933ca
Bug: T239657
Change-Id: Ia27b48d45ad3fa4ab2f517734bd0cbe0d94f5ed4
If RelatedArtcles uses the SkinAfterContent hook (depends-on patch)
and we move the hook out of the main content block (parent patch),
it needs some styles to remain consistent.
Bug: T181242
Change-Id: I9fc00c22fb5e5b7d363455abe9d85062e67c7dfa
Depends-On: Iebd759c0d1a536768d18953f372664df762d9e04
If the page was long enough to have a vertical scrollbar, the check
for `$( window ).width()` would be incorrect because of the width of
the scrollbar itself. The correct value is `$( window ).outerWidth()`.
But rather than deal with that, we can instead use the API
specifically for matching media queries [1], then copy-paste the
media query from CSS and not have to think about it at all!
[1] https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
Bug: T227916
Change-Id: I79478040620391f5391b10aee52134fde0b88adf
When the icons are clicked for the first time, they are replaced with
a JS interface by Echo code, so don't cache them in a long-lived variable.
Otherwise if the user clicks one of the notification icons, then
resizes the browser to a mobile width, and then resizes it back, we
would insert duplicate Echo icons.
Also rename the temporary variable per conventions.
Bug: T227916
Change-Id: I08f2e3d2e293d727ac4492d1fb6fe2c7c65df4ad
When the personal menu bar is wider than the screen (browser window),
it gets cut off on the left (and the overflowing links slide under the
logo and then off the screen, making it impossible to click them).
This is caused by the `float: right` rule added in 5a7e620. To avoid
this, add `max-width: 100%`, which results in the menu being cut off
on the right again (which lets the user view the overflowing links by
horizontal scrolling).
Bug: T226875
Change-Id: Id4186215cc069f283f8ebeca0db587e1f1369062
on personal tools
Echo badges, like all OOUI buttons and quite a few other elements,
hide their labels with a negative text indent. This does not work
properly with backwards text alignment (align: right in ltr
scripts). We can achieve the same visual effect as the text-align:
right on the personal tools, however, by floating the entire list
right instead, thus unbreaking the default badge label hiding
method and also rendering the skin more consistent with Vector,
Example, etc.
And this should negate the need for bonkers workarounds.
Bug: T226684
Bug: T226594
Change-Id: I0ed21a78feb1b1298c30b969a1c80a4323e74043
See core commit 1890f315a2d756b9fa31856f59437ade8aafea7a for the full explanation, but tl,dr: these classes haven't been used since 2005.
Change-Id: I52d7facccce955da9f66102b657a0e3627904167
Separating the two background images out is unnecessary when we already
have a single-image fallback jpeg for old browsers, and also breaks
extensions such as Theme and user/site css affecting the background image.
Change-Id: Ic869b84fb6d0c10b91a171fb1f842e2290d3bc0a
These removed styles match no elements in the
Special:Preferences page since the OOUI transformation.
Bug: T208923
Change-Id: If7df130c53bcbbc199a6e10a6d84dbcc8b4e087d
Should avoid more of the issues with unwanted appearance of mobile
layouts. Cutoff results in layout switch when sidebar becomes ~a
third of the total window width.
bug: T196213
Change-Id: I9b8baee5fe53316128f864e732c86750b4e5470e
* Improve their accessibility by giving both links a full label
("Jump to x" and "Jump to y" instead of "Jump to: ", "x", "y").
This also makes things better for localisation.
* Use pure CSS for the toggling of the visibility on focus,
instead of relying on JavaScript. Especially given the
JS came from core's 'jquery.mw-jump' module, which is
considered technical debt per T195256.
* Use plain <a> links in the HTML instead of wrapped in a <div>.
This solves the long-standing problem whereby the margin
between #contentSub and #mw-content-text had to be awkwardly
negated and overridden.
Bug: T195256
Change-Id: I40a769ee3a822a5a9167ec1d144e6b151eb8e141
* Reorder ULS and Echo links
* Rename conditional module load hook to be more generic, and add
ULS module
* Remove .active bolding from dropdown
Change-Id: I7e746e7c5af8ffd7c4ca06742ab1fe6bc94ba531
Have echo just show the numbers instead of the badges, and add a
text link to special:notifications in the dropdown, as opposed to
entirely reimplementing the flyout layout
Change-Id: I072dbc2b7bf70b6675469e09e3beb3927e06d0f7
Dropdown menus and js interactiveness for people who like to pretend
we live in a modern era or something.
Does not actually support newfangled tapping and swiping stuff.
Does not properly support echo. (will follow up)
Change-Id: I27d50c320b1526b9d158016a0e8022567f78ccc1
* Add screen-mobile.css with basic mobile styles
* Force loading of screen-desktop on IE8- due to lack of
@media width support
* Add some new divs and a set of spoof cactions for jumping
around the page (what's js?)
* Replace cactions label with a more descriptive string (was
previously set to display:none regardless)
* Also add a set of icons for fixed widths for tabs and things
(icons-source.svg is the source file for the set, and includes
a few others that ultimately weren't used here)
Cutoff 850px. Desktop styles should remain unchanged, with
mobile remaining stylistically consistent.
Change-Id: I737a7447db1e44e0d6abaa4c07813295a5ac73a6
A proposed change (I737a7447db1e44e0d6abaa4c07813295a5ac73a6) requires
this not to require Less parsing. It was unnecessary to convert this
to Less when I could have just removed an `/* @embed */` annotation.
Follow-up to ac8b055693.
Change-Id: Iba82f57d4ba3e65c61a5ef795b3b8d9c3f164a39
Use .background-image() and .background-image-svg() mixins to embed
all SVG images, but not embed GIF/PNG fallbacks.
Change-Id: I807719dbf07749f4c942b4ba9b023440ca52a510
Previously added some svg versions of icons and background images.
svgs have now been run through svgo and cleaned up per Nikerabbit's
advice.
Also slightly tweaked user.svg to better match raster version.
Change-Id: Icf7ad259366a7051c66e2b8d6ac229ef1f0388fe
No guarantees that these styles actually apply to anything anymore.
But at least the TODO is resolved!
Change-Id: Ibb43c044f50f026afa84a0151b113dd600956942
Part of the move toward responsiveness.
* Use mixins and variables!
* Vectorise existing icons
* Delete a rule or two that don't apply to the source anymore
* Consolidate similar colours into the same ones using variables
Change-Id: I2f0eb2b79cba01d8fa3a06298711e8af4d5508ba
Also:
* Convert main.css to less because I can't figure out how to do svgs
and fallbacks by hand
* Add gradient image to fit with book for really, really, really wide
displays (and move book background to globalWrapper to make it
actually work)
Change-Id: Ie6f5b6b87b475953274688fc4640f9fa17184fa4
Also delete unused images, since even if something is
somewhere using them anyway (looked, couldn't find
anything), it wouldn't be able to find them in the new
image location regardless.
Wiki.png, magnify, and link are all part of core and have
been for some time.
Change-Id: Id7a02155a5f1b207908c9c0c8f7519b6d3f9a886
