add drop shadow to tooltips
parent
97f13401cb
commit
f16f9c2468
|
@ -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 */
|
||||||
|
|
Loading…
Reference in New Issue