ColdBreeze/ColdBreeze-chat-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: more tailwind

Browse Source
This commit is contained in:
Tristan Yang
2023-02-07 09:25:05 +08:00
parent 07ddfbf12b
commit c5669f8bc4
48 changed files with 447 additions and 1314 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/icons/folder.svg
+2 -2
View File
@@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.821 6.5H19.75C20.8867 6.5 21.8266 7.34297 21.9785 8.43788L21.9948 8.59595L22 8.75V17.75C22 18.9409 21.0748 19.9156 19.904 19.9948L19.75 20H4.25C3.05914 20 2.08436 19.0748 2.00519 17.904L2 17.75V10.499L8.20693 10.5L8.40335 10.4914C8.79396 10.4572 9.16896 10.3214 9.49094 10.0977L9.64734 9.9785L13.821 6.5ZM8.20693 4C8.66749 4 9.1153 4.14129 9.49094 4.40235L9.64734 4.5215L11.75 6.273L8.68706 8.82617L8.60221 8.88738C8.51363 8.94232 8.41452 8.9782 8.31129 8.9927L8.20693 9L2 8.999V6.25C2 5.05914 2.92516 4.08436 4.09595 4.00519L4.25 4H8.20693Z" fill="#70707B"/>
<svg width="24" height="24" viewBox="0 0 24 24" fill="#70707B" xmlns="http://www.w3.org/2000/svg">
<path d="M13.821 6.5H19.75C20.8867 6.5 21.8266 7.34297 21.9785 8.43788L21.9948 8.59595L22 8.75V17.75C22 18.9409 21.0748 19.9156 19.904 19.9948L19.75 20H4.25C3.05914 20 2.08436 19.0748 2.00519 17.904L2 17.75V10.499L8.20693 10.5L8.40335 10.4914C8.79396 10.4572 9.16896 10.3214 9.49094 10.0977L9.64734 9.9785L13.821 6.5ZM8.20693 4C8.66749 4 9.1153 4.14129 9.49094 4.40235L9.64734 4.5215L11.75 6.273L8.68706 8.82617L8.60221 8.88738C8.51363 8.94232 8.41452 8.9782 8.31129 8.9927L8.20693 9L2 8.999V6.25C2 5.05914 2.92516 4.08436 4.09595 4.00519L4.25 4H8.20693Z" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 676 B

After

Width:  |  Height:  |  Size: 665 B

src/assets/icons/user.svg
+2 -2
View File
@@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.7541 13.9999C18.9961 13.9999 20.0029 15.0068 20.0029 16.2488V17.1673C20.0029 17.7406 19.8237 18.2997 19.4903 18.7662C17.9445 20.9294 15.4202 22.0011 11.9999 22.0011C8.57891 22.0011 6.05595 20.9289 4.51379 18.7646C4.18182 18.2987 4.00342 17.7409 4.00342 17.1688V16.2488C4.00342 15.0068 5.01027 13.9999 6.25229 13.9999H17.7541ZM11.9999 2.00464C14.7613 2.00464 16.9999 4.24321 16.9999 7.00464C16.9999 9.76606 14.7613 12.0046 11.9999 12.0046C9.23845 12.0046 6.99988 9.76606 6.99988 7.00464C6.99988 4.24321 9.23845 2.00464 11.9999 2.00464Z" fill="#70707B"/>
<svg width="24" height="24" viewBox="0 0 24 24" fill="#70707B" xmlns="http://www.w3.org/2000/svg">
<path d="M17.7541 13.9999C18.9961 13.9999 20.0029 15.0068 20.0029 16.2488V17.1673C20.0029 17.7406 19.8237 18.2997 19.4903 18.7662C17.9445 20.9294 15.4202 22.0011 11.9999 22.0011C8.57891 22.0011 6.05595 20.9289 4.51379 18.7646C4.18182 18.2987 4.00342 17.7409 4.00342 17.1688V16.2488C4.00342 15.0068 5.01027 13.9999 6.25229 13.9999H17.7541ZM11.9999 2.00464C14.7613 2.00464 16.9999 4.24321 16.9999 7.00464C16.9999 9.76606 14.7613 12.0046 11.9999 12.0046C9.23845 12.0046 6.99988 9.76606 6.99988 7.00464C6.99988 4.24321 9.23845 2.00464 11.9999 2.00464Z" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 669 B

After

Width:  |  Height:  |  Size: 658 B

src/assets/index.css
+143 -1
View File
@@ -30,8 +30,9 @@
.md-editor {
position: relative;
width: 100%;
width: -webkit-fill-available;
/* width: -webkit-fill-available; */
margin-top: 16px;
grid-column: span 2;
}
.md-editor > div {
transition: height 0.5s ease 0s;
@@ -63,6 +64,147 @@
bottom: 15px;
right: 15px;
}
/* setting container */
.setting-container {
position: relative;
width: 512px;
height: 100%;
display: flex;
flex-direction: column;
gap: 24px;
}
.setting-container .inputs {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 32px;
}
.setting-container .inputs .input {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.setting-container .inputs .input .row {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.setting-container .inputs .input .row.inputs {
flex-direction: column;
gap: 8px;
}
.setting-container .inputs .input .row .title {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.setting-container .inputs .input .row .title .txt {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
.setting-container .inputs .input .row .title .txt .icon {
cursor: pointer;
}
.setting-container .inputs .input .row .title .desc {
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: #667085;
}
.setting-container .tip {
display: flex;
gap: 8px;
align-items: center;
}
.setting-container .tip .link {
font-weight: 600;
font-size: 14px;
line-height: 20px;
color: #06b6d4;
}
/* context menu */
.context-menu {
display: flex;
flex-direction: column;
gap: 2px;
padding: 4px;
background-color: #fff;
box-shadow: 0 20px 25px 20px rgba(31, 41, 55, 0.1), 0 10px 10px rgba(31, 41, 55, 0.04);
border-radius: 12px;
min-width: 200px;
}
.context-menu .item {
position: relative;
display: flex;
align-items: center;
gap: 14px;
white-space: nowrap;
cursor: pointer;
border-radius: 6px;
padding: 6px;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 20px;
color: #616161;
}
.context-menu .item .icon {
width: 20px;
height: 20px;
}
.context-menu .item .icon path {
fill: #475467;
}
.context-menu .item.sb {
justify-content: space-between;
}
.context-menu .item:hover {
background-color: #22ccee;
color: #fff;
}
.context-menu .item:hover .icon path {
fill: #fff;
}
.context-menu .item.bottom_line {
margin-bottom: 9px;
}
.context-menu .item.bottom_line:before {
position: absolute;
content: "";
left: 6px;
bottom: -4px;
display: block;
padding: 0 6px;
box-sizing: border-box;
width: calc(88%);
height: 1px;
background-color: #f2f4f7;
}
.context-menu .item.danger {
color: #a11043;
}
.context-menu .item.danger:hover {
background-color: #b42318;
color: #fff;
}
.context-menu .item[data-disabled="true"] {
color: #a4a8b3;
}
.context-menu .item[data-disabled="true"] .icon path {
fill: #a4a8b3;
}
/* text fill transparent */
.text-fill-transparent {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
}
}
/* 全局设置滚动条 */
::-webkit-scrollbar-thumb {