Initial commit
This commit is contained in:
commit
d0915bc19c
GPG key ID:
D7E63AD0019E75D9
5 changed files with 675 additions and 0 deletions
185
xilly-custom-timeline.user.js
Normal file
185
xilly-custom-timeline.user.js
Normal file
|
|
@ -0,0 +1,185 @@
|
|||
// ==UserScript==
|
||||
// @name Xilly - Custom Timeline
|
||||
// @namespace http://experimenting.website/
|
||||
// @version 0.1
|
||||
// @description Customize X timeline color
|
||||
// @author EXPERIMENTING
|
||||
// @match https://x.com/*
|
||||
// @grant GM_addStyle
|
||||
// @grant GM_getValue
|
||||
// @grant GM_setValue
|
||||
// @grant GM_registerMenuCommand
|
||||
// ==/UserScript==
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
function getSetting(key, defaultValue) {
|
||||
const value = GM_getValue(key);
|
||||
return value !== undefined ? value : defaultValue;
|
||||
}
|
||||
|
||||
let OPACITY_LEVEL = getSetting('opacityLevel', 0.8);
|
||||
let BACKGROUND_COLOR = getSetting('backgroundColor', '30,44,59'); // RGB
|
||||
let BLUR_LEVEL = getSetting('blurLevel', 5);
|
||||
|
||||
function updateCSS() {
|
||||
const rgb = BACKGROUND_COLOR.split(',');
|
||||
const css = `
|
||||
/* Mengatur transparansi dan warna untuk elemen utama timeline */
|
||||
[data-testid="primaryColumn"] {
|
||||
background-color: rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${OPACITY_LEVEL}) !important;
|
||||
backdrop-filter: blur(${BLUR_LEVEL}px) !important;
|
||||
-webkit-backdrop-filter: blur(${BLUR_LEVEL}px) !important; /* Untuk kompatibilitas Safari */
|
||||
}
|
||||
|
||||
/* Mengatur transparansi dan warna untuk elemen tweet individual */
|
||||
article[role="article"] {
|
||||
background-color: rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${OPACITY_LEVEL}) !important;
|
||||
}
|
||||
|
||||
.css-1dbjc4n.r-1habvwh {
|
||||
background-color: rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${OPACITY_LEVEL}) !important;
|
||||
backdrop-filter: blur(${BLUR_LEVEL}px) !important;
|
||||
-webkit-backdrop-filter: blur(${BLUR_LEVEL}px) !important;
|
||||
}
|
||||
|
||||
.r-kritb0.r-1h8ys4a.css-175oi2r {
|
||||
background-color: rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${OPACITY_LEVEL}) !important;
|
||||
backdrop-filter: blur(${BLUR_LEVEL}px) !important;
|
||||
-webkit-backdrop-filter: blur(${BLUR_LEVEL}px) !important;
|
||||
}
|
||||
|
||||
.r-1awozwy.r-yfoy6g.r-18u37iz.r-1wtj0ep.r-13qz1uu.r-184en5c {
|
||||
background-color: rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${OPACITY_LEVEL}) !important;
|
||||
backdrop-filter: blur(${BLUR_LEVEL}px) !important;
|
||||
-webkit-backdrop-filter: blur(${BLUR_LEVEL}px) !important;
|
||||
}
|
||||
|
||||
.r-8oi148 {
|
||||
background-color: rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0) !important;
|
||||
backdrop-filter: blur(${BLUR_LEVEL}px) !important;
|
||||
-webkit-backdrop-filter: blur(${BLUR_LEVEL}px) !important;
|
||||
|
||||
}
|
||||
|
||||
.r-ii8lfi {
|
||||
background-color: rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${OPACITY_LEVEL}) !important;
|
||||
backdrop-filter: blur(${BLUR_LEVEL}px) !important;
|
||||
-webkit-backdrop-filter: blur(${BLUR_LEVEL}px) !important;
|
||||
|
||||
}
|
||||
|
||||
.r-yfoy6g {
|
||||
background-color: rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${OPACITY_LEVEL}) !important;
|
||||
backdrop-filter: blur(${BLUR_LEVEL}px) !important;
|
||||
-webkit-backdrop-filter: blur(${BLUR_LEVEL}px) !important;
|
||||
|
||||
}
|
||||
|
||||
/* Drawer */
|
||||
.r-105ug2t.r-yfoy6g.r-1867qdf.r-xnswec.r-13awgt0.r-1ce3o0f.r-1udh08x.r-u8s1d.r-13qz1uu {
|
||||
background-color: rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${OPACITY_LEVEL}) !important;
|
||||
backdrop-filter: blur(${BLUR_LEVEL}px) !important;
|
||||
-webkit-backdrop-filter: blur(${BLUR_LEVEL}px) !important;
|
||||
|
||||
}
|
||||
|
||||
.r-g6ijar {
|
||||
background-color: rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${OPACITY_LEVEL}) !important;
|
||||
backdrop-filter: blur(${BLUR_LEVEL}px) !important;
|
||||
-webkit-backdrop-filter: blur(${BLUR_LEVEL}px) !important;
|
||||
|
||||
}
|
||||
|
||||
/* Make post */
|
||||
.r-1h8ys4a.r-dq6lxq.r-hucgq0 {
|
||||
background-color: rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 1) !important;
|
||||
backdrop-filter: blur(${BLUR_LEVEL}px) !important;
|
||||
-webkit-backdrop-filter: blur(${BLUR_LEVEL}px) !important;
|
||||
|
||||
}
|
||||
|
||||
.r-1iud8zs.r-1e5uvyk.r-ii8lfi.r-ne48ov.r-1nna3df {
|
||||
background-color: rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 1) !important;
|
||||
backdrop-filter: blur(${BLUR_LEVEL}px) !important;
|
||||
-webkit-backdrop-filter: blur(${BLUR_LEVEL}px) !important;
|
||||
|
||||
}
|
||||
|
||||
.r-yfoy6g.r-jumn1c.r-xd6kpl.r-gtdqiz.r-ipm5af.r-184en5c {
|
||||
background-color: rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 1) !important;
|
||||
backdrop-filter: blur(${BLUR_LEVEL}px) !important;
|
||||
-webkit-backdrop-filter: blur(${BLUR_LEVEL}px) !important;
|
||||
|
||||
}
|
||||
|
||||
/* Menjaga agar teks tetap terlihat jelas */
|
||||
.css-901oao, .css-16my406, .css-1hf3ou5 {
|
||||
background-color: transparent !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
}
|
||||
`;
|
||||
GM_addStyle(css);
|
||||
}
|
||||
|
||||
updateCSS();
|
||||
|
||||
const settingsPanel = document.createElement('div');
|
||||
settingsPanel.style.position = 'fixed';
|
||||
settingsPanel.style.top = '50px';
|
||||
settingsPanel.style.right = '10px';
|
||||
settingsPanel.style.zIndex = '1000';
|
||||
settingsPanel.style.backgroundColor = 'black';
|
||||
settingsPanel.style.border = '1px solid #ccc';
|
||||
settingsPanel.style.padding = '10px';
|
||||
settingsPanel.style.display = 'none';
|
||||
settingsPanel.innerHTML = `
|
||||
<h3>Timeline Settings</h3>
|
||||
<label for="opacitySlider">Opacity: <span id="opacityValue">${OPACITY_LEVEL}</span></label><br>
|
||||
<input type="range" id="opacitySlider" min="0" max="1" step="0.1" value="${OPACITY_LEVEL}"><br>
|
||||
<label for="blurSlider">Timeline Background Blur (px): <span id="blurValue">${BLUR_LEVEL}</span></label><br>
|
||||
<input type="range" id="blurSlider" min="0" max="20" step="1" value="${BLUR_LEVEL}"><br>
|
||||
<label for="colorPicker">Background Color:</label><br>
|
||||
<input type="color" id="colorPicker" value="#${parseInt(BACKGROUND_COLOR.split(',')[0]).toString(16).padStart(2, '0')}${parseInt(BACKGROUND_COLOR.split(',')[1]).toString(16).padStart(2, '0')}${parseInt(BACKGROUND_COLOR.split(',')[2]).toString(16).padStart(2, '0')}"><br>
|
||||
<button id="saveSettings">Save</button>
|
||||
`;
|
||||
document.body.appendChild(settingsPanel);
|
||||
|
||||
const opacitySlider = settingsPanel.querySelector('#opacitySlider');
|
||||
const opacityValue = settingsPanel.querySelector('#opacityValue');
|
||||
opacitySlider.addEventListener('input', () => {
|
||||
OPACITY_LEVEL = opacitySlider.value;
|
||||
opacityValue.innerText = OPACITY_LEVEL;
|
||||
});
|
||||
|
||||
const blurSlider = settingsPanel.querySelector('#blurSlider');
|
||||
const blurValue = settingsPanel.querySelector('#blurValue');
|
||||
blurSlider.addEventListener('input', () => {
|
||||
BLUR_LEVEL = blurSlider.value;
|
||||
blurValue.innerText = BLUR_LEVEL;
|
||||
});
|
||||
|
||||
const colorPicker = settingsPanel.querySelector('#colorPicker');
|
||||
colorPicker.addEventListener('input', () => {
|
||||
const hex = colorPicker.value;
|
||||
const r = parseInt(hex.substr(1,2),16);
|
||||
const g = parseInt(hex.substr(3,2),16);
|
||||
const b = parseInt(hex.substr(5,2),16);
|
||||
BACKGROUND_COLOR = `${r},${g},${b}`;
|
||||
});
|
||||
|
||||
const saveSettingsButton = settingsPanel.querySelector('#saveSettings');
|
||||
saveSettingsButton.addEventListener('click', () => {
|
||||
GM_setValue('opacityLevel', OPACITY_LEVEL);
|
||||
GM_setValue('backgroundColor', BACKGROUND_COLOR);
|
||||
GM_setValue('blurLevel', BLUR_LEVEL);
|
||||
updateCSS();
|
||||
settingsPanel.style.display = 'none';
|
||||
});
|
||||
|
||||
GM_registerMenuCommand('Setting Timeline', () => {
|
||||
settingsPanel.style.display = settingsPanel.style.display === 'none' ? 'block' : 'none';
|
||||
});
|
||||
})();
|
||||
Loading…
Add table
Add a link
Reference in a new issue