new button styles

This commit is contained in:
Karl Hudgell 2019-07-16 16:58:29 +01:00
parent 50ff77fba6
commit cfc1d86253
2 changed files with 45 additions and 22 deletions

View File

@ -37,23 +37,47 @@ body {
} }
.button-off { .button-off {
height: 50px; background-color:#fc0000;
line-height: 50px; -moz-border-radius:28px;
width: 100%; -webkit-border-radius:28px;
text-decoration: none; border-radius:28px;
text-align: center; border:1px solid #000000;
font-size: 20px; display:inline-block;
box-shadow: 1px 1px black; cursor:pointer;
color: red color:#ffffff;
font-family:Arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #000000;
}
.button-off:hover {
background-color:red;
}
.button-off:active {
position:relative;
top:1px;
} }
.button-on { .button-on {
height: 50px; background-color:#44c767;
line-height: 50px; -moz-border-radius:28px;
width: 100%; -webkit-border-radius:28px;
text-decoration: none; border-radius:28px;
text-align: center; border:1px solid black;
font-size: 20px; display:inline-block;
box-shadow: 1px 1px black; cursor:pointer;
color: green; color:#ffffff;
font-family:Arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
} }
.button-on:hover {
background-color:#5cbf2a;
}
.button-on:active {
position:relative;
top:1px;
}

View File

@ -8,10 +8,9 @@ block content
| #{socket.name} | #{socket.name}
h2.socket-name h2.socket-name
| #{socket.uid} | #{socket.uid}
h2.socket-name if socket.state === 'OFF'
if socket.state === 1
a.button-on(href=`/?uid=${socket.uid}`)
| #{socket.state}
else
a.button-off(href=`/?uid=${socket.uid}`) a.button-off(href=`/?uid=${socket.uid}`)
| #{socket.state} | #{socket.state}
else
a.button-on(href=`/?uid=${socket.uid}`)
| #{socket.state}