From 55b5469260d5e2a0d3476f10e6318aebb0f45529 Mon Sep 17 00:00:00 2001
From: ernolf <raphael.gradenwitz@googlemail.com>
Date: Fri, 25 Oct 2024 20:43:42 +0200
Subject: [PATCH] fix(ui): correct style for disabled checkbox labels

Signed-off-by: ernolf <raphael.gradenwitz@googlemail.com>
---
 php/public/style.css | 52 ++++++++++++++++++++++++++++++++++++--------
 1 file changed, 43 insertions(+), 9 deletions(-)

diff --git a/php/public/style.css b/php/public/style.css
index 85a82b80ceb..36a37dab6b8 100644
--- a/php/public/style.css
+++ b/php/public/style.css
@@ -22,6 +22,9 @@
     --default-font-size: 13px;
     --checkbox-size: 16px;
     --max-width: 500px;
+    --color-disabled: #d3d3d3; /* light gray background for disabled checkboxes */
+    --color-border-disabled: #a9a9a9; /* darker gray border for disabled checkboxes */
+    --color-text-disabled: #a9a9a9; /* matching label text color for disabled checkboxes */
 }
 
 [data-theme="dark"] {
@@ -327,7 +330,8 @@ header > form {
     margin-right: 30px;
 }
 
-input[type="checkbox"] {
+/* Standard styling for enabled checkboxes */
+input[type="checkbox"]:not(:disabled) {
     width: var(--checkbox-size);
     height: var(--checkbox-size);
     -webkit-appearance: none; /* remove default styling */
@@ -341,33 +345,63 @@ input[type="checkbox"] {
     margin-top: -1px; /* adjust for better alignment */
 }
 
-input[type="checkbox"]:checked {
+/* Hover effects for enabled checkboxes */
+input[type="checkbox"]:not(:disabled):hover {
+    border-color: var(--color-info-hover);
+}
+
+/* Checkmark styling for enabled checkboxes */
+input[type="checkbox"]:checked:not(:disabled) {
     background-color: var(--color-nextcloud-blue);
     border-color: var(--color-border-maxcontrast);
 }
 
-input[type="checkbox"]:checked::after {
-    content: ''; /* Create a pseudo-element for the checkmark */
-    position: absolute; /* Position it absolutely */
+input[type="checkbox"]:checked:not(:disabled)::after {
+    content: ''; /* Creates a pseudo-element for the checkmark */
+    position: absolute; /* Positions it absolutely */
     left: 4px; /* Positioning of the checkmark */
     top: 0; /* Positioning of the checkmark */
     width: 4px; /* Width of the checkmark */
     height: 9px; /* Height of the checkmark */
     border: solid white; /* Color of the checkmark */
-    border-width: 0 2px 3px 0; /* Create the checkmark shape */
-    transform: rotate(45deg); /* Rotate to form a checkmark */
+    border-width: 0 2px 3px 0; /* Creates the checkmark shape */
+    transform: rotate(45deg); /* Rotates to form a checkmark */
 }
 
-input[type="checkbox"]:hover {
-    border-color: var(--color-info-hover);
+/* Styling for disabled checkboxes (grayed out, no hover, no pointer) */
+input[type="checkbox"]:disabled:not(:checked) {
+    background-color: var(--color-disabled);
+    border-color: var(--color-border-disabled);
+    cursor: default;
+    opacity: 0.5; /* Makes the checkbox appear faded */
+}
+
+/* Styling for disabled checked checkboxes (no pointer) */
+input[type="checkbox"]:disabled:checked {
+    cursor: default;
 }
 
+input[type="checkbox"]:disabled:hover {
+    border-color: var(--color-border-disabled); /* Keeps disabled state without hover effect */
+}
+
+/* General Label styling */
 label {
     cursor: pointer;
     margin-left: 4px;
     line-height: var(--checkbox-size);
 }
 
+/* Label cursor for disabled checkboxes */
+input[type="checkbox"]:disabled + label {
+    cursor: default;
+}
+
+/* Label styling for disabled, not checked checkboxes */
+input[type="checkbox"]:disabled:not(:checked) + label {
+    color: var(--color-text-disabled);
+}
+
 .loading {
     color: grey;
 }