demos.css 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  1. /* Jcrop Demo Site CSS - 2013 Tapmodo Interactive LLC - MIT License
  2. Not required to run Jcrop - contains twitter bootstrap code */
  3. /* To build these CSS files you must have LESS and run
  4. * $ git submodule init
  5. * $ git submodule update
  6. * ...to pull in the Twitter bootstrap files
  7. */
  8. .clearfix {
  9. *zoom: 1;
  10. }
  11. .clearfix:before,
  12. .clearfix:after {
  13. display: table;
  14. content: "";
  15. line-height: 0;
  16. }
  17. .clearfix:after {
  18. clear: both;
  19. }
  20. .hide-text {
  21. font: 0/0 a;
  22. color: transparent;
  23. text-shadow: none;
  24. background-color: transparent;
  25. border: 0;
  26. }
  27. .input-block-level {
  28. display: block;
  29. width: 100%;
  30. min-height: 30px;
  31. -webkit-box-sizing: border-box;
  32. -moz-box-sizing: border-box;
  33. box-sizing: border-box;
  34. }
  35. /* JCROP DEMOS CSS */
  36. li small {
  37. color: #f07878;
  38. }
  39. .inline-labels label {
  40. display: inline;
  41. }
  42. div#interface.span3 fieldset {
  43. margin-bottom: 1.5em;
  44. }
  45. div#interface.span3 fieldset legend {
  46. margin-bottom: 2px;
  47. padding-bottom: 2px;
  48. line-height: 1.2;
  49. }
  50. .article h1 {
  51. color: #333;
  52. margin-top: .2em;
  53. }
  54. .jc-demo {
  55. text-align: center;
  56. }
  57. .jcropper-holder {
  58. border: 1px #bbb solid;
  59. }
  60. .jc-demo-box {
  61. text-align: left;
  62. margin: 3.4em auto 2em;
  63. background: white;
  64. border: 1px #bbb solid;
  65. -webkit-border-radius: 4px;
  66. -moz-border-radius: 4px;
  67. border-radius: 4px;
  68. -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);
  69. -moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);
  70. box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);
  71. padding: 1em 2em 2em;
  72. }
  73. form {
  74. margin: 1.5em 0;
  75. }
  76. form.coords label {
  77. margin-right: 1em;
  78. font-weight: bold;
  79. color: #900;
  80. }
  81. form.coords input {
  82. width: 3em;
  83. }
  84. .ui-widget-overlay {
  85. opacity: 0.80;
  86. filter: alpha(opacity=70);
  87. }
  88. .jc-dialog {
  89. padding-top: 1em;
  90. }
  91. .ui-dialog p tt {
  92. color: yellow;
  93. }
  94. .jcrop-light .jcrop-selection {
  95. -moz-box-shadow: 0px 0px 15px #999;
  96. /* Firefox */
  97. -webkit-box-shadow: 0px 0px 15px #999;
  98. /* Safari, Chrome */
  99. box-shadow: 0px 0px 15px #999;
  100. /* CSS3 */
  101. }
  102. .jcrop-dark .jcrop-selection {
  103. -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.35);
  104. /* Firefox */
  105. -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.35);
  106. /* Safari, Chrome */
  107. box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.35);
  108. /* CSS3 */
  109. }
  110. .jcrop-dark .jcrop-selection:hover {
  111. -moz-box-shadow: 0px 0px 6px #000000;
  112. /* Firefox */
  113. -webkit-box-shadow: 0px 0px 6px #000000;
  114. /* Safari, Chrome */
  115. box-shadow: 0px 0px 6px #000000;
  116. /* CSS3 */
  117. }
  118. .jcrop-dark .jcrop-selection.jcrop-current {
  119. -moz-box-shadow: 0px 0px 15px #000;
  120. /* Firefox */
  121. -webkit-box-shadow: 0px 0px 15px #000;
  122. /* Safari, Chrome */
  123. box-shadow: 0px 0px 15px #000;
  124. /* CSS3 */
  125. }
  126. .jcrop-fancy .jcrop-handle.ord-e {
  127. -webkit-border-top-left-radius: 0px;
  128. -webkit-border-bottom-left-radius: 0px;
  129. }
  130. .jcrop-fancy .jcrop-handle.ord-w {
  131. -webkit-border-top-right-radius: 0px;
  132. -webkit-border-bottom-right-radius: 0px;
  133. }
  134. .jcrop-fancy .jcrop-handle.ord-nw {
  135. -webkit-border-bottom-right-radius: 0px;
  136. }
  137. .jcrop-fancy .jcrop-handle.ord-ne {
  138. -webkit-border-bottom-left-radius: 0px;
  139. }
  140. .jcrop-fancy .jcrop-handle.ord-sw {
  141. -webkit-border-top-right-radius: 0px;
  142. }
  143. .jcrop-fancy .jcrop-handle.ord-se {
  144. -webkit-border-top-left-radius: 0px;
  145. }
  146. .jcrop-fancy .jcrop-handle.ord-s {
  147. -webkit-border-top-left-radius: 0px;
  148. -webkit-border-top-right-radius: 0px;
  149. }
  150. .jcrop-fancy .jcrop-handle.ord-n {
  151. -webkit-border-bottom-left-radius: 0px;
  152. -webkit-border-bottom-right-radius: 0px;
  153. }
  154. .description {
  155. margin: 16px 0;
  156. }
  157. .jcrop-droptarget canvas {
  158. background-color: #f0f0f0;
  159. }
  160. div.nav-box {
  161. border: 1px #ccc solid;
  162. -webkit-box-shadow: inset 0px 0px 12px #cccccc;
  163. -moz-box-shadow: inset 0px 0px 12px #cccccc;
  164. box-shadow: inset 0px 0px 12px #cccccc;
  165. margin-bottom: 0.5em;
  166. padding: 0 0 1em 1em;
  167. }
  168. div.nav-box h3 {
  169. line-height: 1;
  170. color: #777;
  171. }
  172. ul.icons-only {
  173. list-style: none outside;
  174. margin: 0 0 0 0.5em;
  175. }
  176. ul.icons-only li i {
  177. margin-right: 0.5em;
  178. line-height: 22px;
  179. }
  180. .bolder {
  181. font-weight: bolder;
  182. }
  183. .menu-box {
  184. border: 1px #c4c4c4 solid;
  185. border-radius: 3px;
  186. background: white;
  187. margin-right: -40px;
  188. margin-left: 15px;
  189. font-size: 11.2px;
  190. line-height: 1.3;
  191. padding: 4px 8px;
  192. }
  193. .menu-box h3 {
  194. background: #307b93;
  195. color: white;
  196. padding: 4px 4px 4px 12px;
  197. line-height: 1;
  198. margin-left: -14px;
  199. font-size: 16px;
  200. position: relative;
  201. }
  202. .menu-box h3::after {
  203. content: '';
  204. border-right: #15485c 5px solid;
  205. border-bottom: transparent 5px solid;
  206. position: absolute;
  207. bottom: -5px;
  208. left: 0px;
  209. }
  210. .menu-box ul.links {
  211. padding: 0;
  212. margin: 0 3px 1em;
  213. border-bottom: 1px #ebebeb solid;
  214. list-style: none outside;
  215. }
  216. .menu-box ul.links li {
  217. border-top: 1px #ebebeb solid;
  218. padding: 0;
  219. }
  220. .menu-box.demo-nav {
  221. float: right;
  222. width: 135px;
  223. }
  224. .menu-box.main-menu {
  225. float: right;
  226. width: 180px;
  227. margin-top: -95px;
  228. }
  229. pre {
  230. margin: 0 0 1.2em;
  231. }
  232. .alert p {
  233. margin-bottom: 0;
  234. }
  235. table.option-list tbody td.col1 {
  236. color: #777;
  237. font-weight: bolder;
  238. }
  239. table.option-list td.col1 {
  240. width: 19%;
  241. }
  242. table.option-list td.col2 {
  243. width: 31%;
  244. }
  245. table.option-list td.col3 {
  246. width: 50%;
  247. }
  248. code {
  249. border: none;
  250. color: #555;
  251. }