src/_locales/de/messages.json

@@ -284,11 +284,23 @@
 		"description": "cache deleted notification"
 	},
 	"urlwasblocked": {
-		"message": " wurde blockiert, weil es gehostet wird bei ",
+		"message": " wurde blockiert, weil es bei ",
 		"description": "url was blocked because... notification"
 	},
 	"urlwasblockedtwo": {
-		"message": " und du entschieden hast, diese Cloud zu blockieren",
+		"message": " gehostet wird und du entschieden hast, diese Cloud zu blockieren",
 		"description": "url was blocked because... notification second part"
+	},
+	"for": {
+		"message": "für",
+		"description": "e.g. disable rule for website x"
+	},
+	"rulesdisabled": {
+		"message": "Du hast die Regeln ausgeschaltet für",
+		"description": "you disabled the rules for --url--"
+	},
+	"disabledhere": {
+		"message": "Deaktiviert auf dieser Seite",
+		"description": "You have disabled the rules on this site"
 	}
-}
+}

src/_locales/en/messages.json

@@ -283,12 +283,24 @@
 		"message": "Your local offline cache has been deleted",
 		"description": "cache deleted notification"
 	},
-	"cachedeleted": {
+	"urlwasblocked": {
 		"message": " was blocked as it is in ",
 		"description": "url was blocked because... notification"
 	},
 	"urlwasblockedtwo": {
 		"message": " cloud and you chose to block this cloud",
 		"description": "url was blocked because... notification second part"
+	},
+	"for": {
+		"message": "for",
+		"description": "e.g. disable rule for website x"
+	},
+	"rulesdisabled": {
+		"message": "You disabled the rules for",
+		"description": "you disabled the rules for --url--"
+	},
+	"disabledhere": {
+		"message": "Disabled on this site",
+		"description": "You have disabled the rules on this site"
 	}
 }

src/_locales/fr/messages.json

@@ -283,12 +283,24 @@
 		"message": "Votre cache local hors ligne a été supprimé",
 		"description": "cache deleted notification"
 	},
-	"cachedeleted": {
+	"urlwasblocked": {
 		"message": " a été bloqué parce qu'il est dans le nuage ",
 		"description": "url was blocked because... notification"
 	},
 	"urlwasblockedtwo": {
 		"message": " et vous avez choisi de bloquer ce nuage",
 		"description": "url was blocked because... notification second part"
+	},
+	"for": {
+		"message": "pour",
+		"description": "e.g. disable rule for website x"
+	},
+	"rulesdisabled": {
+		"message": "Vous avez désactivé les règles pour",
+		"description": "you disabled the rules for --url--"
+	},
+	"disabledhere": {
+		"message": "Désactivés sur cette page",
+		"description": "You have disabled the rules on this site"
 	}
-}
+}

src/css/popup2.css

@@ -2,14 +2,205 @@ li {
   margin: 0px 0px 0px -18px;
   padding: 0px;
 }
+
 html, body {
     max-width: 100%;
     overflow-x: hidden;
+	font-family: sans-serif;
+}
+
+#rowdiv {
+	display: grid;
+	grid-template-columns: auto auto;
+}
+
+#statstable {
+	grid-column: 1;
+	margin-left: 20px;
+	margin-right: 40px;
+	padding: 20px;
+	padding-right: 30px;
+	background-color: #f8f8f8;
+	margin-bottom: 15px;
+}
+
+#connectionsblockeddiv {
+	display: flex;
+	align-items: center;
+	margin-bottom: 10px;
+	font-size: 18px;
+	z-index: 10;
+	position: relative;
+	color: #bf0600;
+}
+
+#connectionsblockedicon {
+	margin-right: 5px;
+	height: 20px;
+	width: auto;
+	position: relative;
+	top: -1px;
+}
+
+#sinceinstallationdiv {
+	border-color: #dbdbdb;
+	border-bottom-style: solid;
+	border-width: 1px;
+	margin-top: 20px;
+	margin-bottom: 15px;
+	padding-bottom: 3px;
+}
+
+#onthispagediv {
+	border-color: #dbdbdb;
+	border-bottom-style: solid;
+	border-width: 1px;
+	margin-top: 10px;
+	margin-bottom: 10px;
+	padding-bottom: 3px;
+}
+
+#uidiv {
+	grid-column: 2;
+	padding-right: 20px;
+}
+
+#titlediv {
+	width: 100%;
+	vertical-align: middle;
+	margin-top: 5px;
+	margin-bottom: 25px;
+	cursor: default;
+}
+
+#titledivinner {
+	width: 150px;
+	position: relative;
+	left: 50%;
+	transform: translate(-50%,0%);
+	display: flex;
+	align-items: center;
+}
+
+#title {
+	font-size: 19px; 
+	white-space: nowrap;
+}
+
+#titlelogo {
+	height: 20px;
+	width: auto;
+	margin-right: 5px;
+}
+
+.btn {
+	padding-left: 8px;
+	padding-right: 8px;
+	padding-top: 8px;
+	padding-bottom: 8px;
+	border-radius: 4px;
+	border-style: solid;
+	border-color: transparent;
+	border-width: 1px;
+	color: white;
+	cursor: pointer;
+}
+
+.btn-red {
+	background-color: red;
+}
+
+.btn-red:hover {
+	background-color: #e60000;
+}
+
+.btn-green {
+	background-color: #0bc214;
+}
+
+.btn-green:hover {
+	background-color: #09ad11;
+}
+
+.btn-blue {
+	background-color: #3676ff;
+}
+
+.btn-blue:hover {
+	background-color: #336be3;
+}
+
+.btn-lightblue {
+	background-color: #3cb1ff;
+}
+
+.btn-lightblue:hover {
+	background-color: #3498db;
+}
+
+.btn-light {
+	color: #777;
+	background-color: #fafafa;
+}
+
+.btn-light:hover {
+	background-color: #f5f5f5;
+}
+
+.badge {
+	padding-left: 4px;
+	padding-right: 4px;
+	padding-top: 1px;
+	padding-bottom: 1px;
+	border-radius: 3px;
+	border-style: solid;
+	border-color: transparent;
+	color: white;
+	font-size: 12px;
+	cursor: default;
+}
+
+.badge-info {
+	background-color: #6939a8;
+}
+
+.badge-alert-info {
+	background-color: #ffe96e;
+	color: #877300;
+}
+
+.badge-alert-info-img {
+	position: relative;
+	top: 1px;
+	height: 15px;
+	width: auto;
+	margin-right: 4px;
+}
+
+#inExcludesAlert {
+	position: relative;
+	top: -2px;
+	font-size: 13px;
+}
+
+#infocenter {
+	margin-top: 5px;
+	margin-bottom: 15px;
+}
+
+#switchdiv {
+	margin-bottom: 0px;
+}
+
+#versiondisplay {
+	cursor: default;
+	padding-top: 5px;
 }
 
 tr.spaceUnder > td {
   padding-bottom: 0.5em;
 }
+
 .container {
   margin: 2px;
   width: auto;
@@ -17,6 +208,7 @@ tr.spaceUnder > td {
   line-height: 45px;
   text-align: center;
 }
+
 .resize_fit_center {
   max-width: 100%;
   max-height: 100%;
@@ -34,9 +226,11 @@ tr.spaceUnder > td {
 .newLine {
   display: block;
 }
+
 .btn-behance {
   background-color: #1769ff;
 }
+
 .btn-behance:hover {
   background-color: #4a8aff;
 }
@@ -54,7 +248,6 @@ tr.spaceUnder > td {
 }
 
 #inTempexcludesAlert,
-#inExcludesAlert,
 #inTempIncludesAlert,
 #refreshbutton {
   white-space: nowrap;
@@ -98,6 +291,7 @@ label {
   top: 5px;
   margin-top: 4px;
 }
+
 #copyBtnArea .btn {
 	margin:2px;
 }

src/images/alert-darkyellow.svg

@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="1em"
+   height="1em"
+   viewBox="0 0 16 16"
+   class="bi bi-exclamation-triangle"
+   fill="currentColor"
+   version="1.1"
+   id="svg2695"
+   sodipodi:docname="alert-darkyellow.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <metadata
+     id="metadata2701">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs2699" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1001"
+     id="namedview2697"
+     showgrid="false"
+     inkscape:zoom="14.75"
+     inkscape:cx="8"
+     inkscape:cy="8"
+     inkscape:window-x="-9"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2695" />
+  <path
+     fill-rule="evenodd"
+     d="M7.938 2.016a.146.146 0 0 0-.054.057L1.027 13.74a.176.176 0 0 0-.002.183c.016.03.037.05.054.06.015.01.034.017.066.017h13.713a.12.12 0 0 0 .066-.017.163.163 0 0 0 .055-.06.176.176 0 0 0-.003-.183L8.12 2.073a.146.146 0 0 0-.054-.057A.13.13 0 0 0 8.002 2a.13.13 0 0 0-.064.016zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"
+     id="path2691"
+     style="stroke:#877300;stroke-opacity:0;fill:#877300;fill-opacity:0.97555012" />
+  <path
+     d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"
+     id="path2693"
+     style="fill:#877300;fill-opacity:1" />
+</svg>

src/images/alert.svg

@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="1em"
+   height="1em"
+   viewBox="0 0 16 16"
+   class="bi bi-exclamation-triangle"
+   fill="currentColor"
+   version="1.1"
+   id="svg2695"
+   sodipodi:docname="alert.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <metadata
+     id="metadata2701">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs2699" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1001"
+     id="namedview2697"
+     showgrid="false"
+     inkscape:zoom="14.75"
+     inkscape:cx="8"
+     inkscape:cy="8"
+     inkscape:window-x="-9"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2695" />
+  <path
+     fill-rule="evenodd"
+     d="M7.938 2.016a.146.146 0 0 0-.054.057L1.027 13.74a.176.176 0 0 0-.002.183c.016.03.037.05.054.06.015.01.034.017.066.017h13.713a.12.12 0 0 0 .066-.017.163.163 0 0 0 .055-.06.176.176 0 0 0-.003-.183L8.12 2.073a.146.146 0 0 0-.054-.057A.13.13 0 0 0 8.002 2a.13.13 0 0 0-.064.016zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"
+     id="path2691"
+     style="stroke:#877300;stroke-opacity:0;fill:#877300;fill-opacity:0.97555012" />
+  <path
+     d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"
+     id="path2693"
+     style="fill:#877300;fill-opacity:1" />
+</svg>

src/images/ban.svg

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   aria-hidden="true"
+   focusable="false"
+   role="img"
+   viewBox="0 0 512 512"
+   version="1.1"
+   id="svg1569"
+   sodipodi:docname="ban.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <metadata
+     id="metadata1575">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs1573" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1001"
+     id="namedview1571"
+     showgrid="false"
+     inkscape:zoom="0.4609375"
+     inkscape:cx="256"
+     inkscape:cy="256"
+     inkscape:window-x="-9"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1569" />
+  <path
+     d="M256 8C119.034 8 8 119.033 8 256s111.034 248 248 248 248-111.034 248-248S392.967 8 256 8zm130.108 117.892c65.448 65.448 70 165.481 20.677 235.637L150.47 105.216c70.204-49.356 170.226-44.735 235.638 20.676zM125.892 386.108c-65.448-65.448-70-165.481-20.677-235.637L361.53 406.784c-70.203 49.356-170.226 44.736-235.638-20.676z"
+     id="path1567"
+     style="fill:#336be3;fill-opacity:1" />
+</svg>

src/images/blue-ban.svg

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   aria-hidden="true"
+   focusable="false"
+   role="img"
+   viewBox="0 0 512 512"
+   version="1.1"
+   id="svg1569"
+   sodipodi:docname="blue-ban.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <metadata
+     id="metadata1575">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs1573" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1001"
+     id="namedview1571"
+     showgrid="false"
+     inkscape:zoom="0.4609375"
+     inkscape:cx="-326.50847"
+     inkscape:cy="256"
+     inkscape:window-x="-9"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1569" />
+  <path
+     d="M256 8C119.034 8 8 119.033 8 256s111.034 248 248 248 248-111.034 248-248S392.967 8 256 8zm130.108 117.892c65.448 65.448 70 165.481 20.677 235.637L150.47 105.216c70.204-49.356 170.226-44.735 235.638 20.676zM125.892 386.108c-65.448-65.448-70-165.481-20.677-235.637L361.53 406.784c-70.203 49.356-170.226 44.736-235.638-20.676z"
+     id="path1567"
+     style="fill:#336be3;fill-opacity:1" />
+</svg>

src/images/cloud-blocked.svg

@@ -0,0 +1,3 @@
+<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-cloud-slash" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M3.112 5.112a3.125 3.125 0 0 0-.17.613C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13H11l-1-1H3.781C2.231 12 1 10.785 1 9.318c0-1.365 1.064-2.513 2.46-2.666l.446-.05v-.447c0-.075.006-.152.018-.231l-.812-.812zm2.55-1.45l-.725-.725A5.512 5.512 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773a3.2 3.2 0 0 1-1.516 2.711l-.733-.733C14.498 11.378 15 10.626 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3c-.875 0-1.678.26-2.339.661zm7.984 10.692l-12-12 .708-.708 12 12-.707.707z"/>
+</svg>