diff --git a/resources/web/guide/11/earth.png b/resources/web/guide/11/earth.png index 1b15fb712e..be8ffa44fb 100644 Binary files a/resources/web/guide/11/earth.png and b/resources/web/guide/11/earth.png differ diff --git a/resources/web/guide/11/tip.png b/resources/web/guide/11/tip.png index 1e64a958df..3bda75771a 100644 Binary files a/resources/web/guide/11/tip.png and b/resources/web/guide/11/tip.png differ diff --git a/resources/web/guide/21/21.css b/resources/web/guide/21/21.css index 933f823080..c0c7bfbd93 100644 --- a/resources/web/guide/21/21.css +++ b/resources/web/guide/21/21.css @@ -1,7 +1,7 @@ - #Content { overflow-y:auto; + padding: 32px; /* ORCA Specify & Reduce horizontal paddings to fit 4 items per row */ } .BlockBanner @@ -21,7 +21,11 @@ align-items: center; height: 40px; text-align: center; - margin-right: 10px; + margin-right: 0px; /* ORCA align buttons with end of horizontal separator/line */ +} + +.BannerBtns>.SmallBtn_Green.trans{ + margin-right: 7px; /* ORCA adds a small gap between buttons */ } .BlockBanner a @@ -36,7 +40,7 @@ .PrinterArea { - padding: 10px; + padding: 10px 0px; /* ORCA Reduce horizontal paddings to fit 4 items per row */ display: flex; flex-wrap: wrap; } @@ -57,7 +61,7 @@ .PName { font-weight: 700; - text-align: left; + text-align:left; } .pNozzel @@ -66,7 +70,7 @@ align-items: center; justify-content:flex-start; color: #5A5A5A; - padding-left: 10px; + padding-left: 0px; /* ORCA Align checkboxes with with model text */ } .pNozzel input @@ -129,26 +133,47 @@ width: 100%; position: relative; display: flex; - } +} - .searchTerm { +.searchTerm { width: 100%; - border: 3px solid #009688; + border: 1px solid #DBDBDB; /* ORCA Searchbox > match border style */ /*border-right: none;*/ padding: 5px; - height: 20px; + padding-left:32px; + height: 20px; /* ORCA match height */ + line-height: 20px; /* ORCA center text vertically */ border-radius: 5px 5px 5px 5px; outline: none; color: #9DBFAF; - } - - .searchTerm:focus{ - color: #009688; - } - - /*Resize the wrap to see the search bar change!*/ - .wrap{ +} +@media (prefers-color-scheme: dark) { /* ORCA Searchbox > add dark mode support */ + .searchTerm {border: 1px solid #4A4A51;} +} + +.searchTerm:focus{ + color: #363636; /* ORCA Searchbox > use normal text color */ + border-color:#009688; /* ORCA Searchbox > highlight border color when focused. like on normal UI */ +} +@media (prefers-color-scheme: dark) { /* ORCA Searchbox > add dark mode support */ + .searchTerm:focus{color: #FFFFFF} +} + +#search-icon{ /* ORCA */ + position:absolute; + top: 50%; + transform: translateY(-50%); + left:8px; + margin:0px auto; + fill:#7C8282 +} +@media (prefers-color-scheme: dark) { /* ORCA Searchbox > add dark mode support */ + #search-icon{fill:#949494} +} + +/*Resize the wrap to see the search bar change!*/ +.wrap{ width: 30%; padding-bottom: 5px; - padding-left: 42px; - } \ No newline at end of file + padding-left: 32px; /* ORCA Align with content */ +} diff --git a/resources/web/guide/21/21.js b/resources/web/guide/21/21.js index deca4516d0..4ade5cb150 100644 --- a/resources/web/guide/21/21.js +++ b/resources/web/guide/21/21.js @@ -98,7 +98,8 @@ function HandleModelList( pVal ) for(let m=0;m'+nNozzel+'mm nozzle'; + /* ORCA use label tag to allow checkbox to toggle when user ckicked to text */ + HtmlNozzel += ''; } let CoverImage=OneModel['cover']; @@ -261,7 +262,8 @@ function FilterModelList(keyword) { let HtmlNozzel = ''; for (let m = 0; m < NozzleArray.length; m++) { let nNozzel = NozzleArray[m]; - HtmlNozzel += '
' + nNozzel + 'mm nozzle
'; + /* ORCA use label tag to allow checkbox to toggle when user ckicked to text */ + HtmlNozzel += ''; } let CoverImage = OneModel['cover']; diff --git a/resources/web/guide/21/index.html b/resources/web/guide/21/index.html index 3e19309d19..5122ccec49 100644 --- a/resources/web/guide/21/index.html +++ b/resources/web/guide/21/index.html @@ -22,6 +22,10 @@
+ + + +
diff --git a/resources/web/guide/22/22.css b/resources/web/guide/22/22.css index 0a542a4645..8f8abac0a9 100644 --- a/resources/web/guide/22/22.css +++ b/resources/web/guide/22/22.css @@ -60,7 +60,7 @@ input .MItem { - min-width: 220px; + min-width: 180px; /* ORCA Filtered items > slightly reduce min width to fit more items*/ height: 32px; } diff --git a/resources/web/guide/22/22.js b/resources/web/guide/22/22.js index ce75dd59eb..73a4110b2a 100644 --- a/resources/web/guide/22/22.js +++ b/resources/web/guide/22/22.js @@ -95,8 +95,8 @@ function SortUI() for(let n=0;n'+sModel['model']+'
'; + /* ORCA use label tag to allow checkbox to toggle when user ckicked to text */ + HtmlMode+=''; } $('#MachineList .CValues').append(HtmlMode); @@ -172,7 +172,8 @@ function SortUI() let LowType=fType.toLowerCase(); if(!TypeHtmlArray.hasOwnProperty(LowType)) { - let HtmlType='
'+fType+'
'; + /* ORCA use label tag to allow checkbox to toggle when user ckicked to text */ + let HtmlType=''; TypeHtmlArray[LowType]=HtmlType; } @@ -181,7 +182,8 @@ function SortUI() let lowVendor=fVendor.toLowerCase(); if(!VendorHtmlArray.hasOwnProperty(lowVendor)) { - let HtmlVendor='
'+fVendor+'
'; + /* ORCA use label tag to allow checkbox to toggle when user ckicked to text */ + let HtmlVendor=''; VendorHtmlArray[lowVendor]=HtmlVendor; } @@ -190,7 +192,8 @@ function SortUI() let pFila=$("#ItemBlockArea input[vendor='"+fVendor+"'][filatype='"+fType+"'][name='"+fShortName+"']"); if(pFila.length==0) { - let HtmlFila='
'+fShortName+'
'; + /* ORCA use label tag to allow checkbox to toggle when user ckicked to text */ + let HtmlFila=''; $("#ItemBlockArea").append(HtmlFila); } diff --git a/resources/web/guide/22/index.html b/resources/web/guide/22/index.html index 6e379d2a0b..cf8e26e7d6 100644 --- a/resources/web/guide/22/index.html +++ b/resources/web/guide/22/index.html @@ -24,7 +24,7 @@
printer：
-
all
+ + + +
diff --git a/resources/web/guide/3/index.html b/resources/web/guide/3/index.html index c9ae0994bd..836811bf84 100644 --- a/resources/web/guide/3/index.html +++ b/resources/web/guide/3/index.html @@ -26,10 +26,10 @@

-
+
+
Back
diff --git a/resources/web/guide/31/index.html b/resources/web/guide/31/index.html index 965d1538ae..65b81fd420 100644 --- a/resources/web/guide/31/index.html +++ b/resources/web/guide/31/index.html @@ -25,10 +25,10 @@

-
+
+
Back
diff --git a/resources/web/guide/4orca/4orca.css b/resources/web/guide/4orca/4orca.css index f12a7860fe..d2ffcd8469 100644 --- a/resources/web/guide/4orca/4orca.css +++ b/resources/web/guide/4orca/4orca.css @@ -16,12 +16,12 @@ margin-top:10mm; line-height: 30px; } - +/* ORCA brokes shape of custom css checkbox #StealthMode { width: 30px; } - +*/ #RestartText { padding-left:30px; diff --git a/resources/web/guide/4orca/index.html b/resources/web/guide/4orca/index.html index 975123eabc..c108144a81 100644 --- a/resources/web/guide/4orca/index.html +++ b/resources/web/guide/4orca/index.html @@ -25,8 +25,8 @@
- -
Enable Stealth Mode.
+ +
diff --git a/resources/web/guide/5/5.css b/resources/web/guide/5/5.css index 52d3248faa..8dd1cdc1f3 100644 --- a/resources/web/guide/5/5.css +++ b/resources/web/guide/5/5.css @@ -16,11 +16,12 @@ margin-top:10mm; line-height: 30px; } - +/* ORCA brokes shape of custom css checkbox #InstallCheck { width: 30px; } +*/ #RestartText { diff --git a/resources/web/guide/5/index.html b/resources/web/guide/5/index.html index aa838c1515..96357328d6 100644 --- a/resources/web/guide/5/index.html +++ b/resources/web/guide/5/index.html @@ -31,8 +31,8 @@ - -
Install Bambu Network Plug-in.
+ +
diff --git a/resources/web/guide/css/common.css b/resources/web/guide/css/common.css index 411b219ee4..11eac6d01a 100644 --- a/resources/web/guide/css/common.css +++ b/resources/web/guide/css/common.css @@ -133,16 +133,17 @@ body padding: 3mm 9mm; font-size: 14px; text-align: center; - border: 1px solid #575757; + /* border: 1px solid #575757; */ /* ORCA match button style */ border-radius: 18px; - color: #575757; + background-color: #D9D9D9; + color: #000; /* ORCA match button style */ cursor: pointer; margin-left: 10px; } .GrayBtn:hover { - background-color:#E8E8E8; + background-color:#CCCCCC; /* ORCA match button style */ } .SmallBtn @@ -189,6 +190,50 @@ body cursor: pointer; } +/*---Checkboxes ORCA ---*/ +label:has(input[type="checkbox"]){ + margin:0; + padding: 0; + margin-right: 20px; +} + +label:has(input[type="checkbox"])>span{ + vertical-align: middle; + margin:0; +} + +input[type="checkbox"] { + -webkit-appearance: none; + appearance: none; + background-color:#FFFFFF; + margin:0; + margin-right: 6px; + width: 1em; + height: 1em; + border: 0.1em solid #DBDBDB; + border-radius: 0.15em; + display: inline-flex; + place-content: center; + background-color:#FFFFFF; +} + +input[type="checkbox"]::before { + content: ""; + width: 0.8em; + height: 0.8em; + transform: scale(0); + box-shadow: inset 1em 1em #FFFFFF; + clip-path: polygon(7% 37%, 0 45%, 33% 78%, 100% 30%, 95% 21%, 33% 64%); +} + +input[type="checkbox"]:checked { + border-color:#009688; + background-color:#009688; +} + +input[type="checkbox"]:checked::before { + transform: scale(1); +} /*----------------Light Mode-------------------*/ diff --git a/resources/web/guide/css/dark.css b/resources/web/guide/css/dark.css index ff3a22c342..4ba7e79baf 100644 --- a/resources/web/guide/css/dark.css +++ b/resources/web/guide/css/dark.css @@ -6,7 +6,7 @@ body { - background-color:#3E3E45; + background-color:#2D2D31; /* ORCA match background color */ color: #efeff0; } @@ -23,17 +23,32 @@ body color: #009688; } -/*-----Button-----*/ -.GrayBtn -{ - border: 1px solid #B9B9BC; - color: #B9B9BC; +.search>input[type=text]{ + background-color:#2D2D31; } -.GrayBtn:hover +/*---Checkboxes ORCA---*/ +input[type=checkbox]{ + background-color:#2D2D31; + border-color:#4A4A51; +} + +input[type=checkbox]:checked{ + background-color:#009688; +} + +/*-----Button-----*/ +.GrayBtn, .SmallBtn /* ORCA match button style GrayBtn & SmallBtn */ { - background-color:#E8E8E8; - color: #565656; + background-color:#3E3E45; + /* border: 1px solid #B9B9BC; */ + color: #FFFFFF; +} + +.GrayBtn:hover, .SmallBtn:hover /* ORCA match button style GrayBtn & SmallBtn */ +{ + background-color:#49494E; + color: #FFFFFF; } /*-------Text------*/