Rounded window without window decorations

This commit is contained in:
chrox
2024-10-27 18:22:07 +01:00
parent 6466a6a038
commit 7e5eac01f2
9 changed files with 42 additions and 13 deletions
@@ -41,7 +41,7 @@ const FooterBar: React.FC<FooterBarProps> = ({
<div
className={clsx(
'footer-bar absolute bottom-0 z-10 flex h-12 w-full items-center px-4',
'shadow-xs bg-base-100 transition-opacity duration-300',
'shadow-xs bg-base-100 rounded-window transition-opacity duration-300',
isHoveredAnim && 'hover-bar-anim',
hoveredBookKey === bookKey ? `opacity-100` : `opacity-0`,
)}
@@ -2,6 +2,8 @@ import React from 'react';
import clsx from 'clsx';
import { VscLayoutSidebarLeft, VscLayoutSidebarLeftOff } from 'react-icons/vsc';
import WindowButtons from '@/components/WindowButtons';
interface HeaderBarProps {
bookKey: string;
bookTitle: string;
@@ -36,9 +38,10 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
return (
<div
id='titlebar'
className={clsx(
`header-bar absolute top-0 z-10 flex h-10 w-full items-center px-4`,
`shadow-xs bg-base-100 transition-opacity duration-300`,
`header-bar absolute top-0 z-10 flex h-11 w-full items-center px-4`,
`shadow-xs bg-base-100 rounded-window transition-opacity duration-300`,
isHoveredAnim && 'hover-bar-anim',
hoveredBookKey === bookKey ? `opacity-100` : `opacity-0`,
)}
@@ -59,6 +62,9 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
)}
</button>
</div>
<div className='absolute right-4 flex h-full items-center'>
<WindowButtons />
</div>
</div>
);
};
@@ -82,7 +82,7 @@ const SideBar: React.FC<{
return (
isVisible && (
<div
className='sidebar-container bg-base-200 z-20 h-full select-none'
className='sidebar-container bg-base-200 rounded-window-left z-20 h-full select-none'
style={{
width: `${width}`,
minWidth: `${MIN_SIDEBAR_WIDTH * 100}%`,
@@ -91,7 +91,7 @@ const SideBar: React.FC<{
}}
>
<div className={'sidebar h-full'}>
<div className='flex h-10 items-center justify-between pl-1.5 pr-3'>
<div className='flex h-11 items-center justify-between pl-1.5 pr-3'>
<div className='flex items-center'>
<button className='btn btn-ghost h-8 min-h-8 w-8 p-0' onClick={onGoToLibrary}>
<GiBookshelf size={20} className='fill-base-content' />
@@ -164,7 +164,7 @@ const TOCView: React.FC<{
return (
<div className='relative'>
<div className='max-h-[calc(100vh-168px)] overflow-y-auto rounded border'>
<div className='max-h-[calc(100vh-173px)] overflow-y-auto rounded border'>
<ul role='tree' ref={tocRef} className='overflow-y-auto px-2'>
{toc &&
toc.map((item) => (