From a98a993a4fa9013a28e9eb513bd135f16eae6e78 Mon Sep 17 00:00:00 2001 From: the1812 Date: Mon, 24 Dec 2018 18:25:00 +0800 Subject: [PATCH] Refactor theme colors --- bilibili-evolved.offline.user.js | 22 ++++++---------------- bilibili-evolved.preview-offline.user.js | 22 ++++++---------------- bilibili-evolved.preview.user.js | 18 ++++-------------- bilibili-evolved.user.js | 18 ++++-------------- min/theme-colors.min.js | 2 +- utils/gui-settings/theme-colors.js | 10 ++++------ 6 files changed, 25 insertions(+), 67 deletions(-) diff --git a/bilibili-evolved.offline.user.js b/bilibili-evolved.offline.user.js index b81edebe9..6e70e0b18 100644 --- a/bilibili-evolved.offline.user.js +++ b/bilibili-evolved.offline.user.js @@ -1,6 +1,6 @@ // ==UserScript== // @name Bilibili Evolved (Offline) -// @version 160.30 +// @version 161.11 // @description 增强哔哩哔哩Web端体验(离线版): 修复界面瑕疵, 删除广告, 使用夜间模式浏览; 下载视频,封面,弹幕, 以及增加对触屏设备的支持等. // @author Grant Howard, Coulomb-G // @copyright 2018, Grant Howrad (https://github.com/the1812) @@ -1041,7 +1041,7 @@ offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/v offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/min/icons.min.css"] = `.icons-enabled [class^=icon-]{width:24px;height:24px;display:inline-block;background-image:none;}.icons-enabled [class^=icon-]::after{content:"";width:24px;height:24px;display:inline-block;}.icons-enabled .icon-view::after{background-image:url('data:image/svg+xml;utf-8,');}.icons-enabled .icon-clear::after{background-image:url('data:image/svg+xml;utf-8,');}.icons-enabled .icon-download::after{background-image:url('data:image/svg+xml;utf-8,');}.icons-enabled .icon-update::after{background-image:url('data:image/svg+xml;utf-8,');}.icons-enabled .icon-info::after{background-image:url('data:image/svg+xml;utf-8,');}.icons-enabled .icon-settings::after{background-image:url('data:image/svg+xml;utf-8,');}.icons-enabled .icon-widgets::after{background-image:url('data:image/svg+xml;utf-8,');}.icons-enabled .icon-cancel::after{background-image:url('data:image/svg+xml;utf-8,');}.icons-enabled .icon-ok::after{background-image:url('data:image/svg+xml;utf-8,');}.icons-enabled .icon-video::after{background-image:url('data:image/svg+xml;utf-8, ');}.icons-enabled .icon-style::after{background-image:url('data:image/svg+xml;utf-8, ');}.icons-enabled .icon-tool::after{background-image:url('data:image/svg+xml;utf-8, ');}.icons-enabled .icon-touch::after{background-image:url('data:image/svg+xml;utf-8, ');}.icons-enabled .icon-other::after{background-image:url('data:image/svg+xml;utf-8, ');}.icons-enabled .icon-arrow::after{background-image:url('data:image/svg+xml;utf-8,');}.icons-enabled .icon-rank::after{background-image:url('data:image/svg+xml;utf-8, ');}.icons-enabled .icon-like::after{background-image:url('data:image/svg+xml;utf-8,');}.icons-enabled .icon-danmaku::after{background-image:url('data:image/svg+xml;utf-8,');}`; offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/min/settings-side-bar.min.js"] = (()=>{return(i,s)=>{if($(".gui-settings-icon-panel").length===0){$("body").append(`\n
\n
\n \n
\n
\n \n
\n
`);$(".gui-settings").on("click",()=>{$(".gui-settings-box,.gui-settings-mask").addClass("opened")});$(".gui-settings-widgets").on("click",()=>{$(".gui-settings-widgets-box,.gui-settings-mask").addClass("opened")})}}})(); offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/min/text-validate.min.js"] = (()=>{return(t,e)=>{class i{constructor(t){this.key=t}get originalValue(){return t[this.key]}static getValidator(t){switch(t){case"customStyleColor":return new r(t);case"blurBackgroundOpacity":case"customControlBackgroundOpacity":return new a(t);case"defaultPlayerMode":case"defaultVideoQuality":return new s(t);case"darkScheduleStart":case"darkScheduleEnd":return new n(t);default:return new i(t)}}isValidate(t){return t}validate(t){const e=this.isValidate(t);if(e===undefined){return this.originalValue}return e}}class r extends i{isValidate(t){if(/^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/.test(t)){if(t.length<7){return`#${t[1]}${t[1]}${t[2]}${t[2]}${t[3]}${t[3]}`}else{return t}}}}class a extends i{isValidate(t){if(/^([-\+]?\d+)(\.\d+)?$/.test(t)){const e=parseFloat(t);if(e>=0&&e<=1){return t}}}}class s extends i{isValidate(t){const[e]=Object.values(Resource.manifest).filter(t=>t.dropdown&&t.dropdown.key===this.key).map(t=>t.dropdown);if(e.items.indexOf(t)!==-1){return t}}}class n extends i{isValidate(t){const e=t.match(/^([\d]{1,2}):([\d]{1,2})$/);if(e&&e.length>=3){const t={hour:parseInt(e[1]),minute:parseInt(e[2])};(function(){while(this.minute<0){this.minute+=60;this.hour-=1}while(this.minute>=60){this.minute-=60;this.hour+=1}while(this.hour<0){this.hour+=24}while(this.hour>=24){this.hour-=24}}).call(t);return`${t.hour}:${t.minute<10?"0"+t.minute:t.minute}`}}}return{export:{Validator:i,ColorValidator:r,DropDownValidator:s,OpacityValidator:a,TimeValidator:n}}}})(); -offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/min/theme-colors.min.js"] = (()=>{return(e,o)=>{const r={red:"#e57373",pink:"#F06292",purple:"#BA68C8",deepPurple:"#9575CD",indigo:"#7986CB",blue:"#2196F3",lightBlue:"#00A0D8",cyan:"#00ACC1",teal:"#26A69A",green:"#81C784",lightGreen:"#9CCC65",orange:"#FF9800",deepOrange:"#FF7043",brown:"#A1887F",grey:"#757575",blueGrey:"#78909C"};class t{constructor(){this.reloadColor=(()=>{const e=document.querySelector("html");return function(o){const r=new ColorProcessor(o);const t=r.hexToRgba(o+"70");$("div.custom-color-preview").css("background",o).css("box-shadow",`0px 2px 8px 1px rgba(${t.r},${t.g},${t.b},${t.a})`);e.style.setProperty("--theme-color",o);for(let t=10;t<=90;t+=10){e.style.setProperty(`--theme-color-${t}`,r.rgbToString(r.hexToRgba(o+t)))}e.style.setProperty("--foreground-color",r.foreground);e.style.setProperty("--foreground-color-b",r.rgbToString(r.hexToRgba(r.foreground+"b")));e.style.setProperty("--foreground-color-d",r.rgbToString(r.hexToRgba(r.foreground+"d")));e.style.setProperty("--blue-image-filter",r.blueImageFilter);e.style.setProperty("--pink-image-filter",r.pinkImageFilter);e.style.setProperty("--brightness",r.brightness);e.style.setProperty("--invert-filter",r.filterInvert)}})()}setupDom(){$(`input[key='customStyleColor']`).on("change",()=>{this.reloadColor($(`input[key='customStyleColor']`).val())});const e=$(".predefined-colors-grid");for(const o of Object.values(r)){$(`
`).appendTo(e).css("background",o).attr("data-color",o).on("click",e=>{const o=$(e.target).attr("data-color");$(`input[key='customStyleColor']`).val(o).trigger("input").change();$("div.custom-color-preview").on("click")})}$("div.custom-color-preview").on("click",()=>{const e=$(".predefined-colors");e.toggleClass("opened")})}}return{export:t}}})(); +offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/min/theme-colors.min.js"] = (()=>{return(e,o)=>{const r={red:"#e57373",pink:"#F06292",purple:"#BA68C8",deepPurple:"#9575CD",indigo:"#7986CB",blue:"#2196F3",lightBlue:"#00A0D8",cyan:"#00ACC1",teal:"#26A69A",green:"#81C784",lightGreen:"#9CCC65",orange:"#FF9800",deepOrange:"#FF7043",brown:"#A1887F",grey:"#757575",blueGrey:"#78909C"};class t{constructor(){this.reloadColor=(()=>{const e=document.querySelector("html");return function(o){const r=new ColorProcessor(o);const t=e=>r.rgbToString(r.hexToRgba(e));const l=r.hexToRgba(o+"70");$("div.custom-color-preview").css("background",o).css("box-shadow",`0px 2px 8px 1px rgba(${l.r},${l.g},${l.b},${l.a})`);e.style.setProperty("--theme-color",o);for(let r=10;r<=90;r+=10){e.style.setProperty(`--theme-color-${r}`,t(o+r))}e.style.setProperty("--foreground-color",r.foreground);e.style.setProperty("--foreground-color-b",t(r.foreground+"b"));e.style.setProperty("--foreground-color-d",t(r.foreground+"d"));e.style.setProperty("--blue-image-filter",r.blueImageFilter);e.style.setProperty("--pink-image-filter",r.pinkImageFilter);e.style.setProperty("--brightness",r.brightness);e.style.setProperty("--invert-filter",r.filterInvert)}})()}setupDom(){$(`input[key='customStyleColor']`).on("change",()=>{this.reloadColor($(`input[key='customStyleColor']`).val())});const e=$(".predefined-colors-grid");for(const o of Object.values(r)){$(`
`).appendTo(e).css("background",o).attr("data-color",o).on("click",e=>{const o=$(e.target).attr("data-color");$(`input[key='customStyleColor']`).val(o).trigger("input").change();$("div.custom-color-preview").on("click")})}$("div.custom-color-preview").on("click",()=>{const e=$(".predefined-colors");e.toggleClass("opened")})}}return{export:t}}})(); offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/min/settings-tooltip.min.css"] = `.gui-settings-tooltip{position:fixed;left:420px;color:white;background:#0008;padding:1rem;font-size:12pt;top:50%;transform:translateY(-50%);transition:all .2s ease-out .8s;opacity:0;min-width:100%;max-height:60%;line-height:24px;white-space:pre-wrap;pointer-events:none;}.gui-settings-tooltip.show{pointer-events:initial;opacity:1;}.gui-settings-tooltip span{font-weight:bold;}`; offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/min/settings-tooltip.min.js"] = (()=>{return(n,a)=>{const e={defaultPlayerMode:`设置默认的播放器模式, 可以为常规, 宽屏网页全屏(全屏还未完成). 默认模式将在进入视频页面的首次播放时应用.`,useDefaultVideoQuality:`进入视频时自动选择指定的画质, 若视频最高画质低于所选画质, 则使用视频的最高画质.`,defaultVideoQuality:`设定自动选择的视频画质.`,autoLightOff:`首次播放时, 自动进入关灯模式.`,useDefaultDanmakuSettings:`设置默认是否开启弹幕, 以及是否记住弹幕屏蔽类型.`,enableDanmaku:`控制弹幕是否默认开启.`,rememberDanmakuBlock:`控制是否记住弹幕屏蔽类型, 在播放器中选择要屏蔽的弹幕类型后, 每个视频都会默认屏蔽这些类型的弹幕.`,expandDanmakuList:`新版播放页面中, 弹幕列表默认收起以显示推荐的其他视频. 启用此功能可在每次加载视频时自动展开弹幕列表.`,expandDescription:`长的视频简介默认会被折叠, 启用此功能可以强制展开完整的视频简介.`,autoContinue:`播放视频时如果检测到历史记录信息(上次看到...消息), 则自动跳转到相应的时间播放.`,skipChargeList:`自动跳过视频结尾的充电鸣谢.`,customStyleColor:`设定顶栏(样式调整启用时)和夜间模式使用的主题色, 可以点击颜色预览的圆圈打开色板, 其中含有预定义的16种主题色, 也可以在右侧的文本框直接输入任何有效的16进制颜色值(#rrggbb#rgb).`,useNewStyle:`主要会改变顶栏的样式, 并有一些其他地方的界面微调:\n- 为播放器增加主题色投影\n- 可控制顶栏对横幅的透明度\n- 使播放器按钮垂直对齐\n- 使部分搜索栏的提示文字的颜色更清晰\n- 隐藏播放页面的"返回旧版"侧栏\n- 修复直播间一些文字初始状态不正确`,blurBackgroundOpacity:`设置顶栏对横幅的透明度(0~1), 数值越高顶栏越淡, 当横幅关闭时此选项无效.`,useDarkStyle:`夜间模式更适合光线暗的环境, 并会大量应用主题颜色.`,darkSchedule:`设置一个使用夜间模式的时间段, 进入/离开此时间段时, 会自动开启/关闭夜间模式.\n结束时间小于起始时间时将视为次日, 如18:006:00表示晚上18:00到次日6:00.`,darkScheduleStart:`设置计划时段的起始时间.`,darkScheduleEnd:`设置计划时段的结束时间.`,overrideNavBar:`开启后, 在主站中总是把搜索框置于顶栏, 如果页面里没有搜索栏则不会显示.`,showBanner:`控制是否显示主站顶部的横幅`,preserveRank:`控制是否在搜索框左侧显示排行榜图标.`,blurVideoControl:`模糊视频控制栏背景, 原版的阴影效果将无效.`,customControlBackground:`给视频控制栏附上半透明的黑色, 代替原来的阴影.`,customControlBackgroundOpacity:`设置控制栏着色的黑色不透明度(0~1), 数值越大黑色越浓.`,harunaScale:`根据屏幕DPI缩放直播看板娘的大小以提高像素的清晰度.`,removeLiveWatermark:`删除观看直播时角落的水印.`,removeVideoTopMask:`删除视频里鼠标经过时出现在顶端的标题覆盖层.`,forceWide:`对主站强制使用宽屏样式, 将在宽度达到1300px时启用. 此功能的适用范围为屏幕宽度介于1300px1400px的设备.\n原有的宽屏样式会在宽度超过1400px时自动启用, 如果你的屏幕宽度大于1400px, 则没有必要开启此功能.\n非宽屏样式下, 首页视频排行为2行3列; 宽屏样式下, 首页视频排行为2行4列.`,removeAds:`删除站内的各种广告. 包括首页的推广模块, 手机app推荐, 视频页面右侧的广告等.`,watchLaterRedirect:`将稍后再看的链接重定向为普通播放网址, 以使用新版播放页面.`,hideTopSearch:`将搜索框的推荐词替换为搜索.`,fullTweetsTitle:`在顶栏的动态预览框中, 总是展开完整的标题.`,touchNavBar:`删除顶栏右侧的一级链接(从大会员历史), 以方便触屏设备快速预览信息. 被删除的链接可从各预览中的查看更多进入.`,touchVideoPlayer:`增大控制栏的按钮间距, 使触摸操作更准确. 并为播放器启用触摸支持:\n- 左右滑动可调整进度\n- 上下滑动可调整音量\n- 进度调整可在左上角和右上角取消\n- 在不同位置滑动, 可以使用3档不同的灵敏度.`,touchVideoPlayerAnimation:`决定是否要对触摸调整的提示框使用出现/消失动画, 此动画可能导致掉帧.`,touchVideoPlayerDoubleTapControl:`将操作方式更改为: 单击显示/隐藏控制栏, 双击播放/暂停.`,toast:`允许在网页左下角显示来自本脚本的消息, 如更新提醒, 错误提示等.`,toastInternalError:`开启后, 错误消息将显示详细的技术性错误信息及堆栈跟踪, 这通常用于准确地确定问题发生的原因, 所以报告问题时这些信息会非常有用.`,useCache:`使用缓存以提高脚本的加载速度.`};function s(n){const a=$(n).find("input");if(a.length>0){return a.attr("key")}return null}(async()=>{const n=await SpinQuery.select(()=>document.querySelector(".gui-settings-tooltip"));document.querySelectorAll(".gui-settings-content>ul>li").forEach(a=>{a.addEventListener("mouseover",()=>{const t=e[s(a)];if(t!==undefined){n.innerHTML=t;n.classList.add("show")}});a.addEventListener("mouseout",()=>{n.classList.remove("show")})})})()}})(); offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/min/gui-settings.min.js"] = (()=>{return(e,t)=>{const n=t.attributes.textValidate.export.Validator;const i=t.attributes.themeColors.export;const s=new i;const o=t.data.guiSettingsDom.text;function a(e){let t=e.nextElementSibling;const n=[];while(t!==null&&!t.classList.contains("category")){n.push(t);t=t.nextElementSibling}return n}function c(e,t){$(`input[type='checkbox'][key='${e}']`).prop("checked",t);$(`input[type='text'][key='${e}']`).val(t)}function l(){for(const[t,n]of Object.entries(e)){c(t,n)}}function p(){$(".gui-settings-mask").on("click",()=>{$(".gui-settings-widgets-box,.gui-settings-box,.gui-settings-mask").removeClass("opened")});$("input[type='text'][key]").each((t,n)=>{$(n).attr("placeholder",e[$(n).attr("key")])});$(".gui-settings-content ul li.category").on("click",e=>{e.currentTarget.classList.toggle("folded");a(e.currentTarget).forEach(e=>e.classList.toggle("folded"))});$(".gui-settings-dropdown>input").on("click",e=>{$(e.currentTarget).parent().toggleClass("opened")});onSettingsChange((t,n,i)=>{if(e[t]!==i){e[t]=i;$(`input[type='checkbox'][key='${t}']`).prop("checked",i).change();$(`input[type='text'][key='${t}']`).val(i).change()}})}function r(){const t=e=>{};$("input[type='checkbox'][key]").each((n,i)=>{$(i).on("change",()=>{const n=i.getAttribute("key");const s=i.checked;e[n]=s;t(n);saveSettings(e)})});$("input[type='text'][key]").each((i,s)=>{$(s).on("change",()=>{const i=s.getAttribute("key");const o=n.getValidator(i).validate(s.value);e[i]=o;s.value=o;t(i);saveSettings(e)})})}function u(){const e={};$(`input[dependencies]`).each((t,n)=>{const i=$(n).attr("dependencies");if(i){e[$(n).attr("key")]=i}});const t=t=>{const n=t.prop("checked");for(const i in e){const s=e[i].split(" ");if(s.indexOf(t.attr("key"))!==-1){let e=true;if(n&&s.every(e=>$(`input[key='${e}']`).prop("checked"))){e=false}const t=$(`li:has(input[key='${i}'])`);const o=e?"addClass":"removeClass";t[o]("disabled");$(`input[key='${i}'][type='text']`).parent()[o]("disabled")}}};$(`input[type='checkbox'][key]`).on("change",e=>t($(e.target))).each((e,n)=>t($(n)))}function d(){if(typeof offlineData!=="undefined"){$("li:has(input[key=useCache])").addClass("disabled");$("input[key=useCache]").prop("disabled",true)}}function g(){$(".gui-settings-content ul li.category").each((e,t)=>{$(t).click()})}function y(){if(!CSS.supports("backdrop-filter","blur(24px)")&&!CSS.supports("-webkit-backdrop-filter","blur(24px)")){$("input[key=blurVideoControl]").prop("disabled",true);e.blurVideoControl=false;saveSettings(e)}if(window.devicePixelRatio===1){$("input[key=harunaScale]").prop("disabled",true);e.harunaScale=false;saveSettings(e)}}t.applyStyle("guiSettingsStyle");$("body").append(o);p();d();l();u();s.setupDom();r();g();y();new SpinQuery(()=>$("body"),e=>e.length>0&&!(unsafeWindow.parent.window===unsafeWindow),e=>$(".gui-settings-icon-panel").css("display","none")).start()}})(); @@ -1326,26 +1326,16 @@ offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/m settings.brightness = this.color.brightness; settings.filterInvert = this.color.filterInvert; - const rgbToString = color => - { - if (color.a) - { - return `rgba(${color.r},${color.g},${color.b},${color.a})`; - } - return `rgb(${color.r},${color.g},${color.b})`; - }; + const hexToRgba = input => this.color.rgbToString(this.color.hexToRgba(input)); let styles = []; styles.push("--theme-color:" + settings.customStyleColor); for (let opacity = 10; opacity <= 90; opacity += 10) { - styles.push(`--theme-color-${opacity}:` + - rgbToString(this.color.hexToRgba(settings.customStyleColor + opacity))); + styles.push(`--theme-color-${opacity}:` + hexToRgba(settings.customStyleColor + opacity)); } styles.push("--foreground-color:" + settings.foreground); - styles.push("--foreground-color-b:" + - rgbToString(this.color.hexToRgba(settings.foreground + "b"))); - styles.push("--foreground-color-d:" + - rgbToString(this.color.hexToRgba(settings.foreground + "d"))); + styles.push("--foreground-color-b:" + hexToRgba(settings.foreground + "b")); + styles.push("--foreground-color-d:" + hexToRgba(settings.foreground + "d")); styles.push("--blue-image-filter:" + settings.blueImageFilter); styles.push("--pink-image-filter:" + settings.pinkImageFilter); styles.push("--brightness:" + settings.brightness); diff --git a/bilibili-evolved.preview-offline.user.js b/bilibili-evolved.preview-offline.user.js index c61739c6a..1692dc1c8 100644 --- a/bilibili-evolved.preview-offline.user.js +++ b/bilibili-evolved.preview-offline.user.js @@ -1,6 +1,6 @@ // ==UserScript== // @name Bilibili Evolved (Preview Offline) -// @version 160.30 +// @version 161.11 // @description 增强哔哩哔哩Web端体验(预览离线版): 修复界面瑕疵, 删除广告, 使用夜间模式浏览; 下载视频,封面,弹幕, 以及增加对触屏设备的支持等. // @author Grant Howard, Coulomb-G // @copyright 2018, Grant Howrad (https://github.com/the1812) @@ -1041,7 +1041,7 @@ offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/v offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/min/icons.min.css"] = `.icons-enabled [class^=icon-]{width:24px;height:24px;display:inline-block;background-image:none;}.icons-enabled [class^=icon-]::after{content:"";width:24px;height:24px;display:inline-block;}.icons-enabled .icon-view::after{background-image:url('data:image/svg+xml;utf-8,');}.icons-enabled .icon-clear::after{background-image:url('data:image/svg+xml;utf-8,');}.icons-enabled .icon-download::after{background-image:url('data:image/svg+xml;utf-8,');}.icons-enabled .icon-update::after{background-image:url('data:image/svg+xml;utf-8,');}.icons-enabled .icon-info::after{background-image:url('data:image/svg+xml;utf-8,');}.icons-enabled .icon-settings::after{background-image:url('data:image/svg+xml;utf-8,');}.icons-enabled .icon-widgets::after{background-image:url('data:image/svg+xml;utf-8,');}.icons-enabled .icon-cancel::after{background-image:url('data:image/svg+xml;utf-8,');}.icons-enabled .icon-ok::after{background-image:url('data:image/svg+xml;utf-8,');}.icons-enabled .icon-video::after{background-image:url('data:image/svg+xml;utf-8, ');}.icons-enabled .icon-style::after{background-image:url('data:image/svg+xml;utf-8, ');}.icons-enabled .icon-tool::after{background-image:url('data:image/svg+xml;utf-8, ');}.icons-enabled .icon-touch::after{background-image:url('data:image/svg+xml;utf-8, ');}.icons-enabled .icon-other::after{background-image:url('data:image/svg+xml;utf-8, ');}.icons-enabled .icon-arrow::after{background-image:url('data:image/svg+xml;utf-8,');}.icons-enabled .icon-rank::after{background-image:url('data:image/svg+xml;utf-8, ');}.icons-enabled .icon-like::after{background-image:url('data:image/svg+xml;utf-8,');}.icons-enabled .icon-danmaku::after{background-image:url('data:image/svg+xml;utf-8,');}`; offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/min/settings-side-bar.min.js"] = (()=>{return(i,s)=>{if($(".gui-settings-icon-panel").length===0){$("body").append(`\n
\n
\n \n
\n
\n \n
\n
`);$(".gui-settings").on("click",()=>{$(".gui-settings-box,.gui-settings-mask").addClass("opened")});$(".gui-settings-widgets").on("click",()=>{$(".gui-settings-widgets-box,.gui-settings-mask").addClass("opened")})}}})(); offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/min/text-validate.min.js"] = (()=>{return(t,e)=>{class i{constructor(t){this.key=t}get originalValue(){return t[this.key]}static getValidator(t){switch(t){case"customStyleColor":return new r(t);case"blurBackgroundOpacity":case"customControlBackgroundOpacity":return new a(t);case"defaultPlayerMode":case"defaultVideoQuality":return new s(t);case"darkScheduleStart":case"darkScheduleEnd":return new n(t);default:return new i(t)}}isValidate(t){return t}validate(t){const e=this.isValidate(t);if(e===undefined){return this.originalValue}return e}}class r extends i{isValidate(t){if(/^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/.test(t)){if(t.length<7){return`#${t[1]}${t[1]}${t[2]}${t[2]}${t[3]}${t[3]}`}else{return t}}}}class a extends i{isValidate(t){if(/^([-\+]?\d+)(\.\d+)?$/.test(t)){const e=parseFloat(t);if(e>=0&&e<=1){return t}}}}class s extends i{isValidate(t){const[e]=Object.values(Resource.manifest).filter(t=>t.dropdown&&t.dropdown.key===this.key).map(t=>t.dropdown);if(e.items.indexOf(t)!==-1){return t}}}class n extends i{isValidate(t){const e=t.match(/^([\d]{1,2}):([\d]{1,2})$/);if(e&&e.length>=3){const t={hour:parseInt(e[1]),minute:parseInt(e[2])};(function(){while(this.minute<0){this.minute+=60;this.hour-=1}while(this.minute>=60){this.minute-=60;this.hour+=1}while(this.hour<0){this.hour+=24}while(this.hour>=24){this.hour-=24}}).call(t);return`${t.hour}:${t.minute<10?"0"+t.minute:t.minute}`}}}return{export:{Validator:i,ColorValidator:r,DropDownValidator:s,OpacityValidator:a,TimeValidator:n}}}})(); -offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/min/theme-colors.min.js"] = (()=>{return(e,o)=>{const r={red:"#e57373",pink:"#F06292",purple:"#BA68C8",deepPurple:"#9575CD",indigo:"#7986CB",blue:"#2196F3",lightBlue:"#00A0D8",cyan:"#00ACC1",teal:"#26A69A",green:"#81C784",lightGreen:"#9CCC65",orange:"#FF9800",deepOrange:"#FF7043",brown:"#A1887F",grey:"#757575",blueGrey:"#78909C"};class t{constructor(){this.reloadColor=(()=>{const e=document.querySelector("html");return function(o){const r=new ColorProcessor(o);const t=r.hexToRgba(o+"70");$("div.custom-color-preview").css("background",o).css("box-shadow",`0px 2px 8px 1px rgba(${t.r},${t.g},${t.b},${t.a})`);e.style.setProperty("--theme-color",o);for(let t=10;t<=90;t+=10){e.style.setProperty(`--theme-color-${t}`,r.rgbToString(r.hexToRgba(o+t)))}e.style.setProperty("--foreground-color",r.foreground);e.style.setProperty("--foreground-color-b",r.rgbToString(r.hexToRgba(r.foreground+"b")));e.style.setProperty("--foreground-color-d",r.rgbToString(r.hexToRgba(r.foreground+"d")));e.style.setProperty("--blue-image-filter",r.blueImageFilter);e.style.setProperty("--pink-image-filter",r.pinkImageFilter);e.style.setProperty("--brightness",r.brightness);e.style.setProperty("--invert-filter",r.filterInvert)}})()}setupDom(){$(`input[key='customStyleColor']`).on("change",()=>{this.reloadColor($(`input[key='customStyleColor']`).val())});const e=$(".predefined-colors-grid");for(const o of Object.values(r)){$(`
`).appendTo(e).css("background",o).attr("data-color",o).on("click",e=>{const o=$(e.target).attr("data-color");$(`input[key='customStyleColor']`).val(o).trigger("input").change();$("div.custom-color-preview").on("click")})}$("div.custom-color-preview").on("click",()=>{const e=$(".predefined-colors");e.toggleClass("opened")})}}return{export:t}}})(); +offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/min/theme-colors.min.js"] = (()=>{return(e,o)=>{const r={red:"#e57373",pink:"#F06292",purple:"#BA68C8",deepPurple:"#9575CD",indigo:"#7986CB",blue:"#2196F3",lightBlue:"#00A0D8",cyan:"#00ACC1",teal:"#26A69A",green:"#81C784",lightGreen:"#9CCC65",orange:"#FF9800",deepOrange:"#FF7043",brown:"#A1887F",grey:"#757575",blueGrey:"#78909C"};class t{constructor(){this.reloadColor=(()=>{const e=document.querySelector("html");return function(o){const r=new ColorProcessor(o);const t=e=>r.rgbToString(r.hexToRgba(e));const l=r.hexToRgba(o+"70");$("div.custom-color-preview").css("background",o).css("box-shadow",`0px 2px 8px 1px rgba(${l.r},${l.g},${l.b},${l.a})`);e.style.setProperty("--theme-color",o);for(let r=10;r<=90;r+=10){e.style.setProperty(`--theme-color-${r}`,t(o+r))}e.style.setProperty("--foreground-color",r.foreground);e.style.setProperty("--foreground-color-b",t(r.foreground+"b"));e.style.setProperty("--foreground-color-d",t(r.foreground+"d"));e.style.setProperty("--blue-image-filter",r.blueImageFilter);e.style.setProperty("--pink-image-filter",r.pinkImageFilter);e.style.setProperty("--brightness",r.brightness);e.style.setProperty("--invert-filter",r.filterInvert)}})()}setupDom(){$(`input[key='customStyleColor']`).on("change",()=>{this.reloadColor($(`input[key='customStyleColor']`).val())});const e=$(".predefined-colors-grid");for(const o of Object.values(r)){$(`
`).appendTo(e).css("background",o).attr("data-color",o).on("click",e=>{const o=$(e.target).attr("data-color");$(`input[key='customStyleColor']`).val(o).trigger("input").change();$("div.custom-color-preview").on("click")})}$("div.custom-color-preview").on("click",()=>{const e=$(".predefined-colors");e.toggleClass("opened")})}}return{export:t}}})(); offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/min/settings-tooltip.min.css"] = `.gui-settings-tooltip{position:fixed;left:420px;color:white;background:#0008;padding:1rem;font-size:12pt;top:50%;transform:translateY(-50%);transition:all .2s ease-out .8s;opacity:0;min-width:100%;max-height:60%;line-height:24px;white-space:pre-wrap;pointer-events:none;}.gui-settings-tooltip.show{pointer-events:initial;opacity:1;}.gui-settings-tooltip span{font-weight:bold;}`; offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/min/settings-tooltip.min.js"] = (()=>{return(n,a)=>{const e={defaultPlayerMode:`设置默认的播放器模式, 可以为常规, 宽屏网页全屏(全屏还未完成). 默认模式将在进入视频页面的首次播放时应用.`,useDefaultVideoQuality:`进入视频时自动选择指定的画质, 若视频最高画质低于所选画质, 则使用视频的最高画质.`,defaultVideoQuality:`设定自动选择的视频画质.`,autoLightOff:`首次播放时, 自动进入关灯模式.`,useDefaultDanmakuSettings:`设置默认是否开启弹幕, 以及是否记住弹幕屏蔽类型.`,enableDanmaku:`控制弹幕是否默认开启.`,rememberDanmakuBlock:`控制是否记住弹幕屏蔽类型, 在播放器中选择要屏蔽的弹幕类型后, 每个视频都会默认屏蔽这些类型的弹幕.`,expandDanmakuList:`新版播放页面中, 弹幕列表默认收起以显示推荐的其他视频. 启用此功能可在每次加载视频时自动展开弹幕列表.`,expandDescription:`长的视频简介默认会被折叠, 启用此功能可以强制展开完整的视频简介.`,autoContinue:`播放视频时如果检测到历史记录信息(上次看到...消息), 则自动跳转到相应的时间播放.`,skipChargeList:`自动跳过视频结尾的充电鸣谢.`,customStyleColor:`设定顶栏(样式调整启用时)和夜间模式使用的主题色, 可以点击颜色预览的圆圈打开色板, 其中含有预定义的16种主题色, 也可以在右侧的文本框直接输入任何有效的16进制颜色值(#rrggbb#rgb).`,useNewStyle:`主要会改变顶栏的样式, 并有一些其他地方的界面微调:\n- 为播放器增加主题色投影\n- 可控制顶栏对横幅的透明度\n- 使播放器按钮垂直对齐\n- 使部分搜索栏的提示文字的颜色更清晰\n- 隐藏播放页面的"返回旧版"侧栏\n- 修复直播间一些文字初始状态不正确`,blurBackgroundOpacity:`设置顶栏对横幅的透明度(0~1), 数值越高顶栏越淡, 当横幅关闭时此选项无效.`,useDarkStyle:`夜间模式更适合光线暗的环境, 并会大量应用主题颜色.`,darkSchedule:`设置一个使用夜间模式的时间段, 进入/离开此时间段时, 会自动开启/关闭夜间模式.\n结束时间小于起始时间时将视为次日, 如18:006:00表示晚上18:00到次日6:00.`,darkScheduleStart:`设置计划时段的起始时间.`,darkScheduleEnd:`设置计划时段的结束时间.`,overrideNavBar:`开启后, 在主站中总是把搜索框置于顶栏, 如果页面里没有搜索栏则不会显示.`,showBanner:`控制是否显示主站顶部的横幅`,preserveRank:`控制是否在搜索框左侧显示排行榜图标.`,blurVideoControl:`模糊视频控制栏背景, 原版的阴影效果将无效.`,customControlBackground:`给视频控制栏附上半透明的黑色, 代替原来的阴影.`,customControlBackgroundOpacity:`设置控制栏着色的黑色不透明度(0~1), 数值越大黑色越浓.`,harunaScale:`根据屏幕DPI缩放直播看板娘的大小以提高像素的清晰度.`,removeLiveWatermark:`删除观看直播时角落的水印.`,removeVideoTopMask:`删除视频里鼠标经过时出现在顶端的标题覆盖层.`,forceWide:`对主站强制使用宽屏样式, 将在宽度达到1300px时启用. 此功能的适用范围为屏幕宽度介于1300px1400px的设备.\n原有的宽屏样式会在宽度超过1400px时自动启用, 如果你的屏幕宽度大于1400px, 则没有必要开启此功能.\n非宽屏样式下, 首页视频排行为2行3列; 宽屏样式下, 首页视频排行为2行4列.`,removeAds:`删除站内的各种广告. 包括首页的推广模块, 手机app推荐, 视频页面右侧的广告等.`,watchLaterRedirect:`将稍后再看的链接重定向为普通播放网址, 以使用新版播放页面.`,hideTopSearch:`将搜索框的推荐词替换为搜索.`,fullTweetsTitle:`在顶栏的动态预览框中, 总是展开完整的标题.`,touchNavBar:`删除顶栏右侧的一级链接(从大会员历史), 以方便触屏设备快速预览信息. 被删除的链接可从各预览中的查看更多进入.`,touchVideoPlayer:`增大控制栏的按钮间距, 使触摸操作更准确. 并为播放器启用触摸支持:\n- 左右滑动可调整进度\n- 上下滑动可调整音量\n- 进度调整可在左上角和右上角取消\n- 在不同位置滑动, 可以使用3档不同的灵敏度.`,touchVideoPlayerAnimation:`决定是否要对触摸调整的提示框使用出现/消失动画, 此动画可能导致掉帧.`,touchVideoPlayerDoubleTapControl:`将操作方式更改为: 单击显示/隐藏控制栏, 双击播放/暂停.`,toast:`允许在网页左下角显示来自本脚本的消息, 如更新提醒, 错误提示等.`,toastInternalError:`开启后, 错误消息将显示详细的技术性错误信息及堆栈跟踪, 这通常用于准确地确定问题发生的原因, 所以报告问题时这些信息会非常有用.`,useCache:`使用缓存以提高脚本的加载速度.`};function s(n){const a=$(n).find("input");if(a.length>0){return a.attr("key")}return null}(async()=>{const n=await SpinQuery.select(()=>document.querySelector(".gui-settings-tooltip"));document.querySelectorAll(".gui-settings-content>ul>li").forEach(a=>{a.addEventListener("mouseover",()=>{const t=e[s(a)];if(t!==undefined){n.innerHTML=t;n.classList.add("show")}});a.addEventListener("mouseout",()=>{n.classList.remove("show")})})})()}})(); offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/min/gui-settings.min.js"] = (()=>{return(e,t)=>{const n=t.attributes.textValidate.export.Validator;const i=t.attributes.themeColors.export;const s=new i;const o=t.data.guiSettingsDom.text;function a(e){let t=e.nextElementSibling;const n=[];while(t!==null&&!t.classList.contains("category")){n.push(t);t=t.nextElementSibling}return n}function c(e,t){$(`input[type='checkbox'][key='${e}']`).prop("checked",t);$(`input[type='text'][key='${e}']`).val(t)}function l(){for(const[t,n]of Object.entries(e)){c(t,n)}}function p(){$(".gui-settings-mask").on("click",()=>{$(".gui-settings-widgets-box,.gui-settings-box,.gui-settings-mask").removeClass("opened")});$("input[type='text'][key]").each((t,n)=>{$(n).attr("placeholder",e[$(n).attr("key")])});$(".gui-settings-content ul li.category").on("click",e=>{e.currentTarget.classList.toggle("folded");a(e.currentTarget).forEach(e=>e.classList.toggle("folded"))});$(".gui-settings-dropdown>input").on("click",e=>{$(e.currentTarget).parent().toggleClass("opened")});onSettingsChange((t,n,i)=>{if(e[t]!==i){e[t]=i;$(`input[type='checkbox'][key='${t}']`).prop("checked",i).change();$(`input[type='text'][key='${t}']`).val(i).change()}})}function r(){const t=e=>{};$("input[type='checkbox'][key]").each((n,i)=>{$(i).on("change",()=>{const n=i.getAttribute("key");const s=i.checked;e[n]=s;t(n);saveSettings(e)})});$("input[type='text'][key]").each((i,s)=>{$(s).on("change",()=>{const i=s.getAttribute("key");const o=n.getValidator(i).validate(s.value);e[i]=o;s.value=o;t(i);saveSettings(e)})})}function u(){const e={};$(`input[dependencies]`).each((t,n)=>{const i=$(n).attr("dependencies");if(i){e[$(n).attr("key")]=i}});const t=t=>{const n=t.prop("checked");for(const i in e){const s=e[i].split(" ");if(s.indexOf(t.attr("key"))!==-1){let e=true;if(n&&s.every(e=>$(`input[key='${e}']`).prop("checked"))){e=false}const t=$(`li:has(input[key='${i}'])`);const o=e?"addClass":"removeClass";t[o]("disabled");$(`input[key='${i}'][type='text']`).parent()[o]("disabled")}}};$(`input[type='checkbox'][key]`).on("change",e=>t($(e.target))).each((e,n)=>t($(n)))}function d(){if(typeof offlineData!=="undefined"){$("li:has(input[key=useCache])").addClass("disabled");$("input[key=useCache]").prop("disabled",true)}}function g(){$(".gui-settings-content ul li.category").each((e,t)=>{$(t).click()})}function y(){if(!CSS.supports("backdrop-filter","blur(24px)")&&!CSS.supports("-webkit-backdrop-filter","blur(24px)")){$("input[key=blurVideoControl]").prop("disabled",true);e.blurVideoControl=false;saveSettings(e)}if(window.devicePixelRatio===1){$("input[key=harunaScale]").prop("disabled",true);e.harunaScale=false;saveSettings(e)}}t.applyStyle("guiSettingsStyle");$("body").append(o);p();d();l();u();s.setupDom();r();g();y();new SpinQuery(()=>$("body"),e=>e.length>0&&!(unsafeWindow.parent.window===unsafeWindow),e=>$(".gui-settings-icon-panel").css("display","none")).start()}})(); @@ -1326,26 +1326,16 @@ offlineData["https://raw.githubusercontent.com/the1812/Bilibili-Evolved/master/m settings.brightness = this.color.brightness; settings.filterInvert = this.color.filterInvert; - const rgbToString = color => - { - if (color.a) - { - return `rgba(${color.r},${color.g},${color.b},${color.a})`; - } - return `rgb(${color.r},${color.g},${color.b})`; - }; + const hexToRgba = input => this.color.rgbToString(this.color.hexToRgba(input)); let styles = []; styles.push("--theme-color:" + settings.customStyleColor); for (let opacity = 10; opacity <= 90; opacity += 10) { - styles.push(`--theme-color-${opacity}:` + - rgbToString(this.color.hexToRgba(settings.customStyleColor + opacity))); + styles.push(`--theme-color-${opacity}:` + hexToRgba(settings.customStyleColor + opacity)); } styles.push("--foreground-color:" + settings.foreground); - styles.push("--foreground-color-b:" + - rgbToString(this.color.hexToRgba(settings.foreground + "b"))); - styles.push("--foreground-color-d:" + - rgbToString(this.color.hexToRgba(settings.foreground + "d"))); + styles.push("--foreground-color-b:" + hexToRgba(settings.foreground + "b")); + styles.push("--foreground-color-d:" + hexToRgba(settings.foreground + "d")); styles.push("--blue-image-filter:" + settings.blueImageFilter); styles.push("--pink-image-filter:" + settings.pinkImageFilter); styles.push("--brightness:" + settings.brightness); diff --git a/bilibili-evolved.preview.user.js b/bilibili-evolved.preview.user.js index 5e0381c91..69d1fa484 100644 --- a/bilibili-evolved.preview.user.js +++ b/bilibili-evolved.preview.user.js @@ -1298,26 +1298,16 @@ settings.brightness = this.color.brightness; settings.filterInvert = this.color.filterInvert; - const rgbToString = color => - { - if (color.a) - { - return `rgba(${color.r},${color.g},${color.b},${color.a})`; - } - return `rgb(${color.r},${color.g},${color.b})`; - }; + const hexToRgba = input => this.color.rgbToString(this.color.hexToRgba(input)); let styles = []; styles.push("--theme-color:" + settings.customStyleColor); for (let opacity = 10; opacity <= 90; opacity += 10) { - styles.push(`--theme-color-${opacity}:` + - rgbToString(this.color.hexToRgba(settings.customStyleColor + opacity))); + styles.push(`--theme-color-${opacity}:` + hexToRgba(settings.customStyleColor + opacity)); } styles.push("--foreground-color:" + settings.foreground); - styles.push("--foreground-color-b:" + - rgbToString(this.color.hexToRgba(settings.foreground + "b"))); - styles.push("--foreground-color-d:" + - rgbToString(this.color.hexToRgba(settings.foreground + "d"))); + styles.push("--foreground-color-b:" + hexToRgba(settings.foreground + "b")); + styles.push("--foreground-color-d:" + hexToRgba(settings.foreground + "d")); styles.push("--blue-image-filter:" + settings.blueImageFilter); styles.push("--pink-image-filter:" + settings.pinkImageFilter); styles.push("--brightness:" + settings.brightness); diff --git a/bilibili-evolved.user.js b/bilibili-evolved.user.js index e7d1ec9d6..0e148cf10 100644 --- a/bilibili-evolved.user.js +++ b/bilibili-evolved.user.js @@ -1298,26 +1298,16 @@ settings.brightness = this.color.brightness; settings.filterInvert = this.color.filterInvert; - const rgbToString = color => - { - if (color.a) - { - return `rgba(${color.r},${color.g},${color.b},${color.a})`; - } - return `rgb(${color.r},${color.g},${color.b})`; - }; + const hexToRgba = input => this.color.rgbToString(this.color.hexToRgba(input)); let styles = []; styles.push("--theme-color:" + settings.customStyleColor); for (let opacity = 10; opacity <= 90; opacity += 10) { - styles.push(`--theme-color-${opacity}:` + - rgbToString(this.color.hexToRgba(settings.customStyleColor + opacity))); + styles.push(`--theme-color-${opacity}:` + hexToRgba(settings.customStyleColor + opacity)); } styles.push("--foreground-color:" + settings.foreground); - styles.push("--foreground-color-b:" + - rgbToString(this.color.hexToRgba(settings.foreground + "b"))); - styles.push("--foreground-color-d:" + - rgbToString(this.color.hexToRgba(settings.foreground + "d"))); + styles.push("--foreground-color-b:" + hexToRgba(settings.foreground + "b")); + styles.push("--foreground-color-d:" + hexToRgba(settings.foreground + "d")); styles.push("--blue-image-filter:" + settings.blueImageFilter); styles.push("--pink-image-filter:" + settings.pinkImageFilter); styles.push("--brightness:" + settings.brightness); diff --git a/min/theme-colors.min.js b/min/theme-colors.min.js index 9a8f93e44..8e17229c2 100644 --- a/min/theme-colors.min.js +++ b/min/theme-colors.min.js @@ -1 +1 @@ -(()=>{return(e,o)=>{const r={red:"#e57373",pink:"#F06292",purple:"#BA68C8",deepPurple:"#9575CD",indigo:"#7986CB",blue:"#2196F3",lightBlue:"#00A0D8",cyan:"#00ACC1",teal:"#26A69A",green:"#81C784",lightGreen:"#9CCC65",orange:"#FF9800",deepOrange:"#FF7043",brown:"#A1887F",grey:"#757575",blueGrey:"#78909C"};class t{constructor(){this.reloadColor=(()=>{const e=document.querySelector("html");return function(o){const r=new ColorProcessor(o);const t=r.hexToRgba(o+"70");$("div.custom-color-preview").css("background",o).css("box-shadow",`0px 2px 8px 1px rgba(${t.r},${t.g},${t.b},${t.a})`);e.style.setProperty("--theme-color",o);for(let t=10;t<=90;t+=10){e.style.setProperty(`--theme-color-${t}`,r.rgbToString(r.hexToRgba(o+t)))}e.style.setProperty("--foreground-color",r.foreground);e.style.setProperty("--foreground-color-b",r.rgbToString(r.hexToRgba(r.foreground+"b")));e.style.setProperty("--foreground-color-d",r.rgbToString(r.hexToRgba(r.foreground+"d")));e.style.setProperty("--blue-image-filter",r.blueImageFilter);e.style.setProperty("--pink-image-filter",r.pinkImageFilter);e.style.setProperty("--brightness",r.brightness);e.style.setProperty("--invert-filter",r.filterInvert)}})()}setupDom(){$(`input[key='customStyleColor']`).on("change",()=>{this.reloadColor($(`input[key='customStyleColor']`).val())});const e=$(".predefined-colors-grid");for(const o of Object.values(r)){$(`
`).appendTo(e).css("background",o).attr("data-color",o).on("click",e=>{const o=$(e.target).attr("data-color");$(`input[key='customStyleColor']`).val(o).trigger("input").change();$("div.custom-color-preview").on("click")})}$("div.custom-color-preview").on("click",()=>{const e=$(".predefined-colors");e.toggleClass("opened")})}}return{export:t}}})(); \ No newline at end of file +(()=>{return(e,o)=>{const r={red:"#e57373",pink:"#F06292",purple:"#BA68C8",deepPurple:"#9575CD",indigo:"#7986CB",blue:"#2196F3",lightBlue:"#00A0D8",cyan:"#00ACC1",teal:"#26A69A",green:"#81C784",lightGreen:"#9CCC65",orange:"#FF9800",deepOrange:"#FF7043",brown:"#A1887F",grey:"#757575",blueGrey:"#78909C"};class t{constructor(){this.reloadColor=(()=>{const e=document.querySelector("html");return function(o){const r=new ColorProcessor(o);const t=e=>r.rgbToString(r.hexToRgba(e));const l=r.hexToRgba(o+"70");$("div.custom-color-preview").css("background",o).css("box-shadow",`0px 2px 8px 1px rgba(${l.r},${l.g},${l.b},${l.a})`);e.style.setProperty("--theme-color",o);for(let r=10;r<=90;r+=10){e.style.setProperty(`--theme-color-${r}`,t(o+r))}e.style.setProperty("--foreground-color",r.foreground);e.style.setProperty("--foreground-color-b",t(r.foreground+"b"));e.style.setProperty("--foreground-color-d",t(r.foreground+"d"));e.style.setProperty("--blue-image-filter",r.blueImageFilter);e.style.setProperty("--pink-image-filter",r.pinkImageFilter);e.style.setProperty("--brightness",r.brightness);e.style.setProperty("--invert-filter",r.filterInvert)}})()}setupDom(){$(`input[key='customStyleColor']`).on("change",()=>{this.reloadColor($(`input[key='customStyleColor']`).val())});const e=$(".predefined-colors-grid");for(const o of Object.values(r)){$(`
`).appendTo(e).css("background",o).attr("data-color",o).on("click",e=>{const o=$(e.target).attr("data-color");$(`input[key='customStyleColor']`).val(o).trigger("input").change();$("div.custom-color-preview").on("click")})}$("div.custom-color-preview").on("click",()=>{const e=$(".predefined-colors");e.toggleClass("opened")})}}return{export:t}}})(); \ No newline at end of file diff --git a/utils/gui-settings/theme-colors.js b/utils/gui-settings/theme-colors.js index 488a636fc..b32024da7 100644 --- a/utils/gui-settings/theme-colors.js +++ b/utils/gui-settings/theme-colors.js @@ -30,6 +30,7 @@ return function (newColor) { const color = new ColorProcessor(newColor); + const hexToRgba = input => color.rgbToString(color.hexToRgba(input)); const shadowColor = color.hexToRgba(newColor + "70"); $("div.custom-color-preview") @@ -39,14 +40,11 @@ html.style.setProperty("--theme-color", newColor); for (let opacity = 10; opacity <= 90; opacity += 10) { - html.style.setProperty(`--theme-color-${opacity}`, - color.rgbToString(color.hexToRgba(newColor + opacity))); + html.style.setProperty(`--theme-color-${opacity}`, hexToRgba(newColor + opacity)); } html.style.setProperty("--foreground-color", color.foreground); - html.style.setProperty("--foreground-color-b", - color.rgbToString(color.hexToRgba(color.foreground + "b"))); - html.style.setProperty("--foreground-color-d", - color.rgbToString(color.hexToRgba(color.foreground + "d"))); + html.style.setProperty("--foreground-color-b", hexToRgba(color.foreground + "b")); + html.style.setProperty("--foreground-color-d", hexToRgba(color.foreground + "d")); html.style.setProperty("--blue-image-filter", color.blueImageFilter); html.style.setProperty("--pink-image-filter", color.pinkImageFilter); html.style.setProperty("--brightness", color.brightness);