aboutsummaryrefslogtreecommitdiff
path: root/src/components/shout_panel
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/shout_panel')
-rw-r--r--src/components/shout_panel/shout_panel.vue16
1 files changed, 6 insertions, 10 deletions
diff --git a/src/components/shout_panel/shout_panel.vue b/src/components/shout_panel/shout_panel.vue
index a7013469..9113211e 100644
--- a/src/components/shout_panel/shout_panel.vue
+++ b/src/components/shout_panel/shout_panel.vue
@@ -5,7 +5,7 @@
>
<div class="panel panel-default">
<div
- class="panel-heading timeline-heading"
+ class="panel-heading"
:class="{ 'shout-heading': floating }"
@click.stop.prevent="togglePanel"
>
@@ -18,7 +18,7 @@
/>
</div>
</div>
- <div class="shout-window">
+ <div class="panel-body shout-window">
<div
v-for="message in messages"
:key="message.id"
@@ -41,10 +41,10 @@
</div>
</div>
</div>
- <div class="shout-input">
+ <div class="panel-body shout-input">
<textarea
v-model="currentMessage"
- class="shout-input-textarea"
+ class="shout-input-textarea input"
rows="1"
@keyup.enter="submit(currentMessage)"
/>
@@ -75,8 +75,6 @@
<script src="./shout_panel.js"></script>
<style lang="scss">
-@import "../../variables";
-
.floating-shout {
position: fixed;
bottom: 0.5em;
@@ -97,8 +95,7 @@
cursor: pointer;
.icon {
- color: $fallback--text;
- color: var(--panelText, $fallback--text);
+ color: var(--text);
margin-right: 0.5em;
}
@@ -128,8 +125,7 @@
img {
height: 24px;
width: 24px;
- border-radius: $fallback--avatarRadius;
- border-radius: var(--avatarRadius, $fallback--avatarRadius);
+ border-radius: var(--roundness);
margin-right: 0.5em;
margin-top: 0.25em;
}