tsanie/ui-lib
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

communications app, popup lib

Browse Source
This commit is contained in:
Tsanie Lily
2023-04-08 11:46:20 +08:00
parent 449196b491
commit f85d4c9903
25 changed files with 746 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
lib/app/communications/style.scss
View File

@ -1,10 +1,6 @@
:root {
--dark-fore-color: #fff;
--dark-fore-opacity-color: rgba(255, 255, 255, .6);
--title-color: #fff;
--title-bg-color: rgb(68, 114, 196);
--strong-color: #333;
--medium-font-size: .875rem;
}
.comm {
@ -13,6 +9,15 @@
width: 320px;
background-color: var(--dark-fore-color);
border: 1px solid var(--title-bg-color);
margin-left: 12px;
& {
--dark-fore-color: #fff;
--dark-fore-opacity-color: rgba(255, 255, 255, .6);
--strong-color: #333;
--light-color: #ccc;
--medium-font-size: .875rem;
}
.roundbtn {
width: 30px;
@ -86,6 +91,7 @@
line-height: 24px;
display: flex;
align-items: center;
font-size: 1.2em;
>div {
flex: 1 1 auto;
@ -94,6 +100,7 @@
>.title-functions {
flex: 0 0 auto;
display: flex;
padding: 4px;
>label {
margin: 0 4px;
@ -122,6 +129,19 @@
opacity: .6;
}
}
&.disabled {
cursor: default;
opacity: .6;
&:hover {
background-color: var(--dark-fore-color);
>svg {
opacity: unset;
}
}
}
}
}
}
@ -132,29 +152,41 @@
display: flex;
border-bottom: 1px solid var(--title-bg-color);
>svg {
width: 30px;
height: 30px;
margin: 0 8px;
}
.contact-item {
display: flex;
align-items: center;
line-height: 22px;
>.bar-icon {
flex: 0 0 auto;
>svg {
flex: 0 0 auto;
width: 16px;
height: 16px;
margin-right: 6px;
fill: var(--strong-color);
width: 30px;
height: 30px;
margin: 0 8px;
}
}
>span {
flex: 1 1 auto;
color: var(--strong-color);
font-size: var(--medium-font-size);
>.bar-list {
flex: 1 1 auto;
width: calc(100% - 46px);
.contact-item {
display: flex;
align-items: center;
line-height: 22px;
>svg {
flex: 0 0 auto;
width: 16px;
height: 16px;
margin-right: 6px;
fill: var(--strong-color);
}
>span {
flex: 1 1 auto;
color: var(--strong-color);
font-size: var(--medium-font-size);
overflow: hidden;
text-overflow: ellipsis;
padding-right: 10px;
}
}
}
@ -182,6 +214,11 @@
>div {
padding: 0 10px 10px;
>.prompt-count {
display: inline-block;
color: var(--light-color);
}
}
}
@ -206,64 +243,78 @@
&:last-child {
border-bottom: none;
}
}
.item-poster {
font-weight: bold;
align-self: flex-end;
.item-poster {
font-weight: bold;
align-self: flex-start;
.tooltip-wrapper>.tooltip-content {
font-weight: normal;
}
}
.item-content {
line-height: 1.2rem;
padding: 8px 20px;
border-radius: 5px;
white-space: pre-wrap;
word-break: break-word;
max-width: 240px;
margin-right: 10px;
background-color: #9eea6a;
align-self: flex-end;
a>svg {
width: 13px;
height: 13px;
fill: #2140fb;
&:hover {
border-bottom: 1px solid;
.tooltip-wrapper>.tooltip-content {
font-weight: normal;
}
}
.item-status {
text-align: right;
margin-top: 3px;
font-weight: bold;
margin-right: -12px;
font-size: 10px;
}
}
.item-time {
align-self: flex-end;
color: #aaa;
font-size: .7rem;
}
&.item-other {
.item-poster,
.item-content {
align-self: flex-start;
}
.item-content {
line-height: 1.2rem;
padding: 8px 20px;
border-radius: 5px;
white-space: pre-wrap;
word-break: break-word;
max-width: 240px;
background-color: rgb(244, 244, 244);
margin-right: unset;
margin-left: 10px;
a>svg {
width: 13px;
height: 13px;
fill: #2140fb;
&:hover {
border-bottom: 1px solid;
}
}
>span::after {
content: '';
display: block;
}
.item-status {
text-align: right;
margin-top: 3px;
font-weight: bold;
margin-right: -12px;
font-size: 10px;
float: right;
}
}
.item-time {
align-self: flex-end;
color: #aaa;
font-size: .7rem;
}
&.item-other {
.item-content {
margin-left: 10px;
align-self: flex-start;
}
}
&.item-self {
.item-poster,
.item-content {
align-self: flex-end;
}
.item-content {
margin-right: 10px;
background-color: #9eea6a;
}
}
&.item-sent .item-content {
background-color: rgb(164, 226, 251);
}
}
}