main.css 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
  1. /* Basic */
  2. body {
  3. margin: 0;
  4. overflow-x: hidden;
  5. }
  6. .browserupgrade {
  7. margin: 0;
  8. padding: .5em 1em;
  9. background-color: #fcfcfc;
  10. text-align: center;
  11. }
  12. /* Header */
  13. .docs-header {
  14. margin-bottom: 0;
  15. }
  16. .navbar-toggle:hover,
  17. .navbar-toggle:focus {
  18. border-color: #0074d9;
  19. }
  20. .navbar-toggle .icon-bar {
  21. background-color: #0074d9;
  22. }
  23. /* Jumbotron */
  24. .docs-jumbotron {
  25. background-color: #0074d9;
  26. color: #fff;
  27. }
  28. .docs-jumbotron .version {
  29. font-size: 14px;
  30. color: #fff;
  31. filter: alpha(opacity=50);
  32. opacity: 0.5;
  33. }
  34. /* Content */
  35. .img-container,
  36. .img-preview {
  37. background-color: #f7f7f7;
  38. width: 100%;
  39. text-align: center;
  40. }
  41. .img-container {
  42. min-height: 200px;
  43. max-height: 516px;
  44. margin-bottom: 20px;
  45. }
  46. @media (min-width: 768px) {
  47. .img-container {
  48. min-height: 516px;
  49. }
  50. }
  51. .img-container > img {
  52. max-width: 100%;
  53. }
  54. .docs-preview {
  55. margin-right: -15px;
  56. }
  57. .img-preview {
  58. float: left;
  59. margin-right: 10px;
  60. margin-bottom: 10px;
  61. overflow: hidden;
  62. }
  63. .img-preview > img {
  64. max-width: 100%;
  65. }
  66. .preview-lg {
  67. width: 263px;
  68. height: 148px;
  69. }
  70. .preview-md {
  71. width: 139px;
  72. height: 78px;
  73. }
  74. .preview-sm {
  75. width: 69px;
  76. height: 39px;
  77. }
  78. .preview-xs {
  79. width: 35px;
  80. height: 20px;
  81. margin-right: 0;
  82. }
  83. .docs-data > .input-group {
  84. margin-bottom: 10px;
  85. }
  86. .docs-data > .input-group > label {
  87. min-width: 80px;
  88. }
  89. .docs-data > .input-group > span {
  90. min-width: 50px;
  91. }
  92. .docs-buttons > .btn,
  93. .docs-buttons > .btn-group,
  94. .docs-buttons > .form-control {
  95. margin-right: 5px;
  96. margin-bottom: 10px;
  97. }
  98. .docs-toggles > .btn,
  99. .docs-toggles > .btn-group,
  100. .docs-toggles > .dropdown {
  101. margin-bottom: 10px;
  102. }
  103. .docs-tooltip {
  104. display: block;
  105. margin: -6px -12px;
  106. padding: 6px 12px;
  107. }
  108. .docs-tooltip > .icon {
  109. margin: 0 -3px;
  110. vertical-align: top;
  111. }
  112. .tooltip-inner {
  113. white-space: normal;
  114. }
  115. .btn-upload .tooltip-inner {
  116. white-space: nowrap;
  117. }
  118. @media (max-width: 400px) {
  119. .btn-group-crop {
  120. margin-right: -15px!important;
  121. }
  122. .btn-group-crop > .btn {
  123. padding-left: 5px;
  124. padding-right: 5px;
  125. }
  126. .btn-group-crop .docs-tooltip {
  127. margin-left: -5px;
  128. margin-right: -5px;
  129. padding-left: 5px;
  130. padding-right: 5px;
  131. }
  132. }
  133. .docs-options .dropdown-menu {
  134. width: 100%;
  135. }
  136. .docs-options .dropdown-menu > li {
  137. padding: 3px 20px;
  138. }
  139. .docs-options .dropdown-menu > li:hover {
  140. background-color: #f7f7f7;
  141. }
  142. .docs-options .dropdown-menu > li > label {
  143. display: block;
  144. }
  145. .docs-cropped .modal-body {
  146. text-align: center;
  147. }
  148. .docs-cropped .modal-body > img,
  149. .docs-cropped .modal-body > canvas {
  150. max-width: 100%;
  151. }
  152. /* Footer */
  153. .docs-footer {
  154. overflow: hidden;
  155. }
  156. .heart {
  157. position: relative;
  158. display: block;
  159. width: 100%;
  160. height: 30px;
  161. margin-top: 20px;
  162. margin-bottom: 20px;
  163. color: #ddd;
  164. font-size: 18px;
  165. line-height: 30px;
  166. text-align: center;
  167. }
  168. .heart:hover {
  169. color: #ff4136;
  170. }
  171. .heart:before {
  172. position: absolute;
  173. top: 50%;
  174. right: 0;
  175. left: 0;
  176. display: block;
  177. height: 0;
  178. border-top: 1px solid #eee;
  179. content: " ";
  180. }
  181. .heart:after {
  182. position: relative;
  183. z-index: 1;
  184. padding-left: 8px;
  185. padding-right: 8px;
  186. background-color: #fff;
  187. content: "♥";
  188. }