ry-ui.css 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567
  1. /**
  2. * 通用css样式布局处理
  3. * Copyright (c) 2019 ruoyi
  4. */
  5. /** 基础通用 **/
  6. .pt5 {
  7. padding-top: 5px;
  8. }
  9. .pr5 {
  10. padding-right: 5px;
  11. }
  12. .pb5 {
  13. padding-bottom: 5px;
  14. }
  15. .mt5 {
  16. margin-top: 5px;
  17. }
  18. .mr5 {
  19. margin-right: 5px;
  20. }
  21. .mb5 {
  22. margin-bottom: 5px;
  23. }
  24. .ml5 {
  25. margin-left: 5px;
  26. }
  27. .mt10 {
  28. margin-top: 10px;
  29. }
  30. .mr10 {
  31. margin-right: 10px;
  32. }
  33. .mb10 {
  34. margin-bottom: 10px;
  35. }
  36. .ml0 {
  37. margin-left: 10px;
  38. }
  39. .mt20 {
  40. margin-top: 20px;
  41. }
  42. .mr20 {
  43. margin-right: 20px;
  44. }
  45. .mb20 {
  46. margin-bottom: 20px;
  47. }
  48. .ml20 {
  49. margin-left: 20px;
  50. }
  51. /** 弹层组件 禁用样式 **/
  52. .layer-disabled {
  53. border: 1px #dedede solid !important;
  54. background-color: #f1f1f1 !important;
  55. color: #333 !important;
  56. pointer-events: none;
  57. }
  58. /** 用户管理 样式布局 **/
  59. .box {
  60. position: relative;
  61. border-radius: 3px;
  62. background: #ffffff;
  63. border-top: 3px solid #d2d6de;
  64. margin-bottom: 20px;
  65. width: 100%;
  66. box-shadow: 0 1px 1px rgba(0,0,0,0.1)
  67. }
  68. .box-header:before,.box-body:before,.box-footer:before,.box-header:after,.box-body:after,.box-footer:after {
  69. content: " ";
  70. display: table
  71. }
  72. .box-header:after,.box-body:after,.box-footer:after {
  73. clear: both
  74. }
  75. .btn-box-tool {
  76. padding: 5px;
  77. font-size: 12px;
  78. background: transparent;
  79. color: #97a0b3;
  80. }
  81. .open .btn-box-tool,
  82. .btn-box-tool:hover {
  83. color: #606c84;
  84. }
  85. .box-main {
  86. margin: 0;
  87. border: 0;
  88. padding-top: 2px;
  89. border-radius: 0;
  90. box-shadow: none
  91. }
  92. .box-main>.box-header {
  93. border-bottom: 1px solid #eee;
  94. padding: 12px 10px 2px 15px
  95. }
  96. .box-header .box-title {
  97. display: inline-block;
  98. font-size: 18px;
  99. margin: 0;
  100. line-height: 1;
  101. }
  102. .box-main>.box-header .box-title {
  103. font-size: 16px;
  104. margin-bottom: 13px;
  105. float: left
  106. }
  107. .box-main>.box-header .box-title .fa {
  108. font-size: 14px;
  109. padding-right: 3px;
  110. margin-top: -2px
  111. }
  112. .box-main>.box-header .box-tools {
  113. position: relative;
  114. top: -5px;
  115. right: 0
  116. }
  117. .box-main>.box-header .box-tools .btn {
  118. padding: 3px 10px 5px 10px;
  119. font-size: 14px;
  120. margin-bottom: 2px
  121. }
  122. .box-main>.box-header .box-tools .btn-box-tool {
  123. padding: 4px 2px
  124. }
  125. .box-main form>.box-footer,.nav-main form>.box-footer {
  126. background: #fafafa
  127. }
  128. .box-main form>.box-footer .row,.nav-main form>.box-footer .row {
  129. margin: 5px 0 5px -25px
  130. }
  131. /** select2 样式修改 **/
  132. .select2-container--default .select2-selection--multiple .select2-selection__choice {
  133. background-color: #1AB394;
  134. border-color: #1AB394;
  135. padding: 1px 10px;
  136. color: #fff
  137. }
  138. .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  139. margin-right: 5px;
  140. color: rgba(255,255,255,0.7)
  141. }
  142. .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  143. color: #fff
  144. }
  145. .select2-container .select2-selection--single .select2-selection__rendered {
  146. padding-right: 10px
  147. }
  148. /** 表单验证 样式布局 **/
  149. label.error {
  150. position: absolute;
  151. right: 18px;
  152. top: 10px;
  153. color: #ef392b;
  154. font-size: 12px
  155. }
  156. .input-group label.error {
  157. z-index:99;
  158. right: 42px
  159. }
  160. .Validform_error,input.error,select.error {
  161. background-color: #fbe2e2;
  162. border-color: #c66161;
  163. color: #c00
  164. }
  165. .Validform_wrong,.Validform_right,.Validform_warning {
  166. display: inline-block;
  167. height: 20px;
  168. font-size: 12px;
  169. vertical-align: middle;
  170. padding-left: 25px
  171. }
  172. .i-checks label.error, .check-box label.error, .radio-box label.error {
  173. right: auto;
  174. width: 150px;
  175. left: 210px;
  176. top: 1px;
  177. max-width: none;
  178. }
  179. /** 复选框&单选框 **/
  180. .check-box,.radio-box {
  181. display: inline-block;
  182. box-sizing: border-box;
  183. cursor: pointer;
  184. position: relative;
  185. padding-left: 25px;
  186. padding-right: 15px;
  187. padding-top: 8px;
  188. }
  189. .icheckbox, .icheckbox-blue, .iradio, .iradio-blue, .iradio-purple {
  190. position: absolute;
  191. top: 8px;
  192. left: 0
  193. }
  194. /** iCheck **/
  195. .icheckbox-blue,.iradio-blue {
  196. display: block;
  197. margin: 0;
  198. padding: 0;
  199. width: 18px;
  200. height: 18px;
  201. background: url(../../img/blue.png) no-repeat;
  202. border: none;
  203. cursor: pointer
  204. }
  205. .icheckbox-blue,.icheckbox-blue.static:hover {
  206. background-position: 0 0
  207. }
  208. .icheckbox-blue.hover,.icheckbox-blue:hover {
  209. background-position: -20px 0
  210. }
  211. .icheckbox-blue.checked {
  212. background-position: -40px 0
  213. }
  214. .icheckbox-blue.disabled {
  215. background-position: -60px 0;
  216. cursor: default
  217. }
  218. .icheckbox-blue.checked.disabled {
  219. background-position: -80px 0
  220. }
  221. .iradio-blue,.iradio-blue.static:hover {
  222. background-position: -100px 0
  223. }
  224. .iradio-blue.hover,.iradio-blue:hover {
  225. background-position: -120px 0
  226. }
  227. .iradio-blue.checked {
  228. background-position: -140px 0
  229. }
  230. .iradio-blue.disabled {
  231. background-position: -160px 0;
  232. cursor: default
  233. }
  234. .iradio-blue.checked.disabled {
  235. background-position: -180px 0
  236. }
  237. /** 遮罩层 **/
  238. .loaderbox {
  239. display: inline-block;
  240. min-width: 125px;
  241. padding: 10px;
  242. margin: 0 auto;
  243. color: #000 !important;
  244. font-size: 13px;
  245. font-weight: 400;
  246. text-align: center;
  247. vertical-align: middle;
  248. border: 1px solid #ddd;
  249. background-color: #eee;
  250. -webkit-border-radius: 2px;
  251. -moz-border-radius: 2px;
  252. -ms-border-radius: 2px;
  253. -o-border-radius: 2px;
  254. border-radius: 2px;
  255. -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
  256. -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
  257. box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
  258. }
  259. .loaderbox .loading-activity {
  260. float: left;
  261. width: 18px;
  262. height: 18px;
  263. border: solid 2px transparent;
  264. border-top-color: #000;
  265. border-left-color: #000;
  266. border-radius: 10px;
  267. -webkit-animation: pace-spinner 400ms linear infinite;
  268. -moz-animation: pace-spinner 400ms linear infinite;
  269. -ms-animation: pace-spinner 400ms linear infinite;
  270. -o-animation: pace-spinner 400ms linear infinite;
  271. animation: pace-spinner 400ms linear infinite;
  272. }
  273. @media (max-width: 767px) {
  274. .loading-activity {
  275. width: 18px;
  276. height: 18px;
  277. }
  278. }
  279. @-ms-keyframes pace-spinner {
  280. 0% {
  281. -ms-transform: rotate(0deg);
  282. transform: rotate(0deg);
  283. }
  284. 100% {
  285. -ms-transform: rotate(360deg);
  286. transform: rotate(360deg);
  287. }
  288. }
  289. @keyframes pace-spinner {
  290. 0% {
  291. transform: rotate(0deg);
  292. }
  293. 100% {
  294. transform: rotate(360deg);
  295. }
  296. }
  297. /** 表单查询条件 **/
  298. ul {
  299. margin: 0;
  300. padding: 0;
  301. -webkit-tap-highlight-color: rgba(0,0,0,0);
  302. }
  303. li {
  304. list-style: none;
  305. }
  306. .time-input {
  307. display: block;
  308. width: 100%;
  309. padding-left: 10px;
  310. }
  311. label {
  312. font-weight: normal;
  313. }
  314. .container-div {
  315. padding: 10px 35px;
  316. height: 100%;
  317. }
  318. .container-div .row {
  319. height: 100%;
  320. }
  321. .search-collapse,.select-table {
  322. width: 100%;
  323. background: #fff;
  324. border-radius: 6px;
  325. margin-top: 10px;
  326. padding-top: 5px;
  327. padding-bottom: 13px;
  328. box-shadow: 1px 1px 3px rgba(0,0,0,.2);
  329. }
  330. .search-collapse {
  331. position: relative;
  332. }
  333. .search-collapse .col-sm-6 .control-label {
  334. color: #333;
  335. }
  336. @media ( max-width : 768px) {
  337. .search-collapse {
  338. display: none;
  339. }
  340. }
  341. @media ( min-width : 768px) {
  342. .select-list li {
  343. float: left;
  344. }
  345. }
  346. .select-list li {
  347. color: #333;
  348. margin: 5px 15px 5px 0px;
  349. }
  350. .select-list li input {
  351. border: 1px solid #ddd;
  352. border-radius: 4px;
  353. background: transparent;
  354. outline: none;
  355. height: 30px;
  356. width: 200px;
  357. padding-left: 5px;
  358. }
  359. .select-list li .submit-btn {
  360. border: 0px;
  361. border-radius: 4px;
  362. background: transparent;
  363. outline: none;
  364. width: 40px;
  365. height: 23px;
  366. }
  367. .select-list li select {
  368. border: 1px solid #ddd;
  369. border-radius: 4px;
  370. background: transparent;
  371. outline: none;
  372. height: 30px;
  373. width: 200px;
  374. }
  375. .select-list .select-time input {
  376. width: 93px;
  377. }
  378. .select-time label,.select-time span,.select-time input {
  379. float: left;
  380. }
  381. .select-time label {
  382. margin-top: 5px;
  383. }
  384. .select-time span {
  385. display: block;
  386. margin: 5px 5px;
  387. }
  388. .search-btn {
  389. background-color: #1ab394;
  390. border-color: #1ab394;
  391. color: #FFF;
  392. margin-bottom: 5px;
  393. display: inline-block;
  394. padding: 6px 12px;
  395. margin-bottom: 0;
  396. font-size: 14px;
  397. font-weight: 400;
  398. line-height: 1.42857143;
  399. text-align: center;
  400. white-space: nowrap;
  401. border-radius: 3px;
  402. vertical-align: middle;
  403. cursor: pointer;
  404. }
  405. /** 表格查询数据 **/
  406. .table-striped {
  407. min-height: 75%;
  408. }
  409. .table-striped .bootstrap-table {
  410. border: 0px!important;
  411. }
  412. .table-striped .table, .fixed-table-container, table, .table-striped .table, .table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
  413. border-bottom: 1px solid #e7eaec!important;
  414. background-color: transparent!important;
  415. border: 0px;
  416. }
  417. .table-striped .table>thead>tr>th, .table-striped .table>tbody>tr>th {
  418. border-bottom: 1px solid #ccc!important;
  419. border-top: 0px!important;
  420. }
  421. .table-striped .table>thead:first-child>tr:first-child>th {
  422. font-weight: normal;
  423. font-size: 13px
  424. }
  425. .table-striped table thead {
  426. background-color: #eff3f8;
  427. }
  428. .table-bordered td,.table-bordered th {
  429. border: 1px solid #ddd!important
  430. }
  431. .fixed-table-container thead th >.both{
  432. display: inline-block
  433. }
  434. /** 首页样式 **/
  435. .ax_close_max {
  436. position: fixed;
  437. top: 5px;
  438. left: 5px;
  439. z-index: 9999;
  440. display: none;
  441. color: #ccc;
  442. }
  443. .navbar-right > .user-menu > .dropdown-menu {
  444. border-top-right-radius:0;
  445. border-top-left-radius:0;
  446. padding:1px 0 0 0;
  447. border-top-width:0;
  448. width:138px;
  449. }
  450. .navbar-right > .user-menu .user-image {
  451. float:left;
  452. width:27px;
  453. height:27px;
  454. border-radius:50%;
  455. margin-right:8px;
  456. margin-top:-3px;
  457. }
  458. @media (max-width:767px) {
  459. .navbar-right > .user-menu .user-image {
  460. float:none;
  461. margin-right:0;
  462. margin-top:-8px;
  463. line-height:10px;
  464. }
  465. }.dropdown-menu > li > a > .glyphicon,.dropdown-menu > li > a > .fa,.dropdown-menu > li > a > .ion {
  466. margin-right:10px;
  467. }
  468. .dropdown-menu > li > a:hover {
  469. background-color:#e1e3e9;
  470. color:#333;
  471. }
  472. .dropdown-menu > .divider {
  473. background-color:#eee;
  474. }
  475. .form-header {
  476. font-size:15px;
  477. color:#6379bb;
  478. border-bottom:1px solid #ddd;
  479. margin:8px 10px 25px 10px;
  480. padding-bottom:5px
  481. }
  482. .form-content {
  483. background-color: #ffffff;
  484. color: inherit;
  485. padding: 10px 15px 15px 15px;
  486. border-color: #e7eaec;
  487. -webkit-border-image: none;
  488. -o-border-image: none;
  489. border-image: none;
  490. border-width: 1px 0px;
  491. }