jqx.web.css 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314
  1. /*Rounded Corners*/
  2. /*top-left rounded Corners*/
  3. .jqx-rc-tl-web {
  4. -moz-border-radius-topleft: 2px;
  5. -webkit-border-top-left-radius: 2px;
  6. border-top-left-radius: 2px;
  7. }
  8. /*top-right rounded Corners*/
  9. .jqx-rc-tr-web {
  10. -moz-border-radius-topright: 2px;
  11. -webkit-border-top-right-radius: 2px;
  12. border-top-right-radius: 2px;
  13. }
  14. /*bottom-left rounded Corners*/
  15. .jqx-rc-bl-web {
  16. -moz-border-radius-bottomleft: 2px;
  17. -webkit-border-bottom-left-radius: 2px;
  18. border-bottom-left-radius: 2px;
  19. }
  20. /*bottom-right rounded Corners*/
  21. .jqx-rc-br-web {
  22. -moz-border-radius-bottomright: 2px;
  23. -webkit-border-bottom-right-radius: 2px;
  24. border-bottom-right-radius: 2px;
  25. }
  26. /*top rounded Corners*/
  27. .jqx-rc-t-web {
  28. -moz-border-radius-topleft: 2px;
  29. -webkit-border-top-left-radius: 2px;
  30. border-top-left-radius: 2px;
  31. -moz-border-radius-topright: 2px;
  32. -webkit-border-top-right-radius: 2px;
  33. border-top-right-radius: 2px;
  34. }
  35. /*bottom rounded Corners*/
  36. .jqx-rc-b-web {
  37. -moz-border-radius-bottomleft: 2px;
  38. -webkit-border-bottom-left-radius: 2px;
  39. border-bottom-left-radius: 2px;
  40. -moz-border-radius-bottomright: 2px;
  41. -webkit-border-bottom-right-radius: 2px;
  42. border-bottom-right-radius: 2px;
  43. }
  44. /*right rounded Corners*/
  45. .jqx-rc-r-web {
  46. -moz-border-radius-topright: 2px;
  47. -webkit-border-top-right-radius: 2px;
  48. border-top-right-radius: 2px;
  49. -moz-border-radius-bottomright: 2px;
  50. -webkit-border-bottom-right-radius: 2px;
  51. border-bottom-right-radius: 2px;
  52. }
  53. /*left rounded Corners*/
  54. .jqx-rc-l-web {
  55. -moz-border-radius-topleft: 2px;
  56. -webkit-border-top-left-radius: 2px;
  57. border-top-left-radius: 2px;
  58. -moz-border-radius-bottomleft: 2px;
  59. -webkit-border-bottom-left-radius: 2px;
  60. border-bottom-left-radius: 2px;
  61. }
  62. /*all rounded Corners*/
  63. .jqx-rc-all-web {
  64. -moz-border-radius: 2px;
  65. -webkit-border-radius: 2px;
  66. border-radius: 2px;
  67. }
  68. .jqx-widget-web, .jqx-widget-content, .jqx-widget-header, .jqx-input-web {
  69. -webkit-transition: box-shadow linear 0.2s;
  70. -moz-transition: box-shadow linear 0.2s;
  71. -o-transition: box-shadow linear 0.2s;
  72. transition: box-shadow linear 0.2s;
  73. }
  74. .jqx-listitem-state-normal-web, .jqx-listitem-state-hover-web,.jqx-listitem-state-selected-web,
  75. .jqx-tabs-title-selected-top-web, .jqx-tabs-title-selected-bottom-web{
  76. -webkit-transition: none;
  77. -moz-transition: none;
  78. -o-transition: none;
  79. transition: none;
  80. }
  81. .jqx-fill-state-normal-web {
  82. box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75);;
  83. -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75);;
  84. -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75);;
  85. }
  86. .jqx-widget-header-web, .jqx-fill-state-normal-web {
  87. text-shadow: 0 1px 0 rgb(240, 240, 240);
  88. border-color: #b2b2b2;
  89. border-color: rgba(0, 0, 0, 0.25);
  90. color: #444;
  91. background-color: #f0f0f0;
  92. background-image: linear-gradient(#ededed, #ededed 38%, #dedede);
  93. background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
  94. background-image: -moz-linear-gradient(#ededed, #ededed 38%, #dedede);
  95. background-image: -o-linear-gradient(#ededed, #ededed 38%, #dedede);
  96. -webkit-transition: color 200ms;
  97. }
  98. .jqx-widget-content-web {
  99. border-color: #b2b2b2;
  100. border-color: rgba(0, 0, 0, 0.25);
  101. }
  102. .jqx-fill-state-hover-web {
  103. text-shadow: 0 1px 0 rgb(240, 240, 240);
  104. border-color: #b2b2b2;
  105. border-color: rgba(0, 0, 0, 0.3);
  106. color: black;
  107. background-color: #f0f0f0;
  108. background-image: linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
  109. background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
  110. background-image: -moz-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
  111. background-image: -o-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
  112. box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.95);
  113. -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.95);
  114. -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.95);
  115. -webkit-transition: color 200ms;
  116. }
  117. .jqx-fill-state-pressed-web {
  118. box-shadow: none;
  119. -webkit-box-shadow: none;
  120. -moz-box-shadow: none;
  121. text-shadow: none;
  122. background-color: #f0f0f0;
  123. background-image: linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
  124. background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
  125. background-image: -moz-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
  126. background-image: -o-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
  127. -webkit-transition: color 200ms;
  128. }
  129. .jqx-grid-column-menubutton-web {
  130. background-color: transparent;
  131. }
  132. .jqx-calendar-row-header-web, .jqx-calendar-top-left-header-web {
  133. background-color: #f0f0f0;
  134. border: 0px solid #f2f2f2;
  135. }
  136. .jqx-calendar-column-header-web {
  137. background-color: #FFF;
  138. border-top: 1px solid #FFF;
  139. border-bottom: 1px solid #e9e9e9;
  140. }
  141. .jqx-scrollbar-state-normal-web {
  142. background-color: #f0f0f0;
  143. border: 1px solid #f0f0f0;
  144. }
  145. .jqx-grid-cell-hover-web {
  146. box-shadow: none;
  147. -webkit-box-shadow: none;
  148. -moz-box-shadow: none;
  149. }
  150. .jqx-scrollbar-thumb-state-normal-web {
  151. background-color: #f0f0f0;
  152. background-image: linear-gradient(left, #ededed, #ededed 38%, #dedede);
  153. background-image: -webkit-linear-gradient(left, #ededed, #ededed 38%, #dedede);
  154. background-image: -moz-linear-gradient(left, #ededed, #ededed 38%, #dedede);
  155. background-image: -o-linear-gradient(left, #ededed, #ededed 38%, #dedede);
  156. background-image: -ms-linear-gradient(left, #ededed, #ededed 38%, #dedede);
  157. }
  158. .jqx-scrollbar-thumb-state-hover-web {
  159. background-color: #f0f0f0;
  160. background-image: linear-gradient(left,#f0f0f0, #f0f0f0 38%, #e0e0e0);
  161. background-image: -webkit-linear-gradient(left,#f0f0f0, #f0f0f0 38%, #e0e0e0);
  162. background-image: -moz-linear-gradient(left,#f0f0f0, #f0f0f0 38%, #e0e0e0);
  163. background-image: -o-linear-gradient(left,#f0f0f0, #f0f0f0 38%, #e0e0e0);
  164. background-image: -ms-linear-gradient(left,#f0f0f0, #f0f0f0 38%, #e0e0e0);
  165. }
  166. .jqx-splitter-collapse-button-vertical-web, .jqx-splitter-collapse-button-horizontal-web {
  167. background: #b2b2b2;
  168. }
  169. .jqx-scrollbar-thumb-state-pressed-web, .jqx-progressbar-value-vertical-web{
  170. background-color: #f0f0f0;
  171. background-image: linear-gradient(left, #e7e7e7, #e7e7e7 38%, #d7d7d7);
  172. background-image: -webkit-linear-gradient(left, #e7e7e7, #e7e7e7 38%, #d7d7d7);
  173. background-image: -moz-linear-gradient(left, #e7e7e7, #e7e7e7 38%, #d7d7d7);
  174. background-image: -o-linear-gradient(left, #e7e7e7, #e7e7e7 38%, #d7d7d7);
  175. background-image: -ms-linear-gradient(left, #e7e7e7, #e7e7e7 38%, #d7d7d7);
  176. }
  177. .jqx-grid-column-sortdescbutton-web, jqx-grid-column-filterbutton-web, .jqx-grid-column-sortascbutton-web {
  178. background-color: transparent;
  179. border-style: solid;
  180. border-width: 0px 0px 0px 0px;
  181. border-color: #b2b2b2;
  182. }
  183. .jqx-slider-rangebar-web {
  184. background: #C3C3C3;
  185. }
  186. .jqx-menu-vertical-web {
  187. background: #f5f5f5;
  188. filter: none;
  189. }
  190. .jqx-checkbox-check-checked-web {
  191. background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAcklEQVQY02NgwA/YoJgoEA/Es4DYgJBCJSBeD8SboRinBiYg7kZS2IosyQ/Eakh8LySFq4FYHFlxGRBvBOJYqMRqJMU+yApNkSRAeC0Sux3dfSCTetE0wKyXxOWhMKhTYIr9CAUXyJMzgLgBagBBgDPGAI2LGdNt0T1AAAAAAElFTkSuQmCC');
  192. }
  193. .jqx-combobox-content-web, .jqx-input-web {
  194. border-color: #b2b2b2;
  195. box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  196. -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  197. -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  198. }
  199. .jqx-combobox-content-web {
  200. border-color: #b2b2b2;
  201. border-color: rgba(0, 0, 0, 0.25);
  202. }
  203. .jqx-fill-state-focus-web, .jqx-combobox-content-focus-web, .jqx-numberinput-focus-web {
  204. outline: none;
  205. border-color: #777777;
  206. }
  207. .jqx-dropdownbutton-popup-web.jqx-fill-state-focus-web {
  208. }
  209. .jqx-grid-bottomright-web, .jqx-panel-bottomright-web, .jqx-listbox-bottomright-web {
  210. background-color: #efefef;
  211. }
  212. .jqx-tabs-title-selected-top-web, .jqx-tabs-selection-tracker-top-web {
  213. border-color: #b2b2b2;
  214. border-bottom: 1px solid #fff;
  215. text-shadow: 0 1px 0 #f2f2f2;
  216. filter: none;
  217. color: #222;
  218. background: #fff;
  219. }
  220. .jqx-tabs-title-selected-bottom-web, .jqx-tabs-selection-tracker-bottom-web {
  221. border-color: #b2b2b2;
  222. border-top: 1px solid #fff;
  223. text-shadow: 0 1px 0 #f2f2f2;
  224. filter: none;
  225. color: #222;
  226. background: #fff;
  227. }
  228. .jqx-popup-web {
  229. -webkit-box-shadow: 4px 4px 23px rgba(0, 0, 0, 0.15);
  230. -moz-box-shadow: 4px 4px 23px rgba(0, 0, 0, 0.15);
  231. box-shadow: 4px 4px 23px rgba(0, 0, 0, 0.15);
  232. }
  233. .jqx-menu-popup-web>div:first-child{
  234. padding-bottom: 15px !important;
  235. padding-right: 15px !important;
  236. }
  237. .jqx-menu-popup-clear-web>div:first-child{
  238. padding-bottom: 0px !important;
  239. }
  240. .jqx-window-web, .jqx-tooltip-web {
  241. -webkit-box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15);
  242. -moz-box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15);
  243. box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15);
  244. }
  245. .jqx-docking-web .jqx-window-web {
  246. -webkit-box-shadow: none;
  247. -moz-box-shadow: none;
  248. }
  249. .jqx-docking-panel-web .jqx-window-web {
  250. -webkit-box-shadow: none;
  251. -moz-box-shadow: none;
  252. box-shadow: none;
  253. }
  254. .jqx-radiobutton-web {
  255. background-repeat: no-repeat;
  256. background: none;
  257. }
  258. .jqx-radiobutton-web-web, .jqx-radiobutton-hover-web {
  259. -moz-border-radius: 100%;
  260. -webkit-border-radius: 100%;
  261. border-radius: 100%;
  262. background-repeat: no-repeat;
  263. }
  264. .jqx-radiobutton-check-checked-web {
  265. filter: none;
  266. background: #666;
  267. background-repeat: no-repeat;
  268. -moz-border-radius: 100%;
  269. -webkit-border-radius: 100%;
  270. border-radius: 100%;
  271. }
  272. .jqx-radiobutton-check-indeterminate-web {
  273. filter: none;
  274. background: #999;
  275. -moz-border-radius: 100%;
  276. -webkit-border-radius: 100%;
  277. border-radius: 100%;
  278. }
  279. .jqx-radiobutton-check-indeterminate-disabled-web {
  280. filter: none;
  281. background: #999;
  282. -moz-border-radius: 100%;
  283. -webkit-border-radius: 100%;
  284. border-radius: 100%;
  285. }
  286. .jqx-slider-track-horizontal-web, .jqx-slider-track-vertical-web {
  287. border-color: #b2b2b2;
  288. background: #f0f0f0;
  289. }
  290. .jqx-slider-button-web
  291. {
  292. -moz-border-radius: 100%;
  293. -webkit-border-radius: 100%;
  294. border-radius: 100%;
  295. }
  296. .jqx-layout-web
  297. {
  298. background-color: #b2b2b2;
  299. }