diff --git a/data/Background.png b/data/Background.png new file mode 100644 index 0000000..9d8f919 Binary files /dev/null and b/data/Background.png differ diff --git a/data/style.css b/data/style.css index b7e60a8..c777f25 100644 --- a/data/style.css +++ b/data/style.css @@ -21,8 +21,7 @@ html { color: #ffffff; font-size: 50px; width: 100%; - background-color: #5f5f5f; - opacity: 0.2; + text-align: center; } @@ -69,6 +68,9 @@ body { margin: 0 auto; border: none; border-radius: 3; + background-image: url('Background.png'); + background-repeat: no-repeat; + background-size: 100% 100%; } @@ -126,38 +128,3 @@ input:checked + .slider:before { border-radius: 50%; } - -/* The slider itself */ -.rangeslider { - -webkit-appearance: none; /* Override default CSS styles */ - appearance: none; - width: 50%; /* Full-width */ - height: 34px; /* Specified height */ - border-radius: 34px; /* range round corners */ - background: #d3d3d3; /* Grey background */ - outline: none; /* Remove outline */ - opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */ - -webkit-transition: .2s; /* 0.2 seconds transition on hover */ - transition: opacity .2s; - -} -/* Mouse-over effects */ -.rangeslider:hover { - opacity: 1; /* Fully shown on mouse-over */ -} -/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ -.rangeslider::-webkit-slider-thumb { - -webkit-appearance: none; /* Override default look */ - appearance: none; - width: 26px; /* Set a specific slider handle width */ - height: 26px; /* Slider handle height */ - border-radius: 50%; /* Round Element */ - background: #04AA6D; /* Green background */ - cursor: pointer; /* Cursor on hover */ -} -.rangeslider::-moz-range-thumb { - width: 26px; /* Set a specific slider handle width */ - height: 26px; /* Slider handle height */ - background: #04AA6D; /* Green background */ - cursor: pointer; /* Cursor on hover */ -}