improve css contents

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

@@ -19,6 +19,11 @@ $content-a-color: $content-a-color;
 $content-table-header-bg-color: $content-h1-color;
 $content-quote-border-color: $content-h1-color;
 
+$cols-header-background-color: $cols-header-background-color;
+$cols-header-font-color: $cols-header-font-color;
+$cols-header-font-size: $cols-header-font-size;
+$cols-header-font-weight: $cols-header-font-weight;
+
 .content {
   flex: 1;
   padding: 0 2em;
@@ -139,3 +144,23 @@ $content-quote-border-color: $content-h1-color;
     color: #333333;
   }
 }
+
+.leftcol, .rightcol {
+  header {
+      background: $otbox-header-background-color;
+      padding: 0.5em;
+      margin: 1em 0;
+
+      h2, h3 {
+        color: $otbox-header-font-color;
+        font-size: $otbox-header-font-size;
+        font-weight: $otbox-header-font-weight;
+        padding: 0;
+        margin: 0;
+      }
+  }
+
+  p {
+    font-size: 0.9em;
+  }
+}

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

@@ -344,6 +344,22 @@ ul.dropdown-left {
   color: #333333;
 }
 
+.leftcol header, .rightcol header {
+  background: #323232;
+  padding: 0.5em;
+  margin: 1em 0;
+}
+.leftcol header h2, .leftcol header h3, .rightcol header h2, .rightcol header h3 {
+  color: #4facc6;
+  font-size: 1.2em;
+  font-weight: bold;
+  padding: 0;
+  margin: 0;
+}
+.leftcol p, .rightcol p {
+  font-size: 0.9em;
+}
+
 #footer {
   margin-top: 40px;
   position: relative;

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

@@ -53,6 +53,11 @@ $content-h5-weight: 500 !default;
 $content-a-color: #4facc6 !default;
 $content-p-font: Arial;
 
+$cols-header-background-color: #323232 !default;
+$cols-header-font-color: #4facc6 !default;
+$cols-header-font-size: 1.2em !default;
+$cols-header-font-weight: bold !default;
+
 $forms-label-color: 4facc6 !default;
 $forms-control-focused-border-color: #7db6e2 !default;
 $forms-error-color: #e60000 !default;

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

@@ -344,6 +344,22 @@ ul.dropdown-left {
   color: #333333;
 }
 
+.leftcol header, .rightcol header {
+  background: #323232;
+  padding: 0.5em;
+  margin: 1em 0;
+}
+.leftcol header h2, .leftcol header h3, .rightcol header h2, .rightcol header h3 {
+  color: #097f9a;
+  font-size: 1.2em;
+  font-weight: bold;
+  padding: 0;
+  margin: 0;
+}
+.leftcol p, .rightcol p {
+  font-size: 0.9em;
+}
+
 #footer {
   margin-top: 40px;
   position: relative;

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

@@ -344,6 +344,22 @@ ul.dropdown-left {
   color: #333333;
 }
 
+.leftcol header, .rightcol header {
+  background: #323232;
+  padding: 0.5em;
+  margin: 1em 0;
+}
+.leftcol header h2, .leftcol header h3, .rightcol header h2, .rightcol header h3 {
+  color: #04a04c;
+  font-size: 1.2em;
+  font-weight: bold;
+  padding: 0;
+  margin: 0;
+}
+.leftcol p, .rightcol p {
+  font-size: 0.9em;
+}
+
 #footer {
   margin-top: 40px;
   position: relative;

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

@@ -344,6 +344,22 @@ ul.dropdown-left {
   color: #333333;
 }
 
+.leftcol header, .rightcol header {
+  background: #323232;
+  padding: 0.5em;
+  margin: 1em 0;
+}
+.leftcol header h2, .leftcol header h3, .rightcol header h2, .rightcol header h3 {
+  color: #8c8c8c;
+  font-size: 1.2em;
+  font-weight: bold;
+  padding: 0;
+  margin: 0;
+}
+.leftcol p, .rightcol p {
+  font-size: 0.9em;
+}
+
 #footer {
   margin-top: 40px;
   position: relative;

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

@@ -344,6 +344,22 @@ ul.dropdown-left {
   color: #333333;
 }
 
+.leftcol header, .rightcol header {
+  background: #323232;
+  padding: 0.5em;
+  margin: 1em 0;
+}
+.leftcol header h2, .leftcol header h3, .rightcol header h2, .rightcol header h3 {
+  color: #0aa5ec;
+  font-size: 1.2em;
+  font-weight: bold;
+  padding: 0;
+  margin: 0;
+}
+.leftcol p, .rightcol p {
+  font-size: 0.9em;
+}
+
 #footer {
   margin-top: 40px;
   position: relative;

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

@@ -344,6 +344,22 @@ ul.dropdown-left {
   color: #333333;
 }
 
+.leftcol header, .rightcol header {
+  background: #323232;
+  padding: 0.5em;
+  margin: 1em 0;
+}
+.leftcol header h2, .leftcol header h3, .rightcol header h2, .rightcol header h3 {
+  color: #dd453f;
+  font-size: 1.2em;
+  font-weight: bold;
+  padding: 0;
+  margin: 0;
+}
+.leftcol p, .rightcol p {
+  font-size: 0.9em;
+}
+
 #footer {
   margin-top: 40px;
   position: relative;

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

@@ -344,6 +344,22 @@ ul.dropdown-left {
   color: #333333;
 }
 
+.leftcol header, .rightcol header {
+  background: #323232;
+  padding: 0.5em;
+  margin: 1em 0;
+}
+.leftcol header h2, .leftcol header h3, .rightcol header h2, .rightcol header h3 {
+  color: #e4611b;
+  font-size: 1.2em;
+  font-weight: bold;
+  padding: 0;
+  margin: 0;
+}
+.leftcol p, .rightcol p {
+  font-size: 0.9em;
+}
+
 #footer {
   margin-top: 40px;
   position: relative;

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

@@ -344,6 +344,22 @@ ul.dropdown-left {
   color: #333333;
 }
 
+.leftcol header, .rightcol header {
+  background: #323232;
+  padding: 0.5em;
+  margin: 1em 0;
+}
+.leftcol header h2, .leftcol header h3, .rightcol header h2, .rightcol header h3 {
+  color: #a5377e;
+  font-size: 1.2em;
+  font-weight: bold;
+  padding: 0;
+  margin: 0;
+}
+.leftcol p, .rightcol p {
+  font-size: 0.9em;
+}
+
 #footer {
   margin-top: 40px;
   position: relative;

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

@@ -344,6 +344,22 @@ ul.dropdown-left {
   color: #333333;
 }
 
+.leftcol header, .rightcol header {
+  background: #323232;
+  padding: 0.5em;
+  margin: 1em 0;
+}
+.leftcol header h2, .leftcol header h3, .rightcol header h2, .rightcol header h3 {
+  color: #df0009;
+  font-size: 1.2em;
+  font-weight: bold;
+  padding: 0;
+  margin: 0;
+}
+.leftcol p, .rightcol p {
+  font-size: 0.9em;
+}
+
 #footer {
   margin-top: 40px;
   position: relative;