add drop shadow to tooltips

feature/font
AtelierSnek 2022-11-08 18:13:08 +11:00
parent 97f13401cb
commit f16f9c2468
1 changed files with 9 additions and 8 deletions

View File

@ -75,12 +75,12 @@ body a, body button {
min-width: 16ch; min-width: 16ch;
max-width: 40ch; max-width: 40ch;
bottom: 95%; bottom: 95%;
left: 0; left: 75%;
padding: 0.25ch; padding: 0.25ch;
padding-left: 0.5ch; padding-left: 0.5ch;
padding-right: 0.5ch; padding-right: 0.5ch;
background-color: rgba(var(--color-neutral-100),0.75); background-color: rgba(var(--color-neutral-100),1);
color: rgba(var(--color-secondary-700),0.75); color: rgba(var(--color-secondary-700),1);
text-align: center; text-align: center;
border-radius: 5px; border-radius: 5px;
position: absolute; position: absolute;
@ -89,20 +89,21 @@ body a, body button {
transition-property: opacity; transition-property: opacity;
transition-duration: 250ms; transition-duration: 250ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 2px 2px 5px rgba(var(--color-neutral-800),1);
} }
/* TODO make background blur work*/ /* TODO make background blur work*/
.tooltip:hover .tooltiptext { .tooltip:hover .tooltiptext {
opacity: 0.95; opacity: 1;
backdrop-filter: blur(100px);
} }
.dark .tooltip { .dark .tooltip {
border-bottom: 2px dotted rgba(var(--color-secondary-400), var(--tw-text-opacity)); border-bottom: 2px dotted rgba(var(--color-secondary-500), var(--tw-text-opacity));
} }
.dark .tooltip .tooltiptext { .dark .tooltip .tooltiptext {
background-color: rgba(var(--color-neutral-800),var(--tw-bg-opacity)); background-color: rgba(var(--color-neutral-800),1);
color: rgba(var(--color-secondary-400),var(--tw-text-opacity)); color: rgba(var(--color-secondary-400),1);
box-shadow: 2px 2px 5px rgba(var(--color-neutral-400),1);
} }
/* BLOCKQUOTES that don't suck */ /* BLOCKQUOTES that don't suck */