jqx.metro.css 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349
  1. .jqx-rc-tl-metro
  2. {
  3. -moz-border-radius-topleft: 0px;
  4. -webkit-border-top-left-radius: 0px;
  5. border-top-left-radius: 0px;
  6. }
  7. .jqx-rc-tr-metro
  8. {
  9. -moz-border-radius-topright: 0px;
  10. -webkit-border-top-right-radius: 0px;
  11. border-top-right-radius: 0px;
  12. }
  13. .jqx-rc-bl-metro
  14. {
  15. -moz-border-radius-bottomleft: 0px;
  16. -webkit-border-bottom-left-radius: 0px;
  17. border-bottom-left-radius: 0px;
  18. }
  19. .jqx-rc-br-metro
  20. {
  21. -moz-border-radius-bottomright: 0px;
  22. -webkit-border-bottom-right-radius: 0px;
  23. border-bottom-right-radius: 0px;
  24. }
  25. /*top rounded Corners*/
  26. .jqx-rc-t-metro
  27. {
  28. -moz-border-radius-topleft: 0px;
  29. -webkit-border-top-left-radius: 0px;
  30. border-top-left-radius: 0px;
  31. -moz-border-radius-topright: 0px;
  32. -webkit-border-top-right-radius: 0px;
  33. border-top-right-radius: 0px;
  34. }
  35. /*bottom rounded Corners*/
  36. .jqx-rc-b-metro
  37. {
  38. -moz-border-radius-bottomleft: 0px;
  39. -webkit-border-bottom-left-radius: 0px;
  40. border-bottom-left-radius: 0px;
  41. -moz-border-radius-bottomright: 0px;
  42. -webkit-border-bottom-right-radius: 0px;
  43. border-bottom-right-radius: 0px;
  44. }
  45. /*right rounded Corners*/
  46. .jqx-rc-r-metro
  47. {
  48. -moz-border-radius-topright: 0px;
  49. -webkit-border-top-right-radius: 0px;
  50. border-top-right-radius: 0px;
  51. -moz-border-radius-bottomright: 0px;
  52. -webkit-border-bottom-right-radius: 0px;
  53. border-bottom-right-radius: 0px;
  54. }
  55. /*left rounded Corners*/
  56. .jqx-rc-l-metro
  57. {
  58. -moz-border-radius-topleft: 0px;
  59. -webkit-border-top-left-radius: 0px;
  60. border-top-left-radius: 0px;
  61. -moz-border-radius-bottomleft: 0px;
  62. -webkit-border-bottom-left-radius: 0px;
  63. border-bottom-left-radius: 0px;
  64. }
  65. /*all rounded Corners*/
  66. .jqx-rc-all-metro
  67. {
  68. -moz-border-radius: 0px;
  69. -webkit-border-radius: 0px;
  70. border-radius: 0px;
  71. }
  72. .jqx-widget-metro {
  73. font-size: 12px;
  74. font-family: 'segoe ui', arial, sans-serif;
  75. }
  76. .jqx-widget-content-metro{font-size: 12px; font-family: 'segoe ui', arial, sans-serif; border-color: #e5e5e5; color: #767676; background-color: #fff;}
  77. .jqx-widget-header-metro{font-size: 12px; font-family: 'segoe ui', arial, sans-serif; color: #767676; border-color:#e5e5e5; background-color:#f4f4f4;}
  78. .jqx-fill-state-normal-metro{font-size: 12px; font-family: 'segoe ui', arial, sans-serif; border-color: #e5e5e5; color: #767676; background: #ffffff;}
  79. .jqx-button-metro {border-color: #e5e5e5;}
  80. .jqx-fill-state-hover-metro{border-color:#dedede; color: #000; background-color:#dedede;
  81. }
  82. .jqx-fill-state-focus-metro { border-color: #cdcdcd; }
  83. .jqx-fill-state-pressed-metro{border-color:#1faeff; color: #fff; background-color:#1faeff;
  84. }
  85. .jqx-input-metro {
  86. border-color: #e5e5e5;
  87. }
  88. .jqx-scrollbar-state-normal-metro, .jqx-grid-bottomright-metro, .jqx-panel-bottomright-metro, .jqx-listbox-bottomright-metro{background-color:#f0f0f0;}
  89. .jqx-widget-metro .jqx-grid-column-header-metro, .jqx-grid-cell-metro, .jqx-widget-metro .jqx-grid-cell-metro, .jqx-widget-metro .jqx-grid-group-cell-metro, .jqx-grid-group-cell-metro{font-size: 12px; font-family: 'segoe ui', arial, sans-serif; border-color:#f0f0f0;}
  90. .jqx-tabs-title-selected-bottom-metro, .jqx-tabs-selection-tracker-bottom-metro, .jqx-tabs-title-selected-top-metro, .jqx-tabs-selection-tracker-top-metro{color: #767676; border-color:#e5e5e5; border-bottom:1px solid #fff; background:#fff}
  91. .jqx-grid-cell-sort-alt-metro, .jqx-grid-cell-filter-alt-metro, .jqx-grid-cell-pinned-metro, .jqx-grid-cell-alt-metro, .jqx-grid-cell-sort-metro{ background-color:#ededed; color: #000;}
  92. .jqx-menu-vertical-metro{background: #fff; border-color: #e5e5e5;}
  93. .jqx-widget-metro .jqx-grid-cell-metro, .jqx-widget-metro .jqx-grid-column-header-metro, .jqx-widget-metro .jqx-grid-group-cell-metro {color: #000; border-color: #e5e5e5;}
  94. .jqx-widget-metro .jqx-grid-column-menubutton-metro, .jqx-widget-metro .jqx-grid-column-sortascbutton-metro, .jqx-widget-metro .jqx-grid-column-sortdescbutton-metro, .jqx-widget-metro .jqx-grid-column-filterbutton-metro {
  95. background-color: transparent;
  96. border-color: #e5e5e5;
  97. }
  98. .jqx-window-header-metro, .jqx-input-button-header-metro, .jqx-calendar-title-header-metro, .jqx-grid-metro .jqx-widget-header-metro, .jqx-grid-header-metro, .jqx-grid-column-header-metro {font-size: 12px; font-family: 'segoe ui', arial, sans-serif; border-color: #e5e5e5; color: #767676; background: #f4f4f4;}
  99. .jqx-grid-column-menubutton-metro {
  100. background-image: url('images/metro-icon-down.png');
  101. }
  102. .jqx-widget-metro .jqx-grid-cell-selected-metro, .jqx-grid-cell-selected-metro{ background-color:#1faeff; border-color: #1faeff; font-size: 12px; color:#fff;}
  103. .jqx-grid-cell-hover-metro{ background-color:#dedede;}
  104. /*applied to the column's sort button when the sort order is ascending.*/
  105. .jqx-grid-column-sortascbutton-metro {
  106. background-image: url('images/metro-icon-up.png');
  107. }
  108. .jqx-grid-column-sortdescbutton-metro {
  109. background-image: url('images/metro-icon-down.png');
  110. }
  111. .jqx-checkbox-hover-metro {
  112. background-color: #fff;
  113. }
  114. .jqx-radiobutton-hover-metro {
  115. background-color: #fff;
  116. }
  117. .jqx-scrollbar-thumb-state-normal-horizontal-metro, .jqx-scrollbar-thumb-state-normal-metro {
  118. background: #cdcdcd; border-color: #cdcdcd;
  119. }
  120. .jqx-scrollbar-thumb-state-hover-horizontal-metro, .jqx-scrollbar-thumb-state-hover-metro {
  121. background: #a6a6a6; border-color: #a6a6a6;
  122. }
  123. .jqx-scrollbar-thumb-state-pressed-horizontal-metro, .jqx-scrollbar-thumb-state-pressed-metro {
  124. background: #606060; border-color: #606060;
  125. }
  126. .jqx-scrollbar-button-state-normal-metro
  127. {
  128. border: 1px solid #f0f0f0;
  129. background: #f0f0f0;
  130. }
  131. /*applied to the scrollbar buttons in hovered state.*/
  132. .jqx-scrollbar-button-state-hover-metro
  133. {
  134. border: 1px solid #dadada;
  135. background: #dadada;
  136. }
  137. /*applied to the scrollbar buttons in pressed state.*/
  138. .jqx-scrollbar-button-state-pressed-metro
  139. {
  140. border: 1px solid #606060;
  141. background: #606060;
  142. }
  143. /*icons*/
  144. .jqx-window-collapse-button-metro
  145. {
  146. background-image: url(images/metro-icon-up.png);
  147. }
  148. .jqx-window-collapse-button-collapsed-metro {
  149. background-image: url(images/metro-icon-down.png);
  150. }
  151. .jqx-icon-arrow-up-metro, .jqx-expander-arrow-bottom-metro, .jqx-menu-item-arrow-up-metro
  152. {
  153. background-image: url('images/metro-icon-up.png');
  154. }
  155. .jqx-icon-arrow-down-metro, .jqx-expander-arrow-top-metro, .jqx-tree-item-arrow-expand-metro, .jqx-tree-item-arrow-expand-hover-metro, .jqx-menu-item-arrow-down-metro
  156. {
  157. background-image: url('images/metro-icon-down.png');
  158. }
  159. .jqx-icon-arrow-left-metro, .jqx-menu-item-arrow-left-metro
  160. {
  161. background-image: url('images/metro-icon-left.png');
  162. }
  163. .jqx-icon-arrow-right-metro, .jqx-menu-item-arrow-right-metro, .jqx-tree-item-arrow-collapse-metro, .jqx-tree-item-arrow-collapse-hover-metro
  164. {
  165. background-image: url('images/metro-icon-right.png');
  166. }
  167. .jqx-tabs-arrow-left-metro, .jqx-tree-item-arrow-collapse-rtl-metro, .jqx-tree-item-arrow-collapse-hover-rtl-metro
  168. {
  169. background-image: url('images/metro-icon-left.png');
  170. }
  171. .jqx-tabs-arrow-right-metro
  172. {
  173. background-image: url('images/metro-icon-right.png');
  174. }
  175. .jqx-menu-item-arrow-up-selected-metro, .jqx-icon-arrow-up-selected-metro{background-image:url('images/metro-icon-up-white.png');background-repeat:no-repeat;background-position:center;}
  176. .jqx-menu-item-arrow-down-selected-metro, .jqx-icon-arrow-down-selected-metro{background-image:url('images/metro-icon-down-white.png');background-repeat:no-repeat;background-position:center;}
  177. .jqx-menu-item-arrow-left-selected-metro, .jqx-icon-arrow-left-selected-metro{background-image:url('images/metro-icon-left-white.png');background-repeat:no-repeat;background-position:center;}
  178. .jqx-menu-item-arrow-right-selected-metro, .jqx-icon-arrow-right-selected-metro{background-image:url('images/metro-icon-right-white.png');background-repeat:no-repeat;background-position:center;}
  179. .jqx-tabs-close-button-metro{background-image:url(images/close.png); background-repeat:no-repeat; background-position:center;}
  180. .jqx-tabs-close-button-selected-metro{background-image:url(images/close.png); background-repeat:no-repeat; background-position:center;}
  181. .jqx-tabs-close-button-hover-metro{background-image:url(images/close.png); background-repeat:no-repeat; background-position:center;}
  182. .jqx-scrollbar-metro .jqx-icon-arrow-up-selected-metro{background-image:url('images/metro-icon-up-white.png'); background-repeat:no-repeat; background-position:center;}
  183. .jqx-scrollbar-metro .jqx-icon-arrow-down-selected-metro{background-image:url('images/metro-icon-down-white.png'); background-repeat:no-repeat; background-position:center;}
  184. .jqx-scrollbar-metro .jqx-icon-arrow-left-selected-metro{background-image:url('images/metro-icon-left-white.png'); background-repeat:no-repeat; background-position:center;}
  185. .jqx-scrollbar-metro .jqx-icon-arrow-right-selected-metro{background-image:url('images/metro-icon-right-white.png');background-repeat:no-repeat; background-position:center;}
  186. .jqx-slider-slider-metro
  187. {
  188. border-color:#cdcdcd;
  189. }
  190. .jqx-slider-button-metro
  191. {
  192. -moz-border-radius: 9px;
  193. -webkit-border-radius: 9px;
  194. border-radius: 9px;
  195. border-color: #cdcdcd;
  196. }
  197. .jqx-input-button-content-metro
  198. {
  199. font-size: 10px;
  200. }
  201. .jqx-dropdownlist-state-normal-metro, .jqx-dropdownlist-state-hover-metro, .jqx-dropdownlist-state-selected-metro,
  202. .jqx-scrollbar-button-state-hover-metro, .jqx-scrollbar-button-state-normal-metro, .jqx-scrollbar-button-state-pressed-metro,
  203. .jqx-scrollbar-thumb-state-normal-horizontal-metro, .jqx-scrollbar-thumb-state-hover-horizontal-metro, .jqx-scrollbar-thumb-state-pressed-horizontal-metro,
  204. .jqx-scrollbar-thumb-state-normal-metro, .jqx-scrollbar-thumb-state-pressed-metro, .jqx-button-metro, .jqx-tree-item-hover-metro, .jqx-tree-item-selected-metro,
  205. .jqx-tree-item-metro, .jqx-menu-item-metro, .jqx-menu-item-hover-metro, .jqx-menu-item-selected-metro, .jqx-menu-item-top-metro, .jqx-menu-item-top-hover-metro,
  206. .jqx-menu-item-top-selected-metro, .jqx-slider-button-metro, .jqx-slider-slider-metro
  207. {
  208. -webkit-transition: background-color 100ms linear;
  209. -moz-transition: background-color 100ms linear;
  210. -o-transition: background-color 100ms linear;
  211. -ms-transition: background-color 100ms linear;
  212. transition: background-color 100ms linear;
  213. }
  214. .jqx-switchbutton-metro {
  215. -moz-border-radius: 0px;
  216. -webkit-border-radius: 0px;
  217. border-radius: 0px;
  218. border: 2px solid #a6a6a6;
  219. }
  220. .jqx-switchbutton-thumb-metro {
  221. width: 12px;
  222. background: #000;
  223. border: 1px solid #000;
  224. }
  225. .jqx-switchbutton-label-on-metro {
  226. background: #1faeff;
  227. color: #1faeff;
  228. }
  229. .jqx-switchbutton-label-off-metro {
  230. background: #a6a6a6;
  231. color: #a6a6a6;
  232. }
  233. .jqx-switchbutton-wrapper-metro {
  234. }
  235. .jqx-grid-cell-metro.jqx-grid-cell-selected-metro>.jqx-grid-group-expand-metro {
  236. background-image: url('images/metro-icon-down-white.png');
  237. background-repeat: no-repeat;
  238. background-position: center;
  239. }
  240. .jqx-grid-cell-metro.jqx-grid-cell-selected-metro>.jqx-grid-group-collapse-metro{
  241. background-image: url('images/metro-icon-right-white.png');
  242. background-repeat: no-repeat;
  243. background-position: center;
  244. }
  245. .jqx-grid-cell-metro.jqx-grid-cell-selected-metro>.jqx-grid-group-collapse-rtl-metro {
  246. background-image: url('images/metro-icon-left-white.png');
  247. background-repeat: no-repeat;
  248. background-position: center;
  249. }
  250. .jqx-grid-cell-metro.jqx-grid-cell-selected-metro>.jqx-grid-group-expand-rtl-metro{
  251. background-image: url('images/metro-icon-down-white.png');
  252. background-repeat: no-repeat;
  253. background-position: center;
  254. }
  255. .jqx-grid-group-collapse-metro {
  256. background-image: url(images/metro-icon-right.png);
  257. background-position: 50% 50%;
  258. background-repeat: no-repeat;
  259. }
  260. .jqx-grid-group-collapse-rtl-metro
  261. {
  262. padding-right: 0px;
  263. background-image: url(images/metro-icon-left.png);
  264. background-position: 50% 50%;
  265. background-repeat: no-repeat;
  266. }
  267. .jqx-grid-group-expand-metro, .jqx-grid-group-expand-rtl-metro
  268. {
  269. padding-right: 0px;
  270. background-image: url(images/metro-icon-down.png);
  271. background-position: 50% 50%;
  272. background-repeat: no-repeat;
  273. }
  274. .jqx-icon-arrow-first-metro
  275. {
  276. background-image: url('images/metro-icon-first.png');
  277. background-repeat: no-repeat;
  278. background-position: center;
  279. }
  280. .jqx-icon-arrow-last-metro
  281. {
  282. background-image: url('images/metro-icon-last.png');
  283. background-repeat: no-repeat;
  284. background-position: center;
  285. }
  286. .jqx-icon-arrow-first-hover-metro
  287. {
  288. background-image: url('images/metro-icon-first.png');
  289. background-repeat: no-repeat;
  290. background-position: center;
  291. }
  292. .jqx-icon-arrow-last-hover-metro
  293. {
  294. background-image: url('images/metro-icon-last.png');
  295. background-repeat: no-repeat;
  296. background-position: center;
  297. }
  298. .jqx-icon-arrow-first-selected-metro
  299. {
  300. background-image: url('images/metro-icon-first-white.png');
  301. background-repeat: no-repeat;
  302. background-position: center;
  303. }
  304. .jqx-icon-arrow-last-selected-metro
  305. {
  306. background-image: url('images/metro-icon-last-white.png');
  307. background-repeat: no-repeat;
  308. background-position: center;
  309. }
  310. .jqx-tree-grid-collapse-button-metro {
  311. margin-top: 1px;
  312. }
  313. .jqx-icon-calendar-pressed-metro {
  314. background-image: url('images/icon-calendar-white.png');
  315. }
  316. .jqx-layout-metro
  317. {
  318. background-color: #e5e5e5;
  319. }
  320. /*applied to the timepicker*/
  321. .jqx-time-picker .jqx-header .jqx-hour-container-metro:focus {
  322. outline: 1px solid rgb(31, 174, 255) !important;
  323. }
  324. .jqx-time-picker .jqx-header .jqx-minute-container-metro:focus {
  325. outline: 1px solid rgb(31, 174, 255) !important;
  326. }
  327. .jqx-time-picker .jqx-header .jqx-am-container-metro:focus {
  328. outline: 1px solid rgb(31, 174, 255) !important;
  329. }
  330. .jqx-time-picker .jqx-header .jqx-pm-container-metro:focus {
  331. outline: 1px solid rgb(31, 174, 255) !important;
  332. }
  333. .jqx-svg-picker-metro {
  334. border: 1px solid rgb(31, 174, 255);
  335. }
  336. .jqx-svg-picker-metro:focus {
  337. border: 1px solid rgb(31, 174, 255) !important;
  338. }
  339. .jqx-needle-central-circle-metro {
  340. fill: rgb(31, 174, 255);
  341. }
  342. .jqx-needle-metro {
  343. fill: rgb(31, 174, 255);
  344. }