diff --git a/src/macosx/controls.go b/src/macosx/controls.go deleted file mode 100644 index 53f1db21..00000000 --- a/src/macosx/controls.go +++ /dev/null @@ -1,7 +0,0 @@ -package macosx - -import ice "shylinux.com/x/icebergs" - -const CONTROLS = "controls" - -func init() { Index.MergeCommands(ice.Commands{CONTROLS: {Actions: CmdHashAction()}}) } diff --git a/src/macosx/controls.js b/src/macosx/controls.js deleted file mode 100644 index cda17037..00000000 --- a/src/macosx/controls.js +++ /dev/null @@ -1,3 +0,0 @@ -Volcanos(chat.ONIMPORT, {_init: function(can, msg) { - msg.Echo("hello world").Dump(can) -}}) \ No newline at end of file diff --git a/src/macosx/desktop.css b/src/macosx/desktop.css index 18227381..1ecd49d1 100644 --- a/src/macosx/desktop.css +++ b/src/macosx/desktop.css @@ -1,43 +1,75 @@ -fieldset.macosx.desktop { background-size:cover; background-position:center; color:#e8eaed; } -body.dark fieldset.macosx.desktop>div.output { background-color:unset; } +fieldset.macosx.desktop { background-size:cover; background-position:center; } +fieldset.macosx.desktop>div.output>div.item { text-align:center; width:120px; float:left; overflow:hidden; } +fieldset.macosx.desktop>div.output>div.item img { width:80px; } +fieldset.macosx.desktop>div.output>fieldset.macosx { background-color:transparent; } fieldset.macosx.desktop>div.output>fieldset.macosx>div.output { background-color:transparent; } -fieldset.macosx.desktop>div.output>fieldset.macosx.menu { background-color:#08234ad1; color:#e8eaed; line-height:25px; height:25px; width:100%; position:absolute; top:0; } -fieldset.macosx.desktop>div.output>fieldset.macosx.controls { background-color:#08234ad1; height:40%; width:240px; position:absolute; top:20px; right:0; } -fieldset.macosx.desktop>div.output>fieldset.macosx.notifications { background-color:#08234ad1; height:80%; width:240px; position:absolute; top:10%; right:0; } -fieldset.macosx.desktop>div.output>fieldset.macosx.dock { position:absolute; bottom:10px; left:300px; transition:margin-left 0.3s; } +fieldset.macosx.desktop>div.output>fieldset.macosx.menu { line-height:25px; height:25px; width:100%; position:absolute; top:0; } +fieldset.macosx.desktop>div.output>fieldset.macosx.controls { height:40%; width:240px; position:absolute; top:20px; right:0; } +fieldset.macosx.desktop>div.output>fieldset.macosx.notifications { height:80%; width:240px; position:absolute; top:10%; right:0; } +fieldset.macosx.desktop>div.output>fieldset.macosx.dock { border:#ffffff3d solid 1px; border-radius:20px; position:absolute; bottom:10px; left:300px; z-index:11; transition:margin-left 0.3s; } fieldset.macosx.desktop>div.output>fieldset.macosx.dock:hover { margin-left:-40px; transition:margin-left 0.3s; } fieldset.macosx.desktop>div.output>div.desktop:not(.select) { display:none; } fieldset.macosx.desktop>div.output>div.desktop>fieldset { position:absolute; } +fieldset.macosx.desktop>div.output>div.desktop>fieldset>div.item.button { border-radius:20px; height:20px; width:20px; scale:0.7; position:absolute; top:15px; right:10px; } fieldset.macosx.desktop>div.output>div.desktop.scale>fieldset { scale:0.6; } -// fieldset.macosx.desktop>div.output>div.desktop fieldset { background-color:#333434; border:#ffffff3d solid 1px; border-top:#ffffff52 ridge 2px; border-radius:10px; } -fieldset.macosx.desktop>div.output>div.desktop fieldset { background-color:#333434; border-radius:10px; } +fieldset.macosx.desktop>div.output>div.desktop fieldset { border-radius:10px; } fieldset.macosx.desktop>div.output>div.desktop fieldset>legend { background-color:unset; margin:10px 0; } fieldset.macosx.desktop>div.output>div.desktop fieldset>form.option>* { margin:10px 0; background-color:unset; } fieldset.macosx.desktop>div.output>div.desktop fieldset>div.action>* { margin:10px 0; } -fieldset.macosx.desktop>div.output>div.desktop>fieldset>div.output { background-color:#1a1d1d; } -fieldset.macosx.desktop>div.output>div.desktop fieldset>div.status { background-color:transparent; border-top:#3e4040 solid 1px; } -fieldset.macosx.desktop>div.output>div.desktop fieldset>div.status>* { margin:10px 0; } -fieldset.macosx.desktop>div.output>div.desktop fieldset input { background-color:#333434; border:#404141 solid 1px; border-radius:5px; box-shadow:unset; } -fieldset.macosx.desktop>div.output>div.desktop fieldset input[type=button] { background-color:#5e5f5f; } +fieldset.macosx.desktop>div.output>div.desktop fieldset>div.status { background-color:transparent; } +fieldset.macosx.desktop>div.output>div.desktop fieldset fieldset>legend { margin:0; } +fieldset.macosx.desktop>div.output>div.desktop fieldset fieldset>form.option>* { margin:0; background-color:unset; } +fieldset.macosx.desktop>div.output>div.desktop fieldset fieldset>div.action>* { margin:0; } +fieldset.macosx.desktop>div.output>div.desktop fieldset input { border-radius:5px; box-shadow:unset; } fieldset.macosx.desktop>div.output>div.desktop fieldset table.content th { background-color:unset; } fieldset.macosx.desktop>div.output>div.desktop fieldset table.content.action td:last-child { background-color:unset; } -fieldset.macosx.desktop>div.output>div.desktop fieldset table.content tr:nth-child(odd) { background-color:#1a1d1e; } -fieldset.macosx.desktop>div.output>div.desktop fieldset table.content tr:nth-child(even) { background-color:#282B2F; } -fieldset.macosx.desktop>div.output>div.desktop fieldset>div.output.card>div.item { border:#3e4040 solid 1px; } -fieldset.macosx.desktop>div.output>div.desktop fieldset>div.output.card>div.item>div.title { border-bottom:#3e4040 solid 1px; } - +fieldset.macosx.menu>div.output img { margin-bottom:-8px; } fieldset.macosx.menu>div.output>div.item { padding:0 5px; float:right; cursor:pointer; } +fieldset.macosx.menu>div.output>div.item img { height:25px; } fieldset.macosx.menu>div.output>div.icon { padding:0 5px; float:right; cursor:pointer; } -fieldset.macosx.dock>div.output { background-color:#02142196; border:#ffffff3d solid 1px; border-radius:20px; height:80px; min-width:200px; overflow:visible; display:flex; z-index:11; } +fieldset.macosx.dock>div.output { height:80px; min-width:200px; overflow:visible; display:flex; } fieldset.macosx.dock>div.output>div.item { text-align:center; align-self:baseline; transition:margin-top 0.3s; } fieldset.macosx.dock>div.output>div.item:hover { background-color:unset; margin-top:-80px; transition:margin-top 0.3s; } fieldset.macosx.dock>div.output>div.item img { width:80px; transition:width 0.3s; } fieldset.macosx.dock>div.output>div.item img:hover { width:160px; transition:width 0.3s; } - -div.carte.macosx.float { background:#29323beb; color:#e8eaed; font-size:14px; padding:10px; border:#ffffff5e solid 1px; border-radius:8px; } +div.carte.macosx.float { font-size:14px; padding:10px; border:#ffffff5e solid 1px; border-radius:8px; } div.carte.macosx.float div.item { background:transparent; } div.carte.macosx.float hr { border-bottom:gray solid 1px; } +div.carte.macosx.float { background:#e1e5ea; } +fieldset.macosx.desktop fieldset>form.option>div.item.icons>span.icon { margin-left:5px; } -fieldset.macosx.desktop input { color:#e8eaed; } -fieldset.macosx.desktop>div.output>div.item { text-align:center; width:120px; float:left; overflow:hidden; } -fieldset.macosx.desktop>div.output>div.item img { width:80px; } +body.dark div.carte.macosx.float { background:#29323beb; color:#e8eaed; } +fieldset.macosx.desktop>div.output>fieldset.macosx.dock { background-color:#e9f1f594; } +fieldset.macosx.desktop>div.output>fieldset.macosx.menu { background-color:#08234ad1; color:#e8eaed; } +fieldset.macosx.desktop>div.output>fieldset.macosx.controls { background-color:#08234ad1; } +fieldset.macosx.desktop>div.output>fieldset.macosx.notifications { background-color:#08234ad1; } +fieldset.macosx.desktop>div.output>div.desktop fieldset { background-color:#dee1e6; } +fieldset.macosx.desktop>div.output>div.desktop>fieldset>div.output { background-color:white; } +fieldset.macosx.desktop>div.output>div.desktop fieldset>div.status { border-top:#dddede solid 1px; } +fieldset.macosx.desktop>div.output>div.desktop fieldset table.content tr:nth-child(odd) { background-color:white; color:black; } +fieldset.macosx.desktop>div.output>div.desktop fieldset table.content tr:nth-child(even) { background-color:#f4f5f5; color:black; } +fieldset.macosx.desktop>div.output>div.desktop fieldset input { background-color:white; border:#e4e5e5 solid 1px; color:black; caret-color:black; } +fieldset.macosx.desktop>div.output>div.desktop fieldset>div.output.card>div.item { border:#d3d4d4 solid 1px; } +fieldset.macosx.desktop>div.output>div.desktop fieldset>div.output.card>div.item>div.title { border-bottom:#d3d4d4 solid 1px; } +body.dark fieldset.macosx.desktop { color:#e8eaed; } +body.dark fieldset.macosx.desktop input { color:#e8eaed; } +body.dark fieldset.macosx.desktop input[type=button] { background-color:#5e5f5f; } +body.dark fieldset.macosx.desktop>div.output { background-color:unset; } +body.dark fieldset.macosx.desktop>div.output>fieldset.macosx.dock { background-color:#0e202e70; } +body.dark fieldset.macosx.desktop>div.output>fieldset.macosx.menu { background-color:#08234ad1; color:#e8eaed; } +body.dark fieldset.macosx.desktop>div.output>fieldset.macosx.controls { background-color:#08234ad1; } +body.dark fieldset.macosx.desktop>div.output>fieldset.macosx.notifications { background-color:#08234ad1; } +body.dark fieldset.macosx.desktop>div.output>div.desktop fieldset { background-color:#333434; } +body.dark fieldset.macosx.desktop>div.output>div.desktop>fieldset>div.output { background-color:#1a1d1d; } +body.dark fieldset.macosx.desktop>div.output>div.desktop fieldset>div.status { border-top:#3e4040 solid 1px; } +body.dark fieldset.macosx.desktop>div.output>div.desktop fieldset table.content tr:nth-child(odd) { background-color:#1a1d1e; color:white; } +body.dark fieldset.macosx.desktop>div.output>div.desktop fieldset table.content tr:nth-child(even) { background-color:#282B2F; color:white; } +body.dark fieldset.macosx.desktop>div.output>div.desktop fieldset input { background-color:#333434; border:#404141 solid 1px; color:white; caret-color:white; } +body.dark fieldset.macosx.desktop>div.output>div.desktop fieldset>div.output.card>div.item { border:#3e4040 solid 1px; } +body.dark fieldset.macosx.desktop>div.output>div.desktop fieldset>div.output.card>div.item>div.title { border-bottom:#3e4040 solid 1px; } +body.light fieldset.macosx.desktop>div.output { background-color:unset; } +body.black fieldset.macosx.desktop>div.output>div.desktop fieldset { background-color:#3433337a; } +body.black fieldset.macosx.desktop>div.output>div.desktop>fieldset>div.output { background-color:#1a1d1d9c; } +body.white fieldset.macosx.desktop>div.output>div.desktop fieldset { background-color:#f5f5f594; } +body.white fieldset.macosx.desktop>div.output>div.desktop fieldset>legend { color:black; } +body.white fieldset.macosx.desktop>div.output>div.desktop>fieldset>div.output { background-color:#ffffff94; } diff --git a/src/macosx/desktop.js b/src/macosx/desktop.js index f7ac2094..a889ff69 100644 --- a/src/macosx/desktop.js +++ b/src/macosx/desktop.js @@ -1,23 +1,10 @@ Volcanos(chat.ONIMPORT, { - _init: function(can, msg, cb) { can.ui = {}, cb(msg), can.onmotion.clear(can) - can.page.styleHeight(can, can._output, can.ConfHeight()) + _init: function(can, msg, cb) { can.ui = {}, cb(msg), can.onmotion.clear(can), can.page.styleHeight(can, can._output, can.ConfHeight()) can.onimport._menu(can), can.onimport._dock(can), can.onimport._desktop(can, msg), can.onlayout.background(can, can.user.info.background, can._fields) }, - _desktop: function(can, msg) { var target = can.page.Append(can, can._output, [{view: "desktop"}])._target - msg = msg||can._msg, msg.Table(function(item) { can.page.Append(can, target, [{view: html.ITEM, list: [{view: html.ICON, list: [{img: "/require/"+item.icon}]}, {view: [mdb.NAME, "", item.name]}]}]) }) - can.onimport.tabs(can, [{name: "desktop", text: ""}], function() { can.onmotion.select(can, can._output, "div.desktop", target), can.ui.desktop = target }, function() { can.page.Remove(can, target) }) - }, - _window: function(can, item) { item.height = can.ConfHeight()-282, item.width = can.ConfWidth()-100 - can.onappend.plugin(can, item, function(sub) { sub.onimport.size(sub, item.height, item.width, true), can.onmotion.move(can, sub._target, {"z-index": 10, top: 100, left: 100}) }, can.ui.desktop) - }, - _notifications: function(can) { can.onappend.plugin(can, {index: "web.chat.macosx.notifications", style: html.OUTPUT}, function(sub) { can.ui.notifications = sub, can.onmotion.hidden(can, sub._target) }) }, - _controls: function(can) { can.onappend.plugin(can, {index: "web.chat.macosx.controls", style: html.OUTPUT}, function(sub) { can.ui.controls = sub, can.onmotion.hidden(can, sub._target) }) }, _menu: function(can) { can.onappend.plugin(can, {index: "web.chat.macosx.menu", style: html.OUTPUT}, function(sub) { can.ui.menu = sub - can.onimport._notifications(can), can.onimport._controls(can) sub.onexport.record = function(_, value, key, item) { switch (value) { - case "notifications": can.onmotion.toggle(can, can.ui.notifications._target); break - case "controls": can.onmotion.toggle(can, can.ui.controls._target); break case "system": var carte = can.user.carte(event, can, { "About This Mac": function(event) { can.user.toast(can, "about this mac") }, @@ -31,12 +18,9 @@ Volcanos(chat.ONIMPORT, { "Lock Screen": function(event) { can.user.toast(can, "about this mac") }, "Log Out shy...": function(event) { can.user.toast(can, "about this mac") }, full: function(event) { can.onaction.full(event, can) }, - scale: function(event) { - can.page.ClassList.neg(can, can.ui.desktop, "scale") - }, + scale: function(event) { can.page.ClassList.neg(can, can.ui.desktop, "scale") }, }); var list = can.page.Select(can, carte._target, html.DIV_ITEM) can.core.List([1, 3, 4, 5, 8], function(i) { can.page.insertBefore(can, [{type: html.HR}], list[i]) }) - can.page.style(can, carte._target, html.TOP, "25px") break } } @@ -44,18 +28,23 @@ Volcanos(chat.ONIMPORT, { _dock: function(can) { can.onappend.plugin(can, {index: "web.chat.macosx.dock", style: html.OUTPUT}, function(sub) { can.ui.dock = sub sub.onexport.record = function(sub, value, key, item) { can.onimport._window(can, item) } }) }, - layout: function(can) { - can.page.styleHeight(can, can._output, can.ConfHeight()) - return - if (can._fields.offsetHeight > 32) { - can.ConfHeight(can._fields.offsetHeight-html.ACTION_HEIGHT) - } - can.ConfWidth(can._output.offsetWidth) - can.ui && can.ui.dock && can.page.style(can, can.ui.dock._target, "bottom", "10px") + _desktop: function(can, msg) { var target = can.page.Append(can, can._output, [{view: "desktop"}])._target + msg = msg||can._msg, msg.Table(function(item) { can.page.Append(can, target, [{view: html.ITEM, list: [{view: html.ICON, list: [{img: "/require/"+item.icon}]}, {view: [mdb.NAME, "", item.name]}]}]) }) + can.onimport.tabs(can, [{name: "desktop", text: ""}], function() { can.onmotion.select(can, can._output, "div.desktop", target), can.ui.desktop = target }, function() { can.page.Remove(can, target) }) }, + _window: function(can, item) { item.height = can.ConfHeight()-(item.index == web.CODE_VIMER? 170: 400), item.width = can.base.Max(can.ConfWidth()-200, item.index == web.CODE_VIMER? 2000: 1000) + can.onappend.plugin(can, item, function(sub) { + var index = 0; can.core.Item({ + "#f95f57": function(event) { sub.onaction.close(event, sub) }, + "#fcbc2f": function(event) { can.onmotion.hidden(can, sub._target) }, + "#32c840": function(event) { sub.onaction.full(event, sub) }, + }, function(color, cb) { can.page.insertBefore(can, [{view: [[html.ITEM, html.BUTTON]], style: {"background-color": color, right: 10+20*index++}, onclick: cb}], sub._output) }) + sub.onimport.size(sub, item.height, item.width, true), can.onmotion.move(can, sub._target, {"z-index": 10, top: 25, left: 100}) + }, can.ui.desktop) + }, + layout: function(can) { can.page.styleHeight(can, can._output, can.ConfHeight()) }, }, [""]) Volcanos(chat.ONACTION, {list: ["full"], create: function(event, can, button) { can.onimport._desktop(can) }, - // full: function(event, can, button) { can._fields.requestFullscreen() }, full: function(event, can) { document.body.requestFullscreen() }, }) diff --git a/src/macosx/dock.go b/src/macosx/dock.go index c98d7ae6..e48b2a01 100644 --- a/src/macosx/dock.go +++ b/src/macosx/dock.go @@ -1,25 +1,7 @@ package macosx -import ( - ice "shylinux.com/x/icebergs" - "shylinux.com/x/icebergs/base/mdb" - "shylinux.com/x/icebergs/base/nfs" - kit "shylinux.com/x/toolkits" -) +import ice "shylinux.com/x/icebergs" const DOCK = "dock" -func init() { - Index.MergeCommands(ice.Commands{ - DOCK: {Actions: ice.MergeActions(ice.Actions{ - mdb.INPUTS: {Hand: func(m *ice.Message, arg ...string) { - switch mdb.HashInputs(m, arg); arg[0] { - case mdb.NAME: - m.Cmd(nfs.DIR, "usr/icons/", func(value ice.Maps) { m.Push(arg[0], kit.TrimExt(value[nfs.PATH], nfs.PNG)) }) - case mdb.ICON: - m.Cmd(nfs.DIR, "usr/icons/", func(value ice.Maps) { m.Push(arg[0], value[nfs.PATH]) }) - } - }}, - }, CmdHashAction())}, - }) -} +func init() { Index.MergeCommands(ice.Commands{DOCK: {Actions: CmdHashAction()}}) } diff --git a/src/macosx/finder.go b/src/macosx/finder.go index 7f46323d..dfb6b264 100644 --- a/src/macosx/finder.go +++ b/src/macosx/finder.go @@ -13,7 +13,7 @@ const FINDER = "finder" func init() { Index.MergeCommands(ice.Commands{ - FINDER: {Name: "finder path auto create", Help: "浏览器", Actions: ice.MergeActions(CmdHashAction()), Hand: func(m *ice.Message, arg ...string) { + FINDER: {Name: "finder path auto create", Actions: CmdHashAction(), Hand: func(m *ice.Message, arg ...string) { if len(arg) == 0 || strings.HasSuffix(arg[0], nfs.PS) { switch kit.Select("", arg, 0) { case ice.USR_LOCAL_WORK: diff --git a/src/macosx/macosx.go b/src/macosx/macosx.go index d7ee9ea0..66eada24 100644 --- a/src/macosx/macosx.go +++ b/src/macosx/macosx.go @@ -4,6 +4,7 @@ import ( ice "shylinux.com/x/icebergs" "shylinux.com/x/icebergs/base/ctx" "shylinux.com/x/icebergs/base/mdb" + "shylinux.com/x/icebergs/base/nfs" "shylinux.com/x/icebergs/core/chat" kit "shylinux.com/x/toolkits" ) @@ -17,6 +18,14 @@ func init() { chat.Index.Register(Index, nil) } func CmdHashAction(arg ...string) ice.Actions { file := kit.FileLines(2) return ice.MergeActions(ice.Actions{ + mdb.INPUTS: {Hand: func(m *ice.Message, arg ...string) { + switch mdb.HashInputs(m, arg); arg[0] { + case mdb.NAME: + m.Cmd(nfs.DIR, "usr/icons/", func(value ice.Maps) { m.Push(arg[0], kit.TrimExt(value[nfs.PATH], nfs.PNG)) }) + case mdb.ICON: + m.Cmd(nfs.DIR, "usr/icons/", func(value ice.Maps) { m.Push(arg[0], value[nfs.PATH]) }) + } + }}, mdb.SELECT: {Name: "list hash auto create", Hand: func(m *ice.Message, arg ...string) { mdb.HashSelect(m, arg...).Display(file) }}, }, ctx.CmdAction(), mdb.HashAction(mdb.SHORT, kit.Select("", arg, 0), mdb.FIELD, kit.Select("time,hash,type,name,icon,index,args", arg, 1), kit.Slice(arg, 2))) } diff --git a/src/macosx/macosx.shy b/src/macosx/macosx.shy index f8f5c0b8..ca975e41 100644 --- a/src/macosx/macosx.shy +++ b/src/macosx/macosx.shy @@ -8,6 +8,4 @@ desktop safari preview terminal - settings - notifications ` \ No newline at end of file diff --git a/src/macosx/menu.js b/src/macosx/menu.js index 4ff91696..31805129 100644 --- a/src/macosx/menu.js +++ b/src/macosx/menu.js @@ -1,10 +1,4 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg) { msg.Dump(can), can.page.Append(can, can._output, can.user.header(can)) - false && can.page.Append(can, can._output, [{view: ["icon", "", "notifications"], onclick: function(event) { - can.sup.onexport.record(can, "notifications", mdb.NAME, {}) - }}]) - false && can.page.Append(can, can._output, [{view: ["icon", "", "controls"], onclick: function(event) { - can.sup.onexport.record(can, "controls", mdb.NAME, {}) - }}]) can.page.Append(can, can._output, [{view: ["icon"], list: [{img: "/require/usr/icons/menu.png"}], onclick: function(event) { can.sup.onexport.record(can, "controls", mdb.NAME, {}) }}]) diff --git a/src/macosx/notifications.go b/src/macosx/notifications.go deleted file mode 100644 index 0c69e8fd..00000000 --- a/src/macosx/notifications.go +++ /dev/null @@ -1,7 +0,0 @@ -package macosx - -import ice "shylinux.com/x/icebergs" - -const NOTIFICATIONS = "notifications" - -func init() { Index.MergeCommands(ice.Commands{NOTIFICATIONS: {Actions: CmdHashAction()}}) } diff --git a/src/macosx/notifications.js b/src/macosx/notifications.js deleted file mode 100644 index a6546ea8..00000000 --- a/src/macosx/notifications.js +++ /dev/null @@ -1,3 +0,0 @@ -Volcanos(chat.ONIMPORT, {_init: function(can, msg) { - msg.Dump(can) -}}) \ No newline at end of file diff --git a/src/macosx/settings.go b/src/macosx/settings.go deleted file mode 100644 index 46799811..00000000 --- a/src/macosx/settings.go +++ /dev/null @@ -1,7 +0,0 @@ -package macosx - -import ice "shylinux.com/x/icebergs" - -const SETTINGS = "settings" - -func init() { Index.MergeCommands(ice.Commands{SETTINGS: {Actions: CmdHashAction()}}) } diff --git a/src/template/web.chat.header/black.css b/src/template/web.chat.header/black.css new file mode 100644 index 00000000..3dfe7ddf --- /dev/null +++ b/src/template/web.chat.header/black.css @@ -0,0 +1,17 @@ +body.black { background-color:black; color:cyan; } +body.black legend { background-color:#243783bd; } +body.black input { background-color:#243783bd; color:cyan; outline:none; } +body.black textarea { background-color:#243783bd; color:cyan; outline:none; } +body.black table.content th { background-color:steelblue; } +body.black table.content.action td:last-child { background-color:steelblue; } +body.black div.output { background-color:unset; } +body.black fieldset>div.status { border-top:darkcyan solid 1px; } +body.black fieldset:not(.panel):not(.float):not(.full) { background-color:#061c3c9e; } +body.black fieldset.panel:not(.main):not(.auto) { background-color:unset; } +body.black fieldset.panel:not(.main):not(.auto)>div.output { background-color:unset; } +body.black div.float { background-color:#061c3ceb; } +body.black div.zone>div.item { background-color:steelblue; color:white; } +body.black div.zone>div.list>div.zone>div.item { background-color:#09466fc2; } +body.black div.tabs div:hover { background-color:unset; color:white } +body.black div.tabs div.select { background-color:unset; color:white } +body.black select, body.black input[type=text], body.black textarea { box-shadow:4px 4px 20px 4px #626bd0; } diff --git a/src/template/web.chat.header/dark.css b/src/template/web.chat.header/dark.css index ab1e417d..581dcdbb 100644 --- a/src/template/web.chat.header/dark.css +++ b/src/template/web.chat.header/dark.css @@ -1,71 +1,44 @@ -body.dark { color:silver } -body.dark legend { background-color:#212121;color:silver;border-radius:5px;outline:none;box-shadow:none;background-color:#212121 } +body.dark { background-color:black; color:silver; } +body.dark legend { background-color:#212121; border-radius:5px; } body.dark legend:hover { color:white } -body.dark select { background-color:#212121;color:silver;border-radius:5px;outline:none;box-shadow:none; } -body.dark select:hover { color:white } -body.dark input { background-color:#212121;color:silver;border-radius:5px;outline:none;box-shadow:none; } +body.dark input { background-color:#232526; color:silver; border-radius:5px; } body.dark input:hover { color:white } -body.dark input:not([type=button]) { border-radius:0 } -body.dark input:not([type=button]):hover { border:blue solid 1px } -body.dark input:not([type=button]):focus { border:blue solid 1px } -body.dark input.select:focus { border:blue solid 1px } -body.dark input.select:hover { border:blue solid 1px } -body.dark textarea:focus { border:blue solid 1px } -body.dark textarea:hover { border:blue solid 1px } -body.dark textarea { background-color:#212121;color:silver;border-radius:5px;outline:none;box-shadow:none } -body.dark textarea { border-radius:0 } -body.dark form.option div.item.select { background-color:transparent } -body.dark form.option div.item:hover { background-color:transparent } -body.dark div.action div.item.select { background-color:transparent } -body.dark div.action div.item:hover { background-color:transparent } -body.dark div.output { background-color:#0d1117 } -body.dark div.status { background-color:black;color:silver } -body.dark div.item.select { background-color:#212121;color:white } -body.dark div.item:hover { background-color:#212121;color:white } -body.dark span.item.select { background-color:#212121;color:white } -body.dark span.item:hover { background-color:#212121;color:white } +body.dark input:not([type=button]) { border-radius:0; } +body.dark input:not([type=button]):hover { border:blue solid 1px; } +body.dark input:not([type=button]):focus { border:blue solid 1px; outline:none; } +body.dark textarea { background-color:#232526; color:silver; } +body.dark table.content tr:hover { background-color:black; color:white; } +body.dark table.content th { background-color:black; } +body.dark table.content td:hover { background-color:black; } +body.dark table.content td.select { background-color:black; } +body.dark table.content.action td:last-child { background-color:black; } +body.dark tr.line:hover { background-color:black; } +body.dark tr.line.select { background-color:black; } +body.dark h1:hover { background-color:black; color:white; } +body.dark h2:hover { background-color:black; color:white; } +body.dark h3:hover { background-color:black; color:white; } +body.dark div.item:hover { background-color:#232526; color:white; } +body.dark div.item.select { background-color:#232526; color:white; } +body.dark span.item:hover { background-color:black; color:white; } +body.dark span.item.select { background-color:black; color:white; } +body.dark div.action div.tabs:hover { background-color:#232526; color:white; } +body.dark div.action div.tabs.select { background-color:#232526; color:white; } +body.dark div.output { background-color:#232526; } +body.dark fieldset>div.status { border-top:gray solid 1px } +body.dark fieldset:not(.panel) { background-color:black; border-radius:10px; } +body.dark fieldset.panel:not(.main) { background-color:black; } +body.dark fieldset.panel:not(.main)>div.output { background-color:black; } +body.dark fieldset.input div.output { background-color:black; } +body.dark fieldset.input tr:hover { background-color:#232526; } +body.dark fieldset.input td:hover { background-color:#232526; } +body.dark div.float { background-color:black; } +body.dark div.carte div.item { background-color:black; } +body.dark div.carte div.item:hover { background-color:#232526; } +body.dark div.zone>div.item { background-color:black; } +body.dark div.zone>div.list>div.zone>div.item { background-color:black; } body.dark div.tabs div { background-color:black } -body.dark div.tabs div:hover { background-color:#0d1117; color:white } -body.dark div.tabs div.select { background-color:#0d1117; color:white } -body.dark div.action div.tabs:hover { background-color:#0d1117; color:white } -body.dark div.action div.tabs.select { background-color:#0d1117; color:white } -body.dark div.path { background-color:#0d1117 } -body.dark div.path span:hover { background-color:#212121;color:white } -body.dark div.plug legend { background-color:#0d1117 } -body.dark div.plug legend.select { background-color:black;border-radius:10px } -body.dark div.zone>div.item { background-color:black;color:silver } -body.dark div.zone>div.item:hover { background-color:black;color:white } -body.dark div.zone>div.list>div.zone>div.item { background-color:black;color:silver } -body.dark div.zone>div.list>div.zone>div.item:hover { background-color:black;color:white } -body.dark div.zone div.item>div.name:hover { color:white } -body.dark tr.line.select { background-color:#212121; } -body.dark tr.line:hover { background-color:#212121; } -body.dark tr.line>td.line { background-color:#0d1117 } -body.dark tr.line.select>td.line { background-color:#212121; } -body.dark div.complete>table { background-color:black;color:silver } -body.dark table.content tr:hover { color:white;background-color:black } -body.dark table.content th { background-color:black;color:silver } -body.dark table.content.action td:last-child { background-color:black;color:silver } -body.dark table.content td.select { background-color:#0d1117 } -body.dark table.content td:hover { background-color:#0d1117 } -body.dark h1:hover { background-color:#212121;color:white } -body.dark h2:hover { background-color:#212121;color:white } -body.dark h3:hover { background-color:#212121;color:white } -body.dark a { color:blue } -body.dark label { color:silver } -body.dark fieldset.panel { background-color:black;color:silver } -body.dark fieldset.panel>div.output { background-color:black;color:silver } -body.dark fieldset.panel.Action div.output { background-color:#0d1117; } -body.dark fieldset.plugin { background-color:black;border-radius:10px; } -body.dark fieldset.plugin >div.status { border-top:gray solid 1px } -body.dark fieldset.story { background-color:black;border-radius:10px; } -body.dark fieldset.story >div.status { border-top:gray solid 1px } -body.dark fieldset.input { background-color:black;border-radius:10px }body.dark fieldset.input div.output { background-color:black;border-radius:10px } -body.dark fieldset.input { border-radius:0 } -body.dark fieldset.input td.select { background-color:#0d1117 } -body.dark fieldset.input td:hover { background-color:#212121 } -body.dark fieldset.input tr:hover { background-color:#0d1117 } -body.dark fieldset.float { background-color:black;border-radius:10px } -body.dark div.float { background-color:black;border-radius:10px } -body.dark div.carte div.item { background-color:black;color:silver; } -body.dark div.carte div.item:hover { background-color:#212121;color:white } \ No newline at end of file +body.dark div.tabs div:hover { background-color:#232526; color:white } +body.dark div.tabs div.select { background-color:#232526; color:white } +body.dark div.plug legend { background-color:#232526 } +body.dark div.plug legend.select { background-color:black; } +body.dark div.complete>table { background-color:black; } diff --git a/src/template/web.chat.header/light.css b/src/template/web.chat.header/light.css index c0242d3b..3c822a46 100644 --- a/src/template/web.chat.header/light.css +++ b/src/template/web.chat.header/light.css @@ -1,68 +1,52 @@ -body.light { background-color:#4a566e; color:black } -body.light legend { background-color:white;color:black;border-radius:5px;outline:none;box-shadow:none;background-color:lightsteelblue } -body.light legend:hover { color:black } -body.light select { background-color:white;color:black;border-radius:5px;outline:none;box-shadow:none } -body.light select:hover { color:black } -body.light input { background-color:white;color:black;border-radius:5px;outline:none;box-shadow:none } -body.light input:hover { color:black } -body.light input:not([type=button]) { border-radius:0 } -body.light input:not([type=button]):hover { border:blue solid 1px } -body.light input:not([type=button]):focus { border:blue solid 1px } -body.light input.select:focus { border:blue solid 1px } -body.light input.select:hover { border:blue solid 1px } -body.light textarea:focus { border:blue solid 1px } -body.light textarea:hover { border:blue solid 1px } -body.light textarea { background-color:white;color:black;border-radius:5px;outline:none;box-shadow:none } -body.light textarea { border-radius:0 } -body.light form.option div.item.select { background-color:transparent } -body.light form.option div.item:hover { background-color:transparent } -body.light div.output { background-color:white } -body.light div.status { background-color:aliceblue;color:black } -body.light div.item.select { background-color:aliceblue;color:black } -body.light div.item:hover { background-color:aliceblue;color:black } -body.light span.item.select { background-color:aliceblue;color:black } -body.light span.item:hover { background-color:aliceblue;color:black } -body.light div.tabs div { background-color:aliceblue } -body.light div.tabs div:hover { background-color:white; color:black } -body.light div.tabs div.select { background-color:white; color:black } -body.light div.action div.tabs:hover { background-color:white; color:black } -body.light div.action div.tabs.select { background-color:white; color:black } -body.light div.path span:hover { background-color:aliceblue;color:black } -body.light div.plug legend { background-color:white } -body.light div.plug legend.select { background-color:aliceblue;border-radius:10px } -body.light div.zone>div.item { background-color:aliceblue;color:black } -body.light div.zone>div.item:hover { background-color:aliceblue;color:black } -body.light div.zone>div.list>div.zone>div.item { background-color:aliceblue;color:black } -body.light div.zone>div.list>div.zone>div.item:hover { background-color:aliceblue;color:black } -body.light div.zone div.item>div.name:hover { color:black } -body.light tr.line.select { background-color:aliceblue; } +body.light legend { background-color:lightsteelblue; border-radius:5px; } +body.light select { border-radius:5px; } +body.light input { background-color:white; border-radius:5px; } +body.light input:not([type=button]) { border-radius:0; } +body.light input:not([type=button]):hover { border:blue solid 1px; } +body.light input:not([type=button]):focus { border:blue solid 1px; outline:none; } +body.light table.content tr:hover { background-color:aliceblue; } +body.light table.content th { background-color:aliceblue; } +body.light table.content td:hover { background-color:aliceblue; } +body.light table.content td.select { background-color:aliceblue; } +body.light table.content.action td:last-child { background-color:aliceblue; } body.light tr.line:hover { background-color:aliceblue; } -body.light tr.line>td.line { background-color:white } -body.light tr.line.select>td.line { background-color:aliceblue; } -body.light div.complete>table { background-color:aliceblue;color:black } -body.light table.content tr:hover { color:black;background-color:aliceblue } -body.light table.content th { background-color:aliceblue;color:black } -body.light table.content.action td:last-child { background-color:aliceblue;color:black } -body.light table.content td.select { background-color:white } -body.light table.content td:hover { background-color:white } -body.light h1:hover { background-color:aliceblue;color:black } -body.light h2:hover { background-color:aliceblue;color:black } -body.light h3:hover { background-color:aliceblue;color:black } -body.light a { color:blue } -body.light label { color:black } -body.light fieldset.panel { background-color:white;color:black } -body.light fieldset.panel>div.output { background-color:white;color:black } -body.light fieldset.panel.Action div.output { background-color:white; } -body.light fieldset.plugin { background-color:aliceblue;border-radius:10px; } -body.light fieldset.plugin >div.status { border-top:transparent solid 1px } -body.light fieldset.story { background-color:aliceblue;border-radius:10px; } -body.light fieldset.story >div.status { border-top:transparent solid 1px } -body.light fieldset.input { background-color:aliceblue;border-radius:10px }body.light fieldset.input div.output { background-color:aliceblue;border-radius:10px } -body.light fieldset.input { border-radius:0 } -body.light fieldset.input td.select { background-color:white } -body.light fieldset.input td:hover { background-color:aliceblue } -body.light fieldset.input tr:hover { background-color:white } -body.light fieldset.float { background-color:aliceblue;border-radius:10px } +body.light tr.line.select { background-color:aliceblue; } +body.light h1:hover { background-color:aliceblue; } +body.light h2:hover { background-color:aliceblue; } +body.light h3:hover { background-color:aliceblue; } +body.light div.item:hover { background-color:aliceblue; } +body.light div.item.select { background-color:aliceblue; } +body.light span.item:hover { background-color:aliceblue; } +body.light span.item.select { background-color:aliceblue; } +body.light form.option div.item:hover { background-color:white; } +body.light form.option div.item.select { background-color:white; } +body.light div.action div.tabs:hover { background-color:white; } +body.light div.action div.tabs.select { background-color:white; } +body.light div.output { background-color:white; } +body.light fieldset>div.status { border-top:transparent solid 1px; } +body.light fieldset:not(.panel) { background-color:aliceblue; color:black; border-radius:10px; } +body.light fieldset.panel:not(.main) { background-color:#4a566e; color:#d0d3da; } +body.light fieldset.panel:not(.main)>div.output { background-color:#4a566e; color:#d0d3da; } +body.light fieldset.panel:not(.main)>div.output fieldset>div.output { color:black; } +body.light fieldset.panel:not(.main)>div.output div.state:hover { background-color:#2b3446; color:white; } +body.light fieldset.panel:not(.main)>div.output div.title:hover { background-color:#2b3446; color:white; } +body.light fieldset.panel:not(.main)>div.output div.menu:hover { background-color:#2b3446; color:white; } +body.light fieldset.panel:not(.main):not(.auto) div.item:hover { background-color:#2b3446; color:white; } +body.light fieldset.panel:not(.main):not(.auto) div.item.select { background-color:#2b3446; color:white; } +body.light fieldset.panel:not(.main):not(.auto) input { background-color:#6b7488; color:white; border-radius:5px; } +body.light fieldset.panel:not(.main)>div.output>div.item>input::placeholder { background-color:#6b7488; color:#d0d3da; } +body.light fieldset.panel:not(.main) label { color:#d0d3da; } +body.light fieldset.input div.output { background-color:aliceblue; } +body.light fieldset.input tr:hover { background-color:white; } +body.light fieldset.input td:hover { background-color:white; } body.light div.float { background-color:aliceblue; } -body.light div.carte div.item { background-color:aliceblue;color:black; } -body.light div.carte div.item:hover { background-color:white;color:black } \ No newline at end of file +body.light div.carte div.item { background-color:aliceblue; } +body.light div.carte div.item:hover { background-color:white; } +body.light div.zone>div.item { background-color:aliceblue; } +body.light div.zone>div.list>div.zone>div.item { background-color:aliceblue; } +body.light div.tabs div { background-color:aliceblue; } +body.light div.tabs div:hover { background-color:white; } +body.light div.tabs div.select { background-color:white; } +body.light div.plug legend { background-color:white } +body.light div.plug legend.select { background-color:aliceblue; } +body.light div.complete>table { background-color:aliceblue; } diff --git a/src/template/web.chat.header/mobile.css b/src/template/web.chat.header/mobile.css new file mode 100644 index 00000000..9429a9cc --- /dev/null +++ b/src/template/web.chat.header/mobile.css @@ -0,0 +1,45 @@ +body.mobile legend { font-size:1.4rem; height:32px; } +body.mobile input:not([type=file]) { margin-right:0px; } +body.mobile form.option>div.item { margin:0; height:32px; } +body.mobile form.option>div.item.icon { font-size:32px; padding:2px 4px; } +body.mobile form.option>div.item.icon.prev { font-size:26px; } +body.mobile form.option>div.item.icon.next { font-size:26px; } +body.mobile form.option>div.item.textarea { height:unset; } +body.mobile form.option>div.item.button>input { display:none; } +body.mobile form.option>div.button.icons>input { display:none; } +body.mobile form.option>div.button>span.icon { line-height:32px; font-size:32px; height:32px; } +body.mobile fieldset>div.status { max-height:32px; } +body.mobile div.item.text>span.icon.delete { top:4px; } +body.mobile div.action>div.item { margin:0; height:32px; } +body.mobile div.carte div.item { padding:10px; } +body.mobile table.content th { padding:6px; } +body.mobile table.content { width:100%; } +body.mobile fieldset:not(.panel):not(.input):not(.play)>div.action { display:none; } +body.mobile fieldset.plugin:not(.float):not(.full):not(.cmd) { margin:10px 0; } +body.mobile fieldset.Action>div.output>fieldset.plugin:not(.float):not(.full):not(.cmd)>legend { margin:10px; } +body.mobile fieldset.Header { padding:0; width:100%; position:fixed; top:0; } +body.mobile.landscape fieldset.Header { position:unset; } +body.mobile fieldset.Header>div.output { font-size:1.4rem; line-height:48px; height:48px; } +body.mobile fieldset.Header div.output div.search { padding:0; height:48px; width:100%; margin:0; } +body.mobile fieldset.Header div.output div.search>input { font-size:2.2rem; background-color:#21181838; color:white; height:53px; width:100%; } +body.mobile fieldset.Header div.output div.item.text.title.search { display:none; } +body.mobile fieldset.Header div.output div.item:not(.avatar) { padding:0px 10px; } +body.mobile fieldset.Search>div.action>div.item.filter>input { width:100%; } +body.mobile fieldset.River { min-width:240px; position:fixed; top:48px; z-index:10; } +body.mobile fieldset.River>div.output { font-size:1.4rem; width:320px; } +body.mobile fieldset.Action { margin-top:48px; } +body.mobile.landscape fieldset.Action { margin-top:0; } +body.mobile fieldset.Action.cmd { margin-top:0; margin-bottom:0; } +body.mobile fieldset.Action>div.output { overflow-x:hidden; } +body.mobile fieldset.Action>div.output>fieldset.plugin:not(.output):not(.float):not(.full):not(.cmd) { padding:0px; } +body.mobile fieldset.Footer { font-size:1.4rem; height:48px; width:100%; position:fixed; bottom:0; } +body.mobile fieldset.Footer div.output { height:48px; } +body.mobile fieldset.Footer div.output div { height:48px; } +body.mobile fieldset.Footer input[name=cmd] { height:48px; } +body.mobile.landscape fieldset.Footer { display:none; } +body.mobile fieldset.Footer { display:none; } +body.mobile fieldset.input.date div.output td { padding:8px 20px; } +body.mobile fieldset.word.float>div.output>div.project { top:32px; } +body.mobile fieldset.word>div.output { overflow-x:hidden; } +body.mobile fieldset.word>div.output>fieldset.story>form.option>div.text { display:none; } +body.mobile fieldset>div.status { overflow:hidden; } diff --git a/src/template/web.chat.header/white.css b/src/template/web.chat.header/white.css new file mode 100644 index 00000000..ef27483a --- /dev/null +++ b/src/template/web.chat.header/white.css @@ -0,0 +1,12 @@ +body.white { color:black; } +body.white legend { color:white; } +body.white input { background-color:#ffffff7d; color:black; } +body.white textarea { background-color:white; color:black; } +body.white table.content tr:hover { background-color:skyblue; } +body.white table.content th { background-color:skyblue; } +body.white table.content td:hover { background-color:skyblue; } +body.white table.content.action td:last-child { background-color:skyblue; } +body.white fieldset:not(.panel):not(.float):not(.full) { background-color:#ffffffa1; } +body.white fieldset.float { background-color:aliceblue; } +body.white fieldset.full { background-color:aliceblue; } +body.white div.float { background-color:aliceblue; }