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.                 display:flex;
  43.                 justify-content:center;
  44.                 align-items:flex-start;
  45.                 min-height:100vh;
  46.                 margin-left: 70px;
  47.                 padding:40px 20px;
  48.                 transition: margin-left .3s;
  49.             }
  51.             /* décale le contenu pour compenser l'ombre si besoin */
  52.             #sidebar.expanded + #mainContent{
  53.                 /* aucune marge : le contenu n’avance ni ne recule */
  54.             }
  56.             /* Option : petite ombre quand la barre est ouverte */
  57.             #sidebar.expanded{
  58.                 box-shadow: 2px 0 8px rgba(0,0,0,.2);
  59.             }
  61.             /* ----- contenu entreprise details --------------------------- */
  63.             .entreprise_details {
  64.                 display: inline-block;
  65.                 
  66.             }
  68.             /* ----- bouton burger ---------------------------------------- */
  69.             #toggleSidebar{
  70.                 width: 40px;
  71.                 height: 40px;
  72.                 border-radius: 50%;
  73.                 transition: all .3s;
  74.                 margin: 10px auto;
  75.                 display:block;
  76.             }
  78.             #sidebar.expanded #toggleSidebar{
  79.                 width: 90%;
  80.                 border-radius: .25rem;
  81.             }
  83.             #sidebar .nav-link .sidebar-toggle-hide {
  84.                 display: inline-block;
  85.                 min-width: 150px; /* largeur fixe */
  86.                 white-space: nowrap;
  87.             }
  89.             /* Masque les éléments quand la sidebar n’est pas élargie */
  90.             #sidebar:not(.expanded) .sidebar-toggle-hide {
  91.                 display: none !important;
  92.             }
  94.             #sidebar .nav-link {
  95.                 display: flex;
  96.                 align-items: center;
  97.             }
  99.             #sidebar .nav-link i {
  100.                 margin-right: 15px;
  101.                 min-width: 25px;
  102.                 text-align: center;
  103.             }
  105.            .logo-fluid {
  106.                 height: 100px;
  107.                 width: auto;
  108.                 margin: 0 auto;
  109.             }
  111.             #sidebar .nav-link i,
  112.             #sidebar .nav-link span {
  113.                 margin-top: 15px;
  114.                 margin-bottom: 25px;
  115.                 margin-left: 5px;
  117.             }
  119.             .dt-button{
  120.                 background-color: #007bff !important;
  121.                 color: #ffffff !important;
  122.             }
  123.             .dt-paging-button.current, .dt-input, .paginate_button.current{
  124.                 background-color: #eeeeee !important;
  125.             }
  127.             .dt-button:hover{
  128.                 background-color: #0056b3 !important;
  129.             }
  131.             .btn-primary {
  132.                 background-color: #006288;
  133.                 border-color: #006288;
  134.             }
  136.             .btn-primary:hover {
  137.                 background-color: #3A4B92;
  138.                 border-color: #3A4B92;
  139.             }
  141.             .crm-wrapper{
  142.                 width:100%;
  143.                 max-width:90%;
  144.             }
  146.             
  147.         </style>
  148.     </head>
  150.     <body style="background: linear-gradient(to bottom, #E4F5E6, #85DE92); background-size: cover;">
  151.         {% block body %}{% endblock %}
  152.         {% block javascripts %}{{ encore_entry_script_tags('app') }}{% endblock %}
  153.     </body>
  155. </html>