local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fix(dark mode): make a focused text only button actually readable

Browse source 
Resolves https://github.com/go-vikunja/api/issues/41
This commit is contained in:
kolaente 2022-08-15 23:08:18 +02:00
parent 45b7434bda
commit 3ab58a015c
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
2 changed files with 12 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/base/BaseButton.vue
View file

@ -52,6 +52,7 @@ const props = defineProps({
const componentNodeName = ref<Node['nodeName']>('button') const componentNodeName = ref<Node['nodeName']>('button')
interface ElementBindings { interface ElementBindings {
type?: string; type?: string;
rel?: string; rel?: string;
@ -92,6 +93,7 @@ watchEffect(() => {
const isButton = computed(() => componentNodeName.value === 'button') const isButton = computed(() => componentNodeName.value === 'button')
const button = ref() const button = ref()
function focus() { function focus() {
button.value.focus() button.value.focus()
} }
@ -123,7 +125,7 @@ defineExpose({
user-select: none; user-select: none;
pointer-events: auto; // disable possible resets pointer-events: auto; // disable possible resets
&:focus { &:focus, &.is-focused {
outline: transparent; outline: transparent;
} }

4
src/styles/custom-properties/colors.scss
View file

@ -291,9 +291,11 @@
--table-row-hover-background-color: var(--grey-100); --table-row-hover-background-color: var(--grey-100);
--dropdown-item-hover-background-color: var(--grey-100); --dropdown-item-hover-background-color: var(--grey-100);
--dropdown-item-hover-color: var(--text); --dropdown-item-hover-color: var(--text);
--pre-background: var(--grey-200);
--button-text-hover-background-color: var(--grey-200); --button-text-hover-background-color: var(--grey-200);
--button-hover-color: var(--grey-600); --button-hover-color: var(--grey-600);
--pre-background: var(--grey-200); --button-active-color: var(--grey-600);
--button-focus-color: var(--grey-600);
// Custom color variables we need to override // Custom color variables we need to override
--card-border-color: hsla(var(--grey-100-hsl), 0.3); --card-border-color: hsla(var(--grey-100-hsl), 0.3);