[FIX] runbot: btn-default styling, cleanup & fix active state

BS button "default" variant styling coherence depending on the states
(regular/hover/active) and fixing the missing border color on active
state.

Also fix the search field's "github PR" button styling.

Author: pparidans

runbot/static/src/css/runbot.css

@@ -1,5 +1,9 @@
 :root {
 	--gray:  #6c757d; /* used for batch limitation */
+	--btn-default-color: var(--bs-body-color);
+	--btn-default-bg: var(--bs-body-bg);
+	--btn-default-border: #ccc;
+	--active-project-color: #777;
 }
 
 /*
@@ -13,14 +17,20 @@
 	--bs-info-bg-subtle: #d9edf7;
 	--bs-info-rgb: 23, 162, 184;
 }
-:root[data-bs-theme=red404] { 
+
+:root[data-bs-theme=red404] {
 	--bs-success-bg-subtle: #cdffb9;
 	--bs-danger-bg-subtle: #e67ecf;
 	--bs-warning-bg-subtle: #fae9b1;
 	--bs-info-bg-subtle: #b6e2f8;
 	--bs-info-rgb: 23, 162, 184;
 }
 
+:root[data-bs-theme=dark] {
+	--btn-default-border: #333;
+	--active-project-color: #CCC;
+}
+
 [data-bs-theme=legacy] .text-bg-info {
 	color: #fff !important; /* black by default, changes from previous version, color forced to fit with --bs-info-rgb*/
 }
@@ -59,37 +69,28 @@
 	--bs-btn-disabled-border-color: #b90e6c;
 }
 
-
-:root {
-	--alternative:#ccc;
-	--btn-default-color: var(--bs-body-color);
-	--btn-default-border:#ccc;
-	--bs-default-rgb: var(--bs-body-color-rgb);
-	--active-project-color: #777;
-	
-}
-
-:root[data-bs-theme=dark] {
-	--btn-default-border:#333;
-	--btn-default-color: var(--bs-body-color);
-	--active-project-color: #CCC;
-}
-
 .btn-default {
 	--bs-btn-color: var(--btn-default-color);
-	--bs-btn-bg: var(--bs-body-bg);
+	--bs-btn-bg: var(--btn-default-bg);
 	--bs-btn-border-color: var(--btn-default-border);
 	--bs-btn-hover-color: var(--btn-default-color);
-	--bs-btn-hover-bg: var(--btn-default-border);
-	--bs-btn-hover-border-color: var(--btn-default-border);
+	--bs-btn-hover-bg: color-mix(in lab, var(--btn-default-bg), black 15%);
+	--bs-btn-hover-border-color: color-mix(in lab, var(--btn-default-border), black 10%);
 	--bs-btn-focus-shadow-rgb: 60, 153, 110;
 	--bs-btn-active-color: var(--btn-default-color);
-	--bs-btn-active-bg: var(--bs-body-bg);
-	--bs-btn-active-border-color: var(--bs-body-bg);
+	--bs-btn-active-bg: color-mix(in lab, var(--btn-default-bg), black 20%);
+	--bs-btn-active-border-color: color-mix(in lab, var(--btn-default-border), black 15%);
 	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 	--bs-btn-disabled-color: var(--btn-default-color);
-	--bs-btn-disabled-bg: var(--bs-body-bg);
-	--bs-btn-disabled-border-color: var(--btn-default-border);;
+	--bs-btn-disabled-bg: var(--btn-default-bg);
+	--bs-btn-disabled-border-color: var(--btn-default-border);
+}
+
+[data-bs-theme=dark] .btn-default {
+	--bs-btn-hover-bg: color-mix(in lab, var(--btn-default-bg), white 15%);
+	--bs-btn-hover-border-color: color-mix(in lab, var(--btn-default-border), white 10%);
+	--bs-btn-active-bg: color-mix(in lab, var(--btn-default-bg), white 20%);
+	--bs-btn-active-border-color: color-mix(in lab, var(--btn-default-border), white 15%);
 }
 
 .btn-info {

runbot/templates/frontend.xml

@@ -7,14 +7,14 @@
           <form class="form-inline my-2 my-lg-0" role="search" t-att-action="qu(search='')" method="get">
             <div class="input-group md-form form-sm form-2 ps-0">
               <input class="form-control my-0 py-1" type="text" placeholder="Search" aria-label="Search" name="search" t-att-value="search" autofocus="autofocus"/>
-              <a t-if="has_pr" class="btn btn-primary active input-group-text" title="All" t-att-href="qu(has_pr=None)">
-                <i class="fa fa-github text-grey"/>
+              <a t-if="has_pr" class="btn btn-primary" title="All" t-att-href="qu(has_pr=None)">
+                <i class="fa fa-github"/>
               </a>
-              <a t-else="" class="btn input-group-text" title="Open pull requests" t-att-href="qu(has_pr=1)">
-                <i class="fa fa-github text-grey"/>
+              <a t-else="" class="btn btn-default" title="Open pull requests" t-att-href="qu(has_pr=1)">
+                <i class="fa fa-github"/>
               </a>
-              <button type='submit' class="input-group-text">
-                <i class="fa fa-search text-grey"/>
+              <button type="submit" class="btn btn-default">
+                <i class="fa fa-search"/>
               </button>
             </div>
           </form>