Introducing: Materialize 1.0.0

app/css/master.css

@@ -437,6 +437,13 @@ blockquote:before,
 #support-btm-close {
   grid-area: close;
 }
+.select-wrapper .dropdown-content {
+  width: 250px !important;
+}
+input, textarea {
+  color: var(--color);
+  font-size: 1rem !important;
+}
 
 /*スクロールバー*/
 ::-webkit-scrollbar {

app/css/userdata.css

@@ -87,10 +87,10 @@
 #his-plus-action .btn {
   width: 170px;
 }
-.custom-tabs {
+.tabs {
   display: flex;
 }
-.custom-tabs .custom-tab a {
+.tabs .tab a {
   padding: 8px 12px;
 }
 #his-des .mention {

app/js/common/modal.js

@@ -1,8 +1,17 @@
 //モーダル・ドロップダウンの各種設定
 $(document).ready(function () {
   // the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
-  $('.modal').modal();
+  $('.modal').modal({
-  $('.dropdown-button').dropdown({
+    inDuration: 300,
+    outDuration: 225,
+    constrainWidth: false, // Does not change width of dropdown to that of the activator
+    hover: false, // Activate on hover
+    gutter: 0, // Spacing from edge
+    belowOrigin: false, // Displays dropdown below the button
+    alignment: 'left', // Displays dropdown with edge aligned to the left of button
+    stopPropagation: false
+  });
+  $('.dropdown-trigger').dropdown({
     inDuration: 300,
     outDuration: 225,
     constrainWidth: false, // Does not change width of dropdown to that of the activator
@@ -13,5 +22,5 @@ $(document).ready(function () {
     stopPropagation: false // Stops event propagation
   }
   );
-
+  $('.collapsible').collapsible();
 });

app/js/common/version.js

@@ -212,7 +212,7 @@ function verck(ver) {
 						}
 					}
 					if (show) {
-						Materialize.toast(escapeHTML(obj.Text) + toot + '<span class="sml grey-text">(スライドして消去)</span>', 86400);
+						M.toast({ html: escapeHTML(obj.Text) + toot + '<span class="sml grey-text">(スライドして消去)</span>', displayLength: 86400 })
 					}
 				}
 
@@ -259,7 +259,7 @@ function infowebsocket() {
 				}
 			}
 			if (show) {
-				Materialize.toast(escapeHTML(obj.text) + toot + '<span class="sml grey-text">(スライドして消去)</span>', 86400);
+				M.toast({ html: escapeHTML(obj.Text) + toot + '<span class="sml grey-text">(スライドして消去)</span>', displayLength: 86400 })
 			}
 		} else {
 			$("#persons").text(obj.text);

app/js/login/login.js

@@ -166,8 +166,7 @@ function getdata() {
 	}).then(function (json) {
 		if (json.error) {
 			console.error("Error:" + json.error);
-			Materialize.toast(lang.lang_fatalerroroccured + "Error:" + json.error,
+			M.toast({ html: lang.lang_fatalerroroccured + "Error:" + json.error, displayLength: 5000 })
-				5000);
 			return;
 		}
 		var avatar = json["avatar"];
@@ -214,8 +213,7 @@ function getdataAdv(domain, at) {
 	}).then(function (json) {
 		if (json.error) {
 			console.error("Error:" + json.error);
-			Materialize.toast(lang.lang_fatalerroroccured + "Error:" + json.error,
+			M.toast({ html: lang.lang_fatalerroroccured + "Error:" + json.error, displayLength: 5000 })
-				5000);
 			return;
 		}
 		var avatar = json["avatar"];
@@ -273,8 +271,7 @@ function refresh(target, loadskip) {
 	}).then(function (json) {
 		if (json.error) {
 			console.error("Error:" + json.error);
-			Materialize.toast(lang.lang_fatalerroroccured + "Error:" + json.error,
+			M.toast({ html: lang.lang_fatalerroroccured + "Error:" + json.error, displayLength: 5000 })
-				5000);
 			return;
 		}
 		var avatar = json["avatar"];
@@ -496,7 +493,7 @@ function multiSelector() {
 		$("#src-acct-sel").append('<option value="tootsearch">Tootsearch</option>');
 		$("#add-acct-sel").append('<option value="noauth">' + lang.lang_login_noauth + '</option><option value="webview">Twitter</option>');
 	}
-	$('select').material_select('update');
+	$('select').formSelect();
 	parseColumn(true);
 }
 

app/js/login/manager.js

@@ -530,8 +530,7 @@ function getdata(domain, at) {
 	}).then(function (json) {
 		if (json.error) {
 			console.error("Error:" + json.error);
-			Materialize.toast(lang.lang_fatalerroroccured + "Error:" + escapeHTML(json.error),
+			M.toast({ html: lang.lang_fatalerroroccured + "Error:" + json.error, displayLength: 5000 })
-				5000);
 			return;
 		}
 		var avatar = json["avatar"];
@@ -595,8 +594,7 @@ function refresh(target) {
 	}).then(function (json) {
 		if (json.error) {
 			console.error("Error:" + json.error);
-			Materialize.toast(lang.lang_fatalerroroccured + "Error:" + json.error,
+			M.toast({ html: lang.lang_fatalerroroccured + "Error:" + json.error, displayLength: 5000 })
-				5000);
 			return;
 		}
 		var avatar = json["avatar"];
@@ -704,12 +702,12 @@ function multisel() {
 
 		});
 	}
-	$('select').material_select('update');
+	$('select').formSelect();
 }
 function mainacct() {
 	var acct_id = $("#main-acct-sel").val();
 	localStorage.setItem("main", acct_id);
-	Materialize.toast(lang.lang_manager_mainAcct, 3000);
+	M.toast({ html: lang.lang_manager_mainAcct, displayLength: 3000 })
 }
 function colorpicker(key) {
 	temp =

app/js/post/bb-md.js

@@ -40,7 +40,7 @@ function mdCheck() {
 		$("#trendtag").html("");
 	}
 	if (localStorage.getItem("mode_" + domain) == "misskey") {
-		Materialize.toast(lang.lang_bbmd_misskey, 5000);
+		M.toast({ html: lang.lang_bbmd_misskey, displayLength: 5000 })
 	}
 	if (idata[domain + "_letters"]) {
 		$("#textarea").attr("data-length", idata[domain + "_letters"])

app/js/post/img.js

@@ -151,7 +151,7 @@ function media(b64, type, no) {
 			$(".toot-btn-group").prop("disabled", false);
 			$('select').material_select();
 			$("#mec").text(lang.lang_there);
-			Materialize.toast(lang.lang_postimg_aftupload, 1000);
+			M.toast({ html: lang.lang_postimg_aftupload, displayLength: 1000 })
 			$("#imgup").text("");
 			$("#imgsel").show();
 			localStorage.removeItem("image");

app/js/post/secure.js

@@ -45,7 +45,7 @@ function vis(set) {
 		var acct_id = $("#post-acct-sel").val();
 		localStorage.setItem("vis-memory-" + acct_id, set);
 	}
-	$('.dropdown-button').dropdown('close');
+	M.Dropdown.getInstance($('#dropdown1')).close();
 }
 function loadVis() {
 	var vist = localStorage.getItem("vis");

app/js/post/status.js

@@ -43,7 +43,7 @@ function fav(id, acct_id, remote) {
 					$(".fav_" + id).addClass("yellow-text");
 				}
 			} else {
-				Materialize.toast(lang.lang_status_favWarn, 1000);
+				M.toast({ html: lang.lang_status_favWarn, displayLength: 1000 })
 			}
 		}
 	}
@@ -90,7 +90,7 @@ function rt(id, acct_id, remote) {
 					$(".rt_" + id).addClass("teal-text");
 				}
 			} else {
-				Materialize.toast(lang.lang_status_btWarn, 1000);
+				M.toast({ html: lang.lang_status_btWarn, displayLength: 1000 })
 			}
 		}
 	}
@@ -373,7 +373,7 @@ function empUser() {
 	if (!obj) {
 		var obj = [];
 		obj.push(id);
-		Materialize.toast(id + lang.lang_status_emphas, 4000);
+		M.toast({ html: id + lang.lang_status_emphas, displayLength: 4000 })
 	} else {
 		var can;
 		Object.keys(obj).forEach(function (key) {
@@ -383,7 +383,7 @@ function empUser() {
 			} else {
 				can = true;
 				obj.splice(key, 1);
-				Materialize.toast(id + lang.lang_status_unemphas, 4000);
+				M.toast({ html: id + lang.lang_status_unemphas, displayLength: 4000 })
 			}
 		});
 	}
@@ -425,7 +425,7 @@ function pinUser() {
 //URLコピー
 function tootUriCopy(url) {
 	execCopy(url);
-	Materialize.toast(lang.lang_details_url, 1500);
+	M.toast({ html: lang.lang_details_url, displayLength: 1500 })
 }
 
 //他のアカウントで…

app/js/tl/datails.js

@@ -466,10 +466,10 @@ function cbCopy(mode) {
 	if (mode == "emb") {
 		var emb = '<iframe src="' + url + '/embed" class="mastodon-embed" style="max-width: 100%; border: 0" width="400"></iframe><script src="https://' + domain + '/embed.js" async="async"></script>';
 		execCopy(emb)
-		Materialize.toast(lang.lang_details_embed, 1500);
+		M.toast({ html: lang.lang_details_embed, displayLength: 1500 })
 	} else {
 		if (execCopy(url)) {
-			Materialize.toast(lang.lang_details_url, 1500);
+			M.toast({ html: lang.lang_details_url, displayLength: 1500 })
 		}
 
 	}
@@ -485,7 +485,7 @@ function staCopy(id) {
 	html = html.replace(/<img[\s\S]*alt="(.+?)"[\s\S]*?>/g, "$1");
 	html = $.strip_tags(html);
 	if (execCopy(html)) {
-		Materialize.toast(lang.lang_details_txt, 1500);
+		M.toast({ html: lang.lang_details_txt, displayLength: 1500 })
 	}
 
 }

app/js/tl/misskeyparse.js

@@ -254,7 +254,7 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 				}
 				var domain = localStorage.getItem("domain_" + acct_id);
 				if (popup > 0) {
-					Materialize.toast("[" + domain + "]" + escapeHTMLtemp(toot.user.name) + what, popup * 1000);
+					M.toast({ html: "[" + domain + "]" + escapeHTMLtemp(toot.user.name) + what, displayLength: popup * 1000 })
 				}
 				if (native == "yes") {
 					var electron = require("electron");
@@ -893,7 +893,7 @@ function misskeyUserparse(obj, auth, acct_id, tlid, popup) {
 		}
 		var memory = localStorage.getItem("notice-mem");
 		if (popup >= 0 && obj.length < 5 && notftext != memory) {
-			Materialize.toast(escapeHTMLtemp(toot.name) + ":" + ftxt, popup * 1000);
+			M.toast({ html: escapeHTMLtemp(toot.name) + ":" + ftxt, displayLength: popup * 1000 })
 			$(".notf-icon_" + tlid).addClass("red-text");
 			localStorage.setItem("notice-mem", notftext);
 			notftext = "";

app/js/tl/parse.js

@@ -284,7 +284,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 
 				var domain = localStorage.getItem("domain_" + acct_id);
 				if (popup > 0) {
-					Materialize.toast("[" + domain + "]" + escapeHTML(toot.account.display_name) + what, popup * 1000);
+					M.toast({ html: "[" + domain + "]" + escapeHTML(toot.account.display_name) + what, displayLength: popup * 1000 })
 				}
 				//通知音
 				if (sound == "c1") {
@@ -920,7 +920,7 @@ function userparse(obj, auth, acct_id, tlid, popup) {
 		}
 		var memory = localStorage.getItem("notice-mem");
 		if (popup >= 0 && obj.length < 5 && notftext != memory) {
-			Materialize.toast(escapeHTML(toot.display_name) + ":" + ftxt, popup * 1000);
+			M.toast({ html: escapeHTML(toot.display_name) + ":" + ftxt, displayLength: popup * 1000 })
 			$(".notf-icon_" + tlid).addClass("red-text");
 			localStorage.setItem("notice-mem", notftext);
 			notftext = "";
@@ -1027,7 +1027,7 @@ function client(name) {
 				if (!obj) {
 					var obj = [];
 					obj.push(name);
-					Materialize.toast(escapeHTML(name) + lang.lang_status_emphas, 2000);
+					M.toast({ html: escapeHTML(name) + lang.lang_status_emphas, displayLength: 2000 })
 				} else {
 					var can;
 					Object.keys(obj).forEach(function (key) {
@@ -1037,12 +1037,12 @@ function client(name) {
 						} else {
 							can = true;
 							obj.splice(key, 1);
-							Materialize.toast(escapeHTML(name) + lang.lang_status_unemphas, 2000);
+							M.toast({ html: escapeHTML(name) + lang.lang_status_unemphas, displayLength: 2000 })
 						}
 					});
 					if (!can) {
 						obj.push(name);
-						Materialize.toast(escapeHTML(name) + lang.lang_status_emphas, 2000);
+						M.toast({ html: escapeHTML(name) + lang.lang_status_emphas, displayLength: 2000 })
 					} else {
 
 					}
@@ -1058,7 +1058,7 @@ function client(name) {
 				obj.push(name);
 				var json = JSON.stringify(obj);
 				localStorage.setItem("client_mute", json);
-				Materialize.toast(escapeHTML(name) + lang.lang_parse_mute, 2000);
+				M.toast({ html: escapeHTML(name) + lang.lang_parse_mute, displayLength: 2000 })
 			} else {
 				return;
 			}

app/js/tl/speech.js

@@ -90,7 +90,7 @@ function voiceSettings() {
     localStorage.setItem("voice_speed", $("#voicespeed").val() / 10);
     localStorage.setItem("voice_pitch", $("#voicepitch").val() / 50);
     localStorage.setItem("voice_vol", $("#voicevol").val() / 100);
-    Materialize.toast(lang.lang_speech_refresh, 3000);
+    M.toast({ html: lang.lang_speech_refresh, displayLength: 3000 })
 }
 function voiceSettingLoad() {
     var speed = localStorage.getItem("voice_speed");

app/js/tl/tag.js

@@ -120,10 +120,10 @@ function autoToot(tag) {
     var nowPT = localStorage.getItem("stable")
     if (nowPT == tag) {
         localStorage.removeItem("stable");
-        Materialize.toast(lang.lang_tags_unrealtime, 3000);
+        M.toast({ html: lang.lang_tags_unrealtime, displayLength: 3000 })
     } else {
         localStorage.setItem("stable", tag);
-        Materialize.toast(lang.lang_tags_tagwarn.replace("{{tag}}", tag).replace("{{tag}}", tag), 3000);
+        M.toast({ html: lang.lang_tags_tagwarn.replace("{{tag}}", tag).replace("{{tag}}", tag), displayLength: 3000 })
         brInsert('#' + tag + " ")
     }
     favTag();

app/js/tl/tl.js

@@ -816,6 +816,7 @@ function reconnector(tlid, type, acct_id, data, mode) {
 		}
 		reload(type, '', acct_id, tlid, data, mute, "", voice, mode);
 	}
-	Materialize.toast(lang.lang_tl_reconnect, 2000);
+	M.toast({ html: lang.lang_tl_reconnect, displayLength: 2000 })
+	
 }
 strAliveInt()

app/js/ui/img.js

@@ -284,7 +284,7 @@ function dlImg() {
 	})
 	ipc.on('general-dl-message', function (event, arg) {
 		var argC = arg.replace(/\\/g, "\\\\") + "\\\\.";
-		Materialize.toast(lang.lang_img_DLDone + arg + '<button class="btn-flat toast-action" onclick="openFinder(\'' + argC + '\')">Show</button>', 5000);
+		M.toast({ html: lang.lang_img_DLDone + arg + '<button class="btn-flat toast-action" onclick="openFinder(\'' + argC + '\')">Show</button>', displayLength: 5000 })
 	})
 }
 function openFinder(dir) {

app/js/ui/settings.js

@@ -5,7 +5,7 @@ var envView = new Vue({
 	methods: {
 		complete: function (i, val) {
 			var ls = envView.config[i].storage;
-			Materialize.toast("Complete", 3000);
+			M.toast({ html: 'Complete', displayLength: 3000 })
 			if (!val) {
 				var id = envView.config[i].id;
 				var val = $("#" + id).val()
@@ -28,7 +28,7 @@ var tlView = new Vue({
 				var id = tlView.config[i].id;
 				var val = $("#" + id).val()
 			}
-			Materialize.toast("Complete", 3000);
+			M.toast({ html: 'Complete', displayLength: 3000 })
 			localStorage.setItem(ls, val)
 			return true
 		}
@@ -40,7 +40,7 @@ var postView = new Vue({
 	methods: {
 		complete: function (i, val) {
 			var ls = postView.config[i].storage;
-			Materialize.toast("Complete", 3000);
+			M.toast({ html: 'Complete', displayLength: 3000 })
 			if (!val) {
 				var id = postView.config[i].id;
 				var val = $("#" + id).val()
@@ -62,7 +62,7 @@ function settings() {
 		$("#" + theme).prop("checked", true);
 	} else {
 		if (cd != localStorage.getItem("theme")) {
-			Materialize.toast(lang.lang_setting_theme.replace("{{set}}", ct), 3000);
+			M.toast({ html: lang.lang_setting_theme.replace("{{set}}", ct), displayLength: 3000 })
 		}
 		//テーマはこの場で設定
 		themes(cd);
@@ -71,14 +71,14 @@ function settings() {
 	var fontd = $("#font").val();
 	if (fontd) {
 		if (fontd != localStorage.getItem("font")) {
-			Materialize.toast(lang.lang_setting_font.replace("{{set}}", fontd), 3000);
+			M.toast({ html: lang.lang_setting_font.replace("{{set}}", ct), displayLength: 3000 })
 		}
 		localStorage.setItem("font", fontd);
 		themes();
 	} else {
 		if (localStorage.getItem("font")) {
 			localStorage.removeItem("font");
-			Materialize.toast(lang.lang_setting_font.replace("{{set}}", lang.lang_setting_default), 3000);
+			M.toast({ html: lang.lang_setting_font.replace("{{set}}", ct), displayLength: 3000 })
 			themes();
 		}
 	}
@@ -165,7 +165,8 @@ function cliMuteDel(key) {
 function wordmute() {
 	var word = localStorage.getItem("word_mute");
 	var obj = JSON.parse(word);
-	$('#wordmute').material_chip({
+	if (!obj) { obj = [] }
+	$('#wordmute').chips({
 		data: obj,
 	});
 }
@@ -178,7 +179,8 @@ function wordmuteSave() {
 function wordemp() {
 	var word = localStorage.getItem("word_emp");
 	var obj = JSON.parse(word);
-	$('#wordemp').material_chip({
+	if (!obj) { obj = [] }
+	$('#wordemp').chips({
 		data: obj,
 	});
 }
@@ -205,7 +207,7 @@ function notftest() {
 function oks(no) {
 	var txt = $("#oks-" + no).val();
 	localStorage.setItem("oks-" + no, txt);
-	Materialize.toast(lang.lang_setting_ksref, 3000);
+	M.toast({ html: lang.lang_setting_ksref, displayLength: 3000 })
 }
 function oksload() {
 	if (localStorage.getItem("oks-1")) { $("#oks-1").val(localStorage.getItem("oks-1")) }
@@ -560,7 +562,7 @@ function ctLoad() {
 		$("#custom-sel-sel").html(templete);
 		templete = '<option value="add_new">' + $("#edit-selector").attr("data-add") + '</option>' + templete;
 		$("#custom-edit-sel").html(templete);
-		$('select').material_select('update');
+		$('select').formSelect();
 	});
 }
 function customSel() {

app/js/ui/sort.js

@@ -103,7 +103,7 @@ function sort() {
 	var json = JSON.stringify(newobj);
 	localStorage.setItem("column", json);
 	$("#sort").html("");
-	Materialize.toast("Sorted", 3000);
+	M.toast({ html: "Sorted", displayLength: 3000 })
 	sortload();
 	parseColumn();
 	sortMenu()

app/js/ui/spotify.js

@@ -57,10 +57,10 @@ function spotifyFlagSave() {
     var awk = $("[name=awk]:checked").val();
     if (awk == "yes") {
         localStorage.setItem("artwork", "yes");
-        Materialize.toast(lang.lang_spotify_img, 3000);
+        M.toast({ html: lang.lang_spotify_img, displayLength: 3000 })
     } else {
         localStorage.removeItem("artwork");
-        Materialize.toast(lang.lang_spotify_imgno, 3000);
+        M.toast({ html: lang.lang_spotify_imgno, displayLength: 3000 })
     }
 }
 function nowplaying(mode) {
@@ -178,7 +178,7 @@ function nowplaying(mode) {
 function spotifySave() {
     var temp = $("#np-temp").val();
     localStorage.setItem("np-temp", temp);
-    Materialize.toast(lang.lang_spotify_np, 3000);
+    M.toast({ html: lang.lang_spotify_np, displayLength: 3000 })
 }
 function npprovider() {
     var provd = $("[name=npp]:checked").val();
@@ -191,7 +191,7 @@ function npprovider() {
         }
     } else {
         if (provd != localStorage.getItem("np_provider")) {
-            Materialize.toast(lang.lang_setting_npprovide.replace("{{set}}", provd), 3000);
+            M.toast({ html: lang.lang_setting_npprovide.replace("{{set}}", provd), displayLength: 3000 })
         }
         localStorage.setItem("np_provider", provd);
         var electron = require("electron");

app/js/userdata/showOnTL.js

@@ -81,9 +81,8 @@ function udg(user, acct_id) {
 		}
 		//moved設定時
 		if (json.moved) {
-			Materialize.toast(
+			M.toast({ html: lang.lang_showontl_movetxt + '<button class="btn-flat toast-action" onclick="udg(\'' +
-				lang.lang_showontl_movetxt + '<button class="btn-flat toast-action" onclick="udg(\'' +
+			json.moved.id + '\',\'' + acct_id + '\')">' + lang.lang_showontl_movebtn + '</button>', displayLength: 4000 })
-				json.moved.id + '\',\'' + acct_id + '\')">' + lang.lang_showontl_movebtn + '</button>', 4000)
 		}
 		$('#his-data').modal('open');
 		$('#his-data').attr("user-id", user);
@@ -470,9 +469,9 @@ function reset() {
 	$("#his-float-blocked").hide();
 	$("#his-proof-prof").html("")
 }
-$('#my-data-nav .custom-tab').on('click', function () {
+$('#my-data-nav .tab').on('click', function () {
 	var target = $(this).find("a").attr("go");
-	$("#my-data-nav .custom-tab").removeClass("active-back");
+	$("#my-data-nav .tab").removeClass("active-back");
 	$(this).addClass("active-back");
 	$(target).show();
 	$(".tab-content:not(" + target + ")").hide();

app/view/en/acct.html

@@ -99,10 +99,15 @@
                               <input type="text" id="url" style="width:70%" placeholder="ex)mstdn.jp">
                               <div id="ins-suggest"></div>
                               Uncheck it to skip pasiting code.(login to Mastodon on Windows or macOS) (Recommended: pcheck)<br>
+                              <label>
                                     <input type="checkbox" class="filled-in" id="linux" />
-                              <label for="linux">Code setup</label><br>
+                                    <span>Code setup</span>
+                              </label>
+                              <br>
+                              <label>
                                     <input type="checkbox" class="filled-in" id="misskey" />
-                              <label for="misskey">Login as Misskey</label><br>
+                                    <span>Login as Misskey</span>
+                              </label><br>
                               <button class="btn waves-effect" onclick="instance()">Login</button><br>
                         </div>
                         <div class="col s4">

app/view/en/index.html

@@ -161,15 +161,15 @@
 					<div class="col s12 mize" style="margin-top: 0; display:flex; justify-content: space-between">
 						<i class="waves-effect gray material-icons" id="nsfw" title="Mark media as sensitive"
 							onclick="nsfw()">visibility_off</i>
-						<i class="waves-effect gray material-icons purple-text dropdown-button"
+						<i class="waves-effect gray material-icons purple-text dropdown-trigger"
-							data-activates='dropdown1' id="vis-icon">public</i>
+							data-target="dropdown1" id="vis-icon">public</i>
 						<a class="waves-effect gray" id="cw" onclick="cw()" title="Hide text behind warning">CW</a>
 						<span><span id="imgup"></span><span id="imgsel"><i class="waves-effect material-icons gray"
 									onclick="fileselect()" title="Attach..">photo_library</i></span></span>
 						<i class="waves-effect gray material-icons" onclick="emojiToggle()" id="emojibtn"
 							title="Emojis">tag_faces</i>
-						<i class="waves-effect gray material-icons dropdown-button"
+						<i class="waves-effect gray material-icons dropdown-trigger"
-							data-activates='dropdown2'>more_vert</i>
+							data-target="dropdown2">more_vert</i>
 						<i class="material-icons nex gray waves-effect" title="Clear toot box(Ctrl+Shit+C)"
 							data-trans-title="post_box_clear" id="clear">clear</i>
 					</div>
@@ -190,7 +190,7 @@
 					</div>
 				</div>
 				<!-- 公開範囲 Dropdown Structure -->
-				<ul id='dropdown1' class='dropdown-content'>
+				<ul id="dropdown1" class="dropdown-content">
 					<li style="font-size: 16px; display: block; line-height: 22px; padding: 14px 16px;">Adjust status privacy
 					</li>
 					<li>
@@ -213,7 +213,7 @@
 					</li>
 				</ul>
 				<!-- その他 Dropdown Structure -->
-				<ul id='dropdown2' class='dropdown-content'>
+				<ul id="dropdown2" class="dropdown-content">
 					<li>
 						<a onclick="adobe()">Adobe Photo Editor</a>
 					</li>
@@ -311,10 +311,14 @@
 					<input type="text" class="mastodon-choice" placeholder="Choice2">
 					<input type="text" class="mastodon-choice" placeholder="Choice3">
 					<input type="text" class="mastodon-choice" placeholder="Choice4">
+					<label>
 						<input type="checkbox" class="filled-in" id="poll-multiple" value="1" />
-					<label for="poll-multiple">Multiple select</label><br>
+						<span>Multiple select</span>
+					</label>
+					<label>
 						<input type="checkbox" class="filled-in" id="poll-until" value="1" />
-					<label for="poll-until">Hide 'votes' count until people vote it.</label><br>
+						<span>Hide 'votes' count until people vote it.</span>
+					</label>
 					<input type="number" style="width:50px" id="days_poll" placeholder="d" value="0">day(s)
 					<input type="number" style="width:50px" id="hours_poll" placeholder="h" value="0">hour(s)
 					<input type="number" style="width:50px" id="mins_poll" placeholder="m" value="6">minute(s)
@@ -325,7 +329,7 @@
 	<!-- Modal Structure Tootdata-->
 	<div id="tootmodal" class="modal modal-fixed-footer">
 		<div class="modal-content">
-			<ul class="collapsible" data-collapsible="accordion" id="det-col">
+			<ul class="collapsible"id="det-col">
 				<li class="dm-hide">
 					<div class="collapsible-header">
 						<i class="material-icons">people_outline</i>Local TL after this toot)
@@ -474,46 +478,46 @@
 				</div>
 				<div class="his-float" id="his-float-timeline">
 					<div id="my-data-nav">
-						<ul class="custom-tabs transparent">
+						<ul class="tabs transparent">
-							<li class="custom-tab col my-data-width active-back column-first">
+							<li class="tab col my-data-width active-back column-first">
 								<a go="#his-tl" title="Timeline"><i class="material-icons">timeline</i></a>
 							</li>
-							<li class="custom-tab col my-data-width">
+							<li class="tab col my-data-width">
 								<a go="#his-follow-list" title="Follow"><i class="material-icons">people</i>→</a>
 							</li>
-							<li class="custom-tab col my-data-width">
+							<li class="tab col my-data-width">
 								<a go="#his-follower-list" title="Follower"><i
 										class="material-icons">people</i>←</a>
 							</li>
-							<li class="custom-tab col my-data-width only-his-data">
+							<li class="tab col my-data-width only-his-data">
 								<a go="#his-action" title="Cross-account"><i
 										class="material-icons">account_box</i></a>
 							</li>
-							<li class="custom-tab col my-data-width only-his-data">
+							<li class="tab col my-data-width only-his-data">
 								<a go="#his-list" title="List"><i class="material-icons">list</i></a>
 							</li>
-							<li class="custom-tab col my-data-width only-my-data">
+							<li class="tab col my-data-width only-my-data">
 								<a go="#his-fav-list" title="Favourite"><i class="material-icons">star</i></a>
 							</li>
-							<li class="custom-tab col my-data-width only-my-data">
+							<li class="tab col my-data-width only-my-data">
 								<a go="#his-blocking-list" title="Blocks"><i class="material-icons">block</i></a>
 							</li>
-							<li class="custom-tab col my-data-width only-my-data">
+							<li class="tab col my-data-width only-my-data">
 								<a go="#his-blocking-list" title="Blocks"><i
 										class="material-icons">voice_over_off</i></a>
 							</li>
-							<li class="custom-tab col my-data-width only-my-data">
+							<li class="tab col my-data-width only-my-data">
 								<a go="#his-domain-list" title="Domain block"><i
 										class="material-icons">language</i><i class="material-icons">block</i></a>
 							</li>
-							<li class="custom-tab col my-data-width only-my-data">
+							<li class="tab col my-data-width only-my-data">
 								<a go="#his-prof-list" title="Edit profile"><i class="material-icons">create</i></a>
 							</li>
-							<li class="custom-tab col my-data-width only-my-data">
+							<li class="tab col my-data-width only-my-data">
 								<a go="#his-request-list" title="Follow requests"><i
 										class="material-icons">how_to_reg</i></a>
 							</li>
-							<li class="custom-tab col my-data-width only-my-data">
+							<li class="tab col my-data-width only-my-data">
 								<a go="#his-follow-recom-list" title="Suggest"><i
 										class="material-icons">recent_actors</i></a>
 							</li>
@@ -877,20 +881,34 @@
 					<input type="hidden" id="filter-edit-id">
 					<input type="text" style="width:150px" id="filter-add-word" placeholder="Filtering words"><br>
 					Filter contexts<br>
+					<label>
 						<input type="checkbox" class="filled-in" id="home_filter" value="home" />
-					<label for="home_filter">Home</label>
+						<span>Home</span>
+					</label>
+					<label>
 						<input type="checkbox" class="filled-in" id="local_filter" value="public" />
-					<label for="local_filter">Local</label>
+						<span>Local</span>
+					</label>
+					<label>
 						<input type="checkbox" class="filled-in" id="notf_filter" value="notifications" />
-					<label for="notf_filter">Notifications</label>
+						<span>Notifications</span>
+					</label>
+					<label>
 						<input type="checkbox" class="filled-in" id="conv_filter" value="thread" />
-					<label for="conv_filter">Conversations</label><br>
+						<span>Conversations</span>
+					</label>
 					Options<br>
+					<label>
 						<input type="checkbox" class="filled-in" id="wholeword_filter" value="1" />
-					<label for="wholeword_filter">Whole word</label><br>
+						<span>Whole word</span>
+					</label>
+					<br>
 					<span class="sml">Nice for Latin language</span><br>
+					<label>
 						<input type="checkbox" class="filled-in" id="except_filter" value="1" />
-					<label for="except_filter">Drop instead of hide</label><br>
+						<span>Drop instead of hide</span>
+					</label>
+					<br>
 					<span class="sml">Filtered toots will disappear irreversibly, even if filter is later removed</span><br>
 					Expire after<span class="sml">Unset or "0" means "Never"<b>This value may contain some error</b></span><br><br>
 					<input type="number" style="width:50px" id="days_filter" placeholder="d" value="0">day(s)

app/view/en/setting.html

@@ -63,9 +63,11 @@
 								class="pointer">Notification test</a><br></template>
 						<template v-if="item.checkbox">
 							<template v-for="(check, j) in item.text.checkbox">
+								<label>
 									<input class="with-gap" v-on:click="complete(i,check.value)" v-model="item.setValue"
 										type="radio" v-bind:id="item.id+check.value" v-bind:value="check.value" />
-								<label v-bind:for="item.id+check.value">{{check.text}}</label>
+									<span>{{check.text}}</span>
+								</label>
 							</template>
 						</template>
 						<template v-else>
@@ -104,18 +106,32 @@
 			</div>
 			<div class="collapsible-body">
 				<h4>Select theme</h4>
+				<label>
 					<input class="with-gap" onchange="settings()" name="theme" type="radio" id="black" value="black" />
-				<label for="black">Black</label>
+					<span>Black</span>
+				</label>
+				<label>
 					<input class="with-gap" onchange="settings()" name="theme" type="radio" id="white" value="white" />
-				<label for="white">White</label>
+					<span>White</span>
-				<input class="with-gap" onchange="settings()" name="theme" type="radio" id="indigo" value="indigo" />
+				</label>
-				<label for="indigo">Indigo<span class="imas hide">(エンドレスナイト)</span></label>
+				<label>
+					<input class="with-gap" onchange="settings()" name="theme" type="radio" id="indigo"
+						value="indigo" />
+					<span>Indigo<span class="imas hide">(エンドレスナイト)</span></span>
+				</label>
+				<label>
 					<input class="with-gap" onchange="settings()" name="theme" type="radio" id="brown" value="brown" />
-				<label for="brown">Brown<span class="imas hide">(ビタースイート・タイム)</span></label>
+					<span>Brown<span class="imas hide">(ビタースイート・タイム)</span></span>
+				</label>
+				<label>
 					<input class="with-gap" onchange="settings()" name="theme" type="radio" id="green" value="green" />
-				<label for="green">Green<span class="imas hide">(ユースフルロマンス)</span></label>
+					<span>Green<span class="imas hide">(ユースフルロマンス)</span></span>
-				<input class="with-gap" onchange="settings()" name="theme" type="radio" id="custom" value="custom" />
+				</label>
-				<label for="custom">Custom</label>
+				<label>
+					<input class="with-gap" onchange="settings()" name="theme" type="radio" id="custom"
+						value="custom" />
+					<span>custom</span>
+				</label>
 				<div style="width:300px" id="sel-selector">
 					<select id="custom-sel-sel" class="custom-sel" onchange="customSel()"></select>
 				</div>
@@ -131,10 +147,16 @@
 				<div class="input-field"><textarea style="width:300px" id="custom_desc" class="materialize-textarea"
 						placeholder="About this theme..."></textarea></div>
 				<h5>Color scheme</h5>
-				<input class="with-gap" name="direction" type="radio" id="dark" value="dark" checked="true" />
+				<label>
-				<label for="dark">Dark</label>
+					<input class="with-gap" onchange="settings()" name="direction" type="radio" id="dark" value="dark"
-				<input class="with-gap" name="direction" type="radio" id="light" value="light" />
+						checked="true" />
-				<label for="light">Light</label>
+					<span>Dark</span>
+				</label>
+				<label>
+					<input class="with-gap" onchange="settings()" name="direction" type="radio" id="light"
+						value="light" />
+					<span>Light</span>
+				</label>
 				<div id="pickers">
 					<div>
 						<h5>Primary</h5>Background of components
@@ -167,12 +189,12 @@
 				</div>
 				<button class="btn-large waves-effect" onclick="customComp()">Change</button>&nbsp;<button
 					class="btn waves-effect red disabled" id="delTheme" onclick="deleteIt()">Delete</button><br><br>
-				<input type="text" style="width:300px" id="custom_json" class="materialize-textarea"
+				<input type="text" style="width:300px;height:40px;" id="custom_json" class="materialize-textarea"
 					placeholder="JSON style" readonly><br>
 				Share this code with other TheDesk. Do not share this code with MiAS.
 				<h4>Import of custom themes</h4>
 				Get more themes on <a href="https://assets.msky.cafe/" target="_blank">MiAS</a><br>
-				<input type="text" style="width:300px" id="custom_import" class="materialize-textarea"
+				<input type="text" style="width:300px;height:40px;" id="custom_import" class="materialize-textarea"
 					placeholder="JSON/JSON5 style">
 				<button class="btn waves-effect" onclick="customImp()">Import</button><br>
 		</li>
@@ -189,9 +211,11 @@
 						</template>
 						<template v-if="item.checkbox">
 							<template v-for="(check, j) in item.text.checkbox">
+								<label>
 									<input class="with-gap" v-on:click="complete(i,check.value)" v-model="item.setValue"
 										type="radio" v-bind:id="item.id+check.value" v-bind:value="check.value" />
-								<label v-bind:for="item.id+check.value">{{check.text}}</label>
+									<span>{{check.text}}</span>
+								</label>
 							</template>
 						</template>
 						<template v-else>
@@ -235,9 +259,10 @@
 						<template v-if="item.checkbox">
 							<template v-for="(check, j) in item.text.checkbox">
 								<template v-if="!check.kirishima || (check.kirishima && kirishima)">
-									<input class="with-gap" v-on:click="complete(i,check.value)" v-model="item.setValue"
+									<label><input class="with-gap" v-on:click="complete(i,check.value)"
-										type="radio" v-bind:id="item.id+check.value" v-bind:value="check.value" />
+											v-model="item.setValue" type="radio" v-bind:id="item.id+check.value"
-									<label v-bind:for="item.id+check.value">{{check.text}}</label>
+											v-bind:value="check.value" />
+										<span>{{check.text}}</span></label>
 									<span v-if="check.kirishimaText">{{check.kirishimaText}}</span>
 								</template>
 							</template>
@@ -305,20 +330,36 @@
 			<div class="collapsible-body">
 				<h5>NowPlaying Provider(Windows)</h5>
 				macOS and Linux are not supported. AIMP and iTunes were checked by developer. <br>CAD:foobar2000, MusicBee,J. River Media Center, Media Jukebox<br>WLM:Last.fm Client, TTPlayer, OpenPandora, Zune.<br> For foobar2000, <a href="http://poiru.github.com/foo-cad/">foo_cad plugin</a> is required. And MusicBee requires CAD.<br>
-				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="aimp" value="AIMP" />
+				<label>
-				<label for="aimp">AIMP</label>
+					<input class="with-gap" onchange="settings()" name="npp" type="radio" id="aimp" value="AIMP" />
-				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="itunes" value="ITUNES" />
+					<span>AIMP</span>
-				<label for="itunes">iTunes</label>
+				</label>
-				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="npmm" value="MEDIAMONKEY" />
+				<label>
-				<label for="npmm">MediaMonkey</label>
+					<input class="with-gap" onchange="settings()" name="npp" type="radio" id="itunes" value="ITUNES" />
-				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="winamp" value="WINAMP" />
+					<span>iTunes</span>
-				<label for="winamp">Winamp</label>
+				</label>
-				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="wmp" value="WMP" />
+				<label>
-				<label for="wmp">WMP</label>
+					<input class="with-gap" onchange="settings()" name="npp" type="radio" id="npmm"
-				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="wlm" value="WLM" />
+						value="MEDIAMONKEY" />
-				<label for="wlm">WLM</label>
+					<span>MediaMonkey</span>
-				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="cad" value="CAD" />
+				</label>
-				<label for="cad">CAD</label><br><br>
+				<label>
+					<input class="with-gap" onchange="settings()" name="npp" type="radio" id="winamp" value="WINAMP" />
+					<span>Winamp</span>
+				</label>
+				<label>
+					<input class="with-gap" onchange="settings()" name="npp" type="radio" id="wmp" value="WMP" />
+					<span>WMP</span>
+				</label>
+				<label>
+					<input class="with-gap" onchange="settings()" name="npp" type="radio" id="wlm" value="WLM" />
+					<span>WLM</span>
+				</label>
+				<label>
+					<input class="with-gap" onchange="settings()" name="npp" type="radio" id="cad" value="CAD" />
+					<span>CAD</span>
+				</label>
+				<br><br>
 				Click <i class="material-icons" style="font-size:24px;">music_note</i>icon to NowPlaying<br>
 				<h5>Account Connection</h5>
 				TheDesk save your data on thedesk.top server.<br>
@@ -339,10 +380,15 @@
 				Windows:{song}:Song name/{album}:Album name/{artist}:Artist name<br>
 				<button onclick="spotifySave()" class="btn waves-effect" style="width:100px;">Save</button>
 				<h5>Attach an Artwork of Spotify</h5>
-				<input class="with-gap" onchange="spotifyFlagSave()" name="awk" type="radio" id="awk_yes" value="yes" />
+				<label>
-				<label for="awk_yes">Yes</label>
+					<input class="with-gap" onchange="settings()" name="awk" type="radio" id="awk_yes" value="yes" />
-				<input class="with-gap" onchange="spotifyFlagSave()" name="awk" type="radio" id="awk_no" value="no" />
+					<span>Yes</span>
-				<label for="awk_no">No</label>
+				</label>
+				<label>
+					<input class="with-gap" onchange="settings()" name="awk" type="radio" id="awk_no" value="no" />
+					<span>No</span>
+				</label>
+
 				<br>
 			</div>
 		</li>
@@ -439,6 +485,7 @@
 	</span><br>
 	TheDeskおよびCutls Pは<a href="https://donken.org/">被災地支援のためのマストドン研究会</a>をログイン機能提供等の形で応援しています。<br>
 	タグタイムラインを開く:<a href="index.html?mode=tag&code=被災地支援のためのマストドン研究会">#被災地支援のためのマストドン研究会</a><br>
+	<script type="text/javascript" src="../../js/common/modal.js"></script>
 	<script type="text/javascript" src="../../js/common/about.js"></script>
 	<script type="text/javascript" src="../../js/platform/end.js"></script>
 	<script type="text/javascript" src="../../js/login/logout.js"></script>

app/view/ja/acct.html

@@ -99,10 +99,15 @@
                               <input type="text" id="url" style="width:70%" placeholder="ex)mstdn.jp">
                               <div id="ins-suggest"></div>
                               チェックを外すとコード貼り付けをスキップできます。(<u>Mastodon</u>にWindowsやmacOSからログインする場合)失敗する場合はチェックを入れてください。<br>
+                              <label>
                                     <input type="checkbox" class="filled-in" id="linux" />
-                              <label for="linux">コードセットアップ</label><br>
+                                    <span>コードセットアップ</span>
+                              </label>
+                              <br>
+                              <label>
                                     <input type="checkbox" class="filled-in" id="misskey" />
-                              <label for="misskey">Misskeyとしてログイン</label><br>
+                                    <span>Misskeyとしてログイン</span>
+                              </label><br>
                               <button class="btn waves-effect" onclick="instance()">Login</button><br>
                         </div>
                         <div class="col s4">

app/view/ja/index.html

@@ -161,15 +161,15 @@
 					<div class="col s12 mize" style="margin-top: 0; display:flex; justify-content: space-between">
 						<i class="waves-effect gray material-icons" id="nsfw" title="画像に制限を付与"
 							onclick="nsfw()">visibility_off</i>
-						<i class="waves-effect gray material-icons purple-text dropdown-button"
+						<i class="waves-effect gray material-icons purple-text dropdown-trigger"
-							data-activates='dropdown1' id="vis-icon">public</i>
+							data-target="dropdown1" id="vis-icon">public</i>
 						<a class="waves-effect gray" id="cw" onclick="cw()" title="コンテンツワーニング(トゥートを表示する前にメッセージで隠す)">CW</a>
 						<span><span id="imgup"></span><span id="imgsel"><i class="waves-effect material-icons gray"
 									onclick="fileselect()" title="ファイルを選択">photo_library</i></span></span>
 						<i class="waves-effect gray material-icons" onclick="emojiToggle()" id="emojibtn"
 							title="絵文字を挿入">tag_faces</i>
-						<i class="waves-effect gray material-icons dropdown-button"
+						<i class="waves-effect gray material-icons dropdown-trigger"
-							data-activates='dropdown2'>more_vert</i>
+							data-target="dropdown2">more_vert</i>
 						<i class="material-icons nex gray waves-effect" title="トゥートボックスのクリア(Ctrl+Shit+C)"
 							data-trans-title="post_box_clear" id="clear">clear</i>
 					</div>
@@ -190,7 +190,7 @@
 					</div>
 				</div>
 				<!-- 公開範囲 Dropdown Structure -->
-				<ul id='dropdown1' class='dropdown-content'>
+				<ul id="dropdown1" class="dropdown-content">
 					<li style="font-size: 16px; display: block; line-height: 22px; padding: 14px 16px;">公開範囲指定
 					</li>
 					<li>
@@ -213,7 +213,7 @@
 					</li>
 				</ul>
 				<!-- その他 Dropdown Structure -->
-				<ul id='dropdown2' class='dropdown-content'>
+				<ul id="dropdown2" class="dropdown-content">
 					<li>
 						<a onclick="adobe()">Adobeフォトエディタ</a>
 					</li>
@@ -311,10 +311,14 @@
 					<input type="text" class="mastodon-choice" placeholder="選択肢2">
 					<input type="text" class="mastodon-choice" placeholder="選択肢3">
 					<input type="text" class="mastodon-choice" placeholder="選択肢4">
+					<label>
 						<input type="checkbox" class="filled-in" id="poll-multiple" value="1" />
-					<label for="poll-multiple">複数選択を許可</label><br>
+						<span>複数選択を許可</span>
+					</label>
+					<label>
 						<input type="checkbox" class="filled-in" id="poll-until" value="1" />
-					<label for="poll-until">投票するまで票数を隠す</label><br>
+						<span>投票するまで票数を隠す</span>
+					</label>
 					<input type="number" style="width:50px" id="days_poll" placeholder="d" value="0">日
 					<input type="number" style="width:50px" id="hours_poll" placeholder="h" value="0">時間
 					<input type="number" style="width:50px" id="mins_poll" placeholder="m" value="6">分
@@ -325,7 +329,7 @@
 	<!-- Modal Structure Tootdata-->
 	<div id="tootmodal" class="modal modal-fixed-footer">
 		<div class="modal-content">
-			<ul class="collapsible" data-collapsible="accordion" id="det-col">
+			<ul class="collapsible"id="det-col">
 				<li class="dm-hide">
 					<div class="collapsible-header">
 						<i class="material-icons">people_outline</i>これより後のLocal TL(言及確認)
@@ -474,46 +478,46 @@
 				</div>
 				<div class="his-float" id="his-float-timeline">
 					<div id="my-data-nav">
-						<ul class="custom-tabs transparent">
+						<ul class="tabs transparent">
-							<li class="custom-tab col my-data-width active-back column-first">
+							<li class="tab col my-data-width active-back column-first">
 								<a go="#his-tl" title="タイムライン"><i class="material-icons">timeline</i></a>
 							</li>
-							<li class="custom-tab col my-data-width">
+							<li class="tab col my-data-width">
 								<a go="#his-follow-list" title="フォロー"><i class="material-icons">people</i>→</a>
 							</li>
-							<li class="custom-tab col my-data-width">
+							<li class="tab col my-data-width">
 								<a go="#his-follower-list" title="フォロワー"><i
 										class="material-icons">people</i>←</a>
 							</li>
-							<li class="custom-tab col my-data-width only-his-data">
+							<li class="tab col my-data-width only-his-data">
 								<a go="#his-action" title="他のアカウントで操作"><i
 										class="material-icons">account_box</i></a>
 							</li>
-							<li class="custom-tab col my-data-width only-his-data">
+							<li class="tab col my-data-width only-his-data">
 								<a go="#his-list" title="リスト"><i class="material-icons">list</i></a>
 							</li>
-							<li class="custom-tab col my-data-width only-my-data">
+							<li class="tab col my-data-width only-my-data">
 								<a go="#his-fav-list" title="お気に入り登録"><i class="material-icons">star</i></a>
 							</li>
-							<li class="custom-tab col my-data-width only-my-data">
+							<li class="tab col my-data-width only-my-data">
 								<a go="#his-blocking-list" title="ブロック"><i class="material-icons">block</i></a>
 							</li>
-							<li class="custom-tab col my-data-width only-my-data">
+							<li class="tab col my-data-width only-my-data">
 								<a go="#his-blocking-list" title="ブロック"><i
 										class="material-icons">voice_over_off</i></a>
 							</li>
-							<li class="custom-tab col my-data-width only-my-data">
+							<li class="tab col my-data-width only-my-data">
 								<a go="#his-domain-list" title="ドメインブロック"><i
 										class="material-icons">language</i><i class="material-icons">block</i></a>
 							</li>
-							<li class="custom-tab col my-data-width only-my-data">
+							<li class="tab col my-data-width only-my-data">
 								<a go="#his-prof-list" title="プロフィール編集"><i class="material-icons">create</i></a>
 							</li>
-							<li class="custom-tab col my-data-width only-my-data">
+							<li class="tab col my-data-width only-my-data">
 								<a go="#his-request-list" title="フォローリクエスト"><i
 										class="material-icons">how_to_reg</i></a>
 							</li>
-							<li class="custom-tab col my-data-width only-my-data">
+							<li class="tab col my-data-width only-my-data">
 								<a go="#his-follow-recom-list" title="おすすめ"><i
 										class="material-icons">recent_actors</i></a>
 							</li>
@@ -877,20 +881,34 @@
 					<input type="hidden" id="filter-edit-id">
 					<input type="text" style="width:150px" id="filter-add-word" placeholder="フィルターワード"><br>
 					適応範囲<br>
+					<label>
 						<input type="checkbox" class="filled-in" id="home_filter" value="home" />
-					<label for="home_filter">ホーム</label>
+						<span>ホーム</span>
+					</label>
+					<label>
 						<input type="checkbox" class="filled-in" id="local_filter" value="public" />
-					<label for="local_filter">ローカル</label>
+						<span>ローカル</span>
+					</label>
+					<label>
 						<input type="checkbox" class="filled-in" id="notf_filter" value="notifications" />
-					<label for="notf_filter">通知</label>
+						<span>通知</span>
+					</label>
+					<label>
 						<input type="checkbox" class="filled-in" id="conv_filter" value="thread" />
-					<label for="conv_filter">会話</label><br>
+						<span>会話</span>
+					</label>
 					オプション<br>
+					<label>
 						<input type="checkbox" class="filled-in" id="wholeword_filter" value="1" />
-					<label for="wholeword_filter">単語マッチ</label><br>
+						<span>単語マッチ</span>
+					</label>
+					<br>
 					<span class="sml">非ラテン系の文字列では「単語マッチ」は推奨されません。</span><br>
+					<label>
 						<input type="checkbox" class="filled-in" id="except_filter" value="1" />
-					<label for="except_filter">除外</label><br>
+						<span>除外</span>
+					</label>
+					<br>
 					<span class="sml">「除外」時マッチしたトゥートは非可逆的に除外され、削除後も閲覧できません。</span><br>
 					有効期限(あと)<span class="sml">未指定(または0分)で「無期限」になります。<b>仕様上数値の正確性を保証できません。</b></span><br><br>
 					<input type="number" style="width:50px" id="days_filter" placeholder="d" value="0">日

app/view/ja/setting.html

@@ -63,9 +63,11 @@
 								class="pointer">通知テスト</a><br></template>
 						<template v-if="item.checkbox">
 							<template v-for="(check, j) in item.text.checkbox">
+								<label>
 									<input class="with-gap" v-on:click="complete(i,check.value)" v-model="item.setValue"
 										type="radio" v-bind:id="item.id+check.value" v-bind:value="check.value" />
-								<label v-bind:for="item.id+check.value">{{check.text}}</label>
+									<span>{{check.text}}</span>
+								</label>
 							</template>
 						</template>
 						<template v-else>
@@ -104,18 +106,32 @@
 			</div>
 			<div class="collapsible-body">
 				<h4>テーマの選択</h4>
+				<label>
 					<input class="with-gap" onchange="settings()" name="theme" type="radio" id="black" value="black" />
-				<label for="black">Black</label>
+					<span>Black</span>
+				</label>
+				<label>
 					<input class="with-gap" onchange="settings()" name="theme" type="radio" id="white" value="white" />
-				<label for="white">White</label>
+					<span>White</span>
-				<input class="with-gap" onchange="settings()" name="theme" type="radio" id="indigo" value="indigo" />
+				</label>
-				<label for="indigo">Indigo<span class="imas hide">(エンドレスナイト)</span></label>
+				<label>
+					<input class="with-gap" onchange="settings()" name="theme" type="radio" id="indigo"
+						value="indigo" />
+					<span>Indigo<span class="imas hide">(エンドレスナイト)</span></span>
+				</label>
+				<label>
 					<input class="with-gap" onchange="settings()" name="theme" type="radio" id="brown" value="brown" />
-				<label for="brown">Brown<span class="imas hide">(ビタースイート・タイム)</span></label>
+					<span>Brown<span class="imas hide">(ビタースイート・タイム)</span></span>
+				</label>
+				<label>
 					<input class="with-gap" onchange="settings()" name="theme" type="radio" id="green" value="green" />
-				<label for="green">Green<span class="imas hide">(ユースフルロマンス)</span></label>
+					<span>Green<span class="imas hide">(ユースフルロマンス)</span></span>
-				<input class="with-gap" onchange="settings()" name="theme" type="radio" id="custom" value="custom" />
+				</label>
-				<label for="custom">Custom</label>
+				<label>
+					<input class="with-gap" onchange="settings()" name="theme" type="radio" id="custom"
+						value="custom" />
+					<span>custom</span>
+				</label>
 				<div style="width:300px" id="sel-selector">
 					<select id="custom-sel-sel" class="custom-sel" onchange="customSel()"></select>
 				</div>
@@ -131,10 +147,16 @@
 				<div class="input-field"><textarea style="width:300px" id="custom_desc" class="materialize-textarea"
 						placeholder="説明..."></textarea></div>
 				<h5>色の系統</h5>
-				<input class="with-gap" name="direction" type="radio" id="dark" value="dark" checked="true" />
+				<label>
-				<label for="dark">Dark</label>
+					<input class="with-gap" onchange="settings()" name="direction" type="radio" id="dark" value="dark"
-				<input class="with-gap" name="direction" type="radio" id="light" value="light" />
+						checked="true" />
-				<label for="light">Light</label>
+					<span>Dark</span>
+				</label>
+				<label>
+					<input class="with-gap" onchange="settings()" name="direction" type="radio" id="light"
+						value="light" />
+					<span>Light</span>
+				</label>
 				<div id="pickers">
 					<div>
 						<h5>Primary</h5>補助要素に使われる背景色
@@ -167,12 +189,12 @@
 				</div>
 				<button class="btn-large waves-effect" onclick="customComp()">変更</button>&nbsp;<button
 					class="btn waves-effect red disabled" id="delTheme" onclick="deleteIt()">削除</button><br><br>
-				<input type="text" style="width:300px" id="custom_json" class="materialize-textarea"
+				<input type="text" style="width:300px;height:40px;" id="custom_json" class="materialize-textarea"
 					placeholder="JSON style" readonly><br>
 				このコードは他のTheDeskなどとシェアできます。このコードをMiASに貼ることはご遠慮ください。詳細:<a href="https://thedesk.top/mias.html" target="_blank">テーマ互換性</a>
 				<h4>カスタムテーマのインポート</h4>
 				<a href="https://assets.msky.cafe/" target="_blank">MiAS</a>上の80を超えるテーマを張り付けることもできます。<br>
-				<input type="text" style="width:300px" id="custom_import" class="materialize-textarea"
+				<input type="text" style="width:300px;height:40px;" id="custom_import" class="materialize-textarea"
 					placeholder="JSON/JSON5 style">
 				<button class="btn waves-effect" onclick="customImp()">インポート</button><br>
 		</li>
@@ -189,9 +211,11 @@
 						</template>
 						<template v-if="item.checkbox">
 							<template v-for="(check, j) in item.text.checkbox">
+								<label>
 									<input class="with-gap" v-on:click="complete(i,check.value)" v-model="item.setValue"
 										type="radio" v-bind:id="item.id+check.value" v-bind:value="check.value" />
-								<label v-bind:for="item.id+check.value">{{check.text}}</label>
+									<span>{{check.text}}</span>
+								</label>
 							</template>
 						</template>
 						<template v-else>
@@ -235,9 +259,10 @@
 						<template v-if="item.checkbox">
 							<template v-for="(check, j) in item.text.checkbox">
 								<template v-if="!check.kirishima || (check.kirishima && kirishima)">
-									<input class="with-gap" v-on:click="complete(i,check.value)" v-model="item.setValue"
+									<label><input class="with-gap" v-on:click="complete(i,check.value)"
-										type="radio" v-bind:id="item.id+check.value" v-bind:value="check.value" />
+											v-model="item.setValue" type="radio" v-bind:id="item.id+check.value"
-									<label v-bind:for="item.id+check.value">{{check.text}}</label>
+											v-bind:value="check.value" />
+										<span>{{check.text}}</span></label>
 									<span v-if="check.kirishimaText">{{check.kirishimaText}}</span>
 								</template>
 							</template>
@@ -305,20 +330,36 @@
 			<div class="collapsible-body">
 				<h5>NowPlayingのソース(Windows)</h5>
 				macOSやLinuxでは動作しません。AIMPとiTunes以外未検証です。<br>foobar2000, MusicBee,J. River Media Center, Media JukeboxはCADを、Last.fm Client, TTPlayer, OpenPandora, ZuneはWLMを選んでください。<br>ただし、foobar2000は<a href="http://poiru.github.com/foo-cad/">foo_cad plugin</a>が必要です。MusicBeeもCADを有効にする必要があります。<br>
-				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="aimp" value="AIMP" />
+				<label>
-				<label for="aimp">AIMP</label>
+					<input class="with-gap" onchange="settings()" name="npp" type="radio" id="aimp" value="AIMP" />
-				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="itunes" value="ITUNES" />
+					<span>AIMP</span>
-				<label for="itunes">iTunes</label>
+				</label>
-				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="npmm" value="MEDIAMONKEY" />
+				<label>
-				<label for="npmm">MediaMonkey</label>
+					<input class="with-gap" onchange="settings()" name="npp" type="radio" id="itunes" value="ITUNES" />
-				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="winamp" value="WINAMP" />
+					<span>iTunes</span>
-				<label for="winamp">Winamp</label>
+				</label>
-				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="wmp" value="WMP" />
+				<label>
-				<label for="wmp">WMP</label>
+					<input class="with-gap" onchange="settings()" name="npp" type="radio" id="npmm"
-				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="wlm" value="WLM" />
+						value="MEDIAMONKEY" />
-				<label for="wlm">WLM</label>
+					<span>MediaMonkey</span>
-				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="cad" value="CAD" />
+				</label>
-				<label for="cad">CAD</label><br><br>
+				<label>
+					<input class="with-gap" onchange="settings()" name="npp" type="radio" id="winamp" value="WINAMP" />
+					<span>Winamp</span>
+				</label>
+				<label>
+					<input class="with-gap" onchange="settings()" name="npp" type="radio" id="wmp" value="WMP" />
+					<span>WMP</span>
+				</label>
+				<label>
+					<input class="with-gap" onchange="settings()" name="npp" type="radio" id="wlm" value="WLM" />
+					<span>WLM</span>
+				</label>
+				<label>
+					<input class="with-gap" onchange="settings()" name="npp" type="radio" id="cad" value="CAD" />
+					<span>CAD</span>
+				</label>
+				<br><br>
 				<i class="material-icons" style="font-size:24px;">music_note</i>ボタンから簡単にNowPlayingができます。<br>
 				<h5>アカウントの連携</h5>
 				APIの性質上，thedesk.topへアクセスします。<br>
@@ -339,10 +380,15 @@
 				Windows:{song}:曲名/{album}:アルバム名/{artist}:アーティスト名<br>
 				<button onclick="spotifySave()" class="btn waves-effect" style="width:100px;">設定</button>
 				<h5>アルバムアートワークを添付する(Spotify/Windows)</h5>
-				<input class="with-gap" onchange="spotifyFlagSave()" name="awk" type="radio" id="awk_yes" value="yes" />
+				<label>
-				<label for="awk_yes">はい</label>
+					<input class="with-gap" onchange="settings()" name="awk" type="radio" id="awk_yes" value="yes" />
-				<input class="with-gap" onchange="spotifyFlagSave()" name="awk" type="radio" id="awk_no" value="no" />
+					<span>はい</span>
-				<label for="awk_no">いいえ</label>
+				</label>
+				<label>
+					<input class="with-gap" onchange="settings()" name="awk" type="radio" id="awk_no" value="no" />
+					<span>いいえ</span>
+				</label>
+
 				<br>
 			</div>
 		</li>
@@ -439,6 +485,7 @@
 	</span><br>
 	TheDeskおよびCutls Pは<a href="https://donken.org/">被災地支援のためのマストドン研究会</a>をログイン機能提供等の形で応援しています。<br>
 	タグタイムラインを開く:<a href="index.html?mode=tag&code=被災地支援のためのマストドン研究会">#被災地支援のためのマストドン研究会</a><br>
+	<script type="text/javascript" src="../../js/common/modal.js"></script>
 	<script type="text/javascript" src="../../js/common/about.js"></script>
 	<script type="text/javascript" src="../../js/platform/end.js"></script>
 	<script type="text/javascript" src="../../js/login/logout.js"></script>

app/view/make/acct.sample.html

@@ -99,10 +99,15 @@
                               <input type="text" id="url" style="width:70%" placeholder="ex)mstdn.jp">
                               <div id="ins-suggest"></div>
                               @@codesetupwarn@@<br>
+                              <label>
                                     <input type="checkbox" class="filled-in" id="linux" />
-                              <label for="linux">@@codesetup@@</label><br>
+                                    <span>@@codesetup@@</span>
+                              </label>
+                              <br>
+                              <label>
                                     <input type="checkbox" class="filled-in" id="misskey" />
-                              <label for="misskey">@@thisismisskey@@</label><br>
+                                    <span>@@thisismisskey@@</span>
+                              </label><br>
                               <button class="btn waves-effect" onclick="instance()">Login</button><br>
                         </div>
                         <div class="col s4">

app/view/make/index.sample.html

@@ -161,15 +161,15 @@
 					<div class="col s12 mize" style="margin-top: 0; display:flex; justify-content: space-between">
 						<i class="waves-effect gray material-icons" id="nsfw" title="@@nsfwDes@@"
 							onclick="nsfw()">visibility_off</i>
-						<i class="waves-effect gray material-icons purple-text dropdown-button"
+						<i class="waves-effect gray material-icons purple-text dropdown-trigger"
-							data-activates='dropdown1' id="vis-icon">public</i>
+							data-target="dropdown1" id="vis-icon">public</i>
 						<a class="waves-effect gray" id="cw" onclick="cw()" title="@@cwDes@@">CW</a>
 						<span><span id="imgup"></span><span id="imgsel"><i class="waves-effect material-icons gray"
 									onclick="fileselect()" title="@@selfile@@">photo_library</i></span></span>
 						<i class="waves-effect gray material-icons" onclick="emojiToggle()" id="emojibtn"
 							title="@@insertEmoji@@">tag_faces</i>
-						<i class="waves-effect gray material-icons dropdown-button"
+						<i class="waves-effect gray material-icons dropdown-trigger"
-							data-activates='dropdown2'>more_vert</i>
+							data-target="dropdown2">more_vert</i>
 						<i class="material-icons nex gray waves-effect" title="@@clearToot@@(Ctrl+Shit+C)"
 							data-trans-title="post_box_clear" id="clear">clear</i>
 					</div>
@@ -190,7 +190,7 @@
 					</div>
 				</div>
 				<!-- 公開範囲 Dropdown Structure -->
-				<ul id='dropdown1' class='dropdown-content'>
+				<ul id="dropdown1" class="dropdown-content">
 					<li style="font-size: 16px; display: block; line-height: 22px; padding: 14px 16px;">@@selectVis@@
 					</li>
 					<li>
@@ -213,7 +213,7 @@
 					</li>
 				</ul>
 				<!-- その他 Dropdown Structure -->
-				<ul id='dropdown2' class='dropdown-content'>
+				<ul id="dropdown2" class="dropdown-content">
 					<li>
 						<a onclick="adobe()">@@adobephoto@@</a>
 					</li>
@@ -311,10 +311,14 @@
 					<input type="text" class="mastodon-choice" placeholder="@@choice@@2">
 					<input type="text" class="mastodon-choice" placeholder="@@choice@@3">
 					<input type="text" class="mastodon-choice" placeholder="@@choice@@4">
+					<label>
 						<input type="checkbox" class="filled-in" id="poll-multiple" value="1" />
-					<label for="poll-multiple">@@pollmulti@@</label><br>
+						<span>@@pollmulti@@</span>
+					</label>
+					<label>
 						<input type="checkbox" class="filled-in" id="poll-until" value="1" />
-					<label for="poll-until">@@polluntil@@</label><br>
+						<span>@@polluntil@@</span>
+					</label>
 					<input type="number" style="width:50px" id="days_poll" placeholder="d" value="0">@@days@@
 					<input type="number" style="width:50px" id="hours_poll" placeholder="h" value="0">@@hours@@
 					<input type="number" style="width:50px" id="mins_poll" placeholder="m" value="6">@@mins@@
@@ -325,7 +329,7 @@
 	<!-- Modal Structure Tootdata-->
 	<div id="tootmodal" class="modal modal-fixed-footer">
 		<div class="modal-content">
-			<ul class="collapsible" data-collapsible="accordion" id="det-col">
+			<ul class="collapsible"id="det-col">
 				<li class="dm-hide">
 					<div class="collapsible-header">
 						<i class="material-icons">people_outline</i>@@afterLTL@@
@@ -474,46 +478,46 @@
 				</div>
 				<div class="his-float" id="his-float-timeline">
 					<div id="my-data-nav">
-						<ul class="custom-tabs transparent">
+						<ul class="tabs transparent">
-							<li class="custom-tab col my-data-width active-back column-first">
+							<li class="tab col my-data-width active-back column-first">
 								<a go="#his-tl" title="@@timeline@@"><i class="material-icons">timeline</i></a>
 							</li>
-							<li class="custom-tab col my-data-width">
+							<li class="tab col my-data-width">
 								<a go="#his-follow-list" title="@@follow@@"><i class="material-icons">people</i>→</a>
 							</li>
-							<li class="custom-tab col my-data-width">
+							<li class="tab col my-data-width">
 								<a go="#his-follower-list" title="@@follower@@"><i
 										class="material-icons">people</i>←</a>
 							</li>
-							<li class="custom-tab col my-data-width only-his-data">
+							<li class="tab col my-data-width only-his-data">
 								<a go="#his-action" title="@@operateOtherAcct@@"><i
 										class="material-icons">account_box</i></a>
 							</li>
-							<li class="custom-tab col my-data-width only-his-data">
+							<li class="tab col my-data-width only-his-data">
 								<a go="#his-list" title="@@list@@"><i class="material-icons">list</i></a>
 							</li>
-							<li class="custom-tab col my-data-width only-my-data">
+							<li class="tab col my-data-width only-my-data">
 								<a go="#his-fav-list" title="@@favRegist@@"><i class="material-icons">star</i></a>
 							</li>
-							<li class="custom-tab col my-data-width only-my-data">
+							<li class="tab col my-data-width only-my-data">
 								<a go="#his-blocking-list" title="@@blocks@@"><i class="material-icons">block</i></a>
 							</li>
-							<li class="custom-tab col my-data-width only-my-data">
+							<li class="tab col my-data-width only-my-data">
 								<a go="#his-blocking-list" title="@@blocks@@"><i
 										class="material-icons">voice_over_off</i></a>
 							</li>
-							<li class="custom-tab col my-data-width only-my-data">
+							<li class="tab col my-data-width only-my-data">
 								<a go="#his-domain-list" title="@@domainBlock@@"><i
 										class="material-icons">language</i><i class="material-icons">block</i></a>
 							</li>
-							<li class="custom-tab col my-data-width only-my-data">
+							<li class="tab col my-data-width only-my-data">
 								<a go="#his-prof-list" title="@@editProf@@"><i class="material-icons">create</i></a>
 							</li>
-							<li class="custom-tab col my-data-width only-my-data">
+							<li class="tab col my-data-width only-my-data">
 								<a go="#his-request-list" title="@@followReq@@"><i
 										class="material-icons">how_to_reg</i></a>
 							</li>
-							<li class="custom-tab col my-data-width only-my-data">
+							<li class="tab col my-data-width only-my-data">
 								<a go="#his-follow-recom-list" title="@@frc@@"><i
 										class="material-icons">recent_actors</i></a>
 							</li>
@@ -877,20 +881,34 @@
 					<input type="hidden" id="filter-edit-id">
 					<input type="text" style="width:150px" id="filter-add-word" placeholder="@@filterWord@@"><br>
 					@@degree@@<br>
+					<label>
 						<input type="checkbox" class="filled-in" id="home_filter" value="home" />
-					<label for="home_filter">@@home@@</label>
+						<span>@@home@@</span>
+					</label>
+					<label>
 						<input type="checkbox" class="filled-in" id="local_filter" value="public" />
-					<label for="local_filter">@@local@@</label>
+						<span>@@local@@</span>
+					</label>
+					<label>
 						<input type="checkbox" class="filled-in" id="notf_filter" value="notifications" />
-					<label for="notf_filter">@@notf@@</label>
+						<span>@@notf@@</span>
+					</label>
+					<label>
 						<input type="checkbox" class="filled-in" id="conv_filter" value="thread" />
-					<label for="conv_filter">@@conver@@</label><br>
+						<span>@@conver@@</span>
+					</label>
 					@@option@@<br>
+					<label>
 						<input type="checkbox" class="filled-in" id="wholeword_filter" value="1" />
-					<label for="wholeword_filter">@@matchWord@@</label><br>
+						<span>@@matchWord@@</span>
+					</label>
+					<br>
 					<span class="sml">@@warnMatchWord@@</span><br>
+					<label>
 						<input type="checkbox" class="filled-in" id="except_filter" value="1" />
-					<label for="except_filter">@@except@@</label><br>
+						<span>@@except@@</span>
+					</label>
+					<br>
 					<span class="sml">@@exceptWorn@@</span><br>
 					@@avalableBefore@@<span class="sml">@@warnAvBefore@@<b>@@warnAvBefore2@@</b></span><br><br>
 					<input type="number" style="width:50px" id="days_filter" placeholder="d" value="0">@@days@@

app/view/make/setting.sample.html

@@ -63,9 +63,11 @@
 								class="pointer">@@nntest@@</a><br></template>
 						<template v-if="item.checkbox">
 							<template v-for="(check, j) in item.text.checkbox">
+								<label>
 									<input class="with-gap" v-on:click="complete(i,check.value)" v-model="item.setValue"
 										type="radio" v-bind:id="item.id+check.value" v-bind:value="check.value" />
-								<label v-bind:for="item.id+check.value">{{check.text}}</label>
+									<span>{{check.text}}</span>
+								</label>
 							</template>
 						</template>
 						<template v-else>
@@ -104,18 +106,32 @@
 			</div>
 			<div class="collapsible-body">
 				<h4>@@themeSel@@</h4>
+				<label>
 					<input class="with-gap" onchange="settings()" name="theme" type="radio" id="black" value="black" />
-				<label for="black">Black</label>
+					<span>Black</span>
+				</label>
+				<label>
 					<input class="with-gap" onchange="settings()" name="theme" type="radio" id="white" value="white" />
-				<label for="white">White</label>
+					<span>White</span>
-				<input class="with-gap" onchange="settings()" name="theme" type="radio" id="indigo" value="indigo" />
+				</label>
-				<label for="indigo">Indigo<span class="imas hide">(エンドレスナイト)</span></label>
+				<label>
+					<input class="with-gap" onchange="settings()" name="theme" type="radio" id="indigo"
+						value="indigo" />
+					<span>Indigo<span class="imas hide">(エンドレスナイト)</span></span>
+				</label>
+				<label>
 					<input class="with-gap" onchange="settings()" name="theme" type="radio" id="brown" value="brown" />
-				<label for="brown">Brown<span class="imas hide">(ビタースイート・タイム)</span></label>
+					<span>Brown<span class="imas hide">(ビタースイート・タイム)</span></span>
+				</label>
+				<label>
 					<input class="with-gap" onchange="settings()" name="theme" type="radio" id="green" value="green" />
-				<label for="green">Green<span class="imas hide">(ユースフルロマンス)</span></label>
+					<span>Green<span class="imas hide">(ユースフルロマンス)</span></span>
-				<input class="with-gap" onchange="settings()" name="theme" type="radio" id="custom" value="custom" />
+				</label>
-				<label for="custom">Custom</label>
+				<label>
+					<input class="with-gap" onchange="settings()" name="theme" type="radio" id="custom"
+						value="custom" />
+					<span>custom</span>
+				</label>
 				<div style="width:300px" id="sel-selector">
 					<select id="custom-sel-sel" class="custom-sel" onchange="customSel()"></select>
 				</div>
@@ -131,10 +147,16 @@
 				<div class="input-field"><textarea style="width:300px" id="custom_desc" class="materialize-textarea"
 						placeholder="@@desc@@..."></textarea></div>
 				<h5>@@customthemeDirection@@</h5>
-				<input class="with-gap" name="direction" type="radio" id="dark" value="dark" checked="true" />
+				<label>
-				<label for="dark">Dark</label>
+					<input class="with-gap" onchange="settings()" name="direction" type="radio" id="dark" value="dark"
-				<input class="with-gap" name="direction" type="radio" id="light" value="light" />
+						checked="true" />
-				<label for="light">Light</label>
+					<span>Dark</span>
+				</label>
+				<label>
+					<input class="with-gap" onchange="settings()" name="direction" type="radio" id="light"
+						value="light" />
+					<span>Light</span>
+				</label>
 				<div id="pickers">
 					<div>
 						<h5>Primary</h5>@@secondarycolor@@
@@ -167,12 +189,12 @@
 				</div>
 				<button class="btn-large waves-effect" onclick="customComp()">@@change@@</button>&nbsp;<button
 					class="btn waves-effect red disabled" id="delTheme" onclick="deleteIt()">@@delete@@</button><br><br>
-				<input type="text" style="width:300px" id="custom_json" class="materialize-textarea"
+				<input type="text" style="width:300px;height:40px;" id="custom_json" class="materialize-textarea"
 					placeholder="JSON style" readonly><br>
 				@@customShare@@
 				<h4>@@customImport@@</h4>
 				@@cImpWarn@@<br>
-				<input type="text" style="width:300px" id="custom_import" class="materialize-textarea"
+				<input type="text" style="width:300px;height:40px;" id="custom_import" class="materialize-textarea"
 					placeholder="JSON/JSON5 style">
 				<button class="btn waves-effect" onclick="customImp()">@@import@@</button><br>
 		</li>
@@ -189,9 +211,11 @@
 						</template>
 						<template v-if="item.checkbox">
 							<template v-for="(check, j) in item.text.checkbox">
+								<label>
 									<input class="with-gap" v-on:click="complete(i,check.value)" v-model="item.setValue"
 										type="radio" v-bind:id="item.id+check.value" v-bind:value="check.value" />
-								<label v-bind:for="item.id+check.value">{{check.text}}</label>
+									<span>{{check.text}}</span>
+								</label>
 							</template>
 						</template>
 						<template v-else>
@@ -235,9 +259,10 @@
 						<template v-if="item.checkbox">
 							<template v-for="(check, j) in item.text.checkbox">
 								<template v-if="!check.kirishima || (check.kirishima && kirishima)">
-									<input class="with-gap" v-on:click="complete(i,check.value)" v-model="item.setValue"
+									<label><input class="with-gap" v-on:click="complete(i,check.value)"
-										type="radio" v-bind:id="item.id+check.value" v-bind:value="check.value" />
+											v-model="item.setValue" type="radio" v-bind:id="item.id+check.value"
-									<label v-bind:for="item.id+check.value">{{check.text}}</label>
+											v-bind:value="check.value" />
+										<span>{{check.text}}</span></label>
 									<span v-if="check.kirishimaText">{{check.kirishimaText}}</span>
 								</template>
 							</template>
@@ -305,20 +330,36 @@
 			<div class="collapsible-body">
 				<h5>@@npProvider@@</h5>
 				@@npPeoviderWarn@@<br>
-				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="aimp" value="AIMP" />
+				<label>
-				<label for="aimp">AIMP</label>
+					<input class="with-gap" onchange="settings()" name="npp" type="radio" id="aimp" value="AIMP" />
-				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="itunes" value="ITUNES" />
+					<span>AIMP</span>
-				<label for="itunes">iTunes</label>
+				</label>
-				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="npmm" value="MEDIAMONKEY" />
+				<label>
-				<label for="npmm">MediaMonkey</label>
+					<input class="with-gap" onchange="settings()" name="npp" type="radio" id="itunes" value="ITUNES" />
-				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="winamp" value="WINAMP" />
+					<span>iTunes</span>
-				<label for="winamp">Winamp</label>
+				</label>
-				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="wmp" value="WMP" />
+				<label>
-				<label for="wmp">WMP</label>
+					<input class="with-gap" onchange="settings()" name="npp" type="radio" id="npmm"
-				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="wlm" value="WLM" />
+						value="MEDIAMONKEY" />
-				<label for="wlm">WLM</label>
+					<span>MediaMonkey</span>
-				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="cad" value="CAD" />
+				</label>
-				<label for="cad">CAD</label><br><br>
+				<label>
+					<input class="with-gap" onchange="settings()" name="npp" type="radio" id="winamp" value="WINAMP" />
+					<span>Winamp</span>
+				</label>
+				<label>
+					<input class="with-gap" onchange="settings()" name="npp" type="radio" id="wmp" value="WMP" />
+					<span>WMP</span>
+				</label>
+				<label>
+					<input class="with-gap" onchange="settings()" name="npp" type="radio" id="wlm" value="WLM" />
+					<span>WLM</span>
+				</label>
+				<label>
+					<input class="with-gap" onchange="settings()" name="npp" type="radio" id="cad" value="CAD" />
+					<span>CAD</span>
+				</label>
+				<br><br>
 				@@spotifynote1@@<i class="material-icons" style="font-size:24px;">music_note</i>@@spotifynote2@@<br>
 				<h5>@@link@@</h5>
 				@@linkwarn@@<br>
@@ -339,10 +380,15 @@
 				@@templete3@@<br>
 				<button onclick="spotifySave()" class="btn waves-effect" style="width:100px;">@@set@@</button>
 				<h5>@@postartwork@@</h5>
-				<input class="with-gap" onchange="spotifyFlagSave()" name="awk" type="radio" id="awk_yes" value="yes" />
+				<label>
-				<label for="awk_yes">@@yes@@</label>
+					<input class="with-gap" onchange="settings()" name="awk" type="radio" id="awk_yes" value="yes" />
-				<input class="with-gap" onchange="spotifyFlagSave()" name="awk" type="radio" id="awk_no" value="no" />
+					<span>@@yes@@</span>
-				<label for="awk_no">@@no@@</label>
+				</label>
+				<label>
+					<input class="with-gap" onchange="settings()" name="awk" type="radio" id="awk_no" value="no" />
+					<span>@@no@@</span>
+				</label>
+
 				<br>
 			</div>
 		</li>
@@ -439,6 +485,7 @@
 	</span><br>
 	TheDeskおよびCutls Pは<a href="https://donken.org/">被災地支援のためのマストドン研究会</a>をログイン機能提供等の形で応援しています。<br>
 	タグタイムラインを開く:<a href="index.html?mode=tag&code=被災地支援のためのマストドン研究会">#被災地支援のためのマストドン研究会</a><br>
+	<script type="text/javascript" src="../../js/common/modal.js"></script>
 	<script type="text/javascript" src="../../js/common/about.js"></script>
 	<script type="text/javascript" src="../../js/platform/end.js"></script>
 	<script type="text/javascript" src="../../js/login/logout.js"></script>

app/view/ps/acct.html

@@ -99,10 +99,15 @@
                               <input type="text" id="url" style="width:70%" placeholder="ex)mstdn.jp">
                               <div id="ins-suggest"></div>
                               crwdns368:0crwdne368:0<br>
+                              <label>
                                     <input type="checkbox" class="filled-in" id="linux" />
-                              <label for="linux">crwdns369:0crwdne369:0</label><br>
+                                    <span>crwdns369:0crwdne369:0</span>
+                              </label>
+                              <br>
+                              <label>
                                     <input type="checkbox" class="filled-in" id="misskey" />
-                              <label for="misskey">crwdns382:0crwdne382:0</label><br>
+                                    <span>crwdns382:0crwdne382:0</span>
+                              </label><br>
                               <button class="btn waves-effect" onclick="instance()">Login</button><br>
                         </div>
                         <div class="col s4">

app/view/ps/index.html

@@ -161,15 +161,15 @@
 					<div class="col s12 mize" style="margin-top: 0; display:flex; justify-content: space-between">
 						<i class="waves-effect gray material-icons" id="nsfw" title="crwdns389:0crwdne389:0"
 							onclick="nsfw()">visibility_off</i>
-						<i class="waves-effect gray material-icons purple-text dropdown-button"
+						<i class="waves-effect gray material-icons purple-text dropdown-trigger"
-							data-activates='dropdown1' id="vis-icon">public</i>
+							data-target="dropdown1" id="vis-icon">public</i>
 						<a class="waves-effect gray" id="cw" onclick="cw()" title="crwdns390:0crwdne390:0">CW</a>
 						<span><span id="imgup"></span><span id="imgsel"><i class="waves-effect material-icons gray"
 									onclick="fileselect()" title="crwdns391:0crwdne391:0">photo_library</i></span></span>
 						<i class="waves-effect gray material-icons" onclick="emojiToggle()" id="emojibtn"
 							title="crwdns393:0crwdne393:0">tag_faces</i>
-						<i class="waves-effect gray material-icons dropdown-button"
+						<i class="waves-effect gray material-icons dropdown-trigger"
-							data-activates='dropdown2'>more_vert</i>
+							data-target="dropdown2">more_vert</i>
 						<i class="material-icons nex gray waves-effect" title="crwdns395:0crwdne395:0(Ctrl+Shit+C)"
 							data-trans-title="post_box_clear" id="clear">clear</i>
 					</div>
@@ -190,7 +190,7 @@
 					</div>
 				</div>
 				<!-- 公開範囲 Dropdown Structure -->
-				<ul id='dropdown1' class='dropdown-content'>
+				<ul id="dropdown1" class="dropdown-content">
 					<li style="font-size: 16px; display: block; line-height: 22px; padding: 14px 16px;">crwdns403:0crwdne403:0
 					</li>
 					<li>
@@ -213,7 +213,7 @@
 					</li>
 				</ul>
 				<!-- その他 Dropdown Structure -->
-				<ul id='dropdown2' class='dropdown-content'>
+				<ul id="dropdown2" class="dropdown-content">
 					<li>
 						<a onclick="adobe()">crwdns392:0crwdne392:0</a>
 					</li>
@@ -311,10 +311,14 @@
 					<input type="text" class="mastodon-choice" placeholder="crwdns2414:0crwdne2414:02">
 					<input type="text" class="mastodon-choice" placeholder="crwdns2414:0crwdne2414:03">
 					<input type="text" class="mastodon-choice" placeholder="crwdns2414:0crwdne2414:04">
+					<label>
 						<input type="checkbox" class="filled-in" id="poll-multiple" value="1" />
-					<label for="poll-multiple">crwdns2416:0crwdne2416:0</label><br>
+						<span>crwdns2416:0crwdne2416:0</span>
+					</label>
+					<label>
 						<input type="checkbox" class="filled-in" id="poll-until" value="1" />
-					<label for="poll-until">crwdns2412:0crwdne2412:0</label><br>
+						<span>crwdns2412:0crwdne2412:0</span>
+					</label>
 					<input type="number" style="width:50px" id="days_poll" placeholder="d" value="0">crwdns507:0crwdne507:0
 					<input type="number" style="width:50px" id="hours_poll" placeholder="h" value="0">crwdns508:0crwdne508:0
 					<input type="number" style="width:50px" id="mins_poll" placeholder="m" value="6">crwdns509:0crwdne509:0
@@ -325,7 +329,7 @@
 	<!-- Modal Structure Tootdata-->
 	<div id="tootmodal" class="modal modal-fixed-footer">
 		<div class="modal-content">
-			<ul class="collapsible" data-collapsible="accordion" id="det-col">
+			<ul class="collapsible"id="det-col">
 				<li class="dm-hide">
 					<div class="collapsible-header">
 						<i class="material-icons">people_outline</i>@@afterLTL@@
@@ -474,46 +478,46 @@
 				</div>
 				<div class="his-float" id="his-float-timeline">
 					<div id="my-data-nav">
-						<ul class="custom-tabs transparent">
+						<ul class="tabs transparent">
-							<li class="custom-tab col my-data-width active-back column-first">
+							<li class="tab col my-data-width active-back column-first">
 								<a go="#his-tl" title="crwdns442:0crwdne442:0"><i class="material-icons">timeline</i></a>
 							</li>
-							<li class="custom-tab col my-data-width">
+							<li class="tab col my-data-width">
 								<a go="#his-follow-list" title="crwdns440:0crwdne440:0"><i class="material-icons">people</i>→</a>
 							</li>
-							<li class="custom-tab col my-data-width">
+							<li class="tab col my-data-width">
 								<a go="#his-follower-list" title="crwdns441:0crwdne441:0"><i
 										class="material-icons">people</i>←</a>
 							</li>
-							<li class="custom-tab col my-data-width only-his-data">
+							<li class="tab col my-data-width only-his-data">
 								<a go="#his-action" title="crwdns443:0crwdne443:0"><i
 										class="material-icons">account_box</i></a>
 							</li>
-							<li class="custom-tab col my-data-width only-his-data">
+							<li class="tab col my-data-width only-his-data">
 								<a go="#his-list" title="crwdns444:0crwdne444:0"><i class="material-icons">list</i></a>
 							</li>
-							<li class="custom-tab col my-data-width only-my-data">
+							<li class="tab col my-data-width only-my-data">
 								<a go="#his-fav-list" title="crwdns434:0crwdne434:0"><i class="material-icons">star</i></a>
 							</li>
-							<li class="custom-tab col my-data-width only-my-data">
+							<li class="tab col my-data-width only-my-data">
 								<a go="#his-blocking-list" title="crwdns446:0crwdne446:0"><i class="material-icons">block</i></a>
 							</li>
-							<li class="custom-tab col my-data-width only-my-data">
+							<li class="tab col my-data-width only-my-data">
 								<a go="#his-blocking-list" title="crwdns446:0crwdne446:0"><i
 										class="material-icons">voice_over_off</i></a>
 							</li>
-							<li class="custom-tab col my-data-width only-my-data">
+							<li class="tab col my-data-width only-my-data">
 								<a go="#his-domain-list" title="crwdns450:0crwdne450:0"><i
 										class="material-icons">language</i><i class="material-icons">block</i></a>
 							</li>
-							<li class="custom-tab col my-data-width only-my-data">
+							<li class="tab col my-data-width only-my-data">
 								<a go="#his-prof-list" title="crwdns451:0crwdne451:0"><i class="material-icons">create</i></a>
 							</li>
-							<li class="custom-tab col my-data-width only-my-data">
+							<li class="tab col my-data-width only-my-data">
 								<a go="#his-request-list" title="crwdns452:0crwdne452:0"><i
 										class="material-icons">how_to_reg</i></a>
 							</li>
-							<li class="custom-tab col my-data-width only-my-data">
+							<li class="tab col my-data-width only-my-data">
 								<a go="#his-follow-recom-list" title="crwdns456:0crwdne456:0"><i
 										class="material-icons">recent_actors</i></a>
 							</li>
@@ -877,20 +881,34 @@
 					<input type="hidden" id="filter-edit-id">
 					<input type="text" style="width:150px" id="filter-add-word" placeholder="crwdns496:0crwdne496:0"><br>
 					crwdns497:0crwdne497:0<br>
+					<label>
 						<input type="checkbox" class="filled-in" id="home_filter" value="home" />
-					<label for="home_filter">crwdns482:0crwdne482:0</label>
+						<span>crwdns482:0crwdne482:0</span>
+					</label>
+					<label>
 						<input type="checkbox" class="filled-in" id="local_filter" value="public" />
-					<label for="local_filter">crwdns480:0crwdne480:0</label>
+						<span>crwdns480:0crwdne480:0</span>
+					</label>
+					<label>
 						<input type="checkbox" class="filled-in" id="notf_filter" value="notifications" />
-					<label for="notf_filter">crwdns488:0crwdne488:0</label>
+						<span>crwdns488:0crwdne488:0</span>
+					</label>
+					<label>
 						<input type="checkbox" class="filled-in" id="conv_filter" value="thread" />
-					<label for="conv_filter">crwdns498:0crwdne498:0</label><br>
+						<span>crwdns498:0crwdne498:0</span>
+					</label>
 					crwdns499:0crwdne499:0<br>
+					<label>
 						<input type="checkbox" class="filled-in" id="wholeword_filter" value="1" />
-					<label for="wholeword_filter">crwdns500:0crwdne500:0</label><br>
+						<span>crwdns500:0crwdne500:0</span>
+					</label>
+					<br>
 					<span class="sml">crwdns501:0crwdne501:0</span><br>
+					<label>
 						<input type="checkbox" class="filled-in" id="except_filter" value="1" />
-					<label for="except_filter">crwdns502:0crwdne502:0</label><br>
+						<span>crwdns502:0crwdne502:0</span>
+					</label>
+					<br>
 					<span class="sml">crwdns503:0crwdne503:0</span><br>
 					crwdns504:0crwdne504:0<span class="sml">crwdns505:0crwdne505:0<b>crwdns506:0crwdne506:0</b></span><br><br>
 					<input type="number" style="width:50px" id="days_filter" placeholder="d" value="0">crwdns507:0crwdne507:0

app/view/ps/setting.html

@@ -63,9 +63,11 @@
 								class="pointer">crwdns540:0crwdne540:0</a><br></template>
 						<template v-if="item.checkbox">
 							<template v-for="(check, j) in item.text.checkbox">
+								<label>
 									<input class="with-gap" v-on:click="complete(i,check.value)" v-model="item.setValue"
 										type="radio" v-bind:id="item.id+check.value" v-bind:value="check.value" />
-								<label v-bind:for="item.id+check.value">{{check.text}}</label>
+									<span>{{check.text}}</span>
+								</label>
 							</template>
 						</template>
 						<template v-else>
@@ -104,18 +106,32 @@
 			</div>
 			<div class="collapsible-body">
 				<h4>crwdns2422:0crwdne2422:0</h4>
+				<label>
 					<input class="with-gap" onchange="settings()" name="theme" type="radio" id="black" value="black" />
-				<label for="black">Black</label>
+					<span>Black</span>
+				</label>
+				<label>
 					<input class="with-gap" onchange="settings()" name="theme" type="radio" id="white" value="white" />
-				<label for="white">White</label>
+					<span>White</span>
-				<input class="with-gap" onchange="settings()" name="theme" type="radio" id="indigo" value="indigo" />
+				</label>
-				<label for="indigo">Indigo<span class="imas hide">(エンドレスナイト)</span></label>
+				<label>
+					<input class="with-gap" onchange="settings()" name="theme" type="radio" id="indigo"
+						value="indigo" />
+					<span>Indigo<span class="imas hide">(エンドレスナイト)</span></span>
+				</label>
+				<label>
 					<input class="with-gap" onchange="settings()" name="theme" type="radio" id="brown" value="brown" />
-				<label for="brown">Brown<span class="imas hide">(ビタースイート・タイム)</span></label>
+					<span>Brown<span class="imas hide">(ビタースイート・タイム)</span></span>
+				</label>
+				<label>
 					<input class="with-gap" onchange="settings()" name="theme" type="radio" id="green" value="green" />
-				<label for="green">Green<span class="imas hide">(ユースフルロマンス)</span></label>
+					<span>Green<span class="imas hide">(ユースフルロマンス)</span></span>
-				<input class="with-gap" onchange="settings()" name="theme" type="radio" id="custom" value="custom" />
+				</label>
-				<label for="custom">Custom</label>
+				<label>
+					<input class="with-gap" onchange="settings()" name="theme" type="radio" id="custom"
+						value="custom" />
+					<span>custom</span>
+				</label>
 				<div style="width:300px" id="sel-selector">
 					<select id="custom-sel-sel" class="custom-sel" onchange="customSel()"></select>
 				</div>
@@ -131,10 +147,16 @@
 				<div class="input-field"><textarea style="width:300px" id="custom_desc" class="materialize-textarea"
 						placeholder="crwdns2440:0crwdne2440:0..."></textarea></div>
 				<h5>crwdns2426:0crwdne2426:0</h5>
-				<input class="with-gap" name="direction" type="radio" id="dark" value="dark" checked="true" />
+				<label>
-				<label for="dark">Dark</label>
+					<input class="with-gap" onchange="settings()" name="direction" type="radio" id="dark" value="dark"
-				<input class="with-gap" name="direction" type="radio" id="light" value="light" />
+						checked="true" />
-				<label for="light">Light</label>
+					<span>Dark</span>
+				</label>
+				<label>
+					<input class="with-gap" onchange="settings()" name="direction" type="radio" id="light"
+						value="light" />
+					<span>Light</span>
+				</label>
 				<div id="pickers">
 					<div>
 						<h5>Primary</h5>crwdns2430:0crwdne2430:0
@@ -167,12 +189,12 @@
 				</div>
 				<button class="btn-large waves-effect" onclick="customComp()">crwdns528:0crwdne528:0</button>&nbsp;<button
 					class="btn waves-effect red disabled" id="delTheme" onclick="deleteIt()">@@delete@@</button><br><br>
-				<input type="text" style="width:300px" id="custom_json" class="materialize-textarea"
+				<input type="text" style="width:300px;height:40px;" id="custom_json" class="materialize-textarea"
 					placeholder="JSON style" readonly><br>
 				crwdns2442:0crwdne2442:0
 				<h4>crwdns2444:0crwdne2444:0</h4>
 				@@cImpWarn@@<br>
-				<input type="text" style="width:300px" id="custom_import" class="materialize-textarea"
+				<input type="text" style="width:300px;height:40px;" id="custom_import" class="materialize-textarea"
 					placeholder="JSON/JSON5 style">
 				<button class="btn waves-effect" onclick="customImp()">crwdns532:0crwdne532:0</button><br>
 		</li>
@@ -189,9 +211,11 @@
 						</template>
 						<template v-if="item.checkbox">
 							<template v-for="(check, j) in item.text.checkbox">
+								<label>
 									<input class="with-gap" v-on:click="complete(i,check.value)" v-model="item.setValue"
 										type="radio" v-bind:id="item.id+check.value" v-bind:value="check.value" />
-								<label v-bind:for="item.id+check.value">{{check.text}}</label>
+									<span>{{check.text}}</span>
+								</label>
 							</template>
 						</template>
 						<template v-else>
@@ -235,9 +259,10 @@
 						<template v-if="item.checkbox">
 							<template v-for="(check, j) in item.text.checkbox">
 								<template v-if="!check.kirishima || (check.kirishima && kirishima)">
-									<input class="with-gap" v-on:click="complete(i,check.value)" v-model="item.setValue"
+									<label><input class="with-gap" v-on:click="complete(i,check.value)"
-										type="radio" v-bind:id="item.id+check.value" v-bind:value="check.value" />
+											v-model="item.setValue" type="radio" v-bind:id="item.id+check.value"
-									<label v-bind:for="item.id+check.value">{{check.text}}</label>
+											v-bind:value="check.value" />
+										<span>{{check.text}}</span></label>
 									<span v-if="check.kirishimaText">{{check.kirishimaText}}</span>
 								</template>
 							</template>
@@ -305,20 +330,36 @@
 			<div class="collapsible-body">
 				<h5>crwdns2354:0crwdne2354:0</h5>
 				crwdns2356:0crwdne2356:0<br>
-				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="aimp" value="AIMP" />
+				<label>
-				<label for="aimp">AIMP</label>
+					<input class="with-gap" onchange="settings()" name="npp" type="radio" id="aimp" value="AIMP" />
-				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="itunes" value="ITUNES" />
+					<span>AIMP</span>
-				<label for="itunes">iTunes</label>
+				</label>
-				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="npmm" value="MEDIAMONKEY" />
+				<label>
-				<label for="npmm">MediaMonkey</label>
+					<input class="with-gap" onchange="settings()" name="npp" type="radio" id="itunes" value="ITUNES" />
-				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="winamp" value="WINAMP" />
+					<span>iTunes</span>
-				<label for="winamp">Winamp</label>
+				</label>
-				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="wmp" value="WMP" />
+				<label>
-				<label for="wmp">WMP</label>
+					<input class="with-gap" onchange="settings()" name="npp" type="radio" id="npmm"
-				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="wlm" value="WLM" />
+						value="MEDIAMONKEY" />
-				<label for="wlm">WLM</label>
+					<span>MediaMonkey</span>
-				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="cad" value="CAD" />
+				</label>
-				<label for="cad">CAD</label><br><br>
+				<label>
+					<input class="with-gap" onchange="settings()" name="npp" type="radio" id="winamp" value="WINAMP" />
+					<span>Winamp</span>
+				</label>
+				<label>
+					<input class="with-gap" onchange="settings()" name="npp" type="radio" id="wmp" value="WMP" />
+					<span>WMP</span>
+				</label>
+				<label>
+					<input class="with-gap" onchange="settings()" name="npp" type="radio" id="wlm" value="WLM" />
+					<span>WLM</span>
+				</label>
+				<label>
+					<input class="with-gap" onchange="settings()" name="npp" type="radio" id="cad" value="CAD" />
+					<span>CAD</span>
+				</label>
+				<br><br>
 				crwdns625:0crwdne625:0<i class="material-icons" style="font-size:24px;">music_note</i>crwdns626:0crwdne626:0<br>
 				<h5>crwdns627:0crwdne627:0</h5>
 				crwdns628:0crwdne628:0<br>
@@ -339,10 +380,15 @@
 				crwdns2362:0{song}crwdnd2362:0{album}crwdnd2362:0{artist}crwdne2362:0<br>
 				<button onclick="spotifySave()" class="btn waves-effect" style="width:100px;">crwdns525:0crwdne525:0</button>
 				<h5>crwdns635:0crwdne635:0</h5>
-				<input class="with-gap" onchange="spotifyFlagSave()" name="awk" type="radio" id="awk_yes" value="yes" />
+				<label>
-				<label for="awk_yes">crwdns526:0crwdne526:0</label>
+					<input class="with-gap" onchange="settings()" name="awk" type="radio" id="awk_yes" value="yes" />
-				<input class="with-gap" onchange="spotifyFlagSave()" name="awk" type="radio" id="awk_no" value="no" />
+					<span>crwdns526:0crwdne526:0</span>
-				<label for="awk_no">crwdns527:0crwdne527:0</label>
+				</label>
+				<label>
+					<input class="with-gap" onchange="settings()" name="awk" type="radio" id="awk_no" value="no" />
+					<span>crwdns527:0crwdne527:0</span>
+				</label>
+
 				<br>
 			</div>
 		</li>
@@ -439,6 +485,7 @@
 	</span><br>
 	TheDeskおよびCutls Pは<a href="https://donken.org/">被災地支援のためのマストドン研究会</a>をログイン機能提供等の形で応援しています。<br>
 	タグタイムラインを開く:<a href="index.html?mode=tag&code=被災地支援のためのマストドン研究会">#被災地支援のためのマストドン研究会</a><br>
+	<script type="text/javascript" src="../../js/common/modal.js"></script>
 	<script type="text/javascript" src="../../js/common/about.js"></script>
 	<script type="text/javascript" src="../../js/platform/end.js"></script>
 	<script type="text/javascript" src="../../js/login/logout.js"></script>