styles.css 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471
  1. /* Fix bootstrap */
  2. @media (max-width: 991.98px) {
  3. .navbar-expand-lg>.container,
  4. .navbar-expand-lg>.container-fluid {
  5. padding-right: 15px;
  6. padding-left: 15px;
  7. }
  8. }
  9. @media (max-width: 575px) {
  10. .navbar-expand-lg>.container,
  11. .navbar-expand-lg>.container-fluid {
  12. padding-right: 0px;
  13. padding-left: 0px;
  14. }
  15. }
  16. @media (min-width: 992px) {
  17. .navbar-expand-lg .navbar-nav {
  18. margin-right: -.5rem;
  19. }
  20. }
  21. /* Set base bootstrap width */
  22. @media (min-width: 1200px) {
  23. .container {
  24. max-width: 1000px;
  25. }
  26. .navbar-expand-lg .navbar-nav {
  27. margin-right: -.5rem;
  28. }
  29. }
  30. /* Base font and colors */
  31. body {
  32. color: #444;
  33. font-size: 1.0rem;
  34. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  35. }
  36. .h1,
  37. .h2,
  38. .h3,
  39. .h4,
  40. .h5,
  41. .h6,
  42. h1,
  43. h2,
  44. h3,
  45. h4,
  46. h5,
  47. h6,
  48. footer {
  49. color: #000;
  50. }
  51. .navbar-brand {
  52. font-weight: bold;
  53. }
  54. h1 {
  55. font-size: 250%;
  56. }
  57. /* Nice sticky footer */
  58. html,
  59. body {
  60. height: 100%;
  61. }
  62. #wrap {
  63. min-height: 100%;
  64. }
  65. #main {
  66. overflow: auto;
  67. padding-bottom: 4.5rem;
  68. }
  69. footer {
  70. position: relative;
  71. margin-top: -4.5rem;
  72. height: 4.5rem;
  73. clear: both;
  74. }
  75. /* Sticky top nav bar, body class "fixed-top-bar" */
  76. .fixed-top-bar .navbar {
  77. position: fixed;
  78. top: 0;
  79. right: 0;
  80. left: 0;
  81. z-index: 1030;
  82. }
  83. .fixed-top-bar #main {
  84. padding-top: 3.5rem;
  85. }
  86. /* Basket button */
  87. #basket-nav-btn .badge {
  88. vertical-align: top;
  89. margin-top: 3px;
  90. }
  91. /* Fave background */
  92. .bg-fave {
  93. background: #205081 url(/assets/sys/bg.png) repeat 0 0;
  94. }
  95. /* Fix content marging */
  96. .page-content p:last-child {
  97. margin-bottom: 0px;
  98. }
  99. /* Borders */
  100. .navbar {
  101. border-bottom: 1px solid rgba(0, 0, 0, .125);
  102. }
  103. footer {
  104. border-top: 1px solid rgba(0, 0, 0, .125);
  105. }
  106. /* Shop */
  107. .grid-products {
  108. display: flex;
  109. flex-flow: row wrap;
  110. padding-top: 1px;
  111. padding-left: 1px;
  112. margin-right: -4px;
  113. }
  114. .grid-products .card-product {
  115. width: 100%;
  116. border-radius: 0;
  117. margin-top: -1px;
  118. margin-left: -1px;
  119. }
  120. @media (min-width: 768px) {
  121. .grid-products .card-product {
  122. width: 50%;
  123. }
  124. }
  125. @media (min-width: 992px) {
  126. .grid-products .card-product {
  127. width: 33.33333%;
  128. }
  129. }
  130. @media (min-width: 1200px) {
  131. .grid-products .card-product {
  132. width: 33.33333%;
  133. }
  134. }
  135. .grid-products .card-product:hover {
  136. background-color: #f2f4f6;
  137. }
  138. .grid-products .card-product .card-img-link {
  139. display: block;
  140. padding: 1.25rem;
  141. padding-bottom: 0;
  142. }
  143. .grid-products .card-product .card-img-link img {
  144. display: block;
  145. border-radius: 0;
  146. }
  147. .grid-products .card-product .card-title {
  148. font-size: 1rem;
  149. }
  150. .grid-products .card-product .card-text {
  151. font-size: 0.7rem;
  152. }
  153. .grid-products .card-product .card-footer {
  154. padding-top: 0;
  155. border-radius: 0;
  156. border-top: 0;
  157. background: transparent;
  158. padding-bottom: 1.25rem;
  159. }
  160. .grid-products .card-product .price {
  161. display: block;
  162. font-weight: bold;
  163. }
  164. .grid-products .card-product .price_old {
  165. color: #6c757d;
  166. font-size: 0.6rem;
  167. }
  168. .grid-products .card-product .btn {
  169. float: right;
  170. }
  171. .grid-products .card-product .card-footer {
  172. position: relative;
  173. }
  174. .grid-products .card-product .card-footer .badge {
  175. position: absolute;
  176. top: 0px;
  177. margin-top: -23px;
  178. }
  179. .product-full .price {
  180. display: inline-block;
  181. vertical-align: middle;
  182. }
  183. .product-full .price_old {
  184. color: #6c757d;
  185. font-size: 1.25rem;
  186. }
  187. .product-full .btn-buy {
  188. display: inline-block;
  189. vertical-align: middle;
  190. }
  191. .product-full .product-description {
  192. font-size: 1rem;
  193. }
  194. .product-full .product-description p:last-child {
  195. margin-bottom: 0px;
  196. }
  197. .product-full .thumbnails {
  198. padding: 2px;
  199. }
  200. .product-full .thumbnails .thumbnail {
  201. width: 16.666666667%;
  202. padding: 2px;
  203. }
  204. .product-full .thumbnails .thumbnail-hidden {
  205. display: none;
  206. }
  207. .product-full .thumbnails .thumbnail img {
  208. width: 100%;
  209. border-radius: 4px;
  210. }
  211. .price_red {
  212. color: #fb3f4c;
  213. }
  214. .table-specifications .tcol-1,
  215. .table-specifications .tcol-2 {
  216. width: 100%;
  217. display: block;
  218. }
  219. .table-specifications .tcol-1 {
  220. font-weight: bold;
  221. border-bottom: none;
  222. padding-bottom: 0px;
  223. }
  224. .table-specifications .tcol-2 {
  225. border-top: none;
  226. padding-top: 0px;
  227. }
  228. @media (min-width: 768px) {
  229. .table-specifications .tcol-1,
  230. .table-specifications .tcol-2 {
  231. width: 50%;
  232. display: table-cell;
  233. font-weight: normal;
  234. border: 1px solid #dee2e6;
  235. padding: .75rem;
  236. }
  237. }
  238. @media (min-width: 992px) {
  239. .table-specifications .tcol-1,
  240. .table-specifications .tcol-2 {
  241. width: 50%;
  242. display: table-cell;
  243. font-weight: normal;
  244. border: 1px solid #dee2e6;
  245. padding: .75rem;
  246. }
  247. }
  248. @media (min-width: 1200px) {
  249. .table-specifications .tcol-1,
  250. .table-specifications .tcol-2 {
  251. width: 50%;
  252. display: table-cell;
  253. font-weight: normal;
  254. border: 1px solid #dee2e6;
  255. padding: .75rem;
  256. }
  257. }
  258. .fixed-top-bar .navbar.navbar-cats {
  259. position: static;
  260. }
  261. /* Shop basket */
  262. #sys-modal-shop-basket .data .table tbody td {
  263. vertical-align: middle;
  264. }
  265. #sys-modal-shop-basket .data .table .thc-1 {
  266. width: 75px;
  267. }
  268. #sys-modal-shop-basket .data .table .thc-4 {
  269. width: 180px;
  270. text-align: center;
  271. }
  272. #sys-modal-shop-basket .data .table .thc-4 .btn {
  273. width: 40px;
  274. }
  275. #sys-modal-shop-basket .data .table .thc-4 .btn-minus {
  276. float: left;
  277. }
  278. #sys-modal-shop-basket .data .table .thc-4 .btn-plus {
  279. float: right;
  280. }
  281. #sys-modal-shop-basket .data .table .thc-4 .form-control {
  282. width: auto;
  283. display: inline-block;
  284. text-align: center;
  285. width: 60px;
  286. }
  287. #sys-modal-shop-basket .data .table .thc-5 {
  288. width: 110px;
  289. }
  290. #sys-modal-shop-basket .data .table tbody .thc-6 {
  291. width: 40px;
  292. font-size: 1.5rem;
  293. font-weight: bold;
  294. text-align: right;
  295. vertical-align: middle;
  296. }
  297. #sys-modal-shop-basket .data .table tbody .thc-6 a:hover {
  298. text-decoration: none;
  299. }
  300. #sys-modal-shop-basket .data .total {
  301. text-align: right;
  302. font-size: 1.5rem;
  303. }
  304. #sys-modal-shop-basket .data .total span {
  305. display: inline-block;
  306. }
  307. #sys-modal-shop-basket .data .total span.value {
  308. margin-left: 1rem;
  309. }
  310. #sys-modal-shop-basket .order-form .form-group label {
  311. font-weight: 700;
  312. margin-top: .45rem;
  313. margin-bottom: .45rem;
  314. }
  315. #sys-modal-shop-basket .order-form .form-group .input-error-msg small {
  316. color: #721c24;
  317. }
  318. @media (max-width: 768px) {
  319. #sys-modal-shop-basket .data .table td {
  320. display: block;
  321. }
  322. #sys-modal-shop-basket .data .table .thc-3 {
  323. display: none;
  324. }
  325. #sys-modal-shop-basket .data .table thead {
  326. display: none;
  327. }
  328. #sys-modal-shop-basket .data .table .thc-1 {
  329. width: auto;
  330. }
  331. #sys-modal-shop-basket .data .table .thc-1 img {
  332. width: 100%;
  333. height: auto;
  334. }
  335. #sys-modal-shop-basket .data .table .thc-4,
  336. #sys-modal-shop-basket .data .table .thc-5,
  337. #sys-modal-shop-basket .data .table tbody .thc-6 {
  338. width: auto;
  339. }
  340. #sys-modal-shop-basket .data .table tbody .thc-6 {
  341. text-align: left;
  342. }
  343. #sys-modal-shop-basket .modal-footer {
  344. display: block;
  345. text-align: right;
  346. }
  347. #sys-modal-shop-basket .modal-footer>:not(:last-child) {
  348. margin-right: 0px;
  349. display: block;
  350. }
  351. #sys-modal-shop-basket .modal-footer>:not(:first-child) {
  352. margin-left: 0px;
  353. margin-top: 1rem;
  354. display: block;
  355. }
  356. }
  357. @media (min-width: 768px) {
  358. #sys-modal-shop-basket .modal-dialog {
  359. max-width: 660px
  360. }
  361. #sys-modal-shop-basket .data .table .thc-3 {
  362. display: none;
  363. }
  364. }
  365. @media (min-width: 992px) {
  366. #sys-modal-shop-basket .modal-dialog {
  367. max-width: 900px
  368. }
  369. #sys-modal-shop-basket .data .table .thc-3 {
  370. display: table-cell;
  371. }
  372. li.currency-changer {
  373. padding-right: 8px;
  374. }
  375. }
  376. @media (min-width: 1200px) {
  377. #sys-modal-shop-basket .modal-dialog {
  378. max-width: 940px
  379. }
  380. #sys-modal-shop-basket .data .table .thc-3 {
  381. display: table-cell;
  382. }
  383. li.currency-changer {
  384. padding-right: 8px;
  385. }
  386. }