CSS-Datei für Adminer ?

[mbodon]

Hallo, habe eine kleine css-Datei geschrieben die dem Adminer ein bessere Redaxo-Anmutung gibt.

body {
	font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.428571429;
	margin: 0;
	background-color: #f3f6fb;
	color: #324050
}

a {
	color: #4b9ad9;
	text-decoration: none
}

a:visited {
	color: #4b9ad9
}

a:link:hover,
a:visited:hover {
	color: red;
	text-decoration: none
}

a.text:hover {
	text-decoration: none
}

h1 {
	background: #4b9ad9;
	border: 0
}

h2 {
	color: white;
	background: #4b9ad9;
	border: 0
}

h3 {
	font-weight: normal;
	font-size: 150%;
	margin: 1em 0 0
}

table {
	border: 0;
	font-size: 100%;
	background-color: white
}

td,
th {
	border: 0;
	border-bottom: 1px solid #999;
	padding: .5em 2em .5em .5em;
	background-color: transparent
}

th {
	background: transparent;
	text-align: left
}

thead th {
	text-align: center;
	padding: .2em .5em
}

thead td,
thead th {
	background: #dfe3e9
}

.odd td,
.odd th {
	background: transparent
}

fieldset {
	display: inline;
	vertical-align: top;
	padding: .5em .8em;
	margin: .8em .5em 0 0;
	min-height: 50px;
	border: 1px solid rgba(156, 165, 178, .3)
}

code {
	background: #eee
}

tbody tr:hover td,
tbody tr:hover th {
	background: #e0f5ee
}

.js .checkable .checked td,
.js .checkable .checked th {
	background: rgba(0, 0, 0, 0.1)
}

.pages {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 10px;
	border: 1px solid rgba(156, 165, 178, .3);
	left: auto;
	right: 20px;
	bottom: 10px;
	padding: 1em 2em
}

#menu .links a {
	white-space: nowrap;
	margin-right: 20px;
	color: #4b9ad9;
	width: 100%;
	padding: 0.5em 1em;
	border-radius: 3px;
	display: inline-block
}

#menu .links a:hover {
	background-color: #283542;
	box-sizing: border-box
}

#content .links a {
	color: #4b9ad9;
	background-color: rgba(0, 0, 0, 0.02);
	padding: 0.5em 1em;
	border-radius: 3px;
	display: inline-block;
	border: 1px solid rgba(156, 165, 178, .3)
}

#content .links a:hover {
	color: white;
	background-color: #4b9ad9
}

.logout {
	margin-top: .5em;
	position: absolute;
	top: 0;
	right: 0
}

#menu {
	width: 250px;
	background-color: #324050
}

#menu p,
#tables {
	padding: .8em 1em;
	margin: 0;
	border-bottom: 1px solid rgba(156, 165, 178, .3)
}

#tables li {
	list-style: none
}

#tables li:hover {
	background-color: #283542
}

#tables li:hover a:hover {
	color: #4b9ad9
}

#logins,
#tables {
	white-space: nowrap;
	overflow: hidden
}

#logins a,
#tables a,
#tables span {
	background: transparent;
	color: #9ca5b2
}

#content {
	margin: 2em 0 0 248px;
	padding: 10px 0px 20px 20px
}

#breadcrumb {
	white-space: nowrap;
	position: absolute;
	top: 0;
	left: 21em;
	background: transparent;
	height: 2em;
	line-height: 1.8em;
	padding: 3px 1em 0 0;
	margin: 0 0 0 -18px
}

#h1 {
	color: white;
	text-decoration: none;
	font-style: normal
}

pre.sqlarea.jush-sql.jush,
pre.sqlarea.jush.jush {
	border: 0px !important;
	background-color: white
}

code.jush-sql {
	padding: 1em;
	margin-bottom: 1em;
	display: inline-block;
	background-color: rgba(255, 255, 255, 0.5)
}

input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]::-webkit-file-upload-button,
button {
	-webkit-appearance: none;
	border: 0px;
	border-radius: 5px;
	padding: 0.1em 1em 0.2em 1em;
	font-size: 100%;
	background-color: #324050;
	color: white;
	box-shadow: 1px 1px 1px silver
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="file"]::-webkit-file-upload-button:hover,
button:hover {
	background-color: #4b9ad9;
	color: white
}

a.select {
	text-indent: -48px;
	overflow: hidden;
	width: 20px;
	display: inline-block
}

a.select::after {
	content: '\00A0→'
}

[schuer]

Hey @mbodon, ich habe deinen Beitrag bearbeitet, um die Formatierung anzupassen. Hoffe, das ist okay :)

[alxndr-w]

@mbodon finde ich gut! Kannst du noch einen Screenshot beifügen, damit wir uns ein Bild davon machen können?

[mbodon]

Klar, anbei 2 Screenshots - wäre natürlich schön wenn die nicht im Internet landen ... ;-)

[alxndr-w]

@mbodon zu spät, dafür hast du gerade selbst gesorgt - deine Mail wird automatisch von GitHub gepostet, wenn du auf die Benachrichtigung antwortest. (Ich hab die Links wieder rausgenommen)

[gharlan]

Wobei mich das Aussehen auch interessieren würde!

[gharlan]

Hab es selbst mal eingebunden:

Ich finde, Adminer darf ruhig so aussehen, wie Adminer aussieht, und finde es für den Zweck schön schlicht.
Also ich bevorzuge somit, beim Adminer-Original-Design zu bleiben.
Habe aber auch kein Problem damit, überstimmt zu werden.

[alxndr-w]

falls in dem Zuge gefixt wird, dass überlange Tabellennamen beim hovern anfangen zu springen, wäre ich für die geänderte Fassung ;)

[mbodon]

Hi, ich wollte ja nur den CSS-Code weitergeben. Was ihr damit macht bleibt euch überlassen ...
Ich kann ja die CSS-Datei (die als adminer.css im Ordner redaxo liegen sollte) wenn ich die brauche ja immer händisch hochladen ...

[staabm]

falls in dem Zuge gefixt wird, dass überlange Tabellennamen beim hovern anfangen zu springen, wäre ich für die geänderte Fassung ;)

falls das ein bug im adminer theme ist, kann man da sicher auch nen bugfix beisteuern..
-> https://github.com/vrana/adminer

[tbaddade]

falls das ein bug im adminer theme ist

Im Original Adminertheme werden auf hover die kompletten Tabellennamen angezeigt. Ist für mich aber kein Fehler.

[alxndr-w]

Im Original Adminertheme werden auf hover die kompletten Tabellennamen angezeigt. Ist für mich aber kein Fehler.

Da wird noch nebenbei auf fett oder so umgestellt und es gibt dann Fälle, wo man den Datenbanknamen nicht richtig anklicken kann.

[IngoWinter]

bitte beim original design bleiben, das "redaxo" design finde ich wesentlich unübersichtlicher. bei mir spring auch nix auf :hover.

[gharlan]

Gut, dann schließe ich hier nun. Trotzdem danke @mbodon für das Bereitstellen der Styles!