css: standardize styling of fineprint text.

Fineprint text was variously styled with `.info`, `.tn`, `.hint`, or
`.cost-footnote` css classes. Standardize on `.fineprint` instead. Use
`.hint` only for form hints and `.tn` only for <tn> tags in translation
notes.

Incidentally changes the font size of form hints to 0.8em (was 0.7em)
and the color of fineprint to #888 (was #AAA or #666).

app/javascript/src/styles/base/020_base.scss

@@ -80,18 +80,8 @@ table tfoot {
   margin-top: 2em;
 }
 
-.hint {
-  color: var(--hint-color);
+.fineprint {
+  color: var(--fineprint-color);
   font-style: italic;
-}
-
-.tn {
   font-size: 0.8em;
-  color: var(--translation-note-color);
-}
-
-p.info {
-  color: var(--info-color);
-  font-style: italic;
-  font-size: 80%;
 }

app/javascript/src/styles/base/040_colors.css

@@ -1,14 +1,10 @@
 :root {
   --body-background-color: white;
 
-  --hint-color: #666;
-  --translation-note-color: gray;
-
-  --info-color: #AAA;
+  --fineprint-color: #888;
 
   --link-color: hsl(213, 100%, 50%);
   --link-hover-color: hsl(213, 100%, 75%);
-  --note-highlight-color: var(--preview-pending-color);
 
   --subnav-menu-background-color: #F5F5FF;
 
@@ -20,7 +16,6 @@
   --user-upgrade-gold-background-color: #FFF380;
   --user-upgrade-platinum-background-color: #EEE;
   --user-upgrade-table-row-hover-background-color: #FEF;
-  --user-upgrade-cost-footnote-color: gray;
 
   --table-header-border: 2px solid #666;
   --table-header-text-color: #333;
@@ -55,7 +50,6 @@
   --forum-locked-topic-color: gray;
   --forum-level-restricted-topic-color: #F66;
   --forum-deleted-topic-color: gray;
-  --forum-info-color: #AAA;
   --forum-vote-up-color: green;
   --forum-vote-meh-color: goldrenrod;
   --forum-vote-down-color: red;

app/javascript/src/styles/common/simple_form.scss

@@ -1,3 +1,5 @@
+@import "../base/020_base.scss";
+
 form.simple_form {
   margin: 0 0 1em 0;
 
@@ -21,8 +23,8 @@ form.simple_form {
     }
 
     .hint {
+      @extend .fineprint;
       padding-left: 1em;
-      font-size: 70%;
     }
 
     &.text {

app/javascript/src/styles/specific/forum.scss

@@ -59,10 +59,6 @@ div.list-of-forum-posts {
 }
 
 div#c-forum-topics {
-  span.info {
-    color: var(--forum-info-color);
-  }
-
   span.new {
     font-size: 80%;
     color: var(--forum-new-topic-color);

app/javascript/src/styles/specific/notes.scss

@@ -34,6 +34,11 @@ div#note-container {
       font-size: 0.8em;
     }
 
+    .tn {
+      font-size: 0.8em;
+      color: var(--note-tn-color);
+    }
+
     ruby {
       rt {
         font-size: 0.8em;

app/javascript/src/styles/specific/user_upgrades.scss

@@ -44,12 +44,6 @@ div#c-user-upgrades {
             background-color: var(--user-upgrade-table-row-hover-background-color);
           }
         }
-
-        p.cost-footnote {
-          font-size: 80%;
-          color: var(--user-upgrade-cost-footnote-color);
-          margin: 0;
-        }
       }
     }
   }