spell "usercss" fully in write-as

+ remove leftovers
openstyles · Sep 9, 2023 · 53e3659 · 53e3659
1 parent 4f09e38
commit 53e3659
Show file tree

Hide file tree

Showing 11 changed files with 51 additions and 26 deletions.
diff --git a/.icons/usercss.svg b/.icons/usercss.svg
diff --git a/global-dark.css b/global-dark.css
@@ -21,6 +21,7 @@
     --cmin: hsl(0, 0%, 100%);
     --cmax: hsl(0, 0%, 0%);
     --accent-1: hsl(180, 100%, 95%);
+    --accent-2: hsl(180, 50%, 30%);
     --accent-3: hsl(180, 30%, 18%);
     --input-bg: var(--c95);
     --red1: hsl(0, 85%, 55%);

diff --git a/global.css b/global.css
@@ -32,7 +32,7 @@
   --cmax: hsl(0, 0%, 100%);
   --bg: var(--c100);
   --fg: var(--c00);
-  --accent-1: hsl(180, 100%, 15%);
+  --accent-1: hsl(180, 100%, 19%);
   --accent-2: hsl(180, 50%, 40%);
   --accent-3: hsl(180, 40%, 69%);
   --red1: hsl(0, 70%, 45%);
@@ -452,7 +452,7 @@ body.resizing-v > * {
 @font-face {
   font-family: 'icons';
   src: url(/icons.ttf) format('truetype');
-  unicode-range: /*AUTO-GENERATED-ICON-RANGE*/ U+20,U+2195,U+2197,U+21b2,U+21b6,U+22c1,U+22ee,U+24d8,U+25bc,U+25f4,U+2611,U+2699,U+270f,U+2713,U+2714,U+2716,U+2795,U+2796,U+27f3,U+e000;
+  unicode-range: /*AUTO-GENERATED-ICON-RANGE*/ U+20,U+2195,U+2197,U+21b2,U+21b6,U+222a,U+22c1,U+22ee,U+24d8,U+25bc,U+25f4,U+2611,U+2699,U+270f,U+2713,U+2714,U+2716,U+2795,U+2796,U+27f3,U+d83e;
 }
 
 /*AUTO-GENERATED-ICON*/ .i-check1::after { content: "✓"; }
@@ -470,7 +470,8 @@ body.resizing-v > * {
 /*AUTO-GENERATED-ICON*/ .i-plus::after { content: "➕"; }
 /*AUTO-GENERATED-ICON*/ .i-reorder::after { content: "↕"; }
 /*AUTO-GENERATED-ICON*/ .i-select-arrow::after { content: "▼"; }
-/*AUTO-GENERATED-ICON*/ .i-sort-down::after { content: ""; }
+/*AUTO-GENERATED-ICON*/ .i-sort-down::after { content: "🠇"; }
+/*AUTO-GENERATED-ICON*/ .i-usercss::after { content: "∪"; }
 /*AUTO-GENERATED-ICON*/ .i-undo::after { content: "↶"; }
 /*AUTO-GENERATED-ICON*/ .i-update-check::after { content: "⟳"; }
 /*AUTO-GENERATED-ICON*/ .i-v::after { content: "⋁"; }
diff --git a/icons.ttf b/icons.ttf
diff --git a/manage.html b/manage.html
@@ -42,7 +42,7 @@ <h2 class="style-name">
   <template data-id="styleNewUI">
     <div class="entry">
       <h2 class="style-name">
-        <input class="checker" type="checkbox" i18n="title:toggleStyle">
+        <input type="checkbox" i18n="title:toggleStyle">
         <a class="style-name-link">
           &nbsp;
           <span class="style-info" data-type="version"></span>
@@ -249,9 +249,9 @@ <h2 i18n="manageFilters">:
           <a href="edit.html">
             <button id="add-style-label" i18n="addStyleLabel" tabindex="-1"></button>
           </a>
-          <label id="add-style-as-usercss-wrapper">
+          <label id="add-style-as-usercss-wrapper" i18n="title:optionsAdvancedNewStyleAsUsercss">
             <input type="checkbox" id="newStyleAsUsercss">
-            <span i18n="manageNewStyleAsUsercss, title:optionsAdvancedNewStyleAsUsercss"></span>
+            <i class=i-usercss></i>
             <a id="usercss-wiki"
                class="icon"
                href="https://github.com/openstyles/stylus/wiki/Usercss"

diff --git a/manage/manage.css b/manage/manage.css
@@ -87,20 +87,30 @@ a:hover {
   align-items: center;
   flex-wrap: wrap;
 }
-
 #add-style-wrapper > * {
   /* in case the children are wrapped */
   margin-bottom: .5rem;
 }
-
 #header #add-style-as-usercss-wrapper {
   display: flex;
   align-items: center;
 }
-
 #add-style-as-usercss-wrapper:not(:hover) input:not(:checked) ~ a i {
   color: var(--c65);
 }
+#newStyleAsUsercss + i {
+  font-size: 16px;
+  cursor: auto;
+}
+#newStyleAsUsercss:checked,
+#newStyleAsUsercss:checked + i {
+  border-color: var(--accent-1);
+  color: var(--accent-1);
+}
+#newStyleAsUsercss:checked + i + a i {
+  color: var(--accent-2);
+  filter: grayscale(.75);
+}
 
 button.icon {
   --w: 16px;

diff --git a/manage/sorter.js b/manage/sorter.js
@@ -1,5 +1,4 @@
 /* global $ $create dom messageBoxProxy */// dom.js
-/* global FIREFOX */// toolbox.js
 /* global installed */// manage.js
 /* global prefs */
 /* global t */// localization.js
@@ -92,7 +91,7 @@ const sorter = (() => {
     const option = $create('option');
     const optgroup = $create('optgroup');
     const meta = {
-      desc: ` ${FIREFOX ? '🠇' : '\uE000'}`,
+      desc: ` 🠇`,
       enabled: t('genericEnabledLabel'),
       disabled: t('genericDisabledLabel'),
       dateNew: ` (${t('sortDateNewestFirst')})`,

diff --git a/popup.html b/popup.html
@@ -127,7 +127,7 @@
     <div class="if-not-blocked">
       <label id="write-as" i18n="title:optionsAdvancedNewStyleAsUsercss">
         <input id="newStyleAsUsercss" type="checkbox">
-        <div>U</div>
+        <i class=i-usercss></i>
       </label>
       <div id="write-style">
         <span id="write-style-for" i18n="writeStyleFor"></span>
@@ -150,7 +150,7 @@
                menu-gf="GreasyFork"></button>
     </div>
     <button id="options-btn" i18n="title:openOptions" class="rel">
-      <svg class="if-not-blocked abs i-config" viewBox="0 0 20 20">
+      <svg class="if-not-blocked abs" viewBox="0 0 20 20">
         <text y="100%">⚙</text>
       </svg>
       <span class="if-not-blocked">&nbsp;</span>

diff --git a/popup/popup.css b/popup/popup.css
@@ -413,24 +413,28 @@ a:hover i {
 /* 'New style' links */
 #write-style {
   cursor: pointer;
+  line-height: 16px;
 }
-#newStyleAsUsercss ~ div {
-  font-weight: bold;
-  margin: 0 -1px 0;
-  padding: 1px 3px 0;
-  text-align: center;
-  border-radius: 4px;
-  position: absolute;
+#write-as {
+  flex: 0;
 }
-#newStyleAsUsercss:checked ~ div {
-  color: var(--bg);
-  background-color: var(--accent-2);
+#newStyleAsUsercss + i {
+  pointer-events: auto;
+  margin-left: -1px;
+  color: var(--c60);
+}
+#newStyleAsUsercss:checked,
+#newStyleAsUsercss:checked + i {
+  border-color: var(--accent-1);
+  color: var(--accent-2);
 }
 
 .write-style-link {
   margin-left: .6ex
 }
-
+.write-style-link:nth-last-child(2) {
+  font-weight: bold;
+}
 .about-blank > .breadcrumbs {
   pointer-events: none;
 }

diff --git a/popup/popup.js b/popup/popup.js
@@ -347,7 +347,6 @@ function createStyleElement(style) {
     });
     const styleName = $('.style-name', entry);
     Object.assign(styleName, {
-      htmlFor: ENTRY_ID_PREFIX_RAW + style.id,
       onclick: Events.name,
     });
     styleName.appendChild(document.createTextNode(' '));

diff --git a/tools/build-icons.js b/tools/build-icons.js
@@ -21,7 +21,8 @@ const SVG_MAP = Object.entries({
   'plus': '➕',
   'reorder': '↕',
   'select-arrow': '▼',
-  'sort-down': '\uE000', // must be in PUA range because the symbol is used along with normal fonts
+  'sort-down': '🠇',
+  'usercss': '∪',
   'undo': '↶',
   'update-check': '⟳',
   'v': '⋁',