adminlte.extra-components.css 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059
  1. /*!
  2. * AdminLTE v3.0.4
  3. * Only Extra Components
  4. * Author: Colorlib
  5. * Website: AdminLTE.io <http://adminlte.io>
  6. * License: Open source - MIT <http://opensource.org/licenses/MIT>
  7. */
  8. .small-box {
  9. border-radius: 0.25rem;
  10. box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
  11. display: block;
  12. margin-bottom: 20px;
  13. position: relative;
  14. }
  15. .small-box > .inner {
  16. padding: 10px;
  17. }
  18. .small-box > .small-box-footer {
  19. background: rgba(0, 0, 0, 0.1);
  20. color: rgba(255, 255, 255, 0.8);
  21. display: block;
  22. padding: 3px 0;
  23. position: relative;
  24. text-align: center;
  25. text-decoration: none;
  26. z-index: 10;
  27. }
  28. .small-box > .small-box-footer:hover {
  29. background: rgba(0, 0, 0, 0.15);
  30. color: #ffffff;
  31. }
  32. .small-box h3 {
  33. font-size: 2.2rem;
  34. font-weight: bold;
  35. margin: 0 0 10px 0;
  36. padding: 0;
  37. white-space: nowrap;
  38. }
  39. @media (min-width: 992px) {
  40. .col-xl-2 .small-box h3,
  41. .col-lg-2 .small-box h3,
  42. .col-md-2 .small-box h3 {
  43. font-size: 1.6rem;
  44. }
  45. .col-xl-3 .small-box h3,
  46. .col-lg-3 .small-box h3,
  47. .col-md-3 .small-box h3 {
  48. font-size: 1.6rem;
  49. }
  50. }
  51. @media (min-width: 1200px) {
  52. .col-xl-2 .small-box h3,
  53. .col-lg-2 .small-box h3,
  54. .col-md-2 .small-box h3 {
  55. font-size: 2.2rem;
  56. }
  57. .col-xl-3 .small-box h3,
  58. .col-lg-3 .small-box h3,
  59. .col-md-3 .small-box h3 {
  60. font-size: 2.2rem;
  61. }
  62. }
  63. .small-box p {
  64. font-size: 1rem;
  65. }
  66. .small-box p > small {
  67. color: #f8f9fa;
  68. display: block;
  69. font-size: 0.9rem;
  70. margin-top: 5px;
  71. }
  72. .small-box h3,
  73. .small-box p {
  74. z-index: 5;
  75. }
  76. .small-box .icon {
  77. color: rgba(0, 0, 0, 0.15);
  78. z-index: 0;
  79. }
  80. .small-box .icon > i {
  81. font-size: 90px;
  82. position: absolute;
  83. right: 15px;
  84. top: 15px;
  85. transition: all 0.3s linear;
  86. }
  87. .small-box .icon > i.fa, .small-box .icon > i.fas, .small-box .icon > i.far, .small-box .icon > i.fab, .small-box .icon > i.glyphicon, .small-box .icon > i.ion {
  88. font-size: 70px;
  89. top: 20px;
  90. }
  91. .small-box:hover {
  92. text-decoration: none;
  93. }
  94. .small-box:hover .icon > i {
  95. font-size: 95px;
  96. }
  97. .small-box:hover .icon > i.fa, .small-box:hover .icon > i.fas, .small-box:hover .icon > i.far, .small-box:hover .icon > i.fab, .small-box:hover .icon > i.glyphicon, .small-box:hover .icon > i.ion {
  98. font-size: 75px;
  99. }
  100. @media (max-width: 767.98px) {
  101. .small-box {
  102. text-align: center;
  103. }
  104. .small-box .icon {
  105. display: none;
  106. }
  107. .small-box p {
  108. font-size: 12px;
  109. }
  110. }
  111. .info-box {
  112. box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
  113. border-radius: 0.25rem;
  114. background: #ffffff;
  115. display: flex;
  116. margin-bottom: 1rem;
  117. min-height: 80px;
  118. padding: .5rem;
  119. position: relative;
  120. }
  121. .info-box .progress {
  122. background-color: rgba(0, 0, 0, 0.125);
  123. height: 2px;
  124. margin: 5px 0;
  125. }
  126. .info-box .progress .progress-bar {
  127. background-color: #ffffff;
  128. }
  129. .info-box .info-box-icon {
  130. border-radius: 0.25rem;
  131. align-items: center;
  132. display: flex;
  133. font-size: 1.875rem;
  134. justify-content: center;
  135. text-align: center;
  136. width: 70px;
  137. }
  138. .info-box .info-box-icon > img {
  139. max-width: 100%;
  140. }
  141. .info-box .info-box-content {
  142. flex: 1;
  143. padding: 5px 10px;
  144. }
  145. .info-box .info-box-number {
  146. display: block;
  147. font-weight: 700;
  148. }
  149. .info-box .progress-description,
  150. .info-box .info-box-text {
  151. display: block;
  152. overflow: hidden;
  153. text-overflow: ellipsis;
  154. white-space: nowrap;
  155. }
  156. .info-box .info-box .bg-primary,
  157. .info-box .info-box .bg-gradient-primary {
  158. color: #ffffff;
  159. }
  160. .info-box .info-box .bg-primary .progress-bar,
  161. .info-box .info-box .bg-gradient-primary .progress-bar {
  162. background-color: #ffffff;
  163. }
  164. .info-box .info-box .bg-secondary,
  165. .info-box .info-box .bg-gradient-secondary {
  166. color: #ffffff;
  167. }
  168. .info-box .info-box .bg-secondary .progress-bar,
  169. .info-box .info-box .bg-gradient-secondary .progress-bar {
  170. background-color: #ffffff;
  171. }
  172. .info-box .info-box .bg-success,
  173. .info-box .info-box .bg-gradient-success {
  174. color: #ffffff;
  175. }
  176. .info-box .info-box .bg-success .progress-bar,
  177. .info-box .info-box .bg-gradient-success .progress-bar {
  178. background-color: #ffffff;
  179. }
  180. .info-box .info-box .bg-info,
  181. .info-box .info-box .bg-gradient-info {
  182. color: #ffffff;
  183. }
  184. .info-box .info-box .bg-info .progress-bar,
  185. .info-box .info-box .bg-gradient-info .progress-bar {
  186. background-color: #ffffff;
  187. }
  188. .info-box .info-box .bg-warning,
  189. .info-box .info-box .bg-gradient-warning {
  190. color: #1F2D3D;
  191. }
  192. .info-box .info-box .bg-warning .progress-bar,
  193. .info-box .info-box .bg-gradient-warning .progress-bar {
  194. background-color: #1F2D3D;
  195. }
  196. .info-box .info-box .bg-danger,
  197. .info-box .info-box .bg-gradient-danger {
  198. color: #ffffff;
  199. }
  200. .info-box .info-box .bg-danger .progress-bar,
  201. .info-box .info-box .bg-gradient-danger .progress-bar {
  202. background-color: #ffffff;
  203. }
  204. .info-box .info-box .bg-light,
  205. .info-box .info-box .bg-gradient-light {
  206. color: #1F2D3D;
  207. }
  208. .info-box .info-box .bg-light .progress-bar,
  209. .info-box .info-box .bg-gradient-light .progress-bar {
  210. background-color: #1F2D3D;
  211. }
  212. .info-box .info-box .bg-dark,
  213. .info-box .info-box .bg-gradient-dark {
  214. color: #ffffff;
  215. }
  216. .info-box .info-box .bg-dark .progress-bar,
  217. .info-box .info-box .bg-gradient-dark .progress-bar {
  218. background-color: #ffffff;
  219. }
  220. .info-box .info-box-more {
  221. display: block;
  222. }
  223. .info-box .progress-description {
  224. margin: 0;
  225. }
  226. @media (min-width: 768px) {
  227. .col-xl-2 .info-box .progress-description,
  228. .col-lg-2 .info-box .progress-description,
  229. .col-md-2 .info-box .progress-description {
  230. display: none;
  231. }
  232. .col-xl-3 .info-box .progress-description,
  233. .col-lg-3 .info-box .progress-description,
  234. .col-md-3 .info-box .progress-description {
  235. display: none;
  236. }
  237. }
  238. @media (min-width: 992px) {
  239. .col-xl-2 .info-box .progress-description,
  240. .col-lg-2 .info-box .progress-description,
  241. .col-md-2 .info-box .progress-description {
  242. font-size: 0.75rem;
  243. display: block;
  244. }
  245. .col-xl-3 .info-box .progress-description,
  246. .col-lg-3 .info-box .progress-description,
  247. .col-md-3 .info-box .progress-description {
  248. font-size: 0.75rem;
  249. display: block;
  250. }
  251. }
  252. @media (min-width: 1200px) {
  253. .col-xl-2 .info-box .progress-description,
  254. .col-lg-2 .info-box .progress-description,
  255. .col-md-2 .info-box .progress-description {
  256. font-size: 1rem;
  257. display: block;
  258. }
  259. .col-xl-3 .info-box .progress-description,
  260. .col-lg-3 .info-box .progress-description,
  261. .col-md-3 .info-box .progress-description {
  262. font-size: 1rem;
  263. display: block;
  264. }
  265. }
  266. .timeline {
  267. margin: 0 0 45px;
  268. padding: 0;
  269. position: relative;
  270. }
  271. .timeline::before {
  272. border-radius: 0.25rem;
  273. background: #dee2e6;
  274. bottom: 0;
  275. content: '';
  276. left: 31px;
  277. margin: 0;
  278. position: absolute;
  279. top: 0;
  280. width: 4px;
  281. }
  282. .timeline > div {
  283. margin-bottom: 15px;
  284. margin-right: 10px;
  285. position: relative;
  286. }
  287. .timeline > div::before, .timeline > div::after {
  288. content: "";
  289. display: table;
  290. }
  291. .timeline > div > .timeline-item {
  292. box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
  293. border-radius: 0.25rem;
  294. background: #ffffff;
  295. color: #495057;
  296. margin-left: 60px;
  297. margin-right: 15px;
  298. margin-top: 0;
  299. padding: 0;
  300. position: relative;
  301. }
  302. .timeline > div > .timeline-item > .time {
  303. color: #999;
  304. float: right;
  305. font-size: 12px;
  306. padding: 10px;
  307. }
  308. .timeline > div > .timeline-item > .timeline-header {
  309. border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  310. color: #495057;
  311. font-size: 16px;
  312. line-height: 1.1;
  313. margin: 0;
  314. padding: 10px;
  315. }
  316. .timeline > div > .timeline-item > .timeline-header > a {
  317. font-weight: 600;
  318. }
  319. .timeline > div > .timeline-item > .timeline-body,
  320. .timeline > div > .timeline-item > .timeline-footer {
  321. padding: 10px;
  322. }
  323. .timeline > div > .timeline-item > .timeline-body > img {
  324. margin: 10px;
  325. }
  326. .timeline > div > .timeline-item > .timeline-body > dl, .timeline > div > .timeline-item > .timeline-body ol, .timeline > div > .timeline-item > .timeline-body ul {
  327. margin: 0;
  328. }
  329. .timeline > div > .timeline-item > .timeline-footer > a {
  330. color: #ffffff;
  331. }
  332. .timeline > div > .fa,
  333. .timeline > div > .fas,
  334. .timeline > div > .far,
  335. .timeline > div > .fab,
  336. .timeline > div > .glyphicon,
  337. .timeline > div > .ion {
  338. background: #adb5bd;
  339. border-radius: 50%;
  340. font-size: 15px;
  341. height: 30px;
  342. left: 18px;
  343. line-height: 30px;
  344. position: absolute;
  345. text-align: center;
  346. top: 0;
  347. width: 30px;
  348. }
  349. .timeline > .time-label > span {
  350. border-radius: 4px;
  351. background-color: #ffffff;
  352. display: inline-block;
  353. font-weight: 600;
  354. padding: 5px;
  355. }
  356. .timeline-inverse > div > .timeline-item {
  357. box-shadow: none;
  358. background: #f8f9fa;
  359. border: 1px solid #dee2e6;
  360. }
  361. .timeline-inverse > div > .timeline-item > .timeline-header {
  362. border-bottom-color: #dee2e6;
  363. }
  364. .products-list {
  365. list-style: none;
  366. margin: 0;
  367. padding: 0;
  368. }
  369. .products-list > .item {
  370. border-radius: 0.25rem;
  371. background: #ffffff;
  372. padding: 10px 0;
  373. }
  374. .products-list > .item::after {
  375. display: block;
  376. clear: both;
  377. content: "";
  378. }
  379. .products-list .product-img {
  380. float: left;
  381. }
  382. .products-list .product-img img {
  383. height: 50px;
  384. width: 50px;
  385. }
  386. .products-list .product-info {
  387. margin-left: 60px;
  388. }
  389. .products-list .product-title {
  390. font-weight: 600;
  391. }
  392. .products-list .product-description {
  393. color: #6c757d;
  394. display: block;
  395. overflow: hidden;
  396. text-overflow: ellipsis;
  397. white-space: nowrap;
  398. }
  399. .product-list-in-card > .item {
  400. border-radius: 0;
  401. border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  402. }
  403. .product-list-in-card > .item:last-of-type {
  404. border-bottom-width: 0;
  405. }
  406. .direct-chat .card-body {
  407. overflow-x: hidden;
  408. padding: 0;
  409. position: relative;
  410. }
  411. .direct-chat.chat-pane-open .direct-chat-contacts {
  412. transform: translate(0, 0);
  413. }
  414. .direct-chat.timestamp-light .direct-chat-timestamp {
  415. color: #30465f;
  416. }
  417. .direct-chat.timestamp-dark .direct-chat-timestamp {
  418. color: #cccccc;
  419. }
  420. .direct-chat-messages {
  421. transform: translate(0, 0);
  422. height: 250px;
  423. overflow: auto;
  424. padding: 10px;
  425. }
  426. .direct-chat-msg,
  427. .direct-chat-text {
  428. display: block;
  429. }
  430. .direct-chat-msg {
  431. margin-bottom: 10px;
  432. }
  433. .direct-chat-msg::after {
  434. display: block;
  435. clear: both;
  436. content: "";
  437. }
  438. .direct-chat-messages,
  439. .direct-chat-contacts {
  440. transition: transform .5s ease-in-out;
  441. }
  442. .direct-chat-text {
  443. border-radius: 0.3rem;
  444. background: #d2d6de;
  445. border: 1px solid #d2d6de;
  446. color: #444;
  447. margin: 5px 0 0 50px;
  448. padding: 5px 10px;
  449. position: relative;
  450. }
  451. .direct-chat-text::after, .direct-chat-text::before {
  452. border: solid transparent;
  453. border-right-color: #d2d6de;
  454. content: ' ';
  455. height: 0;
  456. pointer-events: none;
  457. position: absolute;
  458. right: 100%;
  459. top: 15px;
  460. width: 0;
  461. }
  462. .direct-chat-text::after {
  463. border-width: 5px;
  464. margin-top: -5px;
  465. }
  466. .direct-chat-text::before {
  467. border-width: 6px;
  468. margin-top: -6px;
  469. }
  470. .right .direct-chat-text {
  471. margin-left: 0;
  472. margin-right: 50px;
  473. }
  474. .right .direct-chat-text::after, .right .direct-chat-text::before {
  475. border-left-color: #d2d6de;
  476. border-right-color: transparent;
  477. left: 100%;
  478. right: auto;
  479. }
  480. .direct-chat-img {
  481. border-radius: 50%;
  482. float: left;
  483. height: 40px;
  484. width: 40px;
  485. }
  486. .right .direct-chat-img {
  487. float: right;
  488. }
  489. .direct-chat-infos {
  490. display: block;
  491. font-size: 0.875rem;
  492. margin-bottom: 2px;
  493. }
  494. .direct-chat-name {
  495. font-weight: 600;
  496. }
  497. .direct-chat-timestamp {
  498. color: #697582;
  499. }
  500. .direct-chat-contacts-open .direct-chat-contacts {
  501. transform: translate(0, 0);
  502. }
  503. .direct-chat-contacts {
  504. transform: translate(101%, 0);
  505. background: #343a40;
  506. bottom: 0;
  507. color: #ffffff;
  508. height: 250px;
  509. overflow: auto;
  510. position: absolute;
  511. top: 0;
  512. width: 100%;
  513. }
  514. .direct-chat-contacts-light {
  515. background: #f8f9fa;
  516. }
  517. .direct-chat-contacts-light .contacts-list-name {
  518. color: #495057;
  519. }
  520. .direct-chat-contacts-light .contacts-list-date {
  521. color: #6c757d;
  522. }
  523. .direct-chat-contacts-light .contacts-list-msg {
  524. color: #545b62;
  525. }
  526. .contacts-list {
  527. padding-left: 0;
  528. list-style: none;
  529. }
  530. .contacts-list > li {
  531. border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  532. margin: 0;
  533. padding: 10px;
  534. }
  535. .contacts-list > li::after {
  536. display: block;
  537. clear: both;
  538. content: "";
  539. }
  540. .contacts-list > li:last-of-type {
  541. border-bottom: 0;
  542. }
  543. .contacts-list-img {
  544. border-radius: 50%;
  545. float: left;
  546. width: 40px;
  547. }
  548. .contacts-list-info {
  549. color: #ffffff;
  550. margin-left: 45px;
  551. }
  552. .contacts-list-name,
  553. .contacts-list-status {
  554. display: block;
  555. }
  556. .contacts-list-name {
  557. font-weight: 600;
  558. }
  559. .contacts-list-status {
  560. font-size: 0.875rem;
  561. }
  562. .contacts-list-date {
  563. color: #ced4da;
  564. font-weight: normal;
  565. }
  566. .contacts-list-msg {
  567. color: #b1bbc4;
  568. }
  569. .direct-chat-primary .right > .direct-chat-text {
  570. background: #007bff;
  571. border-color: #007bff;
  572. color: #ffffff;
  573. }
  574. .direct-chat-primary .right > .direct-chat-text::after, .direct-chat-primary .right > .direct-chat-text::before {
  575. border-left-color: #007bff;
  576. }
  577. .direct-chat-secondary .right > .direct-chat-text {
  578. background: #6c757d;
  579. border-color: #6c757d;
  580. color: #ffffff;
  581. }
  582. .direct-chat-secondary .right > .direct-chat-text::after, .direct-chat-secondary .right > .direct-chat-text::before {
  583. border-left-color: #6c757d;
  584. }
  585. .direct-chat-success .right > .direct-chat-text {
  586. background: #28a745;
  587. border-color: #28a745;
  588. color: #ffffff;
  589. }
  590. .direct-chat-success .right > .direct-chat-text::after, .direct-chat-success .right > .direct-chat-text::before {
  591. border-left-color: #28a745;
  592. }
  593. .direct-chat-info .right > .direct-chat-text {
  594. background: #17a2b8;
  595. border-color: #17a2b8;
  596. color: #ffffff;
  597. }
  598. .direct-chat-info .right > .direct-chat-text::after, .direct-chat-info .right > .direct-chat-text::before {
  599. border-left-color: #17a2b8;
  600. }
  601. .direct-chat-warning .right > .direct-chat-text {
  602. background: #ffc107;
  603. border-color: #ffc107;
  604. color: #1F2D3D;
  605. }
  606. .direct-chat-warning .right > .direct-chat-text::after, .direct-chat-warning .right > .direct-chat-text::before {
  607. border-left-color: #ffc107;
  608. }
  609. .direct-chat-danger .right > .direct-chat-text {
  610. background: #dc3545;
  611. border-color: #dc3545;
  612. color: #ffffff;
  613. }
  614. .direct-chat-danger .right > .direct-chat-text::after, .direct-chat-danger .right > .direct-chat-text::before {
  615. border-left-color: #dc3545;
  616. }
  617. .direct-chat-light .right > .direct-chat-text {
  618. background: #f8f9fa;
  619. border-color: #f8f9fa;
  620. color: #1F2D3D;
  621. }
  622. .direct-chat-light .right > .direct-chat-text::after, .direct-chat-light .right > .direct-chat-text::before {
  623. border-left-color: #f8f9fa;
  624. }
  625. .direct-chat-dark .right > .direct-chat-text {
  626. background: #343a40;
  627. border-color: #343a40;
  628. color: #ffffff;
  629. }
  630. .direct-chat-dark .right > .direct-chat-text::after, .direct-chat-dark .right > .direct-chat-text::before {
  631. border-left-color: #343a40;
  632. }
  633. .direct-chat-lightblue .right > .direct-chat-text {
  634. background: #3c8dbc;
  635. border-color: #3c8dbc;
  636. color: #ffffff;
  637. }
  638. .direct-chat-lightblue .right > .direct-chat-text::after, .direct-chat-lightblue .right > .direct-chat-text::before {
  639. border-left-color: #3c8dbc;
  640. }
  641. .direct-chat-navy .right > .direct-chat-text {
  642. background: #001f3f;
  643. border-color: #001f3f;
  644. color: #ffffff;
  645. }
  646. .direct-chat-navy .right > .direct-chat-text::after, .direct-chat-navy .right > .direct-chat-text::before {
  647. border-left-color: #001f3f;
  648. }
  649. .direct-chat-olive .right > .direct-chat-text {
  650. background: #3d9970;
  651. border-color: #3d9970;
  652. color: #ffffff;
  653. }
  654. .direct-chat-olive .right > .direct-chat-text::after, .direct-chat-olive .right > .direct-chat-text::before {
  655. border-left-color: #3d9970;
  656. }
  657. .direct-chat-lime .right > .direct-chat-text {
  658. background: #01ff70;
  659. border-color: #01ff70;
  660. color: #1F2D3D;
  661. }
  662. .direct-chat-lime .right > .direct-chat-text::after, .direct-chat-lime .right > .direct-chat-text::before {
  663. border-left-color: #01ff70;
  664. }
  665. .direct-chat-fuchsia .right > .direct-chat-text {
  666. background: #f012be;
  667. border-color: #f012be;
  668. color: #ffffff;
  669. }
  670. .direct-chat-fuchsia .right > .direct-chat-text::after, .direct-chat-fuchsia .right > .direct-chat-text::before {
  671. border-left-color: #f012be;
  672. }
  673. .direct-chat-maroon .right > .direct-chat-text {
  674. background: #d81b60;
  675. border-color: #d81b60;
  676. color: #ffffff;
  677. }
  678. .direct-chat-maroon .right > .direct-chat-text::after, .direct-chat-maroon .right > .direct-chat-text::before {
  679. border-left-color: #d81b60;
  680. }
  681. .direct-chat-blue .right > .direct-chat-text {
  682. background: #007bff;
  683. border-color: #007bff;
  684. color: #ffffff;
  685. }
  686. .direct-chat-blue .right > .direct-chat-text::after, .direct-chat-blue .right > .direct-chat-text::before {
  687. border-left-color: #007bff;
  688. }
  689. .direct-chat-indigo .right > .direct-chat-text {
  690. background: #6610f2;
  691. border-color: #6610f2;
  692. color: #ffffff;
  693. }
  694. .direct-chat-indigo .right > .direct-chat-text::after, .direct-chat-indigo .right > .direct-chat-text::before {
  695. border-left-color: #6610f2;
  696. }
  697. .direct-chat-purple .right > .direct-chat-text {
  698. background: #6f42c1;
  699. border-color: #6f42c1;
  700. color: #ffffff;
  701. }
  702. .direct-chat-purple .right > .direct-chat-text::after, .direct-chat-purple .right > .direct-chat-text::before {
  703. border-left-color: #6f42c1;
  704. }
  705. .direct-chat-pink .right > .direct-chat-text {
  706. background: #e83e8c;
  707. border-color: #e83e8c;
  708. color: #ffffff;
  709. }
  710. .direct-chat-pink .right > .direct-chat-text::after, .direct-chat-pink .right > .direct-chat-text::before {
  711. border-left-color: #e83e8c;
  712. }
  713. .direct-chat-red .right > .direct-chat-text {
  714. background: #dc3545;
  715. border-color: #dc3545;
  716. color: #ffffff;
  717. }
  718. .direct-chat-red .right > .direct-chat-text::after, .direct-chat-red .right > .direct-chat-text::before {
  719. border-left-color: #dc3545;
  720. }
  721. .direct-chat-orange .right > .direct-chat-text {
  722. background: #fd7e14;
  723. border-color: #fd7e14;
  724. color: #1F2D3D;
  725. }
  726. .direct-chat-orange .right > .direct-chat-text::after, .direct-chat-orange .right > .direct-chat-text::before {
  727. border-left-color: #fd7e14;
  728. }
  729. .direct-chat-yellow .right > .direct-chat-text {
  730. background: #ffc107;
  731. border-color: #ffc107;
  732. color: #1F2D3D;
  733. }
  734. .direct-chat-yellow .right > .direct-chat-text::after, .direct-chat-yellow .right > .direct-chat-text::before {
  735. border-left-color: #ffc107;
  736. }
  737. .direct-chat-green .right > .direct-chat-text {
  738. background: #28a745;
  739. border-color: #28a745;
  740. color: #ffffff;
  741. }
  742. .direct-chat-green .right > .direct-chat-text::after, .direct-chat-green .right > .direct-chat-text::before {
  743. border-left-color: #28a745;
  744. }
  745. .direct-chat-teal .right > .direct-chat-text {
  746. background: #20c997;
  747. border-color: #20c997;
  748. color: #ffffff;
  749. }
  750. .direct-chat-teal .right > .direct-chat-text::after, .direct-chat-teal .right > .direct-chat-text::before {
  751. border-left-color: #20c997;
  752. }
  753. .direct-chat-cyan .right > .direct-chat-text {
  754. background: #17a2b8;
  755. border-color: #17a2b8;
  756. color: #ffffff;
  757. }
  758. .direct-chat-cyan .right > .direct-chat-text::after, .direct-chat-cyan .right > .direct-chat-text::before {
  759. border-left-color: #17a2b8;
  760. }
  761. .direct-chat-white .right > .direct-chat-text {
  762. background: #ffffff;
  763. border-color: #ffffff;
  764. color: #1F2D3D;
  765. }
  766. .direct-chat-white .right > .direct-chat-text::after, .direct-chat-white .right > .direct-chat-text::before {
  767. border-left-color: #ffffff;
  768. }
  769. .direct-chat-gray .right > .direct-chat-text {
  770. background: #6c757d;
  771. border-color: #6c757d;
  772. color: #ffffff;
  773. }
  774. .direct-chat-gray .right > .direct-chat-text::after, .direct-chat-gray .right > .direct-chat-text::before {
  775. border-left-color: #6c757d;
  776. }
  777. .direct-chat-gray-dark .right > .direct-chat-text {
  778. background: #343a40;
  779. border-color: #343a40;
  780. color: #ffffff;
  781. }
  782. .direct-chat-gray-dark .right > .direct-chat-text::after, .direct-chat-gray-dark .right > .direct-chat-text::before {
  783. border-left-color: #343a40;
  784. }
  785. .users-list {
  786. padding-left: 0;
  787. list-style: none;
  788. }
  789. .users-list > li {
  790. float: left;
  791. padding: 10px;
  792. text-align: center;
  793. width: 25%;
  794. }
  795. .users-list > li img {
  796. border-radius: 50%;
  797. height: auto;
  798. max-width: 100%;
  799. }
  800. .users-list > li > a:hover,
  801. .users-list > li > a:hover .users-list-name {
  802. color: #999;
  803. }
  804. .users-list-name,
  805. .users-list-date {
  806. display: block;
  807. }
  808. .users-list-name {
  809. color: #495057;
  810. font-size: 0.875rem;
  811. overflow: hidden;
  812. text-overflow: ellipsis;
  813. white-space: nowrap;
  814. }
  815. .users-list-date {
  816. color: #748290;
  817. font-size: 12px;
  818. }
  819. .card-widget {
  820. border: 0;
  821. position: relative;
  822. }
  823. .widget-user .widget-user-header {
  824. border-top-left-radius: 0.25rem;
  825. border-top-right-radius: 0.25rem;
  826. height: 135px;
  827. padding: 1rem;
  828. text-align: center;
  829. }
  830. .widget-user .widget-user-username {
  831. font-size: 25px;
  832. font-weight: 300;
  833. margin-bottom: 0;
  834. margin-top: 0;
  835. text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  836. }
  837. .widget-user .widget-user-desc {
  838. margin-top: 0;
  839. }
  840. .widget-user .widget-user-image {
  841. left: 50%;
  842. margin-left: -45px;
  843. position: absolute;
  844. top: 80px;
  845. }
  846. .widget-user .widget-user-image > img {
  847. border: 3px solid #ffffff;
  848. height: auto;
  849. width: 90px;
  850. }
  851. .widget-user .card-footer {
  852. padding-top: 50px;
  853. }
  854. .widget-user-2 .widget-user-header {
  855. border-top-left-radius: 0.25rem;
  856. border-top-right-radius: 0.25rem;
  857. padding: 1rem;
  858. }
  859. .widget-user-2 .widget-user-username {
  860. font-size: 25px;
  861. font-weight: 300;
  862. margin-bottom: 5px;
  863. margin-top: 5px;
  864. }
  865. .widget-user-2 .widget-user-desc {
  866. margin-top: 0;
  867. }
  868. .widget-user-2 .widget-user-username,
  869. .widget-user-2 .widget-user-desc {
  870. margin-left: 75px;
  871. }
  872. .widget-user-2 .widget-user-image > img {
  873. float: left;
  874. height: auto;
  875. width: 65px;
  876. }
  877. /*# sourceMappingURL=adminlte.extra-components.css.map */