Add Win98-style design theme

diff --git a/designs/win98/README.md b/designs/win98/README.md
new file mode 100644 (file)
index 0000000..2e3b021
--- /dev/null
+++ b/designs/win98/README.md
@@ -0,0 +1,2 @@
+## Screenshot
+![screenshot](https://www.adminer.org/static/designs/win98/screenshot.png)

diff --git a/designs/win98/adminer.css b/designs/win98/adminer.css
new file mode 100644 (file)
index 0000000..b582663
--- /dev/null
+++ b/designs/win98/adminer.css
@@ -0,0 +1,298 @@
+/* inspired by https://github.com/jdan/98.css */
+
+:root {
+    --text-color: #222222;
+    --button-face: #dfdfdf;
+    --window-frame: #0a0a0a;
+    --dialog-blue-light: #1084d0;
+    --link-blue: #0000ff;
+}
+
+body {
+    background: teal;
+    color: var(--text-color);
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+button, input[type=reset], input[type=submit] {
+    background: silver;
+    border: none;
+    border-radius: 0;
+    box-shadow: inset -1px -1px var(--window-frame), inset 1px 1px white, inset -2px -2px grey, inset 2px 2px var(--button-face);
+    box-sizing: border-box;
+    color: transparent;
+    font-size: 12px;
+    min-height: 23px;
+    min-width: 75px;
+    padding: 0 12px;
+    text-shadow: 0 0 var(--text-color);
+}
+
+button.default, input[type=reset].default, input[type=submit].default {
+    box-shadow: inset -2px -2px var(--window-frame), inset 1px 1px var(--window-frame), inset 2px 2px white, inset -3px -3px grey, inset 3px 3px var(--button-face);
+}
+
+button:not(:disabled):active, input[type=reset]:not(:disabled):active, input[type=submit]:not(:disabled):active {
+    box-shadow: inset -1px -1px white, inset 1px 1px var(--window-frame), inset -2px -2px var(--button-face), inset 2px 2px grey;
+    text-shadow: 1px 1px var(--text-color);
+}
+
+button.default:not(:disabled):active, input[type=reset].default:not(:disabled):active, input[type=submit].default:not(:disabled):active {
+    box-shadow: inset 2px 2px var(--window-frame), inset -1px -1px var(--window-frame), inset -2px -2px white, inset 3px 3px grey, inset -3px -3px var(--button-face);
+}
+
+button:focus, input[type=reset]:focus, input[type=submit]:focus {
+    outline: 1px dotted black;
+    outline-offset: -4px;
+}
+
+button::-moz-focus-inner, input[type=reset]::-moz-focus-inner, input[type=submit]::-moz-focus-inner {
+    border: 0;
+}
+
+:disabled, :disabled + label, input[readonly], input[readonly] + label, input[type=submit]:disabled, input[type=reset]:disabled, input[type=submit]:disabled {
+    color: grey;
+}
+
+:disabled + label, button:disabled, input[type=reset]:disabled, input[type=submit]:disabled {
+    text-shadow: 1px 1px 0 white;
+}
+
+#content, #menu, .footer, #breadcrumb {
+    background: silver;
+    box-shadow: inset -1px -1px var(--window-frame), inset 1px 1px var(--button-face), inset -2px -2px grey, inset 2px 2px white;
+    padding: 16px;
+}
+
+#content h2 {
+    align-items: center;
+    background: linear-gradient(90deg, navy, var(--dialog-blue-light));
+    color: white;
+    display: flex;
+    font-size: 120%;
+    font-weight: normal;
+    justify-content: space-between;
+    letter-spacing: 0;
+    margin: -13px -13px 16px -13px;
+    padding: 3px 2px 3px 3px;
+}
+
+fieldset {
+    border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='5' height='5' fill='gray' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h5v5H0V2h2v1h1V2H0' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h4v4H0V1h1v2h2V1H0'/%3E%3C/svg%3E") 2;
+    margin: 0;
+    padding: 10px;
+    padding-block-start: 8px;
+}
+
+legend {
+    background: silver;
+}
+
+input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input:not([type]) {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border: none;
+    border-radius: 0;
+}
+
+input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], select, input:not([type]) {
+    background-color: white;
+    box-shadow: inset -1px -1px white, inset 1px 1px grey, inset -2px -2px var(--button-face), inset 2px 2px var(--window-frame);
+    box-sizing: border-box;
+    padding: 3px 4px;
+}
+
+select, textarea {
+    border: none;
+}
+
+textarea {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-color: white;
+    border-radius: 0;
+    box-shadow: inset -1px -1px white, inset 1px 1px grey, inset -2px -2px var(--button-face), inset 2px 2px var(--window-frame);
+    box-sizing: border-box;
+    padding: 3px 4px;
+}
+
+input[type=email], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=number], select {
+    min-height: 21px;
+}
+
+input[type=search]::-ms-clear, input[type=search]::-ms-reveal {
+    display: none;
+    height: 0;
+    width: 0;
+}
+
+input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration {
+    display: none;
+}
+
+input[type=email]:disabled, input[type=email]:read-only, input[type=number]:disabled, input[type=number]:read-only, input[type=password]:disabled, input[type=password]:read-only, input[type=search]:disabled, input[type=search]:read-only, input[type=tel]:disabled, input[type=tel]:read-only, input[type=text]:disabled, input[type=text]:read-only, textarea:disabled {
+    background-color: silver;
+}
+
+select {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%23000'/%3E%3C/svg%3E");
+    background-position: top 2px right 2px;
+    background-repeat: no-repeat;
+    border-radius: 0;
+    padding-right: 32px;
+    position: relative;
+}
+
+input[type=email]:focus, input[type=number]:focus, input[type=password]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus, select:focus, textarea:focus {
+    outline: none;
+}
+
+select:focus {
+    background-color: navy;
+    color: white;
+}
+
+select:focus option {
+    background-color: white;
+    color: black;
+}
+
+select:active {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h16v17H0V0zm1 16h14V1H1v15z' fill='gray'/%3E%3Cpath fill='silver' d='M1 1h14v15H1z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 7H5v1h1v1h1v1h1v1h1v-1h1V9h1V8h1V7z' fill='%23000'/%3E%3C/svg%3E")
+}
+
+a {
+    color: var(--link-blue);
+}
+
+a:focus {
+    outline: 1px dotted var(--link-blue);
+}
+
+pre {
+    border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='5' height='5' fill='gray' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h5v5H0V2h2v1h1V2H0' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h4v4H0V1h1v2h2V1H0'/%3E%3C/svg%3E") 2;
+    border-style: solid;
+    border-width: 1px;
+    margin: 0;
+    padding: 12px 8px;
+}
+
+table {
+    background-color: white;
+}
+
+table > thead > tr > * {
+    background: silver;
+    box-shadow: inset -1px -1px var(--window-frame), inset 1px 1px white, inset -2px -2px grey, inset 2px 2px var(--button-face);
+}
+
+table.interactive > tbody > tr {
+    cursor: pointer;
+}
+
+#fieldset-sort > div:not(:last-of-type), #fieldset-search > div:not(:last-of-type), #fieldset-select > div:not(:last-of-type) {
+    margin-bottom: .5em;
+}
+
+#fieldset-partition p {
+    margin: 0;
+}
+
+.icon {
+    min-height: 0;
+    min-width: 0;
+}
+
+.links {
+    margin: 1em 0;
+}
+
+#logins a, #tables a, #tables span {
+    background: none;
+}
+
+.jush-autocomplete, .jush-autocomplete:active {
+    background: none;
+    height: auto;
+}
+
+.logout {
+    box-shadow: none;
+    margin-top: .8em;
+}
+
+#breadcrumb {
+    height: auto;
+    margin: 0;
+    padding: 2px 16px;
+    top: calc(1.5em - 14px);
+}
+
+code {
+    background: none;
+}
+
+#menu {
+    margin: 0;
+    top: 3em;
+    width: 18em;
+}
+
+#menu h1 {
+    background: none;
+    margin: 0;
+    padding: 0;
+}
+
+#menu h1 a {
+    color: var(--text-color);
+}
+
+#menu .links a {
+    display: block;
+}
+
+#lang {
+    top: -2.8em;
+}
+
+#lang label {
+    color: white;
+}
+
+#content {
+    margin-top: 3em;
+}
+
+.footer {
+    margin: 1em 0;
+}
+
+.footer > div {
+    background: none;
+}
+
+.js .column {
+    background: silver;
+    border: none;
+    border-radius: 0;
+    box-shadow: inset -1px -1px var(--window-frame), inset 1px 1px var(--button-face), inset -2px -2px grey, inset 2px 2px white;
+    margin-top: -.4em;
+    padding: 4px;
+}
+
+@media all and (max-width: 800px) {
+    .js .logout {
+        box-shadow: none;
+        top: 0;
+    }
+
+    #lang label {
+        color: initial;
+    }
+}