phpmyadmin working

22 files changed, 6909 insertions, 0 deletions

diff --git a/srcs/phpmyadmin/themes/metro/scss/_codemirror.scss b/srcs/phpmyadmin/themes/metro/scss/_codemirror.scss
new file mode 100644
index 0000000..30417e1
--- /dev/null
+++ b/srcs/phpmyadmin/themes/metro/scss/_codemirror.scss
@@ -0,0 +1,96 @@
+// Styles for CodeMirror editor for the Metro theme
+
+$textarea-cols: 40 !default;
+$textarea-rows: 15 !default;
+
+.CodeMirror {
+  font-family: $font-family-fixed !important;
+  height: ceil($textarea-rows * 1.2em);
+  border: 1px solid #ccc;
+  direction: ltr;
+}
+
+#pma_console .CodeMirror {
+  border: none;
+}
+
+.CodeMirror * {
+  font-family: $font-family-fixed;
+}
+
+#inline_editor_outer .CodeMirror {
+  height: ceil($textarea-rows * 0.4em);
+  margin-bottom: 10px;
+}
+
+.insertRowTable .CodeMirror {
+  height: ceil($textarea-rows * 0.6em);
+  width: ceil($textarea-cols * 0.6em);
+}
+
+#pma_console .CodeMirror-gutters {
+  background-color: initial;
+  border: none;
+}
+
+span {
+  &.cm-keyword,
+  &.cm-statement-verb {
+    color: #909;
+  }
+
+  &.cm-variable {
+    color: black;
+  }
+
+  &.cm-comment {
+    color: #808000;
+  }
+
+  &.cm-mysql-string {
+    color: #008000;
+  }
+
+  &.cm-operator {
+    color: fuchsia;
+  }
+
+  &.cm-mysql-word {
+    color: black;
+  }
+
+  &.cm-builtin {
+    color: #f00;
+  }
+
+  &.cm-variable-2 {
+    color: #f90;
+  }
+
+  &.cm-variable-3 {
+    color: #00f;
+  }
+
+  &.cm-separator {
+    color: fuchsia;
+  }
+
+  &.cm-number {
+    color: teal;
+  }
+}
+
+.autocomplete-column-name {
+  display: inline-block;
+}
+
+.autocomplete-column-hint {
+  display: inline-block;
+  float: $right;
+  color: #666;
+  margin-#{$left}: 1em;
+}
+
+.CodeMirror-hints {
+  z-index: 999;
+}
diff --git a/srcs/phpmyadmin/themes/metro/scss/_common.scss b/srcs/phpmyadmin/themes/metro/scss/_common.scss
new file mode 100644
index 0000000..c8c756e
--- /dev/null
+++ b/srcs/phpmyadmin/themes/metro/scss/_common.scss
@@ -0,0 +1,4271 @@
+// Common styles for the Metro theme
+
+/* fonts */
+
+@font-face {
+  font-family: 'IcoMoon';
+  src: local('☺');
+  src: url('../fonts/IcoMoon.eot');
+  src:
+    url('../fonts/IcoMoon.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/IcoMoon.svg#IcoMoon') format('svg'),
+    url('../fonts/IcoMoon.woff') format('woff'),
+    url('../fonts/IcoMoon.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src: local('☺'), local('Open Sans'), local('OpenSans');
+  src: url('../fonts/opensans-regular-webfont.eot');
+  src:
+    url('../fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/opensans-regular-webfont.woff') format('woff'),
+    url('../fonts/opensans-regular-webfont.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Open Sans Light';
+  src: local('☺'), local('Open Sans Light'), local('OpenSans-Light');
+  src: url('../fonts/opensans-light-webfont.eot');
+  src:
+    url('../fonts/opensans-light-webfont.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/opensans-light-webfont.woff') format('woff'),
+    url('../fonts/opensans-light-webfont.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Open Sans Bold';
+  src: local('☺'), local('Open Sans Bold'), local('OpenSans-Bold');
+  src: url('../fonts/opensans-bold-webfont.eot');
+  src:
+    url('../fonts/opensans-bold-webfont.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/opensans-bold-webfont.woff') format('woff'),
+    url('../fonts/opensans-bold-webfont.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Open Sans Extrabold';
+  src: local('☺'), local('Open Sans Extrabold'), local('OpenSans-Extrabold');
+  src: url('../fonts/opensans-extrabold-webfont.eot');
+  src:
+    url('../fonts/opensans-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/opensans-extrabold-webfont.woff') format('woff'),
+    url('../fonts/opensans-extrabold-webfont.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+*:focus {
+  outline: none;
+}
+
+#li_select_fontsize {
+  display: none;
+}
+
+/* general tags */
+html {
+  font-size: 100%;
+}
+
+input,
+select,
+textarea {
+  font-size: 1em;
+}
+
+body {
+  font-family: $font-family;
+  padding: 0;
+  margin-#{$left}: $navi-width;
+  color: $main-color;
+  background: $main-background;
+  line-height: 1;
+  font-size: 11px;
+}
+
+/* Override style formats by html tags */
+
+font[color="red"],
+span[style="color: #FF0000"] {
+  color: $browse-warning-color !important;
+}
+
+strong {
+  font-weight: normal;
+}
+
+/* login */
+
+body#loginform {
+  margin: 0;
+  background-color: #666;
+
+  #page_content {
+    background-color: $navi-background;
+    margin: 0 !important;
+    padding: 20px;
+    margin-top: 10% !important;
+    min-height: 240px;
+  }
+
+  div.container {
+    color: $main-background;
+    text-align: $left;
+    width: 48em;
+    margin-#{$left}: auto;
+    margin-#{$right}: auto;
+
+    &::before {
+      /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+      font-family: 'IcoMoon';
+      font-size: 220px;
+      color: $main-background;
+      content: "a";
+      float: $left;
+      margin-#{$right}: 20px;
+      margin-bottom: 10px;
+      background-color: $th-color;
+      overflow: hidden;
+      height: 240px;
+      width: 240px;
+      line-height: 1;
+      text-align: center;
+    }
+  }
+
+  h1 {
+    display: inline-block;
+    text-align: $left;
+    color: $main-background;
+    font-size: 2.5em;
+    padding-top: 0;
+    margin-#{$right}: -50%;
+    line-height: 2;
+  }
+
+  a.logo,
+  fieldset legend {
+    display: none;
+  }
+
+  .item {
+    margin-bottom: 10px;
+  }
+
+  input {
+    &.textfield {
+      width: 100%;
+      border: 1px solid #fff;
+      background: $navi-color;
+      color: $th-color;
+      box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      -webkit-box-sizing: border-box;
+      margin: 0;
+
+      &:hover,
+      &:focus {
+        background-color: #fff;
+        color: #333;
+        box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        margin: 0;
+      }
+    }
+
+    &[type="submit"] {
+      background-color: $th-color;
+      border: none;
+      padding: 7px;
+      margin: 0;
+    }
+  }
+
+  select {
+    margin: 0 !important;
+    border: 1px solid $navi-background;
+    background: $navi-background;
+    color: $navi-color;
+    padding-#{$left}: 0 !important;
+    font-family: $font-family;
+    min-width: 100%;
+
+    &:hover {
+      border: 1px solid $navi-color;
+    }
+  }
+
+  br {
+    display: none;
+  }
+
+  fieldset {
+    border: none;
+    color: $navi-color;
+    padding: 0;
+    margin-top: 0;
+    margin-bottom: 10px;
+    background: none;
+
+    &:first-child {
+      border-bottom: none;
+      margin: 0;
+    }
+
+    &.tblFooters {
+      border: none;
+      margin: 0;
+      clear: none;
+    }
+  }
+
+  .error {
+    float: $left;
+    width: 48em;
+    margin-top: -280px;
+  }
+}
+
+form.login label {
+  display: none;
+}
+
+.turnOffSelect {
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+#page_content {
+  margin: 20px !important;
+}
+
+textarea,
+tt,
+pre,
+code {
+  font-family: $font-family-fixed !important;
+}
+
+h1 {
+  font-family: $font-family-light;
+  font-weight: normal;
+  font-size: 3em;
+  color: $navi-background;
+  margin: 0;
+  letter-spacing: -1px;
+  line-height: 1;
+}
+
+h2 {
+  font-size: 3.6em;
+  font-weight: normal;
+  color: $navi-background;
+  font-family: $font-family-light;
+  margin-top: 10px;
+  margin-bottom: 0;
+  line-height: 1;
+  letter-spacing: -1px;
+
+  // Hiding icons in the page titles
+  img {
+    display: none;
+  }
+
+  a img {
+    display: inline;
+  }
+}
+
+.data {
+  margin: 10px 0;
+}
+
+.data_full_width {
+  margin: 10px 0;
+  width: 100%;
+}
+
+h3 {
+  font-family: $font-family-extra-bold;
+  text-transform: uppercase;
+  font-weight: normal;
+  font-size: 1rem;
+}
+
+a {
+  text-decoration: none;
+  color: #235a81;
+  cursor: pointer;
+  outline: none;
+
+  &:link,
+  &:visited,
+  &:active {
+    text-decoration: none;
+    color: #235a81;
+    cursor: pointer;
+    outline: none;
+  }
+}
+
+button.mult_submit,
+.checkall_box + label {
+  text-decoration: none;
+  color: #235a81;
+  cursor: pointer;
+  outline: none;
+}
+
+a:hover {
+  text-decoration: underline;
+  color: #235a81;
+}
+
+button.mult_submit {
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+    color: #235a81;
+  }
+}
+
+.checkall_box + label:hover {
+  text-decoration: underline;
+  color: #235a81;
+}
+
+#initials_table {
+  background: $th-background;
+  border: 1px solid $border-color;
+  margin-bottom: 10px;
+
+  td {
+    padding: 8px !important;
+  }
+
+  a {
+    border: 1px solid $border-color;
+    background: $main-background;
+    padding: 4px 8px;
+  }
+}
+
+dfn:hover {
+  cursor: help;
+}
+
+.data th {
+  border-bottom: 1px solid $border-color;
+}
+
+th {
+  font-family: $font-family-bold;
+  color: $th-color !important;
+  font-weight: normal;
+
+  a {
+    font-family: $font-family-bold;
+    color: $th-color !important;
+    font-weight: normal;
+  }
+}
+
+.data th a:hover {
+  color: #999 !important;
+}
+
+.column_heading,
+.column_action {
+  border: 1px solid $border-color;
+  background-color: #f6f6f6;
+}
+
+a img {
+  border: 0;
+}
+
+hr {
+  color: $border-color;
+  background-color: $border-color;
+  border: 0;
+  height: 1px;
+}
+
+form {
+  padding: 0;
+  margin: 0;
+  display: inline;
+}
+
+input {
+  &[type="text"],
+  &[type="password"],
+  &[type="number"] {
+    border: 1px solid $browse-gray-color;
+    color: $th-color;
+    padding: 5px;
+    margin: 6px;
+    font-family: $font-family;
+    background-color: $main-background;
+
+    &:focus {
+      border: 1px solid $navi-hover-background;
+      color: $main-color;
+    }
+  }
+}
+
+.sqlbutton,
+#tablefieldinsertbuttoncontainer input[type="button"] {
+  margin-top: 1em;
+  margin-#{$left}: 0 !important;
+  margin-#{$right}: 14px !important;
+}
+
+button {
+  margin-#{$left}: 14px;
+  padding: 4px;
+  color: $button-color;
+  text-decoration: none;
+  background-color: $button-background;
+}
+
+textarea {
+  overflow: visible;
+  border: 1px solid $browse-gray-color;
+  color: $th-color;
+  background-color: $main-background;
+}
+
+fieldset {
+  margin-top: 20px;
+  border: 1px solid $border-color;
+  padding: 20px;
+  background-color: $th-background;
+
+  fieldset {
+    margin: 20px;
+    margin-bottom: 0;
+    background-color: $main-background;
+    border: none;
+  }
+}
+
+legend {
+  padding: 0 5px;
+  width: initial;
+  font-size: 1rem;
+}
+
+.some-margin {
+  margin: 20px;
+}
+
+/* buttons in some browsers (eg. Konqueror) are block elements,
+   this breaks design */
+button {
+  display: inline;
+}
+
+table {
+  border-collapse: collapse;
+
+  caption,
+  th,
+  td {
+    padding: 0.6em;
+    vertical-align: top;
+  }
+}
+
+th {
+  text-align: $left;
+}
+
+img,
+button {
+  vertical-align: middle;
+}
+
+select {
+  border: 1px solid $browse-gray-color;
+  color: $th-color;
+  padding: 4px;
+  font-family: $font-family;
+  margin: 5px;
+  background-color: $main-background;
+  max-width: 17em;
+
+  &:focus {
+    border: 1px solid $navi-hover-background;
+    color: $main-color;
+  }
+}
+
+/* classes */
+.clearfloat {
+  clear: both;
+}
+
+.floatleft {
+  float: $left;
+  margin-#{$right}: 1em;
+}
+
+.floatright {
+  float: $right;
+}
+
+.center {
+  text-align: center;
+}
+
+.displayblock {
+  display: block;
+}
+
+table {
+  &.nospacing {
+    border-spacing: 0;
+  }
+
+  &.nopadding tr {
+    th,
+    td {
+      padding: 0;
+    }
+  }
+}
+
+th.left,
+td.left {
+  text-align: $left;
+}
+
+th.center,
+td.center {
+  text-align: center;
+}
+
+th.right,
+td.right {
+  text-align: $right;
+  padding-#{$right}: 1em;
+}
+
+tr.vtop {
+  th,
+  td {
+    vertical-align: top;
+  }
+}
+
+th.vtop,
+td.vtop {
+  vertical-align: top;
+}
+
+tr.vmiddle {
+  th,
+  td {
+    vertical-align: middle;
+  }
+}
+
+th.vmiddle,
+td.vmiddle {
+  vertical-align: middle;
+}
+
+tr.vbottom {
+  th,
+  td {
+    vertical-align: bottom;
+  }
+}
+
+th.vbottom,
+td.vbottom {
+  vertical-align: bottom;
+}
+
+.paddingtop {
+  padding-top: 1em;
+}
+
+.separator {
+  color: #fff;
+}
+
+.result_query {
+  background: $th-background;
+  margin-bottom: 20px;
+}
+
+div.tools {
+  padding: 10px;
+  text-align: $right;
+
+  span {
+    float: $right;
+    margin: 6px 2px;
+  }
+
+  a {
+    color: $blue-header !important;
+  }
+}
+
+.chrome {
+  input[type="checkbox"] {
+    #{$left}: -9999px;
+    position: relative;
+
+    &::before {
+      /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+      font-family: 'IcoMoon';
+      content: "";
+      color: $th-color;
+      cursor: default;
+      position: absolute;
+      padding: 4px;
+      top: 0;
+      #{$left}: 9995px;
+    }
+
+    &:indeterminate::before {
+      content: "";
+    }
+
+    &:checked::before {
+      content: "";
+    }
+  }
+
+  .navigation input[type="checkbox"]::before {
+    color: #fff;
+  }
+
+  input[type="radio"] {
+    #{$left}: -9999px;
+    position: relative;
+
+    &::before {
+      /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+      font-family: 'IcoMoon';
+      content: "";
+      color: $th-color;
+      cursor: default;
+      position: absolute;
+      padding: 4px;
+      top: 0;
+      #{$left}: 9995px;
+    }
+
+    &:checked::before {
+      content: "";
+    }
+  }
+}
+
+tr.noclick td:first-child::before {
+  content: "";
+}
+
+fieldset.tblFooters {
+  margin-top: -1px;
+  border-top: 0;
+  text-align: $right;
+  float: none;
+  clear: both;
+}
+
+div.null_div {
+  height: 20px;
+  text-align: center;
+  font-style: normal;
+  min-width: 50px;
+}
+
+fieldset {
+  .formelement {
+    float: $left;
+    margin-#{$right}: 0.5em;
+  }
+
+  /* revert for Gecko */
+  div[class="formelement"] {
+    white-space: normal;
+  }
+}
+
+button.mult_submit {
+  border: none;
+  background-color: transparent;
+  color: $browse-pointer-color;
+  margin: 0;
+}
+
+table tr {
+  text-align: $left;
+  border-bottom: 1px solid #eee;
+
+  // odd items 1,3,5,7...
+  &:nth-child(odd) {
+    background: $bg-two;
+    border-bottom: none;
+  }
+
+  // even items 2,4,6,8...
+  &:nth-child(even) {
+    background: $bg-one;
+    border-bottom: none;
+  }
+
+  th {
+    text-align: $left;
+    border-bottom: 1px solid #eee;
+  }
+
+  &.odd,
+  &.even {
+    border-#{$left}: 3px solid transparent;
+  }
+}
+
+/* marked table rows */
+td.marked:not(.nomarker) {
+  color: $main-color;
+}
+
+table tr.marked:not(.nomarker) {
+  color: $main-color;
+
+  td,
+  th {
+    color: $main-color;
+  }
+}
+
+td.marked:not(.nomarker) {
+  background-color: $browse-marker-background;
+}
+
+table tr {
+  &.marked:not(.nomarker) {
+    border-#{$left}: 3px solid #24a0da;
+  }
+
+  &:not(.nopointer):hover {
+    background-color: $browse-marker-background;
+    color: $main-color;
+  }
+}
+
+.hover:not(.nopointer) {
+  background-color: $browse-marker-background;
+  color: $main-color;
+}
+
+.structure_actions_dropdown {
+  background-color: $browse-marker-background;
+  color: $main-color;
+
+  .icon {
+    vertical-align: middle !important;
+  }
+}
+
+table tr.hover:not(.nopointer) th {
+  background-color: $browse-marker-background;
+  color: $th-pointer-color;
+}
+
+/* marks table rows/cells if the db field is in a where condition */
+
+.condition {
+  border-color: $browse-warning-color !important;
+}
+
+th.condition {
+  border: 1px solid $browse-warning-color;
+  background: $browse-warning-color;
+  color: $main-background !important;
+
+  a {
+    border: 1px solid $browse-warning-color;
+    background: $browse-warning-color;
+    color: $main-background !important;
+  }
+}
+
+td {
+  &.condition {
+    border: 1px solid;
+  }
+
+  // cells with the value NULL
+  &.null {
+    font-style: italic;
+    color: #7d7d7d;
+  }
+}
+
+table {
+  .valueHeader,
+  .value {
+    text-align: $right;
+    white-space: normal;
+  }
+
+  // IE doesnt handles 'pre' right
+  [class="value"] {
+    white-space: normal;
+  }
+}
+
+.value {
+  font-family: $font-family-fixed;
+}
+
+.attention {
+  color: red;
+  font-weight: bold;
+}
+
+.allfine {
+  color: green;
+}
+
+img.lightbulb {
+  cursor: pointer;
+}
+
+.pdflayout {
+  overflow: hidden;
+  clip: inherit;
+  background-color: #fff;
+  display: none;
+  border: 1px solid #000;
+  position: relative;
+}
+
+.pdflayout_table {
+  background: #d3dce3;
+  color: #000;
+  overflow: hidden;
+  clip: inherit;
+  z-index: 2;
+  display: inline;
+  visibility: inherit;
+  cursor: move;
+  position: absolute;
+  font-size: 80%;
+  border: 1px dashed #000;
+}
+
+/* Doc links in SQL */
+.cm-sql-doc {
+  text-decoration: none;
+  border-bottom: 1px dotted #999;
+  color: inherit !important;
+}
+
+/* no extra space in table cells */
+td .icon {
+  margin: 0;
+}
+
+.selectallarrow {
+  margin-#{$right}: 0.3em;
+  margin-#{$left}: 0.6em;
+}
+
+.with-selected {
+  margin-#{$left}: 2em;
+}
+
+/* message boxes: error, confirmation */
+#pma_errors,
+#pma_demo,
+#pma_footer {
+  position: relative;
+  padding: 20px;
+}
+
+#pma_errors #pma_errors {
+  padding: 0;
+}
+
+.success h1,
+.notice h1 {
+  text-align: $left;
+  margin: 0 0 0.2em 0;
+  color: $navi-color;
+}
+
+div {
+  &.error h1 {
+    text-align: $left;
+    margin: 0 0 0.2em 0;
+    color: $navi-color;
+  }
+
+  &.success,
+  &.notice,
+  &.error,
+  &.footnotes {
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    margin: 0 0 1px;
+    border: 1px solid;
+    background-repeat: no-repeat;
+
+    @if $direction == rtl {
+      background-position: 99% 50%;
+      padding: 10px 35px 10px 10px;
+    } @else {
+      background-position: 10px 50%;
+      padding: 10px 10px 10px 10px;
+    }
+  }
+
+  &.success {
+    margin: 0 0 1em 0;
+    border: none;
+  }
+}
+
+.success a,
+.notice a,
+.error a {
+  text-decoration: underline;
+  color: $button-color;
+}
+
+.success {
+  color: $button-color;
+  background-color: $browse-success-color;
+}
+
+h1.success,
+div.success {
+  border-color: $browse-success-color;
+}
+
+.notice,
+.footnotes {
+  color: $button-color;
+  background-color: $blue-header;
+}
+
+h1.notice {
+  border-color: $blue-header;
+}
+
+div {
+  &.notice,
+  &.footnotes {
+    border-color: $blue-header;
+  }
+}
+
+.notice a {
+  color: $button-color;
+}
+
+.error {
+  border: 1px solid $browse-warning-color !important;
+  color: $button-color;
+  background-color: $browse-warning-color;
+}
+
+h1.error,
+div.error {
+  border-color: $main-color;
+}
+
+.confirmation {
+  color: $button-color;
+  background-color: $browse-warning-color;
+}
+
+fieldset.confirmation legend {
+  background-color: $browse-warning-color;
+}
+
+/* end messageboxes */
+
+.column_name {
+  font-size: 80%;
+  margin: 5px 2px;
+}
+
+.new_central_col {
+  width: 100%;
+}
+
+.tblcomment {
+  font-size: 70%;
+  font-weight: normal;
+  color: #009;
+}
+
+.tblHeaders {
+  font-family: $font-family-bold;
+  color: $th-color;
+  background: $th-background;
+  font-weight: normal;
+}
+
+div.tools,
+.tblFooters {
+  font-weight: normal;
+  color: $th-color;
+  background: $th-background;
+}
+
+.tblHeaders,
+div.tools,
+.tblFooters {
+  a {
+    &:link,
+    &:active,
+    &:visited {
+      color: #00f;
+    }
+
+    &:hover {
+      color: #f00;
+    }
+  }
+}
+
+/* forbidden, no privileges */
+.noPrivileges {
+  color: #f00;
+  font-weight: bold;
+}
+
+/* disabled text */
+.disabled {
+  color: #666;
+
+  a {
+    &:link,
+    &:active,
+    &:visited {
+      color: #666;
+    }
+
+    &:hover {
+      color: #666;
+      text-decoration: none;
+    }
+  }
+}
+
+tr.disabled td,
+td.disabled {
+  background-color: #f3f3f3;
+  color: #aaa;
+}
+
+.nowrap {
+  white-space: nowrap;
+}
+
+.font_weight_bold {
+  font-weight: bold;
+}
+
+.color_red {
+  color: red;
+}
+
+/* specific elements */
+
+/* topmenu */
+
+#topmenu .error {
+  background: #eee;
+  border: 0 !important;
+  color: #aaa;
+}
+
+ul {
+  &#topmenu,
+  &#topmenu2 {
+    list-style-type: none;
+    margin: 0;
+    height: 48px;
+  }
+
+  &.tabs {
+    list-style-type: none;
+    margin: 0;
+  }
+
+  &#topmenu2 {
+    margin: -20px -10px 20px;
+    padding: 10px;
+    clear: both;
+  }
+
+  &#topmenu li,
+  &#topmenu2 li {
+    float: $left;
+    margin: 0;
+    vertical-align: middle;
+    padding-top: 10px;
+    height: 38px;
+  }
+}
+
+#topmenu img,
+#topmenu2 img {
+  margin-#{$right}: 0.5em;
+  vertical-align: -3px;
+}
+
+.menucontainer {
+  background-color: $th-background;
+  height: 48px;
+}
+
+.scrollindicator {
+  display: none;
+}
+
+/* default tab styles */
+#topmenu .tabactive {
+  background: #fff !important;
+}
+
+#topmenu2 .tabactive {
+  background: #ccc;
+}
+
+ul#topmenu2 a {
+  display: block;
+  margin: 7px 0;
+  margin-#{$left}: 0;
+  padding: 5px 15px;
+  white-space: nowrap;
+  font-family: $font-family-extra-bold;
+  font-weight: normal;
+  color: $navi-pointer-color;
+  text-transform: uppercase;
+  background-color: #f6f6f6;
+}
+
+span {
+  &.caution {
+    color: #f00;
+  }
+
+  &.success {
+    color: green;
+  }
+}
+
+fieldset.caution {
+  background: $browse-warning-color;
+  border: 1px solid $browse-warning-color;
+
+  legend {
+    background-color: #fff;
+  }
+
+  a {
+    font-family: $font-family-bold;
+    text-transform: uppercase;
+    color: $button-color;
+    font-weight: normal;
+  }
+
+  ul {
+    padding: 0;
+  }
+}
+
+#tbl_maintenance {
+  padding: 0;
+}
+
+fieldset.caution li,
+#tbl_maintenance li {
+  display: block;
+}
+
+fieldset.caution li {
+  &::before {
+    /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+    font-family: "IcoMoon";
+    content: "";
+    color: $button-color;
+    margin-#{$right}: 10px;
+  }
+
+  a:nth-child(2) img {
+    background: url('../img/s_info.png') !important;
+  }
+}
+
+#tbl_maintenance li {
+  a {
+    font-family: $font-family-bold;
+    text-transform: uppercase;
+    font-weight: normal;
+  }
+
+  &::before {
+    /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+    font-family: "IcoMoon";
+    content: "%";
+    margin-#{$right}: 10px;
+  }
+}
+
+#topmenu {
+  padding-#{$left}: 20px;
+  padding-#{$right}: 20px;
+}
+
+/* default tab styles */
+ul {
+  &#topmenu {
+    ul.only {
+      #{$left}: 0;
+    }
+
+    a,
+    span {
+      padding: 5px 10px;
+      height: 28px;
+      line-height: 28px;
+      font-family: $font-family-extra-bold;
+      text-transform: uppercase;
+      color: #666;
+      font-weight: normal;
+    }
+
+    ul {
+      a {
+        border-width: 1pt 0 0 0;
+      }
+
+      li:first-child a {
+        border-width: 0;
+      }
+
+      a:hover,
+      .tabactive {
+        text-decoration: none;
+      }
+    }
+
+    /* enabled hover/active tabs */
+    > li > {
+      a:hover,
+      .tabactive {
+        text-decoration: none;
+        color: #333;
+      }
+    }
+  }
+
+  &#topmenu2 a {
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  /* to be able to cancel the bottom border, use <li class="active"> */
+  &#topmenu > li.active {
+    border-#{$right}: 0;
+  }
+}
+
+/* zoom search */
+div#dataDisplay {
+  input,
+  select {
+    margin: 0;
+    margin-#{$right}: 0.5em;
+  }
+
+  th {
+    line-height: 2em;
+  }
+}
+
+table {
+  &#tableFieldsId {
+    width: 100%;
+  }
+
+  &.calendar {
+    width: 100%;
+
+    td {
+      text-align: center;
+
+      a {
+        display: block;
+
+        &:hover {
+          background-color: #cfc;
+        }
+      }
+    }
+
+    th {
+      background-color: #d3dce3;
+    }
+
+    td.selected {
+      background-color: #fc9;
+    }
+  }
+}
+
+img.calendar {
+  border: none;
+}
+
+form.clock {
+  text-align: center;
+}
+
+/* end Calendar */
+
+/* table stats */
+div#tablestatistics table {
+  float: $left;
+  margin-bottom: 0.5em;
+  margin-#{$right}: 1.5em;
+  margin-top: 0.5em;
+  min-width: 16em;
+}
+
+/* END table stats */
+
+/* server privileges */
+#tableuserrights td,
+#tablespecificuserrights td,
+#tabledatabases td {
+  vertical-align: middle;
+}
+
+/* END server privileges */
+
+/* Heading */
+#topmenucontainer {
+  width: 100%;
+}
+
+#serverinfo {
+  padding: 12px 30px;
+  overflow: hidden;
+  margin: 0;
+  margin-#{$left}: -1em;
+  font-family: $font-family;
+  color: $button-color;
+  background: $navi-background;
+  height: 15px;
+  box-sizing: content-box;
+
+  .item {
+    font-family: $font-family;
+    white-space: nowrap;
+    color: $button-color;
+
+    &::before {
+      padding-#{$left}: 5px;
+      padding-#{$right}: 5px;
+      /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+      font-family: "IcoMoon";
+      font-size: 10px;
+      color: #eee;
+      content: "";
+    }
+  }
+
+  a {
+    &:hover {
+      text-decoration: none;
+    }
+
+    &:first-child {
+      display: none !important;
+    }
+  }
+
+  .separator,
+  .icon {
+    display: none;
+  }
+}
+
+#page_nav_icons {
+  position: fixed;
+  top: 0;
+  #{$right}: 0;
+  z-index: 99;
+  padding: 0.25em 0;
+}
+
+#goto_pagetop,
+#lock_page_icon {
+  padding: 0.25em;
+}
+
+#page_settings_icon {
+  padding: 0.25em;
+  cursor: pointer;
+  display: none;
+}
+
+#page_settings_modal,
+#pma_navigation_settings {
+  display: none;
+}
+
+#span_table_comment {
+  font-weight: normal;
+  font-style: italic;
+  white-space: nowrap;
+  margin-#{$left}: 10px;
+}
+
+#serverinfo img {
+  margin: 0 0.1em 0;
+  margin-#{$left}: 0.2em;
+}
+
+#textSQLDUMP {
+  width: 95%;
+  height: 95%;
+  font-family: $font-family-fixed;
+  font-size: 110%;
+}
+
+#TooltipContainer {
+  position: absolute;
+  z-index: 99;
+  width: 20em;
+  height: auto;
+  overflow: visible;
+  visibility: hidden;
+  background-color: #ffc;
+  color: #060;
+  border: 0.1em solid #000;
+  padding: 0.5em;
+}
+
+/* user privileges */
+
+#fieldset_add_user_login {
+  div.item {
+    border-bottom: 1px solid #ddd;
+    padding-bottom: 0.3em;
+    margin-bottom: 0.3em;
+  }
+
+  label {
+    float: $left;
+    display: block;
+    width: 10em;
+    max-width: 100%;
+    text-align: $right;
+    padding-#{$right}: 0.5em;
+    line-height: 35px;
+  }
+
+  span.options {
+    float: $left;
+    display: block;
+    width: 12em;
+    max-width: 100%;
+    padding-#{$right}: 0.5em;
+
+    #select_pred_username,
+    #select_pred_hostname,
+    #select_pred_password {
+      width: 100%;
+      max-width: 100%;
+    }
+  }
+
+  input {
+    width: 12em;
+    clear: $right;
+    max-width: 100%;
+  }
+
+  span.options input {
+    width: auto;
+
+    &[type="button"] {
+      margin: 4px;
+    }
+  }
+}
+
+#fieldset_user_priv div.item {
+  float: $left;
+  width: 9em;
+  max-width: 100%;
+
+  div.item {
+    float: none;
+  }
+
+  label {
+    white-space: nowrap;
+  }
+
+  select {
+    width: 100%;
+  }
+}
+
+#fieldset_user_global_rights fieldset,
+#fieldset_user_group_rights fieldset {
+  float: $left;
+}
+
+/* END user privileges */
+
+/* serverstatus */
+
+.linkElem:hover {
+  text-decoration: underline;
+  color: #235a81;
+  cursor: pointer;
+}
+
+h3#serverstatusqueries span {
+  font-size: 60%;
+  display: inline;
+}
+
+.buttonlinks {
+  float: $right;
+  white-space: nowrap;
+}
+
+/* Also used for the variables page */
+fieldset#tableFilter {
+  padding: 0.1em 1em;
+
+  input[type="submit"] {
+    margin-top: 9px;
+  }
+}
+
+div#serverStatusTabs {
+  margin-top: 1em;
+}
+
+caption a.top {
+  float: $right;
+}
+
+div#serverstatusquerieschart {
+  float: $left;
+  width: 500px;
+  height: 350px;
+  padding-#{$left}: 30px;
+}
+
+table {
+  &#serverstatusqueriesdetails,
+  &#serverstatustraffic {
+    float: $left;
+  }
+
+  &#serverstatusqueriesdetails th {
+    min-width: 35px;
+  }
+
+  &#serverstatusvariables {
+    width: 100%;
+    margin-bottom: 1em;
+
+    .name {
+      width: 18em;
+      white-space: nowrap;
+    }
+
+    .value {
+      width: 6em;
+    }
+  }
+
+  &#serverstatusconnections {
+    float: $left;
+    margin-#{$left}: 30px;
+  }
+}
+
+div {
+  &#serverstatus table {
+    tbody td.descr a,
+    .tblFooters a {
+      white-space: nowrap;
+    }
+  }
+
+  &.liveChart {
+    clear: both;
+    min-width: 500px;
+    height: 400px;
+    padding-bottom: 80px;
+  }
+}
+
+#addChartDialog input[type="text"] {
+  margin: 0;
+  padding: 3px;
+}
+
+div#chartVariableSettings {
+  margin-#{$left}: 10px;
+}
+
+table#chartGrid {
+  td {
+    padding: 3px;
+    margin: 0;
+  }
+
+  div.monitorChart {
+    background: $th-background;
+  }
+}
+
+div.tabLinks {
+  margin-#{$left}: 0.3em;
+  float: $left;
+  padding: 5px 0;
+
+  a,
+  label {
+    margin-#{$right}: 7px;
+  }
+
+  .icon {
+    margin: -0.2em 0.3em 0 0;
+  }
+}
+
+.popupContent {
+  display: none;
+  position: absolute;
+  border: 1px solid #ccc;
+  margin: 0;
+  padding: 3px;
+  background-color: #fff;
+  z-index: 2;
+}
+
+div {
+  &#logTable {
+    padding-top: 10px;
+    clear: both;
+
+    table {
+      width: 100%;
+    }
+  }
+
+  &#queryAnalyzerDialog {
+    min-width: 700px;
+
+    div {
+      &.CodeMirror-scroll {
+        height: auto;
+      }
+
+      &#queryProfiling {
+        height: 300px;
+      }
+    }
+
+    td.explain {
+      width: 250px;
+    }
+
+    table.queryNums {
+      display: none;
+      border: 0;
+      text-align: $left;
+    }
+  }
+}
+
+.smallIndent {
+  padding-#{$left}: 7px;
+}
+
+/* end serverstatus */
+
+/* server variables */
+#serverVariables {
+  table-layout: fixed;
+  width: 100%;
+
+  .var-row > td {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 2em;
+  }
+
+  .var-header {
+    color: $th-color;
+    background: #f3f3f3;
+    font-weight: bold;
+    text-align: $left;
+  }
+
+  .var-row {
+    padding: 0.5em;
+    min-height: 18px;
+  }
+
+  .var-action {
+    width: 120px;
+  }
+
+  .var-name {
+    float: $left;
+
+    &.session {
+      font-weight: normal;
+      font-style: italic;
+    }
+  }
+
+  .var-value {
+    width: 50%;
+    float: $right;
+    text-align: $right;
+  }
+
+  .var-doc {
+    overflow: visible;
+    float: $right;
+  }
+
+  /* server variables editor */
+  .editLink {
+    padding-#{$right}: 1em;
+    float: $left;
+    font-family: sans-serif;
+  }
+
+  .serverVariableEditor {
+    width: 100%;
+    overflow: hidden;
+
+    input {
+      width: 100%;
+      margin: 0 0.5em;
+      box-sizing: border-box;
+      -ms-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      -webkit-box-sizing: border-box;
+      height: 2.2em;
+    }
+
+    div {
+      display: block;
+      overflow: hidden;
+      padding-#{$right}: 1em;
+    }
+
+    a {
+      float: $right;
+      margin: 0 0.5em;
+      line-height: 2em;
+    }
+  }
+}
+
+p.notice {
+  margin: 1.5em 0;
+  border: 1px solid #000;
+  background-repeat: no-repeat;
+  background-color: #555;
+  color: #d4fb6a;
+
+  @if $direction == rtl {
+    background-position: 99% 50%;
+    padding: 25px 10px 10px 10px;
+  } @else {
+    background-position: 10px 50%;
+    padding: 10px 10px 10px 25px;
+  }
+
+  a {
+    color: #fff;
+    text-decoration: underline;
+  }
+}
+
+/* profiling */
+
+div#profilingchart {
+  width: 850px;
+  height: 370px;
+  float: $left;
+}
+
+/* END profiling */
+
+/* table charting */
+
+#resizer {
+  border: 1px solid silver;
+}
+
+/* make room for the resize handle */
+#inner-resizer {
+  padding: 10px;
+}
+
+.chartOption {
+  float: $left;
+  margin-#{$right}: 40px;
+}
+
+/* END table charting */
+
+/* querybox */
+
+#togglequerybox {
+  margin: 0 10px;
+}
+
+#serverstatus h3 {
+  margin: 15px 0;
+  font-weight: normal;
+  color: #999;
+  font-size: 1.7em;
+}
+
+#sectionlinks {
+  padding: 16px;
+  background: #f3f3f3;
+  border: 1px solid #aaa;
+
+  a {
+    font-size: 0.88em;
+    font-weight: bold;
+    line-height: 35px;
+    margin-#{$left}: 7px;
+    border: 1px solid #aaa;
+    padding: 5px 10px;
+    color: #111;
+    text-decoration: none;
+    background: #ddd;
+    white-space: nowrap;
+  }
+}
+
+.buttonlinks a,
+a.button {
+  font-size: 0.88em;
+  font-weight: bold;
+  line-height: 35px;
+  margin-#{$left}: 7px;
+  border: 1px solid #aaa;
+  padding: 5px 10px;
+  color: #111;
+  text-decoration: none;
+  background: #ddd;
+  white-space: nowrap;
+}
+
+div {
+  &#sqlquerycontainer {
+    float: $left;
+    width: 69%;
+  }
+
+  &#tablefieldscontainer {
+    float: $right;
+    width: 29%;
+    margin-top: -20px;
+
+    select {
+      width: 100%;
+      background: #fff;
+      max-width: initial;
+    }
+  }
+}
+
+textarea {
+  &#sqlquery {
+    width: 100%;
+    border: 1px solid #aaa;
+    padding: 5px;
+    font-family: inherit;
+  }
+
+  &#sql_query_edit {
+    height: 7em;
+    width: 95%;
+    display: block;
+  }
+}
+
+div#queryboxcontainer div#bookmarkoptions {
+  margin-top: 0.5em;
+}
+
+/* end querybox */
+
+/* main page */
+
+#mysqlmaininformation,
+#pmamaininformation {
+  float: $left;
+  width: 49%;
+}
+
+#maincontainer ul {
+  list-style-type: square;
+  vertical-align: middle;
+  color: $th-color;
+  margin-#{$left}: 20px;
+
+  li {
+    line-height: 1.5;
+  }
+}
+
+#full_name_layer {
+  position: absolute;
+  padding: 2px;
+  margin-top: -3px;
+  z-index: 801;
+  border: solid 1px #888;
+  background: #fff;
+}
+
+/* END main page */
+
+/* iconic view for ul items */
+
+li {
+  br {
+    display: none;
+  }
+
+  &.no_bullets {
+    list-style-type: none !important;
+  }
+
+  &#li_mysql_client_version {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &#li_create_database {
+    background-color: #f6f6f6;
+    padding: 10px;
+    border: 1px solid $border-color;
+    display: block;
+    margin-bottom: 20px;
+  }
+
+  &#li_select_lang {
+    display: block;
+    padding: 10px;
+    padding-#{$left}: 20px;
+    font-family: $font-family-light;
+
+    select {
+      margin: 0 !important;
+      height: 26px;
+    }
+
+    &:hover {
+      background: #f6f6f6;
+    }
+  }
+
+  &#li_select_mysql_collation {
+    display: block;
+    padding: 10px;
+    padding-#{$left}: 20px;
+    font-family: $font-family-light;
+
+    select {
+      margin: 0 !important;
+    }
+
+    &:hover {
+      background: #f6f6f6;
+    }
+  }
+
+  &#li_select_theme {
+    display: block;
+    padding: 10px;
+    padding-#{$left}: 20px;
+    font-family: $font-family-light;
+
+    select {
+      margin: 0 !important;
+    }
+
+    &::after {
+      content: "Scheme: #{$color-scheme}";
+      margin-#{$left}: 10px;
+    }
+
+    &:hover {
+      background: #f6f6f6;
+    }
+  }
+
+  &#li_change_password {
+    display: block;
+    padding: 10px;
+    padding-#{$left}: 20px;
+    font-family: $font-family-light;
+
+    &:hover {
+      background: #f6f6f6;
+    }
+  }
+
+  &#li_user_preferences {
+    display: block;
+    padding: 10px;
+    padding-#{$left}: 20px;
+    font-family: $font-family-light;
+
+    &:hover {
+      background: #f6f6f6;
+    }
+  }
+
+  &#li_switch_dbstats {
+    background-color: #f6f6f6;
+    padding: 10px;
+    border: 1px solid $border-color;
+    display: block;
+  }
+}
+
+/* END iconic view for ul items */
+
+#body_browse_foreigners {
+  background: $navi-background;
+  margin: 0.5em 0.5em 0 0.5em;
+}
+
+#bodyquerywindow {
+  background: $navi-background;
+}
+
+#bodythemes {
+  width: 500px;
+  margin: auto;
+  text-align: center;
+
+  img {
+    border: 0.1em solid #000;
+  }
+
+  a:hover img {
+    border: 0.1em solid red;
+  }
+}
+
+#fieldset_select_fields {
+  float: $left;
+}
+
+#selflink {
+  clear: both;
+  display: block;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  margin-#{$left}: 20px;
+  margin-#{$right}: 20px;
+  border-top: 1px solid silver;
+  text-align: $right;
+}
+
+#table_innodb_bufferpool_usage,
+#table_innodb_bufferpool_activity {
+  float: $left;
+}
+
+#div_mysql_charset_collations table {
+  float: $left;
+
+  th,
+  td {
+    padding: 0.4em;
+  }
+
+  th#collationHeader {
+    width: 35%;
+  }
+}
+
+.operations_half_width {
+  width: 100%;
+  float: $left;
+  margin-bottom: 10px;
+}
+
+.operations_full_width {
+  width: 100%;
+  clear: both;
+}
+
+#qbe_div_table_list,
+#qbe_div_sql_query {
+  float: $left;
+}
+
+label.desc {
+  width: 30em;
+  float: $left;
+
+  sup {
+    position: absolute;
+  }
+}
+
+code.php {
+  display: block;
+  padding-#{$left}: 0.3em;
+  margin-top: 0;
+  margin-bottom: 0;
+  max-height: 10em;
+  overflow: auto;
+  direction: ltr;
+}
+
+.sqlOuter code.sql,
+div.sqlvalidate,
+#inline_editor_outer {
+  display: block;
+  padding: 1em;
+  margin: 1em;
+  overflow: auto;
+  background-color: $main-background;
+  border: 1px solid $border-color;
+  direction: ltr;
+}
+
+#main_pane_left {
+  width: 60%;
+  min-width: 260px;
+  float: $left;
+  padding-top: 1em;
+}
+
+#main_pane_right {
+  overflow: hidden;
+  min-width: 160px;
+  padding-top: 1em;
+  padding-#{$left}: 3em;
+}
+
+.group {
+  margin-bottom: 1em;
+  padding-bottom: 1em;
+
+  input[type="submit"] {
+    margin-#{$left}: 0;
+  }
+
+  h2 {
+    color: $navi-background;
+    font-size: 2.8em;
+    font-weight: normal;
+    font-family: $font-family-light;
+    margin-top: 0;
+    margin-bottom: 0.6em;
+  }
+}
+
+.group-cnt {
+  padding: 0 0 0 0.5em;
+  display: inline-block;
+  width: 98%;
+}
+
+textarea#partitiondefinition {
+  height: 3em;
+}
+
+/* for elements that should be revealed only via js */
+.hide {
+  display: none;
+}
+
+#list_server {
+  list-style-image: none;
+  padding: 0;
+}
+
+/**
+  *  Progress bar styles
+  */
+
+div {
+  &.upload_progress {
+    width: 400px;
+    margin: 3em auto;
+    text-align: center;
+  }
+
+  &.upload_progress_bar_outer {
+    border: 1px solid #000;
+    width: 202px;
+    position: relative;
+    margin: 0 auto 1em;
+    color: $main-color;
+  }
+
+  &.upload_progress_bar_inner {
+    background-color: $navi-background;
+    width: 0;
+    height: 12px;
+    margin: 1px;
+    overflow: hidden;
+    color: $browse-marker-color;
+    position: relative;
+  }
+
+  &.upload_progress_bar_outer div.percentage {
+    position: absolute;
+    top: 0;
+    #{$left}: 0;
+    width: 202px;
+  }
+
+  &.upload_progress_bar_inner div.percentage {
+    top: -1px;
+    #{$left}: -1px;
+  }
+
+  &#statustext {
+    margin-top: 0.5em;
+  }
+}
+
+table {
+  &#serverconnection_src_remote,
+  &#serverconnection_trg_remote,
+  &#serverconnection_src_local,
+  &#serverconnection_trg_local {
+    float: $left;
+  }
+}
+
+/**
+  *  Validation error message styles
+  */
+
+input {
+  &[type="text"].invalid_value,
+  &[type="password"].invalid_value,
+  &[type="number"].invalid_value,
+  &[type="date"].invalid_value .invalid_value {
+    background: #fcc;
+  }
+}
+
+/**
+  *  Ajax notification styling
+  */
+
+/* additional styles */
+.ajax_notification {
+  top: 0;
+  position: fixed;
+  z-index: 1100;
+  text-align: center;
+  display: inline;
+  #{$left}: 0;
+  #{$right}: 0;
+  background-image: url("../img/ajax_clock_small.gif");
+  background-repeat: no-repeat;
+  background-position: 46%;
+  margin: 0;
+  background-color: $navi-color;
+  color: $main-color;
+  padding: 10px !important;
+  border: none;
+}
+
+.dismissable {
+  margin-#{$left}: -10px;
+  margin-top: -10px;
+}
+
+#loading_parent {
+  /** Need this parent to properly center the notification division */
+  position: relative;
+  width: 100%;
+}
+
+/**
+  * Export and Import styles
+  */
+
+.export_table_list_container {
+  display: inline-block;
+  max-height: 20em;
+  overflow-y: scroll;
+}
+
+.export_table_select {
+  th {
+    text-align: center;
+    vertical-align: middle;
+  }
+
+  .all {
+    font-weight: bold;
+    border-bottom: 1px solid black;
+  }
+}
+
+.export_structure,
+.export_data {
+  text-align: center;
+}
+
+.export_table_name {
+  vertical-align: middle;
+}
+
+.exportoptions h3,
+.importoptions h3 {
+  border-bottom: 1px #ccc solid;
+  font-size: 110%;
+}
+
+.exportoptions ul,
+.importoptions ul,
+.format_specific_options ul {
+  list-style-type: none;
+  margin-bottom: 15px;
+}
+
+.exportoptions li,
+.importoptions li {
+  margin: 7px;
+}
+
+.exportoptions label,
+.importoptions label,
+.exportoptions p,
+.importoptions p {
+  margin: 5px;
+  float: none;
+}
+
+#csv_options label.desc,
+#ldi_options label.desc,
+#latex_options label.desc,
+#output label.desc {
+  float: $left;
+  width: 15em;
+}
+
+.exportoptions,
+.importoptions {
+  margin: 20px 30px 30px;
+  margin-#{$left}: 10px;
+}
+
+.exportoptions #buttonGo,
+.importoptions #buttonGo {
+  padding: 5px 12px;
+  text-decoration: none;
+  cursor: pointer;
+  margin: 0;
+}
+
+.format_specific_options {
+  border: 1px solid #999;
+  margin: 7px 0;
+  padding: 3px;
+
+  h3 {
+    margin: 10px 0 0;
+    margin-#{$left}: 10px;
+    border: 0;
+  }
+}
+
+p.desc {
+  margin: 5px;
+}
+
+/**
+  * Export styles only
+  */
+select {
+  &#db_select,
+  &#table_select {
+    width: 400px;
+  }
+}
+
+.export_sub_options {
+  margin: 20px 0 0;
+  margin-#{$left}: 30px;
+
+  h4 {
+    border-bottom: 1px #999 solid;
+  }
+
+  li {
+    margin-bottom: 0;
+
+    &.subgroup {
+      display: inline-block;
+      margin-top: 0;
+    }
+  }
+}
+
+#output_quick_export {
+  display: none;
+}
+
+/**
+ * Import styles only
+ */
+
+.importoptions #import_notification {
+  margin: 10px 0;
+  font-style: italic;
+}
+
+input#input_import_file {
+  margin: 5px;
+}
+
+.formelementrow {
+  margin: 5px 0 5px 0;
+}
+
+#filterText {
+  vertical-align: baseline;
+}
+
+#popup_background {
+  display: none;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  #{$left}: 0;
+  background: #000;
+  z-index: 1000;
+  overflow: hidden;
+}
+
+/**
+ * Table structure styles
+ */
+#fieldsForm ul.table-structure-actions {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  li {
+    float: $left;
+    margin-#{$right}: 0.3em;
+  }
+
+  .submenu li {
+    padding: 0;
+    margin: 0;
+
+    span {
+      padding: 0.3em;
+      margin: 0.1em;
+    }
+  }
+}
+
+#structure-action-links a {
+  margin-#{$right}: 1em;
+}
+
+/**
+ * Indexes
+ */
+
+#index_frm {
+  .index_info {
+    input,
+    select {
+      width: 14em;
+      box-sizing: border-box;
+      -ms-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      -webkit-box-sizing: border-box;
+    }
+
+    div {
+      padding: 0.2em 0;
+    }
+
+    .label {
+      float: $left;
+      min-width: 12em;
+    }
+  }
+
+  .slider {
+    width: 10em;
+    margin: 0.6em;
+    float: $left;
+  }
+
+  .add_fields {
+    float: $left;
+
+    input {
+      margin-#{$left}: 1em;
+    }
+  }
+
+  input {
+    margin: 0;
+  }
+
+  td {
+    vertical-align: middle;
+  }
+}
+
+table#index_columns {
+  width: 100%;
+
+  select {
+    width: 85%;
+    float: $right;
+  }
+}
+
+#move_columns_dialog {
+  div {
+    padding: 1em;
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    background: $th-background;
+    border: 1px solid #aaa;
+    color: $th-color;
+    font-weight: bold;
+    margin: 0.4em;
+    padding: 0.2em;
+  }
+}
+
+/* config forms */
+
+.config-form {
+  ul.tabs {
+    margin: 1.1em 0.2em 0;
+    padding: 0 0 0.3em 0;
+    list-style: none;
+    font-weight: bold;
+
+    li {
+      float: $left;
+      margin-bottom: -1px;
+
+      a {
+        display: block;
+        margin: 0.1em 0.2em 0;
+        white-space: nowrap;
+        text-decoration: none;
+        border: 1px solid $bg-two;
+        border-bottom: 1px solid #ddd;
+        font-family: $font-family-bold;
+        padding: 7px 10px;
+        background: #f2f2f2;
+        color: #555;
+
+        &:hover,
+        &:active {
+          background: #e5e5e5;
+        }
+      }
+
+      &.active a {
+        background-color: #fff;
+        margin-top: 1px;
+        color: #000;
+        border-color: #ddd;
+        border-bottom: 1px solid #fff;
+      }
+    }
+  }
+
+  fieldset {
+    margin-top: 0;
+    padding: 0;
+    clear: both;
+    background: none;
+  }
+
+  legend {
+    display: none;
+  }
+
+  fieldset {
+    p {
+      margin: 0;
+      padding: 10px;
+      background: #fff;
+      font-family: $font-family-light;
+      font-size: 16px;
+    }
+
+    /* form error list */
+    .errors {
+      margin: 0 -2px 1em;
+      padding: 0.5em 1.5em;
+      background: #fbead9;
+      border: 0 #c83838 solid;
+      border-width: 1px 0;
+      list-style: none;
+      font-family: sans-serif;
+      font-size: small;
+    }
+
+    /* field error list */
+    .inline_errors {
+      margin: 0.3em 0.3em 0.3em;
+      margin-#{$left}: 0;
+      padding: 0;
+      list-style: none;
+      color: #9a0000;
+      font-size: small;
+    }
+
+    table {
+      background-color: #fff;
+    }
+
+    label {
+      font-weight: normal;
+    }
+
+    textarea {
+      margin: 5px;
+      padding: 5px;
+    }
+  }
+}
+
+.insertRowTable textarea {
+  margin: 5px;
+  padding: 5px;
+}
+
+.config-form fieldset {
+  th {
+    padding: 10px;
+    padding-#{$left}: 0.5em;
+    text-align: $left;
+    vertical-align: top;
+    width: 40%;
+  }
+
+  .doc {
+    margin-#{$left}: 1em;
+  }
+
+  .disabled-notice {
+    margin-#{$left}: 1em;
+    font-size: 80%;
+    text-transform: uppercase;
+    color: #e00;
+    cursor: help;
+  }
+
+  td {
+    padding-top: 0.3em;
+    padding-bottom: 0.3em;
+    vertical-align: top;
+    border-bottom: 1px $navi-color solid;
+    border-#{$right}: none;
+  }
+
+  th {
+    border-bottom: 1px $navi-color solid;
+    border-#{$right}: none;
+
+    small {
+      display: block;
+      font-weight: normal;
+      font-family: sans-serif;
+      font-size: x-small;
+      color: #444;
+    }
+  }
+}
+
+fieldset {
+  .group-header {
+    th {
+      background: $bg-two;
+    }
+
+    + tr th {
+      padding-top: 0.6em;
+    }
+  }
+
+  .group-field-1 th,
+  .group-header-2 th {
+    padding-#{$left}: 1.5em;
+  }
+
+  .group-field-2 th,
+  .group-header-3 th {
+    padding-#{$left}: 3em;
+  }
+
+  .group-field-3 th {
+    padding-#{$left}: 4.5em;
+  }
+
+  .disabled-field {
+    th {
+      color: #666;
+      background-color: #ddd;
+
+      small {
+        color: #666;
+        background-color: #ddd;
+      }
+    }
+
+    td {
+      color: #666;
+      background-color: #ddd;
+    }
+  }
+}
+
+form {
+  &.create_table_form fieldset.tblFooters,
+  &#multi_edit_central_columns fieldset.tblFooters {
+    background: none;
+    border: none;
+  }
+
+  &#tableOptionsForm {
+    input[name="comment"],
+    select[name="tbl_collation"] {
+      width: 130px;
+    }
+  }
+
+  &#formDatabaseComment .tblFooters,
+  &#create_table_form_minimal .tblFooters,
+  &#rename_db_form .tblFooters,
+  &#copy_db_form .tblFooters,
+  &#change_db_charset_form .tblFooters,
+  &#alterTableOrderby .tblFooters,
+  &#moveTableForm .tblFooters,
+  &#copyTable .tblFooters,
+  &#tableOptionsForm .tblFooters {
+    margin-top: -40px;
+  }
+}
+
+#create_table_form_minimal {
+  display: block;
+}
+
+#fieldset_zoom_search table {
+  th,
+  td {
+    line-height: 35px;
+  }
+}
+
+#fieldset_table_qbe table {
+  th,
+  td {
+    line-height: 35px;
+  }
+}
+
+#fieldset_delete_user_footer {
+  margin-top: -59px;
+}
+
+#db_or_table_specific_priv .tblFooters {
+  margin-top: -68px;
+}
+
+#edit_user_dialog,
+#add_user_dialog {
+  margin: 20px !important;
+}
+
+.config-form {
+  .lastrow {
+    padding: 0.5em;
+    text-align: center;
+  }
+
+  span.checkbox {
+    padding: 2px;
+    display: inline-block;
+  }
+
+  /* customized field */
+  .custom {
+    background: #ffc;
+  }
+
+  span.checkbox.custom {
+    padding: 1px;
+    border: 1px #edec90 solid;
+    background: #ffc;
+  }
+
+  img.ic_s_reload {
+    -webkit-filter: invert(70%);
+    filter: invert(70%);
+  }
+
+  .field-error {
+    border-color: #a11 !important;
+  }
+
+  input {
+    &[type="text"],
+    &[type="password"],
+    &[type="number"] {
+      border: 1px #a7a6aa solid;
+      height: auto;
+
+      &:focus {
+        border: 1px #6676ff solid;
+        background: #f7fbff;
+      }
+    }
+  }
+
+  select,
+  textarea {
+    border: 1px #a7a6aa solid;
+    height: auto;
+
+    &:focus {
+      border: 1px #6676ff solid;
+      background: #f7fbff;
+    }
+  }
+
+  .field-comment-mark {
+    font-family: serif;
+    color: #007;
+    cursor: help;
+    padding: 0 0.2em;
+    font-weight: bold;
+    font-style: italic;
+  }
+
+  .field-comment-warning {
+    color: #a00;
+  }
+
+  dd {
+    margin-#{$left}: 0.5em;
+
+    &::before {
+      content: "\25B8  ";
+    }
+  }
+}
+
+.click-hide-message {
+  cursor: pointer;
+}
+
+.prefsmanage_opts {
+  margin-#{$left}: 2em;
+}
+
+#prefs_autoload {
+  margin-bottom: 0.5em;
+  margin-#{$left}: 0.5em;
+}
+
+input#auto_increment_opt {
+  width: min-content;
+}
+
+#placeholder {
+  .button {
+    position: absolute;
+    cursor: pointer;
+  }
+
+  div.button {
+    font-size: smaller;
+    color: #999;
+    background-color: #eee;
+    padding: 2px;
+  }
+}
+
+.wrapper {
+  float: $left;
+  margin-bottom: 1.5em;
+}
+
+.toggleButton {
+  position: relative;
+  cursor: pointer;
+  font-size: 0.8em;
+  text-align: center;
+  line-height: 1.4em;
+  height: 1.55em;
+  overflow: hidden;
+  border-#{$right}: 0.1em solid #888;
+  border-#{$left}: 0.1em solid #888;
+
+  table,
+  td,
+  img {
+    padding: 0;
+    position: relative;
+  }
+
+  .container {
+    position: absolute;
+
+    td {
+      background: none;
+    }
+  }
+
+  .toggleOn {
+    color: #fff;
+    padding: 0 1em;
+  }
+
+  .toggleOff {
+    padding: 0 1em;
+  }
+}
+
+.doubleFieldset {
+  fieldset {
+    width: 48%;
+    float: $left;
+    padding: 0;
+
+    &.left {
+      margin-#{$right}: 1%;
+    }
+
+    &.right {
+      margin-#{$left}: 1%;
+    }
+  }
+
+  legend {
+    margin-#{$left}: 1.5em;
+  }
+
+  div.wrap {
+    padding: 1.5em;
+  }
+}
+
+form.append_fields_form .tblFooters {
+  background: none;
+  border: none;
+}
+
+#table_columns {
+  input {
+    &[type="text"],
+    &[type="password"],
+    &[type="number"],
+    &[type="date"] {
+      width: 10em;
+      box-sizing: border-box;
+      -ms-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      -webkit-box-sizing: border-box;
+    }
+  }
+
+  select {
+    width: 10em;
+    box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    margin: 6px;
+  }
+}
+
+#placeholder {
+  position: relative;
+  border: 1px solid #aaa;
+  float: $right;
+  overflow: hidden;
+
+  .button {
+    position: absolute;
+  }
+}
+
+.placeholderDrag {
+  cursor: move;
+}
+
+#left_arrow {
+  #{$left}: 8px;
+  top: 26px;
+}
+
+#right_arrow {
+  #{$left}: 26px;
+  top: 26px;
+}
+
+#up_arrow {
+  #{$left}: 17px;
+  top: 8px;
+}
+
+#down_arrow {
+  #{$left}: 17px;
+  top: 44px;
+}
+
+#zoom_in {
+  #{$left}: 17px;
+  top: 67px;
+}
+
+#zoom_world {
+  #{$left}: 17px;
+  top: 85px;
+}
+
+#zoom_out {
+  #{$left}: 17px;
+  top: 103px;
+}
+
+.colborder {
+  cursor: col-resize;
+  height: 100%;
+  margin-#{$left}: -6px;
+  position: absolute;
+  width: 5px;
+}
+
+.colborder_active {
+  border-#{$right}: 2px solid #a44;
+}
+
+.pma_table,
+.sticky_columns {
+  th.draggable span {
+    display: block;
+    overflow: hidden;
+  }
+}
+
+.pma_table {
+  td {
+    position: static;
+  }
+
+  tbody td span {
+    display: block;
+    overflow: hidden;
+
+    code span {
+      display: inline;
+    }
+  }
+}
+
+.modal-copy input {
+  display: block;
+  width: 100%;
+  margin-top: 1.5em;
+  padding: 0.3em 0;
+}
+
+.cRsz {
+  position: absolute;
+}
+
+.cCpy {
+  background: #333;
+  color: #fff;
+  font-weight: bold;
+  margin: 0.1em;
+  padding: 0.3em;
+  position: absolute;
+}
+
+.cPointer {
+  $height: 20px;
+  $width: 10px;
+
+  height: $height;
+  width: $width;
+  margin-#{$left}: $height / -2;
+  margin-top: $width / -2;
+  position: absolute;
+  background: url("../img/col_pointer.png");
+}
+
+.tooltip {
+  background: #333 !important;
+  opacity: 0.8 !important;
+  border: 1px solid #000 !important;
+  font-size: 10px !important;
+  font-weight: normal !important;
+  padding: 5px !important;
+  width: 260px;
+  line-height: 1.5;
+
+  * {
+    background: none !important;
+    color: #fff !important;
+  }
+}
+
+.cDrop {
+  #{$left}: 0;
+  position: absolute;
+  top: 0;
+}
+
+.coldrop {
+  background: url("../img/col_drop.png");
+  cursor: pointer;
+  height: 16px;
+  margin-#{$left}: 0.3em;
+  margin-top: 0.3em;
+  position: absolute;
+  width: 16px;
+
+  &:hover {
+    background-color: #999;
+  }
+}
+
+.coldrop-hover {
+  background-color: #999;
+}
+
+.cList {
+  background: #fff;
+  border: solid 1px #ccc;
+  position: absolute;
+
+  .lDiv div {
+    padding: 0.2em 0.5em 0.2em;
+    padding-#{$left}: 0.2em;
+
+    &:hover {
+      background: $navi-background;
+      cursor: pointer;
+      color: #fff;
+    }
+
+    input {
+      cursor: pointer;
+    }
+  }
+}
+
+.showAllColBtn {
+  border-bottom: solid 1px #ccc;
+  border-top: solid 1px #ccc;
+  cursor: pointer;
+  font-size: 0.9em;
+  font-family: $font-family-bold;
+  padding: 0.35em 1em;
+  text-align: center;
+  font-weight: normal;
+
+  &:hover {
+    background: $navi-background;
+    cursor: pointer;
+    color: #fff;
+  }
+}
+
+#page_content {
+  line-height: 1.5;
+}
+
+.navigation_separator {
+  color: #eee;
+  display: inline-block;
+  font-size: 1.5em;
+  text-align: center;
+  height: 1.4em;
+}
+
+.navigation {
+  width: 100%;
+  background-color: $navi-background;
+  color: $navi-color;
+
+  td {
+    margin: 0;
+    padding: 0;
+    vertical-align: middle;
+    white-space: nowrap;
+  }
+
+  input {
+    &[type="submit"] {
+      background: $navi-background;
+      border: none;
+      filter: none;
+      margin: 5px;
+      padding: 0.4em;
+
+      &:hover {
+        color: $button-color;
+        cursor: pointer;
+        background-color: $th-color;
+      }
+    }
+
+    &.edit_mode_active {
+      color: $button-color;
+      cursor: pointer;
+      background-color: $th-color;
+    }
+  }
+
+  select {
+    margin: 0 0.8em;
+    border: none;
+  }
+
+  input[type="text"] {
+    border: none;
+  }
+}
+
+.navigation_goto {
+  width: 100%;
+}
+
+.insertRowTable {
+  td,
+  th {
+    vertical-align: middle;
+  }
+}
+
+.cEdit {
+  margin: 0;
+  padding: 0;
+  position: absolute;
+
+  input {
+    &[type="text"],
+    &[type="password"],
+    &[type="number"] {
+      background: #fff;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+    }
+  }
+
+  .edit_area {
+    background: #fff;
+    border: 1px solid #999;
+    min-width: 10em;
+    padding: 0.3em 0.5em;
+
+    select,
+    textarea {
+      width: 97%;
+    }
+  }
+
+  .cell_edit_hint {
+    color: #555;
+    font-size: 0.8em;
+    margin: 0.3em 0.2em;
+  }
+
+  .edit_box {
+    overflow-x: hidden;
+    overflow-y: scroll;
+    padding: 0;
+    margin-top: 10px;
+  }
+
+  .edit_box_posting {
+    background: #fff url("../img/ajax_clock_small.gif") no-repeat right center;
+    padding-#{$right}: 1.5em;
+  }
+
+  .edit_area_loading {
+    background: #fff url("../img/ajax_clock_small.gif") no-repeat center;
+    height: 10em;
+  }
+
+  .goto_link {
+    background: #eee;
+    color: #555;
+    padding: 0.2em 0.3em;
+  }
+}
+
+.saving_edited_data {
+  background: url("../img/ajax_clock_small.gif") no-repeat left;
+  padding-#{$left}: 20px;
+}
+
+.relationalTable select {
+  width: 125px;
+  margin-#{$right}: 5px;
+}
+
+/* css for timepicker */
+
+.ui-timepicker-div {
+  .ui-widget-header {
+    margin-bottom: 8px;
+  }
+
+  dl {
+    text-align: $left;
+
+    dt {
+      height: 25px;
+      margin-bottom: -25px;
+    }
+
+    dd {
+      margin: 0 10px 10px 85px;
+    }
+  }
+
+  td {
+    font-size: 90%;
+  }
+}
+
+.ui-tpicker-grid-label {
+  background: none;
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ui-timepicker-rtl {
+  direction: rtl;
+
+  dl {
+    text-align: $right;
+
+    dd {
+      margin: 0 65px 10px 10px;
+    }
+  }
+}
+
+body .ui-widget {
+  font-size: 1em;
+}
+
+body #ui-datepicker-div {
+  z-index: 9999 !important;
+}
+
+.ui-dialog fieldset legend a {
+  color: #235a81;
+}
+
+.report-data {
+  height: 13em;
+  overflow: scroll;
+  width: 570px;
+  border: solid 1px;
+  background: white;
+  padding: 2px;
+}
+
+.report-description {
+  height: 10em;
+  width: 570px;
+}
+
+div#page_content div {
+  &#tableslistcontainer {
+    margin-top: 1em;
+
+    table.data {
+      border-top: 0.1px solid #eee;
+    }
+  }
+
+  &.notice,
+  &.result_query {
+    margin-top: 1em;
+  }
+}
+
+table.show_create {
+  margin-top: 1em;
+
+  td {
+    border-#{$right}: 1px solid #bbb;
+  }
+}
+
+#alias_modal {
+  table th {
+    vertical-align: middle;
+    padding-#{$left}: 1em;
+  }
+
+  label.col-2 {
+    min-width: 20%;
+    display: inline-block;
+  }
+
+  select {
+    width: 25%;
+    margin-#{$right}: 2em;
+  }
+
+  label {
+    font-weight: bold;
+  }
+}
+
+.small_font {
+  font-size: smaller;
+}
+
+/* Console styles */
+#pma_console_container {
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  #{$left}: 0;
+  z-index: 100;
+}
+
+#pma_console {
+  position: relative;
+  margin-#{$left}: 250px;
+
+  .templates {
+    display: none;
+  }
+
+  .mid_text {
+    vertical-align: middle;
+  }
+
+  .toolbar {
+    position: relative;
+    background: $th-background;
+    border-top: solid 1px #ccc;
+    cursor: n-resize;
+
+    span {
+      vertical-align: middle;
+    }
+
+    &.collapsed {
+      cursor: default;
+
+      &:not(:hover) {
+        display: inline-block;
+        border-#{$right}: solid 1px #ccc;
+      }
+
+      > .button {
+        display: none;
+      }
+    }
+  }
+
+  .message span {
+    &.text,
+    &.action {
+      padding: 0 3px;
+      display: inline-block;
+    }
+  }
+
+  .toolbar {
+    .button,
+    .text {
+      padding: 0 3px;
+      display: inline-block;
+    }
+  }
+
+  .switch_button {
+    padding: 0 3px;
+    display: inline-block;
+  }
+
+  .message span.action,
+  .toolbar .button,
+  .switch_button {
+    cursor: pointer;
+  }
+
+  .toolbar {
+    .text {
+      font-weight: bold;
+    }
+
+    .button,
+    .text {
+      margin-#{$right}: 0.4em;
+      float: $right;
+    }
+  }
+
+  .content {
+    overflow-x: hidden;
+    overflow-y: auto;
+    margin-bottom: -65px;
+    border-top: solid 1px #ccc;
+    background: #fff;
+    padding-top: 0.4em;
+
+    &.console_dark_theme {
+      background: #000;
+      color: #fff;
+
+      .CodeMirror-wrap {
+        background: #000;
+        color: #fff;
+      }
+
+      .action_content {
+        color: #000;
+      }
+
+      .message {
+        border-color: #373b41;
+      }
+
+      .CodeMirror-cursor {
+        border-color: #fff;
+      }
+
+      .cm-keyword {
+        color: #de935f;
+      }
+    }
+  }
+
+  .message,
+  .query_input {
+    position: relative;
+    font-family: Monaco, Consolas, monospace;
+    cursor: text;
+    margin: 0 10px 0.2em 1.4em;
+  }
+
+  .message {
+    border-bottom: solid 1px #ccc;
+    padding-bottom: 0.2em;
+
+    &.expanded > .action_content {
+      position: relative;
+    }
+
+    &::before {
+      #{$left}: -0.7em;
+      position: absolute;
+      content: ">";
+    }
+  }
+
+  .query_input {
+    &::before {
+      #{$left}: -0.7em;
+      position: absolute;
+      content: ">";
+      top: -2px;
+    }
+
+    textarea {
+      width: 100%;
+      height: 4em;
+      resize: vertical;
+    }
+  }
+
+  .message {
+    &:hover::before {
+      color: #7cf;
+      font-weight: bold;
+    }
+
+    &.expanded::before {
+      content: "]";
+    }
+
+    &.welcome::before {
+      display: none;
+    }
+
+    &.failed {
+      &::before,
+      &.expanded::before,
+      &:hover::before {
+        content: "=";
+        color: #944;
+      }
+    }
+
+    &.pending::before {
+      opacity: 0.3;
+    }
+
+    &.collapsed > .query {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    &.expanded > .query {
+      display: block;
+      white-space: pre;
+      word-wrap: break-word;
+    }
+
+    .text.targetdb,
+    &.collapsed .action.collapse,
+    &.expanded .action.expand {
+      display: none;
+    }
+
+    .action {
+      &.requery,
+      &.profiling,
+      &.explain,
+      &.bookmark {
+        display: none;
+      }
+    }
+
+    &.select .action {
+      &.profiling,
+      &.explain {
+        display: inline-block;
+      }
+    }
+
+    &.history .text.targetdb,
+    &.successed .text.targetdb {
+      display: inline-block;
+    }
+
+    &.history .action {
+      &.requery,
+      &.bookmark {
+        display: inline-block;
+      }
+    }
+
+    &.bookmark .action {
+      &.requery,
+      &.bookmark {
+        display: inline-block;
+      }
+    }
+
+    &.successed .action {
+      &.requery,
+      &.bookmark {
+        display: inline-block;
+      }
+    }
+
+    .action_content {
+      position: absolute;
+      bottom: 100%;
+      background: #ccc;
+      border: solid 1px #aaa;
+    }
+  }
+
+  .message {
+    &.bookmark .text.targetdb,
+    .text.query_time {
+      margin: 0;
+      display: inline-block;
+    }
+
+    &.failed .text.query_time,
+    .text.failed {
+      display: none;
+    }
+
+    &.failed .text.failed {
+      display: inline-block;
+    }
+
+    .text {
+      background: #fff;
+    }
+
+    &.collapsed {
+      > .action_content {
+        display: none;
+      }
+
+      &:hover > .action_content {
+        display: block;
+      }
+    }
+
+    .bookmark_label {
+      padding: 0 4px;
+      top: 0;
+      background: #369;
+      color: #fff;
+
+      &.shared {
+        background: #396;
+      }
+    }
+  }
+
+  .query_input {
+    position: relative;
+  }
+
+  .mid_layer {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    background: #ccc;
+    display: none;
+    cursor: pointer;
+    z-index: 200;
+  }
+
+  .card {
+    position: absolute;
+    width: 94%;
+    height: 100%;
+    min-height: 48px;
+    #{$left}: 100%;
+    top: 0;
+    border-#{$left}: solid 1px #999;
+    z-index: 300;
+    transition: $left 0.2s;
+    -ms-transition: $left 0.2s;
+    -webkit-transition: $left 0.2s;
+    -moz-transition: $left 0.2s;
+
+    &.show {
+      #{$left}: 6%;
+    }
+  }
+}
+
+#pma_bookmarks .content.add_bookmark,
+#pma_console_options .content {
+  padding: 4px 6px;
+}
+
+#pma_bookmarks .content.add_bookmark {
+  .options {
+    margin-#{$left}: 1.4em;
+    padding-bottom: 0.4em;
+    margin-bottom: 0.4em;
+    border-bottom: solid 1px #ccc;
+
+    button {
+      margin: 0 7px;
+      vertical-align: bottom;
+    }
+  }
+
+  input[type="text"] {
+    margin: 0;
+    padding: 2px 4px;
+  }
+}
+
+#pma_console {
+  .button.hide,
+  .message span.text.hide {
+    display: none;
+  }
+}
+
+#debug_console {
+  &.grouped .ungroup_queries {
+    display: inline-block;
+  }
+
+  &.ungrouped {
+    .group_queries {
+      display: inline-block;
+    }
+
+    .ungroup_queries,
+    .sort_count {
+      display: none;
+    }
+  }
+
+  &.grouped .group_queries {
+    display: none;
+  }
+
+  .count {
+    margin-#{$right}: 8px;
+  }
+
+  .show_trace .trace,
+  .show_args .args {
+    display: block;
+  }
+
+  .hide_trace .trace,
+  .hide_args .args,
+  .show_trace .action.dbg_show_trace,
+  .hide_trace .action.dbg_hide_trace {
+    display: none;
+  }
+
+  .traceStep {
+    &.hide_args .action.dbg_hide_args,
+    &.show_args .action.dbg_show_args {
+      display: none;
+    }
+
+    &::after {
+      content: "";
+      display: table;
+      clear: both;
+    }
+  }
+
+  .trace.welcome::after,
+  .debug > .welcome::after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+
+  .debug_summary {
+    float: $left;
+  }
+
+  .trace.welcome .time,
+  .traceStep .file,
+  .script_name {
+    float: $right;
+  }
+
+  .traceStep .args pre {
+    margin: 0;
+  }
+}
+
+/* Code mirror console style */
+
+.cm-s-pma {
+  .CodeMirror-code {
+    font-family: Monaco, Consolas, monospace;
+
+    pre {
+      font-family: Monaco, Consolas, monospace;
+    }
+  }
+
+  .CodeMirror-measure > pre,
+  .CodeMirror-code > pre,
+  .CodeMirror-lines {
+    padding: 0;
+  }
+
+  &.CodeMirror {
+    resize: none;
+    height: auto;
+    width: 100%;
+    min-height: initial;
+    max-height: initial;
+  }
+
+  .CodeMirror-scroll {
+    cursor: text;
+  }
+}
+
+/* PMA drop-improt style */
+
+.pma_drop_handler {
+  display: none;
+  position: fixed;
+  top: 0;
+  #{$left}: 0;
+  width: 100%;
+  background: rgba(0, 0, 0, 0.6);
+  height: 100%;
+  z-index: 999;
+  color: white;
+  font-size: 30pt;
+  text-align: center;
+  padding-top: 20%;
+}
+
+.pma_sql_import_status {
+  display: none;
+  position: fixed;
+  bottom: 0;
+  #{$right}: 25px;
+  width: 400px;
+  border: 1px solid #999;
+  background: #f3f3f3;
+
+  h2 {
+    background-color: #bbb;
+    padding: 0.1em 0.3em;
+    margin-top: 0;
+    margin-bottom: 0;
+    color: #fff;
+    font-size: 1.6em;
+    font-weight: normal;
+  }
+}
+
+.pma_drop_result h2 {
+  background-color: #bbb;
+  padding: 0.1em 0.3em;
+  margin-top: 0;
+  margin-bottom: 0;
+  color: #fff;
+  font-size: 1.6em;
+  font-weight: normal;
+}
+
+.pma_sql_import_status {
+  div {
+    height: 270px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    list-style-type: none;
+
+    li {
+      padding: 8px 10px;
+      border-bottom: 1px solid #bbb;
+      color: rgb(148, 14, 14);
+      background: white;
+
+      .filesize {
+        float: $right;
+      }
+    }
+  }
+
+  h2 {
+    .minimize {
+      float: $right;
+      margin-#{$right}: 5px;
+      padding: 0 10px;
+    }
+
+    .close {
+      float: $right;
+      margin-#{$right}: 5px;
+      padding: 0 10px;
+      display: none;
+    }
+
+    .minimize:hover,
+    .close:hover {
+      background: rgba(155, 149, 149, 0.78);
+      cursor: pointer;
+    }
+  }
+}
+
+.pma_drop_result h2 .close:hover {
+  background: rgba(155, 149, 149, 0.78);
+  cursor: pointer;
+}
+
+.pma_drop_file_status {
+  color: #235a81;
+
+  span.underline:hover {
+    cursor: pointer;
+    text-decoration: underline;
+  }
+}
+
+.pma_drop_result {
+  position: fixed;
+  top: 10%;
+  #{$left}: 20%;
+  width: 60%;
+  background: white;
+  min-height: 300px;
+  z-index: 800;
+  cursor: move;
+
+  h2 .close {
+    float: $right;
+    margin-#{$right}: 5px;
+    padding: 0 10px;
+  }
+}
+
+.dependencies_box {
+  background-color: white;
+  border: 3px ridge black;
+}
+
+#composite_index_list {
+  list-style-type: none;
+  list-style-position: inside;
+}
+
+span.drag_icon {
+  display: inline-block;
+  background-image: url("../img/s_sortable.png");
+  background-position: center center;
+  background-repeat: no-repeat;
+  width: 1em;
+  height: 3em;
+  cursor: move;
+}
+
+.topmargin {
+  margin-top: 1em;
+}
+
+meter {
+  &[value="1"]::-webkit-meter-optimum-value {
+    background: linear-gradient(white 3%, #e32929 5%, transparent 10%, #e32929);
+  }
+
+  &[value="2"]::-webkit-meter-optimum-value {
+    background: linear-gradient(white 3%, #f60 5%, transparent 10%, #f60);
+  }
+
+  &[value="3"]::-webkit-meter-optimum-value {
+    background: linear-gradient(white 3%, #ffd700 5%, transparent 10%, #ffd700);
+  }
+}
+
+/* styles for sortable tables created with tablesorter jquery plugin */
+th {
+  &.header {
+    cursor: pointer;
+    color: #235a81;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    .sorticon {
+      width: 16px;
+      height: 16px;
+      background-repeat: no-repeat;
+      background-position: right center;
+      display: inline-table;
+      vertical-align: middle;
+      float: $right;
+    }
+  }
+
+  &.headerSortUp .sorticon {
+    background-image: url("../img/s_desc.png");
+  }
+
+  &.headerSortDown {
+    &:hover .sorticon {
+      background-image: url("../img/s_desc.png");
+    }
+
+    .sorticon {
+      background-image: url("../img/s_asc.png");
+    }
+  }
+
+  &.headerSortUp:hover .sorticon {
+    background-image: url("../img/s_asc.png");
+  }
+}
+
+/* end of styles of sortable tables */
+
+/* styles for jQuery-ui to support rtl languages */
+
+body {
+  .ui-dialog {
+    .ui-dialog-titlebar-close {
+      #{$right}: 0.3em;
+      #{$left}: initial;
+    }
+
+    .ui-dialog-title {
+      float: $left;
+    }
+
+    .ui-dialog-buttonpane .ui-dialog-buttonset {
+      float: $right;
+    }
+  }
+
+  .ui-corner-all,
+  .ui-corner-top,
+  .ui-corner-left,
+  .ui-corner-tl {
+    border-top-left-radius: 0;
+  }
+
+  .ui-corner-all,
+  .ui-corner-top,
+  .ui-corner-right,
+  .ui-corner-tr {
+    border-top-right-radius: 0;
+  }
+
+  .ui-corner-all,
+  .ui-corner-bottom,
+  .ui-corner-left,
+  .ui-corner-bl {
+    border-bottom-left-radius: 0;
+  }
+
+  .ui-corner-all,
+  .ui-corner-bottom,
+  .ui-corner-right,
+  .ui-corner-br {
+    border-bottom-right-radius: 0;
+  }
+
+  .ui-dialog {
+    padding: 0;
+
+    .ui-widget-header {
+      color: $button-color;
+      border: none;
+      background-color: $navi-background;
+      background-image: none;
+    }
+
+    .ui-dialog-title {
+      padding: 5px;
+      font-weight: normal;
+    }
+
+    .ui-dialog-buttonpane button {
+      font-family: $font-family;
+      color: $button-color;
+      background-color: $navi-background;
+      background-image: none;
+      border: 1px solid $button-background;
+
+      &.ui-state-hover {
+        background-color: $button-hover;
+        border: 1px solid $button-hover;
+      }
+
+      &.ui-state-active {
+        background-color: #333;
+        border: 1px solid #333;
+      }
+    }
+  }
+}
+
+#tooltip_editor {
+  font-size: 12px;
+  background-color: #fff;
+  opacity: 0.95;
+  filter: alpha(opacity=95);
+  padding: 5px;
+}
+
+#tooltip_font {
+  font-weight: bold;
+}
+
+#selection_box {
+  z-index: 1000;
+  height: 205px;
+  position: absolute;
+  background-color: #87ceeb;
+  opacity: 0.4;
+  filter: alpha(opacity=40);
+  pointer-events: none;
+}
+
+#filter_query_text {
+  vertical-align: baseline;
+}
diff --git a/srcs/phpmyadmin/themes/metro/scss/_designer.scss b/srcs/phpmyadmin/themes/metro/scss/_designer.scss
new file mode 100644
index 0000000..78905c0
--- /dev/null
+++ b/srcs/phpmyadmin/themes/metro/scss/_designer.scss
@@ -0,0 +1,466 @@
+// Designer styles for the Metro theme
+.input_tab {
+  background-color: #efefef;
+  color: #000;
+  border: 1px solid #ccc;
+}
+
+.content_fullscreen {
+  position: relative;
+  overflow: auto;
+}
+
+#canvas_outer {
+  position: relative;
+  width: 100%;
+  display: block;
+}
+
+#canvas {
+  background-color: #fff;
+  color: #000;
+}
+
+canvas.designer {
+  display: inline-block;
+  overflow: hidden;
+  text-align: $left;
+
+  * {
+    behavior: url(#default#VML);
+  }
+}
+
+.designer_tab {
+  color: #333;
+  border-collapse: collapse;
+  border: 1px solid #ccc;
+  z-index: 1;
+  -moz-user-select: none;
+
+  .header {
+    background-color: #f6f6f6;
+  }
+}
+
+.tab_zag {
+  text-align: center;
+  cursor: move;
+  padding: 1px;
+  font-weight: bold;
+  vertical-align: middle;
+}
+
+.tab_zag_2 {
+  text-align: center;
+  cursor: move;
+  padding: 1px;
+  font-weight: bold;
+  background-color: #f6f6f6;
+  vertical-align: middle;
+}
+
+.tab_field {
+  background: #fff;
+  color: #000;
+  cursor: default;
+
+  &:hover {
+    background-color: #cfc;
+    color: #000;
+    background-repeat: repeat-x;
+    cursor: default;
+  }
+}
+
+.tab_field_3 {
+  background-color: #ffe6e6 !important;
+  color: #000;
+  cursor: default;
+
+  &:hover {
+    background-color: #cfc;
+    color: #000;
+    background-repeat: repeat-x;
+    cursor: default;
+  }
+}
+
+#designer_hint {
+  white-space: nowrap;
+  position: absolute;
+  background-color: #9f9;
+  color: #000;
+  z-index: 3;
+  border: #0c6 solid 1px;
+  display: none;
+}
+
+.scroll_tab {
+  overflow: auto;
+  width: 100%;
+  height: 500px;
+}
+
+.designer_Tabs {
+  cursor: default;
+  color: #333;
+  white-space: nowrap;
+  text-decoration: none;
+  text-indent: 3px;
+  margin-#{$left}: 2px;
+  text-align: $left;
+  border: #ccc solid 0;
+
+  &:hover {
+    cursor: default;
+    color: #666;
+    background: #eee;
+    text-indent: 3px;
+    white-space: nowrap;
+    text-decoration: none;
+    border: #eee solid 0;
+    text-align: $left;
+  }
+}
+
+.owner {
+  font-weight: normal;
+  color: #888;
+}
+
+.option_tab {
+  padding-#{$left}: 2px;
+  padding-#{$right}: 2px;
+  width: 5px;
+}
+
+.select_all {
+  vertical-align: top;
+  padding-#{$left}: 2px;
+  padding-#{$right}: 2px;
+  cursor: default;
+  width: 1px;
+  color: #000;
+  background-repeat: repeat-x;
+}
+
+.small_tab {
+  vertical-align: top;
+  background-color: #666;
+  color: #fff;
+  cursor: default;
+  text-align: center;
+  font-weight: bold;
+  padding-#{$left}: 2px;
+  padding-#{$right}: 2px;
+  width: 1px;
+  text-decoration: none;
+
+  &:hover {
+    vertical-align: top;
+    color: #fff;
+    background-color: #f96;
+    cursor: default;
+    padding-#{$left}: 2px;
+    padding-#{$right}: 2px;
+    text-align: center;
+    font-weight: bold;
+    width: 1px;
+    text-decoration: none;
+  }
+}
+
+.small_tab_pref {
+  background-color: #f6f6f6;
+  text-align: center;
+  width: 1px;
+
+  &:hover {
+    vertical-align: top;
+    color: #fff;
+    background-color: #f96;
+    cursor: default;
+    text-align: center;
+    font-weight: bold;
+    width: 1px;
+    text-decoration: none;
+  }
+}
+
+.L_butt2_1 {
+  padding-#{$left}: 5px;
+  text-decoration: none;
+  vertical-align: middle;
+  cursor: default;
+
+  &:hover {
+    padding-#{$left}: 5px;
+    color: #000;
+    text-decoration: none;
+    vertical-align: middle;
+    cursor: default;
+  }
+}
+
+/* --------------------------------------------------------------------------- */
+.bor {
+  width: 10px;
+  height: 10px;
+}
+
+#osn_tab {
+  position: absolute;
+  background-color: #fff;
+  color: #000;
+  width: 100% !important;
+}
+
+.designer_header {
+  background-color: #f6f6f6;
+  border-top: 20px solid #fff;
+  color: #333;
+  display: block;
+  height: 28px;
+  margin-#{$left}: -20px;
+  margin-top: -60px;
+  padding: 5px 20px;
+  position: fixed;
+  text-align: center;
+  width: 100%;
+  z-index: 101;
+
+  a {
+    display: block;
+    float: $left;
+    margin: 3px 1px 4px;
+    height: 20px;
+  }
+
+  .M_bord {
+    display: block;
+    float: $left;
+    margin: 4px;
+    height: 20px;
+    width: 2px;
+  }
+
+  a {
+    &.first {
+      margin-#{$right}: 1em;
+    }
+
+    &.last {
+      margin-#{$left}: 1em;
+    }
+  }
+}
+
+a {
+  &.M_butt_Selected_down_IE,
+  &.M_butt_Selected_down,
+  &.M_butt_Selected_down_IE:hover,
+  &.M_butt_Selected_down:hover,
+  &.M_butt:hover {
+    background-color: #eee;
+    color: #000;
+  }
+}
+
+#layer_menu {
+  z-index: 98;
+  position: relative;
+  float: $right;
+  background-color: #f6f6f6;
+  border: #ccc solid 1px;
+  border-top: 0;
+  margin-#{$right}: -20px;
+}
+
+.content_fullscreen #layer_menu {
+  margin-#{$right}: 0;
+}
+
+#layer_menu.left {
+  float: $left;
+  margin-#{$left}: -20px;
+}
+
+.content_fullscreen #layer_menu.left {
+  margin-#{$left}: 0;
+}
+
+#layer_upd_relation {
+  position: absolute;
+  #{$left}: 637px;
+  top: 224px;
+  z-index: 100;
+}
+
+#layer_new_relation,
+#designer_optionse {
+  position: absolute;
+  #{$left}: 636px;
+  top: 85px;
+  z-index: 100;
+  width: 153px;
+}
+
+#layer_menu_sizer {
+  background-image: url("../img/designer/resize.png");
+  cursor: ew-resize;
+
+  .icon {
+    margin: 0;
+  }
+}
+
+.panel {
+  position: fixed;
+  top: 90px;
+  #{$right}: 0;
+  width: 350px;
+  max-height: 500px;
+  display: none;
+  overflow: auto;
+  padding-top: 34px;
+  z-index: 102;
+}
+
+a {
+  &.trigger {
+    position: fixed;
+    text-decoration: none;
+    top: 90px;
+    #{$right}: 0;
+    color: #fff;
+    padding: 10px 40px 10px 15px;
+    background: #333 url("../img/designer/plus.png") 85% 55% no-repeat;
+    border: 1px solid #444;
+    display: block;
+    z-index: 102;
+
+    &:hover {
+      color: #080808;
+      background: #fff696 url("../img/designer/plus.png") 85% 55% no-repeat;
+      border: 1px solid #999;
+    }
+  }
+
+  &.active.trigger {
+    background: #222 url("../img/designer/minus.png") 85% 55% no-repeat;
+    z-index: 999;
+
+    &:hover {
+      background: #fff696 url("../img/designer/minus.png") 85% 55% no-repeat;
+    }
+  }
+}
+
+.toggle_container .block {
+  background-color: $browse-marker-background;
+  border-top: 1px solid #999;
+
+  img.ic_s_info {
+    -webkit-filter: invert(70%);
+    filter: invert(70%);
+  }
+}
+
+.history_table {
+  opacity: 1;
+  cursor: pointer;
+}
+
+.history_table2 {
+  opacity: 0.7;
+}
+
+#ab {
+  min-width: 300px;
+
+  .ui-accordion-content {
+    padding: 0;
+  }
+}
+
+#box {
+  display: none;
+}
+
+#foreignkeychk {
+  text-align: $left;
+  position: absolute;
+  cursor: pointer;
+}
+
+.side-menu {
+  float: #{$left};
+  position: fixed;
+  width: auto;
+  height: auto;
+  background: #efefef;
+  border: 1px solid #ccc;
+  border-top: 0;
+  overflow: hidden;
+  z-index: 50;
+  padding: 2px;
+  margin-top: 0;
+  margin-#{$left}: -20px;
+}
+
+.content_fullscreen .side-menu {
+  margin-#{$left}: 0;
+}
+
+.side-menu.right {
+  float: $right;
+  #{$right}: 0;
+}
+
+.content_fullscreen .side-menu.right {
+  margin-#{$right}: 0;
+}
+
+.side-menu {
+  .hide {
+    display: none;
+  }
+
+  a {
+    display: block;
+    float: none;
+    overflow: hidden;
+  }
+
+  img,
+  span,
+  .text {
+    float: $left;
+    padding-#{$left}: 2px;
+  }
+}
+
+#name-panel {
+  border-bottom: 1px solid #ccc;
+  text-align: center;
+  background: #efefef;
+  font-size: 1.2em;
+  padding: 10px;
+  font-weight: bold;
+  margin-top: -20px;
+  margin-#{$left}: -20px;
+  margin-#{$right}: -20px;
+}
+
+.content_fullscreen #name-panel {
+  margin-top: 0;
+  margin-#{$left}: 0;
+  margin-#{$right}: 0;
+}
+
+#container-form {
+  width: 100%;
+  position: absolute;
+  #{$left}: 0;
+}
diff --git a/srcs/phpmyadmin/themes/metro/scss/_enum-editor.scss b/srcs/phpmyadmin/themes/metro/scss/_enum-editor.scss
new file mode 100644
index 0000000..6583f6a
--- /dev/null
+++ b/srcs/phpmyadmin/themes/metro/scss/_enum-editor.scss
@@ -0,0 +1,69 @@
+// ENUM editor styles for the Metro theme
+
+// ENUM/SET editor styles
+p.enum_notice {
+  margin: 5px 2px;
+  font-size: 80%;
+}
+
+#enum_editor {
+  p {
+    margin-top: 0;
+    font-style: italic;
+  }
+
+  .values {
+    width: 100%;
+  }
+
+  .add {
+    width: 100%;
+
+    td {
+      vertical-align: middle;
+      width: 50%;
+      padding: 0 0 0;
+      padding-#{$left}: 1em;
+    }
+  }
+
+  .values {
+    td.drop {
+      width: 1.8em;
+      cursor: pointer;
+      vertical-align: middle;
+    }
+
+    input {
+      margin: 0.1em 0;
+      padding-#{$right}: 2em;
+      width: 100%;
+    }
+
+    img {
+      vertical-align: middle;
+    }
+  }
+
+  input.add_value {
+    margin: 0;
+    margin-#{$right}: 0.4em;
+  }
+}
+
+#enum_editor_output textarea {
+  width: 100%;
+  float: $right;
+  margin: 1em 0 0 0;
+}
+
+// ENUM/SET editor integration for the routines editor
+.enum_hint {
+  position: relative;
+
+  a {
+    position: absolute;
+    #{$left}: 81%;
+    bottom: 0.35em;
+  }
+}
diff --git a/srcs/phpmyadmin/themes/metro/scss/_gis.scss b/srcs/phpmyadmin/themes/metro/scss/_gis.scss
new file mode 100644
index 0000000..7ba94eb
--- /dev/null
+++ b/srcs/phpmyadmin/themes/metro/scss/_gis.scss
@@ -0,0 +1,34 @@
+// GIS data editor styles for the Metro theme
+a.close_gis_editor {
+  float: $right;
+}
+
+#gis_editor {
+  display: none;
+  position: fixed;
+  z-index: 1001;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+#gis_data {
+  min-height: 230px;
+}
+
+#gis_data_textarea {
+  height: 6em;
+}
+
+#gis_data_editor {
+  background: #d0dce0;
+  padding: 15px;
+  min-height: 500px;
+
+  .choice {
+    display: none;
+  }
+
+  input[type="text"] {
+    width: 75px;
+  }
+}
diff --git a/srcs/phpmyadmin/themes/metro/scss/_icons.scss b/srcs/phpmyadmin/themes/metro/scss/_icons.scss
new file mode 100644
index 0000000..76634a2
--- /dev/null
+++ b/srcs/phpmyadmin/themes/metro/scss/_icons.scss
@@ -0,0 +1,675 @@
+.icon {
+  margin: 0;
+  margin-#{$left}: 0.3em;
+  padding: 0 !important;
+  width: 16px;
+  height: 16px;
+}
+
+.icon_fulltext {
+  width: 50px;
+  height: 19px;
+}
+
+.ic_asc_order {
+  background-image: url('../img/asc_order.png');
+}
+
+.ic_b_bookmark {
+  background-image: url('../img/b_bookmark.png');
+}
+
+.ic_b_browse {
+  background-image: url('../img/b_browse.png');
+}
+
+.ic_b_calendar {
+  background-image: url('../img/b_calendar.png');
+}
+
+.ic_b_chart {
+  background-image: url('../img/b_chart.png');
+}
+
+.ic_b_close {
+  background-image: url('../img/b_close.png');
+}
+
+.ic_b_column_add {
+  background-image: url('../img/b_column_add.png');
+}
+
+.ic_b_comment {
+  background-image: url('../img/b_comment.png');
+}
+
+.ic_b_dbstatistics {
+  background-image: url('../img/b_dbstatistics.png');
+}
+
+.ic_b_deltbl {
+  background-image: url('../img/b_deltbl.png');
+}
+
+.ic_b_docs {
+  background-image: url('../img/b_docs.png');
+}
+
+.ic_b_docsql {
+  background-image: url('../img/b_docsql.png');
+}
+
+.ic_b_drop {
+  background-image: url('../img/b_drop.png');
+}
+
+.ic_b_edit {
+  background-image: url('../img/b_edit.png');
+}
+
+.ic_b_empty {
+  background-image: url('../img/b_empty.png');
+}
+
+.ic_b_engine {
+  background-image: url('../img/b_engine.png');
+}
+
+.ic_b_event_add {
+  background-image: url('../img/b_event_add.png');
+}
+
+.ic_b_events {
+  background-image: url('../img/b_events.png');
+}
+
+.ic_b_export {
+  background-image: url('../img/b_export.png');
+}
+
+.ic_b_favorite {
+  background-image: url('../img/b_favorite.png');
+}
+
+.ic_b_find_replace {
+  background-image: url('../img/b_find_replace.png');
+}
+
+.ic_b_firstpage {
+  background-image: url('../img/b_firstpage.png');
+}
+
+.ic_b_ftext {
+  background-image: url('../img/b_ftext.png');
+}
+
+.ic_b_globe {
+  background-image: url('../img/b_globe.gif');
+}
+
+.ic_b_group {
+  background-image: url('../img/b_group.png');
+}
+
+.ic_b_help {
+  background-image: url('../img/b_help.png');
+}
+
+.ic_b_home {
+  background-image: url('../img/b_home.png');
+}
+
+.ic_b_import {
+  background-image: url('../img/b_import.png');
+}
+
+.ic_b_index {
+  background-image: url('../img/b_index.png');
+}
+
+.ic_b_index_add {
+  background-image: url('../img/b_index_add.png');
+}
+
+.ic_b_inline_edit {
+  background-image: url('../img/b_inline_edit.png');
+}
+
+.ic_b_insrow {
+  background-image: url('../img/b_insrow.png');
+}
+
+.ic_b_lastpage {
+  background-image: url('../img/b_lastpage.png');
+}
+
+.ic_b_minus {
+  background-image: url('../img/b_minus.png');
+}
+
+.ic_b_more {
+  background-image: url('../img/b_more.png');
+}
+
+.ic_b_move {
+  background-image: url('../img/b_move.png');
+}
+
+.ic_b_newdb {
+  background-image: url('../img/b_newdb.png');
+}
+
+.ic_b_newtbl {
+  background-image: url('../img/b_newtbl.png');
+}
+
+.ic_b_nextpage {
+  background-image: url('../img/b_nextpage.png');
+}
+
+.ic_b_no_favorite {
+  background-image: url('../img/b_no_favorite.png');
+}
+
+.ic_b_pdfdoc {
+  background-image: url('../img/b_pdfdoc.png');
+}
+
+.ic_b_plugin {
+  background-image: url('../img/b_plugin.png');
+}
+
+.ic_b_plus {
+  background-image: url('../img/b_plus.png');
+}
+
+.ic_b_prevpage {
+  background-image: url('../img/b_prevpage.png');
+}
+
+.ic_b_primary {
+  background-image: url('../img/b_primary.png');
+}
+
+.ic_b_print {
+  background-image: url('../img/b_print.png');
+}
+
+.ic_b_props {
+  background-image: url('../img/b_props.png');
+}
+
+.ic_b_relations {
+  background-image: url('../img/b_relations.png');
+}
+
+.ic_b_report {
+  background-image: url('../img/b_report.png');
+}
+
+.ic_b_routine_add {
+  background-image: url('../img/b_routine_add.png');
+}
+
+.ic_b_routines {
+  background-image: url('../img/b_routines.png');
+}
+
+.ic_b_save {
+  background-image: url('../img/b_save.png');
+}
+
+.ic_b_saveimage {
+  background-image: url('../img/b_saveimage.png');
+}
+
+.ic_b_sbrowse {
+  background-image: url('../img/b_sbrowse.png');
+}
+
+.ic_b_sdb {
+  background-image: url('../img/b_sdb.png');
+  width: 10px;
+  height: 10px;
+}
+
+.ic_b_search {
+  background-image: url('../img/b_search.png');
+}
+
+.ic_b_select {
+  background-image: url('../img/b_select.png');
+}
+
+.ic_b_snewtbl {
+  background-image: url('../img/b_snewtbl.png');
+}
+
+.ic_b_spatial {
+  background-image: url('../img/b_spatial.png');
+}
+
+.ic_b_sql {
+  background-image: url('../img/b_sql.png');
+}
+
+.ic_b_sqldoc {
+  background-image: url('../img/b_sqldoc.png');
+}
+
+.ic_b_sqlhelp {
+  background-image: url('../img/b_sqlhelp.png');
+}
+
+.ic_b_table_add {
+  background-image: url('../img/b_table_add.png');
+}
+
+.ic_b_tblanalyse {
+  background-image: url('../img/b_tblanalyse.png');
+}
+
+.ic_b_tblexport {
+  background-image: url('../img/b_tblexport.png');
+}
+
+.ic_b_tblimport {
+  background-image: url('../img/b_tblimport.png');
+}
+
+.ic_b_tblops {
+  background-image: url('../img/b_tblops.png');
+}
+
+.ic_b_tbloptimize {
+  background-image: url('../img/b_tbloptimize.png');
+}
+
+.ic_b_tipp {
+  background-image: url('../img/b_tipp.png');
+}
+
+.ic_b_trigger_add {
+  background-image: url('../img/b_trigger_add.png');
+}
+
+.ic_b_triggers {
+  background-image: url('../img/b_triggers.png');
+}
+
+.ic_b_undo {
+  background-image: url('../../pmahomme/img/b_undo.png');
+}
+
+.ic_b_unique {
+  background-image: url('../img/b_unique.png');
+}
+
+.ic_b_usradd {
+  background-image: url('../img/b_usradd.png');
+}
+
+.ic_b_usrcheck {
+  background-image: url('../img/b_usrcheck.png');
+}
+
+.ic_b_usrdrop {
+  background-image: url('../img/b_usrdrop.png');
+}
+
+.ic_b_usredit {
+  background-image: url('../img/b_usredit.png');
+}
+
+.ic_b_usrlist {
+  background-image: url('../img/b_usrlist.png');
+}
+
+.ic_b_versions {
+  background-image: url('../img/b_versions.png');
+}
+
+.ic_b_view {
+  background-image: url('../img/b_view.png');
+}
+
+.ic_b_view_add {
+  background-image: url('../img/b_view_add.png');
+}
+
+.ic_b_views {
+  background-image: url('../img/b_views.png');
+}
+
+.ic_bd_browse {
+  background-image: url('../img/bd_browse.png');
+}
+
+.ic_bd_deltbl {
+  background-image: url('../img/bd_deltbl.png');
+}
+
+.ic_bd_drop {
+  background-image: url('../img/bd_drop.png');
+}
+
+.ic_bd_edit {
+  background-image: url('../img/bd_edit.png');
+}
+
+.ic_bd_empty {
+  background-image: url('../img/bd_empty.png');
+}
+
+.ic_bd_export {
+  background-image: url('../img/bd_export.png');
+}
+
+.ic_bd_firstpage {
+  background-image: url('../img/bd_firstpage.png');
+}
+
+.ic_bd_ftext {
+  background-image: url('../img/bd_ftext.png');
+}
+
+.ic_bd_index {
+  background-image: url('../img/bd_index.png');
+}
+
+.ic_bd_insrow {
+  background-image: url('../img/bd_insrow.png');
+}
+
+.ic_bd_lastpage {
+  background-image: url('../img/bd_lastpage.png');
+}
+
+.ic_bd_nextpage {
+  background-image: url('../img/bd_nextpage.png');
+}
+
+.ic_bd_prevpage {
+  background-image: url('../img/bd_prevpage.png');
+}
+
+.ic_bd_primary {
+  background-image: url('../img/bd_primary.png');
+}
+
+.ic_bd_routine_add {
+  background-image: url('../img/bd_routine_add.png');
+}
+
+.ic_bd_sbrowse {
+  background-image: url('../img/bd_sbrowse.png');
+}
+
+.ic_bd_select {
+  background-image: url('../img/bd_select.png');
+}
+
+.ic_bd_spatial {
+  background-image: url('../img/bd_spatial.png');
+}
+
+.ic_bd_unique {
+  background-image: url('../img/bd_unique.png');
+}
+
+.ic_centralColumns {
+  background-image: url('../img/centralColumns.png');
+}
+
+.ic_centralColumns_add {
+  background-image: url('../img/centralColumns_add.png');
+}
+
+.ic_centralColumns_delete {
+  background-image: url('../img/centralColumns_delete.png');
+}
+
+.ic_col_drop {
+  background-image: url('../img/col_drop.png');
+}
+
+.ic_console {
+  background-image: url('../img/console.png');
+}
+
+.ic_database {
+  background-image: url('../img/database.png');
+}
+
+.ic_eye {
+  background-image: url('../img/eye.png');
+}
+
+.ic_eye_grey {
+  background-image: url('../img/eye_grey.png');
+}
+
+.ic_hide {
+  background-image: url('../img/hide.png');
+}
+
+.ic_item {
+  background-image: url('../img/item.png');
+  width: 9px;
+  height: 9px;
+}
+
+.ic_lightbulb {
+  background-image: url('../img/lightbulb.png');
+}
+
+.ic_lightbulb_off {
+  background-image: url('../img/lightbulb_off.png');
+}
+
+.ic_more {
+  background-image: url('../img/more.png');
+  width: 13px;
+}
+
+.ic_new_data {
+  background-image: url('../img/new_data.png');
+}
+
+.ic_new_data_hovered {
+  background-image: url('../img/new_data_hovered.png');
+}
+
+.ic_new_data_selected {
+  background-image: url('../img/new_data_selected.png');
+}
+
+.ic_new_data_selected_hovered {
+  background-image: url('../img/new_data_selected_hovered.png');
+}
+
+.ic_new_struct {
+  background-image: url('../img/new_struct.png');
+}
+
+.ic_new_struct_hovered {
+  background-image: url('../img/new_struct_hovered.png');
+}
+
+.ic_new_struct_selected {
+  background-image: url('../img/new_struct_selected.png');
+}
+
+.ic_new_struct_selected_hovered {
+  background-image: url('../img/new_struct_selected_hovered.png');
+}
+
+.ic_normalize {
+  background-image: url('../img/normalize.png');
+}
+
+.ic_pause {
+  background-image: url('../img/pause.png');
+}
+
+.ic_php_sym {
+  background-image: url('../img/php_sym.png');
+}
+
+.ic_play {
+  background-image: url('../img/play.png');
+}
+
+.ic_s_asc {
+  background-image: url('../img/s_asc.png');
+}
+
+.ic_s_asci {
+  background-image: url('../img/s_asci.png');
+}
+
+.ic_s_attention {
+  background-image: url('../img/s_attention.png');
+}
+
+.ic_s_cancel {
+  background-image: url('../img/s_cancel.png');
+}
+
+.ic_s_cancel2 {
+  background-image: url('../img/s_cancel2.png');
+}
+
+.ic_s_cog {
+  background-image: url('../img/s_cog.png');
+}
+
+.ic_s_db {
+  background-image: url('../img/s_db.png');
+}
+
+.ic_s_desc {
+  background-image: url('../img/s_desc.png');
+}
+
+.ic_s_error {
+  background-image: url('../img/s_error.png');
+}
+
+.ic_s_host {
+  background-image: url('../img/s_host.png');
+}
+
+.ic_s_info {
+  background-image: url('../img/s_info.png');
+}
+
+.ic_s_lang {
+  background-image: url('../img/s_lang.png');
+}
+
+.ic_s_link {
+  background-image: url('../img/s_link.png');
+}
+
+.ic_s_lock {
+  background-image: url('../img/s_lock.png');
+}
+
+.ic_s_loggoff {
+  background-image: url('../img/s_loggoff.png');
+}
+
+.ic_s_notice {
+  background-image: url('../img/s_notice.png');
+}
+
+.ic_s_okay {
+  background-image: url('../img/s_okay.png');
+}
+
+.ic_s_passwd {
+  background-image: url('../img/s_passwd.png');
+}
+
+.ic_s_process {
+  background-image: url('../img/s_process.png');
+}
+
+.ic_s_really {
+  background-image: url('../img/s_really.png');
+  width: 11px;
+  height: 11px;
+}
+
+.ic_s_reload {
+  background-image: url('../img/s_reload.png');
+}
+
+.ic_s_replication {
+  background-image: url('../img/s_replication.png');
+}
+
+.ic_s_rights {
+  background-image: url('../img/s_rights.png');
+}
+
+.ic_s_sortable {
+  background-image: url('../img/s_sortable.png');
+}
+
+.ic_s_status {
+  background-image: url('../img/s_status.png');
+}
+
+.ic_s_success {
+  background-image: url('../img/s_success.png');
+}
+
+.ic_s_sync {
+  background-image: url('../img/s_sync.png');
+}
+
+.ic_s_tbl {
+  background-image: url('../img/s_tbl.png');
+}
+
+.ic_s_theme {
+  background-image: url('../img/s_theme.png');
+}
+
+.ic_s_top {
+  background-image: url('../img/s_top.png');
+}
+
+.ic_s_unlink {
+  background-image: url('../img/s_unlink.png');
+}
+
+.ic_s_vars {
+  background-image: url('../img/s_vars.png');
+}
+
+.ic_s_views {
+  background-image: url('../img/s_views.png');
+}
+
+.ic_show {
+  background-image: url('../img/show.png');
+}
+
+.ic_window-new {
+  background-image: url('../img/window-new.png');
+}
+
+.ic_ajax_clock_small {
+  background-image: url('../img/ajax_clock_small.gif');
+}
+
+.ic_s_partialtext {
+  background-image: url('../img/s_partialtext.png');
+}
+
+.ic_s_fulltext {
+  background-image: url('../img/s_fulltext.png');
+}
diff --git a/srcs/phpmyadmin/themes/metro/scss/_jqplot.scss b/srcs/phpmyadmin/themes/metro/scss/_jqplot.scss
new file mode 100644
index 0000000..35e27a0
--- /dev/null
+++ b/srcs/phpmyadmin/themes/metro/scss/_jqplot.scss
@@ -0,0 +1,276 @@
+// Styles for jqPlot for the Metro theme
+
+// rules for the plot target div.
+// These will be cascaded down to all plot elements according to css rules
+.jqplot-target {
+  position: relative;
+  color: #222;
+  font-family: $font-family;
+  font-size: 1em;
+}
+
+// rules applied to all axes
+.jqplot-axis {
+  font-size: 0.75em;
+}
+
+.jqplot-xaxis {
+  margin-top: 10px;
+}
+
+.jqplot-x2axis {
+  margin-bottom: 10px;
+}
+
+.jqplot-yaxis {
+  margin-#{$right}: 10px;
+}
+
+.jqplot-y2axis,
+.jqplot-y3axis,
+.jqplot-y4axis,
+.jqplot-y5axis,
+.jqplot-y6axis,
+.jqplot-y7axis,
+.jqplot-y8axis,
+.jqplot-y9axis,
+.jqplot-yMidAxis {
+  margin-#{$left}: 10px;
+  margin-#{$right}: 10px;
+}
+
+// rules applied to all axis tick divs
+.jqplot-axis-tick,
+.jqplot-xaxis-tick,
+.jqplot-yaxis-tick,
+.jqplot-x2axis-tick,
+.jqplot-y2axis-tick,
+.jqplot-y3axis-tick,
+.jqplot-y4axis-tick,
+.jqplot-y5axis-tick,
+.jqplot-y6axis-tick,
+.jqplot-y7axis-tick,
+.jqplot-y8axis-tick,
+.jqplot-y9axis-tick,
+.jqplot-yMidAxis-tick {
+  position: absolute;
+  white-space: pre;
+}
+
+.jqplot-xaxis-tick {
+  top: 0;
+  // initial position untill tick is drawn in proper place
+  #{$left}: 15px;
+  vertical-align: top;
+}
+
+.jqplot-x2axis-tick {
+  bottom: 0;
+  // initial position untill tick is drawn in proper place
+  #{$left}: 15px;
+  vertical-align: bottom;
+}
+
+.jqplot-yaxis-tick {
+  #{$right}: 0;
+  // initial position untill tick is drawn in proper place
+  top: 15px;
+  text-align: $right;
+
+  &.jqplot-breakTick {
+    #{$right}: -20px;
+    margin-#{$right}: 0;
+    padding: 1px 5px 1px;
+    z-index: 2;
+    font-size: 1.5em;
+  }
+}
+
+.jqplot-y2axis-tick,
+.jqplot-y3axis-tick,
+.jqplot-y4axis-tick,
+.jqplot-y5axis-tick,
+.jqplot-y6axis-tick,
+.jqplot-y7axis-tick,
+.jqplot-y8axis-tick,
+.jqplot-y9axis-tick {
+  #{$left}: 0;
+  // initial position untill tick is drawn in proper place
+  top: 15px;
+  text-align: $left;
+}
+
+.jqplot-yMidAxis-tick {
+  text-align: center;
+  white-space: nowrap;
+}
+
+.jqplot-xaxis-label {
+  margin-top: 10px;
+  font-size: 11pt;
+  position: absolute;
+}
+
+.jqplot-x2axis-label {
+  margin-bottom: 10px;
+  font-size: 11pt;
+  position: absolute;
+}
+
+.jqplot-yaxis-label {
+  margin-#{$right}: 10px;
+  font-size: 11pt;
+  position: absolute;
+}
+
+.jqplot-yMidAxis-label {
+  font-size: 11pt;
+  position: absolute;
+}
+
+.jqplot-y2axis-label,
+.jqplot-y3axis-label,
+.jqplot-y4axis-label,
+.jqplot-y5axis-label,
+.jqplot-y6axis-label,
+.jqplot-y7axis-label,
+.jqplot-y8axis-label,
+.jqplot-y9axis-label {
+  font-size: 11pt;
+  margin-#{$left}: 10px;
+  position: absolute;
+}
+
+.jqplot-meterGauge-tick {
+  font-size: 0.75em;
+  color: #999;
+}
+
+.jqplot-meterGauge-label {
+  font-size: 1em;
+  color: #999;
+}
+
+table {
+  &.jqplot-table-legend {
+    margin-top: 12px;
+    margin-bottom: 12px;
+    margin-#{$left}: 12px;
+    margin-#{$right}: 12px;
+    background-color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #ccc;
+    position: absolute;
+    font-size: 0.75em;
+  }
+
+  &.jqplot-cursor-legend {
+    background-color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #ccc;
+    position: absolute;
+    font-size: 0.75em;
+  }
+}
+
+td {
+  &.jqplot-table-legend {
+    vertical-align: middle;
+  }
+
+  &.jqplot-seriesToggle {
+    &:hover,
+    &:active {
+      cursor: pointer;
+    }
+  }
+}
+
+.jqplot-table-legend .jqplot-series-hidden {
+  text-decoration: line-through;
+}
+
+div {
+  &.jqplot-table-legend-swatch-outline {
+    border: 1px solid #ccc;
+    padding: 1px;
+  }
+
+  &.jqplot-table-legend-swatch {
+    width: 0;
+    height: 0;
+    border-top-width: 5px;
+    border-bottom-width: 5px;
+    border-left-width: 6px;
+    border-right-width: 6px;
+    border-top-style: solid;
+    border-bottom-style: solid;
+    border-left-style: solid;
+    border-right-style: solid;
+  }
+}
+
+.jqplot-title {
+  top: 0;
+  #{$left}: 0;
+  padding-bottom: 0.5em;
+  font-size: 1.2em;
+}
+
+table.jqplot-cursor-tooltip {
+  border: 1px solid #ccc;
+  font-size: 0.75em;
+}
+
+.jqplot-cursor-tooltip,
+.jqplot-highlighter-tooltip,
+.jqplot-canvasOverlay-tooltip {
+  border: 1px solid #ccc;
+  font-size: 0.75em;
+  white-space: nowrap;
+  background: rgba(208, 208, 208, 0.5);
+  padding: 1px;
+}
+
+.jqplot-point-label {
+  font-size: 0.75em;
+  z-index: 2;
+}
+
+td.jqplot-cursor-legend-swatch {
+  vertical-align: middle;
+  text-align: center;
+}
+
+div.jqplot-cursor-legend-swatch {
+  width: 1.2em;
+  height: 0.7em;
+}
+
+// Styles added to the plot target container when there is an error go here.
+.jqplot-error {
+  text-align: center;
+}
+
+// Styling of the custom error message div goes here.
+.jqplot-error-message {
+  position: relative;
+  top: 46%;
+  display: inline-block;
+}
+
+div {
+  &.jqplot-bubble-label {
+    font-size: 0.8em;
+    padding-#{$left}: 2px;
+    padding-#{$right}: 2px;
+    color: rgb(20%, 20%, 20%);
+
+    &.jqplot-bubble-label-highlight {
+      background: rgba(90%, 90%, 90%, 0.7);
+    }
+  }
+
+  &.jqplot-noData-container {
+    text-align: center;
+    background-color: rgba(96%, 96%, 96%, 0.3);
+  }
+}
diff --git a/srcs/phpmyadmin/themes/metro/scss/_navigation.scss b/srcs/phpmyadmin/themes/metro/scss/_navigation.scss
new file mode 100644
index 0000000..35e5515
--- /dev/null
+++ b/srcs/phpmyadmin/themes/metro/scss/_navigation.scss
@@ -0,0 +1,543 @@
+// Navigation styles for the Metro theme
+#pma_navigation {
+  width: $navi-width;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  #{$left}: 0;
+  height: 100%;
+  background: $navi-color;
+  color: $main-color;
+  z-index: 800;
+
+  input[type="text"] {
+    background-color: $main-background;
+    font-family: $font-family;
+  }
+
+  a {
+    &:link,
+    &:visited,
+    &:active {
+      text-decoration: none;
+      color: $navi-pointer-color;
+    }
+
+    img {
+      border: 0;
+    }
+  }
+
+  select {
+    &#select_server,
+    &#lightm_db {
+      width: 100%;
+    }
+  }
+
+  // buttons in some browsers (eg. Konqueror) are block elements, this breaks design
+  button {
+    display: inline;
+  }
+}
+
+#pma_navigation_content {
+  width: 100%;
+  position: absolute;
+  top: 0;
+  #{$left}: 0;
+  z-index: 0;
+}
+
+#pma_navigation {
+  ul {
+    margin: 0;
+  }
+
+  form {
+    margin: 0;
+    padding: 0;
+    display: inline;
+  }
+
+  div.pageselector {
+    text-align: center;
+    margin: 0;
+    margin-#{$left}: 0.75em;
+    border-#{$left}: 1px solid #666;
+  }
+
+  #pmalogo {
+    margin: 0;
+    padding: 12px;
+    background: $navi-background;
+    color: $button-color;
+    font-size: 14px;
+    cursor: default;
+    height: 15px;
+    line-height: 100%;
+    box-sizing: content-box;
+
+    &::after {
+      font-family: $font-family-extra-bold;
+      text-transform: uppercase;
+      margin-#{$left}: 5px;
+      content: "phpMyAdmin";
+    }
+  }
+
+  #imgpmalogo {
+    display: none;
+  }
+
+  #recentTableList {
+    text-align: center;
+    padding: 10px;
+
+    select {
+      min-width: 100%;
+    }
+  }
+
+  #databaseList {
+    text-align: center;
+    margin: 10px;
+  }
+
+  #navipanellinks {
+    padding-top: 1em;
+    padding-bottom: 1em;
+    text-align: center;
+    background-color: $border-color;
+
+    a {
+      box-sizing: content-box;
+    }
+
+    .icon {
+      margin: 0;
+    }
+  }
+}
+
+div#left_tableList li {
+  a:first-child::before {
+    color: $navi-pointer-color;
+    /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+    font-family: "IcoMoon";
+    content: "";
+    margin: 10px;
+  }
+
+  &:hover a:first-child::before {
+    color: $button-color;
+  }
+}
+
+img {
+  &.ic_b_home,
+  &.ic_s_loggoff,
+  &.ic_b_docs,
+  &.ic_b_sqlhelp,
+  &.ic_s_reload {
+    -webkit-filter: invert(70%);
+    filter: invert(70%);
+  }
+}
+
+#navipanellinks a {
+  display: inline-block;
+  height: 16px;
+  width: 16px;
+  color: $main-color;
+  margin-#{$right}: 10px;
+  padding: 5px;
+  font-size: 15px;
+
+  &:hover {
+    color: $th-color;
+  }
+}
+
+#pma_navigation {
+  #serverChoice,
+  #databaseList,
+  div.pageselector.dbselector {
+    text-align: center;
+    padding: 5px 10px 0;
+    border: 0;
+  }
+}
+
+#pma_navigation_content > img.throbber {
+  display: none;
+  margin: 0.3em auto 0;
+}
+
+/* Navigation tree */
+#pma_navigation_tree {
+  margin: 0;
+  margin-#{$left}: 10px;
+  overflow: hidden;
+  height: 74%;
+  position: relative;
+}
+
+#pma_navigation_select_database {
+  text-align: $left;
+  padding: 0 0 0;
+  border: 0;
+  margin: 0;
+}
+
+#pma_navigation_db_select {
+  margin-top: 0.5em;
+  margin-#{$left}: 0.75em;
+
+  select {
+    border: 1px solid #bbb;
+    border-top: 1px solid #bbb;
+    color: #333;
+    padding: 4px 6px;
+    margin: 0 0 0;
+    width: 92%;
+  }
+}
+
+#pma_navigation_tree_content {
+  width: 100%;
+  overflow: hidden;
+  overflow-y: auto;
+  position: absolute;
+  height: 100%;
+}
+
+#pma_navigation_tree li {
+  .dbItemControls {
+    padding-#{$left}: 4px;
+  }
+
+  .navItemControls {
+    display: none;
+    padding-#{$left}: 4px;
+  }
+
+  &.activePointer .navItemControls {
+    display: inline;
+    opacity: 0.5;
+
+    &:hover {
+      display: inline;
+      opacity: 1;
+    }
+  }
+}
+
+#pma_navigation_tree_content a.hover_show_full {
+  position: relative;
+  z-index: 100;
+}
+
+#pma_navigation_tree {
+  a {
+    color: $navi-color;
+    padding-left: 0;
+
+    &:hover {
+      text-decoration: none;
+      color: $th-color;
+    }
+  }
+
+  li {
+    margin-bottom: 0;
+
+    &.activePointer,
+    &.selected {
+      color: $th-color;
+    }
+  }
+
+  ul {
+    clear: both;
+    padding: 0;
+    list-style-type: none;
+    margin: 0;
+
+    ul {
+      position: relative;
+    }
+  }
+
+  li {
+    white-space: nowrap;
+    clear: both;
+    min-height: 17px;
+  }
+
+  img {
+    margin: 0;
+  }
+
+  i {
+    display: block;
+  }
+
+  div {
+    &.block {
+      position: relative;
+      width: 1.5em;
+      height: 2em;
+      min-width: 16px;
+      min-height: 16px;
+      float: $left;
+
+      &.double {
+        width: 2.5em;
+      }
+
+      i,
+      b {
+        width: 1.5em;
+        height: 2em;
+        min-width: 16px;
+        min-height: 8px;
+        position: absolute;
+        bottom: 0.7em;
+        #{$left}: 0.75em;
+        z-index: 0;
+        margin-top: -4px;
+      }
+
+      /* Top and right segments for the tree element connections */
+      i {
+        display: block;
+        border-#{$left}: 1px solid #616161;
+        border-bottom: 1px solid #616161;
+        position: relative;
+        z-index: 0;
+
+        /* Removes top segment */
+        &.first {
+          border-#{$left}: 0;
+        }
+      }
+
+      /* Bottom segment for the tree element connections */
+      b {
+        display: block;
+        height: 0.75em;
+        bottom: 0;
+        #{$left}: 0.75em;
+        border-#{$left}: 1px solid #616161;
+      }
+
+      a,
+      u {
+        position: absolute;
+        #{$left}: 50%;
+        top: 50%;
+        z-index: 10;
+      }
+
+      a + a {
+        #{$left}: 100%;
+      }
+
+      &.double {
+        a,
+        u {
+          #{$left}: 33%;
+        }
+
+        a + a {
+          #{$left}: 85%;
+        }
+      }
+
+      img {
+        position: relative;
+        top: -0.6em;
+        #{$left}: 0;
+        margin-#{$left}: -7px;
+      }
+    }
+
+    &.throbber img {
+      top: 2px;
+      #{$left}: 2px;
+    }
+  }
+
+  li {
+    &.last > ul {
+      background: none;
+    }
+
+    > {
+      a,
+      i {
+        line-height: 1.5em;
+        height: 1.5em;
+        padding-#{$left}: 0.3em;
+      }
+    }
+  }
+
+  .list_container {
+    border-#{$left}: 1px solid #616161;
+    margin-#{$left}: 0.75em;
+    padding-#{$left}: 0.75em;
+  }
+
+  .last > .list_container {
+    border-#{$left}: 0 solid #616161;
+  }
+}
+
+/* Fast filter */
+li.fast_filter {
+  padding-#{$left}: 0.75em;
+  margin-#{$left}: 0.75em;
+  padding-#{$right}: 15px;
+  border-#{$left}: 1px solid #616161;
+
+  input {
+    width: 100%;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    color: #666;
+    font-family: $font-family;
+    padding: 2px;
+  }
+
+  span {
+    position: relative;
+    #{$right}: 1.5em;
+    padding: 0.2em;
+    cursor: pointer;
+    font-weight: bold;
+    color: #800;
+  }
+
+  &.db_fast_filter {
+    border: 0;
+    margin-#{$left}: 0;
+    margin-#{$right}: 10px;
+  }
+}
+
+#navigation_controls_outer {
+  min-height: 21px !important;
+}
+
+#pma_navigation_collapse {
+  padding-#{$right}: 2px;
+}
+
+#navigation_controls_outer.activePointer {
+  background-color: transparent !important;
+}
+
+#navigation_controls {
+  float: $right;
+  padding-#{$right}: 23px;
+}
+
+/* Resize handler */
+#pma_navigation_resizer {
+  width: 1px;
+  height: 100%;
+  background-color: #aaa;
+  cursor: col-resize;
+  position: fixed;
+  top: 0;
+  #{$left}: $navi-width;
+  z-index: 801;
+}
+
+#pma_navigation_collapser {
+  width: 20px;
+  padding-top: 4px;
+  padding-bottom: 12px;
+  background: $navi-background;
+  border-bottom: 1px solid $navi-background;
+  line-height: 22px;
+  color: #fff;
+  position: fixed;
+  top: 0;
+  #{$left}: $navi-width;
+  text-align: center;
+  cursor: pointer;
+  z-index: 801;
+}
+
+/* Quick warp links */
+.pma_quick_warp {
+  margin-top: 5px;
+  margin-#{$left}: 10px;
+  position: relative;
+
+  .drop_list {
+    float: $left;
+    margin-#{$left}: 3px;
+    padding: 2px 0;
+  }
+
+  .drop_button {
+    padding: 0.2em 0.5em;
+    border: 1px solid #ddd;
+    background: #f2f2f2;
+    cursor: pointer;
+  }
+
+  .drop_list {
+    &:hover .drop_button {
+      background: #fff;
+    }
+
+    ul {
+      position: absolute;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+      overflow-y: auto;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #ddd;
+      top: 100%;
+      #{$left}: 3px;
+      #{$right}: 0;
+      display: none;
+      z-index: 802;
+    }
+
+    &:hover ul {
+      display: block;
+    }
+
+    li {
+      white-space: nowrap;
+      padding: 0;
+
+      img {
+        vertical-align: sub;
+      }
+
+      &:hover {
+        background: #f2f2f2;
+      }
+    }
+
+    a {
+      display: block;
+      padding: 0.2em 0.3em;
+
+      &.favorite_table_anchor {
+        clear: $left;
+        float: $left;
+        padding: 0.1em 0.3em 0;
+      }
+    }
+  }
+}
diff --git a/srcs/phpmyadmin/themes/metro/scss/_resizable-menu.scss b/srcs/phpmyadmin/themes/metro/scss/_resizable-menu.scss
new file mode 100644
index 0000000..42f581b
--- /dev/null
+++ b/srcs/phpmyadmin/themes/metro/scss/_resizable-menu.scss
@@ -0,0 +1,40 @@
+// Styles for the resizable menus (jQuery menuResizer)
+ul.resizable-menu {
+  a,
+  span {
+    display: block;
+    margin: 0;
+    padding: 0;
+    white-space: nowrap;
+  }
+
+  .submenu {
+    display: none;
+    position: relative;
+  }
+
+  .shown {
+    display: inline-block;
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    list-style-type: none;
+    display: none;
+    border: 1px #ddd solid;
+    z-index: 2;
+    #{$right}: 0;
+  }
+
+  li:hover ul,
+  .submenuhover ul {
+    display: block;
+    background: #fff;
+  }
+
+  ul li {
+    width: 100%;
+  }
+}
diff --git a/srcs/phpmyadmin/themes/metro/scss/_rte.scss b/srcs/phpmyadmin/themes/metro/scss/_rte.scss
new file mode 100644
index 0000000..893867c
--- /dev/null
+++ b/srcs/phpmyadmin/themes/metro/scss/_rte.scss
@@ -0,0 +1,45 @@
+// Styles for management of Routines, Triggers and Events for the Metro theme
+.rte_table {
+  table-layout: fixed;
+  width: 100%;
+
+  td {
+    vertical-align: middle;
+    padding: 0.2em;
+  }
+
+  tr td:nth-child(1) {
+    width: 20%;
+  }
+
+  input,
+  select,
+  textarea {
+    width: 100%;
+    margin: 0;
+    box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+  }
+
+  input {
+    &[type="checkbox"],
+    &[type="radio"] {
+      width: auto;
+      margin-#{$right}: 6px;
+    }
+  }
+
+  .routine_params_table {
+    width: 100%;
+  }
+
+  .half_width {
+    width: 49%;
+  }
+}
+
+.ui_tpicker_time_input {
+  width: 100%;
+}
diff --git a/srcs/phpmyadmin/themes/metro/scss/_variables.scss b/srcs/phpmyadmin/themes/metro/scss/_variables.scss
new file mode 100644
index 0000000..907ae8e
--- /dev/null
+++ b/srcs/phpmyadmin/themes/metro/scss/_variables.scss
@@ -0,0 +1,164 @@
+// configures general layout for detailed layout configuration please refer to the css files
+
+$navi-width: 250px;
+$font-family: "Open Sans", "Segoe UI", sans-serif;
+$font-family-light: "Open Sans Light", "Segoe UI Light", "Segoe UI", sans-serif;
+$font-family-bold: "Open Sans Bold", sans-serif;
+$font-family-extra-bold: "Open Sans Extrabold", "Segoe Black", sans-serif;
+$font-family-fixed: Consolas, "Lucida Grande", monospace;
+
+// Theme color scheme
+// Values: "teal", "redmond", "blueeyes", "mono", "win"
+// Default: "win"
+// Set this value for the desired color scheme
+$color-scheme: win !default;
+
+$navi-color: #eee;
+$navi-background: #377796;
+$navi-background-light: #428eb4;
+$navi-pointer-color: #333;
+$navi-pointer-background: #377796;
+$navi-database-name-color: #333;
+$navi-hover-background: #428eb4;
+$main-color: #444;
+$main-background: #fff;
+$browse-pointer-color: #377796;
+$browse-marker-color: #000;
+$browse-warning-color: #d44a26;
+$browse-success-color: #01a31c;
+$browse-gray-color: #ccc;
+$browse-marker-background: #eee;
+$border-color: #ddd;
+$button-color: #fff;
+$button-background: #377796;
+$button-hover: #428eb4;
+$th-background: #f7f7f7;
+$th-disabled-background: #f3f3f3;
+$th-color: #666;
+$th-pointer-color: #000;
+$bg-one: #f7f7f7;
+$bg-two: #fff;
+$blue-header: #3a7ead;
+
+@if $color-scheme == teal {
+  $navi-color: #fff;
+  $navi-background: #004d60;
+  $navi-background-light: #04627c;
+  $navi-pointer-color: #666;
+  $navi-pointer-background: #004d60;
+  $navi-database-name-color: #fff;
+  $navi-hover-background: #216475;
+  $main-color: #444;
+  $main-background: #fff;
+  $browse-pointer-color: #004d60;
+  $browse-marker-color: #000;
+  $browse-warning-color: #d44a26;
+  $browse-success-color: #01a31c;
+  $browse-gray-color: #ccc;
+  $browse-marker-background: #eee;
+  $border-color: #ddd;
+  $button-color: #fff;
+  $button-background: #aaa;
+  $button-hover: #000;
+  $th-background: #f7f7f7;
+  $th-disabled-background: #f3f3f3;
+  $th-color: #666;
+  $th-pointer-color: #000;
+  $bg-one: #f7f7f7;
+  $bg-two: #fff;
+  $blue-header: #3a7ead;
+} @else if $color-scheme == redmond {
+  $navi-color: #fff;
+  $navi-background: #780505;
+  $navi-background-light: #a10707;
+  $navi-pointer-color: #666;
+  $navi-pointer-background: #780505;
+  $navi-database-name-color: #fff;
+  $navi-hover-background: #a10707;
+  $main-color: #444;
+  $main-background: #fff;
+  $browse-pointer-color: #780505;
+  $browse-marker-color: #000;
+  $browse-warning-color: #d44a26;
+  $browse-success-color: #01a31c;
+  $browse-gray-color: #ccc;
+  $browse-marker-background: #eee;
+  $border-color: #ddd;
+  $button-color: #fff;
+  $button-background: #aaa;
+  $button-hover: #000;
+  $th-background: #f7f7f7;
+  $th-disabled-background: #f3f3f3;
+  $th-color: #666;
+  $th-pointer-color: #000;
+  $bg-one: #f7f7f7;
+  $bg-two: #fff;
+  $blue-header: #3a7ead;
+} @else if $color-scheme == blueeyes {
+  $navi-color: #fff;
+  $navi-background: #377796;
+  $navi-background-light: #428eb4;
+  $navi-pointer-color: #666;
+  $navi-pointer-background: #377796;
+  $navi-database-name-color: #fff;
+  $navi-hover-background: #428eb4;
+  $main-color: #444;
+  $main-background: #fff;
+  $browse-pointer-color: #377796;
+  $browse-marker-color: #000;
+  $browse-warning-color: #d44a26;
+  $browse-success-color: #01a31c;
+  $browse-gray-color: #ccc;
+  $browse-marker-background: #eee;
+  $border-color: #ddd;
+  $button-color: #fff;
+  $button-background: #377796;
+  $button-hover: #000;
+  $th-background: #f7f7f7;
+  $th-disabled-background: #f3f3f3;
+  $th-color: #666;
+  $th-pointer-color: #000;
+  $bg-one: #f7f7f7;
+  $bg-two: #fff;
+  $blue-header: #3a7ead;
+} @else if $color-scheme == mono {
+  $navi-color: #fff;
+  $navi-background: #666;
+  $navi-background-light: #999;
+  $navi-pointer-color: #666;
+  $navi-pointer-background: #666;
+  $navi-database-name-color: #fff;
+  $navi-hover-background: #999;
+  $main-color: #444;
+  $main-background: #fff;
+  $browse-pointer-color: #666;
+  $browse-marker-color: #000;
+  $browse-warning-color: #666;
+  $browse-success-color: #888;
+  $browse-gray-color: #ccc;
+  $browse-marker-background: #eee;
+  $border-color: #ddd;
+  $button-color: #fff;
+  $button-background: #aaa;
+  $button-hover: #000;
+  $th-background: #f7f7f7;
+  $th-disabled-background: #f3f3f3;
+  $th-color: #666;
+  $th-pointer-color: #000;
+  $bg-one: #f7f7f7;
+  $bg-two: #fff;
+  $blue-header: #555;
+}
+
+// Bootstrap
+
+$enable-transitions: false;
+
+$primary: $browse-pointer-color;
+$secondary: $browse-gray-color;
+
+$font-size-base: 0.8rem;
+
+$btn-border-radius: 0;
+$btn-line-height: 1;
+$btn-padding-x: 0.5rem;
diff --git a/srcs/phpmyadmin/themes/metro/scss/blueeyes-theme-rtl.scss b/srcs/phpmyadmin/themes/metro/scss/blueeyes-theme-rtl.scss
new file mode 100644
index 0000000..aeaa7f7
--- /dev/null
+++ b/srcs/phpmyadmin/themes/metro/scss/blueeyes-theme-rtl.scss
@@ -0,0 +1,4 @@
+$color-scheme: blueeyes;
+$direction: rtl;
+
+@import "theme";
diff --git a/srcs/phpmyadmin/themes/metro/scss/blueeyes-theme.scss b/srcs/phpmyadmin/themes/metro/scss/blueeyes-theme.scss
new file mode 100644
index 0000000..751d929
--- /dev/null
+++ b/srcs/phpmyadmin/themes/metro/scss/blueeyes-theme.scss
@@ -0,0 +1,3 @@
+$color-scheme: blueeyes;
+
+@import "theme";
diff --git a/srcs/phpmyadmin/themes/metro/scss/mono-theme-rtl.scss b/srcs/phpmyadmin/themes/metro/scss/mono-theme-rtl.scss
new file mode 100644
index 0000000..7b382a2
--- /dev/null
+++ b/srcs/phpmyadmin/themes/metro/scss/mono-theme-rtl.scss
@@ -0,0 +1,4 @@
+$color-scheme: mono;
+$direction: rtl;
+
+@import "theme";
diff --git a/srcs/phpmyadmin/themes/metro/scss/mono-theme.scss b/srcs/phpmyadmin/themes/metro/scss/mono-theme.scss
new file mode 100644
index 0000000..c6725c2
--- /dev/null
+++ b/srcs/phpmyadmin/themes/metro/scss/mono-theme.scss
@@ -0,0 +1,3 @@
+$color-scheme: mono;
+
+@import "theme";
diff --git a/srcs/phpmyadmin/themes/metro/scss/printview.scss b/srcs/phpmyadmin/themes/metro/scss/printview.scss
new file mode 100644
index 0000000..1555f13
--- /dev/null
+++ b/srcs/phpmyadmin/themes/metro/scss/printview.scss
@@ -0,0 +1,186 @@
+@media print {
+  #back_button_print_view,
+  #print_button_print_view {
+    display: none;
+  }
+}
+
+// For removing element from Print View
+.print_ignore {
+  display: none;
+}
+
+.nowrap {
+  white-space: nowrap;
+}
+
+.hide {
+  display: none;
+}
+
+// Standard CSS
+body,
+table,
+th,
+td {
+  color: #000;
+  background-color: #fff;
+  font-size: 12px;
+}
+
+// To remove link text decoration
+a:link {
+  color: #000;
+  text-decoration: none;
+}
+
+// To remove any image borders
+img {
+  border: 0;
+}
+
+// Table specific
+table,
+th,
+td {
+  border: 0.1em solid #000;
+  background-color: #fff;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0.2em;
+}
+
+thead {
+  border-collapse: collapse;
+  border-spacing: 0.2em;
+  border: 0.1em solid #000;
+  font-weight: 900;
+}
+
+th,
+td {
+  padding: 0.2em;
+}
+
+thead th {
+  font-weight: bold;
+  background-color: #e5e5e5;
+  border: 0.1em solid #000;
+}
+
+th.vtop,
+td.vtop {
+  vertical-align: top;
+}
+
+th.vbottom,
+td.vbottom {
+  vertical-align: bottom;
+}
+
+th {
+  &.column_heading,
+  &.column_action {
+    border: 0.1em solid #000;
+  }
+}
+
+table {
+  tr {
+    &.odd,
+    &.even {
+      border-left: 0.1em solid #000;
+    }
+
+    &.odd th,
+    &.even th {
+      border-bottom: 0.1em solid #000;
+    }
+  }
+
+  &.data th {
+    border-bottom: 0.1em solid #000;
+  }
+}
+
+// Common Elements not to be included
+// Hide Navigation and Top Menu bar
+// Hide console
+// Hide Navigation items (like Goto Top)
+// Hide the Create Table form
+// Hide the Page Settings Modal box
+// Hide footer, Demo notice, errors div
+// Hide the #selflink div
+#pma_navigation,
+#floating_menubar,
+#pma_console_container,
+#page_nav_icons,
+#create_table_form_minimal,
+#page_settings_modal,
+#pma_footer,
+#pma_demo,
+#pma_errors,
+#selflink {
+  display: none;
+}
+
+// Position the main content
+#page_content {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 95%;
+  float: none;
+}
+
+// Specific Class for overriding while Print
+.print {
+  background-color: #000;
+}
+
+// For the Success message div
+.sqlOuter {
+  color: black;
+}
+
+// For hiding 'Open a New phpMyAdmin Window' button
+// Hide extra menu on tbl_structure.php
+.ic_window-new,
+.ic_s_cog,
+.sticky_columns tr,
+#structure-action-links,
+#addColumns,
+#topmenu2,
+.cDrop,
+.cEdit,
+.cList,
+.cCpy,
+.cPointer {
+  display: none;
+}
+
+table tbody:first-of-type tr {
+  // odd items 1,3,5,7...
+  &:nth-child(odd) {
+    background: #fff;
+
+    th {
+      background: #fff;
+    }
+  }
+
+  // even items 2,4,6,8...
+  &:nth-child(even) {
+    background: #dfdfdf;
+
+    th {
+      background: #dfdfdf;
+    }
+  }
+}
+
+.column_attribute {
+  font-size: 100%;
+}
diff --git a/srcs/phpmyadmin/themes/metro/scss/redmond-theme-rtl.scss b/srcs/phpmyadmin/themes/metro/scss/redmond-theme-rtl.scss
new file mode 100644
index 0000000..4baa0a0
--- /dev/null
+++ b/srcs/phpmyadmin/themes/metro/scss/redmond-theme-rtl.scss
@@ -0,0 +1,4 @@
+$color-scheme: redmond;
+$direction: rtl;
+
+@import "theme";
diff --git a/srcs/phpmyadmin/themes/metro/scss/redmond-theme.scss b/srcs/phpmyadmin/themes/metro/scss/redmond-theme.scss
new file mode 100644
index 0000000..cc07956
--- /dev/null
+++ b/srcs/phpmyadmin/themes/metro/scss/redmond-theme.scss
@@ -0,0 +1,3 @@
+$color-scheme: redmond;
+
+@import "theme";
diff --git a/srcs/phpmyadmin/themes/metro/scss/teal-theme-rtl.scss b/srcs/phpmyadmin/themes/metro/scss/teal-theme-rtl.scss
new file mode 100644
index 0000000..88b0f3d
--- /dev/null
+++ b/srcs/phpmyadmin/themes/metro/scss/teal-theme-rtl.scss
@@ -0,0 +1,4 @@
+$color-scheme: teal;
+$direction: rtl;
+
+@import "theme";
diff --git a/srcs/phpmyadmin/themes/metro/scss/teal-theme.scss b/srcs/phpmyadmin/themes/metro/scss/teal-theme.scss
new file mode 100644
index 0000000..48d6f91
--- /dev/null
+++ b/srcs/phpmyadmin/themes/metro/scss/teal-theme.scss
@@ -0,0 +1,3 @@
+$color-scheme: teal;
+
+@import "theme";
diff --git a/srcs/phpmyadmin/themes/metro/scss/theme-rtl.scss b/srcs/phpmyadmin/themes/metro/scss/theme-rtl.scss
new file mode 100644
index 0000000..251a1f0
--- /dev/null
+++ b/srcs/phpmyadmin/themes/metro/scss/theme-rtl.scss
@@ -0,0 +1,3 @@
+$direction: rtl;
+
+@import "theme";
diff --git a/srcs/phpmyadmin/themes/metro/scss/theme.scss b/srcs/phpmyadmin/themes/metro/scss/theme.scss
new file mode 100644
index 0000000..11389ab
--- /dev/null
+++ b/srcs/phpmyadmin/themes/metro/scss/theme.scss
@@ -0,0 +1,13 @@
+@import "../../pmahomme/scss/direction";
+@import "variables";
+@import "../../pmahomme/scss/bootstrap";
+@import "common";
+@import "enum-editor";
+@import "gis";
+@import "navigation";
+@import "designer";
+@import "rte";
+@import "codemirror";
+@import "jqplot";
+@import "resizable-menu";
+@import "icons";