Fork of the espurna firmware for `mhsw` switches
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.

496 lines
9.3 KiB

6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
  1. /* -----------------------------------------------------------------------------
  2. General
  3. -------------------------------------------------------------------------- */
  4. #menu .pure-menu-heading {
  5. font-size: 100%;
  6. padding: .5em .5em;
  7. white-space: normal;
  8. text-transform: initial;
  9. }
  10. .pure-g {
  11. margin-bottom: 0;
  12. }
  13. .pure-form legend {
  14. font-weight: bold;
  15. letter-spacing: 0;
  16. margin: 10px 0 1em 0;
  17. }
  18. .pure-form .pure-g > label {
  19. margin: .4em 0 .2em;
  20. }
  21. .pure-form input {
  22. margin-bottom: 10px;
  23. }
  24. .pure-form input[type=text][disabled] {
  25. color: #777777;
  26. }
  27. @media screen and (max-width: 32em) {
  28. .header > h1 {
  29. line-height: 100%;
  30. font-size: 2em;
  31. }
  32. }
  33. h2 {
  34. font-size: 1em;
  35. }
  36. .panel {
  37. display: none;
  38. }
  39. .block {
  40. display: block;
  41. }
  42. .page {
  43. margin-top: 10px;
  44. }
  45. .hint {
  46. color: #ccc;
  47. font-size: 80%;
  48. margin: -10px 0 10px 0;
  49. }
  50. .hint a {
  51. color:inherit;
  52. }
  53. legend.module,
  54. .module {
  55. display: none;
  56. }
  57. .template {
  58. display: none;
  59. }
  60. input[name=upgrade] {
  61. display: none;
  62. }
  63. select {
  64. margin-bottom: 10px;
  65. width: 100%;
  66. }
  67. input.center {
  68. margin-bottom: 0;
  69. }
  70. div.center {
  71. margin: .5em 0 1em;
  72. }
  73. .webmode {
  74. display: none;
  75. }
  76. .content #password {
  77. margin: 0 auto;
  78. }
  79. .content #layout {
  80. margin: 0;
  81. }
  82. div.state {
  83. border-top: 1px solid #eee;
  84. margin-top: 20px;
  85. padding-top: 30px;
  86. }
  87. .state div {
  88. font-size: 80%;
  89. }
  90. .state span {
  91. font-size: 80%;
  92. font-weight: bold;
  93. }
  94. .right {
  95. text-align: right;
  96. }
  97. .pure-g span.terminal,
  98. .pure-g textarea.terminal {
  99. font-family: 'Courier New', monospace;
  100. font-size: 80%;
  101. line-height: 100%;
  102. background-color: #000;
  103. color: #0F0;
  104. }
  105. /* -----------------------------------------------------------------------------
  106. Buttons
  107. -------------------------------------------------------------------------- */
  108. .pure-button {
  109. border-radius: 4px;
  110. color: white;
  111. letter-spacing: 0;
  112. margin-bottom: 10px;
  113. text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  114. padding: 8px 8px;
  115. }
  116. .main-buttons {
  117. margin: 20px auto;
  118. text-align: center;
  119. }
  120. .main-buttons button {
  121. width: 100px;
  122. }
  123. .button-del-schedule {
  124. margin-top: 15px;
  125. }
  126. .button-reboot,
  127. .button-reconnect,
  128. .button-ha-del,
  129. .button-rfb-forget,
  130. .button-del-network,
  131. .button-del-mapping,
  132. .button-del-schedule,
  133. .button-dbg-clear,
  134. .button-upgrade,
  135. .button-clear-filters,
  136. .button-clear-messages,
  137. .button-clear-counts,
  138. .button-settings-factory {
  139. background: rgb(192, 0, 0); /* redish */
  140. }
  141. .button-update,
  142. .button-update-password,
  143. .button-add-network,
  144. .button-add-mapping,
  145. .button-upgrade-browse,
  146. .button-rfb-learn,
  147. .button-ha-add,
  148. .button-ha-config,
  149. .button-settings-backup,
  150. .button-settings-restore,
  151. .button-dbgcmd,
  152. .button-apikey {
  153. background: rgb(0, 192, 0); /* green */
  154. }
  155. .button-add-switch-schedule,
  156. .button-add-light-schedule {
  157. background: rgb(0, 192, 0); /* green */
  158. display: none;
  159. }
  160. .button-more-network,
  161. .button-more-schedule,
  162. .button-wifi-scan,
  163. .button-rfb-send {
  164. background: rgb(255, 128, 0); /* orange */
  165. }
  166. .button-generate-password {
  167. background: rgb(66, 184, 221); /* blue */
  168. }
  169. .button-upgrade-browse,
  170. .button-clear-filters,
  171. .button-clear-messages,
  172. .button-clear-counts,
  173. .button-dbgcmd,
  174. .button-ha-add,
  175. .button-apikey,
  176. .button-upgrade {
  177. margin-left: 5px;
  178. }
  179. /* -----------------------------------------------------------------------------
  180. Sliders
  181. -------------------------------------------------------------------------- */
  182. input.slider {
  183. margin-top: 10px;
  184. }
  185. span.slider {
  186. font-size: 70%;
  187. letter-spacing: 0;
  188. margin-left: 10px;
  189. margin-top: 7px;
  190. }
  191. /* -----------------------------------------------------------------------------
  192. Checkboxes
  193. -------------------------------------------------------------------------- */
  194. .toggleWrapper {
  195. overflow: hidden;
  196. width: auto;
  197. height: 30px;
  198. margin: 0px 0px 10px 0px;
  199. padding: 0px;
  200. border-radius: 4px;
  201. box-shadow: inset 1px 1px #CCC;
  202. }
  203. .toggleWrapper input {
  204. position: absolute;
  205. left: -99em;
  206. }
  207. label[for].toggle {
  208. margin: 0px;
  209. padding: 0px;
  210. }
  211. .toggle {
  212. letter-spacing:normal;
  213. cursor: pointer;
  214. display: inline-block;
  215. position: relative;
  216. width: 130px;
  217. height: 100%;
  218. background: #e9e9e9;
  219. color: #a9a9a9;
  220. border-radius: 4px;
  221. -webkit-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
  222. transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
  223. }
  224. .toggle:before,
  225. .toggle:after {
  226. position: absolute;
  227. line-height: 30px;
  228. font-size: .7em;
  229. z-index: 2;
  230. -webkit-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
  231. transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
  232. }
  233. .toggle:before {
  234. content: "NO";
  235. left: 20px;
  236. }
  237. input[name="relay"] + .toggle:before {
  238. content: "OFF";
  239. }
  240. .toggle:after{
  241. content: "YES";
  242. right: 20px;
  243. }
  244. input[name="relay"] + .toggle:after {
  245. content: "ON";
  246. }
  247. .toggle__handler {
  248. display: inline-block;
  249. position: relative;
  250. z-index: 1;
  251. background: #c00000;
  252. width: 50%;
  253. height: 100%;
  254. border-radius: 4px;
  255. border-top-right-radius: 0px;
  256. border-bottom-right-radius: 0px;
  257. top: 0px;
  258. left: 0px;
  259. -webkit-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
  260. transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
  261. -webkit-transform: translateX(0px);
  262. transform: translateX(0px);
  263. }
  264. input:checked + .toggle:after {
  265. color: #fff;
  266. }
  267. input:checked + .toggle:before {
  268. color: #a9a9a9;
  269. }
  270. input + .toggle:before {
  271. color: #fff;
  272. }
  273. input:checked + .toggle .toggle__handler {
  274. width: 50%;
  275. background: #00c000;
  276. -webkit-transform: translateX(65px);
  277. transform: translateX(65px);
  278. border-color: #000;
  279. border-top-left-radius: 0px;
  280. border-bottom-left-radius: 0px;
  281. border-top-right-radius: 4px;
  282. border-bottom-right-radius: 4px;
  283. }
  284. input[disabled] + .toggle .toggle__handler {
  285. background: #ccc;
  286. }
  287. /* -----------------------------------------------------------------------------
  288. Loading
  289. -------------------------------------------------------------------------- */
  290. .loading {
  291. background-image: url('images/loading.gif');
  292. display: none;
  293. height: 20px;
  294. margin: 8px 0 0 10px;
  295. width: 20px;
  296. }
  297. /* -----------------------------------------------------------------------------
  298. Menu
  299. -------------------------------------------------------------------------- */
  300. #menu .small {
  301. font-size: 60%;
  302. padding-left: 9px;
  303. }
  304. #menu div.footer {
  305. color: #999;
  306. font-size: 80%;
  307. padding: 10px;
  308. }
  309. #menu div.footer a {
  310. padding: 0;
  311. text-decoration: none;
  312. }
  313. /* -----------------------------------------------------------------------------
  314. RF Bridge panel
  315. -------------------------------------------------------------------------- */
  316. #panel-rfb fieldset {
  317. margin: 10px 2px;
  318. padding: 20px;
  319. }
  320. #panel-rfb input {
  321. margin-right: 5px;
  322. }
  323. #panel-rfb label {
  324. padding-top: 5px;
  325. }
  326. #panel-rfb input {
  327. text-align: center;
  328. }
  329. /* -----------------------------------------------------------------------------
  330. Admin panel
  331. -------------------------------------------------------------------------- */
  332. #upgrade-progress {
  333. display: none;
  334. height: 20px;
  335. margin-top: 10px;
  336. width: 100%;
  337. }
  338. #uploader,
  339. #downloader {
  340. display: none;
  341. }
  342. /* -----------------------------------------------------------------------------
  343. Wifi panel
  344. -------------------------------------------------------------------------- */
  345. #networks .pure-g,
  346. #schedules .pure-g {
  347. border-bottom: 1px solid #eee;
  348. margin-bottom: 10px;
  349. padding: 10px 0 10px 0;
  350. }
  351. #networks .more {
  352. display: none;
  353. }
  354. #haConfig,
  355. #scanResult {
  356. margin-top: 10px;
  357. display: none;
  358. padding: 10px;
  359. }
  360. /* -----------------------------------------------------------------------------
  361. Table
  362. -------------------------------------------------------------------------- */
  363. .right {
  364. text-align: right;
  365. }
  366. table.dataTable.display tbody td {
  367. text-align: center;
  368. }
  369. #packets_filter {
  370. display: none;
  371. }
  372. .filtered {
  373. color: rgb(202, 60, 60);
  374. }
  375. /* -----------------------------------------------------------------------------
  376. Logs
  377. -------------------------------------------------------------------------- */
  378. #weblog {
  379. height: 400px;
  380. margin-bottom: 10px;
  381. }
  382. /* -----------------------------------------------------------------------------
  383. Password input controls
  384. -------------------------------------------------------------------------- */
  385. .password-reveal {
  386. font-family: EmojiSymbols,Segoe UI Symbol;
  387. background: rgba(0,0,0,0);
  388. display: inline-block;
  389. float: right;
  390. z-index: 50;
  391. margin-top: 6px;
  392. margin-left: -30px;
  393. vertical-align: middle;
  394. font-size: 1.2em;
  395. height: 100%;
  396. }
  397. .password-reveal:after {
  398. content: "👁";
  399. }
  400. input[type="password"] + .password-reveal {
  401. color: rgba(205, 205, 205, 0.3);
  402. }
  403. input[type="text"] + .password-reveal {
  404. color: rgba(66, 184, 221, 0.8);
  405. }
  406. .no-select {
  407. -webkit-user-select: none;
  408. -moz-user-select: none;
  409. -ms-user-select: none;
  410. user-select: none;
  411. }
  412. input::-ms-clear,
  413. input::-ms-reveal {
  414. display: none;
  415. }
  416. /* css minifier must not combine these.
  417. * style will not apply otherwise */
  418. input::-ms-input-placeholder {
  419. color: #ccd;
  420. }
  421. input::placeholder {
  422. color: #ccc;
  423. }