mirrors/woodpecker
1
0
Fork 0
mirror of https://github.com/woodpecker-ci/woodpecker.git synced 2024-11-26 20:01:02 +00:00
Code Issues Projects Releases Wiki Activity

Improve button and input contrast in dark mode (#1456)

Browse source 
Co-authored-by: Lauris BH <lauris@nix.lv>
This commit is contained in:
Lukas 2022-11-29 00:44:00 +01:00 committed by GitHub
parent a884e13885
commit 5d1ec770c9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
web/src/components/atomic/Button.vue
View file

@ -5,11 +5,11 @@
:class="{ :class="{
'bg-white hover:bg-gray-200 border-gray-300 text-color dark:bg-dark-gray-600 dark:border-dark-400 dark:hover:bg-dark-gray-800': 'bg-white hover:bg-gray-200 border-gray-300 text-color dark:bg-dark-gray-600 dark:border-dark-400 dark:hover:bg-dark-gray-800':
color === 'gray', color === 'gray',
'bg-lime-600 hover:bg-lime-700 border-lime-800 text-white dark:text-gray-400 dark:bg-lime-900 dark:hover:bg-lime-800': 'bg-lime-600 hover:bg-lime-700 border-lime-800 text-white dark:text-gray-300 dark:bg-lime-900 dark:hover:bg-lime-800':
color === 'green', color === 'green',
'bg-cyan-600 hover:bg-cyan-700 border-cyan-800 text-white dark:text-gray-400 dark:bg-cyan-900 dark:hover:bg-cyan-800': 'bg-cyan-600 hover:bg-cyan-700 border-cyan-800 text-white dark:text-gray-300 dark:bg-cyan-900 dark:hover:bg-cyan-800':
color === 'blue', color === 'blue',
'bg-red-500 hover:bg-red-600 border-red-700 text-white dark:text-gray-400 dark:bg-red-900 dark:hover:bg-red-800': 'bg-red-500 hover:bg-red-600 border-red-700 text-white dark:text-gray-300 dark:bg-red-900 dark:hover:bg-red-800':
color === 'red', color === 'red',
...passedClasses, ...passedClasses,
}" }"

4
web/src/components/form/Checkbox.vue
View file

@ -3,7 +3,7 @@
<input <input
:id="`checkbox-${id}`" :id="`checkbox-${id}`"
type="checkbox" type="checkbox"
class="checkbox flex-shrink-0 relative border border-gray-400 dark:border-gray-600 cursor-pointer rounded-md transition-colors duration-150 w-5 h-5 checked:bg-lime-600 checked:border-lime-600 dark:checked:bg-lime-800 dark:checked:border-lime-800 focus-visible:border-gray-600 dark:focus-visible:border-gray-400" class="checkbox flex-shrink-0 relative border border-gray-400 cursor-pointer rounded-md transition-colors duration-150 w-5 h-5 checked:bg-lime-600 checked:border-lime-600 focus-visible:border-gray-600 dark:(border-gray-600 checked:bg-lime-700 checked:border-lime-700 focus-visible:border-gray-300 checked:focus-visible:border-gray-300)"
:checked="innerValue" :checked="innerValue"
@click="innerValue = !innerValue" @click="innerValue = !innerValue"
/> />
@ -82,7 +82,7 @@ export default defineComponent({
border-width: 0 2px 2px 0; border-width: 0 2px 2px 0;
transform: translate(-50%, -60%) rotate(45deg); transform: translate(-50%, -60%) rotate(45deg);
opacity: 0; opacity: 0;
@apply dark:border-gray-400; @apply dark:border-gray-300;
} }
.checkbox:checked::before { .checkbox:checked::before {

4
web/src/components/form/RadioField.vue
View file

@ -3,7 +3,7 @@
<input <input
:id="`radio-${id}-${option.value}`" :id="`radio-${id}-${option.value}`"
type="radio" type="radio"
class="radio relative flex-shrink-0 border border-gray-400 dark:border-gray-600 cursor-pointer rounded-full w-5 h-5 checked:bg-lime-600 checked:border-lime-600 dark:checked:bg-lime-700 dark:checked:border-lime-700 focus-visible:border-gray-600 dark:focus-visible:border-gray-400" class="radio relative flex-shrink-0 border border-gray-400 cursor-pointer rounded-full w-5 h-5 checked:bg-lime-600 checked:border-lime-600 focus-visible:border-gray-600 dark:(border-gray-600 checked:bg-lime-700 checked:border-lime-700 focus-visible:border-gray-300 checked:focus-visible:border-gray-300)"
:value="option.value" :value="option.value"
:checked="innerValue.includes(option.value)" :checked="innerValue.includes(option.value)"
@click="innerValue = option.value" @click="innerValue = option.value"
@ -81,7 +81,7 @@ export default defineComponent({
background: white; background: white;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
opacity: 0; opacity: 0;
@apply dark:bg-gray-400; @apply dark:bg-gray-300;
} }
.radio:checked::before { .radio:checked::before {