0.2.0 - better sliders
This commit is contained in:
parent
1593a3a33a
commit
093498e168
2 changed files with 54 additions and 46 deletions
|
|
@ -774,7 +774,7 @@ space{
|
||||||
border-radius: 0.8rem;
|
border-radius: 0.8rem;
|
||||||
transform: translateY(calc( ( var(--icon-button-height) + (var(--button-margin) * 2) ) / 2 - 0.6rem));
|
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);
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
}
|
}
|
||||||
.submit-button:hover, .profile-action-btn:hover {
|
.submit-button:hover, .profile-action-btn:hover {
|
||||||
|
|
@ -791,7 +791,11 @@ space{
|
||||||
filter: brightness(0.93);
|
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);
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
transform: var(--press-scale);
|
transform: var(--press-scale);
|
||||||
}
|
}
|
||||||
|
|
@ -1021,15 +1025,18 @@ button.profile-action-btn.popup-btn-danger:hover, button.submit-button.popup-btn
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Custom Zoom Slider Styling */
|
|
||||||
#cropper-zoom,
|
input[type="range"] {
|
||||||
.voice-setting-row input[type="range"] {
|
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
|
display: block;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.4rem 0.05rem;
|
||||||
|
border: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 0.375rem;
|
height: 0.375rem;
|
||||||
background: rgba(255, 255, 255, 0.1);
|
background: rgba(255, 255, 255, 0.1);
|
||||||
border-radius: 0.1875rem;
|
border-radius: 0.34rem;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1037,8 +1044,7 @@ button.profile-action-btn.popup-btn-danger:hover, button.submit-button.popup-btn
|
||||||
margin: 0.625rem 0;
|
margin: 0.625rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#cropper-zoom::-webkit-slider-thumb,
|
input[type="range"]::-webkit-slider-thumb {
|
||||||
.voice-setting-row input[type="range"]::-webkit-slider-thumb {
|
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
width: 1rem;
|
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;
|
transition: transform 0.2s, background 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
#cropper-zoom::-webkit-slider-thumb:hover,
|
input[type="range"]::-webkit-slider-thumb:hover {
|
||||||
.voice-setting-row input[type="range"]::-webkit-slider-thumb:hover {
|
transform: scale(1.08);
|
||||||
transform: scale(1.2);
|
|
||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
#cropper-zoom::-moz-range-thumb,
|
input[type="range"]::-webkit-slider-thumb:active {
|
||||||
.voice-setting-row input[type="range"]::-moz-range-thumb {
|
transform: scale(0.87);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="range"]::-moz-range-thumb {
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
|
@ -1066,12 +1074,15 @@ button.profile-action-btn.popup-btn-danger:hover, button.submit-button.popup-btn
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#cropper-zoom::-moz-range-thumb:hover,
|
input[type="range"]::-moz-range-thumb:hover {
|
||||||
.voice-setting-row input[type="range"]::-moz-range-thumb:hover {
|
transform: scale(1.08);
|
||||||
transform: scale(1.2);
|
|
||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
input[type="range"]::-moz-range-thumb:active {
|
||||||
|
transform: scale(0.87);
|
||||||
|
}
|
||||||
|
|
||||||
roomcontent roomtopbar .room-action-pin,
|
roomcontent roomtopbar .room-action-pin,
|
||||||
roomcontent roomtopbar .room-action-call {
|
roomcontent roomtopbar .room-action-call {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -1713,13 +1724,6 @@ input:checked + .toggle-slider:before {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
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 */
|
/* In-call Voice Device Settings Popup */
|
||||||
#voice-device-settings {
|
#voice-device-settings {
|
||||||
|
|
|
||||||
|
|
@ -774,7 +774,7 @@ space{
|
||||||
border-radius: 0.8rem;
|
border-radius: 0.8rem;
|
||||||
transform: translateY(calc( ( var(--icon-button-height) + (var(--button-margin) * 2) ) / 2 - 0.6rem));
|
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);
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
}
|
}
|
||||||
.submit-button:hover, .profile-action-btn:hover {
|
.submit-button:hover, .profile-action-btn:hover {
|
||||||
|
|
@ -791,7 +791,11 @@ space{
|
||||||
filter: brightness(0.93);
|
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);
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
transform: var(--press-scale);
|
transform: var(--press-scale);
|
||||||
}
|
}
|
||||||
|
|
@ -1021,15 +1025,18 @@ button.profile-action-btn.popup-btn-danger:hover, button.submit-button.popup-btn
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Custom Zoom Slider Styling */
|
|
||||||
#cropper-zoom,
|
input[type="range"] {
|
||||||
.voice-setting-row input[type="range"] {
|
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
|
display: block;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.4rem 0.05rem;
|
||||||
|
border: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 0.375rem;
|
height: 0.375rem;
|
||||||
background: rgba(255, 255, 255, 0.1);
|
background: rgba(255, 255, 255, 0.1);
|
||||||
border-radius: 0.1875rem;
|
border-radius: 0.34rem;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1037,8 +1044,7 @@ button.profile-action-btn.popup-btn-danger:hover, button.submit-button.popup-btn
|
||||||
margin: 0.625rem 0;
|
margin: 0.625rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#cropper-zoom::-webkit-slider-thumb,
|
input[type="range"]::-webkit-slider-thumb {
|
||||||
.voice-setting-row input[type="range"]::-webkit-slider-thumb {
|
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
width: 1rem;
|
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;
|
transition: transform 0.2s, background 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
#cropper-zoom::-webkit-slider-thumb:hover,
|
input[type="range"]::-webkit-slider-thumb:hover {
|
||||||
.voice-setting-row input[type="range"]::-webkit-slider-thumb:hover {
|
transform: scale(1.08);
|
||||||
transform: scale(1.2);
|
|
||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
#cropper-zoom::-moz-range-thumb,
|
input[type="range"]::-webkit-slider-thumb:active {
|
||||||
.voice-setting-row input[type="range"]::-moz-range-thumb {
|
transform: scale(0.87);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="range"]::-moz-range-thumb {
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
|
@ -1066,12 +1074,15 @@ button.profile-action-btn.popup-btn-danger:hover, button.submit-button.popup-btn
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#cropper-zoom::-moz-range-thumb:hover,
|
input[type="range"]::-moz-range-thumb:hover {
|
||||||
.voice-setting-row input[type="range"]::-moz-range-thumb:hover {
|
transform: scale(1.08);
|
||||||
transform: scale(1.2);
|
|
||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
input[type="range"]::-moz-range-thumb:active {
|
||||||
|
transform: scale(0.87);
|
||||||
|
}
|
||||||
|
|
||||||
roomcontent roomtopbar .room-action-pin,
|
roomcontent roomtopbar .room-action-pin,
|
||||||
roomcontent roomtopbar .room-action-call {
|
roomcontent roomtopbar .room-action-call {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -1713,13 +1724,6 @@ input:checked + .toggle-slider:before {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
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 */
|
/* In-call Voice Device Settings Popup */
|
||||||
#voice-device-settings {
|
#voice-device-settings {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue