yii2-netdisk/web/css/user-info.css

226 lines
3.7 KiB
CSS
Raw Permalink Normal View History

2024-03-01 18:04:44 +08:00
.user-profile {
display: flex;
flex-direction: row;
align-items: center; /* Add this line */
margin-top: 42px;
margin-bottom: 30px;
}
2024-03-08 17:06:56 +08:00
.avatar-container {
position: relative;
}
.avatar {
width: 100%;
height: 100%;
border-radius: 50%;
}
.avatar-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.125);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s ease;
border-radius: 50%;
}
.avatar-overlay i {
color: white;
font-size: 2em;
}
.avatar-container:hover .avatar-overlay {
opacity: 1;
}
2024-03-01 18:04:44 +08:00
.user-details {
display: flex;
justify-content: space-between;
align-items: center; /* Add this line */
width: 100%; /* Take up the remaining width */
margin-left: 10px;
}
.user-details p {
margin-bottom: 0;
}
#p-username {
font-size: 1.25rem;
}
.user-details .user-info p {
font-size: 0.95rem;
line-height: 1.25;
}
.user-login-info {
display: flex;
justify-content: space-between;
2024-03-02 15:38:53 +08:00
width: 45%;
2024-03-01 18:04:44 +08:00
}
.user-last-login i, .user-last-login-ip i {
font-size: 1.5em;
margin-right: 10px;
}
.user-last-login, .user-last-login-ip {
display: flex;
align-items: center;
flex-direction: row;
}
.user-last-login p, .user-last-login-ip p {
margin: 0;
}
2024-03-02 15:38:53 +08:00
.login-info-dv {
2024-03-01 18:04:44 +08:00
margin-left: 5px;
}
2024-03-02 15:38:53 +08:00
.login-info-dv .user-login-info-title {
2024-03-01 18:04:44 +08:00
font-weight: bold;
}
2024-03-02 15:38:53 +08:00
.login-info-dv .user-login-info-content {
color: rgb(100, 96, 100);
2024-03-01 18:04:44 +08:00
font-size: 0.95rem;
2024-03-02 15:38:53 +08:00
}
2024-03-09 13:32:35 +08:00
html[data-bs-theme="dark"] .login-info-dv .user-login-info-content {
color: inherit;
}
2024-03-09 13:32:35 +08:00
2024-03-02 15:38:53 +08:00
.accordion-item {
margin-bottom: 5px;
border-top: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color) !important;
border-radius: var(--bs-border-radius);
}
.accordion-button {
padding: 24px 22px !important;
}
.accordion-button i {
font-size: 24px;
margin-right: 18px;
width: 27px;
text-align: center;
}
.accordion-button span, .accordion-button p {
line-height: 24px;
}
.accordion-storage-content {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.accordion-storage-content span {
display: flex;
align-items: center;
}
.accordion-body {
padding: 40px 30px !important;
}
.storage-info {
display: flex;
flex-direction: column;
align-items: center;
}
.storage-columns {
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
}
.storage-columns span, .storage-columns p {
font-size: 0.75rem;
color: rgb(140, 139, 139);
}
2024-03-09 13:32:35 +08:00
html[data-bs-theme="dark"] .storage-columns span, .storage-columns p {
color: inherit;
}
2024-03-09 13:32:35 +08:00
2024-03-02 15:38:53 +08:00
.storage-columns p {
margin-bottom: 0.5rem !important;
}
.progress {
width: 100%;
/*margin-top: 10px;*/
border: 1px rgb(140, 139, 139) solid;
--bs-progress-bg: white !important;
--bs-progress-height: 12px !important;
}
.storage-legend {
/*display: flex;*/
justify-content: space-between;
width: 100%;
margin-top: 10px;
}
.legend-item {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.legend-color {
width: 6px;
height: 17px;
margin-right: 10px;
border-radius: 4px;
}
2024-03-09 13:32:35 +08:00
#current {
font-weight: 600;
font-size: 1.4rem;
color: black;
padding-left: 2px;
}
2024-03-09 13:32:35 +08:00
html[data-bs-theme="dark"] #current {
color: inherit;
2024-03-09 13:32:35 +08:00
}
#info_icon {
font-size: 2em;
line-height: 1.5;
2024-03-09 14:38:42 +08:00
}
.editable-username {
cursor: pointer;
}
.editable-username:hover {
text-decoration: underline;
}
.editable-username .edit-icon {
display: none;
font-size: 0.75em;
}
.editable-username:hover .edit-icon {
display: inline;
}