hemna
/
aprsd
mirror of https://github.com/craigerl/aprsd.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Update index.html to use chat.css

This commit is contained in:
Hemna 2023-09-10 11:12:38 -04:00
parent 70ddc44b5c
commit ba6b410795
2 changed files with 94 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
aprsd/web/chat/static/css/chat.css Normal file
View File

@ -0,0 +1,93 @@
.speech-wrapper {
padding: 5px 30px;
border: 1px solid #ccc;
height: 450px;
overflow-y: scroll;
overflow-x: none;
background-color: #CCCCCC;
}
.bubble-row {
display: flex;
width: 100%;
justify-content: flex-start;
&.alt {
justify-content: flex-end;
}
}
.bubble {
/*width: 350px; */
height: auto;
display: block;
background: #f5f5f5;
border-radius: 4px;
box-shadow: 2px 8px 5px #555;
position: relative;
margin: 0 0 15px;
&.alt {
margin: 0 0 15px;
}
}
.bubble-text {
padding: 5px 5px 0px 8px;
}
.bubble-name {
width: 280px;
font-weight: 600;
font-size: 12px;
margin: 0 0 4px;
color: #3498db;
display: flex;
align-items: center;
.material-symbols-rounded {
margin-left: auto;
font-weight: normal;
color: #808080;
}
&.alt {
color: #2ecc71;
}
}
.bubble-timestamp {
margin-right: auto;
font-size: 11px;
text-transform: uppercase;
color: #bbb
}
.bubble-message {
font-size: 16px;
margin: 0px;
padding: 0px 5px 5px 0px;
color: #2b2b2b;
}
.bubble-arrow {
position: absolute;
width: 0;
bottom:30px;
left: -16px;
height: 0px;
&.alt{
right: -2px;
bottom: 30px;
left: auto;
}
}
.bubble-arrow:after {
content: "";
position: absolute;
border: 0 solid transparent;
border-top: 9px solid #f5f5f5;
border-radius: 0 20px 0;
width: 15px;
height: 30px;
transform: rotate(145deg);
}
.bubble-arrow.alt:after {
transform: rotate(45deg) scaleY(-1);
}

2
aprsd/web/chat/templates/index.html
View File

@ -15,7 +15,7 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,200,1,200">
<link rel="stylesheet" href="/static/css/chat2.css">
<link rel="stylesheet" href="/static/css/chat.css">
<link rel="stylesheet" href="/static/css/index.css">
<link rel="stylesheet" href="/static/css/tabs.css">
<script src="/static/js/main.js"></script>