templates/form/_custom_style.html.twig line 1

Open in your IDE?
  1. <style>
  2. {% if styles.fontFamily|default %}
  3.     @import url("https://fonts.googleapis.com/css?family={{ styles.fontFamily|font_url_name }}");
  4.     body {
  5.         font-family: {{ styles.fontFamily }}, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  6.     }
  7. {% endif %}
  9. {% if styles.fontSize|default %}
  10.     body {
  11.         font-size: {{ styles.fontSize }}px;
  12.     }
  13. {% endif %}
  14. {% if styles.btnCustomColor|default %}    
  15.     .btn-primary {
  16.         color: {{ styles.btnCustomColor.contrast }};
  17.         border-color: {{ styles.btnCustomColor }};
  18.         background-color: {{ styles.btnCustomColor }};
  19.     }
  21.     .btn-primary:hover {
  22.         background-color: {{ styles.btnCustomColor.tint }};
  23.         color: {{ styles.btnCustomColor.contrast|tint_color }};
  24.         border-color: {{ styles.btnCustomColor.tint }};
  25.     }
  26. {% endif %}
  28. {% if styles.btnGradientColor|default %}
  29.     .btn-primary {
  30.         background: linear-gradient(278.83deg, transparent 4.28%, {{ styles.btnCustomColor }} 84.54%);
  31.         background-color: {{ styles.btnCustomColor }};
  32.     }
  34.     .btn-primary:hover {
  35.         background-color: {{ styles.btnGradientColor }};
  36.     }
  37. {% endif %}
  39. {% if styles.btnAddCustomColor|default %}
  40.     .btn-outline-primary {
  41.         border-color: {{ styles.btnAddCustomColor }};
  42.         color: {{ styles.btnAddCustomColor }};
  43.     }
  45.     .btn-outline-primary:hover {
  46.         background-color: {{ styles.btnAddCustomColor|tint_color }};
  47.         border-color: {{ styles.btnAddCustomColor }};
  48.         color: {{ styles.btnAddCustomColor.contrast|tint_color }};
  49.     }
  51.     .btn-outline-primary:focus {
  52.         box-shadow: 0 0 0 0.25rem {{ styles.btnAddCustomColor }}
  53.     }
  54. {% endif %}
  56. {% if styles.btnDeleteCustomColor|default %}
  57.     .btn-outline-secondary {
  58.         border-color: {{ styles.btnDeleteCustomColor }};
  59.         color: {{ styles.btnDeleteCustomColor }};
  60.     }
  62.     .btn-outline-secondary:hover {
  63.         background-color: {{ styles.btnDeleteCustomColor|tint_color }};
  64.         border-color: {{ styles.btnDeleteCustomColor }};
  65.         color: {{ styles.btnDeleteCustomColor.contrast|tint_color }};
  66.     }
  68.     .btn-outline-secondary:focus {
  69.         box-shadow: 0 0 0 0.25rem {{ styles.btnDeleteCustomColor }}
  70.     }
  71. {% endif %}
  73. {% if styles.linkCustomColor|default %}
  74.     a {
  75.         color: {{ styles.linkCustomColor }};
  76.     }
  78.     a:hover {
  79.         color: {{ styles.linkCustomColor.shade }};
  80.     }
  81. {% endif %}
  83. {% if styles.fontColor.hex|default %}
  84.     body {
  85.         color: {{ styles.fontColor }};
  86.     }
  88.     .form-text, input, select, select option, textarea, .form-control, .form-select, textarea:focus, input:focus, .form-control:focus {
  89.         color: {{ styles.fontColor.tint }}
  90.     }
  92.     .text-muted {
  93.         color: {{ styles.fontColor.tint }} !important;
  94.     }
  96.     .form-control::placeholder {
  97.         color: {{ styles.fontColor.tint }};
  98.     }
  99. {% endif %}
  100. </style>