diff --git a/src/components/middle/AudioPlayer.scss b/src/components/middle/AudioPlayer.scss index dbbff6320..a9cf669e3 100644 --- a/src/components/middle/AudioPlayer.scss +++ b/src/components/middle/AudioPlayer.scss @@ -20,10 +20,6 @@ --color-white: var(--color-background-own); } - .MiddleHeader & + .HeaderActions { - margin-left: 1.5rem; - } - .player-button { &.smaller { width: 3rem; @@ -76,7 +72,7 @@ &:hover .volume-slider-spacer, .volume-slider-spacer:hover { visibility: visible; - } + } .volume-slider { opacity: 0; @@ -101,8 +97,8 @@ } } - &:hover .volume-slider, - .volume-slider:hover, + &:hover .volume-slider, + .volume-slider:hover, .volume-slider-spacer:hover + .volume-slider { opacity: 1; visibility: visible; diff --git a/src/components/middle/MiddleHeader.scss b/src/components/middle/MiddleHeader.scss index 4b432b48d..6e909469c 100644 --- a/src/components/middle/MiddleHeader.scss +++ b/src/components/middle/MiddleHeader.scss @@ -8,7 +8,7 @@ left: 0; right: 0; height: 2.875rem; - box-shadow: 0 2px 2px var(--color-light-shadow); + box-shadow: 0 .125rem .125rem var(--color-light-shadow); display: flex; flex-direction: row-reverse; @@ -39,10 +39,9 @@ } .AudioPlayer { - height: 3.25rem; - flex-direction: row; - padding: 0.375rem 0.5rem; + margin-top: 0; + padding: 0.25rem 0.5rem; &-content { padding: 0 0.5rem; @@ -50,7 +49,7 @@ } > .Button { - margin: 0; + margin: -.0625rem 0 0; } > .player-close { @@ -72,6 +71,10 @@ max-width: none; } } + + .HeaderPinnedMessage-wrapper.full-width { + display: none; + } } .MiddleHeader { @@ -150,6 +153,10 @@ overflow: hidden; } + body.animation-level-0 & .HeaderPinnedMessage-wrapper { + transition: none !important; + } + .header-tools { display: flex; align-items: center; @@ -159,7 +166,6 @@ body.animation-level-0 & { &, - .HeaderPinnedMessage-wrapper, .AudioPlayer, .HeaderActions { transition: none !important; @@ -193,39 +199,32 @@ } @media (min-width: 1276px) and (max-width: 1439px) { - &:not(.tools-stacked) .header-tools { - .HeaderPinnedMessage-wrapper, - .AudioPlayer { - opacity: 1; + &:not(.tools-stacked) .HeaderPinnedMessage-wrapper, + &:not(.tools-stacked) .AudioPlayer { + opacity: 1; - #Main.right-column-open & { - opacity: 0; - } + #Main.right-column-open & { + opacity: 0; } } } - &.tools-stacked .header-tools { + &.tools-stacked .AudioPlayer { @include mobile-header-styles(); @media (min-width: 1150px) { #Main.right-column-open & { - .HeaderPinnedMessage-wrapper, - .AudioPlayer { - padding-right: calc(0.5rem + var(--right-column-width)); - } + padding-right: calc(0.5rem + var(--right-column-width)); } } } - &.tools-stacked.animated .header-tools { - .HeaderPinnedMessage-wrapper, - .AudioPlayer { - animation: fade-in var(--layer-transition) forwards; + &.tools-stacked.animated .HeaderPinnedMessage-wrapper, + &.tools-stacked.animated .AudioPlayer { + animation: fade-in var(--layer-transition) forwards; - body.animation-level-0 & { - animation: none; - } + body.animation-level-0 & { + animation: none; } } @@ -329,6 +328,7 @@ margin-left: auto; cursor: default; flex-direction: row-reverse; + background: var(--color-background); body.animation-level-1 & { .ripple-container { @@ -336,6 +336,16 @@ } } + @media (min-width: 1276px) { + transform: translate3d(0, 0, 0); + transition: transform var(--layer-transition); + + #Main.right-column-open & { + transform: translate3d(calc(var(--right-column-width) * -1), 0, 0); + } + } + + .HeaderPinnedMessage { min-width: 16rem; } @@ -343,6 +353,48 @@ > .Button { flex-shrink: 0; } + + &.full-width { + position: absolute; + left: 0; + right: 0; + top: 100%; + background: var(--color-background); + padding: .25rem .8125rem .25rem 1rem; + box-shadow: 0 .125rem .125rem var(--color-light-shadow); + transform: translate3d(0, 0, 0); + transition: transform var(--layer-transition); + + &::before { + content: ""; + display: block; + position: absolute; + top: -.1875rem; + left: 0; + right: 0; + height: .125rem; + box-shadow: 0 .125rem .125rem var(--color-light-shadow); + } + + .HeaderPinnedMessage { + margin-top: 0; + margin-bottom: 0; + flex: 1; + + .message-text { + max-width: none; + } + } + + @media (min-width: 1276px) { + transform: translate3d(0, 0, 0); + transition: transform var(--layer-transition); + + #Main.right-column-open & { + padding-left: calc(var(--right-column-width) + 1rem); + } + } + } } .HeaderPinnedMessage { @@ -483,13 +535,6 @@ @media (max-width: 600px) { @include mobile-header-styles(); } - - @media (min-width: 925px) and (max-width: 1149.9px) { - .HeaderPinnedMessage-wrapper, - .AudioPlayer { - position: absolute; - } - } } @keyframes fade-in { diff --git a/src/components/middle/MiddleHeader.tsx b/src/components/middle/MiddleHeader.tsx index 51b6fd12e..1c08033f9 100644 --- a/src/components/middle/MiddleHeader.tsx +++ b/src/components/middle/MiddleHeader.tsx @@ -261,7 +261,7 @@ const MiddleHeader: FC = ({ const { shouldRender: shouldRenderPinnedMessage, transitionClassNames: pinnedMessageClassNames, - } = useShowTransition(pinnedMessage && !shouldRenderAudioPlayer); + } = useShowTransition(Boolean(pinnedMessage)); const renderingPinnedMessage = useCurrentOrPrev(pinnedMessage, true); const renderingPinnedMessagesCount = useCurrentOrPrev(pinnedMessagesCount, true); @@ -380,7 +380,7 @@ const MiddleHeader: FC = ({ size="smaller" color="translucent" onClick={handleBackClick} - ariaLabel={asClose ? 'Close' : 'Back'} + ariaLabel={lang(asClose ? 'Close' : 'Back')} >
@@ -393,6 +393,8 @@ const MiddleHeader: FC = ({ ); } + const isAudioPlayerRendered = Boolean(shouldRenderAudioPlayer && renderingAudioMessage); + return (
= ({ {renderInfo} + {shouldRenderPinnedMessage && renderingPinnedMessage && ( + + )}
- {shouldRenderPinnedMessage && renderingPinnedMessage && !shouldRenderAudioPlayer && ( - - )} - {shouldRenderAudioPlayer && renderingAudioMessage && ( + {isAudioPlayerRendered && (