From 50ab1a6ac366511b29cd40adbb06381e3deb9b0d Mon Sep 17 00:00:00 2001
From: chylex <contact@chylex.com>
Date: Mon, 31 Jul 2017 20:29:07 +0200
Subject: [PATCH] Improve login/logout page design
---
Resources/Scripts/twitter.js | 40 +++++++++++++++++++++---------------
1 file changed, 24 insertions(+), 16 deletions(-)
diff --git a/Resources/Scripts/twitter.js b/Resources/Scripts/twitter.js
index 95cbd472..12372927 100644
--- a/Resources/Scripts/twitter.js
+++ b/Resources/Scripts/twitter.js
@@ -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
}
};