mediawiki-skins-MinervaNeue/resources/skins.minerva.base.styles/LastModifiedBar.less
Volker E dd154b4ea7 styles: Replace deprecated breakpoints
The values have slightly changed:
- Tablet breakpoint is decreased by 80px,
  pushing lesser devices into a mobile only experience but
  should make barely a difference to vast majority of our users.
- Biggest difference is in `min-width-breakpoint-desktop`,
  which is increased by 120px in comparison to
  `@width-breakpoint-desktop: 1000px`

Also removing one out-dated feature phone clause.

TECHNICAL CHANGES:
* The previous breakpoint was tied to the maximum content width.
The previous maximum content width is preserved, and several media
queries are adjusted to make use of it.
* The header (logo) is not optimized for  640px-720px. For now
a temporary fix is but in place which will be investigated as part
of T366859

VISUAL CHANGES:
* 6 visual changes which improve alignment in language and
visual editor overlay and diffs (where wikidiff2 is not
installed)

Bug: T349793
Depends-On: I3afba8c51f60de9271054499bfa3ffbcc1a9d779
Change-Id: I9552d8ad7509aae90e15edda26e786465773d3ac
2024-06-07 12:52:39 -07:00

50 lines
1.2 KiB
Plaintext

@import '../../minerva.less/minerva.variables.less';
@import '../../minerva.less/minerva.mixins.less';
@import 'mediawiki.mixins.less';
.last-modified-bar {
display: block;
border-bottom: @border-subtle;
background-color: var( --background-color-interactive );
color: var( --color-subtle );
padding-top: @icon-padding-medium;
padding-bottom: @icon-padding-medium;
font-size: @font-size-minerva-small;
transition-property: background-color, color;
transition-duration: @transition-duration-medium;
// .last-modified-bar is itself a link.
&:visited,
a,
a:visited,
.last-modified-text-accent {
// Note: This can be progressively enhanced in skins.minerva.scripts to provide 'recently edited' state.
color: var( --color-subtle );
}
.minerva-icon {
background-color: var( --color-subtle );
}
}
.last-modified-bar__content {
align-items: center;
.flex-display();
}
.last-modified-bar__text {
@end-padding: @width-icon-gutter + @width-icon-gutter + @size-icon;
padding-right: @end-padding;
padding-left: @icon-padding-medium;
line-height: @line-height-content;
vertical-align: middle;
flex-grow: 1;
.text-overflow( @visible: false );
}
@media ( max-width: @max-width-breakpoint-mobile ) {
.last-modified-bar__text {
padding-right: 1em;
}
}