diff --git a/src/tailwind.config.js b/src/tailwind.config.js index 0594481d..b190ed39 100644 --- a/src/tailwind.config.js +++ b/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); + }, + ], }; diff --git a/src/www/css/app.css b/src/www/css/app.css index 3232d333..46db95a8 100644 --- a/src/www/css/app.css +++ b/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; } diff --git a/src/www/index.html b/src/www/index.html index fa5534d5..3a6643ea 100644 --- a/src/www/index.html +++ b/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(); }">