ry-ui.css 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448
  1. /**
  2. * 通用css样式布局处理
  3. * Copyright (c) 2018 ruoyi
  4. */
  5. /** 用户管理 样式布局 */
  6. .box {
  7. position: relative;
  8. border-radius: 3px;
  9. background: #ffffff;
  10. border-top: 3px solid #d2d6de;
  11. margin-bottom: 20px;
  12. width: 100%;
  13. box-shadow: 0 1px 1px rgba(0,0,0,0.1)
  14. }
  15. .box-header:before,.box-body:before,.box-footer:before,.box-header:after,.box-body:after,.box-footer:after {
  16. content: " ";
  17. display: table
  18. }
  19. .box-header:after,.box-body:after,.box-footer:after {
  20. clear: both
  21. }
  22. .btn-box-tool {
  23. padding: 5px;
  24. font-size: 12px;
  25. background: transparent;
  26. color: #97a0b3;
  27. }
  28. .open .btn-box-tool,
  29. .btn-box-tool:hover {
  30. color: #606c84;
  31. }
  32. .box-main {
  33. margin: 0;
  34. border: 0;
  35. padding-top: 2px;
  36. border-radius: 0;
  37. box-shadow: none
  38. }
  39. .box-main>.box-header {
  40. border-bottom: 1px solid #eee;
  41. padding: 12px 10px 2px 15px
  42. }
  43. .box-header .box-title {
  44. display: inline-block;
  45. font-size: 18px;
  46. margin: 0;
  47. line-height: 1;
  48. }
  49. .box-main>.box-header .box-title {
  50. font-size: 16px;
  51. margin-bottom: 13px;
  52. float: left
  53. }
  54. .box-main>.box-header .box-title .fa {
  55. font-size: 14px;
  56. padding-right: 3px;
  57. margin-top: -2px
  58. }
  59. .box-main>.box-header .box-tools {
  60. position: relative;
  61. top: -5px;
  62. right: 0
  63. }
  64. .box-main>.box-header .box-tools .btn {
  65. padding: 3px 10px 5px 10px;
  66. font-size: 14px;
  67. margin-bottom: 2px
  68. }
  69. .box-main>.box-header .box-tools .btn-box-tool {
  70. padding: 4px 2px
  71. }
  72. .box-main form>.box-footer,.nav-main form>.box-footer {
  73. background: #fafafa
  74. }
  75. .box-main form>.box-footer .row,.nav-main form>.box-footer .row {
  76. margin: 5px 0 5px -25px
  77. }
  78. /** select2 样式修改 */
  79. .select2-container--default .select2-selection--multiple .select2-selection__choice {
  80. background-color: #1AB394;
  81. border-color: #1AB394;
  82. padding: 1px 10px;
  83. color: #fff
  84. }
  85. .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  86. margin-right: 5px;
  87. color: rgba(255,255,255,0.7)
  88. }
  89. .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  90. color: #fff
  91. }
  92. .select2-container .select2-selection--single .select2-selection__rendered {
  93. padding-right: 10px
  94. }
  95. /** 表单验证 样式布局 */
  96. label.error {
  97. position: absolute;
  98. right: 18px;
  99. top: 7px;
  100. color: #ef392b;
  101. font-size: 12px
  102. }
  103. .Validform_error,input.error,select.error {
  104. background-color: #fbe2e2;
  105. border-color: #c66161;
  106. color: #c00
  107. }
  108. .Validform_wrong,.Validform_right,.Validform_warning {
  109. display: inline-block;
  110. height: 20px;
  111. font-size: 12px;
  112. vertical-align: middle;
  113. padding-left: 25px
  114. }
  115. .i-checks label.error, .check-box label.error, .radio-box label.error {
  116. right: auto;
  117. width: 150px;
  118. left: 210px;
  119. top: 1px;
  120. max-width: none;
  121. }
  122. /** 复选框&单选框 */
  123. .check-box,.radio-box {
  124. display: inline-block;
  125. box-sizing: border-box;
  126. cursor: pointer;
  127. position: relative;
  128. padding-left: 25px;
  129. padding-right: 15px;
  130. padding-top: 8px;
  131. }
  132. .icheckbox, .icheckbox-blue, .iradio, .iradio-blue, .iradio-purple {
  133. position: absolute;
  134. top: 8px;
  135. left: 0
  136. }
  137. /* iCheck */
  138. .icheckbox-blue,.iradio-blue {
  139. display: block;
  140. margin: 0;
  141. padding: 0;
  142. width: 18px;
  143. height: 18px;
  144. background: url(../../img/blue.png) no-repeat;
  145. border: none;
  146. cursor: pointer
  147. }
  148. .icheckbox-blue,.icheckbox-blue.static:hover {
  149. background-position: 0 0
  150. }
  151. .icheckbox-blue.hover,.icheckbox-blue:hover {
  152. background-position: -20px 0
  153. }
  154. .icheckbox-blue.checked {
  155. background-position: -40px 0
  156. }
  157. .icheckbox-blue.disabled {
  158. background-position: -60px 0;
  159. cursor: default
  160. }
  161. .icheckbox-blue.checked.disabled {
  162. background-position: -80px 0
  163. }
  164. .iradio-blue,.iradio-blue.static:hover {
  165. background-position: -100px 0
  166. }
  167. .iradio-blue.hover,.iradio-blue:hover {
  168. background-position: -120px 0
  169. }
  170. .iradio-blue.checked {
  171. background-position: -140px 0
  172. }
  173. .iradio-blue.disabled {
  174. background-position: -160px 0;
  175. cursor: default
  176. }
  177. .iradio-blue.checked.disabled {
  178. background-position: -180px 0
  179. }
  180. /** 遮罩层 */
  181. .loaderbox {
  182. display: inline-block;
  183. min-width: 125px;
  184. padding: 10px;
  185. margin: 0 auto;
  186. color: #000 !important;
  187. font-size: 13px;
  188. font-weight: 400;
  189. text-align: center;
  190. vertical-align: middle;
  191. border: 1px solid #ddd;
  192. background-color: #eee;
  193. -webkit-border-radius: 2px;
  194. -moz-border-radius: 2px;
  195. -ms-border-radius: 2px;
  196. -o-border-radius: 2px;
  197. border-radius: 2px;
  198. -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
  199. -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
  200. box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
  201. }
  202. .loaderbox .loading-activity {
  203. float: left;
  204. width: 18px;
  205. height: 18px;
  206. border: solid 2px transparent;
  207. border-top-color: #000;
  208. border-left-color: #000;
  209. border-radius: 10px;
  210. -webkit-animation: pace-spinner 400ms linear infinite;
  211. -moz-animation: pace-spinner 400ms linear infinite;
  212. -ms-animation: pace-spinner 400ms linear infinite;
  213. -o-animation: pace-spinner 400ms linear infinite;
  214. animation: pace-spinner 400ms linear infinite;
  215. }
  216. @media (max-width: 767px) {
  217. .loading-activity {
  218. width: 18px;
  219. height: 18px;
  220. }
  221. }
  222. @-ms-keyframes pace-spinner {
  223. 0% {
  224. -ms-transform: rotate(0deg);
  225. transform: rotate(0deg);
  226. }
  227. 100% {
  228. -ms-transform: rotate(360deg);
  229. transform: rotate(360deg);
  230. }
  231. }
  232. @keyframes pace-spinner {
  233. 0% {
  234. transform: rotate(0deg);
  235. }
  236. 100% {
  237. transform: rotate(360deg);
  238. }
  239. }
  240. /** 表单查询条件 */
  241. ul {
  242. margin: 0;
  243. padding: 0;
  244. -webkit-tap-highlight-color: rgba(0,0,0,0);
  245. }
  246. li {
  247. list-style: none;
  248. }
  249. .time-input {
  250. display: block;
  251. width: 100%;
  252. padding-left: 10px;
  253. }
  254. label {
  255. font-weight: normal;
  256. }
  257. .container-div {
  258. padding: 10px 35px;
  259. height: 100%;
  260. }
  261. .container-div .row {
  262. height: 100%;
  263. }
  264. .search-collapse,.select-table {
  265. width: 100%;
  266. background: #fff;
  267. border-radius: 6px;
  268. margin-top: 10px;
  269. padding-top: 5px;
  270. padding-bottom: 13px;
  271. box-shadow: 1px 1px 3px rgba(0,0,0,.2);
  272. }
  273. .search-collapse {
  274. position: relative;
  275. }
  276. .search-collapse .col-sm-6 .control-label {
  277. color: #333;
  278. }
  279. @media ( max-width : 768px) {
  280. .search-collapse {
  281. display: none;
  282. }
  283. }
  284. @media ( min-width : 768px) {
  285. .select-list li {
  286. float: left;
  287. }
  288. }
  289. .select-list li {
  290. color: #333;
  291. margin: 5px 15px 5px 0px;
  292. }
  293. .select-list li input {
  294. border: 1px solid #ddd;
  295. border-radius: 4px;
  296. background: transparent;
  297. outline: none;
  298. height: 30px;
  299. width: 280px;
  300. padding-left: 5px;
  301. }
  302. .select-list li .submit-btn {
  303. border: 0px;
  304. border-radius: 4px;
  305. background: transparent;
  306. outline: none;
  307. width: 40px;
  308. height: 23px;
  309. }
  310. .select-list li select {
  311. border: 1px solid #ddd;
  312. border-radius: 4px;
  313. background: transparent;
  314. outline: none;
  315. height: 30px;
  316. width: 280px;
  317. }
  318. .select-list .select-time input {
  319. width: 133px;
  320. }
  321. .select-time label,.select-time span,.select-time input {
  322. float: left;
  323. }
  324. .select-time label {
  325. margin-top: 5px;
  326. }
  327. .select-time span {
  328. display: block;
  329. margin: 5px 5px;
  330. }
  331. .search-btn {
  332. background-color: #1ab394;
  333. border-color: #1ab394;
  334. color: #FFF;
  335. margin-bottom: 5px;
  336. display: inline-block;
  337. padding: 6px 12px;
  338. margin-bottom: 0;
  339. font-size: 14px;
  340. font-weight: 400;
  341. line-height: 1.42857143;
  342. text-align: center;
  343. white-space: nowrap;
  344. border-radius: 3px;
  345. vertical-align: middle;
  346. cursor: pointer;
  347. }
  348. /** 表格查询数据 */
  349. .table-striped {
  350. min-height: 75%;
  351. }
  352. .table-striped .bootstrap-table {
  353. border: 0px!important;
  354. }
  355. .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 {
  356. border-bottom: 1px solid #e7eaec!important;
  357. background-color: transparent!important;
  358. border: 0px;
  359. }
  360. .table-striped .table>thead>tr>th, .table-striped .table>tbody>tr>th {
  361. border-bottom: 1px solid #ccc!important;
  362. border-top: 0px!important;
  363. }
  364. .table-striped .table>thead:first-child>tr:first-child>th {
  365. color: #333;
  366. }
  367. .table-bordered td,.table-bordered th {
  368. border: 1px solid #ddd!important
  369. }
  370. /** 首页样式 */
  371. .ax_close_max {
  372. position: fixed;
  373. top: 5px;
  374. left: 5px;
  375. z-index: 9999;
  376. display: none;
  377. color: #ccc;
  378. }