Hallo zusammen,
vielleicht kann's ja mal jemand brauchen: Ich habe mir einen rechteckigen Retro-Taster mit visuellem "Druck"-Effekt gebastelt.
Eintrag in die fhem-tablet-ui-user.css:
.pushbutton {
width: 50px !important;
height: 30px !important;
font-size: 7px !important;
margin-left: 3.5em !important;
margin-top: 7em !important;
background: radial-gradient(circle, white, #F1D8A6);
border: solid;
border-style: ridge;
border-radius: 3px;
border-width: 3px;
box-shadow: 0 5px #999;
}
.pushbutton:active {
background-color: red;
box-shadow: 0 5px #666;
transform: translateY(3px);
}
Code auf der Seite (z.B., wichtig ist class="pushbutton"):
<div data-type="switch"
data-device="player"
data-get="volume"
data-states='["muted","!muted"]'
data-set-states='["mute","mute"]'
data-background-icons='["none","none"]'
data-icons='["oa-audio_volume_mute","oa-audio_volume_mute"]'
data-colors='["red","gray"]'
class="pushbutton">
</div>
Grüße
Martin