63 lines
1.4 KiB
Svelte
63 lines
1.4 KiB
Svelte
<script>
|
|
import { HashIcon } from "svelte-feather-icons";
|
|
|
|
export let channel;
|
|
</script>
|
|
|
|
<style>
|
|
.main-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.top-bar {
|
|
height: 3.4em;
|
|
width: 100%;
|
|
padding: var(--space-xs);
|
|
background-color: var(--background-color-1);
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--background-color-2);
|
|
}
|
|
|
|
.channel-heading {
|
|
margin-left: var(--space-xxs);
|
|
}
|
|
|
|
.messages-container {
|
|
height: 100%;
|
|
width: 100%;
|
|
background-color: var(--background-color-1);
|
|
}
|
|
|
|
.message-input-container {
|
|
width: 100%;
|
|
padding: var(--space-md);
|
|
background-color: var(--background-color-1);
|
|
}
|
|
|
|
.message-input {
|
|
height: 3em;
|
|
width: 100%;
|
|
background-color : var(--background-color-2);
|
|
border: none;
|
|
color: currentColor;
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-sm);
|
|
}
|
|
</style>
|
|
|
|
<div class="main-container">
|
|
<div class="top-bar">
|
|
<HashIcon />
|
|
<span class="h5 channel-heading">{ channel.name }</span>
|
|
</div>
|
|
<div class="messages-container">
|
|
|
|
</div>
|
|
<div class="message-input-container">
|
|
<input type="text" class="message-input">
|
|
</div>
|
|
</div>
|