Comick Client (Alpha)
// ==UserScript==
// @name Comick Client
// @namespace https://github.com/Nublord33/Comick-CLient
// @version 0.1
// @description Comick Client (Alpha)
// @author Nublord33/SkibidiSKid(joke name)
// @match https://comick.io/*
// @license Apache license 2.0
// @grant none
// ==/UserScript==
(function() {
'use strict';
const SOLID_COLOR = '#121318'; // Original solid background color
const SECONDARY_COLOR = '#212328'; // Secondary color
const OTHER_COLOR = '#3a3f47'; // New color for specific <a> elements
const ICON_COLOR = '#e38783'; // Icon color for <path> elements with fill-rule="evenodd"
const FONT_COLOR = '#e5e7eb'; // Font color
const FONT_STYLE = 'JetBrains Mono, monospace'; // Font style
// Class name variables with dots for CSS selectors
const COMICK_STATUS = '.flex-1.mt-0.py-3.px-2.h-12.border.border-gray-300.dark\\:bg-gray-700.dark\\:border-gray-700.rounded';
const BUTTON_CLASS = '.md\\:w-96.h-12.btn.px-2.py-3.flex-1';
const A_CLASS = '.flex-1.md\\:w-96.h-12.btn.btn-primary.px-2.py-3.flex.items-center.rounded.flex.flex-1';
const SELECT_SECONDARY_CLASS = '.cursor-pointer.pl-2.pr-6.py-1.border.border-gray-300.rounded.dark\\:border-gray-600';
const TABLE_CLASS = '.table-fixed.w-full.whitespace-nowrap';
const UL_CLASS = '.scrollbox.dark\\:scrollbox-dark.mt-3.mb-3.flex.flex-wrap.max-h-32.md\\:max-h-48.xl\\:max-h-48.overflow-y-auto.items-center.scrollbar-thin.scrollbar-thumb-gray-300.scrollbar-track-gray-100.dark\\:scrollbar-thumb-gray-600.dark\\:scrollbar-track-gray-700.scrollbar-thumb-rounded';
const COMICK_TOPBAR = '.flex.items-center.justify-between.space-x-2.px-3.sm\\:px-6.lg\\:px-8.py-2.lg\\:border-b.border-gray-100.dark\\:border-gray-700.max-sm\\:overflow-x-auto.drop-shadow-sm.bg-white\\/95.dark\\:bg-gray-800\\/95';
const BUTTON_SECONDARY_CLASS = '.btn.w-full.text-center.text-xs.px-0.border-none';
const SCROLLBOX_CLASS = '.max-h-64.overflow-y-auto.scrollbox.dark\\:scrollbox-dark.scrollbar-thin.scrollbar-thumb-gray-300.scrollbar-track-gray-100.dark\\:scrollbar-thumb-gray-600.dark\\:scrollbar-track-gray-700.scrollbar-thumb-rounded.mt-1';
// Long class selectors as variables
const COMIC_DESC = '.comic-desc.xl\\:h-auto.max-h-96.overflow-y-auto.scrollbox.dark\\:scrollbox-dark.scrollbar-thin.scrollbar-thumb-gray-300.scrollbar-track-gray-100.dark\\:scrollbar-thumb-gray-600.dark\\:scrollbar-track-gray-700.scrollbar-thumb-rounded.my-3.md\\:my-5.prose.prose-hr\\:my-3.dark\\:prose-invert.max-w-none.prose-table\\:w-auto';
const SCROLLBOX_CLASS_1 = '.scrollbox.dark\\:scrollbox-dark.mt-3.mb-3.flex.flex-wrap.max-h-32.md\\:max-h-48.xl\\:max-h-48.overflow-y-auto.items-center.scrollbar-thin.scrollbar-thumb-gray-300.scrollbar-track-gray-100.dark\\:scrollbar-thumb-gray-600.dark\\:scrollbar-track-gray-700.scrollbar-thumb-rounded';
const SCROLLBOX_CLASS_2 = '.flex.items-center.max-w-max.overflow-x-auto.scrollbox.dark\\:scrollbox-dark.scrollbar-thin.scrollbar-thumb-gray-300.scrollbar-track-gray-100.dark\\:scrollbar-thumb-gray-600.dark\\:scrollbar-track-gray-700.scrollbar-thumb-rounded.space-x-3';
//Set solid background and remove background image if not an image.
function setSolidBackground(element, color) {
element.style.backgroundColor = color;
if (element.tagName.toLowerCase() !== 'img') {
element.style.backgroundImage = 'none';
}
}
// Helper: Set color for <path> elements with fill-rule="evenodd" and clip-rule="evenodd"
function setIconColorForPaths() {
document.querySelectorAll('path').forEach(path => {
path.style.color = ICON_COLOR; // Apply the icon color to all paths
});
}
//Apply styles to multiple selectors
function applyStylesToSelectors(selectors, color) {
selectors.forEach(selector => {
document.querySelectorAll(selector).forEach(element => {
setSolidBackground(element, color);
element.style.border = 'none'; // Remove the border
});
});
}
// Function to apply styles to all relevant elements
function applyCustomStyles() {
// Apply solid background to body
setSolidBackground(document.body, SOLID_COLOR);
// Apply FONT_COLOR and FONT_STYLE to body
document.body.style.color = FONT_COLOR;
document.body.style.fontFamily = FONT_STYLE;
// Apply styles to individual elements
applyStylesToSelectors([BUTTON_CLASS, A_CLASS], OTHER_COLOR);
applyStylesToSelectors([SELECT_SECONDARY_CLASS, COMICK_STATUS], SECONDARY_COLOR);
document.querySelectorAll(TABLE_CLASS).forEach(table => {
table.querySelectorAll('*').forEach(element => {
if (element.tagName.toLowerCase() === 'input' && element.type === 'text' && element.placeholder === 'Goto chap') {
setSolidBackground(element, SECONDARY_COLOR); // Apply secondary color
return;
}
if (element.tagName.toLowerCase() !== 'i' || !element.classList.contains('flag-icon')) {
setSolidBackground(element, SOLID_COLOR); // Apply solid color to other elements
}
});
});
// Apply solid background to specific content areas
applyStylesToSelectors([COMIC_DESC, SCROLLBOX_CLASS_1, SCROLLBOX_CLASS_2], SOLID_COLOR);
// Style list items
document.querySelectorAll(UL_CLASS).forEach(ul => {
ul.querySelectorAll('li[title^="Vote:"]').forEach(li => {
li.style.backgroundColor = SECONDARY_COLOR;
});
});
document.querySelectorAll(SCROLLBOX_CLASS_2).forEach(div => {
div.querySelectorAll('.dark\\:hover\\:bg-gray-600').forEach(innerDiv => {
innerDiv.style.backgroundColor = SECONDARY_COLOR;
});
});
// Apply styles to secondary buttons
applyStylesToSelectors([BUTTON_SECONDARY_CLASS], OTHER_COLOR);
// Apply styles to scrollboxes
applyStylesToSelectors([SCROLLBOX_CLASS], SOLID_COLOR);
// Apply styles to the top bar
applyStylesToSelectors([COMICK_TOPBAR], SECONDARY_COLOR);
// Apply styles to .bg-blue-500 elements
applyStylesToSelectors(['.bg-blue-500'], OTHER_COLOR);
// Apply ICON_COLOR to <path> elements with fill-rule="evenodd" and clip-rule="evenodd"
setIconColorForPaths();
}
// Initial style application
applyCustomStyles();
// Reapply styles on navigation changes
const originalPushState = history.pushState;
history.pushState = function(...args) {
originalPushState.apply(history, args);
applyCustomStyles();
};
window.addEventListener('popstate', applyCustomStyles);
document.addEventListener("DOMContentLoaded", applyCustomStyles);
// MutationObserver for dynamically loaded content
let styleTimeout;
const observer = new MutationObserver((mutationsList) => {
clearTimeout(styleTimeout);
styleTimeout = setTimeout(() => {
for (let mutation of mutationsList) {
if (mutation.type === 'childList' || mutation.type === 'attributes') {
applyCustomStyles();
break;
}
}
}, 100);
});
observer.observe(document.body, {
childList: true,
subtree: true,
attributes: true
});
// Hook into fetch() to handle dynamically loaded content
const originalFetch = window.fetch;
window.fetch = async function(...args) {
const response = await originalFetch(...args);
applyCustomStyles();
return response;
};
})();