style.css 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378
  1. body {
  2. background-color: #eee;
  3. border: 0;
  4. margin: 0;
  5. font: 1.1em tahoma, arial, sans-serif;
  6. }
  7. a {
  8. color: darkblue;
  9. transition: color .2s ease-out;
  10. text-decoration: none
  11. }
  12. a:hover {
  13. color: red;
  14. }
  15. input {
  16. font: 1.1em tahoma, arial, sans-serif;
  17. }
  18. input:focus,
  19. select:focus,
  20. textarea:focus,
  21. button:focus {
  22. outline: none;
  23. }
  24. input[type="button"] {
  25. width: 100px;
  26. padding: 5px;
  27. text-align: center;
  28. display: block;
  29. }
  30. p {
  31. padding: 10px;
  32. }
  33. #credits {
  34. display: none;
  35. }
  36. #app {} #app-wrap {} #disconnect {
  37. width: 150px;
  38. }
  39. .diag-box {
  40. position: absolute;
  41. top: 0;
  42. left: 0;
  43. bottom: 0;
  44. right: 0;
  45. height: 100%;
  46. width: 100%;
  47. display: none;
  48. }
  49. .diag-box-win {
  50. position: absolute;
  51. left: 10%;
  52. width: 80%;
  53. text-align: center;
  54. border: 2px outset #888;
  55. background-color: #fff;
  56. border-radius: 10px;
  57. top: 20%;
  58. }
  59. .blur {
  60. -webkit-filter: blur(2px);
  61. -moz-filter: blur(2px);
  62. -ms-filter: blur(2px);
  63. -o-filter: blur(2px);
  64. filter: blur(2px);
  65. }
  66. .ape {
  67. margin-left: 20px;
  68. padding: 10px 0px 10px 10px;
  69. }
  70. .ape:hover {
  71. cursor: pointer;
  72. }
  73. .brdb {
  74. border-bottom: 1px solid #888;
  75. }
  76. header {
  77. background-color: #fff;
  78. border-bottom: 1px solid #888;
  79. border-top: 1px solid #888;
  80. }
  81. section {
  82. background-color: #fff;
  83. border-bottom: 1px solid #888;
  84. border-top: 1px solid #888;
  85. }
  86. h1 {
  87. display: block;
  88. text-align: center;
  89. margin: 0;
  90. padding: 15px;
  91. font-size: 1.4em
  92. }
  93. h2 {
  94. margin: 0;
  95. margin-top: 20px;
  96. padding: 10px;
  97. text-transform: uppercase;
  98. color: #888;
  99. font-size: 1.0em
  100. }
  101. h3 {
  102. margin: 0;
  103. text-align: center;
  104. padding: 20px 0px 20px 0px;
  105. }
  106. .gr {
  107. color: green;
  108. }
  109. .rd {
  110. color: red;
  111. }
  112. #wifi-status {
  113. display: none;
  114. }
  115. #connect {
  116. display: none;
  117. }
  118. #connect_manual {
  119. display: none;
  120. }
  121. #manual_ssid {
  122. border: none;
  123. width: 80%;
  124. margin-left: 35px;
  125. padding: 10px 0px 10px 10px;
  126. display: block
  127. }
  128. #manual_pwd {
  129. border: none;
  130. width: 80%;
  131. margin-left: 35px;
  132. padding: 10px 0px 10px 10px;
  133. display: block
  134. }
  135. #pwd {
  136. border: none;
  137. width: 80%;
  138. margin-left: 35px;
  139. padding: 10px 0px 10px 10px;
  140. display: block
  141. }
  142. .buttons {
  143. padding: 15px;
  144. }
  145. #join {
  146. float: right;
  147. }
  148. #manual_join {
  149. float: right;
  150. }
  151. #yes-disconnect {
  152. display: inline-block;
  153. margin-left: 20px;
  154. }
  155. #no-disconnect {
  156. display: inline-block;
  157. }
  158. .ctr {
  159. margin: 0 auto;
  160. }
  161. .tctr {
  162. text-align: center;
  163. }
  164. #connect-wait {
  165. display: none;
  166. }
  167. #connect-success {
  168. display: none;
  169. }
  170. #connect-fail {
  171. display: none;
  172. }
  173. #connect-details {
  174. display: none;
  175. }
  176. .fr {
  177. float: right;
  178. margin-right: 20px;
  179. }
  180. .w0 {
  181. background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTJDBGvsAAABzUlEQVRIS+WUTShEURTH3zyRhjQ+8hWxmCJMoSzEwsbCgi1LZRYW9pONptiwka9iI81CWFpYaEqNMkVKmpWN1IhYKN9ZDL/z3p3mxZh5g9X4168799xz/vPefedeLeuVC+3gdTgc07CsmCQ2DI2gg21Jci30wSpGt/CeghickTsHPVACDkgqp67rPgpO4E0ZZMIj7OHhxSvPtEyomcVDeFXJv+EZNvEsNa01rZfAuSUhThR2wU+ObJkbyhRNMMDaDIThBqy1MdZ3wAPawqfFC2Lj0Ab5kpBGxdAJs9TeW72ITUhCPZMjFYwwbwXpnkwlDzOIx50yXwP5c0MeggHGanNqSDqqBqQ7/Kxvg2zHAfMN8IE8uZhYO6eBnBXGKnOakLWfaQZ9jMRjSPXhZUuC5A9JjVFpKkeNSVVA0Tq8KJN0yFl4gilqbW2tm+SQKoybXIG8jcT34RSsh1Byt6iVg2ZLlRCg6JpROqEDpFheXZ5S9rcLFsl5YJwHad+MVA5y13w5lRY5oRsKjdm/Vz/7LR86zG+5wr+9NX+iOowjEO+aELEic+lv1ILppeUPosRst6QduTANgnE2mC+BnYswI1VwfYzCCL9dZij7pWkf6UeSTYAuE/QAAAAASUVORK5CYII=') no-repeat right top;
  182. height: 24px;
  183. margin-right: 20px;
  184. }
  185. .w1 {
  186. background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEQAACxEBf2RfkQAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4xNkRpr/UAAAHiSURBVEhL5dRPKINxHMfxPVskpA35F3FYEVasHBYHFwcHrhyVZ8vBfblIceEi/4qLtINwdHCQUpQVKcnJRYqIg/J3OYz399nv0YPNtuzEt149+31/v+/n4fGYLVHpup4Rnyregd+K27TIghe63+8fx7wySqsPdbAj3qzha0MOV6ETiwTd4u0HUZxydgrtKISGj0xreG4gEAgycIRXFZCOR2yTQZSebeaa4Q1s7iOiDv/GM1bJLDJv0EHjzHLAdIFNjHBGHpkbxUo9utmbQBg3sM5G2d+AR24w82XznN4QmpGjXrCExRkXfJhk9t6aRW9YDtSwOFDNE9ZNyFLzKRczOegh406FL8ElG8JDM8S1Qtaq7KhEO0Y0TVtHGHusVxCEDy5oMLNqyVrgWm5kqaYw3mdVdmqQsENE8JbAPbY43yszMqiyHOr66QayL5XH0DJeVEgyUTxhjNmPR/vtBpZyc3hHDZohV5DfRvq7OMYtrDdZY7YwFpG8yhBi6JrrMFogww7IT1mOVsxy5oHrNIqRVpWgDtnGKn7log35xurfVxfPW/7QYT57Ybz7mapqgk9gvjU79ApiW5mpRkIvLTe4oJfyK5lKOQndgvG/wXoOSb8I061Svj4G0M9nZ6z198tmeweYtIrMYP17VAAAAABJRU5ErkJggg==') no-repeat right top;
  187. height: 24px;
  188. margin-right: 20px;
  189. }
  190. .w2 {
  191. background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEQAACxEBf2RfkQAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4xNkRpr/UAAAHkSURBVEhL3dRLKERRGMDxuSPSkLzyilgo8iiUhVjYWFiwZancmSzsZSPFho28io1kISwtLKQURZGSrGykiFgo7yyG/zdzznRm5iK5Sk79uvd85/u++5hzx2Pb9q9yDLrJMWhIRB1sv98/ghlliFAXyuGFU21IbECSi9CKORrd4O0TQZyQO45mZMJCpKfZ3BcIBPooOMSravAdD9ikB63sJN1XN69kcQ8vKvknnrBMzyx9gRYCp0aCdo51DJIjr6wU2UoF2lkbxS6uYdYGWV9DtVxgMmbxjFg/apEM/ZQfyUADxqi9M3sRG5CEEib7KnjMvAaye2IbfUVupoMet6r5PDL0YjXBBY4Fai5kRxVCdscg66uQ17HDfAl9kDuXJzB3Thk5sxzzZa6DumHknN3QS+IBPvvh5ZVskN8ZU5+gz3XAlELRIp5Vk6/It/CIYWrjXm3URCkleUsV6iaXkKeR+DaOYH6EkrtCrXxoUf2iJoY8LFB0xXEA9ZBieXS5S3m/jZgi557jBGT7xvWKCxhyIP81ka/SgQ9NSDViURyDbvpTo82yrAPscl4HKxR1aRTT+BhvyhaxtPCSO6OKphfGBc6JZYaX3BnpNN1AUC7AfBrJoRUXR67X6+1BN+fp4dD/Hx7PO4o9VGuAapKIAAAAAElFTkSuQmCC') no-repeat right top;
  192. height: 24px;
  193. margin-right: 20px;
  194. }
  195. .w3 {
  196. background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAACAElEQVRIS7XUP0gbYRjH8VSpiBZJWvEflXYQKtqACg6ig4uDg651LPQSHLpLlyDoUhdpVdBFxEG0YwcHCQgRFJSCFKcuUohY6iC0VYtD9PuE9w3vXZ74h16HD3fv733e53KX9y7ied5/pYZhUkPHQ3TBSyQS7zFvTBC9RivKoK3NCwZS3IxBLNLoBFc3yOEbtR/Qj8d4gEJPt3lVMpkcY8E+Lk2D+/iDTXrQyquwfW3zdiZ38dcU/4tzrNHzib3AAMGhU2BlsYFxauSRtaDWaMMwc1PYwU+4a3PMryMuF5gJTH4ne4dOVMLeZSkx9GCatb/cXmQpKXjOYM+EB4w7ILsn2Og28mNe0ePUNF9CzE7GCZc5NpmxkB31FLI7xpn/DHkc24xXMQb55XIH7s55Qc0Cx0YZ29A2LJyzG95S+AU3/fHySNLUjwTWl9tzG7iqWbSCC9PkNvIunGGStUWP1jcwWijOmIW2yTHkbiTfwle4L6HUfmKtvGi+fr6BowHLLPrBMYVuyGK5dfmV8nx7MUvNb44fIdu3qFdR4KiDfGsKb6WiCn145GQ+ahgmNQyTGpYwxPOWP3qHc/mE+76apaih4hmND2B3TYasJlCjUkPFS5oeORfIkhVtSY0aKqI0TSP/bjCew10+hPf6D+r5fIziDefRwFxJahgmNQyPF7kGEsc1es+A2E4AAAAASUVORK5CYII=') no-repeat right top;
  197. height: 24px;
  198. margin-right: 20px;
  199. }
  200. .pw {
  201. background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTJDBGvsAAABIUlEQVRIS+3VsU7CUBTGcYhBJCwqwcmEJ2DkCQgzb8ADmLgYWXTzMVjcGNjYGEAXgoSRhTg5OroYIyFY/h+hWGwvtzQ0LpzkF8i5l/uRQ2kTjuPEKrC5T79vzHWJO4wxwzeGuMY5AitsQBFvmEObvNQboQBfhQk4gQ5wD+zgBrcYrHrSwzE2KkxAHVrQWB6QgiqJLB7xA+2pYaNsAWm8QAsa0Sn+1gU+oT1NHGFdtoAcJtBCSw1DuaPqQiNdly0gj1doQaMwleavPc+IJUDffKeADO7Rxxe08A4dEOQD2qPXJ1xh+VuYAirQVaNGFFPov2MM0OXm/UAUZRwCtjoEWP1vQBXuLTgKPYRKMAacoY0oIboDNLB8+PgC4hLY3B8nsQCQEf56jLJoQAAAAABJRU5ErkJggg==') no-repeat right top;
  202. height: 24px;
  203. margin-right: 20px;
  204. height: 24px;
  205. margin-right: 30px;
  206. }
  207. /* SpinKit is licensed under the MIT License. Copyright (c) 2015 Tobias Ahlin */
  208. .spinner {
  209. width: 40px;
  210. height: 40px;
  211. position: relative;
  212. margin: 100px auto;
  213. }
  214. .double-bounce1,
  215. .double-bounce2 {
  216. width: 100%;
  217. height: 100%;
  218. border-radius: 50%;
  219. background-color: #333;
  220. opacity: 0.6;
  221. position: absolute;
  222. top: 0;
  223. left: 0;
  224. -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  225. animation: sk-bounce 2.0s infinite ease-in-out;
  226. }
  227. .double-bounce2 {
  228. -webkit-animation-delay: -1.0s;
  229. animation-delay: -1.0s;
  230. }
  231. @-webkit-keyframes sk-bounce {
  232. 0%, 100% {
  233. -webkit-transform: scale(0.0)
  234. }
  235. 50% {
  236. -webkit-transform: scale(1.0)
  237. }
  238. }
  239. @keyframes sk-bounce {
  240. 0%, 100% {
  241. transform: scale(0.0);
  242. -webkit-transform: scale(0.0);
  243. }
  244. 50% {
  245. transform: scale(1.0);
  246. -webkit-transform: scale(1.0);
  247. }
  248. }
  249. /* end of SpinKit */
  250. .toggle label {
  251. position: relative;
  252. display: inline-block;
  253. height: 3.5em;
  254. }
  255. .toggle input {
  256. display: none;
  257. }
  258. .toggle .slider {
  259. /* Grundfläche */
  260. position: absolute;
  261. cursor: pointer;
  262. top: 1.5em;
  263. left: 8px;
  264. width: 4em;
  265. height: 2em;
  266. background-color: #c32e04;
  267. /* red */
  268. transition: all .3s ease-in-out;
  269. border-radius: 1em;
  270. }
  271. .toggle .slider:before {
  272. /* verschiebbarer Button */
  273. position: absolute;
  274. content: "";
  275. height: 1.6em;
  276. width: 1.6em;
  277. left: 0.2em;
  278. bottom: 0.2em;
  279. background-color: white;
  280. border-radius: 50%;
  281. transition: all .3s ease-in-out;
  282. }
  283. .toggle input:checked + .slider {
  284. background-color: #5a9900;
  285. /* green */
  286. }
  287. .toggle input:focus + .slider {
  288. background-color: pink;
  289. box-shadow: 0 0 1px #5a9900;
  290. }
  291. .toggle input:checked + .slider:before {
  292. -webkit-transform: translateX(1.9em);
  293. /* Android 4 */
  294. -ms-transform: translateX(1.9em);
  295. /* IE9 */
  296. transform: translateX(1.9em);
  297. }
  298. .text .slider:after {
  299. /* Text vor dem FlipFlop-Schalter */
  300. position: absolute;
  301. content: "AUS";
  302. color: #c32e04;
  303. font-weight: bold;
  304. height: 1.6em;
  305. left: -2.5em;
  306. bottom: 0.2em;
  307. }
  308. .text input:checked + .slider:after {
  309. /* Text hinter dem FlipFlop-Schalter */
  310. position: absolute;
  311. content: "AN";
  312. color: #5a9900;
  313. left: 4.5em;
  314. }
  315. input#autoexec1 {
  316. border: none;
  317. margin-left: 35px;
  318. padding: 10px 0px 10px 10px;
  319. }
  320. input#ota {
  321. margin-top: 5px;
  322. margin-bottom: 5px;
  323. }
  324. #otadiv {
  325. margin-bottom: 15px;
  326. }
  327. #btsink, #player, #optional {
  328. margin-left: 13px;
  329. }
  330. #btsinkdiv {
  331. display: none;
  332. margin-top: 20px;
  333. }
  334. textarea#autoexec1 {
  335. width: 100%;
  336. }
  337. .toggle-buttons input[type="radio"] {
  338. visibility: hidden;
  339. width: 3px;
  340. margin-top: 10px;
  341. }
  342. .toggle-buttons label {
  343. border: 1px solid #000;
  344. border-radius: 0.5em;
  345. padding: 0.5em;
  346. }
  347. .toggle-buttons input:checked + label {
  348. background: #5a9900;
  349. box-shadow: none;
  350. }