shepherd-theme-arrows.css 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. .shepherd-element, .shepherd-element:after, .shepherd-element:before, .shepherd-element *, .shepherd-element *:after, .shepherd-element *:before {
  2. -webkit-box-sizing: border-box;
  3. -moz-box-sizing: border-box;
  4. box-sizing: border-box; }
  5. .shepherd-element {
  6. position: absolute;
  7. display: none; }
  8. .shepherd-element.shepherd-open {
  9. display: block; }
  10. .shepherd-element.shepherd-theme-arrows {
  11. max-width: 100%;
  12. max-height: 100%; }
  13. .shepherd-element.shepherd-theme-arrows .shepherd-content {
  14. -webkit-border-radius: 5px;
  15. -moz-border-radius: 5px;
  16. -ms-border-radius: 5px;
  17. -o-border-radius: 5px;
  18. border-radius: 5px;
  19. position: relative;
  20. font-family: inherit;
  21. background: white;
  22. color: #444444;
  23. padding: 1em;
  24. font-size: 1.1em;
  25. line-height: 1.5em;
  26. -webkit-transform: translateZ(0);
  27. -moz-transform: translateZ(0);
  28. -ms-transform: translateZ(0);
  29. -o-transform: translateZ(0);
  30. transform: translateZ(0);
  31. -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  32. -moz-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  33. filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); }
  34. .shepherd-element.shepherd-theme-arrows .shepherd-content:before {
  35. content: "";
  36. display: block;
  37. position: absolute;
  38. width: 0;
  39. height: 0;
  40. border-color: transparent;
  41. border-width: 16px;
  42. border-style: solid; }
  43. .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-center .shepherd-content {
  44. margin-bottom: 16px; }
  45. .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-center .shepherd-content:before {
  46. top: 100%;
  47. left: 50%;
  48. margin-left: -16px;
  49. border-top-color: white; }
  50. .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-center .shepherd-content {
  51. margin-top: 16px; }
  52. .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-center .shepherd-content:before {
  53. bottom: 100%;
  54. left: 50%;
  55. margin-left: -16px;
  56. border-bottom-color: white; }
  57. .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-right.shepherd-element-attached-middle .shepherd-content {
  58. margin-right: 16px; }
  59. .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-right.shepherd-element-attached-middle .shepherd-content:before {
  60. left: 100%;
  61. top: 50%;
  62. margin-top: -16px;
  63. border-left-color: white; }
  64. .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-left.shepherd-element-attached-middle .shepherd-content {
  65. margin-left: 16px; }
  66. .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-left.shepherd-element-attached-middle .shepherd-content:before {
  67. right: 100%;
  68. top: 50%;
  69. margin-top: -16px;
  70. border-right-color: white; }
  71. .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-bottom .shepherd-content {
  72. margin-top: 16px; }
  73. .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-bottom .shepherd-content:before {
  74. bottom: 100%;
  75. left: 16px;
  76. border-bottom-color: white; }
  77. .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-bottom .shepherd-content {
  78. margin-top: 16px; }
  79. .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-bottom .shepherd-content:before {
  80. bottom: 100%;
  81. right: 16px;
  82. border-bottom-color: white; }
  83. .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-top .shepherd-content {
  84. margin-bottom: 16px; }
  85. .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-top .shepherd-content:before {
  86. top: 100%;
  87. left: 16px;
  88. border-top-color: white; }
  89. .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-top .shepherd-content {
  90. margin-bottom: 16px; }
  91. .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-top .shepherd-content:before {
  92. top: 100%;
  93. right: 16px;
  94. border-top-color: white; }
  95. .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-left .shepherd-content {
  96. margin-right: 16px; }
  97. .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-left .shepherd-content:before {
  98. top: 16px;
  99. left: 100%;
  100. border-left-color: white; }
  101. .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-right .shepherd-content {
  102. margin-left: 16px; }
  103. .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-right .shepherd-content:before {
  104. top: 16px;
  105. right: 100%;
  106. border-right-color: white; }
  107. .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-left .shepherd-content {
  108. margin-right: 16px; }
  109. .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-left .shepherd-content:before {
  110. bottom: 16px;
  111. left: 100%;
  112. border-left-color: white; }
  113. .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-right .shepherd-content {
  114. margin-left: 16px; }
  115. .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-right .shepherd-content:before {
  116. bottom: 16px;
  117. right: 100%;
  118. border-right-color: white; }
  119. .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-center.shepherd-has-title .shepherd-content:before, .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-bottom.shepherd-has-title .shepherd-content:before, .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-bottom.shepherd-has-title .shepherd-content:before {
  120. border-bottom-color: #eeeeee; }
  121. .shepherd-element.shepherd-theme-arrows.shepherd-has-title .shepherd-content header {
  122. background: #eeeeee;
  123. padding: 1em; }
  124. .shepherd-element.shepherd-theme-arrows.shepherd-has-title .shepherd-content header a.shepherd-cancel-link {
  125. padding: 0;
  126. margin-bottom: 0; }
  127. .shepherd-element.shepherd-theme-arrows.shepherd-has-cancel-link .shepherd-content header h3 {
  128. float: left; }
  129. .shepherd-element.shepherd-theme-arrows .shepherd-content {
  130. padding: 0; }
  131. .shepherd-element.shepherd-theme-arrows .shepherd-content * {
  132. font-size: inherit; }
  133. .shepherd-element.shepherd-theme-arrows .shepherd-content header {
  134. *zoom: 1;
  135. -webkit-border-radius: 5px 5px 0 0;
  136. -moz-border-radius: 5px 5px 0 0;
  137. -ms-border-radius: 5px 5px 0 0;
  138. -o-border-radius: 5px 5px 0 0;
  139. border-radius: 5px 5px 0 0; }
  140. .shepherd-element.shepherd-theme-arrows .shepherd-content header:after {
  141. content: "";
  142. display: table;
  143. clear: both; }
  144. .shepherd-element.shepherd-theme-arrows .shepherd-content header h3 {
  145. margin: 0;
  146. line-height: 1;
  147. font-weight: normal; }
  148. .shepherd-element.shepherd-theme-arrows .shepherd-content header a.shepherd-cancel-link {
  149. float: right;
  150. text-decoration: none;
  151. font-size: 1.25em;
  152. line-height: 0.8em;
  153. font-weight: normal;
  154. color: rgba(0, 0, 0, 0.5);
  155. opacity: 0.25;
  156. position: relative;
  157. top: 0.1em;
  158. padding: 0.8em;
  159. margin-bottom: -0.8em; }
  160. .shepherd-element.shepherd-theme-arrows .shepherd-content header a.shepherd-cancel-link:hover {
  161. opacity: 1; }
  162. .shepherd-element.shepherd-theme-arrows .shepherd-content .shepherd-text {
  163. padding: 1em; }
  164. .shepherd-element.shepherd-theme-arrows .shepherd-content .shepherd-text p {
  165. margin: 0 0 0.5em 0;
  166. line-height: 1.3em; }
  167. .shepherd-element.shepherd-theme-arrows .shepherd-content .shepherd-text p:last-child {
  168. margin-bottom: 0; }
  169. .shepherd-element.shepherd-theme-arrows .shepherd-content footer {
  170. padding: 0 1em 1em; }
  171. .shepherd-element.shepherd-theme-arrows .shepherd-content footer .shepherd-buttons {
  172. text-align: right;
  173. list-style: none;
  174. padding: 0;
  175. margin: 0; }
  176. .shepherd-element.shepherd-theme-arrows .shepherd-content footer .shepherd-buttons li {
  177. display: inline;
  178. padding: 0;
  179. margin: 0; }
  180. .shepherd-element.shepherd-theme-arrows .shepherd-content footer .shepherd-buttons li .shepherd-button {
  181. display: -moz-inline-stack;
  182. display: inline-block;
  183. vertical-align: middle;
  184. *vertical-align: auto;
  185. zoom: 1;
  186. *display: inline;
  187. -webkit-border-radius: 3px;
  188. -moz-border-radius: 3px;
  189. -ms-border-radius: 3px;
  190. -o-border-radius: 3px;
  191. border-radius: 3px;
  192. cursor: pointer;
  193. border: 0;
  194. margin: 0 0.5em 0 0;
  195. font-family: inherit;
  196. text-transform: uppercase;
  197. letter-spacing: 0.1em;
  198. font-size: 0.8em;
  199. line-height: 1em;
  200. padding: 0.75em 2em;
  201. background: #3288e6;
  202. color: white; }
  203. .shepherd-element.shepherd-theme-arrows .shepherd-content footer .shepherd-buttons li .shepherd-button.shepherd-button-secondary {
  204. background: #eeeeee;
  205. color: #888888; }
  206. .shepherd-element.shepherd-theme-arrows .shepherd-content footer .shepherd-buttons li:last-child .shepherd-button {
  207. margin-right: 0; }