excel.css 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762
  1. .x-spreadsheet {
  2. font-size: 13px;
  3. line-height: normal;
  4. user-select: none;
  5. -moz-user-select: none;
  6. font-family: 'Lato', 'Source Sans Pro', Roboto, Helvetica, Arial, sans-serif;
  7. box-sizing: content-box;
  8. background: #fff;
  9. -webkit-font-smoothing: antialiased;
  10. }
  11. .x-spreadsheet textarea {
  12. font: 400 13px Arial, 'Lato', 'Source Sans Pro', Roboto, Helvetica, sans-serif;
  13. }
  14. .x-spreadsheet-sheet {
  15. position: relative;
  16. overflow: hidden;
  17. }
  18. .x-spreadsheet-table {
  19. vertical-align: bottom;
  20. }
  21. .x-spreadsheet-tooltip {
  22. font-family: inherit;
  23. position: absolute;
  24. padding: 5px 10px;
  25. color: #fff;
  26. border-radius: 1px;
  27. background: #000000;
  28. font-size: 12px;
  29. z-index: 201;
  30. }
  31. .x-spreadsheet-tooltip:before {
  32. pointer-events: none;
  33. position: absolute;
  34. left: calc(50% - 4px);
  35. top: -4px;
  36. content: "";
  37. width: 8px;
  38. height: 8px;
  39. background: inherit;
  40. -webkit-transform: rotate(45deg);
  41. transform: rotate(45deg);
  42. z-index: 1;
  43. box-shadow: 1px 1px 3px -1px rgba(0, 0, 0, 0.3);
  44. }
  45. .x-spreadsheet-color-palette {
  46. padding: 5px;
  47. }
  48. .x-spreadsheet-color-palette table {
  49. margin: 0;
  50. padding: 0;
  51. border-collapse: separate;
  52. border-spacing: 2;
  53. background: #fff;
  54. }
  55. .x-spreadsheet-color-palette table td {
  56. margin: 0;
  57. cursor: pointer;
  58. border: 1px solid transparent;
  59. }
  60. .x-spreadsheet-color-palette table td:hover {
  61. border-color: #ddd;
  62. }
  63. .x-spreadsheet-color-palette table td .x-spreadsheet-color-palette-cell {
  64. width: 16px;
  65. height: 16px;
  66. }
  67. .x-spreadsheet-border-palette {
  68. padding: 6px;
  69. }
  70. .x-spreadsheet-border-palette table {
  71. margin: 0;
  72. padding: 0;
  73. border-collapse: separate;
  74. border-spacing: 0;
  75. background: #fff;
  76. table-layout: fixed;
  77. }
  78. .x-spreadsheet-border-palette table td {
  79. margin: 0;
  80. }
  81. .x-spreadsheet-border-palette .x-spreadsheet-border-palette-left {
  82. border-right: 1px solid #eee;
  83. padding-right: 6px;
  84. }
  85. .x-spreadsheet-border-palette .x-spreadsheet-border-palette-left .x-spreadsheet-border-palette-cell {
  86. width: 30px;
  87. height: 30px;
  88. cursor: pointer;
  89. text-align: center;
  90. }
  91. .x-spreadsheet-border-palette .x-spreadsheet-border-palette-left .x-spreadsheet-border-palette-cell:hover {
  92. background-color: #eee;
  93. }
  94. .x-spreadsheet-border-palette .x-spreadsheet-border-palette-right {
  95. padding-left: 6px;
  96. }
  97. .x-spreadsheet-border-palette .x-spreadsheet-border-palette-right .x-spreadsheet-line-type {
  98. position: relative;
  99. left: 0;
  100. top: -3px;
  101. }
  102. .x-spreadsheet-dropdown {
  103. position: relative;
  104. }
  105. .x-spreadsheet-dropdown .x-spreadsheet-dropdown-content {
  106. position: absolute;
  107. z-index: 200;
  108. background: #fff;
  109. box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, 0.15);
  110. }
  111. .x-spreadsheet-dropdown.bottom-left .x-spreadsheet-dropdown-content {
  112. top: calc(100% + 5px);
  113. left: 0;
  114. }
  115. .x-spreadsheet-dropdown.bottom-right .x-spreadsheet-dropdown-content {
  116. top: calc(100% + 5px);
  117. right: 0;
  118. }
  119. .x-spreadsheet-dropdown.top-left .x-spreadsheet-dropdown-content {
  120. bottom: calc(100% + 5px);
  121. left: 0;
  122. }
  123. .x-spreadsheet-dropdown.top-right .x-spreadsheet-dropdown-content {
  124. bottom: calc(100% + 5px);
  125. right: 0;
  126. }
  127. .x-spreadsheet-dropdown .x-spreadsheet-dropdown-title {
  128. padding: 0 5px;
  129. display: inline-block;
  130. }
  131. /* resizer **/
  132. .x-spreadsheet-resizer {
  133. position: absolute;
  134. z-index: 11;
  135. }
  136. .x-spreadsheet-resizer .x-spreadsheet-resizer-hover {
  137. background-color: rgba(75, 137, 255, 0.25);
  138. }
  139. .x-spreadsheet-resizer .x-spreadsheet-resizer-line {
  140. position: absolute;
  141. }
  142. .x-spreadsheet-resizer.horizontal {
  143. cursor: row-resize;
  144. }
  145. .x-spreadsheet-resizer.horizontal .x-spreadsheet-resizer-line {
  146. border-bottom: 2px dashed #4b89ff;
  147. left: 0;
  148. bottom: 0;
  149. }
  150. .x-spreadsheet-resizer.vertical {
  151. cursor: col-resize;
  152. }
  153. .x-spreadsheet-resizer.vertical .x-spreadsheet-resizer-line {
  154. border-right: 2px dashed #4b89ff;
  155. top: 0;
  156. right: 0;
  157. }
  158. /* scrollbar */
  159. .x-spreadsheet-scrollbar {
  160. position: absolute;
  161. bottom: 0;
  162. right: 0;
  163. background-color: #f4f5f8;
  164. opacity: 0.9;
  165. z-index: 12;
  166. }
  167. .x-spreadsheet-scrollbar.horizontal {
  168. right: 15px;
  169. overflow-x: scroll;
  170. overflow-y: hidden;
  171. }
  172. .x-spreadsheet-scrollbar.horizontal > div {
  173. height: 1px;
  174. background: #ddd;
  175. }
  176. .x-spreadsheet-scrollbar.vertical {
  177. bottom: 15px;
  178. overflow-x: hidden;
  179. overflow-y: scroll;
  180. }
  181. .x-spreadsheet-scrollbar.vertical > div {
  182. width: 1px;
  183. background: #ddd;
  184. }
  185. /* @{css-prefix}-overlayer */
  186. .x-spreadsheet-overlayer {
  187. position: absolute;
  188. left: 0;
  189. top: 0;
  190. z-index: 10;
  191. }
  192. .x-spreadsheet-overlayer .x-spreadsheet-overlayer-content {
  193. position: absolute;
  194. overflow: hidden;
  195. pointer-events: none;
  196. width: 100%;
  197. height: 100%;
  198. }
  199. .x-spreadsheet-editor,
  200. .x-spreadsheet-selector {
  201. box-sizing: content-box;
  202. position: absolute;
  203. overflow: hidden;
  204. pointer-events: none;
  205. top: 0;
  206. left: 0;
  207. width: 100%;
  208. height: 100%;
  209. }
  210. /* @{css-prefix}-selector */
  211. .x-spreadsheet-selector .hide-input {
  212. position: absolute;
  213. z-index: 0;
  214. }
  215. .x-spreadsheet-selector .hide-input input {
  216. padding: 0;
  217. width: 0;
  218. border: none!important;
  219. }
  220. .x-spreadsheet-selector .x-spreadsheet-selector-area {
  221. position: absolute;
  222. border: 2px solid #4b89ff;
  223. background: rgba(75, 137, 255, 0.1);
  224. z-index: 5;
  225. }
  226. .x-spreadsheet-selector .x-spreadsheet-selector-clipboard,
  227. .x-spreadsheet-selector .x-spreadsheet-selector-autofill {
  228. position: absolute;
  229. background: transparent;
  230. z-index: 100;
  231. }
  232. .x-spreadsheet-selector .x-spreadsheet-selector-clipboard {
  233. border: 2px dashed #4b89ff;
  234. }
  235. .x-spreadsheet-selector .x-spreadsheet-selector-autofill {
  236. border: 1px dashed rgba(0, 0, 0, 0.45);
  237. }
  238. .x-spreadsheet-selector .x-spreadsheet-selector-corner {
  239. pointer-events: auto;
  240. position: absolute;
  241. cursor: crosshair;
  242. font-size: 0;
  243. height: 5px;
  244. width: 5px;
  245. right: -5px;
  246. bottom: -5px;
  247. border: 2px solid #ffffff;
  248. background: #4b89ff;
  249. }
  250. .x-spreadsheet-editor {
  251. z-index: 20;
  252. }
  253. .x-spreadsheet-editor .x-spreadsheet-editor-area {
  254. position: absolute;
  255. text-align: left;
  256. border: 2px solid #4b89ff;
  257. line-height: 0;
  258. z-index: 100;
  259. pointer-events: auto;
  260. }
  261. .x-spreadsheet-editor .x-spreadsheet-editor-area textarea {
  262. box-sizing: content-box;
  263. border: none;
  264. padding: 0 3px;
  265. outline: none;
  266. resize: none;
  267. text-align: start;
  268. overflow-y: hidden;
  269. font: 400 13px Arial, 'Lato', 'Source Sans Pro', Roboto, Helvetica, sans-serif;
  270. color: inherit;
  271. white-space: normal;
  272. word-wrap: break-word;
  273. line-height: 22px;
  274. margin: 0;
  275. }
  276. .x-spreadsheet-editor .x-spreadsheet-editor-area .textline {
  277. overflow: hidden;
  278. visibility: hidden;
  279. position: fixed;
  280. top: 0;
  281. left: 0;
  282. }
  283. .x-spreadsheet-item {
  284. user-select: none;
  285. background: 0;
  286. border: 1px solid transparent;
  287. outline: none;
  288. height: 26px;
  289. color: rgba(0, 0, 0, 0.9);
  290. line-height: 26px;
  291. list-style: none;
  292. padding: 2px 10px;
  293. cursor: default;
  294. text-align: left;
  295. overflow: hidden;
  296. }
  297. .x-spreadsheet-item.disabled {
  298. pointer-events: none;
  299. opacity: 0.5;
  300. }
  301. .x-spreadsheet-item:hover,
  302. .x-spreadsheet-item.active {
  303. background: rgba(0, 0, 0, 0.05);
  304. }
  305. .x-spreadsheet-item.divider {
  306. height: 0;
  307. padding: 0;
  308. margin: 5px 0;
  309. border: none;
  310. border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  311. }
  312. .x-spreadsheet-item .label {
  313. float: right;
  314. opacity: 0.65;
  315. font-size: 1em;
  316. }
  317. .x-spreadsheet-item.state,
  318. .x-spreadsheet-header.state {
  319. padding-left: 35px!important;
  320. position: relative;
  321. }
  322. .x-spreadsheet-item.state:before,
  323. .x-spreadsheet-header.state:before {
  324. content: '';
  325. position: absolute;
  326. width: 10px;
  327. height: 10px;
  328. left: 12px;
  329. top: calc(50% - 5px);
  330. background: rgba(0, 0, 0, 0.08);
  331. border-radius: 2px;
  332. }
  333. .x-spreadsheet-item.state.checked:before,
  334. .x-spreadsheet-header.state.checked:before {
  335. background: #4b89ff;
  336. }
  337. .x-spreadsheet-checkbox {
  338. position: relative;
  339. display: inline-block;
  340. backface-visibility: hidden;
  341. outline: 0;
  342. vertical-align: baseline;
  343. font-style: normal;
  344. font-size: 1rem;
  345. line-height: 1em;
  346. }
  347. .x-spreadsheet-checkbox > input {
  348. position: absolute;
  349. top: 0;
  350. left: 0;
  351. opacity: 0!important;
  352. outline: 0;
  353. z-index: -1;
  354. }
  355. .x-spreadsheet-suggest,
  356. .x-spreadsheet-contextmenu,
  357. .x-spreadsheet-sort-filter {
  358. position: absolute;
  359. box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, 0.15);
  360. background: #fff;
  361. z-index: 100;
  362. width: 260px;
  363. pointer-events: auto;
  364. overflow: auto;
  365. }
  366. .x-spreadsheet-suggest {
  367. width: 200px;
  368. }
  369. .x-spreadsheet-filter {
  370. border: 1px solid #e9e9e9;
  371. font-size: 12px;
  372. margin: 10px;
  373. }
  374. .x-spreadsheet-filter .x-spreadsheet-header {
  375. padding: 0.5em 0.75em;
  376. background: #f8f8f9;
  377. border-bottom: 1px solid #e9e9e9;
  378. border-left: 1px solid transparent;
  379. }
  380. .x-spreadsheet-filter .x-spreadsheet-body {
  381. height: 200px;
  382. overflow-y: auto;
  383. }
  384. .x-spreadsheet-filter .x-spreadsheet-body .x-spreadsheet-item {
  385. height: 20px;
  386. line-height: 20px;
  387. }
  388. .x-spreadsheet-sort-filter .x-spreadsheet-buttons {
  389. margin: 10px;
  390. }
  391. .x-spreadsheet-bottombar {
  392. height: 40px;
  393. padding: 0 30px;
  394. text-align: left;
  395. background: #f5f6f7;
  396. display: flex;
  397. }
  398. .x-spreadsheet-bottombar {
  399. position: relative;
  400. border-top: 1px solid #e0e2e4;
  401. }
  402. .x-spreadsheet-bottombar .x-spreadsheet-menu > li {
  403. line-height: 40px;
  404. height: 40px;
  405. padding-top: 0;
  406. padding-bottom: 0;
  407. vertical-align: middle;
  408. border-right: 1px solid #e8eaed;
  409. }
  410. .x-spreadsheet-menu {
  411. list-style: none;
  412. margin: 0;
  413. padding: 0;
  414. user-select: none;
  415. }
  416. .x-spreadsheet-menu > li {
  417. float: left;
  418. line-height: 1.25em;
  419. padding: 0.785em 1em;
  420. margin: 0;
  421. vertical-align: middle;
  422. text-align: left;
  423. font-weight: 400;
  424. color: #80868b;
  425. white-space: nowrap;
  426. cursor: pointer;
  427. transition: all 0.3s;
  428. font-weight: bold;
  429. }
  430. .x-spreadsheet-menu > li.active {
  431. background-color: #fff;
  432. color: rgba(0, 0, 0, 0.65);
  433. }
  434. .x-spreadsheet-menu > li .x-spreadsheet-dropdown {
  435. display: inline-block;
  436. }
  437. .x-spreadsheet-print {
  438. position: absolute;
  439. left: 0;
  440. top: 0;
  441. z-index: 100;
  442. width: 100%;
  443. height: 100%;
  444. display: flex;
  445. flex-direction: column;
  446. }
  447. .x-spreadsheet-print-bar {
  448. background: #424242;
  449. height: 60px;
  450. line-height: 60px;
  451. padding: 0 30px;
  452. }
  453. .x-spreadsheet-print-bar .-title {
  454. color: #fff;
  455. font-weight: bold;
  456. font-size: 1.2em;
  457. float: left;
  458. }
  459. .x-spreadsheet-print-bar .-right {
  460. float: right;
  461. margin-top: 12px;
  462. }
  463. .x-spreadsheet-print-content {
  464. display: flex;
  465. flex: auto;
  466. flex-direction: row;
  467. background: #d0d0d0;
  468. height: calc(100% - 60px);
  469. }
  470. .x-spreadsheet-print-content .-sider {
  471. flex: 0 0 300px;
  472. width: 300px;
  473. border-left: 2px solid #ccc;
  474. background: #fff;
  475. }
  476. .x-spreadsheet-print-content .-content {
  477. flex: auto;
  478. overflow-x: auto;
  479. overflow-y: scroll;
  480. height: 100%;
  481. }
  482. .x-spreadsheet-canvas-card-wraper {
  483. margin: 40px 20px;
  484. }
  485. .x-spreadsheet-canvas-card {
  486. background: #fff;
  487. margin: auto;
  488. page-break-before: auto;
  489. page-break-after: always;
  490. 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);
  491. }
  492. .x-spreadsheet-calendar {
  493. color: rgba(0, 0, 0, 0.65);
  494. background: #ffffff;
  495. user-select: none;
  496. }
  497. .x-spreadsheet-calendar .calendar-header {
  498. font-weight: 700;
  499. line-height: 30px;
  500. text-align: center;
  501. width: 100%;
  502. float: left;
  503. background: #f9fafb;
  504. }
  505. .x-spreadsheet-calendar .calendar-header .calendar-header-left {
  506. padding-left: 5px;
  507. float: left;
  508. }
  509. .x-spreadsheet-calendar .calendar-header .calendar-header-right {
  510. float: right;
  511. }
  512. .x-spreadsheet-calendar .calendar-header .calendar-header-right a {
  513. padding: 3px 0;
  514. margin-right: 2px;
  515. border-radius: 2px;
  516. }
  517. .x-spreadsheet-calendar .calendar-header .calendar-header-right a:hover {
  518. background: rgba(0, 0, 0, 0.08);
  519. }
  520. .x-spreadsheet-calendar .calendar-body {
  521. border-collapse: collapse;
  522. border-spacing: 0;
  523. }
  524. .x-spreadsheet-calendar .calendar-body th,
  525. .x-spreadsheet-calendar .calendar-body td {
  526. width: 14.28571429%;
  527. min-width: 32px;
  528. text-align: center;
  529. font-weight: 700;
  530. line-height: 30px;
  531. padding: 0;
  532. }
  533. .x-spreadsheet-calendar .calendar-body td > .cell:hover {
  534. background: #ecf6fd;
  535. }
  536. .x-spreadsheet-calendar .calendar-body td > .cell.active,
  537. .x-spreadsheet-calendar .calendar-body td > .cell.active:hover {
  538. background: #ecf6fd;
  539. color: #2185D0;
  540. }
  541. .x-spreadsheet-calendar .calendar-body td > .cell.disabled {
  542. pointer-events: none;
  543. opacity: 0.5;
  544. }
  545. .x-spreadsheet-datepicker {
  546. box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  547. position: absolute;
  548. left: 0;
  549. top: calc(100% + 5px);
  550. z-index: 10;
  551. width: auto;
  552. }
  553. .x-spreadsheet-buttons {
  554. display: flex;
  555. justify-content: flex-end;
  556. }
  557. .x-spreadsheet-buttons .x-spreadsheet-button {
  558. margin-left: 8px;
  559. }
  560. .x-spreadsheet-button {
  561. display: inline-block;
  562. border-radius: 3px;
  563. line-height: 1em;
  564. min-height: 1em;
  565. white-space: nowrap;
  566. text-align: center;
  567. cursor: pointer;
  568. font-size: 1em;
  569. font-weight: 700;
  570. padding: 0.75em 1em;
  571. color: rgba(0, 0, 0, 0.6);
  572. background: #E0E1E2;
  573. text-decoration: none;
  574. font-family: "Lato", "proxima-nova", "Helvetica Neue", Arial, sans-serif;
  575. outline: none;
  576. vertical-align: baseline;
  577. zoom: 1;
  578. user-select: none;
  579. transition: all 0.1s linear;
  580. }
  581. .x-spreadsheet-button.active,
  582. .x-spreadsheet-button:hover {
  583. background-color: #C0C1C2;
  584. color: rgba(0, 0, 0, 0.8);
  585. }
  586. .x-spreadsheet-button.primary {
  587. color: #fff;
  588. background-color: #2185D0;
  589. }
  590. .x-spreadsheet-button.primary:hover,
  591. .x-spreadsheet-button.primary.active {
  592. color: #fff;
  593. background-color: #1678c2;
  594. }
  595. .x-spreadsheet-form-input {
  596. font-size: 1em;
  597. position: relative;
  598. font-weight: 400;
  599. display: inline-flex;
  600. color: rgba(0, 0, 0, 0.87);
  601. }
  602. .x-spreadsheet-form-input input {
  603. z-index: 1;
  604. margin: 0;
  605. max-width: 100%;
  606. flex: 1 0 auto;
  607. outline: 0;
  608. -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  609. text-align: left;
  610. line-height: 30px;
  611. height: 30px;
  612. padding: 0 8px;
  613. background: #fff;
  614. border: 1px solid #e9e9e9;
  615. border-radius: 3px;
  616. transition: box-shadow 0.1s ease, border-color 0.1s ease;
  617. box-shadow: inset 0 1px 2px hsla(0, 0%, 4%, 0.06);
  618. }
  619. .x-spreadsheet-form-input input:focus {
  620. border-color: #4b89ff;
  621. box-shadow: inset 0 1px 2px rgba(75, 137, 255, 0.2);
  622. }
  623. .x-spreadsheet-form-select {
  624. position: relative;
  625. display: inline-block;
  626. background: #fff;
  627. border: 1px solid #e9e9e9;
  628. border-radius: 2px;
  629. cursor: pointer;
  630. color: rgba(0, 0, 0, 0.87);
  631. user-select: none;
  632. box-shadow: inset 0 1px 2px hsla(0, 0%, 4%, 0.06);
  633. }
  634. .x-spreadsheet-form-select .input-text {
  635. text-overflow: ellipsis;
  636. white-space: nowrap;
  637. min-width: 60px;
  638. width: auto;
  639. height: 30px;
  640. line-height: 30px;
  641. padding: 0 8px;
  642. }
  643. .x-spreadsheet-form-fields {
  644. display: flex;
  645. flex-direction: row;
  646. flex-wrap: wrap;
  647. }
  648. .x-spreadsheet-form-fields .x-spreadsheet-form-field {
  649. flex: 0 1 auto;
  650. }
  651. .x-spreadsheet-form-fields .x-spreadsheet-form-field .label {
  652. display: inline-block;
  653. margin: 0 10px 0 0;
  654. }
  655. .x-spreadsheet-form-field {
  656. display: block;
  657. vertical-align: middle;
  658. margin-left: 10px;
  659. margin-bottom: 10px;
  660. }
  661. .x-spreadsheet-form-field:first-child {
  662. margin-left: 0;
  663. }
  664. .x-spreadsheet-form-field.error .x-spreadsheet-form-select,
  665. .x-spreadsheet-form-field.error input {
  666. border-color: #f04134;
  667. }
  668. .x-spreadsheet-form-field .tip {
  669. color: #f04134;
  670. font-size: 0.9em;
  671. }
  672. .x-spreadsheet-dimmer {
  673. display: none;
  674. position: absolute;
  675. top: 0 !important;
  676. left: 0 !important;
  677. width: 100%;
  678. height: 100%;
  679. text-align: center;
  680. vertical-align: middle;
  681. background-color: rgba(0, 0, 0, 0.6);
  682. opacity: 0;
  683. -webkit-animation-fill-mode: both;
  684. animation-fill-mode: both;
  685. -webkit-animation-duration: 0.5s;
  686. animation-duration: 0.5s;
  687. transition: background-color 0.5s linear;
  688. user-select: none;
  689. z-index: 1000;
  690. }
  691. .x-spreadsheet-dimmer.active {
  692. display: block;
  693. opacity: 1;
  694. }
  695. form fieldset {
  696. border: none;
  697. }
  698. form fieldset label {
  699. display: block;
  700. margin-bottom: 0.5em;
  701. font-size: 1em;
  702. color: #666;
  703. }
  704. form fieldset select {
  705. font-size: 1.1em;
  706. width: 100%;
  707. background-color: #fff;
  708. border: none;
  709. border-bottom: 2px solid #ddd;
  710. padding: 0.5em 0.85em;
  711. border-radius: 2px;
  712. }
  713. .x-spreadsheet-modal,
  714. .x-spreadsheet-toast {
  715. font-size: 13px;
  716. position: fixed;
  717. z-index: 1001;
  718. text-align: left;
  719. line-height: 1.25em;
  720. min-width: 360px;
  721. color: rgba(0, 0, 0, 0.87);
  722. font-family: 'Lato', 'Source Sans Pro', Roboto, Helvetica, Arial, sans-serif;
  723. border-radius: 4px;
  724. border: 1px solid rgba(0, 0, 0, 0.1);
  725. background-color: #fff;
  726. background-clip: padding-box;
  727. box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 8px;
  728. }
  729. .x-spreadsheet-toast {
  730. background-color: rgba(255, 255, 255, 0.85);
  731. }
  732. .x-spreadsheet-modal-header,
  733. .x-spreadsheet-toast-header {
  734. font-weight: 600;
  735. background-clip: padding-box;
  736. background-color: rgba(255, 255, 255, 0.85);
  737. border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  738. border-radius: 4px 4px 0 0;
  739. }
  740. .x-spreadsheet-toast-header {
  741. color: #F2711C;
  742. }
  743. .x-spreadsheet-modal-header {
  744. border-bottom: 1px solid #e0e2e4;
  745. background: rgba(0, 0, 0, 0.08);
  746. font-size: 1.0785em;
  747. }
  748. .x-spreadsheet-modal-header,
  749. .x-spreadsheet-modal-content,
  750. .x-spreadsheet-toast-header,
  751. .x-spreadsheet-toast-content {
  752. padding: 0.75em 1em;
  753. }
  754. .x-spreadsheet-menu li:first-child {
  755. display: none;
  756. }
  757. .vue-office-excel {
  758. height: 100%;
  759. }