freifunk/ffffng
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

More readable link styling in ErrorCards.

Browse source
This commit is contained in:
baldo 2022-08-23 17:17:11 +02:00
parent 3a2f0799eb
commit 704620e2f7
3 changed files with 20 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/App.vue
View file

@ -50,7 +50,7 @@ a {
} }
&:focus { &:focus {
outline: 0.1em solid $link-hover-color; outline: $link-focus-outline;
} }
} }

16
frontend/src/components/ErrorCard.vue
View file

@ -1,12 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import {onMounted, ref} from "vue"; import { onMounted, ref } from "vue";
const element = ref<HTMLElement>(); const element = ref<HTMLElement>();
function scrollIntoView() { function scrollIntoView() {
element.value?.scrollIntoView({ element.value?.scrollIntoView({
behavior: "smooth", behavior: "smooth",
block: "nearest" block: "nearest",
}); });
} }
@ -33,5 +33,17 @@ onMounted(scrollIntoView);
background-color: $error-card-background-color; background-color: $error-card-background-color;
color: $error-card-color; color: $error-card-color;
a {
color: $error-card-link-color;
&:hover {
color: $error-card-link-hover-color;
}
&:focus {
outline: $error-card-link-focus-outline;
}
}
} }
</style> </style>

6
frontend/src/scss/_variables.scss
View file

@ -75,7 +75,8 @@ $h2-margin: 0.5em 0;
// Links // Links
$link-color: $variant-color-warning; $link-color: $variant-color-warning;
$link-hover-color: $variant-color-warning; $link-hover-color: $link-color;
$link-focus-outline: 0.1em solid $link-hover-color;
// Form // Form
$label-font-weight: 600; $label-font-weight: 600;
@ -115,6 +116,9 @@ $error-card-border-radius: 0.5em;
$error-card-font-weight: 600; $error-card-font-weight: 600;
$error-card-background-color: lighten($variant-color-danger, 10%); $error-card-background-color: lighten($variant-color-danger, 10%);
$error-card-color: $page-background-color; $error-card-color: $page-background-color;
$error-card-link-color: darken($variant-color-danger, 30%);
$error-card-link-hover-color: $error-card-link-color;
$error-card-link-focus-outline: 0.1em solid $error-card-link-hover-color;
// Node preview // Node preview
$node-preview-card-padding: 0.75em 1em; $node-preview-card-padding: 0.75em 1em;