archive/kevinpapst_kimai2
0
0
Fork 0
mirror of https://github.com/kevinpapst/kimai2.git synced 2025-04-01 20:22:41 +00:00
Code Issues Projects Releases Wiki Activity

added files for dark skin

Browse source
This commit is contained in:
Kevin Papst 2021-08-25 23:09:21 +02:00
parent fae525c82f
commit fc45cf9bf9
3 changed files with 457 additions and 10 deletions

149
assets/sass/mixins.scss Normal file
View file

@ -0,0 +1,149 @@
//AdminLTE mixins
//===============
@import "variables";
@mixin navbar-variant($color, $font-color: rgba(255, 255, 255, 0.8), $hover-color: #f6f6f6, $hover-bg: rgba(0, 0, 0, 0.1)) {
background-color: $color;
//Navbar links
.nav > li > a {
color: $font-color;
}
.nav > li > a:hover,
.nav > li > a:active,
.nav > li > a:focus,
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus,
.nav > .active > a {
background: $hover-bg;
color: $hover-color;
}
//Add color to the sidebar toggle button
.sidebar-toggle {
color: $font-color;
&:hover {
color: $hover-color;
background: $hover-bg;
}
}
}
//Box solid color variantion creator
@mixin box-solid-variant($color, $text-color: #fff) {
border: 1px solid $color;
> .box-header {
color: $text-color;
background-color: $color;
a,
.btn {
color: $text-color;
}
}
}
//Dark Sidebar Mixin
@mixin skin-dark-sidebar($link-hover-border-color) {
// Sidebar background color (Both .wrapper and .left-side are responsible for sidebar bg color)
.wrapper,
.main-sidebar,
.left-side {
background-color: $sidebar-dark-bg;
}
//User Panel (resides in the sidebar)
.user-panel {
> .info, > .info > a {
color: #fff;
}
}
//Sidebar Menu. First level links
.sidebar-menu > li {
//Section Headning
&.header {
color: lighten($sidebar-dark-bg, 20%);
background: darken($sidebar-dark-bg, 4%);
}
//links
> a {
border-left: 3px solid transparent;
}
//Hover and active states
&:hover > a,
&.active > a,
&.menu-open > a {
color: $sidebar-dark-hover-color;
background: $sidebar-dark-hover-bg;
}
&.active > a {
border-left-color: $link-hover-border-color;
}
//First Level Submenu
> .treeview-menu {
margin: 0 1px;
background: $sidebar-dark-submenu-bg;
}
}
//All links within the sidebar menu
.sidebar a {
color: $sidebar-dark-color;
&:hover {
text-decoration: none;
}
}
//All submenus
.sidebar-menu .treeview-menu {
> li {
> a {
color: $sidebar-dark-submenu-color;
}
&.active > a, > a:hover {
color: $sidebar-dark-submenu-hover-color;
}
}
}
//The sidebar search form
.sidebar-form {
border-radius: 3px;
border: 1px solid lighten($sidebar-dark-bg, 10%);
margin: 10px 10px;
input[type="text"], .btn {
box-shadow: none;
background-color: lighten($sidebar-dark-bg, 10%);
border: 1px solid transparent;
height: 35px;
//@include transition(all $transition-speed $transition-fn);
}
input[type="text"] {
color: #666;
border-radius: 2px 0 2px 0;
&:focus,
&:focus + .input-group-btn .btn {
background-color: #fff;
color: #666;
}
&:focus + .input-group-btn .btn {
border-left-color: #fff;
}
}
.btn {
color: #999;
border-radius: 0 2px 0 2px;
}
}
}

298
assets/sass/skin-midnight.scss Normal file
View file

@ -0,0 +1,298 @@
/*
* Skin: Midnight Dark theme
* @see https://github.com/anvyst/adminlte-skin-midnight
* converted with http://less2scss.awk5.com/
* ------------
*/
@import "~bootstrap-sass/assets/stylesheets/bootstrap/mixins";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/variables";
@import "variables";
@import "mixins";
$blue: #075383;
$body-bg: #353c42;
$navbar-bg: #272c30;
$sidebar-dark-bg: #272c30;
$sidebar-light-bg: #272c30;
$sidebar-light-submenu-color: #fff;
$white: #fff;
$text-color: #bec5cb;
$font-color: $text-color;
$heading-color: #44DEF1;
$box-border-color: $black;
$border-radius: 4px;
.skin-midnight {
color: $text-color;
h4 {
color: $heading-color;
}
.content-header {
> .breadcrumb
> li
> a {
color: $font-color;
}
}
.table {
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
color: $font-color;
border-top: 0;
}
&.odd {
background-color: darken(#353c42, 5%);
}
&.odd, &.even {
&:hover {
background-color: darken(#353c42, 10%);
}
}
}
}
}
.table-bordered {
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
border: 1px solid $body-bg;
}
}
}
}
.dataTables_wrapper {
input[type='search'] {
border-radius: $border-radius;
background-color: $body-bg;
border: 0;
color: $font-color;
}
}
.dataTables_paginate {
.pagination {
li > a {
background-color: transparent !important;
border: 0;
}
}
}
@include skin-dark-sidebar($sidebar-dark-bg);
.box,
.box-footer,
.info-box,
.box-comment,
.comment-text,
.comment-text .username {
color: $text-color;
background-color: $navbar-bg;
}
.box-comments {
.box-comment {
border-bottom-color: $body-bg;
}
}
.box-footer {
border-top: 1px solid $body-bg;
}
.box-header{
&.with-border {
border-bottom: 1px solid $body-bg;
}
}
.box-solid, .box {
@include box-solid-variant($navbar-bg, $text-color);
}
.box {
&.box-info,
&.box-primary,
&.box-success,
&.box-warning,
&.box-danger {
border-top-width: 3px;
}
&.box-info {
border-top-color: $aqua;
}
&.box-primary {
border-top-color: $blue;
}
&.box-success {
border-top-color: $green;
}
&.box-warning {
border-top-color: $orange;
}
&.box-danger {
border-top-color: $red;
}
}
.main-header {
.navbar {
@include navbar-variant($navbar-bg, $font-color);
}
}
.timeline {
li {
.timeline-item {
color: $font-color;
background-color: $navbar-bg;
border-color: $body-bg;
}
.timeline-header {
border-bottom-color: $body-bg;
}
}
}
.nav-stacked
> li
> a {
color: $font-color;
&:hover {
color: white;
background-color: darken(#353c42, 10%);
}
}
.content-wrapper,
.right-side{
background-color: $body-bg;
}
.main-footer, .nav-tabs-custom {
background-color: $navbar-bg;
border-top-color: $body-bg;
color: $font-color;
.nav-tabs {
border-bottom-color: $body-bg;
}
.tab-content {
background-color: $navbar-bg;
}
}
.nav-tabs-custom>.nav-tabs>li.active>a {
border-left-color: $body-bg;
border-right-color: $body-bg;
}
.nav-tabs-custom>.nav-tabs.pull-right>li:first-of-type.active>a {
border-left-color: $body-bg;
}
.nav-tabs-custom > .nav-tabs > li {
color: $font-color;
&.active {
> a {
background-color: $navbar-bg;
}
}
> a {
color: $font-color;
}
}
.form-group,
.input-group {
.input-group-addon,
input,
textarea {
background-color: $body-bg;
color: $font-color;
border: 1px solid $body-bg;
}
}
.list-group {
color: $font-color;
background-color: $navbar-bg;
.list-group-item {
border-color: $body-bg;
background-color: $navbar-bg;
}
}
.input-group {
.input-group-addon {
border-right: 1px solid $navbar-bg;
}
}
.form-control {
border-color: $navbar-bg;
background-color: $body-bg;
}
.select2 {
.select2-selection {
background-color: $body-bg;
color: $font-color;
border: 1px solid $body-bg;
.select2-container--default,
.select2-selection--single,
.select2-selection--multiple,
.select2-selection__rendered {
color: $font-color;
}
}
}
.select2-dropdown {
background-color: $body-bg;
color: $font-color;
border: 1px solid $body-bg;
.select2-search__field {
background-color: $navbar-bg;
color: $font-color;
border: 1px solid $body-bg;
}
}
.select2-container--default.select2-container--open {
background-color: $navbar-bg;
}
}

20
assets/sass/variables.scss
View file

@ -23,7 +23,7 @@ $red: #dd4b39;
// Success
$green: #00a65a;
// Info
//$aqua: #00c0ef;
$aqua: #00c0ef;
// Warning
$yellow: #f0ad4e;
$blue: #0073b7;
@ -31,11 +31,11 @@ $blue: #0073b7;
//$teal: #39CCCC;
//$olive: #3D9970;
//$lime: #01FF70;
//$orange: #FF851B;
$orange: #FF851B;
//$fuchsia: #F012BE;
//$purple: #605ca8;
//$maroon: #D81B60;
//$black: #111;
$black: #111;
$gray-lte: #d2d6de;
$kimai-default: $gray-lte;
@ -57,13 +57,13 @@ $kimai-default: $gray-lte;
// --------------------------------------------------------
//
// Dark sidebar
//$sidebar-dark-bg: #222d32;
//$sidebar-dark-hover-bg: darken($sidebar-dark-bg, 2%);
//$sidebar-dark-color: lighten($sidebar-dark-bg, 60%);
//$sidebar-dark-hover-color: #fff;
//$sidebar-dark-submenu-bg: lighten($sidebar-dark-bg, 5%);
//$sidebar-dark-submenu-color: lighten($sidebar-dark-submenu-bg, 40%);
//$sidebar-dark-submenu-hover-color: #fff;
$sidebar-dark-bg: #222d32;
$sidebar-dark-hover-bg: darken($sidebar-dark-bg, 2%);
$sidebar-dark-color: lighten($sidebar-dark-bg, 60%);
$sidebar-dark-hover-color: #fff;
$sidebar-dark-submenu-bg: lighten($sidebar-dark-bg, 5%);
$sidebar-dark-submenu-color: lighten($sidebar-dark-submenu-bg, 40%);
$sidebar-dark-submenu-hover-color: #fff;
//
// Light sidebar
//$sidebar-ligh//t-bg: #f9fafc;