CSS: Use --bg

diff --git a/adminer/static/dark.css b/adminer/static/dark.css
index 04a88faff663643f4cfabfb7419baf3557ecb463..06fe667d41e0ee8145a7d898179f609c3f335f03 100644 (file)
--- a/adminer/static/dark.css
+++ b/adminer/static/dark.css
@@ -1,6 +1,10 @@
 /** @author Robert Mesaros, https://www.rmsoft.sk */
 
-body { color: #829bb0; background: #002240; }
+html {
+       --bg: #002240;
+}
+
+body { color: #829bb0; }
 a { color: #517fa8; }
 a:visited { color: #517fa8; }
 a:link:hover, a:visited:hover { color: #9bc0e1; }
@@ -21,7 +25,7 @@ input.required, input.maxlength { box-shadow: 1px 1px 1px red; }
 .error { color: red; background: #efdada; border: 1px solid #e76f6f; }
 .error b { background: #efeaea; }
 .message { color: #0b860b; background: #efe; border: 1px solid #7fbd7f; }
-.message table { color: #829bb0; background: #002240; }
+.message table { color: #829bb0; }
 .char { color: #a949a9; }
 .date { color: #59c159; }
 .enum { color: #d55c5c; }
@@ -32,10 +36,8 @@ input.required, input.maxlength { box-shadow: 1px 1px 1px red; }
 .js .checkable .checked a { color: #67a4a5; }
 .icon { filter: invert(1); background-color: #062642; }
 .icon:hover { background-color: #d1394e; }
-.footer { border-top-color: rgba(0, 34, 64, .7); border-image-source: linear-gradient(rgba(0, 34, 64, 0.2), #002240); }
-.footer > div { background: #002240; }
+#menu { border-color: #a3bdd3; }
 #menu p, #logins, #tables { border-color: #326b9c; }
-#logins a, #tables a, #tables span { background: #002240; }
 #breadcrumb { background: #154269; }
 #h1 { color: #ffddbf; }
 #version { color: #d2b397; }
@@ -44,7 +46,3 @@ input.required, input.maxlength { box-shadow: 1px 1px 1px red; }
 #schema div.table a { color: #3c7bb3; }
 #menu .active { color: #398c8d; }
 #edit-fields tbody tr:hover td, #edit-fields tbody tr:hover th { background: #3b6f9d; }
-
-@media all and (max-width: 880px) {
-       #menu { background: #002240; border-color: #a3bdd3; }
-}

diff --git a/adminer/static/default.css b/adminer/static/default.css
index 129e5fd750fe443835fe947ae6a5860ca49763a5..42483eb8c4f7ab1c1c0692a6ca0b071260497dd8 100644 (file)
--- a/adminer/static/default.css
+++ b/adminer/static/default.css
@@ -1,6 +1,10 @@
 /** @author Ondrej Valka, http://valka.info */
 
-body { color: #000; background: #fff; font: 90%/1.25 Verdana, Arial, Helvetica, sans-serif; margin: 0; min-width: fit-content; }
+html {
+       --bg: #fff;
+}
+
+body { color: #000; background: var(--bg); font: 90%/1.25 Verdana, Arial, Helvetica, sans-serif; margin: 0; min-width: fit-content; }
 a { color: blue; text-decoration: none; }
 a:visited { color: navy; }
 a:link:hover, a:visited:hover { color: red; text-decoration: underline; }
@@ -27,7 +31,7 @@ code { font-size: 110%; padding: 1px 2px; background: #eee; }
 pre { margin: 1em 0 0; }
 td pre { margin: 0; }
 pre, textarea { font: 110%/1.25 monospace; }
-pre.jush { background: #fff; }
+pre.jush { background: var(--bg); }
 pre code { display: block; font-size: 100%; }
 input, textarea { box-sizing: border-box; }
 input, select { vertical-align: middle; }
@@ -42,9 +46,9 @@ input.wayoff { left: -1000px; position: absolute; }
 .nowrap td, .nowrap th, td.nowrap, p.nowrap { white-space: pre; }
 .wrap td { white-space: normal; }
 .error { color: red; background: #fee; }
-.error b { background: #fff; font-weight: normal; }
+.error b { background: var(--bg); font-weight: normal; }
 .message { color: green; background: #efe; }
-.message table { color: #000; background: #fff; }
+.message table { color: #000; background: var(--bg); }
 .error, .message { padding: .5em .8em; margin: 1em 20px 0 0; }
 .char { color: #007F00; }
 .date { color: #7F007F; }
@@ -66,8 +70,8 @@ input.wayoff { left: -1000px; position: absolute; }
 .icon:hover { background-color: red; }
 .size { width: 7ex; }
 .help { cursor: help; }
-.footer { position: sticky; bottom: 0; margin-right: -20px; border-top: 20px solid rgba(255, 255, 255, .7); border-image: linear-gradient(rgba(255, 255, 255, .2), #fff) 100% 0; }
-.footer > div { background: #fff; padding: 0 0 .5em; }
+.footer { position: sticky; bottom: 0; margin-right: -20px; border-top: 20px solid rgb(from var(--bg) r g b / .7); border-image: linear-gradient(rgb(from var(--bg) r g b / .2), var(--bg)) 100% 0; }
+.footer > div { background: var(--bg); padding: 0 0 .5em; }
 .footer fieldset { margin-top: 0; }
 .links a { white-space: nowrap; margin-right: 20px; }
 .logout { margin-top: .5em; position: absolute; top: 0; right: 0; }
@@ -78,7 +82,7 @@ input.wayoff { left: -1000px; position: absolute; }
 #logins li, #tables li { list-style: none; }
 #dbs { overflow: hidden; }
 #logins, #tables { white-space: nowrap; overflow: hidden; }
-#logins a, #tables a, #tables span { background: #fff; }
+#logins a, #tables a, #tables span { background: var(--bg); }
 #content { margin: 2em 0 0 21em; padding: 10px 20px 20px 0; }
 #lang { position: absolute; top: -2.6em; left: 0; padding: .3em 1em; }
 #menuopen { display: none; }
@@ -111,7 +115,7 @@ input.wayoff { left: -1000px; position: absolute; }
 @media all and (max-width: 880px) {
        .pages { left: auto; }
        .logout { padding: 1em; top: 3em; }
-       #menu { width: auto; background: #fff; border: 1px solid #000; }
+       #menu { width: auto; background: var(--bg); border: 1px solid #000; }
        #content { margin-left: 10px; }
        #lang { position: static; }
        #breadcrumb { left: 48px; }