analytics.css 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
  1. .product-filters {
  2. float: right !important; }
  3. .product-filters > li > a {
  4. width: 80px;
  5. border-radius: 20px;
  6. text-align: center;
  7. line-height: 20px;
  8. font-weight: 400;
  9. color: #76838f; }
  10. .product-filters > li > a:hover {
  11. color: #76838f; }
  12. #productOverviewWidget .btn-sale {
  13. text-transform: uppercase;
  14. color: #37474f; }
  15. #productOverviewWidget .dropdown-menu {
  16. text-transform: capitalize; }
  17. #productOverviewWidget .ct-grids .ct-vertical {
  18. stroke-dasharray: 6; }
  19. #productOverviewWidget .ct-grids .ct-horizontal {
  20. stroke: none; }
  21. #productOverviewWidget .ct-grids .ct-point-label {
  22. stroke: #fff;
  23. stroke-width: 60px; }
  24. #productOverviewWidget .ct-labels .ct-horizontal {
  25. display: block;
  26. padding-top: 10px;
  27. font-size: 14px;
  28. color: #76838f; }
  29. #productOverviewWidget .ct-area {
  30. fill-opacity: 0.8; }
  31. #productOverviewWidget .ct-series .ct-point, #productOverviewWidget .ct-series .ct-point-content {
  32. opacity: 0;
  33. transition: all .3s; }
  34. #productOverviewWidget .ct-series:hover .ct-point, #productOverviewWidget .ct-series:hover .ct-point-content {
  35. opacity: 1; }
  36. #productOverviewWidget .ct-series.ct-series-a .ct-area {
  37. fill: #a57afa; }
  38. #productOverviewWidget .ct-series.ct-series-a .ct-line {
  39. stroke: #a57afa;
  40. stroke-width: 1px; }
  41. #productOverviewWidget .ct-series.ct-series-a .ct-point {
  42. stroke: #9463f7;
  43. stroke-width: 12px;
  44. cursor: pointer; }
  45. #productOverviewWidget .ct-series.ct-series-a .ct-point-content {
  46. stroke: #fff;
  47. stroke-width: 6px;
  48. stroke-linecap: round;
  49. pointer-events: none; }
  50. #productOverviewWidget .ct-series.ct-series-b .ct-area {
  51. fill: #28c0de; }
  52. #productOverviewWidget .ct-series.ct-series-b .ct-line {
  53. stroke: #28c0de;
  54. stroke-width: 1px; }
  55. #productOverviewWidget .ct-series.ct-series-b .ct-point {
  56. stroke: #0bb2d4;
  57. stroke-width: 12px;
  58. cursor: pointer; }
  59. #productOverviewWidget .ct-series.ct-series-b .ct-point-content {
  60. stroke: #fff;
  61. stroke-width: 6px;
  62. stroke-linecap: round;
  63. pointer-events: none; }
  64. #productOverviewWidget .nav-pills .nav-link {
  65. padding: 10px 15px;
  66. border-radius: 1000px; }
  67. #productOptionsData {
  68. padding: 80px 30px 30px; }
  69. #productOptionsData .counter-number-group {
  70. font-size: 36px; }
  71. #productOptionsData .ct-chart {
  72. height: 60px;
  73. width: 200px;
  74. margin: 10px auto; }
  75. #productOptionsData .ct-chart .ct-series-a .ct-bar {
  76. stroke-width: 4px; }
  77. #productOptionsData .ct-chart .ct-series-b .ct-bar {
  78. stroke-width: 4px; }
  79. #productOptionsData .ct-chart[data-counter-type="productVist"] .ct-series-a .ct-bar {
  80. stroke: #a57afa; }
  81. #productOptionsData .ct-chart[data-counter-type="productVist"] .ct-series-b .ct-bar {
  82. stroke: #28c0de; }
  83. #productOptionsData .ct-chart[data-counter-type="productVistors"] .ct-series-a .ct-bar {
  84. stroke: #ff5e97; }
  85. #productOptionsData .ct-chart[data-counter-type="productVistors"] .ct-series-b .ct-bar {
  86. stroke: #7d8efa; }
  87. #productOptionsData .ct-chart[data-counter-type="productPageViews"] .ct-series-a .ct-bar {
  88. stroke: #5cc99a; }
  89. #productOptionsData .ct-chart[data-counter-type="productPageViews"] .ct-series-b .ct-bar {
  90. stroke: #ffdc2e; }
  91. #productOptionsData .ct-chart[data-counter-type="productBounceRate"] .ct-series-a .ct-bar {
  92. stroke: #589ffc; }
  93. #productOptionsData .ct-chart[data-counter-type="productBounceRate"] .ct-series-b .ct-bar {
  94. stroke: #eb6709; }
  95. #browsersFlowWidget {
  96. height: 100%;
  97. margin-bottom: 0 !important; }
  98. #browsersFlowWidget .card-block {
  99. padding: 0 15px; }
  100. #browsersFlowWidget .card-block:after {
  101. content: "";
  102. display: block;
  103. clear: both; }
  104. #countriesVistsWidget {
  105. margin-bottom: 0 !important; }
  106. #countriesVistsWidget .card-block {
  107. padding-bottom: 15px; }
  108. #countriesVistsWidget img {
  109. width: auto; }
  110. #countriesVistsWidget .table-responsive {
  111. border: 0 none; }
  112. .table-analytics > thead > tr > th {
  113. padding: 15px 0;
  114. vertical-align: middle;
  115. color: #37474f; }
  116. .table-analytics > tbody > tr > td {
  117. vertical-align: middle; }
  118. #browsersFlowWidget tr:nth-of-type(even) {
  119. background-color: #fafafa; }
  120. #browsersFlowWidget td {
  121. padding: 20px 0; }
  122. #weekStackedBarChart {
  123. position: relative;
  124. max-width: 350px;
  125. height: 180px;
  126. margin: 24px auto 0; }
  127. #weekStackedBarChart .ct-chart-bar .ct-labels .ct-horizontal {
  128. display: block;
  129. padding-top: 12px;
  130. text-align: center;
  131. font-size: 14px;
  132. color: #76838f; }
  133. #weekStackedBarChart .ct-chart-bar .ct-labels .ct-vertical {
  134. display: none; }
  135. #weekStackedBarChart .ct-chart-bar .ct-grids .ct-grid {
  136. stroke: none; }
  137. #weekStackedBarChart .ct-chart-bar .ct-series-a .ct-bar {
  138. stroke: #3e8ef7; }
  139. #weekStackedBarChart .ct-chart-bar .ct-series-b .ct-bar {
  140. stroke: #f3f7f9; }
  141. #browersVistsDonut {
  142. position: relative;
  143. height: 250px;
  144. margin: 0 auto; }
  145. #browersVistsDonut svg path[fill="none"] {
  146. opacity: 0 !important; }
  147. #countriesVistsWidget td {
  148. padding: 20px 0; }
  149. #countriesVistsWidget td:last-child {
  150. font-size: 0; }
  151. #countriesVistsWidget .language {
  152. min-width: 150px; }
  153. #countriesVistsWidget .vists {
  154. min-width: 65px; }
  155. #countriesVistsWidget .vists-percent {
  156. min-width: 210px; }
  157. #countriesVistsWidget .progress {
  158. display: inline-block;
  159. width: 80%;
  160. vertical-align: middle; }
  161. #countriesVistsWidget .country-name {
  162. margin-left: 20px; }
  163. #countriesVistsWidget .progress-percent {
  164. display: inline-block;
  165. width: 20%;
  166. font-size: 14px;
  167. text-align: right;
  168. vertical-align: middle;
  169. color: #76838f; }
  170. @media screen and (max-width: 1400px) {
  171. #browsersFlowWidget {
  172. margin-bottom: 30px !important; } }
  173. @media screen and (min-width: 1200px) and (max-width: 1400px) {
  174. .col-lg-7 {
  175. width: 100%; }
  176. .col-lg-5 {
  177. width: 100%; } }
  178. @media (max-width: 1199.98px) {
  179. #productOptionsData {
  180. padding-bottom: 20px; }
  181. #productOptionsData .counter {
  182. margin-bottom: 40px; } }
  183. @media screen and (min-width: 568px) and (max-width: 768px) {
  184. #productOptionsData .col-xs-12 {
  185. width: 50%; } }
  186. @media screen and (min-width: 480px) and (max-width: 567px) {
  187. #productOptionsData .ct-chart {
  188. width: 250px; } }
  189. @media (max-width: 479.98px) {
  190. .product-filters {
  191. float: none !important;
  192. padding: 10px 15px; }
  193. .product-filters > li > a {
  194. width: 50px;
  195. height: 30px;
  196. padding: 5px 8px;
  197. border-radius: 15px;
  198. text-align: center;
  199. line-height: 20px;
  200. font-weight: 400;
  201. font-size: 12px;
  202. color: #76838f; }
  203. #productOverviewWidget .nav-pills .nav-link {
  204. padding: 5px 8px; }
  205. #productOverviewWidget .card-header-actions {
  206. float: none;
  207. margin: 10px 0; } }
  208. @media (max-width: 479.98px) {
  209. #productOptionsData .ct-chart {
  210. width: 200px; } }
  211. @media screen and (max-width: 360px) {
  212. #productOptionsData .ct-chart {
  213. width: 160px; }
  214. #productOverviewWidget .nav-pills .nav-link {
  215. width: 44px;
  216. padding: 5px 6px;
  217. margin-right: 3px;
  218. margin-left: 3px; } }