31 lines
1.6 KiB
CSS
31 lines
1.6 KiB
CSS
|
.user-info {
|
||
|
|
--sub-color: #666;
|
||
|
|
--icon-background: #3366FF;
|
||
|
|
--icon-img: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.60001 2.60001H12.2C12.86 2.60001 13.4 2.06001 13.4 1.40001C13.4 0.740012 12.86 0.200012 12.2 0.200012H2.60001C1.28001 0.200012 0.200012 1.28001 0.200012 2.60001V19.4C0.200012 20.72 1.28001 21.8 2.60001 21.8H12.2C12.86 21.8 13.4 21.26 13.4 20.6C13.4 19.94 12.86 19.4 12.2 19.4H2.60001V2.60001Z' fill='white'/%3E%3Cpath d='M21.38 10.58L18.032 7.23202C17.9485 7.14628 17.8414 7.0874 17.7243 7.0629C17.6072 7.03841 17.4854 7.04942 17.3746 7.09452C17.2637 7.13962 17.1689 7.21677 17.1022 7.31609C17.0354 7.4154 16.9999 7.53237 17 7.65202V9.80002H8.59999C7.93999 9.80002 7.39999 10.34 7.39999 11C7.39999 11.66 7.93999 12.2 8.59999 12.2H17V14.348C17 14.888 17.648 15.152 18.02 14.768L21.368 11.42C21.608 11.192 21.608 10.808 21.38 10.58Z' fill='white'/%3E%3C/svg%3E%0A");
|
||
|
|
--icon-size: 48px;
|
||
|
|
|
||
|
|
p {
|
||
|
|
margin: 0;
|
||
|
|
font-size: 1.25em;
|
||
|
|
font-weight: 700;
|
||
|
|
line-height: 1.1935em;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
span {
|
||
|
|
font-size: 0.875em;
|
||
|
|
line-height: 1.1936em;
|
||
|
|
text-align: right;
|
||
|
|
color: var(--sub-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.logout {
|
||
|
|
background-image: var(--icon-img);
|
||
|
|
background-position: center center;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-color: var(--icon-background);
|
||
|
|
width: var(--icon-size);
|
||
|
|
height: var(--icon-size);
|
||
|
|
border-radius: var(--icon-size);
|
||
|
|
}
|
||
|
|
}
|