templates/Frontend/custom_style.html.twig line 1

Open in your IDE?
  1. <style>
  2.     .main-menu > li:hover > a {
  3.       text-decoration: none;
  4.       {% if settings.mainColor == '' %}
  5.           color: #e74c3c; 
  6.       {% else %}
  7.             color: #{{settings.mainColor}};
  8.       {% endif %}
  9.     }
  10.     .main-menu > li.active-menu > a {
  11.         {% if settings.mainColor == '' %}
  12.             color: #e74c3c;
  13.         {% else %}    
  14.              color: #{{settings.mainColor}};        
  15.         {% endif %}
  16.         text-decoration:underline;
  17.     }
  18.     .block1-txt:hover {
  19.       background-color: {{mainColorRgba}};
  20.     }
  21.     
  22.     .bg-background-color {
  23.         {% if settings.backgroundColor == '' %}
  24.             background-color: #fff;
  25.         {% else %}    
  26.             background-color: #{{settings.backgroundColor}};
  27.         {% endif %}        
  28.     }
  29.     
  30.     
  31.     .bg1 {
  32.         {% if settings.mainColor == '' %}
  33.             background-color: #e74c3c;
  34.         {% else %}    
  35.             background-color: #{{settings.mainColor}};
  36.         {% endif %}
  37.     }
  38.     .hov-cl1:hover {
  39.         {% if settings.mainColor == '' %}        
  40.             color: #e74c3c;
  41.         {% else %}    
  42.             color: #{{settings.mainColor}};        
  43.         {% endif %}
  44.     }
  45.     .icon-header-noti::after {        
  46.         background-color: #e74c3c;
  47.     }        
  48.     .hov-btn3:hover {
  49.         {% if settings.mainColor == '' %}            
  50.             border-color: #e74c3c;          
  51.             background-color: #e74c3c;          
  52.         {% else %}    
  53.             border-color: #{{settings.mainColor}};          
  54.             background-color: #{{settings.mainColor}};          
  55.         {% endif %}            
  56.     }        
  57.     .show-search:hover:after,
  58.     .show-filter:hover:after {
  59.         {% if settings.mainColor == '' %}                    
  60.             background-color: #e74c3c;
  61.             border-color: #e74c3c;
  62.         {% else %}    
  63.             background-color: #{{settings.mainColor}};
  64.             border-color: #{{settings.mainColor}};        
  65.         {% endif %}
  66.     }        
  67.     .btn-back-to-top:hover, .btn-back-to-top {    
  68.         {% if settings.mainColor == '' %}                                  
  69.             background-color: #e74c3c;
  70.         {% else %}    
  71.             background-color: #{{settings.mainColor}};        
  72.         {% endif %}
  73.     }
  74.     .main-menu-m {          
  75.         {% if settings.mainColor == '' %}            
  76.             background-color: #e74c3c;
  77.         {% else %}    
  78.             background-color: #{{settings.mainColor}};        
  79.         {% endif %}
  80.     }
  81.     .loader05 {
  82.         {% if settings.mainColor == '' %}                    
  83.             border: 4px solid #e74c3c;
  84.         {% else %}    
  85.             border: 4px solid #{{settings.mainColor}};        
  86.         {% endif %}
  87.     }    
  88.     .modal-header {
  89.         background-color: #fff;
  90.         border: 0px !important;
  91.         color:#fff !important;
  92.     }
  93.     
  94.     .custom_home_btn {
  95.         background-color: #000 !important;
  96.         color:#fff !important;
  97.     }
  98.     
  99.     .text_color_main {
  100.         color: #{{settings.mainColor}};            
  101.     }    
  105.   .card-lobby-blue {
  106.     background-color:#3498db;
  107.   }
  109.   .card-lobby-green {
  110.     background-color:#2ecc71;
  111.   }
  113.   .card-lobby-red {
  114.     background-color:#eb4d4b;
  115.   }
  117.   .card-lobby-purple {
  118.     background-color:#a29bfe;
  119.   }
  121.   .card-lobby {    
  122.     border-color:#fff;
  123.     padding:20px;
  124.     height:150px;
  125.     color:#fff;
  126.     border-radius:10px;
  127.   }
  129.   .card-lobby-icon {
  130.     font-size:50px;
  131.     float:right;
  132.   }
  134.   .card-lobby-text {
  135.     position:absolute;
  136.     bottom:20px;
  137.     font-size:30px;
  138.   }
  140.   .card-padding {
  141.     margin-top:20px;
  142.     cursor:pointer;
  143.   }
  146.   /* Avatar base */
  147. .letters_avatar{
  148.   --size: 48px;                      /* cambia tamaño aquí */
  149.   width: var(--size);
  150.   height: var(--size);
  151.   border-radius: 999px;              /* circular */
  152.   display: inline-grid;
  153.   place-items: center;
  154.   background: #e9eef3;               /* fondo por defecto */
  155.   color: #2b2f36;
  156.   font-weight: 700;
  157.   font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  158.   /* tamaño de fuente relativo al tamaño del avatar */
  159.   font-size: calc(var(--size) * 0.42);
  160.   line-height: 1;
  161.   text-transform: uppercase;
  162.   user-select: none;
  163.   overflow: hidden;
  164. }
  166. /* Pinta las iniciales usando el atributo data-initials */
  167. .letters_avatar::before{
  168.   content: attr(data-initials);
  169. }
  171. /* Tamaños rápidos */
  172. .letters_avatar.sm{ --size: 32px; }
  173. .letters_avatar.lg{ --size: 64px; }
  175. /* Variante cuadrada con esquinas suaves */
  176. .letters_avatar.square{ border-radius: 12px; }
  178. /* Variante con gradiente "de marca" */
  179. .letters_avatar.brand{
  180.   background: linear-gradient(135deg, #111827, #0ea5e9);
  181.   color: white;
  182. }
  184. /* Ejemplo de un pequeño borde */
  185. .letters_avatar{ box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
  187.   
  188. </style>