diff --git a/src/css/3p-filters.css b/src/css/3p-filters.css index a148c55ee..3f4efa06f 100644 --- a/src/css/3p-filters.css +++ b/src/css/3p-filters.css @@ -36,81 +36,79 @@ body.hideUnused #listsOfBlockedHostsPrompt:before { padding: 0; list-style-type: none; } -#lists > .groupEntry .geDetails { +.groupEntry .geDetails { cursor: pointer; } -#lists > .groupEntry .geDetails:before { +.groupEntry:not([data-groupkey="user"]) .geDetails:before { color: #888; content: '\2212 '; } -#lists > .groupEntry.hideUnused .geDetails:before { +.groupEntry.hideUnused:not([data-groupkey="user"]) .geDetails:before { content: '+ '; } -#lists > .groupEntry .geName { +.groupEntry .geName { pointer-events: none; } -#lists > .groupEntry .geCount { +.groupEntry .geCount { font-size: 90%; pointer-events: none; } -#lists > .groupEntry > ul { +.groupEntry > ul { margin: 0.25em 0 0 0; padding-left: 1em; } -li.listEntry { +.listEntry { margin: 0 auto 0 auto; padding: 0.2em 0; white-space: nowrap; } -body[dir="rtl"] li.listEntry { - } -li.listEntry.unused { +.groupEntry:not([data-groupkey="user"]) .listEntry.unused { display: none; } -li.listEntry > * { +.listEntry > * { margin-right: 0.5em; unicode-bidi: embed; } -li.listEntry.toRemove > input[type="checkbox"] { +.listEntry.toRemove > input[type="checkbox"] { visibility: hidden; } -li.listEntry.toRemove > a.content { +.listEntry.toRemove > a.content { text-decoration: line-through; } -li.listEntry > .fa { +.listEntry > .fa { color: inherit; display: none; font-size: 110%; opacity: 0.5; vertical-align: baseline; } -li.listEntry > a.towiki { +.listEntry > a.towiki { display: inline-block; } -li.listEntry > a.fa:hover { +.listEntry > a.fa:hover { opacity: 1; } -li.listEntry.support > a.support { +.listEntry.support > a.support { display: inline-block; } -li.listEntry > a.remove, -li.listEntry > a.remove:visited { +.listEntry > a.remove, +.listEntry > a.remove:visited { color: darkred; } -li.listEntry.external > a.remove { +.listEntry.external > a.remove { display: inline-block; } -li.listEntry.mustread > a.mustread { +.listEntry.mustread > a.mustread { display: inline-block; } -li.listEntry.mustread > a.mustread:hover { +.listEntry.mustread > a.mustread:hover { color: mediumblue; } -li.listEntry > .counts { +.listEntry > .counts { display: none; font-size: smaller; } -li.listEntry > input[type="checkbox"]:checked ~ .counts { +.listEntry > input[type="checkbox"]:checked ~ .counts { display: inline; } .dim { @@ -129,46 +127,46 @@ body[dir=rtl] #buttonApply { #buttonApply.disabled { display: none; } -li.listEntry span.status { +.listEntry span.status { color: #444; cursor: default; display: none; } -li.listEntry span.status:hover { +.listEntry span.status:hover { opacity: 1; } -li.listEntry span.unsecure { +.listEntry span.unsecure { color: darkred; } -li.listEntry.unsecure > input[type="checkbox"]:checked ~ span.unsecure { +.listEntry.unsecure > input[type="checkbox"]:checked ~ span.unsecure { display: inline-block; } -li.listEntry span.failed { +.listEntry span.failed { color: darkred; } -li.listEntry.failed span.failed { +.listEntry.failed span.failed { display: inline-block; } -li.listEntry span.cache { +.listEntry span.cache { cursor: pointer; } -li.listEntry.cached:not(.obsolete) > input[type="checkbox"]:checked ~ span.cache { +.listEntry.cached:not(.obsolete) > input[type="checkbox"]:checked ~ span.cache { display: inline-block; } -li.listEntry span.obsolete { +.listEntry span.obsolete { color: hsl(36, 100%, 40%); } -body:not(.updating) li.listEntry.obsolete > input[type="checkbox"]:checked ~ span.obsolete { +body:not(.updating) .listEntry.obsolete > input[type="checkbox"]:checked ~ span.obsolete { display: inline-block; } -li.listEntry span.updating { +.listEntry span.updating { transform-origin: 50% 46%; } -body.updating li.listEntry.obsolete > input[type="checkbox"]:checked ~ span.updating { +body.updating .listEntry.obsolete > input[type="checkbox"]:checked ~ span.updating { animation: spin 2s linear infinite; display: inline-block; } -li.listEntry.toImport > input[type="checkbox"] ~ textarea { +.listEntry.toImport > input[type="checkbox"] ~ textarea { border: 1px solid #ccc; box-sizing: border-box; display: block; @@ -180,6 +178,6 @@ li.listEntry.toImport > input[type="checkbox"] ~ textarea { white-space: pre; width: calc(100% - 4em); } -li.listEntry.toImport > input[type="checkbox"]:checked ~ textarea { +.listEntry.toImport > input[type="checkbox"]:checked ~ textarea { visibility: visible; } diff --git a/src/js/3p-filters.js b/src/js/3p-filters.js index 85af98f10..a853a9f88 100644 --- a/src/js/3p-filters.js +++ b/src/js/3p-filters.js @@ -234,6 +234,10 @@ var renderFilterLists = function(soft) { // Before all, set context vars listDetails = details; + // "My filters" will now sit in its own group. The following code + // ensures smooth transition. + listDetails.available['user-filters'].group = 'user'; + // Incremental rendering: this will allow us to easily discard unused // DOM list entries. uDom('#lists .listEntries .listEntry[data-listkey]').addClass('discard'); @@ -246,6 +250,7 @@ var renderFilterLists = function(soft) { groups = groupsFromLists(details.available), liGroup, i, groupKey, groupKeys = [ + 'user', 'default', 'ads', 'privacy', diff --git a/src/js/storage.js b/src/js/storage.js index 5cfea04fe..267820234 100644 --- a/src/js/storage.js +++ b/src/js/storage.js @@ -450,7 +450,7 @@ // User filter list. newAvailableLists[this.userFiltersPath] = { - group: 'default', + group: 'user', title: vAPI.i18n('1pPageName') };