eightball/all-in-one
1
0
Fork 0
mirror of https://github.com/nextcloud/all-in-one.git synced 2025-12-19 22:16:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

fix(ui): correct style for disabled checkbox labels

Browse source 
Signed-off-by: ernolf <raphael.gradenwitz@googlemail.com>
This commit is contained in:
ernolf 2024-10-25 20:43:42 +02:00
parent 3f3ae167e9
commit 55b5469260
No known key found for this signature in database
GPG key ID: 0B145139A170715C
1 changed files with 43 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

52
php/public/style.css
View file

@ -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;
}