templates/base.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>{% block title %}Welcome!{% endblock %}</title>
  6.         {% block stylesheets %}{{ encore_entry_link_tags('app') }}{% endblock %}
  7.         <link rel="icon" type="image/x-icon" href="/public/icone.ico">
  9.         <script src="https://kit.fontawesome.com/f785a57bb7.js" crossorigin="anonymous"></script>
  10.         <style>
  12.             /* ----- structure -------------------------------------------- */
  13.             .layout{
  14.                 min-width: 100vw;
  15.                 min-height: 100vh;
  16.             }
  18.             /* ----- sidebar ---------------------------------------------- */
  19.             #sidebar{
  20.                 position: fixed;           /* la barre sort du flux */
  21.                 top: 0;
  22.                 left: 0;
  23.                 height: 100vh;
  24.                 width: 70px;               /* largeur fermée  */
  25.                 background: linear-gradient(#006288,#3A4B92);
  26.                 overflow-x: hidden;
  27.                 transition: width .3s;
  28.                 z-index: 1000;
  29.             }
  31.             #sidebar.expanded{
  32.                 width:250px;
  33.             }
  35.             /* texte masqué quand fermé */
  36.             #sidebar:not(.expanded) .sidebar-label{
  37.                 display:none;
  38.             }
  40.             /* ----- contenu principal ------------------------------------ */
  41.             #mainContent{
  42.                 margin-left: 70px;
  43.                 transition: margin-left .3s;
  44.             }
  46.             /* décale le contenu pour compenser l'ombre si besoin */
  47.             #sidebar.expanded + #mainContent{
  48.                 /* aucune marge : le contenu n’avance ni ne recule */
  49.             }
  51.             /* Option : petite ombre quand la barre est ouverte */
  52.             #sidebar.expanded{
  53.                 box-shadow: 2px 0 8px rgba(0,0,0,.2);
  54.             }
  56.             /* ----- bouton burger ---------------------------------------- */
  57.             #toggleSidebar{
  58.                 width: 40px;
  59.                 height: 40px;
  60.                 border-radius: 50%;
  61.                 transition: all .3s;
  62.                 margin: 10px auto;
  63.                 display:block;
  64.             }
  66.             #sidebar.expanded #toggleSidebar{
  67.                 width: 90%;
  68.                 border-radius: .25rem;
  69.             }
  71.             #sidebar .nav-link .sidebar-toggle-hide {
  72.                 display: inline-block;
  73.                 min-width: 150px; /* largeur fixe */
  74.                 white-space: nowrap;
  75.             }
  77.             /* Masque les éléments quand la sidebar n’est pas élargie */
  78.             #sidebar:not(.expanded) .sidebar-toggle-hide {
  79.                 display: none !important;
  80.             }
  82.             #sidebar .nav-link {
  83.                 display: flex;
  84.                 align-items: center;
  85.             }
  87.             #sidebar .nav-link i {
  88.                 margin-right: 15px;
  89.                 min-width: 25px;
  90.                 text-align: center;
  91.             }
  93.            .logo-fluid {
  94.                 height: 100px;
  95.                 width: auto;
  96.                 margin: 0 auto;
  97.             }
  99.             #sidebar .nav-link i,
  100.             #sidebar .nav-link span {
  101.                 margin-top: 15px;
  102.                 margin-bottom: 25px;
  103.                 margin-left: 5px;
  105.             }
  107.             .dt-button{
  108.                 background-color: #007bff !important;
  109.                 color: #ffffff !important;
  110.             }
  111.             .dt-paging-button.current, .dt-input, .paginate_button.current{
  112.                 background-color: #eeeeee !important;
  113.             }
  115.             .dt-button:hover{
  116.                 background-color: #0056b3 !important;
  117.             }
  119.             .btn-primary {
  120.                 background-color: #006288;
  121.                 border-color: #006288;
  122.             }
  124.             .btn-primary:hover {
  125.                 background-color: #3A4B92;
  126.                 border-color: #3A4B92;
  127.             }
  129.             /* zone de droite (ouvr. dans header, fermée dans footer) */
  130.             #mainContent{
  131.                 display:flex;
  132.                 justify-content:center;
  133.                 align-items:flex-start;
  134.                 padding:40px 20px;
  135.                 min-height:100vh;
  136.             }
  138.             .crm-wrapper{
  139.                 width:100%;
  140.                 max-width:90%;
  141.             }
  142.         </style>
  143.     </head>
  145.     <body style="background: linear-gradient(to bottom, #E4F5E6, #85DE92); background-size: cover;">
  146.         {% block body %}{% endblock %}
  147.         {% block javascripts %}{{ encore_entry_script_tags('app') }}{% endblock %}
  148.     </body>
  150. </html>