juice-shop

1
/*!
2
 * Copyright (c) 2014-2024 Bjoern Kimminich & the OWASP Juice Shop contributors.
3
 * SPDX-License-Identifier: MIT
4
 */
5

6
$bg-chat: rgba(0, 0, 0, 0.3);
7

8
mat-card {
9
  height: auto;
10
  min-width: 320px;
11
  width: 60%;
12
}
13

14
mat-form-field {
15
  display: block;
16
  height: 0;
17
  margin: auto;
18
  width: 70%;
19
}
20

21
.form-container {
22
  display: flex;
23
  flex-direction: column;
24
  position: relative;
25
}
26

27
#submitButton {
28
  margin-left: 20%;
29
  margin-top: 30px;
30
  width: 60%;
31
}
32

33
#chat-container {
34
  box-shadow: none;
35
  display: flex;
36
  position: relative;
37
  width: 95%;
38
}
39

40
#chat-box {
41
  align-content: space-between;
42
  background-color: $bg-chat;
43
  display: block;
44
  display: flex;
45
  flex-direction: column;
46
  height: 650px;
47
  margin-left: auto;
48
  margin-right: auto;
49
  padding: 0;
50
  width: 80%;
51
}
52

53
.form-wrapper {
54
  font-size: 10px;
55
}
56

57
#chat-window {
58
  height: 90%;
59
  overflow-y: auto;
60
  padding: 20px;
61

62
  ::-webkit-scrollbar {
63
    background: none;
64
    width: 20px;
65
  }
66

67
  /* Track */
68
  ::-webkit-scrollbar-track {
69
    background: none;
70
  }
71

72
  /* Handle */
73
  ::-webkit-scrollbar-thumb {
74
    background: #f00;
75
    border-radius: 10px;
76
  }
77

78
  /* Handle on hover */
79
  ::-webkit-scrollbar-thumb:hover {
80
    background: #b30000;
81
  }
82
}
83

84
.message-box-container {
85
  border-top: solid 1px #fff;
86
  height: 10%;
87
  padding-top: 15px;
88
  width: auto;
89
}
90

91
.message-container {
92
  height: auto;
93
  margin-right: 25px;
94
  overflow: hidden;
95
  width: auto;
96
}
97

98
.speech-bubble-right {
99
  background: rgb(84, 110, 122);
100
  border-radius: 4px;
101
  float: right;
102
  font-size: 15px;
103
  line-height: 1.3;
104
  margin-bottom: 25px;
105
  max-width: 500px;
106
  padding: 15px;
107
  position: relative;
108

109
  &::after {
110
    border-left: 20px solid transparent;
111
    border-top: 20px solid rgb(84, 110, 122);
112
    bottom: -20px;
113
    content: '';
114
    position: absolute;
115
    right: 20px;
116
  }
117
}
118

119
.speech-bubble-left {
120
  background: rgb(84, 110, 122);
121
  border-radius: 4px;
122
  float: left;
123
  font-size: 15px;
124
  line-height: 1.3;
125
  margin-bottom: 25px;
126
  max-width: 500px;
127
  padding: 15px;
128
  position: relative;
129

130
  &::after {
131
    border-right: 20px solid transparent;
132
    border-top: 20px solid rgb(84, 110, 122);
133
    bottom: -20px;
134
    content: '';
135
    left: 20px;
136
    position: absolute;
137
  }
138
}
139

140
.juicy-chat-bot-image {
141
  float: left;
142
  height: 70px;
143
  margin-top: 20px;
144
}
145

146
.profile-image {
147
  border-radius: 50%;
148
  float: right;
149
  height: 40px;
150
  margin-left: 10px;
151
  margin-top: 20px;
152
}
153

154
.powered-by {
155
  font-size: xx-small;
156
}
157