invy/frontend/src/components/ThemeToggle.css

38 lines
698 B
CSS

.theme-toggle-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
direction: ltr;
}
[dir="rtl"] .theme-toggle-container {
right: auto;
left: 20px;
}
.theme-toggle {
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid var(--color-border);
background: var(--color-background-secondary);
color: var(--color-text);
font-size: 1.5rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.theme-toggle:hover {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.theme-toggle:active {
transform: scale(0.95);
}