Correct usage and implementations of readonly and disabled in textfields

Currently, a lot of text fields are disabled when the logged-in user does not have write permission for the field. This looks like this:
The current implementation results in hardly readable text that can't be selected or copied.

Generic components affected by this issue

- frontend/src/components/form/
- api/
- ApiCheckbox.vue
- ApiColorPicker.vue
- ApiDatePicker.vue
- ApiRichtext.vue
- ApiSelect.vue
- ApiSortable.vue
- ApiSwitch.vue
- ApiTextarea.vue
- ApiTextField.vue
- ApiTimePicker.vue
- base/
- ECheckbox.vue
- EColorPicker.vue
- EDatePicker.vue
- ERichtext.vue
- ESelect.vue
- ESwitch.vue
- ETextarea.vue
- ETextField.vue

Requirements:
- The listed components all support/allow `readonly` **and** `disabled` property
- Components listed should have the outline style if `!readonly && outlined`
- All usages of the property `disabled` on components listed, should use `readonly` instead

This should look like this: