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

Author: paskal

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.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/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;
 }
 

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

@@ -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" style="border:none"></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 />