Sha256: 18ec8082df106753925ea5fbe0d7340b747d5beaa4b97ec488876aa2e719c862
Contents?: true
Size: 1.69 KB
Versions: 9
Compression:
Stored size: 1.69 KB
Contents
.theme-selector {
display: flex;
}
.theme-wrapper {
display: flex;
position: absolute;
right: 0;
justify-content: flex-end;
align-items: flex-start;
margin-left: auto;
padding: 6px;
margin-top: 8px;
margin-right: 8px;
border-radius: 16px;
background-color: rgba(159, 159, 159, 0.122);
backdrop-filter: blur(8px);
width: fit-content;
@media screen and (min-width: 601px) {
position: fixed;
z-index: 103;
bottom: 10px;
right: auto;
left: 9px;
}
}
.current-theme {
height: 24px;
width: 24px;
border-radius: 50%;
background-color: var(--md-sys-color-primary); /* Initial theme color */
margin-right: 10px;
cursor: pointer;
transition: transform 0.3s;
}
.theme-options {
display: flex;
gap: 10px;
max-width: 0px;
transition: all 0.4s;
}
.theme-option {
width: 26px;
height: 26px;
border-radius: 50%;
cursor: pointer;
}
.toggle-container {
display: flex;
align-items: center;
}
.toggle-switch {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: 0.4s;
border-radius: 34px;
background-color: var(--md-sys-color-primary);
}
.slider:before {
position: absolute;
content: url("/assets/theme-assets/theme-icons/sun.svg");
height: 20px;
width: 20px;
left: 2px;
bottom: 2px;
background-color: var(--md-sys-color-surface-container-highest);
transition: 0.4s;
border-radius: 50%;
}
input:checked + .slider:before {
transform: translateX(20px);
content: url("/assets/theme-assets/theme-icons/moon.svg");
}
Version data entries
9 entries across 9 versions & 1 rubygems