From aafc1064d9f0e55987d6dcdd8b99c320dfb1a314 Mon Sep 17 00:00:00 2001 From: Chocobo1 Date: Fri, 22 Oct 2021 13:51:45 +0800 Subject: [PATCH 1/7] Disable CSS selector naming rule --- src/webui/www/.stylelintrc.json | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/webui/www/.stylelintrc.json b/src/webui/www/.stylelintrc.json index a1a4aa148..76a8c17b5 100644 --- a/src/webui/www/.stylelintrc.json +++ b/src/webui/www/.stylelintrc.json @@ -12,7 +12,9 @@ "indentation": 4, "length-zero-no-unit": null, "no-descending-specificity": null, - "value-keyword-case": null, - "order/properties-alphabetical-order": true + "order/properties-alphabetical-order": true, + "selector-class-pattern": null, + "selector-id-pattern": null, + "value-keyword-case": null } } From 6226dd5b80e6352c92065cabd1767e382a4dd723 Mon Sep 17 00:00:00 2001 From: Chocobo1 Date: Fri, 22 Oct 2021 13:57:26 +0800 Subject: [PATCH 2/7] Add quotes to URL in CSS files Better add quotes: https://stackoverflow.com/a/34383157 --- src/webui/www/private/css/Layout.css | 28 +++++++++++----------- src/webui/www/private/css/Tabs.css | 10 ++++---- src/webui/www/private/css/Window.css | 8 +++---- src/webui/www/private/css/dynamicTable.css | 4 ++-- src/webui/www/private/css/style.css | 10 ++++---- 5 files changed, 30 insertions(+), 30 deletions(-) diff --git a/src/webui/www/private/css/Layout.css b/src/webui/www/private/css/Layout.css index 876344186..e231492dc 100644 --- a/src/webui/www/private/css/Layout.css +++ b/src/webui/www/private/css/Layout.css @@ -41,14 +41,14 @@ body { } #desktopTitlebarWrapper { - background: #718ba6 url(../images/bg-header.gif) repeat-x; + background: #718ba6 url("../images/bg-header.gif") repeat-x; height: 45px; overflow: hidden; position: relative; } #desktopTitlebar { - background: url(../images/logo.gif) no-repeat; + background: url("../images/logo.gif") no-repeat; background-position: left 0; height: 32px; padding: 7px 8px 6px 8px; @@ -138,13 +138,13 @@ body { #desktopNavbar ul li a.arrow-right, #desktopNavbar ul li a:hover.arrow-right { - background-image: url(../images/arrow-right.gif); + background-image: url("../images/arrow-right.gif"); background-position: right 7px; background-repeat: no-repeat; } #desktopNavbar li ul { - background: #fff url(../images/bg-dropdown.gif) repeat-y; + background: #fff url("../images/bg-dropdown.gif") repeat-y; border: 1px solid #3f3f3f; left: -999em; margin-top: -6px; @@ -283,7 +283,7 @@ li.divider { } .panel-header { - background: #f1f1f1 url(../images/bg-panel-header.gif) repeat-x; + background: #f1f1f1 url("../images/bg-panel-header.gif") repeat-x; border-bottom: 1px solid #d3d3d3; height: 30px; overflow: hidden; @@ -295,7 +295,7 @@ li.divider { } .panel-headerContent.tabs { - background: url(../images/tabs.gif) repeat-x; + background: url("../images/tabs.gif") repeat-x; background-position: left -68px; } @@ -310,11 +310,11 @@ li.divider { } .panel-collapse { - background: url(../icons/collapse.svg) left top no-repeat; + background: url("../icons/collapse.svg") left top no-repeat; } .panel-expand { - background: url(../icons/collapse.svg) left top no-repeat; + background: url("../icons/collapse.svg") left top no-repeat; transform: rotate(180deg); } @@ -326,7 +326,7 @@ li.divider { /* Column and Panel Handles */ .horizontalHandle { - background: #eee url(../images/bg-handle-horizontal.gif) repeat-x; + background: #eee url("../images/bg-handle-horizontal.gif") repeat-x; font-size: 1px; height: 4px; line-height: 1px; @@ -338,7 +338,7 @@ li.divider { } .horizontalHandle .handleIcon { - background: url(../images/handle-icon-horizontal.gif) center center + background: url("../images/handle-icon-horizontal.gif") center center no-repeat; font-size: 1px; height: 4px; @@ -348,7 +348,7 @@ li.divider { } .columnHandle { - background: #c3c3c3 url(../images/handle-icon.gif) center center no-repeat; + background: #c3c3c3 url("../images/handle-icon.gif") center center no-repeat; border: 1px solid #909090; border-bottom: 0; border-top: 0; @@ -371,7 +371,7 @@ li.divider { /* Have to specify div here for IE6's sake */ div.toolbox.divider { - background: url(../images/toolbox-divider.gif) repeat-y; + background: url("../images/toolbox-divider.gif") repeat-y; padding-left: 8px; } @@ -404,14 +404,14 @@ div.toolbox.divider { } #spinnerWrapper { - background: url(../images/spinner-placeholder.gif) no-repeat; + background: url("../images/spinner-placeholder.gif") no-repeat; height: 16px; margin: 4px 5px 0 5px; width: 16px; } #spinner { - background: url(../images/spinner.gif) no-repeat; + background: url("../images/spinner.gif") no-repeat; display: none; height: 16px; width: 16px; diff --git a/src/webui/www/private/css/Tabs.css b/src/webui/www/private/css/Tabs.css index d99354735..6626f8f41 100644 --- a/src/webui/www/private/css/Tabs.css +++ b/src/webui/www/private/css/Tabs.css @@ -18,7 +18,7 @@ Required by: /* Toolbar Tabs */ .toolbarTabs { - background: url(../images/tabs.gif) repeat-x; + background: url("../images/tabs.gif") repeat-x; background-position: left -70px; overflow: visible; padding: 0 5px 2px 2px; @@ -33,7 +33,7 @@ Required by: } .tab-menu li { - background: url(../images/tabs.gif) repeat-x; + background: url("../images/tabs.gif") repeat-x; background-position: left -35px; cursor: pointer; float: left; @@ -41,12 +41,12 @@ Required by: } .tab-menu li.selected { - background: url(../images/tabs.gif) repeat-x; + background: url("../images/tabs.gif") repeat-x; background-position: left 0; } .tab-menu li a { - background: url(../images/tabs.gif) repeat-x; + background: url("../images/tabs.gif") repeat-x; background-position: right -35px; color: #181818; display: block; @@ -57,7 +57,7 @@ Required by: } .tab-menu li.selected a { - background: url(../images/tabs.gif) repeat-x; + background: url("../images/tabs.gif") repeat-x; background-position: right 0; color: #181818; font-weight: bold; diff --git a/src/webui/www/private/css/Window.css b/src/webui/www/private/css/Window.css index 10704ec5d..fb57231bf 100644 --- a/src/webui/www/private/css/Window.css +++ b/src/webui/www/private/css/Window.css @@ -42,7 +42,7 @@ Required by: */ .mochaTitlebar { - background: url(../images/spacer.gif?from=fafafa&to=e5e5e5); + background: url("../images/spacer.gif?from=fafafa&to=e5e5e5"); overflow: hidden; width: 100%; } @@ -178,7 +178,7 @@ div.mochaToolbarWrapper.bottom { } .mochaSpinner { - background: url(../images/spinner.gif) no-repeat; + background: url("../images/spinner.gif") no-repeat; bottom: 7px; display: none; height: 16px; @@ -337,7 +337,7 @@ div.mochaToolbarWrapper.bottom { /* Example Window Themes */ #about_contentWrapper { - background: #e5e5e5 url(../images/logo2.gif) 3px 3px no-repeat; + background: #e5e5e5 url("../images/logo2.gif") 3px 3px no-repeat; } #builder_contentWrapper { @@ -378,7 +378,7 @@ div.mochaToolbarWrapper.bottom { .mochaMinimizeButton.replaced, .mochaMaximizeButton.replaced, .mochaCloseButton.replaced { - background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) !important; + background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") !important; } /* iOS iframe scrolling */ diff --git a/src/webui/www/private/css/dynamicTable.css b/src/webui/www/private/css/dynamicTable.css index 68804ba01..22337c29b 100644 --- a/src/webui/www/private/css/dynamicTable.css +++ b/src/webui/www/private/css/dynamicTable.css @@ -78,14 +78,14 @@ tr.dynamicTableHeader { } .dynamicTable th.sorted { - background-image: url(../icons/go-up.svg); + background-image: url("../icons/go-up.svg"); background-position: right; background-repeat: no-repeat; background-size: 15px; } .dynamicTable th.sorted.reverse { - background-image: url(../icons/go-down.svg); + background-image: url("../icons/go-down.svg"); } .dynamicTable td img.flags { diff --git a/src/webui/www/private/css/style.css b/src/webui/www/private/css/style.css index 5a9c04ce7..a67dfa0f1 100644 --- a/src/webui/www/private/css/style.css +++ b/src/webui/www/private/css/style.css @@ -243,7 +243,7 @@ a.propButton img { .contextMenu li a.arrow-right, .contextMenu li a:hover.arrow-right { - background-image: url(../images/arrow-right.gif); + background-image: url("../images/arrow-right.gif"); background-position: right center; background-repeat: no-repeat; } @@ -290,7 +290,7 @@ a.propButton img { } .sliderarea { - background: #f2f2f2 url(../images/slider-area.gif) repeat-x; + background: #f2f2f2 url("../images/slider-area.gif") repeat-x; border: 1px solid #a3a3a3; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; @@ -307,7 +307,7 @@ a.propButton img { } .sliderknob { - background: url(../images/knob.gif) no-repeat; + background: url("../images/knob.gif") no-repeat; cursor: pointer; font-size: 1px; height: 9px; @@ -338,7 +338,7 @@ a.propButton img { } #mochaToolbar .divider { - background-image: url(../images/toolbox-divider.gif); + background-image: url("../images/toolbox-divider.gif"); background-position: left center; background-repeat: no-repeat; padding-left: 14px; @@ -387,7 +387,7 @@ a.propButton img { /* Tri-state checkbox */ label.tristate { - background: url(../images/3-state-checkbox.gif) 0 0 no-repeat; + background: url("../images/3-state-checkbox.gif") 0 0 no-repeat; display: block; float: left; height: 13px; From 15320018f010094edf5329c79815936ec98e3f88 Mon Sep 17 00:00:00 2001 From: Chocobo1 Date: Fri, 22 Oct 2021 14:06:16 +0800 Subject: [PATCH 3/7] Use shorthand for CSS properties --- src/webui/www/private/css/Layout.css | 12 ++++++------ src/webui/www/private/css/Tabs.css | 2 +- src/webui/www/private/css/dynamicTable.css | 4 +--- src/webui/www/private/css/style.css | 12 ++++++------ 4 files changed, 14 insertions(+), 16 deletions(-) diff --git a/src/webui/www/private/css/Layout.css b/src/webui/www/private/css/Layout.css index e231492dc..2337a1f35 100644 --- a/src/webui/www/private/css/Layout.css +++ b/src/webui/www/private/css/Layout.css @@ -51,7 +51,7 @@ body { background: url("../images/logo.gif") no-repeat; background-position: left 0; height: 32px; - padding: 7px 8px 6px 8px; + padding: 7px 8px 6px; } #desktopTitlebar h1.applicationTitle { @@ -69,7 +69,7 @@ body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; - padding: 7px 0 0 0; + padding: 7px 0 0; text-align: center; text-transform: uppercase; } @@ -128,7 +128,7 @@ body { #desktopNavbar ul li a { color: #333; font-weight: normal; - padding: 2px 10px 6px 10px; + padding: 2px 10px 6px; } #desktopNavbar ul li a:hover { @@ -239,7 +239,7 @@ li.divider { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; height: 24px; - padding: 6px 8px 0 8px; + padding: 6px 8px 0; } /* Panel Layout @@ -306,7 +306,7 @@ li.divider { height: 22px; margin: 0; overflow: hidden; - padding: 3px 8px 0 8px; + padding: 3px 8px 0; } .panel-collapse { @@ -406,7 +406,7 @@ div.toolbox.divider { #spinnerWrapper { background: url("../images/spinner-placeholder.gif") no-repeat; height: 16px; - margin: 4px 5px 0 5px; + margin: 4px 5px 0; width: 16px; } diff --git a/src/webui/www/private/css/Tabs.css b/src/webui/www/private/css/Tabs.css index 6626f8f41..34f80748f 100644 --- a/src/webui/www/private/css/Tabs.css +++ b/src/webui/www/private/css/Tabs.css @@ -37,7 +37,7 @@ Required by: background-position: left -35px; cursor: pointer; float: left; - margin: 0 0 5px 0; + margin: 0 0 5px; } .tab-menu li.selected { diff --git a/src/webui/www/private/css/dynamicTable.css b/src/webui/www/private/css/dynamicTable.css index 22337c29b..3b8921b71 100644 --- a/src/webui/www/private/css/dynamicTable.css +++ b/src/webui/www/private/css/dynamicTable.css @@ -51,9 +51,7 @@ tr.dynamicTableHeader { .dynamicTable th { background-color: #eee; - border-right-color: #ccc; - border-right-style: solid; - border-right-width: 1px; + border-right: 1px solid #ccc; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; diff --git a/src/webui/www/private/css/style.css b/src/webui/www/private/css/style.css index a67dfa0f1..6e7f40e95 100644 --- a/src/webui/www/private/css/style.css +++ b/src/webui/www/private/css/style.css @@ -42,7 +42,7 @@ h4 { font-size: 12px; font-weight: bold; margin: 0; - padding: 0 0 5px 0; + padding: 0 0 5px; } h2 { @@ -55,8 +55,8 @@ h2 { border-bottom: 1px solid #bbb; display: block; font-size: 12px; - margin: 0 0 8px 0; - padding: 6px 0 6px 0; + margin: 0 0 8px; + padding: 6px 0; } #error_div { @@ -82,7 +82,7 @@ a:hover { p { margin: 0; - padding: 0 0 9px 0; + padding: 0 0 9px; } /* List Elements */ @@ -97,7 +97,7 @@ dt { } dd { - padding: 0 0 9px 0; + padding: 0 0 9px; } /* Code */ @@ -109,7 +109,7 @@ pre { display: block; font-family: "Courier New", Courier, monospace; font-size: 11px; - margin: 0 0 10px 0; + margin: 0 0 10px; max-height: 250px; overflow: auto; padding: 10px; From 864dca1b676f360509c6f5e0024f06a002e116f2 Mon Sep 17 00:00:00 2001 From: Chocobo1 Date: Fri, 22 Oct 2021 14:14:35 +0800 Subject: [PATCH 4/7] Use percentage notation for alpha-values in CSS --- src/webui/www/private/css/Window.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/webui/www/private/css/Window.css b/src/webui/www/private/css/Window.css index fb57231bf..42be85944 100644 --- a/src/webui/www/private/css/Window.css +++ b/src/webui/www/private/css/Window.css @@ -102,7 +102,7 @@ div.mochaToolbarWrapper.bottom { font-size: 1px; /* For IE6 */ height: 3px; -moz-opacity: 0; - opacity: 0; + opacity: 0%; overflow: hidden; position: absolute; width: 3px; @@ -214,7 +214,7 @@ div.mochaToolbarWrapper.bottom { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE6 and 7*/ left: 0; -moz-opacity: 0; - opacity: 0; + opacity: 0%; position: fixed; top: 0; width: 100%; @@ -228,7 +228,7 @@ div.mochaToolbarWrapper.bottom { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE6 and 7*/ left: 0; -moz-opacity: 0; - opacity: 0; + opacity: 0%; position: absolute; top: 0; width: 100%; @@ -320,7 +320,7 @@ div.mochaToolbarWrapper.bottom { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE6 and 7*/ -moz-opacity: 0; - opacity: 0; + opacity: 0%; } .mocha.notification .mochaContentBorder { From 3088f04e6fbad08b975629a076f7ab8a0ecef44b Mon Sep 17 00:00:00 2001 From: Chocobo1 Date: Fri, 22 Oct 2021 14:20:43 +0800 Subject: [PATCH 5/7] Use standard CSS properties instead of vendor specifics --- src/webui/www/private/css/Layout.css | 4 ++-- src/webui/www/private/css/Window.css | 12 ------------ src/webui/www/private/css/dynamicTable.css | 2 -- src/webui/www/private/css/style.css | 7 ------- 4 files changed, 2 insertions(+), 23 deletions(-) diff --git a/src/webui/www/private/css/Layout.css b/src/webui/www/private/css/Layout.css index 2337a1f35..02c8f8e96 100644 --- a/src/webui/www/private/css/Layout.css +++ b/src/webui/www/private/css/Layout.css @@ -186,7 +186,7 @@ body { #desktopNavbar li ul li a:hover { background: #6c98d9; - -moz-border-radius: 2px; + border-radius: 2px; color: #fff; } @@ -400,7 +400,7 @@ div.toolbox.divider { .iconWrapper:hover { border: 1px solid #a0a0a0; - -moz-border-radius: 3px; + border-radius: 3px; } #spinnerWrapper { diff --git a/src/webui/www/private/css/Window.css b/src/webui/www/private/css/Window.css index 42be85944..f0dbb4040 100644 --- a/src/webui/www/private/css/Window.css +++ b/src/webui/www/private/css/Window.css @@ -97,11 +97,8 @@ div.mochaToolbarWrapper.bottom { .mocha .handle { background: #0f0; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */ - filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE6 and 7*/ font-size: 1px; /* For IE6 */ height: 3px; - -moz-opacity: 0; opacity: 0%; overflow: hidden; position: absolute; @@ -210,10 +207,7 @@ div.mochaToolbarWrapper.bottom { #modalOverlay { background: #000; display: none; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */ - filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE6 and 7*/ left: 0; - -moz-opacity: 0; opacity: 0%; position: fixed; top: 0; @@ -224,10 +218,7 @@ div.mochaToolbarWrapper.bottom { /* Fix for IE6 select z-index issue */ #modalFix { display: none; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */ - filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE6 and 7*/ left: 0; - -moz-opacity: 0; opacity: 0%; position: absolute; top: 0; @@ -317,9 +308,6 @@ div.mochaToolbarWrapper.bottom { } .mocha.notification .mochaTitlebar { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */ - filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE6 and 7*/ - -moz-opacity: 0; opacity: 0%; } diff --git a/src/webui/www/private/css/dynamicTable.css b/src/webui/www/private/css/dynamicTable.css index 3b8921b71..18234d0be 100644 --- a/src/webui/www/private/css/dynamicTable.css +++ b/src/webui/www/private/css/dynamicTable.css @@ -52,8 +52,6 @@ tr.dynamicTableHeader { .dynamicTable th { background-color: #eee; border-right: 1px solid #ccc; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; box-sizing: border-box; padding: 4px; white-space: nowrap; diff --git a/src/webui/www/private/css/style.css b/src/webui/www/private/css/style.css index 6e7f40e95..033061fad 100644 --- a/src/webui/www/private/css/style.css +++ b/src/webui/www/private/css/style.css @@ -260,7 +260,6 @@ a.propButton img { .contextMenu li img { height: 16px; - -ms-interpolation-mode: bicubic; margin-bottom: -4px; width: 16px; } @@ -407,8 +406,6 @@ label.partial { fieldset.settings { border: solid 1px black; - -webkit-border-radius: 8px; - -moz-border-radius: 8px; border-radius: 8px; padding: 4px 4px 4px 10px; } @@ -506,10 +503,6 @@ td.generalLabel { .unselectable { -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; } From ac61c33d1c56a5f11627bb19f42dcfe535697aee Mon Sep 17 00:00:00 2001 From: Chocobo1 Date: Fri, 22 Oct 2021 14:32:20 +0800 Subject: [PATCH 6/7] Use modern color notation in CSS --- src/webui/www/private/css/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/webui/www/private/css/style.css b/src/webui/www/private/css/style.css index 033061fad..c01af3e4d 100644 --- a/src/webui/www/private/css/style.css +++ b/src/webui/www/private/css/style.css @@ -167,7 +167,7 @@ hr { } a.propButton { - border: 1px solid rgb(85, 81, 91); + border: 1px solid rgb(85 81 91); margin-left: 3px; margin-right: 3px; /*border-radius: 3px;*/ From 8b60baea999e335065e808cda754a6a47444d9cd Mon Sep 17 00:00:00 2001 From: Chocobo1 Date: Fri, 22 Oct 2021 14:45:37 +0800 Subject: [PATCH 7/7] Remove unused CSS properties --- src/webui/www/private/css/style.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/webui/www/private/css/style.css b/src/webui/www/private/css/style.css index c01af3e4d..2bc127243 100644 --- a/src/webui/www/private/css/style.css +++ b/src/webui/www/private/css/style.css @@ -1,7 +1,5 @@ /* Reset */ -/*ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,object,iframe { margin: 0; padding: 0; }*/ - a img, :link img, :visited img {