pl-fe: style migrations
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
@ -120,8 +120,7 @@ const Avatar = (props: IAvatar) => {
|
||||
|
||||
return (
|
||||
<StillImage
|
||||
className={clsx('rounded-lg leading-[0]', isCat && 'avatar__cat bg-gray-200 dark:bg-gray-900', className)}
|
||||
innerClassName='rounded-[inherit] text-sm'
|
||||
className={clsx('⁂-avatar', isCat && '⁂-avatar--cat', className)}
|
||||
style={style}
|
||||
src={src || require('pl-fe/assets/images/avatar-missing.png')}
|
||||
alt={altText}
|
||||
|
||||
@ -19,9 +19,7 @@ import {
|
||||
} from 'pl-fe/actions/compose';
|
||||
import DropdownMenu from 'pl-fe/components/dropdown-menu';
|
||||
import List, { ListItem } from 'pl-fe/components/list';
|
||||
import HStack from 'pl-fe/components/ui/hstack';
|
||||
import Icon from 'pl-fe/components/ui/icon';
|
||||
import Stack from 'pl-fe/components/ui/stack';
|
||||
import SvgIcon from 'pl-fe/components/ui/svg-icon';
|
||||
import Toggle from 'pl-fe/components/ui/toggle';
|
||||
import EmojiPickerDropdown from 'pl-fe/features/emoji/containers/emoji-picker-dropdown-container';
|
||||
@ -296,11 +294,11 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
|
||||
const showModifiers = !condensed && (compose.media_attachments.length || compose.is_uploading || compose.poll?.options.length || compose.schedule);
|
||||
|
||||
const composeModifiers = showModifiers && (
|
||||
<Stack space={4} className='font-[inherit] text-sm text-gray-900'>
|
||||
<div className='⁂-compose-form__modifiers'>
|
||||
<UploadForm composeId={id} onSubmit={handleSubmit} />
|
||||
<PollForm composeId={id} />
|
||||
<ScheduleForm composeId={id} />
|
||||
</Stack>
|
||||
</div>
|
||||
);
|
||||
|
||||
let publishText: string | JSX.Element = '';
|
||||
@ -347,6 +345,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
|
||||
return (
|
||||
<form
|
||||
className={clsx('⁂-compose-form', {
|
||||
'⁂-compose-form--transparent': transparent,
|
||||
'⁂-compose-form--with-avatar': withAvatar,
|
||||
})}
|
||||
ref={formRef}
|
||||
@ -370,9 +369,9 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
|
||||
{!shouldCondense && !event && !group && <ReplyMentions composeId={id} />}
|
||||
|
||||
{selectButtons.length > 0 && (
|
||||
<HStack space={2} wrap className={clsx(transparent && '-mb-2')}>
|
||||
<div className='⁂-compose-form__select-buttons'>
|
||||
{selectButtons}
|
||||
</HStack>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{features.spoilers && (
|
||||
@ -390,9 +389,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
|
||||
<ComposeEditor
|
||||
key={modifiedLanguage}
|
||||
ref={editorRef}
|
||||
className={clsx('⁂-compose-form__editor', {
|
||||
'⁂-compose-form__editor--transparent': transparent,
|
||||
})}
|
||||
className='⁂-compose-form__editor'
|
||||
placeholderClassName='⁂-compose-form__editor__placeholder'
|
||||
composeId={id}
|
||||
condensed={condensed}
|
||||
|
||||
66
packages/pl-fe/src/styles/new/accounts.scss
Normal file
66
packages/pl-fe/src/styles/new/accounts.scss
Normal file
@ -0,0 +1,66 @@
|
||||
.⁂-avatar {
|
||||
@apply rounded-lg leading-[0];
|
||||
|
||||
img, canvas {
|
||||
@apply rounded-[inherit] text-sm;
|
||||
}
|
||||
|
||||
// Adapted from Iceshrimp which I guess took it from Misskey
|
||||
// https://iceshrimp.dev/iceshrimp/iceshrimp/src/branch/dev/packages/client/src/components/global/MkAvatar.vue
|
||||
&--cat {
|
||||
@apply bg-gray-200 dark:bg-gray-900;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
background: #ebbcba;
|
||||
border: solid 0.05em currentcolor;
|
||||
box-sizing: border-box;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-radius: 0 75% 75%;
|
||||
transform: rotate(37.5deg) skew(30deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-radius: 75% 0 75% 75%;
|
||||
transform: rotate(-37.5deg) skew(-30deg);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
animation: earwiggleleft 1s infinite;
|
||||
}
|
||||
|
||||
&::after {
|
||||
animation: earwiggleright 1s infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes earwiggleleft {
|
||||
0% { transform: rotate(37.6deg) skew(30deg); }
|
||||
25% { transform: rotate(10deg) skew(30deg); }
|
||||
50% { transform: rotate(20deg) skew(30deg); }
|
||||
75% { transform: rotate(0deg) skew(30deg); }
|
||||
100% { transform: rotate(37.6deg) skew(30deg); }
|
||||
}
|
||||
|
||||
@keyframes earwiggleright {
|
||||
0% { transform: rotate(-37.6deg) skew(-30deg); }
|
||||
30% { transform: rotate(-10deg) skew(-30deg); }
|
||||
55% { transform: rotate(-20deg) skew(-30deg); }
|
||||
75% { transform: rotate(0deg) skew(-30deg); }
|
||||
100% { transform: rotate(-37.6deg) skew(-30deg); }
|
||||
}
|
||||
@ -1,17 +1,28 @@
|
||||
.⁂-compose-form {
|
||||
@apply flex flex-col gap-y-4 w-full;
|
||||
|
||||
&__select-buttons {
|
||||
@apply flex gap-2 flex-wrap;
|
||||
}
|
||||
|
||||
&--transparent &__select-buttons {
|
||||
@apply -mb-2;
|
||||
}
|
||||
|
||||
&__spoiler-input {
|
||||
@apply rounded-md !bg-transparent dark:!bg-transparent;
|
||||
}
|
||||
|
||||
&__editor:not(&__editor--transparent) {
|
||||
&:not(&--transparent) &__editor {
|
||||
@apply rounded-md border-gray-400 px-3 py-2 ring-2 focus-within:border-primary-500 focus-within:ring-primary-500 dark:border-gray-800 dark:ring-gray-800 dark:focus-within:border-primary-500 dark:focus-within:ring-primary-500;
|
||||
|
||||
&__placeholder {
|
||||
@apply pt-2;
|
||||
}
|
||||
}
|
||||
|
||||
&__editor:not(&__editor--transparent) &__editor__placeholder {
|
||||
@apply pt-2;
|
||||
&__modifiers {
|
||||
@apply flex flex-col gap-4 font-[inherit] text-sm text-gray-900;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
@use 'components';
|
||||
@use 'layout';
|
||||
@use 'accounts';
|
||||
@use 'statuses';
|
||||
|
||||
@ -43,60 +43,3 @@
|
||||
.underline-line-through {
|
||||
text-decoration: underline line-through;
|
||||
}
|
||||
|
||||
// Adapted from Iceshrimp which I guess took it from Misskey
|
||||
// https://iceshrimp.dev/iceshrimp/iceshrimp/src/branch/dev/packages/client/src/components/global/MkAvatar.vue
|
||||
.avatar__cat {
|
||||
img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
background: #ebbcba;
|
||||
border: solid 0.05em currentcolor;
|
||||
box-sizing: border-box;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-radius: 0 75% 75%;
|
||||
transform: rotate(37.5deg) skew(30deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-radius: 75% 0 75% 75%;
|
||||
transform: rotate(-37.5deg) skew(-30deg);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
animation: earwiggleleft 1s infinite;
|
||||
}
|
||||
|
||||
&::after {
|
||||
animation: earwiggleright 1s infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes earwiggleleft {
|
||||
0% { transform: rotate(37.6deg) skew(30deg); }
|
||||
25% { transform: rotate(10deg) skew(30deg); }
|
||||
50% { transform: rotate(20deg) skew(30deg); }
|
||||
75% { transform: rotate(0deg) skew(30deg); }
|
||||
100% { transform: rotate(37.6deg) skew(30deg); }
|
||||
}
|
||||
|
||||
@keyframes earwiggleright {
|
||||
0% { transform: rotate(-37.6deg) skew(-30deg); }
|
||||
30% { transform: rotate(-10deg) skew(-30deg); }
|
||||
55% { transform: rotate(-20deg) skew(-30deg); }
|
||||
75% { transform: rotate(0deg) skew(-30deg); }
|
||||
100% { transform: rotate(-37.6deg) skew(-30deg); }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user