Clean up deprecated CSS and fix silent CSS bugs in frontend (#2012)

* frontend: remove deprecated iframe attrs and non-standard CSS

Three separate cleanups:

1. remove deprecated HTML attributes from iframe creation (create-iframe.ts)
   - frameborder="0": deprecated since HTML5; border is already set to none via CSS
   - allowtransparency="true": non-standard Microsoft attribute never in any spec;
     transparency is handled by body { background: transparent } in CSS instead
   - scrolling="no": deprecated since HTML5; overflow is already hidden via CSS
   - horizontalscrolling/verticalscrolling: non-standard IE-era attributes with
     no effect in modern browsers; remove without replacement

2. replace allowtransparency with explicit CSS (global.css)
   - add background: transparent to body; this is the spec-correct way to make
     an iframe document transparent, as documented by MDN

3. drop -moz-touch-enabled media query prefix (5 comment CSS files)
   - -moz-touch-enabled was a Firefox-only non-standard media feature removed
     in Firefox 58 (2018); pointer: coarse is the standard equivalent and was
     already present as the second condition in every query, so removing the
     dead -moz prefix reduces the media query to just (pointer: coarse)

note: colorScheme: 'none' in create-iframe.ts is intentionally left unchanged;
it is tracked by #1430 and requires a broader color-scheme implementation

* 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

* move border:none from inline style to widget__comments-frame class

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/_editing/comment_editing.css

@@ -4,7 +4,7 @@
   }
 
   /* it isn't mobile first, but it's fine here */
-  @media (-moz-touch-enabled: 1) and (max-width: 768px), (pointer: coarse) and (max-width: 768px) {
+  @media (pointer: coarse) and (max-width: 768px) {
     border: 8px solid;
     padding-bottom: 0;
 

frontend/apps/remark42/app/components/comment/_replying/comment_replying.css

@@ -4,7 +4,7 @@
   z-index: 1;
 
   /* it isn't mobile first, but it's fine here */
-  @media (-moz-touch-enabled: 1) and (max-width: 768px), (pointer: coarse) and (max-width: 768px) {
+  @media (pointer: coarse) and (max-width: 768px) {
     border: 8px solid;
 
     & .comment__info {

frontend/apps/remark42/app/components/comment/_theme/_dark/comment_theme_dark.css

@@ -69,7 +69,7 @@
       border-color: var(--color7);
     }
 
-    @media (-moz-touch-enabled: 1) and (max-width: 768px), (pointer: coarse) and (max-width: 768px) {
+    @media (pointer: coarse) and (max-width: 768px) {
       border-color: var(--color7);
     }
   }
@@ -79,7 +79,7 @@
       border-color: var(--color7);
     }
 
-    @media (-moz-touch-enabled: 1) and (max-width: 768px), (pointer: coarse) and (max-width: 768px) {
+    @media (pointer: coarse) and (max-width: 768px) {
       border-color: var(--color7);
     }
   }

frontend/apps/remark42/app/components/comment/_theme/_light/comment_theme_light.css

@@ -65,7 +65,7 @@
       border-color: var(--color5);
     }
 
-    @media (-moz-touch-enabled: 1) and (max-width: 768px), (pointer: coarse) and (max-width: 768px) {
+    @media (pointer: coarse) and (max-width: 768px) {
       border-color: var(--color5);
     }
   }
@@ -75,7 +75,7 @@
       border-color: var(--color5);
     }
 
-    @media (-moz-touch-enabled: 1) and (max-width: 768px), (pointer: coarse) and (max-width: 768px) {
+    @media (pointer: coarse) and (max-width: 768px) {
       border-color: var(--color5);
     }
   }

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/comment.css

@@ -30,7 +30,7 @@
 .comment-form_type_reply {
   margin-left: 17px;
 
-  @media (-moz-touch-enabled: 1) and (max-width: 768px), (pointer: coarse) and (max-width: 768px) {
+  @media (pointer: coarse) and (max-width: 768px) {
     margin-left: 0;
   }
 }

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

@@ -6,6 +6,7 @@ body {
   font-family: system-ui;
   font-size: 14px;
   color: rgb(var(--primary-text-color));
+  background: transparent;
   box-sizing: border-box;
 }
 
@@ -60,8 +61,6 @@ a {
 }
 
 .preloader {
-  /* stylelint-disable-next-line */
-  color: #fff;
   color: var(--color6, #fff);
   position: relative;
   transform: translate3d(0, -10px, 0);
@@ -86,8 +85,6 @@ a {
 
 .preloader_view_iframe {
   margin: 0 auto;
-  /* stylelint-disable-next-line */
-  color: #888;
   color: var(--color13, #888);
 }
 

frontend/apps/remark42/app/utils/create-iframe.ts

@@ -10,13 +10,8 @@ export function createIframe({ __colors__, styles, ...params }: Params) {
   setAttributes(iframe, {
     src: `${BASE_URL}/web/iframe.html?${query}`,
     name: JSON.stringify({ __colors__ }),
-    frameborder: '0',
-    allowtransparency: 'true',
-    scrolling: 'no',
     tabindex: '0',
     title: 'Comments | Remark42',
-    horizontalscrolling: 'no',
-    verticalscrolling: 'no',
   });
   setStyles(iframe, {
     height: '100%',

frontend/apps/remark42/templates/demo.ejs

@@ -39,7 +39,7 @@
       }
 
       .widget__comments-frame {
-        border: 1px dashed #aaa;
+        border: none;
         width: 35rem;
         max-width: 100%;
       }
@@ -73,7 +73,7 @@
       <div class="widgets">
         <div class="widget widgets__widget widgets__comments-widget">
           <a class="widget__link" href="<%= htmlWebpackPlugin.options.REMARK_URL %>/web/last-comments.html">Last comments widget page</a><br />
-          <iframe class="widget__frame widget__comments-frame" src="<%= htmlWebpackPlugin.options.REMARK_URL %>/web/last-comments.html" frameborder="0"></iframe>
+          <iframe class="widget__frame widget__comments-frame" src="<%= htmlWebpackPlugin.options.REMARK_URL %>/web/last-comments.html"></iframe>
         </div>
         <div class="widget widgets__widget widgets__counter-widget">
           <a class="widget__link" href="<%= htmlWebpackPlugin.options.REMARK_URL %>/web/counter.html">Counter widget page</a><br />