darkmode optimizations

Signed-off-by: Michael Kaufmann <[email protected]>

SECURITY.md

@@ -10,9 +10,10 @@ With that, good luck hacking us ;)
 
 ## Supported versions
 
-- ️✅ **2.x**  (`main` git-branch)
-- ❌ 0.10.x (`0.10.x` git-branch)
-- ❌ 0.9.x (`0.9.x`git-branch)
+- ️✅ **2.1.x**  (`main` git-branch)
+- ❌ 2.0.x (`2.0.x`-tags)
+- ❌ 0.10.x (`0.10.x`-tags)
+- ❌ other git-branches
 
 ## Qualifying Vulnerabilities
 

templates/Froxlor/assets/scss/components/_card.scss

@@ -27,4 +27,9 @@
 	.card, .list-group-item {
 		background: $dark-bg;
 	}
+	.card {
+		.card-header {
+			border-bottom: $border-color-dark solid 1px;
+		}
+	}
 }

templates/Froxlor/assets/scss/components/_form.scss

@@ -1 +1,21 @@
-// wip
+// wip
+@include color-mode(dark) {
+	.formfield {
+		border-bottom: $border-color-dark solid 1px;
+	}
+	.form-control,
+	.form-select {
+		background: $dark-bg;
+	}
+
+	.form-switch {
+		.form-check-input:not(:checked):not(:focus) {
+			background-color: $dark-bg;
+		}
+	}
+
+	.form-control[readonly] {
+		background: $body-tertiary-bg-dark;
+	}
+
+}

templates/Froxlor/assets/scss/components/_generic.scss

@@ -88,6 +88,13 @@ a {
 	text-decoration: none;
 }
 
+td.text-end {
+	a.btn-sm:not(:last-child),
+	span.btn-sm:not(:last-child){
+		margin-right:.125rem!important;
+	}
+}
+
 @include color-mode(dark) {
 	.table>:not(caption)>*>* {
 		background-color: transparent;

templates/Froxlor/settings/apcuinfo.html.twig

@@ -61,7 +61,7 @@
 							<div class="progress-bar bg-danger"></div>
 						</div>
 						<small
-							class="justify-content-center d-flex position-absolute w-100 text-dark">{{ apcuinfo.num_hits_percentage }}
+							class="justify-content-center d-flex position-absolute w-100">{{ apcuinfo.num_hits_percentage }}
 							%</small>
 					</div>
 				</div>
@@ -116,7 +116,7 @@
 							 aria-valuenow="{{ apcuinfo.fragmentation.used_bytes }}" aria-valuemin="0"
 							 aria-valuemax="{{ apcuinfo.fragmentation.total_bytes }}"></div>
 						<small
-							class="justify-content-center d-flex position-absolute w-100 text-dark">{{ apcuinfo.fragmentation.used_percentage }}
+							class="justify-content-center d-flex position-absolute w-100">{{ apcuinfo.fragmentation.used_percentage }}
 							%</small>
 					</div>
 					<ul class="list-group list-group-flush">

templates/Froxlor/settings/detailpart.html.twig

@@ -1,7 +1,7 @@
 {% extends "Froxlor/settings/index.html.twig" %}
 
 {% block actions %}
-	<a class="btn btn-outline-primary" href="{{ linker({'section':'settings','page':'overview','part':'all'}) }}">
+	<a class="btn btn-outline-primary me-2" href="{{ linker({'section':'settings','page':'overview','part':'all'}) }}">
 		<i class="fa-solid fa-grip me-1"></i>
 		{{ lng('admin.configfiles.overview') }}
 	</a>

templates/Froxlor/settings/index.html.twig

@@ -11,7 +11,7 @@
 {% endblock %}
 
 {% block actions %}
-	<a class="btn btn-outline-secondary" href="{{ linker({'section':'settings','page':'toggleSettingsMode'}) }}" title="{{ lng('panel.settingsmodetoggle') }}">
+	<a class="btn btn-outline-secondary me-2" href="{{ linker({'section':'settings','page':'toggleSettingsMode'}) }}" title="{{ lng('panel.settingsmodetoggle') }}">
 		{% if get_setting('panel.settings_mode') == 0 %}
 		<i class="fa-solid fa-maximize me-1"></i>
 		{{ lng('panel.settingsmode') }}: {{ lng('panel.settingsmodebasic') }}
@@ -47,7 +47,7 @@
 							</div>
 							{% if not field.activated %}
 								<div class="position-absolute top-0 end-0 p-1">
-									<span class="badge text-body-secondary" style="background: #eee">{{ lng('panel.not_activated') }}</span>
+									<span class="badge text-bg-light">{{ lng('panel.not_activated') }}</span>
 								</div>
 							{% endif %}
 						</div>

templates/Froxlor/settings/opcacheinfo.html.twig

@@ -26,7 +26,7 @@
 						<div class="progress-bar bg-success"
 							 style="width: {{ opcacheinfo.overview.used_memory_percentage }}%"></div>
 						<small
-							class="justify-content-center d-flex position-absolute w-100 text-dark">{{ opcacheinfo.overview.used_memory_percentage }}
+							class="justify-content-center d-flex position-absolute w-100">{{ opcacheinfo.overview.used_memory_percentage }}
 							%</small>
 					</div>
 				</div>
@@ -68,7 +68,7 @@
 							<div class="progress-bar bg-danger"></div>
 						</div>
 						<small
-							class="justify-content-center d-flex position-absolute w-100 text-dark">{{ opcacheinfo.overview.hit_rate_percentage }}
+							class="justify-content-center d-flex position-absolute w-100">{{ opcacheinfo.overview.hit_rate_percentage }}
 							%</small>
 					</div>
 				</div>
@@ -102,7 +102,7 @@
 							 aria-valuenow="{{ opcacheinfo.overview.num_cached_keys }}" aria-valuemin="0"
 							 aria-valuemax="{{ opcacheinfo.overview.max_cached_keys }}"></div>
 						<small
-							class="justify-content-center d-flex position-absolute w-100 text-dark">{{ opcacheinfo.overview.used_key_percentage }}
+							class="justify-content-center d-flex position-absolute w-100">{{ opcacheinfo.overview.used_key_percentage }}
 							%</small>
 					</div>
 				</div>

templates/Froxlor/table/table.html.twig

@@ -10,7 +10,7 @@
 		</div>
 	{% else %}
 		<div class="d-flex flex-column align-items-end mt-n2">
-			<div class="rounded-top bg-dark small py-1 px-2 me-3 opacity-25 text-white">
+			<div class="rounded-top bg-secondary small py-1 px-2 me-3 opacity-25 text-white">
 				{% if listing.no_search is not defined or (listing.no_search is defined and listing.no_search == false) %}
 					{% if gSearchText is not empty %}
 						<span class="me-2"><a href="{{ linker(listing.self_overview) }}"><i class="fa-solid fa-xmark"></i></a> Filter: <strong>{{ gSearchText }}</strong></span>

templates/Froxlor/user/form.html.twig

@@ -32,7 +32,7 @@
 			{% if actions_links is iterable %}
 				{% for link in actions_links %}
 					{% if link.visible is not defined or (link.visible is defined and link.visible == true) %}
-						<a class="btn {{ link.class|default('btn-outline-primary') }}" href="{{ link.href|raw }}" {% if link.target is defined %}target="{{ link.target }}"{% endif %}>
+						<a class="btn {{ link.class|default('btn-outline-primary') }}{% if not loop.last %} me-1{% endif %}" href="{{ link.href|raw }}" {% if link.target is defined %}target="{{ link.target }}"{% endif %}>
 							<i class="{{ link.icon|default('fa-solid fa-plus-circle') }}"></i>
 							{% if link.label is defined and link.label is not empty %}<span class="d-none d-lg-inline ms-lg-1">{{ link.label }}</span>{% endif %}
 						</a>

templates/Froxlor/user/logfiles.html.twig

@@ -15,7 +15,7 @@
 		<div>
 			{% if actions_links is iterable %}
 				{% for link in actions_links %}
-					<a class="btn {{ link.class|default('btn-outline-primary') }}" href="{{ link.href|raw }}" {% if link.target is defined %}target="{{ link.target }}"{% endif %}>
+					<a class="btn {{ link.class|default('btn-outline-primary') }}{% if not loop.last %} me-1{% endif %}" href="{{ link.href|raw }}" {% if link.target is defined %}target="{{ link.target }}"{% endif %}>
 						<i class="{{ link.icon|default('fa-solid fa-plus-circle') }}"></i>
 						{% if link.label is defined and link.label is not empty %}<span class="d-none d-lg-inline ms-lg-1">{{ link.label }}</span>{% endif %}
 					</a>

templates/Froxlor/user/table.html.twig

@@ -34,7 +34,7 @@
 			{% if actions_links is iterable %}
 				{% for link in actions_links %}
 					{% if link.visible is not defined or (link.visible is defined and link.visible == true) %}
-						<a class="btn {{ link.class|default('btn-outline-primary') }}" href="{{ link.href|raw }}" {% if link.target is defined %}target="{{ link.target }}"{% endif %}>
+						<a class="btn {{ link.class|default('btn-outline-primary') }}{% if not loop.last %} me-1{% endif %}" href="{{ link.href|raw }}" {% if link.target is defined %}target="{{ link.target }}"{% endif %}>
 							<i class="{{ link.icon|default('fa-solid fa-plus-circle') }}"></i>
 							{% if link.label is defined and link.label is not empty %}<span class="d-none d-lg-inline ms-lg-1">{{ link.label }}</span>{% endif %}
 						</a>