Extract styles from twitter.js into imported CSS files

Resources/Scripts/imports/styles/twitter.base.css

@@ -0,0 +1,61 @@
+/*********************/
+/* Center everything */
+/*********************/
+    
+#doc {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  position: absolute;
+  display: table;
+}
+
+#page-outer {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+#page-container {
+  padding: 0 20px !important;
+  width: 100% !important;
+  box-sizing: border-box !important;
+}
+
+.page-canvas {
+  margin: 0 auto !important;
+}
+
+/*******************/
+/* General styling */
+/*******************/
+
+body {
+  /* remove scrollbar */
+  overflow: hidden !important;
+}
+
+.page-canvas {
+  /* tweak page shadow */
+  box-shadow: 0 0 150px rgba(255, 255, 255, 0.3) !important;
+}
+
+.topbar {
+  /* hide top bar */
+  display: none !important;
+}
+    
+.page-canvas, .buttons, .btn, input {
+  /* sharpen borders */
+  border-radius: 0 !important;
+}
+
+input {
+  /* tweak input padding */
+  padding: 5px 8px 4px !important;
+}
+
+button[type='submit'] {
+  /* style buttons */
+  border: 1px solid rgba(0, 0, 0, 0.3) !important;
+  border-radius: 0 !important;
+}

Resources/Scripts/imports/styles/twitter.logout.css

@@ -0,0 +1,38 @@
+/*****************************/
+/* Fix min width and margins */
+/*****************************/
+
+.page-canvas {
+  width: auto !important;
+  max-width: 888px;
+}
+
+.signout-wrapper {
+  width: auto !important;
+  margin: 0 auto !important;
+}
+
+.signout {
+  margin: 60px 0 54px !important;
+}
+
+.buttons {
+  padding-bottom: 0 !important;
+}
+
+/*******************/
+/* General styling */
+/*******************/
+
+.aside {
+  /* hide elements around dialog */
+  display: none;
+}
+
+.buttons button, .buttons a {
+  /* style buttons */
+  display: inline-block;
+  margin: 0 4px !important;
+  border: 1px solid rgba(0, 0, 0, 0.3) !important;
+  border-radius: 0 !important;
+}

Resources/Scripts/twitter.js

@@ -9,33 +9,14 @@
     }
     
     var style = document.createElement("style");
-    document.head.appendChild(style);
     
-    let addRule = (rule) => {
+    style.innerText = `#import "styles/twitter.base.css"`;
-      style.sheet.insertRule(rule, 0);
-    };
-    
-    addRule("body { overflow: hidden !important; }"); // remove scrollbar
-    addRule(".page-canvas { box-shadow: 0 0 150px rgba(255, 255, 255, 0.3) !important; }"); // change page box shadow
-    addRule(".topbar { display: none !important; }"); // hide top bar
-    
-    addRule(".page-canvas, .buttons, .btn, input { border-radius: 0 !important; }"); // sharpen borders
-    addRule("input { padding: 5px 8px 4px !important; }"); // tweak input padding
-    addRule("button[type='submit'] { border: 1px solid rgba(0, 0, 0, 0.3) !important; border-radius: 0 !important; }"); // style buttons
-    
-    addRule("#doc { width: 100%; height: 100%; margin: 0; position: absolute; display: table; }"); // center everything
-    addRule("#page-outer { display: table-cell; vertical-align: middle; }"); // center everything
-    addRule("#page-container { padding: 0 20px !important; width: 100% !important; box-sizing: border-box !important; }"); // center everything
-    addRule(".page-canvas { margin: 0 auto !important; }"); // center everything
     
     if (location.pathname === "/logout"){
-      addRule(".page-canvas { width: auto !important; max-width: 888px; }"); // fix min width
+      style.innerText += `#import "styles/twitter.logout.css"`;
-      addRule(".signout-wrapper { width: auto !important; margin: 0 auto !important; }"); // fix min width and margins
-      addRule(".signout { margin: 60px 0 54px !important; }"); // fix dialog margins
-      addRule(".buttons { padding-bottom: 0 !important; }"); // fix dialog margins
-      addRule(".aside { display: none; }"); // hide elements around logout dialog
-      addRule(".buttons button, .buttons a { display: inline-block; margin: 0 4px !important; border: 1px solid rgba(0, 0, 0, 0.3) !important; border-radius: 0 !important; }"); // style buttons
     }
+    
+    document.head.appendChild(style);
   };
   
   setTimeout(injectCSS, 1);