|
|
@import "../window"; |
|
|
|
|
|
@mixin container { |
|
|
background-color: var(--white); |
|
|
border: var(--border-in-light); |
|
|
box-shadow: var(--shadow); |
|
|
color: var(--black); |
|
|
background-color: var(--white); |
|
|
min-width: 600px; |
|
|
min-height: 480px; |
|
|
|
|
|
display: flex; |
|
|
overflow: hidden; |
|
|
box-sizing: border-box; |
|
|
|
|
|
width: var(--window-width); |
|
|
height: var(--window-height); |
|
|
} |
|
|
|
|
|
.container { |
|
|
@include container(); |
|
|
} |
|
|
|
|
|
@media only screen and (min-width: 600px) { |
|
|
.tight-container { |
|
|
--window-width: 100vw; |
|
|
--window-height: var(--full-height); |
|
|
--window-content-width: calc(100% - var(--sidebar-width)); |
|
|
|
|
|
@include container(); |
|
|
|
|
|
max-width: 100vw; |
|
|
max-height: var(--full-height); |
|
|
|
|
|
border-radius: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
.sidebar { |
|
|
top: 0; |
|
|
width: var(--sidebar-width); |
|
|
box-sizing: border-box; |
|
|
padding: 10px; |
|
|
background-color: var(--secondary); |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
box-shadow: inset -2px 0px 2px 0px rgb(0, 0, 0, 0.05); |
|
|
position: relative; |
|
|
transition: width ease 0.05s; |
|
|
} |
|
|
|
|
|
.window-content { |
|
|
width: var(--window-content-width); |
|
|
height: 100%; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.mobile { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
@media only screen and (max-width: 600px) { |
|
|
.container { |
|
|
min-height: unset; |
|
|
min-width: unset; |
|
|
max-height: unset; |
|
|
min-width: unset; |
|
|
border: 0; |
|
|
border-radius: 0; |
|
|
} |
|
|
|
|
|
.sidebar { |
|
|
position: absolute; |
|
|
left: -100%; |
|
|
z-index: 999; |
|
|
height: var(--full-height); |
|
|
transition: all ease 0.3s; |
|
|
box-shadow: none; |
|
|
} |
|
|
|
|
|
.sidebar-show { |
|
|
left: 0; |
|
|
} |
|
|
|
|
|
.mobile { |
|
|
display: block; |
|
|
} |
|
|
} |
|
|
|
|
|
.sidebar-header { |
|
|
position: relative; |
|
|
padding: 15px 10px 20px 12px; |
|
|
} |
|
|
|
|
|
.sidebar-logo { |
|
|
position: absolute; |
|
|
right: 0; |
|
|
bottom: 18px; |
|
|
} |
|
|
|
|
|
.sidebar-title { |
|
|
font-size: 20px; |
|
|
font-weight: bold; |
|
|
animation: slide-in ease 0.3s; |
|
|
} |
|
|
|
|
|
.sidebar-sub-title { |
|
|
font-size: 12px; |
|
|
font-weight: 400; |
|
|
animation: slide-in ease 0.3s; |
|
|
} |
|
|
|
|
|
.link-full { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.sidebar-newbtn { |
|
|
&:has(button:not(:only-child)) { |
|
|
|
|
|
height: 80px; |
|
|
|
|
|
&:hover { |
|
|
box-shadow: var(--card-shadow); |
|
|
} |
|
|
|
|
|
&:not(:hover) { |
|
|
height: 40px; |
|
|
transition-delay: 3s; |
|
|
} |
|
|
} |
|
|
|
|
|
height: 40px; |
|
|
background-color: var(--white); |
|
|
margin: 0 10px 0 10px; |
|
|
transition: 0.3s; |
|
|
animation: slide-in ease 0.3s; |
|
|
border-radius: 10px; |
|
|
transform: scale(1); |
|
|
display: flex; |
|
|
border: 2px solid var(--inactive); |
|
|
flex-direction: column; |
|
|
overflow: hidden; |
|
|
|
|
|
.sidebar-new { |
|
|
padding: 0; |
|
|
display: flex; |
|
|
background-color: transparent; |
|
|
width: 100%; |
|
|
overflow: hidden; |
|
|
user-select: none; |
|
|
outline: none; |
|
|
border: none; |
|
|
padding: 5px 10px 5px 10px; |
|
|
transition: background-color ease 0.3s; |
|
|
|
|
|
&:hover { |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
div { |
|
|
height: 30px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
|
|
|
.icon { |
|
|
width: 40px; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
margin-right: 10px; |
|
|
|
|
|
svg { |
|
|
fill: var(--black); |
|
|
height: 20px; |
|
|
width: 20px; |
|
|
} |
|
|
} |
|
|
|
|
|
.text { |
|
|
font-size: 14px; |
|
|
text-align: center; |
|
|
text-decoration: none; |
|
|
font-weight: bolder; |
|
|
font-family: "Poppins", "Noto Sans SC", "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
&:active { |
|
|
transform: scale(0.95); |
|
|
transition: 0; |
|
|
} |
|
|
|
|
|
&:hover { |
|
|
box-shadow: var(--card-shadow); |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
animation: slide-in ease 0.3s; |
|
|
} |
|
|
|
|
|
.sidebar-body { |
|
|
flex: 1; |
|
|
overflow: auto; |
|
|
} |
|
|
|
|
|
.sidebar-wechat-oa { |
|
|
width: 100px; |
|
|
font-size: 14px; |
|
|
font-weight: bold; |
|
|
-webkit-text-fill-color: transparent; |
|
|
background: linear-gradient(94.75deg, |
|
|
rgb(60, 172, 247) 0%, |
|
|
rgb(131, 101, 253) 43.66%, |
|
|
rgb(255, 141, 112) 64.23%, |
|
|
rgb(247, 201, 102) 83.76%, |
|
|
rgb(172, 143, 100) 100%); |
|
|
-webkit-background-clip: text; |
|
|
} |
|
|
|
|
|
.chat-list { |
|
|
overflow: visible; |
|
|
} |
|
|
|
|
|
.chat-item { |
|
|
animation: slide-in ease 0.3s; |
|
|
display: flex; |
|
|
margin: 10px; |
|
|
padding: 10px; |
|
|
background-color: var(--white); |
|
|
border-radius: 10px; |
|
|
transition: all 0.3s ease; |
|
|
cursor: pointer; |
|
|
user-select: none; |
|
|
border: 2px solid var(--inactive); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.chat-item-icon { |
|
|
width: 40px; |
|
|
margin-right: 10px; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
|
|
|
svg { |
|
|
fill: var(--black); |
|
|
height: 20px; |
|
|
width: 20px; |
|
|
} |
|
|
} |
|
|
|
|
|
@keyframes slide-in { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateY(20px); |
|
|
} |
|
|
|
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateY(0px); |
|
|
} |
|
|
} |
|
|
|
|
|
@keyframes buttonClick { |
|
|
0% { |
|
|
transform: scale(1); |
|
|
} |
|
|
|
|
|
50% { |
|
|
transform: scale(0.95); |
|
|
} |
|
|
|
|
|
100% { |
|
|
transform: scale(1); |
|
|
} |
|
|
} |
|
|
|
|
|
.chat-item:hover { |
|
|
box-shadow: var(--card-shadow); |
|
|
} |
|
|
|
|
|
.chat-item-selected { |
|
|
border-color: var(--primary); |
|
|
} |
|
|
|
|
|
.chat-item-main { |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.chat-item-title { |
|
|
font-size: 14px; |
|
|
font-weight: bolder; |
|
|
display: block; |
|
|
overflow: hidden; |
|
|
text-overflow: ellipsis; |
|
|
white-space: nowrap; |
|
|
} |
|
|
|
|
|
.chat-item-delete { |
|
|
position: absolute; |
|
|
top: 10px; |
|
|
right: -20px; |
|
|
transition: all ease 0.3s; |
|
|
opacity: 0; |
|
|
|
|
|
svg { |
|
|
height: 20px; |
|
|
width: 20px; |
|
|
fill: var(--black); |
|
|
} |
|
|
} |
|
|
|
|
|
.chat-item:hover>.chat-item-main>.chat-item-delete { |
|
|
opacity: 0.5; |
|
|
right: 7.5px; |
|
|
} |
|
|
|
|
|
.chat-item:hover>.chat-item-main>.chat-item-delete:hover { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.chat-item-info { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
color: rgb(166, 166, 166); |
|
|
font-size: 12px; |
|
|
margin-top: 8px; |
|
|
overflow: hidden; |
|
|
|
|
|
white-space: nowrap; |
|
|
|
|
|
text-overflow: ellipsis; |
|
|
|
|
|
} |
|
|
|
|
|
.chat-item-count {} |
|
|
|
|
|
.chat-item-date {} |
|
|
|
|
|
.sidebar-tail { |
|
|
animation: slide-in ease 0.3s; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
padding-top: 20px; |
|
|
|
|
|
.sidebar-premium { |
|
|
|
|
|
overflow: hidden; |
|
|
user-select: none; |
|
|
outline: none; |
|
|
border: none; |
|
|
margin: 10px 12px 0 12px; |
|
|
padding: 10px; |
|
|
border-radius: 10px; |
|
|
transform: scale(1); |
|
|
transition: 0.3s; |
|
|
background-color: transparent; |
|
|
width: calc(100% - 24px); |
|
|
|
|
|
&:active { |
|
|
transform: scale(0.95); |
|
|
transition: 0; |
|
|
} |
|
|
|
|
|
div { |
|
|
height: 30px; |
|
|
display: flex; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
|
|
|
.icon { |
|
|
width: 40px; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
margin-right: 10px; |
|
|
|
|
|
svg { |
|
|
fill: var(--black); |
|
|
height: 20px; |
|
|
width: 20px; |
|
|
} |
|
|
} |
|
|
|
|
|
.text { |
|
|
font-family: "Poppins", "Noto Sans SC", "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; |
|
|
font-size: 14px; |
|
|
text-align: center; |
|
|
} |
|
|
} |
|
|
|
|
|
&:hover { |
|
|
background-color: var(--secondary-hover-color); |
|
|
cursor: pointer; |
|
|
} |
|
|
} |
|
|
|
|
|
.sidebar-accountbtn { |
|
|
|
|
|
&:has(.sidebar-account-ext-dis) { |
|
|
background-color: transparent; |
|
|
} |
|
|
|
|
|
background-color: var(--secondary-hover-color); |
|
|
overflow: hidden; |
|
|
border-radius: 10px; |
|
|
padding: 10px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
height: 40px; |
|
|
transition: all ease 0.3s; |
|
|
justify-content: space-between; |
|
|
margin: 5px 12px 0 12px; |
|
|
|
|
|
&:hover { |
|
|
background-color: var(--secondary-hover-color); |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.sidebar-account { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
width: 100%; |
|
|
|
|
|
.avatar { |
|
|
height: 40px; |
|
|
width: 40px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
|
|
|
img { |
|
|
height: 100%; |
|
|
width: 100%; |
|
|
border-radius: 50%; |
|
|
} |
|
|
|
|
|
svg { |
|
|
fill: var(--black); |
|
|
height: 20px; |
|
|
width: 20px; |
|
|
} |
|
|
} |
|
|
|
|
|
.account-name { |
|
|
display: block; |
|
|
text-align: center; |
|
|
margin-left: 10px; |
|
|
font-size: 14px; |
|
|
text-overflow: ellipsis; |
|
|
overflow: hidden; |
|
|
white-space: nowrap; |
|
|
max-width: 140px; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
.account-settingbtn { |
|
|
border-radius: 10px; |
|
|
margin-left: 10px; |
|
|
height: 40px; |
|
|
width: 40px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
margin-left: auto; |
|
|
|
|
|
svg { |
|
|
fill: var(--black); |
|
|
height: 20px; |
|
|
width: 20px; |
|
|
} |
|
|
} |
|
|
|
|
|
.chat { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
position: relative; |
|
|
height: 100%; |
|
|
} |
|
|
|
|
|
.chat-body { |
|
|
flex: 1; |
|
|
overflow: auto; |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.chat-message { |
|
|
display: flex; |
|
|
flex-direction: row; |
|
|
} |
|
|
|
|
|
.chat-message-user { |
|
|
display: flex; |
|
|
flex-direction: row-reverse; |
|
|
} |
|
|
|
|
|
.chat-message-container { |
|
|
max-width: var(--message-max-width); |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: flex-start; |
|
|
animation: slide-in ease 0.3s; |
|
|
|
|
|
&:hover { |
|
|
.chat-message-top-actions { |
|
|
opacity: 1; |
|
|
right: 10px; |
|
|
pointer-events: all; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
.chat-message-user>.chat-message-container { |
|
|
align-items: flex-end; |
|
|
} |
|
|
|
|
|
.chat-message-avatar { |
|
|
margin-top: 20px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.chat-message-status { |
|
|
font-size: 12px; |
|
|
color: #aaa; |
|
|
line-height: 1.5; |
|
|
margin-top: 5px; |
|
|
} |
|
|
|
|
|
.user-avtar { |
|
|
height: 30px; |
|
|
width: 30px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
border: var(--border-in-light); |
|
|
box-shadow: var(--card-shadow); |
|
|
border-radius: 10px; |
|
|
} |
|
|
|
|
|
.chat-message-item { |
|
|
box-sizing: border-box; |
|
|
max-width: 100%; |
|
|
margin-top: 10px; |
|
|
border-radius: 10px; |
|
|
background-color: rgba(0, 0, 0, 0.05); |
|
|
padding: 10px; |
|
|
font-size: 14px; |
|
|
user-select: text; |
|
|
word-break: break-word; |
|
|
border: var(--border-in-light); |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.chat-message-top-actions { |
|
|
font-size: 12px; |
|
|
position: absolute; |
|
|
right: 20px; |
|
|
top: -26px; |
|
|
transition: all ease 0.3s; |
|
|
opacity: 0; |
|
|
pointer-events: none; |
|
|
|
|
|
display: flex; |
|
|
flex-direction: row-reverse; |
|
|
|
|
|
.chat-message-top-action { |
|
|
opacity: 0.5; |
|
|
color: var(--black); |
|
|
cursor: pointer; |
|
|
|
|
|
&:hover { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
&:not(:first-child) { |
|
|
margin-right: 10px; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
.chat-message-user>.chat-message-container>.chat-message-item { |
|
|
background-color: var(--secondary); |
|
|
} |
|
|
|
|
|
.chat-message-actions { |
|
|
display: flex; |
|
|
flex-direction: row-reverse; |
|
|
width: 100%; |
|
|
padding-top: 5px; |
|
|
box-sizing: border-box; |
|
|
font-size: 12px; |
|
|
justify-content: space-between; |
|
|
gap: 15px; |
|
|
} |
|
|
|
|
|
.chat-message-action-date { |
|
|
color: #aaa; |
|
|
} |
|
|
|
|
|
.chat-input-panel { |
|
|
width: 100%; |
|
|
padding: 10px 20px 20px 20px; |
|
|
box-sizing: border-box; |
|
|
flex-direction: column; |
|
|
border-top: var(--border-in-light); |
|
|
} |
|
|
|
|
|
@mixin single-line { |
|
|
white-space: nowrap; |
|
|
overflow: hidden; |
|
|
text-overflow: ellipsis; |
|
|
} |
|
|
|
|
|
.prompt-hints { |
|
|
min-height: 20px; |
|
|
width: 100%; |
|
|
max-height: 50vh; |
|
|
overflow: auto; |
|
|
display: flex; |
|
|
flex-direction: column-reverse; |
|
|
|
|
|
background-color: var(--white); |
|
|
border: var(--border-in-light); |
|
|
border-radius: 10px; |
|
|
margin-bottom: 10px; |
|
|
box-shadow: var(--shadow); |
|
|
|
|
|
.prompt-hint { |
|
|
color: var(--black); |
|
|
padding: 6px 10px; |
|
|
animation: slide-in ease 0.3s; |
|
|
cursor: pointer; |
|
|
transition: all ease 0.3s; |
|
|
border: transparent 1px solid; |
|
|
margin: 4px; |
|
|
border-radius: 8px; |
|
|
|
|
|
&:not(:last-child) { |
|
|
margin-top: 0; |
|
|
} |
|
|
|
|
|
.hint-title { |
|
|
font-size: 12px; |
|
|
font-weight: bolder; |
|
|
|
|
|
@include single-line(); |
|
|
} |
|
|
|
|
|
.hint-content { |
|
|
font-size: 12px; |
|
|
|
|
|
@include single-line(); |
|
|
} |
|
|
|
|
|
&-selected, |
|
|
&:hover { |
|
|
border-color: var(--primary); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
.chat-input-panel-inner { |
|
|
margin-top: 10px; |
|
|
display: flex; |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.chat-input { |
|
|
height: 100%; |
|
|
width: 100%; |
|
|
border-radius: 10px; |
|
|
border: var(--border-in-light); |
|
|
background-color: var(--white); |
|
|
color: var(--black); |
|
|
font-family: inherit; |
|
|
padding: 10px 14px; |
|
|
resize: none; |
|
|
outline: none; |
|
|
} |
|
|
|
|
|
@media only screen and (max-width: 600px) { |
|
|
.chat-input { |
|
|
font-size: 16px; |
|
|
} |
|
|
} |
|
|
|
|
|
.chat-input:focus { |
|
|
border: 1px solid var(--primary); |
|
|
} |
|
|
|
|
|
.chat-input-send { |
|
|
background-color: var(--primary); |
|
|
color: white; |
|
|
|
|
|
position: absolute; |
|
|
right: 30px; |
|
|
bottom: 30px; |
|
|
} |
|
|
|
|
|
.export-content { |
|
|
white-space: break-spaces; |
|
|
} |
|
|
|
|
|
.loading-content { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
height: 100%; |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.text { |
|
|
color: var(--black); |
|
|
} |
|
|
|
|
|
.chat-actionbar { |
|
|
display: flex; |
|
|
flex-direction: row; |
|
|
|
|
|
.chat-actionbar-item { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
padding: 2.5px 10px; |
|
|
border-radius: 16px; |
|
|
border: var(--border-in-light); |
|
|
transition: all ease 0.5s; |
|
|
|
|
|
&:hover { |
|
|
border-color: var(--primary); |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.icon { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
|
|
|
svg { |
|
|
height: 20px; |
|
|
width: 20px; |
|
|
fill: var(--black); |
|
|
display: block; |
|
|
|
|
|
path { |
|
|
width: 100%; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
.text { |
|
|
margin-left: 0; |
|
|
font-size: 13px; |
|
|
overflow: hidden; |
|
|
text-wrap: nowrap; |
|
|
max-width: 0px; |
|
|
font-weight: 500; |
|
|
transition: max-width 0.3s ease, opacity ease 0.3s, margin-left ease 0.5s, transform ease 0.3s; |
|
|
opacity: 0; |
|
|
transform: translateX(-5px); |
|
|
} |
|
|
|
|
|
&:hover > .text { |
|
|
margin-left: 5px; |
|
|
max-width: 200px; |
|
|
opacity: 1; |
|
|
transform: translate(0); |
|
|
transition-delay: 0.5s; |
|
|
} |
|
|
|
|
|
&:not(:last-child) { |
|
|
margin-right: 5px; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
.chat-bubble-actionbar { |
|
|
overflow: hidden; |
|
|
margin-left: 0; |
|
|
transition: all ease 0.3s; |
|
|
opacity: 0; |
|
|
|
|
|
.chat-actionbar-item { |
|
|
&:not(:last-child) { |
|
|
margin-right: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
&:has(.no-hover) { |
|
|
max-width: 1000px; |
|
|
opacity: 1; |
|
|
margin-left: 10px; |
|
|
|
|
|
.chat-actionbar-item { |
|
|
&:not(:last-child) { |
|
|
margin-right: 5px; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
.chat-message-container:hover > .chat-message-avatar > .chat-bubble-actionbar { |
|
|
max-width: 1000px; |
|
|
opacity: 1; |
|
|
margin-left: 10px; |
|
|
|
|
|
.chat-actionbar-item { |
|
|
&:not(:last-child) { |
|
|
margin-right: 5px; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
.force-auth-modal { |
|
|
max-width: 400px; |
|
|
} |
|
|
|
|
|
.sidebar-account-ext { |
|
|
opacity: 1; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
position: absolute; |
|
|
bottom: 65px; |
|
|
margin: 12px -10px; |
|
|
width: calc(100% - 48px); |
|
|
background-color: var(--white); |
|
|
border-radius: 10px; |
|
|
border: 2px solid var(--inactive); |
|
|
overflow: hidden; |
|
|
transition: all ease 0.1s; |
|
|
box-shadow: var(--card-shadow); |
|
|
|
|
|
.sidebar-account-ext-item { |
|
|
padding: 10px; |
|
|
display: flex; |
|
|
width: calc(100% - 20px); |
|
|
transition: all ease 0.3s; |
|
|
|
|
|
&:hover { |
|
|
background-color: var(--secondary-hover-color); |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.icon { |
|
|
width: 40px; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
margin-right: 10px; |
|
|
|
|
|
svg { |
|
|
fill: var(--black); |
|
|
height: 20px; |
|
|
width: 20px; |
|
|
} |
|
|
} |
|
|
|
|
|
.text { |
|
|
font-family: "Poppins", "Noto Sans SC", "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; |
|
|
font-size: 14px; |
|
|
text-align: center; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
.sidebar-account-ext-dis { |
|
|
opacity: 0; |
|
|
pointer-events: none; |
|
|
bottom: 60px; |
|
|
} |
