catarrh
74efc20bf5
After the gray text was raised to #cbd5e1 in dark mode, elements using dark:text-slate-300 (inactive tabs, labels, list text) matched the muted level. Map dark:text-slate-300 to #e2e8f0 (slate-200, the body's dark text color) so normal text stays one step brighter than muted gray. SW cache v96 -> v97.
113 lines
3.5 KiB
CSS
113 lines
3.5 KiB
CSS
/* ===== Theme contrast adjustments ===== */
|
|
|
|
/* Light theme: darken softer (muted) text one step for higher contrast */
|
|
.text-gray-400 {
|
|
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
|
|
}
|
|
.text-gray-500 {
|
|
color: rgb(75 85 99 / var(--tw-text-opacity, 1));
|
|
}
|
|
.text-gray-600 {
|
|
color: rgb(55 65 81 / var(--tw-text-opacity, 1));
|
|
}
|
|
|
|
/* Dark theme: lighten softer (muted) text one step for higher contrast */
|
|
.dark\:text-slate-500:is(.dark *) {
|
|
color: rgb(203 213 225 / var(--tw-text-opacity, 1));
|
|
}
|
|
.dark\:text-slate-400:is(.dark *) {
|
|
color: rgb(203 213 225 / var(--tw-text-opacity, 1));
|
|
}
|
|
|
|
/* Dark theme: red text is too dark on dark backgrounds — lighten it */
|
|
.dark :where(.text-red-500) {
|
|
color: rgb(248 113 113 / var(--tw-text-opacity, 1));
|
|
}
|
|
.dark :where(.text-red-600) {
|
|
color: rgb(248 113 113 / var(--tw-text-opacity, 1));
|
|
}
|
|
.dark :where(.text-red-700) {
|
|
color: rgb(239 68 68 / var(--tw-text-opacity, 1));
|
|
}
|
|
|
|
/* Light theme: darken light gray shades (backgrounds & borders) one step */
|
|
.bg-gray-50 {
|
|
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
|
|
}
|
|
.bg-gray-100 {
|
|
background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
|
|
}
|
|
.bg-gray-200 {
|
|
background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
|
|
}
|
|
.border-gray-100 {
|
|
border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
|
|
}
|
|
.border-gray-200 {
|
|
border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
|
|
}
|
|
.border-gray-300 {
|
|
border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
|
|
}
|
|
.text-gray-300 {
|
|
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
|
|
}
|
|
.hover\:bg-gray-100:hover {
|
|
background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
|
|
}
|
|
.hover\:bg-gray-200:hover {
|
|
background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
|
|
}
|
|
.hover\:bg-gray-300:hover {
|
|
background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
|
|
}
|
|
|
|
/* Dark theme: lighten gray fonts */
|
|
.dark\:text-gray-400:is(.dark *) {
|
|
color: rgb(203 213 225 / var(--tw-text-opacity, 1));
|
|
}
|
|
.dark\:text-gray-600:is(.dark *) {
|
|
color: rgb(203 213 225 / var(--tw-text-opacity, 1));
|
|
}
|
|
|
|
/* Dark theme: gray text without an explicit dark variant (ids, timestamps,
|
|
expand markers, ...) — match the lighten-on-dark level used above */
|
|
.dark .text-gray-300:not([class*="dark:text-"]) {
|
|
color: rgb(148 163 184 / var(--tw-text-opacity, 1));
|
|
}
|
|
.dark .text-gray-400:not([class*="dark:text-"]) {
|
|
color: rgb(203 213 225 / var(--tw-text-opacity, 1));
|
|
}
|
|
.dark .text-gray-500:not([class*="dark:text-"]) {
|
|
color: rgb(203 213 225 / var(--tw-text-opacity, 1));
|
|
}
|
|
.dark .text-gray-600:not([class*="dark:text-"]) {
|
|
color: rgb(203 213 225 / var(--tw-text-opacity, 1));
|
|
}
|
|
.dark .text-gray-700:not([class*="dark:text-"]) {
|
|
color: rgb(226 232 240 / var(--tw-text-opacity, 1));
|
|
}
|
|
.dark .text-gray-800:not([class*="dark:text-"]) {
|
|
color: rgb(241 245 249 / var(--tw-text-opacity, 1));
|
|
}
|
|
|
|
/* Dark theme: brighten gray borders one step so they stay visible on dark
|
|
backgrounds */
|
|
.dark\:border-slate-600:is(.dark *) {
|
|
border-color: rgb(100 116 139 / var(--tw-border-opacity, 1));
|
|
}
|
|
.dark\:border-slate-700:is(.dark *) {
|
|
border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
|
|
}
|
|
.dark\:border-slate-700\/50:is(.dark *) {
|
|
border-color: rgb(71 85 105 / 0.5);
|
|
}
|
|
.dark\:border-slate-800:is(.dark *) {
|
|
border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
|
|
}
|
|
/* Dark theme: normal (non-muted) UI text — keep one step brighter than the
|
|
muted gray level so the two remain distinguishable */
|
|
.dark\:text-slate-300:is(.dark *) {
|
|
color: rgb(226 232 240 / var(--tw-text-opacity, 1));
|
|
}
|