css bs
目前為
// ==UserScript==
// @name oogadex
// @match *://idle-pixel.com/login/play*
// @grant none
// @version 1.1
// @author ooga booga
// @description css bs
// @require https://gf.qytechs.cn/scripts/441206-idlepixel/code/IdlePixel+.js
// @namespace https://gf.qytechs.cn/users/826975
// ==/UserScript==
class OogaDex extends IdlePixelPlusPlugin {
constructor() {
super("oogadex", {
about: {
name: GM_info.script.name,
version: GM_info.script.version,
author: GM_info.script.author,
description: GM_info.script.description
}
});
}
onLogin() {
let css = document.createElement('style');
css.innerHTML = `
/* https://stackoverflow.com/a/43965099 */
.collapsible-wrapper {
display: flex;
overflow: hidden;
}
.collapsible-wrapper:after {
content: '';
height: 280px;
transition: height 0.2s cubic-bezier(0.5, 0, 0.5, 1), max-height 0s 0.2s cubic-bezier(0.5, 0, 0.5, 1);
max-height: 0px;
}
.collapsible {
transition: margin-bottom 0.2s cubic-bezier(0.5, 0, 0.5, 1);
margin-bottom: 0;
max-height: 1000000px;
border-radius: 0 0 10pt 10pt;
margin-bottom: 15px;
padding-top: 20px;
}
.collapsible-wrapper.collapsed > .collapsible {
margin-bottom: -5000px;
transition: margin-bottom 0.2s cubic-bezier(0.5, 0, 0.5, 1),
visibility 0s 0.2s, max-height 0s 0.2s;
visibility: hidden;
max-height: 0;
}
.collapsible-wrapper.collapsed:after {
height: 0;
transition: height 0.2s linear;
max-height: 280px;
}
.tcg-card-type-container {
overflow: hidden;
transition: 0.5s;
/* max-height: 5000px; */
margin-bottom: 0px;
max-height: 10000000px;
}
.tcg-card-container {
width: 250px;
display: inline-flex;
}
.tiny {
/* max-height: 0px; */
margin-bottom: -2000px;
max-height: 0px;
}
.tcg-card {
min-width: 200px;
transition: 0.5s;
position: relative;
z-index: 1;
}
.tcg-card:hover {
translate: 0px -20px;
}
.tcg-holo {
position: relative;
/* need to offset an entire card backwards */
translate: calc(-100% - 20px) -20px;
z-index: 0;
}
.tcg-holo:hover {
translate: calc(-100% - 20px) -60px;
}
.tcg-tab {
height: 40px;
-webkit-font-smoothing: antialiased;
text-shadow: white 0px 0px 1px, white 0px 0px 1px, white 0px 0px 1px, white 0px 0px 1px, white 0px 0px 1px, white 0px 0px 1px, white 0px 0px 1px, white 0px 0px 1px;
}
`;
document.head.appendChild(css);
CToe.loadCards = (raw) => {
if(raw == "NONE") return;
let fields = raw.split('~');
let cards = [];
for(let i=0; i<fields.length;){
cards.push({
id: fields[i++],
...CardData.data[fields[i]],
name: fields[i++],
isHolo: fields[i++] == 'true',
});
}
console.log(cards);
let tcgContext = document.getElementById("tcg-area-context");
tcgContext.innerHTML = "";
let categories = [...new Set(Object.entries(CardData.data).map(x => x[1].description_title))];
for(let category of categories){
let box = document.createElement('div');
box.id = `tcg-type-category-${category}`;
box.className = `tcg-type-category`;
let boxTitle = document.createElement('div');
boxTitle.innerText = category;
boxTitle.classList.add('hover');
boxTitle.classList.add('tcg-tab');
boxTitle.onclick = function(){
this.nextElementSibling.classList.toggle('collapsed');
};
box.appendChild(boxTitle);
let wrapper = document.createElement('div');
wrapper.className = 'collapsible-wrapper';
let boxEntries = document.createElement('div');
boxEntries.id = `tcg-${category}-entries`;
// boxEntries.className = 'tcg-card-type-container';
boxEntries.className = 'collapsible';
wrapper.appendChild(boxEntries);
box.appendChild(wrapper);
let entries = Object.entries(CardData.data).filter(x => x[1].description_title == category).map(x => x[1]);
console.log(entries);
boxEntries.style.backgroundColor = entries[0].background_css.match(/linear-gradient\((.+), [r# ]/)[1];
if(!boxEntries.style.backgroundColor) boxEntries.style.backgroundColor = '#ffd700';
if(boxEntries.style.backgroundColor.startsWith('rgb(')){
boxTitle.style.backgroundColor = 'rgba(' + boxEntries.style.backgroundColor.match(/[\d, ]+/) + ')';
boxEntries.style.backgroundColor = 'rgba(' + boxEntries.style.backgroundColor.match(/[\d, ]+/) + ', 0.5)';
}
for(let entry of entries){
let cardData = cards.filter(x => x.label == entry.label);
if(cardData.length) console.log(entry, cardData);
let name = Object.keys(CardData.data).find(key => CardData.data[key].label == entry.label);
let cardContainer = document.createElement('div');
cardContainer.className = 'tcg-card-container';
boxEntries.appendChild(cardContainer);
// normal
let card = document.createElement('div');
cardContainer.appendChild(card);
card.outerHTML = CardData.getCardHTML(cardData.find(x => !x.isHolo)?.id, name, false);
card = cardContainer.children[cardContainer.children.length-1];
card.style.filter = cardData.find(x => !x.isHolo) ? 'contrast(1)' : 'contrast(0.05) saturate(0) brightness(1.5)';
// holo
card = document.createElement('div');
cardContainer.appendChild(card);
card.outerHTML = CardData.getCardHTML(cardData.find(x => x.isHolo)?.id, name, true);
card = cardContainer.children[cardContainer.children.length-1];
card.classList.add('tcg-holo');
card.style.filter = cardData.find(x => x.isHolo) ? 'contrast(1)' : 'contrast(0.05) saturate(0) brightness(1.5)';
}
tcgContext.appendChild(box);
}
}
}
}
const plugin = new OogaDex();
IdlePixelPlus.registerPlugin(plugin);
QingJ © 2025
镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址