lychiyu/frequi_origin
1
0
Fork 0
mirror of https://github.com/freqtrade/frequi.git synced 2024-11-23 11:35:14 +00:00
Code Issues Actions 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>
<div id="app" class="d-flex flex-column vh-100">
<NavBar />
<BToaster></BToaster>
<BodyLayout class="flex-fill overflow-auto" />
<NavFooter />
</div>

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

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

39
src/styles/_styles_ovw.scss
View File

@ -41,6 +41,23 @@
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"] {
$bg-dark: rgb(18, 18, 18);
@ -219,18 +236,24 @@
background-position: right 0.75rem center;
}
.b-toast .toast {
color: black;
// background: $bg-dark;
border-color: lighten($bg-dark, 20%);
.toast {
// Colors to match the "alert" styling.
&.text-bg-danger {
background-color: rgb(44, 11, 14) !important;
color: rgb(234, 134, 143) !important;
}
.toast-header {
color: $fg-color;
// background: darken($bg-dark, 10%);
border-color: lighten($bg-dark, 20%);
&.text-bg-warning {
background-color: rgb(41, 39, 1) !important;
color: rgb(255, 218, 106) !important;
}
&.text-bg-success {
background-color: rgb(5, 27, 17) !important;
color: rgb(118, 183, 152) !important;
}
}
.vue-grid-item>.vue-resizable-handle {
// Stupid workaround to have the Shevron actually show.
background-color: darken($fg-color, 50%);