Réglages padding

src/lib/components/variables/VariableReferredParameterHeader.svelte

@@ -14,8 +14,7 @@
 </script>
 
 <h1
-  class="font-serif px-5 text-gray-700 py-1 {parameter.class !==
-  ParameterClass.Node
+  class="font-serif text-gray-700 py-1 {parameter.class !== ParameterClass.Node
     ? 'text-base italic text-black'
     : depth === 0
     ? 'text-xl'

src/lib/components/variables/VariableReferredParameters.svelte

@@ -35,13 +35,13 @@
   $: rootParameterById = mergeParameters(parameters)
 </script>
 
-<div class="bg-le-gris-dispositif-light p-2 sm:p-1 md:p-2  rounded-t-lg">
+<div class="bg-le-gris-dispositif-light px-5 py-2 shadow-inner">
   <h1 class="text-2xl font-serif font-light">
     {variable.label ?? variable.name}
   </h1>
   {#if latestFormulaDate !== null}
     <div
-      class="bg-white bg-opacity-40 rounded-sm flex text-xs m-2 p-2 sm:p-1 md:p-2"
+      class="bg-white bg-opacity-40 rounded-sm flex text-xs my-2 p-2 sm:p-1 md:p-2"
     >
       {#if latestFormulaDate < "2020"}
         <!-- Inspired from Material Icons name: Warning / with white symbol inside -->
@@ -122,7 +122,7 @@
 {#if variable.reference !== undefined}
   {#each Object.entries(variable.reference).sort( ([instant1], [instant2]) => instant2.localeCompare(instant1), ) as [instant, references]}
     {#each references as { href, note, title }}
-      <article class="m-2 mr-4">
+      <article class="px-3 m-2 mr-4">
         {#if note !== undefined}
           <div
             class="text-sm text-gray-600 text-justify border-l-2 border-le-gris-dispositif-light pl-2 mb-4 leading-normal"
@@ -167,11 +167,9 @@
 {/if}
 
 {#if Object.keys(rootDirectParameterById).length > 0}
-  <section class="bg-gray-100 pb-3 mb-3">
-    <h2
-      class="text-gray-500 flex font-medium tracking-wide justify-between p-2 text-lg"
-    >
-      <span>Paramètres législatifs affectant directement le dispositif</span>
+  <section class="px-5 pb-3 mb-3">
+    <h2 class="text-black flex font-bold justify-between py-2 text-lg">
+      <span>Principaux paramètres de la loi</span>
       <button on:click={() => (openDirectParameters = !openDirectParameters)}>
         {#if openDirectParameters}
           <!-- Material Icons name: Expand Less -->
@@ -216,12 +214,9 @@
 {/if}
 
 {#if Object.keys(rootParameterById).length > 0}
-  <section class="bg-gray-100 pb-3 mb-3">
-    <h2
-      class=" text-gray-500 flex font-medium tracking-wide justify-between p-2 text-lg"
-    >
-      <span>Tous les paramètres législatifs pouvant affecter le dispositif</span
-      >
+  <section class="pb-3 mb-3 px-5">
+    <h2 class="text-black flex font-bold justify-between py-2  text-lg">
+      <span>Tous les paramètres affectant le dispositif</span>
       <button on:click={() => (openAllParameters = !openAllParameters)}>
         {#if openAllParameters}
           <!-- Material Icons name: Expand Less -->

src/lib/components/variables/VariableReferredScaleParameter.svelte

@@ -67,7 +67,7 @@
   <VariableReferredParameterHeader {depth} {parameter} />
 
   <div class="flex">
-    <div class="bg-white rounded-sm pr-2 pl-1 py-2 ml-2 mb-1 mt-1 mr-6">
+    <div class="bg-gray-100 rounded-sm pr-2 pl-1 py-2 ml-2 mb-1 mt-1 mr-6">
       <ScaleAtInstantEdit
         errors={{}}
         {parameter}
@@ -81,9 +81,9 @@
     depuis {latestInstantSplit[1]}/{latestInstantSplit[0]}
   </p>
 
-  <div class="bg-gray-100 flex items-baseline text-gray-600 text-xs px-2">
+  <div class="flex items-baseline text-gray-600 text-xs px-2">
     <div class="flex items-center">
-      <div class="bg-gray-100 flex text-gray-600 text-sm">
+      <div class="flex text-gray-600 text-sm">
         <div class="bg-gray-400 rounded-sm flex px-1 text-white">
           <div class="flex pr-1">
             {#if latestInstant < "2020" || latestInstant === "0001-01-01"}

src/lib/components/variables/VariableReferredValueParameter.svelte

@@ -111,9 +111,9 @@
     </div>
   </div>
 
-  <div class="bg-gray-100 flex items-baseline text-gray-600 text-xs px-2">
+  <div class=" flex items-baseline text-gray-600 text-xs px-2">
     <div class="flex items-center">
-      <div class="bg-gray-100 flex text-gray-600 text-sm">
+      <div class="flex text-gray-600 text-sm">
         <div class="bg-gray-400 rounded-sm flex px-1 text-white ">
           <div class="flex pr-1">
             {#if latestInstant < "2020" || latestInstant === "0001-01-01"}

src/routes/index.svelte

@@ -605,7 +605,7 @@
   <!-- Panneau de gauche les zones éditables par l'utilisateur (amendement et cas type)-->
   {#if editionMode !== null}
     <div
-      class="bg-white flex-none pb-4 lg:pb-0 shadow-md w-full md:w-1/2 lg:w-1/3 2xl:w-1/4"
+      class="bg-white flex-none pb-4 lg:pb-0 shadow-xl w-full md:w-1/2 lg:w-1/3 2xl:w-1/4"
     >
       <div class="flex justify-end pr-4 py-4 w-full">
         <!-- Bouton de fermeture du panneau de gauche -->
@@ -759,8 +759,8 @@
               </div>
             </div>
             -->
-        <div class="lg:h-[calc(100vh-13rem)] lg:overflow-y-auto px-5">
-          <div class="bg-gray-100">
+        <div class="lg:h-[calc(100vh-13rem)] lg:overflow-y-auto">
+          <div class="bg-white mr-4">
             <VariableReferredParametersPane
               {date}
               name={editionMode.variableName}
@@ -773,7 +773,7 @@
 
   <!-- Panneau de droite pour les impacts et notamment le waterfall-->
   <div class="w-full {editionMode !== null ? 'hidden md:block' : ''}">
-    <div class="mx-1 my-2 px-4">
+    <div class="mx-1 my-2 px-6 lg:px-10">
       <div class="flex justify-between">
         <!-- <label
           ><input bind:checked={$adaptAmountsScale} type="checkbox" />
@@ -850,7 +850,7 @@
       </h1>
     </div>
     <!-- Cas types avec leur waterfall -->
-    <div class="lg:h-[calc(100vh-13rem)] lg:overflow-y-auto px-5">
+    <div class="lg:h-[calc(100vh-13rem)] lg:overflow-y-auto px-6 lg:px-10">
       <TestCasesPane
         {date}
         {editionMode}