yii2-netdisk/web/css/user-info.css
Chenx221 d1683d4c03
前端实现夜间模式
同时调整了一些样式以匹配夜间模式下的效果
*稍后会做一个后端切换主题的功能
2024-03-08 15:26:36 +08:00

164 lines
2.9 KiB
CSS

.user-profile {
display: flex;
flex-direction: row;
align-items: center; /* Add this line */
margin-top: 42px;
margin-bottom: 30px;
}
.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;
width: 45%;
}
.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;
}
.login-info-dv {
margin-left: 5px;
}
.login-info-dv .user-login-info-title {
font-weight: bold;
}
.login-info-dv .user-login-info-content {
color: rgb(100, 96, 100);
font-size: 0.95rem;
}
html[data-bs-theme="dark"] .login-info-dv .user-login-info-content {
color: inherit;
}
.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);
}
html[data-bs-theme="dark"] .storage-columns span, .storage-columns p {
color: inherit;
}
.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;
}
#current{
font-weight: 600;
font-size: 1.4rem;
color: black;
padding-left: 2px;
}
html[data-bs-theme="dark"] #current{
color: inherit;
}