From 3b8050f89ee248de2993df51f426d13fdc5ebbf5 Mon Sep 17 00:00:00 2001
From: Siren <siren@kernal.eu>
Date: Sun, 9 Jul 2023 21:03:38 +0300
Subject: [PATCH] Style file input button

---
 css/sakura-dark-solarized.css | 6 +++---
 css/sakura-dark.css           | 6 +++---
 css/sakura-earthly.css        | 6 +++---
 css/sakura-ink.css            | 6 +++---
 css/sakura-pink.css           | 6 +++---
 css/sakura-vader.css          | 6 +++---
 css/sakura.css                | 6 +++---
 scss/_main.scss               | 2 +-
 test.html                     | 4 ++++
 9 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/css/sakura-dark-solarized.css b/css/sakura-dark-solarized.css
index 049bb06..8f056d5 100644
--- a/css/sakura-dark-solarized.css
+++ b/css/sakura-dark-solarized.css
@@ -173,7 +173,7 @@ textarea {
   width: 100%;
 }
 
-.button, button, input[type=submit], input[type=reset], input[type=button] {
+.button, button, input[type=submit], input[type=reset], input[type=button], input[type=file]::file-selector-button {
   display: inline-block;
   padding: 5px 10px;
   text-align: center;
@@ -186,11 +186,11 @@ textarea {
   cursor: pointer;
   box-sizing: border-box;
 }
-.button[disabled], button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled] {
+.button[disabled], button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled], input[type=file]::file-selector-button[disabled] {
   cursor: default;
   opacity: 0.5;
 }
-.button:focus:enabled, .button:hover:enabled, button:focus:enabled, button:hover:enabled, input[type=submit]:focus:enabled, input[type=submit]:hover:enabled, input[type=reset]:focus:enabled, input[type=reset]:hover:enabled, input[type=button]:focus:enabled, input[type=button]:hover:enabled {
+.button:focus:enabled, .button:hover:enabled, button:focus:enabled, button:hover:enabled, input[type=submit]:focus:enabled, input[type=submit]:hover:enabled, input[type=reset]:focus:enabled, input[type=reset]:hover:enabled, input[type=button]:focus:enabled, input[type=button]:hover:enabled, input[type=file]::file-selector-button:focus:enabled, input[type=file]::file-selector-button:hover:enabled {
   background-color: #657b83;
   border-color: #657b83;
   color: #002b36;
diff --git a/css/sakura-dark.css b/css/sakura-dark.css
index 2e27919..1401b4d 100644
--- a/css/sakura-dark.css
+++ b/css/sakura-dark.css
@@ -173,7 +173,7 @@ textarea {
   width: 100%;
 }
 
-.button, button, input[type=submit], input[type=reset], input[type=button] {
+.button, button, input[type=submit], input[type=reset], input[type=button], input[type=file]::file-selector-button {
   display: inline-block;
   padding: 5px 10px;
   text-align: center;
@@ -186,11 +186,11 @@ textarea {
   cursor: pointer;
   box-sizing: border-box;
 }
-.button[disabled], button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled] {
+.button[disabled], button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled], input[type=file]::file-selector-button[disabled] {
   cursor: default;
   opacity: 0.5;
 }
-.button:focus:enabled, .button:hover:enabled, button:focus:enabled, button:hover:enabled, input[type=submit]:focus:enabled, input[type=submit]:hover:enabled, input[type=reset]:focus:enabled, input[type=reset]:hover:enabled, input[type=button]:focus:enabled, input[type=button]:hover:enabled {
+.button:focus:enabled, .button:hover:enabled, button:focus:enabled, button:hover:enabled, input[type=submit]:focus:enabled, input[type=submit]:hover:enabled, input[type=reset]:focus:enabled, input[type=reset]:hover:enabled, input[type=button]:focus:enabled, input[type=button]:hover:enabled, input[type=file]::file-selector-button:focus:enabled, input[type=file]::file-selector-button:hover:enabled {
   background-color: #c9c9c9;
   border-color: #c9c9c9;
   color: #222222;
diff --git a/css/sakura-earthly.css b/css/sakura-earthly.css
index 2fbc2bb..dcbfc61 100644
--- a/css/sakura-earthly.css
+++ b/css/sakura-earthly.css
@@ -172,7 +172,7 @@ textarea {
   width: 100%;
 }
 
-.button, button, input[type=submit], input[type=reset], input[type=button] {
+.button, button, input[type=submit], input[type=reset], input[type=button], input[type=file]::file-selector-button {
   display: inline-block;
   padding: 5px 10px;
   text-align: center;
@@ -185,11 +185,11 @@ textarea {
   cursor: pointer;
   box-sizing: border-box;
 }
-.button[disabled], button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled] {
+.button[disabled], button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled], input[type=file]::file-selector-button[disabled] {
   cursor: default;
   opacity: 0.5;
 }
-.button:focus:enabled, .button:hover:enabled, button:focus:enabled, button:hover:enabled, input[type=submit]:focus:enabled, input[type=submit]:hover:enabled, input[type=reset]:focus:enabled, input[type=reset]:hover:enabled, input[type=button]:focus:enabled, input[type=button]:hover:enabled {
+.button:focus:enabled, .button:hover:enabled, button:focus:enabled, button:hover:enabled, input[type=submit]:focus:enabled, input[type=submit]:hover:enabled, input[type=reset]:focus:enabled, input[type=reset]:hover:enabled, input[type=button]:focus:enabled, input[type=button]:hover:enabled, input[type=file]::file-selector-button:focus:enabled, input[type=file]::file-selector-button:hover:enabled {
   background-color: #006994;
   border-color: #006994;
   color: #ffffff;
diff --git a/css/sakura-ink.css b/css/sakura-ink.css
index 68871e6..62e0229 100644
--- a/css/sakura-ink.css
+++ b/css/sakura-ink.css
@@ -172,7 +172,7 @@ textarea {
   width: 100%;
 }
 
-.button, button, input[type=submit], input[type=reset], input[type=button] {
+.button, button, input[type=submit], input[type=reset], input[type=button], input[type=file]::file-selector-button {
   display: inline-block;
   padding: 5px 10px;
   text-align: center;
@@ -185,11 +185,11 @@ textarea {
   cursor: pointer;
   box-sizing: border-box;
 }
-.button[disabled], button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled] {
+.button[disabled], button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled], input[type=file]::file-selector-button[disabled] {
   cursor: default;
   opacity: 0.5;
 }
-.button:focus:enabled, .button:hover:enabled, button:focus:enabled, button:hover:enabled, input[type=submit]:focus:enabled, input[type=submit]:hover:enabled, input[type=reset]:focus:enabled, input[type=reset]:hover:enabled, input[type=button]:focus:enabled, input[type=button]:hover:enabled {
+.button:focus:enabled, .button:hover:enabled, button:focus:enabled, button:hover:enabled, input[type=submit]:focus:enabled, input[type=submit]:hover:enabled, input[type=reset]:focus:enabled, input[type=reset]:hover:enabled, input[type=button]:focus:enabled, input[type=button]:hover:enabled, input[type=file]::file-selector-button:focus:enabled, input[type=file]::file-selector-button:hover:enabled {
   background-color: #DA4453;
   border-color: #DA4453;
   color: #ffffff;
diff --git a/css/sakura-pink.css b/css/sakura-pink.css
index 6271bed..b6bdaf5 100644
--- a/css/sakura-pink.css
+++ b/css/sakura-pink.css
@@ -172,7 +172,7 @@ textarea {
   width: 100%;
 }
 
-.button, button, input[type=submit], input[type=reset], input[type=button] {
+.button, button, input[type=submit], input[type=reset], input[type=button], input[type=file]::file-selector-button {
   display: inline-block;
   padding: 5px 10px;
   text-align: center;
@@ -185,11 +185,11 @@ textarea {
   cursor: pointer;
   box-sizing: border-box;
 }
-.button[disabled], button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled] {
+.button[disabled], button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled], input[type=file]::file-selector-button[disabled] {
   cursor: default;
   opacity: 0.5;
 }
-.button:focus:enabled, .button:hover:enabled, button:focus:enabled, button:hover:enabled, input[type=submit]:focus:enabled, input[type=submit]:hover:enabled, input[type=reset]:focus:enabled, input[type=reset]:hover:enabled, input[type=button]:focus:enabled, input[type=button]:hover:enabled {
+.button:focus:enabled, .button:hover:enabled, button:focus:enabled, button:hover:enabled, input[type=submit]:focus:enabled, input[type=submit]:hover:enabled, input[type=reset]:focus:enabled, input[type=reset]:hover:enabled, input[type=button]:focus:enabled, input[type=button]:hover:enabled, input[type=file]::file-selector-button:focus:enabled, input[type=file]::file-selector-button:hover:enabled {
   background-color: #753851;
   border-color: #753851;
   color: #ffe4f5;
diff --git a/css/sakura-vader.css b/css/sakura-vader.css
index 587c3fb..22be2dc 100644
--- a/css/sakura-vader.css
+++ b/css/sakura-vader.css
@@ -173,7 +173,7 @@ textarea {
   width: 100%;
 }
 
-.button, button, input[type=submit], input[type=reset], input[type=button] {
+.button, button, input[type=submit], input[type=reset], input[type=button], input[type=file]::file-selector-button {
   display: inline-block;
   padding: 5px 10px;
   text-align: center;
@@ -186,11 +186,11 @@ textarea {
   cursor: pointer;
   box-sizing: border-box;
 }
-.button[disabled], button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled] {
+.button[disabled], button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled], input[type=file]::file-selector-button[disabled] {
   cursor: default;
   opacity: 0.5;
 }
-.button:focus:enabled, .button:hover:enabled, button:focus:enabled, button:hover:enabled, input[type=submit]:focus:enabled, input[type=submit]:hover:enabled, input[type=reset]:focus:enabled, input[type=reset]:hover:enabled, input[type=button]:focus:enabled, input[type=button]:hover:enabled {
+.button:focus:enabled, .button:hover:enabled, button:focus:enabled, button:hover:enabled, input[type=submit]:focus:enabled, input[type=submit]:hover:enabled, input[type=reset]:focus:enabled, input[type=reset]:hover:enabled, input[type=button]:focus:enabled, input[type=button]:hover:enabled, input[type=file]::file-selector-button:focus:enabled, input[type=file]::file-selector-button:hover:enabled {
   background-color: #DA4453;
   border-color: #DA4453;
   color: #120c0e;
diff --git a/css/sakura.css b/css/sakura.css
index 468ef87..88d4b12 100644
--- a/css/sakura.css
+++ b/css/sakura.css
@@ -172,7 +172,7 @@ textarea {
   width: 100%;
 }
 
-.button, button, input[type=submit], input[type=reset], input[type=button] {
+.button, button, input[type=submit], input[type=reset], input[type=button], input[type=file]::file-selector-button {
   display: inline-block;
   padding: 5px 10px;
   text-align: center;
@@ -185,11 +185,11 @@ textarea {
   cursor: pointer;
   box-sizing: border-box;
 }
-.button[disabled], button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled] {
+.button[disabled], button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled], input[type=file]::file-selector-button[disabled] {
   cursor: default;
   opacity: 0.5;
 }
-.button:focus:enabled, .button:hover:enabled, button:focus:enabled, button:hover:enabled, input[type=submit]:focus:enabled, input[type=submit]:hover:enabled, input[type=reset]:focus:enabled, input[type=reset]:hover:enabled, input[type=button]:focus:enabled, input[type=button]:hover:enabled {
+.button:focus:enabled, .button:hover:enabled, button:focus:enabled, button:hover:enabled, input[type=submit]:focus:enabled, input[type=submit]:hover:enabled, input[type=reset]:focus:enabled, input[type=reset]:hover:enabled, input[type=button]:focus:enabled, input[type=button]:hover:enabled, input[type=file]::file-selector-button:focus:enabled, input[type=file]::file-selector-button:hover:enabled {
   background-color: #982c61;
   border-color: #982c61;
   color: #f9f9f9;
diff --git a/scss/_main.scss b/scss/_main.scss
index 6c6a380..0408590 100644
--- a/scss/_main.scss
+++ b/scss/_main.scss
@@ -171,7 +171,7 @@ textarea {
     width: 100%;
 }
 
-.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
+.button, button, input[type="submit"], input[type="reset"], input[type="button"], input[type=file]::file-selector-button {
     display: inline-block;
     padding: 5px 10px;
     text-align: center;
diff --git a/test.html b/test.html
index 3d97d87..a3b27ce 100755
--- a/test.html
+++ b/test.html
@@ -662,6 +662,10 @@ <h1>Form elements</h1>
                   value="1970-01-01T00:00"
                 />
               </p>
+              <p>
+	      <label for="if">File input</label>
+                <input type="file" id="if">
+              </p>
             </fieldset>
             <p><a href="#top">[Top]</a></p>
             <fieldset id="forms__action">