drawDB/src/index.css
2024-08-27 23:39:14 +04:00

189 lines
3.3 KiB
CSS

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
/*
* Workaround to allow proper bottom positioning for fixed
* elements in mobile browsers with collapsing url bars:
* https://stackoverflow.com/a/17555766/1137077
*/
:root,
html,
body {
@apply h-full min-h-full;
}
#root {
@apply h-full min-h-full;
}
}
*,
::before,
::after {
box-sizing: border-box;
border-width: 0;
border-style: solid;
border-color: #ffffff;
}
.semi-form-vertical .semi-form-field {
margin: 0;
padding-top: 8px !important;
padding-bottom: 8px !important;
overflow: hidden;
}
.semi-card .semi-collapse-item {
border: none !important;
}
.semi-button.semi-button-light {
background-color: rgba(var(--semi-grey-1), 1);
}
.semi-button.semi-button-light:hover {
background-color: rgba(var(--semi-grey-2), 1);
}
.semi-button.semi-button-primary:not(.semi-button-light):not(
.semi-button-borderless
) {
background-color: rgba(var(--semi-blue-5), 1);
}
.semi-button.semi-button-primary:not(.semi-button-light):not(
.semi-button-borderless
):hover {
background-color: rgba(var(--semi-blue-6), 1);
}
.semi-spin-wrapper{
color: inherit;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
opacity: 0;
}
::-webkit-scrollbar-corner {
opacity: 0;
}
::-webkit-scrollbar-thumb {
background-color: rgba(var(--semi-grey-2), 1);
border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(var(--semi-grey-3), 1);
}
.theme {
color: var(--semi-color-text-1);
background-color: var(--semi-color-bg-0);
}
.sidesheet-theme {
color: var(--semi-color-text-1);
background-color: var(--semi-color-bg-2);
}
.popover-theme {
color: var(--semi-color-text-1);
background-color: var(--semi-color-bg-3);
}
.card-theme {
color: var(--semi-color-text-1);
background-color: rgba(var(--semi-grey-0), 1);
}
.toolbar-theme {
background-color: rgba(var(--semi-grey-1), 1);
}
.hover-1:hover {
background-color: rgba(var(--semi-grey-1), 1);
}
.bg-semi-grey-2 {
background-color: rgba(var(--semi-grey-2), 1);
}
.hover-2:hover {
background-color: rgba(var(--semi-grey-2), 1);
}
.text-color {
color: var(--semi-color-text-1);
}
.border-color {
border-color: rgba(var(--semi-grey-9), 0.08);
}
.table-border {
border-color: rgba(var(--semi-grey-2), 1);
}
.bg-dots {
background-color: white;
opacity: 0.8;
background-image: radial-gradient(rgb(118, 118, 209) 1px, white 1px);
background-size: 20px 20px;
}
.sliding-vertical span {
animation: top-to-bottom 9s linear infinite 0s;
-ms-animation: top-to-bottom 9s linear infinite 0s;
-webkit-animation: top-to-bottom 9s linear infinite 0s;
opacity: 0;
overflow: hidden;
position: absolute;
}
.sliding-vertical span:nth-child(2) {
animation-delay: 3s;
-ms-animation-delay: 3s;
-webkit-animation-delay: 3s;
}
.sliding-vertical span:nth-child(3) {
animation-delay: 6s;
-ms-animation-delay: 6s;
-webkit-animation-delay: 6s;
}
@keyframes top-to-bottom {
0% {
opacity: 0;
}
5% {
opacity: 0;
transform: translateY(-18px);
}
10% {
opacity: 1;
transform: translateY(0px);
}
25% {
opacity: 1;
transform: translateY(0px);
}
30% {
opacity: 0;
transform: translateY(18px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}