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.

248 lines
4.9 KiB

  1. body {
  2. color: #777;
  3. }
  4. .pure-img-responsive {
  5. max-width: 100%;
  6. height: auto;
  7. }
  8. /*
  9. Add transition to containers so they can push in and out.
  10. */
  11. #layout,
  12. #menu,
  13. .menu-link {
  14. -webkit-transition: all 0.2s ease-out;
  15. -moz-transition: all 0.2s ease-out;
  16. -ms-transition: all 0.2s ease-out;
  17. -o-transition: all 0.2s ease-out;
  18. transition: all 0.2s ease-out;
  19. }
  20. /*
  21. This is the parent `<div>` that contains the menu and the content area.
  22. */
  23. #layout {
  24. position: relative;
  25. left: 0;
  26. padding-left: 0;
  27. }
  28. #layout.active #menu {
  29. left: 160px;
  30. width: 160px;
  31. }
  32. #layout.active .menu-link {
  33. left: 160px;
  34. }
  35. /*
  36. The content `<div>` is where all your content goes.
  37. */
  38. .content {
  39. margin: 0 auto;
  40. padding: 0 2em;
  41. max-width: 800px;
  42. margin-bottom: 50px;
  43. line-height: 1.6em;
  44. }
  45. .header {
  46. margin: 0;
  47. color: #333;
  48. text-align: center;
  49. padding: 2.5em 2em 0;
  50. border-bottom: 1px solid #eee;
  51. }
  52. .header h1 {
  53. margin: 0.2em 0;
  54. font-size: 3em;
  55. font-weight: 300;
  56. }
  57. .header h2 {
  58. font-weight: 300;
  59. color: #ccc;
  60. padding: 0;
  61. margin-top: 0;
  62. }
  63. .content-subhead {
  64. margin: 50px 0 20px 0;
  65. font-weight: 300;
  66. color: #888;
  67. }
  68. /*
  69. The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
  70. appears on the left side of the page.
  71. */
  72. #menu {
  73. margin-left: -160px; /* "#menu" width */
  74. width: 160px;
  75. position: fixed;
  76. top: 0;
  77. left: 0;
  78. bottom: 0;
  79. z-index: 1000; /* so the menu or its navicon stays above all content */
  80. background: #191818;
  81. overflow-y: auto;
  82. -webkit-overflow-scrolling: touch;
  83. }
  84. /*
  85. All anchors inside the menu should be styled like this.
  86. */
  87. #menu a {
  88. color: #999;
  89. border: none;
  90. padding: 0.6em 0 0.6em 0.6em;
  91. }
  92. /*
  93. Remove all background/borders, since we are applying them to #menu.
  94. */
  95. #menu .pure-menu,
  96. #menu .pure-menu ul {
  97. border: none;
  98. background: transparent;
  99. }
  100. /*
  101. Add that light border to separate items into groups.
  102. */
  103. #menu .pure-menu ul,
  104. #menu .pure-menu .menu-item-divided {
  105. border-top: 1px solid #333;
  106. }
  107. /*
  108. Change color of the anchor links on hover/focus.
  109. */
  110. #menu .pure-menu li a:hover,
  111. #menu .pure-menu li a:focus {
  112. background: #333;
  113. }
  114. /*
  115. This styles the selected menu item `<li>`.
  116. */
  117. #menu .pure-menu-selected,
  118. #menu .pure-menu-heading {
  119. background: #1f8dd6;
  120. }
  121. /*
  122. This styles a link within a selected menu item `<li>`.
  123. */
  124. #menu .pure-menu-selected a {
  125. color: #fff;
  126. }
  127. /*
  128. This styles the menu heading.
  129. */
  130. #menu .pure-menu-heading {
  131. font-size: 110%;
  132. color: #fff;
  133. margin: 0;
  134. }
  135. /* -- Dynamic Button For Responsive Menu -------------------------------------*/
  136. /*
  137. The button to open/close the Menu is custom-made and not part of Pure. Here's
  138. how it works:
  139. */
  140. /*
  141. `.menu-link` represents the responsive menu toggle that shows/hides on
  142. small screens.
  143. */
  144. .menu-link {
  145. position: fixed;
  146. display: block; /* show this only on small screens */
  147. top: 0;
  148. left: 0; /* "#menu width" */
  149. background: #000;
  150. background: rgba(0,0,0,0.7);
  151. font-size: 10px; /* change this value to increase/decrease button size */
  152. z-index: 10;
  153. width: 2em;
  154. height: auto;
  155. padding: 2.1em 1.6em;
  156. }
  157. .menu-link:hover,
  158. .menu-link:focus {
  159. background: #000;
  160. }
  161. .menu-link span {
  162. position: relative;
  163. display: block;
  164. }
  165. .menu-link span,
  166. .menu-link span:before,
  167. .menu-link span:after {
  168. background-color: #fff;
  169. width: 100%;
  170. height: 0.2em;
  171. }
  172. .menu-link span:before,
  173. .menu-link span:after {
  174. position: absolute;
  175. margin-top: -0.6em;
  176. content: " ";
  177. }
  178. .menu-link span:after {
  179. margin-top: 0.6em;
  180. }
  181. /* -- Responsive Styles (Media Queries) ------------------------------------- */
  182. /*
  183. Hides the menu at `48em`, but modify this based on your app's needs.
  184. */
  185. @media (min-width: 48em) {
  186. .header,
  187. .content {
  188. padding-left: 2em;
  189. padding-right: 2em;
  190. }
  191. #layout {
  192. padding-left: 160px; /* left col width "#menu" */
  193. left: 0;
  194. }
  195. #menu {
  196. left: 160px;
  197. }
  198. .menu-link {
  199. position: fixed;
  200. left: 160px;
  201. display: none;
  202. }
  203. #layout.active .menu-link {
  204. left: 160px;
  205. }
  206. }
  207. @media (max-width: 48em) {
  208. /* Only apply this when the window is small. Otherwise, the following
  209. case results in extra padding on the left:
  210. * Make the window small.
  211. * Tap the menu to trigger the active state.
  212. * Make the window large again.
  213. */
  214. #layout.active {
  215. position: relative;
  216. left: 160px;
  217. }
  218. }