103 lines
2.0 KiB
SCSS
103 lines
2.0 KiB
SCSS
.icon-button {
|
|
@apply text-black dark:text-white inline-flex items-center p-0 border-0 bg-transparent cursor-pointer transition duration-100 ease-in opacity-40;
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
@apply opacity-60 transition-colors duration-200 ease-out;
|
|
}
|
|
|
|
&::-moz-focus-inner {
|
|
@apply border-0;
|
|
}
|
|
|
|
&::-moz-focus-inner,
|
|
&:focus,
|
|
&:active {
|
|
@apply outline-0 #{!important};
|
|
}
|
|
}
|
|
|
|
.react-datepicker-popper {
|
|
@apply z-[9999] #{!important};
|
|
}
|
|
|
|
.ellipsis::after {
|
|
content: '…';
|
|
}
|
|
|
|
.react-swipeable-view-container {
|
|
& {
|
|
@apply h-full;
|
|
}
|
|
}
|
|
|
|
.react-swipeable-view-container>* {
|
|
@apply flex items-center justify-center h-full;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.underline-line-through {
|
|
text-decoration: underline line-through;
|
|
}
|
|
|
|
// Adapted from Iceshrimp which I guess took it from Misskey
|
|
// https://iceshrimp.dev/iceshrimp/iceshrimp/src/branch/dev/packages/client/src/components/global/MkAvatar.vue
|
|
.avatar__cat {
|
|
img {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
&::before,
|
|
&::after {
|
|
background: #ebbcba;
|
|
border: solid 0.05em currentcolor;
|
|
box-sizing: border-box;
|
|
content: "";
|
|
display: inline-block;
|
|
height: 50%;
|
|
width: 50%;
|
|
}
|
|
|
|
&::before {
|
|
border-radius: 0 75% 75%;
|
|
transform: rotate(37.5deg) skew(30deg);
|
|
}
|
|
|
|
&::after {
|
|
border-radius: 75% 0 75% 75%;
|
|
transform: rotate(-37.5deg) skew(-30deg);
|
|
}
|
|
|
|
&:hover {
|
|
&::before {
|
|
animation: earwiggleleft 1s infinite;
|
|
}
|
|
|
|
&::after {
|
|
animation: earwiggleright 1s infinite;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes earwiggleleft {
|
|
0% { transform: rotate(37.6deg) skew(30deg); }
|
|
25% { transform: rotate(10deg) skew(30deg); }
|
|
50% { transform: rotate(20deg) skew(30deg); }
|
|
75% { transform: rotate(0deg) skew(30deg); }
|
|
100% { transform: rotate(37.6deg) skew(30deg); }
|
|
}
|
|
|
|
@keyframes earwiggleright {
|
|
0% { transform: rotate(-37.6deg) skew(-30deg); }
|
|
30% { transform: rotate(-10deg) skew(-30deg); }
|
|
55% { transform: rotate(-20deg) skew(-30deg); }
|
|
75% { transform: rotate(0deg) skew(-30deg); }
|
|
100% { transform: rotate(-37.6deg) skew(-30deg); }
|
|
}
|