Merge pull request #15017 from Chocobo1/css_formatting

Format and lint CSS code

src/webui/www/.stylelintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": "stylelint-config-standard",
+  "plugins": [
+    "stylelint-order"
+  ],
+  "rules": {
+    "color-hex-length": null,
+    "comment-empty-line-before": null,
+    "comment-whitespace-inside": null,
+    "declaration-colon-newline-after": null,
+    "function-name-case": null,
+    "indentation": 4,
+    "length-zero-no-unit": null,
+    "no-descending-specificity": null,
+    "value-keyword-case": null,
+    "order/properties-alphabetical-order": true
+  }
+}

src/webui/www/package.json

@@ -6,12 +6,16 @@
     "url": "https://github.com/qbittorrent/qBittorrent.git"
   },
   "scripts": {
-    "format": "js-beautify private/*.html private/scripts/*.js private/views/*.html public/*.html public/scripts/*.js",
+    "format": "js-beautify private/*.html private/scripts/*.js private/views/*.html public/*.html public/scripts/*.js && prettier --write **.css",
-    "lint": "eslint private/*.html private/scripts/*.js private/views/*.html public/*.html public/scripts/*.js"
+    "lint": "eslint private/*.html private/scripts/*.js private/views/*.html public/*.html public/scripts/*.js && stylelint **/*.css"
   },
   "devDependencies": {
     "eslint": "*",
     "eslint-plugin-html": "*",
-    "js-beautify": "*"
+    "js-beautify": "*",
+    "prettier": "*",
+    "stylelint": "*",
+    "stylelint-config-standard": "*",
+    "stylelint-order": "*"
   }
 }

src/webui/www/private/css/Core.css

@@ -43,7 +43,6 @@ Notes:
     margin-top: 2px;
 }
 
-
 /* Theme Specific Adjustments to Default Plugin Styles
 ---------------------------------------------------------------- */
 

src/webui/www/private/css/Layout.css

@@ -18,21 +18,22 @@ Required by:
 /* Layout
 ---------------------------------------------------------------- */
 
-html, body {
+html,
+body {
     background: #fff;
 }
 
 body {
-    margin: 0;  /* Required */
+    margin: 0; /* Required */
 }
 
 #desktop {
-    position: relative;
+    cursor: default; /* Fix for issue in IE7. IE7 wants to use the I-bar text cursor */
-    min-width: 400px;  /* Helps keep header content from wrapping */
     height: 100%;
     min-height: 100%;
+    min-width: 400px; /* Helps keep header content from wrapping */
     overflow: hidden;
-    cursor: default;  /* Fix for issue in IE7. IE7 wants to use the I-bar text cursor */
+    position: relative;
 }
 
 #desktopHeader {
@@ -40,35 +41,35 @@ body {
 }
 
 #desktopTitlebarWrapper {
-    position: relative;
+    background: #718ba6 url(../images/bg-header.gif) repeat-x;
     height: 45px;
     overflow: hidden;
-    background: #718BA6 url(../images/bg-header.gif) repeat-x;
+    position: relative;
 }
 
 #desktopTitlebar {
-    padding: 7px 8px 6px 8px;
-    height: 32px;
     background: url(../images/logo.gif) no-repeat;
     background-position: left 0;
+    height: 32px;
+    padding: 7px 8px 6px 8px;
 }
 
 #desktopTitlebar h1.applicationTitle {
+    color: #fff;
     display: none;
-    margin: 0;
-    padding: 0 5px 0 0;
     font-size: 20px;
-    line-height: 25px;
     font-weight: bold;
-    color: #fff;
+    line-height: 25px;
+    margin: 0;
+    padding: 0 5px 0 0;
 }
 
 #desktopTitlebar h2.tagline {
-    padding: 7px 0 0 0;
+    color: #d4dce4;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 10px;
-    color: #d4dce4;
     font-weight: bold;
+    padding: 7px 0 0 0;
     text-align: center;
     text-transform: uppercase;
 }
@@ -79,14 +80,14 @@ body {
 }
 
 #topNav {
+    color: #d4dce4;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 10px;
+    padding: 13px 10px 0 0;
     position: absolute;
     right: 0;
-    top: 0;
-    color: #d4dce4;
     text-align: right;
-    padding: 13px 10px 0 0;
+    top: 0;
 }
 
 #topNav a {
@@ -102,23 +103,21 @@ body {
 
 #desktopNavbar {
     background: #f2f2f2;
-    /*height: 30px;*/
-    margin: 0 0px;
-    overflow: hidden;  /* Remove this line if you want the menu to be backward compatible with Firefox 2 */
-    /* Fixes by Chris */
     /*background-color: #ccc;*/
-    height: 20px;
     border-bottom: 1px solid #3f3f3f;
+    height: 20px;
+    margin: 0 0px;
+    overflow: hidden; /* Remove this line if you want the menu to be backward compatible with Firefox 2 */
 }
 
 #desktopNavbar ul {
-    padding: 0;
-    margin: 0;
-    list-style: none;
     font-size: 12px;
+    list-style: none;
+    margin: 0;
+    padding: 0;
 }
 
-#desktopNavbar>ul>li {
+#desktopNavbar > ul > li {
     float: left;
 }
 
@@ -127,33 +126,30 @@ body {
 }
 
 #desktopNavbar ul li a {
-    /*padding: 6px 10px 6px 10px;*/
     color: #333;
     font-weight: normal;
-    /* Fix by Chris */
     padding: 2px 10px 6px 10px;
 }
 
 #desktopNavbar ul li a:hover {
-    color: #333;
-    /* Fix By Chris */
     background-color: #fff;
+    color: #333;
 }
 
-#desktopNavbar ul li a.arrow-right, #desktopNavbar ul li a:hover.arrow-right {
+#desktopNavbar ul li a.arrow-right,
+#desktopNavbar ul li a:hover.arrow-right {
     background-image: url(../images/arrow-right.gif);
-    background-repeat: no-repeat;
     background-position: right 7px;
+    background-repeat: no-repeat;
 }
 
 #desktopNavbar li ul {
-    border: 1px solid #3f3f3f;
     background: #fff url(../images/bg-dropdown.gif) repeat-y;
-    position: absolute;
+    border: 1px solid #3f3f3f;
     left: -999em;
-    z-index: 8000;
-    /* Fix by Chris */
     margin-top: -6px;
+    position: absolute;
+    z-index: 8000;
 }
 
 #desktopNavbar li:hover ul ul,
@@ -163,109 +159,107 @@ body {
     left: -999em;
 }
 
-#desktopNavbar li ul ul {  /* third-and-above-level lists */
+#desktopNavbar li ul ul {
+    /* third-and-above-level lists */
     margin: -22px 0 0 163px;
 }
 
 #desktopNavbar li ul li .check {
+    background: #555;
+    font-size: 1px;
+    height: 5px;
+    left: 6px;
+    line-height: 1px;
+    overflow: hidden;
     position: absolute;
     top: 8px;
-    left: 6px;
     width: 5px;
-    height: 5px;
-    background: #555;
-    overflow: hidden;
-    line-height: 1px;
-    font-size: 1px;
 }
 
 #desktopNavbar li ul li a {
-    position: relative;
-    /*padding: 1px 9px 1px 25px;*/
-    min-width: 120px;
     color: #3f3f3f;
     font-weight: normal;
-    /* Fix By Chris */
+    min-width: 120px;
     padding: 1px 10px 1px 20px;
-    /* Reduce left padding */
+    position: relative;
 }
 
 #desktopNavbar li ul li a:hover {
-    background: #6C98D9;
+    background: #6c98d9;
-    color: #fff;
     -moz-border-radius: 2px;
+    color: #fff;
 }
 
 #desktopNavbar li ul li a:hover .check {
     background: #fff;
 }
 
+/* lists nested under hovered list items */
 #desktopNavbar li:hover ul,
 #desktopNavbar li.ieHover ul,
 #desktopNavbar li li.ieHover ul,
 #desktopNavbar li li li.ieHover ul,
 #desktopNavbar li li:hover ul,
-#desktopNavbar li li li:hover ul {  /* lists nested under hovered list items */
+#desktopNavbar li li li:hover ul {
     left: auto;
 }
 
-#desktopNavbar li:hover {  /* For IE7 */
+/* For IE7 */
+#desktopNavbar li:hover {
     position: static;
 }
 
 li.divider {
+    border-top: 1px solid #ebebeb;
     margin-top: 2px;
     padding-top: 3px;
-    border-top: 1px solid #ebebeb;
 }
 
 #pageWrapper {
-    position: relative;
-    overflow: hidden;  /* This can be set to hidden or auto */
-    border-top: 1px solid #909090;
     border-bottom: 1px solid #909090;
+    border-top: 1px solid #909090;
+    overflow: hidden; /* This can be set to hidden or auto */
+    position: relative;
     /*height: 100%;*/
 }
 
 /* Footer */
 
 #desktopFooterWrapper {
-    position: absolute;
-    left: 0;
     bottom: 0;
-    width: 100%;
     height: 30px;
+    left: 0;
     overflow: hidden;
+    position: absolute;
+    width: 100%;
 }
 
 #desktopFooter {
+    background: #f2f2f2;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 11px;
     height: 24px;
     padding: 6px 8px 0 8px;
-    background: #f2f2f2;
 }
 
-
-
 /* Panel Layout
 ---------------------------------------------------------------- */
 
 /* Columns */
 
 .column {
-    position: relative;
     float: left;
-    overflow: hidden;  /* Required by IE6 */
+    overflow: hidden; /* Required by IE6 */
+    position: relative;
 }
 
 /* Panels */
 
 .panel {
-    position: relative;
-    overflow: auto;
     background: #f8f8f8;
     border-bottom: 1px solid #b9b9b9;
+    overflow: auto;
+    position: relative;
 }
 
 .panelWrapper.collapsed .panel-header {
@@ -289,11 +283,11 @@ li.divider {
 }
 
 .panel-header {
-    position: relative;
     background: #f1f1f1 url(../images/bg-panel-header.gif) repeat-x;
+    border-bottom: 1px solid #d3d3d3;
     height: 30px;
     overflow: hidden;
-    border-bottom: 1px solid #d3d3d3;
+    position: relative;
 }
 
 .panel-headerContent {
@@ -306,13 +300,13 @@ li.divider {
 }
 
 .panel-header h2 {
+    color: #333;
     display: inline-block;
     font-size: 12px;
-    margin: 0;
-    padding: 3px 8px 0 8px;
     height: 22px;
+    margin: 0;
     overflow: hidden;
-    color: #333;
+    padding: 3px 8px 0 8px;
 }
 
 .panel-collapse {
@@ -325,18 +319,18 @@ li.divider {
 }
 
 .icon16 {
-    margin: 4px 0 0 2px;
     cursor: pointer;
+    margin: 4px 0 0 2px;
 }
 
 /* Column and Panel Handles */
 
 .horizontalHandle {
+    background: #eee url(../images/bg-handle-horizontal.gif) repeat-x;
+    font-size: 1px;
     height: 4px;
     line-height: 1px;
-    font-size: 1px;
     overflow: hidden;
-    background: #eee url(../images/bg-handle-horizontal.gif) repeat-x;
 }
 
 .horizontalHandle.detached .handleIcon {
@@ -344,40 +338,39 @@ li.divider {
 }
 
 .horizontalHandle .handleIcon {
-    margin: 0 auto;
+    background: url(../images/handle-icon-horizontal.gif) center center
+        no-repeat;
+    font-size: 1px;
     height: 4px;
     line-height: 1px;
-    font-size: 1px;
+    margin: 0 auto;
     overflow: hidden;
-    background: url(../images/handle-icon-horizontal.gif) center center no-repeat;
 }
 
 .columnHandle {
-    min-height: 10px;
-    float: left;
-    width: 4px;
-    overflow: hidden;
     background: #c3c3c3 url(../images/handle-icon.gif) center center no-repeat;
     border: 1px solid #909090;
-    border-top: 0;
     border-bottom: 0;
+    border-top: 0;
+    float: left;
+    min-height: 10px;
+    overflow: hidden;
+    width: 4px;
 }
 
 /* Toolboxes */
 
 .toolbox {
     float: right;
-    margin-top: 3px;
-    padding: 0 5px;
     height: 24px;
+    margin-top: 3px;
     overflow: hidden;
+    padding: 0 5px;
     text-align: right;
 }
 
-.panel-header-toolbox {
+/* Have to specify div here for IE6's sake */
-}
+div.toolbox.divider {
-
-div.toolbox.divider {  /* Have to specify div here for IE6's sake */
     background: url(../images/toolbox-divider.gif) repeat-y;
     padding-left: 8px;
 }
@@ -387,16 +380,16 @@ div.toolbox.divider {  /* Have to specify div here for IE6's sake */
 }
 
 .iconWrapper {
+    border: 1px solid transparent;
     display: inline-block;
     height: 22px;
     min-width: 22px;
     overflow: hidden;
-    border: 1px solid transparent;
 }
 
 * html .iconWrapper {
-    padding: 1px;
     border: 0;
+    padding: 1px;
 }
 
 .iconWrapper img {
@@ -411,22 +404,22 @@ div.toolbox.divider {  /* Have to specify div here for IE6's sake */
 }
 
 #spinnerWrapper {
-    width: 16px;
-    height: 16px;
     background: url(../images/spinner-placeholder.gif) no-repeat;
+    height: 16px;
     margin: 4px 5px 0 5px;
+    width: 16px;
 }
 
 #spinner {
-    display: none;
     background: url(../images/spinner.gif) no-repeat;
-    width: 16px;
+    display: none;
     height: 16px;
+    width: 16px;
 }
 
 #desktopFooter td {
-    vertical-align: top;
     text-align: left;
+    vertical-align: top;
 }
 
 td.speedLabel {

src/webui/www/private/css/Tabs.css

@@ -18,27 +18,26 @@ Required by:
 /* Toolbar Tabs */
 
 .toolbarTabs {
-    padding: 0 5px 2px 2px;
     background: url(../images/tabs.gif) repeat-x;
     background-position: left -70px;
     overflow: visible;
+    padding: 0 5px 2px 2px;
 }
 
 .tab-menu {
-    padding-top: 1px;
+    font-size: 11px;
+    line-height: 16px;
     list-style: none;
     margin: 0;
     padding: 0;
-    line-height: 16px;
-    font-size: 11px;
 }
 
 .tab-menu li {
-    float: left;
-    margin: 0 0 5px 0;
-    cursor: pointer;
     background: url(../images/tabs.gif) repeat-x;
     background-position: left -35px;
+    cursor: pointer;
+    float: left;
+    margin: 0 0 5px 0;
 }
 
 .tab-menu li.selected {
@@ -47,19 +46,19 @@ Required by:
 }
 
 .tab-menu li a {
+    background: url(../images/tabs.gif) repeat-x;
+    background-position: right -35px;
+    color: #181818;
     display: block;
+    font-weight: normal;
     margin-left: 8px;
     padding: 6px 15px 5px 9px;
     text-align: center;
-    font-weight: normal;
-    color: #181818;
-    background: url(../images/tabs.gif) repeat-x;
-    background-position: right -35px;
 }
 
 .tab-menu li.selected a {
-    color: #181818;
-    font-weight: bold;
     background: url(../images/tabs.gif) repeat-x;
     background-position: right 0;
+    color: #181818;
+    font-weight: bold;
 }

src/webui/www/private/css/Window.css

@@ -19,17 +19,15 @@ Required by:
 ---------------------------------------------------------------- */
 
 .mocha {
+    background-color: #e5e5e5;
     display: none;
     overflow: hidden;
-    background-color: #e5e5e5;
 }
 
-.mocha.isFocused {}
-
 .mochaOverlay {
-    position: absolute;  /* This is also set in theme.js in order to make theme transitions smoother */
-    top: 0;
     left: 0;
+    position: absolute; /* This is also set in theme.js in order to make theme transitions smoother */
+    top: 0;
 }
 
 /*
@@ -44,18 +42,18 @@ Required by:
 */
 
 .mochaTitlebar {
-    width: 100%;
-    overflow: hidden;
     background: url(../images/spacer.gif?from=fafafa&to=e5e5e5);
+    overflow: hidden;
+    width: 100%;
 }
 
 .mochaTitlebar h3 {
+    color: #888;
     font-size: 12px;
-    line-height: 15px;
     font-weight: bold;
+    line-height: 15px;
     margin: 0;
     padding: 5px 10px 4px 12px;
-    color: #888;
 }
 
 .mocha.isFocused .mochaTitlebar h3 {
@@ -63,12 +61,12 @@ Required by:
 }
 
 .mochaToolbarWrapper {
-    width: 100%;  /* For IE */
-    position: relative;
-    height: 29px;
     background: #f1f1f1;
-    overflow: hidden;
     border-top: 1px solid #d9d9d9;
+    height: 29px;
+    overflow: hidden;
+    position: relative;
+    width: 100%; /* For IE */
 }
 
 div.mochaToolbarWrapper.bottom {
@@ -77,19 +75,20 @@ div.mochaToolbarWrapper.bottom {
 }
 
 .mochaToolbar {
-    width: 100%;  /* For IE */
     border-top: 1px solid #fff;
+    width: 100%; /* For IE */
 }
 
 .mochaContentBorder {
-    border-top: 1px solid #dadada;
     border-bottom: 1px solid #dadada;
+    border-top: 1px solid #dadada;
 }
 
-.mochaContentWrapper {  /* Has a fixed height and scrollbars if required. */
+/* Has a fixed height and scrollbars if required. */
+.mochaContentWrapper {
+    background: #fff;
     font-size: 12px;
     overflow: auto;
-    background: #fff;
 }
 
 .mochaContent {
@@ -97,57 +96,59 @@ div.mochaToolbarWrapper.bottom {
 }
 
 .mocha .handle {
-    position: absolute;
     background: #0f0;
-    width: 3px;
+    -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;
-    z-index: 2;
+    -moz-opacity: 0;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  /* IE8 */
+    opacity: 0;
-    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);  /* IE6 and 7*/
-    opacity: .0;
-    -moz-opacity: .0;
     overflow: hidden;
-    font-size: 1px;  /* For IE6 */
+    position: absolute;
+    width: 3px;
+    z-index: 2;
 }
 
-.mocha .corner {  /* Corner resize handles */
+/* Corner resize handles */
-    width: 10px;
+.mocha .corner {
-    height: 10px;
     background: #f00;
+    height: 10px;
+    width: 10px;
 }
 
-.mocha .cornerSE {  /* Bottom right resize handle */
+/* Bottom right resize handle */
-    width: 20px;
+.mocha .cornerSE {
+    background: #fefefe; /* This is the color of the visible resize handle */
     height: 20px;
-    background: #fefefe;  /* This is the color of the visible resize handle */
+    width: 20px;
 }
 
 .mochaCanvasHeader {
+    background: transparent;
+    left: 0;
+    overflow: hidden;
     position: absolute;
     top: 0;
-    left: 0;
-    background: transparent;
-    z-index: -1;
     visibility: hidden;
-    overflow: hidden;
+    z-index: -1;
 }
 
 .mochaControls {
+    background: transparent;
+    height: 14px;
     position: absolute;
-    width: 52px;
-    top: 8px;
     right: 8px;
-    height: 14px;
+    top: 8px;
+    width: 52px;
     z-index: 4;
-    background: transparent;
 }
 
 .mochaCanvasControls {
+    background: transparent;
     position: absolute;
-    top: 8px;
     right: 8px;
+    top: 8px;
     z-index: 3;
-    background: transparent;
 }
 
 /*
@@ -158,36 +159,32 @@ div.mochaToolbarWrapper.bottom {
 	2. Replcac the background-color with a background-image for each button.
 
 */
-.mochaMinimizeButton, .mochaMaximizeButton, .mochaCloseButton {
+.mochaMinimizeButton,
+.mochaMaximizeButton,
+.mochaCloseButton {
+    background-color: #fff;
+    color: #666;
+    cursor: pointer;
     float: right;
-    width: 14px;
-    height: 14px;
     font-size: 1px;
-    cursor: pointer;
+    height: 14px;
-    z-index: 4;
-    color: #666;
-    background-color: #fff;
     margin-left: 5px;
+    width: 14px;
+    z-index: 4;
 }
 
 .mochaMinimizeButton {
     margin-left: 0;
 }
 
-.mochaMaximizeButton {
-}
-
-.mochaCloseButton {
-}
-
 .mochaSpinner {
-    display: none;
+    background: url(../images/spinner.gif) no-repeat;
-    position: absolute;
     bottom: 7px;
+    display: none;
+    height: 16px;
     left: 6px;
+    position: absolute;
     width: 16px;
-    height: 16px;
-    background: url(../images/spinner.gif) no-repeat;
 }
 
 .mochaIframe {
@@ -196,56 +193,56 @@ div.mochaToolbarWrapper.bottom {
 
 /* Fix for IE6 select z-index issue */
 .zIndexFix {
+    border: 1px solid transparent;
     display: block;
+    filter: mask();
+    height: 100px;
+    left: 0;
     position: absolute;
     top: 0;
-    left: 0;
-    z-index: -1;
-    filter: mask();
     width: 100px;
-    height: 100px;
+    z-index: -1;
-    border: 1px solid transparent;
 }
 
 /* Viewport overlays
 ---------------------------------------------------------------- */
 
 #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;
-    left: 0;
     width: 100%;
-    background: #000;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  /* IE8 */
-    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);  /* IE6 and 7*/
-    opacity: 0;
-    -moz-opacity: 0;
     z-index: 10000;
 }
 
 /* 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;
-    left: 0;
     width: 100%;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  /* IE8 */
-    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);  /* IE6 and 7*/
-    opacity: 0;
-    -moz-opacity: 0;
     z-index: 9999;
 }
 
 /* Underlay */
 
 #windowUnderlay {
+    background: #fff;
+    left: 0;
     position: fixed;
     top: 0;
-    left: 0;
     width: 100%;
-    background: #fff;
 }
 
 * html #windowUnderlay {
@@ -254,29 +251,34 @@ div.mochaToolbarWrapper.bottom {
 
 /* The replaced class is used internally when converting CSS values to Canvas. These classes should not be removed. */
 
-.mocha.replaced, .mochaTitlebar.replaced, .mochaMinimizeButton.replaced,
+.mocha.replaced,
-.mochaMaximizeButton.replaced, .mochaCloseButton.replaced {
+.mochaTitlebar.replaced,
+.mochaMinimizeButton.replaced,
+.mochaMaximizeButton.replaced,
+.mochaCloseButton.replaced {
     background-color: transparent !important;
 }
 
 .windowClosed {
-    visibility: hidden;
     display: none;
+    left: -20000px;
+    overflow: hidden;
     position: absolute;
     top: -20000px;
-    left: -20000px;
+    visibility: hidden;
     z-index: -1;
-    overflow: hidden;
 }
 
-.windowClosed .mochaContentBorder, .windowClosed .mochaToolbarWrapper,
+.windowClosed .mochaContentBorder,
-.windowClosed .mochaTitlebar, .windowClosed .mochaControls,
+.windowClosed .mochaToolbarWrapper,
+.windowClosed .mochaTitlebar,
+.windowClosed .mochaControls,
 .windowClosed .mochaCanvasControls {
+    display: none;
+    left: 0;
     position: absolute;
     top: 0;
-    left: 0;
     visibility: hidden;
-    display: none;
     z-index: -1;
 }
 
@@ -315,10 +317,10 @@ div.mochaToolbarWrapper.bottom {
 }
 
 .mocha.notification .mochaTitlebar {
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  /* IE8 */
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */
-    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);  /* IE6 and 7*/
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE6 and 7*/
-    opacity: .0;
     -moz-opacity: 0;
+    opacity: 0;
 }
 
 .mocha.notification .mochaContentBorder {
@@ -326,10 +328,10 @@ div.mochaToolbarWrapper.bottom {
 }
 
 .mocha.notification .mochaContentWrapper {
-    text-align: center;
+    background: transparent;
     font-size: 12px;
     font-weight: bold;
-    background: transparent;
+    text-align: center;
 }
 
 /* Example Window Themes */

src/webui/www/private/css/dynamicTable.css

@@ -34,8 +34,8 @@
 
 #transferList img.stateIcon {
     height: 1.3em;
-    vertical-align: middle;
     margin-bottom: -1px;
+    vertical-align: middle;
 }
 
 tr.dynamicTableHeader {
@@ -43,22 +43,22 @@ tr.dynamicTableHeader {
 }
 
 .dynamicTable {
+    border-spacing: 0;
+    padding: 0;
     table-layout: fixed;
     width: 1%;
-    padding: 0;
-    border-spacing: 0;
 }
 
 .dynamicTable th {
     background-color: #eee;
-    padding: 4px;
-    white-space: nowrap;
     border-right-color: #ccc;
     border-right-style: solid;
     border-right-width: 1px;
-    box-sizing: border-box;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: 4px;
+    white-space: nowrap;
 }
 
 .dynamicTable td {
@@ -72,8 +72,8 @@ tr.dynamicTableHeader {
 
 .dynamicTable th,
 .dynamicTable td {
-    text-overflow: ellipsis;
     overflow: hidden;
+    text-overflow: ellipsis;
     white-space: nowrap;
 }
 
@@ -102,8 +102,8 @@ tr.dynamicTableHeader {
 }
 
 .dynamicTableDiv thead th {
-    line-height: 0px !important;
     height: 0px !important;
-    padding-top: 0px !important;
+    line-height: 0px !important;
     padding-bottom: 0px !important;
+    padding-top: 0px !important;
 }

src/webui/www/private/css/style.css

@@ -2,7 +2,9 @@
 
 /*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 {
+a img,
+:link img,
+:visited img {
     border: none;
 }
 
@@ -15,12 +17,12 @@ a img, :link img, :visited img {
 /* Structure */
 
 body {
-    margin: 0;
+    color: #555;
-    text-align: left;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     line-height: 18px;
-    color: #555;
+    margin: 0;
+    text-align: left;
 }
 
 .aside {
@@ -33,30 +35,34 @@ body {
 
 /* Typography */
 
-h2, h3, h4 {
+h2,
-    margin: 0;
+h3,
-    padding: 0 0 5px 0;
+h4 {
+    color: #333;
     font-size: 12px;
     font-weight: bold;
-    color: #333;
+    margin: 0;
+    padding: 0 0 5px 0;
 }
 
 h2 {
-    font-size: 14px;
     color: #555;
+    font-size: 14px;
     font-weight: bold;
 }
 
 #mochaPage h3 {
+    border-bottom: 1px solid #bbb;
     display: block;
     font-size: 12px;
-    padding: 6px 0 6px 0;
     margin: 0 0 8px 0;
-    border-bottom: 1px solid #bbb;
+    padding: 6px 0 6px 0;
 }
 
 #error_div {
     color: #f00;
+    float: left;
+    font-size: 14px;
     font-weight: bold;
 }
 
@@ -66,8 +72,8 @@ h4 {
 
 a {
     color: #e60;
-    text-decoration: none;
     cursor: pointer;
+    text-decoration: none;
 }
 
 a:hover {
@@ -98,24 +104,24 @@ dd {
 
 pre {
     background-color: #f6f6f6;
+    border: 1px solid #d1d7dc;
     color: #006600;
     display: block;
-    font-family: 'Courier New', Courier, monospace;
+    font-family: "Courier New", Courier, monospace;
     font-size: 11px;
+    margin: 0 0 10px 0;
     max-height: 250px;
     overflow: auto;
-    margin: 0 0 10px 0;
     padding: 10px;
-    border: 1px solid #d1d7dc;
 }
 
 /* Dividers */
 
 hr {
     background-color: #ddd;
+    border: 0px;
     color: #ccc;
     height: 1px;
-    border: 0px;
 }
 
 .vcenter {
@@ -123,13 +129,13 @@ hr {
 }
 
 #urls {
-    width: 90%;
     height: 100%;
+    width: 90%;
 }
 
 #trackersUrls {
-    width: 90%;
     height: 100%;
+    width: 90%;
 }
 
 #Filters ul {
@@ -141,19 +147,19 @@ hr {
 }
 
 #Filters ul img {
+    height: 16px;
     padding: 2px 4px;
     vertical-align: middle;
     width: 16px;
-    height: 16px;
 }
 
 .selectedFilter {
-    background-color: #415A8D;
+    background-color: #415a8d;
-    color: #FFFFFF;
+    color: #ffffff;
 }
 
 .selectedFilter a {
-    color: #FFFFFF;
+    color: #ffffff;
 }
 
 #properties {
@@ -162,10 +168,10 @@ hr {
 
 a.propButton {
     border: 1px solid rgb(85, 81, 91);
-    /*border-radius: 3px;*/
-    padding: 2px;
     margin-left: 3px;
     margin-right: 3px;
+    /*border-radius: 3px;*/
+    padding: 2px;
 }
 
 a.propButton img {
@@ -173,18 +179,18 @@ a.propButton img {
 }
 
 .scrollableMenu {
-    overflow-y: auto;
     overflow-x: hidden;
+    overflow-y: auto;
 }
 
 /* context menu specific */
 
 .contextMenu {
-    border: 1px solid #999;
-    padding: 0;
     background: #eee;
-    list-style-type: none;
+    border: 1px solid #999;
     display: none;
+    list-style-type: none;
+    padding: 0;
 }
 
 .contextMenu .separator {
@@ -197,12 +203,12 @@ a.propButton img {
 }
 
 .contextMenu li a {
+    color: #000;
     display: block;
-    padding: 5px 20px 5px 5px;
+    font-family: tahoma, arial, sans-serif;
     font-size: 12px;
+    padding: 5px 20px 5px 5px;
     text-decoration: none;
-    font-family: tahoma, arial, sans-serif;
-    color: #000;
     white-space: nowrap;
 }
 
@@ -220,26 +226,26 @@ a.propButton img {
 }
 
 .contextMenu li ul {
-    padding: 0;
-    border: 1px solid #999;
-    padding: 0;
     background: #eee;
-    list-style-type: none;
+    border: 1px solid #999;
-    position: absolute;
     left: -999em;
-    z-index: 8000;
+    list-style-type: none;
     margin: -29px 0 0 100%;
+    padding: 0;
+    position: absolute;
     width: 164px;
+    z-index: 8000;
 }
 
 .contextMenu li ul li a {
     position: relative;
 }
 
-.contextMenu li a.arrow-right, .contextMenu li a:hover.arrow-right {
+.contextMenu li a.arrow-right,
+.contextMenu li a:hover.arrow-right {
     background-image: url(../images/arrow-right.gif);
-    background-repeat: no-repeat;
     background-position: right center;
+    background-repeat: no-repeat;
 }
 
 .contextMenu li:hover ul,
@@ -247,18 +253,19 @@ a.propButton img {
 .contextMenu li li.ieHover ul,
 .contextMenu li li li.ieHover ul,
 .contextMenu li li:hover ul,
-.contextMenu li li li:hover ul {  /* lists nested under hovered list items */
+.contextMenu li li li:hover ul {
+    /* lists nested under hovered list items */
     left: auto;
 }
 
 .contextMenu li img {
-    width: 16px;
     height: 16px;
-    margin-bottom: -4px;
     -ms-interpolation-mode: bicubic;
+    margin-bottom: -4px;
+    width: 16px;
 }
 
-.contextMenu li input[type=checkbox] {
+.contextMenu li input[type="checkbox"] {
     position: relative;
     top: 3px;
 }
@@ -267,49 +274,49 @@ a.propButton img {
 
 .slider {
     clear: both;
-    position: relative;
     font-size: 12px;
     font-weight: bold;
-    width: 400px;
     margin-bottom: 15px;
+    position: relative;
+    width: 400px;
 }
 
 .sliderWrapper {
-    position: relative;
     font-size: 1px;
-    line-height: 1px;
     height: 9px;
+    line-height: 1px;
+    position: relative;
     width: 422px;
 }
 
 .sliderarea {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 7px;
-    width: 420px;
-    font-size: 1px;
-    line-height: 1px;
     background: #f2f2f2 url(../images/slider-area.gif) repeat-x;
     border: 1px solid #a3a3a3;
     border-bottom: 1px solid #ccc;
     border-left: 1px solid #ccc;
+    font-size: 1px;
+    height: 7px;
+    left: 0;
+    line-height: 1px;
     margin: 0;
-    padding: 0;
     overflow: hidden;
+    padding: 0;
+    position: absolute;
+    top: 0;
+    width: 420px;
 }
 
 .sliderknob {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 9px;
-    width: 19px;
-    font-size: 1px;
-    line-height: 1px;
     background: url(../images/knob.gif) no-repeat;
     cursor: pointer;
+    font-size: 1px;
+    height: 9px;
+    left: 0;
+    line-height: 1px;
     overflow: hidden;
+    position: absolute;
+    top: 0;
+    width: 19px;
     z-index: 2;
 }
 
@@ -324,23 +331,23 @@ a.propButton img {
 /* Mocha Customization */
 
 #mochaToolbar {
-    margin-top: 5px;
-    position: relative;
     height: 29px;
+    margin-top: 5px;
     overflow-y: hidden;
+    position: relative;
 }
 
 #mochaToolbar .divider {
     background-image: url(../images/toolbox-divider.gif);
-    background-repeat: no-repeat;
     background-position: left center;
+    background-repeat: no-repeat;
     padding-left: 14px;
     padding-top: 15px;
 }
 
 .MyMenuIcon {
-    margin-left: -18px;
     margin-bottom: -3px;
+    margin-left: -18px;
     padding-right: 5px;
 }
 
@@ -355,12 +362,12 @@ a.propButton img {
 }
 
 #torrentsFilterInput {
-    width: 160px;
-    padding-left: 2em;
     background-image: url("../icons/edit-find.svg");
+    background-position: left;
     background-repeat: no-repeat;
     background-size: 1.5em;
-    background-position: left;
+    padding-left: 2em;
+    width: 160px;
 }
 
 #torrentFilesFilterToolbar {
@@ -369,12 +376,12 @@ a.propButton img {
 }
 
 #torrentFilesFilterInput {
-    width: 160px;
-    padding-left: 2em;
     background-image: url("../icons/edit-find.svg");
+    background-position: left;
     background-repeat: no-repeat;
     background-size: 1.5em;
-    background-position: left;
+    padding-left: 2em;
+    width: 160px;
 }
 
 /* Tri-state checkbox */
@@ -384,7 +391,7 @@ label.tristate {
     display: block;
     float: left;
     height: 13px;
-    margin: .15em 8px 5px 0px;
+    margin: 0.15em 8px 5px 0px;
     overflow: hidden;
     text-indent: -999em;
     width: 13px;
@@ -400,16 +407,16 @@ label.partial {
 
 fieldset.settings {
     border: solid 1px black;
-    border-radius: 8px;
     -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
+    border-radius: 8px;
     padding: 4px 4px 4px 10px;
 }
 
 fieldset.settings legend {
+    font-weight: bold;
     margin-left: 8px;
     padding: 4px;
-    font-weight: bold;
 }
 
 fieldset.settings label {
@@ -426,21 +433,21 @@ div.formRow {
 }
 
 .filterTitle {
+    display: block;
     font-weight: bold;
-    text-transform: uppercase;
+    overflow: hidden;
     padding-left: 5px;
     padding-top: 5px;
-    display: block;
-    overflow: hidden;
-    white-space: nowrap;
     text-overflow: ellipsis;
+    text-transform: uppercase;
+    white-space: nowrap;
 }
 
 .filterTitle img {
-    width: 16px;
     height: 16px;
     margin-bottom: -3px;
     padding: 0 5px;
+    width: 16px;
 }
 
 .filterTitle img.rotate {
@@ -453,11 +460,11 @@ ul.filterList {
 }
 
 ul.filterList a {
+    color: inherit;
     display: block;
     overflow: hidden;
-    white-space: nowrap;
     text-overflow: ellipsis;
-    color: inherit;
+    white-space: nowrap;
 }
 
 ul.filterList li:hover {
@@ -469,10 +476,10 @@ ul.filterList li:hover a {
 }
 
 td.generalLabel {
-    white-space: nowrap;
     text-align: right;
-    width: 1px;
     vertical-align: top;
+    white-space: nowrap;
+    width: 1px;
 }
 
 #torrentFilesTableDiv {
@@ -485,16 +492,16 @@ td.generalLabel {
 }
 
 .filesTableCollapseIcon {
-    width: 15px;
-    height: 15px;
     cursor: pointer;
+    height: 15px;
     margin-bottom: -3px;
     padding-right: 5px;
+    width: 15px;
 }
 
 .filesTableCollapseIcon.rotate {
-    transform: rotate(270deg);
     margin-bottom: -1px;
+    transform: rotate(270deg);
 }
 
 .unselectable {
@@ -514,39 +521,41 @@ td.generalLabel {
     border-collapse: collapse;
 }
 
-#watched_folders_tab td, #watched_folders_tab th {
+#watched_folders_tab td,
-    padding: 2px 4px;
+#watched_folders_tab th {
     border: 1px solid black;
+    padding: 2px 4px;
 }
 
 .select-watched-folder-editable {
-    position: relative;
     background-color: white;
     border: solid grey 1px;
-    width: 160px;
     height: 20px;
+    position: relative;
+    width: 160px;
 }
 
 .select-watched-folder-editable select {
-    position: absolute;
+    border: none;
-    top: 0px;
     bottom: 0px;
     left: 0px;
-    border: none;
-    width: 160px;
     margin: 0;
+    position: absolute;
+    top: 0px;
+    width: 160px;
 }
 
 .select-watched-folder-editable input {
+    border: none;
+    left: 0px;
+    padding: 1px;
     position: absolute;
     top: 0px;
-    left: 0px;
     width: 140px;
-    padding: 1px;
-    border: none;
 }
 
-.select-watched-folder-editable select:focus, .select-editable input:focus {
+.select-watched-folder-editable select:focus,
+.select-editable input:focus {
     outline: none;
 }
 
@@ -558,21 +567,16 @@ td.generalLabel {
     margin-left: -1px;
 }
 
-#error_div {
-    float: left;
-    font-size: 14px;
-}
-
 .combo_priority {
     font-size: 1em;
 }
 
 td.statusBarSeparator {
-    width: 22px;
+    background-image: url("../images/toolbox-divider.gif");
-    background-image: url('../images/toolbox-divider.gif');
-    background-repeat: no-repeat;
     background-position: center 1px;
+    background-repeat: no-repeat;
     background-size: 2px 18px;
+    width: 22px;
 }
 
 /* Statistics window */
@@ -582,26 +586,28 @@ td.statusBarSeparator {
 
 /* Search tab */
 
-#SearchPanel, #SearchPanel_wrapper, #SearchPanel_pad {
+#SearchPanel,
+#SearchPanel_wrapper,
+#SearchPanel_pad {
     height: inherit;
 }
 
 #searchResults {
-    padding: 0 20px;
     height: 100%;
+    padding: 0 20px;
 }
 
 #searchResultsTableContainer {
-    height: calc(100% - 140px);
     -moz-height: calc(100% - 140px);
     -webkit-height: calc(100% - 140px);
+    height: calc(100% - 140px);
     overflow: auto;
 }
 
 #searchResultsTableDiv {
-    height: calc(100% - 26px) !important;
     -moz-height: calc(100% - 26px) !important;
     -webkit-height: calc(100% - 26px) !important;
+    height: calc(100% - 26px) !important;
 }
 
 #searchResults .dynamicTable {

src/webui/www/public/css/login.css

@@ -1,10 +1,10 @@
 body {
-    margin: 0;
+    color: #555;
-    text-align: left;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     line-height: 18px;
-    color: #555;
+    margin: 0;
+    text-align: left;
 }
 
 .col {
@@ -19,13 +19,13 @@ body {
 #main {
     margin-left: auto;
     margin-right: auto;
-    text-align: center;
     padding-top: 5em;
+    text-align: center;
 }
 
 #formplace {
-    text-align: left;
     padding: 10px;
+    text-align: left;
 }
 
 #error_msg {