chylex/TweetDuck
1
0
Fork 0
mirror of https://github.com/chylex/TweetDuck.git synced 2025-04-12 06:15:45 +02:00
Code

Extract styles from twitter.js into imported CSS files

Browse Source
This commit is contained in:
chylex 2018-07-04 06:55:10 +02:00
parent 9e5f676e23
commit a6d5957f46
3 changed files with 103 additions and 23 deletions
Resources/Scripts
imports/styles
twitter.base.csstwitter.logout.css
twitter.js

61
Resources/Scripts/imports/styles/twitter.base.css Normal file
View File

@ -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;
}

38
Resources/Scripts/imports/styles/twitter.logout.css Normal file
View File

@ -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;
}

27
Resources/Scripts/twitter.js
View File

@ -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);