change style
This commit is contained in:
parent
028a63ea34
commit
df53f81032
@ -11,7 +11,7 @@ function App() {
|
||||
|
||||
return (
|
||||
<div className="h-full full-visible-h-safari flex flex-col">
|
||||
<header className="absolute z-10 flex px-5 pt-3 justify-center sm:justify-between items-center sm:items-start">
|
||||
<header className="absolute z-10 flex w-full p-2 justify-center sm:justify-between items-center sm:items-start bg-white backdrop-blur backdrop-filter bg-opacity-30">
|
||||
{file ? (
|
||||
<Button
|
||||
icon={<ArrowLeftIcon className="w-6 h-6" />}
|
||||
|
@ -561,14 +561,15 @@ export default function Editor(props: EditorProps) {
|
||||
/>
|
||||
)}
|
||||
|
||||
<div
|
||||
className="fixed w-full bottom-0 flex items-center justify-center"
|
||||
style={{ height: '90px' }}
|
||||
>
|
||||
<div
|
||||
className={[
|
||||
'flex items-center w-full max-w-5xl',
|
||||
'space-x-3 sm:space-x-5',
|
||||
'pb-6',
|
||||
minScale !== 1
|
||||
? 'absolute bottom-0 justify-evenly'
|
||||
: 'relative justify-evenly sm:justify-between',
|
||||
'flex items-center justify-center space-x-6',
|
||||
'',
|
||||
// 'bg-black backdrop-blur backdrop-filter bg-opacity-10',
|
||||
].join(' ')}
|
||||
>
|
||||
<SizeSelector
|
||||
@ -635,6 +636,19 @@ export default function Editor(props: EditorProps) {
|
||||
{undefined}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="absolute bg-black backdrop-blur backdrop-filter bg-opacity-10 rounded-xl"
|
||||
style={{
|
||||
height: '58px',
|
||||
width: '680px',
|
||||
zIndex: -1,
|
||||
marginLeft: '-1px',
|
||||
}}
|
||||
>
|
||||
{undefined}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
@ -36,15 +36,15 @@ export default function SizeSelector(props: SizeSelectorProps) {
|
||||
<Listbox value={value} onChange={onChange}>
|
||||
<div className="relative">
|
||||
<Listbox.Options
|
||||
style={{ top: '-112px' }}
|
||||
className="absolute mb-1 w-full overflow-auto text-base bg-black backdrop-blur backdrop-filter bg-opacity-10 rounded-md max-h-60 ring-opacity-50 focus:outline-none sm:text-sm"
|
||||
style={{ top: '-122px' }}
|
||||
className="absolute mb-1 w-full overflow-auto text-base bg-opacity-10 bg-black backdrop-blur rounded-md max-h-60 outline-none sm:text-sm"
|
||||
>
|
||||
{sizes.map(size => (
|
||||
<Listbox.Option
|
||||
key={size}
|
||||
className={({ active }) =>
|
||||
`${active ? 'bg-black bg-opacity-10' : 'text-gray-900'}
|
||||
cursor-default select-none relative py-2 pl-10 pr-4`
|
||||
cursor-default select-none relative py-2 pl-4 pr-4`
|
||||
}
|
||||
value={size}
|
||||
>
|
||||
@ -57,7 +57,7 @@ export default function SizeSelector(props: SizeSelectorProps) {
|
||||
>
|
||||
{getSizeShowName(size)}
|
||||
</span>
|
||||
{selected ? (
|
||||
{/* {selected ? (
|
||||
<span
|
||||
className={`${
|
||||
active ? 'text-amber-600' : 'text-amber-600'
|
||||
@ -66,7 +66,7 @@ export default function SizeSelector(props: SizeSelectorProps) {
|
||||
>
|
||||
<CheckIcon className="w-5 h-5" aria-hidden="true" />
|
||||
</span>
|
||||
) : null}
|
||||
) : null} */}
|
||||
</>
|
||||
)}
|
||||
</Listbox.Option>
|
||||
|
Loading…
Reference in New Issue
Block a user