diff --git a/src/components/Inputs/Switch.tsx b/src/components/Inputs/Switch.tsx index 08f1807..5dc2d07 100644 --- a/src/components/Inputs/Switch.tsx +++ b/src/components/Inputs/Switch.tsx @@ -15,15 +15,19 @@ export function Switch(props: Immutable): JSX.Element { className={`relative grid h-6 w-12 rounded-full border-2 border-mid transition-colors ${ disabled ? "cursor-not-allowed" : "cursor-pointer" - } ${className} ${state ? "bg-mid" : "bg-light"}`} + } ${className} ${ + state ? "border-none bg-mid shadow-inner-sm shadow-shade" : "bg-light" + }`} onClick={() => { if (!disabled) setState(!state); }} >
diff --git a/src/components/Panels/MainPanel.tsx b/src/components/Panels/MainPanel.tsx index 2a1a0b2..c128ef5 100644 --- a/src/components/Panels/MainPanel.tsx +++ b/src/components/Panels/MainPanel.tsx @@ -190,14 +190,12 @@ export function MainPanel(props: Immutable): JSX.Element { {langui.licensing_notice} )}

- -
+
-
-
+ +

{langui.copyright_notice && ( {langui.copyright_notice} diff --git a/src/contexts/AppLayoutContext.tsx b/src/contexts/AppLayoutContext.tsx index e46a84c..e34b728 100644 --- a/src/contexts/AppLayoutContext.tsx +++ b/src/contexts/AppLayoutContext.tsx @@ -128,7 +128,7 @@ export function AppContextProvider(props: Immutable): JSX.Element { const [searchPanelOpen, setSearchPanelOpen] = useStateWithLocalStorage< boolean | undefined - >("mainPanelOpen", initialState.mainPanelOpen); + >("searchPanelOpen", initialState.searchPanelOpen); return ( ): JSX.Element { useEffect(() => { setFilteredItems(filterItems(posts, searchName)); - }, [posts, searchName]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [searchName]); const subPanel = ( diff --git a/src/tailwind.css b/src/tailwind.css index 48d5d99..3859a5a 100644 --- a/src/tailwind.css +++ b/src/tailwind.css @@ -224,298 +224,4 @@ input[type="submit"] { } .tippy-content { @apply relative z-10 px-6 py-4; -} - -/* LIGHTBOX */ - -@keyframes closeWindow { - 0% { - opacity: 1; - } - 100% { - opacity: 0; - } -} - -.ril__outer { - @apply h-full w-full touch-none bg-shade bg-opacity-50 outline-none [backdrop-filter:blur(2px)]; -} - -.ril__outerClosing { - opacity: 0; -} - -.ril__inner { - @apply absolute inset-0; -} - -.ril__image, -.ril__imagePrev, -.ril__imageNext { - @apply absolute inset-0 m-auto max-w-none touch-none; -} - -.ril__image { - @apply drop-shadow-shade-2xl; -} - -.ril__navButtons { - @apply absolute inset-y-0 m-auto h-8 w-5 cursor-pointer px-10 py-8; -} -.ril__navButtons:hover { - opacity: 1; -} -.ril__navButtons:active { - opacity: 0.7; -} - -.ril__navButtonPrev { - left: 0; - background: rgba(0, 0, 0, 0.2) - url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDE5LDMgLTIsLTIgLTE2LDE2IDE2LDE2IDEsLTEgLTE1LC0xNSAxNSwtMTUgeiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==") - no-repeat center; -} - -.ril__navButtonNext { - right: 0; - background: rgba(0, 0, 0, 0.2) - url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDEsMyAyLC0yIDE2LDE2IC0xNiwxNiAtMSwtMSAxNSwtMTUgLTE1LC0xNSB6IiBmaWxsPSIjRkZGIi8+PC9zdmc+") - no-repeat center; -} - -.ril__caption, -.ril__toolbar { - @apply absolute inset-x-0 flex justify-between bg-shade bg-opacity-50; -} - -.ril__caption { - bottom: 0; - max-height: 150px; - overflow: auto; -} - -.ril__captionContent { - padding: 10px 20px; - color: #fff; -} - -.ril__toolbar { - @apply top-0 h-12; -} - -.ril__toolbarSide { - height: 50px; - margin: 0; -} - -.ril__toolbarLeftSide { - padding-left: 20px; - padding-right: 0; - flex: 0 1 auto; - overflow: hidden; - text-overflow: ellipsis; -} - -.ril__toolbarRightSide { - padding-left: 0; - padding-right: 20px; - flex: 0 0 auto; -} - -.ril__toolbarItem { - display: inline-block; - line-height: 50px; - padding: 0; - color: #fff; - font-size: 120%; - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.ril__toolbarItemChild { - vertical-align: middle; -} - -.ril__builtinButton { - width: 40px; - height: 35px; - cursor: pointer; - border: none; - opacity: 0.7; -} -.ril__builtinButton:hover { - opacity: 1; -} -.ril__builtinButton:active { - outline: none; -} - -.ril__builtinButtonDisabled { - cursor: default; - opacity: 0.5; -} -.ril__builtinButtonDisabled:hover { - opacity: 0.5; -} - -.ril__closeButton { - background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIj48cGF0aCBkPSJtIDEsMyAxLjI1LC0xLjI1IDcuNSw3LjUgNy41LC03LjUgMS4yNSwxLjI1IC03LjUsNy41IDcuNSw3LjUgLTEuMjUsMS4yNSAtNy41LC03LjUgLTcuNSw3LjUgLTEuMjUsLTEuMjUgNy41LC03LjUgLTcuNSwtNy41IHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=") - no-repeat center; -} - -.ril__zoomInButton { - background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PHBhdGggZD0iTTEyIDV2NiIvPjwvZz48Y2lyY2xlIGN4PSIxMiIgY3k9IjgiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+") - no-repeat center; -} - -.ril__zoomOutButton { - background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PC9nPjxjaXJjbGUgY3g9IjEyIiBjeT0iOCIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=") - no-repeat center; -} - -.ril__outerAnimating { - animation-name: closeWindow; -} - -@keyframes pointFade { - 0%, - 19.999%, - 100% { - opacity: 0; - } - 20% { - opacity: 1; - } -} - -.ril__loadingCircle { - width: 60px; - height: 60px; - position: relative; -} - -.ril__loadingCirclePoint { - width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; -} -.ril__loadingCirclePoint::before { - content: ""; - display: block; - margin: 0 auto; - width: 11%; - height: 30%; - background-color: #fff; - border-radius: 30%; - animation: pointFade 800ms infinite ease-in-out both; -} -.ril__loadingCirclePoint:nth-of-type(1) { - transform: rotate(0deg); -} -.ril__loadingCirclePoint:nth-of-type(7) { - transform: rotate(180deg); -} -.ril__loadingCirclePoint:nth-of-type(1)::before, -.ril__loadingCirclePoint:nth-of-type(7)::before { - animation-delay: -800ms; -} -.ril__loadingCirclePoint:nth-of-type(2) { - transform: rotate(30deg); -} -.ril__loadingCirclePoint:nth-of-type(8) { - transform: rotate(210deg); -} -.ril__loadingCirclePoint:nth-of-type(2)::before, -.ril__loadingCirclePoint:nth-of-type(8)::before { - animation-delay: -666ms; -} -.ril__loadingCirclePoint:nth-of-type(3) { - transform: rotate(60deg); -} -.ril__loadingCirclePoint:nth-of-type(9) { - transform: rotate(240deg); -} -.ril__loadingCirclePoint:nth-of-type(3)::before, -.ril__loadingCirclePoint:nth-of-type(9)::before { - animation-delay: -533ms; -} -.ril__loadingCirclePoint:nth-of-type(4) { - transform: rotate(90deg); -} -.ril__loadingCirclePoint:nth-of-type(10) { - transform: rotate(270deg); -} -.ril__loadingCirclePoint:nth-of-type(4)::before, -.ril__loadingCirclePoint:nth-of-type(10)::before { - animation-delay: -400ms; -} -.ril__loadingCirclePoint:nth-of-type(5) { - transform: rotate(120deg); -} -.ril__loadingCirclePoint:nth-of-type(11) { - transform: rotate(300deg); -} -.ril__loadingCirclePoint:nth-of-type(5)::before, -.ril__loadingCirclePoint:nth-of-type(11)::before { - animation-delay: -266ms; -} -.ril__loadingCirclePoint:nth-of-type(6) { - transform: rotate(150deg); -} -.ril__loadingCirclePoint:nth-of-type(12) { - transform: rotate(330deg); -} -.ril__loadingCirclePoint:nth-of-type(6)::before, -.ril__loadingCirclePoint:nth-of-type(12)::before { - animation-delay: -133ms; -} -.ril__loadingCirclePoint:nth-of-type(7) { - transform: rotate(180deg); -} -.ril__loadingCirclePoint:nth-of-type(13) { - transform: rotate(360deg); -} -.ril__loadingCirclePoint:nth-of-type(7)::before, -.ril__loadingCirclePoint:nth-of-type(13)::before { - animation-delay: 0ms; -} - -.ril__loadingContainer { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; -} -.ril__imagePrev .ril__loadingContainer, -.ril__imageNext .ril__loadingContainer { - display: none; -} - -.ril__errorContainer { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - display: flex; - align-items: center; - justify-content: center; - color: #fff; -} -.ril__imagePrev .ril__errorContainer, -.ril__imageNext .ril__errorContainer { - display: none; -} - -.ril__loadingContainer__icon { - color: #fff; - position: absolute; - top: 50%; - left: 50%; - transform: translateX(-50%) translateY(-50%); -} +} \ No newline at end of file