diff --git a/assets/speaker.png b/assets/speaker.png new file mode 100644 index 0000000..3604994 Binary files /dev/null and b/assets/speaker.png differ diff --git a/index.css b/index.css index 663ecb9..ed60b1f 100644 --- a/index.css +++ b/index.css @@ -132,8 +132,8 @@ td { .switch { position: relative; display: inline-block; - width: 64px; - height: 38px; + width: 128px; + height: 128px; } /* Hide default HTML checkbox */ @@ -151,42 +151,18 @@ td { left: 0; right: 0; bottom: 0; - background-color: #ccc; - -webkit-transition: .4s; - transition: .4s; - } - - .slider:before { - position: absolute; - content: ""; - height: 30px; - width: 30px; - left: 4px; - bottom: 4px; - background-color: white; + width: 128px; + height: 128px; + background-color: red; + background-image: url("assets/speaker.png"); -webkit-transition: .4s; transition: .4s; } input:checked + .slider { - background-color: #2196F3; + background-color: #00FF00 !important; } input:focus + .slider { - box-shadow: 0 0 1px #2196F3; - } - - input:checked + .slider:before { - -webkit-transform: translateX(26px); - -ms-transform: translateX(26px); - transform: translateX(26px); - } - - /* Rounded sliders */ - .slider.round { - border-radius: 38px; - } - - .slider.round:before { - border-radius: 50%; - } \ No newline at end of file + box-shadow: 0 0 1px #00FF00 !important; + } \ No newline at end of file diff --git a/index.html b/index.html index ccd5461..fb2552b 100644 --- a/index.html +++ b/index.html @@ -73,7 +73,7 @@