From 5a5c92b5b58f9fc478e60330fcdb5cb3c866805f Mon Sep 17 00:00:00 2001 From: James Cole Date: Sun, 29 Jan 2023 08:38:53 +0100 Subject: [PATCH 1/4] First dark mode CSS --- .../adminlte/css/skins/skin-blue-light.css | 163 -------- .../css/skins/skin-blue-light.min.css | 1 - .../v1/lib/adminlte/css/skins/skin-dark.css | 370 ++++++++++++++++++ .../v1/lib/adminlte/css/skins/skin-light.css | 201 ++++++++++ resources/views/layout/default.twig | 16 +- 5 files changed, 585 insertions(+), 166 deletions(-) delete mode 100755 public/v1/lib/adminlte/css/skins/skin-blue-light.css delete mode 100755 public/v1/lib/adminlte/css/skins/skin-blue-light.min.css create mode 100644 public/v1/lib/adminlte/css/skins/skin-dark.css create mode 100644 public/v1/lib/adminlte/css/skins/skin-light.css diff --git a/public/v1/lib/adminlte/css/skins/skin-blue-light.css b/public/v1/lib/adminlte/css/skins/skin-blue-light.css deleted file mode 100755 index 580644081b..0000000000 --- a/public/v1/lib/adminlte/css/skins/skin-blue-light.css +++ /dev/null @@ -1,163 +0,0 @@ -/* - * Skin: Blue - * ---------- - */ -.skin-blue-light .main-header .navbar { - background-color: #3c8dbc; -} -.skin-blue-light .main-header .navbar .nav > li > a { - color: #ffffff; -} -.skin-blue-light .main-header .navbar .nav > li > a:hover, -.skin-blue-light .main-header .navbar .nav > li > a:active, -.skin-blue-light .main-header .navbar .nav > li > a:focus, -.skin-blue-light .main-header .navbar .nav .open > a, -.skin-blue-light .main-header .navbar .nav .open > a:hover, -.skin-blue-light .main-header .navbar .nav .open > a:focus, -.skin-blue-light .main-header .navbar .nav > .active > a { - background: rgba(0, 0, 0, 0.1); - color: #f6f6f6; -} -.skin-blue-light .main-header .navbar .sidebar-toggle { - color: #ffffff; -} -.skin-blue-light .main-header .navbar .sidebar-toggle:hover { - color: #f6f6f6; - background: rgba(0, 0, 0, 0.1); -} -.skin-blue-light .main-header .navbar .sidebar-toggle { - color: #fff; -} -.skin-blue-light .main-header .navbar .sidebar-toggle:hover { - background-color: #367fa9; -} -@media (max-width: 767px) { - .skin-blue-light .main-header .navbar .dropdown-menu li.divider { - background-color: rgba(255, 255, 255, 0.1); - } - .skin-blue-light .main-header .navbar .dropdown-menu li a { - color: #fff; - } - .skin-blue-light .main-header .navbar .dropdown-menu li a:hover { - background: #367fa9; - } -} -.skin-blue-light .main-header .logo { - background-color: #3c8dbc; - color: #ffffff; - border-bottom: 0 solid transparent; -} -.skin-blue-light .main-header .logo:hover { - background-color: #3b8ab8; -} -.skin-blue-light .main-header li.user-header { - background-color: #3c8dbc; -} -.skin-blue-light .content-header { - background: transparent; -} -.skin-blue-light .wrapper, -.skin-blue-light .main-sidebar, -.skin-blue-light .left-side { - background-color: #f9fafc; -} -.skin-blue-light .main-sidebar { - border-right: 1px solid #d2d6de; -} -.skin-blue-light .user-panel > .info, -.skin-blue-light .user-panel > .info > a { - color: #444444; -} -.skin-blue-light .sidebar-menu > li { - -webkit-transition: border-left-color 0.3s ease; - -o-transition: border-left-color 0.3s ease; - transition: border-left-color 0.3s ease; -} -.skin-blue-light .sidebar-menu > li.header { - color: #848484; - background: #f9fafc; -} -.skin-blue-light .sidebar-menu > li > a { - border-left: 3px solid transparent; - font-weight: 600; -} -.skin-blue-light .sidebar-menu > li:hover > a, -.skin-blue-light .sidebar-menu > li.active > a { - color: #000000; - background: #f4f4f5; -} -.skin-blue-light .sidebar-menu > li.active { - border-left-color: #3c8dbc; -} -.skin-blue-light .sidebar-menu > li.active > a { - font-weight: 600; -} -.skin-blue-light .sidebar-menu > li > .treeview-menu { - background: #f4f4f5; -} -.skin-blue-light .sidebar a { - color: #444444; -} -.skin-blue-light .sidebar a:hover { - text-decoration: none; -} -.skin-blue-light .sidebar-menu .treeview-menu > li > a { - color: #777777; -} -.skin-blue-light .sidebar-menu .treeview-menu > li.active > a, -.skin-blue-light .sidebar-menu .treeview-menu > li > a:hover { - color: #000000; -} -.skin-blue-light .sidebar-menu .treeview-menu > li.active > a { - font-weight: 600; -} -.skin-blue-light .sidebar-form { - border-radius: 3px; - border: 1px solid #d2d6de; - margin: 10px 10px; -} -.skin-blue-light .sidebar-form input[type="text"], -.skin-blue-light .sidebar-form .btn { - box-shadow: none; - background-color: #fff; - border: 1px solid transparent; - height: 35px; -} -.skin-blue-light .sidebar-form input[type="text"] { - color: #666; - border-top-left-radius: 2px; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: 2px; -} -.skin-blue-light .sidebar-form input[type="text"]:focus, -.skin-blue-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn { - background-color: #fff; - color: #666; -} -.skin-blue-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn { - border-left-color: #fff; -} -.skin-blue-light .sidebar-form .btn { - color: #999; - border-top-left-radius: 0; - border-top-right-radius: 2px; - border-bottom-right-radius: 2px; - border-bottom-left-radius: 0; -} -@media (min-width: 768px) { - .skin-blue-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu { - border-left: 1px solid #d2d6de; - } -} -.skin-blue-light .main-footer { - border-top-color: #d2d6de; -} -.skin-blue.layout-top-nav .main-header > .logo { - background-color: #3c8dbc; - color: #ffffff; - border-bottom: 0 solid transparent; -} -.skin-blue.layout-top-nav .main-header > .logo:hover { - background-color: #3b8ab8; -} diff --git a/public/v1/lib/adminlte/css/skins/skin-blue-light.min.css b/public/v1/lib/adminlte/css/skins/skin-blue-light.min.css deleted file mode 100755 index 033834e29f..0000000000 --- a/public/v1/lib/adminlte/css/skins/skin-blue-light.min.css +++ /dev/null @@ -1 +0,0 @@ -.skin-blue-light .main-header .navbar{background-color:#3c8dbc}.skin-blue-light .main-header .navbar .nav>li>a{color:#fff}.skin-blue-light .main-header .navbar .nav>li>a:hover,.skin-blue-light .main-header .navbar .nav>li>a:active,.skin-blue-light .main-header .navbar .nav>li>a:focus,.skin-blue-light .main-header .navbar .nav .open>a,.skin-blue-light .main-header .navbar .nav .open>a:hover,.skin-blue-light .main-header .navbar .nav .open>a:focus,.skin-blue-light .main-header .navbar .nav>.active>a{background:rgba(0,0,0,0.1);color:#f6f6f6}.skin-blue-light .main-header .navbar .sidebar-toggle{color:#fff}.skin-blue-light .main-header .navbar .sidebar-toggle:hover{color:#f6f6f6;background:rgba(0,0,0,0.1)}.skin-blue-light .main-header .navbar .sidebar-toggle{color:#fff}.skin-blue-light .main-header .navbar .sidebar-toggle:hover{background-color:#367fa9}@media (max-width:767px){.skin-blue-light .main-header .navbar .dropdown-menu li.divider{background-color:rgba(255,255,255,0.1)}.skin-blue-light .main-header .navbar .dropdown-menu li a{color:#fff}.skin-blue-light .main-header .navbar .dropdown-menu li a:hover{background:#367fa9}}.skin-blue-light .main-header .logo{background-color:#3c8dbc;color:#fff;border-bottom:0 solid transparent}.skin-blue-light .main-header .logo:hover{background-color:#3b8ab8}.skin-blue-light .main-header li.user-header{background-color:#3c8dbc}.skin-blue-light .content-header{background:transparent}.skin-blue-light .wrapper,.skin-blue-light .main-sidebar,.skin-blue-light .left-side{background-color:#f9fafc}.skin-blue-light .main-sidebar{border-right:1px solid #d2d6de}.skin-blue-light .user-panel>.info,.skin-blue-light .user-panel>.info>a{color:#444}.skin-blue-light .sidebar-menu>li{-webkit-transition:border-left-color .3s ease;-o-transition:border-left-color .3s ease;transition:border-left-color .3s ease}.skin-blue-light .sidebar-menu>li.header{color:#848484;background:#f9fafc}.skin-blue-light .sidebar-menu>li>a{border-left:3px solid transparent;font-weight:600}.skin-blue-light .sidebar-menu>li:hover>a,.skin-blue-light .sidebar-menu>li.active>a{color:#000;background:#f4f4f5}.skin-blue-light .sidebar-menu>li.active{border-left-color:#3c8dbc}.skin-blue-light .sidebar-menu>li.active>a{font-weight:600}.skin-blue-light .sidebar-menu>li>.treeview-menu{background:#f4f4f5}.skin-blue-light .sidebar a{color:#444}.skin-blue-light .sidebar a:hover{text-decoration:none}.skin-blue-light .sidebar-menu .treeview-menu>li>a{color:#777}.skin-blue-light .sidebar-menu .treeview-menu>li.active>a,.skin-blue-light .sidebar-menu .treeview-menu>li>a:hover{color:#000}.skin-blue-light .sidebar-menu .treeview-menu>li.active>a{font-weight:600}.skin-blue-light .sidebar-form{border-radius:3px;border:1px solid #d2d6de;margin:10px 10px}.skin-blue-light .sidebar-form input[type="text"],.skin-blue-light .sidebar-form .btn{box-shadow:none;background-color:#fff;border:1px solid transparent;height:35px}.skin-blue-light .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:2px}.skin-blue-light .sidebar-form input[type="text"]:focus,.skin-blue-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-blue-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-blue-light .sidebar-form .btn{color:#999;border-top-left-radius:0;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:0}@media (min-width:768px){.skin-blue-light.sidebar-mini.sidebar-collapse .sidebar-menu>li>.treeview-menu{border-left:1px solid #d2d6de}}.skin-blue-light .main-footer{border-top-color:#d2d6de}.skin-blue.layout-top-nav .main-header>.logo{background-color:#3c8dbc;color:#fff;border-bottom:0 solid transparent}.skin-blue.layout-top-nav .main-header>.logo:hover{background-color:#3b8ab8} \ No newline at end of file diff --git a/public/v1/lib/adminlte/css/skins/skin-dark.css b/public/v1/lib/adminlte/css/skins/skin-dark.css new file mode 100644 index 0000000000..54c4137ff7 --- /dev/null +++ b/public/v1/lib/adminlte/css/skins/skin-dark.css @@ -0,0 +1,370 @@ +/* + * Skin: Midnight Dark theme + * ------------ + */ +@media (prefers-color-scheme: dark) { + .skin-firefly-iii { + color: #bec5cb; + } + + .skin-firefly-iii h4 { + color: #44def1; + } + + .skin-firefly-iii .content-header > .breadcrumb > li > a { + color: #bec5cb; + } + + .skin-firefly-iii .table > thead > tr > th, + .skin-firefly-iii .table > tbody > tr > th, + .skin-firefly-iii .table > tfoot > tr > th, + .skin-firefly-iii .table > thead > tr > td, + .skin-firefly-iii .table > tbody > tr > td, + .skin-firefly-iii .table > tfoot > tr > td { + color: #bec5cb; + border-top: 0px; + } + + .skin-firefly-iii .table > thead > tr.odd, + .skin-firefly-iii .table > tbody > tr.odd, + .skin-firefly-iii .table > tfoot > tr.odd { + background-color: #2a2f34; + } + + .skin-firefly-iii .table > thead > tr.odd:hover, + .skin-firefly-iii .table > tbody > tr.odd:hover, + .skin-firefly-iii .table > tfoot > tr.odd:hover, + .skin-firefly-iii .table > thead > tr.even:hover, + .skin-firefly-iii .table > tbody > tr.even:hover, + .skin-firefly-iii .table > tfoot > tr.even:hover { + background-color: #1e2226; + } + + .skin-firefly-iii .table-bordered > thead > tr > th, + .skin-firefly-iii .table-bordered > tbody > tr > th, + .skin-firefly-iii .table-bordered > tfoot > tr > th, + .skin-firefly-iii .table-bordered > thead > tr > td, + .skin-firefly-iii .table-bordered > tbody > tr > td, + .skin-firefly-iii .table-bordered > tfoot > tr > td { + border: 1px solid #353c42; + } + + .skin-firefly-iii .dataTables_wrapper input[type='search'] { + border-radius: 4px; + background-color: #353c42; + border: 0; + color: #bec5cb; + } + + .skin-firefly-iii .dataTables_paginate .pagination li > a { + background-color: transparent !important; + border: 0; + } + + .skin-firefly-iii .wrapper, + .skin-firefly-iii .main-sidebar, + .skin-firefly-iii .left-side { + background-color: #272c30; + } + + .skin-firefly-iii .user-panel > .info, + .skin-firefly-iii .user-panel > .info > a { + color: #fff; + } + + .skin-firefly-iii .sidebar-menu > li.header { + color: #556068; + background: #1e2225; + } + + .skin-firefly-iii .sidebar-menu > li > a { + border-left: 3px solid transparent; + } + + .skin-firefly-iii .sidebar-menu > li:hover > a, + .skin-firefly-iii .sidebar-menu > li.active > a { + color: #ffffff; + background: #22272a; + border-left-color: #272c30; + } + + .skin-firefly-iii .sidebar-menu > li > .treeview-menu { + margin: 0 1px; + background: #32393e; + } + + .skin-firefly-iii .sidebar a { + color: #bec5cb; + } + + .skin-firefly-iii .sidebar a:hover { + text-decoration: none; + } + + .skin-firefly-iii .treeview-menu > li > a { + color: #949fa8; + } + + .skin-firefly-iii .treeview-menu > li.active > a, + .skin-firefly-iii .treeview-menu > li > a:hover { + color: #ffffff; + } + + .skin-firefly-iii .sidebar-form { + border-radius: 3px; + border: 1px solid #3e464c; + margin: 10px 10px; + } + + .skin-firefly-iii .sidebar-form input[type="text"], + .skin-firefly-iii .sidebar-form .btn { + box-shadow: none; + background-color: #3e464c; + border: 1px solid transparent; + height: 35px; + } + + .skin-firefly-iii .sidebar-form input[type="text"] { + color: #666; + border-top-left-radius: 2px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-bottom-left-radius: 2px; + } + + .skin-firefly-iii .sidebar-form input[type="text"]:focus, + .skin-firefly-iii .sidebar-form input[type="text"]:focus + .input-group-btn .btn { + background-color: #fff; + color: #666; + } + + .skin-firefly-iii .sidebar-form input[type="text"]:focus + .input-group-btn .btn { + border-left-color: #fff; + } + + .skin-firefly-iii .sidebar-form .btn { + color: #999; + border-top-left-radius: 0; + border-top-right-radius: 2px; + border-bottom-right-radius: 2px; + border-bottom-left-radius: 0; + } + + .skin-firefly-iii .box, + .skin-firefly-iii .box-footer, + .skin-firefly-iii .info-box, + .skin-firefly-iii .box-comment, + .skin-firefly-iii .comment-text, + .skin-firefly-iii .comment-text .username { + color: #bec5cb; + background-color: #272c30; + } + + .skin-firefly-iii .box-comments .box-comment { + border-bottom-color: #353c42; + } + + .skin-firefly-iii .box-footer { + border-top: 1px solid #353c42; + } + + .skin-firefly-iii .box-header.with-border { + border-bottom: 1px solid #353c42; + } + + .skin-firefly-iii .box-solid, + .skin-firefly-iii .box { + border: 1px solid #272c30; + } + + .skin-firefly-iii .box-solid > .box-header, + .skin-firefly-iii .box > .box-header { + color: #bec5cb; + background: #272c30; + background-color: #272c30; + } + + .skin-firefly-iii .box-solid > .box-header a, + .skin-firefly-iii .box > .box-header a, + .skin-firefly-iii .box-solid > .box-header .btn, + .skin-firefly-iii .box > .box-header .btn { + color: #bec5cb; + } + + .skin-firefly-iii .box.box-info, + .skin-firefly-iii .box.box-primary, + .skin-firefly-iii .box.box-success, + .skin-firefly-iii .box.box-warning, + .skin-firefly-iii .box.box-danger { + border-top-width: 3px; + } + + .skin-firefly-iii .box.box-info { + border-top-color: #00c0ef; + } + + .skin-firefly-iii .box.box-primary { + border-top-color: #075383; + } + + .skin-firefly-iii .box.box-success { + border-top-color: #00a65a; + } + + .skin-firefly-iii .box.box-warning { + border-top-color: #ff851b; + } + + .skin-firefly-iii .box.box-danger { + border-top-color: #dd4b39; + } + + .skin-firefly-iii .main-header .navbar { + background-color: #272c30; + } + + .skin-firefly-iii .main-header .navbar .nav > li > a { + color: #bec5cb; + } + + .skin-firefly-iii .main-header .navbar .nav > li > a:hover, + .skin-firefly-iii .main-header .navbar .nav > li > a:active, + .skin-firefly-iii .main-header .navbar .nav > li > a:focus, + .skin-firefly-iii .main-header .navbar .nav .open > a, + .skin-firefly-iii .main-header .navbar .nav .open > a:hover, + .skin-firefly-iii .main-header .navbar .nav .open > a:focus, + .skin-firefly-iii .main-header .navbar .nav > .active > a { + background: rgba(0, 0, 0, 0.1); + color: #f6f6f6; + } + + .skin-firefly-iii .main-header .navbar .sidebar-toggle { + color: #bec5cb; + } + + .skin-firefly-iii .main-header .navbar .sidebar-toggle:hover { + color: #f6f6f6; + background: rgba(0, 0, 0, 0.1); + } + + .skin-firefly-iii .timeline li .timeline-item { + color: #bec5cb; + background-color: #272c30; + border-color: #353c42; + } + + .skin-firefly-iii .timeline li .timeline-header { + border-bottom-color: #353c42; + } + + .skin-firefly-iii .nav-stacked > li > a { + color: #bec5cb; + } + + .skin-firefly-iii .nav-stacked > li > a:hover { + color: white; + background-color: #1e2226; + } + + .skin-firefly-iii .content-wrapper, + .skin-firefly-iii .right-side { + background-color: #353c42; + } + + .skin-firefly-iii .main-footer, + .skin-firefly-iii .nav-tabs-custom { + background-color: #272c30; + border-top-color: #353c42; + color: #bec5cb; + } + + .skin-firefly-iii .main-footer .nav-tabs, + .skin-firefly-iii .nav-tabs-custom .nav-tabs { + border-bottom-color: #353c42; + } + + .skin-firefly-iii .main-footer .tab-content, + .skin-firefly-iii .nav-tabs-custom .tab-content { + background-color: #272c30; + } + + .skin-firefly-iii .nav-tabs-custom > .nav-tabs > li.active > a { + border-left-color: #353c42; + border-right-color: #353c42; + } + + .skin-firefly-iii .nav-tabs-custom > .nav-tabs.pull-right > li:first-of-type.active > a { + border-left-color: #353c42; + } + + .skin-firefly-iii .nav-tabs-custom > .nav-tabs > li { + color: #bec5cb; + } + + .skin-firefly-iii .nav-tabs-custom > .nav-tabs > li.active > a { + background-color: #272c30; + } + + .skin-firefly-iii .nav-tabs-custom > .nav-tabs > li > a { + color: #bec5cb; + } + + .skin-firefly-iii .form-group .input-group-addon, + .skin-firefly-iii .input-group .input-group-addon, + .skin-firefly-iii .form-group input, + .skin-firefly-iii .input-group input, + .skin-firefly-iii .form-group textarea, + .skin-firefly-iii .input-group textarea { + background-color: #353c42; + color: #bec5cb; + border: 1px solid #353c42; + } + + .skin-firefly-iii .list-group { + color: #bec5cb; + background-color: #272c30; + } + + .skin-firefly-iii .list-group .list-group-item { + border-color: #353c42; + background-color: #272c30; + } + + .skin-firefly-iii .input-group .input-group-addon { + border-right: 1px solid #272c30; + } + + .skin-firefly-iii .form-control { + border-color: #272c30; + background-color: #353c42; + } + + .skin-firefly-iii .select2 .select2-selection { + background-color: #353c42; + color: #bec5cb; + border: 1px solid #353c42; + } + + .skin-firefly-iii .select2 .select2-selection .select2-container--default, + .skin-firefly-iii .select2 .select2-selection .select2-selection--single, + .skin-firefly-iii .select2 .select2-selection .select2-selection--multiple, + .skin-firefly-iii .select2 .select2-selection .select2-selection__rendered { + color: #bec5cb; + } + + .skin-firefly-iii .select2-dropdown { + background-color: #353c42; + color: #bec5cb; + border: 1px solid #353c42; + } + + .skin-firefly-iii .select2-dropdown .select2-search__field { + background-color: #272c30; + color: #bec5cb; + border: 1px solid #353c42; + } + + .skin-firefly-iii .select2-container--default.select2-container--open { + background-color: #272c30; + } +} diff --git a/public/v1/lib/adminlte/css/skins/skin-light.css b/public/v1/lib/adminlte/css/skins/skin-light.css new file mode 100644 index 0000000000..0f1952330b --- /dev/null +++ b/public/v1/lib/adminlte/css/skins/skin-light.css @@ -0,0 +1,201 @@ +/* + * Skin: Blue + * ---------- + */ +@media (prefers-color-scheme: light) { + .skin-firefly-iii .main-header .navbar { + background-color: #3c8dbc; + } + + .skin-firefly-iii .main-header .navbar .nav > li > a { + color: #ffffff; + } + + .skin-firefly-iii .main-header .navbar .nav > li > a:hover, + .skin-firefly-iii .main-header .navbar .nav > li > a:active, + .skin-firefly-iii .main-header .navbar .nav > li > a:focus, + .skin-firefly-iii .main-header .navbar .nav .open > a, + .skin-firefly-iii .main-header .navbar .nav .open > a:hover, + .skin-firefly-iii .main-header .navbar .nav .open > a:focus, + .skin-firefly-iii .main-header .navbar .nav > .active > a { + background: rgba(0, 0, 0, 0.1); + color: #f6f6f6; + } + + .skin-firefly-iii .main-header .navbar .sidebar-toggle { + color: #ffffff; + } + + .skin-firefly-iii .main-header .navbar .sidebar-toggle:hover { + color: #f6f6f6; + background: rgba(0, 0, 0, 0.1); + } + + .skin-firefly-iii .main-header .navbar .sidebar-toggle { + color: #fff; + } + + .skin-firefly-iii .main-header .navbar .sidebar-toggle:hover { + background-color: #367fa9; + } + + @media (max-width: 767px) { + .skin-firefly-iii .main-header .navbar .dropdown-menu li.divider { + background-color: rgba(255, 255, 255, 0.1); + } + + .skin-firefly-iii .main-header .navbar .dropdown-menu li a { + color: #fff; + } + + .skin-firefly-iii .main-header .navbar .dropdown-menu li a:hover { + background: #367fa9; + } + } + .skin-firefly-iii .main-header .logo { + background-color: #3c8dbc; + color: #ffffff; + border-bottom: 0 solid transparent; + } + + .skin-firefly-iii .main-header .logo:hover { + background-color: #3b8ab8; + } + + .skin-firefly-iii .main-header li.user-header { + background-color: #3c8dbc; + } + + .skin-firefly-iii .content-header { + background: transparent; + } + + .skin-firefly-iii .wrapper, + .skin-firefly-iii .main-sidebar, + .skin-firefly-iii .left-side { + background-color: #f9fafc; + } + + .skin-firefly-iii .main-sidebar { + border-right: 1px solid #d2d6de; + } + + .skin-firefly-iii .user-panel > .info, + .skin-firefly-iii .user-panel > .info > a { + color: #444444; + } + + .skin-firefly-iii .sidebar-menu > li { + -webkit-transition: border-left-color 0.3s ease; + -o-transition: border-left-color 0.3s ease; + transition: border-left-color 0.3s ease; + } + + .skin-firefly-iii .sidebar-menu > li.header { + color: #848484; + background: #f9fafc; + } + + .skin-firefly-iii .sidebar-menu > li > a { + border-left: 3px solid transparent; + font-weight: 600; + } + + .skin-firefly-iii .sidebar-menu > li:hover > a, + .skin-firefly-iii .sidebar-menu > li.active > a { + color: #000000; + background: #f4f4f5; + } + + .skin-firefly-iii .sidebar-menu > li.active { + border-left-color: #3c8dbc; + } + + .skin-firefly-iii .sidebar-menu > li.active > a { + font-weight: 600; + } + + .skin-firefly-iii .sidebar-menu > li > .treeview-menu { + background: #f4f4f5; + } + + .skin-firefly-iii .sidebar a { + color: #444444; + } + + .skin-firefly-iii .sidebar a:hover { + text-decoration: none; + } + + .skin-firefly-iii .sidebar-menu .treeview-menu > li > a { + color: #777777; + } + + .skin-firefly-iii .sidebar-menu .treeview-menu > li.active > a, + .skin-firefly-iii .sidebar-menu .treeview-menu > li > a:hover { + color: #000000; + } + + .skin-firefly-iii .sidebar-menu .treeview-menu > li.active > a { + font-weight: 600; + } + + .skin-firefly-iii .sidebar-form { + border-radius: 3px; + border: 1px solid #d2d6de; + margin: 10px 10px; + } + + .skin-firefly-iii .sidebar-form input[type="text"], + .skin-firefly-iii .sidebar-form .btn { + box-shadow: none; + background-color: #fff; + border: 1px solid transparent; + height: 35px; + } + + .skin-firefly-iii .sidebar-form input[type="text"] { + color: #666; + border-top-left-radius: 2px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-bottom-left-radius: 2px; + } + + .skin-firefly-iii .sidebar-form input[type="text"]:focus, + .skin-firefly-iii .sidebar-form input[type="text"]:focus + .input-group-btn .btn { + background-color: #fff; + color: #666; + } + + .skin-firefly-iii .sidebar-form input[type="text"]:focus + .input-group-btn .btn { + border-left-color: #fff; + } + + .skin-firefly-iii .sidebar-form .btn { + color: #999; + border-top-left-radius: 0; + border-top-right-radius: 2px; + border-bottom-right-radius: 2px; + border-bottom-left-radius: 0; + } + + @media (min-width: 768px) { + .skin-firefly-iii.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu { + border-left: 1px solid #d2d6de; + } + } + .skin-firefly-iii .main-footer { + border-top-color: #d2d6de; + } + + .skin-blue.layout-top-nav .main-header > .logo { + background-color: #3c8dbc; + color: #ffffff; + border-bottom: 0 solid transparent; + } + + .skin-blue.layout-top-nav .main-header > .logo:hover { + background-color: #3b8ab8; + } +} diff --git a/resources/views/layout/default.twig b/resources/views/layout/default.twig index d1039ef92f..07006620de 100644 --- a/resources/views/layout/default.twig +++ b/resources/views/layout/default.twig @@ -28,7 +28,19 @@ {# the theme #} - + + + {# Firefly III customisations #} @@ -52,7 +64,7 @@ {% include 'partials.favicons' %} - +
From a5a95055c5a35e078bb0c245659cd0cdbb57459c Mon Sep 17 00:00:00 2001 From: James Cole Date: Sun, 29 Jan 2023 10:01:00 +0100 Subject: [PATCH 2/4] Various CSS fixes. --- .../v1/lib/adminlte/css/skins/skin-dark.css | 833 ++++++++++-------- .../v1/lib/adminlte/css/skins/skin-light.css | 7 +- 2 files changed, 472 insertions(+), 368 deletions(-) diff --git a/public/v1/lib/adminlte/css/skins/skin-dark.css b/public/v1/lib/adminlte/css/skins/skin-dark.css index 54c4137ff7..582a2497ee 100644 --- a/public/v1/lib/adminlte/css/skins/skin-dark.css +++ b/public/v1/lib/adminlte/css/skins/skin-dark.css @@ -1,370 +1,473 @@ /* - * Skin: Midnight Dark theme + * Skin: Firefly III (dark) * ------------ */ @media (prefers-color-scheme: dark) { - .skin-firefly-iii { - color: #bec5cb; - } - - .skin-firefly-iii h4 { - color: #44def1; - } - - .skin-firefly-iii .content-header > .breadcrumb > li > a { - color: #bec5cb; - } - - .skin-firefly-iii .table > thead > tr > th, - .skin-firefly-iii .table > tbody > tr > th, - .skin-firefly-iii .table > tfoot > tr > th, - .skin-firefly-iii .table > thead > tr > td, - .skin-firefly-iii .table > tbody > tr > td, - .skin-firefly-iii .table > tfoot > tr > td { - color: #bec5cb; - border-top: 0px; - } - - .skin-firefly-iii .table > thead > tr.odd, - .skin-firefly-iii .table > tbody > tr.odd, - .skin-firefly-iii .table > tfoot > tr.odd { - background-color: #2a2f34; - } - - .skin-firefly-iii .table > thead > tr.odd:hover, - .skin-firefly-iii .table > tbody > tr.odd:hover, - .skin-firefly-iii .table > tfoot > tr.odd:hover, - .skin-firefly-iii .table > thead > tr.even:hover, - .skin-firefly-iii .table > tbody > tr.even:hover, - .skin-firefly-iii .table > tfoot > tr.even:hover { - background-color: #1e2226; - } - - .skin-firefly-iii .table-bordered > thead > tr > th, - .skin-firefly-iii .table-bordered > tbody > tr > th, - .skin-firefly-iii .table-bordered > tfoot > tr > th, - .skin-firefly-iii .table-bordered > thead > tr > td, - .skin-firefly-iii .table-bordered > tbody > tr > td, - .skin-firefly-iii .table-bordered > tfoot > tr > td { - border: 1px solid #353c42; - } - - .skin-firefly-iii .dataTables_wrapper input[type='search'] { - border-radius: 4px; - background-color: #353c42; - border: 0; - color: #bec5cb; - } - - .skin-firefly-iii .dataTables_paginate .pagination li > a { - background-color: transparent !important; - border: 0; - } - - .skin-firefly-iii .wrapper, - .skin-firefly-iii .main-sidebar, - .skin-firefly-iii .left-side { - background-color: #272c30; - } - - .skin-firefly-iii .user-panel > .info, - .skin-firefly-iii .user-panel > .info > a { - color: #fff; - } - - .skin-firefly-iii .sidebar-menu > li.header { - color: #556068; - background: #1e2225; - } - - .skin-firefly-iii .sidebar-menu > li > a { - border-left: 3px solid transparent; - } - - .skin-firefly-iii .sidebar-menu > li:hover > a, - .skin-firefly-iii .sidebar-menu > li.active > a { - color: #ffffff; - background: #22272a; - border-left-color: #272c30; - } - - .skin-firefly-iii .sidebar-menu > li > .treeview-menu { - margin: 0 1px; - background: #32393e; - } - - .skin-firefly-iii .sidebar a { - color: #bec5cb; - } - - .skin-firefly-iii .sidebar a:hover { - text-decoration: none; - } - - .skin-firefly-iii .treeview-menu > li > a { - color: #949fa8; - } - - .skin-firefly-iii .treeview-menu > li.active > a, - .skin-firefly-iii .treeview-menu > li > a:hover { - color: #ffffff; - } - - .skin-firefly-iii .sidebar-form { - border-radius: 3px; - border: 1px solid #3e464c; - margin: 10px 10px; - } - - .skin-firefly-iii .sidebar-form input[type="text"], - .skin-firefly-iii .sidebar-form .btn { - box-shadow: none; - background-color: #3e464c; - border: 1px solid transparent; - height: 35px; - } - - .skin-firefly-iii .sidebar-form input[type="text"] { - color: #666; - border-top-left-radius: 2px; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: 2px; - } - - .skin-firefly-iii .sidebar-form input[type="text"]:focus, - .skin-firefly-iii .sidebar-form input[type="text"]:focus + .input-group-btn .btn { - background-color: #fff; - color: #666; - } - - .skin-firefly-iii .sidebar-form input[type="text"]:focus + .input-group-btn .btn { - border-left-color: #fff; - } - - .skin-firefly-iii .sidebar-form .btn { - color: #999; - border-top-left-radius: 0; - border-top-right-radius: 2px; - border-bottom-right-radius: 2px; - border-bottom-left-radius: 0; - } - - .skin-firefly-iii .box, - .skin-firefly-iii .box-footer, - .skin-firefly-iii .info-box, - .skin-firefly-iii .box-comment, - .skin-firefly-iii .comment-text, - .skin-firefly-iii .comment-text .username { - color: #bec5cb; - background-color: #272c30; - } - - .skin-firefly-iii .box-comments .box-comment { - border-bottom-color: #353c42; - } - - .skin-firefly-iii .box-footer { - border-top: 1px solid #353c42; - } - - .skin-firefly-iii .box-header.with-border { - border-bottom: 1px solid #353c42; - } - - .skin-firefly-iii .box-solid, - .skin-firefly-iii .box { - border: 1px solid #272c30; - } - - .skin-firefly-iii .box-solid > .box-header, - .skin-firefly-iii .box > .box-header { - color: #bec5cb; - background: #272c30; - background-color: #272c30; - } - - .skin-firefly-iii .box-solid > .box-header a, - .skin-firefly-iii .box > .box-header a, - .skin-firefly-iii .box-solid > .box-header .btn, - .skin-firefly-iii .box > .box-header .btn { - color: #bec5cb; - } - - .skin-firefly-iii .box.box-info, - .skin-firefly-iii .box.box-primary, - .skin-firefly-iii .box.box-success, - .skin-firefly-iii .box.box-warning, - .skin-firefly-iii .box.box-danger { - border-top-width: 3px; - } - - .skin-firefly-iii .box.box-info { - border-top-color: #00c0ef; - } - - .skin-firefly-iii .box.box-primary { - border-top-color: #075383; - } - - .skin-firefly-iii .box.box-success { - border-top-color: #00a65a; - } - - .skin-firefly-iii .box.box-warning { - border-top-color: #ff851b; - } - - .skin-firefly-iii .box.box-danger { - border-top-color: #dd4b39; - } - - .skin-firefly-iii .main-header .navbar { - background-color: #272c30; - } - - .skin-firefly-iii .main-header .navbar .nav > li > a { - color: #bec5cb; - } - - .skin-firefly-iii .main-header .navbar .nav > li > a:hover, - .skin-firefly-iii .main-header .navbar .nav > li > a:active, - .skin-firefly-iii .main-header .navbar .nav > li > a:focus, - .skin-firefly-iii .main-header .navbar .nav .open > a, - .skin-firefly-iii .main-header .navbar .nav .open > a:hover, - .skin-firefly-iii .main-header .navbar .nav .open > a:focus, - .skin-firefly-iii .main-header .navbar .nav > .active > a { - background: rgba(0, 0, 0, 0.1); - color: #f6f6f6; - } - - .skin-firefly-iii .main-header .navbar .sidebar-toggle { - color: #bec5cb; - } - - .skin-firefly-iii .main-header .navbar .sidebar-toggle:hover { - color: #f6f6f6; - background: rgba(0, 0, 0, 0.1); - } - - .skin-firefly-iii .timeline li .timeline-item { - color: #bec5cb; - background-color: #272c30; - border-color: #353c42; - } - - .skin-firefly-iii .timeline li .timeline-header { - border-bottom-color: #353c42; - } - - .skin-firefly-iii .nav-stacked > li > a { - color: #bec5cb; - } - - .skin-firefly-iii .nav-stacked > li > a:hover { - color: white; - background-color: #1e2226; - } - - .skin-firefly-iii .content-wrapper, - .skin-firefly-iii .right-side { - background-color: #353c42; - } - - .skin-firefly-iii .main-footer, - .skin-firefly-iii .nav-tabs-custom { - background-color: #272c30; - border-top-color: #353c42; - color: #bec5cb; - } - - .skin-firefly-iii .main-footer .nav-tabs, - .skin-firefly-iii .nav-tabs-custom .nav-tabs { - border-bottom-color: #353c42; - } - - .skin-firefly-iii .main-footer .tab-content, - .skin-firefly-iii .nav-tabs-custom .tab-content { - background-color: #272c30; - } - - .skin-firefly-iii .nav-tabs-custom > .nav-tabs > li.active > a { - border-left-color: #353c42; - border-right-color: #353c42; - } - - .skin-firefly-iii .nav-tabs-custom > .nav-tabs.pull-right > li:first-of-type.active > a { - border-left-color: #353c42; - } - - .skin-firefly-iii .nav-tabs-custom > .nav-tabs > li { - color: #bec5cb; - } - - .skin-firefly-iii .nav-tabs-custom > .nav-tabs > li.active > a { - background-color: #272c30; - } - - .skin-firefly-iii .nav-tabs-custom > .nav-tabs > li > a { - color: #bec5cb; - } - - .skin-firefly-iii .form-group .input-group-addon, - .skin-firefly-iii .input-group .input-group-addon, - .skin-firefly-iii .form-group input, - .skin-firefly-iii .input-group input, - .skin-firefly-iii .form-group textarea, - .skin-firefly-iii .input-group textarea { - background-color: #353c42; - color: #bec5cb; - border: 1px solid #353c42; - } - - .skin-firefly-iii .list-group { - color: #bec5cb; - background-color: #272c30; - } - - .skin-firefly-iii .list-group .list-group-item { - border-color: #353c42; - background-color: #272c30; - } - - .skin-firefly-iii .input-group .input-group-addon { - border-right: 1px solid #272c30; - } - - .skin-firefly-iii .form-control { - border-color: #272c30; - background-color: #353c42; - } - - .skin-firefly-iii .select2 .select2-selection { - background-color: #353c42; - color: #bec5cb; - border: 1px solid #353c42; - } - - .skin-firefly-iii .select2 .select2-selection .select2-container--default, - .skin-firefly-iii .select2 .select2-selection .select2-selection--single, - .skin-firefly-iii .select2 .select2-selection .select2-selection--multiple, - .skin-firefly-iii .select2 .select2-selection .select2-selection__rendered { - color: #bec5cb; - } - - .skin-firefly-iii .select2-dropdown { - background-color: #353c42; - color: #bec5cb; - border: 1px solid #353c42; - } - - .skin-firefly-iii .select2-dropdown .select2-search__field { - background-color: #272c30; - color: #bec5cb; - border: 1px solid #353c42; - } - - .skin-firefly-iii .select2-container--default.select2-container--open { - background-color: #272c30; - } + .skin-firefly-iii { + color: #bec5cb; + } + + .skin-firefly-iii h4 { + color: #44def1; + } + + .skin-firefly-iii .content-header > .breadcrumb > li > a { + color: #bec5cb; + } + + .skin-firefly-iii .table > thead > tr > th, + .skin-firefly-iii .table > tbody > tr > th, + .skin-firefly-iii .table > tfoot > tr > th, + .skin-firefly-iii .table > thead > tr > td, + .skin-firefly-iii .table > tbody > tr > td, + .skin-firefly-iii .table > tfoot > tr > td { + color: #bec5cb; + border-top: 0px; + } + + .skin-firefly-iii .table > thead > tr.odd, + .skin-firefly-iii .table > tbody > tr.odd, + .skin-firefly-iii .table > tfoot > tr.odd { + background-color: #2a2f34; + } + + .skin-firefly-iii .table > thead > tr.odd:hover, + .skin-firefly-iii .table > tbody > tr.odd:hover, + .skin-firefly-iii .table > tfoot > tr.odd:hover, + .skin-firefly-iii .table > thead > tr.even:hover, + .skin-firefly-iii .table > tbody > tr.even:hover, + .skin-firefly-iii .table > tfoot > tr.even:hover { + background-color: #1e2226; + } + + .skin-firefly-iii .table-bordered > thead > tr > th, + .skin-firefly-iii .table-bordered > tbody > tr > th, + .skin-firefly-iii .table-bordered > tfoot > tr > th, + .skin-firefly-iii .table-bordered > thead > tr > td, + .skin-firefly-iii .table-bordered > tbody > tr > td, + .skin-firefly-iii .table-bordered > tfoot > tr > td { + border: 1px solid #353c42; + } + + .skin-firefly-iii .dataTables_wrapper input[type='search'] { + border-radius: 4px; + background-color: #353c42; + border: 0; + color: #bec5cb; + } + + .skin-firefly-iii .dataTables_paginate .pagination li > a { + background-color: transparent !important; + border: 0; + } + + .skin-firefly-iii .wrapper, + .skin-firefly-iii .main-sidebar, + .skin-firefly-iii .left-side { + background-color: #272c30; + } + + .skin-firefly-iii .user-panel > .info, + .skin-firefly-iii .user-panel > .info > a { + color: #fff; + } + + .skin-firefly-iii .sidebar-menu > li.header { + color: #556068; + background: #1e2225; + } + + .skin-firefly-iii .sidebar-menu > li > a { + border-left: 3px solid transparent; + } + + .skin-firefly-iii .sidebar-menu > li:hover > a, + .skin-firefly-iii .sidebar-menu > li.active > a { + color: #ffffff; + background: #22272a; + border-left-color: #272c30; + } + + .skin-firefly-iii .sidebar-menu > li > .treeview-menu { + margin: 0 1px; + background: #32393e; + } + + .skin-firefly-iii .sidebar a { + color: #bec5cb; + } + + .skin-firefly-iii .sidebar a:hover { + text-decoration: none; + } + + .skin-firefly-iii .treeview-menu > li > a { + color: #949fa8; + } + + .skin-firefly-iii .treeview-menu > li.active > a, + .skin-firefly-iii .treeview-menu > li > a:hover { + color: #ffffff; + } + + .skin-firefly-iii .sidebar-form { + border-radius: 3px; + border: 1px solid #3e464c; + margin: 10px 10px; + } + + .skin-firefly-iii .sidebar-form input[type="text"], + .skin-firefly-iii .sidebar-form .btn { + box-shadow: none; + background-color: #3e464c; + border: 1px solid transparent; + height: 35px; + } + + .skin-firefly-iii .sidebar-form input[type="text"] { + color: #666; + border-top-left-radius: 2px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-bottom-left-radius: 2px; + } + + .skin-firefly-iii .sidebar-form input[type="text"]:focus, + .skin-firefly-iii .sidebar-form input[type="text"]:focus + .input-group-btn .btn { + background-color: #fff; + color: #666; + } + + .skin-firefly-iii .sidebar-form input[type="text"]:focus + .input-group-btn .btn { + border-left-color: #fff; + } + + .skin-firefly-iii .sidebar-form .btn { + color: #999; + border-top-left-radius: 0; + border-top-right-radius: 2px; + border-bottom-right-radius: 2px; + border-bottom-left-radius: 0; + } + + .skin-firefly-iii .box, + .skin-firefly-iii .box-footer, + .skin-firefly-iii .info-box, + .skin-firefly-iii .box-comment, + .skin-firefly-iii .comment-text, + .skin-firefly-iii .comment-text .username { + color: #bec5cb; + background-color: #272c30; + } + + .skin-firefly-iii .box-comments .box-comment { + border-bottom-color: #353c42; + } + + .skin-firefly-iii .box-footer { + border-top: 1px solid #353c42; + } + + .skin-firefly-iii .box-header.with-border { + border-bottom: 1px solid #353c42; + } + + .skin-firefly-iii .box-solid, + .skin-firefly-iii .box { + border: 1px solid #272c30; + } + + .skin-firefly-iii .box-solid > .box-header, + .skin-firefly-iii .box > .box-header { + color: #bec5cb; + background: #272c30; + background-color: #272c30; + } + + .skin-firefly-iii .box-solid > .box-header a, + .skin-firefly-iii .box > .box-header a, + .skin-firefly-iii .box-solid > .box-header .btn, + .skin-firefly-iii .box > .box-header .btn { + color: #bec5cb; + } + + .skin-firefly-iii .box.box-info, + .skin-firefly-iii .box.box-primary, + .skin-firefly-iii .box.box-success, + .skin-firefly-iii .box.box-warning, + .skin-firefly-iii .box.box-danger { + border-top-width: 3px; + } + + .skin-firefly-iii .box.box-info { + border-top-color: #004d60; + } + + .skin-firefly-iii .box.box-primary { + border-top-color: #075383; + } + + .skin-firefly-iii .box.box-success { + border-top-color: #006738; + } + + .skin-firefly-iii .box.box-warning { + border-top-color: #ff851b; + } + + .skin-firefly-iii .box.box-danger { + border-top-color: #dd4b39; + } + + .skin-firefly-iii .main-header .navbar { + background-color: #272c30; + } + + .skin-firefly-iii .main-header .navbar .nav > li > a { + color: #bec5cb; + } + + .skin-firefly-iii .main-header .navbar .nav > li > a:hover, + .skin-firefly-iii .main-header .navbar .nav > li > a:active, + .skin-firefly-iii .main-header .navbar .nav > li > a:focus, + .skin-firefly-iii .main-header .navbar .nav .open > a, + .skin-firefly-iii .main-header .navbar .nav .open > a:hover, + .skin-firefly-iii .main-header .navbar .nav .open > a:focus, + .skin-firefly-iii .main-header .navbar .nav > .active > a { + background: rgba(0, 0, 0, 0.1); + color: #f6f6f6; + } + + .skin-firefly-iii .main-header .navbar .sidebar-toggle { + color: #bec5cb; + } + + .skin-firefly-iii .main-header .navbar .sidebar-toggle:hover { + color: #f6f6f6; + background: rgba(0, 0, 0, 0.1); + } + + .skin-firefly-iii .timeline li .timeline-item { + color: #bec5cb; + background-color: #272c30; + border-color: #353c42; + } + + .skin-firefly-iii .timeline li .timeline-header { + border-bottom-color: #353c42; + } + + .skin-firefly-iii .nav-stacked > li > a { + color: #bec5cb; + } + + .skin-firefly-iii .nav-stacked > li > a:hover { + color: white; + background-color: #1e2226; + } + + .skin-firefly-iii .content-wrapper, + .skin-firefly-iii .right-side { + background-color: #353c42; + } + + .skin-firefly-iii .main-footer, + .skin-firefly-iii .nav-tabs-custom { + background-color: #272c30; + border-top-color: #353c42; + color: #bec5cb; + } + + .skin-firefly-iii .main-footer .nav-tabs, + .skin-firefly-iii .nav-tabs-custom .nav-tabs { + border-bottom-color: #353c42; + } + + .skin-firefly-iii .main-footer .tab-content, + .skin-firefly-iii .nav-tabs-custom .tab-content { + background-color: #272c30; + } + + .skin-firefly-iii .nav-tabs-custom > .nav-tabs > li.active > a { + border-left-color: #353c42; + border-right-color: #353c42; + } + + .skin-firefly-iii .nav-tabs-custom > .nav-tabs.pull-right > li:first-of-type.active > a { + border-left-color: #353c42; + } + + .skin-firefly-iii .nav-tabs-custom > .nav-tabs > li { + color: #bec5cb; + } + + .skin-firefly-iii .nav-tabs-custom > .nav-tabs > li.active > a { + background-color: #272c30; + } + + .skin-firefly-iii .nav-tabs-custom > .nav-tabs > li > a { + color: #bec5cb; + } + + .skin-firefly-iii .form-group .input-group-addon, + .skin-firefly-iii .input-group .input-group-addon, + .skin-firefly-iii .form-group input, + .skin-firefly-iii .input-group input, + .skin-firefly-iii .form-group textarea, + .skin-firefly-iii .input-group textarea { + background-color: #353c42; + color: #bec5cb; + border: 1px solid #353c42; + } + + .skin-firefly-iii .list-group { + color: #bec5cb; + background-color: #272c30; + } + + .skin-firefly-iii .list-group .list-group-item { + border-color: #353c42; + background-color: #272c30; + } + + .skin-firefly-iii .input-group .input-group-addon { + border-right: 1px solid #272c30; + } + + .skin-firefly-iii .form-control { + border-color: #272c30; + background-color: #353c42; + } + + .skin-firefly-iii .select2 .select2-selection { + background-color: #353c42; + color: #bec5cb; + border: 1px solid #353c42; + } + + .skin-firefly-iii .select2 .select2-selection .select2-container--default, + .skin-firefly-iii .select2 .select2-selection .select2-selection--single, + .skin-firefly-iii .select2 .select2-selection .select2-selection--multiple, + .skin-firefly-iii .select2 .select2-selection .select2-selection__rendered { + color: #bec5cb; + } + + .skin-firefly-iii .select2-dropdown { + background-color: #353c42; + color: #bec5cb; + border: 1px solid #353c42; + } + + .skin-firefly-iii .select2-dropdown .select2-search__field { + background-color: #272c30; + color: #bec5cb; + border: 1px solid #353c42; + } + + .skin-firefly-iii .select2-container--default.select2-container--open { + background-color: #272c30; + } + + /** + Overrule colors to make them darker + Move to second box + */ + .bg-aqua-gradient { + background: #004d60 !important; + background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #004d60), color-stop(1, #075164)) !important; + background: -ms-linear-gradient(bottom, #004d60, #075164) !important; + background: -moz-linear-gradient(center bottom, #004d60 0%, #075164 100%) !important; + background: -o-linear-gradient(#075164, #004d60) !important; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#075164', endColorstr='#004d60', GradientType=0) !important; + color: #fff; + } + + .bg-teal-gradient { + background: #1a5d5d !important; + background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #1a5d5d), color-stop(1, #376464)) !important; + background: -ms-linear-gradient(bottom, #1a5d5d, #376464) !important; + background: -moz-linear-gradient(center bottom, #1a5d5d 0%, #376464 100%) !important; + background: -o-linear-gradient(#376464, #1a5d5d) !important; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#376464', endColorstr='#1a5d5d', GradientType=0) !important; + color: #fff; + } + + .bg-green-gradient { + background: #006738 !important; + background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #006738), color-stop(1, #005f34)) !important; + background: -ms-linear-gradient(bottom, #006738, #005f34) !important; + background: -moz-linear-gradient(center bottom, #006738 0%, #005f34 100%) !important; + background: -o-linear-gradient(#005f34, #006738) !important; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#005f34', endColorstr='#006738', GradientType=0) !important; + color: #fff; + } + + .bg-blue-gradient { + background: #003e62 !important; + background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #003e62), color-stop(1, #004065)) !important; + background: -ms-linear-gradient(bottom, #003e62, #004065) !important; + background: -moz-linear-gradient(center bottom, #003e62 0%, #004065 100%) !important; + background: -o-linear-gradient(#004065, #003e62) !important; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#004065', endColorstr='#003e62', GradientType=0) !important; + color: #fff; + } + + /* + Fix modals + */ + .modal-content { + background-color: #272c30; + } + + .btn-default { + background: #343a40; + color: #bec5cb; + border-color: #282d32; + } + + .btn-default:hover, + .btn-default:active, + .btn-default.hover { + background: #282d32; + color: #bec5cb; + border-color: #343a40; + } + + .open > .dropdown-toggle.btn-default:focus, .open > .dropdown-toggle.btn-default:hover, + .open > .dropdown-toggle.btn-default { + background: #343a40; + color: #bec5cb; + } + + /* + 1 box darker + */ + .btn-success { + background-color: #007741; + } + + a.list-group-item, button.list-group-item { + color: #bec5cb; + } + .progress { + background: #696c71 + } + .progress-bar { + background-color: #1b4365; + } + + .dropdown-menu { + background-color: #343a40; + border-color: #262a2f; + } + + .dropdown-menu > li > a:hover { + background-color: #505963; + color: #333; + } + + /** + dropdown menu, color #dee2e6, bg #343a40 + */ + } diff --git a/public/v1/lib/adminlte/css/skins/skin-light.css b/public/v1/lib/adminlte/css/skins/skin-light.css index 0f1952330b..e84d4bb07a 100644 --- a/public/v1/lib/adminlte/css/skins/skin-light.css +++ b/public/v1/lib/adminlte/css/skins/skin-light.css @@ -1,5 +1,5 @@ /* - * Skin: Blue + * Skin: Firefly III light * ---------- */ @media (prefers-color-scheme: light) { @@ -189,13 +189,14 @@ border-top-color: #d2d6de; } - .skin-blue.layout-top-nav .main-header > .logo { + .skin-firefly-iii.layout-top-nav .main-header > .logo { background-color: #3c8dbc; color: #ffffff; border-bottom: 0 solid transparent; } - .skin-blue.layout-top-nav .main-header > .logo:hover { + .skin-firefly-iii.layout-top-nav .main-header > .logo:hover { background-color: #3b8ab8; } + } From 9bffa867066916aa52b354e0d8f7d095b7346ac3 Mon Sep 17 00:00:00 2001 From: James Cole Date: Sun, 29 Jan 2023 14:49:53 +0100 Subject: [PATCH 3/4] Various CSS improvements --- public/v1/css/bootstrap-multiselect.css | 81 ++- public/v1/css/bootstrap-sortable.css | 12 +- public/v1/css/daterangepicker.css | 133 ++-- public/v1/css/firefly.css | 25 - .../v1/lib/adminlte/css/skins/skin-dark.css | 17 +- public/v1/lib/intro/introjs.min.css | 588 +++++++++++++++++- resources/views/layout/default.twig | 1 + 7 files changed, 784 insertions(+), 73 deletions(-) diff --git a/public/v1/css/bootstrap-multiselect.css b/public/v1/css/bootstrap-multiselect.css index 5acaf9f7ab..75a8e812ac 100755 --- a/public/v1/css/bootstrap-multiselect.css +++ b/public/v1/css/bootstrap-multiselect.css @@ -1 +1,80 @@ -span.multiselect-native-select{position:relative}span.multiselect-native-select select{border:0!important;clip:rect(0 0 0 0)!important;height:1px!important;margin:-1px -1px -1px -3px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;left:50%;top:30px}.multiselect-container{position:absolute;list-style-type:none;margin:0;padding:0}.multiselect-container .input-group{margin:5px}.multiselect-container>li{padding:0}.multiselect-container>li>a.multiselect-all label{font-weight:700}.multiselect-container>li.multiselect-group label{margin:0;padding:3px 20px 3px 20px;height:100%;font-weight:700}.multiselect-container>li.multiselect-group-clickable label{cursor:pointer}.multiselect-container>li>a{padding:0}.multiselect-container>li>a>label{margin:0;height:100%;cursor:pointer;font-weight:400;padding:3px 20px 3px 40px}.multiselect-container>li>a>label.radio,.multiselect-container>li>a>label.checkbox{margin:0}.multiselect-container>li>a>label>input[type=checkbox]{margin-bottom:5px}.btn-group>.btn-group:nth-child(2)>.multiselect.btn{border-top-left-radius:4px;border-bottom-left-radius:4px}.form-inline .multiselect-container label.checkbox,.form-inline .multiselect-container label.radio{padding:3px 20px 3px 40px}.form-inline .multiselect-container li a label.checkbox input[type=checkbox],.form-inline .multiselect-container li a label.radio input[type=radio]{margin-left:-20px;margin-right:0} +span.multiselect-native-select { + position: relative +} + +span.multiselect-native-select select { + border: 0 !important; + clip: rect(0 0 0 0) !important; + height: 1px !important; + margin: -1px -1px -1px -3px !important; + overflow: hidden !important; + padding: 0 !important; + position: absolute !important; + width: 1px !important; + left: 50%; + top: 30px +} + +.multiselect-container { + position: absolute; + list-style-type: none; + margin: 0; + padding: 0 +} + +.multiselect-container .input-group { + margin: 5px +} + +.multiselect-container > li { + padding: 0 +} + +.multiselect-container > li > a.multiselect-all label { + font-weight: 700 +} + +.multiselect-container > li.multiselect-group label { + margin: 0; + padding: 3px 20px 3px 20px; + height: 100%; + font-weight: 700 +} + +.multiselect-container > li.multiselect-group-clickable label { + cursor: pointer +} + +.multiselect-container > li > a { + padding: 0 +} + +.multiselect-container > li > a > label { + margin: 0; + height: 100%; + cursor: pointer; + font-weight: 400; + padding: 3px 20px 3px 40px +} + +.multiselect-container > li > a > label.radio, .multiselect-container > li > a > label.checkbox { + margin: 0 +} + +.multiselect-container > li > a > label > input[type=checkbox] { + margin-bottom: 5px +} + +.btn-group > .btn-group:nth-child(2) > .multiselect.btn { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px +} + +.form-inline .multiselect-container label.checkbox, .form-inline .multiselect-container label.radio { + padding: 3px 20px 3px 40px +} + +.form-inline .multiselect-container li a label.checkbox input[type=checkbox], .form-inline .multiselect-container li a label.radio input[type=radio] { + margin-left: -20px; + margin-right: 0 +} diff --git a/public/v1/css/bootstrap-sortable.css b/public/v1/css/bootstrap-sortable.css index fe3fe8ab05..dd987adbdf 100755 --- a/public/v1/css/bootstrap-sortable.css +++ b/public/v1/css/bootstrap-sortable.css @@ -100,9 +100,15 @@ table.sortable > thead th:not([data-defaultsort=disabled]) { top: 0; left: 0; } - -table.sortable > thead th:hover:not([data-defaultsort=disabled]) { - background: #efefef; +@media (prefers-color-scheme: light) { + table.sortable > thead th:hover:not([data-defaultsort=disabled]) { + background: #efefef; + } +} +@media (prefers-color-scheme: dark) { + table.sortable > thead th:hover:not([data-defaultsort=disabled]) { + background: #2a2f34; + } } table.sortable > thead th div.mozilla { diff --git a/public/v1/css/daterangepicker.css b/public/v1/css/daterangepicker.css index e9ddc376aa..a74eb9670a 100755 --- a/public/v1/css/daterangepicker.css +++ b/public/v1/css/daterangepicker.css @@ -1,20 +1,95 @@ -.daterangepicker { - position: absolute; - color: inherit; - background-color: #fff; - border-radius: 4px; - border: 1px solid #ddd; - width: 278px; - max-width: none; - padding: 0; - margin-top: 7px; - top: 100px; - left: 20px; - z-index: 3001; - display: none; - font-family: sans-serif, Arial; - font-size: 15px; - line-height: 1em; +@media (prefers-color-scheme: light) { + + .daterangepicker { + position: absolute; + color: inherit; + background-color: #fff; + border-radius: 4px; + border: 1px solid #ddd; + width: 278px; + max-width: none; + padding: 0; + margin-top: 7px; + top: 100px; + left: 20px; + z-index: 3001; + display: none; + font-family: sans-serif, Arial; + font-size: 15px; + line-height: 1em; + } + .daterangepicker .calendar-table { + border: 1px solid #fff; + border-radius: 4px; + background-color: #fff; + } + .daterangepicker td.available:hover, .daterangepicker th.available:hover { + background-color: #eee; + border-color: transparent; + color: inherit; + } + .daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date { + background-color: #fff; + border-color: transparent; + color: #999; + } + + .daterangepicker td.in-range { + background-color: #ebf4f8; + border-color: transparent; + color: #000; + border-radius: 0; + } + +} +@media (prefers-color-scheme: dark) { + /** + fff = 282d32 + eee = 31373e + ddd = 3f4750 + ebf4f8 = 4b4f50 + */ + .daterangepicker { + position: absolute; + color: inherit; + background-color: #282d32; + border-radius: 4px; + border: 1px solid #3f4750; + width: 278px; + max-width: none; + padding: 0; + margin-top: 7px; + top: 100px; + left: 20px; + z-index: 3001; + display: none; + font-family: sans-serif, Arial; + font-size: 15px; + line-height: 1em; + } + .daterangepicker .calendar-table { + border: 1px solid #282d32; + border-radius: 4px; + background-color: #282d32; + } + .daterangepicker td.available:hover, .daterangepicker th.available:hover { + background-color: #31373e; + border-color: transparent; + color: inherit; + } + .daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date { + background-color: #282d32; + border-color: transparent; + color: #999; + } + + .daterangepicker td.in-range { + background-color: #4b4f50; + border-color: transparent; + color: #000; + border-radius: 0; + } + } .daterangepicker:before, .daterangepicker:after { @@ -158,12 +233,6 @@ cursor: pointer; } -.daterangepicker .calendar-table { - border: 1px solid #fff; - border-radius: 4px; - background-color: #fff; -} - .daterangepicker .calendar-table table { width: 100%; margin: 0; @@ -171,29 +240,13 @@ border-collapse: collapse; } -.daterangepicker td.available:hover, .daterangepicker th.available:hover { - background-color: #eee; - border-color: transparent; - color: inherit; -} + .daterangepicker td.week, .daterangepicker th.week { font-size: 80%; color: #ccc; } -.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date { - background-color: #fff; - border-color: transparent; - color: #999; -} - -.daterangepicker td.in-range { - background-color: #ebf4f8; - border-color: transparent; - color: #000; - border-radius: 0; -} .daterangepicker td.start-date { border-radius: 4px 0 0 4px; diff --git a/public/v1/css/firefly.css b/public/v1/css/firefly.css index 13d1eb13ec..19c63481c3 100644 --- a/public/v1/css/firefly.css +++ b/public/v1/css/firefly.css @@ -30,24 +30,6 @@ input.ti-new-tag-input { font-family:"Source Sans Pro", "Helvetica Neue",Helvetica,Arial,sans-serif !important; } -.split_amount_input { - width: 40%; - border-radius: 0; - height: 36px; - padding: 6px 12px; - background-color: #fff; - background-image: none; - border: 1px solid #ccd0d2; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); - -webkit-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; - -webkit-transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out; - transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out; - transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; - transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out; - -} - .autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; } .autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; } .autocomplete-selected { background: #F0F0F0; } @@ -55,13 +37,6 @@ input.ti-new-tag-input { .autocomplete-group { padding: 2px 5px; font-weight: bold;} .autocomplete-group strong { display: block; border-bottom: 1px solid #000; } -.split_amount_input:focus { - border-color: #98cbe8; - outline: 0; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(152, 203, 232, .6); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(152, 203, 232, .6); -} - #daterange { cursor: pointer; } diff --git a/public/v1/lib/adminlte/css/skins/skin-dark.css b/public/v1/lib/adminlte/css/skins/skin-dark.css index 582a2497ee..2237145343 100644 --- a/public/v1/lib/adminlte/css/skins/skin-dark.css +++ b/public/v1/lib/adminlte/css/skins/skin-dark.css @@ -22,7 +22,7 @@ .skin-firefly-iii .table > tbody > tr > td, .skin-firefly-iii .table > tfoot > tr > td { color: #bec5cb; - border-top: 0px; + border-top: 0; } .skin-firefly-iii .table > thead > tr.odd, @@ -65,6 +65,7 @@ .skin-firefly-iii .main-sidebar, .skin-firefly-iii .left-side { background-color: #272c30; + /* 454d55 */ } .skin-firefly-iii .user-panel > .info, @@ -180,7 +181,6 @@ .skin-firefly-iii .box-solid > .box-header, .skin-firefly-iii .box > .box-header { color: #bec5cb; - background: #272c30; background-color: #272c30; } @@ -469,5 +469,16 @@ /** dropdown menu, color #dee2e6, bg #343a40 */ - + /** + Table (odd) + */ + .table-striped > tbody > tr:nth-of-type(2n+1) { + background-color: #2a2f34; + } + .table-hover > tbody > tr:hover { + background-color: #2a2f34; + } + .ti-autocomplete {background: #353c42 !important;color:#fff;} + .ti-input {border: 1px solid #353c42 !important;} + .vue-tags-input {background: #353c42 !important;} } diff --git a/public/v1/lib/intro/introjs.min.css b/public/v1/lib/intro/introjs.min.css index 4f508ed90c..48b14e668b 100755 --- a/public/v1/lib/intro/introjs.min.css +++ b/public/v1/lib/intro/introjs.min.css @@ -1 +1,587 @@ -.introjs-overlay{position:absolute;box-sizing:content-box;z-index:999999;background-color:#000;opacity:0;background:-moz-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);background:-webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,rgba(0,0,0,0.4)),color-stop(100%,rgba(0,0,0,0.9)));background:-webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);background:-o-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);background:-ms-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);background:radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000',endColorstr='#e6000000',GradientType=1)";-ms-filter:"alpha(opacity=50)";filter:alpha(opacity=50);-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.introjs-fixParent{z-index:auto!important;opacity:1.0!important;-webkit-transform:none!important;-moz-transform:none!important;-ms-transform:none!important;-o-transform:none!important;transform:none!important}.introjs-showElement,tr.introjs-showElement>td,tr.introjs-showElement>th{z-index:9999999!important}.introjs-disableInteraction{z-index:99999999!important;position:absolute;background-color:white;opacity:0;filter:alpha(opacity=0)}.introjs-relativePosition,tr.introjs-showElement>td,tr.introjs-showElement>th{position:relative}.introjs-helperLayer{box-sizing:content-box;position:absolute;z-index:9999998;background-color:#FFF;background-color:rgba(255,255,255,.9);border:1px solid #777;border:1px solid rgba(0,0,0,.5);border-radius:4px;box-shadow:0 2px 15px rgba(0,0,0,.4);-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.introjs-tooltipReferenceLayer{box-sizing:content-box;position:absolute;visibility:hidden;z-index:10000000;background-color:transparent;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.introjs-helperLayer *,.introjs-helperLayer *:before,.introjs-helperLayer *:after{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;-ms-box-sizing:content-box;-o-box-sizing:content-box;box-sizing:content-box}.introjs-helperNumberLayer{box-sizing:content-box;position:absolute;visibility:visible;top:-16px;left:-16px;z-index:9999999999!important;padding:2px;font-family:Arial,verdana,tahoma;font-size:13px;font-weight:bold;color:white;text-align:center;text-shadow:1px 1px 1px rgba(0,0,0,.3);background:#ff3019;background:-webkit-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ff3019),color-stop(100%,#cf0404));background:-moz-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-ms-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-o-linear-gradient(top,#ff3019 0,#cf0404 100%);background:linear-gradient(to bottom,#ff3019 0,#cf0404 100%);width:20px;height:20px;line-height:20px;border:3px solid white;border-radius:50%;filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3019', endColorstr='#cf0404', GradientType=0)";filter:"progid:DXImageTransform.Microsoft.Shadow(direction=135, strength=2, color=ff0000)";box-shadow:0 2px 5px rgba(0,0,0,.4)}.introjs-arrow{border:5px solid white;content:'';position:absolute}.introjs-arrow.top{top:-10px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:white;border-left-color:transparent}.introjs-arrow.top-right{top:-10px;right:10px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:white;border-left-color:transparent}.introjs-arrow.top-middle{top:-10px;left:50%;margin-left:-5px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:white;border-left-color:transparent}.introjs-arrow.right{right:-10px;top:10px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:white}.introjs-arrow.right-bottom{bottom:10px;right:-10px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:white}.introjs-arrow.bottom{bottom:-10px;border-top-color:white;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}.introjs-arrow.left{left:-10px;top:10px;border-top-color:transparent;border-right-color:white;border-bottom-color:transparent;border-left-color:transparent}.introjs-arrow.left-bottom{left:-10px;bottom:10px;border-top-color:transparent;border-right-color:white;border-bottom-color:transparent;border-left-color:transparent}.introjs-tooltip{box-sizing:content-box;position:absolute;visibility:visible;padding:10px;background-color:white;min-width:200px;max-width:300px;border-radius:3px;box-shadow:0 1px 10px rgba(0,0,0,.4);-webkit-transition:opacity .1s ease-out;-moz-transition:opacity .1s ease-out;-ms-transition:opacity .1s ease-out;-o-transition:opacity .1s ease-out;transition:opacity .1s ease-out}.introjs-tooltipbuttons{text-align:right;white-space:nowrap}.introjs-button{box-sizing:content-box;position:relative;overflow:visible;display:inline-block;padding:.3em .8em;border:1px solid #d4d4d4;margin:0;text-decoration:none;text-shadow:1px 1px 0 #fff;font:11px/normal sans-serif;color:#333;white-space:nowrap;cursor:pointer;outline:0;background-color:#ececec;background-image:-webkit-gradient(linear,0 0,0 100%,from(#f4f4f4),to(#ececec));background-image:-moz-linear-gradient(#f4f4f4,#ececec);background-image:-o-linear-gradient(#f4f4f4,#ececec);background-image:linear-gradient(#f4f4f4,#ececec);-webkit-background-clip:padding;-moz-background-clip:padding;-o-background-clip:padding-box;-webkit-border-radius:.2em;-moz-border-radius:.2em;border-radius:.2em;zoom:1;*display:inline;margin-top:10px}.introjs-button:hover{border-color:#bcbcbc;text-decoration:none;box-shadow:0 1px 1px #e3e3e3}.introjs-button:focus,.introjs-button:active{background-image:-webkit-gradient(linear,0 0,0 100%,from(#ececec),to(#f4f4f4));background-image:-moz-linear-gradient(#ececec,#f4f4f4);background-image:-o-linear-gradient(#ececec,#f4f4f4);background-image:linear-gradient(#ececec,#f4f4f4)}.introjs-button::-moz-focus-inner{padding:0;border:0}.introjs-skipbutton{box-sizing:content-box;margin-right:5px;color:#7a7a7a}.introjs-prevbutton{-webkit-border-radius:.2em 0 0 .2em;-moz-border-radius:.2em 0 0 .2em;border-radius:.2em 0 0 .2em;border-right:0}.introjs-prevbutton.introjs-fullbutton{border:1px solid #d4d4d4;-webkit-border-radius:.2em;-moz-border-radius:.2em;border-radius:.2em}.introjs-nextbutton{-webkit-border-radius:0 .2em .2em 0;-moz-border-radius:0 .2em .2em 0;border-radius:0 .2em .2em 0}.introjs-nextbutton.introjs-fullbutton{-webkit-border-radius:.2em;-moz-border-radius:.2em;border-radius:.2em}.introjs-disabled,.introjs-disabled:hover,.introjs-disabled:focus{color:#9a9a9a;border-color:#d4d4d4;box-shadow:none;cursor:default;background-color:#f4f4f4;background-image:none;text-decoration:none}.introjs-hidden{display:none}.introjs-bullets{text-align:center}.introjs-bullets ul{box-sizing:content-box;clear:both;margin:15px auto 0;padding:0;display:inline-block}.introjs-bullets ul li{box-sizing:content-box;list-style:none;float:left;margin:0 2px}.introjs-bullets ul li a{box-sizing:content-box;display:block;width:6px;height:6px;background:#ccc;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;text-decoration:none;cursor:pointer}.introjs-bullets ul li a:hover{background:#999}.introjs-bullets ul li a.active{background:#999}.introjs-progress{box-sizing:content-box;overflow:hidden;height:10px;margin:10px 0 5px 0;border-radius:4px;background-color:#ecf0f1}.introjs-progressbar{box-sizing:content-box;float:left;width:0;height:100%;font-size:10px;line-height:10px;text-align:center;background-color:#08c}.introjsFloatingElement{position:absolute;height:0;width:0;left:50%;top:50%}.introjs-fixedTooltip{position:fixed}.introjs-hint{box-sizing:content-box;position:absolute;background:transparent;width:20px;height:15px;cursor:pointer}.introjs-hint:focus{border:0;outline:0}.introjs-hidehint{display:none}.introjs-fixedhint{position:fixed}.introjs-hint:hover>.introjs-hint-pulse{border:5px solid rgba(60,60,60,0.57)}.introjs-hint-pulse{box-sizing:content-box;width:10px;height:10px;border:5px solid rgba(60,60,60,0.27);-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px;background-color:rgba(136,136,136,0.24);z-index:10;position:absolute;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out}.introjs-hint-no-anim .introjs-hint-dot{-webkit-animation:none;-moz-animation:none;animation:none}.introjs-hint-dot{box-sizing:content-box;border:10px solid rgba(146,146,146,0.36);background:transparent;-webkit-border-radius:60px;-moz-border-radius:60px;border-radius:60px;height:50px;width:50px;-webkit-animation:introjspulse 3s ease-out;-moz-animation:introjspulse 3s ease-out;animation:introjspulse 3s ease-out;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;animation-iteration-count:infinite;position:absolute;top:-25px;left:-25px;z-index:1;opacity:0}@-webkit-keyframes introjspulse{0%{-webkit-transform:scale(0);opacity:.0}25%{-webkit-transform:scale(0);opacity:.1}50%{-webkit-transform:scale(0.1);opacity:.3}75%{-webkit-transform:scale(0.5);opacity:.5}100%{-webkit-transform:scale(1);opacity:.0}}@-moz-keyframes introjspulse{0%{-moz-transform:scale(0);opacity:.0}25%{-moz-transform:scale(0);opacity:.1}50%{-moz-transform:scale(0.1);opacity:.3}75%{-moz-transform:scale(0.5);opacity:.5}100%{-moz-transform:scale(1);opacity:.0}}@keyframes introjspulse{0%{transform:scale(0);opacity:.0}25%{transform:scale(0);opacity:.1}50%{transform:scale(0.1);opacity:.3}75%{transform:scale(0.5);opacity:.5}100%{transform:scale(1);opacity:.0}} \ No newline at end of file +.introjs-overlay { + position: absolute; + box-sizing: content-box; + z-index: 999999; + background-color: #000; + opacity: 0; + background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.9) 100%); + background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0, 0, 0, 0.4)), color-stop(100%, rgba(0, 0, 0, 0.9))); + background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.9) 100%); + background: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.9) 100%); + background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.9) 100%); + background: radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.9) 100%); + filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000',endColorstr='#e6000000',GradientType=1)"; + -ms-filter: "alpha(opacity=50)"; + filter: alpha(opacity=50); + -webkit-transition: all .3s ease-out; + -moz-transition: all .3s ease-out; + -ms-transition: all .3s ease-out; + -o-transition: all .3s ease-out; + transition: all .3s ease-out +} + +.introjs-fixParent { + z-index: auto !important; + opacity: 1.0 !important; + -webkit-transform: none !important; + -moz-transform: none !important; + -ms-transform: none !important; + -o-transform: none !important; + transform: none !important +} + +.introjs-showElement, tr.introjs-showElement > td, tr.introjs-showElement > th { + z-index: 9999999 !important +} + +.introjs-disableInteraction { + z-index: 99999999 !important; + position: absolute; + background-color: white; + opacity: 0; + filter: alpha(opacity=0) +} + +.introjs-relativePosition, tr.introjs-showElement > td, tr.introjs-showElement > th { + position: relative +} + +.introjs-helperLayer { + box-sizing: content-box; + position: absolute; + z-index: 9999998; + background-color: #FFF; + background-color: rgba(255, 255, 255, .9); + border: 1px solid #777; + border: 1px solid rgba(0, 0, 0, .5); + border-radius: 4px; + box-shadow: 0 2px 15px rgba(0, 0, 0, .4); + -webkit-transition: all .3s ease-out; + -moz-transition: all .3s ease-out; + -ms-transition: all .3s ease-out; + -o-transition: all .3s ease-out; + transition: all .3s ease-out +} + +.introjs-tooltipReferenceLayer { + box-sizing: content-box; + position: absolute; + visibility: hidden; + z-index: 10000000; + background-color: transparent; + -webkit-transition: all .3s ease-out; + -moz-transition: all .3s ease-out; + -ms-transition: all .3s ease-out; + -o-transition: all .3s ease-out; + transition: all .3s ease-out +} + +.introjs-helperLayer *, .introjs-helperLayer *:before, .introjs-helperLayer *:after { + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + -ms-box-sizing: content-box; + -o-box-sizing: content-box; + box-sizing: content-box +} + +.introjs-helperNumberLayer { + box-sizing: content-box; + position: absolute; + visibility: visible; + top: -16px; + left: -16px; + z-index: 9999999999 !important; + padding: 2px; + font-family: Arial, verdana, tahoma; + font-size: 13px; + font-weight: bold; + color: white; + text-align: center; + text-shadow: 1px 1px 1px rgba(0, 0, 0, .3); + background: #ff3019; + background: -webkit-linear-gradient(top, #ff3019 0, #cf0404 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff3019), color-stop(100%, #cf0404)); + background: -moz-linear-gradient(top, #ff3019 0, #cf0404 100%); + background: -ms-linear-gradient(top, #ff3019 0, #cf0404 100%); + background: -o-linear-gradient(top, #ff3019 0, #cf0404 100%); + background: linear-gradient(to bottom, #ff3019 0, #cf0404 100%); + width: 20px; + height: 20px; + line-height: 20px; + border: 3px solid white; + border-radius: 50%; + filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3019', endColorstr='#cf0404', GradientType=0)"; + filter: "progid:DXImageTransform.Microsoft.Shadow(direction=135, strength=2, color=ff0000)"; + box-shadow: 0 2px 5px rgba(0, 0, 0, .4) +} + +.introjs-arrow { + border: 5px solid white; + content: ''; + position: absolute +} + +.introjs-arrow.top { + top: -10px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: white; + border-left-color: transparent +} + +.introjs-arrow.top-right { + top: -10px; + right: 10px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: white; + border-left-color: transparent +} + +.introjs-arrow.top-middle { + top: -10px; + left: 50%; + margin-left: -5px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: white; + border-left-color: transparent +} + +.introjs-arrow.right { + right: -10px; + top: 10px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: white +} + +.introjs-arrow.right-bottom { + bottom: 10px; + right: -10px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: white +} + +.introjs-arrow.bottom { + bottom: -10px; + border-top-color: white; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: transparent +} + +.introjs-arrow.left { + left: -10px; + top: 10px; + border-top-color: transparent; + border-right-color: white; + border-bottom-color: transparent; + border-left-color: transparent +} + +.introjs-arrow.left-bottom { + left: -10px; + bottom: 10px; + border-top-color: transparent; + border-right-color: white; + border-bottom-color: transparent; + border-left-color: transparent +} + +@media (prefers-color-scheme: light) { + .introjs-tooltip { + box-sizing: content-box; + position: absolute; + visibility: visible; + padding: 10px; + background-color: white; + min-width: 200px; + max-width: 300px; + border-radius: 3px; + box-shadow: 0 1px 10px rgba(0, 0, 0, .4); + -webkit-transition: opacity .1s ease-out; + -moz-transition: opacity .1s ease-out; + -ms-transition: opacity .1s ease-out; + -o-transition: opacity .1s ease-out; + transition: opacity .1s ease-out + } + .introjs-button { + box-sizing: content-box; + position: relative; + overflow: visible; + display: inline-block; + padding: .3em .8em; + border: 1px solid #d4d4d4; + margin: 0; + text-decoration: none; + text-shadow: 1px 1px 0 #fff; + font: 11px/normal sans-serif; + color: #333; + white-space: nowrap; + cursor: pointer; + outline: 0; + background-color: #ececec; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec)); + background-image: -moz-linear-gradient(#f4f4f4, #ececec); + background-image: -o-linear-gradient(#f4f4f4, #ececec); + background-image: linear-gradient(#f4f4f4, #ececec); + -webkit-background-clip: padding; + -moz-background-clip: padding; + -o-background-clip: padding-box; + -webkit-border-radius: .2em; + -moz-border-radius: .2em; + border-radius: .2em; + zoom: 1; + *display: inline; + margin-top: 10px + } + + .introjs-disabled, .introjs-disabled:hover, .introjs-disabled:focus { + color: #9a9a9a; + border-color: #d4d4d4; + box-shadow: none; + cursor: default; + background-color: #f4f4f4; + background-image: none; + text-decoration: none + } + .introjs-button:hover { + border-color: #bcbcbc; + text-decoration: none; + box-shadow: 0 1px 1px #e3e3e3 + } + + +} +@media (prefers-color-scheme: dark) { + .introjs-tooltip { + box-sizing: content-box; + position: absolute; + visibility: visible; + padding: 10px; + background-color: #272c30; + min-width: 200px; + max-width: 300px; + border-radius: 3px; + box-shadow: 0 1px 10px rgba(0, 0, 0, .4); + -webkit-transition: opacity .1s ease-out; + -moz-transition: opacity .1s ease-out; + -ms-transition: opacity .1s ease-out; + -o-transition: opacity .1s ease-out; + transition: opacity .1s ease-out + } + .introjs-button { + box-sizing: content-box; + position: relative; + overflow: visible; + display: inline-block; + padding: .3em .8em; + border: 1px solid #333; + margin: 0; + text-decoration: none; + font: 11px/normal sans-serif; + color: #eee; + white-space: nowrap; + cursor: pointer; + outline: 0; + background-color: #676767; + -webkit-background-clip: padding; + -moz-background-clip: padding; + -o-background-clip: padding-box; + -webkit-border-radius: .2em; + -moz-border-radius: .2em; + border-radius: .2em; + zoom: 1; + *display: inline; + margin-top: 10px + } + + .introjs-disabled, .introjs-disabled:hover, .introjs-disabled:focus { + color: #555; + border-color: #333; + box-shadow: none; + cursor: default; + background-color: #444; + background-image: none; + text-decoration: none + } + .introjs-button:hover { + border-color: #000; + text-decoration: none; + } + + + +} +.introjs-tooltipbuttons { + text-align: right; + white-space: nowrap +} + + + + +.introjs-button:focus, .introjs-button:active { + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ececec), to(#f4f4f4)); + background-image: -moz-linear-gradient(#ececec, #f4f4f4); + background-image: -o-linear-gradient(#ececec, #f4f4f4); + background-image: linear-gradient(#ececec, #f4f4f4) +} + +.introjs-button::-moz-focus-inner { + padding: 0; + border: 0 +} + +.introjs-skipbutton { + box-sizing: content-box; + margin-right: 5px; + color: #7a7a7a +} + +.introjs-prevbutton { + -webkit-border-radius: .2em 0 0 .2em; + -moz-border-radius: .2em 0 0 .2em; + border-radius: .2em 0 0 .2em; + border-right: 0 +} + +.introjs-prevbutton.introjs-fullbutton { + border: 1px solid #d4d4d4; + -webkit-border-radius: .2em; + -moz-border-radius: .2em; + border-radius: .2em +} + +.introjs-nextbutton { + -webkit-border-radius: 0 .2em .2em 0; + -moz-border-radius: 0 .2em .2em 0; + border-radius: 0 .2em .2em 0 +} + +.introjs-nextbutton.introjs-fullbutton { + -webkit-border-radius: .2em; + -moz-border-radius: .2em; + border-radius: .2em +} + +.introjs-hidden { + display: none +} + +.introjs-bullets { + text-align: center +} + +.introjs-bullets ul { + box-sizing: content-box; + clear: both; + margin: 15px auto 0; + padding: 0; + display: inline-block +} + +.introjs-bullets ul li { + box-sizing: content-box; + list-style: none; + float: left; + margin: 0 2px +} + +.introjs-bullets ul li a { + box-sizing: content-box; + display: block; + width: 6px; + height: 6px; + background: #ccc; + border-radius: 10px; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + text-decoration: none; + cursor: pointer +} + +.introjs-bullets ul li a:hover { + background: #999 +} + +.introjs-bullets ul li a.active { + background: #999 +} + +.introjs-progress { + box-sizing: content-box; + overflow: hidden; + height: 10px; + margin: 10px 0 5px 0; + border-radius: 4px; + background-color: #ecf0f1 +} + +.introjs-progressbar { + box-sizing: content-box; + float: left; + width: 0; + height: 100%; + font-size: 10px; + line-height: 10px; + text-align: center; + background-color: #08c +} + +.introjsFloatingElement { + position: absolute; + height: 0; + width: 0; + left: 50%; + top: 50% +} + +.introjs-fixedTooltip { + position: fixed +} + +.introjs-hint { + box-sizing: content-box; + position: absolute; + background: transparent; + width: 20px; + height: 15px; + cursor: pointer +} + +.introjs-hint:focus { + border: 0; + outline: 0 +} + +.introjs-hidehint { + display: none +} + +.introjs-fixedhint { + position: fixed +} + +.introjs-hint:hover > .introjs-hint-pulse { + border: 5px solid rgba(60, 60, 60, 0.57) +} + +.introjs-hint-pulse { + box-sizing: content-box; + width: 10px; + height: 10px; + border: 5px solid rgba(60, 60, 60, 0.27); + -webkit-border-radius: 30px; + -moz-border-radius: 30px; + border-radius: 30px; + background-color: rgba(136, 136, 136, 0.24); + z-index: 10; + position: absolute; + -webkit-transition: all .2s ease-out; + -moz-transition: all .2s ease-out; + -ms-transition: all .2s ease-out; + -o-transition: all .2s ease-out; + transition: all .2s ease-out +} + +.introjs-hint-no-anim .introjs-hint-dot { + -webkit-animation: none; + -moz-animation: none; + animation: none +} + +.introjs-hint-dot { + box-sizing: content-box; + border: 10px solid rgba(146, 146, 146, 0.36); + background: transparent; + -webkit-border-radius: 60px; + -moz-border-radius: 60px; + border-radius: 60px; + height: 50px; + width: 50px; + -webkit-animation: introjspulse 3s ease-out; + -moz-animation: introjspulse 3s ease-out; + animation: introjspulse 3s ease-out; + -webkit-animation-iteration-count: infinite; + -moz-animation-iteration-count: infinite; + animation-iteration-count: infinite; + position: absolute; + top: -25px; + left: -25px; + z-index: 1; + opacity: 0 +} + +@-webkit-keyframes introjspulse { + 0% { + -webkit-transform: scale(0); + opacity: .0 + } + 25% { + -webkit-transform: scale(0); + opacity: .1 + } + 50% { + -webkit-transform: scale(0.1); + opacity: .3 + } + 75% { + -webkit-transform: scale(0.5); + opacity: .5 + } + 100% { + -webkit-transform: scale(1); + opacity: .0 + } +} + +@-moz-keyframes introjspulse { + 0% { + -moz-transform: scale(0); + opacity: .0 + } + 25% { + -moz-transform: scale(0); + opacity: .1 + } + 50% { + -moz-transform: scale(0.1); + opacity: .3 + } + 75% { + -moz-transform: scale(0.5); + opacity: .5 + } + 100% { + -moz-transform: scale(1); + opacity: .0 + } +} + +@keyframes introjspulse { + 0% { + transform: scale(0); + opacity: .0 + } + 25% { + transform: scale(0); + opacity: .1 + } + 50% { + transform: scale(0.1); + opacity: .3 + } + 75% { + transform: scale(0.5); + opacity: .5 + } + 100% { + transform: scale(1); + opacity: .0 + } +} diff --git a/resources/views/layout/default.twig b/resources/views/layout/default.twig index 07006620de..d12cbc040b 100644 --- a/resources/views/layout/default.twig +++ b/resources/views/layout/default.twig @@ -25,6 +25,7 @@ + {# the theme #} From e008c1f742694c9796c94a9428365bd6f06f707a Mon Sep 17 00:00:00 2001 From: James Cole Date: Sun, 29 Jan 2023 14:52:22 +0100 Subject: [PATCH 4/4] Update templates --- resources/views/layout/default.twig | 4 ++-- resources/views/layout/empty.twig | 15 ++++++++++++++- resources/views/layout/guest.twig | 15 ++++++++++++++- resources/views/layout/install.twig | 1 + 4 files changed, 31 insertions(+), 4 deletions(-) diff --git a/resources/views/layout/default.twig b/resources/views/layout/default.twig index d12cbc040b..3db76f138b 100644 --- a/resources/views/layout/default.twig +++ b/resources/views/layout/default.twig @@ -7,6 +7,7 @@ + {% if subTitle %} @@ -21,11 +22,10 @@ {# CSS things #} - {# libraries #} - + {# the theme #} diff --git a/resources/views/layout/empty.twig b/resources/views/layout/empty.twig index 516e82c9f7..64c420276a 100644 --- a/resources/views/layout/empty.twig +++ b/resources/views/layout/empty.twig @@ -9,6 +9,7 @@ + {# CSS things #} @@ -19,7 +20,19 @@ {# the theme #} - + + + {# Firefly III customisations #} diff --git a/resources/views/layout/guest.twig b/resources/views/layout/guest.twig index f96592aad6..47d43be007 100644 --- a/resources/views/layout/guest.twig +++ b/resources/views/layout/guest.twig @@ -5,6 +5,7 @@ + Firefly III @@ -29,7 +30,19 @@ {# the theme #} <link href="v1/lib/adminlte/css/AdminLTE.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}"> - <link href="v1/lib/adminlte/css/skins/skin-blue-light.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}"> + <script nonce="{{ JS_NONCE }}"> + // If `prefers-color-scheme` is not supported, fall back to light mode. + // In this case, light.css will be downloaded with `highest` priority. + if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') { + document.documentElement.style.display = 'none'; + document.head.insertAdjacentHTML( + 'beforeend', + '<link rel="stylesheet" href="v1/lib/adminlte/css/skins/skin-light.css?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}" onload="document.documentElement.style.display = \'\'">', + ); + } + </script> + <link href="v1/lib/adminlte/css/skins/skin-light.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}" media="(prefers-color-scheme: light)"> + <link href="v1/lib/adminlte/css/skins/skin-dark.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}" media="(prefers-color-scheme: dark)"> {# Firefly III customisations #} <link href="v1/css/firefly.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}"> diff --git a/resources/views/layout/install.twig b/resources/views/layout/install.twig index a4cc4e9c81..5dcb483edd 100644 --- a/resources/views/layout/install.twig +++ b/resources/views/layout/install.twig @@ -9,6 +9,7 @@ <meta name="csrf-token" content="{{ csrf_token() }}"> <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'> <meta name="apple-mobile-web-app-capable" content="yes"> + <meta name="color-scheme" content="light dark"> {# libraries #} <link href="v1/lib/bs/css/bootstrap.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">