把Komica改成Gmail樣式
// ==UserScript==
// @name Komica Gmail Style
// @namespace http://tampermonkey.net/
// @version 1.4.1
// @description 把Komica改成Gmail樣式
// @author Yun
// @license GNU GPLv3
// @icon https://i.ibb.co/bscXhHh/icon.png
// @match https://komica.org/*
// @match https://*.komica.org/*
// @match https://*.komica1.org/*
// @match https://*.komica2.cc/*
// @match *://gaia.komica.org/00b/*
// @match *://gaia.komica1.org/00b/*
// @match *://gaia.komica2.cc/00b/*
// @match *://gita.komica1.org/00b/*
// @grant GM_addStyle
// ==/UserScript==
(function() {
'use strict';
let clickCount = 0;
let clickTimeout;
// 監聽滑鼠按鈕點擊事件
document.addEventListener('mousedown', function(event) {
// 只檢測中鍵 (滑鼠中間滾輪按鈕)
if (event.button === 1) {
clickCount++;
if (clickTimeout) {
clearTimeout(clickTimeout);
}
clickTimeout = setTimeout(function() {
if (clickCount === 2) {
// 中鍵連續點擊兩次，跳轉到指定 URL（本地打開）
window.location.href = 'https://gita.komica1.org/00b/index.htm?';
} else if (clickCount === 3) {
// 中鍵連續點擊三次，跳轉到 Pornhub
window.open('https://www.pornhub.com/');
} else if (clickCount === 4) {
// 中鍵連續點擊四次，跳轉到 Xvideos
window.open('https://www.xvideos.com/');
} else if (clickCount === 5) {
// 中鍵連續點擊五次，跳轉到 Jable
window.open('https://jable.tv/');
} else if (clickCount === 6) {
// 中鍵連續點擊六次，跳轉到 Pornhub Gay
window.open('https://www.pornhub.com/gayporn');
}
clickCount = 0;
}, 300); // 300 毫秒的時間間隔來偵測連擊
}
});
// 添加滑鼠左鍵點擊監聽器
document.addEventListener('click', function(event) {
clickCount++;
if (clickTimeout) {
clearTimeout(clickTimeout);
}
clickTimeout = setTimeout(function() {
if (clickCount === 2) {
// 連續點擊兩次，切換圖片顯示/隱藏
const images = document.querySelectorAll('img');
images.forEach(img => {
img.style.display = img.style.display === 'none' ? 'block' : 'none';
});
} else if (clickCount === 3) {
// 連續點擊三次，在新視窗打開 Gmail
window.open('https://mail.google.com/mail/', '_blank');
}
clickCount = 0;
}, 300); // 300 毫秒的時間間隔來偵測連擊
});
'use strict';
// 添加 Gmail 樣式
GM_addStyle(`
body, html {
background-color: #f6f8fc !important;
font-family: 'Roboto', Arial, sans-serif !important;
margin: 0;
padding: 0;
}
/* 修改主要內容區域 */
#contents {
background-color: #ffffff !important;
border-radius: 16px !important;
box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15) !important;
margin: 16px !important;
padding: 16px !important;
}
/* 修改回覆窗格 */
form {
background-color: #f1f3f4 !important;
border: 1px solid #dadce0 !important;
border-radius: 8px !important;
padding: 16px !important;
margin-top: 16px !important;
}
/* 修改字體顏色 */
body, .thread, .reply {
color: #202124 !important;
}
/* 修改連結顏色 */
a {
color: #1a73e8 !important;
text-decoration: none !important;
}
/* 修改 h1 標題樣式 */
h1 {
color: #202124 !important;
font-size: 24px !important;
font-weight: 400 !important;
margin-bottom: 16px !important;
}
/* 修改發文按鈕樣式 */
input[type="submit"], button {
background-color: #1a73e8 !important;
color: #ffffff !important;
border: none !important;
cursor: pointer !important;
padding: 8px 16px !important;
border-radius: 4px !important;
}
input[type="submit"]:hover, button:hover {
background-color: #1765cc !important;
}
/* 隱藏原有的 logo */
img[src*="title2.gif"] {
display: none !important;
}
/* 修改回覆區域樣式 */
.reply {
background-color: #ffffff !important;
border: 1px solid #e0e0e0 !important;
border-radius: 8px !important;
padding: 12px !important;
margin-bottom: 12px !important;
}
/* 修改 popup_area 顏色 */
.popup_area {
background-color: #f1f3f4 !important;
border-color: #dadce0 !important;
}
/* 修改 quickreply 顏色 */
#quickreply {
background-color: #f1f3f4 !important;
border-color: #dadce0 !important;
}
/* 修改 divTable blueTable 顏色 */
.divTable.blueTable {
background-color: #ffffff !important;
}
.divTable.blueTable .divTableHeading {
background-color: #f6f8fc !important;
}
/* 修改 Form_bg 顏色 */
.Form_bg {
background-color: #f1f3f4 !important;
}
/* 修改 popup active 顏色 */
.popup.active {
background-color: #ffffff !important;
border-color: #dadce0 !important;
box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15) !important;
}
/* 隱藏/顯示按鈕樣式 */
#toggleImagesBtn {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #1a73e8;
color: white;
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
font-size: 20px;
cursor: pointer;
display: none; /* 預設隱藏 */
z-index: 1000;
}
#toggleImagesBtn:hover {
background-color: #1765cc;
}
/* 按鈕顯示時 */
#toggleImagesBtn.show {
display: block;
}
/* Gmail 樣式側邊欄 */
.gmail-sidebar {
width: 256px;
height: 100vh;
background-color: #f6f8fc;
padding: 8px 0;
box-sizing: border-box;
overflow-y: auto;
}
.gmail-sidebar-item {
display: flex;
align-items: center;
padding: 0 12px 0 26px;
height: 32px;
cursor: pointer;
color: #202124;
font-size: 14px;
border-radius: 0 16px 16px 0;
}
.gmail-sidebar-item:hover {
background-color: #e8eaed;
}
.gmail-sidebar-item.active {
background-color: #d3e3fd;
font-weight: bold;
}
.gmail-sidebar-icon {
margin-right: 18px;
width: 20px;
height: 20px;
fill: #5f6368;
}
.gmail-sidebar-item.active .gmail-sidebar-icon {
fill: #1a73e8;
}
`);
// 檢查是否在右側內容區域顯示按鈕
// 檢查是否在右側內容區域顯示按鈕
if (window.name !== 'menu') {
const btn = document.createElement('button');
btn.id = 'toggleImagesBtn';
btn.innerText = '🖼️'; // 按鈕顯示一個簡單的圖示
document.body.appendChild(btn);
// 當按鈕被點擊時，切換圖片顯示
btn.addEventListener('click', function() {
const images = document.querySelectorAll('img');
images.forEach(img => {
img.style.display = img.style.display === 'none' ? 'block' : 'none';
});
});
// 顯示按鈕
document.getElementById('toggleImagesBtn').classList.add('show');
// CSS 設置按鈕樣式
const style = document.createElement('style');
style.innerHTML = `
#toggleImagesBtn {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #007BFF; /* 背景顏色 */
color: white;
font-size: 20px;
width: 50px;
height: 50px;
border-radius: 50%; /* 使按鈕圓形 */
border: none;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s, transform 0.3s;
}
#toggleImagesBtn:hover {
background-color: #0056b3; /* 滑鼠懸停時改變顏色 */
transform: scale(1.1); /* 當懸停時，按鈕稍微放大 */
}
#toggleImagesBtn:focus {
outline: none; /* 移除焦點樣式 */
}
`;
document.head.appendChild(style);
}
// 只有當 window.name 是 'menu' 時才顯示 Gmail 樣式側邊欄
if (window.name === 'menu') {
const sidebarHTML = `
<div class="gmail-sidebar">
<div class="gmail-sidebar-item active">
<a href="https://komica1.org/" target="_top" style="text-decoration: none; color: inherit; display: flex; align-items: center; width: 100%;">
<svg class="gmail-sidebar-icon" viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"></path><path d="M7 12h2v5H7zm8-5h2v10h-2zm-4 7h2v3h-2zm0-4h2v2h-2z"></path></svg>
回首頁
</a>
</div>
<div class="gmail-sidebar-item">
<a href="https://gita.komica1.org/00b/pixmicat.php?mode=search" target="cont" style="text-decoration: none; color: inherit; display: flex; align-items: center; width: 100%;">
<svg class="gmail-sidebar-icon" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z"></path></svg>
搜尋
</a>
</div>
<div class="gmail-sidebar-item">
<a href="https://gita.komica1.org/00b/pixmicat.php?mode=module&load=mod_threadlist" target="cont" style="text-decoration: none; color: inherit; display: flex; align-items: center; width: 100%;">
<svg class="gmail-sidebar-icon" viewBox="0 0 24 24"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"></path></svg>
檔案區
</a>
</div>
<div class="gmail-sidebar-item">
<a href="https://gita.komica1.org/00b/pixmicat.php?mode=module&load=mod_catalog" target="cont" style="text-decoration: none; color: inherit; display: flex; align-items: center; width: 100%;">
<svg class="gmail-sidebar-icon" viewBox="0 0 24 24"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"></path></svg>
相簿
</a>
</div>
<div class="gmail-sidebar-item">
<a href="https://gita.komica1.org/00b/catlist.php" target="cont" style="text-decoration: none; color: inherit; display: flex; align-items: center; width: 100%;">
<svg class="gmail-sidebar-icon" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"></path></svg>
趨勢
</a>
</div>
<div class="gmail-sidebar-item">
<a href="https://gita.komica1.org/00b/pixmicat.php?mode=admin" target="cont" style="text-decoration: none; color: inherit; display: flex; align-items: center; width: 100%;">
<svg class="gmail-sidebar-icon" viewBox="0 0 24 24"><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"></path></svg>
管理區
</a>
</div>
<div class="gmail-sidebar-item">
<a href="https://gita.komica1.org/00b/index.htm?" target="cont" style="text-decoration: none; color: inherit; display: flex; align-items: center; width: 100%;">
<svg class="gmail-sidebar-icon" viewBox="0 0 24 24"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"></path></svg>
重新整理
</a>
</div>
</div>
`;
document.body.innerHTML = sidebarHTML;
GM_addStyle(`
body::before {
content: '';
display: block;
width: 109px;
height: 40px;
background-image: url('https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_1x_r5.png');
background-repeat: no-repeat;
background-size: contain;
margin: 16px 0 16px 26px;
}
.gmail-sidebar-item a {
text-decoration: none;
color: inherit;
display: flex;
align-items: center;
width: 100%;
height: 100%;
}
.gmail-sidebar-item:hover {
background-color: #e8eaed;
}
.gmail-sidebar-item.active a {
color: #1a73e8;
font-weight: bold;
}
.gmail-sidebar-item.active {
background-color: #d3e3fd;
}
`);
}
// 監聽 DOM 變化並應用樣式
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
const addedNodes = Array.from(mutation.addedNodes);
addedNodes.forEach(node => {
if (node.nodeType === 1) { // 檢查是否為元素節點
node.style.backgroundColor = '#ffffff';
}
});
});
});
observer.observe(document.body, {
childList: true,
subtree: true
});
// 移除原有的框架結構
if (window.top === window.self) {
const frameset = document.querySelector('frameset');
if (frameset) {
// 修改 frameset 的 cols 屬性
frameset.setAttribute('cols', '280,*');
// 或者將 frameset 結構替換為 div 結構，並手動設置寬度
document.body.innerHTML = document.body.innerHTML.replace(/<frameset[\s\S]*?<\/frameset>/gi, '<div id="contents"></div>');
// 加載原本在框架中的內容
fetch(window.location.href)
.then(response => response.text())
.then(html => {
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const menuFrame = doc.querySelector('frame[name="menu"]');
const contFrame = doc.querySelector('frame[name="cont"]');
if (menuFrame && contFrame) {
const menuSrc = menuFrame.getAttribute('src');
const contSrc = contFrame.getAttribute('src');
const contents = document.getElementById('contents');
contents.innerHTML = `
<iframe src="${menuSrc}" style="width:256px;height:100vh;border:none;"></iframe>
<iframe src="${contSrc}" style="width:calc(100% - 256px);height:100vh;border:none;"></iframe>`;
}
});
}
}
})();