add .is-disabled

src/tailwind.config.js

@@ -5,4 +5,15 @@
 module.exports = {
   darkMode: 'media',
   content: ['./www/**/*.{html,js}'],
+  plugins: [
+    function addDisabledClass({ addUtilities }) {
+      const newUtilities = {
+        '.is-disabled': {
+          opacity: '0.25',
+          cursor: 'default',
+        },
+      };
+      addUtilities(newUtilities);
+    },
+  ],
 };

src/www/css/app.css

@@ -1334,11 +1334,6 @@ video {
   transition-duration: 150ms;
 }
 
-.disabled-link {
-  opacity: 0.25;
-  cursor: default;
-}
-
 .duration-200 {
   transition-duration: 200ms;
 }
@@ -1355,6 +1350,11 @@ video {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 
+.is-disabled {
+  opacity: 0.25;
+  cursor: default;
+}
+
 .last\:border-b-0:last-child {
   border-bottom-width: 0px;
 }

src/www/index.html

@@ -218,7 +218,7 @@
                       class="align-middle bg-gray-100 dark:bg-neutral-600 dark:text-neutral-300 p-2 rounded transition"
                       :class="{
                         'hover:bg-red-800 dark:hover:bg-red-800 hover:text-white dark:hover:text-white': client.downloadableConfig,
-                        'opacity-25': !client.downloadableConfig
+                        'is-disabled': !client.downloadableConfig
                       }"
                       :title="!client.downloadableConfig ? $t('noPrivKey') : $t('showQR')"
                       @click="qrcode = `./api/wireguard/client/${client.id}/qrcode.svg`">
@@ -236,7 +236,7 @@
                       class="align-middle inline-block bg-gray-100 dark:bg-neutral-600 dark:text-neutral-300 p-2 rounded transition"
                       :class="{
                         'hover:bg-red-800 dark:hover:bg-red-800 hover:text-white dark:hover:text-white': client.downloadableConfig,
-                        'disabled-link': !client.downloadableConfig
+                        'is-disabled': !client.downloadableConfig
                       }"
                       :title="!client.downloadableConfig ? $t('noPrivKey') : $t('downloadConfig')"
                       @click="if(!client.downloadableConfig) { $event.preventDefault(); }">