gorb/frontend
4
0
Fork 0
Code Issues 7 Pull requests 3 Projects Releases Packages 1 Wiki Activity Actions

style: improve base modal close button

Browse source
This commit is contained in:
Twig 2025-07-17 16:09:10 +02:00
parent b8cbbf1f86
commit d2ff4ac87c
No known key found for this signature in database
2 changed files with 17 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

9
components/Modal/Base.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<dialog ref="dialog" class="modal" :class="props.obscure ? 'modal-obscure' : 'modal-regular'"> <dialog ref="dialog" class="modal" :class="props.obscure ? 'modal-obscure' : 'modal-regular'">
<span class="modal-exit-button-container" style="position: absolute; right: 2em; top: .2em; width: .5em; height: .5em;"> <span class="modal-exit-button-container" style="position: absolute; right: 2em; top: .2em; width: .5em; height: .5em;">
<Button text="X" variant="neutral" :callback="() => dialog?.remove()" /> <Button text="✕" variant="stealth" :callback="() => dialog?.remove()" />
</span> </span>
<div class="modal-content"> <div class="modal-content">
<h1 class="modal-title">{{ title }}</h1> <h1 class="modal-title">{{ title }}</h1>
@ -42,9 +42,12 @@ onMounted(() => {
flex-direction: column; flex-direction: column;
gap: 1em; gap: 1em;
opacity: 100%; opacity: 100%;
padding: 1%;
background-color: var(--sidebar-highlighted-background-color); padding: var(--standard-radius);
border-radius: var(--standard-radius);
background-color: var(--chat-highlighted-background-color);
color: var(--text-color); color: var(--text-color);
overflow: hidden; overflow: hidden;
} }

14
components/UserInterface/Button.vue
View file

@ -1,6 +1,7 @@
<template> <template>
<button @click="props.callback ? props.callback() : null" class="button" :class="props.variant + '-button'"> <button class="button" :class="props.variant + '-button'"
{{ props.text }} @click="props.callback ? props.callback() : null">
{{ props.text }}
</button> </button>
</template> </template>
@ -9,7 +10,7 @@
const props = defineProps<{ const props = defineProps<{
text: string, text: string,
callback?: CallableFunction, callback?: CallableFunction,
variant?: "normal" | "scary" | "neutral", variant?: "normal" | "scary" | "neutral" | "stealth",
}>(); }>();
</script> </script>
@ -50,4 +51,11 @@ const props = defineProps<{
background-color: var(--accent-highlighted-color); background-color: var(--accent-highlighted-color);
} }
.stealth-button {
background-color: unset;
}
.stealth-button:hover {
background-color: unset;
}
</style> </style>