custom.css 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848
  1. * {
  2. box-sizing: border-box;
  3. }
  4. body {
  5. margin: 0 !important;
  6. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
  7. "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  8. -webkit-font-smoothing: antialiased;
  9. -moz-osx-font-smoothing: grayscale;
  10. }
  11. ::-webkit-scrollbar {
  12. display: none;
  13. }
  14. span p {
  15. display: inline;
  16. }
  17. html, body {
  18. width: 100%;
  19. height: 100%;
  20. min-width: 1700px;
  21. }
  22. .title{
  23. width: 100%;
  24. height: 50px;
  25. display: flex;
  26. align-items: center;
  27. padding: 0 10px;
  28. box-sizing: border-box;
  29. background-color: white;
  30. font-weight: bold;
  31. }
  32. .content {
  33. width: 100%;
  34. height: 100%;
  35. /* height: auto; */
  36. overflow: auto;
  37. box-sizing: border-box;
  38. background-color: #f5f5f5;
  39. display: flex;
  40. justify-content: center;
  41. }
  42. .wrap {
  43. width: 100%;
  44. height: 100%;
  45. overflow: auto;
  46. }
  47. .content nav {
  48. width: 15%;
  49. background-color: #eceaea;
  50. overflow: auto;
  51. user-select: none;
  52. }
  53. .content section {
  54. width: 85%;
  55. height: 100%;
  56. }
  57. .tree{
  58. color:#393939;
  59. }
  60. .tree {
  61. list-style: none;
  62. padding: 10px;
  63. }
  64. .tree ul{
  65. list-style: none;
  66. padding: 10px 0 10px 17px;
  67. }
  68. .tree *:before{
  69. width:17px;
  70. height:17px;
  71. display:inline-block;
  72. }
  73. .tree label{
  74. cursor: pointer;
  75. }
  76. .tree label:before{
  77. content:'▼';
  78. margin-right: 5px;
  79. }
  80. .tree input[type="checkbox"] {
  81. display: none;
  82. }
  83. .tree input[type="checkbox"]:checked~ul {
  84. display: none;
  85. }
  86. .tree div {
  87. display: flex;
  88. align-items: center;
  89. cursor: pointer;
  90. margin-bottom: 5px;
  91. }
  92. .tree input[type="checkbox"]:checked+label:before{
  93. content:'▶';
  94. margin-right: 5px;
  95. margin-top: -5px;
  96. }
  97. .tree ul li.on {
  98. font-weight: bold;
  99. }
  100. ul, li {
  101. user-select: none;
  102. box-sizing: border-box;
  103. }
  104. li {
  105. padding: 5px 0;
  106. font-size: 14px;
  107. }
  108. .total {
  109. padding: 5px 30px;
  110. background-color: #cfcece;
  111. }
  112. .menu {
  113. display: flex;
  114. border-bottom: 1px solid #cfcece;
  115. }
  116. .menu > div {
  117. padding: 10px 20px;
  118. cursor: pointer;
  119. display: flex;
  120. align-items: center;
  121. user-select: none;
  122. }
  123. .menu > div:nth-child(2)::before {
  124. background-image: url('/static/images/plus.png');
  125. }
  126. .menu > div:nth-child(3)::before {
  127. background-image: url('/static/images/upload.png');
  128. }
  129. .menu > div:nth-child(4)::before {
  130. background-image: url('/static/images/refresh.png');
  131. }
  132. .menu > div:not(:first-child)::before {
  133. content: "";
  134. display: inline-block;
  135. background-size: 15px 15px;
  136. width: 15px;
  137. height: 15px;
  138. margin-right: 5px;
  139. }
  140. .menu > div:nth-child(5)::before {
  141. background-image: url('/static/images/onedrive.png');
  142. background-size: 20px 20px;
  143. width: 20px;
  144. height: 20px;
  145. }
  146. .panel {
  147. padding: 10px 20px;
  148. }
  149. .file-title {
  150. display: flex;
  151. padding: 10px 20px;
  152. border-bottom: 1px solid #cfcece;
  153. }
  154. .file-title > div:hover:not(:nth-child(1)){
  155. cursor: pointer;
  156. }
  157. .file-title > div{
  158. user-select: none;
  159. }
  160. .file-title > div.on:not(:first-child):after {
  161. transform: rotate(180deg);
  162. }
  163. .file-title > div:not(:first-child):after {
  164. content: '';
  165. background-image: url('/static/images/chevrondown.png');
  166. width: 15px;
  167. height: 15px;
  168. margin-left: 5px;
  169. display: inline-block;
  170. background-size: 15px 15px;
  171. }
  172. .file-content {
  173. width: 100%;
  174. height: calc(100% - 136px);
  175. overflow: auto;
  176. }
  177. .file-content > div {
  178. display: flex;
  179. padding: 10px 20px;
  180. align-items: center;
  181. }
  182. .file-content > div > div:not(:first-child):hover{
  183. cursor: pointer;
  184. }
  185. .file-content > div > div:nth-child(1),
  186. .file-title > div:nth-child(1){
  187. width: 5%;
  188. text-align: right;
  189. display: flex;
  190. justify-content: space-between;
  191. }
  192. .file-content > div > div:nth-child(2),
  193. .file-title > div:nth-child(2) {
  194. width: 60%;
  195. padding-left: 20px;
  196. }
  197. .file-content > div > div:nth-child(3),
  198. .file-title > div:nth-child(3) {
  199. width: 5%;
  200. }
  201. .file-content > div > div:nth-child(6),
  202. .file-title > div:nth-child(6),
  203. .file-content > div > div:nth-child(5),
  204. .file-title > div:nth-child(5),
  205. .file-content > div > div:nth-child(4),
  206. .file-title > div:nth-child(4) {
  207. width: 10%;
  208. }
  209. .circle-name{
  210. border-radius: 50%;
  211. width: 35px;
  212. height: 35px;
  213. background-color: #b92e2eec;
  214. display: flex;
  215. align-items: center;
  216. margin-right: 10px;
  217. color: white;
  218. overflow: hidden;
  219. justify-content: center;
  220. min-width: 35px;
  221. }
  222. .empty-box {
  223. width: 100%;
  224. height: 100%;
  225. display: flex;
  226. align-items: center;
  227. justify-content: center;
  228. flex-direction: column;
  229. }
  230. .file-content > div.empty-box > div {
  231. font-size: 23px;
  232. font-weight: bold;
  233. width: auto;
  234. padding: 0;
  235. padding-top: 20px;
  236. }
  237. .empty-box .text {
  238. padding: 16px 16px 0px;
  239. font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  240. -webkit-font-smoothing: antialiased;
  241. font-size: 20px;
  242. font-weight: 600;
  243. max-width: 400px;
  244. color: rgb(96, 94, 92);
  245. margin: 0px auto;
  246. }
  247. .file-content > div:hover{
  248. background-color: #eeeeee;
  249. cursor: pointer;
  250. }
  251. .file-content > div.empty-box:hover {
  252. cursor: default;
  253. background-color: #f5f5f5;
  254. }
  255. .file-content input[type='checkbox'] {
  256. cursor: pointer;
  257. }
  258. .file-content > div > div:nth-child(1) {
  259. display: flex;
  260. justify-content: space-between;
  261. }
  262. .file-content > div.on {
  263. background-color: #eeeeee;
  264. }
  265. .file-content > div {
  266. user-select: none;
  267. }
  268. .toggle-box {
  269. position: absolute;
  270. width: 220px;
  271. background-color: #eeeeee;
  272. border: 1px solid #929191;
  273. box-shadow: 1px 2px 2px 2px #929191;
  274. }
  275. .toggle-box > div {
  276. padding: 10px;
  277. cursor: pointer;
  278. user-select: none;
  279. }
  280. .toggle-box > div:hover {
  281. background-color: #c5c4c4;
  282. }
  283. .modal {
  284. display: flex;
  285. position: fixed;
  286. width: 100%;
  287. height: 100%;
  288. top: 0;
  289. left: 0;
  290. background-color: rgba(0, 0, 0, 0.4);
  291. align-items: center;
  292. justify-content: center;
  293. display: none;
  294. }
  295. .modal-box {
  296. /* padding: 20px; */
  297. min-width: 400px;
  298. max-width: 50%;
  299. min-height: 225px;
  300. max-height: 50%;
  301. z-index: 2;
  302. background-color: white;
  303. box-shadow: 2px 2px 2px 2px rgb(75, 75, 75);
  304. display: flex;
  305. flex-direction: column;
  306. justify-content: space-around;
  307. }
  308. .modal .modal-box .header {
  309. position: relative;
  310. width: 100%;
  311. box-sizing: border-box;
  312. }
  313. .modal .modal-box .title {
  314. font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  315. -webkit-font-smoothing: antialiased;
  316. font-size: 20px;
  317. font-weight: 600;
  318. color: rgb(97, 97, 97);
  319. margin: 0px;
  320. min-height: 20px;
  321. padding: 16px 46px 20px 24px;
  322. line-height: normal;
  323. user-select: none;
  324. }
  325. .modal.red .modal-box .title {
  326. color: red;
  327. }
  328. .modal .modal-box .modal-content {
  329. /* padding: 0 30px; */
  330. padding: 30px;
  331. /* height: calc(100% - 102px); */
  332. /* max-height: calc(50% - 102px); */
  333. gap: 10px;
  334. display: flex;
  335. flex-direction: column;
  336. justify-content: center;
  337. overflow: auto;
  338. overflow-wrap: break-word;
  339. }
  340. .modal.red .modal-box .modal-content {
  341. color:red;
  342. }
  343. .modal .modal-box .modal-content input {
  344. width: 100%;
  345. height: 30px;
  346. padding: 5px;
  347. }
  348. .modal .modal-move-box {
  349. }
  350. .modal.red .modal-box .modal-content input:focus{
  351. border-color: red;
  352. outline-color: red;
  353. }
  354. .modal .modal-box .modal-content input:focus{
  355. border-color: #5b5fc7;
  356. outline-color: #5b5fc7;
  357. }
  358. .modal .modal-box .button-box{
  359. display: flex;
  360. align-items: center;
  361. justify-content: flex-end;
  362. padding-right: 10px;
  363. box-sizing: border-box;
  364. gap: 10px;
  365. height: 40px;
  366. margin-bottom: 10px;
  367. }
  368. .modal.red .modal-box .button-box > div {
  369. border: 1px solid red;
  370. background-color: red;
  371. }
  372. .modal .modal-box .button-box > div {
  373. padding: 5px 10px;
  374. border-radius: 5px;
  375. border: 1px solid #5b5fc7;
  376. background-color: #5b5fc7;
  377. color: white;
  378. font-weight: bold;
  379. user-select: none;
  380. }
  381. .modal .modal-box .button-box > div:hover{
  382. filter: brightness(110%);
  383. cursor: pointer;
  384. }
  385. .modal .modal-box .x-button {
  386. display: flex;
  387. flex-flow: row;
  388. position: absolute;
  389. top: 0px;
  390. right: 0px;
  391. padding: 15px 15px 0px 0px;
  392. cursor: pointer;
  393. user-select: none;
  394. }
  395. .sp-name:hover {
  396. text-decoration: underline;
  397. }
  398. .tree li > ul {
  399. padding: 0px 0px 0px 35px;
  400. margin-block-end : 0;
  401. margin-block-start: 0;
  402. }
  403. .tree li > ul.group-section {
  404. padding: 0px 0px 0px 20px;
  405. }
  406. .tree label {
  407. display: flex;
  408. align-items: center;
  409. height: 25px;
  410. }
  411. .tree li > ul > li {
  412. cursor: pointer;
  413. }
  414. .panel-item {
  415. user-select: none;
  416. display: flex;
  417. align-items: center;
  418. }
  419. .panel-item:hover {
  420. cursor: pointer;
  421. }
  422. .panel {
  423. display: flex;
  424. flex-wrap: wrap;
  425. gap: 10px;
  426. }
  427. .panel-item.on {
  428. cursor: default;
  429. font-weight: bold;
  430. }
  431. .click-menu {
  432. position: absolute;
  433. display: none;
  434. background-color: white;
  435. top: 40px;
  436. box-shadow: 2px 2px 2px 2px #eeeeee;
  437. }
  438. .click-menu > div {
  439. padding: 10px;
  440. display: flex;
  441. align-items: center;
  442. gap: 5px;
  443. }
  444. .click-menu > div:hover{
  445. background-color: #eeeeee;
  446. }
  447. #load {
  448. width: 100%;
  449. height: 100%;
  450. top: 0;
  451. left: 0;
  452. position: fixed;
  453. display: block;
  454. opacity: 0.5;
  455. background: white;
  456. z-index: 99;
  457. text-align: center;
  458. }
  459. #load > img {
  460. position: absolute;
  461. top: 50%;
  462. left: 50%;
  463. z-index: 100;
  464. }
  465. *{
  466. margin: 0;
  467. padding : 0;
  468. }
  469. html, body {
  470. width: 100%;
  471. height: 100%;
  472. }
  473. .modal.move {
  474. display: flex;
  475. position: fixed;
  476. width: 100%;
  477. height: 100%;
  478. top: 0;
  479. left: 0;
  480. background-color: rgba(248, 246, 246, 0.4);;
  481. align-items: center;
  482. justify-content: center;
  483. display: none;
  484. }
  485. .modal .modal-move-box {
  486. width: 1080px;
  487. height: 680px;
  488. max-width: 100%;
  489. max-height: 100%;
  490. background-color: white;
  491. display: flex;
  492. border: 1px solid #eeeeee;
  493. z-index: 88;
  494. box-shadow: rgba(0, 0, 0, 0.1) 0px 16px 18px -4px;
  495. }
  496. .modal .modal-move-box .left-box .access-box{
  497. width: 100%;
  498. height: calc(100% - 86px);
  499. padding-top : 16px;
  500. box-sizing: border-box;
  501. font-size: 14px;
  502. }
  503. .modal .modal-move-box .left-box .my-file.on::before,
  504. .modal .modal-move-box .left-box .access-box .on::before{
  505. content: "";
  506. position: absolute;
  507. width: 2px;
  508. height: 28px;
  509. border-radius: 4px;
  510. background-color: #3d3e66;
  511. margin-right: 10px;
  512. }
  513. .modal .modal-move-box .left-box .access-box .on {
  514. font-weight: bold;
  515. }
  516. .modal .modal-move-box .left-box .access-box > div:hover {
  517. background-color: #eeeeee;
  518. }
  519. .modal .modal-move-box .left-box .access-box > div {
  520. padding : 10px 0;
  521. }
  522. .modal .modal-move-box .left-box .access-box > div:not(.access) {
  523. cursor: pointer;
  524. }
  525. .modal .modal-move-box .left-box .access-box div > div {
  526. display: flex;
  527. align-items: center;
  528. box-sizing: border-box;
  529. }
  530. .modal .modal-move-box .left-box .access-box div img {
  531. margin-right: 10px;
  532. margin-left: 15px;
  533. }
  534. .modal .modal-move-box .left-box .access{
  535. height: 36px;
  536. line-height: 32px;
  537. text-overflow: ellipsis;
  538. overflow: hidden;
  539. font-size: 14px;
  540. padding: 0 16px 0 16px;
  541. color: #616161;
  542. font-weight: 600;
  543. }
  544. .modal .modal-move-box .left-box{
  545. width: 25%;
  546. height: 100%;
  547. box-sizing: border-box;
  548. padding: 10px;
  549. border-right: 1px solid #eeeeee;
  550. user-select: none;
  551. }
  552. .modal .modal-move-box .right-top-box{
  553. width: 100%;
  554. height: 100%;
  555. box-sizing: border-box;
  556. padding: 10px;
  557. border-right: 1px solid #eeeeee;
  558. }
  559. .modal .modal-move-box .my-file {
  560. display: flex;
  561. align-items: center;
  562. margin-top: 20px;
  563. padding: 10px 0;
  564. cursor: pointer;
  565. }
  566. .modal .modal-move-box .move_row {
  567. display: flex;
  568. align-items: center;
  569. border-bottom: 1px solid #eeeeee;
  570. padding: 5 0;
  571. }
  572. .modal .modal-move-box .right-box .content .list > div.off > div:nth-child(2) > span:hover{
  573. text-decoration: none;
  574. }
  575. .modal .modal-move-box .right-box .content .list > div.off {
  576. opacity: 0.5;
  577. }
  578. .modal .modal-move-box .my-file:hover{
  579. background-color: #eeeeee;
  580. }
  581. .modal .modal-move-box .my-file img {
  582. margin-left: 10px;
  583. }
  584. .modal .modal-move-box .button-box {
  585. padding: 24px;
  586. display: flex;
  587. justify-content: flex-end;
  588. gap: 10px;
  589. }
  590. .modal .modal-move-box .button-box > div {
  591. min-width: 96px;
  592. height: 32px;
  593. display: flex;
  594. align-items: center;
  595. justify-content: center;
  596. font-size: 14px;
  597. user-select: none;
  598. }
  599. .modal .modal-move-box .button-box > div:nth-child(1).off {
  600. opacity: 0.5;
  601. cursor: default;
  602. }
  603. .modal .modal-move-box .button-box > div:nth-child(2):hover,
  604. .modal .modal-move-box .button-box > div:nth-child(1):not(.off):hover {
  605. filter:brightness(1.1);
  606. cursor: pointer;
  607. }
  608. .modal .modal-move-box .button-box > div:nth-child(1) {
  609. background-color: #5b5fc7;
  610. color: white;
  611. box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 4px -0.75px;
  612. }
  613. .modal .modal-move-box .button-box > div:nth-child(2) {
  614. border: 1px solid rgb(209, 209, 209);
  615. box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px -0.75px
  616. }
  617. .modal .modal-move-box .right-box {
  618. width: 75%;
  619. height: 100%;
  620. user-select: none;
  621. }
  622. .modal .modal-move-box .right-box .content .list{
  623. width: 100%;
  624. height: calc(100% - 40px);
  625. }
  626. .modal .modal-move-box .right-box .content .header{
  627. display:flex;
  628. width:100%;
  629. height: 40px;
  630. align-items:center;
  631. border-bottom: 1px solid #eeeeee;
  632. position: sticky;
  633. top: 0;
  634. background-color: white;
  635. }
  636. .modal .modal-move-box .right-box .content .list > div > div:nth-child(2) > span:hover{
  637. text-decoration: underline;
  638. }
  639. .modal .modal-move-box .right-box .content .list > div > div:nth-child(2),
  640. .modal .modal-move-box .right-box .content .header > div:nth-child(2) {
  641. box-sizing: border-box;
  642. width: 300px;
  643. padding: 0 10px;
  644. overflow: hidden;
  645. text-overflow: ellipsis;
  646. }
  647. .modal .modal-move-box .right-box .content .list > div > div:nth-child(3),
  648. .modal .modal-move-box .right-box .content .header > div:nth-child(3) {
  649. box-sizing: border-box;
  650. width: 150px;
  651. padding: 0 10px;
  652. overflow: hidden;
  653. text-overflow: ellipsis;
  654. }
  655. .modal .modal-move-box .right-box .content .list > div > div:nth-child(4),
  656. .modal .modal-move-box .right-box .content .header > div:nth-child(4) {
  657. box-sizing: border-box;
  658. width: 150px;
  659. padding: 0 10px;
  660. overflow: hidden;
  661. text-overflow: ellipsis;
  662. }
  663. .modal .modal-move-box .right-box .content .list > div > div:nth-child(1),
  664. .modal .modal-move-box .right-box .content .header > div:nth-child(1) {
  665. width: 40px;
  666. padding: 0 10px;
  667. box-sizing: border-box;
  668. }
  669. .modal .modal-move-box .right-box .content .list > div:not(.empty-box):hover {
  670. cursor: pointer;
  671. background-color: #eeeeee;
  672. }
  673. .modal .modal-move-box .right-box .content .list > div.off:hover{
  674. cursor: default;
  675. }
  676. .modal .modal-move-box .right-box .content .header > div:not(:first-child) {
  677. cursor: pointer;
  678. }
  679. .modal .modal-move-box .right-box .content .header > div:not(:first-child):after {
  680. content: '';
  681. background-image: url('/static/images/chevrondown.png');
  682. width: 15px;
  683. height: 15px;
  684. margin-left: 5px;
  685. display: inline-block;
  686. background-size: 15px 15px;
  687. }
  688. .modal .modal-move-box .right-box .content{
  689. width: 100%;
  690. height: calc(100% - 141px);
  691. border-bottom: 1px solid #eeeeee;
  692. background-color: white;
  693. padding: 0 10px;
  694. box-sizing: border-box;
  695. overflow: auto;
  696. flex-direction: column;
  697. position: relative;
  698. }
  699. .modal .modal-move-box .right-box .content .loading-box {
  700. position: absolute;
  701. right: 0;
  702. top: 0;
  703. width: 245px;
  704. height: auto;
  705. background-color: white;
  706. border: 1px solid #eeeeee;
  707. }
  708. @keyframes spinCircle {
  709. from {
  710. transform: rotate(0);
  711. }
  712. to {
  713. transform: rotate(360deg);
  714. }
  715. }
  716. .modal .modal-move-box .right-box .content .loading-box > div > div img {
  717. animation-name: spinCircle;
  718. animation-duration: 1.2s;
  719. animation-iteration-count: infinite;
  720. }
  721. .modal .modal-move-box .right-box .content .loading-box > div > div:nth-child(1) > div:nth-child(1) {
  722. width: calc(100% - 50px);
  723. overflow: hidden;
  724. text-overflow: ellipsis;
  725. white-space: nowrap;
  726. }
  727. .modal .modal-move-box .right-box .content .loading-box > div > div:nth-child(1) {
  728. display: flex;
  729. align-items: center;
  730. justify-content: space-between;
  731. }
  732. .modal .modal-move-box .right-box .content .loading-box .loading-gauge-box{
  733. display: flex;
  734. align-items: center;
  735. height: 30px;
  736. width: 100%;
  737. }
  738. .modal .modal-move-box .right-box .content .loading-box .loading-gauge-box > div:nth-child(2) {
  739. width: 60px;
  740. display: flex;
  741. align-items: center;
  742. justify-content: flex-end;
  743. }
  744. .modal .modal-move-box .right-box .content .loading-box .loading-gauge-box > div:nth-child(1) {
  745. width: calc(100% - 60px);
  746. height: 10px;
  747. position: relative;
  748. }
  749. .modal .modal-move-box .right-box .content .loading-box .loading-gauge-box .loading-background {
  750. width: 100%;
  751. height: 10px;
  752. position: absolute;
  753. background-color: #eeeeee;
  754. border: 1px solid #eeeeee;
  755. border-radius: 5px;
  756. }
  757. .modal .modal-move-box .right-box .content .loading-box .loading-gauge-box .loading-gauge {
  758. width: 0;
  759. height: 10px;
  760. position: absolute;
  761. background-color: rgb(17, 212, 99);
  762. border: 1px solid rgb(17, 212, 99);
  763. border-radius: 5px;
  764. }
  765. .modal .modal-move-box .right-box .content .loading-box > div{
  766. padding: 10px;
  767. }
  768. .modal .modal-move-box .right-box .panel{
  769. width: 100%;
  770. height: 59px;
  771. border-bottom: 1px solid #eeeeee;
  772. align-items: center;
  773. overflow: hidden;
  774. text-overflow: ellipsis;
  775. white-space: nowrap;
  776. }
  777. .menu-button:hover{
  778. cursor: pointer;
  779. }
  780. .toggle-button {
  781. position: absolute;
  782. top: 100px;
  783. border: 1px solid rgb(238, 238, 238);
  784. width: auto;
  785. z-index: 10;
  786. background-color: white;
  787. display: none;
  788. min-width: 150px;
  789. }
  790. .toggle-button > div {
  791. padding: 10px;
  792. }
  793. .toggle-button > div:hover {
  794. cursor: pointer;
  795. background-color: #eeeeee;
  796. }