main.css 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381
  1. /*building SAAS 0.1*/
  2. /*bootstrap 初始化*/
  3. html{
  4. height:100%;
  5. width:100%
  6. }
  7. /*自定义css*/
  8. body{
  9. color: #505458 !important;
  10. background-color: #ebeff2;
  11. font-size: 14px;
  12. height:100%;
  13. width:100%
  14. }
  15. @-webkit-keyframes tada {
  16. 0% {
  17. -webkit-transform: scale(1)
  18. }
  19. 10%, 20% {
  20. -webkit-transform: scale(0.9) rotate(-3deg)
  21. }
  22. 30%, 50%, 70%, 90% {
  23. -webkit-transform: scale(1.1) rotate(3deg)
  24. }
  25. 40%, 60%, 80% {
  26. -webkit-transform: scale(1.1) rotate(-3deg)
  27. }
  28. 100% {
  29. -webkit-transform: scale(1) rotate(0)
  30. }
  31. }
  32. @-moz-keyframes tada {
  33. 0% {
  34. -moz-transform: scale(1)
  35. }
  36. 10%, 20% {
  37. -moz-transform: scale(0.9) rotate(-3deg)
  38. }
  39. 30%, 50%, 70%, 90% {
  40. -moz-transform: scale(1.1) rotate(3deg)
  41. }
  42. 40%, 60%, 80% {
  43. -moz-transform: scale(1.1) rotate(-3deg)
  44. }
  45. 100% {
  46. -moz-transform: scale(1) rotate(0)
  47. }
  48. }
  49. .has-danger {
  50. -webkit-animation: shake 1s .2s ease both;
  51. -moz-animation: shake 1s .2s ease both;
  52. animation: shake 1s .2s ease both;
  53. }
  54. @-webkit-keyframes shake {
  55. 0%, 100% {
  56. -webkit-transform: translateX(0);
  57. }
  58. 10%, 30%, 50%, 70%, 90% {
  59. -webkit-transform: translateX(-10px);
  60. }
  61. 20%, 40%, 60%, 80% {
  62. -webkit-transform: translateX(10px);
  63. }
  64. }
  65. @-moz-keyframes shake {
  66. 0%, 100% {
  67. -moz-transform: translateX(0);
  68. }
  69. 10%, 30%, 50%, 70%, 90% {
  70. -moz-transform: translateX(-10px);
  71. }
  72. 20%, 40%, 60%, 80% {
  73. -moz-transform: translateX(10px);
  74. }
  75. }
  76. @keyframes shake {
  77. 0%, 100% {
  78. transform: translateX(0);
  79. }
  80. 10%, 30%, 50%, 70%, 90% {
  81. transform: translateX(-10px);
  82. }
  83. 20%, 40%, 60%, 80% {
  84. transform: translateX(10px);
  85. }
  86. }
  87. .login-bg {
  88. width: 100%;
  89. height: 100%;
  90. background:#f0f0f0 url("../img/login-bg.jpg") bottom center no-repeat;
  91. background-size: 100% auto;
  92. display: inline-block;
  93. }
  94. .form-signin {
  95. width: 420px;
  96. margin: 0 auto;
  97. position: absolute;
  98. left: 0;
  99. right: 0;
  100. top: 20%;
  101. }
  102. .wrapper{
  103. position: relative;
  104. }
  105. .top-bar{
  106. position: fixed;
  107. top: 0;
  108. left: 0;
  109. width: 100%;
  110. z-index: 9;
  111. }
  112. .top-bar .logo{
  113. height:60px;
  114. width: 250px;
  115. position: absolute;
  116. text-align: center;
  117. background: #ffffff;
  118. border-top: 3px solid #007bff;
  119. }
  120. .top-bar .logo a{
  121. line-height: 60px;
  122. }
  123. .top-bar .nav{
  124. background-color: #ebeff2;
  125. }
  126. .top-bar .nav .title{
  127. font-size: 16px;
  128. font-weight: 600;
  129. line-height:60px;
  130. margin: 0;
  131. }
  132. .top-bar .nav{
  133. margin-left: 250px;
  134. border-top: 3px solid #007bff;
  135. padding: 0 15px;
  136. }
  137. .top-bar .nav .action-area{
  138. position: absolute;
  139. right: 15px;
  140. top: 0;
  141. }
  142. .aside{
  143. background: #ffffff none repeat scroll 0 0;
  144. bottom: 50px;
  145. box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.06), 0 1px 0 0 rgba(0, 0, 0, 0.02);
  146. height: 100%;
  147. margin-bottom: -70px;
  148. margin-top: 0;
  149. padding-bottom: 70px;
  150. position: fixed;
  151. top: 60px;
  152. width: 250px;
  153. z-index: 2;
  154. }
  155. .aside .user-info{
  156. padding: 10px 0 20px;
  157. text-align: center;
  158. }
  159. .aside .user-info .user-img{
  160. height: 88px;
  161. width: 88px;
  162. overflow: hidden;
  163. margin: 0 auto;
  164. }
  165. .aside .user-info .user-img img{
  166. max-width: 100%;
  167. border-radius: 50%;
  168. padding: 4px;
  169. border: 1px solid #ebeff2;
  170. }
  171. .aside .user-info h5{
  172. color: #98a6ad;
  173. }
  174. .aside .min-menu{
  175. margin: 0;
  176. padding: 0;
  177. list-style: none;
  178. }
  179. .aside .min-menu li{
  180. display: inline;
  181. margin-left: 4px;
  182. }
  183. .aside .min-menu li a{
  184. color: #98a6ad;
  185. }
  186. .aside .min-menu li a:hover{
  187. color: #007bff !important;
  188. }
  189. .aside .menu,
  190. .aside .sub-menu{
  191. list-style: none;
  192. margin: 0;
  193. padding: 0;
  194. }
  195. .aside .sub-menu{
  196. display: none;
  197. }
  198. .aside .menu li{
  199. position: relative;
  200. }
  201. .aside .menu > li.active > a{
  202. border-left: 3px solid #007bff;
  203. }
  204. .aside .menu li.active > a{
  205. color: #007bff !important;
  206. }
  207. .aside .menu li a:hover{
  208. color: #007bff !important;
  209. }
  210. .aside .menu > li > a{
  211. border-left: 3px solid transparent;
  212. color: #435966;
  213. display: block;
  214. margin: 4px 0;
  215. padding: 12px 20px;
  216. text-decoration: none;
  217. transition: all 0.3s ease-out 0s;
  218. }
  219. .aside .menu > li a i{
  220. margin-left: 3px;
  221. margin-right: 15px;
  222. }
  223. .aside .menu > li a .menu-arrow{
  224. position: absolute;
  225. right: 0;
  226. top: 17px;
  227. }
  228. .aside .sub-menu > li > a{
  229. color: #63747c;
  230. display: block;
  231. padding: 10px 20px 10px 58px;
  232. transition: all 0.3s ease-out 0s;
  233. text-decoration: none;
  234. }
  235. .wrapper .content-page{
  236. margin-left: 250px;
  237. margin-top:60px;
  238. width: auto;
  239. }
  240. .grid-view{
  241. clear: both;
  242. }
  243. .grid-view .summary{
  244. text-align: right;
  245. }
  246. .grid-view .pagination{
  247. float: right;
  248. display: inline-block;
  249. }
  250. .card-box{
  251. background-color: #ffffff;
  252. padding: 20px;
  253. border-radius: 5px;
  254. position: relative;
  255. }
  256. .card-box > h5{
  257. padding: 8px 15px;
  258. margin-bottom: 20px;
  259. margin-top: 0;
  260. }
  261. .card-box .dropdown.action{
  262. position: absolute;
  263. right: 20px;
  264. top: 27px;
  265. }
  266. .card-box .data{
  267. margin-top: 20px;
  268. }
  269. .card-box .dropdown.action > a{
  270. color: #98a6ad;
  271. }
  272. .breadcrumb {
  273. background: none
  274. }
  275. /* tree */
  276. .tree::before{
  277. border-left: 1px solid #666;
  278. bottom: 16px;
  279. content: "";
  280. display: block;
  281. left: 0;
  282. position: absolute;
  283. top: -21px;
  284. width: 1px;
  285. z-index: 1;
  286. }
  287. .tree{
  288. position: relative;
  289. overflow: auto;
  290. padding-left: 14px;
  291. }
  292. .tree .tree-folder::before,
  293. .tree .tree-item::before{
  294. border-top: 1px solid #666;
  295. content: "";
  296. display: inline-block;
  297. height: 0;
  298. left: -13px;
  299. position: absolute;
  300. top: 14px;
  301. width: 18px;
  302. z-index: 1;
  303. }
  304. .tree .tree-item,
  305. .tree .tree-folder {
  306. border: 1px solid #fff;
  307. cursor: pointer !important;
  308. }
  309. .tree .tree-folder,
  310. .tree .tree-item {
  311. position: relative;
  312. }
  313. .tree .tree-folder {
  314. min-height: 20px;
  315. width: auto;
  316. }
  317. .tree .tree-item{
  318. cursor: default;
  319. }
  320. .tree .tree-item,
  321. .tree .tree-folder .tree-folder-header{
  322. box-sizing: content-box;
  323. color: #333;
  324. margin: 0;
  325. padding: 4px 5px 6px;
  326. }
  327. .tree .tree-folder .tree-folder-header{
  328. position: relative;
  329. line-height: 20px;
  330. }
  331. .tree .tree-folder .tree-folder-content::before{
  332. border-left: 1px solid #666;
  333. bottom: 16px;
  334. content: "";
  335. display: inline-block;
  336. left: -12px;
  337. position: absolute;
  338. top: -9px;
  339. width: 1px;
  340. z-index: 1;
  341. }
  342. .tree .tree-folder .tree-folder-content{
  343. margin-left: 23px;
  344. position: relative;
  345. }
  346. .tree .tree-folder,
  347. .tree .tree-item{
  348. position: relative;
  349. }
  350. .tree-folder .tree-folder-header:hover,
  351. .tree-item .tree-folder-header:hover{
  352. background-color: rgba(113, 182, 249, 0.2);
  353. border-radius: 4px;
  354. }
  355. .tree .tree-item-name{
  356. margin-left: 2px;
  357. display: inline-block;
  358. }
  359. .tree-folder-content .child{
  360. display: none;
  361. }
  362. .tree-action{
  363. position: absolute;
  364. right: 4px;
  365. top: 5px;
  366. display: none;
  367. }
  368. .tree-action a{
  369. color: #999;
  370. }
  371. .tree-action a:hover{
  372. color: #666;
  373. }
  374. .tree-item{
  375. padding-left: 0 !important;
  376. padding-right: 0 !important;
  377. }
  378. .form-control-plaintext{
  379. width:100%
  380. }