frontend: fix CSS bugs and replace deprecated properties

Bugs fixed:

- comment-votes.module.css: add missing comma between transition values;
  without it the shorthand was invalid and colour transitions on vote
  buttons were silently ignored

- icon-button.module.css: fix "transfrom" typo (should be "transform");
  the misspelling made the transition declaration a no-op, so the hover
  scale animation jumped instantly instead of easing

- auth.module.css: remove doubly-nested rgb(rgb(var(…))) call; the outer
  rgb() rejected the inner rgb() result, so the .title element's colour
  fell back to inherited instead of the intended --secondary-text-color

Deprecated properties replaced:

- comment-form__markdown-toolbar.css: replace deprecated clip: rect()
  with clip-path: inset(50%); clip was deprecated in CSS Masking Level 1

- raw-content.css: replace word-wrap with overflow-wrap; word-wrap was
  renamed in CSS Text Level 3, all current browsers support overflow-wrap

- global.css: remove redundant literal-colour fallback lines before
  var() declarations in .preloader and .preloader_view_iframe; the var()
  calls already have inline fallback values (e.g. var(--color6, #fff)),
  making the preceding duplicate property and its stylelint-disable
  comment unnecessary since IE11 EOL

Author: paskal

frontend/apps/remark42/app/components/auth/auth.module.css

@@ -35,7 +35,7 @@
   font-size: 12px;
   text-transform: uppercase;
   font-weight: bold;
-  color: rgb(rgb(var(--secondary-text-color)));
+  color: rgb(var(--secondary-text-color));
   text-align: center;
 }
 

frontend/apps/remark42/app/components/comment-form/__markdown-toolbar/comment-form__markdown-toolbar.css

@@ -8,7 +8,7 @@
   width: 1px;
   height: 1px;
   overflow: hidden;
-  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
 }
 
 .comment-form__toolbar-item {

frontend/apps/remark42/app/components/comment/comment-votes.module.css

@@ -21,7 +21,7 @@
   padding: 2px;
   opacity: 0.4;
   color: var(--color13);
-  transition: opacity 0.15s color 0.15s;
+  transition: opacity 0.15s, color 0.15s;
 }
 
 .root:hover .voteButton {

frontend/apps/remark42/app/components/comment/raw-content.css

@@ -1,5 +1,5 @@
 .raw-content {
-  word-wrap: break-word;
+  overflow-wrap: break-word;
 
   & > *:first-child {
     margin-top: 0;

frontend/apps/remark42/app/components/icon-button/icon-button.module.css

@@ -4,13 +4,13 @@
   border: 0;
   margin: 0;
   padding: 4px;
-  transition: transfrom 0.15s ease-out;
+  transition: transform 0.15s ease-out;
   border-radius: 2px;
   appearance: none;
 
   &:hover {
     transform: scale(1.06);
-    transition: transfrom 0.15s ease-in;
+    transition: transform 0.15s ease-in;
   }
 
   &:active {

frontend/apps/remark42/app/styles/global.css

@@ -61,8 +61,6 @@ a {
 }
 
 .preloader {
-  /* stylelint-disable-next-line */
-  color: #fff;
   color: var(--color6, #fff);
   position: relative;
   transform: translate3d(0, -10px, 0);
@@ -87,8 +85,6 @@ a {
 
 .preloader_view_iframe {
   margin: 0 auto;
-  /* stylelint-disable-next-line */
-  color: #888;
   color: var(--color13, #888);
 }