frontend.less 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931
  1. @import (reference) "bootstrap-less/mixins.less";
  2. @import (reference) "bootstrap-less/variables.less";
  3. @import "lesshat.less";
  4. @import url("../css/bootstrap.css");
  5. @import url("../css/fastadmin.css");
  6. @import url("../css/iconfont.css");
  7. @import url("../libs/font-awesome/css/font-awesome.min.css");
  8. @import url("../libs/toastr/toastr.min.css");
  9. @import url("../libs/fastadmin-layer/dist/theme/default/layer.css");
  10. @import url("../libs/bootstrap-table/dist/bootstrap-table.min.css");
  11. @import url("../libs/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css");
  12. @import url("../libs/bootstrap-daterangepicker/daterangepicker.css");
  13. @import url("../libs/nice-validator/dist/jquery.validator.css");
  14. @import url("../libs/bootstrap-select/dist/css/bootstrap-select.min.css");
  15. @import url("../libs/fastadmin-selectpage/selectpage.css");
  16. @import url("../libs/bootstrap-slider/slider.css");
  17. @import "tinycss.less";
  18. @primary-color: #007bff;
  19. //@primary-color: #2d76d9;
  20. .clearfix() {
  21. &:before,
  22. &:after {
  23. content: " ";
  24. display: table;
  25. }
  26. &:after {
  27. clear: both;
  28. }
  29. }
  30. html,
  31. body {
  32. height: 100%;
  33. }
  34. body {
  35. padding-top: 60px;
  36. font-size: 14px;
  37. background: #f4f6f8;
  38. height: 100%;
  39. line-height: 1.5715;
  40. -webkit-font-smoothing: antialiased;
  41. text-rendering: optimizeLegibility;
  42. -moz-osx-font-smoothing: grayscale;
  43. font-feature-settings: 'liga';
  44. -webkit-text-size-adjust: 100%;
  45. font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, Source Han Sans CN, sans-serif;
  46. font-weight: 400;
  47. color: #616161;
  48. }
  49. a {
  50. color: @primary-color;
  51. &:hover, &:focus {
  52. color: @primary-color;
  53. }
  54. }
  55. .navbar-white {
  56. background-color: #fff;
  57. border-color: #fff;
  58. box-shadow: 0 1px 8px rgba(0, 0, 0, .08);
  59. .dropdown-menu {
  60. border-radius: 5px;
  61. //box-shadow: 0 1px 8px rgba(0, 0, 0, .08);
  62. .box-shadow(0px 20px 30px rgba(83, 88, 93, 0.05), 0px 0px 30px rgba(83, 88, 93, 0.1));
  63. }
  64. }
  65. @media (min-width: 768px) {
  66. .navbar-default {
  67. .navbar-brand {
  68. height: 60px;
  69. line-height: 27px;
  70. }
  71. .navbar-nav {
  72. > li > a {
  73. height: 60px;
  74. line-height: 27px;
  75. }
  76. }
  77. }
  78. .navbar-white .navbar-nav {
  79. > li > a {
  80. height: 60px;
  81. line-height: 27px;
  82. color: #555;
  83. &:hover, &:focus {
  84. color: @primary-color;
  85. }
  86. }
  87. > .active > a {
  88. &, &:hover, &:focus {
  89. background-color: inherit;
  90. color: @primary-color;
  91. }
  92. }
  93. }
  94. }
  95. @media (max-width: 768px) {
  96. body {
  97. padding-top: 50px;
  98. }
  99. .navbar-white {
  100. .navbar-nav .open .dropdown-menu {
  101. background: #eee;
  102. }
  103. .navbar-toggle {
  104. border-color: #ddd;
  105. .icon-bar {
  106. background-color: #888;
  107. }
  108. }
  109. .navbar-collapse.in {
  110. border-top-color: #f5f5f5;
  111. }
  112. }
  113. }
  114. .dropdown:hover .dropdown-menu {
  115. display: block;
  116. margin-top: 0;
  117. }
  118. .navbar {
  119. border: none;
  120. }
  121. .navbar-nav {
  122. > li > a {
  123. font-size: 14px;
  124. }
  125. }
  126. #header-navbar li.dropdown ul.dropdown-menu {
  127. min-width: 100px;
  128. }
  129. .dropdown-menu {
  130. > li > a {
  131. font-size: 14px;
  132. padding: 5px 20px;
  133. }
  134. }
  135. .dropdown-menu {
  136. border-radius: 2px;
  137. border: 0px;
  138. box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  139. padding: 5px 0px;
  140. li a {
  141. padding-top: 10px !important;
  142. padding-bottom: 10px;
  143. }
  144. }
  145. .dropdown-menu > li > a {
  146. font-weight: 400;
  147. color: #444;
  148. padding: 5px 15px;
  149. padding-bottom: 10px;
  150. &:hover, &:focus {
  151. text-decoration: none;
  152. color: #777;
  153. background: rgba(0, 0, 0, 0.05);
  154. }
  155. }
  156. .toast-top-center {
  157. top: 60px;
  158. }
  159. #toast-container > div {
  160. .box-shadow(none);
  161. }
  162. /*修复nice-validator和summernote的编辑框冲突*/
  163. .nice-validator .note-editor .note-editing-area .note-editable {
  164. display: inherit;
  165. }
  166. /*预览区域*/
  167. .plupload-preview, .faupload-preview {
  168. padding: 0 10px;
  169. margin-bottom: 0;
  170. li {
  171. margin-top: 10px;
  172. }
  173. .thumbnail {
  174. margin-bottom: 10px;
  175. }
  176. a {
  177. display: block;
  178. &:first-child {
  179. height: 90px;
  180. }
  181. img {
  182. height: 80px;
  183. object-fit: cover;
  184. }
  185. }
  186. }
  187. .layui-layer-content {
  188. clear: both;
  189. }
  190. .layui-layer-fast {
  191. .layui-layer-content {
  192. > table.table {
  193. margin-bottom: 0;
  194. }
  195. }
  196. .layui-layer-confirm {
  197. display: none;
  198. position: absolute;
  199. width: 100%;
  200. height: 100%;
  201. left: 0;
  202. bottom: 0;
  203. border: 1px solid transparent;
  204. background: transparent;
  205. color: transparent;
  206. &:focus {
  207. border: 1px solid #444c69;
  208. .border-radius(2px);
  209. }
  210. &:focus-visible {
  211. outline: 0;
  212. }
  213. }
  214. }
  215. .layui-layer-fast-msg {
  216. min-width: 100px;
  217. border-radius: 2px;
  218. }
  219. .input-group > .msg-box.n-right {
  220. position: absolute;
  221. }
  222. .bootstrap-select .status {
  223. background: #f0f0f0;
  224. clear: both;
  225. color: #999;
  226. font-size: 12px;
  227. font-weight: 500;
  228. line-height: 1;
  229. margin-bottom: -5px;
  230. padding: 10px 20px;
  231. }
  232. select.bs-select-hidden, select.selectpicker {
  233. display: inherit !important;
  234. max-height: 31px;
  235. overflow: hidden;
  236. &[multiple] {
  237. height: 31px;
  238. //visibility: hidden;
  239. padding: 0;
  240. background: #f4f4f4;
  241. option {
  242. color: #f4f4f4;
  243. .opacity(0);
  244. }
  245. @media not all and (min-resolution: .001dpcm) {
  246. @supports (-webkit-appearance:none) {
  247. visibility: hidden;
  248. }
  249. }
  250. }
  251. }
  252. input.selectpage {
  253. color: transparent;
  254. pointer-events: none;
  255. }
  256. .sp_container {
  257. input.selectpage {
  258. color: inherit;
  259. pointer-events: inherit;
  260. padding-left: 12px;
  261. padding-right: 12px;
  262. }
  263. .sp_element_box {
  264. input.selectpage {
  265. padding-left: 0;
  266. padding-right: 0;
  267. }
  268. li:first-child {
  269. input.selectpage {
  270. padding-left: 9px;
  271. padding-right: 9px;
  272. }
  273. }
  274. }
  275. }
  276. /*修复radio和checkbox样式对齐*/
  277. .radio, .checkbox {
  278. > label {
  279. margin-right: 10px;
  280. > input {
  281. margin: 5px 0 0;
  282. }
  283. }
  284. }
  285. form.form-horizontal .control-label {
  286. font-weight: normal;
  287. }
  288. .panel-default {
  289. padding: 0 15px;
  290. border: none;
  291. .box-shadow(none);
  292. > .panel-heading {
  293. position: relative;
  294. font-size: 16px;
  295. padding: 15px 0;
  296. background: #fff;
  297. border-bottom: 1px solid #f5f5f5;
  298. }
  299. h2.page-header {
  300. margin-top: 0;
  301. height: 50px;
  302. line-height: 31px;
  303. font-size: 18px;
  304. padding: 10px 0;
  305. border-bottom: 1px solid #f5f5f5;
  306. }
  307. > .panel-heading {
  308. .panel-title {
  309. color: #313131;
  310. > i {
  311. display: none;
  312. }
  313. }
  314. .more {
  315. position: absolute;
  316. top: 13px;
  317. right: 0;
  318. display: block;
  319. color: #919191;
  320. .transition(all 0.3s ease);
  321. }
  322. .more:hover {
  323. color: #616161;
  324. .transition(all 0.3s ease);
  325. }
  326. .panel-bar {
  327. position: absolute;
  328. top: 7px;
  329. right: 0;
  330. display: block;
  331. }
  332. }
  333. }
  334. @media (max-width: 767px) {
  335. .panel-default {
  336. padding: 0 10px;
  337. > .panel-heading {
  338. padding: 10px 0;
  339. .more {
  340. top: 8px;
  341. }
  342. }
  343. }
  344. > .panel-body {
  345. position: relative;
  346. padding: 15px 0;
  347. }
  348. > .panel-footer {
  349. padding: 15px 0;
  350. background: none;
  351. }
  352. }
  353. .panel-gray {
  354. .box-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
  355. > .panel-heading {
  356. background-color: #f5f5f5;
  357. color: #919191;
  358. }
  359. > .panel-body {
  360. color: #919191;
  361. background: #fff;
  362. border-bottom-left-radius: 4px;
  363. border-bottom-right-radius: 4px;
  364. }
  365. }
  366. .panel-page {
  367. padding: 45px 50px 50px;
  368. min-height: 500px;
  369. .panel-heading {
  370. background: transparent;
  371. border-bottom: none;
  372. margin: 0 0 30px 0;
  373. padding: 0;
  374. h2 {
  375. font-size: 25px;
  376. margin-top: 0;
  377. }
  378. }
  379. }
  380. @media (max-width: 767px) {
  381. .panel-page {
  382. padding: 15px;
  383. min-height: 300px;
  384. }
  385. }
  386. .nav-pills > li {
  387. margin-right: 5px;
  388. > a {
  389. padding: 10px 15px;
  390. color: #616161;
  391. .transition(all 0.3s ease);
  392. &:hover {
  393. .transition(all 0.3s ease);
  394. background-color: #f5f5f5;
  395. }
  396. }
  397. &.active > a {
  398. border: none;
  399. color: #fff;
  400. background: @primary-color;
  401. .transition(all 0.3s ease);
  402. border-radius: 3px;
  403. }
  404. }
  405. .nav-pills.nav-pills-sm > li > a {
  406. font-size: 12px;
  407. line-height: 1.5;
  408. padding: 4px 13px;
  409. }
  410. .fieldlist dd {
  411. display: block;
  412. margin: 5px 0;
  413. input {
  414. display: inline-block;
  415. width: 300px;
  416. }
  417. input:first-child {
  418. width: 110px;
  419. }
  420. ins {
  421. width: 110px;
  422. display: inline-block;
  423. text-decoration: none;
  424. }
  425. }
  426. /* 弹窗中的表单 */
  427. .form-layer {
  428. height: 100%;
  429. min-height: 150px;
  430. min-width: 300px;
  431. .form-body {
  432. width: 100%;
  433. overflow: auto;
  434. top: 0;
  435. position: absolute;
  436. z-index: 10;
  437. bottom: 50px;
  438. padding: 15px;
  439. }
  440. .form-footer {
  441. height: 50px;
  442. line-height: 50px;
  443. background-color: #ecf0f1;
  444. width: 100%;
  445. position: absolute;
  446. z-index: 200;
  447. bottom: 0;
  448. margin: 0;
  449. }
  450. .form-footer .form-group {
  451. margin-left: 0;
  452. margin-right: 0;
  453. }
  454. }
  455. footer.footer {
  456. width: 100%;
  457. color: #aaa;
  458. background: #555;
  459. margin-top: 25px;
  460. .copyright {
  461. line-height: 50px;
  462. text-align: center;
  463. background: #393939;
  464. margin: 0;
  465. a {
  466. color: #aaa;
  467. &:hover {
  468. color: #fff;
  469. }
  470. }
  471. }
  472. }
  473. .rotate {
  474. .transition-duration(0.8s);
  475. .transition-property(transform);
  476. overflow: hidden;
  477. &:hover {
  478. .transform(rotate(360deg));
  479. }
  480. }
  481. .user-section {
  482. background: #fff;
  483. padding: 15px;
  484. margin-bottom: 20px;
  485. .border-radius(4px);
  486. }
  487. .login-section {
  488. margin: 50px auto;
  489. width: 460px;
  490. .border-radius(0);
  491. &.login-section-weixin {
  492. min-height: 315px;
  493. }
  494. .logon-tab {
  495. margin: -15px -15px 0 -15px;
  496. > a {
  497. display: block;
  498. padding: 20px;
  499. float: left;
  500. width: 50%;
  501. font-size: 16px;
  502. text-align: center;
  503. color: #616161;
  504. background-color: #efefef;
  505. .transition(all 0.3s ease);
  506. &:hover {
  507. background-color: #fafafa;
  508. .transition(all 0.3s ease);
  509. }
  510. &.active {
  511. background-color: #fff;
  512. .transition(all 0.3s ease);
  513. }
  514. }
  515. }
  516. .login-main {
  517. padding: 40px 45px 20px 45px;
  518. }
  519. .n-bootstrap {
  520. .form-group {
  521. position: relative;
  522. }
  523. .input-group {
  524. position: inherit;
  525. }
  526. .n-right {
  527. margin-top: 0;
  528. top: 0;
  529. position: absolute;
  530. left: 0;
  531. text-align: right;
  532. width: 100%;
  533. .msg-wrap {
  534. position: relative;
  535. }
  536. }
  537. }
  538. }
  539. main.content {
  540. width: 100%;
  541. overflow: auto;
  542. padding: 15px;
  543. padding-top: 20px;
  544. min-height: calc(~ '100vh - 135px');
  545. }
  546. .sidenav {
  547. padding: 20px 0 10px 0;
  548. margin-bottom: 20px;
  549. background-color: #fff;
  550. .list-group {
  551. &:last-child {
  552. margin-bottom: 0;
  553. }
  554. .list-group-heading {
  555. list-style-type: none;
  556. color: #919191;
  557. margin-bottom: 10px;
  558. margin-left: 35px;
  559. font-size: 14px;
  560. }
  561. .list-group-item {
  562. .border-radius(0);
  563. border: none;
  564. padding: 0;
  565. border-left: 2px solid transparent;
  566. &:last-child, &:first-child {
  567. .border-radius(0);
  568. }
  569. &:hover {
  570. border-left: 2px solid rgba(245, 245, 245, 0.38);
  571. background-color: rgba(245, 245, 245, 0.38);
  572. }
  573. > a {
  574. display: block;
  575. color: #616161;
  576. padding: 10px 15px 10px 35px;
  577. }
  578. &.active {
  579. border-left: 2px solid @primary-color;
  580. background-color: rgba(245, 245, 245, 0.38);
  581. > a {
  582. color: @primary-color;
  583. }
  584. }
  585. }
  586. }
  587. }
  588. .nav li {
  589. .avatar-text, .avatar-img {
  590. height: 30px;
  591. width: 30px;
  592. line-height: 30px;
  593. font-size: 14px;
  594. }
  595. .avatar-img {
  596. font-size: 0;
  597. img {
  598. border-radius: 30px;
  599. width: 30px;
  600. height: 30px;
  601. }
  602. }
  603. }
  604. .avatar-text, .avatar-img {
  605. display: inline-block;
  606. box-sizing: content-box;
  607. color: #fff;
  608. text-align: center;
  609. vertical-align: top;
  610. background-color: #e8ecf3;
  611. font-weight: normal;
  612. width: 48px;
  613. height: 48px;
  614. border-radius: 48px;
  615. font-size: 24px;
  616. line-height: 48px;
  617. }
  618. .avatar-img {
  619. font-size: 0;
  620. img {
  621. border-radius: 48px;
  622. width: 48px;
  623. height: 48px;
  624. }
  625. }
  626. @media (max-width: 767px) {
  627. main.content {
  628. position: inherit;
  629. padding: 15px 0;
  630. }
  631. .login-section {
  632. width: 100%;
  633. margin: 20px auto;
  634. .login-main {
  635. padding: 20px 0 0 0;
  636. }
  637. }
  638. footer.footer {
  639. position: inherit;
  640. .copyright {
  641. padding: 10px;
  642. line-height: 30px;
  643. }
  644. }
  645. }
  646. .pager {
  647. .pagination {
  648. margin: 0;
  649. }
  650. li {
  651. margin: 0 .4em;
  652. display: inline-block;
  653. &:first-child, &:last-child {
  654. > a, > span {
  655. padding: .5em 1.2em;
  656. }
  657. }
  658. }
  659. }
  660. .pager li > a, .pager li > span {
  661. background: none;
  662. border: 1px solid #e6e6e6;
  663. border-radius: 0.25em;
  664. padding: .5em .93em;
  665. font-size: 14px;
  666. }
  667. .jumpto input {
  668. width: 50px;
  669. margin-left: 5px;
  670. margin-right: 5px;
  671. text-align: center;
  672. display: inline-block;
  673. }
  674. .fixed-columns, .fixed-columns-right {
  675. position: absolute;
  676. top: 0;
  677. height: 100%;
  678. min-height: 41px;
  679. background-color: #fff;
  680. box-sizing: border-box;
  681. z-index: 2;
  682. box-shadow: 0 -1px 8px rgba(0, 0, 0, .08);
  683. .fixed-table-body {
  684. min-height: 41px;
  685. overflow-x: hidden !important
  686. }
  687. }
  688. .fixed-columns {
  689. left: 0;
  690. }
  691. .fixed-columns-right {
  692. right: 0;
  693. box-shadow: -1px 0 8px rgba(0, 0, 0, .08);
  694. }
  695. .bootstrap-tagsinput {
  696. background-color: #fff;
  697. border: 1px solid #ccc;
  698. box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  699. display: inline-block;
  700. padding: 4px 6px;
  701. margin-bottom: 10px;
  702. color: #555;
  703. vertical-align: middle;
  704. //border-radius: 4px;
  705. //max-width: 100%;
  706. width: 100%;
  707. line-height: 22px;
  708. cursor: text;
  709. input {
  710. border: none;
  711. box-shadow: none;
  712. outline: none;
  713. background-color: transparent;
  714. padding: 0;
  715. margin: 0;
  716. font-size: 13px;
  717. //width: auto !important;
  718. width: 80px;
  719. max-width: inherit;
  720. &:focus {
  721. border: none;
  722. box-shadow: none;
  723. }
  724. }
  725. .tagsinput-text {
  726. display: inline-block;
  727. overflow: auto;
  728. visibility: hidden;
  729. height: 1px;
  730. position: absolute;
  731. bottom: -1px;
  732. left: 0;
  733. }
  734. .tag {
  735. margin-right: 2px;
  736. color: white;
  737. [data-role="remove"] {
  738. margin-left: 5px;
  739. cursor: pointer;
  740. &:after {
  741. content: "x";
  742. padding: 0px 2px;
  743. }
  744. &:hover {
  745. background-color: rgba(255, 255, 255, .16);
  746. }
  747. }
  748. }
  749. }
  750. .autocomplete-suggestions {
  751. border-radius: 2px;
  752. background: #FFF;
  753. overflow: auto;
  754. min-width: 200px;
  755. .box-shadow(0px 20px 30px rgba(83, 88, 93, 0.05), 0px 0px 30px rgba(83, 88, 93, 0.1));
  756. strong {
  757. font-weight: normal;
  758. color: red;
  759. }
  760. .autocomplete-suggestion {
  761. padding: 5px 10px;
  762. white-space: nowrap;
  763. overflow: hidden;
  764. }
  765. .autocomplete-selected {
  766. background: #F0F0F0;
  767. }
  768. .autocomplete-group {
  769. padding: 5px 10px;
  770. strong {
  771. display: block;
  772. border-bottom: 1px solid #ddd;
  773. }
  774. }
  775. }