styles.css 7.1 KB

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