client/reader/style.scss - trunk - githubmirror/wp-calypso

client/reader/style.scss
624 строки13 KB
Gabriel Caires
Reader: Keep the primary panel visible between lazy-loaded pages (#112911)
23 июл 2026, 15:33
23 июл 2026, 15:338ab6255
@import "calypso/assets/stylesheets/shared/functions/z-index";

@import "@automattic/typography/styles/variables";
@import "calypso/assets/stylesheets/shared/mixins/breakpoints";
@import "calypso/assets/stylesheets/shared/mixins/hide-content-accessibly";
@import '@wordpress/base-styles/colors';
@import '@wordpress/base-styles/breakpoints';
@import '@wordpress/base-styles/mixins';
@import '@wordpress/base-styles/variables';
@import 'calypso/assets/stylesheets/shared/mixins/long-content-fade';

body.is-reader-page,
.is-reader-page .layout,
.layout.is-section-reader,
.layout.is-section-reader .layout__content,
.is-section-reader {
	background: initial;
}

body.is-reader-page,
body.is-section-reader {
	.main {
		&:not(.is-wide-layout) {
			max-width: 768px; // Override default 720px.
		}

		&:not(.no-padding) {
			padding: 24px;

			@media (max-width: $break-small ) {
				padding: 24px 12px;
			}
		}
	}

	.wp-spinner-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 70px;

		p {
			margin-top: 16px;
			font-size: 0.875rem;
		}
	}
}

// Ensure this is only applied in logged in 'global' interface.
// Applying this more broadly breaks scrolling in logged out reader.
.is-section-reader.is-global {
	overflow-y: hidden;
}

body.is-section-reader {
	div.layout.is-global-sidebar-visible {
		.back-button {
			@media ( max-width: 1300px ) {
				position: unset;
				display: flex;
			}

			button.is-compact.is-borderless {
				@media ( max-width: 1300px ) {
					margin: 0;
					padding: 5px 0 0 0;
				}

				@media ( max-width: $break-small ) {
					padding: 0 0 10px 0
				}
			}

			+ .navigation-header,
			+ .tag-stream__header {
				@media ( max-width: 1300px ) {
					padding-top: 12px;
				}

				@media ( max-width: $break-small ) {
					padding: 12px 16px 0;
				}
			}
		}

		.navigation-header {
			margin: 0 auto;
			padding: 0;

			&::after {
				content: '';
				display: block;
				position: relative;
				left: calc( -1 * ( 100vw - 100% ) / 2 - 132px );
				margin: 18px 0;
				width: 110vw;
				height: 1px;
				background: var( --color-border-secondary );

				@media ( max-width: $break-medium ) {
					left: 0;
					width: 100%;
				}

				@media screen and ( min-width: $break-medium ) {
					margin: 24px 0;
				}
			}
		}

		// For reader/search
		main.search-stream {
			.navigation-header {
				&::after {
					margin: 24px 0 0;
				}
			}
		}

		// For reader/a8c
		.section-header {
			@media ( max-width: 1300px ) {
				padding-top: 12px;
			}
		}

		.layout__primary:not( :has( > * ) ),
		.layout__primary > div:not( :has( .recent-feed ) ) {
			background: var( --color-surface );
			border-radius: 8px;
			height: calc(
				100vh - var( --masterbar-height ) - var( --content-padding-top ) - var(
						--content-padding-bottom
					)
			);
			overflow: hidden;

			@include break-small {
				border: 1px solid $gray-200;
			}
		}
		.layout__primary > div > div:not(.tags__header):not(.reader-notifications__3pc-notice) {
			height: 100%;
			overflow-y: auto;
			overflow-x: hidden;
		}

		.async-load__placeholder {
			width: 100%;
		}
	}

	@media only screen and ( max-width: 781px ) {
		div.layout.is-global-sidebar-visible .layout__primary {
			overflow-x: auto;
		}
	}
}

.is-group-reader .async-load {
	margin: 30px auto;
	width: 50%;
}

.is-reader-page .reader__content,
.is-reader-page .reader-start {
	margin-top: 0;
}

.is-reader-page .reader-full-post__story-content {
	margin-top: 0;
}

.reader__content {
	sup,
	sub {
		position: relative;
		font-size: 0.875rem;
	}

	sup {
		top: -0.5em;
	}

	sub {
		bottom: -0.5em;
	}
}

.reader__site-name {
	clear: none;
	color: var( --color-neutral-50 );
	font-size: $font-body-small;
	line-height: 1.3;
	display: inline-block;
	white-space: nowrap;
	overflow: hidden;
	max-width: 340px;
	margin-right: 8px;

	&.is-long {
		position: relative;

		&::after {
			@include long-content-fade();
		}
	}

	@include breakpoint-deprecated( '<480px' ) {
		font-size: $font-body-small;
		max-width: 180px;
	}
}

.reader__post-title {
	clear: none;
	font-family: $sans;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-weight: 700;
	font-size: $font-title-large;
	line-height: 1.416;
	color: var( --color-neutral-70 );
	margin: 24px 0 8px;
	max-width: 750px;
	overflow-wrap: break-word;
	word-wrap: break-word;

	@include breakpoint-deprecated( '<480px' ) {
		font-size: $font-title-small;
		line-height: 1.3;
	}

	.reader__post-title-link,
	.reader__post-title-link:hover {
		color: var( --color-neutral-70 );
	}
}

.is-reader-page .is-site-stream .reader-feed-header__back-and-follow {
	.card.header-cake {
		background: none;
		box-shadow: none;
		flex: 1;
		margin-right: 100px;
		position: relative;
		top: 4px;
		z-index: z-index( '.reader-feed-header__back-and-follow', '.card.header-cake' );

		@include breakpoint-deprecated( '<960px' ) {
			margin-top: 0;
		}

		@include breakpoint-deprecated( '<660px' ) {
			left: 0;
		}
	}

	.button.header-cake__back {
		overflow: visible;
		padding: 0;
		position: relative;
	}
}

// WPcom Reblogs
.wpcom-reblog-snapshot {
	.reblogger-headline {
		display: none;
	}

	.reblogger-note-content {
		blockquote {
			padding: 0;
			margin: 0 0 24px;
			border: none;
			background: none;
			color: inherit;
		}
	}

	p.reblog-from {
		position: relative;
		margin: 0 -32px;
		padding: 16px 32px 8px;
		font-family: $sans;
		font-size: $font-body;
		font-weight: 600;
		line-height: 1.6;
		border-top: 1px solid var( --color-neutral-10 );
		background: linear-gradient(
			to bottom,
			color-mix( in srgb, var( --color-neutral-0 ) 100%, transparent ) 0%,
			color-mix( in srgb, var( --color-neutral-0 ) 0%, transparent ) 100%
		);

		.avatar {
			display: none;
		}
	}

	p.reblog-source {
		position: relative;
		top: 16px;
		font-family: $sans;
		font-size: $font-body;
		padding-top: 5px;
		border-top: 1px solid var( --color-neutral-10 );

		a {
			padding: 5px 10px;
			display: block;
			text-align: center;
		}

		span {
			display: none;
		}
	}
}

// Post Card Footer
// Where things like reading time, embed counts,
// tags, likes, and comments live.
.reader__post-footer {
	clear: both;
	padding: 0;
	margin: 16px 0 0 -4px;
	list-style: none;
	font-size: $font-body-small;
	color: var( --color-text-subtle );
	display: flex;
	align-items: center;

	li {
		margin-right: 8px;

		@include breakpoint-deprecated( '>480px' ) {
			margin-right: 16px;
		}

		&:last-child {
			margin-right: 0;
		}
	}

	a {
		text-decoration: none;
	}
}

// Custom breakpoints that drop action labels text
// to prevent Likes text from breaking onto a new line
.is-group-reader .post-edit-button__label,
.is-group-reader .reader-share__button-label,
.is-group-reader .comment-button__label-status,
.is-group-reader .like-button__label-status {
	@media ( max-width: 530px ) {
		@include hide-content-accessibly();
	}

	@media ( min-width: 661px ) and ( max-width: 790px ) {
		@include hide-content-accessibly();
	}
}

.reader__post-embed-count {
	padding: 4px 6px;
	border-radius: 2px;
	background: var( --color-neutral-0 );
}

/* Tiled Gallery Default Styles
 * Mostly copied from Atlas -Shaun
-------------------------------------------------------------- */

.tiled-gallery {
	clear: both;
	overflow: hidden;
	margin: 0 auto 20px;
	max-width: 100%;
}
.tiled-gallery img {
	margin: 2px !important; /* Ensure that this value isn't overridden by themes that give content images blanket margins */
}
.tiled-gallery .gallery-group {
	float: left;
	position: relative;
}
.tiled-gallery .tiled-gallery-item {
	float: left;
	margin: 0;
	position: relative;
	width: inherit; /* prevents ie8 bug with inline width styles */
}
.tiled-gallery .gallery-row {
	overflow: hidden;
}
.tiled-gallery .tiled-gallery-item a {
	/* Needs to reset some properties for theme compatibility */
	background: transparent;
	border: none;
	margin: 0;
	padding: 0;
	text-decoration: none;
	width: auto;
}
.tiled-gallery .tiled-gallery-item img,
.tiled-gallery .tiled-gallery-item img:hover {
	/* Needs to reset some properties for theme compatibility */
	background: none;
	border: none;
	box-shadow: none;
	max-width: 100%;
	padding: 0;
	vertical-align: middle;
}

.tiled-gallery-caption {
	/* Captions */
	box-sizing: border-box; /* to make width: 100% work */
	background: linear-gradient(
		to bottom,
		transparent,
		rgba( 0, 0, 0, 0.2 ) 73%,
		rgba( 0, 0, 0, 0.5 ) 100%
	);
	color: var( --color-text-inverted );
	font-family: $sans;
	font-size: $font-body-small;
	text-shadow: 0 1px rgba( 0, 0, 0, 0.3 );
	font-weight: 400;
	overflow: hidden;
	padding: 10px 20px;
	position: absolute;
	bottom: 2px;
	left: 2px;
	right: 2px;
}

.tiled-gallery .tiled-gallery-item-small .tiled-gallery-caption {
	/* Smaller captions */
	font-size: $font-body-extra-small;
}

/* Hide galleries in widgets until they've been resized to fit.
 * Gallery widgets are almost guaranteed to need resizing, and
 * the jump is a little more obvious than galleries in content. */
.widget-gallery .tiled-gallery-unresized {
	visibility: hidden;
	height: 0;
	overflow: hidden;
}

/* =Greyscale
-------------------------------------------------------------- */

.tiled-gallery .tiled-gallery-item img.grayscale {
	position: absolute;
	left: 0;
	top: 0;
}
.tiled-gallery .tiled-gallery-item img.grayscale:hover {
	opacity: 0;
}

/* =Circles Layout
-------------------------------------------------------------- */

.tiled-gallery.type-circle .tiled-gallery-item img {
	border-radius: 50%;
}
.tiled-gallery.type-circle .tiled-gallery-caption {
	display: none;
	opacity: 0;
}

.is-group-reader .empty-content__action,
.is-reader-page .empty-content__action {
	@include breakpoint-deprecated( '<480px' ) {
		margin-bottom: 10px;
	}
}

// No Results in new Search
.is-reader-page .search-stream .empty-content {
	margin-top: 135px;
}

.is-reader-page .search-stream__single-column-results .empty-content {
	margin-top: 0;
}

.search-stream__single-column-results .reader-tag-sidebar-recommended-sites {
	@include breakpoint-deprecated( '<660px' ) {
		margin: 36px 16px 0;
	}
}

.layout.has-header-section.is-section-reader {
	.layout__header-section {
		color: var( --studio-white );
		background-color: #021827;
		background-image: url( calypso/assets/images/reader/tags-bg.webp );
		background-repeat: none;
		background-size: cover;
	}

	.layout__header-section-content {
		padding: 0 24px 36px;
		@include break-medium {
			padding: 24px 108px 36px;
		}
	}

	// The 2026 global nav is fixed and floats over this dark hero band, so add its
	// height on top of the hero's own top padding to keep the heading clear of the nav.
	&:has( .x-nav--2026-redesign ) .layout__header-section-content {
		padding-top: calc( 24px + var( --nav-2026-height ) );

		@include break-medium {
			padding-top: calc( 48px + var( --nav-2026-height ) );
		}
	}

	.masterbar {
		border-bottom: none;
		background: transparent;
		color: var( --studio-white );
		position: static;
		@include breakpoint-deprecated( '<480px' ) {
			.masterbar__item {
				padding: 0 4px;
				width: auto;
			}
		}
	}

	// Legacy logged-out nav layout — the 2026 nav sets its own (e.g. its 64px
	// bar must match its 64px white surface, not this 78px), so keep it off.
	.masterbar-menu .masterbar:not( :has( .x-nav--2026-redesign ) ) {
		height: 78px;
		.x-nav-link__logo svg path {
			fill: var( --studio-white );
		}
		.x-nav {
			padding-top: 10px;
			padding-left: 16px;
			padding-right: 16px;
			.x-nav-item {
				color: var( --studio-white );
				&:hover {
					color: var( --studio-white );
				}
				.cta-btn-nav {
					margin-top: 9px;
				}
				.x-nav-link-chevron {
					opacity: 1;
					&::after,
					&::before {
						color: var( --studio-white );
					}
				}
			}

			.x-nav-link__primary {
				border: 2px solid var( --studio-white );
				background: transparent !important;
			}
		}
	}

	// Resting over the dark hero: white nav ink. Logo and CTA border read
	// currentcolor from .x-nav-item, but the chevron has its own hardcoded blue
	// `color` ($studio-blue-90). The component only whitens it under
	// `.is-style-monochrome`, which is gated on the `site-profiler/metrics` flag
	// (on in dev, off in production) — so on wordpress.com the chevron stayed
	// blue and vanished into the hero. Whiten it here, flag-independently.
	.lpc-header-nav-container .x-nav--2026-redesign .x-nav-item {
		color: var( --studio-white );

		.x-nav-link-chevron::before {
			color: var( --studio-white );
		}

		// Hover flips the CTA to a white fill with dark ink.
		--x-nav-2026-cta-hover-fill: var( --studio-white );
		--x-nav-2026-cta-hover-ink: var( --studio-gray-100 );
	}

	// White surface up (scrolled, a trigger hovered, or a dropdown open): the
	// nav paints its own white band, so the ink flips back to dark.
	.lpc-header-nav-container.is-scrolled,
	.lpc-header-nav-container:has( .x-nav-item__wide:hover .x-nav-link-chevron ),
	.lpc-header-nav-container:has( .x-dropdown--2026.is-dropdown-open ) {
		.x-nav--2026-redesign .x-nav-item {
			color: var( --studio-gray-100 );

			.x-nav-link-chevron::before {
				color: var( --studio-gray-100 );
			}
		}
	}
}

// specific rule to override existing rules
.layout.has-header-section.is-section-reader
	.layout__header-section-content
	.logged-out-reader-header {
	text-align: center;

	h2 {
		font-size: 18px;
		font-weight: 500;
		margin-bottom: 10px;
	}

	h1 {
		font-size: 40px;
		font-weight: 500;
	}
}