diff --git a/designs/lucas-sandery/adminer.css b/designs/lucas-sandery/adminer.css index 50e7db09..6e20afd8 100644 --- 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 { + box-sizing: border-box; + display: flex; + flex-direction: column; } #content, -#menu { - padding: 0 20px 2em; +#menu, +.rtl #content, +.rtl #menu { margin: 0; - box-sizing: border-box; + 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;