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; --default-font-size: 13px;
--checkbox-size: 16px; --checkbox-size: 16px;
--max-width: 500px; --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"] { [data-theme="dark"] {
@ -327,7 +330,8 @@ header > form {
margin-right: 30px; margin-right: 30px;
} }
input[type="checkbox"] { /* Standard styling for enabled checkboxes */
input[type="checkbox"]:not(:disabled) {
width: var(--checkbox-size); width: var(--checkbox-size);
height: var(--checkbox-size); height: var(--checkbox-size);
-webkit-appearance: none; /* remove default styling */ -webkit-appearance: none; /* remove default styling */
@ -341,33 +345,63 @@ input[type="checkbox"] {
margin-top: -1px; /* adjust for better alignment */ 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); background-color: var(--color-nextcloud-blue);
border-color: var(--color-border-maxcontrast); border-color: var(--color-border-maxcontrast);
} }
input[type="checkbox"]:checked::after { input[type="checkbox"]:checked:not(:disabled)::after {
content: ''; /* Create a pseudo-element for the checkmark */ content: ''; /* Creates a pseudo-element for the checkmark */
position: absolute; /* Position it absolutely */ position: absolute; /* Positions it absolutely */
left: 4px; /* Positioning of the checkmark */ left: 4px; /* Positioning of the checkmark */
top: 0; /* Positioning of the checkmark */ top: 0; /* Positioning of the checkmark */
width: 4px; /* Width of the checkmark */ width: 4px; /* Width of the checkmark */
height: 9px; /* Height of the checkmark */ height: 9px; /* Height of the checkmark */
border: solid white; /* Color of the checkmark */ border: solid white; /* Color of the checkmark */
border-width: 0 2px 3px 0; /* Create the checkmark shape */ border-width: 0 2px 3px 0; /* Creates the checkmark shape */
transform: rotate(45deg); /* Rotate to form a checkmark */ transform: rotate(45deg); /* Rotates to form a checkmark */
} }
input[type="checkbox"]:hover { /* Styling for disabled checkboxes (grayed out, no hover, no pointer) */
border-color: var(--color-info-hover); 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 { label {
cursor: pointer; cursor: pointer;
margin-left: 4px; margin-left: 4px;
line-height: var(--checkbox-size); 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 { .loading {
color: grey; color: grey;
} }