templatemo-style

SUBMITTED BY: saiwara

DATE: March 15, 2019, 3:25 a.m.

FORMAT: Text only

SIZE: 13.0 kB

Raw Download

HITS: 589

Report
  1. /*
  3. Product Admin CSS Template
  5. https://templatemo.com/tm-524-product-admin
  7. */
  9. html {
  10. font-size: 16px;
  11. overflow-x: hidden;
  12. }
  13. body {
  14. font-family: Roboto, Helvetica, Arial, sans-serif;
  15. background-color: #4e657a;
  16. overflow-x: hidden;
  17. }
  18. a {
  19. transition: all 0.3s ease;
  20. }
  21. a:focus,
  22. a:hover {
  23. text-decoration: none;
  24. }
  25. button:focus {
  26. outline: 0;
  27. }
  28. .navbar-brand {
  29. display: flex;
  30. align-items: center;
  31. }
  32. .tm-site-icon {
  33. color: #656565;
  34. }
  35. .tm-site-title {
  36. display: inline-block;
  37. text-transform: uppercase;
  38. font-size: 1.3rem;
  39. font-weight: 700;
  40. color: #fff;
  41. }
  42. .navbar {
  43. height: 100px;
  44. background-color: #567086;
  45. padding: 0;
  46. }
  47. .navbar .container {
  48. position: relative;
  49. }
  50. .tm-logout-icon {
  51. font-size: 1.5em;
  52. }
  53. .tm-mt-big {
  54. margin-top: 57px;
  55. }
  56. .tm-mb-big {
  57. margin-bottom: 60px;
  58. }
  59. .tm-mt-small {
  60. margin-top: 20px;
  61. }
  62. .tm-block-col {
  63. margin-bottom: 30px;
  64. }
  65. .tm-block {
  66. padding: 40px;
  67. -webkit-box-shadow: 1px 1px 5px 0 #455c71;
  68. -moz-box-shadow: 1px 1px 5px 0 #455c71;
  69. box-shadow: 1px 1px 5px 0 #455c71;
  70. min-height: 350px;
  71. height: 100%;
  72. max-height: 450px;
  73. }
  74. .tm-block-avatar,
  75. .tm-block-settings {
  76. max-height: none;
  77. }
  78. .tm-block-avatar {
  79. height: auto;
  80. }
  81. .tm-block-h-auto {
  82. min-height: 1px;
  83. max-height: none;
  84. height: auto;
  85. }
  86. .tm-block-scroll {
  87. overflow-y: scroll;
  88. }
  89. .tm-block-overflow {
  90. overflow: hidden;
  91. }
  92. .tm-block-title {
  93. font-size: 1.1rem;
  94. font-weight: 700;
  95. color: #fff;
  96. margin-bottom: 30px;
  97. }
  98. .nav-link {
  99. color: #fff;
  100. height: 100%;
  101. display: flex;
  102. align-items: center;
  103. justify-content: center;
  104. flex-direction: column;
  105. font-size: 90%;
  106. }
  107. .nav-link > i {
  108. margin-bottom: 10px;
  109. margin-right: 0;
  110. font-size: 1.5rem;
  111. }
  112. .dropdown-item,
  113. .nav-link {
  114. padding: 15px 20px;
  115. }
  116. .dropdown-menu {
  117. font-size: 90%;
  118. color: #fff;
  119. background-color: #567086;
  120. border-radius: 0;
  121. padding-top: 10px;
  122. padding-bottom: 10px;
  123. min-width: auto;
  124. }
  125. .dropdown-item {
  126. color: #fff;
  127. padding: 15px 30px;
  128. }
  129. .navbar-nav .active > .nav-link,
  130. .navbar-nav .nav-link.active {
  131. background-color: #f5a623;
  132. color: #fff;
  133. }
  134. .navbar-nav .nav-link.active i {
  135. color: #fff;
  136. }
  137. .dropdown-item:focus,
  138. .dropdown-item:hover {
  139. background-color: #567086;
  140. }
  141. .navbar-nav a:hover,
  142. .navbar-nav a:hover i {
  143. color: #f5a623;
  144. }
  145. .nav-item {
  146. text-align: center;
  147. }
  148. .nav-item:last-child {
  149. margin-right: 0;
  150. }
  151. .dropdown-toggle::after {
  152. display: none;
  153. }
  154. .dropdown-menu {
  155. margin-top: 0;
  156. border: 0;
  157. }
  158. .tm-content-row {
  159. justify-content: space-between;
  160. margin-left: -20px;
  161. margin-right: -20px;
  162. }
  163. .tm-col {
  164. padding-left: 20px;
  165. padding-right: 20px;
  166. margin-bottom: 50px;
  167. }
  168. .tm-col-big {
  169. width: 39%;
  170. }
  171. .tm-col-small {
  172. width: 21.95%;
  173. }
  174. .tm-gray-circle {
  175. width: 80px;
  176. height: 80px;
  177. background-color: #aaa;
  178. border-radius: 50%;
  179. margin-right: 15px;
  180. }
  181. .tm-notification-items {
  182. overflow-y: scroll;
  183. height: 90%;
  184. }
  185. .tm-notification-item {
  186. padding: 15px;
  187. background-color: #4e657a;
  188. color: #fff;
  189. font-size: 95%;
  190. margin-bottom: 15px;
  191. }
  192. .tm-notification-item:last-child {
  193. margin-bottom: 0;
  194. }
  195. .tm-notification-link {
  196. color: #f5a623;
  197. }
  198. .tm-text-color-secondary {
  199. color: #bdcbd8;
  200. }
  201. .tm-small {
  202. font-size: 90%;
  203. }
  204. .table {
  205. background-color: #50697f;
  206. color: #fff;
  207. font-size: 85%;
  208. margin-bottom: 0;
  209. }
  210. thead {
  211. background-color: #486177;
  212. color: #fff;
  213. }
  214. .table thead th {
  215. border-bottom: 0;
  216. }
  217. .tm-status-circle {
  218. display: inline-block;
  219. margin-right: 5px;
  220. vertical-align: middle;
  221. width: 5px;
  222. height: 5px;
  223. border-radius: 50%;
  224. margin-top: -3px;
  225. }
  226. .moving {
  227. background-color: #9be64d;
  228. box-shadow: 0 0 8px #9be64d, inset 0 0 8px #9be64d;
  229. }
  230. .pending {
  231. background-color: #efc54b;
  232. box-shadow: 0 0 8px #efc54b, inset 0 0 8px #efc54b;
  233. }
  234. .cancelled {
  235. background-color: #da534f;
  236. box-shadow: 0 0 8px #da534f, inset 0 0 8px #da534f;
  237. }
  238. .tm-avatar {
  239. width: 345px;
  240. }
  241. .tm-avatar-container {
  242. position: relative;
  243. cursor: pointer;
  244. display: flex;
  245. align-items: center;
  246. flex-direction: column;
  247. }
  248. .tm-avatar-delete-link {
  249. position: absolute;
  250. left: 50%;
  251. top: 50%;
  252. margin-left: -25px;
  253. margin-top: -25px;
  254. z-index: 1000;
  255. padding: 14px;
  256. border-radius: 50%;
  257. background-color: rgba(57, 78, 100, 0.7);
  258. display: inline-block;
  259. width: 50px;
  260. height: 50px;
  261. text-align: center;
  262. display: none;
  263. transition: all 0.2s ease;
  264. }
  265. .tm-avatar-container:hover .tm-avatar-delete-link {
  266. display: block;
  267. }
  268. .tm-col-avatar {
  269. max-width: 425px;
  270. width: 37%;
  271. padding-left: 15px;
  272. padding-right: 15px;
  273. }
  274. .tm-col-account-settings {
  275. max-width: 822px;
  276. width: 63%;
  277. padding-left: 15px;
  278. padding-right: 15px;
  279. }
  280. .form-control {
  281. background-color: #54657d;
  282. color: #fff;
  283. border: 0;
  284. }
  285. .form-control:focus {
  286. background-color: #60738e;
  287. color: #fff;
  288. border-color: transparent;
  289. box-shadow: 0 0 0 0.1rem rgb(180, 206, 233, 0.5);
  290. }
  291. .form-group label {
  292. color: #fff;
  293. margin-bottom: 10px;
  294. }
  295. .tm-hide-sm {
  296. display: block;
  297. }
  298. .tm-list-group {
  299. counter-reset: myOrderedListItemsCounter;
  300. padding-left: 0;
  301. }
  302. .tm-list-group > li {
  303. list-style-type: none;
  304. position: relative;
  305. cursor: pointer;
  306. transition: all 0.3s ease;
  307. padding: 8px;
  308. }
  309. .tm-list-group > li:hover {
  310. color: #0266c4;
  311. }
  312. .tm-list-group > li:before {
  313. counter-increment: myOrderedListItemsCounter;
  314. content: counter(myOrderedListItemsCounter) ".";
  315. margin-right: 0.5em;
  316. }
  317. .tm-list {
  318. padding-left: 30px;
  319. }
  320. .tm-list > li {
  321. margin-bottom: 20px;
  322. }
  323. .form-control {
  324. padding: 19px 18px;
  325. border-radius: 0;
  326. height: 50px;
  327. }
  328. .form-group {
  329. margin-bottom: 15px;
  330. }
  331. .btn {
  332. border-radius: 0;
  333. padding: 13px 28px;
  334. transition: all 0.2s ease;
  335. max-width: 100%;
  336. }
  337. .btn-small {
  338. padding: 10px 24px;
  339. }
  340. .btn-primary {
  341. color: #fff;
  342. background-color: #f5a623;
  343. border: 2px solid #f5a623;
  344. font-size: 90%;
  345. font-weight: 600;
  346. }
  347. .btn-primary:active,
  348. .btn-primary:hover {
  349. color: #f5a623;
  350. background-color: transparent;
  351. border: 2px solid #f5a623;
  352. }
  353. .custom-file-input {
  354. cursor: pointer;
  355. }
  356. .custom-file-label {
  357. border-radius: 0;
  358. }
  359. .table td,
  360. .table th {
  361. border-top: 1px solid #415a70;
  362. padding: 15px 25px;
  363. vertical-align: middle;
  364. }
  365. .tm-table-small td,
  366. .tm-table-small th {
  367. padding-left: 12px;
  368. padding-right: 12px;
  369. }
  370. .table-hover tbody tr {
  371. transition: all 0.2s ease;
  372. }
  373. .table-hover tbody tr:hover {
  374. color: #a0c0de;
  375. }
  376. .tm-bg-primary-dark {
  377. background-color: #435c70;
  378. }
  379. .tm-bg-gray {
  380. background-color: rgba(0, 0, 0, 0.05);
  381. }
  382. .tm-table-mt {
  383. margin-top: 66px;
  384. }
  385. .page-item:first-child .page-link {
  386. border-top-left-radius: 0;
  387. border-bottom-left-radius: 0;
  388. }
  389. .page-item:last-child .page-link {
  390. border-top-right-radius: 0;
  391. border-bottom-right-radius: 0;
  392. }
  393. .page-link {
  394. padding: 12px 18px;
  395. }
  396. .page-link,
  397. .page-link:hover {
  398. color: #000;
  399. }
  400. .page-item {
  401. margin-right: 18px;
  402. }
  403. .page-item:last-child {
  404. margin-right: 0;
  405. }
  406. .page-item.active .page-link {
  407. background-color: #e9ecef;
  408. border-color: #dee2e6;
  409. color: #000;
  410. }
  411. input[type="checkbox"] {
  412. cursor: pointer;
  413. -webkit-appearance: none;
  414. appearance: none;
  415. background-color: #394e64;
  416. background-position: center;
  417. border-radius: 50%;
  418. box-sizing: border-box;
  419. position: relative;
  420. box-sizing: content-box;
  421. width: 24px;
  422. height: 24px;
  423. transition: all 0.1s linear;
  424. }
  425. input[type="checkbox"]:checked {
  426. background: url(../img/check-mark.png) #394e64 center no-repeat;
  427. }
  428. input[type="checkbox"]:focus {
  429. outline: 0 none;
  430. box-shadow: none;
  431. }
  432. .tm-block-products {
  433. min-height: 725px;
  434. }
  435. .tm-block-product-categories {
  436. min-height: 650px;
  437. }
  438. .tm-product-table-container {
  439. max-height: 465px;
  440. margin-bottom: 15px;
  441. overflow-y: scroll;
  442. }
  443. .tm-product-table tr {
  444. font-weight: 600;
  445. }
  446. .tm-product-name {
  447. font-size: 0.95rem;
  448. font-weight: 600;
  449. }
  450. .tm-product-delete-icon {
  451. font-size: 1.1rem;
  452. color: #fff;
  453. }
  454. .tm-product-delete-link {
  455. padding: 10px;
  456. border-radius: 50%;
  457. background-color: #394e64;
  458. display: inline-block;
  459. width: 40px;
  460. height: 40px;
  461. text-align: center;
  462. }
  463. .tm-product-delete-link:hover .tm-product-delete-icon {
  464. color: #6d8ca6;
  465. }
  466. .custom-select {
  467. width: 100%;
  468. border: none;
  469. color: #acc6de;
  470. height: 50px;
  471. -webkit-appearance: none;
  472. -moz-appearance: none;
  473. -ms-appearance: none;
  474. -o-appearance: none;
  475. appearance: none;
  476. -webkit-border-radius: 0;
  477. -moz-border-radius: 0;
  478. -ms-border-radius: 0;
  479. -o-border-radius: 0;
  480. border-radius: 0;
  481. padding: 15px;
  482. background: url(../img/arrow-down.png) 98% no-repeat #50657b;
  483. }
  484. .custom-select:focus {
  485. outline: 0;
  486. }
  487. .tm-trash-icon {
  488. color: #6e6c6c;
  489. cursor: pointer;
  490. }
  491. .tm-trash-icon:hover {
  492. color: #9f1321;
  493. }
  494. .tm-footer {
  495. background-color: #567086;
  496. padding-top: 30px;
  497. padding-bottom: 30px;
  498. -webkit-box-shadow: 0 -3px 5px 0 rgba(69, 92, 113, 0.59);
  499. -moz-box-shadow: 0 -3px 5px 0 rgba(69, 92, 113, 0.59);
  500. box-shadow: 0 -3px 5px 0 rgba(69, 92, 113, 0.59);
  501. }
  502. .custom-select {
  503. height: 50px;
  504. border-radius: 0;
  505. }
  506. .tm-product-img-dummy {
  507. max-width: 100%;
  508. height: 240px;
  509. display: flex;
  510. align-items: center;
  511. justify-content: center;
  512. color: #fff;
  513. background: #aaa;
  514. }
  515. .tm-product-img-edit {
  516. max-width: 100%;
  517. position: relative;
  518. }
  519. .tm-product-img-edit i {
  520. display: none;
  521. position: absolute;
  522. }
  523. .tm-product-img-edit:hover i {
  524. display: block;
  525. }
  526. .tm-upload-icon {
  527. background: #455c71;
  528. width: 55px;
  529. height: 55px;
  530. border-radius: 50%;
  531. text-align: center;
  532. padding-top: 15px;
  533. font-size: 22px;
  534. }
  535. .tm-login-col {
  536. max-width: 470px;
  537. }
  538. .navbar-toggler {
  539. border-color: #708da8;
  540. box-shadow: rgba(255, 255, 255, 0.1) 0 1px 1px 2px;
  541. border-radius: 0;
  542. padding: 10px 15px;
  543. transition: all 0.2s ease;
  544. }
  545. .navbar-toggler:hover {
  546. border-color: #f5a623;
  547. color: #f5a623;
  548. }
  549. .tm-nav-icon {
  550. color: #fff;
  551. }
  552. .navbar-toggler:hover .tm-nav-icon {
  553. color: #f5a623;
  554. }
  555. ::-webkit-scrollbar {
  556. width: 8px;
  557. height: 8px;
  558. }
  559. ::-webkit-scrollbar-track {
  560. background: #394f62;
  561. }
  562. ::-webkit-scrollbar-thumb {
  563. background: #6d8da6;
  564. }
  565. ::-webkit-scrollbar-thumb:hover {
  566. background: #8ab5d6;
  567. }
  569. .tm-footer-link {
  570. color: white;
  571. }
  573. .tm-footer-link:hover,
  574. .tm-footer-link:focus {
  575. color: #aacbea;
  576. }
  578. @media (min-width: 1200px) {
  579. .navbar-expand-xl .navbar-nav .nav-link {
  580. padding-left: 28px;
  581. padding-right: 28px;
  582. }
  583. .navbar-collapse {
  584. height: 100%;
  585. }
  586. }
  587. @media (min-width: 992px) {
  588. .navbar-expand-lg .navbar-nav .nav-link {
  589. padding: 15px 20px;
  590. }
  591. }
  592. @media (max-width: 1275px) and (min-width: 1200px) {
  593. .nav-item {
  594. margin-right: 15px;
  595. }
  596. }
  597. @media (max-width: 1350px) {
  598. .nav-item {
  599. margin-right: 1px;
  600. }
  601. }
  602. @media (max-width: 1199px) {
  603. .tm-col-big,
  604. .tm-col-small {
  605. width: 49.65%;
  606. }
  607. .navbar-collapse {
  608. padding: 0;
  609. box-shadow: rgba(255, 255, 255, 0.1) 0 1px 1px 1px;
  610. position: absolute;
  611. top: 72px;
  612. right: 20px;
  613. width: 200px;
  614. z-index: 1000;
  615. }
  616. .dropdown-menu {
  617. text-align: center;
  618. }
  619. .nav-link {
  620. color: #fff;
  621. background-color: #567086;
  622. padding: 15px;
  623. flex-direction: row;
  624. }
  625. .nav-link > i {
  626. font-size: 1rem;
  627. margin-right: 10px;
  628. margin-bottom: 0;
  629. }
  630. .nav-item {
  631. margin-right: 0;
  632. }
  633. .tm-block-taller {
  634. max-height: 520px;
  635. }
  636. }
  637. @media (max-width: 1199.98px) {
  638. .navbar-expand-xl > .container,
  639. .navbar-expand-xl > .container-fluid {
  640. padding-left: 15px;
  641. padding-right: 15px;
  642. }
  643. .navbar-collapse {
  644. right: 15px;
  645. }
  646. }
  647. @media (max-width: 991px) {
  648. .tm-col-big,
  649. .tm-col-small {
  650. width: 100%;
  651. min-height: 383px;
  652. height: auto;
  653. }
  654. .tm-block {
  655. padding: 30px;
  656. }
  657. }
  658. @media (max-width: 767px) {
  659. .tm-col-account-settings,
  660. .tm-col-avatar {
  661. width: 100%;
  662. max-width: 100%;
  663. }
  664. .tm-block-avatar {
  665. display: flex;
  666. flex-direction: column;
  667. }
  668. .tm-avatar {
  669. align-self: center;
  670. }
  671. .tm-hide-sm {
  672. display: none;
  673. }
  674. }
  675. @media (max-width: 633px) {
  676. .page-item {
  677. margin-top: 10px;
  678. }
  679. .custom-select {
  680. background-position: 96%;
  681. }
  682. }
  683. @media (max-width: 574px) {
  684. .navbar-collapse {
  685. top: 47px;
  686. }
  687. .navbar {
  688. height: 50px;
  689. }
  690. .tm-site-title {
  691. font-size: 1.4rem;
  692. margin-left: 7px;
  693. }
  694. .tm-site-icon {
  695. font-size: 2em;
  696. }
  697. }
  698. @media (max-width: 480px) {
  699. .tm-mt-big {
  700. margin-top: 45px;
  701. }
  702. .tm-mb-big {
  703. margin-bottom: 45px;
  704. }
  705. #barChart,
  706. #lineChart {
  707. max-height: 350px;
  708. }
  709. }
comments powered by Disqus