// ==UserScript== // @name TweetDeck 背景透過+ // @author puzzle (or ziopuzzle) // @namespace https://twitter.com/puzzle_koa/ // @version 0.31 // @description Tweetdeckに背景を設定します。 // @match https://tweetdeck.twitter.com/* // @grant none // @require https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js // @downloadURL none // ==/UserScript== (function($) { 'use strict'; //厳格モードを使用(弄らないでください) /* ------------------ class宣言 - 弄らないでください ------------------ */ class theme { constructor(){ this.bgMain = '#10171E'; this.bgDrawer = '#3D5466'; this.colBorder = '#14171A'; this.colDockerIcon = '#AAB8C2'; this.colDockerBackground = '#1C2938'; this.colColumn = '#15202B'; this.colColumnHeader = '#15202B'; this.colColumnHeaderIcon = 'AAB8C2'; this.colColumnHeaderText = '#FFFFFF'; this.colColumnHeaderSubText = '#8899A6'; this.colName = '#FFFFFF'; this.colID = '#8899A6'; this.colTweet = '#FFFFFF'; this.colQuotedTweet = '#8899A6'; this.colReply = '#1DA1F2'; this.colHashtag = '#1DA1F2'; this.colURL = '#1DA1F2'; this.colIconAct = '#8899A6'; this.colMenuBackground = '#000000FF' } setBG(bgMain, bgDrawer){ this.bgMain = bgMain; this.bgDrawer = bgDrawer; } setColorBorder(colBorder){ this.colBorder = colBorder; } setColorActionIcon(colIconAct){ this.colIconAct = colIconAct; } setColorMenu(colMenuBackground){ this.colMenuBackground = colMenuBackground; } setColorDocker(colDockerIcon, colDockerBackground){ this.colDockerIcon = colDockerIcon; this.colDockerBackground = colDockerBackground; } setColorColumn(colColumn, colColumnHeader, colColumnHeaderIcon, colColumnHeaderText, colColumnHeaderSubText){ this.colColumn = colColumn; this.colColumnHeader = colColumnHeader; this.colColumnHeaderIcon = colColumnHeaderIcon; this.colColumnHeaderText = colColumnHeaderText; this.colColumnHeaderSubText = colColumnHeaderSubText; } setColorTweet(colName, colID, colTweet, colQuotedTweet, colReply, colHashtag, colURL){ this.colName = colName; this.colID = colID; this.colTweet = colTweet; this.colQuotedTweet = colQuotedTweet; this.colReply = colReply; this.colHashtag = colHashtag; this.colURL = colURL; } } /* ------------------------ ここまでclass宣言 ------------------------- */ /* ------------------------------- 設定 ------------------------------- */ //setBG('Main-BG', 'Drawer-BG'); //setColorBorder('Border'); //setColorActionIcon('ActionIcon'); //setColorMenu('Menu'); //setColorDocker('Icon', 'Background'); //setColorColumn('Column', 'Header', 'Header Icon', 'Header Text', 'Header Sub-Text'); //setColorTweet('Name', '@ID' 'Tweet', 'Quote-tweet', 'Reply-ID', 'Hashtag', 'URL'); var theme1 = new theme(); //URLはhtppsのもののみ有効 theme1.setBG('https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg', 'https://cdn.pixabay.com/photo/2014/01/17/19/01/tree-247122_960_720.jpg'); theme1.setColorBorder('#403080'); theme1.setColorActionIcon('orange'); theme1.setColorMenu('rgba(64, 48, 128, .8)'); theme1.setColorDocker('#AAB8C2', '#102040'); theme1.setColorColumn('rgba(0,0,0,.5)', 'rgba(128,0,0,.3)', '#AAB8C2', '#FFFFFF', '#8899A6'); theme1.setColorTweet('#FFFFFF', '#8899A6', '#FFFFFF', '#8899A6', '#1DA1F2', '#1DA1F2', '#1DA1F2'); //実行 executeCustom(theme1); //executeCustom(テーマ); executeTweetFlash('rgba(100, 80, 80, 0.5)', 1.0); //executeTweetFlash('色<#XXXXXXとかrgba(Red,Green,Blue,Alpha)> , 時間<秒>'); /* --------------------------- ここまで設定 --------------------------- */ /* ------------------------------ コード ------------------------------ */ //新規ツイートにエフェクトをつけます function executeTweetFlash(color, time){ addGlobalStyle( '@keyframes tweet-enter {' + ' 0% { background-color: ' + color + '; }' + ' 25% { background-color: ' + color + '; }' + ' 50% { background-color: rgba(0,0,0,0); }' + ' 75% { background-color: ' + color + '; }' + ' 100% { background-color: rgba(0,0,0,0); }}'+ '.column .js-chirp-container > article { animation-duration: ' + time + 's; animation-name: tweet-enter; }' ); } //このJSメイン要素の背景設定 function executeCustom(theme){ //背景設定 if(validURL(theme.bgMain)){addGlobalStyle('.app-content { background-image: url("' + theme.bgMain + '") !important; }');} else if(theme.bgMain !== ''){addGlobalStyle('.app-content { background-color: ' + theme.bgMain + ' !important; }');} if(validURL(theme.bgDrawer)){addGlobalStyle('.drawer { background-image: url("' + theme.bgDrawer + '") !important; }');} else if(theme.bgMain !== ''){addGlobalStyle('.drawer { background-color: ' + theme.bgDrawer + ' !important; }');} addGlobalStyle( '.app-content { background-size: cover; }' + '.drawer { background-size: cover; background-position: center center; }' ); //背景を見せる為に透過処理 addGlobalStyle( '.app-columns-container, .column, .stream-item, .scroll-conversation,' + //カラム '.facet-type, .button-tray, select, input,' + //カラムヘッダー '.tweet-detail-wrapper, [rel=reply], .inline-reply,' + //カラムツイート詳細 '.compose, .old-composer-footer, .flex, [dir=ltr] *' + //ドロワー ' { background-color: #00000000 !important; }'+ //旧ドロワー '.r-1oszu61.r-1phboty.r-1yadl64.r-deolkf.r-6koalj.r-13awgt0.r-eqz5dr.r-crgep1.r-ifefl9.r-bcqeeo.r-t60dpp.r-bnwqim.r-417010, .btn { background-color: rgba(0, 0, 0, .8) !important; }' + '.r-eqz5dr { border-radius: 18px; }' + '.compose-reply-tweet { background-color: rgba(0, 0, 0, .6) !important; }' + //新ドロワー絵文字ウィンドウ '[dir=ltr] [role=button], .r-p1n3y5, .r-eqz5dr.r-1bylmt5 { background-color: rgba(0, 0, 0, .6) !important; }' + // '.quoted-tweet, [rel=reply] { background-color: rgba(0, 0, 0, .3) !important; }' ); //透過処理に伴って発生する問題点の解決 addGlobalStyle( '.js-team-invitations-container, .js-contributor-manager-container { display: none !important; }' + '.dark option { background-color: #10171e !important; }' ); //BetterTweeetdeckのカラム折りたたみ機能使用時にborderが二重になる部分があるので修正 addGlobalStyle('.btd-column-collapsed .column-header { border: solid 0px !important }'); //カラムの縁を丸めて余白を取る addGlobalStyle('.column { border-radius: 15px !important; height: calc(100% - 12px) !important; top: 6px !important; }'); //ナビアイコンを詰めて表示 addGlobalStyle('.column-nav-item { height: 35px !important; }'); //ボーダーあった方が良い箇所にボーダーを付ける addGlobalStyle( '[dir=ltr] [role=button], .r-aaos50, .column { border: solid 1px !important; }' + '.new-composer-bottom-button, .r-18qmn74 { border: solid 1px !important; background-color: rgba(0, 0, 0, .5) !important; border-radius: 30px !important; }' + '.compose-reply-tweet { border: solid 1px !important; }' ); //色設定 addGlobalStyle( '.column-nav-link { color: ' + theme.colDockerIcon + ' !important; }' + //ドック アイコン '.app-header, .column-nav-item, .app-navigator, .app-title { background-color: ' + theme.colDockerBackground + ' !important; }' + //ドック 背景 '.column-panel { background-color: ' + theme.colColumn + ' !important; }' + //カラム部 透過度 '.column-header, .column-options { background-color: ' + theme.colColumnHeader + ' !important; }' + //カラムヘッダー部 透過度 '[role=listbox], .dropdown-menu { background-color: ' + theme.colMenuBackground + ' !important; }' + //ツイートに対するメニュー '.is-selected { background-color: rgba(0, 0, 0, .5) !important; }' + //メニュー項目フォーカス時 '.column-type-icon { color: ' + theme.colColumnHeaderIcon + ' !important; }' + '.column-heading { color: ' + theme.colColumnHeaderText + ' !important; }' + '.attribution { color: ' + theme.colColumnHeaderSubText + ' !important; }' + '.account-inline .fullname { color: ' + theme.colName + ' !important; }' + '.account-inline .username { color: ' + theme.colID + ' !important; }' + '.tweet-text { color: ' + theme.colTweet + ' !important; }' + '.js-quoted-tweet-text { color: ' + theme.colQuotedTweet + ' !important; }' + '[data-recipient-ids] { color: ' + theme.colReply + ' !important; }' + '[rel=hashtag] { color: ' + theme.colHashtag + ' !important; }' + '[data-full-url] { color: ' + theme.colURL + ' !important; }' + '.tweet-action:not(:focus):not(:hover):not(:active), .tweet-detail-action-item :not(.is-selected) .icon:not(:focus):not(:hover):not(:active) { color: ' + theme.colIconAct + ' !important; }' ); //ボーダー色統一 addGlobalStyle( '.app-content *:not(span):not(.replyto-caret), ::-webkit-scrollbar-track,' + '[dir=ltr] [role=button], .r-aaos50, .r-18qmn74' + ' { border-color: ' + theme.colBorder + ' !important; }' ); } /* -------------------------- ここまでコード -------------------------- */ /* --------------------------- ここから関数 --------------------------- */ //Javascriptでcssグローバルスタイルの記述を可能にする関数です。 function addGlobalStyle(css) {var head, style;head=document.getElementsByTagName('head')[0];if(!head){return;}style=document.createElement('style');style.type='text/css';style.innerHTML=css;head.appendChild(style);} //型の判別を行う関数です。(type = String,Number,Boolean,Date,Error,Array,Function,RegExp,Object) function is(type, obj) {var clas=Object.prototype.toString.call(obj).slice(8, -1);return obj !== undefined && obj !== null && clas === type;} //16進数をCSS用の書式に書き直してくれる関数 function rgb(red,green,blue) {return red * Math.pow(256,2) + green * Math.pow(256,1) + blue * Math.pow(256,0);} function rgba(red,green,blue,alpha) {return (alpha * Math.pow(256,3)*255)|0 + red * Math.pow(256,2) + green * Math.pow(256,1) + blue * Math.pow(256,0);} //URLかどうかチェックする関数 function validURL(str){ var pattern = new RegExp('^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_.~+=-]*)?(\\#[-a-z\\d_]*)?$','i'); if(!pattern.test(str)){return false;}else{return true;} } /* --------------------------- ここまで関数 --------------------------- */ })(jQuery.noConflict(true));