diff --git a/Resources/Scripts/imports/styles/twitter.base.css b/Resources/Scripts/imports/styles/twitter.base.css new file mode 100644 index 00000000..fdf3e777 --- /dev/null +++ b/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; +} diff --git a/Resources/Scripts/imports/styles/twitter.logout.css b/Resources/Scripts/imports/styles/twitter.logout.css new file mode 100644 index 00000000..d6ae3ea6 --- /dev/null +++ b/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; +} diff --git a/Resources/Scripts/twitter.js b/Resources/Scripts/twitter.js index 7d017603..6326f902 100644 --- a/Resources/Scripts/twitter.js +++ b/Resources/Scripts/twitter.js @@ -9,33 +9,14 @@ } var style = document.createElement("style"); - document.head.appendChild(style); - let addRule = (rule) => { - 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 + style.innerText = `#import "styles/twitter.base.css"`; if (location.pathname === "/logout"){ - addRule(".page-canvas { width: auto !important; max-width: 888px; }"); // fix min width - 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 + style.innerText += `#import "styles/twitter.logout.css"`; } + + document.head.appendChild(style); }; setTimeout(injectCSS, 1);