Update website

admin/phpMyAdmin/themes/metro/scss/_alert.scss

@@ -0,0 +1,53 @@
+.alert {
+  text-align: $left;
+
+  a {
+    text-decoration: underline;
+  }
+
+  h1 {
+    margin-bottom: 0.2em;
+  }
+}
+
+.alert-primary {
+  color: $button-color;
+  background-color: $blue-header;
+  background-image: none;
+
+  a {
+    color: $button-color;
+  }
+
+  h1 {
+    color: $navi-color;
+  }
+}
+
+.alert-success {
+  color: $button-color;
+  background-color: $browse-success-color;
+  background-image: none;
+
+  a {
+    color: $button-color;
+  }
+
+  h1 {
+    color: $navi-color;
+  }
+}
+
+.alert-danger {
+  color: $button-color;
+  background-color: $browse-warning-color;
+  background-image: none;
+
+  a {
+    color: $button-color;
+  }
+
+  h1 {
+    color: $navi-color;
+  }
+}

admin/phpMyAdmin/themes/metro/scss/_breadcrumbs.scss

@@ -0,0 +1,35 @@
+.breadcrumb {
+  color: $button-color;
+  padding-left: 2rem;
+
+  a {
+    color: inherit;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}
+
+.breadcrumb-item {
+  + .breadcrumb-item::before,
+  &::before {
+    width: 10px;
+    color: #eee;
+
+    /* The arrow "U+0203A" (SINGLE RIGHT-POINTING ANGLE QUOTATION MARK) */
+    content: "\203A";
+  }
+
+  + .breadcrumb-comment {
+    padding-left: $breadcrumb-item-padding;
+  }
+
+  .icon {
+    display: none;
+  }
+}
+
+.breadcrumb-comment {
+  font-style: italic;
+}

admin/phpMyAdmin/themes/metro/scss/_card.scss

@@ -0,0 +1,54 @@
+.card {
+  margin-top: 1rem;
+}
+
+.card-header {
+  font-family: $font-family-light;
+  font-size: 1rem;
+  border-bottom: 0;
+}
+
+.card-footer {
+  border-top: 0;
+}
+
+#maincontainer {
+  .card {
+    background: none;
+    border: none;
+    margin: 0;
+  }
+
+  .card-header {
+    background: none;
+    color: $navi-background;
+    font-size: 2.8em;
+    font-family: $font-family-light;
+    padding: 0;
+  }
+
+  .card-body ul {
+    padding-#{$left}: 0;
+  }
+}
+
+.accordion {
+  > .card {
+    margin-top: 0;
+    border-radius: 0;
+
+    > .card-header {
+      background-color: $button-background;
+      padding: 0.3rem;
+
+      .btn {
+        color: $button-color;
+
+        &:hover,
+        &:active {
+          text-decoration: none;
+        }
+      }
+    }
+  }
+}

admin/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-monospace !important;
+  height: 20rem;
+  border: 1px solid #ccc;
+  direction: ltr;
+}
+
+#pma_console .CodeMirror {
+  border: none;
+}
+
+.CodeMirror * {
+  font-family: $font-family-monospace;
+}
+
+#inline_editor_outer .CodeMirror {
+  height: ceil($textarea-rows * 0.4em);
+  margin-bottom: 10px;
+}
+
+.insertRowTable .CodeMirror {
+  min-height: ceil($textarea-rows * 0.6em);
+  min-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;
+}

admin/phpMyAdmin/themes/metro/scss/_designer.scss

@@ -0,0 +1,465 @@
+// 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;
+  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;
+}

admin/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;
+  }
+}

admin/phpMyAdmin/themes/metro/scss/_font.scss

@@ -0,0 +1,27 @@
+@font-face {
+  font-family: 'Open Sans';
+  src: local('☺'), local('Open Sans'), local('OpenSans');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Open Sans Light';
+  src: local('☺'), local('Open Sans Light'), local('OpenSans-Light');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Open Sans Bold';
+  src: local('☺'), local('Open Sans Bold'), local('OpenSans-Bold');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Open Sans Extrabold';
+  src: local('☺'), local('Open Sans Extrabold'), local('OpenSans-Extrabold');
+  font-weight: normal;
+  font-style: normal;
+}

admin/phpMyAdmin/themes/metro/scss/_forms.scss

@@ -0,0 +1,9 @@
+select#fieldsSelect,
+textarea#sqlquery {
+  margin: 0;
+  height: 20rem;
+}
+
+select.form-control {
+  padding: 4px;
+}

admin/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;
+  }
+}

admin/phpMyAdmin/themes/metro/scss/_icons.scss

@@ -0,0 +1,679 @@
+.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_rename {
+  background-image: url('../img/b_rename.svg');
+}
+
+.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');
+}

admin/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-base;
+  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);
+  }
+}

admin/phpMyAdmin/themes/metro/scss/_list-group.scss

@@ -0,0 +1,38 @@
+.list-group {
+  margin: 1rem 0 0;
+  padding-bottom: 10px;
+}
+
+#maincontainer .list-group-item {
+  display: list-item;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.list-group-item {
+  border: none;
+}
+
+#li_select_server,
+#li_change_password,
+#li_select_mysql_collation,
+#li_user_preferences,
+#li_select_lang,
+#li_select_theme {
+  &.list-group-item {
+    display: block;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    padding-#{$right}: 10px;
+    padding-#{$left}: 20px;
+
+    &:hover {
+      background: #f6f6f6;
+    }
+  }
+}
+
+#li_select_theme::after {
+  content: "Scheme: #{$color-scheme}";
+  margin-#{$left}: 10px;
+}

admin/phpMyAdmin/themes/metro/scss/_modal.scss

@@ -0,0 +1,4 @@
+.modal-header {
+  color: $navi-color;
+  background-color: $navi-background;
+}

admin/phpMyAdmin/themes/metro/scss/_nav.scss

@@ -0,0 +1,28 @@
+.nav-pills {
+  .nav-link {
+    margin: 0;
+    padding: 5px 15px;
+    font-weight: normal;
+    background-color: #f6f6f6;
+    color: $navi-pointer-color;
+    text-transform: uppercase;
+    font-family: $font-family-extra-bold;
+    border-radius: 0;
+
+    &:hover {
+      background-color: $bg-one;
+      text-decoration: underline;
+    }
+
+    img {
+      margin-#{$right}: 0.5em;
+      vertical-align: -3px;
+    }
+  }
+
+  .nav-link.active,
+  .show > .nav-link {
+    background: #ccc;
+    color: $navi-pointer-color;
+  }
+}

admin/phpMyAdmin/themes/metro/scss/_navbar.scss

@@ -0,0 +1,24 @@
+.navbar {
+  background-color: $th-background;
+  padding-#{$left}: 20px;
+  padding-#{$right}: 20px;
+}
+
+.navbar-nav .icon {
+  margin-#{$right}: 0.5em;
+  vertical-align: -3px;
+}
+
+.navbar-nav .nav-item {
+  padding: 8px 10px;
+
+  &.active {
+    background: #fff;
+  }
+}
+
+.navbar-nav .nav-link {
+  text-transform: uppercase;
+  font-family: $font-family-extra-bold;
+  font-weight: normal;
+}

admin/phpMyAdmin/themes/metro/scss/_navigation.scss

@@ -0,0 +1,529 @@
+// 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: $body-bg;
+    font-family: $font-family-base;
+  }
+
+  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;
+    }
+  }
+}
+
+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 {
+  height: 16px;
+  width: 16px;
+  color: $main-color;
+  margin-#{$right}: 5px;
+  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-#{$right}: 4px;
+    float: right;
+  }
+
+  .navItemControls {
+    display: none;
+    padding-#{$right}: 4px;
+    float: right;
+  }
+
+  &.activePointer .navItemControls {
+    display: block;
+    opacity: 0.5;
+
+    &:hover {
+      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-base;
+    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;
+      }
+    }
+  }
+}

admin/phpMyAdmin/themes/metro/scss/_reboot.scss

@@ -0,0 +1,23 @@
+// Document
+
+*:focus {
+  outline: none;
+}
+
+// Body
+
+body {
+  text-align: $left;
+}
+
+// Forms
+
+input,
+select {
+  font-size: 1em;
+}
+
+textarea {
+  font-family: $font-family-monospace;
+  font-size: 1.2em;
+}

admin/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%;
+  }
+}

admin/phpMyAdmin/themes/metro/scss/_rte.scss

@@ -0,0 +1,42 @@
+// 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,
+  .CodeMirror {
+    width: 100%;
+    margin: 6px;
+    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%;
+  }
+}
+
+.ui_tpicker_time_input {
+  width: 100%;
+}

admin/phpMyAdmin/themes/metro/scss/_tables.scss

@@ -0,0 +1,18 @@
+.table {
+  td {
+    touch-action: manipulation;
+    vertical-align: middle;
+  }
+
+  .thead-light {
+    th {
+      font-family: $font-family-bold;
+      font-weight: normal;
+      border-bottom: 1px solid $border-color;
+
+      a {
+        color: $th-color;
+      }
+    }
+  }
+}

admin/phpMyAdmin/themes/metro/scss/_variables.scss

@@ -0,0 +1,241 @@
+// configures general layout for detailed layout configuration please refer to the css files
+
+$navi-width: 250px;
+
+// 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;
+$body-bg: #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;
+  $body-bg: #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;
+  $body-bg: #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;
+  $body-bg: #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;
+  $body-bg: #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
+// ---------
+
+// Body
+
+$body-color: $main-color;
+
+// Typography
+
+$font-family-base: "Open Sans", "Segoe UI", sans-serif;
+$font-family-monospace: "Consolas", "Lucida Grande", monospace;
+
+$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-size-base: 0.6875rem; // 11px
+$line-height-base: 1;
+
+// Tables
+
+$table-cell-padding: 0.6em;
+$table-cell-padding-sm: $table-cell-padding;
+$table-head-bg: #fff;
+$table-head-color: $th-color;
+$table-striped-order: even;
+$table-accent-bg: $bg-one;
+$table-hover-color: $th-pointer-color;
+$table-hover-bg: $browse-marker-background;
+$table-border-width: 0;
+
+// Buttons
+
+$enable-transitions: false;
+
+$primary: $browse-pointer-color;
+$secondary: $browse-gray-color;
+
+$btn-border-radius: 0;
+$btn-line-height: 1;
+$btn-padding-x: 0.5rem;
+
+// Dropdowns
+
+$dropdown-border-radius: 0;
+
+// Forms
+
+$input-border-radius: 0;
+$form-check-input-margin-y: 0;
+$label-margin-bottom: 0;
+
+// Navbar
+
+$enable-caret: false;
+$navbar-padding-y: 0;
+$navbar-padding-x: 0;
+$navbar-nav-link-padding-x: 0;
+$navbar-nav-link-padding-y: 0;
+$navbar-light-color: #666;
+$navbar-light-hover-color: #333;
+$navbar-light-active-color: #666;
+$navbar-light-disabled-color: #666;
+
+// Card
+
+$card-border-radius: 0;
+$card-cap-bg: $th-background;
+$card-bg: $th-background;
+
+// Breadcrumbs
+
+$breadcrumb-padding-y: 0.89rem;
+$breadcrumb-margin-bottom: 0;
+$breadcrumb-bg: $navi-background;
+$breadcrumb-divider-color: $button-color;
+$breadcrumb-divider: none;
+$breadcrumb-border-radius: 0;
+
+// Alert
+
+$alert-margin-bottom: 1em;
+$alert-border-radius: 0;
+$alert-border-width: 0;
+
+// List group
+
+$list-group-bg: inherit;
+$list-group-item-padding-y: 0;
+
+// Modals
+
+$modal-content-border-radius: 0;
+$modal-header-padding-y: 0.5rem;

admin/phpMyAdmin/themes/metro/scss/blueeyes-theme-rtl.scss

@@ -0,0 +1,4 @@
+$color-scheme: blueeyes;
+$direction: rtl;
+
+@import "theme";

admin/phpMyAdmin/themes/metro/scss/blueeyes-theme.scss

@@ -0,0 +1,3 @@
+$color-scheme: blueeyes;
+
+@import "theme";

admin/phpMyAdmin/themes/metro/scss/mono-theme-rtl.scss

@@ -0,0 +1,4 @@
+$color-scheme: mono;
+$direction: rtl;
+
+@import "theme";

admin/phpMyAdmin/themes/metro/scss/mono-theme.scss

@@ -0,0 +1,3 @@
+$color-scheme: mono;
+
+@import "theme";

admin/phpMyAdmin/themes/metro/scss/printview.scss

@@ -0,0 +1,184 @@
+@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 /table/structure
+.ic_window-new,
+.ic_s_cog,
+#structure-action-links,
+#addColumns,
+.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%;
+}

admin/phpMyAdmin/themes/metro/scss/redmond-theme-rtl.scss

@@ -0,0 +1,4 @@
+$color-scheme: redmond;
+$direction: rtl;
+
+@import "theme";

admin/phpMyAdmin/themes/metro/scss/redmond-theme.scss

@@ -0,0 +1,3 @@
+$color-scheme: redmond;
+
+@import "theme";

admin/phpMyAdmin/themes/metro/scss/teal-theme-rtl.scss

@@ -0,0 +1,4 @@
+$color-scheme: teal;
+$direction: rtl;
+
+@import "theme";

admin/phpMyAdmin/themes/metro/scss/teal-theme.scss

@@ -0,0 +1,3 @@
+$color-scheme: teal;
+
+@import "theme";

admin/phpMyAdmin/themes/metro/scss/theme-rtl.scss

@@ -0,0 +1,3 @@
+$direction: rtl;
+
+@import "theme";

admin/phpMyAdmin/themes/metro/scss/theme.scss

@@ -0,0 +1,24 @@
+@import "font";
+@import "../../pmahomme/scss/direction";
+@import "variables";
+@import "../../bootstrap/scss/bootstrap";
+@import "common";
+@import "enum-editor";
+@import "gis";
+@import "navigation";
+@import "designer";
+@import "rte";
+@import "codemirror";
+@import "jqplot";
+@import "resizable-menu";
+@import "icons";
+@import "reboot";
+@import "tables";
+@import "forms";
+@import "nav";
+@import "navbar";
+@import "card";
+@import "breadcrumbs";
+@import "alert";
+@import "list-group";
+@import "modal";