Fix main visual glitches in designs, remove broken designs

designs/dracula/adminer.css

@@ -1,4 +1,4 @@
-/* 
+/*
  * Theme by Douglas Damasio [http://github.com/douglasdamasio]
  * Based on Pepa Linha
  * Color syntax inspired by Dracula Theme [https://draculatheme.com/]
@@ -28,7 +28,7 @@
    height: 100%;
    background: var(--color-darkBackground);
  }
- 
+
  body {
   font-family: 'Source Sans Pro', sans-serif;
  }
@@ -36,14 +36,14 @@
  div {
    color: var(--color-darkForeground);
  }
- 
+
  h1 {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
  }
- 
+
  h2 {
    margin: 0;
    padding: 0;
@@ -57,12 +57,12 @@
    padding-bottom: 6px;
    margin-bottom: 40px;
  }
- 
+
  .rtl h2 {
    margin: 0;
    margin-bottom: 40px;
  }
- 
+
  h3 {
    font-size: 22px;
    margin: 0 0 10px;
@@ -72,66 +72,70 @@
    color: var(--color-darkGreen);
 
  }
- 
+
  p {
    margin: 0;
    margin-bottom: 15px;
    align-items: center;
    color: var(--color-darkForeground);
  }
- 
+
  a {
    color:var(--color-darkPink);
    text-decoration:none;
  }
- 
+
  a:visited {
    color: var(--color-darkPurple);
  }
- 
+
  a:link:hover,
  a:visited:hover {
    color: var(--color-darkPink);
-   text-decoration:underline; 
+   text-decoration:underline;
  }
- 
- 
+
+
  a[href*=charsets] {
    display: none;
  }
- 
+
  table {
    border: 0;
    margin: 0;
    margin-top: 15px;
  }
- 
+
  th, td {
    border: 0;
    padding: 6px;
    color: var(--color-darkOrange);
  }
- 
+
  th {
    background: none;
    color: var(--color-darkCyan);
    font-weight: normal;
  }
- 
+
  tbody tr:hover td,
  tbody tr:hover th {
    background: var(--color-darkCurrentLine);
  }
- 
+
  table:not(.checkable) th {
    min-width: 120px;
  }
- 
+
+#edit-fields th {
+	min-width: 0;
+}
+
  thead td,
  thead th {
    background: var(--color-darkComment);
  }
- 
+
  thead td,
  thead td a,
  thead td a:link:hover,
@@ -144,37 +148,38 @@
  thead th a:visited:hover {
    color: var(--color-darkForeground);
  }
- 
+
  table.checkable,
  p.links + table,
  pre + table,
  #edit-fields,
  p + table,
- h3 + table {
+ h3 + table,
+ .scrollable table{
    border: 1px solid var(--color-darkCurrentLine);
    margin-bottom: 15px;
  }
- 
+
  table.checkable tbody tr:hover td,
  table.checkable tbody tr:hover th {
    background: var(--color-darkCurrentLine);
  }
- 
+
  .js .checkable .checked td,
  .js .checkable .checked th {
    background: var(--color-darkDraculaSite);
  }
- 
+
  .js .checkable thead .checked td,
  .js .checkable thead .checked th {
    background: var(--color-darkPurple);
  }
- 
+
  .odd th,
  .odd td {
    background: var(--color-darkDraculaVSCode);
  }
- 
+
  fieldset {
    display: inline-block;
    padding: 15px;
@@ -183,21 +188,21 @@
    border: 0;
    background: var(--color-darkBackground);
  }
- 
+
  fieldset select {
    margin-right: 5px;
  }
- 
+
  fieldset input[type=button],
  fieldset input[type=submit],
  fieldset p {
    margin-bottom: 0;
  }
- 
+
  fieldset div p {
    margin-top: 10px;
  }
- 
+
  legend {
    display: inline-block;
    padding: 6px 15px;
@@ -206,17 +211,17 @@
    font-family: 'Source Sans Pro', sans-serif;
    color: var(--color-darkOrange);
  }
- 
+
  legend a,
  legend a:link:hover {
    color: var(--color-darkOrange);
    text-decoration: underline;
  }
- 
+
  code {
    background: none;
  }
- 
+
  p code,
  pre code,
  pre[contenteditable=true] {
@@ -225,7 +230,7 @@
    font-size: 17px;
    margin-bottom: 15px;
  }
- 
+
  p code + a,
  p code + a:link:hover,
  p code + a:visited:hover {
@@ -237,7 +242,7 @@
    text-decoration: underline;
    text-transform: lowercase;
  }
- 
+
  #content {
    margin: 0;
    margin-left: 400px;
@@ -245,12 +250,12 @@
    padding: 0;
    padding-top: 50px;
  }
- 
+
  #content > p {
    margin-bottom: 15px;
    color: var(--color-darkForeground);
  }
- 
+
  .rtl #content {
    margin: 0;
    margin-left: 54px;
@@ -258,7 +263,7 @@
    padding: 0;
    padding-top: 50px;
  }
- 
+
  #menu {
    width: 347px;
    border-right: 1px solid var(--color-darkBackground);
@@ -272,51 +277,44 @@
    padding: 0 15px;
    box-sizing: border-box;
  }
- 
+
  #menu h1 {
-   background: none left top no-repeat;
-   /* background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD0AAAAyCAIAAABgVkRrAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTA0RDI5NkM5QkRGMTFFMzg4ODNEQjEzNjY5NzJEMEEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTA0RDI5NkQ5QkRGMTFFMzg4ODNEQjEzNjY5NzJEMEEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1MDREMjk2QTlCREYxMUUzODg4M0RCMTM2Njk3MkQwQSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1MDREMjk2QjlCREYxMUUzODg4M0RCMTM2Njk3MkQwQSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnG4emkAAASXSURBVHja7Fk9aNtAFL6EDKKUoqGDySRKB1FC8dDBdCgeOmQoIUMG0yGE0EFT8dDBUwidPJQQQgcNpYROGjKI0sFDB9GhaMhgSgcPpWgqHjqYYsINJfQ7PfV0tmX9JI4Sgx+HI8f26bt3733fe6elIf/LbqwdHbJWS1wYBrMstrXJVg36ZJnNhQWBWMB9k+215gq3tDeHBH3pRseJtC8ee2ezEzd62+ncDH/DhS+ttC88qbMPDntaj952uyvXD3q7ETvyyE77pq5HFz9614r7V8C2GnBezBgp9tGNl3ffzIjvwZ9B//dA7Mz3YPLTyl29UhE+MI0KW9YKh2yjwQZichEAjsNu6WlUqNqkvwHUO+0BJeD2gn4hJFXTwAIw6jUzYxlwHkCTvWqy1+0Ct7FtsPh/3Ofc9brOJ5+8ezHr9gKMcGpWf2SK8bhKk48sA1kIOiODmzc2c8U0DLrzwhI5ypjA3fsZtNrOgPP4y5pmGJXamqHd1kQMTIkENYpwEfQHEW7GsGkYZse393ewb+Y9IwE0PJcOejQ2pFgK3Li3BI14hZM269XKaiXPVPodHUOs6l48o/+t5wO038OcQGztHzd31uPfUEgQdCQi3JkfumLLHa9LoK2tunPQtJ6v5wQ9zWoPzebupms34QKxmZNJAugIDzJE+V4rbTrDSMYtr3AD+H5WFIfZ0lIFPu50otiF7zfW2dlgquKccTFWRxYQ8wlFJOVTdc2gAChq/V99vxdgD7O5CIBO/Yi/P3vsUY2dOOxBdSrzIBm2dxJwq+hlaiId9dua5OlEv/IhH0vKvAYXfvUjvUTFB2STeinJu91Oxo3Eh58onwRXcB7zWkGj/Maa9203+9soPIyWEKBEkQdc8veo+sS4wQkYzV1Bi+A1Ee5DnhO33BxsSw1/wszGPHkXmqI7yIQzPvnvhPqEFjAWtSq7j7n2YplwSctVV8F/FXazbN76nQXu68btfe3Odmqwahl5Ca6tel0UVdnVc6pRBX/JkrgYn0RCY0cdAMhYvGYxHbEklbJ++FoqD8LTUiwTlZLEha55WKOmSybWTCXD1eJG8dnc4XAYqmdgmoRFyp/ZqqHbgMiD8qGXZeAOs1RD9YyhBgBVTgL3cMTHwKd2xyUL50qmTI5p/oK/F7jnEjeycLZTFz02SrKlaSPGbe0fOx+9mbTGcMHhe/fwuFMGn4Dy7BMPA3oBGkZrbIDgcp9JgK37YYtZjmSuqApH9yPRcTp+TM939THOpkaYroMguRuSE14tbuegif11vS58poYm7i1vn6fdxF6hMoNk4leIvTJ0B1FhPQ/PxM45eZ2HGjkY8jHXqptghGJJqqmKVHn1oCr4k93xgr8XuOcZ9zmf7dQym68Et6QFcFaBk7EsQ5fdfuteHW7xPM3asyVh05EkxFJITMHuGDUCukxwvOz3YI31mtWoX7TRXkrDjQhBLeFOHBtQQ6n/f8TDlAd/6mNBP7xO7Ecbz2qNjfrl6qoU3Mr5Qa4j9yyLHqZd7jwjL241QQFdPiJTdT7RsBuapslzi5mqVSHcKXYetcZlSelU3P8EGADW25uhkIE0mQAAAABJRU5ErkJggg==); */
-   background-image: url();
    line-height: 50px;
-   padding-left: 50px;
-   padding-top: 9px;
-   /* text-transform: lowercase; */
-   margin: 25px 0 10px 16px;
+   margin: 10px 0;
  }
- 
- 
+
  #menu h1 a {
    font-style: normal;
  }
- 
+
  #menu h1 .version {
    color: var(--color-darkPurple);
  }
- 
+
  #menu a {
    color: var(--color-darkForeground);
  }
- 
+
  #menu p, #tables {
    border: 0;
    padding: 0;
  }
- 
+
  #menu #dbs {
    background: var(--color-darkDraculaVSCode);
-   padding: 0 15px 15px;
+   padding: 10px 15px 15px;
    border: 1px solid var(--color-darkForeground);
    border-bottom: 0;
    box-sizing: border-box;
    color: var(--color-darkCyan);
  }
- 
+
  #menu #dbs select {
    outline: 0;
    border-color: var(--color-darkComment);
    width: 100%;
  }
- 
+
  #menu p.links {
    margin: 0 0 15px;
    border: 1px solid var(--color-darkForeground);
@@ -326,50 +324,55 @@
    width: 100%;
    box-sizing: border-box;
  }
- 
+
  #menu p.links a {
    padding: 8px;
    margin: 0;
    display: table-cell;
    font-size: 12px;
  }
- 
+
  #menu p.links a:hover {
    color: var(--color-darkPink);
  }
- 
+
  #menu p.links a.active {
    font-weight: normal;
    background: var(--color-darkCurrentLine);
    color: var(--color-darkYellow);
  }
- 
+
+.tables-filter {
+	margin-top: 32px;
+	padding: 0;
+}
+
  #content p.links {
    margin: -10px 0 15px;
  }
- 
+
  #content p.links a {
    padding: 8px;
    margin: 0;
    display: table-cell;
    border: 1px solid var(--color-darkBackground);
  }
- 
+
  #content p.links a,
  #content p.links a:visited,
  #content p.links a:hover {
    color: var(--color-darkCyan);
  }
- 
+
  #content p.links a.active {
    font-weight: normal;
    border: 1px solid var(--color-darkTitleSite);
    background: var(--color-darkCurrentLine);
  }
- 
+
  #tables {
    max-height: 100%;
-   margin: 32px -15px !important;
+   margin: 15px -15px 32px !important;
    position: absolute;
    left: 15px;
    right: 15px;
@@ -378,33 +381,33 @@
    overflow: hidden !important;
    overflow-y: auto !important;
  }
- 
+
  .rtl #tables {
    overflow: hidden !important;
    overflow-y: auto !important;
  }
- 
+
  #tables a {
    float: right;
    padding: 6px 15px;
  }
- 
+
  .rtl #tables a {
    float: none;
  }
- 
+
  #tables .structure, #tables .view {
    float: none;
    display: block;
  }
- 
+
  .rtl #tables a:first-child,
  .rtl #tables br + a {
    float: left;
    display: block;
    margin-left: 15px;
  }
- 
+
  #tables a:hover,
  #tables a:hover + a,
  #tables a.active,
@@ -416,15 +419,15 @@
  #tables br {
    display: none;
  }
- 
+
  .js .column {
    background: var(--color-darkDraculaVSCode);
  }
- 
+
  .js .checked .column {
    background: var(--color-darkDraculaVSCode);
  }
- 
+
  .pages {
    left: 400px;
    background: var(--color-darkCyan);
@@ -434,7 +437,7 @@
    display: inline-block;
    position: static;
  }
- 
+
  .pages a,
  .pages a:link,
  .pages a:link:hover,
@@ -443,7 +446,7 @@
    color: var(--color-darkBackground);
    font-weight: normal;
  }
- 
+
  #breadcrumb {
    margin: 0;
    left: 400px;
@@ -452,36 +455,40 @@
    padding-top: 25px;
    font-size: 12px;
  }
- 
+
  #breadcrumb a {
    color: var(--color-darkForeground);
    text-decoration: underline;
  }
- 
+
  #breadcrumb,
  #breadcrumb a:hover {
    color: var(--color-darkTitleSite);
  }
- 
+
  .rtl #breadcrumb {
    margin: 0;
    padding: 0;
    padding-top: 25px;
    right: 400px;
  }
- 
+
  .logout,
  .rtl .logout {
-   top: 30px;
+   top: 20px;
    right: 54px;
    margin: 0;
  }
- 
+
  .rtl .logout {
    right: auto;
    left: 54px;
  }
- 
+
+ #logout {
+	 margin-top: 0;
+ }
+
  input:not([type]),
  input[type="color"],
  input[type="email"],
@@ -498,7 +505,11 @@
    box-sizing: border-box;
    color: var(--color-darkForeground);
  }
- 
+
+input::placeholder {
+	color: var(--color-darkForeground);
+}
+
  table:not(#table) input:not([type]),
  table:not(#table) input[type="color"],
  table:not(#table) input[type="email"],
@@ -510,7 +521,7 @@
  table:not(#table) input[type="search"] {
    min-width: 280px;
  }
- 
+
  input[type=submit],
  input[type=button] {
    border: 0;
@@ -526,14 +537,14 @@
    border-radius: 5px;
    margin-top: 20px;
  }
- 
+
  input[type=submit][disabled],
  input[type=button][disabled] {
    background: var(--color-darkTitleSite) !important;
    color: var(--color-darkBackground);
    cursor: not-allowed;
  }
- 
+
  input[type=submit]:hover,
  input[type=button]:hover,
  input[type=submit]:focus,
@@ -541,17 +552,17 @@
    background: var(--color-darkGreen);
    opacity: 0.8;
  }
- 
+
  .logout input[type=submit] {
    background: var(--color-darkRed);
    color: var(--color-darkForeground);
  }
- 
+
  .logout input[type=submit]:hover {
    background: var(--color-darkRed);
    opacity: 0.8;
  }
- 
+
  input.default,
  input.default {
    box-shadow: none;
@@ -559,22 +570,22 @@
    color: var(--color-darkDraculaVSCode);
    font-weight: bold;
  }
- 
+
  select {
    box-sizing: border-box;
    margin: 0;
-   padding: 6px 0;
+   padding: 6px;
    border: 1px solid var(--color-darkCurrentLine);
    background-color: var(--color-darkBackground);
    color: var(--color-darkForeground);
  }
- 
+
  label {
    cursor: pointer;
    margin: 18px;
    color: var(--color-darkOrange);
  }
- 
+
  .error,
  .message {
    margin: 0;
@@ -582,23 +593,23 @@
    background: var(--color-darkCurrentLine);
    color: var(--color-darkRed);
  }
- 
+
  #logins a,
  #tables a,
  #tables span {
    background: none;
  }
- 
+
  #form > p {
    margin-bottom: 15px;
    color: var(--color-darkForeground);
  }
- 
+
 
  #schema .table {
    padding: 6px;
  }
- 
+
  #schema .table a {
    display: block;
    margin: -6px;
@@ -607,20 +618,20 @@
    color: var(--color-darkBackground);
    background: var(--color-darkPurple);
  }
- 
+
  #schema .table br {
    display: none;
  }
- 
+
  #schema .table span {
    display: block;
    margin-bottom: 1px solid var(--color-darkDraculaVSCode);
  }
- 
+
  #lang {
    position: fixed;
-   top: 55px;
-   right: 100%;
+   top: 30px;
+   right: calc(100% + 8px);
    z-index: 10;
    margin-right: -340px;
    line-height: normal;
@@ -628,7 +639,7 @@
    left: auto;
    font-size: 0;
  }
- 
+
  #lang select {
    font-size: 12px;
    padding: 0;
@@ -641,26 +652,26 @@
    cursor: pointer;
    outline: 0;
  }
- 
+
  #lang select option {
    text-align: right;
  }
- 
+
  .rtl #lang {
    margin-right: 0;
    left: 100%;
    margin-left: -261px;
    right: auto;
  }
- 
+
  .jush {
    color: var(--color-darkForeground);
  }
- 
+
  .jush a {
    color: var(--color-darkPurple);
  }
- 
+
  .jush-sql a,
  .jush-sql_code a,
  .jush-sqlite a,
@@ -670,7 +681,7 @@
  .jush-simpledb a {
    font-weight: normal;
  }
- 
+
  .jush-bac,
  .jush-php_bac,
  .jush-bra,
@@ -678,7 +689,7 @@
  .jush-sqlite_quo {
    color: var(--color-darkYellow);
  }
- 
+
  .jush-php_quo,
  .jush-quo,
  .jush-quo_one,
@@ -690,21 +701,21 @@
  .jush-sql_eot {
    color: var(--color-darkOrange);
  }
- 
+
  .jush-num,
  .jush-clr {
    color: var(--color-darkPurple);
  }
- 
+
  @media print {
    .logout {
      display: none;
    }
-   
+
    #breadcrumb {
      position: static;
    }
-   
+
    #content {
      margin: 0;
    }