backend.less 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600
  1. @import (reference) "bootstrap-less/mixins.less";
  2. @import (reference) "bootstrap-less/variables.less";
  3. @import (reference) "fastadmin/mixins.less";
  4. @import (reference) "fastadmin/variables.less";
  5. @import "lesshat.less";
  6. @import url("../css/bootstrap.min.css");
  7. @import url("../css/fastadmin.min.css");
  8. @import url("../css/skins/skin-green.css");
  9. @import url("../css/iconfont.css");
  10. @import url("../libs/font-awesome/css/font-awesome.min.css");
  11. @import url("../libs/toastr/toastr.min.css");
  12. @import url("../libs/layer/build/skin/default/layer.css");
  13. @import url("../libs/bootstrap-table/dist/bootstrap-table.min.css");
  14. @import url("../libs/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css");
  15. @import url("../libs/nice-validator/dist/jquery.validator.css");
  16. .clearfix() {
  17. &:before,
  18. &:after {
  19. content: " "; // 1
  20. display: table; // 2
  21. }
  22. &:after {
  23. clear: both;
  24. }
  25. }
  26. @main-bg: #f1f4f6;
  27. @panel-intro-bg: darken(@main-bg,3%);
  28. @panel-nav-bg: #fff;
  29. body {
  30. background:#f1f4f6;
  31. }
  32. .selection {
  33. position: absolute;
  34. border: 1px solid #8B9;
  35. background-color: #BEC;
  36. }
  37. .main-header {
  38. .logo,.navbar {
  39. .transition(none);
  40. }
  41. .navbar{
  42. position:relative;
  43. .sidebar-toggle{
  44. position:absolute;
  45. width:45px;
  46. text-align: center;
  47. }
  48. #nav{
  49. position:absolute;
  50. left:45px;
  51. }
  52. .navbar-custom-menu {
  53. position:absolute;
  54. right:0;
  55. }
  56. }
  57. }
  58. .note-dialog .modal {z-index:1060;}
  59. .bootstrap-dialog .modal-dialog {
  60. /*width: 70%;*/
  61. max-width:885px;
  62. }
  63. #header {
  64. background: #fff;
  65. box-shadow: 0 2px 2px rgba(0,0,0,.05),0 1px 0 rgba(0,0,0,.05);
  66. }
  67. .content-wrapper {
  68. position:relative;
  69. }
  70. .tab-addtabs {
  71. overflow: hidden;
  72. .tab-pane {
  73. height: 100%;
  74. width: 100%;
  75. }
  76. &.ios-iframe-fix{
  77. .tab-pane {
  78. -webkit-overflow-scrolling:touch;
  79. overflow: auto;
  80. }
  81. }
  82. }
  83. .common-search-table {
  84. min-height: 20px;
  85. padding: 15px;
  86. margin-bottom: 15px;
  87. background-color: #f5f5f5;
  88. }
  89. .searchit{
  90. border-bottom:1px dashed @link-color;
  91. }
  92. /*
  93. * RIBBON
  94. */
  95. #ribbon {
  96. overflow:hidden;
  97. padding: 15px 15px 0 15px;
  98. position: relative;
  99. a {
  100. color: #777 !important;
  101. text-decoration: none !important;
  102. }
  103. .breadcrumb {
  104. display: inline-block;
  105. margin: 0;
  106. padding: 0;
  107. background: none;
  108. vertical-align: top;
  109. }
  110. .breadcrumb > .active,
  111. .breadcrumb li {
  112. color: #aaa;
  113. }
  114. .shortcut {
  115. a{
  116. margin-left:10px;
  117. }
  118. }
  119. }
  120. .is-dialog {
  121. #main {
  122. background:#fff;
  123. }
  124. form label {
  125. font-weight: normal;
  126. }
  127. }
  128. .user-panel > .image img{
  129. width:45px;
  130. height:45px;
  131. }
  132. /*panel扩展描述样式*/
  133. .panel-intro {
  134. margin-bottom:0;
  135. border:none;
  136. > .panel-heading {
  137. padding:15px;
  138. padding-bottom:0;
  139. background:@panel-intro-bg;
  140. border-color:@panel-intro-bg;
  141. position:relative;
  142. .panel-lead {
  143. margin-bottom:15px;
  144. em {
  145. display: block;
  146. font-weight: bold;
  147. font-style:normal;
  148. }
  149. }
  150. .panel-title {
  151. height:25px;
  152. font-weight: normal;
  153. white-space: nowrap;
  154. overflow: hidden;
  155. text-overflow: ellipsis;
  156. }
  157. .panel-control {
  158. height: 42px;
  159. position:absolute;
  160. top:8px;
  161. right:8px;
  162. .fa {
  163. font-size:14px;
  164. }
  165. }
  166. .nav-tabs {
  167. border-bottom:0;
  168. margin-bottom:0;
  169. }
  170. .nav-tabs > li > a{
  171. margin-right:4px;
  172. color: #95a5a6;
  173. background-color: darken(@panel-intro-bg, 5%);
  174. border: 1px solid @panel-intro-bg;
  175. border-bottom-color: transparent;
  176. }
  177. .nav-tabs > li > a:hover, .nav-tabs > li > a:focus{
  178. border: 1px solid @panel-intro-bg;
  179. color: #7b8a8b;
  180. background-color: darken(@panel-intro-bg, 10%);
  181. }
  182. .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
  183. color: #7b8a8b;
  184. background-color: #ffffff;
  185. border-bottom-color: transparent;
  186. cursor: default;
  187. }
  188. }
  189. }
  190. /*单表格*/
  191. .panel-tabs {
  192. .panel-heading {
  193. padding:12px 15px 12px 15px;
  194. .panel-lead {
  195. margin-bottom:0px;
  196. }
  197. .panel-title {
  198. }
  199. }
  200. }
  201. /*选项卡*/
  202. .panel-nav {
  203. .panel-heading {
  204. padding:0px;
  205. padding-bottom:0;
  206. background:@main-bg;
  207. border-color:@main-bg;
  208. }
  209. .nav-tabs > li > a{
  210. padding: 12px 15px;
  211. background-color: @panel-intro-bg;
  212. border: 1px solid @main-bg;
  213. }
  214. .nav-tabs > li > a:hover, .nav-tabs > li > a:focus{
  215. border: 1px solid @panel-intro-bg;
  216. background-color: @panel-intro-bg;
  217. }
  218. .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
  219. border-color: @main-bg;
  220. border-bottom-color: transparent;
  221. }
  222. }
  223. /*顶栏addtabs*/
  224. .nav-addtabs{
  225. &.disable-top-badge {
  226. > li > a > .pull-right-container{
  227. display:none;
  228. }
  229. }
  230. border:none;
  231. > li{
  232. margin:0;
  233. > a{
  234. height:49px;
  235. line-height:49px;
  236. padding:0 15px;
  237. border-radius:0;
  238. border:none;
  239. border-right:1px solid rgba(0, 0, 0, 0.05);
  240. margin:0;
  241. color:#95a5a6;
  242. &:hover, &:focus{
  243. border:none;
  244. color:#2c3e50;
  245. border-right:1px solid rgba(0, 0, 0, 0.05);
  246. }
  247. i{
  248. margin-right:3px;
  249. }
  250. }
  251. &.active > a{
  252. height:49px;line-height:49px;
  253. padding:0 15px;
  254. border-radius:0;
  255. border:none;
  256. border-right:1px solid rgba(0, 0, 0, 0.05);
  257. background:#f1f4f6;
  258. color:#2c3e50;
  259. overflow:hidden;
  260. &:hover, &:focus{
  261. border:none;
  262. color:#2c3e50;
  263. border-right:1px solid rgba(0, 0, 0, 0.05);
  264. background:#f1f4f6;
  265. }
  266. }
  267. .close-tab {
  268. font-size: 10px;
  269. position:absolute;
  270. right: 5px;
  271. top: 50%;
  272. margin-top:-7px;
  273. z-index: 100;
  274. cursor: hand;
  275. cursor: pointer;
  276. color: #fff;
  277. display:none;
  278. }
  279. }
  280. .open > a{
  281. &:hover,&:focus{
  282. border-right:1px solid rgba(0, 0, 0, 0.05);
  283. }
  284. }
  285. ul li {
  286. position:relative;
  287. }
  288. li:hover > .close-tab {
  289. display:block;
  290. }
  291. }
  292. .sidebar-menu{
  293. &.show-submenu {
  294. .treeview-menu {
  295. display: block;
  296. }
  297. }
  298. > li .badge {
  299. margin-top:0;
  300. }
  301. }
  302. #treeview {
  303. .jstree-container-ul .jstree-node{
  304. display:block;clear:both;
  305. }
  306. .jstree-leaf:not(:first-child) {
  307. float:left;
  308. background:none;
  309. margin-left:0;
  310. width:80px;
  311. clear:none;
  312. }
  313. .jstree-leaf {
  314. float:left;
  315. margin-left:0;padding-left:24px;
  316. width:80px;
  317. clear:none;
  318. color:#777;
  319. }
  320. .jstree-leaf > .jstree-icon,.jstree-leaf .jstree-themeicon{
  321. display:none;
  322. }
  323. .jstree-last{
  324. background-image: url("../img/32px.png");
  325. background-position: -292px -4px;
  326. background-repeat: repeat-y;
  327. }
  328. .jstree-children {
  329. .clearfix();
  330. }
  331. .jstree-themeicon {
  332. display: none;
  333. }
  334. }
  335. /*去除bootstrap-table的边框*/
  336. .fixed-table-container {
  337. border:none!important;
  338. }
  339. .note-editor .note-editing-area .note-editable{
  340. display: block !important;
  341. }
  342. .plupload-preview {
  343. padding:10px;
  344. margin-bottom:0;
  345. li {
  346. margin-bottom:10px;
  347. }
  348. .thumbnail {
  349. margin-bottom:10px;
  350. }
  351. a{
  352. display:block;
  353. &:first-child{
  354. height:90px;
  355. }
  356. img{
  357. height:80px;
  358. object-fit: cover;
  359. }
  360. }
  361. }
  362. .pjax-loader-bar .progress {
  363. position: fixed;
  364. top: 0;
  365. left: 0;
  366. height: 2px;
  367. background: #77b6ff;
  368. box-shadow: 0 0 10px rgba(119,182,255,0.7);
  369. -webkit-transition: width 0.4s ease;
  370. transition: width 0.4s ease;
  371. }
  372. .dropdown-menu.text-left {
  373. a,li{
  374. text-align: left!important;
  375. }
  376. }
  377. .bootstrap-table .fixed-table-toolbar .dropdown-menu{
  378. overflow:visible;
  379. }
  380. .bootstrap-table table tbody tr:first-child td .bs-checkbox {
  381. vertical-align: middle;
  382. }
  383. .dropdown-submenu {
  384. position: relative;
  385. >.dropdown-menu {
  386. overflow:auto;
  387. top: 0;
  388. left: 100%;
  389. margin-top: -6px;
  390. margin-left: -1px;
  391. .border-radius(0 6px 6px 6px);
  392. }
  393. &:hover {
  394. >.dropdown-menu {
  395. display: block;
  396. }
  397. >a:after {
  398. border-left-color: #fff;
  399. }
  400. }
  401. >a:after {
  402. display: block;
  403. content: " ";
  404. float: right;
  405. width: 0;
  406. height: 0;
  407. border-color: transparent;
  408. border-style: solid;
  409. border-width: 5px 0 5px 5px;
  410. border-left-color: #ccc;
  411. margin-top: 5px;
  412. margin-right: -10px;
  413. }
  414. &.pull-left {
  415. float: none;
  416. >.dropdown-menu {
  417. left: -100%;
  418. margin-left: 10px;
  419. .border-radius(6px 0 6px 6px);
  420. }
  421. }
  422. }
  423. /*重写toast的几个背景色*/
  424. .toast-primary {
  425. background-color: #48c9b0!important;
  426. }
  427. .toast-success {
  428. background-color: #18bc9c!important;
  429. }
  430. .toast-error {
  431. background-color: #e74c3c!important;
  432. }
  433. .toast-info {
  434. background-color: #5dade2!important;
  435. }
  436. .toast-warning {
  437. background-color: #f1c40f!important;
  438. }
  439. .toast-inverse {
  440. background-color: #34495e!important;
  441. }
  442. .toast-default {
  443. background-color: #bdc3c7!important;
  444. }
  445. #toast-container{
  446. >div, >div:hover{
  447. .box-shadow(0 0 3px #eee);
  448. }
  449. }
  450. .layui-layer-title {
  451. background:#2c3e50!important;
  452. color:#fff!important;
  453. }
  454. /*避免出现多滚动条*/
  455. .layui-layer-noborder {
  456. border:none!important;
  457. box-shadow: 1px 1px 50px rgba(0,0,0,.3)!important;
  458. }
  459. .layui-layer-moves{
  460. .box-sizing(content-box);
  461. }
  462. .layui-layer-iframe {
  463. overflow:hidden!important;
  464. }
  465. .layui-layer-iframe .layui-layer-content {
  466. -webkit-overflow-scrolling: touch;
  467. overflow-y: hidden!important;
  468. overflow:hidden;
  469. }
  470. /*自定义底部灰色操作区*/
  471. .layui-layer-btn {
  472. text-align: center!important;
  473. padding: 10px!important;
  474. background: #ecf0f1;
  475. }
  476. .layui-layer-footer {
  477. padding:8px 20px;
  478. background-color:#ecf0f1;
  479. height:auto;
  480. text-align:inherit!important;
  481. }
  482. .layui-layer-btn a {
  483. background-color: #95a5a6!important;
  484. border-color: #95a5a6!important;
  485. color:#fff!important;
  486. }
  487. .layui-layer-btn .layui-layer-btn0{
  488. background-color: #18bc9c!important;
  489. border-color: #18bc9c!important;
  490. }
  491. .layui-layer-setwin {
  492. top:10px!important;
  493. > a {
  494. background:none!important;
  495. cite {
  496. display:none;
  497. }
  498. &:after {
  499. content: "\e625";
  500. font-family: iconfont;
  501. font-style: normal;
  502. font-weight: normal;
  503. text-decoration: inherit;
  504. position: absolute;
  505. font-size: 18px;
  506. color: #fff;
  507. margin: 0;
  508. z-index: 1;
  509. }
  510. &:hover {
  511. text-decoration: none!important;
  512. background:none!important;
  513. }
  514. &:focus {
  515. text-decoration: none!important;
  516. }
  517. }
  518. .layui-layer-min{
  519. &:after {
  520. content: "\e625";
  521. }
  522. }
  523. .layui-layer-max{
  524. &:after {
  525. content: "\e623";
  526. }
  527. }
  528. .layui-layer-maxmin{
  529. &:after {
  530. content: "\e624";
  531. }
  532. }
  533. .layui-layer-close1{
  534. &:after {
  535. content: "\e626";
  536. }
  537. }
  538. .layui-layer-close2,.layui-layer-close2:hover{
  539. background:url('../libs/layer/build/skin/default/icon.png') no-repeat -149px -31px !important;
  540. &:after {
  541. display:none;
  542. }
  543. }
  544. }
  545. @media (min-width: 768px){
  546. .form-inline .form-control {
  547. padding-right:20px;
  548. }
  549. }
  550. /*手机版样式*/
  551. @media (max-width: @screen-phone) {
  552. .nav-addtabs {
  553. display:none;
  554. }
  555. .fixed-table-toolbar {
  556. .columns-right.btn-group{
  557. display:none;
  558. }
  559. }
  560. }
  561. /*平板样式*/
  562. @media (max-width: @screen-tablet) {
  563. }