989ab5a432
* Add useDeviceList hook Signed-off-by: Ajay Bura <ajbura@gmail.com> * Add isCrossVerified func to matrixUtil Signed-off-by: Ajay Bura <ajbura@gmail.com> * Add className prop in sidebar avatar comp Signed-off-by: Ajay Bura <ajbura@gmail.com> * Add unverified session indicator in sidebar Signed-off-by: Ajay Bura <ajbura@gmail.com> * Add info card component Signed-off-by: Ajay Bura <ajbura@gmail.com> * Add css variables Signed-off-by: Ajay Bura <ajbura@gmail.com> * Add cross signin status hook Signed-off-by: Ajay Bura <ajbura@gmail.com> * Add hasCrossSigninAccountData function Signed-off-by: Ajay Bura <ajbura@gmail.com> * Add cross signin info card in device manage component Signed-off-by: Ajay Bura <ajbura@gmail.com> * Add cross signing and key backup component Signed-off-by: Ajay Bura <ajbura@gmail.com> * Fix typo Signed-off-by: Ajay Bura <ajbura@gmail.com> * WIP Signed-off-by: Ajay Bura <ajbura@gmail.com> * Add cross singing dialogs Signed-off-by: Ajay Bura <ajbura@gmail.com> * Add cross signing set/reset Signed-off-by: Ajay Bura <ajbura@gmail.com> * Add SecretStorageAccess component Signed-off-by: Ajay Bura <ajbura@gmail.com> * Add key backup Signed-off-by: Ajay Bura <ajbura@gmail.com> * WIP * WIP * WIP * WIP * Show progress when restoring key backup * Add SSSS and key backup
79 lines
1.6 KiB
SCSS
79 lines
1.6 KiB
SCSS
@use '.././../partials/flex';
|
|
@use '.././../partials/dir';
|
|
|
|
.info-card {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
line-height: 0;
|
|
padding: var(--sp-tight);
|
|
@include dir.prop(border-left, 4px solid transparent, none);
|
|
@include dir.prop(border-right, none, 4px solid transparent);
|
|
|
|
& > .ic-btn {
|
|
padding: 0;
|
|
border-radius: 4;
|
|
}
|
|
|
|
&__content {
|
|
margin: 0 var(--sp-tight);
|
|
@extend .cp-fx__item-one;
|
|
|
|
& > *:nth-child(2) {
|
|
margin-top: var(--sp-ultra-tight);
|
|
}
|
|
}
|
|
|
|
&--rounded {
|
|
@include dir.prop(
|
|
border-radius,
|
|
0 var(--bo-radius) var(--bo-radius) 0,
|
|
var(--bo-radius) 0 0 var(--bo-radius)
|
|
);
|
|
}
|
|
|
|
&--surface {
|
|
border-color: var(--bg-surface-border);
|
|
background-color: var(--bg-surface-hover);
|
|
|
|
}
|
|
&--primary {
|
|
border-color: var(--bg-primary);
|
|
background-color: var(--bg-primary-hover);
|
|
& .text {
|
|
color: var(--tc-primary-high);
|
|
&-b3 {
|
|
color: var(--tc-primary-normal);
|
|
}
|
|
}
|
|
}
|
|
&--positive {
|
|
border-color: var(--bg-positive-border);
|
|
background-color: var(--bg-positive-hover);
|
|
& .text {
|
|
color: var(--tc-positive-high);
|
|
&-b3 {
|
|
color: var(--tc-positive-normal);
|
|
}
|
|
}
|
|
}
|
|
&--caution {
|
|
border-color: var(--bg-caution-border);
|
|
background-color: var(--bg-caution-hover);
|
|
& .text {
|
|
color: var(--tc-caution-high);
|
|
&-b3 {
|
|
color: var(--tc-caution-normal);
|
|
}
|
|
}
|
|
}
|
|
&--danger {
|
|
border-color: var(--bg-danger-border);
|
|
background-color: var(--bg-danger-hover);
|
|
& .text {
|
|
color: var(--tc-danger-high);
|
|
&-b3 {
|
|
color: var(--tc-danger-normal);
|
|
}
|
|
}
|
|
}
|
|
} |