adminlte.extra-components.css 21 KB

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