bckelley/blueberry-pma-theme
1
0
Fork 0
mirror of https://github.com/bckelley/blueberry-pma-theme.git synced 2026-08-24 03:04:11 -05:00
Code Issues Packages Projects Releases Wiki Activity

BooDark v1.1.0

Browse Source
This commit is contained in:
Marian Bolojan
2023-03-10 20:52:47 +02:00
parent 7d608b5f75
commit cfec8dac18
25 changed files with 214 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
boodark/README.md
+45 -3
View File
@@ -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.
boodark/css/theme-nord.css
+3
View File
File diff suppressed because one or more lines are too long
boodark/css/theme-nord.css.map
+1
View File
File diff suppressed because one or more lines are too long
boodark/css/theme-orange.css
+3
View File
File diff suppressed because one or more lines are too long
boodark/css/theme-orange.css.map
+1
View File
File diff suppressed because one or more lines are too long
boodark/css/theme-teal.css
+3
View File
File diff suppressed because one or more lines are too long
boodark/css/theme-teal.css.map
+1
View File
File diff suppressed because one or more lines are too long
boodark/css/theme.css
+2 -2
View File
File diff suppressed because one or more lines are too long
boodark/css/theme.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long
boodark/css/theme.rtl.css
+2 -2
View File
File diff suppressed because one or more lines are too long
boodark/screen.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 83 KiB

After

Width:  |  Height:  |  Size: 88 KiB

boodark/scss/_bootstrap.scss
+1
View File
@@ -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";
boodark/scss/_common.scss
+8 -4
View File
@@ -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%;
boodark/scss/_forms.scss
+45 -7
View File
@@ -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;
&[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);
}
}
boodark/scss/_icons.scss
+1 -1
View File
@@ -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
boodark/scss/_list-group.scss
+14
View File
@@ -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;
}
}
}
boodark/scss/_nav.scss
+8
View File
@@ -7,3 +7,11 @@
.nav-tabs {
background-color: $nav-tabs-bg;
}
.nav-pills {
.nav-link.active {
.icon {
filter: brightness(0) invert(0);
}
}
}
boodark/scss/_navbar.scss
+17 -2
View File
@@ -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);
}
}
}
}
boodark/scss/_navigation.scss
+1 -1
View File
@@ -174,7 +174,7 @@ select {
&.activePointer,
&.selected {
color: $black;
color: $pma-body-color;
background-color: $navigation-selected-bg;
}
boodark/scss/_variables.scss
+36 -6
View File
@@ -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,9 +150,12 @@ $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;
@@ -138,7 +163,10 @@ $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
boodark/scss/theme-nord.scss
+6
View File
@@ -0,0 +1,6 @@
// stylelint-disable no-invalid-position-at-import-rule
// Theme: boodark - color scheme nord
$color-scheme: nord;
@import "theme";
boodark/scss/theme-orange.scss
+6
View File
@@ -0,0 +1,6 @@
// stylelint-disable no-invalid-position-at-import-rule
// Theme: boodark - color scheme orange
$color-scheme: orange;
@import "theme";
boodark/scss/theme-teal.scss
+6
View File
@@ -0,0 +1,6 @@
// stylelint-disable no-invalid-position-at-import-rule
// Theme: boodark - color scheme teal
$color-scheme: teal;
@import "theme";
boodark/scss/theme.scss
+1 -1
View File
@@ -27,7 +27,7 @@
@import "breadcrumb";
// @import "pagination";
// @import "alert";
// @import "list-group";
@import "list-group";
@import "modal";
@import "console";
@import "settings";
boodark/theme.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "BooDark",
"version": "1.0.3",
"version": "1.1.0",
"description": "Bootstrap Dark theme for phpMyAdmin",
"author": "adorade",
"url": "https://github.com/adorade/boodark",