ESP8266 Treppenlichtsteuerung mit OTA zum Firmware Upload
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

style.css 3.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. html {
  2. font-size: 16px;
  3. font-family: sans-serif, Arial, Helvetica;
  4. background-color: #d4d4d4;
  5. }
  6. .topbar {
  7. padding: 1em;
  8. background-color: #1f1f1f;
  9. color: white;
  10. font-size: x-large;
  11. text-align: center;
  12. }
  13. .control {
  14. padding: 1em;
  15. }
  16. .ueberschrift{
  17. color: #ffffff;
  18. font-size: 50px;
  19. width: 40%;
  20. background-color: #5f5f5f;
  21. }
  22. .testregler{
  23. -webkit-appearance: none;
  24. height: 30px;
  25. width: 98%;
  26. border-radius: 20px;
  27. outline: black;
  28. background-color: rgb(176, 188, 228);
  29. }
  30. .testregler::-webkit-slider-thumb{
  31. -webkit-appearance: none;
  32. appearance: none;
  33. width: 5%;
  34. height: 20px;
  35. border-radius: 10px;
  36. background-color: rgb(107, 122, 192);
  37. cursor:pointer;
  38. }
  39. input[type=range]::-webkit-slider-thumb{
  40. -webkit-appearance: none;
  41. border:none;
  42. height: 30px;
  43. width: 4%;
  44. border-radius: 30px;
  45. }
  46. .kopfzeile{
  47. color: #1f1f1f;
  48. font-size: 50px;
  49. width: 100%;
  50. background-color: #8d8a8a;
  51. }
  52. p, li {
  53. font-size: 16px;
  54. line-height: 2;
  55. letter-spacing: 1px;
  56. }
  57. body {
  58. margin: 0 auto;
  59. border: none;
  60. border-radius: 3;
  61. }
  62. /* The switch - the box around the slider */
  63. .switch {
  64. position: relative;
  65. display: inline-block;
  66. width: 60px;
  67. height: 34px;
  68. }
  69. /* Hide default HTML checkbox */
  70. .switch input {
  71. opacity: 0;
  72. width: 0;
  73. height: 0;
  74. }
  75. /* The slider */
  76. .slider {
  77. width: 100%;
  78. }
  79. /*.slider:before {
  80. position: absolute;
  81. content: "";
  82. height: 26px;
  83. width: 26px;
  84. left: 4px;
  85. bottom: 4px;
  86. background-color: white;
  87. -webkit-transition: .4s;
  88. transition: .4s;
  89. }*/
  90. input:checked + .slider {
  91. background-color: #04AA6D;
  92. }
  93. input:focus + .slider {
  94. box-shadow: 0 0 1px #04AA6D;
  95. }
  96. input:checked + .slider:before {
  97. -webkit-transform: translateX(26px);
  98. -ms-transform: translateX(26px);
  99. transform: translateX(26px);
  100. }
  101. /* Rounded sliders */
  102. .slider.round {
  103. border-radius: 34px;
  104. }
  105. .slider.round:before {
  106. border-radius: 50%;
  107. }
  108. /* The slider itself */
  109. .rangeslider {
  110. -webkit-appearance: none; /* Override default CSS styles */
  111. appearance: none;
  112. width: 50%; /* Full-width */
  113. height: 34px; /* Specified height */
  114. border-radius: 34px; /* range round corners */
  115. background: #d3d3d3; /* Grey background */
  116. outline: none; /* Remove outline */
  117. opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  118. -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  119. transition: opacity .2s;
  120. }
  121. /* Mouse-over effects */
  122. .rangeslider:hover {
  123. opacity: 1; /* Fully shown on mouse-over */
  124. }
  125. /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
  126. .rangeslider::-webkit-slider-thumb {
  127. -webkit-appearance: none; /* Override default look */
  128. appearance: none;
  129. width: 26px; /* Set a specific slider handle width */
  130. height: 26px; /* Slider handle height */
  131. border-radius: 50%; /* Round Element */
  132. background: #04AA6D; /* Green background */
  133. cursor: pointer; /* Cursor on hover */
  134. }
  135. .rangeslider::-moz-range-thumb {
  136. width: 26px; /* Set a specific slider handle width */
  137. height: 26px; /* Slider handle height */
  138. background: #04AA6D; /* Green background */
  139. cursor: pointer; /* Cursor on hover */
  140. }