lychiyu/frequi_origin
1
0
Fork 0
mirror of https://github.com/freqtrade/frequi.git synced 2024-11-27 05:25:17 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Implement toaster and toast styles

Browse Source
This commit is contained in:
Matthias 2023-09-23 16:20:57 +02:00
parent 995962b246
commit 9682d76c11
3 changed files with 34 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<div id="app" class="d-flex flex-column vh-100"> <div id="app" class="d-flex flex-column vh-100">
<NavBar /> <NavBar />
<BToaster></BToaster>
<BodyLayout class="flex-fill overflow-auto" /> <BodyLayout class="flex-fill overflow-auto" />
<NavFooter /> <NavFooter />
</div> </div>

4
src/components/layout/BodyLayout.vue
View File

@ -1,13 +1,9 @@
<template> <template>
<main> <main>
<BotAlerts />
<router-view /> <router-view />
</main> </main>
</template> </template>
<script setup lang="ts">
import BotAlerts from '@/components/ftbot/BotAlerts.vue';
</script>
<style lang="scss" scoped> <style lang="scss" scoped>
.container-main { .container-main {
padding: 0; padding: 0;

43
src/styles/_styles_ovw.scss
View File

@ -41,6 +41,23 @@
font-size: 0.8rem; font-size: 0.8rem;
} }
.toast {
// Colors to match the "alert" styling.
&.text-bg-danger {
background-color: rgb(238, 215, 218) !important;
color: rgb(88, 21, 28) !important;
}
&.text-bg-warning {
background-color: rgb(255, 243, 205) !important;
color: rgb(102, 77, 3) !important;
}
&.text-bg-success {
background-color: rgb(209, 231, 221) !important;
color: rgb(10, 54, 34) !important;
}
}
[data-bs-theme="dark"] { [data-bs-theme="dark"] {
$bg-dark: rgb(18, 18, 18); $bg-dark: rgb(18, 18, 18);
@ -219,18 +236,24 @@
background-position: right 0.75rem center; background-position: right 0.75rem center;
} }
.b-toast .toast { .toast {
color: black; // Colors to match the "alert" styling.
// background: $bg-dark; &.text-bg-danger {
border-color: lighten($bg-dark, 20%); background-color: rgb(44, 11, 14) !important;
} color: rgb(234, 134, 143) !important;
}
.toast-header { &.text-bg-warning {
color: $fg-color; background-color: rgb(41, 39, 1) !important;
// background: darken($bg-dark, 10%); color: rgb(255, 218, 106) !important;
border-color: lighten($bg-dark, 20%); }
}
&.text-bg-success {
background-color: rgb(5, 27, 17) !important;
color: rgb(118, 183, 152) !important;
}
}
.vue-grid-item>.vue-resizable-handle { .vue-grid-item>.vue-resizable-handle {
// Stupid workaround to have the Shevron actually show. // Stupid workaround to have the Shevron actually show.
background-color: darken($fg-color, 50%); background-color: darken($fg-color, 50%);