Visual refresh based on Simply Secure concept artwork.

src/img/logo.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="250" height="250" data-name="Layer 1" version="1.1" viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#0a0a0a;}.cls-2{fill:#d12027;}.cls-3,.cls-4{fill:#fff;}.cls-3{stroke:#000;stroke-miterlimit:10;stroke-width:3px;}</style></defs><title>No Script Logo</title><ellipse class="cls-1" cx="123.55" cy="133.28" rx="105.69" ry="100.52" fill="#0a0a0a"/><path d="m125.02 1.7057e-6a125 125 0 1 0 124.98 125 125 125 0 0 0-124.98-125zm-3.5559 39.559a85.505 85.505 0 0 1 49.865 13.616l-118.16 118.16a85.505 85.505 0 0 1 68.291-131.77zm77.098 41.954a85.505 85.505 0 0 1 11.963 43.476 85.505 85.505 0 0 1-85.506 85.525v-0.0195a85.505 85.505 0 0 1-43.46-11.979z" fill="#d12027" stroke-width=".99761"/><path class="cls-3" d="m115.67 71.857c1.3-8.72 8.27-12.13 17.87-10.7a44.15 44.15 0 0 1 10.33 3.11l22.57 13.48c0.2 0.12 0.4 0.22 0.6 0.33 7.64 5.21 17.69 2 23-7.5l0.8-1.43c5.84-10.4 3.73-24.16-4.62-30.16a101.34 101.34 0 0 0-43.39-18c-36.84-5.5-64.41 13.5-69.74 49.19-10.09 67.57 73.28 60 68.44 92.39-1.51 10.08-9.73 14.42-21.5 12.67-11.37-1.7-25.82-10.11-38-21.79-7.65-7.36-19.11-5-25.14 5.36l-0.25 0.43c-5.54 9.54-4.31 22.23 2.72 29 14.94 14.44 34.33 24.55 54.13 27.51 34 5.08 64.44-10.71 70.26-49.67 10.32-68.59-72.8-62.62-68.08-94.22z" fill="#fff" stroke="#000" stroke-miterlimit="10" stroke-width="3px"/><rect class="cls-2" transform="rotate(225)" x="-197.87" y="-35.708" width="39.39" height="83.22" fill="#d12027"/><g fill="#0a0a0a"><path class="cls-1" d="m178.11 43.737c-2.67 1.54 2.92 4 5.62 8.64s1.48 9.82 4.15 8.28 2.64-6.58-0.06-11.25-7.04-7.21-9.71-5.67z"/><path class="cls-1" d="m167.07 40.027c0.41 3.05-4.92 0.11-10.27 0.82s-8.68 4.83-9.09 1.78 3.59-6.11 8.94-6.83 10.01 1.18 10.42 4.23z"/><ellipse class="cls-1" transform="rotate(-74.08)" cx="-9.2102" cy="186.15" rx="5.72" ry="5.94"/><ellipse class="cls-1" transform="rotate(-74.08)" cx="-5.7522" cy="165.8" rx="5.72" ry="5.94"/></g><circle class="cls-4" transform="rotate(-5)" cx="155.21" cy="65.063" r="1.55" fill="#fff"/><circle class="cls-4" transform="rotate(-5)" cx="173.01" cy="75.188" r="1.55" fill="#fff"/><text x="-139.33472" y="41.158333" fill="#d12027" font-family="Jellee" font-size="40px" font-weight="bold" letter-spacing="0px" word-spacing="0px" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;line-height:1.25" xml:space="preserve"><tspan x="-139.33472" y="77.271614"/></text><text x="191.86903" y="179.57651" fill="#ffffff" font-family="Jellee" font-size="40px" font-weight="bold" letter-spacing="0px" stroke="#0a0a0a" stroke-width="3.7795" word-spacing="0px" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;line-height:1.25" xml:space="preserve"><tspan x="191.86903" y="215.68979"/></text><g transform="translate(.020817 -1.0233)" display="none" fill="#ffffff" font-family="Jellee" font-weight="bold" letter-spacing="0px" stroke="#0a0a0a" word-spacing="0px"><text x="124.01678" y="237.75764" font-size="30.893px" stroke-width="2" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;line-height:1.25" xml:space="preserve"><tspan x="124.01678" y="237.75764" fill="#ffffff" font-family="Jellee" font-size="53.333px" font-weight="bold" stroke="#0a0a0a" stroke-width="2" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal">cript</tspan></text><text x="-0.18823318" y="51.450207" font-size="78.57px" stroke-width="2.3571" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;line-height:1.25" xml:space="preserve"><tspan x="-0.18823318" y="51.450207" fill="#ffffff" font-family="Jellee" font-size="62.856px" font-weight="bold" stroke="#0a0a0a" stroke-width="2.3571" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal">No</tspan></text></g></svg>

src/ui/options.css

@@ -25,7 +25,7 @@ body {
   text-align: right;
 }
 #header h1 {
-  color: #048;
+  color: #d12027;
   text-shadow: 0.06em 0.06em 0.06em rgba(0,0,0,.5);
   font-size: 2em;
   padding: 0;
@@ -33,7 +33,7 @@ body {
   text-align: right;
 }
 #version {
-  color: #048;
+  color: #444;
   font-size: 0.75em;
   padding: 0;
   margin: 0 0 0.5em;
@@ -168,22 +168,20 @@ button.add {
 
 .flextabs__toggle {
   -moz-appearance: none;
-  border-width: 0 1px 0 0 !important;
+  border-width: 0 !important;
   margin: 0 4px 0 0;
   background: #ccc;
-  outline-width: 1px 0 0 0 !important;
+  outline-width: 0 !important;
 }
 
 
 
 .flextabs__content {
-  border-width: 0 1px 1px 0;
-  border-radius: 0 .5em 0 0;
   padding: .5em;
 }
 
 .flextabs__toggle {
-  border-radius: .2em .2em 0 0;
+  border-radius: 1em 1em 0 0;
   padding: .2em .4em;
 }
 

src/ui/popup.css

@@ -4,15 +4,27 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
+
+html:not(.mobile) {
+  overflow-x: hidden;
+}
+
 body {
   background: white;
+  margin: 0.5em;
+  padding: 0;
+}
+
+html:not(.mobile) > body {
+  width: 600px;
+  padding: 0 .5em 0 0;
 }
 
 #top {
   font-size: 1em;
   position: relative;
-  margin: 0;
-  height: 2.4em;
+  padding: 0 0 .4em 0;
+  height: 2.8em;
   min-width: 18.75em;
   border-bottom: 0.06em solid #eee;
   display: flex;
@@ -25,7 +37,7 @@ body {
   -webkit-appearance: none !important;
   -moz-appearance: none !important;
   cursor: pointer;
-  color: #048;
+  color: #444;
   background: transparent no-repeat left;
   padding-left: 1.6em;
   border: none;
@@ -35,8 +47,8 @@ body {
 }
 
 #top .icon {
-  width: 2em;
-  height: 2em;
+  width: 2.5em;
+  height: 2.5em;
   margin: 0.25em;
   cursor: pointer;
   font-size: 1em;
@@ -94,8 +106,7 @@ body {
   position: relative;
   margin: .25em 1.5em;
   padding: 0;
-
-  height: 2em;
+  height: 2.5em;
   overflow: hidden;
   opacity: .5;
 }
@@ -263,7 +274,7 @@ body {
   background-size: 2em;
   background-position: left center;
   background-repeat: no-repeat;
-  min-height: 3em;
+  min-height: 2em;
   font-size: 1.2em;
   vertical-align: middle;
   white-space: normal;

src/ui/prompt.css

@@ -5,7 +5,7 @@
  */
 
 html {
-  background: linear-gradient(to bottom, #e4f5fc 0%,#bfe8f9 41%,#9fd8ef 90%,#2ab0ed 100%) no-repeat;
+  background: linear-gradient(to bottom, #f7f7f7 0%,#ccc 41%,#aaa 90%,#a88 100%) no-repeat;
 }
 
 body {
@@ -29,17 +29,19 @@ html.mobile > body {
   text-align: left;
   margin: 0;
   line-height: 2em;
-  color: #048;
+  color: #d12027;
   z-index: 500;
   padding: .8em .8em 0 .8em;
   display: block;
-  background: url(/img/icon96.png) no-repeat top right;
-  height: 96px;
+  background: url(/img/logo.svg) no-repeat top right;
+  background-size: contain;
+  min-height: 5em;
 }
 
 #title {
-  margin-right: 96px;
-  font-size: 1.3em;
+  margin-right: 4em;
+  text-shadow: 0.06em 0.06em 0.06em rgba(0,0,0,.5);
+  font-size: 2em;
   bottom: 0;
   top: 0;
 }

src/ui/ui.css

@@ -203,9 +203,7 @@ input[type="checkbox"] {
   border: none;
   font-size: 1em;
 }
-html:not(.mobile) .sites > tr.site:hover {
-  background: #bdf;
-}
+
 html:not(.mobile) .sites > tr.site:focus-within {
   background: #ccc;
 }
@@ -303,9 +301,9 @@ span.preset {
   -webkit-appearance: none;
   -moz-appearance: none;
   background: url(/img/ui-no64.png) no-repeat center left;
-  background-size: 1.5em;
-  width: 1.5em;
-  height: 1.5em;
+  background-size: 1.8em;
+  width: 2em;
+  height: 2em;
   outline: 0;
   opacity: .5;
   margin: 0 .5em 0.13em .5em;
@@ -330,7 +328,7 @@ span.preset {
   transform: none;
   min-width: 9.38em;
   background-color: #ddd;
-  border-radius: 0.5em;
+  border-radius: 1em;
 }
 
 .presets input.preset:focus {
@@ -338,8 +336,8 @@ span.preset {
 }
 .sites input + label {
   font-size: 1em;
-  line-height: 1.5em;
-  vertical-align: top;
+  line-height: 2em;
+  vertical-align: baseline;
 }
 .presets label.preset {
   padding: 0;
@@ -352,7 +350,7 @@ span.preset {
   opacity: .6;
   position: absolute;
   left: 0em;
-  padding-left: 2.5em;
+  padding-left: 3em;
 
 }
 
@@ -373,14 +371,14 @@ span.preset {
    overflow: visible;
 }
 
-input:focus, button:focus, input:focus, a:focus {
-  --focus-color:    #bdf8;
+:focus-visible {
+  --focus-color: #F777;
   outline: 0;
   filter:
-    drop-shadow(3px 3px 3px var(--focus-color))
-    drop-shadow(-3px 3px 3px var(--focus-color))
-    drop-shadow(3px -3px 3px var(--focus-color))
-    drop-shadow(-3px -3px 3px var(--focus-color));
+    drop-shadow(2px 2px 2px var(--focus-color))
+    drop-shadow(-2px 2px 2px var(--focus-color))
+    drop-shadow(2px -2px 2px var(--focus-color))
+    drop-shadow(-2px -2px 2px var(--focus-color));
 }
 
 input.preset:disabled {
@@ -445,14 +443,20 @@ input.preset:checked ~ input.temp {
   background-color: #ccc;
 }
 
-.customizing input.preset:checked, #presets input.preset:checked, .customizer fieldset {
+.customizing input.preset:checked, #presets input.preset:checked {
   background-color: #eee;
-  border-radius: 0.5em 0.5em 0 0;
-  margin: 0 0.06em 0.06em 0.06em;
 }
+
+.customizer fieldset {
+  background-color: #eee;
+  margin: 0 0.06em 0.06em 0.06em;
+  box-shadow: #ccc 0 2px 2px;
+  position: relative;
+}
+
 .customizing input.preset:checked, #presets input.preset, #presets input.preset:checked  {
   margin: 0 0 -0.2em 1em;
-  border-radius: 0.5em 0.5em 0 0;
+  border-radius: 1em 1em 0 0;
 }
 
 .customizing input.preset:checked + label.preset {
@@ -466,11 +470,6 @@ input.preset:checked ~ input.temp {
 #presets .customizing, #presets .customizer {
   background-color: #ddd !important;
 }
-.customizer fieldset {
-  box-shadow: 1px 1px 1px #888;
-  max-width: 580px;
-  position: relative;
-}
 
 #presets legend select, #presets legend button {
   display: none;
@@ -488,10 +487,6 @@ input.preset:checked ~ input.temp {
   margin-top: 0px;
 }
 
-#noscript-options .customizer fieldset {
-  max-width: fit-content;
-}
-
 .customizer.closed .customizer-controls   {
   height: 0;
   overflow: hidden;
@@ -566,5 +561,5 @@ legend {
 }
 
 #xssChoices option.allow {
-  color: #080;
+  color: #222;
 }