Adminer is a free and opensource tool to connect to and view your database. Setting up themes is easy. Check the docker-compose file to see how themes can be integrated.
First clone this gist or copy it's contents. Than run:
docker-compose up
Next go to localhost:8080 and login.
| Field | Value |
|---|---|
| System | PostgreSQL |
| Server | db |
| Username | user |
| Password | password |
| Database | mydatabase |
| /* | |
| * Dark Theme by Pepa Linha [http://webdream.cz] | |
| * @version 2.0.1 | |
| */ | |
| :root { | |
| /* Base colors */ | |
| --color-white: #fff; | |
| --color-green: #5df1dc; | |
| --color-green-dark: #0d3a33; | |
| --color-orange: #ffb978; | |
| --color-blue: #8fc3f7; | |
| --color-blue-light: #c4d3f5; | |
| --color-purple: #a1a6e0; | |
| --color-purple-600: #797998; | |
| --color-purple-700: #4b4c68; | |
| --color-purple-800: #312f42; | |
| --color-purple-900: #2e2c3e; | |
| --color-purple-1000: #2a2838; | |
| --color-red: #e44747; | |
| --color-black: #000; | |
| /* Background, borders, highlights and text */ | |
| --color-background: var(--color-purple-800); | |
| --color-background-shade: var(--color-purple-900); | |
| --color-highlight: rgba(255, 255, 255, 0.03); | |
| --color-highlight-2: rgba(255, 255, 255, 0.05); | |
| --color-text: var(--color-white); | |
| --color-text-muted: rgba(255, 255, 255, 0.45); | |
| --color-text-highlight: var(--color-green); | |
| --color-text-highlight-alternative: var(--color-orange); | |
| --color-border: var(--color-purple-1000); | |
| /* Links */ | |
| --color-link: var(--color-blue); | |
| --color-link-hover: var(--color-green); | |
| --color-link-light: var(--color-blue-light); | |
| --color-link-light-hover: var(--color-white); | |
| /* Tables */ | |
| --color-table-head: var(--color-purple-1000); | |
| --color-table-head-text: var(--color-purple); | |
| --color-table-row-odd: rgba(173, 173, 173, 0.02); | |
| --color-table-row-hover: var(--color-purple-900); | |
| --color-table-row-checked: var(--color-purple-1000); | |
| --color-table-row-checked-highlight: var(--color-green); | |
| --shadow-table: 0 8px 40px rgba(0, 0, 0, 0.1); | |
| /* Errors */ | |
| --color-error: var(--color-red); | |
| --color-error-text: var(--color-white); | |
| --shadow-error: 0 10px 30px rgba(228, 71, 71, 0.1); | |
| /* Tooltip */ | |
| --color-tooltip: var(--color-purple-1000); | |
| --shadow-tooltip: 0 2px 12px rgba(0, 0, 0, 0.1); | |
| /* Inputs */ | |
| --color-input-background: var(--color-highlight); | |
| --color-input-focus-background: var(--color-highlight-2); | |
| --color-input-text: var(--color-white); | |
| --color-input-border: rgba(255, 255, 255, 0.08); | |
| --color-input-checked: var(--color-white); | |
| --color-input-checked-text: var(--color-green-dark); | |
| /* Buttons */ | |
| --color-button-background: var(--color-green); | |
| --color-button-text: var(--color-green-dark); | |
| --color-button-disabled-background: rgba(0, 0, 0, 0.13); | |
| --color-button-disabled-text: rgba(255, 255, 255, 0.2); | |
| --shadow-button: 0 3px 20px 0 rgba(93, 241, 220, 0.06); | |
| --shadow-button-hover: 0 3px 25px 1px rgba(93, 241, 220, 0.12); | |
| /* Jush - SQL queries */ | |
| --color-jush-text: var(--color-white); | |
| --color-jush-keyword: var(--color-green); | |
| --color-jush-string: var(--color-orange); | |
| --color-jush-number: var(--color-white); | |
| /* Schema */ | |
| --color-schema-join-border: var(--color-purple-700); | |
| --color-schema-join-border-hover: var(--color-purple-600); | |
| --color-schema-type-primary: var(--color-green); | |
| --color-schema-type-char: var(--color-orange); | |
| --color-schema-type-date: var(--color-orange); | |
| --color-schema-type-enum: var(--color-orange); | |
| --color-schema-type-binary: var(--color-orange); | |
| /* UI radius */ | |
| --ui-radius: 2px; | |
| --ui-checkbox-radius: var(--ui-radius); | |
| --ui-radio-radius: 10px; | |
| /* UI sizes */ | |
| --ui-sidebar-width: 370px; | |
| --ui-content-spacing: 60px; | |
| } | |
| html, | |
| body { | |
| height: 100%; | |
| } | |
| body { | |
| font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif; | |
| background: var(--color-background); | |
| color: var(--color-text); | |
| width: auto; | |
| } | |
| h1 { | |
| margin: 0; | |
| padding: 0; | |
| background: none; | |
| border: 0; | |
| } | |
| h2 { | |
| margin: 0 0 40px; | |
| padding: 0 0 6px; | |
| background: none; | |
| border: 0; | |
| font-family: "Segoe UI Light", "Segoe UI", "HelveticaNeue-Thin", Arial, sans-serif; | |
| font-size: 46px; | |
| font-weight: normal; | |
| color: inherit; | |
| } | |
| .rtl h2 { | |
| margin: 0 0 40px; | |
| } | |
| h3 { | |
| font-size: 15px; | |
| margin: 60px 0 30px; | |
| padding: 0 0 6px; | |
| letter-spacing: 2px; | |
| font-weight: bold; | |
| color: var(--color-text-highlight); | |
| text-transform: uppercase; | |
| } | |
| p { | |
| margin: 0 0 15px; | |
| } | |
| a, | |
| a:visited { | |
| color: var(--color-link); | |
| text-decoration: none; | |
| } | |
| a:link:hover, | |
| a:visited:hover { | |
| color: var(--color-link-hover); | |
| text-decoration: underline; | |
| } | |
| /* otravuje pri prochazeni formulare klavesama */ | |
| a[href*="charsets"] { | |
| display: none; | |
| } | |
| table { | |
| background: var(--color-background); | |
| border: 0; | |
| margin: 15px 0 0; | |
| } | |
| th, | |
| td { | |
| border: 0; | |
| padding: 16px; | |
| font-size: 16px; | |
| color: var(--color-text); | |
| } | |
| th { | |
| background: none; | |
| color: var(--color-table-head-text); | |
| font-weight: normal; | |
| font-size: 16px; | |
| } | |
| tbody tr:hover td, | |
| tbody tr:hover th { | |
| background: var(--color-table-row-hover); | |
| } | |
| table:not(.checkable) th { | |
| min-width: 120px; | |
| } | |
| thead td, | |
| thead th { | |
| background: var(--color-table-head); | |
| padding: 0.2em 0.5em; | |
| text-align: left; | |
| } | |
| thead td, | |
| thead td a, | |
| thead td a:link:hover, | |
| thead td a:visited, | |
| thead td a:visited:hover, | |
| thead th, | |
| thead th a, | |
| thead th a:link:hover, | |
| thead th a:visited, | |
| thead th a:visited:hover { | |
| color: var(--color-table-head-text); | |
| font-weight: bold; | |
| padding: 16px; | |
| } | |
| #content .links + p { | |
| color: var(--color-text-highlight-alternative); | |
| } | |
| table.checkable, | |
| p.links + table, | |
| pre + table, | |
| #edit-fields, | |
| p + table, | |
| h3 + table, | |
| .scrollable table { | |
| border: 1px solid var(--color-border); | |
| margin-bottom: 40px; | |
| box-shadow: var(--shadow-table); | |
| } | |
| .checkable tbody tr:hover td, | |
| .checkable tbody tr:hover th { | |
| background: var(--color-table-row-hover); | |
| } | |
| .js .checkable .checked td, | |
| .js .checkable .checked th { | |
| background: var(--color-table-row-checked); | |
| } | |
| .checkable .checked td:first-child { | |
| box-shadow: inset 2px 0 0 var(--color-table-row-checked-highlight); | |
| } | |
| .odd th, | |
| .odd td { | |
| background: var(--color-table-row-odd); | |
| } | |
| fieldset { | |
| display: inline-block; | |
| padding: 5px 0 15px; | |
| margin: 0 30px 15px 0; | |
| border: 0; | |
| } | |
| fieldset select { | |
| margin-right: 15px; | |
| } | |
| fieldset input[type="button"], | |
| fieldset input[type="submit"], | |
| fieldset p { | |
| margin-bottom: 0; | |
| } | |
| fieldset div p { | |
| margin-top: 10px; | |
| } | |
| #fieldset-select > div, | |
| #fieldset-search > div, | |
| #fieldset-sort > div { | |
| margin-bottom: 15px; | |
| } | |
| legend { | |
| display: inline-block; | |
| padding: 10px 0; | |
| margin: 0; | |
| color: var(--color-text); | |
| font-family: "Segoe UI Semibold", "Segoe UI", "Helvetica Neue", Arial, | |
| sans-serif; | |
| font-weight: bold; | |
| text-transform: uppercase; | |
| } | |
| legend a, | |
| legend a:link:hover { | |
| color: inherit; | |
| text-decoration: underline; | |
| } | |
| code { | |
| background: none; | |
| } | |
| p code, | |
| pre code, | |
| pre[contenteditable="true"] { | |
| padding: 10px 15px; | |
| display: block; | |
| font-size: 17px; | |
| margin-bottom: 15px; | |
| } | |
| p code + a, | |
| p code + a:link:hover, | |
| p code + a:visited:hover { | |
| margin-left: 15px; | |
| position: relative; | |
| top: -20px; | |
| color: var(--color-black); | |
| font-size: 12px; | |
| text-decoration: underline; | |
| text-transform: lowercase; | |
| } | |
| #content { | |
| margin: 0 var(--ui-content-spacing) 0 calc(var(--ui-sidebar-width) + var(--ui-content-spacing)); | |
| padding: 25px 0 0; | |
| } | |
| #content > p { | |
| color: inherit; | |
| margin-bottom: 15px; | |
| } | |
| #content > p + form { | |
| margin-top: 40px; | |
| } | |
| .rtl #content { | |
| margin: 0 430px 0 54px; | |
| padding: 50px 0 0; | |
| } | |
| #menu { | |
| width: var(--ui-sidebar-width); | |
| border-right: 1px solid var(--color-border); | |
| margin: 0; | |
| top: 0; | |
| background: var(--color-background-shade); | |
| bottom: 0; | |
| position: fixed; | |
| padding: 25px; | |
| box-sizing: border-box; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| #menu h1 { | |
| background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD0AAAA0CAIAAAC2D6d2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5RUExMDNBRjUxRjYxMUU2ODAzQUNDMzMyNDgwMjFBRCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5RUExMDNCMDUxRjYxMUU2ODAzQUNDMzMyNDgwMjFBRCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjlFQTEwM0FENTFGNjExRTY4MDNBQ0MzMzI0ODAyMUFEIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjlFQTEwM0FFNTFGNjExRTY4MDNBQ0MzMzI0ODAyMUFEIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+hhRj+QAABj5JREFUeNrsWmtMWlccvzwU34i8xIqKomKdL3zQznXVNGvXdd2SJf3SZNk+Lfu2ZF2yT+0e/bQs274u+7I1+7Ks2bKsWx/r6uzarqVWtDArDgQrFhRUQEEFBfe7XgqU8vABbUk4Obnee7mc8zu/8z+/3/lfpDU/9yKRhoVOpGdJV9zMJ0oSjba1L0jlxM9fBs7feJ+YHCW8y+nGNwZw5wIhP5yecfLdhxR02pPUky3HSbCw+cTBd4mTBwKX+449G3yDwt634j3gtBFnTxNnrIFLvpj59EEfOxkg8j2C+OtMvCcnNQSx8aS4KQHunJwcTgm7mM2m0WgFhfnURPvX112L7vX1dYfT6bA7l5dXtok4O5f46QJR+fDy1i/xHuaLQ3Fi0oRws1ismpoqSXWltFZSLakUi8tKSwX5BfkJe3e73NPTVpPJbDDe1+uMRsP98fEJj8eTOGSvnQ2cIwC+Ok741xJIYYj4UWZv7wudXW2tbU319TVM5nbCBmOrkUpQe3q7qTtra2tjY+PDQ5o7A8N9fdeik3fl+8D5258Rqgtb6O+Vd6DiNEx3+E10Cba0Wt2UyWI2W0DkgnPR4XCurHhWV1epkMjNzcnKymLlsAoLCzjFbFGZsKxMVC4WyWS1mLGIwbc07Y/UE6xCyBlVDrxJ2EzxUJbXEee/CZyfvkL88TW5RoN+ubjo+v23y/39N1SDdz0eb/wBAz05gIVFm3WWvB4kwoItW97e0tPTfeTVlzCq6NIRBA3m4oMOLx2Hg2ZJ6jf4vnSx7/SnXwB6EkUCoE999MHBQ71J4/tR3KR+Jx00NYGffPx59M8QzYBLFUT5Q+uO0ZA95n7w5KkTm9GNrS5W8B3zY3C871jIuk/8SNCZMR2nuYesYWQH4oTSsl/PXbra/89m4jtOoeJ7f8/zrx09RHERJU5i6bfidWLZGVN5sBim/ovEHSwQDb3eCBWbMj0wP5iGnjidCw7ngtfjXVpahtqQa5nJzMvLzWZlF7OL2OwiyHzZrtJy8S4oqVQqgdQk0JOYfvltFL9U94fOwXo47qNHjnd3Kzo6W9vkzVwuZ4cRMjs7P3B7SKkcvK1Unb/4Q2Lc1EplC6KbfBy+w5uGGDc2ykjjlFSKRAKhUMAXcGP5Eei3WedmZqwWi9VoJG1yZERrMc8EH7irubop3DvPd9Ar6p+Xr4ZGRqNB1PIL8hh0RlFRIe4sLCz6/D63awmiERFmz1CeBmQAirrzzvzJG2Qmn8/g3ixuOj0l6BkMRmrX5d/XzylvDUJxVYNqg+G+3+/fPg10OjS0SyFXKNo7OlpSh5vUb8hwUKGRp+j1E9pRncEwAb+02mZhmXOz84/rHfSRyyuBWQr4PPhldXWVrAH770qkdkF1R7Ph+p1k3HsVL7fJm8AQEp/6emnU+cUGZs3no7aNkHMmgxF1K+bz+cbG9JRfDqk0N5UXU4SbpBkbjxvXb6NSWSa5zaitlkgqSC4FvFKRsKSEQ6HEbiT4Ta93dX7ejtmwzthwNBon9ToDNjaJM8tU+A56VavvoUbZmubnUVMBUt3upbR5r/nUsWZ8J4N7O7jDVSKJJUXNhvQbBqnV6pS3VAMDKo16dCdbVkh7c8vuzk65Yo9cJquFfabQd+x2B4dTHLxlMpnH9caJiUmossUyY7POztsdyBLgf1B6PIDkEkaITKKEU8wX8EQiIZS+qqqiRioRi8uC7UDdIfwpxN3W0tuwu66rq629vaWhoY7H524/ubTN3bs3plSqkFzqdIZhdX8KcUc0De5lMiksEywKhXwwyuOVIENjkSV7w5u8sCeEE1JgzMbMhl/CLLVaPaYuvKmI/DK1voO+b968g5rRwQzuDO6nhxtb7VQ0DTlPrV/ij9k8PTAwhPzyX83otlNMmBGSy92N9cgvu7rkUE/i0feaycSNJCAin19ZWQF05C9TJjPGMzdnhzL6fX7q9RqZqG+8cKMz6EAmKhXyBVzkRFKp5PEfdzB+mFpKcO/dcxg22dra2NzcWFdfs/PNEIY3ptWr1SPDwyOqwbsulzsluCN+nweF1eTL2IqKinLSLPlcdjEbu6Xs7Cwk6jhSmSXmBEeXy+WwO222OVjm5OQUpsgwPgETfQLrkpam/6f0vwADAALI/0xX+g1fAAAAAElFTkSuQmCC") | |
| left top no-repeat; | |
| line-height: 50px; | |
| padding: 10px 0 0 50px; | |
| margin: 0 0 15px; | |
| text-transform: lowercase; | |
| } | |
| #menu h1 a { | |
| font-style: normal; | |
| color: var(--color-text); | |
| } | |
| #menu h1 .version { | |
| color: var(--color-text-highlight); | |
| } | |
| #menu p { | |
| border: 0; | |
| padding: 0; | |
| } | |
| #menu #dbs { | |
| padding: 0; | |
| border-bottom: 0; | |
| box-sizing: border-box; | |
| color: transparent; | |
| font-size: 0; | |
| } | |
| #menu #dbs span { | |
| visibility: hidden; | |
| } | |
| #menu #dbs select { | |
| outline: 0; | |
| width: 100%; | |
| } | |
| #menu p.links { | |
| margin: 15px -8px; | |
| border: 0; | |
| text-align: center; | |
| display: flex; | |
| flex-wrap: wrap; | |
| } | |
| #menu p.links a { | |
| padding: 8px; | |
| margin: 0; | |
| font-size: 12px; | |
| color: var(--color-link); | |
| } | |
| #menu p.links a:hover { | |
| color: var(--color-link-hover); | |
| } | |
| #menu p.links a.active { | |
| font-weight: bold; | |
| color: var(--color-text); | |
| } | |
| #content p.links { | |
| margin: -10px 0 15px -16px; | |
| } | |
| #content p.links a { | |
| padding: 16px; | |
| margin: 0; | |
| display: table-cell; | |
| color: var(--color-link); | |
| } | |
| #content p.links a:last-child { | |
| border-width: 1px; | |
| border-top-right-radius: 50px; | |
| border-bottom-right-radius: 50px; | |
| padding-right: 24px; | |
| } | |
| #content p.links a:hover { | |
| color: var(--color-link-hover); | |
| } | |
| #content p.links a.active { | |
| font-weight: normal; | |
| background: var(--color-highlight); | |
| color: var(--color-text); | |
| } | |
| #menu p, | |
| #tables { | |
| border-bottom: 0; | |
| } | |
| #tables { | |
| padding: 0; | |
| margin: 0 -15px; | |
| flex: 1; | |
| overflow: hidden !important; | |
| overflow-y: auto !important; | |
| } | |
| #tables::-webkit-scrollbar { | |
| background: transparent; | |
| width: 6px; | |
| } | |
| #tables::-webkit-scrollbar-button { | |
| background: transparent; | |
| } | |
| #tables::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| #tables::-webkit-scrollbar-track-piece { | |
| background: transparent; | |
| } | |
| #tables::-webkit-scrollbar-thumb { | |
| background: var(--color-highlight); | |
| border-radius: 10px; | |
| } | |
| #tables::-webkit-scrollbar-corner { | |
| background: transparent; | |
| } | |
| #tables::-webkit-resizer { | |
| background: transparent; | |
| } | |
| .rtl #tables { | |
| overflow: hidden !important; | |
| overflow-y: auto !important; | |
| } | |
| #tables li { | |
| display: flex; | |
| } | |
| #tables a { | |
| padding: 6px 15px; | |
| } | |
| #tables a:nth-child(2) { | |
| flex: 1; | |
| order: -1; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| } | |
| .rtl #tables a:first-child, | |
| .rtl #tables br + a { | |
| display: block; | |
| margin-left: 15px; | |
| } | |
| #tables a { | |
| color: var(--color-link-light); | |
| } | |
| #tables a:hover, | |
| #tables a:hover + a { | |
| color: var(--color-link-light-hover); | |
| } | |
| #tables a.active, | |
| #tables a.active + a { | |
| color: var(--color-text-highlight); | |
| } | |
| #tables br { | |
| display: none; | |
| } | |
| .js .column { | |
| background: var(--color-table-head-text); | |
| border-radius: var(--ui-radius); | |
| padding: 2px; | |
| } | |
| .js .column:not(.hidden) { | |
| display: inline-flex; | |
| overflow: hidden; | |
| } | |
| .js .column a, | |
| .js .column a:hover { | |
| color: var(--color-table-head); | |
| padding: 0; | |
| width: 24px; | |
| height: 24px; | |
| display: inline-flex; | |
| justify-content: center; | |
| text-indent: -4px; /* remove space in code */ | |
| } | |
| .js .column a:hover { | |
| background: var(--color-table-head); | |
| color: var(--color-table-head-text); | |
| text-decoration: none; | |
| } | |
| #breadcrumb { | |
| margin: 0 !important; | |
| position: static; | |
| background: none; | |
| padding: 0 0 0; | |
| font-size: 12px; | |
| } | |
| #breadcrumb a { | |
| color: var(--color-link-light); | |
| } | |
| #breadcrumb, | |
| #breadcrumb a:hover { | |
| color: var(--color-link-light-hover); | |
| } | |
| .rtl #breadcrumb { | |
| margin: 0; | |
| padding: 25px 0 0; | |
| right: 430px; | |
| } | |
| .logout, | |
| .rtl .logout { | |
| top: 30px; | |
| right: var(--ui-content-spacing); | |
| margin: 0; | |
| } | |
| .rtl .logout { | |
| right: auto; | |
| left: var(--ui-content-spacing); | |
| } | |
| .logout input { | |
| margin: 0 !important; | |
| } | |
| select { | |
| box-sizing: border-box; | |
| margin: 0; | |
| border: 0; | |
| padding: 12px 40px 12px 16px; | |
| font-size: 16px; | |
| color: var(--color-input-text); | |
| background: var(--color-input-background) | |
| url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAGCAYAAADdXo4uAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5RUExMDNCMzUxRjYxMUU2ODAzQUNDMzMyNDgwMjFBRCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5RUExMDNCNDUxRjYxMUU2ODAzQUNDMzMyNDgwMjFBRCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjlFQTEwM0IxNTFGNjExRTY4MDNBQ0MzMzI0ODAyMUFEIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjlFQTEwM0IyNTFGNjExRTY4MDNBQ0MzMzI0ODAyMUFEIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+DQ1DzgAAAHlJREFUeNqs0NEGgDAYBeBTD7EY9RApddN9eu1uIrqOSHTVS/R3xh+REu3wse2M3wYRqSkhPHBd89J/EgJYKCOLe6x2M37GDRppooLMpTN6NumdXwncszQpxdTqvqKVBnjIdVBAOUW636gn8T3o/MpS1x3t8JRDgAEAnFdl2d2gogIAAAAASUVORK5CYII=") | |
| right center no-repeat; | |
| -webkit-appearance: none; | |
| outline: 0; | |
| display: inline-block; | |
| width: auto; | |
| vertical-align: middle; | |
| transition: background 0.24s; | |
| border-radius: var(--ui-radius); | |
| } | |
| option { | |
| color: var(--color-black); | |
| } | |
| .layout .function select { | |
| min-width: 140px; | |
| } | |
| input:not([type]), | |
| input[type="color"], | |
| input[type="email"], | |
| input[type="number"], | |
| input[type="password"], | |
| input[type="tel"], | |
| input[type="url"], | |
| input[type="text"], | |
| input[type="search"], | |
| textarea { | |
| border: 0; | |
| padding: 12px 16px; | |
| margin: 0; | |
| box-sizing: border-box; | |
| font-size: 16px; | |
| color: var(--color-input-text); | |
| background: var(--color-input-background); | |
| border-radius: var(--ui-radius); | |
| transition: background 0.24s; | |
| vertical-align: middle; | |
| } | |
| input:not([type]):focus, | |
| input[type="color"]:focus, | |
| input[type="email"]:focus, | |
| input[type="number"]:focus, | |
| input[type="password"]:focus, | |
| input[type="tel"]:focus, | |
| input[type="url"]:focus, | |
| input[type="text"]:focus, | |
| input[type="search"]:focus, | |
| textarea:focus, | |
| select:focus { | |
| outline: 0; | |
| background-color: var(--color-input-focus-background); | |
| } | |
| table:not(#table) input:not([type]), | |
| table:not(#table) input[type="color"], | |
| table:not(#table) input[type="email"], | |
| table:not(#table) input[type="number"], | |
| table:not(#table) input[type="password"], | |
| table:not(#table) input[type="tel"], | |
| table:not(#table) input[type="url"], | |
| table:not(#table) input[type="text"], | |
| table:not(#table) input[type="search"] { | |
| min-width: 280px; | |
| } | |
| input[type="submit"], | |
| input[type="button"] { | |
| border: 0; | |
| padding: 0 40px; | |
| cursor: pointer; | |
| outline: 0; | |
| background: var(--color-button-background); | |
| color: var(--color-button-text); | |
| font-weight: bold; | |
| transition: background 0.4s ease; | |
| font-size: 12px; | |
| border-radius: var(--ui-radius); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| line-height: 42px; | |
| box-shadow: var(--shadow-button); | |
| } | |
| input[type="submit"]:hover, | |
| input[type="button"]:hover { | |
| box-shadow: var(--shadow-button-hover); | |
| } | |
| input[type="submit"][disabled], | |
| input[type="button"][disabled], | |
| input[type="submit"][disabled]:hover, | |
| input[type="button"][disabled]:hover { | |
| background: var(--color-button-disabled-background) !important; | |
| color: var(--color-button-disabled-text); | |
| cursor: not-allowed; | |
| box-shadow: none; | |
| transition: none; | |
| } | |
| .logout input[type="submit"] { | |
| color: var(--color-link); | |
| background: transparent; | |
| box-shadow: none; | |
| } | |
| .logout input[type="submit"]:hover { | |
| color: var(--color-link-hover); | |
| box-shadow: none; | |
| } | |
| input[type="checkbox"], | |
| input[type="radio"] { | |
| width: 18px; | |
| height: 18px; | |
| background: transparent; | |
| border: 2px solid var(--color-input-border); | |
| border-radius: var(--ui-checkbox-radius); | |
| -webkit-appearance: none; | |
| cursor: pointer; | |
| position: relative; | |
| margin: 3px 6px; | |
| transition: border-color 0.24s; | |
| } | |
| input[type="checkbox"]:focus, | |
| input[type="radio"]:focus { | |
| outline: 0; | |
| border-color: var(--color-input-checked); | |
| } | |
| input[type="radio"] { | |
| border-radius: var(--ui-radio-radius); | |
| } | |
| input[type="checkbox"]:checked, | |
| input[type="radio"]:checked { | |
| background-color: var(--color-input-checked); | |
| border-color: var(--color-input-checked); | |
| } | |
| input[type="checkbox"]:checked::before, | |
| input[type="radio"]:checked::before { | |
| content: "✔"; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--color-input-checked-text); | |
| font-size: 13px; | |
| } | |
| .icon, | |
| .icon:hover { | |
| border-radius: var(--ui-radius); | |
| background-color: var(--color-button-text); | |
| opacity: 0.6; | |
| } | |
| .icon:hover { | |
| opacity: 1; | |
| } | |
| #help { | |
| background-color: var(--color-tooltip); | |
| border: 0; | |
| border-radius: var(--ui-radius); | |
| box-shadow: var(--shadow-tooltip); | |
| } | |
| label { | |
| cursor: pointer; | |
| margin-right: 6px; | |
| } | |
| label.block { | |
| display: flex; | |
| align-items: center; | |
| } | |
| *[align="right"] > label.block { | |
| justify-content: flex-end; | |
| } | |
| .error, | |
| .message { | |
| margin: 0 0 45px; | |
| font-size: 20px; | |
| border-radius: var(--ui-radius); | |
| } | |
| .error { | |
| color: var(--color-error-text); | |
| background: var(--color-error); | |
| box-shadow: var(--shadow-error); | |
| } | |
| .error b { | |
| background: inherit; | |
| font-weight: bold; | |
| } | |
| #logins a, | |
| #tables a, | |
| #tables span { | |
| background: none; | |
| } | |
| form p input { | |
| margin-right: 10px; | |
| } | |
| form p label { | |
| display: inline-flex; | |
| vertical-align: middle; | |
| align-items: center; | |
| color: var(--color-text); | |
| margin: 0 8px; | |
| } | |
| #form > p { | |
| color: var(--color-text); | |
| margin-bottom: 15px; | |
| } | |
| .size { | |
| width: 80px; | |
| } | |
| #schema .table { | |
| padding: 6px; | |
| background: var(--color-background); | |
| border: 1px solid var(--color-border); | |
| box-shadow: var(--shadow-table); | |
| } | |
| #schema .table a { | |
| display: block; | |
| margin: -6px -6px 6px; | |
| padding: 12px; | |
| background: var(--color-table-head); | |
| color: var(--color-table-head-text); | |
| } | |
| #schema .table br { | |
| display: none; | |
| } | |
| #schema .table span { | |
| display: block; | |
| padding: 3px 6px; | |
| } | |
| #schema .references div { | |
| border-color: var(--color-schema-join-border) !important; | |
| } | |
| #schema .table:hover .references div { | |
| border-color: var(--color-schema-join-border-hover) !important; | |
| } | |
| #schema .table i span { | |
| color: var(--color-schema-type-primary); | |
| font-style: normal; | |
| } | |
| .char { | |
| color: var(--color-schema-type-char); | |
| } | |
| .date { | |
| color: var(--color-schema-type-date); | |
| } | |
| .enum { | |
| color: var(--color-schema-type-enum); | |
| } | |
| .binary { | |
| color: var(--color-schema-type-binary); | |
| } | |
| #lang { | |
| position: fixed; | |
| top: 57px; | |
| right: 100%; | |
| z-index: 10; | |
| margin-right: calc(-1 * var(--ui-sidebar-width) + 25px); | |
| line-height: normal; | |
| padding: 0; | |
| left: auto; | |
| font-size: 0; | |
| } | |
| #lang select { | |
| font-size: 12px; | |
| padding: 0; | |
| text-align: right; | |
| border: 0; | |
| background: none; | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| appearance: none; | |
| cursor: pointer; | |
| outline: 0; | |
| width: 80px; | |
| text-align: right; | |
| text-align-last: right; | |
| } | |
| #lang select option { | |
| text-align: right; | |
| } | |
| .rtl #lang { | |
| margin-right: 0; | |
| left: 100%; | |
| margin-left: -261px; | |
| right: auto; | |
| } | |
| .message { | |
| color: var(--color-text); | |
| background: var(--color-highlight); | |
| font-size: 26px; | |
| } | |
| .sqlarea { | |
| width: 100%; | |
| } | |
| .sqlarea.jush { | |
| border: 0 !important; | |
| padding: 12px 16px !important; | |
| margin: 0; | |
| box-sizing: border-box; | |
| font-size: 16px; | |
| background: var(--color-highlight-2); | |
| color: var(--color-jush-text); | |
| border-radius: var(--ui-radius); | |
| transition: background 0.24s; | |
| outline: 0 !important; | |
| } | |
| .jush { | |
| color: var(--color-jush-text); | |
| } | |
| .jush a { | |
| color: var(--color-jush-keyword); | |
| } | |
| .jush-sql a, | |
| .jush-sql_code a, | |
| .jush-sqlite a, | |
| .jush-pgsql a, | |
| .jush-mssql a, | |
| .jush-oracle a, | |
| .jush-simpledb a { | |
| font-weight: normal; | |
| } | |
| .jush-bac, | |
| .jush-php_bac, | |
| .jush-bra, | |
| .jush-mssql_bra, | |
| .jush-sqlite_quo { | |
| color: var(--color-jush-string); | |
| } | |
| .jush-php_quo, | |
| .jush-quo, | |
| .jush-quo_one, | |
| .jush-php_eot, | |
| .jush-apo, | |
| .jush-sql_apo, | |
| .jush-sqlite_apo, | |
| .jush-sql_quo, | |
| .jush-sql_eot { | |
| color: var(--color-jush-string); | |
| } | |
| .jush-num, | |
| .jush-clr { | |
| color: var(--color-jush-number); | |
| } | |
| .jush-sql + .time { | |
| padding-left: 15px; | |
| color: var(--color-text-muted); | |
| font-size: 14px; | |
| } | |
| .jush-sql + .time + a { | |
| margin-left: 5px; | |
| } | |
| .footer { | |
| border-top: none; | |
| margin-right: calc(-1 * var(--ui-content-spacing)); | |
| } | |
| .footer > div { | |
| margin-left: calc(-1 * var(--ui-content-spacing)); | |
| background: var(--color-background-shade); | |
| border-top: 1px solid var(--color-border); | |
| padding: 12px 0 12px var(--ui-content-spacing); | |
| } | |
| .footer + div { | |
| margin-left: calc(-1 * var(--ui-content-spacing)); | |
| padding: 12px 0 12px var(--ui-content-spacing); | |
| background: var(--color-background-shade); | |
| margin-right: calc(-1 * var(--ui-content-spacing)); | |
| } | |
| .footer fieldset { | |
| margin-bottom: 0; | |
| padding-bottom: 0; | |
| } | |
| @media print { | |
| .logout { | |
| display: none; | |
| } | |
| #breadcrumb { | |
| position: static; | |
| } | |
| #content { | |
| margin: 0; | |
| } | |
| } |
| version: "3.9" | |
| services: | |
| db: | |
| image: postgres:16.0 | |
| environment: | |
| POSTGRES_USER: user | |
| POSTGRES_PASSWORD: password | |
| POSTGRES_DB: mydatabase | |
| volumes: | |
| - db_data:/var/lib/postgresql/data | |
| ports: | |
| - "5432:5432" | |
| restart: unless-stopped | |
| networks: | |
| - app_network | |
| db_adminer: | |
| image: adminer | |
| depends_on: | |
| - db | |
| ports: | |
| - "8080:8080" | |
| volumes: | |
| - ./adminer.css:/var/www/html/adminer.css | |
| networks: | |
| - app_network | |
| volumes: | |
| db_data: | |
| networks: | |
| app_network: | |
| driver: bridge |