jqm-docs.css 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344
  1. /* jqm docs css
  2. Beware: lots of last-minute CSS going on in here
  3. cobblers, shoes,
  4. */
  5. body { background: #dddddd; }
  6. .ui-mobile .type-home .ui-content { margin: 0; background: #e5e5e5 url(../images/jqm-sitebg.png) top center repeat-x; }
  7. .ui-mobile #jqm-homeheader { padding: 40px 10px 0; text-align: center; margin: 0 auto; }
  8. .ui-mobile #jqm-homeheader h1 { margin: 0 0 ; }
  9. .ui-mobile #jqm-homeheader p { margin: .3em 0 0; line-height: 1.3; font-size: .9em; font-weight: bold; color: #666; }
  10. .ui-mobile #jqm-version { text-indent: -99999px; background: url(../images/version.png) top right no-repeat; width: 119px; height: 122px; overflow: hidden; position: absolute; z-index: 50; top: -11px; right: 0; }
  11. .ui-mobile .jqm-themeswitcher { margin: 10px 25px 10px 10px; }
  12. h2 { margin:1.2em 0 .4em 0; }
  13. p code { font-size:1.2em; font-weight:bold; }
  14. h4 code {font-size:1.2em; font-weight:bold; }
  15. dt { font-weight: bold; margin: 2em 0 .5em; }
  16. dt code, dd code { font-size:1.3em; line-height:150%; }
  17. pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
  18. #jqm-homeheader img { width: 235px; }
  19. img { max-width: 100%; }
  20. .ui-header .jqm-home { top:0.65em; }
  21. nav { margin: 0; }
  22. p.intro {
  23. font-size: .96em;
  24. line-height: 1.3;
  25. border-top: 1px solid #75ae18;
  26. border-bottom: 0;
  27. background: none;
  28. margin: 1.5em 0;
  29. padding: 1.5em 15px 0;
  30. }
  31. p.intro strong {
  32. color: #558e08;
  33. }
  34. .footer-docs {
  35. padding: 5px 0;
  36. }
  37. .footer-docs p {
  38. float: left;
  39. margin-left:15px;
  40. font-weight: normal;
  41. font-size: .9em;
  42. }
  43. .type-interior .content-secondary {
  44. border-right: 0;
  45. border-left: 0;
  46. margin: 10px -15px 0;
  47. background: #fff;
  48. border-top: 1px solid #ccc;
  49. }
  50. .type-home .ui-content {
  51. margin-top: 5px;
  52. }
  53. .type-interior .ui-content {
  54. padding-bottom: 0;
  55. }
  56. .content-secondary .ui-collapsible {
  57. padding: 0 15px 10px;
  58. }
  59. .content-secondary .ui-collapsible-content {
  60. padding: 0;
  61. background: none;
  62. border-bottom: none;
  63. }
  64. .content-secondary .ui-listview {
  65. margin: 0;
  66. }
  67. /* new API additions */
  68. dt {
  69. margin: 35px 0 15px 0;
  70. background-color:#ddd;
  71. font-weight:normal;
  72. }
  73. dt code {
  74. display:inline-block;
  75. font-weight:bold;
  76. color:#56A00E;
  77. padding:3px 7px;
  78. margin-right:10px;
  79. background-color:#fff;
  80. }
  81. dd {
  82. margin-bottom:10px;
  83. }
  84. dd .default { font-weight:bold; }
  85. dd pre {
  86. margin:0 0 0 0;
  87. }
  88. dd code { font-weight: normal; }
  89. dd pre code {
  90. margin:0;
  91. border:none;
  92. font-weight:normal;
  93. font-size:100%;
  94. background-color:transparent;
  95. }
  96. dd h4 { margin:15px 0 0 0; }
  97. .localnav {
  98. margin:0 0 20px 0;
  99. overflow:hidden;
  100. }
  101. .localnav li {
  102. float:left;
  103. }
  104. .localnav .ui-btn-inner {
  105. padding: .6em 10px;
  106. font-size:80%;
  107. }
  108. /* F bar theme - just for the docs overview headers */
  109. .ui-bar-f {
  110. border-top: 1px solid #56A00E;
  111. border-bottom: 1px solid #56A00E;
  112. background: #74b042;
  113. color: #fff;
  114. font-weight: bold;
  115. text-shadow: 0 -1px 1px #234403;
  116. background-image: -webkit-gradient(linear, left top, left bottom, from(#74b042), to(#56A00E)); /* Saf4+, Chrome */
  117. background-image: -webkit-linear-gradient(#74b042, #56A00E); /* Chrome 10+, Saf5.1+ */
  118. background-image: -moz-linear-gradient(#74b042, #56A00E); /* FF3.6 */
  119. background-image: -ms-linear-gradient(#74b042, #56A00E); /* IE10 */
  120. background-image: -o-linear-gradient(#74b042, #56A00E); /* Opera 11.10+ */
  121. background-image: linear-gradient(#74b042, #56A00E);
  122. }
  123. .ui-bar-f,
  124. .ui-bar-f .ui-link-inherit {
  125. color: #fff;
  126. }
  127. .ui-bar-f .ui-link {
  128. color: #fff;
  129. font-weight: bold;
  130. }
  131. .ui-btn-up-f {
  132. border: 1px solid #3B6F07;
  133. background: #56A00E;
  134. font-weight: bold;
  135. color: #fff;
  136. text-shadow: 0 -1px 1px #234403;
  137. background-image: -webkit-gradient(linear, left top, left bottom, from(#74b042), to(#56A00E)); /* Saf4+, Chrome */
  138. background-image: -webkit-linear-gradient(#74b042, #56A00E); /* Chrome 10+, Saf5.1+ */
  139. background-image: -moz-linear-gradient(#74b042, #56A00E); /* FF3.6 */
  140. background-image: -ms-linear-gradient(#74b042, #56A00E); /* IE10 */
  141. background-image: -o-linear-gradient(#74b042, #56A00E); /* Opera 11.10+ */
  142. background-image: linear-gradient(#74b042, #56A00E);
  143. }
  144. .ui-btn-up-f a.ui-link-inherit {
  145. color: #fff;
  146. }
  147. .ui-btn-hover-f {
  148. border: 1px solid #3B6F07;
  149. background: #6EBC1F;
  150. font-weight: bold;
  151. color: #fff;
  152. text-shadow: 0 -1px 1px #234403;
  153. background-image: -webkit-gradient(linear, left top, left bottom, from(#8FC963), to(#6EBC1F)); /* Saf4+, Chrome */
  154. background-image: -webkit-linear-gradient(#8FC963, #6EBC1F); /* Chrome 10+, Saf5.1+ */
  155. background-image: -moz-linear-gradient(#8FC963, #6EBC1F); /* FF3.6 */
  156. background-image: -ms-linear-gradient(#8FC963, #6EBC1F); /* IE10 */
  157. background-image: -o-linear-gradient(#8FC963, #6EBC1F); /* Opera 11.10+ */
  158. background-image: linear-gradient(#8FC963, #6EBC1F);
  159. }
  160. .ui-btn-hover-f a.ui-link-inherit {
  161. color: #fff;
  162. }
  163. .ui-btn-down-f {
  164. border: 1px solid #3B6F07;
  165. background: #3d3d3d;
  166. font-weight: bold;
  167. color: #fff;
  168. text-shadow: 0 -1px 1px #234403;
  169. background-image: -webkit-gradient(linear, left top, left bottom, from(#56A00E), to(#64A234)); /* Saf4+, Chrome */
  170. background-image: -webkit-linear-gradient(#56A00E, #64A234); /* Chrome 10+, Saf5.1+ */
  171. background-image: -moz-linear-gradient(#56A00E, #64A234); /* FF3.6 */
  172. background-image: -ms-linear-gradient(#56A00E, #64A234); /* IE10 */
  173. background-image: -o-linear-gradient(#56A00E, #64A234); /* Opera 11.10+ */
  174. background-image: linear-gradient(#56A00E, #64A234);
  175. }
  176. .ui-btn-down-f a.ui-link-inherit {
  177. color: #fff;
  178. }
  179. .ui-btn-up-f,
  180. .ui-btn-hover-f,
  181. .ui-btn-down-f {
  182. font-family: Helvetica, Arial, sans-serif;
  183. text-decoration: none;
  184. }
  185. /* docs site layout */
  186. @media all and (min-width: 650px){
  187. .jqm-home {
  188. position: absolute;
  189. left: 10px;
  190. top: 0;
  191. }
  192. .type-home .ui-content {
  193. margin-top: 5px;
  194. }
  195. .ui-mobile #jqm-homeheader {
  196. max-width: 340px;
  197. }
  198. .ui-mobile .jqm-themeswitcher {
  199. float: right;
  200. }
  201. p.intro {
  202. margin: 2em 0;
  203. }
  204. .type-home .ui-content,
  205. .type-interior .ui-content {
  206. padding: 0;
  207. background: url(../images/px-ccc.gif) 50% 0 repeat-y;
  208. }
  209. .type-interior .ui-content {
  210. background-position: 45%;
  211. overflow: hidden;
  212. }
  213. .content-secondary {
  214. text-align: left;
  215. float: left;
  216. width: 45%;
  217. background: none;
  218. }
  219. .content-secondary,
  220. .type-interior .content-secondary {
  221. margin: 30px 0 20px 2%;
  222. padding: 20px 4% 0 0;
  223. background: none;
  224. border-top: none;
  225. }
  226. .type-index .content-secondary {
  227. padding: 0;
  228. }
  229. .content-secondary .ui-collapsible {
  230. margin: 0;
  231. padding: 0;
  232. }
  233. .content-secondary .ui-collapsible-content {
  234. border: none;
  235. }
  236. .type-index .content-secondary .ui-listview {
  237. margin: 0;
  238. }
  239. .ui-mobile #jqm-homeheader {
  240. padding: 0;
  241. }
  242. .content-primary {
  243. width: 45%;
  244. float: right;
  245. margin-top: 30px;
  246. margin-right: 1%;
  247. padding-right: 1%;
  248. }
  249. .content-primary ul:first-child {
  250. margin-top: 0;
  251. }
  252. .content-secondary h2 {
  253. position: absolute;
  254. left: -9999px;
  255. }
  256. .type-interior .content-primary {
  257. padding: 1.5em 6% 3em 0;
  258. margin: 0;
  259. }
  260. /* fix up the collapsibles - expanded on desktop */
  261. .content-secondary .ui-collapsible-heading {
  262. display: none;
  263. }
  264. .content-secondary .ui-collapsible-contain {
  265. margin:0;
  266. }
  267. .content-secondary .ui-collapsible-content {
  268. display: block;
  269. margin: 0;
  270. padding: 0;
  271. }
  272. .type-interior .content-secondary .ui-li-divider {
  273. padding-top: 1em;
  274. padding-bottom: 1em;
  275. }
  276. .type-interior .content-secondary {
  277. margin: 0;
  278. padding: 0;
  279. }
  280. }
  281. @media all and (min-width: 750px){
  282. .type-home .ui-content,
  283. .type-interior .ui-content {
  284. background-position: 39%;
  285. }
  286. .content-secondary {
  287. width: 34%;
  288. }
  289. .content-primary {
  290. width: 56%;
  291. padding-right: 1%;
  292. }
  293. .type-interior .ui-content {
  294. background-position: 34%;
  295. }
  296. }
  297. @media all and (min-width: 1200px){
  298. .type-home .ui-content{
  299. background-position: 38.5%;
  300. }
  301. .type-interior .ui-content {
  302. background-position: 30%;
  303. }
  304. .content-secondary {
  305. width: 30%;
  306. padding-right:6%;
  307. margin: 30px 0 20px 5%;
  308. }
  309. .type-interior .content-secondary {
  310. margin: 0;
  311. padding: 0;
  312. }
  313. .content-primary {
  314. width: 50%;
  315. margin-right: 5%;
  316. padding-right: 3%;
  317. }
  318. .type-interior .content-primary {
  319. width: 60%;
  320. }
  321. }