Merge pull request #102 from adorade/boodark-1.1.0

Update bookdark to 1.1.0
phpmyadmin · Jul 13, 2023 · d882f60 · d882f60
2 parents 7d608b5 + cfec8da
commit d882f60
Show file tree

Hide file tree

Showing 25 changed files with 214 additions and 32 deletions.
diff --git a/boodark/README.md b/boodark/README.md
@@ -1,11 +1,11 @@
-# BooDark
+# BooDark v1.1.0
 
 ![Screenshot](screen.png)
 
 Bootstrap Dark theme for phpMyAdmin
 
 - Supported versions: 5.2
-- Bootstrap v5.1.3
+- Bootstrap v5.2.3
 
 ## Changes
 
@@ -16,7 +16,49 @@ Bootstrap Dark theme for phpMyAdmin
 - Designer adjusted for dark theme
 - Console adjusted for dark theme
 - Inline SVG using `escape-svg` function
+- Color Schemes: `cyan` (main), `teal`, `nord` and `orange`
+
+## Color Schemes
+
+BooDark has several color schemes: `cyan` (main), `teal`, `nord` and `orange`.  
+**There is currently no way to change the color scheme in GUI.**
+
+**How to change color scheme?**
+
+Option 1. Edit `scss/_variables.scss`
+
+```scss
+// Theme color scheme
+// Values: "cyan", "teal", "nord", "orange"
+// Default: "cyan"
+// Set this value for the desired color scheme
+
+// --- Change cyan
+$color-scheme: cyan !default;
+
+// --- to nord
+$color-scheme: nord !default;
+
+// --- then run `yarn run build`
+```
+
+Option 2. Replace the CSS files. For example:
+
+```sh
+mv css/theme.css css/theme-cyan.css
+mv css/theme-nord.css css/theme.css
+```
 
 ## Bugs and feature requests
 
-Have a bug or a feature request? Please search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/adorade/boodark/issues/new).
+Have a bug or a feature request? Please search for existing and closed issues.
+If your problem or idea is not addressed yet, [please open a new issue](https://github.com/adorade/boodark/issues/new).
+
+## License
+
+BooDark Theme is licensed under MIT.  
+Copyright (c) 2022-23 [Adorade](https://github.com/adorade)
+
+## Thanks for use
+
+Hopefully, this theme is useful to you.
diff --git a/boodark/css/theme-nord.css b/boodark/css/theme-nord.css
diff --git a/boodark/css/theme-nord.css.map b/boodark/css/theme-nord.css.map
diff --git a/boodark/css/theme-orange.css b/boodark/css/theme-orange.css
diff --git a/boodark/css/theme-orange.css.map b/boodark/css/theme-orange.css.map
diff --git a/boodark/css/theme-teal.css b/boodark/css/theme-teal.css
diff --git a/boodark/css/theme-teal.css.map b/boodark/css/theme-teal.css.map
diff --git a/boodark/css/theme.css b/boodark/css/theme.css
diff --git a/boodark/css/theme.css.map b/boodark/css/theme.css.map
diff --git a/boodark/css/theme.rtl.css b/boodark/css/theme.rtl.css
diff --git a/boodark/screen.png b/boodark/screen.png
diff --git a/boodark/scss/_bootstrap.scss b/boodark/scss/_bootstrap.scss
@@ -8,6 +8,7 @@
 
 // 3. Include remainder of required Bootstrap stylesheets
 @import "../../../node_modules/bootstrap/scss/variables";
+@import "../../../node_modules/bootstrap/scss/maps";
 @import "../../../node_modules/bootstrap/scss/mixins";
 @import "../../../node_modules/bootstrap/scss/root";
 

diff --git a/boodark/scss/_common.scss b/boodark/scss/_common.scss
@@ -274,6 +274,10 @@ td .icon {
 .confirmation {
   color: $pma-confirmation-color;
   background-color: $pma-confirmation-bg;
+
+  code {
+    color: $pma-confirmation-color;
+  }
 }
 // end messageboxes
 
@@ -284,7 +288,7 @@ td .icon {
 .tblcomment {
   font-size: 70%;
   font-weight: normal;
-  color: #009;
+  color: $text-muted;
 }
 
 .tblHeaders {
@@ -464,7 +468,7 @@ div#tablestatistics table {
 
   .dropdown-toggle {
     &::after {
-      color: $pma-cyan;
+      color: $pma-link-color;
     }
   }
 }
@@ -1469,7 +1473,7 @@ input#auto_increment_opt {
       background: none;
 
       &:hover {
-        color: $pma-cyan;
+        color: $pma-link-color;
         cursor: pointer;
       }
     }
@@ -1709,7 +1713,7 @@ table.show_create {
   background: rgba($pma-body-bg, .8);
   height: 100%;
   z-index: 999;
-  color: $pma-cyan;
+  color: $pma-link-color;
   font-size: 30pt;
   text-align: center;
   padding-top: 20%;

diff --git a/boodark/scss/_forms.scss b/boodark/scss/_forms.scss
@@ -45,8 +45,8 @@ input {
     // }
   }
 
-  &[type=checkbox]:not(.form-check-input:not(.form-check-input)),
-  &[type=radio]:not(.form-check-input:not(.form-check-input)) {
+  &[type=checkbox]:not(.form-check-input),
+  &[type=radio]:not(.form-check-input) {
     width: $form-check-input-width;
     height: $form-check-input-width;
     margin-top: ($line-height-base - $form-check-input-width) * .75;
@@ -105,15 +105,53 @@ input {
     }
   }
 
-  &[type=file]::file-selector-button {
-    @extend .btn-dark;
-    border-width: 1px;
-    border-style: solid;
+  &[type=file] {
+    // display: block;
+    // width: 100%;
+    display: inline-block;
+    width: auto;
+    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; // Fix appearance for date inputs in Safari
+
+    // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
+    @include border-radius($input-border-radius, 0);
+
+    @include box-shadow($input-box-shadow);
+    @include transition($input-transition);
+
+    &::file-selector-button {
+      padding: $input-padding-y $input-padding-x;
+      margin: (-$input-padding-y) (-$input-padding-x);
+      margin-inline-end: $input-padding-x;
+      color: $form-file-button-color;
+      @include gradient-bg($form-file-button-bg);
+      pointer-events: none;
+      border-color: inherit;
+      border-style: solid;
+      border-width: 0;
+      border-inline-end-width: $input-border-width;
+      border-radius: 0;
+      @include transition($btn-transition);
+    }
   }
 
   &:hover:not(:disabled):not([readonly])::file-selector-button {
-    background-color: $pma-blue !important;
-    border-color: $pma-blue !important;
+    background-color: $form-file-button-hover-bg;
+    color: color-contrast($form-file-button-hover-bg);
+  }
+}
+
+.form-control {
+  &:hover:not(:disabled):not([readonly])::file-selector-button {
+    color: color-contrast($form-file-button-hover-bg);
   }
 }
 

diff --git a/boodark/scss/_icons.scss b/boodark/scss/_icons.scss
@@ -3,7 +3,7 @@
 // Icons
 
 // Icon Colors
-$svg-color:     $pma-link-color;          // #0dcaf0, $pma-cyan
+$svg-color:     $pma-link-color;          // #0dcaf0, default color scheme: cyan
 $disable-color: $pma-disable-color;       // #adb5bd
 $ajax-color:    $pma-body-color;          // #fff
 $green-color:   $pma-green;               // #198754

diff --git a/boodark/scss/_list-group.scss b/boodark/scss/_list-group.scss
@@ -0,0 +1,14 @@
+// List group
+
+#li_select_theme {
+  form::after {
+    padding-top: 0.325rem;
+    padding-left: calc(var(--bs-gutter-x) * .5);
+    content: "Scheme: #{$color-scheme} / Version: #{$pma-theme-version}";
+    color: $pma-link-color;
+
+    @include media-breakpoint-up(lg) {
+      padding-top: 0;
+    }
+  }
+}
diff --git a/boodark/scss/_nav.scss b/boodark/scss/_nav.scss
@@ -7,3 +7,11 @@
 .nav-tabs {
   background-color: $nav-tabs-bg;
 }
+
+.nav-pills {
+  .nav-link.active {
+    .icon {
+      filter: brightness(0) invert(0);
+    }
+  }
+}
diff --git a/boodark/scss/_navbar.scss b/boodark/scss/_navbar.scss
@@ -13,8 +13,23 @@
 .navbar-light {
   .navbar-nav {
     .nav-item.active {
-      color: $component-active-color;
-      background-color: $component-active-bg;
+      @include button-variant($component-active-bg, $component-active-bg);
+      color: var(--bs-btn-color);
+      background-color: var(--bs-btn-bg);
+      border-top-left-radius: $nav-item-border-radius;
+      border-top-right-radius: $nav-item-border-radius;
+
+      &:first-child {
+        border-top-left-radius: 0;
+      }
+
+      .nav-link {
+        color: var(--bs-btn-color);
+      }
+
+      .icon {
+        filter: brightness(0) invert(0);
+      }
     }
   }
 }

diff --git a/boodark/scss/_navigation.scss b/boodark/scss/_navigation.scss
@@ -174,7 +174,7 @@ select {
 
     &.activePointer,
     &.selected {
-      color: $black;
+      color: $pma-body-color;
       background-color: $navigation-selected-bg;
     }
 

diff --git a/boodark/scss/_variables.scss b/boodark/scss/_variables.scss
@@ -2,6 +2,9 @@
 // Variables
 // =============================================================================
 
+// Theme version
+$pma-theme-version: "1.1.0";
+
 // PMA color system
 // -----------------------------------------------------------------------------
 $white:             #fff;
@@ -34,6 +37,7 @@ $pma-yellow:        #ffc107;
 $pma-green:         #198754;
 $pma-teal:          #20c997;
 $pma-cyan:          #0dcaf0;
+$pma-nord:          #88c0d0;
 
 // Theme Colors
 $pma-theme-colors: (
@@ -57,17 +61,34 @@ $pma-theme-colors: (
   "yellow":   $pma-yellow,
   "green":    $pma-green,
   "teal":     $pma-teal,
-  "cyan":     $pma-cyan
+  "cyan":     $pma-cyan,
+  "nord":     $pma-nord
 );
 
+// Theme color scheme
+// Values: "cyan", "teal", "nord", "orange"
+// Default: "cyan"
+// Set this value for the desired color scheme
+$color-scheme: cyan !default;
+$pma-color-scheme: $pma-cyan;
+
+@if $color-scheme == teal {
+  $pma-color-scheme: $pma-teal;
+} @else if $color-scheme == nord {
+  $pma-color-scheme: $pma-nord;
+} @else if $color-scheme == orange {
+  $pma-color-scheme: $pma-orange;
+}
+
 // PMA Base Style
 // -----------------------------------------------------------------------------
+$pma-primary:                 $pma-color-scheme;
 $pma-body-color:              $white;
 $pma-body-bg:                 $pma-gray-900;
 $pma-component-bg:            $pma-gray-800;
 $pma-component-hover-bg:      $pma-gray-600;
-$pma-component-active-color:  $white;
-$pma-component-active-bg:     $pma-blue;
+$pma-component-active-color:  $black;
+$pma-component-active-bg:     $pma-primary;
 $pma-table-bg:                $pma-gray-700;
 $pma-form-border-color:       $pma-gray-900;
 $pma-selected-bg:             $pma-gray-700;
@@ -76,14 +97,15 @@ $pma-fieldset-bg:             $pma-gray-600;
 $pma-border-color:            $pma-gray-600;
 $pma-disable-color:           $pma-gray-500;
 $pma-cond-border-color:       $black;
-$pma-button-color:            $pma-cyan;
-$pma-link-color:              $pma-cyan;
+$pma-button-color:            $pma-primary;
+$pma-link-color:              $pma-primary;
 $pma-link-hover-color:        $pma-red;
 $pma-custom-color:            $pma-orange;
 
 // Bootstrap variables
 // -----------------------------------------------------------------------------
 // Color system
+$primary:                     $pma-primary;
 $secondary:                   $pma-gray-700;
 $light:                       $pma-gray-800;
 // Options
@@ -128,17 +150,23 @@ $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-file-button-color:      color-contrast($pma-gray-900);
+$form-file-button-bg:         $pma-gray-900;
+$form-file-button-hover-bg:   $pma-primary;
 // Form validation
 // Z-index master list
-// Navs
+// Nav Tabs
 $nav-tabs-bg:                       rgba($pma-body-bg, .5);
 $nav-tabs-border-color:             rgba($pma-body-bg, .5);
 $nav-tabs-border-width:             0;
 $nav-tabs-link-hover-border-color:  transparent;
 $nav-tabs-link-active-color:        $pma-component-active-color;
 $nav-tabs-link-active-bg:           $pma-component-active-bg;
 $nav-tabs-link-active-border-color: rgba($pma-body-bg, .5);
+// Nav Pills
 $nav-pills-bg:                      $pma-body-bg;
+$nav-pills-link-active-color:       $pma-component-active-color;
+$nav-pills-link-active-bg:          $pma-component-active-bg;
 // Navbar
 $navbar-light-color:                $white;
 $navbar-light-hover-color:          rgba($white, .65);
@@ -158,6 +186,7 @@ $navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://w
 $navbar-dark-toggler-border-color:  rgba($white, .1);
 $navbar-dark-brand-color:           $navbar-dark-active-color;
 $navbar-dark-brand-hover-color:     $navbar-dark-active-color;
+$nav-item-border-radius:            .375rem;
 // Dropdowns
 $dropdown-color:              $pma-body-color;
 $dropdown-bg:                 $pma-body-bg;
@@ -187,6 +216,7 @@ $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;
+$accordion-border-color:        $pma-form-border-color;
 // Tooltips
 // Popovers
 // Toasts

diff --git a/boodark/scss/theme-nord.scss b/boodark/scss/theme-nord.scss
@@ -0,0 +1,6 @@
+// stylelint-disable no-invalid-position-at-import-rule
+// Theme: boodark - color scheme nord
+
+$color-scheme: nord;
+
+@import "theme";
diff --git a/boodark/scss/theme-orange.scss b/boodark/scss/theme-orange.scss
@@ -0,0 +1,6 @@
+// stylelint-disable no-invalid-position-at-import-rule
+// Theme: boodark - color scheme orange
+
+$color-scheme: orange;
+
+@import "theme";
diff --git a/boodark/scss/theme-teal.scss b/boodark/scss/theme-teal.scss
@@ -0,0 +1,6 @@
+// stylelint-disable no-invalid-position-at-import-rule
+// Theme: boodark - color scheme teal
+
+$color-scheme: teal;
+
+@import "theme";