Merge pull request #245 from stonecrusher/patch-1

uBO logger

css/common-files/color_variables.css

@@ -152,6 +152,6 @@ regexp(".*\\.(p|P)(d|D)(f|F).*") {
     --cm-red: #de7474!important;
     --start-indicator-for-updater-scripts: black;
     --end-indicator-for-updater-scripts: black;
-    --dummy-variable-for-updater-scripys: black
+    --dummy-variable-for-updater-scripts: black
   }
-}
+}

css/userContent-files/webextension-tweaks/ublock_origin.css

@@ -6,7 +6,7 @@
     background-image: none!important;
     border-color: var(--in-content-box-border-color)!important;
     color: var(--in-content-text-color)!important;
-    opacity: 1!important
+    /*opacity: 1!important/**/
   }
   button#bye,
   button#proceedPermanent,
@@ -37,7 +37,7 @@
   body,
   body[dir=ltr] #panes > div {
     background: var(--tone-7)!important;
-    color: var(--tone-4)!important
+    color: var(--tone-3)!important
   }
   #diff {
     border-color: var(--tone-5)!important
@@ -229,6 +229,84 @@
   .permatoolbar .button:hover {
     background-color: var(--grey-60)!important
   }
+  .modalDialog .dialog {
+    background-color: var(--tone-8)!important;
+    border-color: var(--tone-5)!important
+  }
+  li.listEntry > a.remove,
+  li.listEntry > a.remove:visited,
+  li.listEntry span.failed,
+  li.listEntry span.unsecure {
+    color: #de7474!important
+  }
+  a.fa.support,
+  a.mustread {
+    color: var(--in-content-page-color)!important
+  }
+  li.listEntry.mustread > a.mustread:hover {
+    color: var(--accent-2)!important
+  }
+  li.listEntry span.obsolete {
+    color: var(--warning-color)!important
+  }
+  input[type=text] {
+    -moz-appearance: none !important;
+    background: var(--tone-6)!important;
+    color: var(--in-content-page-color)!important;
+    border: none!important
+  }
+  #modalOverlay > div > div:nth-of-type(2):hover svg {
+    stroke: var(--tone-1)!important
+  }
+}
+
+@-moz-document url-prefix("moz-extension://uBlock0@raymondhill.net/logger-ui") {
+  .fa-icon > svg,
+  .ubo-icon > svg {
+    fill: var(--in-content-page-color)!important
+  }
+  .permatoolbar .button.active {
+    fill: var(--in-content-link-color)!important
+  }
+  textarea {
+    -moz-appearance: none;
+    background: var(--in-content-box-background)!important;
+    color: var(--in-content-text-color)!important;
+    border: 1px solid!important
+  }
+  #netFilteringDialog > .panes > .details > div[data-status="1"],
+  #vwRenderer .logEntry > div[data-status="1"] {
+    background-color: #463237!important
+  }
+  a {
+    color: var(--in-content-link-color)
+  }
+  select {
+    color: var(--in-content-selected-text) !important;
+    border-color: var(--in-content-box-border-color)!important;
+    background: var(--tone-6) !important;
+    -moz-appearance: none !important; /* remove default arrow */
+    /* add custom arrow */
+    padding-right: 18px !important;
+    background-image: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20d%3D%22M20%2020l10%2010%2010-10z%22%20fill%3D%22%23ccc%22%2F%3E%3C%2Fsvg%3E) !important;
+    background-position: center right !important;
+    background-repeat: no-repeat !important;
+    background-size: contain !important
+  }
+  select#pageSelector {
+    color: var(--in-content-selected-text) !important;
+    border-color: var(--in-content-box-border-color)!important;
+    background: var(--tone-6) !important;
+    -moz-appearance: none !important; /* remove default arrow */
+    /* add custom arrow */
+    padding-right: 25px !important;
+    background-image: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20d%3D%22M20%2020l10%2010%2010-10z%22%20fill%3D%22%23ccc%22%2F%3E%3C%2Fsvg%3E) !important;
+    background-position: center right !important;
+    background-repeat: no-repeat !important;
+    background-size: contain !important
+  }
+
+  /* #netInspector */
   #netInspector tr.blocked {
     background-color: #4b3137!important;
     color: #ff9494!important
@@ -250,10 +328,53 @@
   body:not(.popupOn) #netInspector tr.canMtx td:nth-of-type(2):hover {
     background: var(--tone-8)!important
   }
-  .modalDialog .dialog {
+  body #netInspector td {
-    background-color: var(--tone-8)!important;
     border-color: var(--tone-5)!important
   }
+  #netInspector tr.maindoc {
+    background-color: var(--tone-8)!important;
+    color: var(--grey-30)!important
+  }
+  #netInspector #filterExprPicker {
+    background-color: var(--in-content-box-background)!important;
+    color: var(--tone-3)!important;
+    border-color: var(--in-content-box-border-color)!important
+  }
+  #netInspector #filterExprPicker > div {
+    border: none !important;
+    border-top: 1px solid var(--tone-5) !important
+  }
+  #netInspector #filterExprPicker > div:first-of-type {
+    border: none !important;
+  }
+  #netInspector #filterInput > input {
+    background: var(--in-content-box-background)!important;
+    -moz-appearance: none
+  }
+  #netInspector #filterInput {
+    border-color: var(--in-content-box-border-color)!important
+  }
+  #netInspector #filterExprPicker span.on[data-filtex] {
+    background-color: var(--in-content-primary-button-background)!important;
+    border: 1px solid!important;
+    color: var(--in-content-selected-text)!important
+  }
+  #netInspector #filterExprPicker span[data-filtex]:hover {
+    background-color: var(--in-content-primary-button-background-hover)!important;
+    border: 1px solid!important;
+    color: var(--in-content-selected-text)!important
+  }
+  #netInspector #filterExprButton {
+    top: 0!important
+  }
+  #netInspector #filterExprButton:hover {
+    background-color: transparent!important
+  }
+  #netInspector #vwRenderer .logEntry > div.canDetails:hover > span {
+    background-color: var(--accent-3)!important
+  }
+
+  /* #netFilteringDialog */
   #netFilteringDialog .dialog > div.headers > span.header.selected {
     background-color: var(--tone-8)!important;
     color: var(--tone-4)!important;
@@ -274,108 +395,6 @@
     background-color: var(--tone-6)!important;
     border: none!important
   }
-  body #netInspector td {
-    border-color: var(--tone-5)!important
-  }
-  #netInspector tr.maindoc {
-    background-color: var(--tone-8)!important;
-    color: var(--grey-30)!important
-  }
-  li.listEntry > a.remove,
-  li.listEntry > a.remove:visited,
-  li.listEntry span.failed,
-  li.listEntry span.unsecure {
-    color: #de7474!important
-  }
-  a.fa.support,
-  a.mustread {
-    color: var(--in-content-page-color)!important
-  }
-  li.listEntry.mustread > a.mustread:hover {
-    color: var(--accent-2)!important
-  }
-  li.listEntry span.obsolete {
-    color: var(--warning-color)!important
-  }
-  input[type=text] {
-    background: var(--tone-6)!important;
-    color: var(--in-content-page-color)!important;
-    border: none!important
-  }
-  #modalOverlay > div > div:nth-of-type(2):hover svg {
-    stroke: var(--tone-1)!important
-  }
-  #netInspector #filterExprPicker {
-    background-color: var(--in-content-box-background)!important;
-    color: var(--tone-4)!important;
-    border-color: var(--in-content-box-border-color)!important
-  }
-  #domInspector ul {
-    background-color: var(--in-content-page-background)!important
-  }
-  #domInspector li > span:first-child {
-    color: var(--in-content-page-color)!important
-  }
-}
-@-moz-document url-prefix("moz-extension://uBlock0@raymondhill.net/logger-ui") {
-  .fa-icon > svg,
-  .ubo-icon > svg {
-    fill: var(--in-content-page-color)!important
-  }
-  .permatoolbar .button.active {
-    fill: var(--in-content-link-color)!important
-  }
-  #netInspector #filterInput > input {
-    background: var(--in-content-box-background)!important;
-    -moz-appearance: none
-  }
-  #netInspector #filterInput {
-    border-color: var(--in-content-box-border-color)!important
-  }
-  textarea {
-    -moz-appearance: none;
-    background: var(--in-content-box-background)!important;
-    color: var(--in-content-text-color)!important;
-    border: 1px solid!important
-  }
-  #modalOverlay > div > div:nth-of-type(1),
-  #modalOverlay > div > div:nth-of-type(2) {
-    background-color: var(--in-content-page-background)!important
-  }
-  #modalOverlay > div > div:nth-of-type(2) svg {
-    stroke: var(--tone-4)!important
-  }
-  #loggerExportDialog .options span.on[data-i18n],
-  #loggerExportDialog .options span.pushbutton:active {
-    background-color: var(--in-content-primary-button-background)!important;
-    color: var(--in-content-selected-text)!important
-  }
-  #loggerExportDialog .options span[data-i18n] {
-    border: 1px solid!important
-  }
-  #loggerExportDialog .options span[data-i18n]:hover {
-    background-color: var(--in-content-primary-button-background-hover)!important;
-    color: var(--in-content-selected-text)!important;
-    border-color: var(--in-content-primary-button-background-hover)!important
-  }
-  #netInspector #filterExprPicker span.on[data-filtex] {
-    background-color: var(--in-content-primary-button-background)!important;
-    border: 1px solid!important;
-    color: var(--in-content-selected-text)!important
-  }
-  #netInspector #filterExprPicker span[data-filtex]:hover {
-    background-color: var(--in-content-primary-button-background-hover)!important;
-    border: 1px solid!important;
-    color: var(--in-content-selected-text)!important
-  }
-  #netFilteringDialog > .panes > .details > div {
-    background-color: var(--in-content-box-background)!important;
-    border-color: var(--in-content-box-border-color)!important
-  }
-  #netFilteringDialog > .panes > .details > div[data-status="1"],
-  #vwRenderer .logEntry > div[data-status="1"] {
-    background-color: #463237!important
-  }
   body[dir=ltr] #netFilteringDialog > .panes > .details > div > span:nth-of-type(1) {
     border-color: var(--in-content-box-border-color)!important
   }
@@ -394,46 +413,88 @@
     background-color: var(--in-content-box-background)!important;
     border-color: var(--in-content-box-border-color)!important
   }
-  a {
+  #netFilteringDialog > .panes > .details > div {
-    color: var(--in-content-link-color)
+    background-color: var(--in-content-box-background)!important;
+    border-color: var(--in-content-box-border-color)!important
   }
-  @-moz-document url-prefix("about:blank") {
+  #netFilteringDialog > .headers > .tools > span:hover {
-    aside {
+    var(--in-content-box-background-active) !important
-      background-color: var(--in-content-page-background)!important;
+  }
-      border-color: var(--tone-8)!important;
+
-      color: var(--in-content-page-color)!important
+  /* domInspector */
-    }
+  #domInspector ul {
-    ul > li > ul > li:hover {
+    background-color: var(--in-content-page-background)!important
-      background-color: var(--in-content-box-background)!important
+  }
-    }
+  #domInspector li > span:first-child {
-    section > div:first-child > textarea {
+    color: var(--in-content-page-color)!important
-      background-color: var(--in-content-box-background)!important;
+  }
-      color: var(--in-content-page-color)!important
+  #domInspector li.isCosmeticHide,
-    }
+  #domInspector li.isCosmeticHide ul,
-    section > div:first-child {
+  #domInspector li.isCosmeticHide li {
-      border-color: var(--in-content-box-border-color)!important
+    background-color: var(--red-90) !important
-    }
+  }
-    section.invalidFilter > div:first-child {
+
-      border-color: red!important
+  /* #modalOverlay */
-    }
+  #modalOverlay > div > div:nth-of-type(1),
-    button {
+  #modalOverlay > div > div:nth-of-type(2) {
-      background-color: var(--in-content-page-background)!important;
+    background-color: var(--in-content-page-background)!important
-      border-color: var(--in-content-box-border-color)!important;
+  }
-      color: var(--in-content-page-color)!important
+  #modalOverlay > div > div:nth-of-type(2) svg {
-    }
+    stroke: var(--tone-4)!important
-    button:disabled {
+  }
-      color: var(--tone-5)!important
+
-    }
+  /* #loggerExportDialog */
-    button:not(:disabled):hover {
+  #loggerExportDialog .options span.on[data-i18n],
-      background-color: var(--in-content-box-background-hover)!important
+  #loggerExportDialog .options span.pushbutton:active {
-    }
+    background-color: var(--in-content-primary-button-background)!important;
-    #create:not(:disabled) {
+    color: var(--in-content-selected-text)!important
-      background-color: var(--theme-highlight-yellow)!important;
+  }
-      color: #000!important
+  #loggerExportDialog .options span[data-i18n] {
-    }
+    border: 1px solid!important
-    body.preview #preview {
+  }
-      background-color: var(--theme-highlight-blue)!important;
+  #loggerExportDialog .options span[data-i18n]:hover {
-      color: #000!important
+    background-color: var(--in-content-primary-button-background-hover)!important;
-    }
+    color: var(--in-content-selected-text)!important;
+    border-color: var(--in-content-primary-button-background-hover)!important
+  }
+}
+
+@-moz-document url-prefix("about:blank") {
+  aside {
+    background-color: var(--in-content-page-background)!important;
+    border-color: var(--tone-8)!important;
+    color: var(--in-content-page-color)!important
+  }
+  ul > li > ul > li:hover {
+    background-color: var(--in-content-box-background)!important
+  }
+  section > div:first-child > textarea {
+    background-color: var(--in-content-box-background)!important;
+    color: var(--in-content-page-color)!important
+  }
+  section > div:first-child {
+    border-color: var(--in-content-box-border-color)!important
+  }
+  section.invalidFilter > div:first-child {
+    border-color: red!important
+  }
+  button {
+    background-color: var(--in-content-page-background)!important;
+    border-color: var(--in-content-box-border-color)!important;
+    color: var(--in-content-page-color)!important
+  }
+  button:disabled {
+    color: var(--tone-5)!important
+  }
+  button:not(:disabled):hover {
+    background-color: var(--in-content-box-background-hover)!important
+  }
+  #create:not(:disabled) {
+    background-color: var(--theme-highlight-yellow)!important;
+    color: #000!important
+  }
+  body.preview #preview {
+    background-color: var(--theme-highlight-blue)!important;
+    color: #000!important
   }
 }