Updated theme for v4.7 (#310)

Signed-off-by: Lucas Sandery <lucas-sandery@users.noreply.github.com>

diff --git a/designs/lucas-sandery/adminer.css b/designs/lucas-sandery/adminer.css
index 50e7db09693134b0d56a6a016ed88345fb0f0bbc..6e20afd84fe2c279f9f2f027586f75bd2504131b 100644 (file)
--- a/designs/lucas-sandery/adminer.css
+++ b/designs/lucas-sandery/adminer.css
@@ -12,13 +12,14 @@ Icons from http://FlatIcon.com:
 
 Background from "All Work and No Play", http://thenewcode.com/1008/SVG-Movie-Backgrounds-Andys-Room-and-Overlook-Hotel
 */
-
-html,
-body {
+html {
        height: 100%;
 }
 body {
-       background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340.6 491.8' width='56px' height='81px'%3E%3Cpolygon fill='%2370a37f' fill-opacity='0.05' points='229.9,208.7 170.5,243 111,208.7 111,140 170.5,105.7 229.9,140'/%3E%3Cpolygon fill='%2370a37f' fill-opacity='0.05' points='0,305.3 59.5,339.6 59.5,408.3 0,442.6'/%3E%3Cpolygon fill='%2370a37f' fill-opacity='0.05' points='342.8,442.6 283.3,408.3 283.3,339.6 342.8,305.3'/%3E%3Cpolygon fill='%2379b473' fill-opacity='0.05' points='91.6,0 0,52.9 0,0'/%3E%3Cpolygon fill='%2379b473' fill-opacity='0.05' points='340.6,0 340.6,52.9 248.8,0'/%3E%3Cpolygon fill='%2379b473' fill-opacity='0.05' points='21.4,264.6 102.8,311.6 102.8,431.7 -1.2,491.8 0,544.5 149.7,458.1 149.1,285.1 68.2,236.7 68.2,116.6 172.2,56.5 276.2,116.6 276.2,236.7 192.5,285 192.5,337.1 192.5,337.1 192.5,458.1 342.2,544.5 341,491.8 237,431.7 237,311.6 320.8,263.3 320.8,90.2 171.1,3.8 21.4,90.2'/%3E%3C/svg%3E");
+       min-height: 100%;
+       display: flex;
+       align-items: stretch;
+       background: #41658a;
 }
 p {
        margin-right: 0;
@@ -37,7 +38,7 @@ a:visited:focus {
        text-decoration: underline;
        outline: none;
 }
-:-moz-focus-inner {
+::-moz-focus-inner {
        border: 0;
 }
 #noindex {
@@ -48,14 +49,14 @@ input:not([type="image"]),
 select,
 textarea,
 fieldset {
-       border: 1px solid rgba(65, 101, 138, 0.3);
+       border: thin solid rgba(65, 101, 138, 0.3);
 }
 label {
        white-space: nowrap;
 }
 .sqlarea {
        background: #fff;
-       border: 1px solid rgba(65, 101, 138, 0.3) !important;
+       border: thin solid rgba(65, 101, 138, 0.3) !important;
        width: auto !important;
 }
 legend {
@@ -73,7 +74,8 @@ input[type="button"] {
        margin-right: 0;
        color: #fff;
 }
-.error, .error b {
+.error,
+.error b {
        background: #ae1010;
 }
 .error b {
@@ -134,9 +136,6 @@ code.jush-sql {
        -webkit-box-decoration-break: clone;
        -o-box-decoration-break: clone;
        box-decoration-break: clone;
-       box-sizing: border-box;
-       max-width: 100%;
-       overflow: auto;
 }
 th > code {
        background: transparent;
@@ -145,31 +144,38 @@ th > code {
        color: #fff;
        white-space: nowrap;
 }
-/*
-html:lang(en) .version:before,
-html:lang(en) #version:before {
-       content: 'v';
-}
-*/
-#version:empty  {
-       display: none;
-}
 #content,
+#content > form:last-of-type,
 #menu {
-       padding: 0 20px 2em;
-       margin: 0;
        box-sizing: border-box;
+       display: flex;
+       flex-direction: column;
+}
+#content,
+#menu,
+.rtl #content,
+.rtl #menu {
+       margin: 0;
+       padding: 0 20px 1.5em;
 }
 #content {
-       min-height: 100%;
-       padding-bottom: 3em;
-       border-left: 20em solid #41658a;
+       order: 2;
+       flex: 1 1 auto;
+       overflow: auto;
+       background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340.6 491.8' width='56px' height='81px'%3E%3Cpolygon fill='%2370a37f' fill-opacity='0.05' points='229.9,208.7 170.5,243 111,208.7 111,140 170.5,105.7 229.9,140'/%3E%3Cpolygon fill='%2370a37f' fill-opacity='0.05' points='0,305.3 59.5,339.6 59.5,408.3 0,442.6'/%3E%3Cpolygon fill='%2370a37f' fill-opacity='0.05' points='342.8,442.6 283.3,408.3 283.3,339.6 342.8,305.3'/%3E%3Cpolygon fill='%2379b473' fill-opacity='0.05' points='91.6,0 0,52.9 0,0'/%3E%3Cpolygon fill='%2379b473' fill-opacity='0.05' points='340.6,0 340.6,52.9 248.8,0'/%3E%3Cpolygon fill='%2379b473' fill-opacity='0.05' points='21.4,264.6 102.8,311.6 102.8,431.7 -1.2,491.8 0,544.5 149.7,458.1 149.1,285.1 68.2,236.7 68.2,116.6 172.2,56.5 276.2,116.6 276.2,236.7 192.5,285 192.5,337.1 192.5,337.1 192.5,458.1 342.2,544.5 341,491.8 237,431.7 237,311.6 320.8,263.3 320.8,90.2 171.1,3.8 21.4,90.2'/%3E%3C/svg%3E");
 }
-.rtl #content {
-       margin: 0;
-       padding: 0 20px 3em;
-       border-left-style: none;
-       border-right: 20em solid #41658a;
+#content > *,
+#content > form:last-of-type > *,
+#menu > * {
+       flex: 0 0 auto;
+}
+#content > form:last-of-type {
+       flex: 1 0 auto;
+}
+#content > .scrollable,
+#content > form:last-of-type > .scrollable {
+       flex: 1 1 2em;
+       overflow: auto;
 }
 #breadcrumb {
        position: relative;
@@ -197,11 +203,15 @@ thead a:visited,
 }
 h1,
 h2 {
-       margin: 0 -20px 1em;
        padding: 2em 20px 0.5em;
        border-bottom-style: none;
        color: #fff;
 }
+h1,
+h2,
+.rtl h2 {
+       margin: 0 -20px 1em;
+}
 #h1,
 h2 a {
        color: inherit;
@@ -214,19 +224,19 @@ h2 {
        background: #79b473;
        position: relative;
 }
-.rtl h2 {
-       margin: 0 -20px 1em;
-}
-#content > form {
-       overflow: auto;
-       position: relative;
-       margin-top: 1em;
-}
-#content > form > :first-child {
+h2 + *,
+h2 + .hidden + *,
+h2 + * > :first-child,
+h2 + .hidden + * > :first-child {
        margin-top: 0;
 }
+h3 {
+       font-size: 110%;
+       font-weight: bold;
+}
 fieldset {
        display: inline-block;
+       align-self: flex-start;
 }
 .rtl fieldset {
        margin-right: 0;
@@ -237,7 +247,7 @@ input.default {
        box-shadow: none;
 }
 input.required {
-       outline: 1px dashed #ec5f12;
+       outline: thin dashed #ec5f12;
        outline-offset: 1px;
        box-shadow: none;
 }
@@ -247,35 +257,33 @@ table {
 }
 td,
 th {
-       border-bottom-style: none;
-       border-right-color: #dde5ef;
+       border-color: #dde5ef;
+       border-width: 0 thin 0 0;
        padding: 0.3em 0.8em 0.4em;
        background: rgba(65, 101, 138, 0.02);
 }
 .rtl td,
 .rtl th {
-       border-right-style: none;
-       border-left: 1px solid #dde5ef;
+       border-width: 0 0 0 thin;
+}
+td a,
+th a {
+       vertical-align: inherit;
 }
 th {
        background: rgba(65, 64, 115, 0.02);
 }
 td:last-child,
 th:last-child {
-       border-right-style: none;
+       border-width: 0;
 }
 thead th,
 thead td {
-       border-right-color: #fff;
+       border-color: #fff;
        padding: 0.5em 0.8em 0.6em;
        background: #414073;
        color: #fff;
 }
-.rtl thead th,
-.rtl thead td {
-       border-right-style: none;
-       border-left-color: #fff;
-}
 thead th {
        text-align: left;
        font-weight: normal;
@@ -346,52 +354,26 @@ tbody tr:nth-child(n):hover th {
        background: #4c3957 center no-repeat;
        background-size: 66%;
 }
-.icon[src*="plus.gif"] {
+.icon[src*="file=plus.gif"] {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='512px' height='512px' viewBox='0 0 456 456' style='enable-background:new 0 0 456 456;'%3E%3Cg%3E%3Cpolygon points='456,157.566 298.433,157.566 298.433,0 157.567,0 157.567,157.566 0,157.566 0,298.434 157.567,298.434 157.567,456 298.433,456 298.433,298.434 456,298.434' fill='%23FFFFFF'/%3E%3C/g%3E%3C/svg%3E");
 }
-.icon[src*="minus.gif"] {
+.icon[src*="file=minus.gif"] {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='512px' height='512px' viewBox='0 0 456 456' style='enable-background:new 0 0 456 456;'%3E%3Cg%3E%3Cpolygon points='456,157.566 0,157.566 0,298.434 456,298.434' fill='%23FFFFFF'/%3E%3C/g%3E%3C/svg%3E");
 }
 .column a[href*="&asc%5B"],
-.icon[src*="up.gif"] {
+.icon[src*="file=up.gif"] {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' viewBox='0 0 490 490' style='enable-background:new 0 0 490 490;' width='512px' height='512px'%3E%3Cg%3E%3Cpath d='M490,474.459H0L245.009,15.541L490,474.459z' fill='%23FFFFFF'/%3E%3C/g%3E%3C/svg%3E");
 }
 .column a[href*="&desc%5B"],
-.icon[src*="down.gif"] {
+.icon[src*="file=down.gif"] {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' viewBox='0 0 490 490' style='enable-background:new 0 0 490 490;' width='512px' height='512px'%3E%3Cg%3E%3Cpath d='M0,15.541h490L244.991,474.459L0,15.541z' fill='%23FFFFFF'/%3E%3C/g%3E%3C/svg%3E");
 }
-.icon[src*="cross.gif"] {
+.icon[src*="file=cross.gif"] {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' viewBox='0 0 174.239 174.239' style='enable-background:new 0 0 174.239 174.239;' width='512px' height='512px'%3E%3Cg%3E%3Cpath d='M146.537,1.047c-1.396-1.396-3.681-1.396-5.077,0L89.658,52.849c-1.396,1.396-3.681,1.396-5.077,0L32.78,1.047 c-1.396-1.396-3.681-1.396-5.077,0L1.047,27.702c-1.396,1.396-1.396,3.681,0,5.077l51.802,51.802c1.396,1.396,1.396,3.681,0,5.077 L1.047,141.46c-1.396,1.396-1.396,3.681,0,5.077l26.655,26.655c1.396,1.396,3.681,1.396,5.077,0l51.802-51.802 c1.396-1.396,3.681-1.396,5.077,0l51.801,51.801c1.396,1.396,3.681,1.396,5.077,0l26.655-26.655c1.396-1.396,1.396-3.681,0-5.077 l-51.801-51.801c-1.396-1.396-1.396-3.681,0-5.077l51.801-51.801c1.396-1.396,1.396-3.681,0-5.077L146.537,1.047z' fill='%23FFFFFF'/%3E%3C/g%3E%3C/svg%3E");
 }
 .column a[href="#fieldset-search"] {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 310.088 310.088' enable-background='new 0 0 310.088 310.088' width='512px' height='512px'%3E%3Cg%3E%3Cpath d='m299.85,250.413l-62.808-62.808c-3.982-3.982-10.437-3.982-14.418,0l-3.539,3.539-18.586-18.586c29.709-42.872 25.472-102.152-12.716-140.34-42.958-42.958-112.606-42.958-155.563,0s-42.958,112.606 0,155.563c38.189,38.188 97.468,42.425 140.34,12.716l18.586,18.586-3.539,3.539c-3.982,3.981-3.982,10.437 0,14.418l62.808,62.808c13.651,13.651 35.785,13.651 49.436,0s13.65-35.784-0.001-49.435zm-251.368-78.895c-33.921-33.921-33.921-89.115-0.001-123.036 33.922-33.921 89.117-33.922 123.037-0.001v0.001c33.922,33.921 33.922,89.115 0,123.036-16.96,16.961-39.239,25.441-61.518,25.441-22.279,0-44.558-8.48-61.518-25.441z' fill='%23FFFFFF'/%3E%3C/g%3E%3C/svg%3E");
 }
-.pages {
-       display: inline-block;
-       background: #4c3957;
-       color: #f39561;
-       border-color: rgba(255, 255, 255, 0.8);
-       border-bottom-style: none;
-       padding: 0.3em;
-       padding-right: 0.7em;
-       left: 20em;
-       margin-left: 19px;
-}
-.rtl .pages {
-       padding-right: 0.3em;
-       padding-left: 0.7em;
-       right: 20em;
-       margin-left: 0;
-       margin-right: 19px;
-}
-.pages span {
-       color: #fff;
-}
-.pages a {
-       color: #fff;
-       display: inline-block;
-       padding: 0.1em 0.4em 0.2em;
-}
 .loadmore {
        margin-right: -0.4em;
 }
@@ -399,13 +381,14 @@ tbody tr:nth-child(n):hover th {
        margin-right: 0;
        margin-left: -0.4em;
 }
-.pages a:hover,
-.pages a:focus,
-.pages a:visited:hover,
-.pages a:focus:hover {
-       color: #fff;
-       text-decoration: none;
-       background: #ec5f12;
+.footer {
+       position: static;
+       margin: 0.8em 0 0;
+       border-style: none;
+}
+.footer > div {
+       background: transparent;
+       padding: 0;
 }
 #lang,
 .logout {
@@ -466,16 +449,12 @@ tbody tr:nth-child(n):hover th {
        background-color: #ec5f12;
 }
 #menu {
-       top: 0;
-       width: 20em;
-       background: #41658a;
-}
-.rtl #menu {
-       left: auto;
-       right: 0;
+       position: static;
+       flex: 0 0 20em;
 }
 h1 {
        background: #414073;
+       margin-bottom: 0;
 }
 #h1 {
        font-style: normal;
@@ -500,9 +479,11 @@ h1 {
 #dbs span {
        display: none;
 }
-#menu p, #tables {
-       padding: 0;
+#menu p,
+#logins,
+#tables {
        margin: 1.5em 0 0;
+       padding: 0;
        border-bottom-style: none;
 }
 #menu .message,
@@ -551,33 +532,29 @@ button:disabled {
        font-weight: normal;
        background-color: #414073;
 }
+#menu .links {
+       display: flex;
+       flex-wrap: wrap;
+       margin: 1em -5px -5px;
+}
 #menu .links:after {
        content: " ";
        display: table;
        clear: both;
 }
 #menu .links a {
-       float: left;
-       box-sizing: border-box;
-       width: 48%;
-       width: calc(50% - 5px);
+       flex: 1 1 35%;
+       margin: 5px;
 }
-.rtl #menu .links a {
-       float: right;
-}
-#menu .links a:nth-child(even) {
-       float: right;
-}
-.rtl #menu .links a:nth-child(even) {
-       float: left;
-}
-#menu .links a:nth-child(n+3) {
-       margin-top: 10px;
+#logins,
+#tables {
+       flex: 1 1 2em;
+       overflow: auto !important;
 }
 #logins a,
 #tables a,
 #tables span {
-       background: #41658a;
+       background: transparent;
        color: #fff;
 }
 #logins {
@@ -592,20 +569,12 @@ button:disabled {
        background: transparent;
        color: transparent;
        position: relative;
-       margin-right: 0.3em;
+       margin: 0.3em;
+       margin-left: 0;
 }
 .rtl #tables a.select {
-       margin-right: 0;
        margin-left: 0.3em;
-}
-#tables a.select + a {
-       display: inline-block;
-       padding: 0.3em 0.6em 0.3em 0;
-       margin-top: -0.3em;
-}
-.rtl #tables a.select + a {
-       padding-right: 0;
-       padding-left: 0.6em;
+       margin-right: 0;
 }
 #tables a.select:after {
        content: ' ';
@@ -618,6 +587,14 @@ button:disabled {
        left: 0;
        top: -0.1em;
 }
+#tables a.select:hover,
+#tables a.select:focus,
+#tables a.select.active {
+       background-color: #ec5f12;
+}
+#tables a.select.active ~ .structure {
+       font-weight: bold;
+}
 #routines + .links a {
        margin-right: 0.45em;
 }
@@ -638,16 +615,15 @@ button:disabled {
        margin-left: 0;
 }
 
-@media all and (max-device-width:880px) {
+@media all and (max-device-width: 880px) {
        body {
                padding-bottom: 2em;
        }
-       #content {
-               min-height: 0;
-               border-left-style: none;
-       }
-       .rtl #content {
-               border-right-style: none;
+       body,
+       #content,
+       #content > form:last-of-type,
+       #menu {
+               display: block;
        }
        .rtl #content,
        .rtl #menu,
@@ -665,6 +641,8 @@ button:disabled {
                overflow: auto;
                position: static;
                white-space: nowrap;
+               width: 100%;
+               box-sizing: border-box;
        }
        .rtl #breadcrumb {
                padding: 0 10px 0 0;
@@ -690,13 +668,6 @@ button:disabled {
                -o-box-decoration-break: clone;
                box-decoration-break: clone;
        }
-       .pages {
-               position: static;
-               margin-left: 0;
-       }
-       .rtl .pages {
-               margin-right: 0;
-       }
        #lang {
                margin-left: auto;
                position: relative;