styles.css 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446
  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. font-weight: bold;
  162. }
  163. .grid-products .card-product .btn {
  164. float: right;
  165. }
  166. .product-full .price {
  167. display: inline-block;
  168. vertical-align: middle;
  169. }
  170. .product-full .btn-buy {
  171. display: inline-block;
  172. vertical-align: middle;
  173. }
  174. .product-full .product-description {
  175. font-size: 1rem;
  176. }
  177. .product-full .product-description p:last-child {
  178. margin-bottom: 0px;
  179. }
  180. .product-full .thumbnails {
  181. padding: 2px;
  182. }
  183. .product-full .thumbnails .thumbnail {
  184. width: 16.666666667%;
  185. padding: 2px;
  186. }
  187. .product-full .thumbnails .thumbnail-hidden {
  188. display: none;
  189. }
  190. .product-full .thumbnails .thumbnail img {
  191. width: 100%;
  192. border-radius: 4px;
  193. }
  194. .table-specifications .tcol-1,
  195. .table-specifications .tcol-2 {
  196. width: 100%;
  197. display: block;
  198. }
  199. .table-specifications .tcol-1 {
  200. font-weight: bold;
  201. border-bottom: none;
  202. padding-bottom: 0px;
  203. }
  204. .table-specifications .tcol-2 {
  205. border-top: none;
  206. padding-top: 0px;
  207. }
  208. @media (min-width: 768px) {
  209. .table-specifications .tcol-1,
  210. .table-specifications .tcol-2 {
  211. width: 50%;
  212. display: table-cell;
  213. font-weight: normal;
  214. border: 1px solid #dee2e6;
  215. padding: .75rem;
  216. }
  217. }
  218. @media (min-width: 992px) {
  219. .table-specifications .tcol-1,
  220. .table-specifications .tcol-2 {
  221. width: 50%;
  222. display: table-cell;
  223. font-weight: normal;
  224. border: 1px solid #dee2e6;
  225. padding: .75rem;
  226. }
  227. }
  228. @media (min-width: 1200px) {
  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. .fixed-top-bar .navbar.navbar-cats {
  239. position: static;
  240. }
  241. /* Shop basket */
  242. #sys-modal-shop-basket .data .table tbody td {
  243. vertical-align: middle;
  244. }
  245. #sys-modal-shop-basket .data .table .thc-1 {
  246. width: 75px;
  247. }
  248. #sys-modal-shop-basket .data .table .thc-4 {
  249. width: 180px;
  250. text-align: center;
  251. }
  252. #sys-modal-shop-basket .data .table .thc-4 .btn {
  253. width: 40px;
  254. }
  255. #sys-modal-shop-basket .data .table .thc-4 .btn-minus {
  256. float: left;
  257. }
  258. #sys-modal-shop-basket .data .table .thc-4 .btn-plus {
  259. float: right;
  260. }
  261. #sys-modal-shop-basket .data .table .thc-4 .form-control {
  262. width: auto;
  263. display: inline-block;
  264. text-align: center;
  265. width: 60px;
  266. }
  267. #sys-modal-shop-basket .data .table .thc-5 {
  268. width: 110px;
  269. }
  270. #sys-modal-shop-basket .data .table tbody .thc-6 {
  271. width: 40px;
  272. font-size: 1.5rem;
  273. font-weight: bold;
  274. text-align: right;
  275. vertical-align: middle;
  276. }
  277. #sys-modal-shop-basket .data .table tbody .thc-6 a:hover {
  278. text-decoration: none;
  279. }
  280. #sys-modal-shop-basket .data .total {
  281. text-align: right;
  282. font-size: 1.5rem;
  283. }
  284. #sys-modal-shop-basket .data .total span {
  285. display: inline-block;
  286. }
  287. #sys-modal-shop-basket .data .total span.value {
  288. margin-left: 1rem;
  289. }
  290. #sys-modal-shop-basket .order-form .form-group label {
  291. font-weight: 700;
  292. margin-top: .45rem;
  293. margin-bottom: .45rem;
  294. }
  295. #sys-modal-shop-basket .order-form .form-group .input-error-msg small {
  296. color: #721c24;
  297. }
  298. @media (max-width: 768px) {
  299. #sys-modal-shop-basket .data .table td {
  300. display: block;
  301. }
  302. #sys-modal-shop-basket .data .table .thc-3 {
  303. display: none;
  304. }
  305. #sys-modal-shop-basket .data .table thead {
  306. display: none;
  307. }
  308. #sys-modal-shop-basket .data .table .thc-1 {
  309. width: auto;
  310. }
  311. #sys-modal-shop-basket .data .table .thc-1 img {
  312. width: 100%;
  313. height: auto;
  314. }
  315. #sys-modal-shop-basket .data .table .thc-4,
  316. #sys-modal-shop-basket .data .table .thc-5,
  317. #sys-modal-shop-basket .data .table tbody .thc-6 {
  318. width: auto;
  319. }
  320. #sys-modal-shop-basket .data .table tbody .thc-6 {
  321. text-align: left;
  322. }
  323. #sys-modal-shop-basket .modal-footer {
  324. display: block;
  325. text-align: right;
  326. }
  327. #sys-modal-shop-basket .modal-footer>:not(:last-child) {
  328. margin-right: 0px;
  329. display: block;
  330. }
  331. #sys-modal-shop-basket .modal-footer>:not(:first-child) {
  332. margin-left: 0px;
  333. margin-top: 1rem;
  334. display: block;
  335. }
  336. }
  337. @media (min-width: 768px) {
  338. #sys-modal-shop-basket .modal-dialog {
  339. max-width: 660px
  340. }
  341. #sys-modal-shop-basket .data .table .thc-3 {
  342. display: none;
  343. }
  344. }
  345. @media (min-width: 992px) {
  346. #sys-modal-shop-basket .modal-dialog {
  347. max-width: 900px
  348. }
  349. #sys-modal-shop-basket .data .table .thc-3 {
  350. display: table-cell;
  351. }
  352. li.currency-changer {
  353. padding-right: 8px;
  354. }
  355. }
  356. @media (min-width: 1200px) {
  357. #sys-modal-shop-basket .modal-dialog {
  358. max-width: 940px
  359. }
  360. #sys-modal-shop-basket .data .table .thc-3 {
  361. display: table-cell;
  362. }
  363. li.currency-changer {
  364. padding-right: 8px;
  365. }
  366. }