From 30c5cc1dc4df3c42f824b472b7c089830f286824 Mon Sep 17 00:00:00 2001 From: snipe Date: Fri, 2 Mar 2018 20:01:41 -0800 Subject: [PATCH] Additional dark themes --- public/css/skins/skin-green-dark.css | 2 +- public/css/skins/skin-orange-dark.css | 177 ++++++++++++++++++++++++++ public/css/skins/skin-red-dark.css | 177 ++++++++++++++++++++++++++ resources/macros/macros.php | 2 + 4 files changed, 357 insertions(+), 1 deletion(-) create mode 100644 public/css/skins/skin-orange-dark.css create mode 100644 public/css/skins/skin-red-dark.css diff --git a/public/css/skins/skin-green-dark.css b/public/css/skins/skin-green-dark.css index a712f0b866f8..7babfe758f31 100644 --- a/public/css/skins/skin-green-dark.css +++ b/public/css/skins/skin-green-dark.css @@ -8,7 +8,7 @@ } .main-header .navbar, .main-header .logo { - background-color: {{ $snipeSettings->header_color }}; + background-color: #18A452; background: -webkit-linear-gradient(top, #18A452 0%,#18A452 100%); background: linear-gradient(to bottom, #18A452 0%,#18A452 100%); border-color: #18A452; diff --git a/public/css/skins/skin-orange-dark.css b/public/css/skins/skin-orange-dark.css new file mode 100644 index 000000000000..749df638664a --- /dev/null +++ b/public/css/skins/skin-orange-dark.css @@ -0,0 +1,177 @@ +:root { + --background: #222; + --back-main: #333; + --back-sub: #444; + --header: #FF8C00; /* Use same as Header picker */ + --text-main: #FFF; + --text-sub: #BBB; +} + +.main-header .navbar, .main-header .logo { + background-color: #FF8C00; + background: -webkit-linear-gradient(top, #FF8C00 0%,#FF8C00 100%); + background: linear-gradient(to bottom, #FF8C00 0%,#FF8C00 100%); + border-color: #FF8C00; +} + +a, a:link, a:visited, .btn-primary.hover { + color: var(--header); +} +#accessoriesTable>tbody>tr>td>nobr>a>i.fa { + color: var(--text-main); +} +#assetsListingTable>tbody>tr>td>nobr>a>i.fa { + color: var(--text-main); +} +#assetsListingTable>tbody>tr.selected>td { + background-color: var(--back-main); +} +body { + color: var(--text-main); +} +.box, .box.box-default { + border-top: 3px solid var(--header); + border-top-color: var(--header); +} +.box-body, .box-footer, .box-header { + background-color: var(--back-sub); + color: var(--text-main); +} +.btn-default{ + background-color: var(--back-main); + color: var(--header); +} +.btn-default:active, .btn-default:focus, .btn-default:hover, .btn-default.active { + background-color: var(--back-sub); + color: var(--header); +} +.btn-primary, .btn-primary.hover, .btn-primary:active, .text-blue { + color: var(--text-main)!important; +} +.btn-primary:hover { + background-color: var(--back-main); + color: var(--header)!important; +} +#componentsTable>tbody>tr>td>nobr>a>i.fa { + color: var(--text-main); +} +#consumablesTable>tbody>tr>td>nobr>a>i.fa { + color: var(--text-main); +} +.content-wrapper { + background-color: var(--background); +} +#create-form>div>div>div>span>i.fa { + background-color: var(--back-sub); + color: var(--header); +} +.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover, .datepicker table tr td.day.focused, .datepicker table tr td.day:hover { + background-color: var(--header); +} +.datepicker.dropdown-menu { + background-color: var(--back-main); + color: var(--text-main); +} +#details>div>div>div>table { + background-color: transparent; +} +.dropdown-menu, .dropdown-menu>li>a { + background-color: var(--back-sub); + color: var(--header); +} +.dropdown-menu>li>a:hover { + background-color: var(--back-main); + color: var(--text-main); +} +.form-control { + background-color: var(--back-main); + color: var(--text-main); +} +h1, h2, h3, h4, h5, h6, p { + color: var(--text-main); +} +.help-block { + color: var(--text-sub); +} +input[type=text], input[type=search] { + background-color: var(--back-sub); + color: var(--text-main); +} +.input-group, .input-group-addon { + background-color: var(--back-sub)!important; + color: var(--text-main); +} +#licensesTable>tbody>tr>td>nobr>a>i.fa { + color: var(--text-main); +} +.main-footer { + background-color: var(--back-main); + color: var(--text-main); +} +.nav-tabs-custom>.nav-tabs>li>a, .nav-tabs-custom>.nav-tabs>li.active>a { + color: var(--text-main); +} +.nav-tabs-custom>.nav-tabs>li.active { + border-top-color: var(--header); +} +.nav-tabs-custom>.nav-tabs>li.active>a { + background-color: var(--back-main); +} +.nav-tabs-custom>.nav-tabs>li.active>a:hover { + background-color: var(--back-sub); + color: var(--text-main); +} +.nav-tabs-custom, .nav-tabs-custom>.tab-content { + background-color: var(--back-main); +} +.navbar-nav>.tasks-menu>.dropdown-menu>li.header { + background-color: var(--back-main); + color: var(--header); +} +.open>.dropdown-toggle.btn-default { + background-color: var(--back-sub); + color: var(--header); +} +.panel { + background-color: var(--back-sub); + color: var(--text-main); +} +.panel-default>.panel-heading { + background-color: var(--back-main); + color: var(--header); +} +.select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option[aria-selected=true]:hover { + background-color: var(--back-sub); + color: var(--header); +} +.select2-container--default .select2-results__option--highlighted[aria-selected] { + background-color: var(--header); + color: var(--back-main); +} +.select2-container--default .select2-selection--single .select2-selection__rendered { + color: var(--text-main); +} +.select2-selection--single { + background-color: var(--back-sub)!important; + color: var(--text-main)!important; +} +.select2-dropdown { + background-color: var(--back-main); + color: var(--text-main); +} +.skin-blue .main-header .navbar .dropdown-menu li a { + color: var(--header); +} +.skin-blue .sidebar-menu>li.active>a, .skin-blue .sidebar-menu>li:hover>a, .sidebar-toggle:hover { + background-color: var(--header)!important; +} +.tab-content, .tab-pane { + background-color: var(--back-main); + color: var(--text-main); +} +.table-striped>tbody>tr:nth-of-type(odd) { + background-color: var(--back-sub); +} +#webui>div>div>div>div>div>table>tbody>tr>td>a>i.fa { + color: var(--text-main); +} diff --git a/public/css/skins/skin-red-dark.css b/public/css/skins/skin-red-dark.css new file mode 100644 index 000000000000..39f3490f56fa --- /dev/null +++ b/public/css/skins/skin-red-dark.css @@ -0,0 +1,177 @@ +:root { + --background: #222; + --back-main: #333; + --back-sub: #444; + --header: #ad0c0c; /* Use same as Header picker */ + --text-main: #FFF; + --text-sub: #BBB; +} + +.main-header .navbar, .main-header .logo { +background-color: #ad0c0c; +background: -webkit-linear-gradient(top, #ad0c0c 0%,#ad0c0c 100%); +background: linear-gradient(to bottom, #ad0c0c 0%,#ad0c0c 100%); +border-color: #ad0c0c; +} + +a, a:link, a:visited, .btn-primary.hover { + color: var(--header); +} +#accessoriesTable>tbody>tr>td>nobr>a>i.fa { + color: var(--text-main); +} +#assetsListingTable>tbody>tr>td>nobr>a>i.fa { + color: var(--text-main); +} +#assetsListingTable>tbody>tr.selected>td { + background-color: var(--back-main); +} +body { + color: var(--text-main); +} +.box, .box.box-default { + border-top: 3px solid var(--header); + border-top-color: var(--header); +} +.box-body, .box-footer, .box-header { + background-color: var(--back-sub); + color: var(--text-main); +} +.btn-default{ + background-color: var(--back-main); + color: var(--header); +} +.btn-default:active, .btn-default:focus, .btn-default:hover, .btn-default.active { + background-color: var(--back-sub); + color: var(--header); +} +.btn-primary, .btn-primary.hover, .btn-primary:active, .text-blue { + color: var(--text-main)!important; +} +.btn-primary:hover { + background-color: var(--back-main); + color: var(--header)!important; +} +#componentsTable>tbody>tr>td>nobr>a>i.fa { + color: var(--text-main); +} +#consumablesTable>tbody>tr>td>nobr>a>i.fa { + color: var(--text-main); +} +.content-wrapper { + background-color: var(--background); +} +#create-form>div>div>div>span>i.fa { + background-color: var(--back-sub); + color: var(--header); +} +.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover, .datepicker table tr td.day.focused, .datepicker table tr td.day:hover { + background-color: var(--header); +} +.datepicker.dropdown-menu { + background-color: var(--back-main); + color: var(--text-main); +} +#details>div>div>div>table { + background-color: transparent; +} +.dropdown-menu, .dropdown-menu>li>a { + background-color: var(--back-sub); + color: var(--header); +} +.dropdown-menu>li>a:hover { + background-color: var(--back-main); + color: var(--text-main); +} +.form-control { + background-color: var(--back-main); + color: var(--text-main); +} +h1, h2, h3, h4, h5, h6, p { + color: var(--text-main); +} +.help-block { + color: var(--text-sub); +} +input[type=text], input[type=search] { + background-color: var(--back-sub); + color: var(--text-main); +} +.input-group, .input-group-addon { + background-color: var(--back-sub)!important; + color: var(--text-main); +} +#licensesTable>tbody>tr>td>nobr>a>i.fa { + color: var(--text-main); +} +.main-footer { + background-color: var(--back-main); + color: var(--text-main); +} +.nav-tabs-custom>.nav-tabs>li>a, .nav-tabs-custom>.nav-tabs>li.active>a { + color: var(--text-main); +} +.nav-tabs-custom>.nav-tabs>li.active { + border-top-color: var(--header); +} +.nav-tabs-custom>.nav-tabs>li.active>a { + background-color: var(--back-main); +} +.nav-tabs-custom>.nav-tabs>li.active>a:hover { + background-color: var(--back-sub); + color: var(--text-main); +} +.nav-tabs-custom, .nav-tabs-custom>.tab-content { + background-color: var(--back-main); +} +.navbar-nav>.tasks-menu>.dropdown-menu>li.header { + background-color: var(--back-main); + color: var(--header); +} +.open>.dropdown-toggle.btn-default { + background-color: var(--back-sub); + color: var(--header); +} +.panel { + background-color: var(--back-sub); + color: var(--text-main); +} +.panel-default>.panel-heading { + background-color: var(--back-main); + color: var(--header); +} +.select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option[aria-selected=true]:hover { + background-color: var(--back-sub); + color: var(--header); +} +.select2-container--default .select2-results__option--highlighted[aria-selected] { + background-color: var(--header); + color: var(--back-main); +} +.select2-container--default .select2-selection--single .select2-selection__rendered { + color: var(--text-main); +} +.select2-selection--single { + background-color: var(--back-sub)!important; + color: var(--text-main)!important; +} +.select2-dropdown { + background-color: var(--back-main); + color: var(--text-main); +} +.skin-blue .main-header .navbar .dropdown-menu li a { + color: var(--header); +} +.skin-blue .sidebar-menu>li.active>a, .skin-blue .sidebar-menu>li:hover>a, .sidebar-toggle:hover { + background-color: var(--header)!important; +} +.tab-content, .tab-pane { + background-color: var(--back-main); + color: var(--text-main); +} +.table-striped>tbody>tr:nth-of-type(odd) { + background-color: var(--back-sub); +} +#webui>div>div>div>div>div>table>tbody>tr>td>a>i.fa { + color: var(--text-main); +} diff --git a/resources/macros/macros.php b/resources/macros/macros.php index 7470f4581a11..6446f5926da9 100644 --- a/resources/macros/macros.php +++ b/resources/macros/macros.php @@ -519,6 +519,8 @@ $formats = array( '' => 'Default Blue', 'green-dark' => 'Green Dark', + 'red-dark' => 'Red Dark', + 'orange-dark' => 'Orange Dark', ); $select = '