mirrors/PairDrop
1
0
Fork 0
mirror of https://github.com/schlagmichdoch/PairDrop.git synced 2025-04-27 02:06:16 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Replace checkboxes with sliders to conform the style on all platforms

Browse source
This commit is contained in:
schlagmichdoch 2023-11-29 23:39:55 +01:00
parent f9a32c3e82
commit 6a599ed318
4 changed files with 128 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

64
public/styles/deferred-styles.css
View file

@ -268,6 +268,56 @@ x-peer[drop] x-icon {
transform: scale(1.1);
}
/* Checkboxes as slider */
.switch {
display: inline-block;
height: 20px;
position: relative;
width: 30px;
}
.switch input {
display:none;
}
.slider {
background-color: rgba(128, 128, 128, 0.5);
cursor: pointer;
top: 0;
bottom: 0;
right: 0;
left: 0;
position: absolute;
transition: .4s;
}
.slider:before {
background-color: #fff;
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
transition: .4s;
}
input:checked + .slider {
background-color: var(--primary-color);
}
input:checked + .slider:before {
transform: translateX(10px);
}
.slider.round {
border-radius: 20px;
}
.slider.round:before {
border-radius: 50%;
}
/* Dialog */
@ -466,26 +516,14 @@ x-dialog hr {
border-bottom: solid 2px rgba(128, 128, 128, 0.5);
opacity: 1;
}
.paired-device span {
width: 100%;
}
.paired-device > .button-wrapper {
display: flex;
height: 36px;
justify-content: space-between;
flex-direction: row;
align-items: center;
width: 100%;
}
.paired-device > .button-wrapper > label,
.paired-device > .button-wrapper > button {
display: flex;
align-items: center;
text-align: center;
white-space: nowrap;
justify-content: center;
.paired-device > .button-wrapper > * {
width: 50%;
padding-left: 6px;
padding-right: 6px;