2022-11-11 17:09:51 +00:00
|
|
|
/**
|
|
|
|
* Limited width toggle - a button which lets users change the layout from
|
|
|
|
* a fixed-width content column to a layout where the content takes up the
|
|
|
|
* full window width.
|
|
|
|
*/
|
2022-10-21 18:14:54 +00:00
|
|
|
|
2022-11-07 22:57:31 +00:00
|
|
|
// By default, toggle should be hidden unless the breakpoint below is reached.
|
|
|
|
.vector-limited-width-toggle {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Note on certain pages the control will have no effect e.g. Special:RecentChanges
|
2023-01-19 17:30:55 +00:00
|
|
|
// Defining this at 1400px is a product decision so do not change it
|
|
|
|
// (more context at https://phabricator.wikimedia.org/T326887#8540889)
|
|
|
|
@media ( min-width: 1400px ) {
|
2022-11-11 17:09:51 +00:00
|
|
|
.vector-limited-width-toggle {
|
2022-11-07 22:57:31 +00:00
|
|
|
display: block;
|
|
|
|
position: fixed;
|
|
|
|
bottom: 8px;
|
|
|
|
right: 8px;
|
2022-11-11 17:09:51 +00:00
|
|
|
}
|
2022-10-21 18:14:54 +00:00
|
|
|
|
2022-11-07 22:57:31 +00:00
|
|
|
//NOTE: enabled/disabled class on body.
|
2022-10-21 18:37:26 +00:00
|
|
|
.vector-feature-limited-width-disabled .vector-limited-width-toggle:before {
|
2022-11-07 22:57:31 +00:00
|
|
|
background-image: url( images/fullscreen-close.svg );
|
|
|
|
}
|
2022-11-11 17:09:51 +00:00
|
|
|
|
2022-10-21 18:37:26 +00:00
|
|
|
.vector-feature-limited-width-enabled .vector-limited-width-toggle:before {
|
2022-11-07 22:57:31 +00:00
|
|
|
background-image: url( images/fullscreen.svg );
|
2022-10-21 18:14:54 +00:00
|
|
|
}
|
|
|
|
}
|