From ce24845fa1c94b5d561eee1996e24046ba494e19 Mon Sep 17 00:00:00 2001
From: Carlos Pulido <carlosfrontend@hotmail.com>
Date: Mon, 7 Oct 2019 16:40:10 +0200
Subject: [PATCH] fix: Can't read buttons on dev 404 page + nightmode (#36929)

* fix: Can't read buttons on dev 404 page + nightmode

* fix: Can't read buttons on dev 404 page + nightmode, updated in global.css file

* Removed unnecesary changes

* feat: arrange the styles


Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
---
 client/src/components/layouts/global.css | 52 ++++++++++++++++++++----
 1 file changed, 44 insertions(+), 8 deletions(-)

diff --git a/client/src/components/layouts/global.css b/client/src/components/layouts/global.css
index c6c2259257..ac5a4aedd9 100644
--- a/client/src/components/layouts/global.css
+++ b/client/src/components/layouts/global.css
@@ -132,6 +132,16 @@ a:focus {
 }
 
 /* button */
+button,
+input[type='submit'] {
+  background-color: var(--quaternary-background);
+  color: var(--secondary-color);
+  border-width: 2px;
+  border-style: outset;
+  border-color: buttonface;
+  border-image: initial;
+}
+
 .btn {
   background-color: var(--quaternary-background);
   border-width: 3px;
@@ -195,14 +205,6 @@ fieldset[disabled] .btn-primary.focus {
   color: var(--quaternary-color);
 }
 
-/* .btn:focus,
-.btn:active:focus,
-.btn.active:focus,
-.btn.focus,
-.btn:active.focus,
-.btn.active.focus {
-  outline: none;
-} */
 .btn-cta {
   background-color: #ffac33;
   background-image: linear-gradient(#ffcc4d, #ffac33);
@@ -384,3 +386,37 @@ blockquote .small {
 .alert {
   border-radius: 0px;
 }
+
+/* gatsby 404 page */
+.default-layout > div > :nth-child(3) > button,
+input[type='submit'] {
+  background-color: var(--quaternary-background);
+}
+
+.default-layout > div > :nth-child(3) > button:hover,
+input[type='submit']:hover {
+  background-color: var(--secundary-background);
+}
+
+.default-layout > div > :nth-child(3) > button:active,
+input[type='submit']:active {
+  background: var(--primary-color);
+  color: var(--secondary-background);
+  outline: 0;
+  outline-color: none;
+  outline-color: var(--secundary-background);
+  border: none;
+}
+#search {
+  background-color: var(--quaternary-background);
+  color: var(--primary-color);
+  border-color: var(--quaternary-color);
+  border-width: 2px;
+  border-style: outset;
+  border-color: buttonface;
+  border-image: initial;
+}
+
+#search::placeholder {
+  color: var(--secondary-color);
+}