All hail our phpMyAdmin dark mode overlords

2023-08-24 01:59:18 -05:00
parent f0f2eade00
commit 8ddfb53c40
1394 changed files with 38046 additions and 2 deletions
--- a/lamp/themes/boodark/scss/_alert.scss
+++ b/lamp/themes/boodark/scss/_alert.scss
@@ -0,0 +1,26 @@
+// stylelint-disable at-rule-empty-line-before
+// stylelint-disable scss/at-rule-conditional-no-parentheses
+// Alert
+
+.alert {
+  position: relative;
+  padding: $alert-padding-y $alert-padding-x;
+  margin-bottom: $alert-margin-bottom;
+  border: $alert-border-width solid transparent;
+  @include border-radius($alert-border-radius);
+}
+
+@each $state, $value in $theme-colors {
+  $alert-background: shift-color($value, $alert-bg-scale);
+  $alert-border: shift-color($value, $alert-border-scale);
+  $alert-color: shift-color($value, $alert-color-scale);
+  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
+    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
+  }
+  .alert-#{$state} {
+    // for dark mode, switch between $alert-color and $alert-background
+    // default bootstrap alert
+    // @include alert-variant($alert-background, $alert-border, $alert-color);
+    @include alert-variant($alert-color, $alert-border, $alert-background);
+  }
+}
--- a/lamp/themes/boodark/scss/_bootstrap.scss
+++ b/lamp/themes/boodark/scss/_bootstrap.scss
@@ -0,0 +1,52 @@
+// Bootstrap
+
+// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
+@import "../../../node_modules/bootstrap/scss/functions";
+
+// 2. Include any default variable overrides here
+// see `variables.scss` file
+
+// 3. Include remainder of required Bootstrap stylesheets
+@import "../../../node_modules/bootstrap/scss/variables";
+@import "../../../node_modules/bootstrap/scss/mixins";
+@import "../../../node_modules/bootstrap/scss/root";
+
+// 4. Remove colors from `$theme-colors`
+// $theme-colors: map-remove($theme-colors, "light", "dark");
+
+// 5. Include any optional Bootstrap CSS as needed
+@import "../../../node_modules/bootstrap/scss/utilities";
+@import "../../../node_modules/bootstrap/scss/reboot";
+@import "../../../node_modules/bootstrap/scss/type";
+// @import "../../../node_modules/bootstrap/scss/images";
+@import "../../../node_modules/bootstrap/scss/containers";
+@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/nav";
+@import "../../../node_modules/bootstrap/scss/navbar";
+@import "../../../node_modules/bootstrap/scss/card";
+@import "../../../node_modules/bootstrap/scss/accordion";
+@import "../../../node_modules/bootstrap/scss/breadcrumb";
+@import "../../../node_modules/bootstrap/scss/pagination";
+@import "../../../node_modules/bootstrap/scss/badge";
+// @import "../../../node_modules/bootstrap/scss/alert";
+// @import "../../../node_modules/bootstrap/scss/progress";
+@import "../../../node_modules/bootstrap/scss/list-group";
+@import "../../../node_modules/bootstrap/scss/close";
+// @import "../../../node_modules/bootstrap/scss/toasts";
+@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/spinners";
+// @import "../../../node_modules/bootstrap/scss/offcanvas";
+// @import "../../../node_modules/bootstrap/scss/placeholders";
+@import "../../../node_modules/bootstrap/scss/helpers";
+
+// 6. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
+@import "../../../node_modules/bootstrap/scss/utilities/api";
--- a/lamp/themes/boodark/scss/_breadcrumb.scss
+++ b/lamp/themes/boodark/scss/_breadcrumb.scss
@@ -0,0 +1,21 @@
+// Breadcrumb
+
+.breadcrumb-navbar {
+  padding: $breadcrumb-navbar-padding-y $breadcrumb-navbar-padding-x;
+  margin-bottom: $breadcrumb-navbar-margin-bottom;
+  background-color: $breadcrumb-navbar-bg;
+
+  .breadcrumb-item {
+    + .breadcrumb-comment {
+      padding-left: $breadcrumb-item-padding-x;
+    }
+
+    .icon {
+      margin: 0;
+    }
+
+    a {
+      color: $body-color;
+    }
+  }
+}
--- a/lamp/themes/boodark/scss/_buttons.scss
+++ b/lamp/themes/boodark/scss/_buttons.scss
@@ -0,0 +1,30 @@
+// Buttons
+
+.btn-outline-secondary {
+  @include button-outline-variant($btn-outline-secondary);
+}
+
+.btn-link {
+  color: $pma-button-color;
+}
+
+button.mult_submit,
+.checkall_box + label {
+  text-decoration: none;
+  color: $pma-button-color;
+  cursor: pointer;
+  outline: none;
+}
+
+button.mult_submit {
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+    color: $pma-button-color;
+  }
+}
+
+.checkall_box + label:hover {
+  text-decoration: underline;
+  color: $pma-button-color;
+}
--- a/lamp/themes/boodark/scss/_codemirror.scss
+++ b/lamp/themes/boodark/scss/_codemirror.scss
@@ -0,0 +1,85 @@
+// CodeMirror
+
+$textarea-cols: 40;
+$textarea-rows: 15;
+
+.CodeMirror {
+  height: 20rem;
+  direction: ltr;
+  color: $codemirror-color;
+  background-color: $body-bg;
+  border: $card-border-width solid $card-border-color;
+
+  @include border-radius($card-border-radius);
+
+  &-cursor {
+    border-left: 1px solid $codemirror-color;
+  }
+
+  &-hint {
+    color: $codemirror-color;
+  }
+
+  &-hints {
+    color: $codemirror-color;
+    background: $codemirror-bg;
+    z-index: 1999;
+  }
+
+  &-lint-tooltip {
+    z-index: 200;
+    font-family: inherit;
+
+    code {
+      font-family: monospace;
+      font-weight: bold;
+    }
+  }
+
+  &-gutters {
+    border-right: 1px solid $codemirror-gutters;
+    background-color: $codemirror-gutters;
+  }
+}
+
+#inline_editor_outer .CodeMirror {
+  height: ceil($textarea-rows * .4em);
+}
+
+.insertRowTable .CodeMirror {
+  min-height: ceil($textarea-rows * .6em);
+  min-width: ceil($textarea-cols * .6em);
+  border: 1px solid #a9a9a9;
+}
+
+#pma_console .CodeMirror-gutters {
+  background-color: initial;
+  border: none;
+}
+
+// CodeMirror dracula theme
+// https://codemirror.net/5/theme/dracula.css
+.cm-s-default {
+  .cm-keyword, .cm-statement-verb { color: #ff79c6; }
+  .cm-variable { color: #50fa7b; }
+  .cm-comment { color: #6272a4; }
+  .cm-mysql-string { color: #008000; }
+  .cm-operator { color: #ff79c6; }
+  .cm-mysql-word { color: white; }
+  .cm-builtin { color: #50fa7b; }
+  .cm-variable-2 { color: white; }
+  .cm-variable-3 { color: #ffb86c; }
+  .cm-separator { color: fuchsia; }
+  .cm-number { color: #bd93f9; }
+}
+
+.autocomplete-column-name {
+  display: inline-block;
+}
+
+.autocomplete-column-hint {
+  display: inline-block;
+  float: right;
+  color: #666;
+  margin-left: 1em;
+}
--- a/lamp/themes/boodark/scss/_common.scss
+++ b/lamp/themes/boodark/scss/_common.scss
--- a/lamp/themes/boodark/scss/_console.scss
+++ b/lamp/themes/boodark/scss/_console.scss
@@ -0,0 +1,472 @@
+// Console
+
+#pma_console_container {
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 100;
+}
+
+#pma_console {
+  position: relative;
+  margin-left: $navigation-width;
+
+  .templates {
+    display: none;
+  }
+
+  .mid_text {
+    vertical-align: middle;
+  }
+
+  .toolbar {
+    position: relative;
+    background: $console-toolbar-bg;
+    border-top: solid 1px #aaa;
+    cursor: n-resize;
+
+    .text {
+      font-weight: bold;
+    }
+
+    .button,
+    .text {
+      margin-right: .4em;
+      float: right;
+      padding: 0 3px;
+      display: inline-block;
+    }
+
+    .button.active {
+      background: darken($console-toolbar-bg, 5%);
+    }
+
+    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;
+    }
+  }
+
+  .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: darken($console-toolbar-bg, 5%);
+  }
+
+  .content {
+    overflow-x: hidden;
+    overflow-y: auto;
+    margin-bottom: -65px;
+    border-top: solid 1px #aaa;
+    background: $console-content-bg;
+    padding-top: .4em;
+
+    .message {
+      border-color: #373b41;
+    }
+
+    .CodeMirror-wrap {
+      background: $console-content-bg;
+      color: $console-color;
+    }
+
+    .CodeMirror-cursor {
+      border-color: $console-color;
+    }
+
+    .cm-keyword {
+      color: #de935f;
+    }
+
+    &.console_dark_theme {
+      background: $console-content-bg;
+      color: $console-color;
+
+      .message {
+        border-color: #373b41;
+
+        .action_content {
+          color: $console-color;
+        }
+      }
+
+      .CodeMirror-wrap {
+        background: $console-content-bg;
+        color: $console-color;
+      }
+
+      .CodeMirror-cursor {
+        border-color: $console-color;
+      }
+
+      .cm-keyword {
+        color: #de935f;
+      }
+    }
+  }
+
+  .message,
+  .query_input {
+    position: relative;
+    font-family: Monaco, Consolas, monospace;
+    cursor: text;
+    margin: 0 10px .2em 1.4em;
+  }
+
+  .message {
+    border-bottom: solid 1px #ccc;
+    padding-bottom: .2em;
+
+    &.expanded > .action_content {
+      position: relative;
+    }
+
+    &::before {
+      left: -.7em;
+      position: absolute;
+      content: ">";
+    }
+  }
+
+  .query_input {
+    &::before {
+      left: -.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: .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,
+    &.bookmark,
+    &.successed {
+      .action {
+        &.requery,
+        &.bookmark {
+          display: inline-block;
+        }
+      }
+    }
+
+    .action_content {
+      position: absolute;
+      bottom: 100%;
+      color: $white;
+      background: $console-message-bg;
+      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: $console-message-text-bg;
+    }
+
+    &.collapsed {
+      > .action_content {
+        display: none;
+      }
+
+      &:hover > .action_content {
+        display: block;
+      }
+    }
+
+    .bookmark_label {
+      padding: 0 4px;
+      top: 0;
+      background: #369;
+      color: $white;
+      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 .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: .4em;
+    margin-bottom: .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;
+  }
+}
--- a/lamp/themes/boodark/scss/_designer.scss
+++ b/lamp/themes/boodark/scss/_designer.scss
@@ -0,0 +1,497 @@
+// Designer
+
+$minus-img: '../img/designer/minus.png';
+$plus-img: '../img/designer/plus.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';
+
+.input_tab {
+  background-color: #a6c7e1;
+  color: $black;
+}
+
+.content_fullscreen {
+  position: relative;
+  overflow: auto;
+}
+
+#canvas_outer {
+  position: relative;
+  width: 100%;
+  display: block;
+}
+
+#canvas {
+  background-color: transparent;
+  color: $black;
+}
+
+canvas.designer {
+  display: inline-block;
+  overflow: hidden;
+  text-align: left;
+  background-color: #1b1e21 !important;
+
+  * {
+    behavior: url(#default#VML);
+  }
+}
+
+.designer_tab {
+  background-color: $body-bg;
+  color: $body-color;
+  border-collapse: collapse;
+  border: 1px solid #aaa;
+  z-index: 1;
+  user-select: none;
+
+  .header {
+    background: linear-gradient(#b8e6fa, #b8e6fa 6%, #cdf5fd 10%, #dbffff 10%, #9bd2f6 50%, #9bd2f6 100%);
+  }
+}
+
+.tab_zag {
+  text-align: center;
+  cursor: move;
+  padding: 1px;
+  font-weight: bold;
+}
+
+.tab_zag_2 {
+  background: linear-gradient(#fffa96 0%, #fffa96 39%, #ffe796 40%, #ffe796 100%);
+  text-align: center;
+  cursor: move;
+  padding: 1px;
+  font-weight: bold;
+}
+
+.tab_field {
+  background: $body-bg;
+  color: $body-color;
+  cursor: default;
+
+  &:hover {
+    background-color: #cfc;
+    color: $black;
+    background-repeat: repeat-x;
+    cursor: default;
+  }
+}
+
+.tab_field_3 {
+  background-color: #ffe6e6;
+  color: $body-color;
+  cursor: default;
+
+  &:hover {
+    background-color: #cfc;
+    color: $black;
+    background-repeat: repeat-x;
+    cursor: default;
+  }
+}
+
+#designer_hint {
+  white-space: nowrap;
+  position: absolute;
+  background-color: #9f9;
+  color: $black;
+  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: linear-gradient($white, #dfe5e7 70%, $white 70%, $white 100%);
+  border: 1px solid #ccc;
+
+  &:hover {
+    cursor: default;
+    color: #05b;
+    background: #fe9;
+    text-indent: 3px;
+    font-weight: bold;
+    white-space: nowrap;
+    text-decoration: none;
+    border: 1px solid #99f;
+    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: $black;
+  background: linear-gradient(#b8e6fa, #b8e6fa 6%, #cdf5fd 10%, #dbffff 10%, #9bd2f6 50%, #9bd2f6 100%);
+}
+
+.small_tab {
+  vertical-align: top;
+  background-color: #0064ea;
+  color: $white;
+  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: $white;
+    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: linear-gradient(#b8e6fa, #b8e6fa 6%, #cdf5fd 10%, #dbffff 10%, #9bd2f6 50%, #9bd2f6 100%);
+  text-align: center;
+  width: 1px;
+
+  &:hover {
+    vertical-align: top;
+    color: $white;
+    background-color: #f96;
+    cursor: default;
+    text-align: center;
+    font-weight: bold;
+    width: 1px;
+    text-decoration: none;
+  }
+}
+
+.butt {
+  border: #47a solid 1px;
+  font-weight: bold;
+  background-color: $white;
+  color: $black;
+  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: $black;
+    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: $white;
+  color: $black;
+}
+
+.designer_header {
+  background-color: #eaeef0;
+  color: $black;
+  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;
+  }
+
+  .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: $black;
+
+    &:hover {
+      border: 1px solid #09c;
+      background-color: #fe9;
+      color: $black;
+    }
+  }
+
+  &.M_butt:hover {
+    border: 1px solid #09c;
+    background-color: #fe9;
+    color: $black;
+  }
+}
+
+#layer_menu {
+  z-index: 98;
+  position: relative;
+  float: right;
+  background-color: #eaeef0;
+  border: #999 solid 1px;
+}
+
+#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: $white;
+    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;
+  }
+}
+
+#foreignkeychk {
+  text-align: left;
+  cursor: pointer;
+}
+
+.side-menu {
+  float: left;
+  position: fixed;
+  width: auto;
+  height: auto;
+  background: $body-bg;
+  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: $body-bg;
+  width: 100%;
+  font-size: 1.2em;
+  padding: 5px;
+  font-weight: bold;
+}
+
+#container-form {
+  width: 100%;
+  position: absolute;
+  left: 0;
+}
--- a/lamp/themes/boodark/scss/_enum-editor.scss
+++ b/lamp/themes/boodark/scss/_enum-editor.scss
@@ -0,0 +1,68 @@
+// ENUM/SET editor
+
+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: .1em 0;
+      padding-right: 2em;
+      width: 100%;
+    }
+
+    img {
+      vertical-align: middle;
+    }
+  }
+
+  input.add_value {
+    margin: 0;
+    margin-right: .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: .35em;
+  }
+}
--- a/lamp/themes/boodark/scss/_forms.scss
+++ b/lamp/themes/boodark/scss/_forms.scss
@@ -0,0 +1,147 @@
+// stylelint-disable at-rule-empty-line-before
+// stylelint-disable scss/at-extend-no-missing-placeholder
+// Forms
+
+form {
+  padding: 0;
+  margin: 0;
+  display: inline;
+}
+
+input {
+  &[type=text]:not(.form-control),
+  &[type=password]:not(.form-control),
+  &[type=number]:not(.form-control) {
+    display: inline-block;
+    padding: $input-padding-y $input-padding-x;
+    font-family: $input-font-family;
+    @include font-size($input-font-size);
+    font-weight: $input-font-weight;
+    line-height: $input-line-height;
+    color: $input-color;
+    background-color: $input-bg;
+    background-clip: padding-box;
+    border: $input-border-width solid $input-border-color;
+    appearance: none;
+    @include border-radius($input-border-radius, 0);
+    @include box-shadow($input-box-shadow);
+    @include transition($input-transition);
+
+    &:focus {
+      color: $input-focus-color;
+      background-color: $input-focus-bg;
+      border-color: $input-focus-border-color;
+      outline: 0;
+
+      @if $enable-shadows {
+        @include box-shadow($input-box-shadow, $input-focus-box-shadow);
+      } @else {
+        box-shadow: $input-focus-box-shadow;
+      }
+    }
+
+    // &::placeholder {
+    //   color: $input-placeholder-color;
+    //   opacity: 1;
+    // }
+  }
+
+  &[type=checkbox]:not(.form-check-input:not(.form-check-input)),
+  &[type=radio]:not(.form-check-input:not(.form-check-input)) {
+    width: $form-check-input-width;
+    height: $form-check-input-width;
+    margin-top: ($line-height-base - $form-check-input-width) * .75;
+    vertical-align: top;
+    background-color: $form-check-input-bg;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    border: $form-check-input-border;
+    appearance: none;
+    color-adjust: exact; // Keep themed appearance for print
+
+    &:active {
+      filter: $form-check-input-active-filter;
+    }
+
+    &:focus {
+      border-color: $form-check-input-focus-border;
+      outline: 0;
+      box-shadow: $form-check-input-focus-box-shadow;
+    }
+
+    &:checked {
+      background-color: $form-check-input-checked-bg-color;
+      border-color: $form-check-input-checked-border-color;
+    }
+
+    &:disabled {
+      pointer-events: none;
+      filter: none;
+      opacity: $form-check-input-disabled-opacity;
+    }
+  }
+
+  &[type=checkbox]:not(.form-check-input) {
+    @include border-radius($form-check-input-border-radius);
+
+    &:checked {
+      @if $enable-gradients {
+        background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$variable-prefix}gradient);
+      } @else {
+        background-image: escape-svg($form-check-input-checked-bg-image);
+      }
+    }
+  }
+
+  &[type=radio]:not(.form-check-input) {
+    border-radius: $form-check-radio-border-radius;
+
+    &:checked {
+      @if $enable-gradients {
+        background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$variable-prefix}gradient);
+      } @else {
+        background-image: escape-svg($form-check-radio-checked-bg-image);
+      }
+    }
+  }
+}
+
+select:not(.form-select) {
+  @extend .form-select;
+}
+
+.form-select,
+select {
+  option:checked {
+    color: $body-color;
+    background-color: $pma-selected-bg;
+  }
+}
+
+textarea {
+  background-color: $input-bg;
+  border: $input-border-width solid $input-border-color;
+
+  &:focus {
+    color: $input-focus-color;
+    background-color: $input-focus-bg;
+    border-color: $input-focus-border-color;
+    outline: 0;
+
+    @if $enable-shadows {
+      @include box-shadow($input-box-shadow, $input-focus-box-shadow);
+    } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      box-shadow: $input-focus-box-shadow;
+    }
+  }
+
+  &.char {
+    margin: 6px;
+  }
+
+  &.charField {
+    width: 95%;
+  }
+}
--- a/lamp/themes/boodark/scss/_gis.scss
+++ b/lamp/themes/boodark/scss/_gis.scss
@@ -0,0 +1,35 @@
+// 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;
+  }
+}
--- a/lamp/themes/boodark/scss/_icons.scss
+++ b/lamp/themes/boodark/scss/_icons.scss
@@ -0,0 +1,422 @@
+// stylelint-disable scss/at-extend-no-missing-placeholder
+// Icons
+
+// Icon Colors
+$svg-color: $pma-link-color;          // #0dcaf0
+$disable-color: $pma-disable-color;   // #adb5bd
+$lock-color: #842029;
+$unlock-color: #005e52;
+$drop-color: #dc3545;
+$notice-color: #ff0;
+$success-color: #2bbbad;
+$usradd-color: #005e52;
+$usrdrop-color: #842029;
+
+// Data SVG
+$data-svg-prefix: 'data:image/svg+xml,<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">';
+$icons: (
+  'b_bookmark': '<path fill="#{$svg-color}" d="m2 2v28l10-10 4 4c.4-3.4 2.7-6.3 6-7.5v-14.5z"/><path fill="#{$svg-color}" d="m25 18c-3.9 0-7 3.1-7 7s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm-5 6h4v-4h2v4h4v2h-4v4h-2v-4h-4z"/></svg>',
+  'b_browse': '<path fill="#{$svg-color}" d="m2 2v28h28v-28zm8 2h8v4h-8zm10 0h8v4h-8zm-16 6h4v4h-4zm6 0h8v4h-8zm10 0h8v4h-8zm-16 6h4v6h-4zm6 0h8v6h-8zm10 0h8v6h-8zm-8 2v2h4v-2zm10 0v2h4v-2zm-18 6h4v4h-4zm6 0h8v4h-8zm10 0h8v4h-8z"/></svg>',
+  'b_chart': '<path fill="#{$svg-color}" d="m6 10v16h6v-16z"/><path fill="#{$svg-color}" d="m14 6v20h6v-20z"/><path fill="#{$svg-color}" d="m22 14v12h6v-12z"/><path fill="#{$svg-color}" d="m2 2v28h28v-2h-26v-26z"/></svg>',
+  'b_close': '<path fill="#{$svg-color}" d="m4 23 5 5 7-7 7 7 5-5-7-7 7-7-5-5-7 7-7-7-5 5 7 7z"/></svg>',
+  'b_comment': '<path fill="#{$svg-color}" d="m5 4c-1.7 0-3 1.3-3 3v10c0 1.7 1.3 3 3 3h3v8l10-8h9c1.7 0 3-1.3 3-3v-10c0-1.7-1.3-3-3-3zm1 4h20v2h-20zm0 4h14v2h-14z"/></svg>',
+  'b_deltbl': '<path fill="#{$svg-color}" d="m2 2v28h15.4c-.4-.6-.8-1.3-1-2h-12.4v-20h24v8.4c.7.2 1.4.6 2 1v-15.4zm4 8v4h4v-4zm6 0v4h6v-4zm8 0v4h6v-4zm-14 6v4h4v-4zm6 0v4h5.4c.2-.3.4-.5.6-.8v-3.2zm8 0v1.4c1.1-.7 2.4-1.2 3.7-1.4zm-14 6v4h4v-4zm6 0v4h4c0-.3-.1-.7-.1-1 0-1 .2-2 .5-3z"/><path fill="#{$svg-color}" d="m25 18c-3.9 0-7 3.1-7 7s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm5 6v2h-10v-2z"/></svg>',
+  'b_docs': '<path fill="#{$svg-color}" d="m16 2c-7.7 0-14 6.3-14 14s6.3 14 14 14 14-6.3 14-14-6.3-14-14-14zm0 6c2.9 0 5 1.5 5 4 0 1.2-.9 2.1-2 3-1 .8-1.4 1.5-1.5 3h-3c0-2.6 1.1-3.4 2.4-4.7.9-.9.8-1.7.1-2.3-1.3-1-3.2-.1-4.6.5l-.8-2.4c1.4-.8 3.4-1.1 4.4-1.1zm0 12c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"/></svg>',
+  'b_drop': '<path fill="#{$drop-color}" d="m16 2a14 14 0 0 0 -14 14 14 14 0 0 0 14 14 14 14 0 0 0 14-14 14 14 0 0 0 -14-14zm-8 12h16v4h-16z"/></svg>',
+  'b_edit': '<path fill="#{$svg-color}" d="m20 5 7 7 2-2c1.3-1.4 1.3-2.7 0-4l-3-3c-1.3-1.3-2.7-1.3-4 0zm-1 1-17 17v7h7l17-17zm-13.5 16.5 4 4-1.5 1.5h-2v-2h-2v-2z"/></svg>',
+  'b_empty': '<path fill="#{$svg-color}" d="m8 2v12h14v-6h-6v-6zm10 0v4h4zm-16 8v16h4v-6h18v6h6v-16h-6v6h-18v-6zm25 2a1 1 0 0 1 1 1 1 1 0 0 1 -1 1 1 1 0 0 1 -1-1 1 1 0 0 1 1-1zm-19 10v8h2v-8zm4 0v6h2v-6zm4 0v4h2v-4zm4 0v6h2v-6z"/></svg>',
+  'b_engine': '<path fill="#{$svg-color}" d="m16 2c-6.6 0-12 2.2-12 5v4c0 2.8 5.4 5 12 5 .7 0 1.4 0 2.1-.1 1.7-1.2 3.8-1.9 5.9-1.9.5 0 .9 0 1.4.1 1.6-.9 2.6-1.9 2.6-3.1v-4c0-2.8-5.4-5-12-5zm0 2c5 0 9 1.6 9 3.5s-4 3.5-9 3.5-9-1.6-9-3.5 4-3.5 9-3.5zm-12 9v5c0 2.5 4.4 4.5 1.1 4.9.2-1.8.8-3.5 1.9-4.9-6.6 0-12-2.2-12-5zm24 0c0 .5-.3 1.1-.7 1.6.2.1.5.1.7.2zm-24 7v5c0 2.8 5.4 5 12 5-1.1-1.5-1.7-3.3-1.9-5.1-5.7-.4-1.1-2.4-1.1-4.9z"/><path fill="#{$svg-color}" d="m23 16-.4 2.2-1.7.7-1.9-1.3-1.4 1.4 1.3 1.9-.7 1.7-2.2.4v2l2.2.4.7 1.7-1.3 1.9 1.4 1.4 1.9-1.3 1.7.7.4 2.2h2l.4-2.2 1.7-.7 1.9 1.3 1.4-1.4-1.3-1.9.7-1.7 2.2-.4v-2l-2.2-.4-.7-1.7 1.3-1.9-1.4-1.4-1.9 1.3-1.7-.7-.4-2.2zm1 5c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.3-3 3-3z"/></svg>',
+  'b_event_add': '<path fill="#{$svg-color}" d="m16 2c-7.7 0-14 6.3-14 14s6.3 14 14 14v-3c-6.1 0-11-4.9-11-11s4.9-11 11-11 11 4.9 11 11h3c0-7.7-6.3-14-14-14zm-6 7-1 1v1l7 7 5-5v-1l-1-1h-1l-3 3-5-5z"/><path fill="#{$svg-color}" d="m25 18c-3.9 0-7 3.1-7 7s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm5 6v2h-4v4h-2v-4h-4v-2h4v-4h2v4z"/></svg>',
+  'b_events': '<path fill="#{$svg-color}" d="m16 2c-7.7 0-14 6.3-14 14s6.3 14 14 14 14-6.3 14-14-6.3-14-14-14zm0 3c6.1 0 11 4.9 11 11s-4.9 11-11 11-11-4.9-11-11 4.9-11 11-11zm-6 4-1 1v1l7 7 5-5v-1l-1-1h-1l-3 3-5-5z"/></svg>',
+  'b_export': '<path fill="#{$svg-color}" d="m6 2v11l4-4h2v5h8v12h-8v4h18v-18h-10v-10zm16 0v8h8zm-16 25v3h3z"/><path fill="#{$svg-color}" d="m10 12-8 8 8 8v-4h8v-8h-8z"/></svg>',
+  'b_favorite': '<path fill="#{$svg-color}" d="m16 2-4 10h-10l8 7-4 11 10-6 10 6-4-11 8-7h-10z"/></svg>',
+  'b_find_replace': '<path fill="#{$svg-color}" d="m12 2c-5.5 0-10 4.5-10 10 0 2.1.7 4.1 1.8 5.7l1.5-3.8c-.2-.6-.3-1.2-.3-1.9 0-3.9 3.1-7 7-7s7 3.1 7 7c0 3-1.9 5.5-4.5 6.5l1.1 2.8c.8-.3 1.7-.7 2.4-1.3l9 10 3-3-10-9c1.3-1.7 2-3.8 2-6 0-5.5-4.5-10-10-10z"/><path fill="#{$svg-color}" d="m7 16-5 14h4l.5-2h5l.5 2h4l-5-14zm2 4 1.5 4h-3z"/></svg>',
+  'b_ftext': '<path fill="#{$svg-color}" d="m12 2v28h2v-28zm-10 4v20h8v-20zm2 2h4v4h-4zm0 6h4v4h-4zm0 6h4v4h-4z"/><path fill="#{$svg-color}" d="m18 8v4h4v12h4v-12h4v-4z"/></svg>',
+  'b_globe': '<path fill="#{$svg-color}" d="m16 2c-7.7 0-14 6.3-14 14s6.3 14 14 14 14-6.3 14-14-6.3-14-14-14zm0 3 .8 1.9 2-1.5c.3.1.7.2 1 .3l-1.2.9-.8 3.1.7.7-.7 1.8 2.1 2.2 2.5-1.1 1.2 3 1.4 1 2-1.2c-.1 6-5 1.9-11 1.9-6.1 0-11-4.9-11-11 0-.2.1-.5.1-.7l3 1.9 4.2.2.5 1.7 1.3.6 1.8 5 1.1.4-.1-3.7 1.2-2.6-.5-2.1-4.3-.6-1.1.4-2.2-.4 1.2-1.3 1.4-4.1-2.2-1.6-2.8-.1c2.1-2.5 5.1-4 8.4-4z"/></svg>',
+  'b_group': '<path fill="#{$svg-color}" d="m11 2c3.2 0 6.2.7 7.8 2-1.3.1-2.5.3-3.6.6-1.2-.4-2.7-.6-4.2-.6-3.9 0-7 1.3-7 3 0 1.5 2.6 2.8 6 3v4c-4.5-.2-8-1.9-8-4v-4c0-2.2 4-4 9-4zm10 4c5 0 9 1.8 9 4v4c0 2.2-4 4-9 4s-9-1.8-9-4v-4c0-2.2 4-4 9-4zm0 2c-3.9 0-7 1.3-7 3s3.1 3 7 3 7-1.3 7-3-3.1-3-7-3zm-19 4c0 2 3.4 3.8 8 4v4c-4.5-.2-8-1.9-8-4zm28 4v4c0 2.2-4 4-9 4s-9-1.8-9-4v-4c0 2.2 4 4 9 4s9-1.8 9-4zm-28 2c0 2 3.4 3.8 8 4v4c-4.5-.2-8-1.9-8-4zm28 4v4c0 2.2-4 4-9 4s-9-1.8-9-4v-4c0 2.2 4 4 9 4s9-1.8 9-4z"/></svg>',
+  'b_help': '<path fill="#{$svg-color}" d="m16 2c-7.7 0-14 6.3-14 14s6.3 14 14 14 14-6.3 14-14-6.3-14-14-14zm0 3c6.1 0 11 4.9 11 11s-4.9 11-11 11-11-4.9-11-11 4.9-11 11-11zm0 3c-1 0-3.1.3-4.5 1.1l.9 2.4c1.4-.6 3.3-1.5 4.6-.5.7.6.8 1.4-.1 2.3-1.3 1.3-2.4 2.1-2.4 4.7h3c.1-1.5.5-2.2 1.5-3 1.1-.9 2-1.8 2-3 0-2.5-2.1-4-5-4zm0 12c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>',
+  'b_home': '<path fill="#{$svg-color}" d="m16 11-10 10v7h7v-7h6v7h7v-7z"/><path fill="#{$svg-color}" d="m16 4-14 14v4l14-14 14 14v-4z"/></svg>',
+  'b_import': '<path fill="#{$svg-color}" d="m4 2v12h2v-5h2l11 11-10 10h19v-18h-10v-10zm16 0v8h8zm-16 24v4h2v-4z"/><path fill="#{$svg-color}" d="m8 12v4h-8v8h8v4l8-8z"/></svg>',
+  'b_index': '<path fill="#{$svg-color}" d="m12 2v28h2v-28zm-10 4v20h8v-20zm2 2h4v4h-4zm0 6h4v4h-4zm0 6h4v4h-4z"/><path fill="#{$svg-color}" d="m29 4-12 14h6l-3 10 11-14h-6z"/></svg>',
+  'b_index_add': '<path fill="#{$svg-color}" d="m20 2-16 16h12l-4 12 4-4v-1c0-5 4-9 9-9h1l2-2h-12z"/><path fill="#{$svg-color}" d="m25 18c-3.9 0-7 3.1-7 7s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm5 6v2h-4v4h-2v-4h-4v-2h4v-4h2v4z"/></svg>',
+  'b_insrow': '<path fill="#{$svg-color}" d="m6 4v8h20v-8zm2 2h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-18 8v4h17.4c1.6-1.3 3.5-2 5.6-2 1.8 0 3.5.5 5 1.5v-3.5zm4 6v8h1.5c-.2-.6-.3-1.3-.4-2h-2.1v-4h2.5c.2-.7.6-1.4 1-2zm2 2h4v4h-4z"/><path fill="#{$svg-color}" d="m25 18c-3.9 0-7 3.1-7 7s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm5 6v2h-4v4h-2v-4h-4v-2h4v-4h2v4z"/></svg>',
+  'b_minus': '<path fill="#{$svg-color}" d="m6 6v18h18v-18zm14 8v2h-10v-2z"/></svg>',
+  'b_more': '<path fill="#{$svg-color}" d="m16 22-10-12h20z"/></svg>',
+  'b_move': '<path fill="#{$svg-color}" d="m14 12v18h4v-18zm-10 4v14h8v-14zm16 0v14h8v-14zm-14 2h4v4h-4zm16 0h4v4h-4zm-16 6h4v4h-4zm16 0h4v4h-4z"/><path fill="#{$svg-color}" d="m10 2-6 6 6 6v-4h12v4l6-6-6-6v4h-12z"/></svg>',
+  'b_newdb': '<path fill="#{$svg-color}" d="m16 2c-6.6 0-12 2.2-12 5v4c0 2.8 5.4 5 12 5s12-2.2 12-5v-4c0-2.8-5.4-5-12-5zm0 2c5 0 9 1.6 9 3.5s-4 3.5-9 3.5-9-1.6-9-3.5 4-3.5 9-3.5zm-12 9v5c0 2.8 5.4 5 12 5h.2c.5-2.1 1.8-3.9 3.5-5.2-1.2.2-2.4.2-3.7.2-6.6 0-12-2.2-12-5zm24 0c0 1.1-.9 2.1-2.5 3 .8.1 1.7.2 2.5.5zm-24 7v5c0 2.8 5.4 5 12 5 .5 0 1 0 1.5-.1-1-1.5-1.5-3.1-1.5-4.9-6.6 0-12-2.2-12-5z"/><path fill="#{$svg-color}" d="m25 18c-3.9 0-7 3.1-7 7s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm5 6v2h-4v4h-2v-4h-4v-2h4v-4h2v4z"/></svg>',
+  'db_drop': '<path fill="#{$drop-color}" d="m16 2c-6.6 0-12 2.2-12 5v4c0 2.8 5.4 5 12 5s12-2.2 12-5v-4c0-2.8-5.4-5-12-5zm0 2c5 0 9 1.6 9 3.5s-4 3.5-9 3.5-9-1.6-9-3.5 4-3.5 9-3.5zm-12 9v5c0 2.8 5.4 5 12 5h.2c.5-2.1 1.8-3.9 3.5-5.2-1.2.2-2.4.2-3.7.2-6.6 0-12-2.2-12-5zm24 0c0 1.1-.9 2.1-2.5 3 .8.1 1.7.2 2.5.5zm-24 7v5c0 2.8 5.4 5 12 5 .5 0 1 0 1.5-.1-1-1.5-1.5-3.1-1.5-4.9-6.6 0-12-2.2-12-5z"/><path fill="#{$drop-color}" d="m25 18c-3.9 0-7 3.1-7 7s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm5 6v2h-10v-2z"/></svg>',
+  'b_no_favorite': '<path fill="#{$svg-color}" d="m16 2-4 10h-10l8 7-4 11 10-6 10 6-4-11 8-7h-10zm0 5.5 2.6 6.5h6.1l-5 4.4 2.5 6.9-6.2-3.7-6.2 3.7 2.5-6.9-5-4.4h6.1z"/></svg>',
+  'b_plugin': '<path fill="#{$svg-color}" d="m20 2c-2 0-4 1-4 3.1 0 .9 1 1.9 2 2.9s0 2-2 2h-6v6c0 2-1 3-2 2s-2-2-3-2c-2 0-3 2-3 4s1 4 3.1 4c.9 0 1.9-1 2.9-2s2 0 2 2v6h6c2 0 3-1 2-2s-2-2-2-2.9c0-2.1 2-3.1 4-3.1s4 1 4 3c0 1-1 2-2 3s0 2 2 2h6v-20h-6c-2 0-3-1-2-2s2-2 2-3c0-2-2-3-4-3z"/></svg>',
+  'b_plus': '<path fill="#{$svg-color}" d="m6 6v18h18v-18zm14 8v2h-4v4h-2v-4h-4v-2h4v-4h2v4z"/></svg>',
+  'b_primary': '<path fill="#{$svg-color}" d="m22 2c-4.4 0-8 3.6-8 8 0 .6.1 1.2.2 1.8l-12.2 12.2v4l2 2h4v-4h4v-4h4v-4l1.4-1.4c1.3.9 3 1.4 4.6 1.4 4.4 0 8-3.6 8-8s-3.6-8-8-8zm2 4c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm0 14v4h-4v2h4v4h2v-4h4v-2h-4v-4z"/></svg>',
+  'b_print': '<path fill="#{$svg-color}" d="m8 2v6h-2l-4 5v11h5.1l-2.1 6h22l-2.1-6h5.1v-11l-4-5h-2v-6zm2 2h12v6h-12zm15 10a1 1 0 0 1 1 1 1 1 0 0 1 -1 1 1 1 0 0 1 -1-1 1 1 0 0 1 1-1zm-13.7 4h9.4l3.3 10h-16zm1.2 2-.5 2h8l-.5-2zm-1.1 4-.6 2h1.4l-.6-2z"/></svg>',
+  'b_props': '<path fill="#{$svg-color}" d="m2 2v28h14c-.5-.6-.9-1.3-1.2-2h-1.8v-20h24v6.8c.7.3 1.4.7 2 1.2v-14zm4 8v4h4v-4zm6 0v4h6v-4zm8 0v4h6v-4zm-14 6v4h4v-4zm6 0v4h2.8c.7-1.6 1.8-3 3.2-4zm-6 6v4h4v-4zm6 0v4h2.2c-.1-.7-.2-1.3-.2-2s.1-1.3.2-2z"/><path fill="#{$svg-color}" d="m23 16-.4 2.2-1.7.7-1.9-1.3-1.4 1.4 1.3 1.9-.7 1.7-2.2.4v2l2.2.4.7 1.7-1.3 1.9 1.4 1.4 1.9-1.3 1.7.7.4 2.2h2l.4-2.2 1.7-.7 1.9 1.3 1.4-1.4-1.3-1.9.7-1.7 2.2-.4v-2l-2.2-.4-.7-1.7 1.3-1.9-1.4-1.4-1.9 1.3-1.7-.7-.4-2.2zm1 5c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.3-3 3-3z"/></svg>',
+  'b_relations': '<path fill="#{$svg-color}" d="m2 2v4h6v2h-6v2h6v2h-6v2h8v-12zm10 4v2h4v4h4v-2h-2v-4zm10 0v16h8v-2h-6v-2h6v-2h-6v-2h6v-2h-6v-2h6v-4zm-8 8v8h-2v2h4v-8h4v-2zm-12 4v4h6v2h-6v2h6v2h-6v2h8v-12z"/></svg>',
+  'b_report': '<path fill="#{$svg-color}" d="m4 2v4h-2v2h2v4h-2v2h2v4h-2v2h2v4h-2v2h2v4h24c1 0 2-1 2-2v-24c0-1-1-2-2-2zm2 2h4v24h-4v-2h2v-2h-2v-4h2v-2h-2v-4h2v-2h-2v-4h2v-2h-2z"/></svg>',
+  'b_rename': '<path fill="#{$svg-color}" d="m17.24,23.97l-15,0c-.69,0 -1.25,-.51 -1.25,-1.15l0,-13.78c0,-.63 .56,-1.15 1.25,-1.15l15,0c.69,0 1.25,.51 1.25,1.15s-.56,1.15 -1.25,1.15l-13.75,0l0,11.49l13.75,0c.69,0 1.25,.51 1.25,1.15s-.56,1.15 -1.25,1.15zm-10,-9.19c-.69,0 -1.25,.51 -1.25,1.15s.56,1.15 1.25,1.15l7.5,0c.69,0 1.25,-.51 1.25,-1.15s-.56,-1.15 -1.25,-1.15l-7.5,0zm19.99,13.78l-3.75,0l0,-25.27l3.75,0c.69,0 1.25,-.51 1.25,-1.15s-.56,-1.15 -1.25,-1.15l-10,0c-.69,0 -1.25,.51 -1.25,1.15s.56,1.15 1.25,1.15l3.75,0l0,25.27l-3.75,0c-.69,0 -1.25,.51 -1.25,1.15s.56,1.15 1.25,1.15l10,0c.69,0 1.25,-.51 1.25,-1.15s-.56,-1.15 -1.25,-1.15zm2.5,-2.68l-2.5,0c-.69,0 -1.25,.51 -1.25,1.15s.56,1.15 1.25,1.15l1.25,0l0,11.49l-1.25,0c-.69,0 -1.25,.51 -1.25,1.15s.56,1.15 1.25,1.15l2.5,0c.69,0 1.25,-.51 1.25,-1.15l0,-13.78c0,-.63 -.56,-1.15 -1.25,-1.15z"/></svg>',
+  'b_routine_add': '<path fill="#{$svg-color}" d="m21 4-.4 2.2-1.7.7-1.9-1.3-1.4 1.4 1.3 1.9-.7 1.7-2.2.4v2l2.2.4.7 1.7-1.3 1.9 1.4 1.4 1.9-1.3 1 .5c1.5-1 3.3-1.6 5.1-1.6 1.1 0 2.1.2 3.1.6l-1-1.5.7-1.7 2.2-.4v-2l-2.2-.4-.7-1.7 1.3-1.9-1.4-1.4-1.9 1.3-1.7-.7-.4-2.2zm1 5c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.3-3 3-3zm-13 3-.4 2.2-1.7.7-1.9-1.3-1.4 1.4 1.3 1.9-.7 1.7-2.2.4v2l2.2.4.7 1.7-1.3 1.9 1.4 1.4 1.9-1.3 1.7.7.4 2.2h2l.4-2.2 1.7-.7 1.9 1.3 1-1v-.9l-.9-1.4.7-1.7 1.1-.2c.3-.7.6-1.2 1.1-1.8v-.4l-2.2-.4-.7-1.7 1.3-1.9-1.4-1.4-1.9 1.3-1.7-.7-.4-2.2zm1 5c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.3-3 3-3z"/><path fill="#{$svg-color}" d="m25 18c-3.9 0-7 3.1-7 7s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm5 6v2h-4v4h-2v-4h-4v-2h4v-4h2v4z"/></svg>',
+  'b_routines': '<path fill="#{$svg-color}" d="m21 4-.4 2.2-1.7.7-1.9-1.3-1.4 1.4 1.3 1.9-.7 1.7-2.2.4v2l2.2.4.7 1.7-1.3 1.9 1.4 1.4 1.9-1.3 1.7.7.4 2.2h2l.4-2.2 1.7-.7 1.9 1.3 1.5-1.3-1.4-2 .7-1.7 2.2-.4v-2l-2.2-.4-.7-1.7 1.3-1.9-1.4-1.4-1.9 1.3-1.7-.7-.4-2.2zm1 5c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.3-3 3-3zm-13 3-.4 2.2-1.7.7-1.9-1.3-1.4 1.4 1.3 1.9-.7 1.7-2.2.4v2l2.2.4.7 1.7-1.3 1.9 1.4 1.4 1.9-1.3 1.7.7.4 2.2h2l.4-2.2 1.7-.7 1.9 1.3 1.4-1.4-1.3-1.9.7-1.7 2.2-.4v-2l-2.2-.4-.7-1.7 1.3-1.9-1.4-1.4-1.9 1.3-1.7-.7-.4-2.2zm1 5c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.3-3 3-3z"/></svg>',
+  'b_save': '<path fill="#{$svg-color}" d="m2 2v28h4v-12c0-1.1.9-2 2-2h16c1.1 0 2 .9 2 2v12h4v-24l-4-4zm6 2h16v7c0 .6-.4 1-1 1h-14c-.6 0-1-.4-1-1zm10 1v6h4v-6zm-10 13v2h16v-2zm0 4v2h16v-2zm0 4v2h16v-2z"/></svg>',
+  'b_search': '<path fill="#{$svg-color}" d="m12 2c-5.5 0-10 4.5-10 10s4.5 10 10 10c2.2 0 4.3-.7 6-2l9 10 3-3-10-9c1.3-1.7 2-3.8 2-6 0-5.5-4.5-10-10-10zm0 3c3.9 0 7 3.1 7 7s-3.1 7-7 7-7-3.1-7-7 3.1-7 7-7z"/></svg>',
+  'b_select': '<path fill="#{$svg-color}" d="m12 2c-5.5 0-10 4.5-10 10s4.5 10 10 10c2.2 0 4.3-.7 6-2l9 10 3-3-10-9c1.3-1.7 2-3.8 2-6 0-5.5-4.5-10-10-10zm0 3c3.9 0 7 3.1 7 7s-3.1 7-7 7-7-3.1-7-7 3.1-7 7-7z"/><path fill="#{$svg-color}" d="m2 24v6h4v-6zm6 0v6h4v-6zm6 0v6h4v-6z"/></svg>',
+  'b_spatial': '<path fill="#{$svg-color}" d="m12 2v28h2v-28zm-10 4v20h8v-20zm2 2h4v4h-4zm0 6h4v4h-4zm0 6h4v4h-4z"/><path fill="#{$svg-color}" d="m24 6c-3.3 0-6 2.7-6 6 0 5 4 9 6 14 2-5 6-9 6-14 0-3.3-2.7-6-6-6zm0 3c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.3-3 3-3z"/></svg>',
+  'b_sql': '<path fill="#{$svg-color}" d="m9 2c-1.7 0-3 1.3-3 3v21h-3c-.5 0-1 .5-1 1 0 1.4 1.3 3 3 3h18c1.7 0 3-1.3 3-3v-21h3c.5 0 1-.5 1-1 0-1.4-1.3-3-3-3zm0 2h15.2c-.1.3-.2.7-.2 1v22c0 .6-.4 1-1 1s-1-.5-1-1-.5-1-1-1h-13v-21c0-.6.4-1 1-1zm1 2v2h10v-2zm0 4v2h12v-2zm0 4v2h8v-2zm0 4v2h10v-2zm0 4v2h12v-2z"/></svg>',
+  'b_sqlhelp': '<path fill="#{$svg-color}" d="m8 2c-2.2 0-4 1.8-4 4v20c0 2.2 1.8 4 4 4h20v-24h-2v22h-17c-4 0-4-6 0-6h15v-20zm1 22c-1.3 0-1.3 2 0 2h15v-2z"/></svg>',
+  'b_table_add': '<path fill="#{$svg-color}" d="m2 2v28h15.4c-.4-.6-.8-1.3-1-2h-12.4v-20h24v8.4c.7.2 1.4.6 2 1v-15.4zm4 8v4h4v-4zm6 0v4h6v-4zm8 0v4h6v-4zm-14 6v4h4v-4zm6 0v4h5.4c.2-.3.4-.5.6-.8v-3.2zm8 0v1.4c1.1-.7 2.4-1.2 3.7-1.4zm-14 6v4h4v-4zm6 0v4h4c0-.3-.1-.7-.1-1 0-1 .2-2 .5-3z"/><path fill="#{$svg-color}" d="m25 18c-3.9 0-7 3.1-7 7s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm5 6v2h-4v4h-2v-4h-4v-2h4v-4h2v4z"/></svg>',
+  'b_tblanalyse': '<path fill="#{$svg-color}" d="m2 2v10h5l6 8h-5v10h16v-10h-5l6-8h5v-10h-12v10h4l-6 8-6-8h4v-10zm2 4h8v4h-8zm16 0h8v4h-8zm-10 18h12v4h-12z"/></svg>',
+  'b_tblops': '<path fill="#{$svg-color}" d="m6 2v2h-4v4h4v2h8v-2h16v-4h-16v-2zm2 2h4v4h-4zm10 8v2h-16v4h16v2h8v-2h4v-4h-4v-2zm2 2h4v4h-4zm-14 8v2h-4v4h4v2h8v-2h16v-4h-16v-2zm2 2h4v4h-4z"/></svg>',
+  'b_tbloptimize': '<path fill="#{$svg-color}" d="m16 2-7 4 4 7 7-4zm4 7v3h8v-8h-8zm3 3-4 7 7 4 4-7zm-7.8-7.2 2 3.5-3.5 2-2-3.5zm6.8 1.2h4v4h-4zm-20 4v20h20v-8h-6v-6h-6v-6zm2 2h4v4h-4zm19.8 2.8 3.5 2-2 3.5-3.5-2zm-19.8 3.2h4v4h-4zm6 0h4v4h-4zm-6 6h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4z"/></svg>',
+  'b_trigger_add': '<path fill="#{$svg-color}" d="m2 2v28h4v-28zm6 2v18h8.5c1.2-3.5 4.5-5.9 8.2-6l-2.7-3 8-9z"/><path fill="#{$svg-color}" d="m25 18c-3.9 0-7 3.1-7 7s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm5 6v2h-4v4h-2v-4h-4v-2h4v-4h2v4z"/></svg>',
+  'b_triggers': '<path fill="#{$svg-color}" d="m2 2v28h4v-28zm6 2v18h22l-8-9 8-9z"/></svg>',
+  'b_unique': '<path fill="#{$svg-color}" d="m12 2v28h2v-28zm-10 4v20h8v-20zm2 2h4v4h-4zm0 6h4v4h-4zm0 6h4v4h-4z"/><path fill="#{$svg-color}" d="m18 8v11c0 2.8 2.2 5 5 5 1.1 0 2.1-.4 3-1v1h4v-16h-4v10c0 1.1-.9 2-2 2s-2-.9-2-2v-10z"/></svg>',
+  'b_usradd': '<path fill="#{$usradd-color}" d="m16 2c-3 0-7 1-7 7s0 7 2 9c1 1 0 3 0 3s-9 3-9 9h15.5c-1-1.5-1.5-3.2-1.5-5 0-3.9 2.5-7.4 6.2-8.6.8-1.4.8-3 .8-7.4 0-6-4-7-7-7z"/><path fill="#{$usradd-color}" d="m25 18c-3.9 0-7 3.1-7 7s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm5 6v2h-4v4h-2v-4h-4v-2h4v-4h2v4z"/></svg>',
+  'b_usrdrop': '<path fill="#{$usrdrop-color}" d="m16 2c-3 0-7 1-7 7s0 7 2 9c1 1 0 3 0 3s-9 3-9 9h15.5c-1-1.5-1.5-3.2-1.5-5 0-3.9 2.5-7.4 6.2-8.6.8-1.4.8-3 .8-7.4 0-6-4-7-7-7z"/><path fill="#{$usrdrop-color}" d="m25 18c-3.9 0-7 3.1-7 7s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm5 6v2h-10v-2z"/></svg>',
+  'b_usredit': '<path fill="#{$svg-color}" d="m2 30c0-6 9-9 9-9s1-2 0-3c-2-2-2-3-2-9s4-7 7-7 7 1 7 7 0 7-2 9c-1 1 0 3 0 3s9 3 9 9z"/></svg>',
+  'b_usrlist': '<path fill="#{$svg-color}" d="m20 8c-1.7 0-5 .8-5 5s.3 5.7 1.7 6.7c.8.8 0 1.6 0 1.6s-6.7 2.3-6.7 6.7h20c0-4.4-6.7-6.7-6.7-6.7s-.8-.8 0-1.6c1.4-1 1.7-2.5 1.7-6.7s-3.3-5-5-5z"/><path fill="#{$svg-color}" d="m12 4c-1.7 0-5 .8-5 5s.3 5.7 1.7 6.7c.8.8 0 1.6 0 1.6s-6.7 2.3-6.7 6.7h7c1.3-1.8 3.2-3.1 5-3.8-1.2-2.5-1-5.1-1-7.2 0-4 1.2-5.2 3.5-6.4-1-2.1-3.2-2.6-4.5-2.6z"/></svg>',
+  'b_versions': '<path fill="#{$svg-color}" d="m14 6v20h16v-20zm-6 2v16h4v-2h-2v-12h2v-2zm8 0h12v16h-12zm-14 2v12h4v-2h-2v-8h2v-2z"/></svg>',
+  'b_view_add': '<path fill="#{$svg-color}" d="m2 8v22h15.5c-.4-.6-.8-1.3-1-2h-12.5v-14h4c-2.2-1.2-3.7-3.5-4-6zm16 4.3c-.6.7-1.2 1.3-2 1.7h4c-.8-.4-1.4-1-2-1.7zm12 0c-.6.7-1.2 1.3-2 1.7v2.5c.7.2 1.4.6 2 1zm-24 3.7v4h4v-4zm6 0v4h5.5c.1-.2.3-.4.5-.6v-3.4zm8 0v1.5c1.5-1 3.2-1.5 5-1.5zm-14 6v4h4v-4zm6 0v4h4.1c0-.3-.1-.7-.1-1 0-1 .2-2 .5-3z"/><path fill="#{$svg-color}" d="m12 2c-1.6 0-3.1.7-4 2h-2v2h1.1c-.1.3-.1.7-.1 1 0 2.8 2.2 5 5 5s5-2.2 5-5c0-.6.4-1 1-1s1 .4 1 1c0 2.8 2.2 5 5 5s5-2.2 5-5c0-.3 0-.7-.1-1h1.1v-2h-2c-.9-1.3-2.4-2-4-2-1.8 0-3.4.9-4.3 2.5-.5-.3-1.1-.5-1.7-.5s-1.2.2-1.7.5c-.9-1.6-2.5-2.5-4.3-2.5zm0 2c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.3-3 3-3zm12 0c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.3-3 3-3z"/><path fill="#{$svg-color}" d="m25 18a7 7 0 0 0 -7 7 7 7 0 0 0 7 7 7 7 0 0 0 7-7 7 7 0 0 0 -7-7zm-1 2h2v4h4v2h-4v4h-2v-4h-4v-2h4z"/></svg>',
+  'b_views': '<path fill="#{$svg-color}" d="m2 8v22h28v-17.7c-.6.7-1.2 1.3-2 1.7v14h-24v-14h4c-2.2-1.2-3.7-3.5-4-6zm16 4.3c-.6.7-1.2 1.3-2 1.7h4c-.8-.4-1.4-1-2-1.7zm-12 3.7v4h4v-4zm6 0v4h6v-4zm8 0v4h6v-4zm-14 6v4h4v-4zm6 0v4h6v-4zm8 0v4h6v-4z"/><path fill="#{$svg-color}" d="m12 2c-1.6 0-3.1.7-4 2h-2v2h1.1c-.1.3-.1.7-.1 1 0 2.8 2.2 5 5 5s5-2.2 5-5c0-.6.4-1 1-1s1 .4 1 1c0 2.8 2.2 5 5 5s5-2.2 5-5c0-.3 0-.7-.1-1h1.1v-2h-2c-.9-1.3-2.4-2-4-2-1.8 0-3.4.9-4.3 2.5-.5-.3-1.1-.5-1.7-.5s-1.2.2-1.7.5c-.9-1.6-2.5-2.5-4.3-2.5zm0 2c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.3-3 3-3zm12 0c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.3-3 3-3z"/></svg>',
+  'bd_primary': '<path fill="#{$svg-color}" d="m22 2c-4.4 0-8 3.6-8 8 0 .6.1 1.2.2 1.8l-12.2 12.2v4l2 2h4v-4h4v-4h4v-4l1.4-1.4c1.3.9 3 1.4 4.6 1.4 4.4 0 8-3.6 8-8s-3.6-8-8-8zm2 4c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"/></svg>',
+  'bd_browse': '<path fill="#{$disable-color}" d="m2 2v28h28v-28zm8 2h8v4h-8zm10 0h8v4h-8zm-16 6h4v4h-4zm6 0h8v4h-8zm10 0h8v4h-8zm-16 6h4v6h-4zm6 0h8v6h-8zm10 0h8v6h-8zm-8 2v2h4v-2zm10 0v2h4v-2zm-18 6h4v4h-4zm6 0h8v4h-8zm10 0h8v4h-8z"/></svg>',
+  'bd_empty': '<path fill="#{$disable-color}" d="m8 2v12h14v-6h-6v-6zm10 0v4h4zm-16 8v16h4v-6h18v6h6v-16h-6v6h-18v-6zm25 2a1 1 0 0 1 1 1 1 1 0 0 1 -1 1 1 1 0 0 1 -1-1 1 1 0 0 1 1-1zm-19 10v8h2v-8zm4 0v6h2v-6zm4 0v4h2v-4zm4 0v6h2v-6z"/></svg>',
+  'bd_select': '<path fill="#{$disable-color}" d="m12 2c-5.5 0-10 4.5-10 10s4.5 10 10 10c2.2 0 4.3-.7 6-2l9 10 3-3-10-9c1.3-1.7 2-3.8 2-6 0-5.5-4.5-10-10-10zm0 3c3.9 0 7 3.1 7 7s-3.1 7-7 7-7-3.1-7-7 3.1-7 7-7z"/><path fill="#{$disable-color}" d="m2 24v6h4v-6zm6 0v6h4v-6zm6 0v6h4v-6z"/></svg>',
+  'centralColumns': '<path fill="#{$svg-color}" d="m14 2v28h4v-28zm-10 4v20h8v-20zm16 0v20h8v-20zm-14 2h4v4h-4zm16 0h4v4h-4zm-16 6h4v4h-4zm16 0h4v4h-4zm-16 6h4v4h-4zm16 0h4v4h-4z"/></svg>',
+  'centralColumns_add': '<path fill="#{$svg-color}" d="m14 2v28h3.5c-1-1.5-1.5-3.2-1.5-5 0-2.1.7-4 2-5.6v-17.4zm-10 4v20h8v-20zm16 0v11.5c.6-.4 1.3-.8 2-1v-2.5h4v2.1c.7.1 1.4.2 2 .4v-1.5zm-14 2h4v4h-4zm16 0h4v4h-4zm-16 6h4v4h-4zm0 6h4v4h-4z"/><path fill="#{$svg-color}" d="m25 18c-3.9 0-7 3.1-7 7s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm5 6v2h-4v4h-2v-4h-4v-2h4.1l-.1-4h2v4z"/></svg>',
+  'centralColumns_delete': '<path fill="#{$svg-color}" d="m14 2v28h3.5c-1-1.5-1.5-3.2-1.5-5 0-2.1.7-4 2-5.6v-17.4zm-10 4v20h8v-20zm16 0v11.5c.6-.4 1.3-.8 2-1v-2.5h4v2.1c.7.1 1.4.2 2 .4v-1.5zm-14 2h4v4h-4zm16 0h4v4h-4zm-16 6h4v4h-4zm0 6h4v4h-4z"/><path fill="#{$svg-color}" d="m25 18c-3.9 0-7 3.1-7 7s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm5 6v2h-10v-2z"/></svg>',
+  'console': '<path fill="#{$svg-color}" d="m2 4v24h28v-24zm2 2h24v20h-24zm4 4 6 6-6 6h4l6-6-6-6zm10 10-2 2h8v-2z"/></svg>',
+  'database': '<path fill="#{$svg-color}" d="m16 2c-6.6 0-12 2.2-12 5v4c0 2.8 5.4 5 12 5s12-2.2 12-5v-4c0-2.8-5.4-5-12-5zm0 2c5 0 9 1.6 9 3.5s-4 3.5-9 3.5-9-1.6-9-3.5 4-3.5 9-3.5zm-12 9v5c0 2.8 5.4 5 12 5s12-2.2 12-5v-5c0 2.8-5.4 5-12 5s-12-2.2-12-5zm0 7v5c0 2.8 5.4 5 12 5s12-2.2 12-5v-5c0 2.8-5.4 5-12 5s-12-2.2-12-5z"/></svg>',
+  'eye': '<path fill="#{$svg-color}" d="m9 6c-1.7 0-2.4 1.4-3 3l-3 7c-.8 1-1 2.7-1 4 0 3.3 2.7 6 6 6s6-2.7 6-6c0-1.1.9-2 2-2s2 .9 2 2c0 3.3 2.7 6 6 6s6-2.7 6-6c0-1.3-.2-3-1-4l-3-7c-.6-1.6-1.3-3-3-3h-2v2h2c.6 0 .8.5 1 1l2 5.4c-.6-.2-1.3-.4-2-.4-2.2 0-4.2 1.2-5.3 3.1-.7-.7-1.7-1.1-2.7-1.1s-2 .4-2.7 1.1c-1.1-1.9-3.1-3.1-5.3-3.1-.7 0-1.4.2-2 .4l2-5.4c.2-.5.4-1 1-1h2v-2zm-1 10c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4zm16 0c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4z"/></svg>',
+  'hide': '<path fill="#{$svg-color}" d="m16 8c-1.3 0-2.5.1-3.7.3l1.7 1.7c1.1 0 2 .9 2 2l5.1 5.1c.6-.9.9-2 .9-3.1 0-1.2-.3-2.3-1-3.3 3.4 1 6 2.9 7 5.3-.6 1.6-2 3.1-3.9 4.1l1.4 1.4c2.3-1.4 3.9-3.3 4.5-5.5-1.4-4.7-7.2-8-14-8zm-9.5 2.5c-2.3 1.4-3.9 3.3-4.5 5.5 1.4 4.7 7.2 8 14 8 1.3 0 2.5-.1 3.7-.3l-1.8-1.8c-.6.1-1.3.1-1.9.1-5.6 0-1.6-2.5-12-6 .6-1.6 2-3.1 3.9-4.1zm3.5 3.5c0 3.3 2.7 6 6 6z"/><path fill="#{$svg-color}" d="m4 2-2 2 26 26 2-2z"/></svg>',
+  'normalize': '<path fill="#{$svg-color}" d="m22 2v4h-2v-4zm6 2v1.5l-3 3-1.5-1.5 3-3zm-14.5 0 3 3-1.5 1.5-3-3v-1.5zm6.5 4 4 4-18 18-4-4zm10 2v2h-4v-2zm-10 .4-5 5 1.5 1.6 5-5zm-6-.4v2h-4v-2zm11 5.5 3 3v1.5h-1.5l-3-3zm-3 2.5v4h-2v-4z"/></svg>',
+  'pause': '<path fill="#{$svg-color}" d="M 8 6 L 8 26 L 12 26 L 12 16 L 12 6 L 8 6 z M 20 6 L 20 16 L 20 26 L 24 26 L 24 6 L 20 6 z "/></svg>',
+  'play': '<path fill="#{$svg-color}" d="m22 16-12 10v-20z"/></svg>',
+  's_asc': '<path fill="#{$svg-color}" d="m16 4-8 10h16zm-8 14 8 10 8-10zm4 2h8l-4 5z"/></svg>',
+  's_asci': '<path fill="#{$svg-color}" d="m10 2v2h-8v4h12.8c-.6 1.6-1.4 3.3-2.8 5-.7-.9-1.3-1.9-1.8-3h-4.2c.7 2.3 1.8 4.2 3.3 6l-5.3 5 3 3 5-5 4 4 1.4-4.3-2.7-2.7c2.2-2.6 3.5-5.2 4.3-8h3v-4h-8v-2zm11 10-5 18h4l.7-2.4h4.6l.7 2.4h4l-5-18zm2 7 1.2 4.6h-2.4z"/></svg>',
+  's_cog': '<path fill="#{$svg-color}" d="m14 2-.6 4c-.9.2-1.8.6-2.6 1.1l-3.3-2.4-2.8 2.8 2.4 3.3c-.5.8-.9 1.7-1.1 2.6l-4 .6v4l4 .6c.2.9.6 1.8 1.1 2.6l-2.4 3.3 2.8 2.8 3.3-2.4c.8.5 1.7.9 2.6 1.1l.6 4h4l.6-4c.9-.2 1.8-.6 2.6-1.1l3.3 2.4 2.8-2.8-2.4-3.3c.5-.8.9-1.7 1.1-2.6l4-.6v-4l-4-.6c-.2-.9-.6-1.8-1.1-2.6l2.4-3.3-2.8-2.8-3.3 2.4c-.8-.5-1.7-.9-2.6-1.1l-.6-4zm2 8c3.3 0 6 2.7 6 6s-2.7 6-6 6-6-2.7-6-6 2.7-6 6-6z"/></svg>',
+  's_collapseall': '<path fill="#{$svg-color}" d="M 1 16 C 1 15.4 1.5 15 2.1 15 h 27.9 C 30.5 15 31 15.4 31 16 C 31 16.6 30.5 17 29.9 17 h -27.9 C 1.5 17 1 16.6 1 16 z m 15 -16 C 16.6 0 17.1 0.4 17.1 1 v 7.6 l 2.5 -2.3 C 19.9 5.9 20.6 5.9 21 6.3 C 21.5 6.7 21.5 7.3 21 7.7 l -4.3 4 C 16.6 11.9 16.3 12 16 12 C 15.7 12 15.4 11.9 15.2 11.7 l -4.3 -4 C 10.5 7.3 10.5 6.7 11 6.3 C 11.4 5.9 12.1 5.9 12.5 6.3 L 14.9 8.6 V 1 C 14.9 0.4 15.4 0 16 0 z m -1.1 23.4 l -2.5 2.3 C 12.1 26.1 11.4 26.1 11 25.7 C 10.5 25.3 10.5 24.7 11 24.3 l 4.3 -4 C 15.4 20.1 15.7 20 16 20 C 16.3 20 16.6 20.1 16.8 20.3 l 4.3 4 C 21.5 24.7 21.5 25.3 21 25.7 C 20.6 26.1 19.9 26.1 19.5 25.7 L 17.1 23.4 V 31 C 17.1 31.6 16.6 32 16 32 C 15.4 32 14.9 31.6 14.9 31 v -7.6 z"/></svg>',
+  's_desc': '<path fill="#{$svg-color}" d="m16 4-8 10h16zm0 3 4 5h-8zm-8 11 8 10 8-10z"/></svg>',
+  's_error': '<path fill="#{$svg-color}" d="m10 2-8 8v12l8 8h12l8-8v-12l-8-8zm3 4h6l-1 12h-4zm1 16h4v4h-4z"/></svg>',
+  's_host': '<path fill="#{$svg-color}" d="m2 2v28h12v-28zm2 2h8v2h-8zm12 2v2h12v14h-12v4h14v-20zm-12 2h8v2h-8zm0 4h8v2h-8zm4 14c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zm8 2v2h6l-4-2z"/></svg>',
+  's_lang': '<path fill="#{$svg-color}" d="m4 2c-1 0-2 1-2 2v8c0 1 1 2 2 2h2v8l8-8h6c1 0 2-1 2-2v-8c0-1-1-2-2-2zm0 2h16v8h-8v1l-4 4v-5h-4zm20 6v4c0 1-1 2-2 2h-6l-5.4 5.4c.4.4.9.6 1.4.6h6l8 8v-8h2c1 0 2-1 2-2v-8c0-1-1-2-2-2z"/></svg>',
+  's_link': '<path fill="#{$svg-color}" d="m23 2c-.7 0-1.5.5-2 1l-4 4 2 2 4-4 4 4-10 10-2-2-2 2 2 2c.5.5 1.3 1 2 1s1.5-.5 2-1l10-10c.5-.5 1-1.3 1-2s-.5-1.5-1-2l-4-4c-.5-.5-1.3-1-2-1zm-8 8c-.7 0-1.5.5-2 1l-10 10c-.5.5-1 1.3-1 2s.5 1.5 1 2l4 4c.5.5 1.3 1 2 1s1.5-.5 2-1l4-4-2-2-4 4-4-4 10-10 2 2 2-2-2-2c-.5-.5-1.3-1-2-1z"/></svg>',
+  's_lock': '<path fill="#{$lock-color}" d="m16 2c-5.5 0-10 4.5-10 10v4h-2v14h24v-14h-2v-4c0-5.5-4.5-10-10-10zm0 4c3.3 0 6 2.7 6 6v4h-12v-4c0-3.3 2.7-6 6-6zm0 16a2 2 0 0 1 2 2 2 2 0 0 1 -2 2 2 2 0 0 1 -2-2 2 2 0 0 1 2-2z"/></svg>',
+  's_unlock': '<path fill="#{$unlock-color}" d="m16 2c-5.5 0-10 4.5-10 10v4h-2v14h24v-14h-2-4-4-8v-4c0-3.3 2.7-6 6-6s6 2.7 6 6h4c0-5.5-4.5-10-10-10zm0 20a2 2 0 0 1 2 2 2 2 0 0 1 -2 2 2 2 0 0 1 -2-2 2 2 0 0 1 2-2z"/></svg>',
+  's_loggoff': '<path fill="#{$svg-color}" d="m14 4-12 12 12 12v-6h10v-12h-10zm4 0v2h10v20h-10v2h12v-24z"/></svg>',
+  's_notice': '<path fill="#{$notice-color}" d="m17 2h-2l-13 26v2h28v-2zm1 10v8h-4v-8zm0 10v4h-4v-4z"/></svg>',
+  's_okay': '<path fill="#{$svg-color}" d="m16 2c-7.7 0-14 6.3-14 14s6.3 14 14 14 14-6.3 14-14-6.3-14-14-14zm6 8 3 3-11 11-7-7 3-3 4 4z"/></svg>',
+  's_passwd': '<path fill="#{$svg-color}" d="m16 2c-5.5 0-10 4.5-10 10v2h-2v4 12h14v-2h-12v-8h12v-2-2h6v2 2h2v8h-2v2h4v-12-4h-2v-2c0-5.5-4.5-10-10-10zm0 4c3.3 0 6 2.7 6 6v2h-12v-2c0-3.3 2.7-6 6-6zm4 12v12h2v-12zm-10 4c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>',
+  's_reload': '<path fill="#{$svg-color}" d="m14 2 4 4h-2c-6.6 0-12 5.4-12 12s5.4 12 12 12 12-5.4 12-12h-4c0 4.4-3.6 8-8 8s-8-3.6-8-8 3.6-8 8-8h2l-4 4h4l6-6-6-6z"/></svg>',
+  's_replication': '<path fill="#{$svg-color}" d="m2 12v8h10v-8zm18 0v8h10v-8zm-16 2h6v4h-6zm18 0h6v4h-6z"/><path fill="#{$svg-color}" d="m4 2v8h8l-2.4-2.4c1.6-1 3.5-1.6 5.4-1.6 3.1 0 7.1 1.5 9 4h4c-2.3-4.9-7.6-8-13-8-3 0-5.9 1-8.3 2.7zm0 20c2.3 4.9 7.6 8 13 8 3 0 5.9-1 8.3-2.7l2.7 2.7v-8h-8l2.4 2.4c-1.6 1-3.5 1.6-5.4 1.6-3.1 0-7.1-1.5-9-4z"/></svg>',
+  's_rights': '<path fill="#{$svg-color}" d="m2 6v20h28v-20zm8 4c1 0 3 .5 3 3s-.2 3.4-1 4c-.5.5 0 1 0 1s4 1.4 4 4h-12c0-2.6 4-4 4-4s.5-.5 0-1c-.8-.6-1-1.5-1-4s2-3 3-3zm8 0h10v2h-10zm0 4h8v2h-8zm0 4h10v2h-10z"/></svg>',
+  's_status': '<path fill="#{$svg-color}" d="m2 2v8h28v-8zm2 2h2v4h-2zm4 0h2v4h-2zm4 0h2v4h-2zm4 0h2v4h-2zm11 0c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zm-25 8v8h28v-8zm2 2h2v4h-2zm4 0h2v4h-2zm4 0h2v4h-2zm4 0h2v4h-2zm11 0c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zm-25 8v8h28v-8zm2 2h2v4h-2zm4 0h2v4h-2zm4 0h2v4h-2zm4 0h2v4h-2zm11 0c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1z"/></svg>',
+  's_success': '<path fill="#{success-color}" d="m4 17 9 9 15-16-4-4-11 12-5-5z"/></svg>',
+  's_tbl': '<path fill="#{$svg-color}" d="m2 2v28h28v-28zm2 6h24v20h-24zm2 2v4h4v-4zm6 0v4h6v-4zm8 0v4h6v-4zm-14 6v4h4v-4zm6 0v4h6v-4zm8 0v4h6v-4zm-14 6v4h4v-4zm6 0v4h6v-4zm8 0v4h6v-4z"/></svg>',
+  's_theme': '<path fill="#{$svg-color}" d="m16 4c-7.7 0-14 5.8-14 13 0 4.5 2.5 8.6 6.6 11h2.7c-.8-1.1-1.3-2.4-1.3-3.8 0-3.4 2.7-6.2 6-6.2s6 2.8 6 6.2c0 1.4-.5 2.7-1.3 3.8h2.7c4.1-2.4 6.6-6.5 6.6-11 0-7.2-6.3-13-14-13zm0 2c2.2 0 4 1.3 4 3s-1.8 3-4 3-4-1.3-4-3 1.8-3 4-3zm-7.5 4c1.4 0 2.5 1.1 2.5 2.5s-1.1 2.5-2.5 2.5-2.5-1.1-2.5-2.5 1.1-2.5 2.5-2.5zm15 0c1.4 0 2.5 1.1 2.5 2.5s-1.1 2.5-2.5 2.5-2.5-1.1-2.5-2.5 1.1-2.5 2.5-2.5zm-17.5 6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm20 0c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"/></svg>',
+  's_top': '<path fill="#{$svg-color}" d="m8 24h1l7-7 7 7h1v-5l-7-7h7v-4h-16v4h7l-7 7z"/></svg>',
+  's_unlink': '<path fill="#{$svg-color}" d="m10 2v6h2v-6zm13 0c-.7 0-1.5.5-2 1l-5 5h4l3-3 4 4-11 11h4l9-9c.5-.5 1-1.3 1-2s-.5-1.5-1-2l-4-4c-.5-.5-1.3-1-2-1zm-21 8v2h6v-2zm10 2-9 9c-.5.5-1 1.3-1 2s.5 1.5 1 2l4 4c.5.5 1.3 1 2 1s1.5-.5 2-1l5-5h-4l-3 3-4-4 11-11zm12 8v2h6v-2zm-4 4v6h2v-6z"/></svg>',
+  's_vars': '<path fill="#{$svg-color}" d="m16 2c-6.6 0-12 2.2-12 5v4c0 2.8 5.4 5 12 5s12-2.2 12-5v-4c0-2.8-5.4-5-12-5zm0 2c5 0 9 1.6 9 3.5s-4 3.5-9 3.5-9-1.6-9-3.5 4-3.5 9-3.5zm-12 9v5c0 2.8 5.4 5 12 5v-5c-6.6 0-12-2.2-12-5zm24 0c0 1.1-.8 2.1-2.4 3h2.4zm-24 7v5c0 2.8 5.4 5 12 5v-5c-6.6 0-12-2.2-12-5z"/><path fill="#{$svg-color}" d="m18 18v14h14v-14zm2 2h10v10h-10zm2 2v2h6v-2zm0 4v2h6v-2z"/></svg>',
+  'show': '<path fill="#{$svg-color}" d="m16 8c-6.8 0-12.6 3.3-14 8 1.4 4.7 7.2 8 14 8s12.6-3.3 14-8c-1.4-4.7-7.2-8-14-8zm-2 2a2 2 0 0 1 2 2 2 2 0 0 1 -2 2 2 2 0 0 1 -2-2 2 2 0 0 1 2-2zm7 .7c3.4.9 6 2.9 7 5.3-1.4 3.5-6.4 6-12 6s-1.6-2.5-12-6c1-2.4 3.6-4.3 7-5.3a6 6 0 0 0 -1 3.3 6 6 0 0 0 6 6 6 6 0 0 0 6-6 6 6 0 0 0 -1-3.3z"/></svg>',
+  'window-new': '<path fill="#{$svg-color}" d="m6 10v20h24v-20zm16 2h2v2h-2zm4 0h2v2h-2zm-18 4h20v12h-20z"/><path fill="#{$svg-color}" d="m2 2v20h2v-14h22v-6zm16 2h2v2h-2zm4 0h2v2h-2z"/></svg>'
+);
+
+// Icons
+.icon {
+  margin: 0;
+  margin-left: .3em;
+  padding: 0 !important;
+  width: 16px;
+  height: 16px;
+}
+
+.icon_fulltext {
+  width: 50px;
+  height: 19px;
+}
+
+// SVGs
+@each $name, $svg in $icons {
+  .ic_#{$name} {
+    background-image: escape-svg(url($data-svg-prefix + $svg));
+  }
+}
+
+// Extended SVGs
+.ic_b_column_add {
+  @extend .ic_centralColumns_add;
+}
+
+.ic_s_db {
+  @extend .ic_database;
+}
+
+.ic_b_saveimage {
+  @extend .ic_b_save;
+}
+
+.ic_b_sbrowse {
+  @extend .ic_b_browse;
+}
+
+.ic_b_tblexport {
+  @extend .ic_b_export;
+}
+
+.ic_b_tblimport {
+  @extend .ic_b_import;
+}
+
+.ic_b_usrcheck {
+  @extend .ic_b_usredit;
+}
+
+// PNGs
+.ic_ajax_clock_small {
+  background-image: url('../img/ajax_clock_small.gif');
+}
+
+.ic_asc_order {
+  background-image: url('../img/asc_order.png');
+}
+
+.ic_b_calendar {
+  background-image: url('../img/b_calendar.png');
+}
+
+.ic_b_dbstatistics {
+  background-image: url('../img/b_dbstatistics.png');
+}
+
+.ic_b_docsql {
+  background-image: url('../img/b_docsql.png');
+}
+
+.ic_b_firstpage {
+  background-image: url('../img/b_firstpage.png');
+}
+
+.ic_b_inline_edit {
+  background-image: url('../img/b_inline_edit.png');
+}
+
+.ic_b_lastpage {
+  background-image: url('../img/b_lastpage.png');
+}
+
+.ic_b_newtbl {
+  background-image: url('../img/b_newtbl.png');
+}
+
+.ic_b_nextpage {
+  background-image: url('../img/b_nextpage.png');
+}
+
+.ic_b_pdfdoc {
+  background-image: url('../img/b_pdfdoc.png');
+}
+
+.ic_b_prevpage {
+  background-image: url('../img/b_prevpage.png');
+}
+
+.ic_b_sdb {
+  background-image: url('../img/b_sdb.png');
+  width: 10px;
+  height: 10px;
+}
+
+.ic_b_snewtbl {
+  background-image: url('../img/b_snewtbl.png');
+}
+
+.ic_b_sqldoc {
+  background-image: url('../img/b_sqldoc.png');
+}
+
+.ic_b_tipp {
+  background-image: url('../img/b_tipp.png');
+}
+
+.ic_b_undo {
+  background-image: url('../img/b_undo.png');
+}
+
+.ic_b_view {
+  background-image: url('../img/b_view.png');
+}
+
+.ic_b_left {
+  background-image: url('../img/b_left.png');
+}
+
+.ic_b_right {
+  background-image: url('../img/b_right.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_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_routine_add {
+  background-image: url('../img/bd_routine_add.png');
+}
+
+.ic_bd_sbrowse {
+  background-image: url('../img/bd_sbrowse.png');
+}
+
+.ic_bd_spatial {
+  background-image: url('../img/bd_spatial.png');
+}
+
+.ic_bd_unique {
+  background-image: url('../img/bd_unique.png');
+}
+
+.ic_col_drop {
+  background-image: url('../img/col_drop.png');
+}
+
+.ic_eye_grey {
+  background-image: url('../img/eye_grey.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_php_sym {
+  background-image: url('../img/php_sym.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_info {
+  background-image: url('../img/s_info.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_sortable {
+  background-image: url('../img/s_sortable.png');
+}
+
+.ic_s_sync {
+  background-image: url('../img/s_sync.png');
+}
+
+.ic_s_views {
+  background-image: url('../img/s_views.png');
+}
+
+.ic_s_partialtext {
+  background-image: url('../img/s_partialtext.png');
+}
+
+.ic_s_fulltext {
+  background-image: url('../img/s_fulltext.png');
+}
--- a/lamp/themes/boodark/scss/_jqplot.scss
+++ b/lamp/themes/boodark/scss/_jqplot.scss
@@ -0,0 +1,310 @@
+// 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: $body-color;
+  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
+  font-size: 1em;
+}
+
+// rules applied to all axes
+.jqplot-axis {
+  font-size: .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: .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: $body-bg;
+    border: 1px solid $border-color;
+    position: absolute;
+    font-size: .75em;
+    color: #999;
+  }
+
+  &.jqplot-cursor-legend {
+    background-color: $body-bg;
+    border: 1px solid $border-color;
+    position: absolute;
+    font-size: .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 $border-color;
+    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: .5em;
+  font-size: 1.2em;
+}
+
+table.jqplot-cursor-tooltip {
+  border: 1px solid #ccc;
+  font-size: .75em;
+}
+
+.jqplot-cursor-tooltip,
+.jqplot-highlighter-tooltip,
+.jqplot-canvasOverlay-tooltip {
+  border: 1px solid $border-color;
+  font-size: 1em;
+  white-space: nowrap;
+  background: $body-bg;
+  padding: 1px;
+  color: #999;
+}
+
+.jqplot-point-label {
+  font-size: .75em;
+  z-index: 2;
+}
+
+td.jqplot-cursor-legend-swatch {
+  vertical-align: middle;
+  text-align: center;
+}
+
+div.jqplot-cursor-legend-swatch {
+  width: 1.2em;
+  height: .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-table-legend-swatch {
+    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-bubble-label {
+    font-size: .8em;
+    padding-left: 2px;
+    padding-right: 2px;
+    color: #333;
+
+    &.jqplot-bubble-label-highlight {
+      background: rgba(230, 230, 230, .7);
+    }
+  }
+
+  &.jqplot-noData-container {
+    text-align: center;
+    background-color: rgba(245, 245, 245, .3);
+  }
+}
+
+canvas {
+  border: none;
+}
+
+#serverstatusquerieschart.jqplot-series-canvas,
+#profilingchart.jqplot-series-canvas,
+.jqplot-series-shadowCanvas {
+  background-color: #1b1e21 !important;
+  border: 1px solid $border-color !important
+}
+
+#serverstatusquerieschart,
+#profilingchart {
+  .jqplot-grid-canvas {
+    border: 1px solid transparent;
+  }
+}
+
+.jqplot-pie-series {
+  color: #1a1a1a;
+}
--- a/lamp/themes/boodark/scss/_modal.scss
+++ b/lamp/themes/boodark/scss/_modal.scss
@@ -0,0 +1,6 @@
+// Modal
+
+.modal-header,
+.modal-footer {
+  background-image: linear-gradient($pma-component-bg, $body-bg);
+}
--- a/lamp/themes/boodark/scss/_navigation.scss
+++ b/lamp/themes/boodark/scss/_navigation.scss
@@ -0,0 +1,475 @@
+// Navigation
+
+#pma_navigation {
+  width: $navigation-width;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  background-color: $navigation-bg;
+  z-index: 800;
+
+  ul {
+    margin: 0;
+  }
+
+  form {
+    margin: 0;
+    padding: 0;
+    display: inline;
+  }
+
+  select {
+    &#select_server,
+    &#lightm_db {
+      width: 100%;
+    }
+
+    &.pageselector {
+      // see forms.scs
+    }
+  }
+
+  div {
+    &.pageselector {
+      text-align: center;
+      margin: 0;
+      margin-left: .75em;
+      border-left: 1px solid $border-color;
+    }
+  }
+
+  #pmalogo,
+  #serverChoice,
+  #navipanellinks,
+  #recentTableList,
+  #favoriteTableList,
+  #databaseList,
+  div.pageselector.dbselector {
+    text-align: center;
+    padding: 8px 10px;
+    border: 0;
+  }
+
+  #pmalogo {
+    background-color: $navigation-bg;
+    padding: 6px 10px;
+    height: 40px;
+  }
+
+  #navipanellinks {
+    padding: 8px 10px;
+    background-color: darken($navigation-bg, 5%);
+
+    a {
+      display: inline-block;
+      padding: 8px;
+    }
+  }
+
+  #navipanellinks .icon {
+    margin: 0;
+  }
+
+  #recentTable,
+  #favoriteTable {
+    width: 200px;
+  }
+}
+
+select {
+  &.pageselector {
+    display: inline-block;
+    width: auto;
+    margin: 5px;
+  }
+}
+
+#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: .3em auto 0;
+  }
+}
+
+#pma_navigation_select_database {
+  text-align: left;
+  padding: 0 0 0;
+  border: 0;
+  margin: 0;
+}
+
+#pma_navigation_db_select {
+  margin-top: .5em;
+  margin-left: .75em;
+
+  select {
+    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: $navigation-color;
+  height: 74%;
+  position: relative;
+
+  a {
+    color: $link-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;
+    white-space: nowrap;
+    clear: both;
+    min-height: 16px;
+
+    &.activePointer,
+    &.selected {
+      color: $black;
+      background-color: $navigation-selected-bg;
+    }
+
+    .dbItemControls {
+      padding-right: 4px;
+      float: right;
+    }
+
+    .navItemControls {
+      display: none;
+      padding-right: 4px;
+      float: right;
+    }
+
+    &.activePointer .navItemControls {
+      display: block;
+      opacity: .5;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+
+    &.fast_filter {
+      white-space: nowrap;
+      clear: both;
+      min-height: 16px;
+    }
+
+    &.last > ul {
+      background: none;
+    }
+
+    > {
+      a,
+      i {
+        line-height: 1.5em;
+        height: 1.5em;
+        padding-left: .3em;
+      }
+    }
+  }
+
+  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: .7em;
+        left: .75em;
+        z-index: 0;
+      }
+
+      // Top and right segments for the tree element connections
+      i {
+        display: block;
+        border-left: 1px solid $border-color;
+        border-bottom: 1px solid $border-color;
+        position: relative;
+        z-index: 0;
+
+        // Removes top segment
+        &.first {
+          border-left: 0;
+        }
+      }
+
+      // Bottom segment for the tree element connections
+      b {
+        display: block;
+        height: .75em;
+        bottom: 0;
+        left: .75em;
+        border-left: 1px solid $border-color;
+      }
+
+      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: -.6em;
+        left: 0;
+        margin-left: -7px;
+      }
+    }
+
+    &.throbber img {
+      top: 2px;
+      left: 2px;
+    }
+  }
+
+  .list_container {
+    border-left: 1px solid $border-color;
+    margin-left: .75em;
+    padding-left: .75em;
+
+    li.last.database {
+      // Revert the effect of the rule that is applied on all the tree
+      margin-bottom: 0 !important;
+    }
+  }
+
+  .last > .list_container {
+    border-left: 0 solid $border-color;
+  }
+}
+
+// Fast filter
+li.fast_filter {
+  padding-left: .75em;
+  margin-left: .75em;
+  padding-right: 35px;
+  border-left: 1px solid $border-color;
+  list-style: none;
+
+  input {
+    font-size: .7em;
+  }
+
+  .searchClauseClear {
+    font-weight: bold;
+    color: $danger;
+    font-size: .7em;
+    border-color: $input-border-color;
+  }
+
+  &.db_fast_filter {
+    border: 0;
+    margin-left: 0;
+  }
+}
+
+#navigation_controls_outer {
+  min-height: 24px !important;
+
+  &.activePointer {
+    background-color: transparent !important;
+  }
+}
+
+#navigation_controls {
+  float: right;
+  padding-right: 1.5rem;
+}
+
+// Resize handler
+#pma_navigation_resizer {
+  width: 1px !important;
+  height: 100%;
+  background-color: rgba($black, .125);
+  cursor: col-resize;
+  position: fixed;
+  top: 0;
+  left: 240px;
+  z-index: 801;
+
+  &:hover {
+    background-color: $navigation-resizer-hover-bg;
+  }
+}
+
+#pma_navigation_collapser {
+  width: 24px;
+  height: 40px;
+  line-height: 36px;
+  background: #222;
+  color: #555;
+  font-weight: bold;
+  position: fixed;
+  top: 0;
+  left: $navigation-width;
+  text-align: center;
+  cursor: pointer;
+  z-index: 800;
+  text-shadow: 0 1px 0 $white;
+  filter: dropshadow(color = $white, offx = 0, offy = 1);
+  border: 1px solid rgba($black, .125);
+}
+
+// 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: lighten($black, 20%);
+      }
+
+      ul {
+        display: block;
+      }
+    }
+
+    ul {
+      position: absolute;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+      overflow-y: auto;
+      list-style: none;
+      background: $navigation-bg;
+      border: 1px solid $navigation-border-color;
+      border-radius: .3em;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      box-shadow: 0 0 5px $navigation-shadow-color;
+      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: .2em .3em;
+
+      &.favorite_table_anchor {
+        clear: left;
+        float: left;
+        padding: .1em .3em 0;
+      }
+    }
+  }
+
+  .drop_button {
+    padding: .3em;
+    border: 1px solid $navigation-drop-button-bg;
+    border-radius: .3em;
+    background: $navigation-drop-button-bg;
+    color: $body-color;
+    cursor: pointer;
+  }
+}
--- a/lamp/themes/boodark/scss/_print.scss
+++ b/lamp/themes/boodark/scss/_print.scss
@@ -0,0 +1,285 @@
+// Print
+
+@media print {
+  .hide {
+    display: none;
+  }
+
+  // Standard CSS
+  body,
+  table,
+  th,
+  td {
+    color: $black;
+    background-color: $white;
+  }
+
+  // To remove link text decoration
+  a {
+    color: $black;
+  }
+  table a, table .btn-link {
+    color: $black !important;
+  }
+
+  // To remove any image borders
+  img {
+    border: 0;
+  }
+
+  // Table specific
+  table,
+  th,
+  td {
+    border: .1em solid $black;
+    background-color: $white;
+  }
+
+  .table > :not(caption) > * > * {
+    background-color: $pma-gray-100;
+  }
+
+  .table-striped > tbody > tr:nth-of-type(odd) > *,
+  .table-active {
+    --bs-table-accent-bg: $pma-gray-100;
+    color: $black;
+  }
+
+  table {
+    border-collapse: collapse;
+    border-spacing: .2em;
+  }
+
+  thead {
+    border-collapse: collapse;
+    border-spacing: .2em;
+    border: .1em solid $black;
+    font-weight: 900;
+  }
+
+  table tbody:first-of-type tr {
+    // odd items 1,3,5,7...
+    &:nth-child(odd) {
+      background: $white;
+
+      th {
+        background: $white;
+      }
+    }
+
+    // even items 2,4,6,8...
+    &:nth-child(even) {
+      background: $pma-gray-200;
+
+      th {
+        background: $pma-gray-200;
+      }
+    }
+  }
+
+  th,
+  td {
+    padding: .2em;
+  }
+
+  thead th {
+    font-weight: bold;
+    background-color: #e5e5e5;
+    border: .1em solid $black;
+  }
+
+  // Position the main content
+  #page_content {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 95%;
+    float: none;
+  }
+
+  // Print Styles
+  .card {
+    background-color: $pma-gray-100;
+  }
+  .card-header,
+  .card-footer {
+    background-color: $pma-gray-200;
+  }
+  .list-group-item {
+    color: $black;
+    background-color: $pma-gray-100;
+  }
+  .form-select, select:not(.form-select) {
+    color: $black;
+    background-color: $pma-gray-100;
+    background-image: none;
+  }
+  .form-select,
+  select {
+    option:checked {
+      color: $black;
+      background-color: $pma-gray-400;
+    }
+  }
+  .form-control {
+    color: $black;
+    background-color: $pma-gray-100;
+  }
+  .input-group-text {
+    color: $black;
+    background-color: $pma-gray-100;
+  }
+  input {
+    &[type=checkbox],
+    &[type=radio],
+    &[type=number] {
+      background-color: $pma-gray-100 !important;
+      border-color: $black !important;
+    }
+    &[type=number] {
+      color: $black !important;
+    }
+    &[type=checkbox],
+    &[type=radio] {
+      &:checked {
+        background-color: $black !important;
+        // border-color: $black !important;
+      }
+    }
+    &[type=text] {
+      color: $black !important;
+      background-color: $pma-gray-100 !important;
+    }
+  }
+  textarea {
+    color: $black;
+    background-color: $pma-gray-100;
+  }
+  .nav-link {
+    color: $black;
+  }
+  .pma-fieldset {
+    background-color: $pma-gray-200;
+
+    legend {
+      color: $black;
+      background-color: $pma-gray-400;
+    }
+
+    .pma-fieldset {
+      background-color: $pma-gray-300;
+    }
+  }
+  button.mult_submit, .checkall_box + label {
+    color: $black;
+  }
+  .form-text,
+  .config-form fieldset th small,
+  .config-form fieldset th .small,
+  .text-muted {
+    color: $pma-gray-600 !important;
+  }
+  .text-dark {
+    color: $pma-gray-100 !important;
+  }
+
+  // Buttons
+  .btn-outline-secondary {
+    color: $black;
+    border-color: $black;
+  }
+
+  // Alert
+  .alert {
+    display: none;
+  }
+
+  // CodeMirror
+  .CodeMirror {
+    background-color: $pma-gray-300;
+
+    &-gutters {
+      background-color: $pma-gray-500;
+    }
+  }
+  .cm-s-default {
+    .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; }
+  }
+
+  // Designer
+  #name-panel,
+  .side-menu {
+    background: $pma-gray-100;
+  }
+  canvas.designer {
+    background-color: $pma-gray-100 !important;
+  }
+
+  // Modal
+  .modal-content {
+    background-color: $pma-gray-100;
+  }
+  .modal-header,
+  .modal-footer {
+    background-image: linear-gradient($pma-gray-200, $pma-gray-300);
+  }
+
+  // Accordion
+  .accordion-item {
+    background-color: $pma-gray-100;
+  }
+  .accordion-button {
+    color: $black;
+    background-color: $pma-gray-300;
+  }
+  .accordion-button:not(.collapsed) {
+    color: $black;
+    background-color: $pma-gray-400;
+  }
+
+  .result_query .sqlOuter {
+    color: $black;
+    background-color: $pma-gray-200;
+  }
+
+  #serverstatusquerieschart.jqplot-series-canvas,
+  #profilingchart.jqplot-series-canvas,
+  .jqplot-series-shadowCanvas {
+    background-color: $pma-gray-100 !important;
+  }
+
+  table#chartGrid div.monitorChart {
+    color: $black;
+    background: $pma-gray-100;
+  }
+
+  // For hiding 'Open a New phpMyAdmin Window' button
+  // Hide extra menu on /table/structure
+  .cDrop,
+  .cEdit,
+  .cList,
+  .cCpy,
+  .cPointer {
+    display: none;
+  }
+
+  .column_attribute {
+    font-size: 100%;
+  }
+
+  .ui-widget-content {
+    color: $black;
+    background: none;
+    background-color: $pma-gray-100;
+  }
+}
--- a/lamp/themes/boodark/scss/_reboot.scss
+++ b/lamp/themes/boodark/scss/_reboot.scss
@@ -0,0 +1,13 @@
+// Reebot
+
+body {
+  accent-color: var(--bs-primary); // for checkboxes, radios, etc.
+  text-align: left;
+  scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg);
+}
+
+.text-dark {
+  --bs-text-opacity: 1;
+  --pma-dark-color: $pma-gray-400-rgb;
+  color: rgba(var(--pma-dark-color), var(--bs-text-opacity)) !important;
+}
--- a/lamp/themes/boodark/scss/_root.scss
+++ b/lamp/themes/boodark/scss/_root.scss
@@ -0,0 +1,9 @@
+// Root
+
+:root {
+  @media (prefers-color-scheme: dark) {
+    --scrollbar-bg: transparent;
+    --scrollbar-color: rgba(255, 255, 255, .25);
+    color-scheme: dark;
+  }
+}
--- a/lamp/themes/boodark/scss/_tables.scss
+++ b/lamp/themes/boodark/scss/_tables.scss
@@ -0,0 +1,13 @@
+// Tables
+
+.table {
+  a {
+    color: $pma-link-color;
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .table th.position-sticky {
+    top: 96px;
+  }
+}
--- a/lamp/themes/boodark/scss/_variables.scss
+++ b/lamp/themes/boodark/scss/_variables.scss
@@ -0,0 +1,196 @@
+// stylelint-disable scss/dollar-variable-colon-space-after
+// Variables
+// =============================================================================
+
+// PMA color system
+$white: #fff;
+$black: #000;
+$pma-gray-100: #f8f9fa;
+$pma-gray-200: #e9ecef;
+$pma-gray-300: #dee2e6;
+$pma-gray-400: #ced4da;
+$pma-gray-500: #adb5bd;
+$pma-gray-600: #6c757d;
+$pma-gray-700: #495057;
+$pma-gray-800: #343a40;
+$pma-gray-900: #212529;
+$pma-gray-100-rgb: 248, 249, 250;
+$pma-gray-200-rgb: 233, 236, 239;
+$pma-gray-300-rgb: 222, 226, 230;
+$pma-gray-400-rgb: 206, 212, 218;
+$pma-gray-500-rgb: 173, 181, 189;
+$pma-gray-600-rgb: 108, 117, 125;
+$pma-gray-700-rgb: 73, 80, 87;
+$pma-gray-800-rgb: 52, 58, 64;
+$pma-gray-900-rgb: 33, 37, 41;
+$pma-blue:    #0d6efd;
+$pma-indigo:  #6610f2;
+$pma-purple:  #6f42c1;
+$pma-pink:    #d63384;
+$pma-red:     #dc3545;
+$pma-orange:  #fd7e14;
+// $pma-yellow:  #ffc107;
+// $pma-green:   #198754;
+// $pma-teal:    #20c997;
+$pma-cyan:    #0dcaf0;
+
+// PMA Base Style
+$pma-body-color:              $white;
+$pma-body-bg:                 $pma-gray-900;
+$pma-component-bg:            $pma-gray-800;
+$pma-table-bg:                $pma-gray-700;
+$pma-selected-bg:             $pma-gray-700;
+$pma-fieldset-bg:             $pma-gray-600;
+$pma-border-color:            $pma-gray-600;
+$pma-disable-color:           $pma-gray-500;
+$pma-fieldset-color:          $pma-gray-300;
+$pma-cond-border-color:       $black;
+$pma-button-color:            $pma-cyan;
+$pma-link-color:              $pma-cyan;
+$pma-link-hover-color:        $pma-red;
+$pma-custom-color:            $pma-orange;
+
+// Bootstrap variables
+// -----------------------------------------------------------------------------
+// Color system
+$secondary:                   $pma-gray-700;
+$light:                       $pma-gray-800;
+// Options
+// Gradient
+// Spacing
+// Position
+// Body
+$body-color:                  $pma-body-color;
+$body-bg:                     $pma-body-bg;
+// Utilities maps
+// Links
+$link-color:                  $pma-body-color;
+// Paragraphs
+// Grid breakpoints
+// Grid containers
+// Grid columns
+// Container padding
+// Components
+$border-color:                $pma-border-color;
+// Typography
+$text-muted:                  $pma-gray-400;
+// Tables
+$table-color:                 $pma-body-color;
+$table-bg:                    $pma-component-bg;
+$table-accent-bg:             transparent;
+$table-striped-color:         $table-color;
+$table-striped-bg:            rgba($pma-body-bg, .6);
+$table-active-color:          $table-color;
+$table-active-bg:             rgba($pma-body-bg, .7);
+$table-hover-color:           $table-color;
+$table-hover-bg:              rgba($pma-body-bg, .8);
+$table-border-color:          $border-color;
+$table-group-separator-color: $pma-border-color;
+// Buttons + Forms
+// Buttons
+// Forms
+$input-bg:                    darken($pma-component-bg, 2.5%);
+$input-disabled-bg:           $pma-gray-600;
+$input-border-color:          $pma-body-bg;
+$input-placeholder-color:     $pma-gray-400;
+$input-group-addon-bg:        $pma-component-bg;
+$form-check-input-border:     1px solid rgba($pma-body-color, .4);
+$form-select-indicator-color: $pma-body-color;
+$form-switch-color:           rgba($pma-body-color, .75);
+// Form validation
+// Z-index master list
+// Navs
+$nav-tabs-link-active-color:  $pma-gray-200;
+// Navbar
+// Dropdowns
+$dropdown-color:              $pma-body-color;
+$dropdown-bg:                 $pma-body-bg;
+$dropdown-link-color:         $dropdown-color;
+$dropdown-link-hover-color:   $pma-body-color;
+$dropdown-link-hover-bg:      rgba($pma-body-color, .15);
+// Pagination
+$pagination-bg:                    $pma-body-bg;
+$pagination-border-color:          $pma-border-color;
+$pagination-focus-bg:              $pma-body-bg;
+$pagination-hover-color:           $white;
+$pagination-hover-bg:              $pma-blue;
+$pagination-hover-border-color:    $pagination-hover-bg;
+$pagination-active-color:          $white;
+$pagination-active-bg:             $pma-blue;
+$pagination-active-border-color:   $pagination-active-bg;
+$pagination-disabled-color:        $pma-disable-color;
+$pagination-disabled-bg:           $pma-component-bg;
+$pagination-disabled-border-color: $pma-border-color;
+// Placeholders
+// Cards
+$card-border-color:           rgba($pma-body-bg, .5);
+$card-cap-bg:                 rgba($pma-body-bg, .5);
+$card-bg:                     $pma-component-bg;
+// Accordion
+$accordion-bg:                  $pma-component-bg;
+$accordion-button-bg:           darken($pma-component-bg, 2.5%);
+$accordion-button-active-bg:    darken($pma-component-bg, 3.5%);
+$accordion-button-active-color: $pma-body-color;
+// Tooltips
+// Popovers
+// Toasts
+// Badges
+// Modals
+$modal-content-bg:            $pma-gray-700;
+// Alerts
+// Progress bars
+// List group
+$list-group-color:            $pma-body-color;
+$list-group-bg:               $pma-component-bg;
+$list-group-border-color:     rgba($black, .25);
+// Image thumbnails
+// Figures
+// Breadcrumbs
+// Carousel
+// Spinners
+// Close
+$btn-close-color:             $pma-body-color;
+// Offcanvas
+// Code
+
+// PMA variables
+// -----------------------------------------------------------------------------
+
+// Common
+$pma-ajax-bg:                 mix(black, $pma-orange, 80%);
+$pma-ajax-border-color:       #e2b709;
+$pma-ajax-shadow:             #888;
+$pma-confirmation-color:      $black;
+$pma-confirmation-bg:         $pma-pink;
+$selflink-border-color:       $pma-border-color;
+
+// Navigation
+$navigation-width:            240px;
+$navigation-color:            $pma-body-color;
+$navigation-bg:               $pma-component-bg;
+$navigation-selected-bg:      $pma-selected-bg;
+$navigation-border-color:     $pma-border-color;
+$navigation-shadow-color:     $pma-border-color;
+$navigation-drop-button-bg:   $pma-border-color;
+$navigation-resizer-hover-bg: $pma-button-color;
+
+// Breadcrumbs
+$breadcrumb-navbar-padding-y:     .5rem;
+$breadcrumb-navbar-padding-x:     1.8rem;
+$breadcrumb-navbar-margin-bottom: 0;
+$breadcrumb-navbar-bg:            $pma-component-bg;
+
+// Buttons
+$btn-outline-secondary:       $pma-gray-400;
+
+// Console
+$console-color:               $pma-body-color;
+$console-toolbar-bg:          $pma-component-bg;
+$console-content-bg:          $pma-body-bg;
+$console-message-bg:          $pma-component-bg;
+$console-message-text-bg:     $pma-gray-700;
+
+// CodeMirror
+$codemirror-bg:               $pma-component-bg;
+$codemirror-color:            $pma-body-color;
+$codemirror-gutters:          $pma-gray-700;
--- a/lamp/themes/boodark/scss/theme.scss
+++ b/lamp/themes/boodark/scss/theme.scss
@@ -0,0 +1,32 @@
+// Theme: boodark
+
+// 1. Include any default variable overrides here
+@import "variables";
+
+// 2. Include Bootstrap
+@import "bootstrap";
+
+// 3. Include "phpMyAdmin" custom code
+@import "root";
+@import "tables";
+@import "forms";
+@import "common";
+@import "enum-editor";
+@import "gis";
+@import "navigation";
+@import "designer";
+@import "codemirror";
+@import "jqplot";
+@import "icons";
+@import "reboot";
+@import "buttons";
+// @import "nav";
+// @import "navbar";
+// @import "card";
+@import "breadcrumb";
+// @import "pagination";
+@import "alert";
+// @import "list-group";
+@import "modal";
+@import "console";
+@import "print";