demos.css 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. /* Jcrop Demo Site CSS - 2012 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: 2em auto;
  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 15px #000;
  104. /* Firefox */
  105. -webkit-box-shadow: 0px 0px 15px #000;
  106. /* Safari, Chrome */
  107. box-shadow: 0px 0px 15px #000;
  108. /* CSS3 */
  109. }
  110. .jcrop-fancy .jcrop-handle.ord-e {
  111. -webkit-border-top-left-radius: 0px;
  112. -webkit-border-bottom-left-radius: 0px;
  113. }
  114. .jcrop-fancy .jcrop-handle.ord-w {
  115. -webkit-border-top-right-radius: 0px;
  116. -webkit-border-bottom-right-radius: 0px;
  117. }
  118. .jcrop-fancy .jcrop-handle.ord-nw {
  119. -webkit-border-bottom-right-radius: 0px;
  120. }
  121. .jcrop-fancy .jcrop-handle.ord-ne {
  122. -webkit-border-bottom-left-radius: 0px;
  123. }
  124. .jcrop-fancy .jcrop-handle.ord-sw {
  125. -webkit-border-top-right-radius: 0px;
  126. }
  127. .jcrop-fancy .jcrop-handle.ord-se {
  128. -webkit-border-top-left-radius: 0px;
  129. }
  130. .jcrop-fancy .jcrop-handle.ord-s {
  131. -webkit-border-top-left-radius: 0px;
  132. -webkit-border-top-right-radius: 0px;
  133. }
  134. .jcrop-fancy .jcrop-handle.ord-n {
  135. -webkit-border-bottom-left-radius: 0px;
  136. -webkit-border-bottom-right-radius: 0px;
  137. }
  138. .description {
  139. margin: 16px 0;
  140. }
  141. .jcrop-droptarget canvas {
  142. background-color: #f0f0f0;
  143. }