egecankomur
37679e83e6
- Next.js 16 + Appwrite multi-tenant emlak CRM - Database: kovakemlak-db (properties, customers, customer_searches, property_matches, presentations, investors, activities, tenant_settings) - Same stack as isletmem-kovakcrm (shadcn/ui template base) - Modules: portföy, müşteri takibi, arama kriterleri, otomatik eşleştirme, sunum linki, yatırımcı portalı
116 lines
2.5 KiB
CSS
116 lines
2.5 KiB
CSS
/* View Transition Circular Effect - Based on tweakcn implementation */
|
|
::view-transition-old(root),
|
|
::view-transition-new(root) {
|
|
animation: none;
|
|
mix-blend-mode: normal;
|
|
}
|
|
|
|
::view-transition-old(root) {
|
|
/* Ensure the outgoing view (old theme) is beneath */
|
|
z-index: 0;
|
|
}
|
|
|
|
::view-transition-new(root) {
|
|
/* Ensure the incoming view (new theme) is always on top */
|
|
z-index: 1;
|
|
}
|
|
|
|
@keyframes reveal {
|
|
from {
|
|
/* Use CSS variables for the origin, defaulting to center if not set */
|
|
clip-path: circle(0% at var(--x, 50%) var(--y, 50%));
|
|
opacity: 0.7;
|
|
}
|
|
to {
|
|
/* Use CSS variables for the origin, defaulting to center if not set */
|
|
clip-path: circle(150% at var(--x, 50%) var(--y, 50%));
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
::view-transition-new(root) {
|
|
/* Apply the reveal animation */
|
|
animation: reveal 0.4s ease-in-out forwards;
|
|
}
|
|
|
|
/* Fallback for reduced motion */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
::view-transition-new(root) {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
/* Button styling for mode toggles */
|
|
.mode-toggle-button {
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.mode-toggle-button:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.mode-toggle-button svg {
|
|
transition: transform 0.3s ease-in-out;
|
|
}
|
|
|
|
/* Enhanced mode toggle button with ripple effect */
|
|
.mode-toggle-button {
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
}
|
|
|
|
.mode-toggle-button::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
opacity: 0.1;
|
|
transform: translate(-50%, -50%);
|
|
transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
}
|
|
|
|
.mode-toggle-button.animating::before {
|
|
width: 200px;
|
|
height: 200px;
|
|
opacity: 0;
|
|
}
|
|
|
|
/* Improved focus and accessibility */
|
|
.mode-toggle-button:focus-visible {
|
|
outline: 2px solid var(--ring);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Support for reduced motion */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.theme-transition-overlay.active,
|
|
.theme-transition-overlay.reverse {
|
|
animation: none;
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.mode-toggle-button::before {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
/* Dark mode specific styling for the overlay */
|
|
.dark .theme-transition-overlay {
|
|
background: var(--background);
|
|
}
|
|
|
|
/* Light mode specific styling for the overlay */
|
|
.light .theme-transition-overlay {
|
|
background: var(--background);
|
|
}
|