css: fix timeslider toolbar on mobile when multiple authors are displayed (#3933)

This commit is contained in:
Sebastian Castro 2020-04-24 21:56:30 +02:00 committed by GitHub
parent 1aebbe8892
commit e8cd83286d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 1 deletions

View file

@ -142,4 +142,12 @@
.timeslider-title {
font-size: 1.5rem !important;
}
.timeslider-title-container {
width: 100%;
}
.authors-label { display: none; }
#authorsList {
display: flex;
flex-wrap: wrap;
}
}

View file

@ -70,6 +70,8 @@
.timeslider #authorsList .author {
padding: 2px 5px;
border-radius: 3px;
margin-right: 4px;
margin-bottom: 4px;
}
.timeslider-title {
@ -78,4 +80,19 @@
.timeslider-subtitle {
margin-top: 6px;
font-size: .9em;
}
@media (max-width: 720px) {
#slider-btn-container {
margin-top: 0;
margin-right: 5px;
}
#slider-btn-container #playpause_button_icon {
width: 30px;
height: 30px;
}
#slider-btn-container #playpause_button_icon:before {
font-size: 18px;
}
}

View file

@ -68,7 +68,7 @@
<span id="revision_date"></span>
</h1>
<p class="timeslider-subtitle">
<span data-l10n-id="timeslider.toolbar.authors"></span>
<span class="authors-label" data-l10n-id="timeslider.toolbar.authors"></span>
<span id="authorsList" data-l10n-id="timeslider.toolbar.authorsList"></span>
</p>
</div>