Update button colors

hermanzdosilovic · hermanzdosilovic · commit cd3e0b598bb3 · 2025-02-15T23:09:31.000+01:00
diff --git a/index.html b/index.html
@@ -77,31 +77,31 @@
 
 <body class="flex flex-col w-full h-full text-black bg-white dark:bg-black dark:text-white" style="opacity: 0 !important;">
     <header class="flex items-center p-1 space-x-1 judge0-showNavigation">
-        <a href="https://judge0.com" target="_blank" class="w-8 h-8 rounded-md focus-visible:outline-none judge0-showLogo">
+        <a href="https://judge0.com" target="_blank" class="w-8 h-8 rounded-md focus-visible:outline-none focus-visible:ring-2 judge0-showLogo">
             <img src="./images/icon_var2_rounded_512.png">
         </a>
-        <input id="judge0-compiler-options" class="h-8 px-3 py-2 text-sm text-black border rounded-md max-md:hidden focus-visible:outline-none placeholder:text-sm judge0-showCompilerOptions" placeholder="Compiler options" type="text">
-        <input id="judge0-command-line-arguments" class="h-8 px-3 py-2 text-sm text-black border rounded-md max-md:hidden focus-visible:outline-none placeholder:text-sm judge0-showCommandLineArguments" placeholder="Command line arguments" type="text">
-        <button id="judge0-run-btn" class="inline-flex items-center justify-center h-8 gap-2 px-4 text-sm font-semibold transition-colors bg-blue-800 rounded-md focus-visible:outline-none hover:bg-blue-900 text-blue-50 whitespace-nowrap judge0-showRunButton">
+        <input id="judge0-compiler-options" class="h-8 px-3 py-2 text-sm bg-transparent border rounded-md dark:border-zinc-800 max-md:hidden focus-visible:outline-none focus-visible:ring-2 placeholder:text-sm judge0-showCompilerOptions" placeholder="Compiler options" type="text">
+        <input id="judge0-command-line-arguments" class="h-8 px-3 py-2 text-sm bg-transparent border rounded-md dark:border-zinc-800 max-md:hidden focus-visible:outline-none focus-visible:ring-2 placeholder:text-sm judge0-showCommandLineArguments" placeholder="Command line arguments" type="text">
+        <button id="judge0-run-btn" class="inline-flex items-center justify-center h-8 gap-2 px-4 text-sm font-semibold transition-colors bg-blue-800 rounded-md focus-visible:outline-none focus-visible:ring-2 hover:bg-blue-900 dark:hover:bg-blue-700 text-blue-50 whitespace-nowrap judge0-showRunButton">
             <i class="fa-solid fa-play"></i>
             Run
         </button>
         <div class="judge0-showPuterSignInOutButton max-sm:hidden">
-            <button id="judge0-sign-in-btn" class="inline-flex items-center justify-center h-8 gap-2 px-4 text-sm font-semibold text-blue-800 transition-colors rounded-md focus-visible:outline-none bg-blue-50 hover:bg-blue-100 whitespace-nowrap">
+            <button id="judge0-sign-in-btn" class="inline-flex items-center justify-center h-8 gap-2 px-4 text-sm font-semibold text-blue-800 transition-colors rounded-md dark:text-white dark:hover:bg-zinc-700 dark:bg-zinc-800 focus-visible:outline-none focus-visible:ring-2 bg-blue-50 hover:bg-blue-100 whitespace-nowrap">
                 <i class="fa-arrow-right-to-bracket fa-solid"></i>
                 Sign in with Puter
             </button>
-            <button id="judge0-sign-out-btn" class="inline-flex items-center justify-center h-8 gap-2 px-4 text-sm font-semibold text-blue-800 transition-colors rounded-md focus-visible:outline-none bg-blue-50 hover:bg-blue-100 whitespace-nowrap">
+            <button id="judge0-sign-out-btn" class="inline-flex items-center justify-center h-8 gap-2 px-4 text-sm font-semibold text-blue-800 transition-colors rounded-md dark:text-white dark:hover:bg-zinc-700 dark:bg-zinc-800 focus-visible:outline-none focus-visible:ring-2 bg-blue-50 hover:bg-blue-100 whitespace-nowrap">
                 <i class="fa-arrow-right-from-bracket fa-solid"></i>
                 <span id="judge0-puter-username"></span>
             </button>
         </div>
-        <button id="judge0-theme-btn" class="inline-flex items-center justify-center w-8 h-8 gap-2 text-sm font-semibold text-blue-800 transition-colors rounded-md max-md:hidden focus-visible:outline-none bg-blue-50 hover:bg-blue-100 whitespace-nowrap judge0-showThemeButton"><i class="fa-solid fa-sun"></i></button>
+        <button id="judge0-theme-btn" class="inline-flex items-center justify-center w-8 h-8 gap-2 text-sm font-semibold text-blue-800 transition-colors rounded-md dark:text-white dark:hover:bg-zinc-700 dark:bg-zinc-800 max-md:hidden focus-visible:outline-none focus-visible:ring-2 bg-blue-50 hover:bg-blue-100 whitespace-nowrap judge0-showThemeButton"><i class="fa-solid fa-sun"></i></button>
     </header>
 
     <main class="flex-grow min-h-0 overflow-hidden"></main>
 
-    <footer class="text-xs text-center opacity-50 judge0-showCopyright">
+    <footer class="text-xs text-center opacity-50 max-sm:hidden judge0-showCopyright">
         <a href="https://judge0.com" target="_blank">© 2016-2025 Judge0 d.o.o. – All Rights Reserved. • A Croatian 🇭🇷 company</a>
     </footer>
 
