qbit base reformat

CSS/themes/qbittorrent/qbittorrent-base.css

@@ -1,4 +1,3 @@
-
 /*    dP   dP                                                                  dP        */
 /*    88   88                                                                  88        */
 /*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
@@ -12,35 +11,43 @@
 /*			      https://github.com/gilbN/theme.park			 */
 
 @import url(https://use.fontawesome.com/releases/v5.0.7/css/all.css);
+
 ::-webkit-scrollbar {
   width: 10px;
   height: 10px;
 }
+
 ::-webkit-scrollbar-corner {
   background-color: hsla(0, 0%, 100%, .08);
 }
+
 ::-webkit-scrollbar-thumb {
   -webkit-border-radius: 5px;
   border-radius: 5px;
   background-color: hsla(0, 0%, 100%, .08);
 }
 
-html, body {
+html,
+body {
   color: #FFF;
   background: transparent;
 }
+
 body {
   background: var(--main-bg-color);
 }
+
 #desktop {
   background: var(--main-bg-color);
 }
+
 input:disabled {
   color: rgb(84, 84, 84);
   cursor: default;
   background-color: rgb(255, 255, 255, .05) !important;
   border: none !important;
 }
+
 input[type="text"i] {
   color: #FFF;
   background-color: rgba(0, 0, 0, .25);
@@ -49,6 +56,7 @@ input[type="text" i] {
   border: none;
   border-radius: 3px;
 }
+
 input[type="password"i] {
   color: #FFF;
   background-color: rgba(0, 0, 0, .25);
@@ -57,6 +65,7 @@ input[type="password" i] {
   border: none;
   border-radius: 3px;
 }
+
 input[type="number"i] {
   color: #FFF;
   background-color: rgba(0, 0, 0, .25);
@@ -64,6 +73,7 @@ input[type="number" i] {
   outline: none;
   border: none;
 }
+
 input[type="file"i] {
   color: #FFF;
   background-color: rgba(0, 0, 0, .25);
@@ -71,6 +81,7 @@ input[type="file" i] {
   outline: none;
   border: none;
 }
+
 input[name="category"i] {
   color: #000;
   background-color: #fff;
@@ -78,16 +89,23 @@ input[name="category" i] {
   outline: none;
   border: none;
 }
+
 input[type="file"i] {
   border: none;
 }
+
 select {
   border: none !important;
 }
 
-a, h2, h3, h4, .mochaTitlebar h3 {
+a,
+h2,
+h3,
+h4,
+.mochaTitlebar h3 {
   color: #fff;
 }
+
 /* Login */
 #main h1 {
   display: block;
@@ -98,6 +116,7 @@ a, h2, h3, h4, .mochaTitlebar h3 {
   margin-inline-end: 0px;
   font-weight: bold;
 }
+
 #error_msg {
   text-transform: uppercase;
   color: #D8000C;
@@ -157,6 +176,7 @@ a, h2, h3, h4, .mochaTitlebar h3 {
   -ms-transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
 }
+
 label {
   cursor: default;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
@@ -171,39 +191,49 @@ label {
   overflow: hidden;
   background: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/qbittorrent/dots.png) center center no-repeat;
 }
+
 #desktopNavbar {
   background: rgba(0, 0, 0, 0.25);
   height: 20px;
   border-bottom: 1px solid transparent;
 }
+
 #desktopNavbar ul li a {
   color: #fff;
 }
+
 #desktopNavbar ul li a:hover {
   color: #fff;
   background-color: rgba(255, 255, 255, 0.08);
 }
+
 #desktopNavbar li ul li a:hover {
   background: rgba(255, 255, 255, .08);
   color: #fff;
 }
+
 #desktopNavbar li ul {
   border: 1px solid transparent;
   background: var(--modal-bg-color);
 }
+
 #desktopNavbar li ul li a {
   color: #fff;
 }
+
 #desktopHeader {
   background: var(--main-bg-color);
 }
+
 #desktopFooter {
   background: transparent;
 }
+
 #mochaToolbar .divider {
   background-image: none;
   padding-left: 0px;
 }
+
 #mochaToolbar {
   margin-bottom: 5px;
 }
@@ -216,32 +246,42 @@ label {
 .dynamicTable thead tr {
   background-color: transparent !important;
 }
+
 .dynamicTable thead tr {
   background-color: transparent !important;
 }
+
 .dynamicTable {
   background: rgba(0, 0, 0, 0.25);
 }
+
 .dynamicTable tbody tr {
   background-color: rgba(0, 0, 0, 0.08) !important;
 }
-.dynamicTable tbody tr:nth-child(even), .dynamicTable tbody tr.alt {
+
+.dynamicTable tbody tr:nth-child(even),
+.dynamicTable tbody tr.alt {
   background-color: rgba(255, 255, 255, 0.08) !important;
 }
+
 .dynamicTable tbody tr:hover {
   background-color: rgba(255, 255, 255, 0.15) !important;
 }
+
 .dynamicTable tbody tr.selected {
   background-color: rgba(0, 0, 0, 0.45) !important;
 }
+
 .panel {
   background: var(--main-bg-color);
   border-bottom: 1px solid transparent;
 }
+
 #pageWrapper {
   border-top: 1px solid transparent;
   border-bottom: 1px solid transparent;
 }
+
 li.divider {
   border-top: 1px solid rgba(255, 255, 255, .25) !important;
 }
@@ -258,9 +298,11 @@ li.divider {
   height: 24px;
   padding: 7px 12px;
 }
+
 #main input[type="text"i]:focus {
   background-color: rgba(0, 0, 0, .45);
 }
+
 #main input[type="password"i] {
   color: #FFF;
   background-color: rgba(0, 0, 0, .25);
@@ -272,9 +314,11 @@ li.divider {
   height: 24px;
   padding: 7px 12px;
 }
+
 #main input[type="password"i] {
   background-color: rgba(0, 0, 0, .45);
 }
+
 #loginform #login {
   padding: 6px 15px !important;
   width: 100%;
@@ -290,6 +334,7 @@ li.divider {
   height: 44px;
   line-height: 1.3333333;
 }
+
 #loginform #login:hover {
   background-color: var(--button-color-hover) !important;
   padding: 6px 15px;
@@ -305,27 +350,34 @@ li.divider {
   border: 1px solid transparent;
   background: var(--modal-bg-color);
 }
+
 .contextMenu li a {
   color: #fff;
 }
+
 .contextMenu li a:hover {
   background-color: rgba(255, 255, 255, .08) !important;
 }
+
 .contextMenu li ul {
   border: 1px solid transparent;
   background: var(--modal-bg-color);
 }
+
 .contextMenu .separator {
   border-top: 1px solid rgba(255, 255, 255, 0.08);
 }
+
 /* Sidemenu */
 .selectedFilter {
   background-color: rgba(0, 0, 0, 0.25);
   color: #FFF;
 }
+
 ul.filterList li:hover {
   background-color: rgba(255, 255, 255, 0.08);
 }
+
 .columnHandle {
   background: rgba(0, 0, 0, 0.45);
   border: 1px solid transparent;
@@ -340,53 +392,68 @@ ul.filterList li:hover {
 .panel-headerContent.tabs {
   background: none !important;
 }
+
 .panel-header {
   background: rgba(0, 0, 0, 0.25) !important;
   border-bottom: 1px solid transparent !important;
 }
+
 .horizontalHandle {
   background: none !important;
 }
+
 .tab-menu li.selected a {
   color: #fff !important;
   background: transparent !important;
   font-weight: normal !important;
 }
+
 .tab-menu li a {
   color: #fff !important;
   background: transparent !important;
 }
+
 .tab-menu li.selected {
   background: none !important;
 }
+
 .tab-menu li {
   background: none !important;
 }
+
 .tab-menu li a:hover {
   background: rgba(255, 255, 255, 0.08) !important;
 }
+
 .toolbarTabs {
   background: rgba(0, 0, 0, 0.25) !important;
 }
+
 .progressbar_dark {
   background: var(--progress-color) !important;
 }
+
 .progressbar_light {
   background: rgba(0, 0, 0, 0.25) !important;
   color: #fff !important;
 }
+
 .progressbar_wrapper {
   border: 1px solid transparent !important;
 }
+
 .stateIcon {
   background-image: red !important;
 }
+
 .panel-collapse {
   background: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/qbittorrent/collapse-expand.gif) left top no-repeat;
 }
+
 .panel-expand {
   background: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/qbittorrent/collapse-expand.gif) left -16px no-repeat;
 }
+
 fieldset {
   border-width: 1px !important;
   border-style: solid !important;
@@ -400,22 +467,26 @@ fieldset {
   overflow: hidden;
   background: none !important;
 }
+
 .mochaToolButton {
   margin-right: 10px;
   background: rgba(0, 0, 0, .25);
   border-radius: 5px;
 }
+
 .mochaToolButton:hover {
   margin-right: 10px;
   background: rgba(255, 255, 255, .25);
   border-radius: 5px;
 }
+
 .mochaOverlay {
   position: absolute;
   top: 0;
   left: 0;
   background: var(--modal-bg-color) !important;
 }
+
 .mochaToolbarWrapper {
   width: 100%;
   position: relative;
@@ -429,18 +500,22 @@ fieldset {
   width: 100%;
   border-top: none !important;
 }
+
 .mochaContentBorder {
   border-top: 1px solid rgba(255, 255, 255, .25) !important;
   border-bottom: 1px solid rgba(255, 255, 255, .25) !important;
 }
+
 .mocha.isFocused .mochaTitlebar h3 {
   color: #fff;
 }
+
 .mochaContentWrapper {
   font-size: 12px;
   overflow: auto;
   background: transparent !important;
 }
+
 fieldset.settings {
   border: solid 1px rgba(255, 255, 255, 0.25) !important;
   border-radius: 8px;
@@ -448,22 +523,27 @@ fieldset.settings {
   -moz-border-radius: 8px;
   padding: 4px 4px 4px 10px;
 }
+
 textarea:disabled {
   color: rgb(84, 84, 84);
   cursor: default;
   background-color: rgb(255, 255, 255, .05) !important;
   border: none !important;
 }
+
 textarea {
   color: #fff !important;
   cursor: default;
   background-color: rgb(0, 0, 0, .25) !important;
   border: none !important;
 }
-#watched_folders_tab td, #watched_folders_tab th {
+
+#watched_folders_tab td,
+#watched_folders_tab th {
   padding: 2px 4px;
   border: 1px solid rgba(255, 255, 255, 0.25) !important;
 }
+
 input[type="button"i]:hover {
   background-color: var(--button-color-hover);
   padding: 6px 15px;
@@ -471,6 +551,7 @@ input[type="button" i]:hover {
   border: none;
   color: var(--button-text);
 }
+
 input[type="button"i] {
   padding: 6px 15px !important;
   background-color: var(--button-color);
@@ -478,18 +559,21 @@ input[type="button" i] {
   border: none;
   color: var(--button-text);
 }
+
 button {
   background-color: var(--button-color) !important;
   cursor: pointer;
   border: 2px solid transparent;
   color: var(--button-text);
 }
+
 button:hover {
   background-color: var(--button-color-hover) !important;
   cursor: pointer;
   border: 2px solid transparent;
   color: var(--button-text);
 }
+
 input[type="submit"i] {
   padding: 6px 15px !important;
   width: 100%;
@@ -500,6 +584,7 @@ input[type="submit" i] {
   outline: none;
   text-transform: uppercase;
 }
+
 input[type="submit"i]:hover {
   padding: 6px 15px !important;
   background-color: var(--button-color-hover) !important;
@@ -517,6 +602,7 @@ input[type="submit" i]:hover {
 #downloadButton>img.mochaToolButton {
   display: none;
 }
+
 #downloadButton:before {
   font-family: "Font Awesome 5 Free";
   font-size: 24px;
@@ -545,6 +631,7 @@ input[type="submit" i]:hover {
 #uploadButton>img.mochaToolButton {
   display: none;
 }
+
 #uploadButton:before {
   font-family: "Font Awesome 5 Free";
   font-size: 24px;
@@ -572,6 +659,7 @@ input[type="submit" i]:hover {
 #deleteButton>img.mochaToolButton {
   display: none;
 }
+
 #deleteButton:before {
   font-family: "Font Awesome 5 Free";
   font-size: 24px;
@@ -599,6 +687,7 @@ input[type="submit" i]:hover {
 #resumeButton>img.mochaToolButton {
   display: none;
 }
+
 #resumeButton:before {
   font-family: "Font Awesome 5 Free";
   font-size: 24px;
@@ -626,6 +715,7 @@ input[type="submit" i]:hover {
 #pauseButton>img.mochaToolButton {
   display: none;
 }
+
 #pauseButton:before {
   font-family: "Font Awesome 5 Free";
   font-size: 24px;
@@ -653,6 +743,7 @@ input[type="submit" i]:hover {
 #topPrioButton>img.mochaToolButton {
   display: none;
 }
+
 #topPrioButton:before {
   font-family: "Font Awesome 5 Free";
   font-size: 24px;
@@ -680,6 +771,7 @@ input[type="submit" i]:hover {
 #increasePrioButton>img.mochaToolButton {
   display: none;
 }
+
 #increasePrioButton:before {
   font-family: "Font Awesome 5 Free";
   font-size: 24px;
@@ -707,6 +799,7 @@ input[type="submit" i]:hover {
 #decreasePrioButton>img.mochaToolButton {
   display: none;
 }
+
 #decreasePrioButton:before {
   font-family: "Font Awesome 5 Free";
   font-size: 24px;
@@ -734,6 +827,7 @@ input[type="submit" i]:hover {
 #bottomPrioButton>img.mochaToolButton {
   display: none;
 }
+
 #bottomPrioButton:before {
   font-family: "Font Awesome 5 Free";
   font-size: 24px;
@@ -761,6 +855,7 @@ input[type="submit" i]:hover {
 #preferencesButton>img.mochaToolButton {
   display: none;
 }
+
 #preferencesButton:before {
   font-family: "Font Awesome 5 Free";
   font-size: 24px;
@@ -804,6 +899,7 @@ input[type="submit" i]:hover {
 #uploadLink>img.MyMenuIcon {
   display: none;
 }
+
 #uploadLink:before {
   font-family: "Font Awesome 5 Free";
   font-size: 14px;
@@ -818,6 +914,7 @@ input[type="submit" i]:hover {
 #downloadLink>img.MyMenuIcon {
   display: none;
 }
+
 #downloadLink:before {
   font-family: "Font Awesome 5 Free";
   font-size: 14px;
@@ -832,6 +929,7 @@ input[type="submit" i]:hover {
 #logoutLink>img.MyMenuIcon {
   display: none;
 }
+
 #logoutLink:before {
   font-family: "Font Awesome 5 Free";
   font-size: 14px;
@@ -846,6 +944,7 @@ input[type="submit" i]:hover {
 #shutdownLink>img.MyMenuIcon {
   display: none;
 }
+
 #shutdownLink:before {
   font-family: "Font Awesome 5 Free";
   font-size: 14px;
@@ -862,6 +961,7 @@ input[type="submit" i]:hover {
 #resumeAllLink>img.MyMenuIcon {
   display: none;
 }
+
 #resumeAllLink:before {
   font-family: "Font Awesome 5 Free";
   font-size: 14px;
@@ -876,6 +976,7 @@ input[type="submit" i]:hover {
 #pauseAllLink>img.MyMenuIcon {
   display: none;
 }
+
 #pauseAllLink:before {
   font-family: "Font Awesome 5 Free";
   font-size: 14px;
@@ -890,6 +991,7 @@ input[type="submit" i]:hover {
 #resumeLink>img.MyMenuIcon {
   display: none;
 }
+
 #resumeLink:before {
   font-family: "Font Awesome 5 Free";
   font-size: 14px;
@@ -904,6 +1006,7 @@ input[type="submit" i]:hover {
 #pauseLink>img.MyMenuIcon {
   display: none;
 }
+
 #pauseLink:before {
   font-family: "Font Awesome 5 Free";
   font-size: 14px;
@@ -918,6 +1021,7 @@ input[type="submit" i]:hover {
 #deleteLink>img.MyMenuIcon {
   display: none;
 }
+
 #deleteLink:before {
   font-family: "Font Awesome 5 Free";
   font-size: 14px;
@@ -932,6 +1036,7 @@ input[type="submit" i]:hover {
 #topPrioLink>img.MyMenuIcon {
   display: none;
 }
+
 #topPrioLink:before {
   font-family: "Font Awesome 5 Free";
   font-size: 14px;
@@ -946,6 +1051,7 @@ input[type="submit" i]:hover {
 #increasePrioLink>img.MyMenuIcon {
   display: none;
 }
+
 #increasePrioLink:before {
   font-family: "Font Awesome 5 Free";
   font-size: 14px;
@@ -960,6 +1066,7 @@ input[type="submit" i]:hover {
 #decreasePrioLink>img.MyMenuIcon {
   display: none;
 }
+
 #decreasePrioLink:before {
   font-family: "Font Awesome 5 Free";
   font-size: 14px;
@@ -974,6 +1081,7 @@ input[type="submit" i]:hover {
 #bottomPrioLink>img.MyMenuIcon {
   display: none;
 }
+
 #bottomPrioLink:before {
   font-family: "Font Awesome 5 Free";
   font-size: 14px;
@@ -988,6 +1096,7 @@ input[type="submit" i]:hover {
 #recheckLink>img.MyMenuIcon {
   display: none;
 }
+
 #recheckLink:before {
   font-family: "Font Awesome 5 Free";
   font-size: 14px;
@@ -1016,6 +1125,7 @@ input[type="submit" i]:hover {
   color: rgba(255, 255, 255, 0.7);
   padding-left: 5px;
 }
+
 #showTopToolbarLink:active:focus:visited:before {
   font-family: "Font Awesome 5 Free";
   font-size: 14px;
@@ -1126,6 +1236,7 @@ input[type="submit" i]:hover {
   color: white;
   opacity: 0;
 }
+
 #showRssReaderLink:active:focus:visited:before {
   font-family: "Font Awesome 5 Free";
   font-size: 14px;
@@ -1136,6 +1247,7 @@ input[type="submit" i]:hover {
   color: white;
   opacity: 0;
 }
+
 #StatisticsLink>img.MyMenuIcon {
   display: none;
 }
@@ -1239,6 +1351,7 @@ ul.filterList a {
 #all_filter>a img {
   display: none;
 }
+
 #all_filter:before {
   font-family: "Font Awesome 5 Free";
   font-size: 14px;
@@ -1253,6 +1366,7 @@ ul.filterList a {
 #downloading_filter>a img {
   display: none;
 }
+
 #downloading_filter:before {
   font-family: "Font Awesome 5 Free";
   font-size: 14px;
@@ -1267,6 +1381,7 @@ ul.filterList a {
 #seeding_filter>a img {
   display: none;
 }
+
 #seeding_filter:before {
   font-family: "Font Awesome 5 Free";
   font-size: 14px;
@@ -1281,6 +1396,7 @@ ul.filterList a {
 #completed_filter>a img {
   display: none;
 }
+
 #completed_filter:before {
   font-family: "Font Awesome 5 Free";
   font-size: 14px;
@@ -1295,6 +1411,7 @@ ul.filterList a {
 #resumed_filter>a img {
   display: none;
 }
+
 #resumed_filter:before {
   font-family: "Font Awesome 5 Free";
   font-size: 14px;
@@ -1309,6 +1426,7 @@ ul.filterList a {
 #paused_filter>a img {
   display: none;
 }
+
 #paused_filter:before {
   font-family: "Font Awesome 5 Free";
   font-size: 14px;
@@ -1323,6 +1441,7 @@ ul.filterList a {
 #active_filter>a img {
   display: none;
 }
+
 #active_filter:before {
   font-family: "Font Awesome 5 Free";
   font-size: 14px;
@@ -1337,6 +1456,7 @@ ul.filterList a {
 #inactive_filter>a img {
   display: none;
 }
+
 #inactive_filter:before {
   font-family: "Font Awesome 5 Free";
   font-size: 14px;
@@ -1351,6 +1471,7 @@ ul.filterList a {
 #stalled_filter>a img {
   display: none;
 }
+
 #stalled_filter:before {
   font-family: "Font Awesome 5 Free";
   font-size: 14px;
@@ -1365,6 +1486,7 @@ ul.filterList a {
 #stalled_uploading_filter>a img {
   display: none;
 }
+
 #stalled_uploading_filter:before {
   font-family: "Font Awesome 5 Free";
   font-size: 14px;
@@ -1379,6 +1501,7 @@ ul.filterList a {
 #stalled_downloading_filter>a img {
   display: none;
 }
+
 #stalled_downloading_filter:before {
   font-family: "Font Awesome 5 Free";
   font-size: 14px;
@@ -1389,6 +1512,7 @@ ul.filterList a {
   color: rgba(255, 255, 255, 0.4);
   padding-left: 5px;
 }
+
 img[src="icons/inode-directory.svg"] {
   background: url(https://gilbn.github.io/theme.park/Resources/qbittorrent/folder-open-solid.svg);
   background-size: contain;
@@ -1397,6 +1521,7 @@ img[src="icons/inode-directory.svg"] {
   object-position: -999999px 999999px;
   filter: invert(79%) sepia(20%) saturate(0%) hue-rotate(135deg) brightness(87%) contrast(108%);
 }
+
 img[src="icons/network-server.svg"] {
   background: url(https://gilbn.github.io/theme.park/Resources/qbittorrent/network-wired-solid.svg);
   background-size: contain;
@@ -1405,6 +1530,7 @@ img[src="icons/network-server.svg"] {
   object-position: -999999px 999999px;
   filter: invert(79%) sepia(20%) saturate(0%) hue-rotate(135deg) brightness(87%) contrast(108%);
 }
+
 img[src="icons/mail-folder-inbox.svg"] {
   background: url(https://gilbn.github.io/theme.park/Resources/qbittorrent/inbox-solid.svg);
   background-size: contain;
@@ -1418,6 +1544,7 @@ img[src="icons/downloading_small.svg"],
 img[src="icons/seeding.svg"] {
   filter: invert(79%) sepia(20%) saturate(0%) hue-rotate(135deg) brightness(87%) contrast(108%);
 }
+
 #searchPattern {
   width: 300px;
   line-height: 2em;
@@ -1427,13 +1554,16 @@ img[src="icons/seeding.svg"]  {
   background-size: 1.5em;
   background-position: left;
 }
+
 #connectionStatus,
 #alternativeSpeedLimits {
   filter: invert(79%) sepia(20%) saturate(0%) hue-rotate(135deg) brightness(87%) contrast(108%);
 }
+
 #errored_filter>a img {
   display: none;
 }
+
 #errored_filter:before {
   font-family: "Font Awesome 5 Free";
   font-size: 14px;
@@ -1450,6 +1580,7 @@ img[src="icons/seeding.svg"]  {
 .filterTitle img {
   display: none;
 }
+
 .filterTitle:before {
   font-family: "Font Awesome 5 Free";
   font-size: 14px;
@@ -1466,6 +1597,7 @@ display: none;
 #categoriesFilterMenu>li img {
   display: none;
 }
+
 .contextMenu li>#CreateCategory:before {
   font-family: "Font Awesome 5 Free";
   font-size: 14px;
@@ -1482,9 +1614,12 @@ display: none;
 #torrentsTableMenu>li img {
   display: none;
 }
-.contextMenu, #contextCategoryList {
+
+.contextMenu,
+#contextCategoryList {
   box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
+
 /* Filter torrents */
 
 #torrentsFilterInput {
@@ -1495,7 +1630,9 @@ display: none;
   background-size: 1em;
   background-position: left;
 }
-.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(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/qbittorrent/arrow-right.gif);
   background-repeat: no-repeat;
   background-position: right center;
@@ -1506,6 +1643,7 @@ display: none;
 #alternativeSpeedLimits td img {
   display: none;
 }
+
 #alternativeSpeedLimits:before {
   font-family: "Font Awesome 5 Free";
   font-size: 14px;