My Marlin configs for Fabrikator Mini and CTC i3 Pro B
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.

configurator.css 8.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344
  1. /* configurator.css */
  2. /* Styles for Marlin Configurator */
  3. .clear { clear: both; }
  4. /* Prevent selection except PRE tags */
  5. * {
  6. -webkit-touch-callout: none;
  7. -webkit-user-select: none;
  8. -khtml-user-select: none;
  9. -moz-user-select: none;
  10. -ms-user-select: none;
  11. user-select: none;
  12. }
  13. pre {
  14. -webkit-touch-callout: text;
  15. -webkit-user-select: text;
  16. -khtml-user-select: text;
  17. -moz-user-select: text;
  18. -ms-user-select: text;
  19. user-select: text;
  20. }
  21. body { margin: 0; padding: 0; background: #56A; color: #000; font-family: monospace; }
  22. #main {
  23. max-width: 1100px;
  24. margin: 0 auto 10px;
  25. padding: 0 2%; width: 96%;
  26. }
  27. h1, h2, h3, h4, h5, h6 { clear: both; }
  28. h1, p.info { font-family: sans-serif; }
  29. h1 {
  30. height: 38px;
  31. margin-bottom: -30px;
  32. color: #FFF;
  33. background: transparent url(logo.png) right top no-repeat;
  34. }
  35. p.info { padding: 0; color: #000; }
  36. p.info span { color: #800; }
  37. #message { text-align: center; }
  38. #message { width: 80%; margin: 0 auto 0.25em; color: #FF0; }
  39. #message p { padding: 2px 0; font-weight: bold; border-radius: 0.8em; }
  40. #message p.message { color: #080; background: #CFC; }
  41. #message p.error { color: #F00; background: #FF4; }
  42. #message p.warning { color: #FF0; background: #BA4; }
  43. #message p.message span,
  44. #message p.error span,
  45. #message p.warning span {
  46. color: #A00;
  47. background: rgba(255, 255, 255, 1);
  48. border: 1px solid rgba(0,0,0,0.5);
  49. border-radius: 1em;
  50. float: right;
  51. margin-right: 0.5em;
  52. padding: 0 3px;
  53. font-family: sans-serif;
  54. font-size: small;
  55. position: relative;
  56. top: -1px;
  57. }
  58. #help strong { color: #0DD; }
  59. img { display: none; }
  60. /* Forms */
  61. #config_form {
  62. display: block;
  63. background: #EEE;
  64. padding: 6px 20px 20px;
  65. color: #000;
  66. position: relative;
  67. border-radius: 1.5em;
  68. border-top-left-radius: 0;
  69. }
  70. fieldset {
  71. height: 16.1em;
  72. overflow-y: scroll;
  73. overflow-x: hidden;
  74. margin-top: 10px;
  75. }
  76. label, input, select, textarea { display: block; float: left; margin: 1px 0; }
  77. label.newline, textarea, fieldset { clear: both; }
  78. label {
  79. width: 120px; /* label area */
  80. height: 1em;
  81. padding: 10px 460px 10px 1em;
  82. margin-right: -450px;
  83. text-align: right;
  84. }
  85. label.blocked, label.added.blocked, label.added.blocked.sublabel { color: #AAA; }
  86. label.added.sublabel {
  87. width: auto;
  88. margin: 11px -2.5em 0 1em;
  89. padding: 0 3em 0 0;
  90. font-style: italic;
  91. color: #444;
  92. }
  93. label+label.added.sublabel {
  94. margin-left: 0;
  95. }
  96. input[type="text"], select { margin: 0.75em 0 0; }
  97. input[type="checkbox"], input[type="radio"], input[type="file"] { margin: 1em 0 0; }
  98. input[type="checkbox"].enabler, input[type="radio"].enabler { margin-left: 1em; }
  99. input:disabled { color: #BBB; }
  100. #config_form input[type="text"].subitem { width: 4em; }
  101. #config_form input[type="text"].subitem+.subitem { margin-left: 4px; }
  102. input[type="text"].added { width: 20em; }
  103. label.added {
  104. width: 265px; /* label area */
  105. height: 1em;
  106. padding: 10px 370px 10px 1em;
  107. margin-right: -360px;
  108. text-align: right;
  109. }
  110. ul.tabs { padding: 0; list-style: none; }
  111. ul.tabs li { display: inline; }
  112. ul.tabs li a,
  113. ul.tabs li a.active:hover,
  114. ul.tabs li a.active:active {
  115. display: block;
  116. float: left;
  117. background: #1E4059;
  118. color: #CCC;
  119. font-size: 110%;
  120. border-radius: 0.25em 0.25em 0 0;
  121. margin: 0 4px 0 0;
  122. padding: 2px 8px;
  123. text-decoration: none;
  124. font-family: georgia,"times new roman",times;
  125. }
  126. ul.tabs li a.active:link,
  127. ul.tabs li a.active:visited {
  128. background: #DDD;
  129. color: #06F;
  130. cursor: default;
  131. margin-top: -4px;
  132. padding-bottom: 4px;
  133. padding-top: 4px;
  134. }
  135. ul.tabs li a:hover,
  136. ul.tabs li a:active {
  137. background: #000;
  138. color: #FFF;
  139. }
  140. fieldset { display: none; border: 1px solid #AAA; border-radius: 1em; }
  141. fieldset legend { display: none; }
  142. .hilightable span {
  143. display: block;
  144. float: left;
  145. width: 100%;
  146. height: 1.3em;
  147. background: rgba(225,255,0,1);
  148. margin: 0 -100% -1em 0;
  149. }
  150. #serial_stepper { padding-top: 0.75em; display: block; float: left; }
  151. /*#SERIAL_PORT { display: none; }*/
  152. /* Tooltips */
  153. #tooltip {
  154. display: none;
  155. max-width: 30em;
  156. padding: 8px;
  157. border: 2px solid #73d699;
  158. border-radius: 1em;
  159. position: absolute;
  160. z-index: 999;
  161. font-family: sans-serif;
  162. font-size: 85%;
  163. color: #000;
  164. line-height: 1.1;
  165. background: #e2ff99; /* Old browsers */
  166. background: -moz-linear-gradient(top, #e2ff99 0%, #73d699 100%); /* FF3.6+ */
  167. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2ff99), color-stop(100%,#73d699)); /* Chrome,Safari4+ */
  168. background: -webkit-linear-gradient(top, #e2ff99 0%,#73d699 100%); /* Chrome10+,Safari5.1+ */
  169. background: -o-linear-gradient(top, #e2ff99 0%,#73d699 100%); /* Opera 11.10+ */
  170. background: -ms-linear-gradient(top, #e2ff99 0%,#73d699 100%); /* IE10+ */
  171. background: linear-gradient(to bottom, #e2ff99 0%,#73d699 100%); /* W3C */
  172. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2ff99', endColorstr='#73d699',GradientType=0 ); /* IE6-9 */
  173. -webkit-box-shadow: 0px 6px 25px -4px rgba(0,0,0,0.75);
  174. -moz-box-shadow: 0px 6px 25px -4px rgba(0,0,0,0.75);
  175. box-shadow: 0px 6px 25px -4px rgba(0,0,0,0.75);
  176. }
  177. #tooltip>span {
  178. position: absolute;
  179. content: "";
  180. width: 0;
  181. height: 0;
  182. border-left: 8px solid transparent;
  183. border-right: 8px solid transparent;
  184. border-top: 8px solid #73d699;
  185. z-index: 999;
  186. bottom: -10px;
  187. left: 20px;
  188. }
  189. #tooltip>strong { color: #00B; }
  190. /* Tooltips Checkbox */
  191. #tipson {
  192. width: auto;
  193. height: auto;
  194. padding: 0;
  195. margin-right: 0;
  196. float: right;
  197. font-weight: bold;
  198. font-size: 100%;
  199. font-family: helvetica;
  200. text-align: left;
  201. cursor: pointer;
  202. }
  203. #tipson input { float: none; display: inline; cursor: pointer; }
  204. /* Config Text */
  205. pre.config {
  206. height: 25em;
  207. padding: 10px;
  208. border: 2px solid #888;
  209. border-radius: 5px;
  210. overflow: auto;
  211. clear: both;
  212. background-color: #FFF;
  213. color: #000;
  214. font-family: "Fira Mono", monospace;
  215. font-size: small;
  216. }
  217. /* Pre Headers */
  218. h2 {
  219. width: 100%;
  220. margin: 12px -300px 4px 0;
  221. padding: 0;
  222. float: left;
  223. }
  224. /* Disclosure Widget */
  225. span.disclose, a.download, a.download-all {︎
  226. display: block;
  227. float: right;
  228. margin-top: 12px;
  229. }
  230. span.disclose {
  231. margin-right: -10px; /* total width */
  232. margin-left: 14px;
  233. width: 0;
  234. height: 0;
  235. position: relative;
  236. left: 3px;
  237. top: 3px;
  238. cursor: pointer;
  239. border-left: 8px solid transparent;
  240. border-right: 8px solid transparent;
  241. border-top: 10px solid #000;
  242. }
  243. span.disclose.closed {
  244. margin-right: -8px; /* total width */
  245. margin-left: 10px;
  246. left: 0;
  247. top: 0;
  248. border-top: 8px solid transparent;
  249. border-bottom: 8px solid transparent;
  250. border-right: 10px solid #000;
  251. }
  252. span.disclose.almost {
  253. -ms-transform: rotate(45deg); /* IE 9 */
  254. -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
  255. transform: rotate(45deg);
  256. }
  257. span.disclose.closed.almost {
  258. left: 1px;
  259. top: 3px;
  260. -ms-transform: rotate(315deg); /* IE 9 */
  261. -webkit-transform: rotate(315deg); /* Chrome, Safari, Opera */
  262. transform: rotate(315deg);
  263. }
  264. /* Download Button */
  265. a.download, a.download-all {
  266. visibility: hidden;
  267. padding: 2px;
  268. border: 1px solid #494;
  269. border-radius: 4px;
  270. margin: 12px 0 0;
  271. background: #FFF;
  272. color: #494;
  273. font-family: sans-serif;
  274. font-size: small;
  275. font-weight: bold;
  276. text-decoration: none;
  277. }
  278. a.download-all { margin: 9px 2em 0; color: #449; border-color: #449; }
  279. input[type="text"].one_of_2 { max-width: 15%; }
  280. input[type="text"].one_of_3 { max-width: 10%; }
  281. input[type="text"].one_of_4 { max-width: 7%; }
  282. select.one_of_2 { max-width: 15%; }
  283. select.one_of_3 { max-width: 10%; }
  284. select.one_of_4 { max-width: 14%; }
  285. select.one_of_4+span.label+select.one_of_4+span.label { clear: both; margin-left: 265px; padding-left: 1.75em; }
  286. select.one_of_4+span.label+select.one_of_4+span.label+select.one_of_4+span.label { clear: none; margin-left: 1em; padding-left: 0; }
  287. @media all and (min-width: 1140px) {
  288. #main { max-width: 10000px; }
  289. fieldset { float: left; width: 50%; height: auto; }
  290. #config_text, #config_adv_text { float: right; clear: right; width: 45%; }
  291. pre.config { height: 20em; }
  292. .disclose { display: none; }
  293. input[type="text"].one_of_2 { max-width: 15%; }
  294. input[type="text"].one_of_3 { max-width: 9%; }
  295. input[type="text"].one_of_4 { max-width: 8%; }
  296. select.one_of_2 { max-width: 15%; }
  297. select.one_of_3 { max-width: 10%; }
  298. select.one_of_4 { max-width: 16%; }
  299. }
  300. /*label.blocked, .blocked { display: none; }*/