Skip to content

Commit

Permalink
update: Styles with a modern look and some fixes on mobile.
Browse files Browse the repository at this point in the history
  • Loading branch information
@alex3rq
alex3rq committed Nov 17, 2020
1 parent 77a35cc commit ed04c59
Show file tree
Hide file tree
Showing 2 changed files with 143 additions and 41 deletions.
16 changes: 9 additions & 7 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,22 @@ Based on https://github.com/iKyzu/MantisBTModernDarkTheme

Edited from https://github.com/polnetwork/MantisBTModernTheme

Edited from https://github.com/wiz78/MantisBTModernDarkTheme

## Installation

Upload the whole folder into your `plugins/` folder in the mantis installation so that you e.g. have `MANTIS_INSTALLATION/plugins/MantisBTModernDarkTheme/MantisBTModernDarkTheme.php`. After that the plugin should show up on the `manage_plugin_page.php` page in the mantis settings. There you can simply install it to activate it.

I recommend you to set this colors inside your config/config_inc.php file

```php
$g_status_colors = array( 'new' => '#ffa0a0', # red,
'feedback' => '#ff50a8', # purple
'acknowledged' => '#ffd850', # orange
'confirmed' => '#ffffb0', # yellow
'assigned' => '#c8c8ff', # blue
'resolved' => '#cceedd', # buish-green
'closed' => '#e8e8e8'); # light gray
$g_status_colors = array( 'new' => '#e57373', # red,
'feedback' => '#ba68c8', # purple
'acknowledged' => '#ffb74d', # orange
'confirmed' => '#fff176', # yellow
'assigned' => '#64b5f6', # blue
'resolved' => '#4db6ac', # teal
'closed' => '#e8e8e8'); # light
```

Each user can then enable the dark theme in Account -> Preferences
168 changes: 134 additions & 34 deletions files/ModernDarkTheme.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
body,
html
{
background-color: #22252a !important
background-color: #22252a !important;
color: #ccc;
}

.navbar
Expand Down Expand Up @@ -39,14 +40,21 @@ html
border-color: #212326;
}

.nav-list:hover,
.skin-3 .nav-list > li:hover,
.skin-3 .nav-list > li > a:hover,
.skin-3 .nav-list > li.active > a:hover,
.skin-3 .nav-list > li.active,
.skin-3 .nav-list > li.active + li
{
border-color: #212326 !important;
.skin-3 .nav-list > li {
border-bottom-width: 1px;
}

.skin-3 .nav-list > li.active + li {
border-color: transparent !important;
}

.skin-3 .nav-list > li.active + li:last-child {
border-bottom-color: transparent !important;
}

.skin-3 .nav-list > li.active + li:hover,
.skin-3 .nav-list > li.active + li:last-child:hover {
border-bottom-color: inherit !important;
}

.dropdown-toggle
Expand All @@ -60,7 +68,6 @@ html
}

.dropdown-menu,
.menu-text,
.skin-3 .infobox-container .infobox:not(.infobox-dark), .skin-3 .nav-list li.active > a::before
{
background-color: #2d3035 !important
Expand All @@ -80,7 +87,8 @@ html
.dropdown-menu li.active:hover > a, .dropdown-menu li.active > a, .dropdown-menu li:hover > a, .dropdown-menu li > a:active, .dropdown-menu li > a:focus
{
background-color: orange !important;
color: #f0f0f0 !important
color: #f0f0f0 !important;
text-shadow: 0px 0px 10px brown;
}

.ace-nav > li
Expand All @@ -94,23 +102,35 @@ html
border: 0 transparent !important;
color: #fafafa !important;
padding: 3px 12px !important;
border-radius: 15px !important;
}

.btn.btn-white.active,
.btn-primary.active,
.btn.btn-white.btn-primary.active,
.btn.btn-white:hover,
.btn-primary:hover,
.btn.btn-white.btn-primary:hover
.btn.btn-white.btn-primary:hover,
.btn-primary.focus, .btn-primary:focus
{
background-color: #32363c !important;
background-color: orange !important;
text-shadow: 0px 0px 10px brown!important;
}

.btn-primary.no-hover:active, .btn-primary.no-hover:hover
{
background-color: #16181c !important;
}

.btn-group .form-inline fieldset .btn.btn-white {
margin-top: 3px;
margin-right: 5px;
}

.btn-group > .btn, .btn-group > .btn + .btn, .btn-group > .btn:first-child {
margin-right: 5px !important;
}

.skin-3 .nav-list > li > a:hover, .skin-3 .nav-list > li.active > a:hover
{
border-color: #212326 !important;
Expand All @@ -137,6 +157,8 @@ html
background-color: orange !important;
color: white;
padding: 3px 10px;
border-radius: 15px;
text-shadow: 0px 0px 10px brown;
}

.label:before
Expand Down Expand Up @@ -165,23 +187,32 @@ html
color: white !important
}

.breadcrumbs .breadcrumb {
margin-top: 0;
}

.breadcrumbs .nav-recent
{
color: orange !important;
color: orange !important;
top: 23px !important;
}
.breadcrumbs .nav-search {
top: 16px !important;
}

.breadcrumbs .nav-search-input
{
background-color: #464646 !important;
border-color: transparent !important;
color: #f0f0f0 !important;
border-radius: 18px !important;
border-radius: 18px !important;
}

.widget-header
{
background-color: #5f5f70 !important;
border-color: #5f5f70 !important
border-color: #5f5f70 !important;
padding: 7px 15px
}

.widget-header .white:hover
Expand All @@ -200,6 +231,10 @@ html
border: 0 transparent !important;
}

.widget-box {
border: 1px solid #3c3c3c !important;
}

.table
{
background-color: inherit !important
Expand All @@ -208,7 +243,7 @@ html
.table-bordered
{
border: 0 transparent !important;
background-color: #fff !important
background-color: #3c3f44 !important
}

.widget-body
Expand Down Expand Up @@ -248,15 +283,23 @@ html
border: 0 #fff !important;
}

.widget-body .table.table-hover > tbody > tr:hover {
background-color: #3c3f44 !important
}

.widget-body .table-striped > tbody > tr
{
background-color: #22252a !important;
/*background-color: #22252a !important;*/
background-color: transparent !important;
}

.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.widget-body .table td
{
border: 1px solid #3c3c3c !important
border: 1px solid #3c3c3c !important;
padding: 10px 15px;
line-height: 18px !important;
}

.widget-body .table thead
Expand Down Expand Up @@ -288,18 +331,20 @@ html

.widget-body .table-responsive
{
background-color: #fff !important;
color: #4a4a4a !important
background-color: #3c3c3c !important;
color: #4a4a4a !important;
border: 0px solid transparent !important;
}

/*
.widget-body .table-striped > tbody > tr:nth-of-type(odd)
{
background-color: transparent !important
}
*/

.widget-body .table-striped > tbody > tr:hover
{
background-color: #42454a !important
background-color: #3c3c3c !important
}

.widget-body .profile-activity
Expand Down Expand Up @@ -378,7 +423,8 @@ select
}

.nav-list a:hover .menu-text,
.nav-list a:hover .menu-icon
.nav-list a:hover .menu-icon,
.nav-list li.active a .menu-text
{
color: orange !important;
}
Expand Down Expand Up @@ -410,14 +456,21 @@ select
border-color: #505050 !important
}

.skin-3 .nav-list > li.active, .skin-3 .nav-list > li.active + li
{
border-color: #212326 !important;
.skin-3 .nav-list > li.active
{
border-color: orange !important;
border-top-width: 1px;
border-bottom-width: 1px;
}

.skin-3 .nav-list > li:hover + li
{
border-top-color: black !important
border-top-color: transparent !important;
}

.skin-3 .nav-list > li:hover + li.active
{
border-top-color: orange !important;
}

.menu-icon
Expand Down Expand Up @@ -454,7 +507,12 @@ select
{
background-color: #212326 !important;
border-color: orange !important;
color: orange !important
color: orange !important;
position: relative !important;
width: 25px;
height: 25px;
display: block;
margin: auto;
}

.sidebar-toggle:before, .skin-3 .sidebar-toggle:before
Expand Down Expand Up @@ -491,7 +549,17 @@ td.bug-tags, label.inline.small

span.required
{
color: #bb0000 !important
color: #ff3f3f !important
}

span.dependency_met
{
color: #43a047 !important
}

span.dependency_unmet
{
color: #d32f2f !important
}

.bootstrap-datetimepicker-widget, .bootstrap-datetimepicker-widget *
Expand Down Expand Up @@ -531,13 +599,30 @@ span.required
.profile-activity .thumbicon
{
border-radius: 100% !important;
position: relative;
}

.profile-activity .thumbicon::before,
.skin-3 .sidebar-toggle > .ace-icon::before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.sidebar-toggle > .ace-icon, .skin-3 .sidebar-toggle > .ace-icon::before {

}

.sidebar-toggle::before, .skin-3 .sidebar-toggle::before
{
border-color: transparent !important;
}

.sidebar .nav-list > li a {
padding: 10px 0 10px !important;
}

.nav-list > li.active > a
{
font-weight: inherit !important;
Expand Down Expand Up @@ -591,7 +676,7 @@ input.form-control,
{
background-color: #22252a !important;
color: #fff !important;
border: 1px solid #22252a !important;
border: 1px solid #3c3c3c !important;
}

input[type="file"]
Expand Down Expand Up @@ -647,10 +732,10 @@ a i
color: #fff !important;
}

.nav-list:hover, .skin-3 .nav-list > li:hover, .skin-3 .nav-list > li > a:hover, .skin-3 .nav-list > li.active > a:hover
/*.nav-list:hover, .skin-3 .nav-list > li:hover, .skin-3 .nav-list > li > a:hover, .skin-3 .nav-list > li.active > a:hover
{
border-color: #2d3035 !important;
}
border-color: orange!important;
}*/

.skin-3 .nav-list > li.open::before, .skin-3 .nav-list > li:hover::before,
.skin-3 .nav-list li.active > a::before,
Expand Down Expand Up @@ -698,3 +783,18 @@ a i
{
color: #4a4a4a !important;
}

.alert.alert-danger {
background: #a94442;
color: #f2dede;
}

.alert.alert-success {
background-color:#3c763d;
color:#dff0d8;
}

.alert.alert-success .btn-group a.btn.btn-primary {
background-color: orange !important;
text-shadow: 0 0 10px brown !important;
}

0 comments on commit ed04c59

Please sign in to comment.