Better organize paste template with separate CSS file and custom elements.

sanketj · sanketj · commit 8644f3bcd9f4 · 2020-05-15T18:11:38.000-07:00
diff --git a/block-without-width.html b/block-without-width.html
@@ -1,8 +1,7 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <style>
-        </style>
+        <link rel='stylesheet' type='text/css' href='paste-template.css'>
     </head>
     <body>
         <script>
@@ -18,8 +17,8 @@
             }
         </script>
         Some not selected text before.
-		<div style="width:300px; background-color: green; color:yellow;">AREA-SELECTED HEADING</div>
-		<div>Short area-selected text</div>
+        <div style="width:300px; background-color: green; color:yellow;">AREA-SELECTED HEADING</div>
+        <div>Short area-selected text</div>
         <script src='paste-template.js'></script>
     </body>
 </html>
diff --git a/paste-template.css b/paste-template.css
@@ -0,0 +1,46 @@
+#bodyOverlay {
+    background-color: rgba(0, 0, 0, 0.5);
+    display: block;
+    left: 0;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    width: 100%;
+}
+
+#bodyOverlay.hidden {
+    display: none;
+}
+
+paste-toolbar {
+    display: flex;
+    position: absolute;
+}
+
+paste-toolbar.hidden {
+    display: none;
+}
+
+paste-toolbar > * {
+    background-color: lightgrey;
+    border:1px solid grey;
+    border-radius:2px;
+}
+
+paste-overlay {
+    border: 1px dashed white;
+    display: block;
+    overflow: hidden;
+    position: absolute;
+}
+
+paste-overlay.hidden {
+    display: none;
+}
+
+#ceContainer {
+    border: 1px solid black;
+    min-height: 200px;
+    overflow: auto;
+    padding: 10px;
+}
diff --git a/paste-template.js b/paste-template.js
