/* components/theme-toggle.css */
/* Stylizacja przycisku przełączającego tryb */
.theme-toggle {
position: relative;
width: 40px;
height: 40px;
background: transparent;
border: none; /* Usunięcie obramówki */
cursor: pointer;
outline: none;
-webkit-transition: -webkit-transform 0.3s ease;
transition: -webkit-transform 0.3s ease;
-o-transition: transform 0.3s ease;
transition: transform 0.3s ease;
transition: transform 0.3s ease, -webkit-transform 0.3s ease;
-webkit-box-shadow: none;
box-shadow: none; /* Usunięcie cienia */
}
.theme-toggle::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 24px; /* Zmniejszona szerokość SVG */
height: 24px; /* Zmniejszona wysokość SVG */
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: background-image 0.3s ease, -webkit-transform 0.3s ease;
transition: background-image 0.3s ease, -webkit-transform 0.3s ease;
-o-transition: transform 0.3s ease, background-image 0.3s ease;
transition: transform 0.3s ease, background-image 0.3s ease;
transition: transform 0.3s ease, background-image 0.3s ease, -webkit-transform 0.3s ease;
}
.theme-toggle:focus,
.theme-toggle:active {
outline: none;
-webkit-box-shadow: none;
box-shadow: none; /* Usunięcie domyślnego cienia */
}
/* Zmiana ikony w trybie jasnym */
.light-mode .theme-toggle::after {
background-image: url('data:image/svg+xml;utf8,');
}
.theme-toggle:hover::after {
-webkit-transform: translate(-50%, -50%) rotate(180deg);
-ms-transform: translate(-50%, -50%) rotate(180deg);
transform: translate(-50%, -50%) rotate(180deg);
}
.theme-toggle {
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
.light-mode .theme-toggle {
/* Dodatkowe style dla przycisku w trybie jasnym, jeśli potrzebne */
}