/*! * ADMINER DARK THEME — v1.0 * Custom CSS theme for Adminer (https://www.adminer.org/) * Author: Michael Grznár * Repository: https://github.com/MichaelGrznar/adminer-dark-css * * Description: * A minimalist dark mode theme for Adminer. No layout or HTML changes – just colors. * Fully compatible with Adminer version 5.3 and above. * * Based on: * Adminer by Jakub Vrána – https://github.com/vrana/adminer * Licensed under the Apache License 2.0 – https://www.apache.org/licenses/LICENSE-2.0 * * License: * This theme is licensed under the Apache License 2.0. * You may freely use, modify, and distribute this file under the terms of that license. */ /* ========================================================================== BASIC LAYOUT AND TYPOGRAPHY ========================================================================== */ /* Basic page settings */ html, body { background-color: #1e1f22; color: #b5b5b5; margin: 0; padding: 0; min-height: 100vh; } body { background-color: #1e1f22 !important; } /* Headings */ h1 { background: transparent; border-bottom: 1px solid #999; color: #777; font-size: 150%; font-weight: normal; margin: 0; padding: 0.8em 0.667em; } h2 { background: #2b2d30; font-size: 150%; font-weight: normal; margin: 0 0 20px -18px; padding: 0.8em 1em; color: #fff; } h3 { color: #af8d57; font-size: 130%; font-weight: normal; margin: 1em 0 0; } /* ========================================================================== LINKS AND NAVIGATION ========================================================================== */ /* Basic link styling */ a { color: #b5b5b5; } a:visited { color: #b5b5b5; } /* Active elements */ .active { color: #af8d57 !important; font-weight: bold; } /* Navigation elements */ #logins a, #tables a, #tables span { background: transparent; } /* JUSH syntax highlighting links */ .jush a { color: #448dd0; } /* ========================================================================== BUTTONS AND FORM ELEMENTS ========================================================================== */ /* Button styling */ button, input[type="submit"], input[type="button"], input[type="reset"] { background-color: #3574f0 !important; color: white !important; border: none !important; padding: 3px 16px; cursor: pointer; border-radius: 4px; } button:hover, input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover { background-color: #2559cc !important; } /* ========================================================================== LAYOUT COMPONENTS ========================================================================== */ /* Main menu */ #menu { background-color: #2b2d30; } /* Breadcrumb navigation */ #breadcrumb { background: #2b2d30; height: 2em; left: 21em; line-height: 1.8em; margin: 0 0 0 -18px; padding: 0 1em; position: absolute; top: 0; white-space: nowrap; } /* Logout button */ .logout { background-color: transparent; box-shadow: 0 0 5px 5px transparent; margin-top: 0.5em; position: absolute; right: 0; top: 0; } /* ========================================================================== TABLES AND DATA DISPLAY ========================================================================== */ /* Basic table styling */ table, td, th, .js .column { border-color: #313438; border-style: solid; background: transparent; } /* Table headers */ thead td, thead th { background: #2b2d30; } /* Row alternating background - odd rows (darker) */ tbody tr:nth-child(odd), table tr:nth-child(odd) { background-color: #1e1f22 !important; } /* Row alternating background - even rows (lighter) */ .odds tbody tr:nth-child(2n), tbody tr:nth-child(even), table tr:nth-child(even) { background-color: #26282e !important; } /* Hover effect for table rows */ table tr:hover { background-color: #3a3d40 !important; } /* Basic styling for rows */ tr { border-color: inherit; display: table-row; unicode-bidi: isolate; vertical-align: inherit; } /* ========================================================================== CODE BLOCKS AND SYNTAX ========================================================================== */ code { background: transparent; font-size: 110%; padding: 1px 2px; } /* ========================================================================== PAGE FOOTER ========================================================================== */ .footer { bottom: 0; box-shadow: 0 -5px 10px 10px #2b2d30; margin: 23px -20px 0.5em 0; position: sticky; } .footer > div { background: #2b2d30; padding: 0 0 0.5em; }