fix content's style

ot_templating/Resources/Private/Templates/Page/Home.html

@@ -5,7 +5,7 @@
 <f:layout name="Home" />
 
 <f:section name='Configuration'>
-    <flux:form id="3col" label="Gabarit Accueil" extensionName="Opentalent.OtTemplating">
+    <flux:form id="home" label="Gabarit Accueil" extensionName="Opentalent.OtTemplating">
         <flux:field.select name="settings.themeColor" label="Couleur du thème" items="{ light-blue: 'Bleu ciel', blue: 'Bleu', green: 'Vert', orange: 'Orange', grey: 'Gris', red: 'Rouge', light-red: 'Rouge cerise', purple: 'Violet' }" />
         <flux:field.checkbox name="settings.displayCarousel" label="Afficher le caroussel" default="1"/>
         <flux:field.checkbox name="settings.staticDonors" label="Partenaires: affichage statique" default="0"/>

ot_templating/Resources/Public/assets/style/common/_base.scss

@@ -8,12 +8,6 @@ a {
   text-decoration: none;
 }
 
-p {
-  padding: 5px;
-  margin: 0 0 10px;
-}
-
-
 // Ensures the jquery-ui datepicker is above anything else (even leaflet maps)
 .ui-datepicker {
   z-index:9998 !important;

ot_templating/Resources/Public/assets/style/common/module/_content.scss

@@ -16,52 +16,126 @@ $content-h5-color: $content-h5-color;
 $content-h5-size: $content-h5-size;
 $content-h5-weight: $content-h5-weight;
 $content-a-color: $content-a-color;
+$content-table-header-bg-color: $content-h1-color;
+$content-quote-border-color: $content-h1-color;
 
 .content {
   flex: 1;
   padding: 0 2em;
   min-width: 600px;
-}
+  line-height: 1.4em;
 
-.content h1, h2, h3, h4, h5, h6 {
-  font-weight: 500;
-  line-height: 1.1;
-}
+  h1, h2, h3, h4, h5, h6 {
+    font-weight: 500;
+  }
 
-.content h1, h2 {
-  padding: 5px;
-}
+  h1, h2 {
+    padding: 5px;
+  }
 
-.content h1 {
-  color: $content-h1-color;
-  font-size: $content-h1-size;
-  font-weight: $content-h1-weight;
-}
+  h1 {
+    color: $content-h1-color;
+    font-size: $content-h1-size;
+    font-weight: $content-h1-weight;
+  }
 
-.content h2 {
-  color: $content-h2-color;
-  font-size: $content-h2-size;
-  font-weight: $content-h2-weight;
-}
+  h2 {
+    color: $content-h2-color;
+    font-size: $content-h2-size;
+    font-weight: $content-h2-weight;
+  }
 
-.content h3 {
-  color: $content-h3-color;
-  font-size: $content-h3-size;
-  font-weight: $content-h3-weight;
-}
+  h3 {
+    color: $content-h3-color;
+    font-size: $content-h3-size;
+    font-weight: $content-h3-weight;
+  }
 
-.content h4 {
-  color: $content-h4-color;
-  font-size: $content-h4-size;
-  font-weight: $content-h4-weight;
-}
+  h4 {
+    color: $content-h4-color;
+    font-size: $content-h4-size;
+    font-weight: $content-h4-weight;
+  }
 
-.content h5 {
-  color: $content-h5-color;
-  font-size: $content-h5-size;
-  font-weight: $content-h5-weight;
-}
+  h5 {
+    color: $content-h5-color;
+    font-size: $content-h5-size;
+    font-weight: $content-h5-weight;
+  }
+
+  a {
+    color: $content-a-color;
+  }
+
+  a:hover {
+    color: darken($content-a-color, 20%);
+    text-decoration: underline;
+  }
+
+  p {
+    padding: 5px;
+    margin: 0 0 10px;
+  }
+
+  .text-center {
+    text-align: center;
+  }
+
+  .text-justify {
+    text-align: justify;
+  }
+
+  .text-right {
+    text-align: right;
+  }
+
+  blockquote {
+    padding-left: 20px;
+    padding-right: 8px;
+    border-width: 0 0 0 5px;
+    border-style: solid;
+    border-color: $content-quote-border-color;
+    font-style: italic;
+  }
+
+  table {
+    border-collapse: collapse;
+  }
+
+  table caption {
+    padding-top: 8px;
+    padding-bottom: 8px;
+    color: #777;
+    text-align: left;
+  }
+
+  table td, table th {
+    border: 1px solid #ddd;
+    padding: 8px;
+  }
+
+  table tr:nth-child(even) {
+    background-color: #f2f2f2;
+  }
+
+  table th {
+    padding-top: 12px;
+    padding-bottom: 12px;
+    text-align: left;
+    background-color: $content-table-header-bg-color;
+    color: white;
+  }
 
-.content a {
-  color: $content-a-color;
+  pre {
+    display: block;
+    padding: 9.5px;
+    margin: 0 0 10px;
+    font-size: 13px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background-color: #f5f5f5;
+    word-break: break-all;
+    word-wrap: break-word;
+    color: #333333;
+  }
 }

ot_templating/Resources/Public/assets/style/style.css

@@ -7,11 +7,6 @@ a {
   text-decoration: none;
 }
 
-p {
-  padding: 5px;
-  margin: 0 0 10px;
-}
-
 .ui-datepicker {
   z-index: 9998 !important;
 }
@@ -24,7 +19,7 @@ p {
 body {
   max-width: 1170px;
   margin: auto;
-  font-family: Liberation Sans, Arial;
+  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
   font-size: 14px;
 }
 
@@ -252,50 +247,102 @@ ul.dropdown-left {
   flex: 1;
   padding: 0 2em;
   min-width: 600px;
+  line-height: 1.4em;
 }
-
-.content h1, h2, h3, h4, h5, h6 {
+.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
   font-weight: 500;
-  line-height: 1.1;
 }
-
-.content h1, h2 {
+.content h1, .content h2 {
   padding: 5px;
 }
-
 .content h1 {
   color: #4facc6;
   font-size: 1.6em;
   font-weight: 500;
 }
-
 .content h2 {
   color: #4facc6;
-  font-size: 1.6em;
+  font-size: 1.4em;
   font-weight: 500;
 }
-
 .content h3 {
   color: #4facc6;
   font-size: 1.2em;
   font-weight: 500;
 }
-
 .content h4 {
   color: #333333;
   font-size: 1.2em;
   font-weight: 500;
 }
-
 .content h5 {
   color: #333333;
   font-size: 1em;
   font-weight: 500;
 }
-
 .content a {
   color: #4facc6;
 }
+.content a:hover {
+  color: #2b7184;
+  text-decoration: underline;
+}
+.content p {
+  padding: 5px;
+  margin: 0 0 10px;
+}
+.content .text-center {
+  text-align: center;
+}
+.content .text-justify {
+  text-align: justify;
+}
+.content .text-right {
+  text-align: right;
+}
+.content blockquote {
+  padding-left: 20px;
+  padding-right: 8px;
+  border-width: 0 0 0 5px;
+  border-style: solid;
+  border-color: #4facc6;
+  font-style: italic;
+}
+.content table {
+  border-collapse: collapse;
+}
+.content table caption {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  color: #777;
+  text-align: left;
+}
+.content table td, .content table th {
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+.content table tr:nth-child(even) {
+  background-color: #f2f2f2;
+}
+.content table th {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  text-align: left;
+  background-color: #4facc6;
+  color: white;
+}
+.content pre {
+  display: block;
+  padding: 9.5px;
+  margin: 0 0 10px;
+  font-size: 13px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #f5f5f5;
+  word-break: break-all;
+  word-wrap: break-word;
+  color: #333333;
+}
 
 #footer {
   margin-top: 40px;

ot_templating/Resources/Public/assets/style/style.scss

@@ -1,5 +1,5 @@
 // Default constants values
-$font-stack: Liberation Sans, Arial !default;
+$font-stack: Arial,"Helvetica Neue",Helvetica,sans-serif !default;
 $font-size: 14px !default;
 
 $main-title-color: #333 !default;
@@ -38,7 +38,7 @@ $content-h1-color: #4facc6 !default;
 $content-h1-size: 1.6em !default;
 $content-h1-weight: 500 !default;
 $content-h2-color: #4facc6 !default;
-$content-h2-size: 1.6em !default;
+$content-h2-size: 1.4em !default;
 $content-h2-weight: 500 !default;
 $content-h3-color: #4facc6 !default;
 $content-h3-size: 1.2em !default;
@@ -51,6 +51,7 @@ $content-h5-size: 1em !default;
 $content-h5-weight: 500 !default;
 
 $content-a-color: #4facc6 !default;
+$content-p-font: Arial;
 
 $forms-label-color: 4facc6 !default;
 $forms-control-focused-border-color: #7db6e2 !default;

ot_templating/Resources/Public/assets/style/theme-blue.css

@@ -7,11 +7,6 @@ a {
   text-decoration: none;
 }
 
-p {
-  padding: 5px;
-  margin: 0 0 10px;
-}
-
 .ui-datepicker {
   z-index: 9998 !important;
 }
@@ -24,7 +19,7 @@ p {
 body {
   max-width: 1170px;
   margin: auto;
-  font-family: Liberation Sans, Arial;
+  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
   font-size: 14px;
 }
 
@@ -144,7 +139,7 @@ ul.dropdown-left {
   flex-direction: row;
   flex-wrap: wrap;
   list-style: none;
-  background-color: #3259d7;
+  background-color: #097f9a;
   padding: 0;
   align-items: center;
   margin: 0 0 1em;
@@ -156,7 +151,7 @@ ul.dropdown-left {
   content: "";
   /* empty but necessary */
   position: absolute;
-  background-color: #3259d7;
+  background-color: #097f9a;
   height: 100%;
   left: -50vw;
   width: 200vw;
@@ -168,7 +163,7 @@ ul.dropdown-left {
 }
 
 #menu li.active {
-  background-color: #3259d7;
+  background-color: #097f9a;
 }
 
 #menu li a {
@@ -201,7 +196,7 @@ ul.dropdown-left {
 }
 
 #menu .dropdown.dropdown-displayed {
-  background-color: #3259d7;
+  background-color: #097f9a;
   color: #555;
 }
 
@@ -226,7 +221,7 @@ ul.dropdown-left {
 }
 
 #menu .dropdown-menu li.active {
-  background-color: #3259d7;
+  background-color: #097f9a;
 }
 
 #menu .dropdown-menu li.active > a {
@@ -252,49 +247,101 @@ ul.dropdown-left {
   flex: 1;
   padding: 0 2em;
   min-width: 600px;
+  line-height: 1.4em;
 }
-
-.content h1, h2, h3, h4, h5, h6 {
+.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
   font-weight: 500;
-  line-height: 1.1;
 }
-
-.content h1, h2 {
+.content h1, .content h2 {
   padding: 5px;
 }
-
 .content h1 {
-  color: #3259d7;
+  color: #097f9a;
   font-size: 1.6em;
   font-weight: 500;
 }
-
 .content h2 {
-  color: #3259d7;
-  font-size: 1.6em;
+  color: #333333;
+  font-size: 1.4em;
   font-weight: 500;
 }
-
 .content h3 {
-  color: #3259d7;
+  color: #333333;
   font-size: 1.2em;
   font-weight: 500;
 }
-
 .content h4 {
-  color: #3259d7;
+  color: #333333;
   font-size: 1.2em;
   font-weight: 500;
 }
-
 .content h5 {
-  color: #3259d7;
+  color: #333333;
   font-size: 1em;
   font-weight: 500;
 }
-
 .content a {
-  color: #3259d7;
+  color: #097f9a;
+}
+.content a:hover {
+  color: #03303a;
+  text-decoration: underline;
+}
+.content p {
+  padding: 5px;
+  margin: 0 0 10px;
+}
+.content .text-center {
+  text-align: center;
+}
+.content .text-justify {
+  text-align: justify;
+}
+.content .text-right {
+  text-align: right;
+}
+.content blockquote {
+  padding-left: 20px;
+  padding-right: 8px;
+  border-width: 0 0 0 5px;
+  border-style: solid;
+  border-color: #097f9a;
+  font-style: italic;
+}
+.content table {
+  border-collapse: collapse;
+}
+.content table caption {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  color: #777;
+  text-align: left;
+}
+.content table td, .content table th {
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+.content table tr:nth-child(even) {
+  background-color: #f2f2f2;
+}
+.content table th {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  text-align: left;
+  background-color: #097f9a;
+  color: white;
+}
+.content pre {
+  display: block;
+  padding: 9.5px;
+  margin: 0 0 10px;
+  font-size: 13px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #f5f5f5;
+  word-break: break-all;
+  word-wrap: break-word;
+  color: #333333;
 }
 
 #footer {
@@ -394,7 +441,7 @@ footer .logo-ot {
 }
 
 .user-toolbar .dropside-menu {
-  background-color: #3259d7;
+  background-color: #097f9a;
   box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
 }
 
@@ -408,7 +455,7 @@ footer .logo-ot {
 #login-popup .popup-form {
   visibility: hidden;
   width: 240px;
-  background-color: #3259d7;
+  background-color: #097f9a;
   border-radius: 4px;
   padding: 1em 1.6em;
   position: absolute;
@@ -446,7 +493,7 @@ footer .logo-ot {
 }
 
 .breadcrumb a {
-  color: #3259d7;
+  color: #097f9a;
 }
 
 .breadcrumb li {
@@ -501,7 +548,7 @@ footer .logo-ot {
 }
 
 .ot-box header h3 {
-  color: #3259d7;
+  color: #097f9a;
   font-size: 1.2em;
   font-weight: bold;
   padding: 0;
@@ -509,7 +556,7 @@ footer .logo-ot {
 }
 
 .ot-box a {
-  color: #3259d7;
+  color: #097f9a;
 }
 
 .ot-box footer:not(:empty) {
@@ -610,8 +657,8 @@ footer .logo-ot {
 }
 
 .ot-all-events .event-search form button {
-  border: solid 2px #3259d7;
-  color: #3259d7;
+  border: solid 2px #097f9a;
+  color: #097f9a;
 }
 
 .ot-all-events .event-search form button:hover {
@@ -718,10 +765,10 @@ footer .logo-ot {
 }
 
 .ot-show-event .go-back {
-  color: #3259d7;
+  color: #097f9a;
   font-weight: bold;
   padding: 0.5em 0.7em;
-  border: solid 2px #3259d7;
+  border: solid 2px #097f9a;
   border-radius: 6px;
   margin: auto;
 }
@@ -886,7 +933,7 @@ textarea.form-control {
 }
 
 .form-control:focus {
-  border: 2px solid #3259d7;
+  border: 2px solid #097f9a;
 }
 
 .form-control:invalid {
@@ -953,7 +1000,7 @@ form button[type=submit]:hover {
   color: #262626;
   padding: 0 2em;
   margin: 0 0.5em 3em 0.5em;
-  border-left: solid 2px #3259d7;
+  border-left: solid 2px #097f9a;
 }
 
 .fce-2col {

ot_templating/Resources/Public/assets/style/theme-blue.scss

@@ -1,5 +1,5 @@
 // Blue Theme
-$main-color: #3259d7;
+$main-color: #097f9a;
 
 @use 'style' with (
   $menu-background-color: $main-color,
@@ -26,10 +26,10 @@ $main-color: #3259d7;
   $otbox-header-font-color: $main-color,
 
   $content-h1-color: $main-color,
-  $content-h2-color: $main-color,
-  $content-h3-color: $main-color,
-  $content-h4-color: $main-color,
-  $content-h5-color: $main-color,
+  $content-h2-color: #333333,
+  $content-h3-color: #333333,
+  $content-h4-color: #333333,
+  $content-h5-color: #333333,
 
   $content-a-color: $main-color,
 

ot_templating/Resources/Public/assets/style/theme-green.css

@@ -7,11 +7,6 @@ a {
   text-decoration: none;
 }
 
-p {
-  padding: 5px;
-  margin: 0 0 10px;
-}
-
 .ui-datepicker {
   z-index: 9998 !important;
 }
@@ -24,7 +19,7 @@ p {
 body {
   max-width: 1170px;
   margin: auto;
-  font-family: Liberation Sans, Arial;
+  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
   font-size: 14px;
 }
 
@@ -252,50 +247,102 @@ ul.dropdown-left {
   flex: 1;
   padding: 0 2em;
   min-width: 600px;
+  line-height: 1.4em;
 }
-
-.content h1, h2, h3, h4, h5, h6 {
+.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
   font-weight: 500;
-  line-height: 1.1;
 }
-
-.content h1, h2 {
+.content h1, .content h2 {
   padding: 5px;
 }
-
 .content h1 {
   color: #04a04c;
   font-size: 1.6em;
   font-weight: 500;
 }
-
 .content h2 {
   color: #04a04c;
-  font-size: 1.6em;
+  font-size: 1.4em;
   font-weight: 500;
 }
-
 .content h3 {
   color: #04a04c;
   font-size: 1.2em;
   font-weight: 500;
 }
-
 .content h4 {
   color: #04a04c;
   font-size: 1.2em;
   font-weight: 500;
 }
-
 .content h5 {
   color: #04a04c;
   font-size: 1em;
   font-weight: 500;
 }
-
 .content a {
   color: #04a04c;
 }
+.content a:hover {
+  color: #023c1d;
+  text-decoration: underline;
+}
+.content p {
+  padding: 5px;
+  margin: 0 0 10px;
+}
+.content .text-center {
+  text-align: center;
+}
+.content .text-justify {
+  text-align: justify;
+}
+.content .text-right {
+  text-align: right;
+}
+.content blockquote {
+  padding-left: 20px;
+  padding-right: 8px;
+  border-width: 0 0 0 5px;
+  border-style: solid;
+  border-color: #04a04c;
+  font-style: italic;
+}
+.content table {
+  border-collapse: collapse;
+}
+.content table caption {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  color: #777;
+  text-align: left;
+}
+.content table td, .content table th {
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+.content table tr:nth-child(even) {
+  background-color: #f2f2f2;
+}
+.content table th {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  text-align: left;
+  background-color: #04a04c;
+  color: white;
+}
+.content pre {
+  display: block;
+  padding: 9.5px;
+  margin: 0 0 10px;
+  font-size: 13px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #f5f5f5;
+  word-break: break-all;
+  word-wrap: break-word;
+  color: #333333;
+}
 
 #footer {
   margin-top: 40px;

ot_templating/Resources/Public/assets/style/theme-grey.css

@@ -7,11 +7,6 @@ a {
   text-decoration: none;
 }
 
-p {
-  padding: 5px;
-  margin: 0 0 10px;
-}
-
 .ui-datepicker {
   z-index: 9998 !important;
 }
@@ -24,7 +19,7 @@ p {
 body {
   max-width: 1170px;
   margin: auto;
-  font-family: Liberation Sans, Arial;
+  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
   font-size: 14px;
 }
 
@@ -252,50 +247,102 @@ ul.dropdown-left {
   flex: 1;
   padding: 0 2em;
   min-width: 600px;
+  line-height: 1.4em;
 }
-
-.content h1, h2, h3, h4, h5, h6 {
+.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
   font-weight: 500;
-  line-height: 1.1;
 }
-
-.content h1, h2 {
+.content h1, .content h2 {
   padding: 5px;
 }
-
 .content h1 {
   color: #8c8c8c;
   font-size: 1.6em;
   font-weight: 500;
 }
-
 .content h2 {
   color: #8c8c8c;
-  font-size: 1.6em;
+  font-size: 1.4em;
   font-weight: 500;
 }
-
 .content h3 {
   color: #8c8c8c;
   font-size: 1.2em;
   font-weight: 500;
 }
-
 .content h4 {
   color: #8c8c8c;
   font-size: 1.2em;
   font-weight: 500;
 }
-
 .content h5 {
   color: #8c8c8c;
   font-size: 1em;
   font-weight: 500;
 }
-
 .content a {
   color: #8c8c8c;
 }
+.content a:hover {
+  color: #595959;
+  text-decoration: underline;
+}
+.content p {
+  padding: 5px;
+  margin: 0 0 10px;
+}
+.content .text-center {
+  text-align: center;
+}
+.content .text-justify {
+  text-align: justify;
+}
+.content .text-right {
+  text-align: right;
+}
+.content blockquote {
+  padding-left: 20px;
+  padding-right: 8px;
+  border-width: 0 0 0 5px;
+  border-style: solid;
+  border-color: #8c8c8c;
+  font-style: italic;
+}
+.content table {
+  border-collapse: collapse;
+}
+.content table caption {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  color: #777;
+  text-align: left;
+}
+.content table td, .content table th {
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+.content table tr:nth-child(even) {
+  background-color: #f2f2f2;
+}
+.content table th {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  text-align: left;
+  background-color: #8c8c8c;
+  color: white;
+}
+.content pre {
+  display: block;
+  padding: 9.5px;
+  margin: 0 0 10px;
+  font-size: 13px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #f5f5f5;
+  word-break: break-all;
+  word-wrap: break-word;
+  color: #333333;
+}
 
 #footer {
   margin-top: 40px;

ot_templating/Resources/Public/assets/style/theme-light-blue.css

@@ -7,11 +7,6 @@ a {
   text-decoration: none;
 }
 
-p {
-  padding: 5px;
-  margin: 0 0 10px;
-}
-
 .ui-datepicker {
   z-index: 9998 !important;
 }
@@ -24,7 +19,7 @@ p {
 body {
   max-width: 1170px;
   margin: auto;
-  font-family: Liberation Sans, Arial;
+  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
   font-size: 14px;
 }
 
@@ -252,50 +247,102 @@ ul.dropdown-left {
   flex: 1;
   padding: 0 2em;
   min-width: 600px;
+  line-height: 1.4em;
 }
-
-.content h1, h2, h3, h4, h5, h6 {
+.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
   font-weight: 500;
-  line-height: 1.1;
 }
-
-.content h1, h2 {
+.content h1, .content h2 {
   padding: 5px;
 }
-
 .content h1 {
   color: #0aa5ec;
   font-size: 1.6em;
   font-weight: 500;
 }
-
 .content h2 {
   color: #0aa5ec;
-  font-size: 1.6em;
+  font-size: 1.4em;
   font-weight: 500;
 }
-
 .content h3 {
   color: #0aa5ec;
   font-size: 1.2em;
   font-weight: 500;
 }
-
 .content h4 {
   color: #0aa5ec;
   font-size: 1.2em;
   font-weight: 500;
 }
-
 .content h5 {
   color: #0aa5ec;
   font-size: 1em;
   font-weight: 500;
 }
-
 .content a {
   color: #0aa5ec;
 }
+.content a:hover {
+  color: #06618a;
+  text-decoration: underline;
+}
+.content p {
+  padding: 5px;
+  margin: 0 0 10px;
+}
+.content .text-center {
+  text-align: center;
+}
+.content .text-justify {
+  text-align: justify;
+}
+.content .text-right {
+  text-align: right;
+}
+.content blockquote {
+  padding-left: 20px;
+  padding-right: 8px;
+  border-width: 0 0 0 5px;
+  border-style: solid;
+  border-color: #0aa5ec;
+  font-style: italic;
+}
+.content table {
+  border-collapse: collapse;
+}
+.content table caption {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  color: #777;
+  text-align: left;
+}
+.content table td, .content table th {
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+.content table tr:nth-child(even) {
+  background-color: #f2f2f2;
+}
+.content table th {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  text-align: left;
+  background-color: #0aa5ec;
+  color: white;
+}
+.content pre {
+  display: block;
+  padding: 9.5px;
+  margin: 0 0 10px;
+  font-size: 13px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #f5f5f5;
+  word-break: break-all;
+  word-wrap: break-word;
+  color: #333333;
+}
 
 #footer {
   margin-top: 40px;

ot_templating/Resources/Public/assets/style/theme-light-red.css

@@ -7,11 +7,6 @@ a {
   text-decoration: none;
 }
 
-p {
-  padding: 5px;
-  margin: 0 0 10px;
-}
-
 .ui-datepicker {
   z-index: 9998 !important;
 }
@@ -24,7 +19,7 @@ p {
 body {
   max-width: 1170px;
   margin: auto;
-  font-family: Liberation Sans, Arial;
+  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
   font-size: 14px;
 }
 
@@ -252,50 +247,102 @@ ul.dropdown-left {
   flex: 1;
   padding: 0 2em;
   min-width: 600px;
+  line-height: 1.4em;
 }
-
-.content h1, h2, h3, h4, h5, h6 {
+.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
   font-weight: 500;
-  line-height: 1.1;
 }
-
-.content h1, h2 {
+.content h1, .content h2 {
   padding: 5px;
 }
-
 .content h1 {
   color: #dd453f;
   font-size: 1.6em;
   font-weight: 500;
 }
-
 .content h2 {
   color: #dd453f;
-  font-size: 1.6em;
+  font-size: 1.4em;
   font-weight: 500;
 }
-
 .content h3 {
   color: #dd453f;
   font-size: 1.2em;
   font-weight: 500;
 }
-
 .content h4 {
   color: #dd453f;
   font-size: 1.2em;
   font-weight: 500;
 }
-
 .content h5 {
   color: #dd453f;
   font-size: 1em;
   font-weight: 500;
 }
-
 .content a {
   color: #dd453f;
 }
+.content a:hover {
+  color: #9b201b;
+  text-decoration: underline;
+}
+.content p {
+  padding: 5px;
+  margin: 0 0 10px;
+}
+.content .text-center {
+  text-align: center;
+}
+.content .text-justify {
+  text-align: justify;
+}
+.content .text-right {
+  text-align: right;
+}
+.content blockquote {
+  padding-left: 20px;
+  padding-right: 8px;
+  border-width: 0 0 0 5px;
+  border-style: solid;
+  border-color: #dd453f;
+  font-style: italic;
+}
+.content table {
+  border-collapse: collapse;
+}
+.content table caption {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  color: #777;
+  text-align: left;
+}
+.content table td, .content table th {
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+.content table tr:nth-child(even) {
+  background-color: #f2f2f2;
+}
+.content table th {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  text-align: left;
+  background-color: #dd453f;
+  color: white;
+}
+.content pre {
+  display: block;
+  padding: 9.5px;
+  margin: 0 0 10px;
+  font-size: 13px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #f5f5f5;
+  word-break: break-all;
+  word-wrap: break-word;
+  color: #333333;
+}
 
 #footer {
   margin-top: 40px;

ot_templating/Resources/Public/assets/style/theme-orange.css

@@ -7,11 +7,6 @@ a {
   text-decoration: none;
 }
 
-p {
-  padding: 5px;
-  margin: 0 0 10px;
-}
-
 .ui-datepicker {
   z-index: 9998 !important;
 }
@@ -24,7 +19,7 @@ p {
 body {
   max-width: 1170px;
   margin: auto;
-  font-family: Liberation Sans, Arial;
+  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
   font-size: 14px;
 }
 
@@ -252,50 +247,102 @@ ul.dropdown-left {
   flex: 1;
   padding: 0 2em;
   min-width: 600px;
+  line-height: 1.4em;
 }
-
-.content h1, h2, h3, h4, h5, h6 {
+.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
   font-weight: 500;
-  line-height: 1.1;
 }
-
-.content h1, h2 {
+.content h1, .content h2 {
   padding: 5px;
 }
-
 .content h1 {
   color: #e4611b;
   font-size: 1.6em;
   font-weight: 500;
 }
-
 .content h2 {
   color: #e4611b;
-  font-size: 1.6em;
+  font-size: 1.4em;
   font-weight: 500;
 }
-
 .content h3 {
   color: #e4611b;
   font-size: 1.2em;
   font-weight: 500;
 }
-
 .content h4 {
   color: #e4611b;
   font-size: 1.2em;
   font-weight: 500;
 }
-
 .content h5 {
   color: #e4611b;
   font-size: 1em;
   font-weight: 500;
 }
-
 .content a {
   color: #e4611b;
 }
+.content a:hover {
+  color: #893a10;
+  text-decoration: underline;
+}
+.content p {
+  padding: 5px;
+  margin: 0 0 10px;
+}
+.content .text-center {
+  text-align: center;
+}
+.content .text-justify {
+  text-align: justify;
+}
+.content .text-right {
+  text-align: right;
+}
+.content blockquote {
+  padding-left: 20px;
+  padding-right: 8px;
+  border-width: 0 0 0 5px;
+  border-style: solid;
+  border-color: #e4611b;
+  font-style: italic;
+}
+.content table {
+  border-collapse: collapse;
+}
+.content table caption {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  color: #777;
+  text-align: left;
+}
+.content table td, .content table th {
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+.content table tr:nth-child(even) {
+  background-color: #f2f2f2;
+}
+.content table th {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  text-align: left;
+  background-color: #e4611b;
+  color: white;
+}
+.content pre {
+  display: block;
+  padding: 9.5px;
+  margin: 0 0 10px;
+  font-size: 13px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #f5f5f5;
+  word-break: break-all;
+  word-wrap: break-word;
+  color: #333333;
+}
 
 #footer {
   margin-top: 40px;

ot_templating/Resources/Public/assets/style/theme-purple.css

@@ -7,11 +7,6 @@ a {
   text-decoration: none;
 }
 
-p {
-  padding: 5px;
-  margin: 0 0 10px;
-}
-
 .ui-datepicker {
   z-index: 9998 !important;
 }
@@ -24,7 +19,7 @@ p {
 body {
   max-width: 1170px;
   margin: auto;
-  font-family: Liberation Sans, Arial;
+  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
   font-size: 14px;
 }
 
@@ -252,50 +247,102 @@ ul.dropdown-left {
   flex: 1;
   padding: 0 2em;
   min-width: 600px;
+  line-height: 1.4em;
 }
-
-.content h1, h2, h3, h4, h5, h6 {
+.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
   font-weight: 500;
-  line-height: 1.1;
 }
-
-.content h1, h2 {
+.content h1, .content h2 {
   padding: 5px;
 }
-
 .content h1 {
   color: #a5377e;
   font-size: 1.6em;
   font-weight: 500;
 }
-
 .content h2 {
   color: #a5377e;
-  font-size: 1.6em;
+  font-size: 1.4em;
   font-weight: 500;
 }
-
 .content h3 {
   color: #a5377e;
   font-size: 1.2em;
   font-weight: 500;
 }
-
 .content h4 {
   color: #a5377e;
   font-size: 1.2em;
   font-weight: 500;
 }
-
 .content h5 {
   color: #a5377e;
   font-size: 1em;
   font-weight: 500;
 }
-
 .content a {
   color: #a5377e;
 }
+.content a:hover {
+  color: #591e44;
+  text-decoration: underline;
+}
+.content p {
+  padding: 5px;
+  margin: 0 0 10px;
+}
+.content .text-center {
+  text-align: center;
+}
+.content .text-justify {
+  text-align: justify;
+}
+.content .text-right {
+  text-align: right;
+}
+.content blockquote {
+  padding-left: 20px;
+  padding-right: 8px;
+  border-width: 0 0 0 5px;
+  border-style: solid;
+  border-color: #a5377e;
+  font-style: italic;
+}
+.content table {
+  border-collapse: collapse;
+}
+.content table caption {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  color: #777;
+  text-align: left;
+}
+.content table td, .content table th {
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+.content table tr:nth-child(even) {
+  background-color: #f2f2f2;
+}
+.content table th {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  text-align: left;
+  background-color: #a5377e;
+  color: white;
+}
+.content pre {
+  display: block;
+  padding: 9.5px;
+  margin: 0 0 10px;
+  font-size: 13px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #f5f5f5;
+  word-break: break-all;
+  word-wrap: break-word;
+  color: #333333;
+}
 
 #footer {
   margin-top: 40px;

ot_templating/Resources/Public/assets/style/theme-red.css

@@ -7,11 +7,6 @@ a {
   text-decoration: none;
 }
 
-p {
-  padding: 5px;
-  margin: 0 0 10px;
-}
-
 .ui-datepicker {
   z-index: 9998 !important;
 }
@@ -24,7 +19,7 @@ p {
 body {
   max-width: 1170px;
   margin: auto;
-  font-family: Liberation Sans, Arial;
+  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
   font-size: 14px;
 }
 
@@ -252,50 +247,102 @@ ul.dropdown-left {
   flex: 1;
   padding: 0 2em;
   min-width: 600px;
+  line-height: 1.4em;
 }
-
-.content h1, h2, h3, h4, h5, h6 {
+.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
   font-weight: 500;
-  line-height: 1.1;
 }
-
-.content h1, h2 {
+.content h1, .content h2 {
   padding: 5px;
 }
-
 .content h1 {
   color: #df0009;
   font-size: 1.6em;
   font-weight: 500;
 }
-
 .content h2 {
   color: #df0009;
-  font-size: 1.6em;
+  font-size: 1.4em;
   font-weight: 500;
 }
-
 .content h3 {
   color: #df0009;
   font-size: 1.2em;
   font-weight: 500;
 }
-
 .content h4 {
   color: #df0009;
   font-size: 1.2em;
   font-weight: 500;
 }
-
 .content h5 {
   color: #df0009;
   font-size: 1em;
   font-weight: 500;
 }
-
 .content a {
   color: #df0009;
 }
+.content a:hover {
+  color: #790005;
+  text-decoration: underline;
+}
+.content p {
+  padding: 5px;
+  margin: 0 0 10px;
+}
+.content .text-center {
+  text-align: center;
+}
+.content .text-justify {
+  text-align: justify;
+}
+.content .text-right {
+  text-align: right;
+}
+.content blockquote {
+  padding-left: 20px;
+  padding-right: 8px;
+  border-width: 0 0 0 5px;
+  border-style: solid;
+  border-color: #df0009;
+  font-style: italic;
+}
+.content table {
+  border-collapse: collapse;
+}
+.content table caption {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  color: #777;
+  text-align: left;
+}
+.content table td, .content table th {
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+.content table tr:nth-child(even) {
+  background-color: #f2f2f2;
+}
+.content table th {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  text-align: left;
+  background-color: #df0009;
+  color: white;
+}
+.content pre {
+  display: block;
+  padding: 9.5px;
+  margin: 0 0 10px;
+  font-size: 13px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #f5f5f5;
+  word-break: break-all;
+  word-wrap: break-word;
+  color: #333333;
+}
 
 #footer {
   margin-top: 40px;