2015-07-27 17:18:44 +00:00
|
|
|
.mw-cookiewarning-container {
|
|
|
|
|
position: fixed;
|
2020-10-03 18:13:17 +00:00
|
|
|
background-color: rgba( 90, 90, 90, 0.85 );
|
2015-07-27 17:18:44 +00:00
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding: 7px 15px;
|
Move the warning outside sitenotice, tidy up code
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
2021-02-01 09:54:49 +00:00
|
|
|
bottom: 0;
|
2015-07-27 17:18:44 +00:00
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
Move the warning outside sitenotice, tidy up code
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
2021-02-01 09:54:49 +00:00
|
|
|
z-index: 1999;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
2016-09-14 15:11:38 +00:00
|
|
|
|
Move the warning outside sitenotice, tidy up code
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
2021-02-01 09:54:49 +00:00
|
|
|
// 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;
|
|
|
|
|
}
|
2015-08-16 09:49:05 +00:00
|
|
|
}
|
|
|
|
|
|
2020-10-03 18:13:17 +00:00
|
|
|
.mw-cookiewarning-text {
|
Move the warning outside sitenotice, tidy up code
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
2021-02-01 09:54:49 +00:00
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
font-size: 92%;
|
2020-10-03 18:13:17 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
form {
|
Move the warning outside sitenotice, tidy up code
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
2021-02-01 09:54:49 +00:00
|
|
|
flex-shrink: 0;
|
|
|
|
|
|
|
|
|
|
.oo-ui-widget {
|
|
|
|
|
margin: 0 0 0 8px;
|
|
|
|
|
}
|
2015-07-27 17:18:44 +00:00
|
|
|
}
|
2018-11-24 21:46:35 +00:00
|
|
|
}
|