scottk/chatwoot
1
0
Fork 0
mirror of https://github.com/lingble/chatwoot.git synced 2025-11-02 20:18:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: Dark mode color fixes (#7693)

Browse Source
This commit is contained in:
Sivin Varghese
2023-08-08 21:07:15 +05:30
committed by GitHub
parent 180befbd42
commit 9ed701065e
4 changed files with 43 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/dashboard/modules/search/components/MessageContent.vue
View File

@@ -1,7 +1,7 @@
<template>
<blockquote
ref="messageContainer"
class="message border-l-2 border-slate-100 dark:border-slate-800"
class="message border-l-2 border-slate-100 dark:border-slate-700"
>
<p class="header">
<strong class="text-slate-700 dark:text-slate-100">

49
app/javascript/dashboard/modules/search/components/ReadMore.vue
View File

@@ -1,6 +1,11 @@
<template>
<div class="read-more">
<div ref="content" :class="{ 'shrink-container': shrink }">
<div
ref="content"
:class="{
'shrink-container after:shrink-gradient-light dark:after:shrink-gradient-dark': shrink,
}"
>
<slot />
<woot-button
v-if="shrink"
@@ -27,30 +32,32 @@ export default {
};
</script>
<style lang="scss" scoped>
<style scoped>
@tailwind components;
@layer components {
.shrink-gradient-light {
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 1) 100%
);
}
.shrink-gradient-dark {
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0),
rgb(21, 23, 24) 100%
);
}
}
.shrink-container {
max-height: 100px;
overflow: hidden;
position: relative;
@apply max-h-[100px] overflow-hidden relative;
}
.shrink-container::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 100%);
z-index: 4;
@apply content-[''] absolute bottom-0 left-0 right-0 h-[50px] z-10;
}
.read-more-button {
max-width: max-content;
position: absolute;
bottom: var(--space-small);
left: 0;
right: 0;
margin: 0 auto;
z-index: 5;
box-shadow: var(--box-shadow);
@apply max-w-max absolute bottom-2 left-0 right-0 mx-auto mt-0 z-20 shadow-sm;
}
</style>