_all-skins.css 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876
  1. /*
  2. * Skin: Blue
  3. * ----------
  4. */
  5. .skin-blue .main-header .navbar {
  6. background-color: #3c8dbc;
  7. }
  8. .skin-blue .main-header .navbar .nav > li > a {
  9. color: #ffffff;
  10. }
  11. .skin-blue .main-header .navbar .nav > li > a:hover,
  12. .skin-blue .main-header .navbar .nav > li > a:active,
  13. .skin-blue .main-header .navbar .nav > li > a:focus,
  14. .skin-blue .main-header .navbar .nav .open > a,
  15. .skin-blue .main-header .navbar .nav .open > a:hover,
  16. .skin-blue .main-header .navbar .nav .open > a:focus {
  17. background: rgba(0, 0, 0, 0.1);
  18. color: #f6f6f6;
  19. }
  20. .skin-blue .main-header .navbar .navbar-custom-menu > .nav {
  21. margin-right: 10px;
  22. }
  23. .skin-blue .main-header .navbar .sidebar-toggle {
  24. color: #ffffff;
  25. }
  26. .skin-blue .main-header .navbar .sidebar-toggle:hover {
  27. color: #f6f6f6;
  28. background: rgba(0, 0, 0, 0.1);
  29. }
  30. .skin-blue .main-header .navbar .sidebar-toggle {
  31. color: #fff;
  32. }
  33. .skin-blue .main-header .navbar .sidebar-toggle:hover {
  34. background-color: #367fa9;
  35. }
  36. @media (max-width: 767px) {
  37. .skin-blue .main-header .navbar .dropdown-menu li.divider {
  38. background-color: rgba(255, 255, 255, 0.1);
  39. }
  40. .skin-blue .main-header .navbar .dropdown-menu li a {
  41. color: #fff;
  42. }
  43. .skin-blue .main-header .navbar .dropdown-menu li a:hover {
  44. background: #367fa9;
  45. }
  46. }
  47. .skin-blue .main-header .logo {
  48. background-color: #367fa9;
  49. color: #ffffff;
  50. border-bottom: 0px solid transparent;
  51. }
  52. .skin-blue .main-header .logo > a {
  53. color: #ffffff;
  54. }
  55. .skin-blue .main-header .logo:hover {
  56. background: #357ca5;
  57. }
  58. .skin-blue .main-header li.user-header {
  59. background-color: #3c8dbc;
  60. }
  61. .skin-blue .content-header {
  62. background: transparent;
  63. }
  64. .skin-blue .user-panel > .info,
  65. .skin-blue .user-panel > .info > a {
  66. color: #fff;
  67. }
  68. .skin-blue .sidebar-menu > li.header {
  69. color: #4b646f;
  70. background: #1a2226;
  71. }
  72. .skin-blue .sidebar-menu > li > a {
  73. border-left: 3px solid transparent;
  74. margin-right: 1px;
  75. }
  76. .skin-blue .sidebar-menu > li > a:hover,
  77. .skin-blue .sidebar-menu > li.active > a {
  78. color: #ffffff;
  79. background: #1e282c;
  80. border-left-color: #3c8dbc;
  81. }
  82. .skin-blue .sidebar-menu > li > .treeview-menu {
  83. margin: 0 1px;
  84. background: #2c3b41;
  85. }
  86. .skin-blue .wrapper,
  87. .skin-blue .main-sidebar,
  88. .skin-blue .left-side {
  89. background: #222d32;
  90. }
  91. .skin-blue .sidebar a {
  92. color: #b8c7ce;
  93. }
  94. .skin-blue .sidebar a:hover {
  95. text-decoration: none;
  96. }
  97. .skin-blue .treeview-menu > li > a {
  98. color: #8aa4af;
  99. }
  100. .skin-blue .treeview-menu > li.active > a,
  101. .skin-blue .treeview-menu > li > a:hover {
  102. color: #ffffff;
  103. }
  104. .skin-blue .sidebar-form {
  105. border-radius: 3px;
  106. border: 1px solid #374850;
  107. margin: 10px 10px;
  108. }
  109. .skin-blue .sidebar-form input[type="text"],
  110. .skin-blue .sidebar-form .btn {
  111. box-shadow: none;
  112. background-color: #374850;
  113. border: 1px solid transparent;
  114. height: 35px;
  115. -webkit-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
  116. -o-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
  117. transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
  118. }
  119. .skin-blue .sidebar-form input[type="text"] {
  120. color: #666;
  121. border-top-left-radius: 2px !important;
  122. border-top-right-radius: 0 !important;
  123. border-bottom-right-radius: 0 !important;
  124. border-bottom-left-radius: 2px !important;
  125. }
  126. .skin-blue .sidebar-form input[type="text"]:focus,
  127. .skin-blue .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
  128. background-color: #fff;
  129. color: #666;
  130. }
  131. .skin-blue .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
  132. border-left-color: #fff;
  133. }
  134. .skin-blue .sidebar-form .btn {
  135. color: #999;
  136. border-top-left-radius: 0 !important;
  137. border-top-right-radius: 2px !important;
  138. border-bottom-right-radius: 2px !important;
  139. border-bottom-left-radius: 0 !important;
  140. }
  141. .skin-blue.layout-top-nav .main-header > .logo {
  142. background-color: #3c8dbc;
  143. color: #ffffff;
  144. border-bottom: 0px solid transparent;
  145. }
  146. .skin-blue.layout-top-nav .main-header > .logo > a {
  147. color: #ffffff;
  148. }
  149. .skin-blue.layout-top-nav .main-header > .logo:hover {
  150. background: #3b8ab8;
  151. }
  152. /*
  153. * Skin: Black
  154. * -----------
  155. */
  156. /* skin-black navbar */
  157. .skin-black .main-header {
  158. -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
  159. box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
  160. }
  161. .skin-black .main-header .navbar-toggle {
  162. color: #333;
  163. }
  164. .skin-black .main-header .navbar-brand {
  165. color: #333;
  166. border-right: 1px solid #eee;
  167. }
  168. .skin-black .main-header > .navbar {
  169. background-color: #ffffff;
  170. }
  171. .skin-black .main-header > .navbar .nav > li > a {
  172. color: #333333;
  173. }
  174. .skin-black .main-header > .navbar .nav > li > a:hover,
  175. .skin-black .main-header > .navbar .nav > li > a:active,
  176. .skin-black .main-header > .navbar .nav > li > a:focus,
  177. .skin-black .main-header > .navbar .nav .open > a,
  178. .skin-black .main-header > .navbar .nav .open > a:hover,
  179. .skin-black .main-header > .navbar .nav .open > a:focus {
  180. background: #ffffff;
  181. color: #999999;
  182. }
  183. .skin-black .main-header > .navbar .navbar-custom-menu > .nav {
  184. margin-right: 10px;
  185. }
  186. .skin-black .main-header > .navbar .sidebar-toggle {
  187. color: #333333;
  188. }
  189. .skin-black .main-header > .navbar .sidebar-toggle:hover {
  190. color: #999999;
  191. background: #ffffff;
  192. }
  193. .skin-black .main-header > .navbar > .sidebar-toggle {
  194. color: #333;
  195. border-right: 1px solid #eee;
  196. }
  197. .skin-black .main-header > .navbar .navbar-nav > li > a {
  198. border-right: 1px solid #eee;
  199. }
  200. .skin-black .main-header > .navbar .navbar-custom-menu .navbar-nav > li > a,
  201. .skin-black .main-header > .navbar .navbar-right > li > a {
  202. border-left: 1px solid #eee;
  203. border-right-width: 0;
  204. }
  205. .skin-black .main-header > .logo {
  206. background-color: #ffffff;
  207. color: #333333;
  208. border-bottom: 0px solid transparent;
  209. border-right: 1px solid #eee;
  210. }
  211. .skin-black .main-header > .logo > a {
  212. color: #333333;
  213. }
  214. .skin-black .main-header > .logo:hover {
  215. background: #fcfcfc;
  216. }
  217. @media (max-width: 767px) {
  218. .skin-black .main-header > .logo {
  219. background-color: #222222;
  220. color: #ffffff;
  221. border-bottom: 0px solid transparent;
  222. border-right: none;
  223. }
  224. .skin-black .main-header > .logo > a {
  225. color: #ffffff;
  226. }
  227. .skin-black .main-header > .logo:hover {
  228. background: #1f1f1f;
  229. }
  230. }
  231. .skin-black .main-header li.user-header {
  232. background-color: #222;
  233. }
  234. .skin-black .content-header {
  235. background: transparent;
  236. box-shadow: none;
  237. }
  238. .skin-black .user-panel > .image > img {
  239. border: 1px solid #444;
  240. }
  241. .skin-black .user-panel > .info,
  242. .skin-black .user-panel > .info > a {
  243. color: #eee;
  244. }
  245. .skin-black .main-sidebar,
  246. .skin-black .left-side,
  247. .skin-black .wrapper {
  248. background: #222;
  249. }
  250. .skin-black .sidebar > .sidebar-menu > li.header {
  251. background: #1d1d1d;
  252. color: rgba(255, 255, 255, 0.4);
  253. }
  254. .skin-black .sidebar > .sidebar-menu > li > a {
  255. margin-right: 1px;
  256. border-left: 3px solid transparent;
  257. }
  258. .skin-black .sidebar > .sidebar-menu > li > a:hover,
  259. .skin-black .sidebar > .sidebar-menu > li.active > a {
  260. color: #fff;
  261. background: #444;
  262. border-left-color: #fff;
  263. }
  264. .skin-black .sidebar > .sidebar-menu > li > .treeview-menu {
  265. background: #333;
  266. }
  267. .skin-black .sidebar a {
  268. color: #eee;
  269. }
  270. .skin-black .sidebar a:hover {
  271. text-decoration: none;
  272. }
  273. .skin-black .treeview-menu > li > a {
  274. color: #ccc;
  275. }
  276. .skin-black .treeview-menu > li.active > a,
  277. .skin-black .treeview-menu > li > a:hover {
  278. color: #fff;
  279. }
  280. .skin-black .sidebar-form {
  281. border-radius: 3px;
  282. border: 1px solid #3c3c3c;
  283. margin: 10px 10px;
  284. }
  285. .skin-black .sidebar-form input[type="text"],
  286. .skin-black .sidebar-form .btn {
  287. box-shadow: none;
  288. background-color: #3c3c3c;
  289. border: 1px solid transparent;
  290. height: 35px;
  291. -webkit-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
  292. -o-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
  293. transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
  294. }
  295. .skin-black .sidebar-form input[type="text"] {
  296. color: #666;
  297. border-top-left-radius: 2px !important;
  298. border-top-right-radius: 0 !important;
  299. border-bottom-right-radius: 0 !important;
  300. border-bottom-left-radius: 2px !important;
  301. }
  302. .skin-black .sidebar-form input[type="text"]:focus,
  303. .skin-black .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
  304. background-color: #fff;
  305. color: #666;
  306. }
  307. .skin-black .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
  308. border-left-color: #fff;
  309. }
  310. .skin-black .sidebar-form .btn {
  311. color: #999;
  312. border-top-left-radius: 0 !important;
  313. border-top-right-radius: 2px !important;
  314. border-bottom-right-radius: 2px !important;
  315. border-bottom-left-radius: 0 !important;
  316. }
  317. /*
  318. * Skin: Green
  319. * -----------
  320. */
  321. .skin-green .main-header .navbar {
  322. background-color: #00a65a;
  323. }
  324. .skin-green .main-header .navbar .nav > li > a {
  325. color: #ffffff;
  326. }
  327. .skin-green .main-header .navbar .nav > li > a:hover,
  328. .skin-green .main-header .navbar .nav > li > a:active,
  329. .skin-green .main-header .navbar .nav > li > a:focus,
  330. .skin-green .main-header .navbar .nav .open > a,
  331. .skin-green .main-header .navbar .nav .open > a:hover,
  332. .skin-green .main-header .navbar .nav .open > a:focus {
  333. background: rgba(0, 0, 0, 0.1);
  334. color: #f6f6f6;
  335. }
  336. .skin-green .main-header .navbar .navbar-custom-menu > .nav {
  337. margin-right: 10px;
  338. }
  339. .skin-green .main-header .navbar .sidebar-toggle {
  340. color: #ffffff;
  341. }
  342. .skin-green .main-header .navbar .sidebar-toggle:hover {
  343. color: #f6f6f6;
  344. background: rgba(0, 0, 0, 0.1);
  345. }
  346. .skin-green .main-header .navbar .sidebar-toggle {
  347. color: #fff;
  348. }
  349. .skin-green .main-header .navbar .sidebar-toggle:hover {
  350. background-color: #008d4c;
  351. }
  352. @media (max-width: 767px) {
  353. .skin-green .main-header .navbar .dropdown-menu li.divider {
  354. background-color: rgba(255, 255, 255, 0.1);
  355. }
  356. .skin-green .main-header .navbar .dropdown-menu li a {
  357. color: #fff;
  358. }
  359. .skin-green .main-header .navbar .dropdown-menu li a:hover {
  360. background: #008d4c;
  361. }
  362. }
  363. .skin-green .main-header .logo {
  364. background-color: #008d4c;
  365. color: #ffffff;
  366. border-bottom: 0px solid transparent;
  367. }
  368. .skin-green .main-header .logo > a {
  369. color: #ffffff;
  370. }
  371. .skin-green .main-header .logo:hover {
  372. background: #008749;
  373. }
  374. .skin-green .main-header li.user-header {
  375. background-color: #00a65a;
  376. }
  377. .skin-green .content-header {
  378. background: transparent;
  379. }
  380. .skin-green .user-panel > .info,
  381. .skin-green .user-panel > .info > a {
  382. color: #fff;
  383. }
  384. .skin-green .sidebar-menu > li.header {
  385. color: #4b646f;
  386. background: #1a2226;
  387. }
  388. .skin-green .sidebar-menu > li > a {
  389. border-left: 3px solid transparent;
  390. margin-right: 1px;
  391. }
  392. .skin-green .sidebar-menu > li > a:hover,
  393. .skin-green .sidebar-menu > li.active > a {
  394. color: #ffffff;
  395. background: #1e282c;
  396. border-left-color: #00a65a;
  397. }
  398. .skin-green .sidebar-menu > li > .treeview-menu {
  399. margin: 0 1px;
  400. background: #2c3b41;
  401. }
  402. .skin-green .wrapper,
  403. .skin-green .main-sidebar,
  404. .skin-green .left-side {
  405. background: #222d32;
  406. }
  407. .skin-green .sidebar a {
  408. color: #b8c7ce;
  409. }
  410. .skin-green .sidebar a:hover {
  411. text-decoration: none;
  412. }
  413. .skin-green .treeview-menu > li > a {
  414. color: #8aa4af;
  415. }
  416. .skin-green .treeview-menu > li.active > a,
  417. .skin-green .treeview-menu > li > a:hover {
  418. color: #ffffff;
  419. }
  420. .skin-green .sidebar-form {
  421. border-radius: 3px;
  422. border: 1px solid #374850;
  423. margin: 10px 10px;
  424. }
  425. .skin-green .sidebar-form input[type="text"],
  426. .skin-green .sidebar-form .btn {
  427. box-shadow: none;
  428. background-color: #374850;
  429. border: 1px solid transparent;
  430. height: 35px;
  431. -webkit-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
  432. -o-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
  433. transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
  434. }
  435. .skin-green .sidebar-form input[type="text"] {
  436. color: #666;
  437. border-top-left-radius: 2px !important;
  438. border-top-right-radius: 0 !important;
  439. border-bottom-right-radius: 0 !important;
  440. border-bottom-left-radius: 2px !important;
  441. }
  442. .skin-green .sidebar-form input[type="text"]:focus,
  443. .skin-green .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
  444. background-color: #fff;
  445. color: #666;
  446. }
  447. .skin-green .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
  448. border-left-color: #fff;
  449. }
  450. .skin-green .sidebar-form .btn {
  451. color: #999;
  452. border-top-left-radius: 0 !important;
  453. border-top-right-radius: 2px !important;
  454. border-bottom-right-radius: 2px !important;
  455. border-bottom-left-radius: 0 !important;
  456. }
  457. /*
  458. * Skin: Red
  459. * ---------
  460. */
  461. .skin-red .main-header .navbar {
  462. background-color: #dd4b39;
  463. }
  464. .skin-red .main-header .navbar .nav > li > a {
  465. color: #ffffff;
  466. }
  467. .skin-red .main-header .navbar .nav > li > a:hover,
  468. .skin-red .main-header .navbar .nav > li > a:active,
  469. .skin-red .main-header .navbar .nav > li > a:focus,
  470. .skin-red .main-header .navbar .nav .open > a,
  471. .skin-red .main-header .navbar .nav .open > a:hover,
  472. .skin-red .main-header .navbar .nav .open > a:focus {
  473. background: rgba(0, 0, 0, 0.1);
  474. color: #f6f6f6;
  475. }
  476. .skin-red .main-header .navbar .navbar-custom-menu > .nav {
  477. margin-right: 10px;
  478. }
  479. .skin-red .main-header .navbar .sidebar-toggle {
  480. color: #ffffff;
  481. }
  482. .skin-red .main-header .navbar .sidebar-toggle:hover {
  483. color: #f6f6f6;
  484. background: rgba(0, 0, 0, 0.1);
  485. }
  486. .skin-red .main-header .navbar .sidebar-toggle {
  487. color: #fff;
  488. }
  489. .skin-red .main-header .navbar .sidebar-toggle:hover {
  490. background-color: #d73925;
  491. }
  492. @media (max-width: 767px) {
  493. .skin-red .main-header .navbar .dropdown-menu li.divider {
  494. background-color: rgba(255, 255, 255, 0.1);
  495. }
  496. .skin-red .main-header .navbar .dropdown-menu li a {
  497. color: #fff;
  498. }
  499. .skin-red .main-header .navbar .dropdown-menu li a:hover {
  500. background: #d73925;
  501. }
  502. }
  503. .skin-red .main-header .logo {
  504. background-color: #d73925;
  505. color: #ffffff;
  506. border-bottom: 0px solid transparent;
  507. }
  508. .skin-red .main-header .logo > a {
  509. color: #ffffff;
  510. }
  511. .skin-red .main-header .logo:hover {
  512. background: #d33724;
  513. }
  514. .skin-red .main-header li.user-header {
  515. background-color: #dd4b39;
  516. }
  517. .skin-red .content-header {
  518. background: transparent;
  519. }
  520. .skin-red .user-panel > .info,
  521. .skin-red .user-panel > .info > a {
  522. color: #fff;
  523. }
  524. .skin-red .sidebar-menu > li.header {
  525. color: #4b646f;
  526. background: #1a2226;
  527. }
  528. .skin-red .sidebar-menu > li > a {
  529. border-left: 3px solid transparent;
  530. margin-right: 1px;
  531. }
  532. .skin-red .sidebar-menu > li > a:hover,
  533. .skin-red .sidebar-menu > li.active > a {
  534. color: #ffffff;
  535. background: #1e282c;
  536. border-left-color: #dd4b39;
  537. }
  538. .skin-red .sidebar-menu > li > .treeview-menu {
  539. margin: 0 1px;
  540. background: #2c3b41;
  541. }
  542. .skin-red .wrapper,
  543. .skin-red .main-sidebar,
  544. .skin-red .left-side {
  545. background: #222d32;
  546. }
  547. .skin-red .sidebar a {
  548. color: #b8c7ce;
  549. }
  550. .skin-red .sidebar a:hover {
  551. text-decoration: none;
  552. }
  553. .skin-red .treeview-menu > li > a {
  554. color: #8aa4af;
  555. }
  556. .skin-red .treeview-menu > li.active > a,
  557. .skin-red .treeview-menu > li > a:hover {
  558. color: #ffffff;
  559. }
  560. .skin-red .sidebar-form {
  561. border-radius: 3px;
  562. border: 1px solid #374850;
  563. margin: 10px 10px;
  564. }
  565. .skin-red .sidebar-form input[type="text"],
  566. .skin-red .sidebar-form .btn {
  567. box-shadow: none;
  568. background-color: #374850;
  569. border: 1px solid transparent;
  570. height: 35px;
  571. -webkit-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
  572. -o-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
  573. transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
  574. }
  575. .skin-red .sidebar-form input[type="text"] {
  576. color: #666;
  577. border-top-left-radius: 2px !important;
  578. border-top-right-radius: 0 !important;
  579. border-bottom-right-radius: 0 !important;
  580. border-bottom-left-radius: 2px !important;
  581. }
  582. .skin-red .sidebar-form input[type="text"]:focus,
  583. .skin-red .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
  584. background-color: #fff;
  585. color: #666;
  586. }
  587. .skin-red .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
  588. border-left-color: #fff;
  589. }
  590. .skin-red .sidebar-form .btn {
  591. color: #999;
  592. border-top-left-radius: 0 !important;
  593. border-top-right-radius: 2px !important;
  594. border-bottom-right-radius: 2px !important;
  595. border-bottom-left-radius: 0 !important;
  596. }
  597. /*
  598. * Skin: Yellow
  599. * ------------
  600. */
  601. .skin-yellow .main-header .navbar {
  602. background-color: #f39c12;
  603. }
  604. .skin-yellow .main-header .navbar .nav > li > a {
  605. color: #ffffff;
  606. }
  607. .skin-yellow .main-header .navbar .nav > li > a:hover,
  608. .skin-yellow .main-header .navbar .nav > li > a:active,
  609. .skin-yellow .main-header .navbar .nav > li > a:focus,
  610. .skin-yellow .main-header .navbar .nav .open > a,
  611. .skin-yellow .main-header .navbar .nav .open > a:hover,
  612. .skin-yellow .main-header .navbar .nav .open > a:focus {
  613. background: rgba(0, 0, 0, 0.1);
  614. color: #f6f6f6;
  615. }
  616. .skin-yellow .main-header .navbar .navbar-custom-menu > .nav {
  617. margin-right: 10px;
  618. }
  619. .skin-yellow .main-header .navbar .sidebar-toggle {
  620. color: #ffffff;
  621. }
  622. .skin-yellow .main-header .navbar .sidebar-toggle:hover {
  623. color: #f6f6f6;
  624. background: rgba(0, 0, 0, 0.1);
  625. }
  626. .skin-yellow .main-header .navbar .sidebar-toggle {
  627. color: #fff;
  628. }
  629. .skin-yellow .main-header .navbar .sidebar-toggle:hover {
  630. background-color: #e08e0b;
  631. }
  632. @media (max-width: 767px) {
  633. .skin-yellow .main-header .navbar .dropdown-menu li.divider {
  634. background-color: rgba(255, 255, 255, 0.1);
  635. }
  636. .skin-yellow .main-header .navbar .dropdown-menu li a {
  637. color: #fff;
  638. }
  639. .skin-yellow .main-header .navbar .dropdown-menu li a:hover {
  640. background: #e08e0b;
  641. }
  642. }
  643. .skin-yellow .main-header .logo {
  644. background-color: #e08e0b;
  645. color: #ffffff;
  646. border-bottom: 0px solid transparent;
  647. }
  648. .skin-yellow .main-header .logo > a {
  649. color: #ffffff;
  650. }
  651. .skin-yellow .main-header .logo:hover {
  652. background: #db8b0b;
  653. }
  654. .skin-yellow .main-header li.user-header {
  655. background-color: #f39c12;
  656. }
  657. .skin-yellow .content-header {
  658. background: transparent;
  659. }
  660. .skin-yellow .user-panel > .info,
  661. .skin-yellow .user-panel > .info > a {
  662. color: #fff;
  663. }
  664. .skin-yellow .sidebar-menu > li.header {
  665. color: #4b646f;
  666. background: #1a2226;
  667. }
  668. .skin-yellow .sidebar-menu > li > a {
  669. border-left: 3px solid transparent;
  670. margin-right: 1px;
  671. }
  672. .skin-yellow .sidebar-menu > li > a:hover,
  673. .skin-yellow .sidebar-menu > li.active > a {
  674. color: #ffffff;
  675. background: #1e282c;
  676. border-left-color: #f39c12;
  677. }
  678. .skin-yellow .sidebar-menu > li > .treeview-menu {
  679. margin: 0 1px;
  680. background: #2c3b41;
  681. }
  682. .skin-yellow .wrapper,
  683. .skin-yellow .main-sidebar,
  684. .skin-yellow .left-side {
  685. background: #222d32;
  686. }
  687. .skin-yellow .sidebar a {
  688. color: #b8c7ce;
  689. }
  690. .skin-yellow .sidebar a:hover {
  691. text-decoration: none;
  692. }
  693. .skin-yellow .treeview-menu > li > a {
  694. color: #8aa4af;
  695. }
  696. .skin-yellow .treeview-menu > li.active > a,
  697. .skin-yellow .treeview-menu > li > a:hover {
  698. color: #ffffff;
  699. }
  700. .skin-yellow .sidebar-form {
  701. border-radius: 3px;
  702. border: 1px solid #374850;
  703. margin: 10px 10px;
  704. }
  705. .skin-yellow .sidebar-form input[type="text"],
  706. .skin-yellow .sidebar-form .btn {
  707. box-shadow: none;
  708. background-color: #374850;
  709. border: 1px solid transparent;
  710. height: 35px;
  711. -webkit-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
  712. -o-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
  713. transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
  714. }
  715. .skin-yellow .sidebar-form input[type="text"] {
  716. color: #666;
  717. border-top-left-radius: 2px !important;
  718. border-top-right-radius: 0 !important;
  719. border-bottom-right-radius: 0 !important;
  720. border-bottom-left-radius: 2px !important;
  721. }
  722. .skin-yellow .sidebar-form input[type="text"]:focus,
  723. .skin-yellow .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
  724. background-color: #fff;
  725. color: #666;
  726. }
  727. .skin-yellow .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
  728. border-left-color: #fff;
  729. }
  730. .skin-yellow .sidebar-form .btn {
  731. color: #999;
  732. border-top-left-radius: 0 !important;
  733. border-top-right-radius: 2px !important;
  734. border-bottom-right-radius: 2px !important;
  735. border-bottom-left-radius: 0 !important;
  736. }
  737. /*
  738. * Skin: Purple
  739. * ------------
  740. */
  741. .skin-purple .main-header .navbar {
  742. background-color: #605ca8;
  743. }
  744. .skin-purple .main-header .navbar .nav > li > a {
  745. color: #ffffff;
  746. }
  747. .skin-purple .main-header .navbar .nav > li > a:hover,
  748. .skin-purple .main-header .navbar .nav > li > a:active,
  749. .skin-purple .main-header .navbar .nav > li > a:focus,
  750. .skin-purple .main-header .navbar .nav .open > a,
  751. .skin-purple .main-header .navbar .nav .open > a:hover,
  752. .skin-purple .main-header .navbar .nav .open > a:focus {
  753. background: rgba(0, 0, 0, 0.1);
  754. color: #f6f6f6;
  755. }
  756. .skin-purple .main-header .navbar .navbar-custom-menu > .nav {
  757. margin-right: 10px;
  758. }
  759. .skin-purple .main-header .navbar .sidebar-toggle {
  760. color: #ffffff;
  761. }
  762. .skin-purple .main-header .navbar .sidebar-toggle:hover {
  763. color: #f6f6f6;
  764. background: rgba(0, 0, 0, 0.1);
  765. }
  766. .skin-purple .main-header .navbar .sidebar-toggle {
  767. color: #fff;
  768. }
  769. .skin-purple .main-header .navbar .sidebar-toggle:hover {
  770. background-color: #555299;
  771. }
  772. @media (max-width: 767px) {
  773. .skin-purple .main-header .navbar .dropdown-menu li.divider {
  774. background-color: rgba(255, 255, 255, 0.1);
  775. }
  776. .skin-purple .main-header .navbar .dropdown-menu li a {
  777. color: #fff;
  778. }
  779. .skin-purple .main-header .navbar .dropdown-menu li a:hover {
  780. background: #555299;
  781. }
  782. }
  783. .skin-purple .main-header .logo {
  784. background-color: #555299;
  785. color: #ffffff;
  786. border-bottom: 0px solid transparent;
  787. }
  788. .skin-purple .main-header .logo > a {
  789. color: #ffffff;
  790. }
  791. .skin-purple .main-header .logo:hover {
  792. background: #545096;
  793. }
  794. .skin-purple .main-header li.user-header {
  795. background-color: #605ca8;
  796. }
  797. .skin-purple .content-header {
  798. background: transparent;
  799. }
  800. .skin-purple .user-panel > .info,
  801. .skin-purple .user-panel > .info > a {
  802. color: #fff;
  803. }
  804. .skin-purple .sidebar-menu > li.header {
  805. color: #4b646f;
  806. background: #1a2226;
  807. }
  808. .skin-purple .sidebar-menu > li > a {
  809. border-left: 3px solid transparent;
  810. margin-right: 1px;
  811. }
  812. .skin-purple .sidebar-menu > li > a:hover,
  813. .skin-purple .sidebar-menu > li.active > a {
  814. color: #ffffff;
  815. background: #1e282c;
  816. border-left-color: #605ca8;
  817. }
  818. .skin-purple .sidebar-menu > li > .treeview-menu {
  819. margin: 0 1px;
  820. background: #2c3b41;
  821. }
  822. .skin-purple .wrapper,
  823. .skin-purple .main-sidebar,
  824. .skin-purple .left-side {
  825. background: #222d32;
  826. }
  827. .skin-purple .sidebar a {
  828. color: #b8c7ce;
  829. }
  830. .skin-purple .sidebar a:hover {
  831. text-decoration: none;
  832. }
  833. .skin-purple .treeview-menu > li > a {
  834. color: #8aa4af;
  835. }
  836. .skin-purple .treeview-menu > li.active > a,
  837. .skin-purple .treeview-menu > li > a:hover {
  838. color: #ffffff;
  839. }
  840. .skin-purple .sidebar-form {
  841. border-radius: 3px;
  842. border: 1px solid #374850;
  843. margin: 10px 10px;
  844. }
  845. .skin-purple .sidebar-form input[type="text"],
  846. .skin-purple .sidebar-form .btn {
  847. box-shadow: none;
  848. background-color: #374850;
  849. border: 1px solid transparent;
  850. height: 35px;
  851. -webkit-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
  852. -o-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
  853. transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
  854. }
  855. .skin-purple .sidebar-form input[type="text"] {
  856. color: #666;
  857. border-top-left-radius: 2px !important;
  858. border-top-right-radius: 0 !important;
  859. border-bottom-right-radius: 0 !important;
  860. border-bottom-left-radius: 2px !important;
  861. }
  862. .skin-purple .sidebar-form input[type="text"]:focus,
  863. .skin-purple .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
  864. background-color: #fff;
  865. color: #666;
  866. }
  867. .skin-purple .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
  868. border-left-color: #fff;
  869. }
  870. .skin-purple .sidebar-form .btn {
  871. color: #999;
  872. border-top-left-radius: 0 !important;
  873. border-top-right-radius: 2px !important;
  874. border-bottom-right-radius: 2px !important;
  875. border-bottom-left-radius: 0 !important;
  876. }