add some

frame.js

@@ -343,7 +343,7 @@ Volcanos(chat.ONAPPEND, {
 				can.onmotion.clear(can, can._option), can.onappend._option(can, {inputs: can.page.inputs(can, sub.onimport.list, html.TEXT) })
 			} can.onmotion.toggle(can, can._action, true), delete(can._status._cache), delete(can._status._cache_key)
 			var output_old = can._output; sub._target = sub._output = can._output = output = can.page.insertBefore(can, [html.OUTPUT], can._status)
-			can.page.style(can, can._output, "visibility", "hidden", "position", "fixed")
+			can.page.ClassList.add(can, can._output, "_prepare")
 			if (sub.Mode() == ice.MSG_RESULT) { can._output.innerHTML = output_old.innerHTML }
 			if (can.page.tagis(can._target, "fieldset.cmd.form.output")) {
 				can.page.ClassList.del(can, can._target, html.FORM), can.page.ClassList.del(can, can._target, html.OUTPUT)
@@ -363,10 +363,32 @@ Volcanos(chat.ONAPPEND, {
 					can.onimport.size(can, can.ConfHeight(), can.ConfWidth(), can.Conf("_auto"), can.Mode())
 					can.isCmdMode() && can.page.style(can, can._output, html.HEIGHT, sub.ConfHeight())
 					can.onexport.output(sub, msg); if (can.Conf("_output")) { can.Conf("_output")(sub, msg) }
-				} msg.Defer(), can.base.isFunc(cb) && cb(msg), can.page.style(can, can._target, "visibility", ""),
+				} msg.Defer(), can.base.isFunc(cb) && cb(msg)
 				can._output.scrollTop = output_old.scrollTop, can._output.scrollLeft = output_old.scrollLeft
-				can.page.style(can, can._output, "visibility", "", "position", ""), can.page.Remove(can, output_old)
 				can.isCmdMode() && can.user.agent.init(can, can.user.info.titles)
+				can.page.style(can, can._target, "visibility", "")
+				can.page.style(can, can._output, "visibility", "")
+				if (!can.page.ClassList.has(can, can._target, "_back") && !can.page.ClassList.has(can, can._target, "_goto")) {
+					can.page.style(can, can._output, html.LEFT, 0)
+					can.page.ClassList.del(can, can._output, "_prepare")
+					can.page.Remove(can, output_old)
+					return
+				}
+				var width = can.ConfWidth(), begin = width*3/4
+				can.page.ClassList.add(can, output_old, "_unload")
+				can.core.Timer({interval: 5, length: width/20}, function(timer, interval, index, list) {
+					if (can.page.ClassList.has(can, can._target, "_back")) {
+						can.page.style(can, can._output, html.LEFT, -width+(width-begin)/list.length*(index+1)+begin)
+						can.page.style(can, output_old, html.LEFT, (width-begin)/list.length*(index+1)+begin)
+					} else {
+						can.page.style(can, can._output, html.LEFT, width-(width-begin)/list.length*(index+1)-begin)
+						can.page.style(can, output_old, html.LEFT, -(width-begin)/list.length*(index+1)-begin)
+					}
+				}, function() {
+					can.page.style(can, can._output, html.LEFT, 0)
+					can.page.ClassList.del(can, can._output, "_prepare")
+					can.page.Remove(can, output_old)
+				})
 			}, target: output}), msg.Defer()
 		})
 	},
@@ -1007,6 +1029,7 @@ Volcanos(chat.ONLAYOUT, {
 	figure: function(event, can, target, right, min, cb) { if (!event || !event.target) { return {} } target = target||can._fields||can._target
 		var rect = event.target == document.body? {left: can.page.width()/2, top: can.page.height()/2, right: can.page.width()/2, bottom: can.page.height()/2}: (event.currentTarget||event.target).getBoundingClientRect()
 		var layout = right? {left: rect.right, top: rect.top}: {left: rect.left, top: rect.bottom}
+		can.page.tagis(target, "div.input") && can.user.isMobile && (layout.top = 40)
 		can.getActionSize(function(left, top, width, height) {
 			left = left||0, top = top||0, height = can.base.Max(height, can.page.height()-top)-html.ACTION_HEIGHT-(can.isCmdMode()? 0: 20)
 			if (layout.top+target.offsetHeight > top+height) {

index.css

@@ -54,7 +54,7 @@ body {
 	--panel-output-bg-color:var(--panel-bg-color); --panel-output-fg-color:var(--panel-fg-color);
 	--panel-hover-bg-color:var(--hover-bg-color); --panel-hover-fg-color:var(--hover-fg-color);
 	--action-output-bg-color:var(--output-bg-color);
-
+	
 	--box-shadow:var(--shadow-color) 0px 0px 10px; --notice-box-shadow:var(--notice-bg-color) 0px 0px 10px;
 	--plugin-box-shadow:var(--box-shadow); --legend-box-shadow:var(--box-shadow); --input-box-shadow:var(--box-shadow);
 	--th-box-shadow:var(--box-shadow); --keyword-box-shadow:var(--box-shadow);
@@ -64,15 +64,15 @@ body {
 	--item-notice:var(--box-notice);
 	--plugin-border:var(--box-border); --input-border:var(--box-border); --status-border:var(--box-border);
 	--plugin-radius:var(--plugin-padding); --button-radius:var(--input-padding);
-
+	
 	--plugin-padding:10px; --plugin-margin:var(--plugin-padding);
 	--legend-padding:20px; --legend-margin:20px; --title-margin:var(--legend-padding);
 	--button-padding:var(--plugin-padding); --button-margin:var(--button-padding);
 	--input-padding:5px; --input-margin:var(--input-padding);
 	--table-padding:var(--button-padding);
-
+	
 	--header-height:48px; --footer-height:var(--action-height);
-   	--action-height:32px; --status-height:32px; --textarea-height:96px;
+	--action-height:32px; --status-height:32px; --textarea-height:96px;
 	--input-width:140px; --button-width:60px; --form-width:360px; --url-input-width:480px;
 	--card-width:300px; --card-height:160px; --qrcode-width:360px; --qrcode-height:363px;
 	--story-height:var(--float-height); --iframe-height:420px;
@@ -82,7 +82,7 @@ body {
 	--action-button:10; --table-button:5; --card-button:5;
 	--order-show-limit:30; --order-show-delay:150;
 	--river-margin:80px; --action-margin:200px;
-
+	
 	--legend-font-family:var(--body-font-family); --status-font-family:var(--body-font-family);
 	--input-font-family:var(--code-font-family); --table-font-family:var(--code-font-family);
 	--svg-font-family:var(--code-font-family);
@@ -153,6 +153,19 @@ table.content.detail tr.action input.icons { display:none; }
 table.content.detail tr.action input { color:var(--notice-bg-color); }
 table.content.detail tr.action i { display:unset; color:var(--notice-bg-color); }
 table.content.detail tr.action i.bi-trash { color:var(--danger-bg-color); }
+fieldset.plugin.cmd.output>div.output {
+	top:0;
+}
+fieldset.plugin.cmd>div.output {
+	position:absolute;
+	top:32px;
+}
+div.output._prepare {
+	position:absolute;
+}
+div.output._unload {
+	position:absolute;
+}
 body.mobile table.content.checkbox th:first-child { padding:var(--table-padding) var(--input-padding); }
 body.mobile table.content.checkbox td:first-child { padding:var(--table-padding) var(--input-padding); }
 body.mobile table.content.action th:last-child { padding:var(--table-padding) var(--input-padding); }
@@ -1055,9 +1068,9 @@ div.output>fieldset.iframe.story>form.option>div.item.hash input { width:var(--u
 div.scrollbar {
 	border-radius:var(--button-radius);
 	background-color:var(--hover-bg-color); color:silver;
-   	font-size:8px !important; line-height:10px;
+	font-size:8px !important; line-height:10px;
 	display:flex; align-items:center; justify-content:center;
-   	position:absolute; visibility:hidden;
+	position:absolute; visibility:hidden;
 }
 div.scrollbar.vertical { writing-mode:tb; width:10px; right:0; top:0; transition:width 3s; cursor:pointer; }
 div.scrollbar.vertical:hover { width:var(--code-line-height); transition:width .3s; font-size:24px !important; }

lib/user.js

@@ -263,8 +263,9 @@ Volcanos("user", {
 			var onclick = target.onclick; target.onclick = function(event) { can.onengine.signal(can, "onevent", can.request(event, {_type: target.name})), onclick && onclick(event) }
 		})
 		title && can.page.Select(can, action._target, "input[name=submit]", function(target) { target.value = can.user.trans(can, title) })
-		if (event && event.target) { can.onlayout.figure(event, can, ui._target)
+		if (event && event.target) {
-			can.user.isMobile && can.page.style(can, ui._target, html.LEFT, (can.page.width()-ui._target.offsetWidth)/2, html.TOP, 60)
+			can.onlayout.figure(event, can, ui._target)
+			can.user.isMobile && can.page.style(can, ui._target, html.LEFT, (can.page.width()-ui._target.offsetWidth)/2, html.TOP, 40)
 			// can.user.isMobile && can.page.style(can, ui._target, html.LEFT, (can.page.width()-ui._target.offsetWidth)/2, html.TOP, can.getHeaderHeight(can))
 		} else {
 			can.getActionSize(function(left, top, height) { can.page.style(can, ui._target, html.LEFT, left||0, html.TOP, (height/4||0)) })