phpmyadmin working

16 files changed, 6822 insertions, 0 deletions

diff --git a/srcs/phpmyadmin/themes/pmahomme/scss/_bootstrap.scss b/srcs/phpmyadmin/themes/pmahomme/scss/_bootstrap.scss
new file mode 100644
index 0000000..b5c157a
--- /dev/null
+++ b/srcs/phpmyadmin/themes/pmahomme/scss/_bootstrap.scss
@@ -0,0 +1,35 @@
+@import "../../../node_modules/bootstrap/scss/functions";
+@import "../../../node_modules/bootstrap/scss/variables";
+@import "../../../node_modules/bootstrap/scss/mixins";
+@import "../../../node_modules/bootstrap/scss/root";
+@import "../../../node_modules/bootstrap/scss/reboot";
+//@import "../../../node_modules/bootstrap/scss/type";
+//@import "../../../node_modules/bootstrap/scss/images";
+//@import "../../../node_modules/bootstrap/scss/code";
+//@import "../../../node_modules/bootstrap/scss/grid";
+//@import "../../../node_modules/bootstrap/scss/tables";
+//@import "../../../node_modules/bootstrap/scss/forms";
+@import "../../../node_modules/bootstrap/scss/buttons";
+//@import "../../../node_modules/bootstrap/scss/transitions";
+//@import "../../../node_modules/bootstrap/scss/dropdown";
+//@import "../../../node_modules/bootstrap/scss/button-group";
+//@import "../../../node_modules/bootstrap/scss/input-group";
+//@import "../../../node_modules/bootstrap/scss/custom-forms";
+//@import "../../../node_modules/bootstrap/scss/nav";
+//@import "../../../node_modules/bootstrap/scss/navbar";
+//@import "../../../node_modules/bootstrap/scss/card";
+//@import "../../../node_modules/bootstrap/scss/breadcrumb";
+//@import "../../../node_modules/bootstrap/scss/pagination";
+//@import "../../../node_modules/bootstrap/scss/badge";
+//@import "../../../node_modules/bootstrap/scss/jumbotron";
+//@import "../../../node_modules/bootstrap/scss/alert";
+//@import "../../../node_modules/bootstrap/scss/progress";
+//@import "../../../node_modules/bootstrap/scss/media";
+//@import "../../../node_modules/bootstrap/scss/list-group";
+//@import "../../../node_modules/bootstrap/scss/close";
+//@import "../../../node_modules/bootstrap/scss/modal";
+//@import "../../../node_modules/bootstrap/scss/tooltip";
+//@import "../../../node_modules/bootstrap/scss/popover";
+//@import "../../../node_modules/bootstrap/scss/carousel";
+//@import "../../../node_modules/bootstrap/scss/utilities";
+@import "../../../node_modules/bootstrap/scss/print";
diff --git a/srcs/phpmyadmin/themes/pmahomme/scss/_codemirror.scss b/srcs/phpmyadmin/themes/pmahomme/scss/_codemirror.scss
new file mode 100644
index 0000000..83fb5ad
--- /dev/null
+++ b/srcs/phpmyadmin/themes/pmahomme/scss/_codemirror.scss
@@ -0,0 +1,94 @@
+$textarea-cols: 40;
+$textarea-rows: 15;
+
+.CodeMirror {
+  height: ceil($textarea-rows * 1.2em);
+  direction: ltr;
+}
+
+#inline_editor_outer .CodeMirror {
+  height: ceil($textarea-rows * 0.4em);
+}
+
+.insertRowTable .CodeMirror {
+  height: ceil($textarea-rows * 0.6em);
+  width: ceil($textarea-cols * 0.6em);
+  border: 1px solid #a9a9a9;
+}
+
+#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;
+}
+
+.CodeMirror-lint-tooltip {
+  z-index: 200;
+  font-family: inherit;
+
+  code {
+    font-family: monospace;
+    font-weight: bold;
+  }
+}
diff --git a/srcs/phpmyadmin/themes/pmahomme/scss/_common.scss b/srcs/phpmyadmin/themes/pmahomme/scss/_common.scss
new file mode 100644
index 0000000..7457f75
--- /dev/null
+++ b/srcs/phpmyadmin/themes/pmahomme/scss/_common.scss
@@ -0,0 +1,4264 @@
+/**
+ * Common styles for the pmahomme theme
+ */
+
+/* general tags */
+html {
+  font-size: 82%;
+}
+
+input,
+select,
+textarea {
+  font-size: 1em;
+}
+
+body {
+  font-family: $font-family;
+  padding: 0;
+  margin: 0;
+  margin-#{$left}: $navi-width;
+  color: $main-color;
+  background: $main-background;
+}
+
+#page_content {
+  margin: 0 0.5em;
+}
+
+.desktop50 {
+  width: 50%;
+}
+
+.all100 {
+  width: 100%;
+}
+
+.all85 {
+  width: 85%;
+}
+
+.auth_config_tbl {
+  margin: 0 auto;
+}
+
+textarea,
+tt,
+pre,
+code {
+  font-family: $font-family-fixed;
+}
+
+h1 {
+  font-size: 140%;
+  font-weight: bold;
+}
+
+h2 {
+  font-size: 2em;
+  font-weight: normal;
+  text-shadow: 0 1px 0 #fff;
+  padding: 10px 0 10px;
+  padding-#{$left}: 3px;
+  color: #777;
+
+  // Hiding icons in the page titles
+  img {
+    display: none;
+  }
+
+  a img {
+    display: inline;
+  }
+}
+
+.data {
+  margin: 0 0 12px;
+}
+
+.data_full_width {
+  margin: 0 0 12px;
+  width: 100%;
+}
+
+h3 {
+  font-weight: bold;
+  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: #f3f3f3;
+  border: 1px solid #aaa;
+  margin-bottom: 10px;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+
+  td {
+    padding: 8px !important;
+  }
+
+  a {
+    border: 1px solid #aaa;
+    background-color: #fff;
+    padding: 4px 8px;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    background-image: linear-gradient(#fff, #e0e0e0);
+
+    &.active {
+      border: 1px solid #666;
+      box-shadow: 0 0 2px #999;
+      background: linear-gradient(#bbb, #fff);
+    }
+  }
+}
+
+dfn {
+  font-style: normal;
+
+  &:hover {
+    font-style: normal;
+    cursor: help;
+  }
+}
+
+th {
+  font-weight: bold;
+  color: $th-color;
+  background: #f3f3f3;
+  background: linear-gradient(#fff, #ccc);
+}
+
+a img {
+  border: 0;
+}
+
+hr {
+  color: $main-color;
+  background-color: $main-color;
+  border: 0;
+  height: 1px;
+}
+
+form {
+  padding: 0;
+  margin: 0;
+  display: inline;
+}
+
+input,
+select {
+  // Fix outline in Chrome
+  outline: none;
+}
+
+input {
+  &[type=text],
+  &[type=password],
+  &[type=number],
+  &[type=date] {
+    border-radius: 2px;
+    -moz-border-radius: 2px;
+    -webkit-border-radius: 2px;
+    background: white;
+    border: 1px solid #aaa;
+    color: #555;
+    padding: 4px;
+  }
+
+  &[type=text],
+  &[type=password],
+  &[type=number],
+  &[type=date],
+  &[type=checkbox] {
+    margin: 6px;
+  }
+}
+
+select {
+  margin: 6px;
+}
+
+input {
+  &[type=number] {
+    width: 50px;
+  }
+
+  &[type=text],
+  &[type=password],
+  &[type=number],
+  &[type=date] {
+    transition: all 0.2s;
+    -ms-transition: all 0.2s;
+    -webkit-transition: all 0.2s;
+    -moz-transition: all 0.2s;
+  }
+}
+
+select {
+  transition: all 0.2s;
+  -ms-transition: all 0.2s;
+  -webkit-transition: all 0.2s;
+  -moz-transition: all 0.2s;
+}
+
+input {
+  &[type=text][disabled],
+  &[type=password][disabled],
+  &[type=number][disabled],
+  &[type=date][disabled] {
+    background: #e8e8e8;
+    box-shadow: none;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+
+    &:hover {
+      background: #e8e8e8;
+      box-shadow: none;
+      -webkit-box-shadow: none;
+      -moz-box-shadow: none;
+    }
+  }
+}
+
+select[disabled] {
+  background: #e8e8e8;
+  box-shadow: none;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+
+  &:hover {
+    background: #e8e8e8;
+    box-shadow: none;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+  }
+}
+
+input {
+  &[type=text] {
+    &:hover,
+    &:focus {
+      border: 1px solid #7c7c7c;
+      background: #fff;
+    }
+  }
+
+  &[type=password] {
+    &:hover,
+    &:focus {
+      border: 1px solid #7c7c7c;
+      background: #fff;
+    }
+  }
+
+  &[type=number] {
+    &:hover,
+    &:focus {
+      border: 1px solid #7c7c7c;
+      background: #fff;
+    }
+  }
+
+  &[type=date] {
+    &:hover,
+    &:focus {
+      border: 1px solid #7c7c7c;
+      background: #fff;
+    }
+  }
+}
+
+select:focus {
+  border: 1px solid #7c7c7c;
+  background: #fff;
+}
+
+input {
+  &[type=text]:hover,
+  &[type=password]:hover,
+  &[type=number]:hover,
+  &[type=date]:hover {
+    box-shadow: 0 1px 3px #aaa;
+    -webkit-box-shadow: 0 1px 3px #aaa;
+    -moz-box-shadow: 0 1px 3px #aaa;
+  }
+}
+
+textarea {
+  overflow: visible;
+  margin: 6px;
+
+  &.char {
+    margin: 6px;
+  }
+
+  &.charField {
+    width: 95%;
+  }
+}
+
+th.fillPage {
+  width: 80%;
+}
+
+fieldset {
+  margin-top: 1em;
+  border-radius: 4px 4px 0 0;
+  -moz-border-radius: 4px 4px 0 0;
+  -webkit-border-radius: 4px 4px 0 0;
+  border: #aaa solid 1px;
+  padding: 0.5em;
+  background: #eee;
+
+  @if $direction == rtl {
+    text-shadow: -1px 1px 2px #fff inset;
+    -moz-box-shadow: -1px 1px 2px #fff inset;
+    -webkit-box-shadow: -1px 1px 2px #fff inset;
+    box-shadow: -1px 1px 2px #fff inset;
+  } @else {
+    text-shadow: 1px 1px 2px #fff inset;
+    -moz-box-shadow: 1px 1px 2px #fff inset;
+    -webkit-box-shadow: 1px 1px 2px #fff inset;
+    box-shadow: 1px 1px 2px #fff inset;
+  }
+}
+
+fieldset {
+  fieldset {
+    margin: 0.8em;
+    border: 1px solid #aaa;
+    background: #e8e8e8;
+  }
+
+  legend {
+    font-weight: bold;
+    color: #444;
+    padding: 5px 10px;
+    border-radius: 2px;
+    -moz-border-radius: 2px;
+    -webkit-border-radius: 2px;
+    border: 1px solid #aaa;
+    background-color: #fff;
+    max-width: 100%;
+    -moz-box-shadow: 3px 3px 15px #bbb;
+    -webkit-box-shadow: 3px 3px 15px #bbb;
+    box-shadow: 3px 3px 15px #bbb;
+    width: initial;
+    font-size: 1rem;
+  }
+}
+
+.some-margin {
+  margin: 1.5em;
+}
+
+// buttons in some browsers (eg. Konqueror) are block elements, this breaks design
+button {
+  display: inline;
+}
+
+// 3.4
+.datatable {
+  table-layout: fixed;
+}
+
+table {
+  border-collapse: collapse;
+
+  caption,
+  th,
+  td {
+    padding: 0.1em 0.3em;
+    margin: 0.1em;
+    vertical-align: middle;
+    text-shadow: 0 1px 0 #fff;
+  }
+}
+
+thead th {
+  border-#{$right}: 1px solid #fff;
+}
+
+th {
+  text-align: $left;
+}
+
+img,
+button {
+  vertical-align: middle;
+}
+
+input {
+  &[type=checkbox],
+  &[type=radio] {
+    vertical-align: -11%;
+  }
+}
+
+select {
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  border: 1px solid #bbb;
+  color: #333;
+  padding: 3px;
+  background: white;
+  margin: 6px;
+
+  &[multiple] {
+    background: linear-gradient(#fff, #f2f2f2);
+  }
+}
+
+/* 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;
+  text-shadow: 0 1px 0 #000;
+}
+
+div.tools {
+  padding: 0.2em;
+
+  a {
+    color: #3a7ead !important;
+  }
+
+  margin-top: 0;
+  margin-bottom: 0.5em;
+  // avoid a thick line since this should be used under another fieldset
+  border-top: 0;
+  text-align: $right;
+  float: none;
+  clear: both;
+  -webkit-border-radius: 0 0 4px 4px;
+  -moz-border-radius: 0 0 4px 4px;
+  border-radius: 0 0 4px 5px;
+}
+
+fieldset.tblFooters {
+  margin-top: 0;
+  margin-bottom: 0.5em;
+  // avoid a thick line since this should be used under another fieldset
+  border-top: 0;
+  text-align: $right;
+  float: none;
+  clear: both;
+  -webkit-border-radius: 0 0 4px 4px;
+  -moz-border-radius: 0 0 4px 4px;
+  border-radius: 0 0 4px 4px;
+}
+
+div.null_div {
+  height: 20px;
+  text-align: center;
+  font-style: normal;
+  min-width: 50px;
+}
+
+fieldset {
+  .formelement {
+    float: $left;
+    margin-#{$right}: 0.5em;
+    // IE
+    white-space: nowrap;
+  }
+
+  // revert for Gecko
+  div[class=formelement] {
+    white-space: normal;
+  }
+}
+
+button.mult_submit {
+  border: none;
+  background-color: transparent;
+}
+
+// odd items 1,3,5,7...
+table tbody:first-of-type tr:nth-child(odd),
+table tbody:first-of-type tr:nth-child(odd) th,
+#table_index tbody:nth-of-type(odd) tr,
+#table_index tbody:nth-of-type(odd) th {
+  background: #fff;
+}
+
+// even items 2,4,6,8...
+table tbody:first-of-type tr:nth-child(even),
+table tbody:first-of-type tr:nth-child(even) th,
+#table_index tbody:nth-of-type(even) tr,
+#table_index tbody:nth-of-type(even) th {
+  background: #dfdfdf;
+}
+
+table tr {
+  text-align: $left;
+
+  th {
+    text-align: $left;
+  }
+}
+
+// marked table rows
+td.marked:not(.nomarker),
+table tr.marked:not(.nomarker) td,
+table tbody:first-of-type tr.marked:not(.nomarker) th,
+table tr.marked:not(.nomarker) {
+  background: linear-gradient(#ced6df, #b6c6d7);
+  color: $browse-marker-color;
+}
+
+// hovered items
+table tbody:first-of-type tr:not(.nopointer):hover,
+table tbody:first-of-type tr:not(.nopointer):hover th,
+.hover:not(.nopointer) {
+  background: linear-gradient(#ced6df, #b6c6d7);
+  color: $browse-pointer-color;
+}
+
+// hovered table rows
+#table_index tbody:hover tr,
+#table_index tbody:hover th,
+table tr.hover:not(.nopointer) th {
+  background: linear-gradient(#ced6df, #b6c6d7);
+  color: $browse-pointer-color;
+}
+
+/**
+ * marks table rows/cells if the db field is in a where condition
+ */
+.condition {
+  border-color: $browse-marker-color !important;
+}
+
+th.condition {
+  border-width: 1px 1px 0 1px;
+  border-style: solid;
+}
+
+td.condition {
+  border-width: 0 1px 0 1px;
+  border-style: solid;
+}
+
+tr:last-child td.condition {
+  border-width: 0 1px 1px 1px;
+}
+
+@if $direction == ltr {
+  // for first th which must have right border set (ltr only)
+  .before-condition {
+    border-#{$right}: 1px solid $browse-marker-color;
+  }
+}
+
+/**
+ * cells with the value NULL
+ */
+td.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 #000;
+  color: inherit !important;
+}
+
+// no extra space in table cells
+td .icon {
+  image-rendering: pixelated;
+  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: 0 0.5em;
+}
+
+.success h1,
+.notice h1 {
+  border-bottom: 2px solid;
+  font-weight: bold;
+  text-align: $left;
+  margin: 0 0 0.2em 0;
+}
+
+div {
+  &.error h1 {
+    border-bottom: 2px solid;
+    font-weight: bold;
+    text-align: $left;
+    margin: 0 0 0.2em 0;
+  }
+
+  &.success,
+  &.notice,
+  &.error {
+    margin: 0.5em 0 0.5em;
+    border: 1px solid;
+    background-repeat: no-repeat;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    -moz-box-shadow: 0 1px 1px #fff inset;
+    -webkit-box-shadow: 0 1px 1px #fff inset;
+    box-shadow: 0 1px 1px #fff inset;
+
+    @if $direction == rtl {
+      background-position: 99% 50%;
+      padding: 10px 35px 10px 10px;
+    } @else {
+      background-position: 10px 50%;
+      padding: 10px 10px 10px 10px;
+    }
+  }
+}
+
+.success a,
+.notice a,
+.error a {
+  text-decoration: underline;
+}
+
+.success {
+  color: #000;
+  background-color: #ebf8a4;
+}
+
+h1.success,
+div.success {
+  border-color: #a2d246;
+}
+
+.success h1 {
+  border-color: #0f0;
+}
+
+.notice {
+  color: #000;
+  background-color: #e8eef1;
+}
+
+h1.notice,
+div.notice {
+  border-color: #3a6c7e;
+}
+
+.notice h1 {
+  border-color: #ffb10a;
+}
+
+.error {
+  border: 1px solid maroon !important;
+  color: #000;
+  background: pink;
+}
+
+h1.error {
+  border-color: #333;
+}
+
+div.error {
+  border-color: #333;
+
+  h1 {
+    border-color: #f00;
+  }
+}
+
+.confirmation {
+  color: #000;
+  background-color: pink;
+}
+
+// end messageboxes
+
+.new_central_col {
+  width: 100%;
+}
+
+.tblcomment {
+  font-size: 70%;
+  font-weight: normal;
+  color: #009;
+}
+
+.tblHeaders {
+  font-weight: bold;
+  color: $th-color;
+  background: $th-background;
+}
+
+div.tools,
+.tblFooters {
+  font-weight: normal;
+  color: $th-color;
+  background: $th-background;
+}
+
+.tblHeaders a {
+  &:link,
+  &:active,
+  &:visited {
+    color: #00f;
+  }
+}
+
+div.tools a {
+  &:link,
+  &:visited,
+  &:active {
+    color: #00f;
+  }
+}
+
+.tblFooters a {
+  &:link,
+  &:active,
+  &:visited {
+    color: #00f;
+  }
+}
+
+.tblHeaders a:hover,
+div.tools a:hover,
+.tblFooters a: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;
+}
+
+/**
+ * login form
+ */
+body#loginform {
+  margin: 1em 0 0 0;
+  text-align: center;
+
+  h1,
+  a.logo {
+    display: block;
+    text-align: center;
+  }
+
+  div.container {
+    text-align: $left;
+    width: 30em;
+    margin: 0 auto;
+  }
+}
+
+#login_form {
+  text-align: $left;
+}
+
+div.container.modal_form {
+  margin: 0 auto;
+  width: 30em;
+  text-align: center;
+  background: #fff;
+  z-index: 999;
+}
+
+div#modalOverlay {
+  position: fixed;
+  top: 0;
+  #{$left}: 0;
+  height: 100%;
+  width: 100%;
+  background: #fff;
+  z-index: 900;
+}
+
+form.login {
+  label {
+    width: 10em;
+    font-weight: bolder;
+    display: inline-block;
+    margin-#{$left}: 2em;
+  }
+
+  input {
+    &[type=text],
+    &[type=password] {
+      box-sizing: border-box;
+      width: 14em;
+    }
+  }
+
+  select {
+    box-sizing: border-box;
+    width: 14em;
+  }
+}
+
+.commented_column {
+  border-bottom: 1px dashed #000;
+}
+
+.column_attribute {
+  font-size: 70%;
+}
+
+.column_name {
+  font-size: 80%;
+  margin: 5px 2px;
+}
+
+.cfg_dbg_demo {
+  margin: 0.5em 1em 0.5em 1em;
+}
+
+.central_columns_navigation {
+  padding: 1.5% 0 !important;
+}
+
+.central_columns_add_column {
+  display: inline-block;
+  margin-#{$left}: 1%;
+  max-width: 50%;
+}
+
+.message_errors_found {
+  margin-top: 20px;
+}
+
+.repl_gui_skip_err_cnt {
+  width: 30px;
+}
+
+.font_weight_bold {
+  font-weight: bold;
+}
+
+.color_gray {
+  color: gray;
+}
+
+.max_height_400 {
+  max-height: 400px;
+}
+
+.color_red {
+  color: red;
+}
+
+.pma_sliding_message {
+  display: inline-block;
+}
+
+li.last.database {
+  margin-bottom: 15px !important;
+}
+
+/* specific elements */
+
+#topmenu {
+  margin-top: 0.5em;
+  padding: 0.1em 0.3em;
+
+  a {
+    text-shadow: 0 1px 0 #fff;
+  }
+
+  .error {
+    background: #eee;
+    border: 0 !important;
+    color: #aaa;
+  }
+}
+
+ul {
+  &#topmenu,
+  &#topmenu2,
+  &.tabs {
+    font-weight: bold;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  &#topmenu2 {
+    margin: 0.25em 0.5em 0;
+    height: 2em;
+    clear: both;
+  }
+
+  &#topmenu li,
+  &#topmenu2 li {
+    float: left;
+    margin: 0;
+    vertical-align: middle;
+  }
+}
+
+#topmenu img,
+#topmenu2 img {
+  margin-#{$right}: 0.5em;
+  vertical-align: -3px;
+}
+
+.menucontainer {
+  background: linear-gradient(#fff, #dcdcdc);
+  border-top: 1px solid #aaa;
+}
+
+.scrollindicator {
+  display: none;
+}
+
+// default tab styles
+.tabactive {
+  background: #fff !important;
+}
+
+ul#topmenu2 a {
+  display: block;
+  margin: 7px 6px 7px;
+  margin-#{$left}: 0;
+  padding: 4px 10px;
+  white-space: nowrap;
+  border: 1px solid #ddd;
+  border-radius: 20px;
+  -moz-border-radius: 20px;
+  -webkit-border-radius: 20px;
+  background: #f2f2f2;
+}
+
+span {
+  &.caution {
+    color: #f00;
+  }
+
+  &.success {
+    color: green;
+  }
+}
+
+fieldset.caution a {
+  color: #f00;
+
+  &:hover {
+    color: #fff;
+    background-color: #f00;
+  }
+}
+
+ul {
+  &#topmenu {
+    ul {
+      @if $direction == rtl {
+        -moz-box-shadow: -1px 1px 6px #ddd;
+        -webkit-box-shadow: -2px 2px 3px #666;
+        box-shadow: -2px 2px 3px #666;
+      } @else {
+        -moz-box-shadow: 1px 1px 6px #ddd;
+        -webkit-box-shadow: 2px 2px 3px #666;
+        box-shadow: 2px 2px 3px #666;
+      }
+
+      &.only {
+        #{$left}: 0;
+      }
+    }
+
+    > li {
+      border-#{$right}: 1px solid #fff;
+      border-#{$left}: 1px solid #ccc;
+      border-bottom: 1px solid #ccc;
+
+      &:first-child {
+        border-#{$left}: 0;
+      }
+    }
+
+    a,
+    span {
+      padding: 0.6em;
+    }
+
+    ul {
+      a {
+        border-width: 1pt 0 0 0;
+        -moz-border-radius: 0;
+        -webkit-border-radius: 0;
+        border-radius: 0;
+      }
+
+      li:first-child a {
+        border-width: 0;
+      }
+
+      a:hover,
+      .tabactive {
+        text-decoration: none;
+      }
+    }
+
+    > li > {
+      a:hover,
+      .tabactive {
+        text-decoration: none;
+      }
+    }
+  }
+
+  &#topmenu2 a {
+    &.tab:hover,
+    &.tabactive {
+      background-color: $bg-one;
+      border-radius: 0.3em;
+      -moz-border-radius: 0.3em;
+      -webkit-border-radius: 0.3em;
+      text-decoration: none;
+    }
+  }
+
+  // to be able to cancel the bottom border, use <li class="active">
+  &#topmenu > li.active {
+    border-#{$right}: 0;
+    border-bottom-color: #fff;
+  }
+}
+// end topmenu
+
+// 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;
+}
+
+// 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 {
+  padding-#{$right}: 1em;
+  width: 100%;
+}
+
+#serverinfo {
+  background: #888;
+  padding: 0.3em 0.9em;
+  padding-#{$left}: 2.2em;
+  text-shadow: 0 1px 0 #000;
+  max-width: 100%;
+  max-height: 16px;
+  overflow: hidden;
+  box-sizing: content-box;
+
+  .item {
+    white-space: nowrap;
+    color: #fff;
+  }
+
+  img {
+    margin: 0 0.1em 0;
+    margin-#{$left}: 0.2em;
+  }
+}
+
+#page_nav_icons {
+  position: fixed;
+  top: 0;
+  #{$right}: 0;
+  z-index: 99;
+  padding: 0.25em 0;
+}
+
+#goto_pagetop,
+#lock_page_icon {
+  padding: 0.25em;
+  background: #888;
+}
+
+#page_settings_icon {
+  padding: 0.25em;
+  background: #888;
+  cursor: pointer;
+  display: none;
+}
+
+#page_settings_modal,
+#pma_navigation_settings {
+  display: none;
+}
+
+#span_table_comment {
+  font-weight: bold;
+  font-style: italic;
+  white-space: nowrap;
+  margin-#{$left}: 10px;
+  color: #d6d6d6;
+  text-shadow: none;
+}
+
+#textSQLDUMP {
+  width: 95%;
+  height: 95%;
+  font-family: Consolas, "Courier New", Courier, monospace;
+  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 silver;
+    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;
+  }
+
+  input {
+    width: 12em;
+    clear: $right;
+    max-width: 100%;
+  }
+
+  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: auto;
+    }
+  }
+}
+
+#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;
+}
+
+#fieldset_user_global_rights > legend input {
+  margin-#{$left}: 2em;
+}
+// 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;
+}
+
+div#serverStatusTabs {
+  margin-top: 1em;
+}
+
+caption a.top {
+  float: $right;
+}
+
+div#serverstatusquerieschart {
+  float: $left;
+  width: 500px;
+  height: 350px;
+  margin-#{$right}: 50px;
+}
+
+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 {
+  border: 1px solid #ddd;
+  background-color: #e6e6e6;
+  margin-#{$left}: 10px;
+}
+
+table#chartGrid {
+  td {
+    padding: 3px;
+    margin: 0;
+  }
+
+  div.monitorChart {
+    background: #ebebeb;
+    border: none;
+  }
+}
+
+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;
+
+  @if $direction == rtl {
+    -moz-box-shadow: -2px 2px 3px #666;
+    -webkit-box-shadow: -2px 2px 3px #666;
+    box-shadow: -2px 2px 3px #666;
+  } @else {
+    -moz-box-shadow: 2px 2px 3px #666;
+    -webkit-box-shadow: 2px 2px 3px #666;
+    box-shadow: 2px 2px 3px #666;
+  }
+}
+
+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 {
+  width: 100%;
+
+  .var-row > td {
+    line-height: 2em;
+  }
+
+  .var-header {
+    color: $th-color;
+    background: #f3f3f3;
+    background: linear-gradient(#fff, #ccc);
+    font-weight: bold;
+    text-align: $left;
+  }
+
+  .var-row {
+    padding: 0.5em;
+    min-height: 18px;
+  }
+
+  .var-name {
+    font-weight: bold;
+
+    &.session {
+      font-weight: normal;
+      font-style: italic;
+    }
+  }
+
+  .var-value {
+    float: $right;
+    text-align: $right;
+  }
+
+  .var-doc {
+    overflow: visible;
+    float: $right;
+  }
+
+  // server variables editor
+  .editLink {
+    padding-#{$right}: 1em;
+    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 {
+      margin: 0 0.5em;
+      line-height: 2em;
+    }
+  }
+}
+
+// end server variables
+
+p.notice {
+  margin: 1.5em 0;
+  border: 1px solid #000;
+  background-repeat: no-repeat;
+
+  @if $direction == rtl {
+    background-position: 99% 50%;
+    padding: 25px 10px 10px 10px;
+  } @else {
+    background-position: 10px 50%;
+    padding: 10px 10px 10px 25px;
+  }
+
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+  -moz-box-shadow: 0 1px 2px #fff inset;
+  -webkit-box-shadow: 0 1px 2px #fff inset;
+  box-shadow: 0 1px 2px #fff inset;
+  background-color: #555;
+  color: #d4fb6a;
+
+  a {
+    color: #fff;
+    text-decoration: underline;
+  }
+}
+
+// profiling
+
+div#profilingchart {
+  width: 850px;
+  height: 370px;
+  float: $left;
+}
+
+#profilingchart .jqplot-highlighter-tooltip {
+  top: auto !important;
+  #{$left}: 11px;
+  bottom: 24px;
+}
+
+// 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 {
+  margin-bottom: 15px;
+  padding: 16px;
+  background: #f3f3f3;
+  border: 1px solid #aaa;
+  border-radius: 5px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  box-shadow: 0 1px 1px #fff inset;
+  -webkit-box-shadow: 0 1px 1px #fff inset;
+  -moz-box-shadow: 0 1px 1px #fff inset;
+}
+
+#sectionlinks a,
+.buttonlinks a,
+a.button {
+  font-weight: bold;
+  text-shadow: 0 1px 0 #fff;
+  margin-bottom: 7px;
+  margin-#{$left}: 7px;
+  border: 1px solid #aaa;
+  padding: 7px;
+  color: #111 !important;
+  text-decoration: none;
+  background-color: #ddd;
+  white-space: nowrap;
+  border-radius: 20px;
+  -webkit-border-radius: 20px;
+  -moz-border-radius: 20px;
+  background-image: linear-gradient(#f8f8f8, #d8d8d8);
+
+  &:hover {
+    background: linear-gradient(#fff, #ddd);
+  }
+}
+
+div {
+  &#sqlquerycontainer {
+    float: $left;
+    width: 69%;
+  }
+
+  &#tablefieldscontainer {
+    float: $right;
+    width: 29%;
+    margin-top: -20px;
+
+    select {
+      width: 100%;
+      background: #fff;
+    }
+  }
+}
+
+#sqlquerycontainer,
+#sqlquerycontainerfull {
+  .btn {
+    margin: 5px;
+  }
+}
+
+textarea {
+  &#sqlquery {
+    width: 100%;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+    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: disc;
+    vertical-align: middle;
+  }
+
+  li {
+    margin-bottom: 0.3em;
+  }
+}
+
+#full_name_layer {
+  position: absolute;
+  padding: 2px;
+  margin-top: -3px;
+  z-index: 801;
+  border-radius: 3px;
+  border: solid 1px #888;
+  background: #fff;
+}
+
+/* end main page */
+
+/* iconic view for ul items */
+
+li.no_bullets {
+  list-style-type: none !important;
+  margin-#{$left}: -25px !important; //align with other list items which have bullets
+}
+
+// end iconic view for ul items
+
+#body_browse_foreigners {
+  background: $navi-background;
+  margin: 0.5em 0.5em 0 0.5em;
+}
+
+#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: 1em;
+  margin-bottom: 1em;
+  width: 98%;
+  margin-#{$left}: 1%;
+  text-align: $right;
+  border-top: 0.1em solid silver;
+}
+
+#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%;
+  }
+}
+
+#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}: 1em;
+    margin-top: 0;
+    margin-bottom: 0;
+    max-height: 10em;
+    overflow: auto;
+    direction: ltr;
+  }
+
+  &.sql {
+    display: block;
+    padding: 1em;
+    margin-top: 0;
+    margin-bottom: 0;
+    max-height: 10em;
+    overflow: auto;
+    direction: ltr;
+  }
+}
+
+div.sqlvalidate {
+  display: block;
+  padding: 1em;
+  margin-top: 0;
+  margin-bottom: 0;
+  max-height: 10em;
+  overflow: auto;
+  direction: ltr;
+}
+
+.result_query {
+  div.sqlOuter {
+    background: $bg-one;
+    text-align: $left;
+  }
+
+  .success,
+  .error {
+    margin-bottom: 0;
+    border-bottom: none !important;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    padding-bottom: 5px;
+  }
+}
+
+#PMA_slidingMessage code.sql,
+div.sqlvalidate {
+  background: $bg-one;
+}
+
+#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}: 1em;
+  padding-#{$right}: 0.5em;
+}
+
+.group {
+  border: 1px solid #999;
+  background: #f3f3f3;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+
+  @if $direction == rtl {
+    -moz-box-shadow: -2px 2px 5px #ccc;
+    -webkit-box-shadow: -2px 2px 5px #ccc;
+    box-shadow: -2px 2px 5px #ccc;
+  } @else {
+    -moz-box-shadow: 2px 2px 5px #ccc;
+    -webkit-box-shadow: 2px 2px 5px #ccc;
+    box-shadow: 2px 2px 5px #ccc;
+  }
+
+  margin-bottom: 1em;
+  padding-bottom: 1em;
+
+  h2 {
+    background-color: #bbb;
+    padding: 0.1em 0.3em;
+    margin-top: 0;
+    color: #fff;
+    font-size: 1.6em;
+    font-weight: normal;
+    text-shadow: 0 1px 0 #777;
+    -moz-box-shadow: 1px 1px 15px #999 inset;
+    -webkit-box-shadow: 1px 1px 15px #999 inset;
+    box-shadow: 1px 1px 15px #999 inset;
+  }
+}
+
+.group-cnt {
+  padding: 0;
+  padding-#{$left}: 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-type: 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;
+
+    div.percentage {
+      position: absolute;
+      top: 0;
+      #{$left}: 0;
+      width: 202px;
+    }
+  }
+
+  &.upload_progress_bar_inner {
+    background-color: $navi-pointer-background;
+    width: 0;
+    height: 12px;
+    margin: 1px;
+    overflow: hidden;
+    color: $browse-marker-color;
+    position: relative;
+
+    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 {
+    background: #fcc;
+  }
+}
+
+select.invalid_value,
+.invalid_value {
+  background: #fcc;
+}
+
+/**
+  *  Ajax notification styling
+  */
+.ajax_notification {
+  // The notification needs to be shown on the top of the page
+  top: 0;
+  position: fixed;
+  margin-top: 200px;
+  margin-#{$right}: auto;
+  margin-bottom: 0;
+  margin-#{$left}: auto;
+  // Keep a little space on the sides of the text
+  padding: 5px;
+  width: 350px;
+  // If this is not kept at a high z-index, the jQueryUI modal dialogs (z-index: 1000) might hide this
+  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: 2%;
+  border: 1px solid #e2b709;
+  background-color: #ffe57e;
+  border-radius: 5px;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  box-shadow: 0 5px 90px #888;
+  -moz-box-shadow: 0 5px 90px #888;
+  -webkit-box-shadow: 0 5px 90px #888;
+}
+
+#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 {
+  h2 {
+    word-wrap: break-word;
+  }
+
+  h3 {
+    border-bottom: 1px #999 solid;
+    font-size: 110%;
+  }
+}
+
+.importoptions h3 {
+  border-bottom: 1px #999 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;
+
+  #buttonGo {
+    float: $right;
+  }
+}
+
+.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;
+    }
+  }
+}
+
+#export_refresh_form {
+  margin-#{$left}: 20px;
+}
+
+#export_back_button {
+  display: inline;
+}
+
+#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;
+    // same as padding of "table td"
+    margin-#{$right}: 0.3em;
+  }
+
+  .submenu li {
+    padding: 0;
+    margin: 0;
+
+    span {
+      padding: 0.3em;
+      margin: 0.1em;
+    }
+  }
+}
+
+#structure-action-links a {
+  margin-#{$right}: 1em;
+}
+
+#addColumns input[type=radio] {
+  margin: 3px 0 0;
+  margin-#{$left}: 1em;
+}
+
+/**
+ * Indexes
+ */
+#index_frm {
+  .index_info {
+    input[type=text],
+    select {
+      width: 100%;
+      margin: 0;
+      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: $left;
+  }
+}
+
+#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;
+    -webkit-border-radius: 2px;
+    -moz-border-radius: 2px;
+    border-radius: 2px;
+  }
+}
+
+// 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 #aaa;
+        padding: 7px 10px;
+        -webkit-border-radius: 5px 5px 0 0;
+        -moz-border-radius: 5px 5px 0 0;
+        border-radius: 5px 5px 0 0;
+        background: #f2f2f2;
+        color: #555;
+        text-shadow: 0 1px 0 #fff;
+
+        &:hover,
+        &:active {
+          background: #e5e5e5;
+        }
+      }
+
+      &.active a {
+        background-color: #fff;
+        margin-top: 1px;
+        color: #000;
+        text-shadow: none;
+        border-color: #aaa;
+        border-bottom: 1px solid #fff;
+      }
+    }
+  }
+
+  fieldset {
+    margin-top: 0;
+    padding: 0;
+    clear: both;
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0;
+
+    p {
+      margin: 0;
+      padding: 0.5em;
+      background: #fff;
+      border-top: 0;
+    }
+
+    // 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: $font-family;
+      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;
+    }
+
+    .doc {
+      margin-#{$left}: 1em;
+    }
+
+    .disabled-notice {
+      margin-#{$left}: 1em;
+      font-size: 80%;
+      text-transform: uppercase;
+      color: #e00;
+      cursor: help;
+    }
+
+    th {
+      padding: 0.3em 0.3em 0.3em;
+      padding-#{$left}: 0.5em;
+      text-align: $left;
+      vertical-align: top;
+      width: 40%;
+      background: transparent;
+      filter: none;
+      border-top: 1px $bg-two solid;
+      border-#{$right}: none;
+
+      small {
+        display: block;
+        font-weight: normal;
+        font-family: $font-family;
+        font-size: x-small;
+        color: #444;
+      }
+    }
+
+    td {
+      padding-top: 0.3em;
+      padding-bottom: 0.3em;
+      vertical-align: top;
+      border-top: 1px $bg-two solid;
+      border-#{$right}: none;
+    }
+  }
+
+  legend {
+    display: none;
+  }
+
+  .lastrow {
+    border-top: 1px #000 solid;
+    background: $th-background;
+    padding: 0.5em;
+    text-align: center;
+
+    input {
+      font-weight: bold;
+    }
+  }
+
+  span.checkbox {
+    padding: 2px;
+    display: inline-block;
+
+    &.custom {
+      padding: 1px;
+      border: 1px #edec90 solid;
+      background: #ffc;
+    }
+  }
+
+  // customized field
+  .custom {
+    background: #ffc;
+  }
+
+  .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;
+  }
+
+  // error list
+  dd {
+    margin-#{$left}: 0.5em;
+
+    &::before {
+      content: "\25B8  ";
+    }
+  }
+}
+
+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;
+    }
+  }
+}
+
+.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 {
+  position: relative;
+  border: 1px solid #aaa;
+  float: $right;
+  overflow: hidden;
+  width: 450px;
+  height: 300px;
+
+  .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;
+  -webkit-border-radius: 0.3em;
+  -moz-border-radius: 0.3em;
+  border-radius: 0.3em;
+
+  table,
+  td,
+  img {
+    padding: 0;
+    position: relative;
+  }
+
+  .container {
+    position: absolute;
+
+    td,
+    tr {
+      background: none !important;
+    }
+  }
+
+  .toggleOn {
+    color: #fff;
+    padding: 0 1em;
+    text-shadow: 0 0 0.2em #000;
+  }
+
+  .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;
+  }
+}
+
+#table_name_col_no_outer {
+  margin-top: 45px;
+}
+
+#table_name_col_no {
+  position: fixed;
+  top: 55px;
+  width: 100%;
+  background: #fff;
+}
+
+#table_columns {
+  input {
+    &[type=text],
+    &[type=password],
+    &[type=number] {
+      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;
+  }
+}
+
+#openlayersmap {
+  width: 450px;
+  height: 300px;
+}
+
+.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;
+    }
+  }
+
+  th.draggable {
+    &.right span {
+      margin-#{$right}: 0;
+    }
+
+    span {
+      margin-#{$right}: 10px;
+    }
+  }
+}
+
+.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;
+  text-shadow: -1px -1px #000;
+  -moz-box-shadow: 0 0 0.7em #000;
+  -webkit-box-shadow: 0 0 0.7em #000;
+  box-shadow: 0 0 0.7em #000;
+  -moz-border-radius: 0.3em;
+  -webkit-border-radius: 0.3em;
+  border-radius: 0.3em;
+}
+
+.cPointer {
+  $height: 20px;
+  $width: 10px;
+
+  height: $height;
+  width: $width;
+  margin-top: $height / -2;
+  margin-#{$left}: $width / -2;
+  background: url("../img/col_pointer.png");
+  position: absolute;
+}
+
+.tooltip {
+  background: #333 !important;
+  opacity: 0.8 !important;
+  border: 1px solid #000 !important;
+  -moz-border-radius: 0.3em !important;
+  -webkit-border-radius: 0.3em !important;
+  border-radius: 0.3em !important;
+  text-shadow: -1px -1px #000 !important;
+  font-size: 0.8em !important;
+  font-weight: bold !important;
+  padding: 1px 3px !important;
+
+  * {
+    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: #eee;
+  border: solid 1px #999;
+  position: absolute;
+  -moz-box-shadow: 0 0.2em 0.5em #333;
+  -webkit-box-shadow: 0 0.2em 0.5em #333;
+  box-shadow: 0 0.2em 0.5em #333;
+
+  .lDiv div {
+    padding: 0.2em 0.5em 0.2em;
+    padding-#{$left}: 0.2em;
+
+    &:hover {
+      background: #ddd;
+      cursor: pointer;
+    }
+
+    input {
+      cursor: pointer;
+    }
+  }
+}
+
+.showAllColBtn {
+  border-bottom: solid 1px #999;
+  border-top: solid 1px #999;
+  cursor: pointer;
+  font-size: 0.9em;
+  font-weight: bold;
+  padding: 0.35em 1em;
+  text-align: center;
+
+  &:hover {
+    background: #ddd;
+  }
+}
+
+.turnOffSelect {
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.navigation {
+  margin: 0.8em 0;
+  border-radius: 5px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  background: linear-gradient(#eee, #ccc);
+
+  td {
+    margin: 0;
+    padding: 0;
+    vertical-align: middle;
+    white-space: nowrap;
+  }
+
+  input {
+    &[type=submit] {
+      background: none;
+      border: 0;
+      filter: none;
+      margin: 0;
+      padding: 0.8em 0.5em;
+      border-radius: 0;
+      -webkit-border-radius: 0;
+      -moz-border-radius: 0;
+
+      &:hover {
+        color: #fff;
+        cursor: pointer;
+        text-shadow: none;
+        background: linear-gradient(#333, #555);
+      }
+    }
+
+    &.edit_mode_active {
+      color: #fff;
+      cursor: pointer;
+      text-shadow: none;
+      background: linear-gradient(#333, #555);
+    }
+  }
+
+  .btn-link {
+    color: $main-color;
+
+    &:hover {
+      color: #fff;
+      background-image: linear-gradient(#333, #555);
+      text-decoration: none;
+    }
+  }
+
+  select {
+    margin: 0 0.8em;
+  }
+}
+
+.navigation_separator {
+  color: #999;
+  display: inline-block;
+  font-size: 1.5em;
+  text-align: center;
+  height: 1.4em;
+  width: 1.2em;
+  text-shadow: 1px 0 #fff;
+}
+
+.cEdit {
+  margin: 0;
+  padding: 0;
+  position: absolute;
+
+  input[type=text] {
+    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: 0;
+  }
+
+  .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 {
+  td {
+    vertical-align: top;
+  }
+
+  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;
+}
+
+.ui-draggable {
+  z-index: 801;
+}
+
+// over-riding jqplot-yaxis class
+.jqplot-yaxis {
+  #{$left}: 0 !important;
+  min-width: 25px;
+  width: auto;
+}
+
+.jqplot-axis {
+  overflow: hidden;
+}
+
+.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 {
+    width: 100%;
+  }
+
+  label {
+    font-weight: bold;
+  }
+}
+
+.ui-dialog {
+  position: fixed;
+}
+
+.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}: $navi-width;
+
+  .templates {
+    display: none;
+  }
+
+  .mid_text {
+    vertical-align: middle;
+  }
+
+  .toolbar {
+    position: relative;
+    background: #ccc;
+    border-top: solid 1px #aaa;
+    cursor: n-resize;
+
+    span {
+      vertical-align: middle;
+    }
+
+    &.collapsed {
+      cursor: default;
+
+      &:not(:hover) {
+        display: inline-block;
+        border-top-right-radius: 3px;
+        border-#{$right}: solid 1px #aaa;
+      }
+
+      > .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;
+  }
+
+  .message span.action:hover,
+  .toolbar .button:hover,
+  .switch_button:hover {
+    background: #ddd;
+  }
+
+  .toolbar {
+    .button.active {
+      background: #ddd;
+    }
+
+    .text {
+      font-weight: bold;
+    }
+
+    .button,
+    .text {
+      margin-#{$right}: 0.4em;
+    }
+
+    .button,
+    .text {
+      float: $right;
+    }
+  }
+
+  .content {
+    overflow-x: hidden;
+    overflow-y: auto;
+    margin-bottom: -65px;
+    border-top: solid 1px #aaa;
+    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;
+      border-top-left-radius: 3px;
+    }
+
+    &.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;
+      border-radius: 3px;
+
+      &.shared {
+        background: #396;
+      }
+    }
+
+    &.expanded .bookmark_label {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+  }
+
+  .query_input {
+    position: relative;
+  }
+
+  .mid_layer {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    background: #666;
+    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%;
+      box-shadow: -2px 1px 4px -1px #999;
+    }
+  }
+
+  .button.hide,
+  .message span.text.hide {
+    display: none;
+  }
+}
+
+#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;
+  }
+}
+
+#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;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+
+  @if $direction == rtl {
+    -moz-box-shadow: -2px 2px 5px #ccc;
+    -webkit-box-shadow: -2px 2px 5px #ccc;
+    box-shadow: -2px 2px 5px #ccc;
+  } @else {
+    -moz-box-shadow: 2px 2px 5px #ccc;
+    -webkit-box-shadow: 2px 2px 5px #ccc;
+    box-shadow: 2px 2px 5px #ccc;
+  }
+
+  h2 {
+    background-color: #bbb;
+    padding: 0.1em 0.3em;
+    margin-top: 0;
+    margin-bottom: 0;
+    color: #fff;
+    font-size: 1.6em;
+    font-weight: normal;
+    text-shadow: 0 1px 0 #777;
+
+    @if $direction == rtl {
+      -moz-box-shadow: -1px 1px 15px #999 inset;
+      -webkit-box-shadow: -1px 1px 15px #999 inset;
+      box-shadow: -1px 1px 15px #999 inset;
+    } @else {
+      -moz-box-shadow: 1px 1px 15px #999 inset;
+      -webkit-box-shadow: 1px 1px 15px #999 inset;
+      box-shadow: 1px 1px 15px #999 inset;
+    }
+  }
+}
+
+.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;
+  text-shadow: 0 1px 0 #777;
+
+  @if $direction == rtl {
+    -moz-box-shadow: -1px 1px 15px #999 inset;
+    -webkit-box-shadow: -1px 1px 15px #999 inset;
+    box-shadow: -1px 1px 15px #999 inset;
+  } @else {
+    -moz-box-shadow: 1px 1px 15px #999 inset;
+    -webkit-box-shadow: 1px 1px 15px #999 inset;
+    box-shadow: 1px 1px 15px #999 inset;
+  }
+}
+
+.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;
+  -webkit-box-shadow: 0 0 15px #999;
+  border-radius: 10px;
+  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;
+  }
+}
+// end of styles for jQuery-ui to support rtl languages
+
+// templates/database/designer
+// side menu
+#name-panel {
+  overflow: hidden;
+}
+
+// Bootstrap
+
+.btn-primary {
+  font-weight: $font-weight-bold;
+}
+
+.btn-primary,
+.btn-secondary {
+  border-color: #aaa;
+  text-shadow: 0 1px 0 #fff;
+  background-image: linear-gradient(#f8f8f8, #d8d8d8);
+
+  &:hover {
+    background-image: linear-gradient(#fff, #ddd);
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  // For mobile phones:
+  #main_pane_left {
+    width: 100%;
+  }
+
+  #main_pane_right {
+    padding-top: 0;
+    padding-#{$left}: 1px;
+    padding-#{$right}: 1px;
+  }
+
+  ul {
+    &#topmenu,
+    &.tabs {
+      display: flex;
+    }
+  }
+
+  .navigationbar {
+    display: inline-flex;
+    margin: 0 !important;
+    border-radius: 0 !important;
+    overflow: auto;
+  }
+
+  .scrollindicator {
+    padding: 5px;
+    cursor: pointer;
+    display: inline;
+  }
+
+  .responsivetable {
+    overflow-x: auto;
+  }
+
+  body#loginform div.container {
+    width: 100%;
+  }
+
+  .largescreenonly {
+    display: none;
+  }
+
+  .width100,
+  .desktop50 {
+    width: 100%;
+  }
+
+  .width96 {
+    width: 96% !important;
+  }
+
+  #page_nav_icons {
+    display: none;
+  }
+
+  table#serverstatusconnections {
+    margin-#{$left}: 0;
+  }
+
+  #table_name_col_no {
+    top: 62px;
+  }
+
+  .tdblock tr td {
+    display: block;
+  }
+
+  #table_columns {
+    margin-top: 60px;
+
+    .tablesorter {
+      min-width: 100%;
+    }
+  }
+
+  .doubleFieldset fieldset {
+    width: 98%;
+  }
+
+  div#serverstatusquerieschart {
+    width: 100%;
+    height: 450px;
+  }
+
+  .ui-dialog {
+    margin: 1%;
+    width: 95% !important;
+  }
+}
+
+#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/pmahomme/scss/_designer.scss b/srcs/phpmyadmin/themes/pmahomme/scss/_designer.scss
new file mode 100644
index 0000000..5976501
--- /dev/null
+++ b/srcs/phpmyadmin/themes/pmahomme/scss/_designer.scss
@@ -0,0 +1,515 @@
+$header-img: '../img/designer/Header.png';
+$header-linked-img: '../img/designer/Header_Linked.png';
+$minus-img: '../img/designer/minus.png';
+$plus-img: '../img/designer/plus.png';
+$left-panel-button-img: '../img/designer/left_panel_butt.png';
+$top-panel-img: '../img/designer/top_panel.png';
+$small-tab-img: '../img/designer/small_tab.png';
+$frams1-img: '../img/designer/1.png';
+$frams2-img: '../img/designer/2.png';
+$frams3-img: '../img/designer/3.png';
+$frams4-img: '../img/designer/4.png';
+$frams5-img: '../img/designer/5.png';
+$frams6-img: '../img/designer/6.png';
+$frams7-img: '../img/designer/7.png';
+$frams8-img: '../img/designer/8.png';
+$resize-img: '../img/designer/resize.png';
+
+/* Designer */
+.input_tab {
+  background-color: #a6c7e1;
+  color: #000;
+}
+
+.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 {
+  background-color: #fff;
+  color: #000;
+  border-collapse: collapse;
+  border: 1px solid #aaa;
+  z-index: 1;
+  -moz-user-select: none;
+
+  .header {
+    background-image: url($header-img);
+    background-repeat: repeat-x;
+  }
+}
+
+.tab_zag {
+  text-align: center;
+  cursor: move;
+  padding: 1px;
+  font-weight: bold;
+}
+
+.tab_zag_2 {
+  background-image: url($header-linked-img);
+  background-repeat: repeat-x;
+  text-align: center;
+  cursor: move;
+  padding: 1px;
+  font-weight: bold;
+}
+
+.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;
+}
+
+#designer_body #page_content {
+  margin: 0;
+}
+
+.scroll_tab {
+  overflow: auto;
+  width: 100%;
+  height: 500px;
+}
+
+.designer_Tabs {
+  cursor: default;
+  color: #05b;
+  white-space: nowrap;
+  text-decoration: none;
+  text-indent: 3px;
+  font-weight: bold;
+  margin-#{$left}: 2px;
+  text-align: $left;
+  background-color: #fff;
+  background-image: url($left-panel-button-img);
+  border: #ccc solid 1px;
+
+  &:hover {
+    cursor: default;
+    color: #05b;
+    background: #fe9;
+    text-indent: 3px;
+    font-weight: bold;
+    white-space: nowrap;
+    text-decoration: none;
+    border: #99f solid 1px;
+    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-image: url($header-img);
+  background-repeat: repeat-x;
+}
+
+.small_tab {
+  vertical-align: top;
+  background-color: #0064ea;
+  color: #fff;
+  background-image: url($small-tab-img);
+  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-image: url($header-img);
+  background-repeat: repeat-x;
+  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;
+  }
+}
+
+.butt {
+  border: #47a solid 1px;
+  font-weight: bold;
+  height: 19px;
+  width: 70px;
+  background-color: #fff;
+  color: #000;
+  vertical-align: baseline;
+}
+
+.L_butt2_1 {
+  padding: 1px;
+  text-decoration: none;
+  vertical-align: middle;
+  cursor: default;
+
+  &:hover {
+    padding: 0;
+    border: #09c solid 1px;
+    background: #fe9;
+    color: #000;
+    text-decoration: none;
+    vertical-align: middle;
+    cursor: default;
+  }
+}
+
+/* --------------------------------------------------------------------------- */
+.bor {
+  width: 10px;
+  height: 10px;
+}
+
+.frams1 {
+  background: url($frams1-img) no-repeat $right bottom;
+}
+
+.frams2 {
+  background: url($frams2-img) no-repeat $left bottom;
+}
+
+.frams3 {
+  background: url($frams3-img) no-repeat $left top;
+}
+
+.frams4 {
+  background: url($frams4-img) no-repeat $right top;
+}
+
+.frams5 {
+  background: url($frams5-img) repeat-x center bottom;
+}
+
+.frams6 {
+  background: url($frams6-img) repeat-y $left;
+}
+
+.frams7 {
+  background: url($frams7-img) repeat-x top;
+}
+
+.frams8 {
+  background: url($frams8-img) repeat-y $right;
+}
+
+#osn_tab {
+  position: absolute;
+  background-color: #fff;
+  color: #000;
+}
+
+.designer_header {
+  background-color: #eaeef0;
+  color: #000;
+  text-align: center;
+  font-weight: bold;
+  margin: 0;
+  padding: 0;
+  background-image: url($top-panel-img);
+  background-position: top;
+  background-repeat: repeat-x;
+  border-#{$right}: #999 solid 1px;
+  border-#{$left}: #999 solid 1px;
+  height: 28px;
+  z-index: 101;
+  width: 100%;
+  position: fixed;
+
+  a,
+  span {
+    display: block;
+    float: $left;
+    margin: 3px 1px 4px;
+    height: 20px;
+    border: 1px dotted #fff;
+  }
+
+  .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 {
+    border: 1px solid #c0c0bb;
+    background-color: #9f9;
+    color: #000;
+
+    &:hover {
+      border: 1px solid #09c;
+      background-color: #fe9;
+      color: #000;
+    }
+  }
+
+  &.M_butt:hover {
+    border: 1px solid #09c;
+    background-color: #fe9;
+    color: #000;
+  }
+}
+
+#layer_menu {
+  z-index: 98;
+  position: relative;
+  float: $right;
+  background-color: #eaeef0;
+  border: #999 solid 1px;
+
+  &.left {
+    float: $left;
+  }
+}
+
+#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($resize-img);
+  cursor: ew-resize;
+
+  .icon {
+    margin: 0;
+  }
+}
+
+.panel {
+  position: fixed;
+  top: 60px;
+  #{$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: 60px;
+    #{$right}: 0;
+    color: #fff;
+    padding: 10px 40px 10px 15px;
+    background: #333 url($plus-img) 85% 55% no-repeat;
+    border: 1px solid #444;
+    display: block;
+    z-index: 102;
+
+    &:hover {
+      color: #080808;
+      background: #fff696 url($plus-img) 85% 55% no-repeat;
+      border: 1px solid #999;
+    }
+  }
+
+  &.active.trigger {
+    background: #222 url($minus-img) 85% 55% no-repeat;
+    z-index: 999;
+
+    &:hover {
+      background: #fff696 url($minus-img) 85% 55% no-repeat;
+    }
+  }
+}
+
+.toggle_container .block {
+  background-color: #dbe4e8;
+  border-top: 1px solid #999;
+}
+
+.history_table {
+  text-align: center;
+  cursor: pointer;
+  background-color: #dbe4e8;
+
+  &:hover {
+    background-color: #99c;
+  }
+}
+
+#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 grey;
+  overflow: hidden;
+  z-index: 50;
+  padding: 2px;
+
+  &.right {
+    float: $right;
+    #{$right}: 0;
+  }
+
+  .hide {
+    display: none;
+  }
+
+  a {
+    display: block;
+    float: none;
+    overflow: hidden;
+    line-height: 1em;
+  }
+
+  img,
+  .text {
+    float: $left;
+  }
+}
+
+#name-panel {
+  border-bottom: 1px solid grey;
+  text-align: center;
+  background: #efefef;
+  width: 100%;
+  font-size: 1.2em;
+  padding: 5px;
+  font-weight: bold;
+}
+
+#container-form {
+  width: 100%;
+  position: absolute;
+  #{$left}: 0;
+}
diff --git a/srcs/phpmyadmin/themes/pmahomme/scss/_direction.scss b/srcs/phpmyadmin/themes/pmahomme/scss/_direction.scss
new file mode 100644
index 0000000..bea992f
--- /dev/null
+++ b/srcs/phpmyadmin/themes/pmahomme/scss/_direction.scss
@@ -0,0 +1,13 @@
+$direction: ltr !default;
+
+@if $direction != ltr and $direction != rtl {
+  $direction: ltr;
+}
+
+$left: left;
+$right: right;
+
+@if $direction == rtl {
+  $left: right;
+  $right: left;
+}
diff --git a/srcs/phpmyadmin/themes/pmahomme/scss/_enum-editor.scss b/srcs/phpmyadmin/themes/pmahomme/scss/_enum-editor.scss
new file mode 100644
index 0000000..125e5ce
--- /dev/null
+++ b/srcs/phpmyadmin/themes/pmahomme/scss/_enum-editor.scss
@@ -0,0 +1,71 @@
+/**
+ * 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/pmahomme/scss/_gis.scss b/srcs/phpmyadmin/themes/pmahomme/scss/_gis.scss
new file mode 100644
index 0000000..e36b65b
--- /dev/null
+++ b/srcs/phpmyadmin/themes/pmahomme/scss/_gis.scss
@@ -0,0 +1,36 @@
+/**
+ * GIS data editor styles
+ */
+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/pmahomme/scss/_icons.scss b/srcs/phpmyadmin/themes/pmahomme/scss/_icons.scss
new file mode 100644
index 0000000..136b190
--- /dev/null
+++ b/srcs/phpmyadmin/themes/pmahomme/scss/_icons.scss
@@ -0,0 +1,683 @@
+.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('../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_b_left {
+  background-image: url('../img/b_left.png');
+}
+
+.ic_b_right {
+  background-image: url('../img/b_right.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/pmahomme/scss/_jqplot.scss b/srcs/phpmyadmin/themes/pmahomme/scss/_jqplot.scss
new file mode 100644
index 0000000..cda841a
--- /dev/null
+++ b/srcs/phpmyadmin/themes/pmahomme/scss/_jqplot.scss
@@ -0,0 +1,275 @@
+/* jqPlot */
+
+// 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: "Trebuchet MS", Arial, Helvetica, sans-serif;
+  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: 1em;
+  white-space: nowrap;
+  background: rgba(208, 208, 208, 0.8);
+  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;
+}
+
+.jqplot-error {
+  // Styles added to the plot target container when there is an error go here.
+  text-align: center;
+}
+
+.jqplot-error-message {
+  // Styling of the custom error message div goes here.
+  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/pmahomme/scss/_navigation.scss b/srcs/phpmyadmin/themes/pmahomme/scss/_navigation.scss
new file mode 100644
index 0000000..309a3f0
--- /dev/null
+++ b/srcs/phpmyadmin/themes/pmahomme/scss/_navigation.scss
@@ -0,0 +1,488 @@
+// Navigation styles for the pmahomme theme
+#pma_navigation {
+  width: $navi-width;
+  position: fixed;
+  top: 0;
+  #{$left}: 0;
+  height: 100vh;
+  background: url('../img/left_nav_bg.png') repeat-y right 0 $navi-background;
+  color: $navi-color;
+  z-index: 800;
+
+  ul {
+    margin: 0;
+  }
+
+  form {
+    margin: 0;
+    padding: 0;
+    display: inline;
+  }
+
+  select {
+    &#select_server,
+    &#lightm_db {
+      width: 100%;
+    }
+  }
+
+  div {
+    &.pageselector {
+      text-align: center;
+      margin: 0;
+      margin-#{$left}: 0.75em;
+      border-#{$left}: 1px solid #666;
+    }
+  }
+
+  #pmalogo,
+  #serverChoice,
+  #navipanellinks,
+  #recentTableList,
+  #favoriteTableList,
+  #databaseList,
+  div.pageselector.dbselector {
+    text-align: center;
+    padding: 5px 10px 0;
+    border: 0;
+  }
+
+  #navipanellinks .icon {
+    margin: 0;
+  }
+
+  #recentTable,
+  #favoriteTable {
+    width: 200px;
+  }
+
+  #favoriteTableList select,
+  #serverChoice select {
+    width: 80%;
+  }
+}
+
+#pma_navigation_header {
+  overflow: hidden;
+}
+
+#pma_navigation_content {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  #{$left}: 0;
+  z-index: 0;
+
+  > img.throbber {
+    display: none;
+    margin: 0.3em auto 0;
+  }
+}
+
+#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 {
+    background: url('../img/select_bg.png') repeat scroll 0 0;
+    -webkit-border-radius: 2px;
+    border-radius: 2px;
+    border: 1px solid #bbb;
+    border-top: 1px solid #bbb;
+    color: #333;
+    padding: 4px 6px;
+    margin: 0 0 0;
+    width: 92%;
+    font-size: 1.11em;
+  }
+}
+
+#pma_navigation_tree_content {
+  width: 100%;
+  overflow: hidden;
+  overflow-y: auto;
+  position: absolute;
+  height: 100%;
+
+  a.hover_show_full {
+    position: relative;
+    z-index: 100;
+    vertical-align: sub;
+  }
+}
+
+#pma_navigation_tree {
+  margin: 0;
+  margin-#{$left}: 5px;
+  overflow: hidden;
+  color: #444;
+  height: 74%;
+  position: relative;
+
+  a {
+    color: $navi-color;
+    padding-left: 0;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  ul {
+    clear: both;
+    padding: 0;
+    list-style-type: none;
+    margin: 0;
+
+    ul {
+      position: relative;
+    }
+  }
+
+  li {
+    margin-bottom: 0;
+
+    &.activePointer,
+    &.selected {
+      color: $navi-pointer-color;
+      background-color: $navi-pointer-background;
+    }
+
+    .dbItemControls {
+      padding-#{$left}: 4px;
+    }
+
+    .navItemControls {
+      display: none;
+      padding-#{$left}: 4px;
+    }
+
+    &.activePointer .navItemControls {
+      display: inline;
+      opacity: 0.5;
+
+      &:hover {
+        display: inline;
+        opacity: 1;
+      }
+    }
+  }
+
+  li {
+    white-space: nowrap;
+    clear: both;
+    min-height: 16px;
+
+    &.fast_filter {
+      white-space: nowrap;
+      clear: both;
+      min-height: 16px;
+    }
+  }
+
+  img {
+    margin: 0;
+  }
+
+  i {
+    display: block;
+  }
+
+  div {
+    &.block {
+      position: relative;
+      width: 1.5em;
+      height: 1.5em;
+      min-width: 16px;
+      min-height: 16px;
+      float: $left;
+
+      &.double {
+        width: 2.5em;
+      }
+
+      i,
+      b {
+        width: 1.5em;
+        height: 1.7em;
+        min-width: 16px;
+        min-height: 8px;
+        position: absolute;
+        bottom: 0.7em;
+        #{$left}: 0.75em;
+        z-index: 0;
+      }
+
+      // Top and right segments for the tree element connections
+      i {
+        display: block;
+        border-#{$left}: 1px solid #666;
+        border-bottom: 1px solid #666;
+        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 #666;
+      }
+
+      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 #666;
+    margin-#{$left}: 0.75em;
+    padding-#{$left}: 0.75em;
+  }
+
+  .last > .list_container {
+    border-#{$left}: 0 solid #666;
+  }
+}
+
+// Fast filter
+li.fast_filter {
+  padding-#{$left}: 0.75em;
+  margin-#{$left}: 0.75em;
+  padding-#{$right}: 35px;
+  border-#{$left}: 1px solid #666;
+  list-style: none;
+
+  input {
+    margin: 3px 0 0 0;
+    font-size: 0.7em;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    padding-#{$left}: 4px;
+    padding-#{$right}: 1.7em;
+    width: 100%;
+  }
+
+  span {
+    position: relative;
+    #{$right}: 1.5em;
+    padding: 0.2em;
+    cursor: pointer;
+    font-weight: bold;
+    color: #800;
+    font-size: 0.7em;
+  }
+
+  &.db_fast_filter {
+    border: 0;
+    margin-#{$left}: 0;
+    margin-#{$right}: 10px;
+  }
+}
+
+// IE10+ has its own reset X
+html.ie {
+  li.fast_filter {
+    span {
+      display: none;
+    }
+
+    input {
+      padding-#{$right}: 0.2em;
+    }
+  }
+
+  &.ie9,
+  &.ie8 {
+    li.fast_filter {
+      span {
+        display: auto;
+      }
+
+      input {
+        padding-#{$right}: 1.7em;
+      }
+    }
+  }
+}
+
+#navigation_controls_outer {
+  min-height: 21px !important;
+
+  &.activePointer {
+    background-color: transparent !important;
+  }
+}
+
+#navigation_controls {
+  float: $right;
+  padding-#{$right}: 23px;
+}
+
+// Resize handler
+#pma_navigation_resizer {
+  width: 3px;
+  height: 100%;
+  background-color: #aaa;
+  cursor: col-resize;
+  position: fixed;
+  top: 0;
+  #{$left}: 240px;
+  z-index: 801;
+}
+
+#pma_navigation_collapser {
+  width: 20px;
+  height: 22px;
+  line-height: 22px;
+  background: #eee;
+  color: #555;
+  font-weight: bold;
+  position: fixed;
+  top: 0;
+  #{$left}: $navi-width;
+  text-align: center;
+  cursor: pointer;
+  z-index: 800;
+  text-shadow: 0 1px 0 #fff;
+  filter: dropshadow(color = #fff, offx = 0, offy = 1);
+  border: 1px solid #888;
+}
+
+// Quick warp links
+.pma_quick_warp {
+  margin-top: 5px;
+  margin-#{$left}: 2px;
+  position: relative;
+
+  .drop_list {
+    float: $left;
+    margin-#{$left}: 3px;
+    padding: 2px 0;
+
+    &:hover {
+      .drop_button {
+        background: #fff;
+      }
+
+      ul {
+        display: block;
+      }
+    }
+
+    ul {
+      position: absolute;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+      overflow-y: auto;
+      list-style: none;
+      background: #fff;
+      border: 1px solid #ddd;
+      border-radius: 0.3em;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      box-shadow: 0 0 5px #ccc;
+      top: 100%;
+      #{$left}: 3px;
+      #{$right}: 0;
+      display: none;
+      z-index: 802;
+    }
+
+    li {
+      white-space: nowrap;
+      padding: 0;
+      border-radius: 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;
+      }
+    }
+  }
+
+  .drop_button {
+    padding: 0.3em;
+    border: 1px solid #ddd;
+    border-radius: 0.3em;
+    background: #f2f2f2;
+    cursor: pointer;
+  }
+}
diff --git a/srcs/phpmyadmin/themes/pmahomme/scss/_resizable-menu.scss b/srcs/phpmyadmin/themes/pmahomme/scss/_resizable-menu.scss
new file mode 100644
index 0000000..b49ce75
--- /dev/null
+++ b/srcs/phpmyadmin/themes/pmahomme/scss/_resizable-menu.scss
@@ -0,0 +1,47 @@
+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 {
+    background: linear-gradient(#fff, #e5e5e5);
+
+    ul {
+      display: block;
+      background: #fff;
+    }
+  }
+
+  .submenuhover ul {
+    display: block;
+    background: #fff;
+  }
+
+  ul li {
+    width: 100%;
+  }
+}
diff --git a/srcs/phpmyadmin/themes/pmahomme/scss/_rte.scss b/srcs/phpmyadmin/themes/pmahomme/scss/_rte.scss
new file mode 100644
index 0000000..bc15bef
--- /dev/null
+++ b/srcs/phpmyadmin/themes/pmahomme/scss/_rte.scss
@@ -0,0 +1,47 @@
+.rte_table {
+  table-layout: auto;
+  width: 100%;
+
+  td {
+    vertical-align: middle;
+    padding: 0.2em;
+    width: 20%;
+  }
+
+  tr td:nth-child(1) {
+    font-weight: bold;
+  }
+
+  input,
+  select,
+  textarea {
+    width: 100%;
+    margin: 0;
+    box-sizing: border-box;
+  }
+
+  input {
+    &[type=button],
+    &[type=checkbox],
+    &[type=radio] {
+      width: auto;
+      margin-#{$right}: 6px;
+    }
+  }
+
+  .routine_params_table {
+    width: 100%;
+  }
+
+  .half_width {
+    width: 49%;
+  }
+}
+
+.isdisableremoveparam_class {
+  color: gray;
+}
+
+.ui_tpicker_time_input {
+  width: 100%;
+}
diff --git a/srcs/phpmyadmin/themes/pmahomme/scss/_variables.scss b/srcs/phpmyadmin/themes/pmahomme/scss/_variables.scss
new file mode 100644
index 0000000..4503352
--- /dev/null
+++ b/srcs/phpmyadmin/themes/pmahomme/scss/_variables.scss
@@ -0,0 +1,72 @@
+// configures general layout for detailed layout configuration please refer to the css files
+
+// navi frame
+
+// navi frame width
+$navi-width: 240px;
+
+// foreground (text) color for the navi frame
+$navi-color: #000;
+
+// background for the navi frame
+$navi-background: #f3f3f3;
+
+// foreground (text) color of the pointer in navi frame
+$navi-pointer-color: #000;
+
+// background of the pointer in navi frame
+$navi-pointer-background: #ddd;
+
+// main frame
+
+// foreground (text) color for the main frame
+$main-color: #444;
+
+// background for the main frame
+$main-background: #fff;
+
+// foreground (text) color of the pointer in browse mode
+$browse-pointer-color: #000;
+
+// background of the pointer in browse mode
+$browse-pointer-background: #cfc;
+
+// foreground (text) color of the marker (visually marks row by clicking on it)
+// in browse mode
+$browse-marker-color: #000;
+
+// background of the marker (visually marks row by clicking on it) in browse mode
+$browse-marker-background: #fc9;
+
+// fonts
+
+// the font family as a valid css font family value, if not set the browser default will be
+// used (depending on browser, DTD and system settings)
+$font-family: sans-serif;
+// fixed width font family, used in textarea
+$font-family-fixed: monospace;
+
+// tables
+
+// border
+$border: 0;
+// table header and footer color
+$th-background: #d3dce3;
+// table header and footer background
+$th-color: #000;
+// table data row background
+$bg-one: #e5e5e5;
+// table data row background, alternate
+$bg-two: #d5d5d5;
+
+// Bootstrap
+
+$enable-gradients: true;
+$enable-shadows: true;
+$enable-transitions: false;
+
+$primary: #ddd;
+$secondary: #ddd;
+
+$btn-border-radius: 0.85rem;
+$btn-line-height: 1.15;
diff --git a/srcs/phpmyadmin/themes/pmahomme/scss/printview.scss b/srcs/phpmyadmin/themes/pmahomme/scss/printview.scss
new file mode 100644
index 0000000..44031b7
--- /dev/null
+++ b/srcs/phpmyadmin/themes/pmahomme/scss/printview.scss
@@ -0,0 +1,166 @@
+@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;
+}
+
+// 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
+div.success {
+  background-color: #fff;
+}
+
+.sqlOuter {
+  color: black;
+  background-color: #000;
+}
+
+// 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/pmahomme/scss/theme-rtl.scss b/srcs/phpmyadmin/themes/pmahomme/scss/theme-rtl.scss
new file mode 100644
index 0000000..251a1f0
--- /dev/null
+++ b/srcs/phpmyadmin/themes/pmahomme/scss/theme-rtl.scss
@@ -0,0 +1,3 @@
+$direction: rtl;
+
+@import "theme";
diff --git a/srcs/phpmyadmin/themes/pmahomme/scss/theme.scss b/srcs/phpmyadmin/themes/pmahomme/scss/theme.scss
new file mode 100644
index 0000000..e78c587
--- /dev/null
+++ b/srcs/phpmyadmin/themes/pmahomme/scss/theme.scss
@@ -0,0 +1,13 @@
+@import "direction";
+@import "variables";
+@import "bootstrap";
+@import "common";
+@import "enum-editor";
+@import "gis";
+@import "navigation";
+@import "designer";
+@import "rte";
+@import "codemirror";
+@import "jqplot";
+@import "resizable-menu";
+@import "icons";