puppet node classifier
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.
 
 
 
 
 
 

284 lines
4.8 KiB

  1. * {
  2. box-sizing: border-box;
  3. }
  4. @linkcolor: #1b98f8;
  5. a {
  6. text-decoration: none;
  7. color: @linkcolor;
  8. }
  9. #layout, #nav, #list, #main {
  10. margin: 0;
  11. padding: 0;
  12. }
  13. /* make the navigation 100% width on phones */
  14. #nav {
  15. width: 100%;
  16. height: 40px;
  17. position: relative;
  18. background: rgb(37, 42, 58);
  19. text-align: center;
  20. .user-status {
  21. padding: 25px 0px;
  22. color: #fff;
  23. span {
  24. font-family: monospace;
  25. }
  26. }
  27. /* show the "Menu" button on phones */
  28. .nav-menu-button {
  29. display: block;
  30. top: 0.5em;
  31. right: 0.5em;
  32. position: absolute;
  33. }
  34. &.active {
  35. height: 80%;
  36. }
  37. }
  38. /* when "Menu" is clicked, the navbar should be 80% height */
  39. /* don't show the navigation items until the "Menu" button is clicked */
  40. .nav-inner {
  41. display: none;
  42. }
  43. #nav.active .nav-inner {
  44. display: block;
  45. padding: 2em 0;
  46. }
  47. #nav {
  48. .pure-menu {
  49. background: transparent;
  50. border: none;
  51. text-align: left;
  52. }
  53. .pure-menu-link:hover,
  54. .pure-menu-link:focus {
  55. background: rgb(55, 60, 90);
  56. }
  57. .pure-menu-link {
  58. color: #fff;
  59. margin-left: 0.5em;
  60. }
  61. .pure-menu-heading {
  62. border-bottom: none;
  63. font-size:110%;
  64. color: rgb(75, 113, 151);
  65. }
  66. }
  67. .tag-icon {
  68. width: 15px;
  69. height: 15px;
  70. display: inline-block;
  71. margin-right: 0.5em;
  72. border-radius: 3px;
  73. }
  74. .tag-icon-mod-6-0 {
  75. background: #ffc94c;
  76. }
  77. .tag-icon-mod-6-1 {
  78. background: #41ccb4;
  79. }
  80. .tag-icon-mod-6-2 {
  81. background: #40c365;
  82. }
  83. .tag-icon-mod-6-3 {
  84. background: #ffc900;
  85. }
  86. .tag-icon-mod-6-4 {
  87. background: #4100b4;
  88. }
  89. .tag-icon-mod-6-5 {
  90. background: #00c365;
  91. }
  92. .email-content {
  93. padding: 0em 4em;
  94. }
  95. .email-content-header, .email-content-body, .email-content-footer {
  96. padding: 1em 0em;
  97. }
  98. .email-content-header {
  99. border-bottom: 1px solid #ddd;
  100. }
  101. .email-content-title {
  102. margin: 0.5em 0 0;
  103. }
  104. .email-content-subtitle {
  105. font-size: 1em;
  106. margin: 0;
  107. font-weight: normal;
  108. }
  109. .email-content-controls {
  110. margin-top: 2em;
  111. text-align: right;
  112. .secondary-button {
  113. margin-bottom: 0.3em;
  114. }
  115. form {
  116. display: inline-block;
  117. }
  118. }
  119. .email-avatar {
  120. width: 40px;
  121. height: 40px;
  122. }
  123. @media (min-width: 40em) {
  124. #layout {
  125. padding-left: 300px; /* "left col (nav + list)" width */
  126. position: relative;
  127. }
  128. /* These are position:fixed; elements that will be in the left 500px of the screen */
  129. #nav, #list {
  130. position: fixed;
  131. top: 0;
  132. bottom: 0;
  133. overflow: auto;
  134. }
  135. #nav {
  136. margin-left:-300px; /* "left col (nav + list)" width */
  137. width:300px;
  138. height: 100%;
  139. }
  140. .nav-inner {
  141. display: block;
  142. padding: 1.5em 0;
  143. }
  144. #nav .nav-menu-button {
  145. display: none;
  146. }
  147. #main {
  148. position: fixed;
  149. top: 33%;
  150. right: 0;
  151. bottom: 0;
  152. left: 150px;
  153. overflow: auto;
  154. }
  155. }
  156. @media (min-width: 60em) {
  157. /* This will now take up it's own column, so don't need position: fixed; */
  158. #main {
  159. position: static;
  160. margin: 0;
  161. padding: 0;
  162. }
  163. }
  164. .photo-feed {
  165. .photo {
  166. float: left;
  167. width: 250px;
  168. height: 250px; // matches the "feed" thumb size in library.py
  169. overflow: hidden;
  170. margin: 0px 20px 20px 0px;
  171. img {
  172. display: block;
  173. }
  174. &:hover {
  175. border: 3px solid #252a3a;
  176. width: 256px;
  177. height: 256px;
  178. margin: -3px 17px 17px -3px;
  179. }
  180. }
  181. .feed-divider {
  182. clear: both;
  183. padding: 10px 0px;
  184. }
  185. }
  186. .photo-view {
  187. .photo-preview img {
  188. display: block;
  189. width: 100%;
  190. max-height: 100%;
  191. box-sizing: border-box;
  192. }
  193. .photo-info {
  194. padding: 0px 0px 0px 25px;
  195. }
  196. .photo-formats {
  197. ul {
  198. padding: 0;
  199. }
  200. li {
  201. margin-bottom: 15px;
  202. }
  203. img {
  204. // float: left;
  205. max-width: 100px;
  206. }
  207. }
  208. .photo-tags {
  209. h2 a {
  210. font-weight: normal;
  211. font-size: 14px;
  212. }
  213. }
  214. }
  215. .photo-tagging {
  216. img {
  217. float: left;
  218. padding: 0px 20px 20px 0px;
  219. }
  220. }
  221. .tags-picker {
  222. padding: 0;
  223. li {
  224. display: inline-block;
  225. padding-right: 25px;
  226. }
  227. input.submit-link {
  228. padding: 0;
  229. border: 0;
  230. background: none;
  231. color: @linkcolor;
  232. &:hover {
  233. text-decoration: underline;
  234. }
  235. }
  236. }
  237. ul.pager {
  238. padding: 0;
  239. li {
  240. display: inline-block;
  241. &.current {
  242. font-weight: bold;
  243. }
  244. }
  245. }
  246. .date-feed {
  247. a {
  248. padding-right: 15px;
  249. }
  250. .many {
  251. font-weight: bold;
  252. }
  253. }