update lucas-sandery theme

This commit is contained in:
Lucas Sandery 2019-09-11 22:46:18 +09:30 committed by Jakub Vrána
parent 1bcb440698
commit feb59fa8cf

View file

@ -1,4 +1,7 @@
/* /*
A colourful RTL-friendly theme.
Update from https://github.com/vrana/adminer/raw/master/designs/lucas-sandery/adminer.css
Icons from http://FlatIcon.com: Icons from http://FlatIcon.com:
"Translation" by Freepik "Translation" by Freepik
"Power" by Vectors Market "Power" by Vectors Market
@ -16,9 +19,9 @@ html {
height: 100%; height: 100%;
} }
body { body {
width: 100%;
min-height: 100%; min-height: 100%;
display: flex; display: flex;
align-items: stretch;
background: #41658a; background: #41658a;
} }
p { p {
@ -145,52 +148,45 @@ th > code {
white-space: nowrap; white-space: nowrap;
} }
#content, #content,
#content > form:last-of-type,
#menu {
box-sizing: border-box;
display: flex;
flex-direction: column;
}
#content,
#menu, #menu,
.rtl #content, .rtl #content,
.rtl #menu { .rtl #menu {
margin: 0; margin: 0;
padding: 0 20px 1.5em; padding: 0 20px 1.5em;
box-sizing: border-box;
} }
#content { #content {
order: 2; order: 2;
flex: 1 1 auto; flex: 1 1 auto;
max-width: calc(100% - 20em);
}
#content,
.footer {
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") fixed;
}
.scrollable {
overflow: 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");
} }
#content > *, h1,
#content > form:last-of-type > *, h2,
#menu > * { #breadcrumb {
flex: 0 0 auto; position: sticky;
} top: 0;
#content > form:last-of-type { z-index: 1;
flex: 1 0 auto;
}
#content > .scrollable,
#content > form:last-of-type > .scrollable {
flex: 1 1 2em;
overflow: auto;
} }
#breadcrumb { #breadcrumb {
position: relative; z-index: 2;
z-index: 1;
white-space: normal; white-space: normal;
background: #70a37f; background: #70a37f;
color: #fff; color: #fff;
padding: 0.1em 2.5em 0.1em 20px; padding: 0.1em 2.5em 0.1em 20px;
height: auto; height: auto;
margin: 0 -20px -2em; margin: 0 -20px -2em;
top: auto;
left: auto; left: auto;
} }
.rtl #breadcrumb { .rtl #breadcrumb {
right: auto; right: auto;
left: 0;
margin: 0 -20px -2em; margin: 0 -20px -2em;
padding-right: 20px; padding-right: 20px;
padding-left: 2.5em; padding-left: 2.5em;
@ -222,7 +218,6 @@ h2 a {
} }
h2 { h2 {
background: #79b473; background: #79b473;
position: relative;
} }
h2 + *, h2 + *,
h2 + .hidden + *, h2 + .hidden + *,
@ -236,7 +231,6 @@ h3 {
} }
fieldset { fieldset {
display: inline-block; display: inline-block;
align-self: flex-start;
} }
.rtl fieldset { .rtl fieldset {
margin-right: 0; margin-right: 0;
@ -382,9 +376,11 @@ tbody tr:nth-child(n):hover th {
margin-left: -0.4em; margin-left: -0.4em;
} }
.footer { .footer {
position: static; margin: 0;
margin: 0.8em 0 0; padding-top: 1em;
border-style: none; border-style: none;
-webkit-mask-image: linear-gradient(rgba(255, 255, 255, 0), #fff 1em);
mask-image: linear-gradient(rgba(255, 255, 255, 0), #fff 1em);
} }
.footer > div { .footer > div {
background: transparent; background: transparent;
@ -392,6 +388,7 @@ tbody tr:nth-child(n):hover th {
} }
#lang, #lang,
.logout { .logout {
z-index: 3;
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
@ -400,14 +397,10 @@ tbody tr:nth-child(n):hover th {
} }
#lang { #lang {
left: 18em; left: 18em;
z-index: 1;
} }
.rtl #lang { .rtl #lang {
right: 18em; right: 18em;
} }
.logout {
z-index: 2;
}
.rtl .logout { .rtl .logout {
margin: 0; margin: 0;
left: 0; left: 0;
@ -449,8 +442,11 @@ tbody tr:nth-child(n):hover th {
background-color: #ec5f12; background-color: #ec5f12;
} }
#menu { #menu {
position: static; position: relative;
top: 0;
width: auto;
flex: 0 0 20em; flex: 0 0 20em;
max-width: 20em;
} }
h1 { h1 {
background: #414073; background: #414073;
@ -479,10 +475,12 @@ h1 {
#dbs span { #dbs span {
display: none; display: none;
} }
#menu p {
margin: 1.5em 0 0;
}
#menu p, #menu p,
#logins, #logins,
#tables { #tables {
margin: 1.5em 0 0;
padding: 0; padding: 0;
border-bottom-style: none; border-bottom-style: none;
} }
@ -543,49 +541,62 @@ button:disabled {
clear: both; clear: both;
} }
#menu .links a { #menu .links a {
flex: 1 1 35%; flex: 1 1 7em;
margin: 5px; margin: 5px;
} }
#logins, #logins,
#tables { #tables {
flex: 1 1 2em; margin: 0.7em -20px -20px;
overflow: auto !important; padding: 0 20px 20px;
overflow: hidden !important;
}
#logins:hover,
#tables:hover {
overflow: visible !important;
}
#logins li,
#tables li {
background: #41658a;
} }
#logins a, #logins a,
#tables a, #tables a,
#tables span { #tables span {
background: transparent; background: #41658a;
color: #fff; color: #fff;
padding: 0.2em 0.4em 0.3em 0;
}
.rtl #logins a,
.rtl #tables a,
.rtl #tables span {
padding-left: 0.4em;
padding-right: 0;
} }
#logins { #logins {
line-height: 2; line-height: 2;
} }
#tables a.select { #tables a.select {
display: inline-block; display: inline-block;
vertical-align: middle; position: relative;
width: 1em; width: 1.13em;
height: 1em; height: 1.3em;
overflow: hidden; overflow: hidden;
background: transparent; background: transparent;
color: transparent; color: transparent;
position: relative; margin-left: -0.2em;
margin: 0.3em; white-space: nowrap;
margin-left: 0; padding: 0.1em 0.2em;
top: 0.4em;
} }
.rtl #tables a.select { .rtl #tables a.select {
margin-left: 0.3em; margin-left: 0;
margin-right: 0; margin-right: -0.2em;
} }
#tables a.select:after { #tables a.select:before {
content: ' '; content: ' ';
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='512px' height='512px' viewBox='0 0 16 16'%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M0 1v15h16v-15h-16zM5 15h-4v-2h4v2zM5 12h-4v-2h4v2zM5 9h-4v-2h4v2zM5 6h-4v-2h4v2zM10 15h-4v-2h4v2zM10 12h-4v-2h4v2zM10 9h-4v-2h4v2zM10 6h-4v-2h4v2zM15 15h-4v-2h4v2zM15 12h-4v-2h4v2zM15 9h-4v-2h4v2zM15 6h-4v-2h4v2z'/%3E%3C/g%3E%3C/svg%3E") center no-repeat; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='512px' height='512px' viewBox='0 0 16 16'%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M0 1v15h16v-15h-16zM5 15h-4v-2h4v2zM5 12h-4v-2h4v2zM5 9h-4v-2h4v2zM5 6h-4v-2h4v2zM10 15h-4v-2h4v2zM10 12h-4v-2h4v2zM10 9h-4v-2h4v2zM10 6h-4v-2h4v2zM15 15h-4v-2h4v2zM15 12h-4v-2h4v2zM15 9h-4v-2h4v2zM15 6h-4v-2h4v2z'/%3E%3C/g%3E%3C/svg%3E") center no-repeat;
background-size: contain; background-size: contain;
display: block; display: block;
width: 100%;
height: 100%; height: 100%;
position: absolute;
left: 0;
top: -0.1em;
} }
#tables a.select:hover, #tables a.select:hover,
#tables a.select:focus, #tables a.select:focus,
@ -629,7 +640,7 @@ button:disabled {
.rtl #menu, .rtl #menu,
#content, #content,
#menu { #menu {
/*! margin: 0; */ max-width: none;
padding: 0 10px 2em; padding: 0 10px 2em;
width: auto; width: auto;
} }
@ -680,4 +691,9 @@ button:disabled {
margin-left: 0; margin-left: 0;
margin-right: auto; margin-right: auto;
} }
#logins,
#tables {
margin: 0.7em -10px -10px;
padding: 0 10px 10px;
}
} }