Material Theme PhpMyAdmin by mallowigi

/* ==UserStyle==
@name         Material Theme PhpMyAdmin
@version      20220930.13.25
@namespace    userstyles.world/user/mallowigi
@description  Material Theme for PHPMyAdmin (needs Material Root)
@author       mallowigi
@license      MIT
==/UserStyle== */

@-moz-document regexp(".*phpmyadmin.*") {
html,
body {
  font-family: var(--mat-font)
}

body {
  background: var(--mat-bg);
  color: var(--mat-fg);
}


code {
  font-family: var(--mat-mono);
}

table {
  box-shadow: 0 2px 6px 0 var(--mat-contrast);
}

input[type="checkbox"],
input[type="radio"] {
  vertical-align: middle;
}

button {
  background: var(--mat-button);
  color: var(--mat-primary);
  text-transform: uppercase;
}

div.tools a,
div.tools a:link {
  color: var(--mat-accent) !important;
}

input:not(.form-check-input)[type=checkbox],
input[type=radio] {
  vertical-align: middle;
}

.pma-table label {
  margin-bottom: 0;
}

.checkall_box + label,
a,
a:link {
  color: var(--mat-accent);
}

::selection,
::-webkit-selection,
::-moz-selection {
  background-color: var(--mat-selectBg);
  color: var(--mat-selFg);
}

#topmenu a,
.submenu a {
  color: var(--mat-fg);
  font-weight: normal;
}

#topmenu a:hover,
.submenu a:hover {
  text-shadow: none;
  color: var(--mat-selFg);
}

.database a,
.table a {
  color: var(--mat-primary);
}

ul#topmenu2 a {
  color: var(--mat-primary);
  font-weight: normal;
}

.selectallarrow {
  filter: invert(1);
}


input[type='checkbox'].c-input_checkbox {
  background: var(--mat-bg);
}

input[type='checkbox'][disabled] {
  background: var(--mat-disabled);
  border-color: var(--mat-disabled);
}

input[type='checkbox']:focus {
  outline-color: var(--mat-accent);
}


input[type='checkbox']:not(.c-toggle__input):not(.c-switch__input):not(.p-huddle_switch__input) {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--mat-accent);
  border-radius: 4px;
  box-shadow: none;
  font-size: 2em;
  padding: 0 !important;
  position: relative;
}

input[type='checkbox']:checked {
  background: var(--mat-accent);
}

input[type='checkbox']:after {
  content: '' !important;
  position: absolute !important;
  left: 1px !important;
  top: 5px !important;
  background: var(--mat-bg) !important;
  width: 2px !important;
  height: 2px !important;
  box-shadow: 2px 0 0 var(--mat-bg), 4px 0 0 var(--mat-bg), 4px -2px 0 var(--mat-bg), 4px -4px 0 var(--mat-bg), 4px -6px 0 var(--mat-bg), 4px -8px 0 var(--mat-bg) !important;
  transform: rotate(45deg) !important;
}


.no_touch input[type='checkbox']:hover {
  border-color: transparent;
}


textarea {
  font-family: Menlo, Consolas, 'Fira Code', monospace;
  font-size: 12px;
  background: var(--mat-contrast);
  color: var(--mat-fg);
}

li.fast_filter span {
  color: var(--mat-accent);
}

.pma-table tbody:first-of-type tr:not(.nopointer):hover,
.pma-table tbody:first-of-type tr:not(.nopointer):hover th,
.hover:not(.nopointer),
.pma_table tbody td.hover {
  background: var(--mat-hl);
}

.pma-table caption,
.pma-table th,
.pma-table td {
  text-shadow: none;
}

#serverinfo {
  background: var(--mat-second);
  text-shadow: none;
}

#pma_navigation_collapser {
  background: var(--mat-second);
  border: none;
  color: var(--mat-fg);
  z-index: 0;
}

#pma_navigation_tree li {
  border-left: 2px solid transparent;
}

#pma_navigation_tree li.activePointer {
  background: var(--mat-tree);
  color: var(--mat-selectFg);
  border-left: 2px solid var(--mat-accent);
}

.table-hover .table-active:hover {
  background: var(--mat-hl);
}

ul#topmenu,
ul#topmenu2,
ul.tabs,
#topmenu a,
ul#topmenu > li,
.menucontainer {
  background: var(--mat-second);
  text-shadow: none;
  border: none;
  color: var(--mat-fg);
  margin-top: 0;
}

ul#topmenu > li > a:hover,
ul#topmenu > li > .tabactive {
  background: var(--mat-second);
  text-shadow: 0 0 1px white;
}

ul#topmenu2 a,
ul#topmenu2 a.tab:hover,
ul#topmenu2 a.tabactive {
  background: var(--mat-second);
  border-radius: 0;
  border: none;
  margin-top: 0;
  height: 15px;
}

ul#topmenu2 a.tabactive,
ul#topmenu2 a.tab:hover {
  text-shadow: 0 0 1px var(--mat-second);
}


h2 {
  text-shadow: none;
  color: var(--mat-ttl);
}
.exportoptions h3,
.importoptions h3 {
  border: none;
}

h1.notice,
div.notice,
p.notice,
.ajax_notification {
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--mat-fg);
  background: var(--mat-contrast);
}

#maincontainer,
#page_content {
  background: var(--mat-bg);
  color: var(--mat-fg);
  margin-left: 20px;
  margin-top: 30px;
}

div.tools {
  background: var(--mat-secondBg);
  color: var(--mat-fg);
}

fieldset legend,
fieldset,
.preview_sql,
.tblFooters {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: var(--mat-bg);
  color: var(--mat-fg);
  width: 100%;
  padding-left: 0;
}

fieldset legend {
  font-size: large;
}

.bg-light {
  background-color: var(--mat-bg) !important;
}

.navbar.bg-light {
  background: var(--mat-second) !important;
}

.breadcrumb {
  background: var(--mat-second);
  color: var(--mat-fg);
}

.breadcrumb-item a {
  color: var(--mat-primary);
  margin-left: 8px;
}

.table .thead-light th,
.table .thead th,
table th,
.table th,
.table td,
table tr th,
table tr,
table td,
thead,
div#page_content div#tableslistcontainer table.data,
#div_mysql_charset_collations table th,
#div_mysql_charset_collations table td {
  background: var(--mat-second);
  color: var(--mat-fg);
  text-shadow: none;
  border: none;
  padding: 5px;
}


table tr:nth-child(2n) th,
table tr:nth-child(2n) td {
  background: var(--mat-bg);
}

th {
  font-size: 14px;
  text-align: left;
  border-bottom: 1px solid var(--mat-border);
  font-weight: normal;
}

table tbody:first-of-type tr:not(.nopointer):hover,
table tbody:first-of-type tr:not(.nopointer):hover th,
.hover:not(.nopointer) {
  color: var(--mat-selFg);
}

table {
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.5);
}

td.marked:not(.nomarker),
table tr.marked:not(.nomarker) td,
table tbody:first-of-type tr.marked:not(.nomarker) th,
table tr.marked:not(.nomarker) {
  background: var(--mat-second);
}

.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-gutter,
.CodeMirror-gutters,
.CodeMirror-linenumber {
  border: none;
  font-size: 15px;
}
fieldset fieldset,
#fieldset_add_user_login div.item {
  background: var(--mat-second);
  border: none;
}

div.success,
div.notice,
div.error,
.error {
  border-radius: 0;
  box-shadow: none;
  border: none;
  color: var(--mat-fg);
}
div.success {
  border-left: 5px solid var(--mat-green);
  background: var(--mat-second);
}
div.error {
  border-left: 5px solid var(--mat-error);
  background: var(--mat-second);
}


#pma_navigation_content {
  background: var(--mat-contrast);
  box-shadow: 2px 0 9px 0px var(--mat-border);
  color: var(--mat-fg);
}

#pma_navigation_tree a {
  color: var(--mat-text);
}

#pma_navigation_tree li.selected {
  background: var(--mat-contrast);
}

#full_name_layer {
  background: var(--mat-excluded);
  color: var(--mat-primary);
  border-color: var(--mat-excluded);
}

.group,
.group h2 {
  border: none;
  box-shadow: none;
  text-shadow: none;
  border-radius: 0;
  background: var(--mat-bg);
}

.group h2 {
  color: var(--mat-ttl);
}

#pma_navigation_resizer {
  background: var(--mat-bg);
}

#selflink {
  visibility: hidden;
}

span {
  color: var(--mat-fg);
}

#pma_console .toolbar {
  background: var(--mat-second);
  border: none;
  height: 20px;
  text-transform: uppercase;
}

#pma_console .message .action_content {
  background: var(--mat-button);
  color: var(--mat-fg);
  border: 1px solid var(--mat-border);
}

#pma_console .message .text {
  background: var(--mat-excl);
  color: var(--mat-fg);
}

#pma_console .message .action_content .action {
  font-family: var(--mat-font);
  text-transform: uppercase;
}

#pma_console .message span.action:hover,
#pma_console .toolbar .button:hover,
#pma_console .switch_button:hover,
#pma_console .toolbar .button.active {
  background: var(--mat-second);
}

#pma_console .content {
  background: var(--mat-contrast);
  border: none;
  color: var(--mat-fg);
}

.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-gutter,
.CodeMirror-gutters,
.CodeMirror-linenumber {
  background: var(--mat-contrast);
}

#pma_console .message,
#pma_console .query_input {
  color: var(--mat-fg);
}

select,
select[multiple],
#select_seriesColumn,
#select_valueColumn {
  background: var(--mat-button);
  border: none;
  border-radius: 0;
  height: auto;
  color: var(--mat-fg);
}

#select_seriesColumn[disabled],
#select_valueColumn[disabled] {
  background: var(--mat-disabled);
}

select:focus,
input[type=submit],
input[type=button],
input.button,
input[type=submit]:hover,
input[type=button]:hover,
.exportoptions #buttonGo,
.importoptions #buttonGo {
  height: auto;
  background: var(--mat-button);
  border: none;
  border-radius: 0;
  text-shadow: none;
  color: var(--mat-primary);
  text-transform: uppercase;
}
div#tablefieldscontainer select {
  background: var(--mat-second);
}
#fieldset_user_priv div.item select {
  background: var(--mat-contrast);
  border: none;
  border-radius: 0;
  text-shadow: none;
  color: var(--mat-fg);
  height: auto;
}

.pma_quick_warp .drop_button,
.pma_quick_warp .drop_list:hover .drop_button,
.pma_quick_warp .drop_list li,
.pma_quick_warp .drop_list ul {
  background: var(--mat-button);
  border: 4px solid;
  border-color: var(--mat-button);
  border-radius: 0;
  color: var(--mat-fg);
  box-shadow: none;
}


input[type=text]:hover,
input[type=password]:hover,
input[type=number]:hover,
input[type=date]:hover,
input[type=text],
input[type=password],
input[type=number],
input[type=date],
input[type=text]:hover,
input[type=text]:focus,
input[type=password]:hover,
input[type=password]:focus,
input[type=number]:hover,
input[type=number]:focus,
input[type=date]:hover,
input[type=date]:focus {
  background: var(--mat-bg);
  box-shadow: none;
  text-shadow: none;
  height: auto;
  font-size: 12px;
  color: var(--mat-fg);
  border: none;
  border-bottom:...