learun-webApp.css 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609
  1. ::-webkit-scrollbar-track{border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);}
  2. ::-webkit-scrollbar-thumb{background-color: rgba(0,0,0,0.05);border-radius: 10px;-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);}
  3. ::-webkit-scrollbar-thumb{background-color: rgba(0,0,0,0.2);border-radius: 10px;-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);}
  4. ::-webkit-scrollbar{width: 16px;height: 16px;}
  5. ::-webkit-scrollbar-track,
  6. ::-webkit-scrollbar-thumb{border-radius: 999px;border: 5px solid transparent;}
  7. ::-webkit-scrollbar-track{box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset;}
  8. ::-webkit-scrollbar-thumb{min-height: 20px;background-clip: content-box;box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset;}
  9. ::-webkit-scrollbar-corner{background: transparent;}
  10. body{overflow:hidden;margin:0px;padding:0px;font-family:微软雅黑,宋体,Arial,Helvetica,Verdana,sans-serif;color:#000000;}
  11. img {
  12. vertical-align: middle;
  13. border:0;
  14. }
  15. .form-control:focus {
  16. border-color: #4E8EF7;
  17. outline: 0;
  18. -webkit-box-shadow: none;
  19. box-shadow: none;
  20. }
  21. .lr-app-tool-bar {
  22. border-bottom:1px solid #ccc;
  23. height:50px;
  24. }
  25. .leftToolbar {
  26. float:left;
  27. margin-top:8px;
  28. margin-left:8px;
  29. }
  30. .rightToolbar {
  31. float:right;
  32. margin-top:8px;
  33. margin-right:8px;
  34. }
  35. .lr-app-left-bar {
  36. border-right:1px solid #ccc;
  37. width:300px;
  38. float:left;
  39. }
  40. .lr-app-tabctrl .lr-app-tabTool lrapp-toggleb {
  41. margin: -3px -10px 0px 165px;
  42. }
  43. .lr-app-tabctrl .lr-app-tabContent {
  44. height:100px;
  45. border-bottom:1px solid #ccc;
  46. overflow-y:auto;
  47. }
  48. .lr-app-tabctrl .lr-app-tabTool,
  49. .lr-app-pageDirectory .lr-app-pageTool,
  50. .lr-app-component .lr-app-componentTool {
  51. height:32px;
  52. border-bottom:1px solid #ccc;
  53. }
  54. .lr-app-tabctrl .lr-app-tabTool span,
  55. .lr-app-pageDirectory .lr-app-pageTool span,
  56. .lr-app-component .lr-app-componentTool span{
  57. line-height:31px;
  58. padding-left:10px;
  59. }
  60. .lr-app-pageTool .lrbtnAddPage {
  61. float:right;
  62. height:31px;
  63. font-size: 13px;
  64. color: #979797;
  65. font-weight: 500;
  66. padding-right:10px;
  67. }
  68. .lr-app-pageTool .lrbtnAddPage #addPhonePage:hover
  69. {
  70. color:#4f8ef7
  71. }
  72. .lr-app-pageTool .lrbtnAddPage span {
  73. margin-right:5px;
  74. }
  75. .lr-app-pageTool ul li span{
  76. text-align: center;
  77. display: block;
  78. margin-top: 0px;
  79. }
  80. .lr-app-pageTool ul li img {
  81. margin: auto;
  82. text-align: center;
  83. display: block;
  84. box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  85. }
  86. .lr-app-pageTool ul li a:focus, .lr-app-pageTool ul li a:hover {
  87. color: #333;
  88. text-decoration: none;
  89. background-color: #fff;
  90. }
  91. .lr-app-pageDirectory .lr-app-pageContent {
  92. height:250px;
  93. border-bottom:1px solid #ccc;
  94. overflow-y:auto;
  95. }
  96. .lr-app-component .lr-app-componentContent {
  97. overflow-y:auto;
  98. padding-top:15px;
  99. padding-left:15px;
  100. }
  101. .lr-app-componentContent .lr-item-row {
  102. width: 127px;
  103. height: 30px;
  104. line-height: 28px;
  105. float: left;
  106. margin-right: 14px;
  107. margin-bottom: 15px;
  108. border-radius: 5px;
  109. cursor: pointer;
  110. box-shadow: 0px 1px 3px rgba(0,0,0,.2);
  111. color:#616774;
  112. background-color:#F5F6F9;
  113. z-index:100;
  114. }
  115. .lr-app-componentContent .lr-item-row:nth-child(even) {
  116. margin-right: 0px;
  117. }
  118. .lr-app-componentContent .lr-item-row:hover {
  119. box-shadow: 0px 8px 20px rgba(0,0,0,.2);
  120. color:#2E3136;
  121. }
  122. .lr-app-componentContent .lr-item-row:hover i {
  123. color:#4f8ef7;
  124. }
  125. .lr-app-componentContent .lr-item-row i
  126. {
  127. padding-left: 10px;
  128. padding-right: 8px;
  129. color: #2c3849;
  130. opacity: 0.9;
  131. }
  132. /*右侧属性栏*/
  133. .lr-app-right-bar {
  134. border-left:1px solid #ccc;
  135. width:300px;
  136. /*float:right;*/
  137. position:absolute;
  138. right:0;
  139. }
  140. .lr-app-right-bar .lr-app-right-header {
  141. height:32px;
  142. border-bottom:1px solid #ccc;
  143. }
  144. .lr-app-right-bar .lr-app-right-header .lr-app-title {
  145. line-height: 31px;
  146. padding-left: 10px;
  147. }
  148. .lr-app-right-bar .lr-app-right-header .lr-app-typePage a
  149. {
  150. color: #c0c2c7;
  151. text-decoration: none;
  152. transition: 0.1s linear;
  153. -webkit-transition: 0.1s linear;
  154. cursor: pointer;
  155. line-height: 31px;
  156. padding-left: 10px;
  157. }
  158. .lr-app-right-bar .lr-app-right-header .lr-app-typePage a:hover
  159. {
  160. color: #4084f6;
  161. }
  162. .lr-app-right-bar .lr-app-right-header .lr-app-slash{
  163. display: inline-block;
  164. margin-left: 5px;
  165. margin-right: 5px;
  166. color: #c0c2c7;
  167. }
  168. .lr-app-right-bar .btn-group {
  169. margin-top:-2px;
  170. }
  171. .lr-app-right-bar .btn-group .btn {
  172. border: 1px solid #ccc !important;
  173. color:#ccc;
  174. height:34.5px;
  175. }
  176. .lr-app-right-bar .btn-group .btn:hover {
  177. color:#4F8DF6;
  178. background-color:#fff;
  179. }
  180. .lr-app-right-bar .btn-group .btn:focus {
  181. color:#ccc;
  182. background-color:#fff;
  183. outline-width:0px !important;
  184. }
  185. .lr-app-right-bar .btn-group .btn.actived {
  186. background-color: #f1f3f6;
  187. color:#4F8DF6;
  188. }
  189. .lr-app-right-bar .btn-group .btn.b2 {
  190. width:50px;
  191. }
  192. .lr-app-right-bar .btn-group .btn.b4 {
  193. width:52px;
  194. }
  195. .lr-app-mid-bar {
  196. background-color:#EFF1F5;
  197. float:left;
  198. }
  199. .lr-app-mid-bar .lr-app-phoneTool {
  200. height: 32px;
  201. background-color:#fff;
  202. text-align:right;
  203. padding-top: 4px;
  204. border-bottom:1px solid #ccc;
  205. }
  206. .lr-app-mid-bar .lr-app-phoneTool select {
  207. background-color:rgba(0, 0, 0, 0.00);
  208. border: 0;
  209. }
  210. .lr-app-mid-bar .lr-app-phone {
  211. height: 765.284px;
  212. overflow: hidden;
  213. transition: out 0s ease;
  214. margin-top: 58px;
  215. margin-bottom: 63px;
  216. margin-left: 0px;
  217. background-image: url("../images/iphone-skin.png");
  218. background-size: 387.578px 765.284px;
  219. background-position: 50% 0px;
  220. background-repeat: no-repeat;
  221. margin: auto;
  222. }
  223. .lr-app-iframe {
  224. border-radius: 2px;
  225. box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.05);
  226. margin:auto;
  227. }
  228. .lr-app-iframe .iframe-content{
  229. background-color: white;
  230. border: none;
  231. float: left;
  232. }
  233. /*手机状态栏*/
  234. .app-status {
  235. position: absolute;
  236. z-index: 0;
  237. height: 20px;
  238. box-sizing: border-box;
  239. margin-bottom: -20px;
  240. display: block;
  241. pointer-events: none;
  242. font-size: 12px;
  243. font-family: Helvetica, arial, sans-serif;
  244. background-size: 100%;
  245. width:100%;
  246. text-align: -webkit-center;
  247. text-align: -moz-center;
  248. width: -moz-available;
  249. }
  250. .app-status .connection {
  251. line-height: 20px;
  252. margin-left: 3px; }
  253. /*树形插件样式*/
  254. .bbit-tree-node {
  255. color: #4a4d55;
  256. }
  257. .bbit-tree-node a span {
  258. color: #4a4d55;
  259. }
  260. .bbit-tree-node-el {
  261. line-height: 30px;
  262. cursor: pointer;
  263. }
  264. .bbit-tree-node .bbit-tree-selected {
  265. background-color: #387EF5;
  266. color: #fff;
  267. }
  268. /*盒子*/
  269. .lr-box {
  270. border-bottom:1px solid #ccc;
  271. }
  272. .lr-box .lr-box-toggle {
  273. color: #979797;
  274. position: relative;
  275. margin-left: 10px;
  276. font-size: 14px;
  277. font-weight: 500;
  278. transition: .2s color linear;
  279. cursor: pointer;
  280. }
  281. .lr-box.expanded .lr-box-toggle {
  282. color:#387EF5;
  283. }
  284. .caret {
  285. display: inline-block;
  286. width: 0;
  287. height: 0;
  288. margin-left: 2px;
  289. vertical-align: middle;
  290. border-top: 4px solid;
  291. border-right: 4px solid transparent;
  292. border-left: 4px solid transparent;
  293. }
  294. .lr-box .lr-box-toggle .caret {
  295. margin-right: -2px;
  296. margin-left: 10px;
  297. border-bottom: 4px solid transparent;
  298. border-top: 4px solid transparent;
  299. border-left: 4px solid #222429;
  300. display: inline-block;
  301. height: 0;
  302. vertical-align: middle;
  303. width: 0;
  304. }
  305. .lr-box .lr-box-toggle .caret{
  306. position: absolute;
  307. top: 4px;
  308. right: 10px;
  309. transition: .2s transform;
  310. transform-origin: left;
  311. }
  312. .lr-box.expanded .lr-box-toggle .caret {
  313. transform: rotate3d(0, 0, 1, 90deg);
  314. }
  315. .lr-box .lr-box-content {
  316. display:block;
  317. transition: .2s max-height ease-in-out, .2s opacity;
  318. max-height:0;
  319. opacity:0;
  320. }
  321. .lr-box.expanded .lr-box-content {
  322. display:block;
  323. max-height:500px;
  324. opacity:1;
  325. }
  326. .lr-box .form-group {
  327. margin:0px;
  328. padding:0px 10px 10px;
  329. }
  330. .lr-box .control-label {
  331. color:#a8aeb7;
  332. width:74px;
  333. }
  334. .lr-box .form-control {
  335. display: inline-block;
  336. width:205px;
  337. }
  338. .lr-box .form-control.W {
  339. width:100%;
  340. }
  341. .lr-box .form-control:focus {
  342. border-color: #4E8EF7;
  343. outline: 0;
  344. -webkit-box-shadow: none;
  345. box-shadow:none;
  346. /*-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(78, 142, 247,.6);
  347. box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(78, 142, 247,.6);*/
  348. }
  349. .lr-box .form-toggle {
  350. height:34px;
  351. padding:0px 10px 16px;
  352. }
  353. .lr-box lrapp-toggle {
  354. margin: 0px -10px 0px 160px;
  355. }
  356. /*toggle*/
  357. lrapp-toggleb,
  358. lrapp-toggle
  359. {
  360. cursor: pointer;
  361. display: inline-block;
  362. vertical-align: middle;
  363. height: 24px;
  364. line-height: 22px;
  365. margin: 0px 10px;
  366. font-weight: 400;
  367. font-size: 14px;
  368. color: #ACAFB2;
  369. }
  370. lrapp-toggleb .handle,
  371. lrapp-toggle .handle {
  372. position: absolute;
  373. top: 0;
  374. vertical-align: middle;
  375. left: 0;
  376. width: 15px;
  377. height: 15px;
  378. border-radius: 32px;
  379. background-color: #FFF;
  380. box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
  381. }
  382. lrapp-toggleb.active .handle,
  383. lrapp-toggle.active .handle {
  384. left: 14px;
  385. }
  386. lrapp-toggleb.animate .handle,
  387. lrapp-toggle.animate .handle {
  388. -webkit-transition: 100ms left ease-in-out;
  389. transition: 100ms left ease-in-out;
  390. }
  391. lrapp-toggleb.active .track,
  392. lrapp-toggle.active .track {
  393. background-color: #6795f5;
  394. }
  395. lrapp-toggleb.animate .track,
  396. lrapp-toggle.animate .track {
  397. -webkit-transition: 100ms background-color ease-in-out;
  398. transition: 100ms background-color ease-in-out;
  399. }
  400. lrapp-toggleb .track,
  401. lrapp-toggle .track {
  402. display: inline-block;
  403. vertical-align: middle;
  404. position: relative;
  405. background-color: #F0F1F5;
  406. width: 27px;
  407. height: 16px;
  408. border-radius: 32px;
  409. }
  410. lrapp-toggleb span,
  411. lrapp-toggle span {
  412. display: inline-block;
  413. vertical-align: middle;
  414. }
  415. lrapp-toggleb.active .left-text,
  416. lrapp-toggle.active .left-text {
  417. color: #ACAFB2;
  418. }
  419. lrapp-toggleb span:first-child,
  420. lrapp-toggle span:first-child {
  421. margin-right: 10px;
  422. }
  423. lrapp-toggleb .left-text,
  424. lrapp-toggle .left-text {
  425. color: #6795f5;
  426. }
  427. lrapp-toggleb.active .right-text,
  428. lrapp-toggle.active .right-text {
  429. color: #6795f5;
  430. }
  431. lrapp-toggleb span:last-child,
  432. lrapp-toggle span:last-child {
  433. margin-left: 10px;
  434. }
  435. /*lr-app-splash*/
  436. .lr-app-splash {
  437. position:absolute;
  438. background-color:#fff;
  439. top:0;
  440. left:0;
  441. text-align:center;
  442. }
  443. .lr-app-splash img {
  444. height:120px;
  445. width:120px;
  446. background-color:#fff;
  447. border-radius:10px;
  448. box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
  449. }
  450. .lr-app-splash div {
  451. margin-top:10px;
  452. font-size:16px;
  453. color:#444;
  454. }
  455. .mtip.success .mclose{background-position:-16px 0}
  456. .mtip.error .mclose{background-position:-8px 0}
  457. .mtip.warning .mclose{background-position:0 0}
  458. .mtip.success .mclose:hover{background-position:-16px -8px}
  459. .mtip.error .mclose:hover{background-position:-8px -8px}
  460. .mtip.warning .mclose:hover{background-position:0 -8px}
  461. .mtip .micon{background-image:url("../images/micon.png");background-repeat:no-repeat;display:inline-block;width:20px;height:16px;padding-right:10px;margin-top:0px;}
  462. .mtip.error .micon{background-position:0 0;vertical-align:top}
  463. .mtip.success .micon{background-position:0 -66px;vertical-align:top}
  464. .mtip.warning .micon{background-position:0 -132px;vertical-align:top}
  465. .mtip>span{vertical-align:3px;line-height:1;display:inline-block;width:auto;font-size:16px;}
  466. .mtip{border-radius:0 0 4px 4px;padding-top:7px;padding-left:25px;padding-right:25px;padding-bottom:5px;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,0.2);box-shadow:0 4px 4px rgba(0,0,0,0.2)}
  467. .mtip.error{background-color:#cd3237;background-image:-moz-linear-gradient(top,#e34447,#cd3237);background-image:-ms-linear-gradient(top,#e34447,#cd3237);background-image:-webkit-gradient(linear,0 0,0 100%,from(#e34447),to(#cd3237));background-image:-webkit-linear-gradient(top,#e34447,#cd3237);background-image:-o-linear-gradient(top,#e34447,#cd3237);background-image:linear-gradient(top,#e34447,#cd3237);border:1px solid #ca3e3e}
  468. .mtip.success{background-color:#43ab00;background-image:-moz-linear-gradient(top,#43ab00,#388e00);background-image:-ms-linear-gradient(top,#43ab00,#388e00);background-image:-webkit-gradient(linear,0 0,0 100%,from(#43ab00),to(#388e00));background-image:-webkit-linear-gradient(top,#43ab00,#388e00);background-image:-o-linear-gradient(top,#43ab00,#388e00);background-image:linear-gradient(top,#43ab00,#388e00);border:1px solid #338100}
  469. .mtip.warning{background-color:#0f76cd;background-image:-moz-linear-gradient(top,#0f76cd,#086cc1);background-image:-ms-linear-gradient(top,#0f76cd,#086cc1);background-image:-webkit-gradient(linear,0 0,0 100%,from(#0f76cd),to(#086cc1));background-image:-webkit-linear-gradient(top,#0f76cd,#086cc1);background-image:-o-linear-gradient(top,#0f76cd,#086cc1);background-image:linear-gradient(top,#0f76cd,#086cc1);border:1px solid #006096}
  470. .tip_container{display:none;z-index: 9999;position: fixed;top: 0;text-align: left;width: auto;_width: auto;}
  471. .ui-select[disabled],fieldset[disabled] .ui-select{background-color:#eee;opacity:1;cursor:default;background-image:none;opacity: 0.6;}
  472. .ui-select{cursor:pointer;outline: 0;width: auto;height: 34px;line-height:32px;position: relative;background: #fff url(../images/a2.png) no-repeat right center;}
  473. .ui-select-focus{border-color:#337ab7;}
  474. .ui-select .ui-select-text{box-shadow:none;-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;-khtml-user-select: none;user-select: none;border: 1px solid #ccc;padding-left:5px;height: 34px;line-height: 32px;border-radius:4px;}
  475. .ui-select-option{margin:0px;padding:0px;width: 100%;display: none;position: absolute;left:0px;top: 34px;background-color: #fff;overflow:hidden;border: 1px solid #ccc;border-top: 0;z-index: 9999;}
  476. .ui-select-option .ui-select-option-content{overflow-y: auto;}
  477. .ui-select-option .ui-select-option-content ul { padding:0px;margin:0px;}
  478. .ui-select-option li{min-height: 32px;line-height: 32px;overflow: hidden;cursor: pointer;}
  479. .ui-select-option li.on{background-color: #eee;}
  480. .ui-select-option li.liactive{background-color: #337ab7;color:#fff;}
  481. .ui-select-option-search{position: relative;}
  482. .ui-select-option-search .form-control{box-shadow:none;border-color:#ccc;border:none;border-top: 1px solid #ccc;height: 25px;margin:0px;}
  483. .ui-select-option-search .input-query{position:absolute;right:4px;top:1px;color:#ccc;font-size: 16px;}
  484. .ui-underline .ui-select-text{box-shadow: none;border-top: 0px;border-left: 0px;border-right: 0px;border-bottom: 1px solid #ccc;height:25px;}
  485. .color-square {
  486. display: inline-block;
  487. width: 20px;
  488. height: 20px;
  489. border-width: 1px;
  490. border-style: solid;
  491. border-radius: 4px;
  492. background: gray;
  493. vertical-align: middle; }
  494. .color-square.space-right {
  495. margin-right: 5px; }
  496. .color-square.light-bg {
  497. background-color: #fff; }
  498. .color-square.light-border {
  499. border-color: #ddd; }
  500. .color-square.stable-bg {
  501. background-color: #f8f8f8; }
  502. .color-square.stable-border {
  503. border-color: #b2b2b2; }
  504. .color-square.positive-bg {
  505. background-color: #387ef5; }
  506. .color-square.positive-border {
  507. border-color: #0c60ee; }
  508. .color-square.calm-bg {
  509. background-color: #11c1f3; }
  510. .color-square.calm-border {
  511. border-color: #0a9dc7; }
  512. .color-square.assertive-bg {
  513. background-color: #ef473a; }
  514. .color-square.assertive-border {
  515. border-color: #e42112; }
  516. .color-square.balanced-bg {
  517. background-color: #33cd5f; }
  518. .color-square.balanced-border {
  519. border-color: #28a54c; }
  520. .color-square.energized-bg {
  521. background-color: #ffc900; }
  522. .color-square.energized-border {
  523. border-color: #e6b500; }
  524. .color-square.royal-bg {
  525. background-color: #886aea; }
  526. .color-square.royal-border {
  527. border-color: #6b46e5; }
  528. .color-square.dark-bg {
  529. background-color: #444; }
  530. .color-square.dark-border {
  531. border-color: #111; }
  532. .ui-select-text .ion,
  533. .ui-select-option-content .ion
  534. {
  535. font-size: 24px;
  536. vertical-align: middle;
  537. margin-right: 6px;
  538. }
  539. /*扩展颜色*/
  540. .bgcolor_a {
  541. background: #7E9DE7;
  542. }
  543. .bgcolor_b {
  544. background: #F6C34C;
  545. }
  546. .bgcolor_c {
  547. background: #46C6C8;
  548. }
  549. .bgcolor_d {
  550. background: #FF6666;
  551. }
  552. .bgcolor_e {
  553. background: #9CCC65;
  554. }
  555. .bgcolor_f {
  556. background: #14c760;
  557. }
  558. .bgcolor_g {
  559. background:#886aea;
  560. }
  561. .bgcolor_h {
  562. background: #DCDCDC;
  563. }