2021-06-17 07:02:27 +08:00
|
|
|
@layer utilities {
|
|
|
|
/* A set of reusable classes */
|
2021-02-11 23:35:32 +08:00
|
|
|
|
2021-06-17 07:02:27 +08:00
|
|
|
.bg-editor {
|
|
|
|
background-color: #282c34;
|
|
|
|
}
|
2021-02-11 23:35:32 +08:00
|
|
|
|
2022-01-16 20:50:44 +08:00
|
|
|
body[data-editor-theme="highContrast"] .bg-editor {
|
|
|
|
background-color: #060708;
|
|
|
|
}
|
|
|
|
|
2021-06-17 07:02:27 +08:00
|
|
|
.text-editor {
|
2022-01-16 20:50:44 +08:00
|
|
|
color: #c4cad6;
|
2021-06-17 07:02:27 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
.font-editor {
|
|
|
|
font-family: "JetBrains Mono", "Droid Sans Mono", "monospace";
|
|
|
|
font-size: 14px;
|
|
|
|
}
|
2021-02-18 20:14:09 +08:00
|
|
|
|
2021-06-17 07:02:27 +08:00
|
|
|
.shadow-xl-center {
|
|
|
|
box-shadow: 0 0 25px -5px rgba(0, 0, 0, 0.1),
|
|
|
|
0 0 10px -5px rgba(0, 0, 0, 0.04);
|
|
|
|
}
|
2021-07-16 00:19:36 +08:00
|
|
|
|
2021-10-27 23:04:33 +08:00
|
|
|
.shadow-custom-1 {
|
|
|
|
box-shadow: 10px 5px 25px -8px rgba(0, 0, 0, 0.2);
|
|
|
|
}
|
|
|
|
|
2021-07-16 00:19:36 +08:00
|
|
|
.flip-horizontally {
|
|
|
|
transform: scaleY(-1);
|
|
|
|
}
|
2021-10-25 01:38:57 +08:00
|
|
|
|
2021-11-03 05:34:44 +08:00
|
|
|
/* Animations */
|
|
|
|
|
|
|
|
.fade-in {
|
|
|
|
animation: fade-in-frames 200ms;
|
|
|
|
}
|
|
|
|
|
|
|
|
.fade-out {
|
|
|
|
animation: fade-out-frames 200ms;
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes fade-in-frames {
|
|
|
|
from {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
to {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes fade-out-frames {
|
|
|
|
from {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
to {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
}
|
2022-02-28 20:53:33 +08:00
|
|
|
|
|
|
|
.delay-200 {
|
|
|
|
animation: delay-frames 200ms;
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes delay-frames {
|
|
|
|
0% {
|
|
|
|
opacity: 0;
|
|
|
|
height: 0;
|
|
|
|
width: 0;
|
|
|
|
}
|
|
|
|
99% {
|
|
|
|
opacity: 0;
|
|
|
|
height: 0;
|
|
|
|
width: 0;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
}
|
|
|
|
}
|
2021-02-11 23:35:32 +08:00
|
|
|
}
|