fix: migrate Tailwind v4 - update all deprecated opacity utilities

- Replace bg-opacity-NN with bg-color/NN (Tailwind v4 slash notation)
- Replace hover:bg-opacity-80 with hover:bg-color/80 for specific colors
- Replace hover:/80 (bare) with appropriate hover:bg-color/80
- Apply to PageContent.vue, PageConfigs.vue, index.html

Addresses: #119

Author: 64johnlee

agentic_security/static/index.html

@@ -68,7 +68,7 @@ <h4 class="text-lg font-semibold">
             <div
                 v-for="toast in toasts"
                 :key="toast.id"
-                class="flex items-center p-3 rounded-xl shadow-xl text-white max-w-md animate-toast-in border border-opacity-30"
+                class="flex items-center p-3 rounded-xl shadow-xl text-white max-w-md animate-toast-in border /30"
                 :class="{
                     'bg-success-toast border-accent-green': toast.type === 'success',
                     'bg-error-toast border-accent-red': toast.type === 'error',
@@ -154,13 +154,13 @@ <h2 class="text-2xl font-bold">LLM API Spec</h2>
 
             <!-- Error and Success Messages -->
             <div v-if="errorMsg"
-              class="bg-dark-accent-red bg-opacity-20 border border-dark-accent-red text-dark-accent-red px-4 py-3 rounded-lg relative"
+              class="bg-dark-accent-red /20 border border-dark-accent-red text-dark-accent-red px-4 py-3 rounded-lg relative"
               role="alert">
               <strong class="font-bold">Oops!</strong>
               <span class="block sm:inline">{{errorMsg}}</span>
             </div>
             <div v-if="okMsg"
-              class="bg-dark-accent-green bg-opacity-20 border border-dark-accent-green text-dark-accent-green px-4 py-3 rounded-lg relative"
+              class="bg-dark-accent-green /20 border border-dark-accent-green text-dark-accent-green px-4 py-3 rounded-lg relative"
               role="alert">
               <strong class="font-bold">></strong>
               <span class="block sm:inline">{{okMsg}}</span>
@@ -172,7 +172,7 @@ <h2 class="text-2xl font-bold">LLM API Spec</h2>
             <section class="flex justify-center space-x-4 mt-10">
               <button
                 @click="verifyIntegration"
-                class="bg-dark-accent-orange text-dark-bg rounded-lg px-6 py-3 font-medium hover:bg-opacity-80 transition-colors">
+                class="bg-dark-accent-orange text-dark-bg rounded-lg px-6 py-3 font-medium hover:bg-dark-accent-orange/80 transition-colors">
                 Verify Integration
               </button>
             </section>
@@ -219,7 +219,7 @@ <h2 class="text-2xl font-bold">Parameters</h2>
             <div class="flex items-center justify-end mt-4">
               <button
                 @click="confirmResetState"
-                class="flex items-center bg-dark-accent-red text-dark-bg rounded-lg px-4 py-2 text-sm font-medium hover:bg-opacity-80 transition-colors">
+                class="flex items-center bg-dark-accent-red text-dark-bg rounded-lg px-4 py-2 text-sm font-medium hover:bg-dark-accent-red/80 transition-colors">
                 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2"
                   fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path stroke-linecap="round" stroke-linejoin="round"
@@ -232,7 +232,7 @@ <h2 class="text-2xl font-bold">Parameters</h2>
             <!-- Confirmation Modal -->
             <div
               v-if="showResetConfirmation"
-              class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+              class="fixed inset-0 bg-black /50 flex items-center justify-center z-50">
               <div class="bg-dark-card rounded-lg p-6 max-w-sm w-full">
                 <h3 class="text-xl font-bold mb-4 text-dark-text">Confirm
                   Reset</h3>
@@ -242,12 +242,12 @@ <h3 class="text-xl font-bold mb-4 text-dark-text">Confirm
                 <div class="flex justify-end space-x-4">
                   <button
                     @click="showResetConfirmation = false"
-                    class="bg-gray-600 text-dark-text rounded-lg px-4 py-2 hover:bg-opacity-80 transition-colors">
+                    class="bg-gray-600 text-dark-text rounded-lg px-4 py-2 hover:bg-gray-600/80 transition-colors">
                     Cancel
                   </button>
                   <button
                     @click="resetState"
-                    class="bg-dark-accent-red text-dark-bg rounded-lg px-4 py-2 hover:bg-opacity-80 transition-colors">
+                    class="bg-dark-accent-red text-dark-bg rounded-lg px-4 py-2 hover:bg-dark-accent-red/80 transition-colors">
                     Reset
                   </button>
                 </div>
@@ -416,7 +416,7 @@ <h3 class="text-lg font-semibold">Enable Many-shot
             @click="package.is_active !== false && addPackage(index)"
             class="border rounded-lg p-3 cursor-pointer transition-all hover:shadow-md overflow-hidden"
             :class="{
-              'border-dark-accent-green bg-dark-accent-green bg-opacity-20': package.selected,
+              'border-dark-accent-green bg-dark-accent-green /20': package.selected,
               'border-gray-600': !package.selected,
               'opacity-30 pointer-events-none cursor-not-allowed': package.is_active === false
             }">
@@ -434,13 +434,13 @@ <h3 class="text-lg font-semibold">Enable Many-shot
 
         <!-- Error and Success Messages -->
         <div v-if="errorMsg"
-          class="bg-dark-accent-red bg-opacity-20 border border-dark-accent-red text-dark-accent-red px-4 py-3 rounded-lg relative"
+          class="bg-dark-accent-red /20 border border-dark-accent-red text-dark-accent-red px-4 py-3 rounded-lg relative"
           role="alert">
           <strong class="font-bold">Oops!</strong>
           <span class="block sm:inline">{{errorMsg}}</span>
         </div>
         <div v-if="okMsg"
-          class="bg-dark-accent-green bg-opacity-20 border border-dark-accent-green text-dark-accent-green px-4 py-3 rounded-lg relative"
+          class="bg-dark-accent-green /20 border border-dark-accent-green text-dark-accent-green px-4 py-3 rounded-lg relative"
           role="alert">
           <strong class="font-bold">></strong>
           <span class="block sm:inline">{{okMsg}}</span>
@@ -452,13 +452,13 @@ <h3 class="text-lg font-semibold">Enable Many-shot
         <section class="flex justify-center space-x-4">
           <button
             @click="verifyIntegration"
-            class="bg-dark-accent-orange text-dark-bg rounded-lg px-6 py-3 font-medium hover:bg-opacity-80 transition-colors">
+            class="bg-dark-accent-orange text-dark-bg rounded-lg px-6 py-3 font-medium hover:bg-dark-accent-orange/80 transition-colors">
             Verify Integration
           </button>
           <button
             @click="startScan"
             v-if="!scanRunning"
-            class="bg-dark-accent-green text-dark-bg rounded-lg px-6 py-3 font-medium hover:bg-opacity-80 transition-colors flex items-center">
+            class="bg-dark-accent-green text-dark-bg rounded-lg px-6 py-3 font-medium hover:bg-dark-accent-green/80 transition-colors flex items-center">
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
               viewBox="0 0 24 24" fill="none" stroke="currentColor"
               stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
@@ -468,7 +468,7 @@ <h3 class="text-lg font-semibold">Enable Many-shot
           <button
             @click="stopScan"
             v-if="scanRunning"
-            class="bg-dark-accent-red text-dark-bg rounded-lg px-6 py-3 font-medium hover:bg-opacity-80 transition-colors flex items-center">
+            class="bg-dark-accent-red text-dark-bg rounded-lg px-6 py-3 font-medium hover:bg-dark-accent-red/80 transition-colors flex items-center">
             <!-- Stop Icon -->
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
               viewBox="0 0 24 24" fill="none" stroke="currentColor"
@@ -519,7 +519,7 @@ <h2 class="text-2xl font-bold mb-4">Scan Results</h2>
         <!-- Download Button -->
         <button
           @click="downloadFailures"
-          class="bg-dark-accent-yellow text-dark-bg rounded-lg px-6 py-3 font-medium hover:bg-opacity-80 transition-colors">
+          class="bg-dark-accent-yellow text-dark-bg rounded-lg px-6 py-3 font-medium hover:bg-dark-accent-yellow/80 transition-colors">
           Download failures
         </button>
 
@@ -547,7 +547,7 @@ <h2 class="text-2xl font-bold">Logs</h2>
                 Math.min(logs.length, maxDisplayedLogs) }} of {{ logs.length }}
                 logs</span>
               <button @click="downloadLogs"
-                class="bg-dark-accent-green text-dark-bg rounded-lg px-4 py-2 text-sm font-medium hover:bg-opacity-80 transition-colors">
+                class="bg-dark-accent-green text-dark-bg rounded-lg px-4 py-2 text-sm font-medium hover:bg-dark-accent-green/80 transition-colors">
                 Download Logs
               </button>
             </div>