// ==UserScript== // @name MDSteamCN // @namespace http://tampermonkey.net/ // @version 0.3 // @description md化SteamCN // @author marioplus // @match https://steamcn.com/* // @require https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js // @run-at document-body // @downloadURL none // ==/UserScript== (function () { // 执行一些公共操作 const mdcolor = new Map([ ['red', '#F44336'], ['red-50', '#FFEBEE'], ['red-100', '#FFCDD2'], ['red-200', '#EF9A9A'], ['red-300', '#E57373'], ['red-400', '#EF5350'], ['red-500', '#F44336'], ['red-600', '#E53935'], ['red-700', '#D32F2F'], ['red-800', '#C62828'], ['red-900', '#B71C1C'], // red（强调色) ['red-accent', '#FF5252'], ['red-a100', '#FF8A80'], ['red-a200', '#FF5252'], ['red-a400', '#FF1744'], ['red-a700', '#D50000'], // pink（主色) ['pink', '#E91E63'], ['pink-50', '#FCE4EC'], ['pink-100', '#F8BBD0'], ['pink-200', '#F48FB1'], ['pink-300', '#F06292'], ['pink-400', '#EC407A'], ['pink-500', '#E91E63'], ['pink-600', '#D81B60'], ['pink-700', '#C2185B'], ['pink-800', '#AD1457'], ['pink-900', '#880E4F'], // pink（强调色) ['pink-accent', '#FF4081'], ['pink-a100', '#FF80AB'], ['pink-a200', '#FF4081'], ['pink-a400', '#F50057'], ['pink-a700', '#C51162'], // purple（主色) ['purple', '#9C27B0'], ['purple-50', '#F3E5F5'], ['purple-100', '#E1BEE7'], ['purple-200', '#CE93D8'], ['purple-300', '#BA68C8'], ['purple-400', '#AB47BC'], ['purple-500', '#9C27B0'], ['purple-600', '#8E24AA'], ['purple-700', '#7B1FA2'], ['purple-800', '#6A1B9A'], ['purple-900', '#4A148C'], // purple（强调色) ['purple-accent', '#E040FB'], ['purple-a100', '#EA80FC'], ['purple-a200', '#E040FB'], ['purple-a400', '#D500F9'], ['purple-a700', '#AA00FF'], // deep-purple（主色) ['deep-purple', '#673AB7'], ['deep-purple-50', '#EDE7F6'], ['deep-purple-100', '#D1C4E9'], ['deep-purple-200', '#B39DDB'], ['deep-purple-300', '#9575CD'], ['deep-purple-400', '#7E57C2'], ['deep-purple-500', '#673AB7'], ['deep-purple-600', '#5E35B1'], ['deep-purple-700', '#512DA8'], ['deep-purple-800', '#4527A0'], ['deep-purple-900', '#311B92'], // purple（强调色) ['deep-purple-accent', '#7C4DFF'], ['deep-purple-a100', '#B388FF'], ['deep-purple-a200', '#7C4DFF'], ['deep-purple-a400', '#651FFF'], ['deep-purple-a700', '#6200EA'], // indigo（主色) ['indigo', '#3F51B5'], ['indigo-50', '#E8EAF6'], ['indigo-100', '#C5CAE9'], ['indigo-200', '#9FA8DA'], ['indigo-300', '#7986CB'], ['indigo-400', '#5C6BC0'], ['indigo-500', '#3F51B5'], ['indigo-600', '#3949AB'], ['indigo-700', '#303F9F'], ['indigo-800', '#283593'], ['indigo-900', '#1A237E'], // indigo（强调色) ['indigo-accent', '#536DFE'], ['indigo-a100', '#8C9EFF'], ['indigo-a200', '#536DFE'], ['indigo-a400', '#3D5AFE'], ['indigo-a700', '#304FFE'], // blue（主色) ['blue', '#2196F3'], ['blue-50', '#E3F2FD'], ['blue-100', '#BBDEFB'], ['blue-200', '#90CAF9'], ['blue-300', '#64B5F6'], ['blue-400', '#42A5F5'], ['blue-500', '#2196F3'], ['blue-600', '#1E88E5'], ['blue-700', '#1976D2'], ['blue-800', '#1565C0'], ['blue-900', '#0D47A1'], // blue（强调色) ['blue-accent', '#448AFF'], ['blue-a100', '#82B1FF'], ['blue-a200', '#448AFF'], ['blue-a400', '#2979FF'], ['blue-a700', '#2962FF'], // light-blue（主色) ['light-blue', '#03A9F4'], ['light-blue-50', '#E1F5FE'], ['light-blue-100', '#B3E5FC'], ['light-blue-200', '#81D4FA'], ['light-blue-300', '#4FC3F7'], ['light-blue-400', '#29B6F6'], ['light-blue-500', '#03A9F4'], ['light-blue-600', '#039BE5'], ['light-blue-700', '#0288D1'], ['light-blue-800', '#0277BD'], ['light-blue-900', '#01579B'], // light-blue（强调色) ['light-blue-accent', '#40C4FF'], ['light-blue-a100', '#80D8FF'], ['light-blue-a200', '#40C4FF'], ['light-blue-a400', '#00B0FF'], ['light-blue-a700', '#0091EA'], // cyan（主色) ['cyan', '#00BCD4'], ['cyan-50', '#E0F7FA'], ['cyan-100', '#B2EBF2'], ['cyan-200', '#80DEEA'], ['cyan-300', '#4DD0E1'], ['cyan-400', '#26C6DA'], ['cyan-500', '#00BCD4'], ['cyan-600', '#00ACC1'], ['cyan-700', '#0097A7'], ['cyan-800', '#00838F'], ['cyan-900', '#006064'], // cyan（强调色) ['cyan-accent', '#18FFFF'], ['cyan-a100', '#84FFFF'], ['cyan-a200', '#18FFFF'], ['cyan-a400', '#00E5FF'], ['cyan-a700', '#00B8D4'], // teal（主色) ['teal', '#009688'], ['teal-50', '#E0F2F1'], ['teal-100', '#B2DFDB'], ['teal-200', '#80CBC4'], ['teal-300', '#4DB6AC'], ['teal-400', '#26A69A'], ['teal-500', '#009688'], ['teal-600', '#00897B'], ['teal-700', '#00796B'], ['teal-800', '#00695C'], ['teal-900', '#004D40'], // teal（强调色) ['teal-accent', '#64FFDA'], ['teal-a100', '#A7FFEB'], ['teal-a200', '#64FFDA'], ['teal-a400', '#1DE9B6'], ['teal-a700', '#00BFA5'], // green（主色) ['green', '#4CAF50'], ['green-50', '#E8F5E9'], ['green-100', '#C8E6C9'], ['green-200', '#A5D6A7'], ['green-300', '#81C784'], ['green-400', '#66BB6A'], ['green-500', '#4CAF50'], ['green-600', '#43A047'], ['green-700', '#388E3C'], ['green-800', '#2E7D32'], ['green-900', '#1B5E20'], // green（强调色) ['green-accent', '#69F0AE'], ['green-a100', '#B9F6CA'], ['green-a200', '#69F0AE'], ['green-a400', '#00E676'], ['green-a700', '#00C853'], // light-green（主色) ['light-green', '#8BC34A'], ['light-green-50', '#F1F8E9'], ['light-green-100', '#DCEDC8'], ['light-green-200', '#C5E1A5'], ['light-green-300', '#AED581'], ['light-green-400', '#9CCC65'], ['light-green-500', '#8BC34A'], ['light-green-600', '#7CB342'], ['light-green-700', '#689F38'], ['light-green-800', '#558B2F'], ['light-green-900', '#33691E'], // light-green（强调色) ['light-green-accent', '#B2FF59'], ['light-green-a100', '#CCFF90'], ['light-green-a200', '#B2FF59'], ['light-green-a400', '#76FF03'], ['light-green-a700', '#64DD17'], // lime（主色) ['lime', '#CDDC39'], ['lime-50', '#F9FBE7'], ['lime-100', '#F0F4C3'], ['lime-200', '#E6EE9C'], ['lime-300', '#DCE775'], ['lime-400', '#D4E157'], ['lime-500', '#CDDC39'], ['lime-600', '#C0CA33'], ['lime-700', '#AFB42B'], ['lime-800', '#9E9D24'], ['lime-900', '#827717'], // lime（强调色) ['lime-accent', '#EEFF41'], ['lime-a100', '#F4FF81'], ['lime-a200', '#EEFF41'], ['lime-a400', '#C6FF00'], ['lime-a700', '#AEEA00'], // yellow（主色) ['yellow', '#FFEB3B'], ['yellow-50', '#FFFDE7'], ['yellow-100', '#FFF9C4'], ['yellow-200', '#FFF59D'], ['yellow-300', '#FFF176'], ['yellow-400', '#FFEE58'], ['yellow-500', '#FFEB3B'], ['yellow-600', '#FDD835'], ['yellow-700', '#FBC02D'], ['yellow-800', '#F9A825'], ['yellow-900', '#F57F17'], // yellow（强调色) ['yellow-accent', '#FFFF00'], ['yellow-a100', '#FFFF8D'], ['yellow-a200', '#FFFF00'], ['yellow-a400', '#FFEA00'], ['yellow-a700', '#FFD600'], // amber（主色) ['amber', '#FFC107'], ['amber-50', '#FFF8E1'], ['amber-100', '#FFECB3'], ['amber-200', '#FFE082'], ['amber-300', '#FFD54F'], ['amber-400', '#FFCA28'], ['amber-500', '#FFC107'], ['amber-600', '#FFB300'], ['amber-700', '#FFA000'], ['amber-800', '#FF8F00'], ['amber-900', '#FF6F00'], // amber（强调色) ['amber-accent', '#FFD740'], ['amber-a100', '#FFE57F'], ['amber-a200', '#FFD740'], ['amber-a400', '#FFC400'], ['amber-a700', '#FFAB00'], // orange（主色) ['orange', '#FF9800'], ['orange-50', '#FFF3E0'], ['orange-100', '#FFE0B2'], ['orange-200', '#FFCC80'], ['orange-300', '#FFB74D'], ['orange-400', '#FFA726'], ['orange-500', '#FF9800'], ['orange-600', '#FB8C00'], ['orange-700', '#F57C00'], ['orange-800', '#EF6C00'], ['orange-900', '#E65100'], // orange（强调色） ['orange-accent', '#FFAB40'], ['orange-a100', '#FFD180'], ['orange-a200', '#FFAB40'], ['orange-a400', '#FF9100'], ['orange-a700', '#FF6D00'], // deep-orange（主色） ['deep-orange', '#FF5722'], ['deep-orange-50', '#FBE9E7'], ['deep-orange-100', '#FFCCBC'], ['deep-orange-200', '#FFAB91'], ['deep-orange-300', '#FF8A65'], ['deep-orange-400', '#FF7043'], ['deep-orange-500', '#FF5722'], ['deep-orange-600', '#F4511E'], ['deep-orange-700', '#E64A19'], ['deep-orange-800', '#D84315'], ['deep-orange-900', '#BF360C'], // deep-orange（强调色） ['deep-orange-accent', '#FF6E40'], ['deep-orange-a100', '#FF9E80'], ['deep-orange-a200', '#FF6E40'], ['deep-orange-a400', '#FF3D00'], ['deep-orange-a700', '#DD2C00'], // Brown ['brown', '#795548'], ['brown-50', '#EFEBE9'], ['brown-100', '#D7CCC8'], ['brown-200', '#BCAAA4'], ['brown-300', '#A1887F'], ['brown-400', '#8D6E63'], ['brown-500', '#795548'], ['brown-600', '#6D4C41'], ['brown-700', '#5D4037'], ['brown-800', '#4E342E'], ['brown-900', '#3E2723'], // Grey ['grey', '#9E9E9E'], ['grey-50', '#FAFAFA'], ['grey-100', '#F5F5F5'], ['grey-200', '#EEEEEE'], ['grey-300', '#E0E0E0'], ['grey-400', '#BDBDBD'], ['grey-500', '#9E9E9E'], ['grey-600', '#757575'], ['grey-700', '#616161'], ['grey-800', '#424242'], ['grey-900', '#212121'], //Blue Grey ['blue-grey', '#607D8B'], ['blue-grey-50', '#ECEFF1'], ['blue-grey-100', '#CFD8DC'], ['blue-grey-200', '#B0BEC5'], ['blue-grey-300', '#90A4AE'], ['blue-grey-400', '#78909C'], ['blue-grey-500', '#607D8B'], ['blue-grey-600', '#546E7A'], ['blue-grey-700', '#455A64'], ['blue-grey-800', '#37474F'], ['blue-grey-900', '#263238'], ['black', '#000000'], ['white', '#FFFFFF'], ['transparent', 'TRANSPARENT'] ]) // 随机配色 function generateRandomColors(type, index) { // 主色调、副色调、强调色 const colors = [ // 日间主题 [ // 浅色 ['red', 'white'], ['pink-400', 'white'], ['purple', 'white'], ['deep-purple', 'white'], ['indigo', 'white'], ['teal', 'white'], // 深色 ['blue', 'black'], ['light-blue', 'black'], ['cyan', 'black'], ['green', 'black'], ['light-green', 'black'], ['lime', 'black'], ['yellow', 'black'], ['amber', 'black'], ['orange', 'black'], ['deep-orange', 'black'], ], // 夜间主题 [ // 浅色 ['red', 'white'], ['pink', 'white'], ['purple', 'white'], ['deep-purple', 'white'], ['indigo', 'white'], ['teal', 'white'], // 深色 ['blue', 'black'], ['light-blue', 'black'], ['cyan', 'black'], ['green', 'black'], ['light-green', 'black'], ['lime', 'black'], ['yellow', 'black'], ['amber', 'black'], ['orange', 'black'], ['deep-orange', 'black'], ] ] type = 0 index = index === undefined ? Math.floor(Math.random() * colors[type].length) : index return { theme: colors[type][index][0], nav: colors[type][index][1], } } // 加载css/js资源 function loadResource(css) { $('head') // mdui .append('') .append('') .append(css) // .append(initHomeCss()) } // 初始需要的css function initPostCss() { return ` ` } // 初始主题 function initTheme(color) { let themeName = color.theme if (/\d+$/.test(themeName)) { themeName = themeName.replace(/-[^-]+$/, '') } $('body').addClass(`mdui-theme-primary-${themeName} mdui-theme-accent-blue`) } // appbar function generateAppbar(navColor) { // 解析数据格式 const MENU_TYPE_CONTENT = 1, MENU_TYPE_DIVIDER = 0 let data = { menu: [ { text: '平台', icon: 'near_me', color: 'blue', item: [ {href: 'f161-1', text: '热点'}, {href: 'f319-1', text: '福利'}, {href: 'f234-1', text: '购物'}, {href: 'f271-1', text: '慈善包'}, {href: 'f257-1', text: '汉化'}, {href: 'f189-1', text: '资源'}, {href: 'f127-1', text: '研讨'}, {href: 'f235-1', text: '成就'}, {href: 'f129-1', text: '互鉴'}, {href: 'f254-1', text: '分享互赠'} ] }, { text: '互助', icon: 'enhanced_encryption', color: 'deep-orange', item: [ {href: 'f301-1', text: '技术'}, {href: 'f302-1', text: '购物'}, {href: 'f304-1', text: '社区'}, {href: 'f318-1', text: '资源'}, {href: 'f303-1', text: '游戏'}, {href: 'f322-1', text: '软硬'}, {href: 'f311-1', text: '魔法'}, ] }, { text: '友商', icon: 'child_friendly', color: 'green', item: [ {href: 'f232-1', text: 'Origin'}, {href: 'f274-1', text: 'uPlay'}, {href: 'f276-1', text: 'GOG'}, {href: 'f316-1', text: '杉果'}, {href: 'f326-1', text: 'Windows'}, {href: 'f332-1', text: '方块'}, {href: 'f325-1', text: 'WeGame'}, {href: 'f275-1', text: '主机'}, {href: 'f328-1', text: '移动'}, {href: 'f277-1', text: '其他'}, ] }, { text: '休闲', icon: 'exposure_plus_1', color: 'brown', item: [ {href: 'f148-1', text: '水区'}, {href: 'f259-1', text: '摄影'}, {href: 'f273-1', text: '美食'}, {href: 'f200-1', text: '软硬'}, ] }, { text: '服务', icon: 'local_mall', color: 'purple', item: [ {href: 'f140-1', text: '公告'}, {href: 'f197-1', text: '反馈'}, {href: 'f238-1', text: '活动'}, ] }, { text: '社区', icon: 'flag', color: 'amber', item: [ {href: 'f251-1', text: '综合交流 交换观点/资源'}, {href: 'f305-1', text: 'DOTA'}, {href: 'f299-1', text: 'CSGO'}, {href: 'f291-1', text: '生存类'}, {href: 'f312-1', text: 'GTA'}, {href: 'f244-1', text: '威乐'}, {href: 'f246-1', text: '艺电'}, {href: 'f245-1', text: '育碧'}, {href: 'f248-1', text: '动视暴雪'}, ] }, { text: '其乐', icon: 'hot_tub', color: 'red', item: [ {href: 'https://www.keylol.com', text: '其乐'}, ] }, { text: '赠楼', icon: 'view_carousel', color: 'pink', item: [ {href: 'f148-1', text: '互赠平台'}, ] }, { text: '交易', icon: 'local_atm', color: 'cyan', item: [ {href: 'steamcn_gift-7l.html', text: '交易中心 便捷游戏市集'}, ] }, { text: '休闲', icon: 'fingerprint', color: 'green', item: [ {href: 'steamcn_gift-7l.html', text: '水区'}, ] }, ], nav: [ {text: 'home', href: '/home'} ], userInfo: { isLogon: false, messageTagInfo: { select: 'a.btn.btn-user-action:first > span', href: 'home.php?mod=space&do=pm', icon: 'email', }, remindTagInfo: { select: 'a.btn.btn-user-action:last > span', href: 'home.php?mod=space&do=notice&view=system', icon: 'notifications', }, avatar: { img: '', menu: [ { type: MENU_TYPE_CONTENT, href: 'javascript:;', onclick: '', text: '' }, { type: MENU_TYPE_DIVIDER } ] } } } parseData() replacerAppbar() // 解析数据 function parseData() { parseNav() parseUserInfo() // 解析面包屑导航栏 function parseNav() { data.nav = [] $('.subforum_left_title_left_up > div > a').each((i, e) => { data.nav.push({ href: e.getAttribute('href'), text: e.innerText }) }) } function parseUserInfo() { const $dropdown = $('.list-inline > .dropdown') if ($dropdown.length <= 0) { data.userInfo.isLogon = false } else { data.userInfo.isLogon = true parseAvatarImg() parseMenu() } // 解析头像 function parseAvatarImg() { data.userInfo.avatar.img = $('img.avatar.img-circle').attr('src') } // 解析菜单 function parseMenu() { data.userInfo.avatar.menu = [] // 单独添加个人中心 data.userInfo.avatar.menu.push({ type: MENU_TYPE_CONTENT, href: $dropdown.find('a').attr('href'), onclick: null, text: '个人中心', }) $dropdown.find('li').each((i, e) => { let item = {} if (e.getAttribute('class') !== 'divider') { let find = e.getElementsByTagName('a')[0] item = { type: MENU_TYPE_CONTENT, href: find.getAttribute('href'), onclick: find.getAttribute('onclick'), text: find.innerText } } else { item = {type: MENU_TYPE_DIVIDER} } data.userInfo.avatar.menu.push(item) }) } } } // 替换 appbar function replacerAppbar() { // 面包屑导航 function generateNav() { if (data.nav.length > 0) { let tmp = '' data.nav.forEach((e, i) => { tmp += `${e.text}` // html += `${e.text}` if (i < data.nav.length - 1) { tmp += `>` } }) return `
${tmp}
 ` } return '' } // 消息、提醒、头像 function generateMsgAndRemindAndAvatar() { if (!data.userInfo.isLogon) { return '' } return generateMsgAndRemind() + generateAvatarMenu() function generateMsgAndRemind() { function gen(tagInfo) { const $tag = $(tagInfo.select) return `${tagInfo.icon} ${$tag.text()}` } return gen(data.userInfo.messageTagInfo) + gen(data.userInfo.remindTagInfo) } // 头像菜单 function generateAvatarMenu() { let html = ` ' return html } } //TODO: 待开发 登录、注册 function generateLoginAndRegister() { console.log(2) return '' } // Appbar 菜单选项 function generateAppbarMenu() { let html = '' data.menu.forEach((e) => { html += `
${e.icon}
${e.text}
keyboard_arrow_down
` e.item.forEach((f) => { html += `${f.text}` }) html += '
' }) return html } // 生成 $('body').prepend(`
menu SteamCN ${generateNav()}
search ${data.userInfo.isLogon ? generateMsgAndRemindAndAvatar() : generateLoginAndRegister()}
${generateAppbarMenu()}
`) $('#nav-menu').remove() $('.tb-container').remove() } } function tagState(selector, state) { if (typeof(selector) === 'string') { selector = [selector] } if (state) { return selector.join(state + ',') + state } return selector.join() } // 生成css // 链接下划线 function mdui_typo_a(selector, height, color) { return ` ${tagState(selector)} { position: relative; display: inline-block; overflow: hidden; text-decoration: none !important; vertical-align: top; outline: 0; } ${tagState(selector, ':before')} { position: absolute; top: auto; bottom: 0; left: 0; width: 100%; height: ${height}; content: ' '; background-color: ${color ? color : '#ff4081'}; -webkit-transition: all .2s; transition: all .2s; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-backface-visibility: hidden; backface-visibility: hidden } ${tagState(selector, ':focus:before')}, ${tagState(selector, ':hover:before')} { -webkit-transform: scaleX(1); transform: scaleX(1); } ` } // 文本截断 function mdui_text_truncate(selector) { return ` ${tagState(selector)} { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ` } // 阴影1-24 function mdui_shadow(selector, size) { let css = '' switch (size) { case 0: css = ` -webkit-box-shadow: none; box-shadow: none; ` break case 1: css = ` -webkit-box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12); box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12) ` break case 2: css = ` -webkit-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12); box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12) ` break case 3: css = ` -webkit-box-shadow: 0 3px 3px -2px rgba(0, 0, 0, .2), 0 3px 4px 0 rgba(0, 0, 0, .14), 0 1px 8px 0 rgba(0, 0, 0, .12); box-shadow: 0 3px 3px -2px rgba(0, 0, 0, .2), 0 3px 4px 0 rgba(0, 0, 0, .14), 0 1px 8px 0 rgba(0, 0, 0, .12) ` break case 4: css = ` -webkit-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12); box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12) ` break case 5: css = ` -webkit-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 5px 8px 0 rgba(0, 0, 0, .14), 0 1px 14px 0 rgba(0, 0, 0, .12); box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 5px 8px 0 rgba(0, 0, 0, .14), 0 1px 14px 0 rgba(0, 0, 0, .12) ` break case 6: css = ` -webkit-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12); box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12) ` break case 7: css = ` -webkit-box-shadow: 0 4px 5px -2px rgba(0, 0, 0, .2), 0 7px 10px 1px rgba(0, 0, 0, .14), 0 2px 16px 1px rgba(0, 0, 0, .12); box-shadow: 0 4px 5px -2px rgba(0, 0, 0, .2), 0 7px 10px 1px rgba(0, 0, 0, .14), 0 2px 16px 1px rgba(0, 0, 0, .12) ` break case 8: css = ` -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12); box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12) ` break case 9: css = ` -webkit-box-shadow: 0 5px 6px -3px rgba(0, 0, 0, .2), 0 9px 12px 1px rgba(0, 0, 0, .14), 0 3px 16px 2px rgba(0, 0, 0, .12); box-shadow: 0 5px 6px -3px rgba(0, 0, 0, .2), 0 9px 12px 1px rgba(0, 0, 0, .14), 0 3px 16px 2px rgba(0, 0, 0, .12) ` break case 10: css = ` -webkit-box-shadow: 0 6px 6px -3px rgba(0, 0, 0, .2), 0 10px 14px 1px rgba(0, 0, 0, .14), 0 4px 18px 3px rgba(0, 0, 0, .12); box-shadow: 0 6px 6px -3px rgba(0, 0, 0, .2), 0 10px 14px 1px rgba(0, 0, 0, .14), 0 4px 18px 3px rgba(0, 0, 0, .12) ` break case 11: css = ` -webkit-box-shadow: 0 6px 7px -4px rgba(0, 0, 0, .2), 0 11px 15px 1px rgba(0, 0, 0, .14), 0 4px 20px 3px rgba(0, 0, 0, .12); box-shadow: 0 6px 7px -4px rgba(0, 0, 0, .2), 0 11px 15px 1px rgba(0, 0, 0, .14), 0 4px 20px 3px rgba(0, 0, 0, .12) ` break case 12: css = ` -webkit-box-shadow: 0 7px 8px -4px rgba(0, 0, 0, .2), 0 12px 17px 2px rgba(0, 0, 0, .14), 0 5px 22px 4px rgba(0, 0, 0, .12); box-shadow: 0 7px 8px -4px rgba(0, 0, 0, .2), 0 12px 17px 2px rgba(0, 0, 0, .14), 0 5px 22px 4px rgba(0, 0, 0, .12) ` break case 13: css = ` -webkit-box-shadow: 0 7px 8px -4px rgba(0, 0, 0, .2), 0 13px 19px 2px rgba(0, 0, 0, .14), 0 5px 24px 4px rgba(0, 0, 0, .12); box-shadow: 0 7px 8px -4px rgba(0, 0, 0, .2), 0 13px 19px 2px rgba(0, 0, 0, .14), 0 5px 24px 4px rgba(0, 0, 0, .12) ` break case 14: css = ` -webkit-box-shadow: 0 7px 9px -4px rgba(0, 0, 0, .2), 0 14px 21px 2px rgba(0, 0, 0, .14), 0 5px 26px 4px rgba(0, 0, 0, .12); box-shadow: 0 7px 9px -4px rgba(0, 0, 0, .2), 0 14px 21px 2px rgba(0, 0, 0, .14), 0 5px 26px 4px rgba(0, 0, 0, .12) ` break case 15: css = ` -webkit-box-shadow: 0 8px 9px -5px rgba(0, 0, 0, .2), 0 15px 22px 2px rgba(0, 0, 0, .14), 0 6px 28px 5px rgba(0, 0, 0, .12); box-shadow: 0 8px 9px -5px rgba(0, 0, 0, .2), 0 15px 22px 2px rgba(0, 0, 0, .14), 0 6px 28px 5px rgba(0, 0, 0, .12) ` break case 16: css = ` -webkit-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12); box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12) ` break case 17: css = ` -webkit-box-shadow: 0 8px 11px -5px rgba(0, 0, 0, .2), 0 17px 26px 2px rgba(0, 0, 0, .14), 0 6px 32px 5px rgba(0, 0, 0, .12); box-shadow: 0 8px 11px -5px rgba(0, 0, 0, .2), 0 17px 26px 2px rgba(0, 0, 0, .14), 0 6px 32px 5px rgba(0, 0, 0, .12) ` break case 18: css = ` -webkit-box-shadow: 0 9px 11px -5px rgba(0, 0, 0, .2), 0 18px 28px 2px rgba(0, 0, 0, .14), 0 7px 34px 6px rgba(0, 0, 0, .12); box-shadow: 0 9px 11px -5px rgba(0, 0, 0, .2), 0 18px 28px 2px rgba(0, 0, 0, .14), 0 7px 34px 6px rgba(0, 0, 0, .12) ` break case 19: css = ` -webkit-box-shadow: 0 9px 12px -6px rgba(0, 0, 0, .2), 0 19px 29px 2px rgba(0, 0, 0, .14), 0 7px 36px 6px rgba(0, 0, 0, .12); box-shadow: 0 9px 12px -6px rgba(0, 0, 0, .2), 0 19px 29px 2px rgba(0, 0, 0, .14), 0 7px 36px 6px rgba(0, 0, 0, .12) ` break case 20: css = ` -webkit-box-shadow: 0 10px 13px -6px rgba(0, 0, 0, .2), 0 20px 31px 3px rgba(0, 0, 0, .14), 0 8px 38px 7px rgba(0, 0, 0, .12); box-shadow: 0 10px 13px -6px rgba(0, 0, 0, .2), 0 20px 31px 3px rgba(0, 0, 0, .14), 0 8px 38px 7px rgba(0, 0, 0, .12) ` break case 21: css = ` -webkit-box-shadow: 0 10px 13px -6px rgba(0, 0, 0, .2), 0 21px 33px 3px rgba(0, 0, 0, .14), 0 8px 40px 7px rgba(0, 0, 0, .12); box-shadow: 0 10px 13px -6px rgba(0, 0, 0, .2), 0 21px 33px 3px rgba(0, 0, 0, .14), 0 8px 40px 7px rgba(0, 0, 0, .12) ` break case 22: css = ` -webkit-box-shadow: 0 10px 14px -6px rgba(0, 0, 0, .2), 0 22px 35px 3px rgba(0, 0, 0, .14), 0 8px 42px 7px rgba(0, 0, 0, .12); box-shadow: 0 10px 14px -6px rgba(0, 0, 0, .2), 0 22px 35px 3px rgba(0, 0, 0, .14), 0 8px 42px 7px rgba(0, 0, 0, .12) ` break case 23: css = ` -webkit-box-shadow: 0 11px 14px -7px rgba(0, 0, 0, .2), 0 23px 36px 3px rgba(0, 0, 0, .14), 0 9px 44px 8px rgba(0, 0, 0, .12); box-shadow: 0 11px 14px -7px rgba(0, 0, 0, .2), 0 23px 36px 3px rgba(0, 0, 0, .14), 0 9px 44px 8px rgba(0, 0, 0, .12) ` break case 24: css = ` -webkit-box-shadow: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12); box-shadow: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12) ` break } return `${tagState(selector)} {${css}}` } // 鼠标悬停 阴影 function mdui_hoverable(selector) { return ` ${tagState(selector)} { -webkit-transition: -webkit-box-shadow .25s cubic-bezier(.4, 0, .2, 1); transition: -webkit-box-shadow .25s cubic-bezier(.4, 0, .2, 1); transition: box-shadow .25s cubic-bezier(.4, 0, .2, 1); transition: box-shadow .25s cubic-bezier(.4, 0, .2, 1), -webkit-box-shadow .25s cubic-bezier(.4, 0, .2, 1); will-change: box-shadow } ${tagState(selector, ':focus')}, ${tagState(selector, ':hover')} { -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12); box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12) } ` } function initHomeCss(color) { return ` ` } // 帖子标题 浏览数据 function generatePostTitleAndAttr() { let data = { // 标题 title: '', // 访问数据 attr: { reply: { text: '回复', amount: '', onclick: '' }, view: { text: '查看', amount: '' }, favorite: { text: '收藏', amount: '', onclick: '' } } } parseData() remove() generate() function parseData() { data.title = $('a#thread_subject').attr('title') const $postData = $('div.subforum_right_title > div div:odd') const $postFavorite = $('#k_favorite') const $postReply = $('#post_reply') data.attr = { reply: { text: '回复', amount: $postData[0].innerText, onclick: $postReply.attr('onclick') }, view: { text: '查看', amount: $postData[1].innerText }, favorite: { text: '收藏', amount: $postData[2].innerText, onclick: `showWindow('k_favorite', '${$postFavorite.attr('href')}', 'get', 0);` } } } function remove() { $('#pgt, div.subforum').remove() } function generate() { $('body').prepend(`

${data.title}

`) } } // 帖子内容 md化 function mdPost() { $('body').append(`
`) mdContent() generateBtnGroup() mdReply() mdPostSelf() mdPostOthers() // 帖子 function mdContent() { // 鼠标悬浮加深阴影 阴影 $('#postlist').addClass('mdui-hoverable mdui-shadow-5') // 回复间隙 改为主题色 $('.ad').addClass('mdui-color-theme') // 帖子-回复按钮 $('.pob.cl a').addClass('mdui-btn mdui-ripple mdui-btn-dense') } // 回复页数 按钮组 function generateBtnGroup() { //
//
// chevron_left // 1 // 2 // 3 // 4 // 5 // 6 // 7 // 8 // 9 // 10 // ...32 // chevron_right //
//
// 查找特殊节点 function findPage(cName) { const tmpNode = $(`.pg .${cName}`) if (tmpNode === undefined) { return undefined } return { text: tmpNode.text(), href: tmpNode.attr('href') } } function addTextBtn(data, isActive) { return `${data.text}` } function addIconBtn(data, icon) { return `${icon}` } let pervPage = findPage('prev') let firstPage = findPage('first') let lastPage = findPage('last') let nextPage = findPage('nxt') let pageGroupHtml = `
` if (pervPage.href) { pageGroupHtml += addIconBtn(pervPage, 'chevron_left') } if (firstPage.href) { pageGroupHtml += addTextBtn(firstPage, false) } $('.pg > a:not(.first,.prev,.nxt,.last),.pg > strong').each((i, e) => { const date = { href: e.href === undefined ? 'javascript:;' : e.href, text: e.innerText } pageGroupHtml += addTextBtn(date, e.href === undefined) }) if (lastPage.href) { pageGroupHtml += addTextBtn(lastPage, false) } if (nextPage.href) { pageGroupHtml += addIconBtn(nextPage, 'chevron_right') } pageGroupHtml += `
` $('#postlist').append(pageGroupHtml) // 隐藏默认 $('.pgbtn,.pgs.mtm.mbm.cl').remove() } // 底部回复区域 function mdReply() { // 回复按钮 $('#f_pst').appendTo('#postlist') .prepend('
') $('#fastpostsubmit').replaceWith('') // $('p.ptm.pnpost').addClass('mdui-valign') $('p.ptm.pnpost a.y').appendTo('p.ptm.pnpost') // 回帖跳转最后一页 $('label[for=fastpostrefresh]').addClass('mdui-checkbox') .append('') } // 帖子正文 function mdPostSelf() { function genBtn(e, text) { return `${text}` } // 收藏、评分按钮 let $k_favorite = $('a#k_favorite') let $ak_rate = $('a#ak_rate') $k_favorite.replaceWith(genBtn($k_favorite, '收藏')) $ak_rate.replaceWith(genBtn($ak_rate, '评分')) } // 其回复 function mdPostOthers() { } } // 返回顶部按钮 function generateScrollTopBtn() { $('body').append('') let scrollTopHide = true $(window).scroll(() => { if ($(window).scrollTop() > 100) { // 显示 if (scrollTopHide) { scrollTopHide = !scrollTopHide $('#my_ScrollTopBtn').removeClass('mdui-fab-hide') } } else { // 隐藏 if (!scrollTopHide) { scrollTopHide = !scrollTopHide $('#my_ScrollTopBtn').addClass('mdui-fab-hide') } } }) $(window).trigger('scroll') $('#my_ScrollTopBtn').on('click', () => { $('html,body').finish().animate({'scrollTop': '0px'}, 500) }) } function mdOther() { generateScrollTopBtn() } const THEME_TYPE_DATLE = 0, THEME_TYPE_NIGHT = 1 function init(css, randomColors) { loadResource(css) initTheme(randomColors) generateAppbar(randomColors.nav) } // 判断4类不同的页面 const locationHref = window.location if (/^https:\/\/steamcn.com\/(forum.php(\?gid=\d+)?)?$/.test(locationHref)) { /* * 首页 * https://steamcn.com/ * https://steamcn.com/forum.php/ */ console.log('home') let randomColors = generateRandomColors(THEME_TYPE_DATLE, 5) init(initHomeCss(randomColors), randomColors) generateScrollTopBtn() } else if (/^https:\/\/steamcn.com\/(f\d+)|(forum.php\?mod=forumdisplay)/.test(locationHref)) { /* * 目录 * https://steamcn.com/f274-1 * https://steamcn.com/forum.php?mod=forumdisplay&fid=274&filter=typeid&typeid=348 */ console.log('forum display') } else if (/^https:\/\/steamcn.com\/(t\d+)|(forum.php\?mod=viewthread)/.test(locationHref)) { /* * 帖子 * https://steamcn.com/t368540-1-1 * https://steamcn.com/forum.php?mod=viewthread&tid=368540&page=1#pid6102860 */ console.log('post') let randomColors = generateRandomColors(THEME_TYPE_DATLE) init(initPostCss(randomColors), randomColors) generatePostTitleAndAttr() mdPost() mdOther() } else if (/^https:\/\/steamcn.com\/home.php/.test(locationHref)) { /* * 个人页面 * https://steamcn.com/t368540-1-1 * https://steamcn.com/forum.php?mod=viewthread&tid=368540&page=1#pid6102860 */ console.log('profile') } else { console.log('unknown') } })()