Move styles for text elements to the component

And avoid global styling.

projects/common/element-components/text.component.ts

@@ -44,7 +44,11 @@ import { TextElement } from '../models/text-element';
     '.marking-bar {position: sticky; top: 0; margin-bottom: 15px}',
     '.marking-button {color: #333}',
     '::ng-deep .text-container p strong {letter-spacing: 0.04em; font-weight: 600}', // bold less bold
-    '::ng-deep .text-container p:empty::after {content: "\\00A0"}' // render empty p
+    '::ng-deep .text-container p:empty::after {content: "\\00A0"}', // render empty p
+    '::ng-deep .text-container h1 {font-weight: bold; font-size: 20px;}',
+    '::ng-deep .text-container h2 {font-weight: bold; font-size: 18px;}',
+    '::ng-deep .text-container h3 {font-weight: bold; font-size: 16px;}',
+    '::ng-deep .text-container h4 {font-weight: normal; font-size: 16px;}'
   ]
 })
 export class TextComponent extends ElementComponent {

projects/editor/src/app/text-editor/rich-text-editor.component.css

@@ -32,3 +32,20 @@ app-rich-text-editor .editor-control-line {
   letter-spacing: 0.04em !important;
   font-weight: 600 !important;
 }
+
+.ProseMirror h1 {
+  font-weight: bold;
+  font-size: 20px;
+}
+.ProseMirror h2 {
+  font-weight: bold;
+  font-size: 18px;
+}
+.ProseMirror h3 {
+  font-weight: bold;
+  font-size: 16px;
+}
+.ProseMirror h4 {
+  font-weight: normal;
+  font-size: 16px;
+}

projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.css

@@ -46,3 +46,20 @@ mat-divider {
 ::ng-deep .text-text p:empty::after {
   content: "\00A0";
 }
+
+::ng-deep .text-text h1 {
+  font-weight: bold;
+  font-size: 20px;
+}
+:ng-deep .text-text h2 {
+  font-weight: bold;
+  font-size: 18px;
+}
+::ng-deep .text-text h3 {
+  font-weight: bold;
+  font-size: 16px;
+}
+::ng-deep .text-text h4 {
+  font-weight: normal;
+  font-size: 16px;
+}

projects/editor/src/styles.css

@@ -14,20 +14,3 @@ body {
 
 .drop-list {cursor: grab}
 .drop-list.cdk-drop-list-dragging {cursor: grabbing}
-
-h1 {
-  font-weight: bold;
-  font-size: 20px;
-}
-h2 {
-  font-weight: bold;
-  font-size: 18px;
-}
-h3 {
-  font-weight: bold;
-  font-size: 16px;
-}
-h4 {
-  font-weight: normal;
-  font-size: 16px;
-}

projects/player/src/styles.css

@@ -3,20 +3,3 @@ body {
   margin: 0;
   font-family: 'Roboto', sans-serif
 }
-
-h1 {
-  font-weight: bold;
-  font-size: 20px;
-}
-h2 {
-  font-weight: bold;
-  font-size: 18px;
-}
-h3 {
-  font-weight: bold;
-  font-size: 16px;
-}
-h4 {
-  font-weight: normal;
-  font-size: 16px;
-}