mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-05-23 07:26:47 +00:00
Merge branch 'main' into pr/jxpeng98/1257
This commit is contained in:
tangly1024.com
503
styles/animate.css
vendored
Normal file
503
styles/animate.css
vendored
Normal file
@@ -0,0 +1,503 @@
|
||||
@charset "UTF-8";/*!
|
||||
* animate.css - https://animate.style/
|
||||
* Version - 4.1.1
|
||||
* Licensed under the MIT license - http://opensource.org/licenses/MIT
|
||||
* https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css
|
||||
* 这里做了精减，后续不再使用animate.css，因为占用体积太大，不如手写动画
|
||||
* Copyright (c) 2020 Animate.css
|
||||
*/
|
||||
:root {
|
||||
--animate-duration: 1s;
|
||||
--animate-delay: 1s;
|
||||
--animate-repeat: 1;
|
||||
}
|
||||
.animate__animated {
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-duration: var(--animate-duration);
|
||||
animation-duration: var(--animate-duration);
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
|
||||
.animate__animated.animate__faster {
|
||||
-webkit-animation-duration: calc(1s / 2);
|
||||
animation-duration: calc(1s / 2);
|
||||
-webkit-animation-duration: calc(var(--animate-duration) / 2);
|
||||
animation-duration: calc(var(--animate-duration) / 2);
|
||||
}
|
||||
.animate__animated.animate__fast {
|
||||
-webkit-animation-duration: calc(1s * 0.8);
|
||||
animation-duration: calc(1s * 0.8);
|
||||
-webkit-animation-duration: calc(var(--animate-duration) * 0.8);
|
||||
animation-duration: calc(var(--animate-duration) * 0.8);
|
||||
}
|
||||
|
||||
|
||||
@media print, (prefers-reduced-motion: reduce) {
|
||||
.animate__animated {
|
||||
-webkit-animation-duration: 1ms !important;
|
||||
animation-duration: 1ms !important;
|
||||
-webkit-transition-duration: 1ms !important;
|
||||
transition-duration: 1ms !important;
|
||||
-webkit-animation-iteration-count: 1 !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
}
|
||||
|
||||
.animate__animated[class*='Out'] {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes shakeX {
|
||||
from,
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
10%,
|
||||
30%,
|
||||
50%,
|
||||
70%,
|
||||
90% {
|
||||
-webkit-transform: translate3d(-10px, 0, 0);
|
||||
transform: translate3d(-10px, 0, 0);
|
||||
}
|
||||
|
||||
20%,
|
||||
40%,
|
||||
60%,
|
||||
80% {
|
||||
-webkit-transform: translate3d(10px, 0, 0);
|
||||
transform: translate3d(10px, 0, 0);
|
||||
}
|
||||
}
|
||||
@keyframes shakeX {
|
||||
from,
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
10%,
|
||||
30%,
|
||||
50%,
|
||||
70%,
|
||||
90% {
|
||||
-webkit-transform: translate3d(-10px, 0, 0);
|
||||
transform: translate3d(-10px, 0, 0);
|
||||
}
|
||||
|
||||
20%,
|
||||
40%,
|
||||
60%,
|
||||
80% {
|
||||
-webkit-transform: translate3d(10px, 0, 0);
|
||||
transform: translate3d(10px, 0, 0);
|
||||
}
|
||||
}
|
||||
.animate__shakeX {
|
||||
-webkit-animation-name: shakeX;
|
||||
animation-name: shakeX;
|
||||
}
|
||||
@-webkit-keyframes shakeY {
|
||||
from,
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
10%,
|
||||
30%,
|
||||
50%,
|
||||
70%,
|
||||
90% {
|
||||
-webkit-transform: translate3d(0, -10px, 0);
|
||||
transform: translate3d(0, -10px, 0);
|
||||
}
|
||||
|
||||
20%,
|
||||
40%,
|
||||
60%,
|
||||
80% {
|
||||
-webkit-transform: translate3d(0, 10px, 0);
|
||||
transform: translate3d(0, 10px, 0);
|
||||
}
|
||||
}
|
||||
@keyframes shakeY {
|
||||
from,
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
10%,
|
||||
30%,
|
||||
50%,
|
||||
70%,
|
||||
90% {
|
||||
-webkit-transform: translate3d(0, -10px, 0);
|
||||
transform: translate3d(0, -10px, 0);
|
||||
}
|
||||
|
||||
20%,
|
||||
40%,
|
||||
60%,
|
||||
80% {
|
||||
-webkit-transform: translate3d(0, 10px, 0);
|
||||
transform: translate3d(0, 10px, 0);
|
||||
}
|
||||
}
|
||||
.animate__shakeY {
|
||||
-webkit-animation-name: shakeY;
|
||||
animation-name: shakeY;
|
||||
}
|
||||
@-webkit-keyframes headShake {
|
||||
0% {
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
6.5% {
|
||||
-webkit-transform: translateX(-6px) rotateY(-9deg);
|
||||
transform: translateX(-6px) rotateY(-9deg);
|
||||
}
|
||||
|
||||
18.5% {
|
||||
-webkit-transform: translateX(5px) rotateY(7deg);
|
||||
transform: translateX(5px) rotateY(7deg);
|
||||
}
|
||||
|
||||
31.5% {
|
||||
-webkit-transform: translateX(-3px) rotateY(-5deg);
|
||||
transform: translateX(-3px) rotateY(-5deg);
|
||||
}
|
||||
|
||||
43.5% {
|
||||
-webkit-transform: translateX(2px) rotateY(3deg);
|
||||
transform: translateX(2px) rotateY(3deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
@keyframes headShake {
|
||||
0% {
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
6.5% {
|
||||
-webkit-transform: translateX(-6px) rotateY(-9deg);
|
||||
transform: translateX(-6px) rotateY(-9deg);
|
||||
}
|
||||
|
||||
18.5% {
|
||||
-webkit-transform: translateX(5px) rotateY(7deg);
|
||||
transform: translateX(5px) rotateY(7deg);
|
||||
}
|
||||
|
||||
31.5% {
|
||||
-webkit-transform: translateX(-3px) rotateY(-5deg);
|
||||
transform: translateX(-3px) rotateY(-5deg);
|
||||
}
|
||||
|
||||
43.5% {
|
||||
-webkit-transform: translateX(2px) rotateY(3deg);
|
||||
transform: translateX(2px) rotateY(3deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
.animate__headShake {
|
||||
-webkit-animation-timing-function: ease-in-out;
|
||||
animation-timing-function: ease-in-out;
|
||||
-webkit-animation-name: headShake;
|
||||
animation-name: headShake;
|
||||
}
|
||||
|
||||
|
||||
@keyframes jello {
|
||||
from,
|
||||
11.1%,
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
22.2% {
|
||||
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
|
||||
transform: skewX(-12.5deg) skewY(-12.5deg);
|
||||
}
|
||||
|
||||
33.3% {
|
||||
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
|
||||
transform: skewX(6.25deg) skewY(6.25deg);
|
||||
}
|
||||
|
||||
44.4% {
|
||||
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
|
||||
transform: skewX(-3.125deg) skewY(-3.125deg);
|
||||
}
|
||||
|
||||
55.5% {
|
||||
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
|
||||
transform: skewX(1.5625deg) skewY(1.5625deg);
|
||||
}
|
||||
|
||||
66.6% {
|
||||
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
|
||||
transform: skewX(-0.78125deg) skewY(-0.78125deg);
|
||||
}
|
||||
|
||||
77.7% {
|
||||
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
|
||||
transform: skewX(0.390625deg) skewY(0.390625deg);
|
||||
}
|
||||
|
||||
88.8% {
|
||||
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
|
||||
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
|
||||
}
|
||||
}
|
||||
.animate__jello {
|
||||
-webkit-animation-name: jello;
|
||||
animation-name: jello;
|
||||
-webkit-transform-origin: center;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@-webkit-keyframes bounceInRight {
|
||||
from,
|
||||
60%,
|
||||
75%,
|
||||
90%,
|
||||
to {
|
||||
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
|
||||
transform: translate3d(3000px, 0, 0) scaleX(3);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
|
||||
transform: translate3d(-25px, 0, 0) scaleX(1);
|
||||
}
|
||||
|
||||
75% {
|
||||
-webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
|
||||
transform: translate3d(10px, 0, 0) scaleX(0.98);
|
||||
}
|
||||
|
||||
90% {
|
||||
-webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
|
||||
transform: translate3d(-5px, 0, 0) scaleX(0.995);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
@keyframes bounceInRight {
|
||||
from,
|
||||
60%,
|
||||
75%,
|
||||
90%,
|
||||
to {
|
||||
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
|
||||
transform: translate3d(3000px, 0, 0) scaleX(3);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
|
||||
transform: translate3d(-25px, 0, 0) scaleX(1);
|
||||
}
|
||||
|
||||
75% {
|
||||
-webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
|
||||
transform: translate3d(10px, 0, 0) scaleX(0.98);
|
||||
}
|
||||
|
||||
90% {
|
||||
-webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
|
||||
transform: translate3d(-5px, 0, 0) scaleX(0.995);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
.animate__bounceInRight {
|
||||
-webkit-animation-name: bounceInRight;
|
||||
animation-name: bounceInRight;
|
||||
}
|
||||
|
||||
|
||||
/* Fading entrances */
|
||||
@-webkit-keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.animate__fadeIn {
|
||||
-webkit-animation-name: fadeIn;
|
||||
animation-name: fadeIn;
|
||||
}
|
||||
|
||||
|
||||
/* Fading exits */
|
||||
/* 删除 */
|
||||
|
||||
/* Flippers */
|
||||
/* 删除 */
|
||||
|
||||
/* Lightspeed */
|
||||
/* 删除 */
|
||||
|
||||
/* Rotating exits */
|
||||
/* 删除 */
|
||||
|
||||
/* Zooming entrances */
|
||||
/* 删除 */
|
||||
|
||||
/* Sliding entrances */
|
||||
|
||||
@-webkit-keyframes slideInLeft {
|
||||
from {
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
@keyframes slideInLeft {
|
||||
from {
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
.animate__slideInLeft {
|
||||
-webkit-animation-name: slideInLeft;
|
||||
animation-name: slideInLeft;
|
||||
}
|
||||
@-webkit-keyframes slideInRight {
|
||||
from {
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
transform: translate3d(100%, 0, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
transform: translate3d(100%, 0, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
.animate__slideInRight {
|
||||
-webkit-animation-name: slideInRight;
|
||||
animation-name: slideInRight;
|
||||
}
|
||||
|
||||
|
||||
@keyframes slideOutLeft {
|
||||
from {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
visibility: hidden;
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
.animate__slideOutLeft {
|
||||
-webkit-animation-name: slideOutLeft;
|
||||
animation-name: slideOutLeft;
|
||||
}
|
||||
@-webkit-keyframes slideOutRight {
|
||||
from {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
visibility: hidden;
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
}
|
||||
@keyframes slideOutRight {
|
||||
from {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
visibility: hidden;
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
}
|
||||
.animate__slideOutRight {
|
||||
-webkit-animation-name: slideOutRight;
|
||||
animation-name: slideOutRight;
|
||||
}
|
||||
@@ -2,28 +2,6 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
html {
|
||||
--scrollbarBG: #ffffff00;
|
||||
--thumbBG: #b8b8b8;
|
||||
}
|
||||
body::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
body {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--thumbBG) var(--scrollbarBG);
|
||||
}
|
||||
body::-webkit-scrollbar-track {
|
||||
background: var(--scrollbarBG);
|
||||
}
|
||||
body::-webkit-scrollbar-thumb {
|
||||
background-color: var(--thumbBG);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: rgba(45, 170, 219, 0.3);
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
@@ -285,57 +263,3 @@ a.avatar-wrapper {
|
||||
.reply-author-name {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.line-clamp-4 {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 4;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.line-clamp-3 {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
|
||||
.line-clamp-2 {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
|
||||
/* fukasawa的首页响应式分栏 */
|
||||
#theme-fukasawa .grid-item {
|
||||
height: auto;
|
||||
break-inside: avoid-column;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
/* 大屏幕（宽度≥1024px）下显示3列 */
|
||||
@media (min-width: 1024px) {
|
||||
#theme-fukasawa .grid-container {
|
||||
column-count: 3;
|
||||
column-gap: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 小屏幕（宽度≥640px）下显示2列 */
|
||||
@media (min-width: 640px) and (max-width: 1023px) {
|
||||
#theme-fukasawa .grid-container {
|
||||
column-count: 2;
|
||||
column-gap: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 移动端（宽度<640px）下显示1列 */
|
||||
@media (max-width: 639px) {
|
||||
#theme-fukasawa .grid-container {
|
||||
column-count: 1;
|
||||
column-gap: .5rem;
|
||||
}
|
||||
}
|
||||
@@ -179,9 +179,6 @@
|
||||
color: var(--select-color-2) !important;
|
||||
}
|
||||
|
||||
.notion-simple-table {
|
||||
@apply whitespace-nowrap overflow-x-auto block
|
||||
}
|
||||
|
||||
.notion-app {
|
||||
position: relative;
|
||||
@@ -446,6 +443,7 @@ summary > .notion-h {
|
||||
|
||||
.notion-h:hover .notion-hash-link {
|
||||
opacity: 1;
|
||||
@apply dark:fill-gray-200
|
||||
}
|
||||
|
||||
.notion-hash-link {
|
||||
@@ -748,6 +746,8 @@ svg.notion-page-icon {
|
||||
|
||||
.notion .notion-code {
|
||||
font-size: 85%;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
pre[class*='language-'] {
|
||||
@@ -1395,6 +1395,10 @@ code[class*='language-'] {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.katex-display>.katex>.katex-html>.tag {
|
||||
position: inherit !important;
|
||||
}
|
||||
|
||||
.notion-page-title {
|
||||
display: inline-flex;
|
||||
max-width: 100%;
|
||||
@@ -1939,25 +1943,13 @@ svg + .notion-page-title-text {
|
||||
}
|
||||
|
||||
.notion-simple-table {
|
||||
width: 100% !important;
|
||||
@apply whitespace-nowrap overflow-x-auto block w-full border-0 !important;
|
||||
}
|
||||
|
||||
.notion-asset-wrapper-pdf > div {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
::selection {
|
||||
@apply bg-blue-500 text-gray-50 !important;
|
||||
}
|
||||
|
||||
.dark img{
|
||||
@apply opacity-80
|
||||
}
|
||||
|
||||
.dark #live2d {
|
||||
@apply opacity-80
|
||||
}
|
||||
|
||||
/* https://github.com/kchen0x */
|
||||
.notion-quote {
|
||||
display: block;
|
||||
@@ -2053,11 +2045,16 @@ code.language-mermaid {
|
||||
|
||||
/* 表格头 */
|
||||
.notion-simple-table tr:first-child td{
|
||||
background-color: #f5f6f8 !important;
|
||||
@apply text-center font-bold !important;
|
||||
background-color: #f5f6f8;
|
||||
@apply text-center font-bold dark:bg-gray-800 !important;
|
||||
|
||||
}
|
||||
|
||||
.notion-simple-table td{
|
||||
border: 1px solid var(#eee) !important
|
||||
}
|
||||
}
|
||||
|
||||
/* 竖屏视频高度bug */
|
||||
figure.notion-asset-wrapper.notion-asset-wrapper-video>div {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user