7e423c07b7
A new feature/skin option is added that is enabled safely inside a MobileFrontend available/unavailable hook that changes the skin to place talk tabs at the top of the page. These new talk tabs purposely show on the main page, user page and standard pages and do not show on special pages. Depends-On: Ie1a583657176acc6f7046c569c2e94fa2f72ff93 Bug: T212216 Change-Id: I57b70cd325666a287678dc897159b5bf9d089b78
131 lines
2.7 KiB
Plaintext
131 lines
2.7 KiB
Plaintext
@import '../../minerva.less/minerva.variables';
|
|
@import '../../minerva.less/minerva.mixins';
|
|
|
|
.heading-holder {
|
|
@pageActionsGutter: 0.5em;
|
|
@pageActionsHeight: @pageActionFontSize + (2 * @iconGutterWidth);
|
|
// FIXME: padding-bottom can be removed when work on T212216
|
|
// has been deployed and varnish cache cleared.
|
|
padding: @titleSectionSpacingTop 0 (@pageActionsHeight + @pageActionsGutter);
|
|
position: relative;
|
|
|
|
// FIXME: Can be made default when work on T212216
|
|
// has been deployed and varnish cache cleared.
|
|
&--new {
|
|
padding-bottom: 0;
|
|
}
|
|
// FIXME: Can be removed when work on T212216
|
|
// has been deployed and varnish cache cleared.
|
|
&--no-page-actions {
|
|
padding-bottom: @pageActionsGutter;
|
|
|
|
&--new {
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.tagline {
|
|
color: @colorGray5;
|
|
font-size: @taglineFontSize;
|
|
margin: 2px 0 12px;
|
|
}
|
|
}
|
|
|
|
#section_0 {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
border-bottom: 0;
|
|
}
|
|
|
|
#page-actions {
|
|
font-size: @pageActionFontSize;
|
|
float: none;
|
|
border: 0;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
margin-top: -2px;
|
|
border-top: 1px solid @colorGray14;
|
|
border-bottom: 1px solid @colorGray12;
|
|
padding: 0.5em 0;
|
|
|
|
li {
|
|
display: inline-block;
|
|
// Needed for non-JavaScript users
|
|
position: relative;
|
|
cursor: pointer;
|
|
// Override .hlist rule.
|
|
margin-right: 0;
|
|
margin-bottom: 0;
|
|
float: right;
|
|
|
|
// edit, language and watchstar
|
|
a {
|
|
// Needed for non-JavaScript users
|
|
position: absolute;
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
// needed for ContentOverlay pointer arrow
|
|
margin: 0 0 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
.language-selector {
|
|
float: left;
|
|
margin-left: -@iconGutterWidth;
|
|
|
|
&.disabled {
|
|
cursor: default;
|
|
opacity: 0.25;
|
|
}
|
|
}
|
|
|
|
#ca-edit {
|
|
margin-right: -@iconGutterWidth;
|
|
}
|
|
}
|
|
|
|
// FIXME: cached HTML. Can be removed when work on T212216
|
|
// has been deployed and varnish cache cleared.
|
|
.heading-holder #page-actions:first-child {
|
|
position: absolute;
|
|
bottom: 0;
|
|
}
|
|
|
|
// Watchstar is hidden for anonymous no-js users
|
|
// While we could link the icon to the login/signup form, this is not
|
|
// a perfect experience and could be confusing.
|
|
// In JavaScript this icon will be converted to a watch icon and will point
|
|
// to a Call to action to sign up/login and explain why that's a good idea.
|
|
// Thus, anonymous users without JS will never see this icon.
|
|
// This is a small % of our users, so deemed okay.
|
|
.client-nojs {
|
|
.watch-this-article {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.is-authenticated {
|
|
.watch-this-article {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
}
|
|
|
|
// On small devices that don't support Javascript, hide the page actions bar
|
|
@media all and ( max-width: @width-breakpoint-mobile - 1 ) {
|
|
.client-nojs {
|
|
#page-actions {
|
|
display: none;
|
|
}
|
|
|
|
#section_0 {
|
|
border: 0;
|
|
}
|
|
}
|
|
}
|