Merge pull request #8618 from Piccirello/remove-css

Remove unused CSS from WebUI login page

src/webui/www/public/css/style.css

@@ -1,12 +1,3 @@
-/* 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 { border: none; }
-/*table { border-collapse: collapse; border-spacing: 0; }*/
-:focus { outline: none; }
-
-/* Structure */
-
 body {
     margin: 0;
     text-align: left;
@@ -16,471 +7,31 @@ body {
     color: #555;
 }
 
-.aside {
+.col {
-    width: 300px;
+    display: inline-block;
-}
-
-.invisible {
-    display: none;
-}
-
-/* Typography */
-
-h2, h3, h4 {
-    margin: 0;
-    padding: 0 0 5px 0;
-    font-size: 12px;
-    font-weight: bold;
-    color: #333;
-}
-
-h2 {
-    font-size: 14px;
-    color: #555;
-    font-weight: bold;
-}
-
-#mochaPage h3 {
-    display: block;
-    font-size: 12px;
-    padding: 6px 0 6px 0;
-    margin: 0 0 8px 0;
-    border-bottom: 1px solid #bbb;
-}
-
-#error_div {
-    color: #f00;
-    font-weight: bold;
-}
-
-h4 {
-    font-size: 11px;
-}
-
-a {
-    color: #e60;
-    text-decoration: none;
-    cursor: pointer;
-}
-
-a:hover {
-    text-decoration: none;
-}
-
-p {
-    margin: 0;
-    padding: 0 0 9px 0;
-}
-
-/* List Elements */
-
-ul {
-    list-style: outside;
-    margin: 0 0 9px 16px;
-}
-
-dt {
-    font-weight: bold;
-}
-
-dd {
-    padding: 0 0 9px 0;
-}
-
-/* Code */
-
-pre {
-    background-color: #f6f6f6;
-    color: #006600;
-    display: block;
-    font-family: 'Courier New', Courier, monospace;
-    font-size: 11px;
-    max-height: 250px;
-    overflow: auto;
-    margin: 0 0 10px 0;
-    padding: 10px;
-    border: 1px solid #d1d7dc;
-    }
-
-/* Dividers */
-
-hr {
-    background-color: #ddd;
-    color: #ccc;
-    height: 1px;
-    border: 0px;
-}
-
-.vcenter {
-    vertical-align: middle;
-}
-
-#urls {
-    width:90%;
-    height:100%;
-}
-
-#trackersUrls {
-    width:90%;
-    height:100%;
-}
-
-#Filters ul {
-    list-style-type: none;
-}
-
-#Filters ul li {
-    margin-left: -16px;
-}
-
-#Filters ul img {
-    padding: 2px 4px;
     vertical-align: middle;
-    width: 16px;
-    height: 16px;
-}
-
-.selectedFilter {
-    background-color: #415A8D;
-    color: #FFFFFF;
-}
-
-.selectedFilter a {
-    color: #FFFFFF;
 }
 
-#properties {
+.row {
-    background-color: #e5e5e5;
+    margin-bottom: 5px;
 }
 
-a.propButton {
+#main {
-    border: 1px solid rgb(85, 81, 91);
+    margin-left: auto;
-    /*border-radius: 3px;*/
+    margin-right: auto;
-    padding: 2px;
+    text-align: center;
-    margin-left: 3px;
+    padding-top: 5em;
-    margin-right: 3px;
 }
 
-a.propButton img {
+#formplace {
-    margin-bottom: -4px;
+    text-align: left;
-}
+    padding: 10px;
-
-.scrollableMenu {
-    overflow-y: auto;
-    overflow-x: hidden;
-}
-
-/* context menu specific */
-
-.contextMenu { border:1px solid #999; padding:0; background:#eee; list-style-type:none; display:none;}
-.contextMenu .separator { border-top:1px solid #999; }
-.contextMenu li { margin:0; padding:0;}
-.contextMenu li a {
-    display: block;
-    padding: 5px 20px 5px 5px;
-    font-size: 12px;
-    text-decoration: none;
-    font-family: tahoma,arial,sans-serif;
-    color: #000;
-    white-space: nowrap;
-}
-.contextMenu li a:hover { background-color:#ddd; }
-.contextMenu li a.disabled { color:#ccc; font-style:italic; }
-.contextMenu li a.disabled:hover { background-color:#eee; }
-.contextMenu li ul {
-    padding: 0;
-    border:1px solid #999; padding:0; background:#eee;
-    list-style-type:none;
-    position: absolute;
-    left: -999em;
-    z-index: 8000;
-    margin: -29px 0 0 100%;
-    width: 164px;
-}
-.contextMenu li ul li a {
-    position: relative;
-}
-.contextMenu li a.arrow-right, .contextMenu li a:hover.arrow-right {
-    background-image: url(../images/skin/arrow-right.gif);
-    background-repeat: no-repeat;
-    background-position: right center;
-}
-.contextMenu li:hover ul,
-.contextMenu li.ieHover ul,
-.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 */
-    left: auto;
-}
-
-.contextMenu li img {
-    width: 16px;
-    height: 16px;
-    margin-bottom: -4px;
-    -ms-interpolation-mode : bicubic;
-}
-
-/* Sliders */
-
-.slider {
-    clear: both;
-    position: relative;
-    font-size: 12px;
-    font-weight: bold;
-    width: 400px;
-    margin-bottom: 15px;
-}
-
-.sliderWrapper {
-    position: relative;
-    font-size: 1px;
-    line-height: 1px;
-    height: 9px;
-    width: 422px;
-}
-
-.sliderarea {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 7px;
-    width: 420px;
-    font-size: 1px;
-    line-height: 1px;
-    background: #f2f2f2 url(../images/skin/slider-area.gif) repeat-x;
-    border: 1px solid #a3a3a3;
-    border-bottom: 1px solid #ccc;
-    border-left: 1px solid #ccc;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-}
-
-.sliderknob {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 9px;
-    width: 19px;
-    font-size: 1px;
-    line-height: 1px;
-    background: url(../images/skin/knob.gif) no-repeat;
-    cursor: pointer;
-    overflow: hidden;
-    z-index: 2;
-}
-
-.update {
-    padding-bottom: 5px;
-}
-
-.mochaToolButton {
-    margin-right: 10px;
-}
-
-/* Mocha Customization */
-#mochaToolbar {
-    margin-top: 5px;
-}
-
-#mochaToolbar .divider {
-    background-image: url(../images/skin/toolbox-divider.gif);
-    background-repeat: no-repeat;
-    background-position: left center;
-    padding-left: 14px;
-    padding-top: 15px;
-}
-
-.MyMenuIcon {
-    margin-left: -18px;
-    margin-bottom: -3px;
-    padding-right: 5px;
-}
-
-/* Tri-state checkbox */
-
-label.tristate {
-    background: url(../images/3-state-checkbox.gif) 0 0 no-repeat;
-    display: block;
-    float: left;
-    height: 13px;
-    margin: .15em 8px 5px 0px;
-    overflow: hidden;
-    text-indent: -999em;
-    width: 13px;
-}
-
-label.checked {
-    background-position: 0 -13px;
-}
-
-label.partial {
-    background-position: 0 -26px;
-}
-
-fieldset.settings {
-    border: solid 1px black;
-    border-radius: 8px;
-    -webkit-border-radius: 8px;
-    -moz-border-radius: 8px;
-    padding: 4px 4px 4px 10px;
-}
-
-fieldset.settings legend {
-    margin-left: 8px;
-    padding: 4px;
-    font-weight: bold;
-}
-
-fieldset.settings label {
-    padding: 2px;
-}
-
-fieldset.settings .leftLabelSmall {
-    width: 5em;
-    float: left;
-    text-align: right;
-    margin-right: 0.5em;
-    display: block;
-}
-
-fieldset.settings .leftLabelLarge {
-    width: 14em;
-    float: left;
-    text-align: right;
-    margin-right: 0.5em;
-    display: block;
-}
-
-div.formRow {
-    clear: left;
-    display: block;
-}
-
-.filterTitle {
-    font-weight: bold;
-    text-transform: uppercase;
-    padding-left: 5px;
-}
-
-ul.filterList {
-    margin: 0 0 0 16px;
-    padding-left: 0;
-}
-
-ul.filterList a {
-    display: block;
-}
-
-ul.filterList li:hover {
-    background-color: #e60;
-}
-
-ul.filterList li:hover a {
-    color: white;
-}
-
-td.generalLabel {
-    white-space: nowrap;
-    text-align: right;
-    width: 1px;
-    vertical-align: top;
-}
-
-#filesTable {
-    line-height: 20px;
-}
-
-#trackersTable, #webseedsTable {
-    line-height: 25px;
-}
-
-#addTrackersPlus {
-    width: 16px;
-    cursor: pointer;
-    margin-bottom: -3px;
-}
-
-.unselectable {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-#prop_general {
-    padding: 2px;
-}
-
-#watched_folders_tab {
-    border-collapse: collapse;
-}
-
-#watched_folders_tab td, #watched_folders_tab th {
-    padding: 2px 4px;
-    border: 1px solid black;
-}
-
-.select-watched-folder-editable {
-    position:relative;
-    background-color: white;
-    border: solid grey 1px;
-    width: 160px;
-    height: 20px;
-}
-
-.select-watched-folder-editable select {
-    position: absolute;
-    top: 0px;
-    bottom: 0px;
-    left: 0px;
-    border: none;
-    width: 160px;
-    margin: 0;
-}
-
-.select-watched-folder-editable input {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    width: 140px;
-    padding: 1px;
-    border: none;
-}
-
-.select-watched-folder-editable select:focus, .select-editable input:focus {
-    outline: none;
-}
-
-/*
- * Workaround to prevent the transfer list from
- * disappearing when zooming in the browser.
- */
-#filtersColumn_handle {
-    margin-left: -1px;
-}
-
-#error_div {
-    float: left;
-    font-size: 14px;
-}
-
-.combo_priority {
-    font-size: 1em;
 }
 
-td.statusBarSeparator {
+#error_msg {
-    width: 22px;
+    color: #f00;
-    background-image: url('../images/skin/toolbox-divider.gif');
-    background-repeat: no-repeat;
-    background-position: center 1px;
-    background-size: 2px 18px;
 }
 
-/* Statistics */
+#logo img {
-.statisticsValue {
+  height: 11em;
-    text-align: right;
 }

src/webui/www/public/login.html

@@ -10,7 +10,7 @@
       window.onload = function() {
         $('username').focus();
         $('username').select();
-      }
+      };
 
       window.addEvent('domready', function() {
         $('loginform').addEvent('submit', function(e) {
@@ -28,7 +28,7 @@
             $('password').set('value', '');
           },
           onFailure: function(xhr) {
-            if (xhr.responseText != "") {
+            if (xhr.responseText !== "") {
               $('error_msg').set('html', xhr.responseText);
             } else {
               $('error_msg').set('html', 'QBT_TR(Unable to log in, qBittorrent is probably unreachable.)QBT_TR[CONTEXT=HttpServer]');
@@ -45,40 +45,24 @@
         }).send();
        }
     </script>
-    <style type="text/css">
-        .col {
-            display: inline-block;
-            vertical-align: middle;
-        }
-        .row {
-            margin-bottom: 5px;
-        }
-        #main {
-            margin-left: auto;
-            margin-right: auto;
-            text-align: center;
-            padding-top: 5em;
-        }
-        #formplace {
-            text-align: left;
-            padding: 10px;
-        }
-        #error_msg {
-            color: #f00;
-        }
-    </style>
 </head>
 <body>
     <div id="main">
         <h1>qBittorrent QBT_TR(Web UI)QBT_TR[CONTEXT=OptionsDialog]</h1>
         <div id="logo" class="col">
-            <img src="images/skin/qbittorrent-tray.svg" alt="qBittorrent logo" style="height: 11em;"/>
+            <img src="images/skin/qbittorrent-tray.svg" alt="qBittorrent logo"/>
         </div>
         <div id="formplace" class="col">
             <form id="loginform">
-                                <div class="row"><label for="username">QBT_TR(Username)QBT_TR[CONTEXT=HttpServer]</label><br /><input type="text" id="username" name="username" /></div>
+                <div class="row">
-                                <div class="row"><label for="password">QBT_TR(Password)QBT_TR[CONTEXT=HttpServer]</label><br /><input type="password" id="password" name="password" /></div>
+                    <label for="username">QBT_TR(Username)QBT_TR[CONTEXT=HttpServer]</label><br />
-                                <div class="row"><input type="submit" id="login" value="QBT_TR(Login)QBT_TR[CONTEXT=HttpServer]" /></div>
+                    <input type="text" id="username" name="username" /></div>
+                <div class="row">
+                    <label for="password">QBT_TR(Password)QBT_TR[CONTEXT=HttpServer]</label><br />
+                    <input type="password" id="password" name="password" /></div>
+                <div class="row">
+                  <input type="submit" id="login" value="QBT_TR(Login)QBT_TR[CONTEXT=HttpServer]" />
+                </div>
             </form>
         </div>
         <div id="error_msg"></div>