chylex/TweetDuck
1
0
Fork 0
mirror of https://github.com/chylex/TweetDuck.git synced 2025-04-13 18:15:48 +02:00
Code

Improve login/logout page design

Browse Source
This commit is contained in:
chylex 2017-07-31 20:29:07 +02:00
parent f181f1fadc
commit 50ab1a6ac3
1 changed files with 24 additions and 16 deletions

40
Resources/Scripts/twitter.js
View File

@ -10,23 +10,31 @@
var style = document.createElement("style");
document.head.appendChild(style);
style.sheet.insertRule("body { overflow: hidden !important; }", 0); // remove scrollbar
style.sheet.insertRule(".topbar { display: none !important; }", 0); // hide top bar
style.sheet.insertRule(".page-canvas, .buttons, .btn, input { border-radius: 0 !important; }", 0); // sharpen borders
style.sheet.insertRule("input { padding: 5px 8px 4px !important; }", 0); // tweak input padding
style.sheet.insertRule("#doc { width: 100%; height: 100%; margin: 0; position: absolute; display: table; }", 0); // center everything
style.sheet.insertRule("#page-outer { display: table-cell; vertical-align: middle; }", 0); // center everything
style.sheet.insertRule("#page-container { padding: 0 20px !important; width: 100% !important; box-sizing: border-box !important; }", 0); // center everything
style.sheet.insertRule(".page-canvas { margin: 0 auto !important; }", 0); // center everything
let addRule = (rule) => {
style.sheet.insertRule(rule, 0);
};
addRule("body { overflow: hidden !important; background-color: #1c6399 !important; }"); // remove scrollbar and change background
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"){
style.sheet.insertRule(".page-canvas { width: auto !important; max-width: 888px; }", 0); // fix min width
style.sheet.insertRule(".signout-wrapper { width: auto !important; }", 0); // fix min width
style.sheet.insertRule(".btn { margin: 0 4px !important; }", 0); // add margin around buttons
style.sheet.insertRule(".btn.cancel { border: 1px solid #bbc1c5 !important; }", 0); // add border to cancel button
style.sheet.insertRule(".aside p { display: none; }", 0); // hide text below the logout dialog
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
}
};