templates/css/front.css.twig line 1

Open in your IDE?
  1. {% set globalColors = getFrontDataFromSettingOrYaml('front.css_config.colors', platform_front('css_config.colors') ) %}
  2. {% set isHighlights = platform_global('type') is same as('highlights') and platform_global('highlights') and app.user is not same as(null) %}
  3. {% if isHighlights %}
  4. {% set currentDisplayStep = getUserFrontCurrentStep(app.user) %}
  5. {% if currentDisplayStep.options is defined %}
  6. {% set globalColors = globalColors|merge({'primary': currentDisplayStep.options.colors.primary }) %}
  7. {% endif %}
  8. {% endif %}
  9. {% set globalPrimary = globalColors.primary%}
  10. {% set globalSecondary = globalColors.secondary%}
  12. .m-0 {
  13. margin: 0 !important;
  14. }
  16. .mb-40 {
  17. margin-bottom: 40px !important;
  18. }
  20. .font-weight-bold {
  21. font-weight: bold !important;
  22. }
  25. {#{% if platform_front('common.footer.background') %}#}
  26. {#.main-footer {#}
  27. {# background-image : url( {{ asset(platform_front('common.footer.background.url') ) }} ) !important;#}
  28. {#}#}
  30. {#{% endif %}#}
  32. ::-webkit-scrollbar-button {
  33. background-color: #2A2A29;
  34. height: 0;
  35. }
  37. ::-webkit-scrollbar-track {
  38. background-color: #003F72;
  39. }
  41. ::-webkit-scrollbar-thumb {
  42. background-color: #F7CD39;
  43. }
  45. ::-webkit-scrollbar-corner {
  46. background-color: #F7CD39;
  47. }
  49. ::-moz-selection {
  50. background-color: #F7CD39;
  51. color: #2A2A29;
  52. }
  54. .m-0 {
  55. margin: 0 !important;
  56. }
  58. .mb-40 {
  59. margin-bottom: 40px !important;
  60. }
  62. .font-weight-bold {
  63. font-weight: bold !important;
  64. }
  66. {##}
  68. ::-webkit-scrollbar-button {
  69. background-color: #2A2A29;
  70. height: 0;
  71. }
  73. ::-webkit-scrollbar-track {
  74. background-color: #003F72;
  75. }
  77. ::-webkit-scrollbar-thumb {
  78. background-color: #F7CD39;
  79. }
  81. ::-webkit-scrollbar-corner {
  82. background-color: #F7CD39;
  83. }
  85. ::-moz-selection {
  86. background-color: #F7CD39;
  87. color: #2A2A29;
  88. }
  91. {% if platform_front('css_config') %}
  92. /*============================*/
  93. /* CSS global généré par yaml */
  94. /*============================*/
  96. /*----------------------*/
  97. /* Fonts */
  98. /*----------------------*/
  99. {% set fonts = getFrontDataFromSettingOrYaml('front.css_config.fonts', platform_front('css_config.fonts')) %}
  100. {% for k,item in fonts %}
  101. {{ generateCssClass(item)|raw }}
  102. {% endfor %}
  104. /*----------------------*/
  105. /* Couleurs principales */
  106. /*----------------------*/
  107. {% for k,item in globalColors %}
  108. /** Class pour {{ k }} **/
  109. {{ getCssClassGlobal(k, item)|raw }}
  110. {% endfor %}
  112. {#Génération des class pour override les couleurs principale en cas de platforme temps fort + user loggé#}
  113. {% set color_primary = globalPrimary.color %}
  114. {% if platform_front('theme') and platform_front('theme') is same as('theme-default')%}
  115. {% set color_secondary = globalSecondary.color %}
  116. {{ generateHeaderCssClass('default', globalColors)|raw }}
  117. {% for k,item in globalColors %}
  118. /** Class main-menu-{{ k }} **/
  119. {{ generateHeaderCssClass(k, globalColors)|raw }}
  120. {% endfor %}
  121. {% endif %}
  122. {#Génération des class de theme pour les liens en fonction de la couleur principale#}
  123. .link-theme-primary a:not(.btn-impersonation) { color: {{ color_primary|raw }}!important;}
  124. {% if color_secondary is defined %}
  125. .link-theme-primary a:not(.btn-impersonation):hover, .link-theme-primary a.active{ color: {{ color_secondary|raw }}!important;}
  126. .link-theme-secondary a:not(.btn-impersonation) { color: {{ color_secondary|raw }}!important;}
  127. {% endif %}
  128. .link-theme-secondary a:not(.btn-impersonation):hover, .link-theme-secondary a.active{ color: {{ color_primary|raw }}!important;}
  129. /*----------------------*/
  130. /* Elements */
  131. /*----------------------*/
  133. {% for type,element in platform_front('css_config') %}
  134. {% if type is not same as('colors') %}
  135. /** Class pour {{ type }} **/
  136. {% for k,item in element %}
  137. {% if type is same as('thumbnails') %}
  138. {{ generateThumbnailCssClass(item)|raw }}
  139. {% elseif type not in ['buttons', 'form', 'fonts'] %}
  140. {{ generateCssClass(item)|raw }}
  141. {% endif %}
  142. {% endfor %}
  143. {% endif %}
  144. {% endfor %}
  146. {% set buttons = getFrontDataFromSettingOrYaml('front.css_config.buttons', platform_front('css_config.buttons')) %}
  147. {% for k,item in buttons %}
  148. {{ generateCssClass(item)|raw }}
  149. {% endfor %}
  150. {% set form = getFrontDataFromSettingOrYaml('front.css_config.form', platform_front('css_config.form')) %}
  151. {% for k,item in form %}
  152. {{ generateCssClass(item)|raw }}
  153. {% endfor %}
  154. {% endif %}
  156. {% if platform_front('css_config.css') %}
  157. /*----------------------*/
  158. /* Custom global CSS */
  159. /*----------------------*/
  160. {{ platform_front('css_config.css')|raw }}
  161. {% endif %}
  163. /*----------------------*/
  164. /* Common Component */
  165. /*----------------------*/
  166. {% if platform_front('common') %}
  167. {% for type,element in platform_front('common') %}
  168. {% if element.css_custom is defined %}
  169. /** Class pour {{ type }} **/
  170. {{ element.css_custom|raw }}
  171. {% endif %}
  172. {% endfor %}
  173. {% endif %}
  174. /*---------------------------*/
  175. /* Common Component children */
  176. /*---------------------------*/
  178. {% if platform_front('common.header') %}
  179. /** Header => menu, banner, buttons, logo **/
  180. {% set children = ['menu', 'banner', 'buttons', 'logo'] %}
  181. {% set header = platform_front('common.header') %}
  183. {% for k,el in header %}
  184. {% if k in children and el.css_custom is defined %}
  185. /** header.{{ k }} **/
  186. {{el.css_custom|raw }}
  187. {% endif %}
  188. {% endfor %}
  189. {% endif %}
  191. /*---------------------------*/
  192. /* Content Front */
  193. /*---------------------------*/
  195. {% if platform_front('content') %}
  196. {% for type,element in platform_front('content') %}
  197. {% if element.css_custom is defined %}
  198. /** Class pour
  199. {{ type }} **/
  200. {{ element.css_custom|raw }}
  201. {% endif %}
  202. {% endfor %}
  203. {% endif %}
  205. /*---------------------------*/
  206. /* Content Security */
  207. /*---------------------------*/
  209. {% if platform_front('security') %}
  210. {% if platform_front('security.css_custom') %}
  211. /** Class pour security **/
  212. {{ platform_front('security.css_custom')|raw }}
  213. {% endif %}
  214. {% endif %}
  216. /*---------------------------*/
  217. /* Content Catalogue */
  218. /*---------------------------*/
  219. {% set theme = globalPrimary %}
  220. {% if platform_front('content.catalog') and platform_front('content.catalog.theme_color') %}
  221. {% set theme = globalColors[platform_front('content.catalog.theme_color')] %}
  222. {% endif %}
  224. .main-products.product-grid .product-thumb .stats {
  225. color : {{ theme.color|raw }};
  226. }
  228. .irs--round .irs-from,
  229. .irs--round .irs-to,
  230. .irs--round .irs-single,
  231. .irs--round .irs-bar,
  232. .irs--round .irs-handle {
  233. background-color: {{ theme.color|raw }} !important;
  234. }
  235. .irs--round .irs-from:before, .irs--round .irs-to:before, .irs--round .irs-single:before {
  236. border-top-color: {{ theme.color|raw }} !important;
  237. }
  239. {% if color_primary is defined %}
  240. .theme-default .list-catalogue-link.active::after,.theme-default .list-catalogue-link:hover::after { background: {{ color_primary|raw }}; }
  241. .theme-default .list-catalogue-link.active { color: {{ color_primary|raw }} !important; }
  242. {% endif %}
  243. .theme-default .user-menu > li.active, .theme-default .user-menu > li:hover { border-color: {{ color_primary|raw }}; }
  245. /*---------------------------*/
  246. /* Content Product */
  247. /*---------------------------*/
  249. .lSPager.lSGallery li.active{border-color: {{ theme.color|raw }} !important }
  251. /*---------------------------*/
  252. /* Content Profile */
  253. /*---------------------------*/
  255. {% if isHighlights %}
  256. {% set theme = globalPrimary.color %}
  257. {% if platform_front('content.profile') and platform_front('content.profile.theme_color') %}
  258. {% set theme = globalColors[platform_front('content.profile.theme_color')] %}
  259. {% endif %}
  260. .user-menu > li.active > a, .user-menu > li:hover > a {
  261. border-left-color : {{ theme.color|raw }} !important;
  262. color : {{ theme.color|raw }} !important;
  263. }
  265. .profil_page h1,
  266. .profil_page .h1,
  267. .profil_page h2,
  268. .profil_page .h2 {
  269. color : {{ theme.color|raw }};
  270. }
  272. .profil_page .pseudo_border:after {
  273. background: {{ theme.color|raw }};
  274. }
  276. .profil_page .btn-blue-nuance {
  277. background-color: {{ theme.color|raw }};
  278. border-color: {{ theme.color|raw }};
  279. color: {{ theme.text_color|raw }};
  280. }
  281. .profil_page .btn-blue-nuance.active,
  282. .profil_page .btn-blue-nuance:hover {
  283. background-color: {{ theme.hover|raw }};
  284. border-color: {{ theme.hover|raw }};
  285. color: {{ theme.text_hover|raw }};
  286. }
  287. {% endif %}
  289. /*---------------------------*/
  290. /* Content Containt */
  291. /*---------------------------*/
  293. {% if platform_front('content') %}
  294. {% for type,element in platform_front('content') %}
  295. {% if element.css_custom is defined %}
  296. /** Class pour
  297. {{ type }} **/
  298. {{ element.css_custom|raw }}
  299. {% endif %}
  300. {% endfor %}
  301. {% endif %}
  303. /*---------------------------*/
  304. /* MISC */
  305. /*---------------------------*/
  307. /* Responsive embed video */
  308. .video-container {
  309. position: relative;
  310. padding-bottom: 56.25%;
  311. padding-top: 30px;
  312. height: 0;
  313. overflow: hidden;
  314. }
  315. .video-container iframe,
  316. .video-container object,
  317. .video-container embed {
  318. width: 100%;
  319. height: 100%;
  320. position: absolute;
  321. top: 0;
  322. left: 0;
  323. }
  325. /*Responsive video*/
  326. video {
  327. width: 100%;
  328. max-height: 100%;
  329. }