Browse Source

Html Änderung

tags/LEDFlickr
Pupsmuckel 3 years ago
parent
commit
bb3a735d37
2 changed files with 19 additions and 45 deletions
  1. 3
    2
      data/index.html
  2. 16
    43
      data/style.css

+ 3
- 2
data/index.html View File

<div class="slider"> <div class="slider">
<input type="range" class="regler" value="50" min="1" max="100" <input type="range" class="regler" value="50" min="1" max="100"
oninput="this.nextElementSibling.value = this.value"> oninput="this.nextElementSibling.value = this.value">

<output>50</output> <output>50</output>
</div> </div>
</div> </div>
<div class="ueberschrift"> <div class="ueberschrift">
Helligkeit bei Dunkelheit Helligkeit bei Dunkelheit
<!--<label id="label_geschwindigkeit">
<!--<label id="label_pwm_dark">
</label>--> </label>-->
<div class="slider"> <div class="slider">
<input type="range" class="regler" value="50" min="1" max="100" <input type="range" class="regler" value="50" min="1" max="100"


<div class="ueberschrift"> <div class="ueberschrift">
Licht-An-Zeit Licht-An-Zeit
<!-- <label id="label_geschwindigkeit">
<!-- <label id="label_time">
</label>--> </label>-->
<div class="slider"> <div class="slider">
<input type="range" class="regler" value="50" min="1" max="100" <input type="range" class="regler" value="50" min="1" max="100"

+ 16
- 43
data/style.css View File

font-size: 16px; font-size: 16px;
font-family: sans-serif, Arial, Helvetica; font-family: sans-serif, Arial, Helvetica;
background-color: #d4d4d4; background-color: #d4d4d4;
height: 100%;
background-image: url('Background.png');
background-repeat: no-repeat;
background-size: 150% 150%;
} }


.topbar { .topbar {
padding: 1em; padding: 1em;
background-color: #1f1f1f; background-color: #1f1f1f;

color: white; color: white;
font-size: x-large; font-size: x-large;
text-align: center; text-align: center;
} }


.control {
padding: 1em;
}

.ueberschrift{ .ueberschrift{
color: #ffffff; color: #ffffff;
font-size: 50px; font-size: 50px;
width: 100%; width: 100%;

text-align: center; text-align: center;
} }


width: 4%; width: 4%;
border-radius: 30px; border-radius: 30px;
} }
.slider {
width: 100%;
}


.kopfzeile{ .kopfzeile{
color: #1f1f1f; color: #1f1f1f;
font-size: 50px; font-size: 50px;
width: 100%; width: 100%;
background-color: #8d8a8a; background-color: #8d8a8a;

} }
p, li {
font-size: 16px;
line-height: 2;
letter-spacing: 1px;
}



body { body {
height: 100%;
margin: 0 auto; margin: 0 auto;
border: none; border: none;
border-radius: 3; border-radius: 3;
background-image: url('Background.png');
background-repeat: no-repeat;
background-size: 100% 100%;
} }




/*-------------------------------------------------------*/


/* The switch - the box around the slider */

/*Switch:
.switch { .switch {
position: relative; position: relative;
display: inline-block; display: inline-block;
height: 34px; height: 34px;
} }


/* Hide default HTML checkbox */
Hide default HTML checkbox
.switch input { .switch input {
opacity: 0; opacity: 0;
width: 0; width: 0;
height: 0; height: 0;
} }
*/
/* The slider */ /* The slider */
.slider {
width: 100%;
}


/*.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}*/


input:checked + .slider {
/*input:checked + .slider {
background-color: #04AA6D; background-color: #04AA6D;
} }


input:focus + .slider { input:focus + .slider {
box-shadow: 0 0 1px #04AA6D; box-shadow: 0 0 1px #04AA6D;
}
}*/
/*
input:checked + .slider:before { input:checked + .slider:before {
-webkit-transform: translateX(26px); -webkit-transform: translateX(26px);
-ms-transform: translateX(26px); -ms-transform: translateX(26px);
transform: translateX(26px); transform: translateX(26px);
} }
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}



Loading…
Cancel
Save