You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

568 lines
12 KiB

2 years ago
  1. .tool-container, .tool-item, .btn-toolbar {
  2. -webkit-box-sizing: content-box;
  3. -moz-box-sizing: content-box;
  4. box-sizing: content-box;
  5. }
  6. .btn-toolbar {
  7. background: #364347;
  8. width: 20px;
  9. height: 20px;
  10. text-align: center;
  11. padding: 10px;
  12. border-radius: 6px;
  13. display: block;
  14. transition: none;
  15. }
  16. .btn-toolbar > i {
  17. color: #02baf2;
  18. font-size: 16px;
  19. }
  20. .btn-toolbar:hover {
  21. background: #02baf2;
  22. cursor: pointer;
  23. }
  24. .btn-toolbar:hover > i {
  25. color: white;
  26. }
  27. .btn-toolbar-primary {
  28. background-color: #009dcd;
  29. }
  30. .btn-toolbar-primary.pressed {
  31. background-color: #02baf2;
  32. }
  33. .btn-toolbar-primary:hover {
  34. background-color: #02baf2;
  35. }
  36. .btn-toolbar-primary > i {
  37. color: white;
  38. }
  39. .btn-toolbar-danger {
  40. background-color: #cc0000;
  41. }
  42. .btn-toolbar-danger.pressed {
  43. background-color: #f84545;
  44. }
  45. .btn-toolbar-danger:hover {
  46. background-color: #f84545;
  47. }
  48. .btn-toolbar-danger > i {
  49. color: white;
  50. }
  51. .btn-toolbar-warning {
  52. background-color: #f3bc65;
  53. }
  54. .btn-toolbar-warning.pressed {
  55. background-color: #fad46b;
  56. }
  57. .btn-toolbar-warning:hover {
  58. background-color: #fad46b;
  59. }
  60. .btn-toolbar-warning > i {
  61. color: white;
  62. }
  63. .btn-toolbar-info {
  64. background-color: #e96300;
  65. }
  66. .btn-toolbar-info.pressed {
  67. background-color: #f58410;
  68. }
  69. .btn-toolbar-info:hover {
  70. background-color: #f58410;
  71. }
  72. .btn-toolbar-info > i {
  73. color: white;
  74. }
  75. .btn-toolbar-success {
  76. background-color: #28948c;
  77. }
  78. .btn-toolbar-success.pressed {
  79. background-color: #3eb5ac;
  80. }
  81. .btn-toolbar-success:hover {
  82. background-color: #3eb5ac;
  83. }
  84. .btn-toolbar-success > i {
  85. color: white;
  86. }
  87. .btn-toolbar-info-o {
  88. background-color: #9175bd;
  89. }
  90. .btn-toolbar-info-o.pressed {
  91. background-color: #a88cd5;
  92. }
  93. .btn-toolbar-info-o:hover {
  94. background-color: #a88cd5;
  95. }
  96. .btn-toolbar-info-o > i {
  97. color: white;
  98. }
  99. .btn-toolbar-light {
  100. background-color: #b2c6cd;
  101. }
  102. .btn-toolbar-light.pressed {
  103. background-color: #d6e1e5;
  104. }
  105. .btn-toolbar-light:hover {
  106. background-color: #d6e1e5;
  107. }
  108. .btn-toolbar-light > i {
  109. color: white;
  110. }
  111. .btn-toolbar-toolbox {
  112. background-color: #5e696d;
  113. }
  114. .btn-toolbar-toolbox.pressed {
  115. background-color: #02baf2;
  116. }
  117. .btn-toolbar-toolbox:hover {
  118. background-color: #02baf2;
  119. }
  120. .btn-toolbar-toolbox > i {
  121. color:#5e696d;
  122. }
  123. .btn-toolbar-yida {
  124. background-color: #5e696d;
  125. }
  126. .btn-toolbar-yida.pressed {
  127. background-color: #e5e5e5;
  128. }
  129. .btn-toolbar-yida:hover {
  130. background-color: #e5e5e5;
  131. }
  132. .btn-toolbar-yida > i {
  133. color:#364347;
  134. }
  135. .btn-toolbar-dark {
  136. background-color: #364347;
  137. }
  138. .btn-toolbar-dark.pressed {
  139. background-color: #5e696d;
  140. }
  141. .btn-toolbar-dark:hover {
  142. background-color: #5e696d;
  143. }
  144. .btn-toolbar-dark > i {
  145. color: white;
  146. }
  147. .tool-container {
  148. background-color: #5e696d;
  149. background-size: 100% 100%;
  150. border-radius: 6px;
  151. position: absolute;
  152. }
  153. .tool-container.tool-top,
  154. .tool-container.tool-bottom {
  155. height: 40px;
  156. border-bottom: 0px solid #beb8b8;
  157. }
  158. .tool-container.tool-top .tool-item,
  159. .tool-container.tool-bottom .tool-item {
  160. float: left;
  161. border-right: 0;
  162. border-left: 0;
  163. }
  164. .tool-item {
  165. height: 100%;
  166. display: block;
  167. width: 150px;
  168. height: 20px;
  169. text-align: center;
  170. padding: 10px;
  171. transition: none;
  172. }
  173. .tool-item > .fa {
  174. color: #b2c6cd;
  175. }
  176. .tool-item.selected,
  177. .tool-item:hover {
  178. background: #02baf2;
  179. }
  180. .tool-item.selected > .fa,
  181. .tool-item:hover > .fa {
  182. color: white;
  183. }
  184. .tool-top .tool-item:first-child:hover,
  185. .tool-bottom .tool-item:first-child:hover {
  186. border-top-left-radius: 6px;
  187. border-bottom-left-radius: 6px;
  188. }
  189. .tool-top .tool-item:last-child:hover,
  190. .tool-bottom .tool-item:last-child:hover {
  191. border-top-right-radius: 6px;
  192. border-bottom-right-radius: 6px;
  193. }
  194. .tool-vertical-top .tool-item:first-child:hover,
  195. .tool-vertical-bottom .tool-item:first-child:hover,
  196. .tool-right .tool-item:first-child:hover,
  197. .tool-left .tool-item:first-child:hover {
  198. border-top-left-radius: 6px;
  199. border-top-right-radius: 6px;
  200. }
  201. .tool-vertical-top .tool-item:last-child:hover,
  202. .tool-vertical-bottom .tool-item:last-child:hover,
  203. .tool-right .tool-item:last-child:hover,
  204. .tool-left .tool-item:last-child:hover {
  205. border-bottom-left-radius: 6px;
  206. border-bottom-right-radius: 6px;
  207. }
  208. .tool-container .arrow {
  209. width: 0;
  210. height: 0;
  211. position: absolute;
  212. border-width: 7px;
  213. border-style: solid;
  214. }
  215. .tool-container.tool-top .arrow {
  216. border-color: #5e696d transparent transparent;
  217. left: 50%;
  218. bottom: -14px;
  219. margin-left: -7px;
  220. }
  221. .tool-container.tool-bottom .arrow {
  222. border-color: transparent transparent #5e696d;
  223. left: 50%;
  224. top: -14px;
  225. margin-left: -7px;
  226. }
  227. .tool-container.tool-left .arrow {
  228. border-color: transparent transparent transparent #5e696d;
  229. top: 50%;
  230. right: -14px;
  231. margin-top: -7px;
  232. }
  233. .tool-container.tool-right .arrow {
  234. border-color: transparent #5e696d transparent transparent;
  235. top: 50%;
  236. left: -14px;
  237. margin-top: -7px;
  238. }
  239. .toolbar-primary {
  240. background-color: #02baf2;
  241. }
  242. .toolbar-primary.tool-top .arrow {
  243. border-color: #02baf2 transparent transparent;
  244. }
  245. .toolbar-primary.tool-bottom .arrow {
  246. border-color: transparent transparent #02baf2;
  247. }
  248. .toolbar-primary.tool-left .arrow {
  249. border-color: transparent transparent transparent #02baf2;
  250. }
  251. .toolbar-primary.tool-right .arrow {
  252. border-color: transparent #02baf2 transparent transparent;
  253. }
  254. .toolbar-primary .tool-item > .fa {
  255. color: white;
  256. }
  257. .toolbar-primary .tool-item.selected,
  258. .toolbar-primary .tool-item:hover {
  259. background: #009dcd;
  260. color: white;
  261. }
  262. .toolbar-danger {
  263. background-color: #f84545;
  264. }
  265. .toolbar-danger.tool-top .arrow {
  266. border-color: #f84545 transparent transparent;
  267. }
  268. .toolbar-danger.tool-bottom .arrow {
  269. border-color: transparent transparent #f84545;
  270. }
  271. .toolbar-danger.tool-left .arrow {
  272. border-color: transparent transparent transparent #f84545;
  273. }
  274. .toolbar-danger.tool-right .arrow {
  275. border-color: transparent #f84545 transparent transparent;
  276. }
  277. .toolbar-danger .tool-item > .fa {
  278. color: white;
  279. }
  280. .toolbar-danger .tool-item.selected,
  281. .toolbar-danger .tool-item:hover {
  282. background: #cc0000;
  283. color: white;
  284. }
  285. .toolbar-warning {
  286. background-color: #f3bc65;
  287. }
  288. .toolbar-warning.tool-top .arrow {
  289. border-color: #f3bc65 transparent transparent;
  290. }
  291. .toolbar-warning.tool-bottom .arrow {
  292. border-color: transparent transparent #f3bc65;
  293. }
  294. .toolbar-warning.tool-left .arrow {
  295. border-color: transparent transparent transparent #f3bc65;
  296. }
  297. .toolbar-warning.tool-right .arrow {
  298. border-color: transparent #f3bc65 transparent transparent;
  299. }
  300. .toolbar-warning .tool-item > .fa {
  301. color: white;
  302. }
  303. .toolbar-warning .tool-item.selected,
  304. .toolbar-warning .tool-item:hover {
  305. background: #fad46b;
  306. color: white;
  307. }
  308. .toolbar-info {
  309. background-color: #e96300;
  310. }
  311. .toolbar-info.tool-top .arrow {
  312. border-color: #e96300 transparent transparent;
  313. }
  314. .toolbar-info.tool-bottom .arrow {
  315. border-color: transparent transparent #e96300;
  316. }
  317. .toolbar-info.tool-left .arrow {
  318. border-color: transparent transparent transparent #e96300;
  319. }
  320. .toolbar-info.tool-right .arrow {
  321. border-color: transparent #e96300 transparent transparent;
  322. }
  323. .toolbar-info .tool-item > .fa {
  324. color: white;
  325. }
  326. .toolbar-info .tool-item.selected,
  327. .toolbar-info .tool-item:hover {
  328. background: #f58410;
  329. color: white;
  330. }
  331. .toolbar-success {
  332. background-color: #28948c;
  333. }
  334. .toolbar-success.tool-top .arrow {
  335. border-color: #28948c transparent transparent;
  336. }
  337. .toolbar-success.tool-bottom .arrow {
  338. border-color: transparent transparent #28948c;
  339. }
  340. .toolbar-success.tool-left .arrow {
  341. border-color: transparent transparent transparent #28948c;
  342. }
  343. .toolbar-success.tool-right .arrow {
  344. border-color: transparent #28948c transparent transparent;
  345. }
  346. .toolbar-success .tool-item > .fa {
  347. color: white;
  348. }
  349. .toolbar-success .tool-item.selected,
  350. .toolbar-success .tool-item:hover {
  351. background: #3eb5ac;
  352. color: white;
  353. }
  354. .toolbar-info-o {
  355. background-color: #9175bd;
  356. }
  357. .toolbar-info-o.tool-top .arrow {
  358. border-color: #9175bd transparent transparent;
  359. }
  360. .toolbar-info-o.tool-bottom .arrow {
  361. border-color: transparent transparent #9175bd;
  362. }
  363. .toolbar-info-o.tool-left .arrow {
  364. border-color: transparent transparent transparent #9175bd;
  365. }
  366. .toolbar-info-o.tool-right .arrow {
  367. border-color: transparent #9175bd transparent transparent;
  368. }
  369. .toolbar-info-o .tool-item > .fa {
  370. color: white;
  371. }
  372. .toolbar-info-o .tool-item.selected,
  373. .toolbar-info-o .tool-item:hover {
  374. background: #a88cd5;
  375. color: white;
  376. }
  377. .toolbar-toolbox {
  378. background-color: #5e696d;
  379. }
  380. .toolbar-toolbox.tool-top .arrow {
  381. border-color: #5e696d transparent transparent;
  382. }
  383. .toolbar-toolbox.tool-bottom .arrow {
  384. border-color: transparent transparent #5e696d;
  385. }
  386. .toolbar-toolbox.tool-left .arrow {
  387. border-color: transparent transparent transparent #5e696d;
  388. }
  389. .toolbar-toolbox.tool-right .arrow {
  390. border-color: transparent #5e696d transparent transparent;
  391. }
  392. .toolbar-toolbox .tool-item{
  393. color: white;
  394. }
  395. .toolbar-toolbox .tool-item:not(last){
  396. border: #555252 solid 1px;
  397. }
  398. .toolbar-toolbox .tool-item > .fa {
  399. color: white;
  400. }
  401. .toolbar-toolbox .tool-item.selected,
  402. .toolbar-toolbox .tool-item:hover {
  403. background: #84898b;
  404. color: white;
  405. }
  406. .toolbar-yida {
  407. background-color: white;
  408. }
  409. .toolbar-yida.tool-top .arrow {
  410. border-color: #cecece transparent transparent;
  411. }
  412. .toolbar-yida.tool-bottom .arrow {
  413. border-color: transparent transparent #cecece;
  414. }
  415. .toolbar-yida.tool-left .arrow {
  416. border-color: transparent transparent transparent #cecece;
  417. }
  418. .toolbar-yida.tool-right .arrow {
  419. border-color: transparent #cecece transparent transparent;
  420. }
  421. .toolbar-yida .tool-item{
  422. color: #3b383d;
  423. }
  424. .toolbar-yida .tool-item:not(last){
  425. border: #dadada solid 1px;
  426. }
  427. .toolbar-yida .tool-item > .fa {
  428. color: #3b383d;
  429. }
  430. .toolbar-yida .tool-item.selected,
  431. .toolbar-yida .tool-item:hover {
  432. background:#f7f7f7;
  433. color: #364347;
  434. }
  435. .toolbar-light {
  436. background-color: #b2c6cd;
  437. }
  438. .toolbar-light.tool-top .arrow {
  439. border-color: #b2c6cd transparent transparent;
  440. }
  441. .toolbar-light.tool-bottom .arrow {
  442. border-color: transparent transparent #b2c6cd;
  443. }
  444. .toolbar-light.tool-left .arrow {
  445. border-color: transparent transparent transparent #b2c6cd;
  446. }
  447. .toolbar-light.tool-right .arrow {
  448. border-color: transparent #b2c6cd transparent transparent;
  449. }
  450. .toolbar-light .tool-item > .fa {
  451. color: white;
  452. }
  453. .toolbar-light .tool-item.selected,
  454. .toolbar-light .tool-item:hover {
  455. background: #d6e1e5;
  456. color: white;
  457. }
  458. .toolbar-dark {
  459. background-color: #364347;
  460. }
  461. .toolbar-dark.tool-top .arrow {
  462. border-color: #364347 transparent transparent;
  463. }
  464. .toolbar-dark.tool-bottom .arrow {
  465. border-color: transparent transparent #364347;
  466. }
  467. .toolbar-dark.tool-left .arrow {
  468. border-color: transparent transparent transparent #364347;
  469. }
  470. .toolbar-dark.tool-right .arrow {
  471. border-color: transparent #364347 transparent transparent;
  472. }
  473. .toolbar-dark .tool-item > .fa {
  474. color: white;
  475. }
  476. .toolbar-dark .tool-item.selected,
  477. .toolbar-dark .tool-item:hover {
  478. background: #5e696d;
  479. color: white;
  480. }
  481. .animate-standard {
  482. -webkit-animation: standardAnimate 0.3s 1 ease;
  483. }
  484. .animate-flyin {
  485. -webkit-animation: rotateAnimate 0.5s 1 ease;
  486. }
  487. .animate-grow {
  488. -webkit-animation: growAnimate 0.4s 1 ease;
  489. }
  490. .animate-flip {
  491. -webkit-animation: flipAnimate 0.4s 1 ease;
  492. }
  493. .animate-bounce {
  494. -webkit-animation: bounceAnimate 0.4s 1 ease-out;
  495. }
  496. @-webkit-keyframes rotateAnimate {
  497. from {
  498. transform: rotate(180deg) translate(-120px);
  499. opacity: 0;
  500. }
  501. to {
  502. transform: rotate(0deg) translate(0px);
  503. opacity: 1;
  504. }
  505. }
  506. @-webkit-keyframes standardAnimate {
  507. from {
  508. transform: translateY(20px);
  509. opacity: 0;
  510. }
  511. to {
  512. transform: translateY(0px);
  513. opacity: 1;
  514. }
  515. }
  516. @-webkit-keyframes growAnimate {
  517. 0% {
  518. transform: scale(0) translateY(40px);
  519. opacity: 0;
  520. }
  521. 70% {
  522. transform: scale(1.5) translate(0px);
  523. }
  524. 100% {
  525. transform: scale(1) translate(0px);
  526. opacity: 1;
  527. }
  528. }
  529. @-webkit-keyframes rotate2Animate {
  530. from {
  531. transform: rotate(-90deg);
  532. transform-origin: 0% 100%;
  533. opacity: 0;
  534. }
  535. to {
  536. transform: rotate(0deg);
  537. opacity: 1;
  538. }
  539. }
  540. @-webkit-keyframes flipAnimate {
  541. from {
  542. transform: rotate3d(2, 2, 2, 180deg);
  543. opacity: 0;
  544. }
  545. to {
  546. transform: rotate3d(0, 0, 0, 0deg);
  547. opacity: 1;
  548. }
  549. }
  550. @-webkit-keyframes bounceAnimate {
  551. 0% {
  552. transform: translateY(40px);
  553. opacity: 0;
  554. }
  555. 30% {
  556. transform: translateY(-40px);
  557. }
  558. 70% {
  559. transform: translateY(20px);
  560. }
  561. 100% {
  562. transform: translateY(0px);
  563. opacity: 1;
  564. }
  565. }
  566. .hidden {
  567. display: none;
  568. }