Merge branch 'csp-akkoma' into 'develop'

Stricter CSP compatibility(Akkoma)

See merge request pleroma/pleroma-fe!2186

src/App.scss

@@ -2,6 +2,9 @@
 /* stylelint-disable no-descending-specificity */
 @use "panel";
 
+@import '@fortawesome/fontawesome-svg-core/styles.css';
+@import '@floatingghost/pinch-zoom-element/dist/pinch-zoom.css';
+
 :root {
   --status-margin: 0.75em;
   --post-line-height: 1.4;
@@ -30,6 +33,7 @@ body {
   font-family: sans-serif;
   font-family: var(--font);
   margin: 0;
+  padding: 0;
   color: var(--text);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

src/boot/after_store.js

@@ -6,6 +6,8 @@ import VueVirtualScroller from 'vue-virtual-scroller'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 
 import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
+import { config } from '@fortawesome/fontawesome-svg-core';
+config.autoAddCss = false
 
 import App from '../App.vue'
 import routes from './routes'

src/components/pinch_zoom/pinch_zoom.js

@@ -1,4 +1,4 @@
-import PinchZoom from '@kazvmoe-infra/pinch-zoom-element'
+import PinchZoom from '@floatingghost/pinch-zoom-element'
 
 export default {
   methods: {

src/services/style_setter/style_setter.js

@@ -234,20 +234,14 @@ export const applyConfig = (input) => {
     return
   }
 
-  const head = document.head
-
   const rules = Object
     .entries(config)
     .filter(([, v]) => v)
     .map(([k, v]) => `--${k}: ${v}`).join(';')
 
-  document.getElementById('style-config')?.remove()
   const styleEl = document.getElementById('theme-holder')
-  styleEl.id = 'style-config'
-  head.appendChild(styleEl)
   const styleSheet = styleEl.sheet
 
-  styleSheet.toString()
   styleSheet.insertRule(`:root { ${rules} }`, 'index-max')
 
   // TODO find a way to make this not apply to theme previews