Styles cleanup, might break stuff
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
parent
0ab9118dc4
commit
83cc802ecd
15 changed files with 36 additions and 185 deletions
|
|
@ -68,7 +68,7 @@ const IconButton: React.FC<IIconButton> = ({
|
|||
|
||||
const classes = clsx(className, 'icon-button', {
|
||||
active,
|
||||
disabled,
|
||||
'opacity-20 cursor-default': disabled,
|
||||
});
|
||||
|
||||
return (
|
||||
|
|
@ -89,10 +89,10 @@ const IconButton: React.FC<IIconButton> = ({
|
|||
disabled={disabled}
|
||||
type='button'
|
||||
>
|
||||
<div>
|
||||
<div className='flex items-center justify-center'>
|
||||
<Icon className={iconClassName} src={src} aria-hidden='true' />
|
||||
</div>
|
||||
{text && <span className='icon-button__text'>{text}</span>}
|
||||
{text && <span className='pl-0.5'>{text}</span>}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -29,9 +29,7 @@ const LocationSearch: React.FC<ILocationSearch> = ({ onSelected }) => {
|
|||
|
||||
const [value, setValue] = useState('');
|
||||
|
||||
const isEmpty = (): boolean => {
|
||||
return !(value.length > 0);
|
||||
};
|
||||
const empty = !(value.length > 0);
|
||||
|
||||
const handleChange: React.ChangeEventHandler<HTMLInputElement> = ({ target }) => {
|
||||
refreshCancelToken();
|
||||
|
|
@ -48,7 +46,7 @@ const LocationSearch: React.FC<ILocationSearch> = ({ onSelected }) => {
|
|||
const handleClear: React.MouseEventHandler = e => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!isEmpty()) {
|
||||
if (!empty) {
|
||||
setValue('');
|
||||
}
|
||||
};
|
||||
|
|
@ -99,9 +97,9 @@ const LocationSearch: React.FC<ILocationSearch> = ({ onSelected }) => {
|
|||
onKeyDown={handleKeyDown}
|
||||
renderSuggestion={AutosuggestLocation}
|
||||
/>
|
||||
<div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
|
||||
<Icon src={require('@tabler/icons/outline/search.svg')} className={clsx('svg-icon--search', { active: isEmpty() })} />
|
||||
<Icon src={require('@tabler/icons/outline/backspace.svg')} className={clsx('svg-icon--backspace', { active: !isEmpty() })} aria-label={intl.formatMessage(messages.placeholder)} />
|
||||
<div role='button' tabIndex={0} className='absolute inset-y-0 right-0 flex cursor-pointer items-center px-3 rtl:left-0 rtl:right-auto' onClick={handleClear}>
|
||||
<Icon src={require('@tabler/icons/outline/search.svg')} className={clsx('h-5 w-5 text-gray-600', { 'hidden': !empty })} />
|
||||
<Icon src={require('@tabler/icons/outline/backspace.svg')} className={clsx('h-5 w-5 text-gray-600', { 'hidden': empty })} aria-label={intl.formatMessage(messages.placeholder)} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -52,8 +52,8 @@ const Search: React.FC = () => {
|
|||
placeholder={intl.formatMessage(messages.search)}
|
||||
/>
|
||||
|
||||
<div role='button' tabIndex={hasValue ? 0 : -1} className='search__icon' onClick={handleClear}>
|
||||
<Icon src={require('@tabler/icons/outline/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('svg-icon--backspace', { active: hasValue })} />
|
||||
<div role='button' tabIndex={hasValue ? 0 : -1} className='absolute inset-y-0 right-0 flex cursor-pointer items-center px-3 rtl:left-0 rtl:right-auto' onClick={handleClear}>
|
||||
<Icon src={require('@tabler/icons/outline/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('h-5 w-5 text-gray-600', { 'hidden': !hasValue })} />
|
||||
</div>
|
||||
</label>
|
||||
<Button onClick={handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>
|
||||
|
|
|
|||
|
|
@ -438,7 +438,7 @@ const Audio: React.FC<IAudio> = (props) => {
|
|||
|
||||
return (
|
||||
<div
|
||||
className={clsx('audio-player', { editable })}
|
||||
className={clsx('relative box-border overflow-hidden rounded-[10px] bg-black pb-11 [direction:ltr]', { 'rounded-none h-full': editable })}
|
||||
ref={player}
|
||||
style={{
|
||||
backgroundColor: _getBackgroundColor(),
|
||||
|
|
@ -490,24 +490,24 @@ const Audio: React.FC<IAudio> = (props) => {
|
|||
/>
|
||||
)}
|
||||
|
||||
<div className='video-player__seek' onMouseDown={handleMouseDown} ref={seek}>
|
||||
<div className='video-player__seek before:top-0 before:bg-white/10' onMouseDown={handleMouseDown} ref={seek}>
|
||||
|
||||
<div className='video-player__seek__buffer' style={{ width: `${buffer}%` }} />
|
||||
<div className='absolute top-0 block h-1 rounded bg-white/20' style={{ width: `${buffer}%` }} />
|
||||
|
||||
<div
|
||||
className='video-player__seek__progress'
|
||||
className='absolute top-0 block h-1 rounded bg-accent-500'
|
||||
style={{ width: `${progress}%`, backgroundColor: accentColor }}
|
||||
/>
|
||||
|
||||
<span
|
||||
className={clsx('video-player__seek__handle', { active: dragging })}
|
||||
className={clsx('video-player__seek__handle -top-1', { 'opacity-100': dragging })}
|
||||
tabIndex={0}
|
||||
style={{ left: `${progress}%`, backgroundColor: accentColor }}
|
||||
onKeyDown={handleAudioKeyDown}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='video-player__controls absolute bottom-0 left-0 z-[2] box-border px-4 py-0 opacity-100 ring-0 transition-opacity duration-100 ease-in-out'>
|
||||
<div className='video-player__controls absolute bottom-0 left-0 z-[2] box-border bg-transparent px-4 py-0 pt-2.5 opacity-100 ring-0 transition-opacity duration-100 ease-in-out'>
|
||||
<div className='-mx-[5px] my-0 flex justify-between pb-2'>
|
||||
<div className='video-player__buttons left'>
|
||||
|
||||
|
|
@ -515,7 +515,7 @@ const Audio: React.FC<IAudio> = (props) => {
|
|||
type='button'
|
||||
title={intl.formatMessage(paused ? messages.play : messages.pause)}
|
||||
aria-label={intl.formatMessage(paused ? messages.play : messages.pause)}
|
||||
className='player-button'
|
||||
className='player-button text-current opacity-[75] hover:text-current hover:opacity-100 focus:text-current focus:opacity-100 active:text-current active:opacity-100'
|
||||
onClick={togglePlay}
|
||||
>
|
||||
<Icon src={paused ? require('@tabler/icons/outline/player-play.svg') : require('@tabler/icons/outline/player-pause.svg')} />
|
||||
|
|
@ -525,14 +525,14 @@ const Audio: React.FC<IAudio> = (props) => {
|
|||
type='button'
|
||||
title={intl.formatMessage(muted ? messages.unmute : messages.mute)}
|
||||
aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)}
|
||||
className='player-button'
|
||||
className='player-button text-current opacity-[75] hover:text-current hover:opacity-100 focus:text-current focus:opacity-100 active:text-current active:opacity-100'
|
||||
onClick={toggleMute}
|
||||
>
|
||||
<Icon src={muted ? require('@tabler/icons/outline/volume-3.svg') : require('@tabler/icons/outline/volume.svg')} />
|
||||
</button>
|
||||
|
||||
<div
|
||||
className={clsx('video-player__volume', { active: hovered })}
|
||||
className={clsx('video-player__volume before:bg-white/10', { 'overflow-visible w-12 mr-4': hovered })}
|
||||
ref={slider}
|
||||
onMouseDown={handleVolumeMouseDown}
|
||||
>
|
||||
|
|
@ -545,7 +545,7 @@ const Audio: React.FC<IAudio> = (props) => {
|
|||
/>
|
||||
|
||||
<span
|
||||
className='video-player__volume__handle'
|
||||
className={clsx('video-player__volume__handle', { 'opacity-100': dragging || hovered })}
|
||||
tabIndex={0}
|
||||
style={{ left: `${volume * 100}%`, backgroundColor: _getAccentColor() }}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -44,8 +44,8 @@ const Search = () => {
|
|||
onChange={handleChange}
|
||||
placeholder={intl.formatMessage(messages.search)}
|
||||
/>
|
||||
<div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
|
||||
<Icon src={require('@tabler/icons/outline/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('svg-icon--backspace', { active: hasValue })} />
|
||||
<div role='button' tabIndex={0} className='absolute inset-y-0 right-0 flex cursor-pointer items-center px-3 rtl:left-0 rtl:right-auto' onClick={handleClear}>
|
||||
<Icon src={require('@tabler/icons/outline/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('h-5 w-5 text-gray-600', { hidden: !hasValue })} />
|
||||
</div>
|
||||
</label>
|
||||
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ const ActionsModal: React.FC<IActionsModal> = ({ status, actions, onClick, onClo
|
|||
<Motion defaultStyle={{ top: 100 }} style={{ top: spring(0) }}>
|
||||
{({ top }) => (
|
||||
<div
|
||||
className='actions-modal pointer-events-auto relative z-[9999] m-auto flex max-h-[calc(100vh-3rem)] w-full max-w-lg flex-col overflow-hidden rounded-2xl bg-white text-gray-400 shadow-xl black:bg-black dark:bg-gray-900'
|
||||
className='pointer-events-auto relative z-[9999] m-auto flex max-h-[calc(100vh-3rem)] w-full max-w-lg flex-col overflow-hidden rounded-2xl bg-white text-gray-400 shadow-xl black:bg-black dark:bg-gray-900'
|
||||
style={{ top: `${top}%` }}
|
||||
>
|
||||
{status && (
|
||||
|
|
|
|||
|
|
@ -500,13 +500,13 @@ const Video: React.FC<IVideo> = ({
|
|||
onVolumeChange={handleVolumeChange}
|
||||
/>
|
||||
|
||||
<div className={clsx('video-player__controls absolute bottom-0 left-0 z-[2] box-border px-4 py-0 opacity-0 ring-0 transition-opacity duration-100 ease-in-out', { 'opacity-100': paused || hovered })}>
|
||||
<div className={clsx('video-player__controls absolute inset-x-0 bottom-0 z-[2] box-border px-4 py-0 opacity-0 ring-0 transition-opacity duration-100 ease-in-out', { 'opacity-100': paused || hovered })}>
|
||||
<div className='video-player__seek' onMouseDown={handleMouseDown} ref={seek}>
|
||||
<div className='video-player__seek__buffer' style={{ width: `${buffer}%` }} />
|
||||
<div className='video-player__seek__progress' style={{ width: `${progress}%` }} />
|
||||
<div className='absolute top-3.5 block h-1 rounded bg-white/20' style={{ width: `${buffer}%` }} />
|
||||
<div className='absolute top-3.5 block h-1 rounded bg-accent-500' style={{ width: `${progress}%` }} />
|
||||
|
||||
<span
|
||||
className={clsx('video-player__seek__handle', { active: dragging })}
|
||||
className={clsx('video-player__seek__handle', { 'opacity-100': dragging })}
|
||||
tabIndex={0}
|
||||
style={{ left: `${progress}%` }}
|
||||
onKeyDown={handleVideoKeyDown}
|
||||
|
|
@ -536,10 +536,10 @@ const Video: React.FC<IVideo> = ({
|
|||
<Icon src={muted ? require('@tabler/icons/outline/volume-3.svg') : require('@tabler/icons/outline/volume.svg')} />
|
||||
</button>
|
||||
|
||||
<div className={clsx('video-player__volume', { active: hovered })} onMouseDown={handleVolumeMouseDown} ref={slider}>
|
||||
<div className={clsx('video-player__volume', { 'overflow-visible w-12 mr-4': hovered })} onMouseDown={handleVolumeMouseDown} ref={slider}>
|
||||
<div className='video-player__volume__current' style={{ width: `${volume * 100}%` }} />
|
||||
<span
|
||||
className={clsx('video-player__volume__handle')}
|
||||
className={clsx('video-player__volume__handle', { 'opacity-100': dragging || hovered })}
|
||||
tabIndex={0}
|
||||
style={{ left: `${volume * 100}%` }}
|
||||
/>
|
||||
|
|
@ -554,7 +554,7 @@ const Video: React.FC<IVideo> = ({
|
|||
)}
|
||||
|
||||
{link && (
|
||||
<span className='video-player__link'>{link}</span>
|
||||
<span className='video-player__link px-2.5 py-0.5'>{link}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -12,9 +12,7 @@
|
|||
@import 'components/media-gallery';
|
||||
@import 'components/notification';
|
||||
@import 'components/columns';
|
||||
@import 'components/search';
|
||||
@import 'components/video-player';
|
||||
@import 'components/audio-player';
|
||||
@import 'components/icon';
|
||||
@import 'forms';
|
||||
@import 'utilities';
|
||||
|
|
|
|||
|
|
@ -1,43 +0,0 @@
|
|||
.audio-player {
|
||||
@apply [direction:ltr] relative box-border overflow-hidden rounded-[10px] bg-black pb-11;
|
||||
|
||||
&.editable {
|
||||
@apply rounded-none h-full;
|
||||
}
|
||||
|
||||
.video-player__seek {
|
||||
@apply before:top-0;
|
||||
}
|
||||
|
||||
.video-player__volume,
|
||||
.video-player__seek {
|
||||
@apply before:bg-white/10;
|
||||
}
|
||||
|
||||
.video-player__seek__buffer {
|
||||
@apply bg-white/20;
|
||||
}
|
||||
|
||||
.video-player__buttons button {
|
||||
@apply text-current opacity-[75];
|
||||
|
||||
&:active,
|
||||
&:hover,
|
||||
&:focus {
|
||||
@apply text-current opacity-100;
|
||||
}
|
||||
}
|
||||
|
||||
.video-player__seek__buffer,
|
||||
.video-player__seek__progress {
|
||||
@apply top-0;
|
||||
}
|
||||
|
||||
.video-player__seek__handle {
|
||||
@apply -top-1;
|
||||
}
|
||||
|
||||
.video-player__controls {
|
||||
@apply pt-2.5 bg-transparent;
|
||||
}
|
||||
}
|
||||
|
|
@ -6,7 +6,3 @@
|
|||
@apply h-full w-full transition duration-200;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-button > div {
|
||||
@apply flex items-center justify-center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,10 +28,6 @@
|
|||
|
||||
&__preview {
|
||||
@apply bg-gray-200 dark:bg-gray-900 rounded-lg w-full h-full object-cover absolute top-0 left-0 z-0;
|
||||
|
||||
&--hidden {
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&__gifv {
|
||||
|
|
|
|||
|
|
@ -1,19 +1,15 @@
|
|||
.media-modal {
|
||||
.audio-player.detailed,
|
||||
.extended-video-player {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@apply flex items-center justify-center;
|
||||
}
|
||||
|
||||
.audio-player {
|
||||
max-width: 800px;
|
||||
max-height: 600px;
|
||||
@apply max-w-[800px] max-h-[600px];
|
||||
}
|
||||
|
||||
.extended-video-player {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@apply w-full h-full;
|
||||
|
||||
video {
|
||||
@apply max-w-full max-h-[80%];
|
||||
|
|
@ -21,12 +17,3 @@
|
|||
}
|
||||
}
|
||||
|
||||
.actions-modal ul li {
|
||||
a,
|
||||
button {
|
||||
.svg-icon svg {
|
||||
@apply stroke-[1.5];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,23 +0,0 @@
|
|||
.search__icon {
|
||||
@apply focus:outline-0 #{!important};
|
||||
|
||||
&::-moz-focus-inner {
|
||||
@apply border-0 outline-0 #{!important};
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
@apply right-4 rtl:left-4 rtl:right-auto text-gray-400 cursor-default inline-block absolute top-1/2 -translate-y-1/2 z-[2] w-4.5 h-4.5 opacity-0 pointer-events-none text-lg;
|
||||
|
||||
&.active {
|
||||
@apply pointer-events-auto opacity-100;
|
||||
}
|
||||
|
||||
&--search.active {
|
||||
@apply pointer-events-none;
|
||||
}
|
||||
|
||||
&--backspace {
|
||||
@apply cursor-pointer w-[22px] h-[22px];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
flex: 0 1 auto;
|
||||
|
||||
.player-button {
|
||||
@apply inline-block outline-0 bg-transparent text-base border-0 text-white/75;
|
||||
@apply inline-block outline-0 bg-transparent text-base border-0 text-white/75 active:text-white hover:text-white focus:text-white;
|
||||
flex: 0 0 auto;
|
||||
padding: 5px 6px;
|
||||
|
||||
|
|
@ -37,27 +37,14 @@
|
|||
}
|
||||
|
||||
&__volume {
|
||||
@apply inline-flex cursor-pointer h-6 relative overflow-hidden;
|
||||
@apply inline-flex cursor-pointer h-6 relative overflow-hidden before:content-[''] before:w-12 before:bg-white/35 before:rounded before:absolute before:h-1 before:left-0 before:top-1/2;
|
||||
flex: 0 0 auto;
|
||||
|
||||
.no-reduce-motion & {
|
||||
transition: all 100ms linear;
|
||||
}
|
||||
|
||||
&.active {
|
||||
@apply overflow-visible w-12 mr-4;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 50px;
|
||||
background: rgba(#fff, 0.35);
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 4px;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
|
||||
|
|
@ -75,43 +62,16 @@
|
|||
transition: opacity 100ms linear;
|
||||
}
|
||||
}
|
||||
|
||||
&.active &__handle {
|
||||
@apply opacity-100;
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
@apply py-0.5 px-2.5;
|
||||
|
||||
a {
|
||||
@apply no-underline text-sm font-medium text-white hover:underline active:underline focus:underline;
|
||||
}
|
||||
}
|
||||
|
||||
&__seek {
|
||||
cursor: pointer;
|
||||
height: 24px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 100%;
|
||||
background: rgba(#fff, 0.35);
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 4px;
|
||||
top: 14px;
|
||||
}
|
||||
|
||||
&__progress {
|
||||
@apply block absolute h-1 rounded top-3.5 bg-accent-500;
|
||||
}
|
||||
|
||||
&__buffer {
|
||||
@apply block absolute h-1 rounded top-3.5 bg-white/20;
|
||||
}
|
||||
@apply cursor-pointer h-6 relative before:content-[''] before:w-full before:bg-white/35 before:rounded before:block before:absolute before:h-1 before:top-3.5;
|
||||
|
||||
&__handle {
|
||||
@apply bg-accent-500 absolute z-[3] opacity-0 rounded-[50%] size-3 top-2.5 -ml-1.5;
|
||||
|
|
@ -120,16 +80,6 @@
|
|||
.no-reduce-motion & {
|
||||
transition: opacity 0.1s ease;
|
||||
}
|
||||
|
||||
&.active {
|
||||
@apply opacity-100;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.video-player__seek__handle {
|
||||
@apply opacity-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,12 @@
|
|||
.icon-button {
|
||||
@apply text-black dark:text-white inline-flex items-center p-0 border-0 bg-transparent cursor-pointer transition duration-100 ease-in opacity-40;
|
||||
|
||||
&__text {
|
||||
@apply pl-0.5;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
@apply opacity-60 transition-colors duration-200 ease-out;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
@apply opacity-20 cursor-default;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner {
|
||||
@apply border-0;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue