phpmyadmin working

1 files changed, 3773 insertions, 0 deletions

diff --git a/srcs/phpmyadmin/themes/original/scss/_common.scss b/srcs/phpmyadmin/themes/original/scss/_common.scss
new file mode 100644
index 0000000..03e3959
--- /dev/null
+++ b/srcs/phpmyadmin/themes/original/scss/_common.scss
@@ -0,0 +1,3773 @@
+// Common styles for the original theme
+
+html {
+  font-size: 82%;
+}
+
+input,
+select,
+textarea {
+  font-size: 1em;
+}
+
+body {
+  font-family: $font-family;
+  padding: 0;
+  margin: 0;
+  margin-#{$left}: 240px;
+  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: 120%;
+  font-weight: bold;
+}
+
+h3 {
+  font-weight: bold;
+  font-size: 1rem;
+}
+
+a {
+  text-decoration: none;
+  color: #00f;
+  cursor: pointer;
+
+  &:link,
+  &:visited,
+  &:active {
+    text-decoration: none;
+    color: #00f;
+    cursor: pointer;
+  }
+}
+
+button.mult_submit,
+.checkall_box + label {
+  text-decoration: none;
+  color: #00f;
+  cursor: pointer;
+}
+
+a:hover {
+  text-decoration: underline;
+  color: #f00;
+}
+
+button.mult_submit {
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+    color: #f00;
+  }
+}
+
+.checkall_box + label:hover {
+  text-decoration: underline;
+  color: #f00;
+}
+
+dfn {
+  font-style: normal;
+
+  &:hover {
+    font-style: normal;
+    cursor: help;
+  }
+}
+
+th {
+  font-weight: bold;
+  color: $th-color;
+  background: $th-background;
+}
+
+a img {
+  border: 0;
+}
+
+hr {
+  color: $main-color;
+  background-color: $main-color;
+  border: 0;
+  height: 1px;
+}
+
+form {
+  padding: 0;
+  margin: 0;
+  display: inline;
+}
+
+textarea {
+  overflow: visible;
+}
+
+th.fillPage {
+  width: 80%;
+}
+
+textarea.charField {
+  width: 95%;
+}
+
+fieldset {
+  margin-top: 1em;
+  border: $main-color solid 1px;
+  padding: 0.5em;
+  background: $bg-one;
+
+  fieldset {
+    margin: 0.8em;
+  }
+
+  legend {
+    font-weight: bold;
+    color: #444;
+    background-color: transparent;
+    width: initial;
+    font-size: 1rem;
+  }
+}
+
+.some-margin {
+  margin: 0.5em;
+  margin-top: 1em;
+}
+
+// buttons in some browsers (eg. Konqueror) are block elements, this breaks design
+button {
+  display: inline;
+}
+
+table {
+  caption,
+  th,
+  td {
+    padding: 0.1em 0.5em 0.1em 0.5em;
+    margin: 0.1em;
+    vertical-align: top;
+  }
+}
+
+img,
+input,
+select,
+button {
+  vertical-align: middle;
+}
+
+// classes
+.clearfloat {
+  clear: both;
+}
+
+.floatleft {
+  float: $left;
+  margin-#{$right}: 1em;
+}
+
+.floatright {
+  float: $right;
+}
+
+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.vtop,
+td.vtop {
+  vertical-align: top;
+}
+
+tr.vmiddle,
+th.vmiddle,
+td.vmiddle {
+  vertical-align: middle;
+}
+
+tr.vbottom,
+th.vbottom,
+td.vbottom {
+  vertical-align: bottom;
+}
+
+.paddingtop {
+  padding-top: 1em;
+}
+
+div.tools {
+  border: 1px solid #000;
+  padding: 0.2em;
+  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;
+}
+
+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;
+}
+
+div.null_div {
+  height: 20px;
+  text-align: center;
+  font-style: normal;
+  min-width: 50px;
+}
+
+fieldset {
+  .formelement {
+    float: $left;
+    margin-#{$right}: 0.5em;
+    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 tr:nth-child(odd) {
+  background: $bg-one;
+}
+
+#table_index tbody:nth-of-type(odd) {
+  tr,
+  th {
+    background: $bg-one;
+  }
+}
+
+// even items 2,4,6,8...
+table tr:nth-child(even) {
+  background: $bg-two;
+}
+
+#table_index tbody:nth-of-type(even) {
+  tr,
+  th {
+    background: $bg-two;
+  }
+}
+
+table tr {
+  text-align: $left;
+
+  th {
+    text-align: $left;
+  }
+}
+
+td.marked:not(.nomarker) {
+  background: $browse-marker-background;
+  color: $browse-marker-color;
+}
+
+table tr {
+  &.marked:not(.nomarker) {
+    background: $browse-marker-background;
+    color: $browse-marker-color;
+
+    td,
+    th {
+      background: $browse-marker-background;
+      color: $browse-marker-color;
+    }
+  }
+
+  &:not(.nopointer):hover {
+    background: $browse-pointer-background;
+    color: $browse-pointer-color;
+  }
+}
+
+.hover:not(.nopointer) {
+  background: $browse-pointer-background;
+  color: $browse-pointer-color;
+}
+
+#table_index tbody:hover {
+  tr,
+  th {
+    background: $browse-pointer-background;
+    color: $browse-pointer-color;
+  }
+}
+
+table tr.hover:not(.nopointer) th {
+  background: $browse-pointer-background;
+  color: $browse-pointer-color;
+}
+
+/**
+ * marks table rows/cells if the db field is in a where condition
+ */
+td.condition,
+th.condition {
+  border: 1px solid $browse-marker-background;
+}
+
+/**
+ * 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;
+}
+
+.displayblock {
+  display: block;
+}
+
+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;
+}
+
+/* leave some space between icons and text */
+.icon {
+  image-rendering: pixelated;
+  vertical-align: middle;
+  margin-#{$left}: 0.3em;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+/* no extra space in table cells */
+td .icon {
+  margin: 0;
+}
+
+.selectallarrow {
+  margin-#{$right}: 0.3em;
+  margin-#{$left}: 0.6em;
+}
+
+.with-selected {
+  margin-#{$left}: 2em;
+}
+
+/* message boxes: error, confirmation */
+#pma_errors,
+#pma_demo,
+#pma_footer {
+  position: relative;
+  padding: 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.3em 0 0 0;
+    border: 2px solid;
+    background-repeat: no-repeat;
+    clear: both;
+
+    @if $direction == rtl {
+      background-position: 99% 50%;
+      padding: 0.1em 40px 0.1em 0.1em;
+    } @else {
+      background-position: 10px 50%;
+      padding: 0.1em 0.1em 0.1em 42px;
+    }
+  }
+
+  &.success img.icon,
+  &.notice img.icon,
+  &.error img.icon {
+    display: block;
+    float: $left;
+    margin-#{$left}: -22px;
+  }
+}
+
+.success {
+  color: #000;
+  background-color: #f0fff0;
+}
+
+h1.success,
+div.success,
+.success h1 {
+  border-color: #0f0;
+}
+
+.notice {
+  color: #000;
+  background-color: #ffd;
+}
+
+h1.notice,
+div.notice,
+.notice h1 {
+  border-color: #ffd700;
+}
+
+.error {
+  background-color: #ffc;
+  color: #f00;
+}
+
+h1.error {
+  border-color: #f00;
+}
+
+div.error {
+  border-color: #f00;
+
+  h1 {
+    border-color: #f00;
+  }
+}
+
+.confirmation {
+  background-color: #ffc;
+}
+
+fieldset.confirmation {
+  border: 0.1em solid #f00;
+
+  legend {
+    border-#{$left}: 0.1em solid #f00;
+    border-#{$right}: 0.1em solid #f00;
+    font-weight: bold;
+    background-image: url("../img/s_really.png");
+    background-repeat: no-repeat;
+
+    @if $direction == rtl {
+      background-position: 97% 50%;
+      padding: 0.2em 25px 0.2em 0.2em;
+    } @else {
+      background-position: 5px 50%;
+      padding: 0.2em 0.2em 0.2em 25px;
+    }
+  }
+}
+
+/* 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;
+  }
+
+  &:hover {
+    color: #f00;
+  }
+}
+
+div.tools a {
+  &:link,
+  &:visited,
+  &:active {
+    color: #00f;
+  }
+
+  &:hover {
+    color: #f00;
+  }
+}
+
+.tblFooters a {
+  &:link,
+  &:active,
+  &:visited {
+    color: #00f;
+  }
+
+  &:hover {
+    color: #f00;
+  }
+}
+
+/* forbidden, no privilegs */
+.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: #ccc;
+}
+
+.nowrap {
+  white-space: nowrap;
+}
+
+/**
+ * zoom search
+ */
+
+div {
+  &#resizer {
+    width: 600px;
+    height: 400px;
+  }
+
+  &#querychart {
+    float: $left;
+    width: 600px;
+  }
+}
+
+/**
+ * login form
+ */
+body#loginform {
+  margin: 0;
+  margin-top: 1em;
+  text-align: center;
+
+  h1,
+  a.logo {
+    display: block;
+    text-align: center;
+  }
+
+  div.container {
+    text-align: $left;
+    width: 30em;
+    margin: 0 auto;
+  }
+}
+
+div.container.modal_form {
+  margin: 0 auto;
+  width: 30em;
+  text-align: center;
+  background: #fff;
+  z-index: 999;
+}
+
+#login_form {
+  text-align: $left;
+}
+
+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;
+}
+
+.commented_column {
+  border-bottom: 1px dashed black;
+}
+
+.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: 20px !important;
+}
+
+/* specific elements */
+
+/* topmenu */
+
+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;
+    padding: 0;
+    vertical-align: middle;
+  }
+}
+
+#topmenu img,
+#topmenu2 img {
+  vertical-align: middle;
+  margin-#{$right}: 0.1em;
+}
+
+/* default tab styles */
+
+ul {
+  &#topmenu {
+    a,
+    span {
+      display: block;
+      margin: 2px 2px 0;
+      padding: 2px 2px 0;
+      white-space: nowrap;
+    }
+  }
+
+  &#topmenu2 a {
+    display: block;
+    margin: 0.1em;
+    padding: 0.2em;
+    white-space: nowrap;
+  }
+}
+
+span {
+  &.caution {
+    color: #f00;
+  }
+
+  &.success {
+    color: green;
+  }
+}
+
+fieldset.caution a {
+  color: #f00;
+
+  &:hover {
+    color: #fff;
+    background-color: #f00;
+  }
+}
+
+#topmenu {
+  margin-top: 0.5em;
+  padding: 0.1em 0.3em 0.1em 0.3em;
+}
+
+ul {
+  &#topmenu {
+    ul {
+      -moz-box-shadow: 2px 2px 3px #666;
+      -webkit-box-shadow: 2px 2px 3px #666;
+      box-shadow: 2px 2px 3px #666;
+    }
+
+    > li {
+      border-bottom: 1pt solid black;
+    }
+
+    a,
+    span {
+      background-color: $bg-one;
+      border: 0 solid $bg-two;
+      border-width: 1pt 1pt 0 1pt;
+      -moz-border-radius: 0.4em 0.4em 0 0;
+      border-radius: 0.4em 0.4em 0 0;
+    }
+
+    ul {
+      a {
+        border-width: 1pt 0 0 0;
+        -moz-border-radius: 0;
+        border-radius: 0;
+      }
+
+      li:first-child a {
+        border-width: 0;
+      }
+
+      a:hover,
+      .tabactive {
+        text-decoration: none;
+      }
+    }
+
+    > li > {
+      a:hover,
+      .tabactive {
+        margin: 0;
+        padding: 2px 4px;
+        text-decoration: none;
+      }
+    }
+
+    a.tab:hover,
+    .tabactive {
+      background-color: $main-background;
+    }
+  }
+
+  &#topmenu2 a {
+    &.tab:hover,
+    &.tabactive {
+      background-color: $bg-one;
+      -moz-border-radius: 0.3em;
+      border-radius: 0.3em;
+      text-decoration: none;
+    }
+  }
+
+  &#topmenu > li.active {
+    border-bottom: 1pt solid $main-background;
+  }
+}
+
+/* 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;
+}
+
+div#tablestatistics table {
+  float: $left;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+  margin-#{$right}: 0.5em;
+  min-width: 16em;
+}
+
+#tableuserrights td,
+#tablespecificuserrights td,
+#tabledatabases td {
+  vertical-align: middle;
+}
+
+#topmenucontainer {
+  background: white;
+  padding-#{$right}: 1em;
+  width: 100%;
+}
+
+#serverinfo {
+  background: white;
+  font-weight: bold;
+  padding-bottom: 0.5em;
+  padding-#{$left}: 2.2em;
+  width: 10000px;
+  overflow: hidden;
+  box-sizing: content-box;
+
+  .item {
+    white-space: nowrap;
+  }
+
+  img {
+    margin: 0 0.1em 0 0.2em;
+  }
+}
+
+#page_nav_icons {
+  position: fixed;
+  top: 0;
+  #{$right}: 0;
+  z-index: 99;
+  padding: 0.1em 0;
+}
+
+#goto_pagetop,
+#lock_page_icon {
+  padding: 0.3em;
+  background: white;
+}
+
+#page_settings_icon {
+  padding: 0.3em;
+  background: white;
+  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: $font-family-fixed;
+  font-size: 110%;
+}
+
+#TooltipContainer {
+  position: absolute;
+  z-index: 99;
+  width: 20em;
+  height: auto;
+  overflow: visible;
+  visibility: hidden;
+  background-color: #ffc;
+  color: #060;
+  border: 0.1em solid #000;
+  padding: 0.5em;
+}
+
+#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: 15em;
+    max-width: 100%;
+    text-align: $right;
+    padding-#{$right}: 0.5em;
+  }
+
+  span.options {
+    float: $left;
+    display: block;
+    width: 12em;
+    max-width: 100%;
+    padding-#{$right}: 0.5em;
+
+    #select_pred_username,
+    #select_pred_hostname,
+    #select_pred_password {
+      width: 100%;
+      max-width: 100%;
+    }
+  }
+
+  input {
+    width: 12em;
+    clear: $right;
+    max-width: 100%;
+  }
+
+  span.options input {
+    width: auto;
+  }
+}
+
+#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;
+}
+
+.linkElem:hover {
+  text-decoration: underline;
+  color: #235a81;
+  cursor: pointer;
+}
+
+h3#serverstatusqueries span {
+  font-size: 60%;
+  display: inline;
+}
+
+.buttonlinks {
+  float: $right;
+  white-space: nowrap;
+}
+
+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;
+  }
+
+  &#serverstatus table#serverstatusqueriesdetails {
+    float: $left;
+  }
+}
+
+table {
+  &#serverstatustraffic {
+    float: $left;
+  }
+
+  &#serverstatusconnections {
+    float: $left;
+    margin-#{$left}: 30px;
+  }
+
+  &#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;
+  -moz-box-shadow: 1px 1px 6px #ddd;
+  -webkit-box-shadow: 2px 2px 3px #666;
+  box-shadow: 2px 2px 3px #666;
+  background-color: white;
+  z-index: 2;
+}
+
+div#logTable {
+  padding-top: 10px;
+  clear: both;
+
+  table {
+    width: 100%;
+  }
+}
+
+.smallIndent {
+  padding-#{$left}: 7px;
+}
+
+#sectionlinks {
+  margin-bottom: 15px;
+  padding: 10px;
+  border: 1px solid #ccc;
+
+  a {
+    margin-#{$right}: 7px;
+  }
+}
+
+/* server variables */
+#serverVariables {
+  width: 100%;
+
+  .var-row > tr {
+    line-height: 2em;
+  }
+
+  .var-header {
+    font-weight: bold;
+    color: $th-color;
+    background: $th-background;
+    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 {
+    text-align: $right;
+    float: $right;
+  }
+
+  .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;
+    }
+  }
+}
+
+/* profiling */
+div#profilingchart {
+  width: 850px;
+  height: 370px;
+  float: $left;
+}
+
+#profilingchart .jqplot-highlighter-tooltip {
+  top: auto !important;
+  #{$left}: 11px;
+  bottom: 24px;
+}
+
+/* table charting */
+.chartOption {
+  float: $left;
+  margin-#{$right}: 40px;
+}
+
+/* querybox */
+
+div {
+  &#sqlquerycontainer {
+    float: $left;
+    width: 69%;
+  }
+
+  &#tablefieldscontainer {
+    float: $right;
+    width: 29%;
+
+    select {
+      width: 100%;
+    }
+  }
+}
+
+textarea {
+  &#sqlquery {
+    width: 100%;
+  }
+
+  &#sql_query_edit {
+    height: 7em;
+    width: 95%;
+    display: block;
+  }
+}
+
+div#queryboxcontainer div#bookmarkoptions {
+  margin-top: 0.5em;
+}
+
+/* end querybox */
+
+/* main page */
+
+#maincontainer {
+  background-image: url("../img/logo_right.png");
+  background-position: right bottom;
+  background-repeat: no-repeat;
+}
+
+#mysqlmaininformation,
+#pmamaininformation {
+  float: $left;
+  width: 49%;
+}
+
+#maincontainer {
+  ul {
+    list-style-type: disc;
+    vertical-align: middle;
+  }
+
+  li {
+    margin: 0.2em 0;
+  }
+}
+
+#full_name_layer {
+  position: absolute;
+  padding: 2px;
+  margin-top: -3px;
+  z-index: 801;
+  border: solid 1px #888;
+  background: #fff;
+}
+
+/* end main page */
+
+/* iconic view for ul items */
+
+li.no_bullets {
+  list-style-type: none !important;
+  margin-#{$left}: -25px !important;
+}
+
+/* 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%;
+  border-top: 0.1em solid silver;
+  text-align: $right;
+}
+
+#table_innodb_bufferpool_usage,
+#table_innodb_bufferpool_activity {
+  float: $left;
+}
+
+#div_mysql_charset_collations table {
+  float: $left;
+
+  th,
+  td {
+    padding: 0.4em;
+  }
+
+  th#collationHeader {
+    width: 35%;
+  }
+}
+
+#qbe_div_table_list,
+#qbe_div_sql_query {
+  float: $left;
+}
+
+label.desc {
+  width: 30em;
+  float: $left;
+
+  sup {
+    position: absolute;