4487cda6fa
Core mediawiki.feedlink sets `a.feedlink {padding-left: 16px;}` to
establish proper spacing around the feed icon background-image. That
rule was overridden by a much more specific rule for the mobile menu,
causing the text to overlap the icon.
This change duplicates the padding-left rule at a higher specificity,
fixing the overlap problem.
This could also be fixed by significantly increasing specificity for the
rule in mediawiki.feedlink, but that would break the existing skins and
extensions that intentionally override it.
This patch has a soft-ish dependency on I897b85d3e77233b858ee85be263a14e401fe5fd2
to work correctly when the page is loaded in mobile format. Without that
patch, an empty space would be visible where the icon should be unless
the page was loaded in desktop format.
Depends-On: I897b85d3e77233b858ee85be263a14e401fe5fd2
Bug: T291274
Change-Id: Id427653eb21194085853de903624b9a537eeece6
122 lines
1.8 KiB
Text
122 lines
1.8 KiB
Text
@import 'variables.less';
|
|
|
|
// remove duplicates we're not using here
|
|
#p-search-mobilejs,
|
|
#p-tb-mobilejs,
|
|
#p-lang-mobilejs,
|
|
#t-contributions {
|
|
display: none;
|
|
}
|
|
|
|
#sidebar #p-tb,
|
|
#sidebar #p-lang,
|
|
#sidebar #p-search {
|
|
display: block;
|
|
}
|
|
|
|
// popouts
|
|
#p-cactions,
|
|
#p-personal,
|
|
#p-tb,
|
|
#p-lang,
|
|
#sidebar-mobilejs {
|
|
// keep present for screen readers
|
|
.hidden();
|
|
|
|
&.mobile-menu-active {
|
|
top: 2em;
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
.mobile-menu-active {
|
|
position: absolute;
|
|
z-index: 10000;
|
|
background: @content-background;
|
|
border: solid 1px @orange-border;
|
|
border-left: 0;
|
|
padding: 2em 2em 0 1.5em;
|
|
font-size: 125%;
|
|
|
|
// hide originals but don't remove, as their duplicates don't have access keys on them
|
|
*[ id^='ca-nstab-' ],
|
|
#ca-talk,
|
|
#ca-edit {
|
|
.hidden();
|
|
}
|
|
|
|
ul {
|
|
padding-top: 1em;
|
|
}
|
|
|
|
li {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
a {
|
|
display: block;
|
|
padding: 0.65em 0;
|
|
}
|
|
|
|
a.feedlink {
|
|
padding-left: 16px; // T291274
|
|
}
|
|
|
|
h3:first-child {
|
|
margin-right: 2em;
|
|
}
|
|
|
|
.pBody {
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
.mobile-close-button {
|
|
width: 20px;
|
|
height: 20px;
|
|
background-image: url( images/icon-close.svg );
|
|
background-position: 0 0;
|
|
background-repeat: no-repeat;
|
|
position: absolute;
|
|
top: 1em;
|
|
right: 0.75em;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.menus-cover {
|
|
display: none;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 9999;
|
|
|
|
&.visible {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
#menus-cover {
|
|
position: fixed;
|
|
opacity: 0.45;
|
|
background-color: @content-background;
|
|
}
|
|
|
|
#menus-cover-background {
|
|
position: absolute;
|
|
background-color: @background;
|
|
background-image: url( images/headbg.svg );
|
|
background-position: 0 0;
|
|
background-repeat: no-repeat;
|
|
opacity: 0.55;
|
|
}
|
|
|
|
#p-cactions-mobile li {
|
|
&#ca-edit-mobile a {
|
|
background-image: url( images/icon-edit.svg );
|
|
}
|
|
|
|
&#t-contributions-mobile a {
|
|
background-image: url( images/icon-user.svg );
|
|
}
|
|
}
|