xspreadsheet.css 23 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039
  1. body {
  2. margin: 0;
  3. }
  4. .x-spreadsheet {
  5. font-size: 13px;
  6. line-height: normal;
  7. user-select: none;
  8. -moz-user-select: none;
  9. font-family: 'Lato', 'Source Sans Pro', Roboto, Helvetica, Arial, sans-serif;
  10. box-sizing: content-box;
  11. background: #fff;
  12. -webkit-font-smoothing: antialiased;
  13. }
  14. .x-spreadsheet textarea {
  15. font: 400 13px Arial, 'Lato', 'Source Sans Pro', Roboto, Helvetica, sans-serif;
  16. }
  17. .x-spreadsheet-sheet {
  18. position: relative;
  19. overflow: hidden;
  20. }
  21. .x-spreadsheet-table {
  22. vertical-align: bottom;
  23. }
  24. .x-spreadsheet-tooltip {
  25. font-family: inherit;
  26. position: absolute;
  27. padding: 5px 10px;
  28. color: #fff;
  29. border-radius: 1px;
  30. background: #000000;
  31. font-size: 12px;
  32. z-index: 201;
  33. }
  34. .x-spreadsheet-tooltip:before {
  35. pointer-events: none;
  36. position: absolute;
  37. left: calc(50% - 4px);
  38. top: -4px;
  39. content: "";
  40. width: 8px;
  41. height: 8px;
  42. background: inherit;
  43. -webkit-transform: rotate(45deg);
  44. transform: rotate(45deg);
  45. z-index: 1;
  46. box-shadow: 1px 1px 3px -1px rgba(0, 0, 0, 0.3);
  47. }
  48. .x-spreadsheet-color-palette {
  49. padding: 5px;
  50. }
  51. .x-spreadsheet-color-palette table {
  52. margin: 0;
  53. padding: 0;
  54. border-collapse: separate;
  55. border-spacing: 2;
  56. background: #fff;
  57. }
  58. .x-spreadsheet-color-palette table td {
  59. margin: 0;
  60. cursor: pointer;
  61. border: 1px solid transparent;
  62. }
  63. .x-spreadsheet-color-palette table td:hover {
  64. border-color: #ddd;
  65. }
  66. .x-spreadsheet-color-palette table td .x-spreadsheet-color-palette-cell {
  67. width: 16px;
  68. height: 16px;
  69. }
  70. .x-spreadsheet-border-palette {
  71. padding: 6px;
  72. }
  73. .x-spreadsheet-border-palette table {
  74. margin: 0;
  75. padding: 0;
  76. border-collapse: separate;
  77. border-spacing: 0;
  78. background: #fff;
  79. table-layout: fixed;
  80. }
  81. .x-spreadsheet-border-palette table td {
  82. margin: 0;
  83. }
  84. .x-spreadsheet-border-palette .x-spreadsheet-border-palette-left {
  85. border-right: 1px solid #eee;
  86. padding-right: 6px;
  87. }
  88. .x-spreadsheet-border-palette .x-spreadsheet-border-palette-left .x-spreadsheet-border-palette-cell {
  89. width: 30px;
  90. height: 30px;
  91. cursor: pointer;
  92. text-align: center;
  93. }
  94. .x-spreadsheet-border-palette .x-spreadsheet-border-palette-left .x-spreadsheet-border-palette-cell .x-spreadsheet-icon-img {
  95. opacity: 0.8;
  96. }
  97. .x-spreadsheet-border-palette .x-spreadsheet-border-palette-left .x-spreadsheet-border-palette-cell:hover {
  98. background-color: #eee;
  99. }
  100. .x-spreadsheet-border-palette .x-spreadsheet-border-palette-right {
  101. padding-left: 6px;
  102. }
  103. .x-spreadsheet-border-palette .x-spreadsheet-border-palette-right .x-spreadsheet-toolbar-btn {
  104. margin-top: 0;
  105. margin-bottom: 3px;
  106. }
  107. .x-spreadsheet-border-palette .x-spreadsheet-border-palette-right .x-spreadsheet-line-type {
  108. position: relative;
  109. left: 0;
  110. top: -3px;
  111. }
  112. .x-spreadsheet-dropdown {
  113. position: relative;
  114. }
  115. .x-spreadsheet-dropdown .x-spreadsheet-dropdown-content {
  116. position: absolute;
  117. z-index: 200;
  118. background: #fff;
  119. box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, 0.15);
  120. }
  121. .x-spreadsheet-dropdown.bottom-left .x-spreadsheet-dropdown-content {
  122. top: calc(100% + 5px);
  123. left: 0;
  124. }
  125. .x-spreadsheet-dropdown.bottom-right .x-spreadsheet-dropdown-content {
  126. top: calc(100% + 5px);
  127. right: 0;
  128. }
  129. .x-spreadsheet-dropdown.top-left .x-spreadsheet-dropdown-content {
  130. bottom: calc(100% + 5px);
  131. left: 0;
  132. }
  133. .x-spreadsheet-dropdown.top-right .x-spreadsheet-dropdown-content {
  134. bottom: calc(100% + 5px);
  135. right: 0;
  136. }
  137. .x-spreadsheet-dropdown .x-spreadsheet-dropdown-title {
  138. padding: 0 5px;
  139. display: inline-block;
  140. }
  141. .x-spreadsheet-dropdown .x-spreadsheet-dropdown-header .x-spreadsheet-icon.arrow-left {
  142. margin-left: 4px;
  143. }
  144. .x-spreadsheet-dropdown .x-spreadsheet-dropdown-header .x-spreadsheet-icon.arrow-right {
  145. width: 10px;
  146. margin-right: 4px;
  147. }
  148. .x-spreadsheet-dropdown .x-spreadsheet-dropdown-header .x-spreadsheet-icon.arrow-right .arrow-down {
  149. left: -130px;
  150. }
  151. /* resizer **/
  152. .x-spreadsheet-resizer {
  153. position: absolute;
  154. z-index: 11;
  155. }
  156. .x-spreadsheet-resizer .x-spreadsheet-resizer-hover {
  157. background-color: rgba(75, 137, 255, 0.25);
  158. }
  159. .x-spreadsheet-resizer .x-spreadsheet-resizer-line {
  160. position: absolute;
  161. }
  162. .x-spreadsheet-resizer.horizontal {
  163. cursor: row-resize;
  164. }
  165. .x-spreadsheet-resizer.horizontal .x-spreadsheet-resizer-line {
  166. border-bottom: 2px dashed #4b89ff;
  167. left: 0;
  168. bottom: 0;
  169. }
  170. .x-spreadsheet-resizer.vertical {
  171. cursor: col-resize;
  172. }
  173. .x-spreadsheet-resizer.vertical .x-spreadsheet-resizer-line {
  174. border-right: 2px dashed #4b89ff;
  175. top: 0;
  176. right: 0;
  177. }
  178. /* scrollbar */
  179. .x-spreadsheet-scrollbar {
  180. position: absolute;
  181. bottom: 0;
  182. right: 0;
  183. background-color: #f4f5f8;
  184. opacity: 0.9;
  185. z-index: 12;
  186. }
  187. .x-spreadsheet-scrollbar.horizontal {
  188. right: 15px;
  189. overflow-x: scroll;
  190. overflow-y: hidden;
  191. }
  192. .x-spreadsheet-scrollbar.horizontal > div {
  193. height: 1px;
  194. background: #ddd;
  195. }
  196. .x-spreadsheet-scrollbar.vertical {
  197. bottom: 15px;
  198. overflow-x: hidden;
  199. overflow-y: scroll;
  200. }
  201. .x-spreadsheet-scrollbar.vertical > div {
  202. width: 1px;
  203. background: #ddd;
  204. }
  205. /* @{css-prefix}-overlayer */
  206. .x-spreadsheet-overlayer {
  207. position: absolute;
  208. left: 0;
  209. top: 0;
  210. z-index: 10;
  211. }
  212. .x-spreadsheet-overlayer .x-spreadsheet-overlayer-content {
  213. position: absolute;
  214. overflow: hidden;
  215. pointer-events: none;
  216. width: 100%;
  217. height: 100%;
  218. }
  219. .x-spreadsheet-editor,
  220. .x-spreadsheet-selector {
  221. box-sizing: content-box;
  222. position: absolute;
  223. overflow: hidden;
  224. pointer-events: none;
  225. top: 0;
  226. left: 0;
  227. width: 100%;
  228. height: 100%;
  229. }
  230. /* @{css-prefix}-selector */
  231. .x-spreadsheet-selector .hide-input {
  232. position: absolute;
  233. z-index: 0;
  234. }
  235. .x-spreadsheet-selector .hide-input input {
  236. padding: 0;
  237. width: 0;
  238. border: none!important;
  239. }
  240. .x-spreadsheet-selector .x-spreadsheet-selector-area {
  241. position: absolute;
  242. border: 2px solid #4b89ff;
  243. background: rgba(75, 137, 255, 0.1);
  244. z-index: 5;
  245. }
  246. .x-spreadsheet-selector .x-spreadsheet-selector-clipboard,
  247. .x-spreadsheet-selector .x-spreadsheet-selector-autofill {
  248. position: absolute;
  249. background: transparent;
  250. z-index: 100;
  251. }
  252. .x-spreadsheet-selector .x-spreadsheet-selector-clipboard {
  253. border: 2px dashed #4b89ff;
  254. }
  255. .x-spreadsheet-selector .x-spreadsheet-selector-autofill {
  256. border: 1px dashed rgba(0, 0, 0, 0.45);
  257. }
  258. .x-spreadsheet-selector .x-spreadsheet-selector-corner {
  259. pointer-events: auto;
  260. position: absolute;
  261. cursor: crosshair;
  262. font-size: 0;
  263. height: 5px;
  264. width: 5px;
  265. right: -5px;
  266. bottom: -5px;
  267. border: 2px solid #ffffff;
  268. background: #4b89ff;
  269. }
  270. .x-spreadsheet-editor {
  271. z-index: 20;
  272. }
  273. .x-spreadsheet-editor .x-spreadsheet-editor-area {
  274. position: absolute;
  275. text-align: left;
  276. border: 2px solid #4b89ff;
  277. line-height: 0;
  278. z-index: 100;
  279. pointer-events: auto;
  280. }
  281. .x-spreadsheet-editor .x-spreadsheet-editor-area textarea {
  282. box-sizing: content-box;
  283. border: none;
  284. padding: 0 3px;
  285. outline: none;
  286. resize: none;
  287. text-align: start;
  288. overflow-y: hidden;
  289. font: 400 13px Arial, 'Lato', 'Source Sans Pro', Roboto, Helvetica, sans-serif;
  290. color: inherit;
  291. white-space: normal;
  292. word-wrap: break-word;
  293. line-height: 22px;
  294. margin: 0;
  295. }
  296. .x-spreadsheet-editor .x-spreadsheet-editor-area .textline {
  297. overflow: hidden;
  298. visibility: hidden;
  299. position: fixed;
  300. top: 0;
  301. left: 0;
  302. }
  303. .x-spreadsheet-item {
  304. user-select: none;
  305. background: 0;
  306. border: 1px solid transparent;
  307. outline: none;
  308. height: 26px;
  309. color: rgba(0, 0, 0, 0.9);
  310. line-height: 26px;
  311. list-style: none;
  312. padding: 2px 10px;
  313. cursor: default;
  314. text-align: left;
  315. overflow: hidden;
  316. }
  317. .x-spreadsheet-item.disabled {
  318. pointer-events: none;
  319. opacity: 0.5;
  320. }
  321. .x-spreadsheet-item:hover,
  322. .x-spreadsheet-item.active {
  323. background: rgba(0, 0, 0, 0.05);
  324. }
  325. .x-spreadsheet-item.divider {
  326. height: 0;
  327. padding: 0;
  328. margin: 5px 0;
  329. border: none;
  330. border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  331. }
  332. .x-spreadsheet-item .label {
  333. float: right;
  334. opacity: 0.65;
  335. font-size: 1em;
  336. }
  337. .x-spreadsheet-item.state,
  338. .x-spreadsheet-header.state {
  339. padding-left: 35px!important;
  340. position: relative;
  341. }
  342. .x-spreadsheet-item.state:before,
  343. .x-spreadsheet-header.state:before {
  344. content: '';
  345. position: absolute;
  346. width: 10px;
  347. height: 10px;
  348. left: 12px;
  349. top: calc(50% - 5px);
  350. background: rgba(0, 0, 0, 0.08);
  351. border-radius: 2px;
  352. }
  353. .x-spreadsheet-item.state.checked:before,
  354. .x-spreadsheet-header.state.checked:before {
  355. background: #4b89ff;
  356. }
  357. .x-spreadsheet-checkbox {
  358. position: relative;
  359. display: inline-block;
  360. backface-visibility: hidden;
  361. outline: 0;
  362. vertical-align: baseline;
  363. font-style: normal;
  364. font-size: 1rem;
  365. line-height: 1em;
  366. }
  367. .x-spreadsheet-checkbox > input {
  368. position: absolute;
  369. top: 0;
  370. left: 0;
  371. opacity: 0!important;
  372. outline: 0;
  373. z-index: -1;
  374. }
  375. .x-spreadsheet-suggest,
  376. .x-spreadsheet-contextmenu,
  377. .x-spreadsheet-sort-filter {
  378. position: absolute;
  379. box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, 0.15);
  380. background: #fff;
  381. z-index: 100;
  382. width: 260px;
  383. pointer-events: auto;
  384. overflow: auto;
  385. }
  386. .x-spreadsheet-suggest {
  387. width: 200px;
  388. }
  389. .x-spreadsheet-filter {
  390. border: 1px solid #e9e9e9;
  391. font-size: 12px;
  392. margin: 10px;
  393. }
  394. .x-spreadsheet-filter .x-spreadsheet-header {
  395. padding: 0.5em 0.75em;
  396. background: #f8f8f9;
  397. border-bottom: 1px solid #e9e9e9;
  398. border-left: 1px solid transparent;
  399. }
  400. .x-spreadsheet-filter .x-spreadsheet-body {
  401. height: 200px;
  402. overflow-y: auto;
  403. }
  404. .x-spreadsheet-filter .x-spreadsheet-body .x-spreadsheet-item {
  405. height: 20px;
  406. line-height: 20px;
  407. }
  408. .x-spreadsheet-sort-filter .x-spreadsheet-buttons {
  409. margin: 10px;
  410. }
  411. .x-spreadsheet-toolbar,
  412. .x-spreadsheet-bottombar {
  413. height: 40px;
  414. padding: 0 30px;
  415. text-align: left;
  416. background: #f5f6f7;
  417. display: flex;
  418. }
  419. .x-spreadsheet-bottombar {
  420. position: relative;
  421. border-top: 1px solid #e0e2e4;
  422. }
  423. .x-spreadsheet-bottombar .x-spreadsheet-menu > li {
  424. line-height: 40px;
  425. height: 40px;
  426. padding-top: 0;
  427. padding-bottom: 0;
  428. vertical-align: middle;
  429. border-right: 1px solid #e8eaed;
  430. }
  431. .x-spreadsheet-menu {
  432. list-style: none;
  433. margin: 0;
  434. padding: 0;
  435. user-select: none;
  436. }
  437. .x-spreadsheet-menu > li {
  438. float: left;
  439. line-height: 1.25em;
  440. padding: 0.785em 1em;
  441. margin: 0;
  442. vertical-align: middle;
  443. text-align: left;
  444. font-weight: 400;
  445. color: #80868b;
  446. white-space: nowrap;
  447. cursor: pointer;
  448. transition: all 0.3s;
  449. font-weight: bold;
  450. }
  451. .x-spreadsheet-menu > li.active {
  452. background-color: #fff;
  453. color: rgba(0, 0, 0, 0.65);
  454. }
  455. .x-spreadsheet-menu > li .x-spreadsheet-icon {
  456. margin: 0 6px;
  457. }
  458. .x-spreadsheet-menu > li .x-spreadsheet-icon .x-spreadsheet-icon-img:hover {
  459. opacity: 0.85;
  460. }
  461. .x-spreadsheet-menu > li .x-spreadsheet-dropdown {
  462. display: inline-block;
  463. }
  464. .x-spreadsheet-toolbar {
  465. border-bottom: 1px solid #e0e2e4;
  466. }
  467. .x-spreadsheet-toolbar .x-spreadsheet-toolbar-btns {
  468. display: inline-flex;
  469. }
  470. .x-spreadsheet-toolbar .x-spreadsheet-toolbar-more {
  471. padding: 0 6px 6px;
  472. text-align: left;
  473. }
  474. .x-spreadsheet-toolbar .x-spreadsheet-toolbar-more .x-spreadsheet-toolbar-divider {
  475. margin-top: 0;
  476. }
  477. .x-spreadsheet-toolbar .x-spreadsheet-toolbar-btn {
  478. flex: 0 0 auto;
  479. display: inline-block;
  480. border: 1px solid transparent;
  481. height: 26px;
  482. line-height: 26px;
  483. min-width: 26px;
  484. margin: 6px 1px 0;
  485. padding: 0;
  486. text-align: center;
  487. border-radius: 2px;
  488. }
  489. .x-spreadsheet-toolbar .x-spreadsheet-toolbar-btn.disabled {
  490. pointer-events: none;
  491. opacity: 0.5;
  492. }
  493. .x-spreadsheet-toolbar .x-spreadsheet-toolbar-btn:hover,
  494. .x-spreadsheet-toolbar .x-spreadsheet-toolbar-btn.active {
  495. background: rgba(0, 0, 0, 0.08);
  496. }
  497. .x-spreadsheet-toolbar-divider {
  498. display: inline-block;
  499. border-right: 1px solid #e0e2e4;
  500. width: 0;
  501. vertical-align: middle;
  502. height: 18px;
  503. margin: 12px 3px 0;
  504. }
  505. .x-spreadsheet-print {
  506. position: absolute;
  507. left: 0;
  508. top: 0;
  509. z-index: 100;
  510. width: 100%;
  511. height: 100%;
  512. display: flex;
  513. flex-direction: column;
  514. }
  515. .x-spreadsheet-print-bar {
  516. background: #424242;
  517. height: 60px;
  518. line-height: 60px;
  519. padding: 0 30px;
  520. }
  521. .x-spreadsheet-print-bar .-title {
  522. color: #fff;
  523. font-weight: bold;
  524. font-size: 1.2em;
  525. float: left;
  526. }
  527. .x-spreadsheet-print-bar .-right {
  528. float: right;
  529. margin-top: 12px;
  530. }
  531. .x-spreadsheet-print-content {
  532. display: flex;
  533. flex: auto;
  534. flex-direction: row;
  535. background: #d0d0d0;
  536. height: calc(100% - 60px);
  537. }
  538. .x-spreadsheet-print-content .-sider {
  539. flex: 0 0 300px;
  540. width: 300px;
  541. border-left: 2px solid #ccc;
  542. background: #fff;
  543. }
  544. .x-spreadsheet-print-content .-content {
  545. flex: auto;
  546. overflow-x: auto;
  547. overflow-y: scroll;
  548. height: 100%;
  549. }
  550. .x-spreadsheet-canvas-card-wraper {
  551. margin: 40px 20px;
  552. }
  553. .x-spreadsheet-canvas-card {
  554. background: #fff;
  555. margin: auto;
  556. page-break-before: auto;
  557. page-break-after: always;
  558. box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 5px 0 rgba(0, 0, 0, 0.2);
  559. }
  560. .x-spreadsheet-calendar {
  561. color: rgba(0, 0, 0, 0.65);
  562. background: #ffffff;
  563. user-select: none;
  564. }
  565. .x-spreadsheet-calendar .calendar-header {
  566. font-weight: 700;
  567. line-height: 30px;
  568. text-align: center;
  569. width: 100%;
  570. float: left;
  571. background: #f9fafb;
  572. }
  573. .x-spreadsheet-calendar .calendar-header .calendar-header-left {
  574. padding-left: 5px;
  575. float: left;
  576. }
  577. .x-spreadsheet-calendar .calendar-header .calendar-header-right {
  578. float: right;
  579. }
  580. .x-spreadsheet-calendar .calendar-header .calendar-header-right a {
  581. padding: 3px 0;
  582. margin-right: 2px;
  583. border-radius: 2px;
  584. }
  585. .x-spreadsheet-calendar .calendar-header .calendar-header-right a:hover {
  586. background: rgba(0, 0, 0, 0.08);
  587. }
  588. .x-spreadsheet-calendar .calendar-body {
  589. border-collapse: collapse;
  590. border-spacing: 0;
  591. }
  592. .x-spreadsheet-calendar .calendar-body th,
  593. .x-spreadsheet-calendar .calendar-body td {
  594. width: 14.28571429%;
  595. min-width: 32px;
  596. text-align: center;
  597. font-weight: 700;
  598. line-height: 30px;
  599. padding: 0;
  600. }
  601. .x-spreadsheet-calendar .calendar-body td > .cell:hover {
  602. background: #ecf6fd;
  603. }
  604. .x-spreadsheet-calendar .calendar-body td > .cell.active,
  605. .x-spreadsheet-calendar .calendar-body td > .cell.active:hover {
  606. background: #ecf6fd;
  607. color: #2185D0;
  608. }
  609. .x-spreadsheet-calendar .calendar-body td > .cell.disabled {
  610. pointer-events: none;
  611. opacity: 0.5;
  612. }
  613. .x-spreadsheet-datepicker {
  614. box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  615. position: absolute;
  616. left: 0;
  617. top: calc(100% + 5px);
  618. z-index: 10;
  619. width: auto;
  620. }
  621. .x-spreadsheet-buttons {
  622. display: flex;
  623. justify-content: flex-end;
  624. }
  625. .x-spreadsheet-buttons .x-spreadsheet-button {
  626. margin-left: 8px;
  627. }
  628. .x-spreadsheet-button {
  629. display: inline-block;
  630. border-radius: 3px;
  631. line-height: 1em;
  632. min-height: 1em;
  633. white-space: nowrap;
  634. text-align: center;
  635. cursor: pointer;
  636. font-size: 1em;
  637. font-weight: 700;
  638. padding: 0.75em 1em;
  639. color: rgba(0, 0, 0, 0.6);
  640. background: #E0E1E2;
  641. text-decoration: none;
  642. font-family: "Lato", "proxima-nova", "Helvetica Neue", Arial, sans-serif;
  643. outline: none;
  644. vertical-align: baseline;
  645. zoom: 1;
  646. user-select: none;
  647. transition: all 0.1s linear;
  648. }
  649. .x-spreadsheet-button.active,
  650. .x-spreadsheet-button:hover {
  651. background-color: #C0C1C2;
  652. color: rgba(0, 0, 0, 0.8);
  653. }
  654. .x-spreadsheet-button.primary {
  655. color: #fff;
  656. background-color: #2185D0;
  657. }
  658. .x-spreadsheet-button.primary:hover,
  659. .x-spreadsheet-button.primary.active {
  660. color: #fff;
  661. background-color: #1678c2;
  662. }
  663. .x-spreadsheet-form-input {
  664. font-size: 1em;
  665. position: relative;
  666. font-weight: 400;
  667. display: inline-flex;
  668. color: rgba(0, 0, 0, 0.87);
  669. }
  670. .x-spreadsheet-form-input input {
  671. z-index: 1;
  672. margin: 0;
  673. max-width: 100%;
  674. flex: 1 0 auto;
  675. outline: 0;
  676. -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  677. text-align: left;
  678. line-height: 30px;
  679. height: 30px;
  680. padding: 0 8px;
  681. background: #fff;
  682. border: 1px solid #e9e9e9;
  683. border-radius: 3px;
  684. transition: box-shadow 0.1s ease, border-color 0.1s ease;
  685. box-shadow: inset 0 1px 2px hsla(0, 0%, 4%, 0.06);
  686. }
  687. .x-spreadsheet-form-input input:focus {
  688. border-color: #4b89ff;
  689. box-shadow: inset 0 1px 2px rgba(75, 137, 255, 0.2);
  690. }
  691. .x-spreadsheet-form-select {
  692. position: relative;
  693. display: inline-block;
  694. background: #fff;
  695. border: 1px solid #e9e9e9;
  696. border-radius: 2px;
  697. cursor: pointer;
  698. color: rgba(0, 0, 0, 0.87);
  699. user-select: none;
  700. box-shadow: inset 0 1px 2px hsla(0, 0%, 4%, 0.06);
  701. }
  702. .x-spreadsheet-form-select .input-text {
  703. text-overflow: ellipsis;
  704. white-space: nowrap;
  705. min-width: 60px;
  706. width: auto;
  707. height: 30px;
  708. line-height: 30px;
  709. padding: 0 8px;
  710. }
  711. .x-spreadsheet-form-fields {
  712. display: flex;
  713. flex-direction: row;
  714. flex-wrap: wrap;
  715. }
  716. .x-spreadsheet-form-fields .x-spreadsheet-form-field {
  717. flex: 0 1 auto;
  718. }
  719. .x-spreadsheet-form-fields .x-spreadsheet-form-field .label {
  720. display: inline-block;
  721. margin: 0 10px 0 0;
  722. }
  723. .x-spreadsheet-form-field {
  724. display: block;
  725. vertical-align: middle;
  726. margin-left: 10px;
  727. margin-bottom: 10px;
  728. }
  729. .x-spreadsheet-form-field:first-child {
  730. margin-left: 0;
  731. }
  732. .x-spreadsheet-form-field.error .x-spreadsheet-form-select,
  733. .x-spreadsheet-form-field.error input {
  734. border-color: #f04134;
  735. }
  736. .x-spreadsheet-form-field .tip {
  737. color: #f04134;
  738. font-size: 0.9em;
  739. }
  740. .x-spreadsheet-dimmer {
  741. display: none;
  742. position: absolute;
  743. top: 0 !important;
  744. left: 0 !important;
  745. width: 100%;
  746. height: 100%;
  747. text-align: center;
  748. vertical-align: middle;
  749. background-color: rgba(0, 0, 0, 0.6);
  750. opacity: 0;
  751. -webkit-animation-fill-mode: both;
  752. animation-fill-mode: both;
  753. -webkit-animation-duration: 0.5s;
  754. animation-duration: 0.5s;
  755. transition: background-color 0.5s linear;
  756. user-select: none;
  757. z-index: 1000;
  758. }
  759. .x-spreadsheet-dimmer.active {
  760. display: block;
  761. opacity: 1;
  762. }
  763. form fieldset {
  764. border: none;
  765. }
  766. form fieldset label {
  767. display: block;
  768. margin-bottom: 0.5em;
  769. font-size: 1em;
  770. color: #666;
  771. }
  772. form fieldset select {
  773. font-size: 1.1em;
  774. width: 100%;
  775. background-color: #fff;
  776. border: none;
  777. border-bottom: 2px solid #ddd;
  778. padding: 0.5em 0.85em;
  779. border-radius: 2px;
  780. }
  781. .x-spreadsheet-modal,
  782. .x-spreadsheet-toast {
  783. font-size: 13px;
  784. position: fixed;
  785. z-index: 1001;
  786. text-align: left;
  787. line-height: 1.25em;
  788. min-width: 360px;
  789. color: rgba(0, 0, 0, 0.87);
  790. font-family: 'Lato', 'Source Sans Pro', Roboto, Helvetica, Arial, sans-serif;
  791. border-radius: 4px;
  792. border: 1px solid rgba(0, 0, 0, 0.1);
  793. background-color: #fff;
  794. background-clip: padding-box;
  795. box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 8px;
  796. }
  797. .x-spreadsheet-toast {
  798. background-color: rgba(255, 255, 255, 0.85);
  799. }
  800. .x-spreadsheet-modal-header,
  801. .x-spreadsheet-toast-header {
  802. font-weight: 600;
  803. background-clip: padding-box;
  804. background-color: rgba(255, 255, 255, 0.85);
  805. border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  806. border-radius: 4px 4px 0 0;
  807. }
  808. .x-spreadsheet-modal-header .x-spreadsheet-icon,
  809. .x-spreadsheet-toast-header .x-spreadsheet-icon {
  810. position: absolute;
  811. right: 0.8em;
  812. top: 0.65em;
  813. border-radius: 18px;
  814. }
  815. .x-spreadsheet-modal-header .x-spreadsheet-icon:hover,
  816. .x-spreadsheet-toast-header .x-spreadsheet-icon:hover {
  817. opacity: 1;
  818. background: rgba(0, 0, 0, 0.08);
  819. }
  820. .x-spreadsheet-toast-header {
  821. color: #F2711C;
  822. }
  823. .x-spreadsheet-modal-header {
  824. border-bottom: 1px solid #e0e2e4;
  825. background: rgba(0, 0, 0, 0.08);
  826. font-size: 1.0785em;
  827. }
  828. .x-spreadsheet-modal-header,
  829. .x-spreadsheet-modal-content,
  830. .x-spreadsheet-toast-header,
  831. .x-spreadsheet-toast-content {
  832. padding: 0.75em 1em;
  833. }
  834. @media screen and (min-width: 320px) and (max-width: 480px) {
  835. .x-spreadsheet-toolbar {
  836. display: none;
  837. }
  838. }
  839. .x-spreadsheet-icon {
  840. width: 18px;
  841. height: 18px;
  842. margin: 1px 1px 2px 1px;
  843. text-align: center;
  844. vertical-align: middle;
  845. user-select: none;
  846. overflow: hidden;
  847. position: relative;
  848. display: inline-block;
  849. }
  850. .x-spreadsheet-icon .x-spreadsheet-icon-img {
  851. background-image: url(58eaeb4e52248a5c75936c6f4c33a370.svg);
  852. position: absolute;
  853. width: 262px;
  854. height: 444px;
  855. opacity: 0.56;
  856. }
  857. .x-spreadsheet-icon .x-spreadsheet-icon-img.undo {
  858. left: 0;
  859. top: 0;
  860. }
  861. .x-spreadsheet-icon .x-spreadsheet-icon-img.redo {
  862. left: -18px;
  863. top: 0;
  864. }
  865. .x-spreadsheet-icon .x-spreadsheet-icon-img.print {
  866. left: -36px;
  867. top: 0;
  868. }
  869. .x-spreadsheet-icon .x-spreadsheet-icon-img.paintformat {
  870. left: -54px;
  871. top: 0;
  872. }
  873. .x-spreadsheet-icon .x-spreadsheet-icon-img.clearformat {
  874. left: -72px;
  875. top: 0;
  876. }
  877. .x-spreadsheet-icon .x-spreadsheet-icon-img.font-bold {
  878. left: -90px;
  879. top: 0;
  880. }
  881. .x-spreadsheet-icon .x-spreadsheet-icon-img.font-italic {
  882. left: -108px;
  883. top: 0;
  884. }
  885. .x-spreadsheet-icon .x-spreadsheet-icon-img.underline {
  886. left: -126px;
  887. top: 0;
  888. }
  889. .x-spreadsheet-icon .x-spreadsheet-icon-img.strike {
  890. left: -144px;
  891. top: 0;
  892. }
  893. .x-spreadsheet-icon .x-spreadsheet-icon-img.color {
  894. left: -162px;
  895. top: 0;
  896. }
  897. .x-spreadsheet-icon .x-spreadsheet-icon-img.bgcolor {
  898. left: -180px;
  899. top: 0;
  900. }
  901. .x-spreadsheet-icon .x-spreadsheet-icon-img.merge {
  902. left: -198px;
  903. top: 0;
  904. }
  905. .x-spreadsheet-icon .x-spreadsheet-icon-img.align-left {
  906. left: -216px;
  907. top: 0;
  908. }
  909. .x-spreadsheet-icon .x-spreadsheet-icon-img.align-center {
  910. left: -234px;
  911. top: 0;
  912. }
  913. .x-spreadsheet-icon .x-spreadsheet-icon-img.align-right {
  914. left: 0;
  915. top: -18px;
  916. }
  917. .x-spreadsheet-icon .x-spreadsheet-icon-img.align-top {
  918. left: -18px;
  919. top: -18px;
  920. }
  921. .x-spreadsheet-icon .x-spreadsheet-icon-img.align-middle {
  922. left: -36px;
  923. top: -18px;
  924. }
  925. .x-spreadsheet-icon .x-spreadsheet-icon-img.align-bottom {
  926. left: -54px;
  927. top: -18px;
  928. }
  929. .x-spreadsheet-icon .x-spreadsheet-icon-img.textwrap {
  930. left: -72px;
  931. top: -18px;
  932. }
  933. .x-spreadsheet-icon .x-spreadsheet-icon-img.autofilter {
  934. left: -90px;
  935. top: -18px;
  936. }
  937. .x-spreadsheet-icon .x-spreadsheet-icon-img.formula {
  938. left: -108px;
  939. top: -18px;
  940. }
  941. .x-spreadsheet-icon .x-spreadsheet-icon-img.arrow-down {
  942. left: -126px;
  943. top: -18px;
  944. }
  945. .x-spreadsheet-icon .x-spreadsheet-icon-img.arrow-right {
  946. left: -144px;
  947. top: -18px;
  948. }
  949. .x-spreadsheet-icon .x-spreadsheet-icon-img.link {
  950. left: -162px;
  951. top: -18px;
  952. }
  953. .x-spreadsheet-icon .x-spreadsheet-icon-img.chart {
  954. left: -180px;
  955. top: -18px;
  956. }
  957. .x-spreadsheet-icon .x-spreadsheet-icon-img.freeze {
  958. left: -198px;
  959. top: -18px;
  960. }
  961. .x-spreadsheet-icon .x-spreadsheet-icon-img.ellipsis {
  962. left: -216px;
  963. top: -18px;
  964. }
  965. .x-spreadsheet-icon .x-spreadsheet-icon-img.add {
  966. left: -234px;
  967. top: -18px;
  968. }
  969. .x-spreadsheet-icon .x-spreadsheet-icon-img.border-all {
  970. left: 0;
  971. top: -36px;
  972. }
  973. .x-spreadsheet-icon .x-spreadsheet-icon-img.border-inside {
  974. left: -18px;
  975. top: -36px;
  976. }
  977. .x-spreadsheet-icon .x-spreadsheet-icon-img.border-horizontal {
  978. left: -36px;
  979. top: -36px;
  980. }
  981. .x-spreadsheet-icon .x-spreadsheet-icon-img.border-vertical {
  982. left: -54px;
  983. top: -36px;
  984. }
  985. .x-spreadsheet-icon .x-spreadsheet-icon-img.border-outside {
  986. left: -72px;
  987. top: -36px;
  988. }
  989. .x-spreadsheet-icon .x-spreadsheet-icon-img.border-left {
  990. left: -90px;
  991. top: -36px;
  992. }
  993. .x-spreadsheet-icon .x-spreadsheet-icon-img.border-top {
  994. left: -108px;
  995. top: -36px;
  996. }
  997. .x-spreadsheet-icon .x-spreadsheet-icon-img.border-right {
  998. left: -126px;
  999. top: -36px;
  1000. }
  1001. .x-spreadsheet-icon .x-spreadsheet-icon-img.border-bottom {
  1002. left: -144px;
  1003. top: -36px;
  1004. }
  1005. .x-spreadsheet-icon .x-spreadsheet-icon-img.border-none {
  1006. left: -162px;
  1007. top: -36px;
  1008. }
  1009. .x-spreadsheet-icon .x-spreadsheet-icon-img.line-color {
  1010. left: -180px;
  1011. top: -36px;
  1012. }
  1013. .x-spreadsheet-icon .x-spreadsheet-icon-img.line-type {
  1014. left: -198px;
  1015. top: -36px;
  1016. }
  1017. .x-spreadsheet-icon .x-spreadsheet-icon-img.close {
  1018. left: -234px;
  1019. top: -36px;
  1020. }
  1021. .x-spreadsheet-icon .x-spreadsheet-icon-img.chevron-down {
  1022. left: 0;
  1023. top: -54px;
  1024. }
  1025. .x-spreadsheet-icon .x-spreadsheet-icon-img.chevron-up {
  1026. left: -18px;
  1027. top: -54px;
  1028. }
  1029. .x-spreadsheet-icon .x-spreadsheet-icon-img.chevron-left {
  1030. left: -36px;
  1031. top: -54px;
  1032. }
  1033. .x-spreadsheet-icon .x-spreadsheet-icon-img.chevron-right {
  1034. left: -54px;
  1035. top: -54px;
  1036. }
  1037. /*# sourceMappingURL=xspreadsheet.css.map*/