Accords-Library-Archive
/
accords-library.com
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

View tweaks and fixes

This commit is contained in:
DrMint 2022-05-22 21:23:18 +02:00
parent 16c540181d
commit 56e89dbbe4
5 changed files with 18 additions and 309 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Inputs/Switch.tsx
View File

@ -15,15 +15,19 @@ export function Switch(props: Immutable<Props>): 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);
}}
>
<div
className={`absolute top-0 bottom-0 left-0
className={`absolute ${
state ? "top-[2px] bottom-[2px] left-[2px]" : "top-0 bottom-0 left-0"
}
aspect-square rounded-full bg-dark transition-transform ${
state && "translate-x-[115%]"
state && "translate-x-[120%]"
}`}
></div>
</div>

16
src/components/Panels/MainPanel.tsx
View File

@ -190,14 +190,12 @@ export function MainPanel(props: Immutable<Props>): JSX.Element {
<Markdown>{langui.licensing_notice}</Markdown>
)}
</p>
<a
aria-label="Read more about the license we use for this website"
className="colorize-black hover:colorize-dark transition-[filter]"
href="https://creativecommons.org/licenses/by-sa/4.0/"
>
<div
className="mt-4 mb-8 grid grid-flow-col place-content-center gap-1
<div className="mt-4 mb-8 grid place-content-center">
<a
aria-label="Read more about the license we use for this website"
className="transition-[filter] grid grid-flow-col place-content-center gap-1
hover:[--theme-color-black:var(--theme-color-dark)]"
href="https://creativecommons.org/licenses/by-sa/4.0/"
>
<div
className="aspect-square w-6 bg-black [mask:url('/icons/creative-commons-brands.svg')]
@ -213,8 +211,8 @@ export function MainPanel(props: Immutable<Props>): JSX.Element {
[mask:url('/icons/creative-commons-sa-brands.svg')] ![mask-size:contain]
![mask-repeat:no-repeat] ![mask-position:center]"
/>
</div>
</a>
</a>
</div>
<p>
{langui.copyright_notice && (
<Markdown>{langui.copyright_notice}</Markdown>

2
src/contexts/AppLayoutContext.tsx
View File

@ -128,7 +128,7 @@ export function AppContextProvider(props: Immutable<Props>): JSX.Element {
const [searchPanelOpen, setSearchPanelOpen] = useStateWithLocalStorage<
boolean | undefined
>("mainPanelOpen", initialState.mainPanelOpen);
>("searchPanelOpen", initialState.searchPanelOpen);
return (
<AppContext.Provider

3
src/pages/news/index.tsx
View File

@ -34,7 +34,8 @@ export default function News(props: Immutable<Props>): JSX.Element {
useEffect(() => {
setFilteredItems(filterItems(posts, searchName));
}, [posts, searchName]);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [searchName]);
const subPanel = (
<SubPanel>

296
src/tailwind.css
View File

@ -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%);
}
}