From fd682caabb0ff9ee81391e791416986caf8e797a Mon Sep 17 00:00:00 2001 From: chromoxdor <33860956+chromoxdor@users.noreply.github.com> Date: Thu, 25 Sep 2025 18:04:07 +0200 Subject: [PATCH 1/3] [CSS] Future CSS for Wi-Fi & Interfaces tab --- static/espeasy_default.css | 19 ++++++++++--------- static/espeasy_default.min.css | 2 +- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/static/espeasy_default.css b/static/espeasy_default.css index f5f9fae5df..5d35795e6e 100644 --- a/static/espeasy_default.css +++ b/static/espeasy_default.css @@ -454,16 +454,21 @@ textarea, } .menubar { - position: inherit; - top: 54px; - width: 100% + display: flex; + position: inherit; + top: 54px; + max-width: 960px; + width: 100%; + justify-content: space-evenly } a.menu { align-items: center; display: flex; height: 46px; - justify-content: center + justify-content: center; + gap: 2px; + width: 100% } .menu { @@ -576,14 +581,10 @@ canvas { filter: invert(var(--iv)) hue-rotate(var(--ro)); } -@media screen and (max-width:780px) { +@media screen and (max-width:960px) { .showmenulabel { display: none } - - a.menu { - width: 12% - } } @media screen and (max-width:450px) { diff --git a/static/espeasy_default.min.css b/static/espeasy_default.min.css index c06e1b7e84..37f1792425 100644 --- a/static/espeasy_default.min.css +++ b/static/espeasy_default.min.css @@ -1 +1 @@ -.logviewer,tbody{overflow:auto}.container,.normal td{height:30px}.container,.container input:checked~.checkmark:after,.container2,.container2 input:checked~.dotmark:after,.sub{display:block}:root{--bg1:#eee;--bg2:#cacaca;--bg3:#07d;--c1:#fff;--bdc1:silver;--bg4:#e8e8e8;--bg5:#dbff0075;--c2:#444;--bg6:#fff;--bdc2:#444 #444 #fff;--c3:#000;--bg7:#bdbdbd;--bg8:#029b34;--c4:inherit;--c5:#07d;--bg10:#07d;--bg11:#f8f8f8;--c6:#fff;--ro:0deg;--iv:0}[data-theme=dark]{--bg1:#444;--bg2:#2e2e2e;--bg3:#00000085;--c1:#dfdfdf;--bdc1:#545454;--bg4:#2e2e2e;--bg5:#553044;--c2:#fff;--bg6:#222;--bdc2:transparent;--c3:#fff;--bg7:#00000030;--bg8:#30553d;--c4:#c3c3c3;--c5:#c3c3c3;--bg10:#44607a;--bg11:#44607a;--c6:#c3c3c3;--ro:180deg;--iv:1}@media (prefers-color-scheme:dark){[data-theme=auto]{--bg1:#444;--bg2:#2e2e2e;--bg3:#00000085;--c1:#dfdfdf;--bdc1:#545454;--bg4:#2e2e2e;--bg5:#553044;--c2:#fff;--bg6:#222;--bdc2:transparent;--c3:#fff;--bg7:#00000030;--bg8:#30553d;--bg9:#222;--c4:#c3c3c3;--c5:#c3c3c3;--bg10:#44607a;--bg11:#44607a;--c6:#c3c3c3;--ro:180deg;--iv:1}}* :not(font,a),.closebtn,.div_r,.wide,h1,h6,textarea{color:var(--c4)}.checkmark:after,.dotmark:after{content:'';display:none;position:absolute}.button,.menu{text-decoration:none}.div_l,.menu{float:left}*{box-sizing:border-box;font-family:sans-serif;font-size:12pt;margin:0}h1{font-size:16pt;margin:8px 0}h3{background-color:var(--bg2);margin:-5px;padding:6px}h6{font-size:10pt}pre{font:1em monospace,monospace}.button{border:0;border-radius:5px;color:var(--c6);margin:5px;padding:5px 15px}.checkmark,input,select{background-color:var(--bg1)}#toastmessage,.button.help,.checkmark,.dotmark,.logviewer,hr,input,select,textarea{border:.1px solid gray}input[disabled],input[disabled]:hover{background-color:var(--bg7)}.button.link.wide{display:inline-block;text-align:center}.button.link.red{background-color:red}.button.help{border-radius:50%;font-family:monospace;padding:2px 7px}.checkmark,input,select,textarea{border-radius:5px}.button:hover{background:#369}input,select,textarea{margin:4px;padding:4px 8px}.wide{margin-bottom:5px;max-width:300px;min-width:85px;width:95%}.sub,.widenumber{max-width:100px}textarea.wide{max-width:1000px}.xwide{width:300px}.container,.container2{cursor:pointer;font-size:12pt;padding-left:35px}.container{margin-left:4px;margin-top:0;position:relative;user-select:none}.checkmark.disabled{background-color:grey}.checkmark{height:25px;left:0;position:absolute;top:0;width:25px}.container .checkmark:after{border:solid #fff;border-width:0 3px 3px 0;height:10px;left:7px;top:3px;transform:rotate(45deg);width:5px}#toastmessage{background-color:var(--bg3);border-radius:5px;bottom:30%;color:#fff;font-size:17px;left:282px;margin-left:-125px;min-width:250px;padding:16px;position:fixed;text-align:center;visibility:hidden;z-index:1}.container2{margin-bottom:20px;margin-left:9px;position:relative;user-select:none}.dotmark{background-color:#eee;border-radius:50%;height:26px;left:0;position:absolute;top:0;width:26px}.container2 .dotmark:after{background:#fff;border-radius:50%;height:8px;left:8px;top:8px;width:8px}textarea{font-family:'Lucida Console',Monaco,monospace;max-height:60vh;width:-webkit-fill-available;width:-moz-available}#toastmessage.show{animation:.5s fadein,.5s 2.5s fadeout;visibility:visible}.container input,.container2 input{cursor:pointer;opacity:0;position:absolute}@keyframes fadein{from{bottom:20%;opacity:0}to{bottom:30%;opacity:.9}}@keyframes fadeout{from{bottom:30%;opacity:.9}to{bottom:0;opacity:0}}.level_0{color:#f1f1f1}.level_1{color:#fcff95}.level_2{color:#9dcefe}.level_3{color:#a4fc79}.level_4{color:#f2ab39}.level_9{color:#f50}.logviewer{background-color:#272727;color:#f1f1f1;height:60vh}.multirow th,.normal th{background-color:#444;border-color:var(--bdc1);color:var(--c1);padding:5px;width:100vw}.multirow,.normal{border-spacing:0;width:100%}.multirow tr,.normal td,.normal tr{padding:5px}.multirow td{border-color:var(--bdc1);height:30px;padding:4px;text-align:center}.tworow td,.tworow th{text-align:left}.sub{border-spacing:0}.even tr:nth-child(2n),.tworow tr:nth-child(4n+3),.tworow tr:nth-child(4n+4),textarea{background-color:var(--bg4)}.menu.active,body{background-color:var(--bg6)}.apheader,.headermenu{padding:8px 12px;width:100vw}.note{color:#7b7b7b;font-style:italic}.headermenu{background-color:var(--bg11);border-bottom:.1px solid #444;height:100px;position:fixed;top:0;z-index:1}.bodymenu{height:100vh;padding-top:100px}.menubar{position:inherit;top:54px;width:100%}a.menu{align-items:center;display:flex;height:46px;justify-content:center}.menu{color:var(--c2);border:1px solid transparent;border-radius:5px 5px 0 0;padding:10px 10px 8px;white-space:nowrap}.menu.active{border-color:var(--bdc2);color:var(--c3);border-width:.1px}.menu:hover{background:var(--bg7);color:var(--c3)}.menu_button{display:none}.on{color:#029b34}.off{color:red}.div_r{background-color:var(--bg8);border-radius:4px;margin:2px;padding:1px 10px}.alert,.warning{color:#fff;margin-bottom:15px;padding:20px}.highlight td{background-color:var(--bg5)}.div_br{clear:both}.alert{background-color:#f44336}.warning{background-color:#ffca17}.closebtn{cursor:pointer;font-size:22px;line-height:20px;margin-left:15px;transition:.3s}.closebtn:hover{color:#000}section{overflow-x:auto;padding:10px 0}footer{padding:0 5px;word-break:break-all}.closebtn,.div_r{float:right;color:var(--c6)}a,h1,h6{color:var(--c5)}.button,.container input:checked~.checkmark:not(.disabled),.container2 input:checked~.dotmark{background-color:var(--bg10)}canvas{filter:invert(var(--iv)) hue-rotate(var(--ro))}@media screen and (max-width:780px){.showmenulabel{display:none}a.menu{width:12%}}@media screen and (max-width:450px){.normal{min-width:300px}input.wide:focus{left:4px;position:absolute;z-index:1}} \ No newline at end of file +:root{--bg1:#eee;--bg2:#cacaca;--bg3:#07d;--c1:#fff;--bdc1:silver;--bg4:#e8e8e8;--bg5:#dbff0075;--c2:#444;--bg6:#fff;--bdc2:#444 #444 #fff;--c3:#000;--bg7:#bdbdbd;--bg8:#029b34;--c4:inherit;--c5:#07d;--bg10:#07d;--bg11:#f8f8f8;--c6:#fff;--ro:0deg;--iv:0;}[data-theme="dark"]{--bg1:#444;--bg2:#2e2e2e;--bg3:#00000085;--c1:#dfdfdf;--bdc1:#545454;--bg4:#2e2e2e;--bg5:#553044;--c2:#fff;--bg6:#222;--bdc2:transparent;--c3:#fff;--bg7:#00000030;--bg8:#30553d;--c4:#c3c3c3;--c5:#c3c3c3;--bg10:#44607a;--bg11:#44607a;--c6:#c3c3c3;--ro:180deg;--iv:1;}@media (prefers-color-scheme:dark){[data-theme="auto"]{--bg1:#444;--bg2:#2e2e2e;--bg3:#00000085;--c1:#dfdfdf;--bdc1:#545454;--bg4:#2e2e2e;--bg5:#553044;--c2:#fff;--bg6:#222;--bdc2:transparent;--c3:#fff;--bg7:#00000030;--bg8:#30553d;--bg9:#222;--c4:#c3c3c3;--c5:#c3c3c3;--bg10:#44607a;--bg11:#44607a;--c6:#c3c3c3;--ro:180deg;--iv:1}}*:not(font,a),.closebtn,.div_r,h1,h6,.wide,textarea{color:var(--c4)}.checkmark:after,.dotmark:after{content:'';display:none;position:absolute}.button,.menu{text-decoration:none}.div_l,.menu{float:left}.closebtn,.div_r{float:right}*{box-sizing:border-box;font-family:sans-serif;font-size:12pt;margin:0}h1{font-size:16pt;margin:8px 0}h3{background-color:var(--bg2);margin:-5px;padding:6px}h6{font-size:10pt}pre{font:1em monospace,monospace}.button{border:0;border-radius:5px;color:var(--c6);margin:5px;padding:5px 15px}input,select,.checkmark{background-color:var(--bg1)}.button.help,.checkmark,input,select,hr,textarea,#toastmessage,.dotmark,.logviewer{border:.1px solid gray;}input[disabled],input[disabled]:hover{background-color:var(--bg7);}.button.link.wide{display:inline-block;text-align:center;}.button.link.red{background-color:red}.button.help{border-radius:50%;font-family:monospace;padding:2px 7px}.checkmark,input,select,textarea{border-radius:5px}.button:hover{background:#369}input,select,textarea{margin:4px;padding:4px 8px}.wide{margin-bottom:5px;max-width:300px;min-width:85px;width:95%}textarea.wide{max-width:1000px;}.xwide{width:300px}.widenumber{max-width:100px;}.container,.container2{cursor:pointer;font-size:12pt;padding-left:35px}.container{display:block;height:30px;margin-left:4px;margin-top:0;position:relative;user-select:none}.checkmark.disabled{background-color:grey}.checkmark{height:25px;left:0;position:absolute;top:0;width:25px}.container .checkmark:after{border:solid #fff;border-width:0 3px 3px 0;height:10px;left:7px;top:3px;transform:rotate(45deg);width:5px}#toastmessage{background-color:var(--bg3)}.container2{margin-bottom:20px;margin-left:9px;position:relative;user-select:none}.dotmark{background-color:#eee;border-radius:50%;height:26px;left:0;position:absolute;top:0;width:26px}.container2 .dotmark:after{background:#fff;border-radius:50%;height:8px;left:8px;top:8px;width:8px}textarea{font-family:'Lucida Console',Monaco,monospace;max-height:60vh;width:-webkit-fill-available;width:-moz-available}#toastmessage{border-radius:5px;bottom:30%;color:#fff;font-size:17px;left:282px;margin-left:-125px;min-width:250px;padding:16px;position:fixed;text-align:center;visibility:hidden;z-index:1}#toastmessage.show{animation:fadein .5s,fadeout .5s 2.5s;visibility:visible}.container input,.container2 input{cursor:pointer;opacity:0;position:absolute}.container input:checked~.checkmark:after,.container2,.container2 input:checked~.dotmark:after{display:block}@keyframes fadein{from{bottom:20%;opacity:0}to{bottom:30%;opacity:.9}}@keyframes fadeout{from{bottom:30%;opacity:.9}to{bottom:0;opacity:0}}.level_0{color:#f1f1f1}.level_1{color:#fcff95}.level_2{color:#9dcefe}.level_3{color:#a4fc79}.level_4{color:#f2ab39}.level_9{color:#f50}.logviewer{background-color:#272727;color:#f1f1f1;overflow:auto;height:60vh}tbody{overflow:auto}.multirow th,.normal th{background-color:#444;border-color:var(--bdc1);color:var(--c1);padding:5px;width:100vw}.multirow,.normal{border-spacing:0;width:100%}.multirow tr,.normal td,.normal tr{padding:5px}.normal td{height:30px}.multirow td{border-color:var(--bdc1);height:30px;padding:4px;text-align:center}.tworow td,.tworow th{text-align:left}.sub{border-spacing:0;max-width:100px;display:block}textarea,.even tr:nth-child(2n),.tworow tr:nth-child(4n+3),.tworow tr:nth-child(4n+4){background-color:var(--bg4)}.apheader,.headermenu{padding:8px 12px;width:100vw}.note{color:#7b7b7b;font-style:italic}.headermenu{background-color:var(--bg11);border-bottom:.1px solid #444;height:100px;position:fixed;top:0;z-index:1}.bodymenu{height:100vh;padding-top:100px}.menubar{display:flex;position:inherit;top:54px;max-width:960px;width:100%;justify-content:space-evenly}a.menu{align-items:center;display:flex;height:46px;justify-content:center;gap:2px;width:100%}.menu{color:var(--c2);border:solid transparent 1px;border-radius:5px 5px 0 0;padding:10px 10px 8px;white-space:nowrap}.menu.active{background-color:var(--bg6);border-color:var(--bdc2);color:var(--c3);border-width:.1px}.menu:hover{background:var(--bg7);color:var(--c3)}.menu_button{display:none}.on{color:#029b34}.off{color:red}.div_r{background-color:var(--bg8);border-radius:4px;margin:2px;padding:1px 10px}.alert,.warning{color:#fff;margin-bottom:15px;padding:20px}.highlight td{background-color:var(--bg5)}.div_br{clear:both}.alert{background-color:#f44336}.warning{background-color:#ffca17}.closebtn{cursor:pointer;font-size:22px;line-height:20px;margin-left:15px;transition:.3s}.closebtn:hover{color:#000}section{overflow-x:auto;padding:10px 0}footer{padding:0 5px;word-break:break-all}body{background-color:var(--bg6)}.closebtn,.div_r{color:var(--c6)}a,h1,h6{color:var(--c5)}.button,.container input:checked~.checkmark:not(.disabled),.container2 input:checked~.dotmark{background-color:var(--bg10)}canvas{filter:invert(var(--iv)) hue-rotate(var(--ro));}@media screen and (max-width:960px){.showmenulabel{display:none}}@media screen and (max-width:450px){.normal{min-width:300px}input.wide:focus{left:4px;position:absolute;z-index:1}} \ No newline at end of file From e16b621c9622c90e70d538cc5179825d15d2aeb7 Mon Sep 17 00:00:00 2001 From: chromoxdor <33860956+chromoxdor@users.noreply.github.com> Date: Thu, 25 Sep 2025 18:21:57 +0200 Subject: [PATCH 2/3] no need here --- static/espeasy_default.css | 3 +-- static/espeasy_default.min.css | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/static/espeasy_default.css b/static/espeasy_default.css index 5d35795e6e..03accb4876 100644 --- a/static/espeasy_default.css +++ b/static/espeasy_default.css @@ -458,8 +458,7 @@ textarea, position: inherit; top: 54px; max-width: 960px; - width: 100%; - justify-content: space-evenly + width: 100% } a.menu { diff --git a/static/espeasy_default.min.css b/static/espeasy_default.min.css index 37f1792425..d258a6d057 100644 --- a/static/espeasy_default.min.css +++ b/static/espeasy_default.min.css @@ -1 +1 @@ -:root{--bg1:#eee;--bg2:#cacaca;--bg3:#07d;--c1:#fff;--bdc1:silver;--bg4:#e8e8e8;--bg5:#dbff0075;--c2:#444;--bg6:#fff;--bdc2:#444 #444 #fff;--c3:#000;--bg7:#bdbdbd;--bg8:#029b34;--c4:inherit;--c5:#07d;--bg10:#07d;--bg11:#f8f8f8;--c6:#fff;--ro:0deg;--iv:0;}[data-theme="dark"]{--bg1:#444;--bg2:#2e2e2e;--bg3:#00000085;--c1:#dfdfdf;--bdc1:#545454;--bg4:#2e2e2e;--bg5:#553044;--c2:#fff;--bg6:#222;--bdc2:transparent;--c3:#fff;--bg7:#00000030;--bg8:#30553d;--c4:#c3c3c3;--c5:#c3c3c3;--bg10:#44607a;--bg11:#44607a;--c6:#c3c3c3;--ro:180deg;--iv:1;}@media (prefers-color-scheme:dark){[data-theme="auto"]{--bg1:#444;--bg2:#2e2e2e;--bg3:#00000085;--c1:#dfdfdf;--bdc1:#545454;--bg4:#2e2e2e;--bg5:#553044;--c2:#fff;--bg6:#222;--bdc2:transparent;--c3:#fff;--bg7:#00000030;--bg8:#30553d;--bg9:#222;--c4:#c3c3c3;--c5:#c3c3c3;--bg10:#44607a;--bg11:#44607a;--c6:#c3c3c3;--ro:180deg;--iv:1}}*:not(font,a),.closebtn,.div_r,h1,h6,.wide,textarea{color:var(--c4)}.checkmark:after,.dotmark:after{content:'';display:none;position:absolute}.button,.menu{text-decoration:none}.div_l,.menu{float:left}.closebtn,.div_r{float:right}*{box-sizing:border-box;font-family:sans-serif;font-size:12pt;margin:0}h1{font-size:16pt;margin:8px 0}h3{background-color:var(--bg2);margin:-5px;padding:6px}h6{font-size:10pt}pre{font:1em monospace,monospace}.button{border:0;border-radius:5px;color:var(--c6);margin:5px;padding:5px 15px}input,select,.checkmark{background-color:var(--bg1)}.button.help,.checkmark,input,select,hr,textarea,#toastmessage,.dotmark,.logviewer{border:.1px solid gray;}input[disabled],input[disabled]:hover{background-color:var(--bg7);}.button.link.wide{display:inline-block;text-align:center;}.button.link.red{background-color:red}.button.help{border-radius:50%;font-family:monospace;padding:2px 7px}.checkmark,input,select,textarea{border-radius:5px}.button:hover{background:#369}input,select,textarea{margin:4px;padding:4px 8px}.wide{margin-bottom:5px;max-width:300px;min-width:85px;width:95%}textarea.wide{max-width:1000px;}.xwide{width:300px}.widenumber{max-width:100px;}.container,.container2{cursor:pointer;font-size:12pt;padding-left:35px}.container{display:block;height:30px;margin-left:4px;margin-top:0;position:relative;user-select:none}.checkmark.disabled{background-color:grey}.checkmark{height:25px;left:0;position:absolute;top:0;width:25px}.container .checkmark:after{border:solid #fff;border-width:0 3px 3px 0;height:10px;left:7px;top:3px;transform:rotate(45deg);width:5px}#toastmessage{background-color:var(--bg3)}.container2{margin-bottom:20px;margin-left:9px;position:relative;user-select:none}.dotmark{background-color:#eee;border-radius:50%;height:26px;left:0;position:absolute;top:0;width:26px}.container2 .dotmark:after{background:#fff;border-radius:50%;height:8px;left:8px;top:8px;width:8px}textarea{font-family:'Lucida Console',Monaco,monospace;max-height:60vh;width:-webkit-fill-available;width:-moz-available}#toastmessage{border-radius:5px;bottom:30%;color:#fff;font-size:17px;left:282px;margin-left:-125px;min-width:250px;padding:16px;position:fixed;text-align:center;visibility:hidden;z-index:1}#toastmessage.show{animation:fadein .5s,fadeout .5s 2.5s;visibility:visible}.container input,.container2 input{cursor:pointer;opacity:0;position:absolute}.container input:checked~.checkmark:after,.container2,.container2 input:checked~.dotmark:after{display:block}@keyframes fadein{from{bottom:20%;opacity:0}to{bottom:30%;opacity:.9}}@keyframes fadeout{from{bottom:30%;opacity:.9}to{bottom:0;opacity:0}}.level_0{color:#f1f1f1}.level_1{color:#fcff95}.level_2{color:#9dcefe}.level_3{color:#a4fc79}.level_4{color:#f2ab39}.level_9{color:#f50}.logviewer{background-color:#272727;color:#f1f1f1;overflow:auto;height:60vh}tbody{overflow:auto}.multirow th,.normal th{background-color:#444;border-color:var(--bdc1);color:var(--c1);padding:5px;width:100vw}.multirow,.normal{border-spacing:0;width:100%}.multirow tr,.normal td,.normal tr{padding:5px}.normal td{height:30px}.multirow td{border-color:var(--bdc1);height:30px;padding:4px;text-align:center}.tworow td,.tworow th{text-align:left}.sub{border-spacing:0;max-width:100px;display:block}textarea,.even tr:nth-child(2n),.tworow tr:nth-child(4n+3),.tworow tr:nth-child(4n+4){background-color:var(--bg4)}.apheader,.headermenu{padding:8px 12px;width:100vw}.note{color:#7b7b7b;font-style:italic}.headermenu{background-color:var(--bg11);border-bottom:.1px solid #444;height:100px;position:fixed;top:0;z-index:1}.bodymenu{height:100vh;padding-top:100px}.menubar{display:flex;position:inherit;top:54px;max-width:960px;width:100%;justify-content:space-evenly}a.menu{align-items:center;display:flex;height:46px;justify-content:center;gap:2px;width:100%}.menu{color:var(--c2);border:solid transparent 1px;border-radius:5px 5px 0 0;padding:10px 10px 8px;white-space:nowrap}.menu.active{background-color:var(--bg6);border-color:var(--bdc2);color:var(--c3);border-width:.1px}.menu:hover{background:var(--bg7);color:var(--c3)}.menu_button{display:none}.on{color:#029b34}.off{color:red}.div_r{background-color:var(--bg8);border-radius:4px;margin:2px;padding:1px 10px}.alert,.warning{color:#fff;margin-bottom:15px;padding:20px}.highlight td{background-color:var(--bg5)}.div_br{clear:both}.alert{background-color:#f44336}.warning{background-color:#ffca17}.closebtn{cursor:pointer;font-size:22px;line-height:20px;margin-left:15px;transition:.3s}.closebtn:hover{color:#000}section{overflow-x:auto;padding:10px 0}footer{padding:0 5px;word-break:break-all}body{background-color:var(--bg6)}.closebtn,.div_r{color:var(--c6)}a,h1,h6{color:var(--c5)}.button,.container input:checked~.checkmark:not(.disabled),.container2 input:checked~.dotmark{background-color:var(--bg10)}canvas{filter:invert(var(--iv)) hue-rotate(var(--ro));}@media screen and (max-width:960px){.showmenulabel{display:none}}@media screen and (max-width:450px){.normal{min-width:300px}input.wide:focus{left:4px;position:absolute;z-index:1}} \ No newline at end of file +:root{--bg1:#eee;--bg2:#cacaca;--bg3:#07d;--c1:#fff;--bdc1:silver;--bg4:#e8e8e8;--bg5:#dbff0075;--c2:#444;--bg6:#fff;--bdc2:#444 #444 #fff;--c3:#000;--bg7:#bdbdbd;--bg8:#029b34;--c4:inherit;--c5:#07d;--bg10:#07d;--bg11:#f8f8f8;--c6:#fff;--ro:0deg;--iv:0;}[data-theme="dark"]{--bg1:#444;--bg2:#2e2e2e;--bg3:#00000085;--c1:#dfdfdf;--bdc1:#545454;--bg4:#2e2e2e;--bg5:#553044;--c2:#fff;--bg6:#222;--bdc2:transparent;--c3:#fff;--bg7:#00000030;--bg8:#30553d;--c4:#c3c3c3;--c5:#c3c3c3;--bg10:#44607a;--bg11:#44607a;--c6:#c3c3c3;--ro:180deg;--iv:1;}@media (prefers-color-scheme:dark){[data-theme="auto"]{--bg1:#444;--bg2:#2e2e2e;--bg3:#00000085;--c1:#dfdfdf;--bdc1:#545454;--bg4:#2e2e2e;--bg5:#553044;--c2:#fff;--bg6:#222;--bdc2:transparent;--c3:#fff;--bg7:#00000030;--bg8:#30553d;--bg9:#222;--c4:#c3c3c3;--c5:#c3c3c3;--bg10:#44607a;--bg11:#44607a;--c6:#c3c3c3;--ro:180deg;--iv:1}}*:not(font,a),.closebtn,.div_r,h1,h6,.wide,textarea{color:var(--c4)}.checkmark:after,.dotmark:after{content:'';display:none;position:absolute}.button,.menu{text-decoration:none}.div_l,.menu{float:left}.closebtn,.div_r{float:right}*{box-sizing:border-box;font-family:sans-serif;font-size:12pt;margin:0}h1{font-size:16pt;margin:8px 0}h3{background-color:var(--bg2);margin:-5px;padding:6px}h6{font-size:10pt}pre{font:1em monospace,monospace}.button{border:0;border-radius:5px;color:var(--c6);margin:5px;padding:5px 15px}input,select,.checkmark{background-color:var(--bg1)}.button.help,.checkmark,input,select,hr,textarea,#toastmessage,.dotmark,.logviewer{border:.1px solid gray;}input[disabled],input[disabled]:hover{background-color:var(--bg7);}.button.link.wide{display:inline-block;text-align:center;}.button.link.red{background-color:red}.button.help{border-radius:50%;font-family:monospace;padding:2px 7px}.checkmark,input,select,textarea{border-radius:5px}.button:hover{background:#369}input,select,textarea{margin:4px;padding:4px 8px}.wide{margin-bottom:5px;max-width:300px;min-width:85px;width:95%}textarea.wide{max-width:1000px;}.xwide{width:300px}.widenumber{max-width:100px;}.container,.container2{cursor:pointer;font-size:12pt;padding-left:35px}.container{display:block;height:30px;margin-left:4px;margin-top:0;position:relative;user-select:none}.checkmark.disabled{background-color:grey}.checkmark{height:25px;left:0;position:absolute;top:0;width:25px}.container .checkmark:after{border:solid #fff;border-width:0 3px 3px 0;height:10px;left:7px;top:3px;transform:rotate(45deg);width:5px}#toastmessage{background-color:var(--bg3)}.container2{margin-bottom:20px;margin-left:9px;position:relative;user-select:none}.dotmark{background-color:#eee;border-radius:50%;height:26px;left:0;position:absolute;top:0;width:26px}.container2 .dotmark:after{background:#fff;border-radius:50%;height:8px;left:8px;top:8px;width:8px}textarea{font-family:'Lucida Console',Monaco,monospace;max-height:60vh;width:-webkit-fill-available;width:-moz-available}#toastmessage{border-radius:5px;bottom:30%;color:#fff;font-size:17px;left:282px;margin-left:-125px;min-width:250px;padding:16px;position:fixed;text-align:center;visibility:hidden;z-index:1}#toastmessage.show{animation:fadein .5s,fadeout .5s 2.5s;visibility:visible}.container input,.container2 input{cursor:pointer;opacity:0;position:absolute}.container input:checked~.checkmark:after,.container2,.container2 input:checked~.dotmark:after{display:block}@keyframes fadein{from{bottom:20%;opacity:0}to{bottom:30%;opacity:.9}}@keyframes fadeout{from{bottom:30%;opacity:.9}to{bottom:0;opacity:0}}.level_0{color:#f1f1f1}.level_1{color:#fcff95}.level_2{color:#9dcefe}.level_3{color:#a4fc79}.level_4{color:#f2ab39}.level_9{color:#f50}.logviewer{background-color:#272727;color:#f1f1f1;overflow:auto;height:60vh}tbody{overflow:auto}.multirow th,.normal th{background-color:#444;border-color:var(--bdc1);color:var(--c1);padding:5px;width:100vw}.multirow,.normal{border-spacing:0;width:100%}.multirow tr,.normal td,.normal tr{padding:5px}.normal td{height:30px}.multirow td{border-color:var(--bdc1);height:30px;padding:4px;text-align:center}.tworow td,.tworow th{text-align:left}.sub{border-spacing:0;max-width:100px;display:block}textarea,.even tr:nth-child(2n),.tworow tr:nth-child(4n+3),.tworow tr:nth-child(4n+4){background-color:var(--bg4)}.apheader,.headermenu{padding:8px 12px;width:100vw}.note{color:#7b7b7b;font-style:italic}.headermenu{background-color:var(--bg11);border-bottom:.1px solid #444;height:100px;position:fixed;top:0;z-index:1}.bodymenu{height:100vh;padding-top:100px}.menubar{display:flex;position:inherit;top:54px;max-width:960px;width:100%}a.menu{align-items:center;display:flex;height:46px;justify-content:center;gap:2px;width:100%}.menu{color:var(--c2);border:solid transparent 1px;border-radius:5px 5px 0 0;padding:10px 10px 8px;white-space:nowrap}.menu.active{background-color:var(--bg6);border-color:var(--bdc2);color:var(--c3);border-width:.1px}.menu:hover{background:var(--bg7);color:var(--c3)}.menu_button{display:none}.on{color:#029b34}.off{color:red}.div_r{background-color:var(--bg8);border-radius:4px;margin:2px;padding:1px 10px}.alert,.warning{color:#fff;margin-bottom:15px;padding:20px}.highlight td{background-color:var(--bg5)}.div_br{clear:both}.alert{background-color:#f44336}.warning{background-color:#ffca17}.closebtn{cursor:pointer;font-size:22px;line-height:20px;margin-left:15px;transition:.3s}.closebtn:hover{color:#000}section{overflow-x:auto;padding:10px 0}footer{padding:0 5px;word-break:break-all}body{background-color:var(--bg6)}.closebtn,.div_r{color:var(--c6)}a,h1,h6{color:var(--c5)}.button,.container input:checked~.checkmark:not(.disabled),.container2 input:checked~.dotmark{background-color:var(--bg10)}canvas{filter:invert(var(--iv)) hue-rotate(var(--ro));}@media screen and (max-width:960px){.showmenulabel{display:none}}@media screen and (max-width:450px){.normal{min-width:300px}input.wide:focus{left:4px;position:absolute;z-index:1}} \ No newline at end of file From 5a1a0cdc91028eaea8c3fd91615f071a3d4dc59d Mon Sep 17 00:00:00 2001 From: chromoxdor <33860956+chromoxdor@users.noreply.github.com> Date: Fri, 26 Sep 2025 11:19:20 +0200 Subject: [PATCH 3/3] [CSS] small update --- static/espeasy_default.css | 15 ++++++++++----- static/espeasy_default.min.css | 2 +- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/static/espeasy_default.css b/static/espeasy_default.css index 03accb4876..1540ac2b36 100644 --- a/static/espeasy_default.css +++ b/static/espeasy_default.css @@ -454,11 +454,10 @@ textarea, } .menubar { - display: flex; - position: inherit; - top: 54px; - max-width: 960px; - width: 100% + display: flex; + position: inherit; + top: 54px; + max-width: 960px; } a.menu { @@ -584,6 +583,12 @@ canvas { .showmenulabel { display: none } + + .menubar { + width: 100%; + max-width: 700px; + left: 0 + } } @media screen and (max-width:450px) { diff --git a/static/espeasy_default.min.css b/static/espeasy_default.min.css index d258a6d057..53e3076a28 100644 --- a/static/espeasy_default.min.css +++ b/static/espeasy_default.min.css @@ -1 +1 @@ -:root{--bg1:#eee;--bg2:#cacaca;--bg3:#07d;--c1:#fff;--bdc1:silver;--bg4:#e8e8e8;--bg5:#dbff0075;--c2:#444;--bg6:#fff;--bdc2:#444 #444 #fff;--c3:#000;--bg7:#bdbdbd;--bg8:#029b34;--c4:inherit;--c5:#07d;--bg10:#07d;--bg11:#f8f8f8;--c6:#fff;--ro:0deg;--iv:0;}[data-theme="dark"]{--bg1:#444;--bg2:#2e2e2e;--bg3:#00000085;--c1:#dfdfdf;--bdc1:#545454;--bg4:#2e2e2e;--bg5:#553044;--c2:#fff;--bg6:#222;--bdc2:transparent;--c3:#fff;--bg7:#00000030;--bg8:#30553d;--c4:#c3c3c3;--c5:#c3c3c3;--bg10:#44607a;--bg11:#44607a;--c6:#c3c3c3;--ro:180deg;--iv:1;}@media (prefers-color-scheme:dark){[data-theme="auto"]{--bg1:#444;--bg2:#2e2e2e;--bg3:#00000085;--c1:#dfdfdf;--bdc1:#545454;--bg4:#2e2e2e;--bg5:#553044;--c2:#fff;--bg6:#222;--bdc2:transparent;--c3:#fff;--bg7:#00000030;--bg8:#30553d;--bg9:#222;--c4:#c3c3c3;--c5:#c3c3c3;--bg10:#44607a;--bg11:#44607a;--c6:#c3c3c3;--ro:180deg;--iv:1}}*:not(font,a),.closebtn,.div_r,h1,h6,.wide,textarea{color:var(--c4)}.checkmark:after,.dotmark:after{content:'';display:none;position:absolute}.button,.menu{text-decoration:none}.div_l,.menu{float:left}.closebtn,.div_r{float:right}*{box-sizing:border-box;font-family:sans-serif;font-size:12pt;margin:0}h1{font-size:16pt;margin:8px 0}h3{background-color:var(--bg2);margin:-5px;padding:6px}h6{font-size:10pt}pre{font:1em monospace,monospace}.button{border:0;border-radius:5px;color:var(--c6);margin:5px;padding:5px 15px}input,select,.checkmark{background-color:var(--bg1)}.button.help,.checkmark,input,select,hr,textarea,#toastmessage,.dotmark,.logviewer{border:.1px solid gray;}input[disabled],input[disabled]:hover{background-color:var(--bg7);}.button.link.wide{display:inline-block;text-align:center;}.button.link.red{background-color:red}.button.help{border-radius:50%;font-family:monospace;padding:2px 7px}.checkmark,input,select,textarea{border-radius:5px}.button:hover{background:#369}input,select,textarea{margin:4px;padding:4px 8px}.wide{margin-bottom:5px;max-width:300px;min-width:85px;width:95%}textarea.wide{max-width:1000px;}.xwide{width:300px}.widenumber{max-width:100px;}.container,.container2{cursor:pointer;font-size:12pt;padding-left:35px}.container{display:block;height:30px;margin-left:4px;margin-top:0;position:relative;user-select:none}.checkmark.disabled{background-color:grey}.checkmark{height:25px;left:0;position:absolute;top:0;width:25px}.container .checkmark:after{border:solid #fff;border-width:0 3px 3px 0;height:10px;left:7px;top:3px;transform:rotate(45deg);width:5px}#toastmessage{background-color:var(--bg3)}.container2{margin-bottom:20px;margin-left:9px;position:relative;user-select:none}.dotmark{background-color:#eee;border-radius:50%;height:26px;left:0;position:absolute;top:0;width:26px}.container2 .dotmark:after{background:#fff;border-radius:50%;height:8px;left:8px;top:8px;width:8px}textarea{font-family:'Lucida Console',Monaco,monospace;max-height:60vh;width:-webkit-fill-available;width:-moz-available}#toastmessage{border-radius:5px;bottom:30%;color:#fff;font-size:17px;left:282px;margin-left:-125px;min-width:250px;padding:16px;position:fixed;text-align:center;visibility:hidden;z-index:1}#toastmessage.show{animation:fadein .5s,fadeout .5s 2.5s;visibility:visible}.container input,.container2 input{cursor:pointer;opacity:0;position:absolute}.container input:checked~.checkmark:after,.container2,.container2 input:checked~.dotmark:after{display:block}@keyframes fadein{from{bottom:20%;opacity:0}to{bottom:30%;opacity:.9}}@keyframes fadeout{from{bottom:30%;opacity:.9}to{bottom:0;opacity:0}}.level_0{color:#f1f1f1}.level_1{color:#fcff95}.level_2{color:#9dcefe}.level_3{color:#a4fc79}.level_4{color:#f2ab39}.level_9{color:#f50}.logviewer{background-color:#272727;color:#f1f1f1;overflow:auto;height:60vh}tbody{overflow:auto}.multirow th,.normal th{background-color:#444;border-color:var(--bdc1);color:var(--c1);padding:5px;width:100vw}.multirow,.normal{border-spacing:0;width:100%}.multirow tr,.normal td,.normal tr{padding:5px}.normal td{height:30px}.multirow td{border-color:var(--bdc1);height:30px;padding:4px;text-align:center}.tworow td,.tworow th{text-align:left}.sub{border-spacing:0;max-width:100px;display:block}textarea,.even tr:nth-child(2n),.tworow tr:nth-child(4n+3),.tworow tr:nth-child(4n+4){background-color:var(--bg4)}.apheader,.headermenu{padding:8px 12px;width:100vw}.note{color:#7b7b7b;font-style:italic}.headermenu{background-color:var(--bg11);border-bottom:.1px solid #444;height:100px;position:fixed;top:0;z-index:1}.bodymenu{height:100vh;padding-top:100px}.menubar{display:flex;position:inherit;top:54px;max-width:960px;width:100%}a.menu{align-items:center;display:flex;height:46px;justify-content:center;gap:2px;width:100%}.menu{color:var(--c2);border:solid transparent 1px;border-radius:5px 5px 0 0;padding:10px 10px 8px;white-space:nowrap}.menu.active{background-color:var(--bg6);border-color:var(--bdc2);color:var(--c3);border-width:.1px}.menu:hover{background:var(--bg7);color:var(--c3)}.menu_button{display:none}.on{color:#029b34}.off{color:red}.div_r{background-color:var(--bg8);border-radius:4px;margin:2px;padding:1px 10px}.alert,.warning{color:#fff;margin-bottom:15px;padding:20px}.highlight td{background-color:var(--bg5)}.div_br{clear:both}.alert{background-color:#f44336}.warning{background-color:#ffca17}.closebtn{cursor:pointer;font-size:22px;line-height:20px;margin-left:15px;transition:.3s}.closebtn:hover{color:#000}section{overflow-x:auto;padding:10px 0}footer{padding:0 5px;word-break:break-all}body{background-color:var(--bg6)}.closebtn,.div_r{color:var(--c6)}a,h1,h6{color:var(--c5)}.button,.container input:checked~.checkmark:not(.disabled),.container2 input:checked~.dotmark{background-color:var(--bg10)}canvas{filter:invert(var(--iv)) hue-rotate(var(--ro));}@media screen and (max-width:960px){.showmenulabel{display:none}}@media screen and (max-width:450px){.normal{min-width:300px}input.wide:focus{left:4px;position:absolute;z-index:1}} \ No newline at end of file +:root{--bg1:#eee;--bg2:#cacaca;--bg3:#07d;--c1:#fff;--bdc1:silver;--bg4:#e8e8e8;--bg5:#dbff0075;--c2:#444;--bg6:#fff;--bdc2:#444 #444 #fff;--c3:#000;--bg7:#bdbdbd;--bg8:#029b34;--c4:inherit;--c5:#07d;--bg10:#07d;--bg11:#f8f8f8;--c6:#fff;--ro:0deg;--iv:0;}[data-theme="dark"]{--bg1:#444;--bg2:#2e2e2e;--bg3:#00000085;--c1:#dfdfdf;--bdc1:#545454;--bg4:#2e2e2e;--bg5:#553044;--c2:#fff;--bg6:#222;--bdc2:transparent;--c3:#fff;--bg7:#00000030;--bg8:#30553d;--c4:#c3c3c3;--c5:#c3c3c3;--bg10:#44607a;--bg11:#44607a;--c6:#c3c3c3;--ro:180deg;--iv:1;}@media (prefers-color-scheme:dark){[data-theme="auto"]{--bg1:#444;--bg2:#2e2e2e;--bg3:#00000085;--c1:#dfdfdf;--bdc1:#545454;--bg4:#2e2e2e;--bg5:#553044;--c2:#fff;--bg6:#222;--bdc2:transparent;--c3:#fff;--bg7:#00000030;--bg8:#30553d;--bg9:#222;--c4:#c3c3c3;--c5:#c3c3c3;--bg10:#44607a;--bg11:#44607a;--c6:#c3c3c3;--ro:180deg;--iv:1}}*:not(font,a),.closebtn,.div_r,h1,h6,.wide,textarea{color:var(--c4)}.checkmark:after,.dotmark:after{content:'';display:none;position:absolute}.button,.menu{text-decoration:none}.div_l,.menu{float:left}.closebtn,.div_r{float:right}*{box-sizing:border-box;font-family:sans-serif;font-size:12pt;margin:0}h1{font-size:16pt;margin:8px 0}h3{background-color:var(--bg2);margin:-5px;padding:6px}h6{font-size:10pt}pre{font:1em monospace,monospace}.button{border:0;border-radius:5px;color:var(--c6);margin:5px;padding:5px 15px}input,select,.checkmark{background-color:var(--bg1)}.button.help,.checkmark,input,select,hr,textarea,#toastmessage,.dotmark,.logviewer{border:.1px solid gray;}input[disabled],input[disabled]:hover{background-color:var(--bg7);}.button.link.wide{display:inline-block;text-align:center;}.button.link.red{background-color:red}.button.help{border-radius:50%;font-family:monospace;padding:2px 7px}.checkmark,input,select,textarea{border-radius:5px}.button:hover{background:#369}input,select,textarea{margin:4px;padding:4px 8px}.wide{margin-bottom:5px;max-width:300px;min-width:85px;width:95%}textarea.wide{max-width:1000px;}.xwide{width:300px}.widenumber{max-width:100px;}.container,.container2{cursor:pointer;font-size:12pt;padding-left:35px}.container{display:block;height:30px;margin-left:4px;margin-top:0;position:relative;user-select:none}.checkmark.disabled{background-color:grey}.checkmark{height:25px;left:0;position:absolute;top:0;width:25px}.container .checkmark:after{border:solid #fff;border-width:0 3px 3px 0;height:10px;left:7px;top:3px;transform:rotate(45deg);width:5px}#toastmessage{background-color:var(--bg3)}.container2{margin-bottom:20px;margin-left:9px;position:relative;user-select:none}.dotmark{background-color:#eee;border-radius:50%;height:26px;left:0;position:absolute;top:0;width:26px}.container2 .dotmark:after{background:#fff;border-radius:50%;height:8px;left:8px;top:8px;width:8px}textarea{font-family:'Lucida Console',Monaco,monospace;max-height:60vh;width:-webkit-fill-available;width:-moz-available}#toastmessage{border-radius:5px;bottom:30%;color:#fff;font-size:17px;left:282px;margin-left:-125px;min-width:250px;padding:16px;position:fixed;text-align:center;visibility:hidden;z-index:1}#toastmessage.show{animation:fadein .5s,fadeout .5s 2.5s;visibility:visible}.container input,.container2 input{cursor:pointer;opacity:0;position:absolute}.container input:checked~.checkmark:after,.container2,.container2 input:checked~.dotmark:after{display:block}@keyframes fadein{from{bottom:20%;opacity:0}to{bottom:30%;opacity:.9}}@keyframes fadeout{from{bottom:30%;opacity:.9}to{bottom:0;opacity:0}}.level_0{color:#f1f1f1}.level_1{color:#fcff95}.level_2{color:#9dcefe}.level_3{color:#a4fc79}.level_4{color:#f2ab39}.level_9{color:#f50}.logviewer{background-color:#272727;color:#f1f1f1;overflow:auto;height:60vh}tbody{overflow:auto}.multirow th,.normal th{background-color:#444;border-color:var(--bdc1);color:var(--c1);padding:5px;width:100vw}.multirow,.normal{border-spacing:0;width:100%}.multirow tr,.normal td,.normal tr{padding:5px}.normal td{height:30px}.multirow td{border-color:var(--bdc1);height:30px;padding:4px;text-align:center}.tworow td,.tworow th{text-align:left}.sub{border-spacing:0;max-width:100px;display:block}textarea,.even tr:nth-child(2n),.tworow tr:nth-child(4n+3),.tworow tr:nth-child(4n+4){background-color:var(--bg4)}.apheader,.headermenu{padding:8px 12px;width:100vw}.note{color:#7b7b7b;font-style:italic}.headermenu{background-color:var(--bg11);border-bottom:.1px solid #444;height:100px;position:fixed;top:0;z-index:1}.bodymenu{height:100vh;padding-top:100px}.menubar{display:flex;position:inherit;top:54px;max-width:960px;}a.menu{align-items:center;display:flex;height:46px;justify-content:center;gap:2px;width:100%}.menu{color:var(--c2);border:solid transparent 1px;border-radius:5px 5px 0 0;padding:10px 10px 8px;white-space:nowrap}.menu.active{background-color:var(--bg6);border-color:var(--bdc2);color:var(--c3);border-width:.1px}.menu:hover{background:var(--bg7);color:var(--c3)}.menu_button{display:none}.on{color:#029b34}.off{color:red}.div_r{background-color:var(--bg8);border-radius:4px;margin:2px;padding:1px 10px}.alert,.warning{color:#fff;margin-bottom:15px;padding:20px}.highlight td{background-color:var(--bg5)}.div_br{clear:both}.alert{background-color:#f44336}.warning{background-color:#ffca17}.closebtn{cursor:pointer;font-size:22px;line-height:20px;margin-left:15px;transition:.3s}.closebtn:hover{color:#000}section{overflow-x:auto;padding:10px 0}footer{padding:0 5px;word-break:break-all}body{background-color:var(--bg6)}.closebtn,.div_r{color:var(--c6)}a,h1,h6{color:var(--c5)}.button,.container input:checked~.checkmark:not(.disabled),.container2 input:checked~.dotmark{background-color:var(--bg10)}canvas{filter:invert(var(--iv)) hue-rotate(var(--ro));}@media screen and (max-width:960px){.showmenulabel{display:none}.menubar{width:100%;max-width:700px;left:0}}@media screen and (max-width:450px){.normal{min-width:300px}input.wide:focus{left:4px;position:absolute;z-index:1}} \ No newline at end of file