Ver Fonte

句子工具菜单

visuddhinanda há 5 anos atrás
pai
commit
7521e964f0
6 ficheiros alterados com 361 adições e 262 exclusões
  1. 1 1
      .vscode/launch.json
  2. 1 1
      app/article/index.php
  3. 65 84
      app/pcdl/css/basic_style.css
  4. 7 0
      app/term/edit.svg
  5. 77 47
      app/term/note.js
  6. 210 129
      app/term/term.css

+ 1 - 1
.vscode/launch.json

@@ -8,7 +8,7 @@
       "type": "chrome",
       "request": "launch",
       "name": "Launch Chrome against localhost",
-      "url": "http://localhost:80",
+      "url": "http://localhost:80/mint/app",
       "webRoot": "${workspaceFolder}"
     },
     {

+ 1 - 1
app/article/index.php

@@ -264,7 +264,7 @@ require_once "../pcdl/html_head.php";
 		</div>
 		<div class="fun_frame">
 			<div style="display:flex;justify-content: space-between;">
-				<div class="title"><?php echo $_local->gui->channels; ?></div>
+				<div class="title"><?php echo "Contributor" ?></div>
 				<div class="click_dropdown_div">
 					<div class="click_dropdown_button"><?php echo $_local->gui->more; ?></div>
 					<div class="click_dropdown_content">

+ 65 - 84
app/pcdl/css/basic_style.css

@@ -1,21 +1,21 @@
 body {
-  font-family: "Noto Sans", "Noto Sans SC", "Noto Sans TC", Arial, Verdana;
-  font-style: normal;
-  color: var(--main-color);
-  font-weight: 400;
-  font-size: 13px;
-  overflow-x: hidden;
-  margin: 0;
+	font-family: "Noto Sans", "Noto Sans SC", "Noto Sans TC", Arial, Verdana;
+	font-style: normal;
+	color: var(--main-color);
+	font-weight: 400;
+	font-size: 13px;
+	overflow-x: hidden;
+	margin: 0;
 }
 div {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
 }
 hr {
-  margin: 14px 0;
-  border: 1px solid var(--tool-line-color);
-  transform: scaleY(0.4);
+	margin: 14px 0;
+	border: 1px solid var(--tool-line-color);
+	transform: scaleY(0.4);
 }
 
 input,
@@ -28,112 +28,93 @@ hr,
 h1,
 h2,
 h3 {
-  font-family: inherit;
-  font-size: inherit;
-  font-style: inherit;
-  font-weight: inherit;
-  color: inherit;
-  background-color: inherit;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
+	font-family: inherit;
+	font-size: inherit;
+	font-style: inherit;
+	font-weight: inherit;
+	color: inherit;
+	background-color: inherit;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
 }
 
 input[type="text"],
 input[type="input"],
 textarea {
-  font-weight: 300;
-  width: 100%;
-  border: 1px solid var(--btn-border-line-color);
-  border-radius: 4px;
-  padding: 0.1em 0.3em;
-  font-size: 100%;
-  min-height: 1.2em;
-  margin: 2px 0;
+	font-weight: 300;
+	width: 100%;
+	border: 1px solid var(--btn-border-line-color);
+	border-radius: 4px;
+	padding: 0.1em 0.3em;
+	font-size: 100%;
+	min-height: 1.2em;
+	margin: 2px 0;
 }
 select {
-  font-weight: 400;
-  border: 1px solid #aaaaaa;
-  padding: 2px 4px;
-  min-height: 2em;
-  border-radius: 4px;
-  cursor: pointer;
-  margin: 3px 0;
+	font-weight: 400;
+	border: 1px solid #aaaaaa;
+	padding: 2px 4px;
+	min-height: 2em;
+	border-radius: 4px;
+	cursor: pointer;
+	margin: 3px 0;
 }
 
 ul,
 li {
-  white-space: normal;
-  color: inherit;
-  margin: 0px;
-  padding: 0px;
-  word-break: keep-all;
-  text-overflow: ellipsis;
-  list-style-type: none;
+	white-space: normal;
+	color: inherit;
+	margin: 0px;
+	padding: 0px;
+	word-break: keep-all;
+	text-overflow: ellipsis;
+	list-style-type: none;
 }
 a,
 a:link,
 a:visited {
-  color: var(--link-color);
-  text-decoration: none;
-  cursor: pointer;
+	color: var(--link-color);
+	text-decoration: none;
+	cursor: pointer;
 }
 
 a:focus {
-  outline: 1px dotted;
+	outline: 1px dotted;
 }
 
 a:hover,
 a:active {
-  color: var(--tool-link-hover-color);
-  outline: none;
+	color: var(--tool-link-hover-color);
+	outline: none;
 }
 .footer_navbar {
-  display: flex;
-  flex-wrap: wrap;
-  width: 100%;
+	display: flex;
+	flex-wrap: wrap;
+	width: 100%;
 }
 
 .icon {
-  height: 1.4em;
-  width: 1.4em;
-  fill: #555;
-  transition: all 0.2s ease;
+	height: 1.4em;
+	width: 1.4em;
+	fill: #555;
+	transition: all 0.2s ease;
 }
 
 .small_icon {
-  height: 1em;
-  width: 1em;
-  fill: #555;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
+	height: 1em;
+	width: 1em;
+	fill: #555;
+	-webkit-transition-duration: 0.2s;
+	transition-duration: 0.2s;
 }
 
 .broder-1 {
-  border: 1px solid var(--border-line-color);
+	border: 1px solid var(--border-line-color);
 }
 .broder-2 {
-  border: 2px solid var(--border-line-color);
+	border: 2px solid var(--border-line-color);
 }
 .broder-r {
-  border-radius: 5px;
-}
-
-.tran:hover .edit_button {
-  display: inline-block;
-}
-.edit_button {
-  position: absolute;
-  display: none;
-  width: auto;
-  min-width: 24px;
-  height: auto;
-  min-height: 24px;
-  cursor: pointer;
-  background: url(edit.svg);
-  background-repeat: no-repeat;
-  background-size: contain;
-  margin: 0 6px;
-  margin-left: -24px;
-  color: var(--tool-color);
+	border-radius: 5px;
 }

+ 7 - 0
app/term/edit.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="14px" height="14px" viewBox="0 0 24 24" style="fill: #6baaff;" xml:space="preserve">
+		<path
+			d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a.996.996 0 0 0 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
+</svg>

+ 77 - 47
app/term/note.js

@@ -60,10 +60,11 @@ function note_sent_edit_dlg_init() {
 	});
 }
 function note_init(input) {
-	let output = "<div>";
 	let newString = input.replace(/\{\{/g, '<note info="');
 	newString = newString.replace(/\}\}/g, '"></note>');
-	output = marked(newString);
+
+	let output = "<div>";
+	output += marked(newString);
 	output += "</div>";
 	return output;
 }
@@ -402,7 +403,8 @@ ref
 function note_json_html(in_json) {
 	let output = "";
 	output += '<div class="note_tool_bar" style=" position: relative;">';
-	output += '<div class="case_dropdown" style="position: absolute; right: 0;width:1.5em;">';
+	output +=
+		'<div class="case_dropdown note_tool_context" style="position: absolute; right: 0;width:1.5em;text-align: right;">';
 	output += "<svg class='icon' >";
 	output += "<use xlink:href='../studio/svg/icon.svg#ic_more'></use>";
 	output += "</svg>";
@@ -439,25 +441,11 @@ function note_json_html(in_json) {
 	output += "</div>";
 	output += "</div>";
 	output += " </div>";
+
 	output += "<div class='palitext'>" + in_json.palitext + "</div>";
-	for (const iterator of in_json.translation) {
-		output += "<div class='tran' lang='" + iterator.lang + "'";
 
-		output += ">";
-		output += "<span class='edit_button' ";
-		output +=
-			" onclick=\"note_edit_sentence('" +
-			in_json.book +
-			"' ,'" +
-			in_json.para +
-			"' ,'" +
-			in_json.begin +
-			"' ,'" +
-			in_json.end +
-			"' ,'" +
-			iterator.channal +
-			"')\"";
-		output += "></span>";
+	for (const iterator of in_json.translation) {
+		output += "<div class='tran' lang='" + iterator.lang + "'>";
 
 		output +=
 			"<div class='text' id='tran_text_" +
@@ -472,8 +460,6 @@ function note_json_html(in_json) {
 			iterator.channal +
 			"'>";
 		if (iterator.text == "") {
-			//let channal = find_channal(iterator.channal);
-			output += "<span style='color:var(--border-line-color);'></span>";
 			output +=
 				"<span style='color:var(--border-line-color);'>" +
 				iterator.channalinfo.name +
@@ -486,7 +472,31 @@ function note_json_html(in_json) {
 			output += note_init(term_std_str_to_tran(iterator.text, iterator.channal, iterator.editor, iterator.lang));
 		}
 		output += "</div>";
-
+		//句子工具栏
+		output += "<div class='tran_text_tool_bar'>";
+		output += "<span class = 'tip_buttom' ";
+		output +=
+			" onclick=\"note_edit_sentence('" +
+			in_json.book +
+			"' ,'" +
+			in_json.para +
+			"' ,'" +
+			in_json.begin +
+			"' ,'" +
+			in_json.end +
+			"' ,'" +
+			iterator.channal +
+			"')\"";
+		output += ">Edit</span>";
+		output += "<span class = 'tip_buttom'>Like</span>";
+		output += "<span class = 'tip_buttom'>Comment</span>";
+		output += "<span class = 'tip_buttom'>Share</span>";
+		output += "<span class = 'tip_buttom'>Copy</span>";
+		output += "<span class = 'tip_buttom'>Digest</span>";
+		output += "<span class = 'tip_buttom'>History</span>";
+		output += "<span class = 'tip_buttom'>Expand</span>";
+		output += "</div>";
+		//句子工具栏结束
 		output += "</div>";
 	}
 
@@ -572,30 +582,50 @@ function note_sent_save() {
 				alert("error" + result.message);
 			} else {
 				ntf_show("success");
-				$(
-					"#tran_text_" +
-						result.book +
-						"_" +
-						result.para +
-						"_" +
-						result.begin +
-						"_" +
-						result.end +
-						"_" +
-						result.channal
-				).html(marked(term_std_str_to_tran(result.text, result.channal, result.editor, result.lang)));
-				term_updata_translation();
-				for (const iterator of _arrData) {
-					if (
-						iterator.book == result.book &&
-						iterator.para == result.para &&
-						iterator.begin == result.begin &&
-						iterator.end == result.end
-					) {
-						for (const tran of iterator.translation) {
-							if (tran.channal == result.channal) {
-								tran.text = result.text;
-								break;
+				if (result.text == "") {
+					let channel_info = "Empty";
+					let thisChannel = find_channal(result.channal);
+					if (thisChannel) {
+						channel_info = thisChannel.name + "-" + thisChannel.nickname;
+					}
+					$(
+						"#tran_text_" +
+							result.book +
+							"_" +
+							result.para +
+							"_" +
+							result.begin +
+							"_" +
+							result.end +
+							"_" +
+							result.channal
+					).html("<span style='color:var(--border-line-color);'>" + channel_info + "</span>");
+				} else {
+					$(
+						"#tran_text_" +
+							result.book +
+							"_" +
+							result.para +
+							"_" +
+							result.begin +
+							"_" +
+							result.end +
+							"_" +
+							result.channal
+					).html(marked(term_std_str_to_tran(result.text, result.channal, result.editor, result.lang)));
+					term_updata_translation();
+					for (const iterator of _arrData) {
+						if (
+							iterator.book == result.book &&
+							iterator.para == result.para &&
+							iterator.begin == result.begin &&
+							iterator.end == result.end
+						) {
+							for (const tran of iterator.translation) {
+								if (tran.channal == result.channal) {
+									tran.text = result.text;
+									break;
+								}
 							}
 						}
 					}

+ 210 - 129
app/term/term.css

@@ -1,288 +1,369 @@
 .term_link:hover .guide_contence {
-  display: inline-block;
+	display: inline-block;
 }
 
 .term_meaning {
-  font-weight: 700;
+	font-weight: 700;
 }
 .term_author {
-  font-size: 80%;
-  color: gray;
+	font-size: 80%;
+	color: gray;
 }
 .term_tag {
-  font-size: 80%;
-  font-weight: 500;
-  margin: 0 8px;
+	font-size: 80%;
+	font-weight: 500;
+	margin: 0 8px;
 }
 .term_link {
-  cursor: pointer;
-  position: relative;
+	cursor: pointer;
+	position: relative;
 }
 
 .term_link,
 .term_link_new {
-  color: blue;
-  padding-left: 2px;
-  padding-right: 2px;
+	color: blue;
+	padding-left: 2px;
+	padding-right: 2px;
 }
 .term_link_new {
-  color: red;
+	color: red;
 }
 
 note:hover chapter {
-  display: inline;
+	display: inline;
 }
 .ref > chapter:first-child {
-  display: inline;
+	display: inline;
 }
 chapter {
-  display: none;
-  color: var(--box-bg-color1);
-  text-decoration: none;
-  cursor: pointer;
+	display: none;
+	color: var(--box-bg-color1);
+	text-decoration: none;
+	cursor: pointer;
 }
 chapter:hover {
-  color: var(--link-color);
-  text-decoration: underline;
+	color: var(--link-color);
+	text-decoration: underline;
 }
 para {
-  background-color: var(--drop-bg-color);
-  padding: 2px 8px;
-  text-decoration: none;
-  cursor: pointer;
-  color: var(--btn-border-color);
-  border-radius: 5px;
+	background-color: var(--drop-bg-color);
+	padding: 2px 8px;
+	text-decoration: none;
+	cursor: pointer;
+	color: var(--btn-border-color);
+	border-radius: 5px;
 }
 para:hover {
-  text-decoration: underline;
+	text-decoration: underline;
 }
 
-commentary {
-  margin-left: 1.5em;
-  display: block;
-  border-left: 3px solid gray;
-  padding-left: 5px;
+commentary,
+com,
+nt {
+	margin-left: 1.5em;
+	display: block;
+	border-left: 3px solid gray;
+	padding-left: 5px;
 }
 
 note > .tran {
-  color: #5c5c5c;
-  padding-left: 1em;
-  padding: 3px;
+	color: #5c5c5c;
+	padding-left: 1em;
+	padding: 0;
+	position: relative;
+	margin-top: -0.5em;
+}
+note > .tran > .text {
+	margin-bottom: 2em;
+}
+note > .tran > .tran_text_tool_bar {
+	padding: 0;
+	position: absolute;
+	display: none;
+	color: var(--border-line-color);
+	margin-left: 0;
+	z-index: 40;
+	width: auto;
+	font-size: 14px;
+	height: 28px;
+	line-height: 28px;
+	margin-top: -2em;
+	background-color: var(--box-bg-color1);
+	border-radius: 5px;
+}
+note > .tran:lang(my) > .tran_text_tool_bar {
+	margin-top: -2.5em;
+}
+note > .tran > .tran_text_tool_bar::after {
+	content: " ";
+	position: absolute;
+	left: 0;
+	bottom: 100%;
+	margin-left: 20px;
+	border-width: 5px;
+	border-style: solid;
+	border-color: transparent transparent var(--box-bg-color1) transparent;
 }
+
+.tran:hover .tran_text_tool_bar {
+	display: block;
+}
+.tip_buttom {
+	border-right: 2px solid var(--border-line-color);
+	padding: 5px 8px;
+	cursor: pointer;
+}
+.tip_buttom:hover {
+	background-color: var(--btn-border-color);
+}
+.tran:hover .edit_button {
+	display: inline-block;
+}
+.edit_button {
+	display: inline-block;
+	width: auto;
+	min-width: 24px;
+	height: auto;
+	min-height: 24px;
+	cursor: pointer;
+	fill: var(--tool-color);
+	background: url(edit.svg);
+	background-repeat: no-repeat;
+	background-size: contain;
+	color: var(--tool-color);
+	margin-top: -2em;
+}
+
 note > .palitext,
 .palitext {
-  font-family: Noto serif;
-  line-height: 1.5em;
-  color: #9f3a01;
-  font-weight: 500;
+	font-family: Noto serif;
+	line-height: 1.5em;
+	color: #9f3a01;
+	font-weight: 500;
+	margin-bottom: 10px;
 }
 note > .palitext > note {
-  display: inline;
-  color: blue;
-  background-color: unset;
-  padding: unset;
-  margin-bottom: unset;
-  border-radius: unset;
+	display: inline;
+	color: blue;
+	background-color: unset;
+	padding: unset;
+	margin-bottom: unset;
+	border-radius: unset;
 }
 
 .term_word_head_pali {
-  text-transform: capitalize;
-  font-size: 200%;
-  margin: 0.5em 0;
+	text-transform: capitalize;
+	font-size: 200%;
+	margin: 0.5em 0;
 }
 .term_word_head {
-  border-bottom: 1px solid #cecece;
-  padding: 5px 0;
+	border-bottom: 1px solid #cecece;
+	padding: 5px 0;
 }
 .term_block {
-  border-bottom: 1px solid #cecece;
-  padding: 5px 0;
+	border-bottom: 1px solid #cecece;
+	padding: 5px 0;
 }
 .term_word_head_authors a {
-  color: blue;
-  margin: 0 3px;
+	color: blue;
+	margin: 0 3px;
 }
 .term_word_head_authors a:hover {
-  text-decoration: underline;
-  cursor: pointer;
+	text-decoration: underline;
+	cursor: pointer;
 }
 
 note .ref {
-  text-align: right;
-  padding: 5px;
-  font-size: 75%;
-  margin-top: 8px;
+	text-align: right;
+	padding: 5px;
+	font-size: 75%;
+	margin-top: -2.5em;
 }
 
 .tran {
-  line-height: 1.5em;
+	line-height: 1.5em;
 }
 
 .tran ul {
-  list-style-type: circle;
-  margin-left: 2em;
+	list-style-type: circle;
+	margin-left: 2em;
 }
 
 .tran li {
-  list-style: inherit;
+	list-style: inherit;
 }
 
 .tran ol {
-  list-style-type: decimal;
-  margin: 0;
-  padding: 0;
-  margin-left: 2em;
+	list-style-type: decimal;
+	margin: 0;
+	padding: 0;
+	margin-left: 2em;
 }
 
 .tran:lang(en) > ol {
-  list-style-type: decimal;
+	list-style-type: decimal;
 }
 
 /*中文*/
 .tran:lang(zh) > ol {
-  list-style-type: cjk-ideographic;
-  margin-left: 2.5em;
+	list-style-type: cjk-ideographic;
+	margin-left: 2.5em;
 }
 
 /*简体中文*/
 .tran:lang(zh-cn) > ol {
-  list-style-type: trad-chinese-formal;
-  margin-left: 2.5em;
+	list-style-type: trad-chinese-formal;
+	margin-left: 2.5em;
 }
 .tran:lang(zh-hans) > ol {
-  list-style-type: trad-chinese-formal;
-  margin-left: 2.5em;
+	list-style-type: trad-chinese-formal;
+	margin-left: 2.5em;
 }
 /*繁体中文*/
 .tran:lang(zh-tw) > ol {
-  list-style-type: trad-chinese-formal;
-  margin-left: 2.5em;
+	list-style-type: trad-chinese-formal;
+	margin-left: 2.5em;
 }
 .tran:lang(zh-hant) > ol {
-  list-style-type: trad-chinese-formal;
-  margin-left: 2.5em;
+	list-style-type: trad-chinese-formal;
+	margin-left: 2.5em;
 }
 
 /*japanese*/
 .tran:lang(jp) > ol {
-  list-style-type: hiragana;
-  margin-left: 2.5em;
+	list-style-type: hiragana;
+	margin-left: 2.5em;
 }
 /*kora*/
 .tran:lang(ko) > ol {
-  list-style-type: korean-hangul-formal;
-  margin-left: 2.5em;
+	list-style-type: korean-hangul-formal;
+	margin-left: 2.5em;
 }
 /*thai*/
 .tran:lang(ti) > ol {
-  list-style-type: thai;
-  margin-left: 2em;
+	list-style-type: thai;
+	margin-left: 2em;
 }
 /*myanmar*/
 .tran:lang(my) > ol {
-  list-style-type: myanmar;
-  margin-left: 2em;
+	list-style-type: myanmar;
+	margin-left: 2em;
 }
 
 /*myanmar*/
 .tran:lang(my) {
-  font-size: 120%;
-  line-height: 2em;
+	font-size: 120%;
+	line-height: 2em;
 }
 
 .tran_div {
-  margin-bottom: 1em;
-  padding-bottom: 1em;
-  padding-top: 0.5em;
-  border-bottom: 1px solid var(--border-line-color);
+	margin-bottom: 1em;
+	padding-bottom: 1em;
+	padding-top: 0.5em;
+	border-bottom: 1px solid var(--border-line-color);
 }
 
 .tran_div:last-child {
-  border-bottom: none;
+	border-bottom: none;
 }
 
 .progress_bar_done {
-  stroke-width: 0;
-  fill: royalblue;
+	stroke-width: 0;
+	fill: royalblue;
 }
 
 .progress_bar_undone {
-  stroke-width: 0;
-  fill: #c0c0c052;
+	stroke-width: 0;
+	fill: #c0c0c052;
 }
 
 .progress_bar_bg {
-  stroke-width: 0;
-  fill: #ffffff;
+	stroke-width: 0;
+	fill: #ffffff;
 }
 
 .progress_bar_percent {
-  stroke-width: 0;
-  fill: limegreen;
+	stroke-width: 0;
+	fill: limegreen;
 }
 
 r {
-  text-align: right;
-  display: block;
+	text-align: right;
+	display: block;
 }
 
 note {
-  padding: 0.5em 0.8em;
-  margin-bottom: 0.4em;
-  border-radius: 5px;
-  line-height: 1.3em;
-  display: block;
-  background-color: #80808014;
+	padding: 0.5em 1em;
+	margin-bottom: 0.4em;
+	border-radius: 5px;
+	line-height: 1.3em;
+	display: block;
+	background-color: #80808014;
 }
 
 .bg_color_1 {
-  background-color: #ebebeb66;
+	background-color: #ebebeb66;
 }
 .bg_color_2 {
-  background: linear-gradient(to right, #6afdb033, #ebebeb66);
+	background: linear-gradient(to right, #6afdb033, #ebebeb66);
 }
 .bg_color_3 {
-  background: linear-gradient(to right, #6a95fd26, #ebebeb66);
+	background: linear-gradient(to right, #6a95fd26, #ebebeb66);
 }
 .bg_color_4 {
-  background: linear-gradient(to right, #f9e7911c, #ebebeb66);
+	background: linear-gradient(to right, #f9e7911c, #ebebeb66);
 }
 .bg_color_5 {
-  background: linear-gradient(to right, #fe99b91c, #ebebeb66);
+	background: linear-gradient(to right, #fe99b91c, #ebebeb66);
 }
 
 pre {
-  white-space: pre-line;
-  font-family: auto;
-  border-left: 3px solid var(--border-shadow);
-  margin-left: 1em;
-  padding-left: 0.5em;
+	white-space: pre-line;
+	font-family: auto;
+	border-left: 3px solid var(--border-shadow);
+	margin-left: 1em;
+	padding-left: 0.5em;
 }
 
 .note_tool_bar {
-  position: relative;
-  display: none;
+	position: relative;
+	display: none;
+	z-index: 50;
 }
 
 note:hover .note_tool_bar {
-  display: block;
+	display: block;
 }
 
 .sent_menu {
-  right: 0;
+	right: 0;
 }
 .para_menu {
-  left: 0;
+	left: 0;
 }
 
 .ui-widget input,
 .ui-widget select,
 .ui-widget textarea,
 .ui-widget button {
-  font-family: unset;
-  font-size: 1.1em;
+	font-family: unset;
+	font-size: 1.1em;
 }
 
 .tran p {
-  margin: 0;
+	margin: 0;
+}
+
+.note_tool_context {
+	position: absolute;
+	right: 0;
+	width: 1.5em;
+	text-align: right;
+}
+
+.note_tool_context .icon {
+	fill: var(--link-color);
+}
+.note_tool_context:hover .icon {
+	fill: (--link-hover-color);
 }