Merge pull request #104 from wcze/ui-style

style: 修改UI样式&面板改为Dialog弹出

src/common.js

@@ -297,38 +297,71 @@ function getTextareaPosition(element) {
     return cursorPos;
 }
 
+
+let panels = [
+	{
+		name: "弹幕发送小助手",
+		className: "bloop",
+	},
+	{
+		name: "扩展功能",
+		className: "extool",
+	},
+	{
+		name: "直播间工具",
+		className: "livetool",
+	},
+	{
+		name: "全站抽奖信息",
+		className: "exlottery"
+	},
+];
 function showExRightPanel(name) {
-	let panels = [
-		{
-			name: "弹幕发送小助手",
-			className: "bloop",
-		},
-		{
-			name: "扩展功能",
-			className: "extool",
-		},
-		{
-			name: "直播间工具",
-			className: "livetool",
-		},
-		{
-			name: "全站抽奖信息",
-			className: "exlottery"
-		},
-	];
 	for (let i = 0; i < panels.length; i++) {
 		let item = panels[i];
 		let dom = document.getElementsByClassName(item.className)[0];
+		let mask = document.getElementsByClassName("ex-mask")[0];
 		if (dom) {
 			if (name === item.name) {
 				dom.style.display = dom.style.display !== "block" ? "block" : "none";
+				mask.style.display = dom.style.display !== "block" ? "none" : "block";
 			} else {
 				dom.style.display = "none";
 			}
 		}
 	}
 }
 
+maskLayer();
+function maskLayer(){
+	let mask = document.createElement("div");
+	mask.style.position = "fixed";
+	mask.style.top = "0";
+	mask.style.left = "0";
+	mask.style.width = "100%";
+	mask.style.height = "100%";
+	mask.style.backgroundColor = "rgba(0,0,0,0.5)";
+	mask.style.zIndex = "10000";
+	mask.style.display = "none";
+	mask.className = "ex-mask";
+	mask.style.backdropFilter = "blur(3px)";
+	document.body.appendChild(mask);
+
+	mask.onclick = function(event) {
+		if(event.target.className != "ex-mask") {
+			return;
+		}
+		for (let i = 0; i < panels.length; i++) {
+			let item = panels[i];
+			let dom = document.getElementsByClassName(item.className)[0];
+			if (dom) {
+				dom.style.display = "none";
+			}
+		}
+		mask.style.display = "none";
+	}
+}
+
 function getTimeDiff(t1, t2) {
 	if (t1 < t2) {
 		return -1;

src/packages/BarrageLoop/BarrageLoop.js

@@ -19,23 +19,23 @@ function initPkg_BarrageLoop() {
 function BarrageLoop_insertModal() {
 	let html = "";
 	let a = document.createElement("div");
-	a.className = "bloop";
-	html += '<div style="display:inline-block"><label>弹幕：</label></div>';
+	a.className = "bloop ex-dialog";
+	html += '<div class="ex-label"><label>弹幕：</label></div>';
+	html += '<textarea placeholder="一行一个，开启舔狗模式后此处不需要输入" id="bloop__textarea" rows="5" cols="50" class="ex-textarea"></textarea>';
+	html += '<div><label class="ex-label">速度(ms)：</label><input class="ex-input" id="bloop__text_speed1" type="text" style="width:50px;text-align:center;" value="2000" />~<input class="ex-input" id="bloop__text_speed2" type="text" style="width:50px;text-align:center;" value="3000" /></div>';
+	html += '<div><label class="ex-label">限时(min)：</label><input class="ex-input" id="bloop__text_stoptime" type="text" style="width:50px;text-align:center;" value="1" /></div>';
+	html += '<div class="ex-checkbox-container"><label class="ex-checkbox-label" style="margin-right: 20px;"><input class="ex-checkbox" id="bloop__checkbox_changeColor" type="checkbox" name="checkbox_changeColor" checked>自动变色</label><label class="ex-checkbox-label"><input class="ex-checkbox" id="bloop__checkbox_tiangou" type="checkbox">舔狗模式</label></div>';
+	html += '<div class="bloop__switch ex-checkbox-container" style="justify-content: flex-end;"><label class="ex-checkbox-label"><input class="ex-checkbox"id="bloop__checkbox_startSend" type="checkbox">开始发送</label></div>';
 	html += `
-	<span style="float:right;margin-right:15px;">
-		<select id="bloop__select"></select>
-		<input style="width:40px;margin-left:10px;" type="button" id="bloop__save" value="保存"/>
-		<input style="width:40px;margin-left:10px;" type="button" id="bloop__delete" value="删除"/>
-	</span>
+	<div class="ex-line"></div>
+	<div style="margin-top:10px;">
+		<select id="bloop__select" class="ex-select"></select>
+		<input class="ex-btn" style="margin-left:10px;" type="button" id="bloop__save" value="保存"/>
+		<input class="ex-btn ex-btn-error" style="margin-left:10px;" type="button" id="bloop__delete" value="删除"/>
+	</div>
 	`;
-	html += '<textarea placeholder="一行一个，开启舔狗模式后此处不需要输入" id="bloop__textarea" rows="5" cols="50"></textarea>';
-	html += '<div><label>速度(ms)：</label><input id="bloop__text_speed1" type="text" style="width:50px;text-align:center;" value="2000" />~<input id="bloop__text_speed2" type="text" style="width:50px;text-align:center;" value="3000" /></div>';
-	html += '<div><label>限时(min)：</label><input id="bloop__text_stoptime" type="text" style="width:50px;text-align:center;" value="1" /></div>';
-	html += '<div><label><input id="bloop__checkbox_changeColor" type="checkbox" name="checkbox_changeColor" checked>自动变色</label><label><input id="bloop__checkbox_tiangou" type="checkbox">舔狗模式</label></div>';
-	html += '<div class="bloop__switch"><label><input id="bloop__checkbox_startSend" type="checkbox">开始发送</label></div>';
-
 	a.innerHTML = html;
-	let b = document.getElementsByClassName("layout-Player-chat")[0];
+	let b = document.getElementsByClassName("ex-mask")[0];
 	b.insertBefore(a, b.childNodes[0]);
 }
 function BarrageLoop_insertIcon() {

src/packages/BarrageLoop/BarrageLoopStyle.css

@@ -1,17 +1,5 @@
 .bloop {
-	background-color: rgba(255,255,255,0.9);
-	width: 100%;
-	height: 200px;
-	position: relative;
-	bottom: 200px;
-	display: none;
-	z-index: 1015;
-}
-
-.bloop__switch {
-	position: absolute;
-	right: 0;
-	bottom: 0;
+	width: 400px;
 }
 
 .bloop__mode {

src/packages/ExpandTool/ExpandTool.css

@@ -1,11 +1,5 @@
 .extool {
-	background-color: rgba(255,255,255,0.9);
-	width: 100%;
-	height: 200px;
-	position: relative;
-	bottom: 200px;
-	display: none;
-	z-index: 1015;
+	width: 600px;
 }
 
 .extool__switch {
@@ -17,7 +11,7 @@
 	margin-bottom: 5px;
 }
 .extool__redpacket_room,.extool__gold,.extool__autofish {
-	display: inline-block;
+	display: block;
 }
 .ex_giftAnimation {
 	width: 100%;

src/packages/ExpandTool/ExpandTool.js

@@ -7,14 +7,14 @@ function initPkg_ExpandTool() {
 
 function initPkg_ExpandTool_Module() {
 	// initPkg_ExpandTool_RedPacket_Motorcade();
-	initPkg_ExpandTool_Treasure();
-	initPkg_ExpandTool_Gold();
-	initPkg_ExpandTool_RedPacket_Room();
-	initPkg_ExpandTool_AutoFish();
 	initPkg_ExpandTool_ClearBag();
     initPkg_ExpandTool_SendGift();
     // initPkg_ExpandTool_BarrageSize();
+	initPkg_ExpandTool_Treasure();
 	initPkg_ExpandTool_TabSwitch();
+	initPkg_ExpandTool_Gold();
+	initPkg_ExpandTool_RedPacket_Room();
+	initPkg_ExpandTool_AutoFish();
 	initPkg_ExpandTool_P2P();
 	initPkg_ExpandTool_FullScreen();
 }
@@ -27,9 +27,9 @@ function initPkg_ExpandTool_Dom() {
 }
 function ExpandTool_insertModal() {
 	let a = document.createElement("div");
-	a.className = "extool";
+	a.className = "extool ex-dialog";
 
-	let b = document.getElementsByClassName("layout-Player-chat")[0];
+	let b = document.getElementsByClassName("ex-mask")[0];
 	b.insertBefore(a, b.childNodes[0]);
 }
 function ExpandTool_insertIcon() {

src/packages/ExpandTool/ExpandTool_AutoFish.js

@@ -12,7 +12,7 @@ function initPkg_ExpandTool_AutoFish() {
 
 function ExpandTool_AutoFish_insertDom() {
   let html = "";
-  html += '<label><input style="margin-top:5px;" id="extool__autofish_start" type="checkbox">自动钓鱼</label>';
+  html += '<label class="ex-label"><input class="ex-checkbox" id="extool__autofish_start" type="checkbox">自动钓鱼</label>';
 
   let a = document.createElement("div");
   a.className = "extool__autofish";

src/packages/ExpandTool/ExpandTool_ClearBag.js

@@ -5,10 +5,10 @@ function initPkg_ExpandTool_ClearBag() {
 
 function ExpandTool_ClearBag_insertDom() {
     let html = "";
-    html += '<label>背包送礼：[速度并不快,间隔>0.1s]</label><a id="extool__clearbag_showid" style="margin-left:10px;color:blue;" href="javascript:void(0);">礼物id示例</a><br />';
-    html += '<label>礼物ID：</label><input id="extool__clearbag_id" type="text" style="width:50px;text-align:center;margin-right:10px;" value="268" />';
-    html += '<label>数量：</label><input id="extool__clearbag_cnt" type="text" style="width:30px;text-align:center;" value="1" />';
-    html += '<input style="width:40px;margin-left:10px;" type="button" id="extool__clearbag_sendbtn" value="送出" />';
+    html += '<label class="ex-label">背包送礼：[速度并不快,间隔>0.1s]</label><a id="extool__clearbag_showid" style="color:blue;" href="javascript:void(0);">礼物id示例</a><br />';
+    html += '<label class="ex-label"><p style="width:5em">礼物ID：</p><input class="ex-input" id="extool__clearbag_id" type="text" value="268" /></label>';
+    html += '<label class="ex-label"><p style="width:5em">数量：</p><input class="ex-input" id="extool__clearbag_cnt" type="text"  value="1" /></label>';
+    html += '<input class="ex-btn" type="button" id="extool__clearbag_sendbtn" value="送出" />';
     // html += '<input style="width:60px;margin-left:10px;" type="button" id="extool__clearbag_clearbtn" value="清空背包" />';
     let a = document.createElement("div");
     a.className = "extool__clearbag";

src/packages/ExpandTool/ExpandTool_FullScreen.js

@@ -9,7 +9,7 @@ function initPkg_ExpandTool_FullScreen() {
 function ExpandTool_FullScreen_insertDom() {
     let a = document.createElement("span");
     // a.className = "extool__bsize";
-    a.innerHTML = '<label title="自动网页全屏"><input style="margin-top:5px;" id="extool__fullscreen" type="checkbox">自动网页全屏</label><label title="自动最高画质"><input id="extool__highestvideoquality" type="checkbox">自动最高画质</label>';
+    a.innerHTML = '<label class="ex-label" title="自动网页全屏"><input class="ex-checkbox" id="extool__fullscreen" type="checkbox">自动网页全屏</label><label class="ex-label" title="自动最高画质"><input class="ex-checkbox" id="extool__highestvideoquality" type="checkbox">自动最高画质</label>';
 
     let b = document.getElementsByClassName("extool")[0];
     b.insertBefore(a, b.childNodes[0]);

src/packages/ExpandTool/ExpandTool_Gold.js

@@ -14,8 +14,8 @@ function initPkg_ExpandTool_Gold() {
 
 function ExpandTool_Gold_insertDom() {
     let html = "";
-    html += '<label><input style="margin-top:5px;" id="extool__gold_start" type="checkbox">幻神模式</label>';
-    html += '<label><input style="margin-top:5px;" id="extool__goldGift_start" type="checkbox">荧光棒变超火</label>';
+    html += '<label class="ex-label"><input class="ex-checkbox" id="extool__gold_start" type="checkbox">幻神模式</label>';
+    html += '<label class="ex-label"><input class="ex-checkbox" id="extool__goldGift_start" type="checkbox">荧光棒变超火</label>';
 
     let a = document.createElement("div");
     a.className = "extool__gold";

src/packages/ExpandTool/ExpandTool_P2P.js

@@ -7,7 +7,7 @@ function initPkg_ExpandTool_P2P() {
 function ExpandTool_P2P_insertDom() {
     let a = document.createElement("span");
     // a.className = "extool__bsize";
-    a.innerHTML = '<label title="阻止p2p在后台占用网速，开启后直播画面会在刚进入页面时卡一下"><input style="margin-top:5px;" id="extool__p2p" type="checkbox">阻止p2p上传</label>';
+    a.innerHTML = '<label class="ex-label" title="阻止p2p在后台占用网速，开启后直播画面会在刚进入页面时卡一下"><input class="ex-checkbox" id="extool__p2p" type="checkbox">阻止p2p上传</label>';
 
     let b = document.getElementsByClassName("extool")[0];
     b.insertBefore(a, b.childNodes[0]);

src/packages/ExpandTool/ExpandTool_RedPacket_Room.js

@@ -9,7 +9,7 @@ function initPkg_ExpandTool_RedPacket_Room() {
 
 function ExpandTool_RedPacket_Room_insertDom() {
     let html = "";
-    html += '<label><input style="margin-top:5px;" id="extool__redpacekt_room_start" type="checkbox">自动抢礼物红包</label>';
+    html += '<label class="ex-label"><input class="ex-checkbox" id="extool__redpacekt_room_start" type="checkbox">自动抢礼物红包</label>';
 
     let a = document.createElement("div");
     a.className = "extool__redpacket_room";

src/packages/ExpandTool/ExpandTool_SendGift.js

@@ -5,11 +5,12 @@ function initPkg_ExpandTool_SendGift() {
 
 function ExpandTool_SendGift_insertDom() {
     let html = "";
-    html += '<label>送礼：[用于打榜,例如送出999个飞机]</label><a style="margin-left:10px;color:blue;" href="http://open.douyucdn.cn/api/RoomApi/room/' + rid + '" target="_blank">礼物id示例</a><br />';
-    html += '<label>礼物ID：</label><input id="extool__sendgift_id" type="text" style="width:50px;text-align:center;margin-right:10px;" value="20000" />';
-    html += '<label>数量：</label><input id="extool__sendgift_cnt" type="text" style="width:30px;text-align:center;margin-right:10px;" value="1" />';
-    html += '<label>间隔ms：</label><input id="extool__sendgift_delay" type="text" style="width:30px;text-align:center;" value="0" />';
-    html += '<input style="width:40px;margin-left:10px;" type="button" id="extool__sendgift_btn" value="送出" />';
+    html += '<label class="ex-label">送礼：[用于打榜,例如送出999个飞机]</label><a style="color:blue;" href="http://open.douyucdn.cn/api/RoomApi/room/' + rid + '" target="_blank">礼物id示例</a><br />';
+    html += '<label class="ex-label"><p style="width:5em">礼物ID：</p><input class="ex-input" id="extool__sendgift_id" type="text" value="20000" /></label>';
+    html += '<label class="ex-label"><p style="width:5em">数量：</p><input class="ex-input" id="extool__sendgift_cnt" type="text"  value="1" /></label>';
+    html += '<label class="ex-label"><p style="width:5em">间隔ms：</p><input class="ex-input" id="extool__sendgift_delay" type="text" value="0" /></label>';
+    html += '<input class="ex-btn" type="button" id="extool__sendgift_btn" value="送出" />';
+    html += '<div class="ex-line" style="margin:10px 0"></div>';
     let a = document.createElement("div");
     a.className = "extool__sendgift";
     a.innerHTML = html;

src/packages/ExpandTool/ExpandTool_TabSwitch.js

@@ -7,7 +7,7 @@ function initPkg_ExpandTool_TabSwitch() {
 function ExpandTool_TabSwitch_insertDom() {
   let a = document.createElement("span");
   // a.className = "extool__bsize";
-  a.innerHTML = '<label title="阻止页面后台挂机检测"><input style="margin-top:5px;" id="extool__tabSwitch" type="checkbox">页面防挂机</label>';
+  a.innerHTML = '<label class="ex-label" title="阻止页面后台挂机检测"><input class="ex-checkbox" id="extool__tabSwitch" type="checkbox">页面防挂机</label><div class="ex-line" style="margin-bottom:10px"></div>';
 
   let b = document.getElementsByClassName("extool")[0];
   b.insertBefore(a, b.childNodes[0]);

src/packages/ExpandTool/ExpandTool_Treasure.js

@@ -8,10 +8,11 @@ function initPkg_ExpandTool_Treasure() {
 
 function ExpandTool_Treasure_insertDom() {
     let html = "";
-    html += '<label><input style="margin-top:5px" id="extool__treasure_start" type="checkbox">自动抢宝箱</label>';
-    html += '<label style="margin-left:10px;">延迟(抢得过快请调高)：</label><input id="extool__treasure_delay" type="text" style="width:50px;text-align:center;" value="3200" />ms'
-    html += '<div><a href="https://www.rrocr.com/" target="_blank" style="color:blue" title="点击进入rrocr官网，将账号用户中心的appkey填入右边然后开启功能即可">rrocr秘钥：</a><input id="extool__treasure_skey" type="text" style="width:200px;text-align:center;" placeholder="填写则会自动完成宝箱领取验证"></div>';
-
+    html += '<label class="ex-label"><input class="ex-checkbox" id="extool__treasure_start" type="checkbox">自动抢宝箱</label>';
+    html += '<label class="ex-label ex-label-inline">延迟(抢得过快请调高)：</label><input class="ex-input" id="extool__treasure_delay" type="text" style="width:50px;text-align:center;" value="3200" />ms'
+    html += '<div style="margin-top:10px"><label class="ex-label ex-label-inline">rrocr秘钥：</label><input class="ex-input" id="extool__treasure_skey" type="text" style="width:200px;text-align:center;" placeholder="填写则会自动完成宝箱领取验证"></div>';
+    html += '<div><a href="https://www.rrocr.com/" target="_blank" style="color:blue" title="点击进入rrocr官网，将账号用户中心的appkey填入右边然后开启功能即可">点击进入rrocr官网，将账号用户中心的appkey填入右边然后开启功能即可</a></div>';
+    html += '<div class="ex-line" style="margin:10px 0"></div>';
     let a = document.createElement("div");
     a.className = "extool__treasure";
     a.innerHTML = html;

src/packages/LiveTool/Enter/Enter.css

@@ -16,31 +16,15 @@
     margin-top: 5px;
 }
 
-#enter__enterId {
-    width: 40px;
-}
-
-#enter__reply {
-    width: 150px;
-}
-
-#enter__word {
-    width: 140px;
-}
-
 #enter__level {
     width: 25px;
     text-align: center;
 }
 
 #enter__export {
-    cursor: pointer;
-    color: royalblue;
-    margin-left: 10px;
+    margin: 0 10px 0 auto ;
 }
 
 #enter__import {
-    cursor: pointer;
-    color: royalblue;
-    margin-left: 5px;
+    margin-right: 10px;
 }

src/packages/LiveTool/Enter/Enter.js

@@ -12,8 +12,8 @@ function LiveTool_Enter_insertDom() {
     let cell = `
         <div class='livetool__cell_title'>
             <span id='enter__title'>进场欢迎</span>
-            <span id='enter__export'>导出</span>
-            <span id='enter__import'>导入</span>
+            <button class="ex-btn" id='enter__export'>导出</button>
+            <button class="ex-btn" id='enter__import'>导入</button>
         </div>
         <div class='livetool__cell_option'>
             <div class="onoffswitch livetool__cell_switch">
@@ -24,13 +24,14 @@ function LiveTool_Enter_insertDom() {
     `;
     let panel = `
         <div class='enter__panel'>
-            <select id='enter__select'>
+            <select id='enter__select' class="ex-select">
             </select>
-            <input style="width:40px;margin-left:10px;" type="button" id="enter__add" value="添加"/>
-            <input style="width:40px;margin-left:10px;" type="button" id="enter__del" value="删除"/>
+            <input class="ex-btn ex-btn-success" style="margin-left:10px;" type="button" id="enter__add" value="添加"/>
+            <input class="ex-btn ex-btn-error" style="margin-left:10px;" type="button" id="enter__del" value="删除"/>
+            <div class="ex-line" style="margin:5px 0"></div>
             <div class="enter__option">
-                <label>等级≥<input id="enter__level" type="text" value="1"/></label>
-                <label>当前欢迎词：<input id="enter__word" type="text" placeholder="欢迎<id>光临直播间"/></label>
+                <label class="ex-label"><div style="width:7em">等级≥：</div><input class="ex-input" id="enter__level" type="text" value="1"/></label>
+                <label class="ex-label"><div style="width:7em">当前欢迎词：</div><input class="ex-input" id="enter__word" type="text" placeholder="欢迎<id>光临直播间"/></label>
             </div>
         </div>
     `;

src/packages/LiveTool/Gift/Gift.css

@@ -20,18 +20,10 @@
     width: 40px;
 }
 
-#gift__reply {
-    width: 150px;
-}
-
 #gift__export {
-    cursor: pointer;
-    color: royalblue;
-    margin-left: 10px;
+    margin: 0 10px 0 auto ;
 }
 
 #gift__import {
-    cursor: pointer;
-    color: royalblue;
-    margin-left: 5px;
+    margin-right: 10px;
 }