maketank/Froxlor
2
0
Fork 0
Code Pull Requests Releases Activity

more work on bootstrap darkmode implementation

Browse Source 
Signed-off-by: Michael Kaufmann <d00p@froxlor.org>
This commit is contained in:
Michael Kaufmann
2023-10-16 18:19:36 +02:00
parent f4f84aa397
commit 1f2cce6195
6 changed files with 34 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
templates/Froxlor/assets/scss/_variables-dark.scss
View File

@@ -1,65 +1,2 @@
// Color
//$primary: $froxlor-700;
//$secondary: $gray-500;
//$info: $froxlor-800;
// Body
//$body-bg: $gray-900;
//$body-color: $gray-100;
// Borders
//$border-color: $gray-900;
//$border-color-translucent: $gray-900;
// Link
//$link-color: $froxlor-500;
//$nav-link-color: $body-color;
// List groups
//$list-group-bg: $gray-800;
//$list-group-color: $body-color;
//$list-group-hover-bg: $gray-700;
//$list-group-action-color: $body-color;
// Navbar
//$navbar-bg: $gray-800;
//$navbar-bg-mobile: $navbar-bg;
//$navbar-light-color: $gray-200;
//$navbar-light-hover-color: $gray-500;
//$navbar-light-active-color: $gray-500;
// Sidebar
//$sidebar-width: 256px;
// Card
//$card-bg: $gray-800;
//$card-border-color: $gray-600;
// Heading
//$heading-bg: $gray-800;
//$heading-color: $body-color;
//$heading-border-color: rgba(0,0,0,0.15);
// Dropdown
//$dropdown-bg: $gray-800;
//$dropdown-color: $gray-100;
//$dropdown-link-color: $gray-100;
//$dropdown-link-hover-bg: $gray-900;
// Modal
//$modal-content-bg: $gray-800;
// Form control
//$input-bg: $gray-900;
//$input-border-color: $black;
//$input-group-addon-bg: $gray-800;
// Progress bar
//$progress-bg: $gray-900;
// Search
//$search-bg: $gray-800;
// Popover
//$popover-bg: $gray-800;
//$popover-body-color: $gray-100;
$heading-border-color-dark: rgba(0,0,0,0.15);

12
templates/Froxlor/assets/scss/components/_dropdown.scss
View File

@@ -10,3 +10,15 @@
}
}
}
@include color-mode(dark) {
.dropdown {
.dropdown-menu {
.dropdown-item {
i {
color: $body-secondary-color-dark;
}
}
}
}
}

6
templates/Froxlor/assets/scss/components/_generic.scss
View File

@@ -87,3 +87,9 @@
a {
text-decoration: none;
}
@include color-mode(dark) {
.table>:not(caption)>*>* {
background-color: transparent;
}
}

4
templates/Froxlor/assets/scss/components/_heading.scss
View File

@@ -11,5 +11,9 @@
@include color-mode(dark) {
.heading {
background: $dark-bg;
border-top: $heading-border-color-dark solid 1px;
}
.heading h5 {
color: $body-color-dark;
}
}

11
templates/Froxlor/assets/scss/components/_navbar.scss
View File

@@ -19,6 +19,14 @@
}
}
@include color-mode(dark) {
@include media-breakpoint-up(md) {
.navbar {
background: $dark-bg;
}
}
}
@include media-breakpoint-down(md) {
.navbar {
background: $navbar-bg-mobile;
@@ -31,7 +39,7 @@
color: $white;
&:hover {
color: rgba(255,255,255,.45);
color: rgba(255, 255, 255, .45);
}
}
@@ -53,6 +61,7 @@
.navbar-toggler {
border-color: transparent;
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

2
templates/Froxlor/user/index.html.twig
View File

@@ -59,7 +59,7 @@
<i class="fa-solid fa-gears me-1"></i>
{{ lng('admin.systemdetails') }}
<div class="float-end">
<button id="copySysInfo" class="btn btn-outline-dark" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .5rem;" title="Copy to clipboard"><i class="fa-solid fa-copy"></i></button>
<button id="copySysInfo" class="btn btn-outline-secondary" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .5rem;" title="Copy to clipboard"><i class="fa-solid fa-copy"></i></button>
</div>
<div id="ccSysInfo" class="d-none">
- Froxlor: {{ call_static('\\Froxlor\\Froxlor', 'getVersionString') }}