0.2.0 - better sliders
All checks were successful
Android Build / publish (push) Successful in 52s
Linux Build / publish (push) Successful in 58s

This commit is contained in:
olcxja 2026-08-24 20:20:00 +02:00
commit 093498e168
2 changed files with 54 additions and 46 deletions

View file

@ -774,7 +774,7 @@ space{
border-radius: 0.8rem;
transform: translateY(calc( ( var(--icon-button-height) + (var(--button-margin) * 2) ) / 2 - 0.6rem));
}
button:hover, input:hover, textarea:hover {
button:hover, input:not([type="range"]):hover, textarea:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.submit-button:hover, .profile-action-btn:hover {
@ -791,7 +791,11 @@ space{
filter: brightness(0.93);
}
}
button:active, button.is-pressed, input:active, input.is-pressed, textarea:active, textarea.is-pressed {
/* Suwaki ([type=range]) są wyłączone z efektu klikania całego pola -
przytrzymanie skaluje tylko uchwyt (patrz ::-webkit-slider-thumb:active). */
button:active, button.is-pressed,
input:not([type="range"]):active, input:not([type="range"]).is-pressed,
textarea:active, textarea.is-pressed {
background-color: rgba(255, 255, 255, 0.1);
transform: var(--press-scale);
}
@ -1021,15 +1025,18 @@ button.profile-action-btn.popup-btn-danger:hover, button.submit-button.popup-btn
height: auto;
}
/* Custom Zoom Slider Styling */
#cropper-zoom,
.voice-setting-row input[type="range"] {
input[type="range"] {
-webkit-appearance: none;
appearance: none;
display: block;
margin: 0;
padding: 0.4rem 0.05rem;
border: none;
width: 100%;
height: 0.375rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 0.1875rem;
border-radius: 0.34rem;
outline: none;
}
@ -1037,8 +1044,7 @@ button.profile-action-btn.popup-btn-danger:hover, button.submit-button.popup-btn
margin: 0.625rem 0;
}
#cropper-zoom::-webkit-slider-thumb,
.voice-setting-row input[type="range"]::-webkit-slider-thumb {
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 1rem;
@ -1049,14 +1055,16 @@ button.profile-action-btn.popup-btn-danger:hover, button.submit-button.popup-btn
transition: transform 0.2s, background 0.2s;
}
#cropper-zoom::-webkit-slider-thumb:hover,
.voice-setting-row input[type="range"]::-webkit-slider-thumb:hover {
transform: scale(1.2);
input[type="range"]::-webkit-slider-thumb:hover {
transform: scale(1.08);
background: #fff;
}
#cropper-zoom::-moz-range-thumb,
.voice-setting-row input[type="range"]::-moz-range-thumb {
input[type="range"]::-webkit-slider-thumb:active {
transform: scale(0.87);
}
input[type="range"]::-moz-range-thumb {
width: 1rem;
height: 1rem;
border-radius: 50%;
@ -1066,12 +1074,15 @@ button.profile-action-btn.popup-btn-danger:hover, button.submit-button.popup-btn
border: none;
}
#cropper-zoom::-moz-range-thumb:hover,
.voice-setting-row input[type="range"]::-moz-range-thumb:hover {
transform: scale(1.2);
input[type="range"]::-moz-range-thumb:hover {
transform: scale(1.08);
background: #fff;
}
input[type="range"]::-moz-range-thumb:active {
transform: scale(0.87);
}
roomcontent roomtopbar .room-action-pin,
roomcontent roomtopbar .room-action-call {
display: flex;
@ -1713,13 +1724,6 @@ input:checked + .toggle-slider:before {
display: flex;
justify-content: space-between;
}
.voice-setting-row input[type="range"] {
margin: 0;
width: 100%;
appearance: none;
-webkit-appearance: none;
outline: none;
}
/* In-call Voice Device Settings Popup */
#voice-device-settings {

View file

@ -774,7 +774,7 @@ space{
border-radius: 0.8rem;
transform: translateY(calc( ( var(--icon-button-height) + (var(--button-margin) * 2) ) / 2 - 0.6rem));
}
button:hover, input:hover, textarea:hover {
button:hover, input:not([type="range"]):hover, textarea:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.submit-button:hover, .profile-action-btn:hover {
@ -791,7 +791,11 @@ space{
filter: brightness(0.93);
}
}
button:active, button.is-pressed, input:active, input.is-pressed, textarea:active, textarea.is-pressed {
/* Suwaki ([type=range]) są wyłączone z efektu klikania całego pola -
przytrzymanie skaluje tylko uchwyt (patrz ::-webkit-slider-thumb:active). */
button:active, button.is-pressed,
input:not([type="range"]):active, input:not([type="range"]).is-pressed,
textarea:active, textarea.is-pressed {
background-color: rgba(255, 255, 255, 0.1);
transform: var(--press-scale);
}
@ -1021,15 +1025,18 @@ button.profile-action-btn.popup-btn-danger:hover, button.submit-button.popup-btn
height: auto;
}
/* Custom Zoom Slider Styling */
#cropper-zoom,
.voice-setting-row input[type="range"] {
input[type="range"] {
-webkit-appearance: none;
appearance: none;
display: block;
margin: 0;
padding: 0.4rem 0.05rem;
border: none;
width: 100%;
height: 0.375rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 0.1875rem;
border-radius: 0.34rem;
outline: none;
}
@ -1037,8 +1044,7 @@ button.profile-action-btn.popup-btn-danger:hover, button.submit-button.popup-btn
margin: 0.625rem 0;
}
#cropper-zoom::-webkit-slider-thumb,
.voice-setting-row input[type="range"]::-webkit-slider-thumb {
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 1rem;
@ -1049,14 +1055,16 @@ button.profile-action-btn.popup-btn-danger:hover, button.submit-button.popup-btn
transition: transform 0.2s, background 0.2s;
}
#cropper-zoom::-webkit-slider-thumb:hover,
.voice-setting-row input[type="range"]::-webkit-slider-thumb:hover {
transform: scale(1.2);
input[type="range"]::-webkit-slider-thumb:hover {
transform: scale(1.08);
background: #fff;
}
#cropper-zoom::-moz-range-thumb,
.voice-setting-row input[type="range"]::-moz-range-thumb {
input[type="range"]::-webkit-slider-thumb:active {
transform: scale(0.87);
}
input[type="range"]::-moz-range-thumb {
width: 1rem;
height: 1rem;
border-radius: 50%;
@ -1066,12 +1074,15 @@ button.profile-action-btn.popup-btn-danger:hover, button.submit-button.popup-btn
border: none;
}
#cropper-zoom::-moz-range-thumb:hover,
.voice-setting-row input[type="range"]::-moz-range-thumb:hover {
transform: scale(1.2);
input[type="range"]::-moz-range-thumb:hover {
transform: scale(1.08);
background: #fff;
}
input[type="range"]::-moz-range-thumb:active {
transform: scale(0.87);
}
roomcontent roomtopbar .room-action-pin,
roomcontent roomtopbar .room-action-call {
display: flex;
@ -1713,13 +1724,6 @@ input:checked + .toggle-slider:before {
display: flex;
justify-content: space-between;
}
.voice-setting-row input[type="range"] {
margin: 0;
width: 100%;
appearance: none;
-webkit-appearance: none;
outline: none;
}
/* In-call Voice Device Settings Popup */
#voice-device-settings {