render_box comment embeddable, misc

src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss

@@ -223,21 +223,49 @@ table.table-bordered {
    }
 }
 
-/// chill elements of design
+/// comments quotes
 .chill-user-quote {
    border-left: 10px solid $yellow;
    margin: 1.5em 10px;
    padding: 0.5em 15px;
-   quotes: "\201C" "\201D" "\2018" "\2019";
    background-color: $gray-200;
-   blockquote {
-      border-left: 0.4em solid $gray-400;
-      padding-left: 0.9em;
-      margin-left: 0.9em;
+   color: $gray-800;
+   font-size: 90%;
+
+   // test a bottom right decoration (to be confirmed)
+   &.test {
+      position: relative;
+      &:after {
+         content: '';
+         position: absolute;
+         width: 0px; height: 0px;
+         bottom: 0; right: 0;
+         background: $white;
+         border-top: 10px solid $gray-200;
+         border-left: 10px solid $gray-200;
+         border-right: 10px solid $white;
+         border-bottom: 10px solid $white;
+      }
+   }
+
+   // ckeditor citation
+   blockquote p {
       font-style: italic;
+      padding-left: 2em;
+      quotes: "“" "„";
+      position: relative;
+      &:before {
+         content: open-quote;
+         font-size: 400%;
+         color: $gray-400;
+         position: absolute;
+         top: -25px;
+         left: 0;
+      }
    }
 }
 
+/// when there is no data
 .custom_field_no_data,
 .chill-no-data-statement {
    font-style: italic;

src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss

@@ -80,7 +80,7 @@ div.flex-table {
         &:nth-child(even) {
             background-color: $gray-200;
             .chill-user-quote {
-                background-color: $gray-100;
+                background-color: shade-color($gray-200, 5%)
             }
         }
 

src/Bundle/ChillMainBundle/Resources/public/chill/scss/render_box.scss

@@ -98,4 +98,19 @@ section.chill-entity {
             &.address-until {}
         }
     }
+
+    // used for comment-embeddable
+    &.entity-comment-embeddable {
+        width: 100%;
+        div.metadata {
+            font-size: smaller;
+            color: $gray-600;
+            span.user, span.date {
+                text-decoration: underline dotted;
+                &:hover {
+                    color: $gray-700;
+                }
+            }
+        }
+    }
 }