mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/CookieWarning
synced 2024-12-18 00:30:43 +00:00
edd0a7d949
There's a lot of things going on here, so a quick summary: * Moved the warning outside sitenotice to avoid reflows and all kinds of other issues, including those with dismissable notices. * Placed the warning on the bottom of the page, on all skins, for consistency and to avoid obstructing vital UI elements such as site name, user tools, search box. * Changed the UI to use OOUI for, again, consistency and to avoid reinventing the wheel with button styling. * Removed the cookie emoji as it was only taking up valuable space on mobile and making designing a sensible layout much harder. * Merged the mobile and desktop RL modules into a single, responsive one. The warning will work correctly for any skin and screen width. * The integration tests are truly horrible, I tried to at least make them work. They deserve a proper rewrite, but that should be done after the extension switches to the new hook system. I will post screenshots of this in action in the first of the linked tasks. Bug: T271047 Bug: T173335 Change-Id: I6e2a3d7aeccc0d4df1b3238e52c67e72099d27d8
39 lines
668 B
Plaintext
39 lines
668 B
Plaintext
.mw-cookiewarning-container {
|
|
position: fixed;
|
|
background-color: rgba( 90, 90, 90, 0.85 );
|
|
box-sizing: border-box;
|
|
padding: 7px 15px;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 1999;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
// Narrow mobile screens
|
|
// 550px is a mostly arbitrary number, though it's used by a few other exts and skins
|
|
@media screen and ( max-width: 550px ) {
|
|
flex-wrap: wrap;
|
|
|
|
.mw-cookiewarning-text {
|
|
margin-bottom: 0.7em;
|
|
}
|
|
}
|
|
|
|
.mw-cookiewarning-text {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
font-size: 92%;
|
|
}
|
|
|
|
form {
|
|
flex-shrink: 0;
|
|
|
|
.oo-ui-widget {
|
|
margin: 0 0 0 8px;
|
|
}
|
|
}
|
|
}
|