forked from akai/readest
chrox
151 lines
2.6 KiB
CSS
151 lines
2.6 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
--background: #ffffff;
|
|
--foreground: #171717;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--background: #0a0a0a;
|
|
--foreground: #ededed;
|
|
border-radius: 10px;
|
|
}
|
|
}
|
|
|
|
body {
|
|
color: var(--foreground);
|
|
background: var(--background);
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
border-radius: 10px;
|
|
background-color: transparent;
|
|
}
|
|
|
|
@layer utilities {
|
|
.text-balance {
|
|
text-wrap: balance;
|
|
}
|
|
}
|
|
|
|
foliate-view {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
}
|
|
|
|
@keyframes scaleUpAndDown {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.02);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.hover-bar-anim:hover ~ .foliate-viewer {
|
|
animation: scaleUpAndDown 0.3s ease forwards;
|
|
}
|
|
|
|
.window-button {
|
|
@apply inline-flex h-6 w-6 items-center justify-center rounded-full;
|
|
@apply transition duration-200 ease-in-out transform hover:scale-105;
|
|
@apply bg-base-300 hover:bg-gray-300;
|
|
}
|
|
|
|
.rounded-window {
|
|
border-radius: 10px;
|
|
}
|
|
.rounded-window-top-left {
|
|
border-top-left-radius: 10px;
|
|
}
|
|
.rounded-window-bottom-left {
|
|
border-bottom-left-radius: 10px;
|
|
}
|
|
.rounded-window-top-right {
|
|
border-top-right-radius: 10px;
|
|
}
|
|
.rounded-window-bottom-right {
|
|
border-bottom-right-radius: 10px;
|
|
}
|
|
|
|
.dropdown-content {
|
|
position: relative;
|
|
background-color: white;
|
|
padding: 10px;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
|
|
border-radius: 14px;
|
|
}
|
|
|
|
.dropdown-content::before,
|
|
.dropdown-content::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -12px;
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 10px solid transparent;
|
|
border-right: 10px solid transparent;
|
|
}
|
|
|
|
.dropdown-content::before {
|
|
border-bottom: 12px solid white;
|
|
z-index: 1;
|
|
}
|
|
|
|
.dropdown-content::after {
|
|
top: -14px;
|
|
border-bottom: 13px solid rgba(0, 0, 0, 0.02);
|
|
z-index: 0;
|
|
}
|
|
|
|
.dropdown-left::before,
|
|
.dropdown-left::after {
|
|
left: 20px;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.dropdown-center::before,
|
|
.dropdown-center::after {
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.dropdown-right::before,
|
|
.dropdown-right::after {
|
|
right: 20px;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.dropdown-content.no-triangle::before,
|
|
.dropdown-content.no-triangle::after {
|
|
display: none;
|
|
}
|
|
|
|
.dropdown-content, .settings-content {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
@apply text-gray-700;
|
|
}
|
|
|
|
.config-item {
|
|
@apply flex h-14 items-center justify-between p-4;
|
|
@apply hover:bg-gray-50;
|
|
}
|
|
|
|
.config-item-top {
|
|
@apply rounded-t-2xl;
|
|
}
|
|
|
|
.config-item-bottom {
|
|
@apply rounded-b-2xl;
|
|
}
|
|
|