mirror of
https://github.com/Safe-Support-Chat/ocrcc-chatbox
synced 2024-12-23 17:47:43 +00:00
fix font sizes
This commit is contained in:
Sharon Kennedy
parent
bc68a4028c
commit
d0d3fa1e01
14
dist/bookmarklet.js
vendored
14
dist/bookmarklet.js
vendored
File diff suppressed because one or more lines are too long
4
dist/chatbox.js
vendored
4
dist/chatbox.js
vendored
File diff suppressed because one or more lines are too long
8
dist/index.html
vendored
8
dist/index.html
vendored
@ -13,17 +13,17 @@
|
||||
<script src="./chatbox.js"></script>
|
||||
<script>
|
||||
var config = {
|
||||
matrixServerUrl: 'https://matrix.rhok.space',
|
||||
botId: '@help-bot:rhok.space',
|
||||
matrixServerUrl: 'https://matrix.safesupport.chat',
|
||||
botId: '@help-bot:safesupport.chat',
|
||||
roomName: 'Support Chat',
|
||||
termsUrl: 'https://tosdr.org/',
|
||||
introMessage: 'This chat application does not collect any of your personal data or any data from your use of this service.',
|
||||
introMessage: "This chat application does not collect any of your personal data or any data from your use of this service.",
|
||||
agreementMessage: 'Do you want to continue?',
|
||||
confirmationMessage: 'Waiting for a facilitator to join the chat...',
|
||||
exitMessage: 'The chat is closed. You may close this window.',
|
||||
chatUnavailableMessage: 'The chat service is not available right now. Please try again later.',
|
||||
anonymousDisplayName: 'Anonymous',
|
||||
}
|
||||
}
|
||||
|
||||
EmbeddableChatbox.mount(config);
|
||||
</script>
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
botId: '@help-bot:safesupport.chat',
|
||||
roomName: 'Support Chat',
|
||||
termsUrl: 'https://tosdr.org/',
|
||||
introMessage: "This is just a demo! There is probably no-one at the other end. You should probaby email us instead. But if you're lucky, there might be someone online to say hi!",
|
||||
introMessage: "This chat application does not collect any of your personal data or any data from your use of this service.",
|
||||
agreementMessage: 'Do you want to continue?',
|
||||
confirmationMessage: 'Waiting for a facilitator to join the chat...',
|
||||
exitMessage: 'The chat is closed. You may close this window.',
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
* { box-sizing: border-box; }
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
@ -31,6 +33,7 @@
|
||||
z-index: 9999;
|
||||
width: 400px;
|
||||
max-width: 100vw;
|
||||
font-size: $base-font-size;
|
||||
}
|
||||
|
||||
.dock {
|
||||
@ -42,30 +45,30 @@
|
||||
max-width: calc(100vw - 10px);
|
||||
color: $white;
|
||||
font-family: $theme-font;
|
||||
font-size: 1rem;
|
||||
font-size: 1em;
|
||||
border: none;
|
||||
color: $white;
|
||||
font-size: 1rem;
|
||||
font-size: 1em;
|
||||
line-height: 1;
|
||||
background-color: transparent;
|
||||
padding: 5px;
|
||||
padding: 0;
|
||||
|
||||
#open-chatbox-label {
|
||||
background: $theme-color;
|
||||
padding: 0.75rem;
|
||||
padding: 0.75em;
|
||||
flex: 1 1 auto;
|
||||
text-align: left;
|
||||
margin-right: 0.25rem;
|
||||
margin-right: 0.25em;
|
||||
border: 1px solid $white;
|
||||
border-radius: 10px;
|
||||
border-radius: 0.625em;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.label-icon {
|
||||
background: $theme-color;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 40px;
|
||||
height: 2.625em;
|
||||
width: 2.625em;
|
||||
border-radius: 2.625em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -117,7 +120,7 @@
|
||||
&-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0.2rem;
|
||||
margin-bottom: 0.2em;
|
||||
justify-content: flex-end;
|
||||
flex: 0 0 auto;
|
||||
|
||||
@ -136,9 +139,9 @@
|
||||
color: $dark-color;
|
||||
flex: 1 1 auto;
|
||||
font-family: $theme-font;
|
||||
font-size: 1rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: 10px;
|
||||
font-size: 1em;
|
||||
padding: 0.5em;
|
||||
border-radius: 0.625em;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
@ -153,18 +156,19 @@
|
||||
}
|
||||
|
||||
&-close {
|
||||
font-size: inherit;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid $dark-color !important;
|
||||
background: $white;
|
||||
border-radius: 40px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
margin-left: 0.2rem;
|
||||
border-radius: 2.625em;
|
||||
padding: 0.5em;
|
||||
margin-left: 0.2em;
|
||||
color: $dark-color;
|
||||
transition: all 0.2s ease-in-out;
|
||||
width: 2.625em;
|
||||
|
||||
&:hover {
|
||||
box-shadow: inset 0px 0px 0px 1px $dark-color;
|
||||
@ -203,23 +207,22 @@
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.5em;
|
||||
line-height: 1;
|
||||
transform: rotateX(0deg);
|
||||
transition: all 0.5s linear;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
.arrow {
|
||||
margin-right: 0.5rem;
|
||||
transform: translateY(5px);
|
||||
margin-right: 0.5em;
|
||||
transform: translateY(0.15em);
|
||||
|
||||
&.opened {
|
||||
color: $dark-color;
|
||||
transform: rotateX(180deg) translateY(5px);
|
||||
transform: rotateX(180deg) translateY(0.15em);
|
||||
}
|
||||
|
||||
}
|
||||
@ -230,7 +233,6 @@
|
||||
flex-direction: column;
|
||||
height: calc(40vh + 180px);
|
||||
max-height: 100vh;
|
||||
padding: 5px;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
@ -245,28 +247,28 @@
|
||||
background-color: $white;
|
||||
border: 1px solid $dark-color;
|
||||
flex: 1 1 auto;
|
||||
padding: 0.5rem;
|
||||
padding: 0.5em;
|
||||
overflow: scroll;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.2rem;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 0.2em;
|
||||
border-radius: 0.625em;
|
||||
}
|
||||
|
||||
.notices {
|
||||
color: $gray-color;
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.9em;
|
||||
|
||||
> div {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.message {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
.text {
|
||||
width: fit-content;
|
||||
@ -279,8 +281,8 @@
|
||||
|
||||
button {
|
||||
background-color: transparent;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
padding: 0.25em 0.5em;
|
||||
font-size: 0.9em;
|
||||
color: inherit;
|
||||
font-weight: bold;
|
||||
font-family: $theme-font;
|
||||
@ -289,8 +291,8 @@
|
||||
flex: 0 1 auto;
|
||||
border: 1px solid $theme-color;
|
||||
transition: all 0.2s ease-in-out;
|
||||
border-radius: 10px;
|
||||
margin-left: 4px;
|
||||
border-radius: 0.625em;
|
||||
margin-left: 0.25em;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid $dark-color;
|
||||
@ -310,7 +312,7 @@
|
||||
|
||||
&.from-bot {
|
||||
color: $gray-color;
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
&.from-me {
|
||||
@ -327,7 +329,7 @@
|
||||
color: $white;
|
||||
border-radius: 15px 15px 0 15px;
|
||||
margin-left: 10%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
padding: 0.5em 0.75em;
|
||||
}
|
||||
|
||||
a {
|
||||
@ -349,7 +351,7 @@
|
||||
color: $dark-color;
|
||||
border-radius: 15px 15px 15px 0;
|
||||
margin-right: 10%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
padding: 0.5em 0.75em;
|
||||
}
|
||||
|
||||
a {
|
||||
@ -374,8 +376,8 @@
|
||||
input[type="submit"] {
|
||||
background-color: $theme-color;
|
||||
height: 100%;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 1rem;
|
||||
padding: 0.5em 1em;
|
||||
font-size: 1em;
|
||||
color: $white;
|
||||
font-weight: bold;
|
||||
font-family: $theme-font;
|
||||
@ -384,7 +386,7 @@
|
||||
flex: 0 1 auto;
|
||||
border: 1px solid $theme-color;
|
||||
transition: all 0.2s ease-in-out;
|
||||
border-radius: 10px;
|
||||
border-radius: 0.625em;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid $dark-color;
|
||||
@ -405,8 +407,8 @@
|
||||
position: relative;
|
||||
|
||||
input[type="text"] {
|
||||
font-size: 1rem;
|
||||
padding: 0.5rem;
|
||||
font-size: 1em;
|
||||
padding: 0.5em;
|
||||
padding-right: 32px;
|
||||
border: none;
|
||||
display: flex;
|
||||
@ -414,9 +416,9 @@
|
||||
background: $white;
|
||||
color: $dark-color;
|
||||
font-family: $theme-font;
|
||||
margin-right: 0.2rem;
|
||||
margin-right: 0.2em;
|
||||
transition: all 0.2s ease-in-out;
|
||||
border-radius: 10px;
|
||||
border-radius: 0.625em;
|
||||
border: 1px solid $dark-color;
|
||||
|
||||
&:hover {
|
||||
@ -526,6 +528,7 @@
|
||||
.dock, .widget {
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#ocrcc-chatbox {
|
||||
|
||||
@ -25,3 +25,6 @@ $light-text-color: #ffffff;
|
||||
$dark-text-color: #0F1116;
|
||||
$dark-theme-color: #4F4F4F;
|
||||
$dark-theme-highlight-color: #211943;
|
||||
|
||||
|
||||
$base-font-size: 16px;
|
||||
@ -1,11 +1,11 @@
|
||||
import EmbeddableChatbox from './embeddable-chatbox';
|
||||
|
||||
var config = {
|
||||
const config = {
|
||||
matrixServerUrl: 'https://matrix.safesupport.chat',
|
||||
botId: '@help-bot:safesupport.chat',
|
||||
roomName: 'Support Chat',
|
||||
termsUrl: 'https://tosdr.org/',
|
||||
introMessage: "This is just a demo! There is probably no-one at the other end. You should probaby email us instead. But if you're lucky, there might be someone online to say hi!",
|
||||
introMessage: "This chat application does not collect any of your personal data or any data from your use of this service.",
|
||||
agreementMessage: 'Do you want to continue?',
|
||||
confirmationMessage: 'Waiting for a facilitator to join the chat...',
|
||||
exitMessage: 'The chat is closed. You may close this window.',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user