e6c4b8854b514a294477b51135c33e1cf817e089b51ef703193ec5bf1a6a21a36b616d59fd69db15dce74f6f56bbcaa20b4465e1f108f028e2d59bb4d27006 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. /*
  2. Handsontable Mobile Text Editor stylesheet
  3. */
  4. .handsontable.mobile,
  5. .handsontable.mobile .wtHolder {
  6. -webkit-touch-callout:none;
  7. -webkit-user-select:none;
  8. -khtml-user-select:none;
  9. -moz-user-select:none;
  10. -ms-user-select:none;
  11. user-select:none;
  12. -webkit-tap-highlight-color:rgba(0,0,0,0);
  13. -webkit-overflow-scrolling: touch;
  14. }
  15. .htMobileEditorContainer {
  16. display: none;
  17. position: absolute;
  18. top: 0;
  19. width: 70%;
  20. height: 54pt;
  21. background: #f8f8f8;
  22. border-radius: 20px;
  23. border: 1px solid #ebebeb;
  24. z-index: 999;
  25. box-sizing: border-box;
  26. -webkit-box-sizing: border-box;
  27. -webkit-text-size-adjust: none;
  28. }
  29. .topLeftSelectionHandle:not(.ht_master .topLeftSelectionHandle),
  30. .topLeftSelectionHandle-HitArea:not(.ht_master .topLeftSelectionHandle-HitArea) {
  31. z-index: 9999;
  32. }
  33. /* Initial left/top coordinates - overwritten when actual position is set */
  34. .topLeftSelectionHandle,
  35. .topLeftSelectionHandle-HitArea,
  36. .bottomRightSelectionHandle,
  37. .bottomRightSelectionHandle-HitArea {
  38. left: -10000px;
  39. top: -10000px;
  40. }
  41. .htMobileEditorContainer.active {
  42. display: block;
  43. }
  44. .htMobileEditorContainer .inputs {
  45. position: absolute;
  46. right: 210pt;
  47. bottom: 10pt;
  48. top: 10pt;
  49. left: 14px;
  50. height: 34pt;
  51. }
  52. .htMobileEditorContainer .inputs textarea {
  53. font-size: 13pt;
  54. border: 1px solid #a1a1a1;
  55. -webkit-appearance: none;
  56. -webkit-box-shadow: none;
  57. -moz-box-shadow: none;
  58. box-shadow: none;
  59. position: absolute;
  60. left: 14px;
  61. right: 14px;
  62. top: 0;
  63. bottom: 0;
  64. padding: 7pt;
  65. }
  66. .htMobileEditorContainer .cellPointer {
  67. position: absolute;
  68. top: -13pt;
  69. height: 0;
  70. width: 0;
  71. left: 30px;
  72. border-left: 13pt solid transparent;
  73. border-right: 13pt solid transparent;
  74. border-bottom: 13pt solid #ebebeb;
  75. }
  76. .htMobileEditorContainer .cellPointer.hidden {
  77. display: none;
  78. }
  79. .htMobileEditorContainer .cellPointer:before {
  80. content: '';
  81. display: block;
  82. position: absolute;
  83. top: 2px;
  84. height: 0;
  85. width: 0;
  86. left: -13pt;
  87. border-left: 13pt solid transparent;
  88. border-right: 13pt solid transparent;
  89. border-bottom: 13pt solid #f8f8f8;
  90. }
  91. .htMobileEditorContainer .moveHandle {
  92. position: absolute;
  93. top: 10pt;
  94. left: 5px;
  95. width: 30px;
  96. bottom: 0px;
  97. cursor: move;
  98. z-index: 9999;
  99. }
  100. .htMobileEditorContainer .moveHandle:after {
  101. content: "..\a..\a..\a..";
  102. white-space: pre;
  103. line-height: 10px;
  104. font-size: 20pt;
  105. display: inline-block;
  106. margin-top: -8px;
  107. color: #ebebeb;
  108. }
  109. .htMobileEditorContainer .positionControls {
  110. width: 205pt;
  111. position: absolute;
  112. right: 5pt;
  113. top: 0;
  114. bottom: 0;
  115. }
  116. .htMobileEditorContainer .positionControls > div {
  117. width: 50pt;
  118. height: 100%;
  119. float: left;
  120. }
  121. .htMobileEditorContainer .positionControls > div:after {
  122. content: " ";
  123. display: block;
  124. width: 15pt;
  125. height: 15pt;
  126. text-align: center;
  127. line-height: 50pt;
  128. }
  129. .htMobileEditorContainer .leftButton:after,
  130. .htMobileEditorContainer .rightButton:after,
  131. .htMobileEditorContainer .upButton:after,
  132. .htMobileEditorContainer .downButton:after {
  133. transform-origin: 5pt 5pt;
  134. -webkit-transform-origin: 5pt 5pt;
  135. margin: 21pt 0 0 21pt;
  136. }
  137. .htMobileEditorContainer .leftButton:after {
  138. border-top: 2px solid #288ffe;
  139. border-left: 2px solid #288ffe;
  140. -webkit-transform: rotate(-45deg);
  141. /*margin-top: 17pt;*/
  142. /*margin-left: 20pt;*/
  143. }
  144. .htMobileEditorContainer .leftButton:active:after {
  145. border-color: #cfcfcf;
  146. }
  147. .htMobileEditorContainer .rightButton:after {
  148. border-top: 2px solid #288ffe;
  149. border-left: 2px solid #288ffe;
  150. -webkit-transform: rotate(135deg);
  151. /*margin-top: 17pt;*/
  152. /*margin-left: 10pt;*/
  153. }
  154. .htMobileEditorContainer .rightButton:active:after {
  155. border-color: #cfcfcf;
  156. }
  157. .htMobileEditorContainer .upButton:after {
  158. /*border-top: 2px solid #cfcfcf;*/
  159. border-top: 2px solid #288ffe;
  160. border-left: 2px solid #288ffe;
  161. -webkit-transform: rotate(45deg);
  162. /*margin-top: 22pt;*/
  163. /*margin-left: 15pt;*/
  164. }
  165. .htMobileEditorContainer .upButton:active:after {
  166. border-color: #cfcfcf;
  167. }
  168. .htMobileEditorContainer .downButton:after {
  169. border-top: 2px solid #288ffe;
  170. border-left: 2px solid #288ffe;
  171. -webkit-transform: rotate(225deg);
  172. /*margin-top: 15pt;*/
  173. /*margin-left: 15pt;*/
  174. }
  175. .htMobileEditorContainer .downButton:active:after {
  176. border-color: #cfcfcf;
  177. }
  178. .handsontable.hide-tween {
  179. -webkit-animation: opacity-hide 0.3s;
  180. animation: opacity-hide 0.3s;
  181. animation-fill-mode: forwards;
  182. -webkit-animation-fill-mode: forwards;
  183. }
  184. .handsontable.show-tween {
  185. -webkit-animation: opacity-show 0.3s;
  186. animation: opacity-show 0.3s;
  187. animation-fill-mode: forwards;
  188. -webkit-animation-fill-mode: forwards;
  189. }