mirror of
https://github.com/chylex/TweetDuck.git
synced 2025-04-14 12:15:48 +02:00
Move browser CSS to a file & optimize CSS injection
This commit is contained in:
parent
fdc4616875
commit
31f72b7957
@ -202,6 +202,7 @@ private void browser_FrameLoadEnd(object sender, FrameLoadEndEventArgs e){
|
||||
UpdateProperties(PropertyBridge.Environment.Browser);
|
||||
TweetDeckBridge.RestoreSessionData(e.Frame);
|
||||
ScriptLoader.ExecuteFile(e.Frame, "code.js");
|
||||
InjectBrowserCSS();
|
||||
ReinjectCustomCSS(Config.CustomBrowserCSS);
|
||||
plugins.ExecutePlugins(e.Frame, PluginEnvironment.Browser);
|
||||
|
||||
@ -425,6 +426,10 @@ public void ResumeNotification(){
|
||||
|
||||
// javascript calls
|
||||
|
||||
public void InjectBrowserCSS(){
|
||||
browser.ExecuteScriptAsync("TDGF_injectBrowserCSS", ScriptLoader.LoadResource("styles/browser.css").TrimEnd());
|
||||
}
|
||||
|
||||
public void ReinjectCustomCSS(string css){
|
||||
browser.ExecuteScriptAsync("TDGF_reinjectCustomCSS", css?.Replace(Environment.NewLine, " ") ?? string.Empty);
|
||||
}
|
||||
|
||||
@ -24,7 +24,7 @@ ForEach($file in Get-ChildItem -Include *.css -Recurse){
|
||||
$lines = $lines -Replace '\s*/\*.*?\*/', ''
|
||||
$lines = $lines -Replace '^\s+(.+):\s?(.+?)(?:\s?(!important))?;$', '$1:$2$3;'
|
||||
$lines = $lines -Replace '^(\S.*?) {$', '$1{'
|
||||
,$lines | Rewrite-File $file
|
||||
@(($lines | Where { $_ -ne '' }) -Join ' ') | Rewrite-File $file
|
||||
}
|
||||
|
||||
ForEach($file in Get-ChildItem -Include *.html -Recurse){
|
||||
|
||||
@ -824,74 +824,24 @@
|
||||
// Block: Inject custom CSS and layout into the page.
|
||||
//
|
||||
(function(){
|
||||
let styleOfficial = document.createElement("style");
|
||||
document.head.appendChild(styleOfficial);
|
||||
|
||||
let addRule = (rule) => {
|
||||
styleOfficial.sheet.insertRule(rule, 0);
|
||||
var createStyle = function(id, styles){
|
||||
let ele = document.createElement("style");
|
||||
ele.id = id;
|
||||
ele.innerText = styles;
|
||||
document.head.appendChild(ele);
|
||||
};
|
||||
|
||||
addRule("a[data-full-url] { word-break: break-all; }"); // break long urls
|
||||
addRule(".keyboard-shortcut-list { vertical-align: top; }"); // fix keyboard navigation alignment
|
||||
addRule(".account-inline .username { vertical-align: 10%; }"); // move usernames a bit higher
|
||||
addRule(".character-count-compose { width: 40px !important; }"); // fix strangely wide character count element
|
||||
addRule(".is-video a:not([href*='youtu']) .icon-bg-dot, .is-gif .icon-bg-dot { color: #9f51cf; }"); // change play icon on mp4s
|
||||
|
||||
addRule(".column-nav-link .attribution { position: absolute; }"); // fix cut off account names
|
||||
addRule(".txt-base-smallest .sprite-verified-mini { width: 13px !important; height: 13px !important; background-position: -223px -99px !important; }"); // fix cut off badge icon when zoomed in
|
||||
addRule(".txt-base-smallest .badge-verified:before { width: 13px !important; height: 13px !important; background-position: -223px -98px !important; }"); // fix cut off badge icon in notifications
|
||||
|
||||
addRule(".btn, .mdl, .mdl-content, .app-search-fake, .app-search-input, .popover, .lst-modal, .media-item, .media-preview, .tooltip-inner { border-radius: 1px !important; }"); // square-ify buttons, dialogs, menus, media previews
|
||||
addRule(".compose-text-container, .dropdown-menu, .list-item-last, .quoted-tweet, .input-group-button, input, textarea, select { border-radius: 0 !important; }"); // square-ify dropdowns, inputs, quoted tweets, and account selectors
|
||||
addRule(".prf-header { border-radius: 0; }"); // fix user account header border
|
||||
|
||||
addRule(".accs li, .accs img { border-radius: 0 !important; }"); // square-ify retweet account selector
|
||||
addRule(".accs-header { padding-left: 0 !important; }"); // fix retweet account selector heading
|
||||
|
||||
addRule(".scroll-styled-v::-webkit-scrollbar-thumb, .scroll-styled-h::-webkit-scrollbar-thumb, .antiscroll-scrollbar { border-radius: 0; }"); // square-ify scroll bars
|
||||
addRule(".antiscroll-scrollbar-vertical { margin-top: 0; }"); // square-ify scroll bars
|
||||
addRule(".antiscroll-scrollbar-horizontal { margin-left: 0; }"); // square-ify scroll bars
|
||||
addRule(".scroll-styled-v:not(.antiscroll-inner)::-webkit-scrollbar { width: 8px; }"); // square-ify scroll bars
|
||||
addRule(".scroll-styled-h:not(.antiscroll-inner)::-webkit-scrollbar { height: 8px; }"); // square-ify scroll bars
|
||||
addRule(".app-columns-container::-webkit-scrollbar { height: 9px !important; }"); // square-ify scroll bars
|
||||
|
||||
addRule(".is-condensed .app-header-inner { padding-top: 10px !important; }"); // add extra padding to menu buttons when condensed
|
||||
addRule(".is-condensed .btn-compose { padding: 8px !important; }"); // fix compose button icon when condensed
|
||||
addRule(".app-header:not(.is-condensed) .nav-user-info { padding: 0 5px; }"); // add padding to user info
|
||||
|
||||
addRule(".app-title { display: none; }"); // hide TweetDeck logo
|
||||
addRule(".nav-user-info { bottom: 10px !important; }"); // move user info
|
||||
addRule(".app-navigator { bottom: 50px !important; }"); // move navigation
|
||||
addRule(".column-navigator-overflow { bottom: 192px !important; }"); // move column list
|
||||
addRule(".app-navigator .tooltip { display: none !important; }"); // hide broken tooltips in the menu
|
||||
|
||||
addRule(".column .column-header { height: 49px !important; }"); // fix one pixel space below column header
|
||||
addRule(".column:not(.is-options-open) .column-header { border-bottom: none; }"); // fix one pixel space below column header
|
||||
addRule(".is-options-open .column-type-icon { bottom: 27px; }"); // fix one pixel space below column header
|
||||
|
||||
addRule(".activity-header { align-items: center !important; margin-bottom: 4px; }"); // tweak alignment of avatar and text in notifications
|
||||
addRule(".activity-header .tweet-timestamp { line-height: unset; }"); // fix timestamp position in notifications
|
||||
addRule(".account-bio.padding-t--5 { padding-top: 2px !important; }"); // decrease padding on follow notifications
|
||||
|
||||
addRule("html[data-td-theme='light'] .stream-item:not(:hover) .js-user-actions-menu { color: #000; border-color: #000; opacity: 0.25; }"); // make follow notification button nicer
|
||||
addRule("html[data-td-theme='dark'] .stream-item:not(:hover) .js-user-actions-menu { color: #fff; border-color: #fff; opacity: 0.25; }"); // make follow notification button nicer
|
||||
|
||||
addRule(".app-columns-container::-webkit-scrollbar-track { border-left: 0; }"); // remove weird border in the column container scrollbar
|
||||
addRule(".app-columns-container { bottom: 0 !important; }"); // move column container scrollbar to bottom to fit updated style
|
||||
|
||||
addRule(".js-column-header .column-header-link { padding: 0; }"); // fix column header tooltip hover box
|
||||
addRule(".js-column-header .column-header-link .icon { padding: 9px 4px; width: calc(1em + 8px); height: 100%; box-sizing: border-box; }"); // fix column header tooltip hover box
|
||||
|
||||
addRule("#td-compose-drawer-pin { margin: 17px 4px 0 0; transition: transform 0.1s ease; fill: #fff; float: right; cursor: pointer; }"); // replace 'stay open' checkbox with a pin icon
|
||||
addRule(".js-docked-compose footer { display: none; }"); // replace 'stay open' checkbox with a pin icon
|
||||
addRule(".compose-content { bottom: 0 !important; }"); // replace 'stay open' checkbox with a pin icon
|
||||
addRule(".js-docked-compose .js-drawer-close { margin: 20px 0 0 !important; }"); // fix close drawer button because twitter is fucking incompetent
|
||||
window.TDGF_injectBrowserCSS = function(styles){
|
||||
if (!document.getElementById("tweetduck-browser-css")){
|
||||
createStyle("tweetduck-browser-css", styles);
|
||||
}
|
||||
};
|
||||
|
||||
window.TDGF_reinjectCustomCSS = function(styles){
|
||||
$("#tweetduck-custom-css").remove();
|
||||
|
||||
if (styles && styles.length){
|
||||
$(document.head).append("<style type='text/css' id='tweetduck-custom-css'>"+styles+"</style>");
|
||||
createStyle("tweetduck-custom-css", styles);
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
234
Resources/Scripts/styles/browser.css
Normal file
234
Resources/Scripts/styles/browser.css
Normal file
@ -0,0 +1,234 @@
|
||||
/***********************/
|
||||
/* Redesign scrollbars */
|
||||
/***********************/
|
||||
|
||||
.scroll-styled-v::-webkit-scrollbar-thumb, .scroll-styled-h::-webkit-scrollbar-thumb, .antiscroll-scrollbar {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.antiscroll-scrollbar-vertical {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.antiscroll-scrollbar-horizontal {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.scroll-styled-v:not(.antiscroll-inner)::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.scroll-styled-h:not(.antiscroll-inner)::-webkit-scrollbar {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.app-columns-container::-webkit-scrollbar {
|
||||
height: 9px !important;
|
||||
}
|
||||
|
||||
.app-columns-container::-webkit-scrollbar-track {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.app-columns-container {
|
||||
bottom: 0 !important;
|
||||
}
|
||||
|
||||
/********************/
|
||||
/* Square-ify stuff */
|
||||
/********************/
|
||||
|
||||
.btn, .mdl, .mdl-content, .app-search-fake, .app-search-input, .popover, .lst-modal, .media-item, .media-preview, .tooltip-inner {
|
||||
border-radius: 1px !important;
|
||||
}
|
||||
|
||||
.compose-text-container, .dropdown-menu, .list-item-last, .quoted-tweet, .input-group-button, input, textarea, select, .prf-header, .accs li, .accs img {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/***********************/
|
||||
/* Hide TweetDeck logo */
|
||||
/***********************/
|
||||
|
||||
.app-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-user-info {
|
||||
bottom: 10px !important;
|
||||
}
|
||||
|
||||
.app-navigator {
|
||||
bottom: 50px !important;
|
||||
}
|
||||
|
||||
.column-navigator-overflow {
|
||||
bottom: 192px !important;
|
||||
}
|
||||
|
||||
/*************************************/
|
||||
/* Tweak collapsed left panel layout */
|
||||
/*************************************/
|
||||
|
||||
.is-condensed .app-header-inner {
|
||||
padding-top: 10px !important;
|
||||
}
|
||||
|
||||
.is-condensed .btn-compose {
|
||||
padding: 8px !important;
|
||||
}
|
||||
|
||||
.app-header:not(.is-condensed) .nav-user-info {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
/****************************************/
|
||||
/* Tweak notification layout and design */
|
||||
/****************************************/
|
||||
|
||||
.activity-header {
|
||||
align-items: center !important;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.activity-header .tweet-timestamp {
|
||||
line-height: unset;
|
||||
}
|
||||
|
||||
.account-bio.padding-t--5 {
|
||||
/* follow notification padding */
|
||||
padding-top: 2px !important;
|
||||
}
|
||||
|
||||
html[data-td-theme='light'] .stream-item:not(:hover) .js-user-actions-menu {
|
||||
color: #000;
|
||||
border-color: #000;
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
html[data-td-theme='dark'] .stream-item:not(:hover) .js-user-actions-menu {
|
||||
color: #fff;
|
||||
border-color: #fff;
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
/***********************/
|
||||
/* Tweaks for features */
|
||||
/***********************/
|
||||
|
||||
a[data-full-url] {
|
||||
/* break long urls */
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.character-count-compose {
|
||||
/* fix strangely wide character count element */
|
||||
width: 40px !important;
|
||||
}
|
||||
|
||||
.is-video a:not([href*='youtu']) .icon-bg-dot, .is-gif .icon-bg-dot {
|
||||
/* change play icon on mp4s */
|
||||
color: #9f51cf;
|
||||
}
|
||||
|
||||
/***************************************/
|
||||
/* Replace 'Stay open' with a pin icon */
|
||||
/***************************************/
|
||||
|
||||
#td-compose-drawer-pin {
|
||||
margin: 17px 4px 0 0;
|
||||
float: right;
|
||||
fill: #fff;
|
||||
cursor: pointer;
|
||||
transition: transform 0.1s ease;
|
||||
}
|
||||
|
||||
.js-docked-compose footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.compose-content {
|
||||
bottom: 0 !important;
|
||||
}
|
||||
|
||||
/*******************************************/
|
||||
/* Fix general visual issues or annoyances */
|
||||
/*******************************************/
|
||||
|
||||
.account-inline .username {
|
||||
/* move usernames a bit higher */
|
||||
vertical-align: 10%;
|
||||
}
|
||||
|
||||
.txt-base-smallest .sprite-verified-mini {
|
||||
/* fix cut off badge when zoomed in */
|
||||
width: 13px !important;
|
||||
height: 13px !important;
|
||||
background-position: -223px -99px !important;
|
||||
}
|
||||
|
||||
.txt-base-smallest .badge-verified:before {
|
||||
/* fix cut off badge in notifications */
|
||||
width: 13px !important;
|
||||
height: 13px !important;
|
||||
background-position: -223px -98px !important;
|
||||
}
|
||||
|
||||
.accs-header {
|
||||
/* fix retweet account selector heading */
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.keyboard-shortcut-list {
|
||||
/* fix keyboard navigation alignment */
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/********************************************************************/
|
||||
/* Fix glaring visual issues because twitter is fucking incompetent */
|
||||
/********************************************************************/
|
||||
|
||||
.column-nav-link .attribution {
|
||||
/* fix cut off account names */
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.js-docked-compose .js-drawer-close {
|
||||
/* fix close drawer button position */
|
||||
margin: 20px 0 0 !important;
|
||||
}
|
||||
|
||||
/************************************************/
|
||||
/* Fix tooltips in navigation and column header */
|
||||
/************************************************/
|
||||
|
||||
.app-navigator .tooltip {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.js-column-header .column-header-link {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.js-column-header .column-header-link .icon {
|
||||
width: calc(1em + 8px);
|
||||
height: 100%;
|
||||
padding: 9px 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*******************************************/
|
||||
/* Fix one pixel space below column header */
|
||||
/*******************************************/
|
||||
|
||||
.column .column-header {
|
||||
height: 49px !important;
|
||||
}
|
||||
|
||||
.column:not(.is-options-open) .column-header {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.is-options-open .column-type-icon {
|
||||
bottom: 27px;
|
||||
}
|
||||
@ -339,6 +339,8 @@
|
||||
<Content Include="Resources\Scripts\plugins.browser.js" />
|
||||
<Content Include="Resources\Scripts\plugins.js" />
|
||||
<Content Include="Resources\Scripts\plugins.notification.js" />
|
||||
<Content Include="Resources\Scripts\styles\browser.css" />
|
||||
<Content Include="Resources\Scripts\styles\notification.css" />
|
||||
<Content Include="Resources\Scripts\twitter.js" />
|
||||
<Content Include="Resources\Scripts\update.js" />
|
||||
</ItemGroup>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user