MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-05-06 14:46:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

scss linting

Browse Source
This commit is contained in:
pypy
2020-06-26 21:45:11 +09:00
parent 4552192227
commit ca8e2e9645
2 changed files with 202 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/src/app.scss
+144 -130
View File
@@ -1,28 +1,28 @@
@charset "utf-8"; @charset "utf-8";
/* //
Copyright(c) 2019-2020 pypy and individual contributors. // Copyright(c) 2019-2020 pypy and individual contributors.
All rights reserved. // All rights reserved.
//
// This work is licensed under the terms of the MIT license.
// For a copy, see <https://opensource.org/licenses/MIT>.
//
This work is licensed under the terms of the MIT license. @import "~normalize.css/normalize.css";
For a copy, see <https://opensource.org/licenses/MIT>. @import "~animate.css/animate.min.css";
*/ @import "~noty/lib/noty.css";
@import "~element-ui/lib/theme-chalk/index.css";
@import '~normalize.css/normalize.css'; @import "~famfamfam-flags/dist/sprite/famfamfam-flags.min.css";
@import '~animate.css/animate.min.css';
@import '~noty/lib/noty.css';
@import '~element-ui/lib/theme-chalk/index.css';
@import '~famfamfam-flags/dist/sprite/famfamfam-flags.min.css';
.color-palettes { .color-palettes {
background: #409EFF; background: #409eff;
background: #67C23A; background: #67c23a;
background: #E6A23C; background: #e6a23c;
background: #F56C6C; background: #f56c6c;
background: #909399; background: #909399;
background: #FD9200; background: #fd9200;
background: #E6E6E6; background: #e6e6e6;
background: #C0C4CC; background: #c0c4cc;
} }
.noty_layout { .noty_layout {
@@ -30,10 +30,10 @@ For a copy, see <https://opensource.org/licenses/MIT>.
} }
.noty_theme__mint.noty_bar { .noty_theme__mint.noty_bar {
position: relative;
margin: 4px 0; margin: 4px 0;
overflow: hidden; overflow: hidden;
border-radius: 2px; border-radius: 2px;
position: relative;
} }
.noty_theme__mint.noty_bar .noty_body { .noty_theme__mint.noty_bar .noty_body {
@@ -45,37 +45,39 @@ For a copy, see <https://opensource.org/licenses/MIT>.
padding: 10px; padding: 10px;
} }
.noty_theme__mint.noty_type__alert, .noty_theme__mint.noty_type__notification { .noty_theme__mint.noty_type__alert,
.noty_theme__mint.noty_type__notification {
color: #2f2f2f;
background-color: #fff; background-color: #fff;
border-bottom: 1px solid #D1D1D1; border-bottom: 1px solid #d1d1d1;
color: #2F2F2F;
} }
.noty_theme__mint.noty_type__warning { .noty_theme__mint.noty_type__warning {
background-color: #FFAE42;
border-bottom: 1px solid #E89F3C;
color: #fff; color: #fff;
background-color: #ffae42;
border-bottom: 1px solid #e89f3c;
} }
.noty_theme__mint.noty_type__error { .noty_theme__mint.noty_type__error {
background-color: #DE636F;
border-bottom: 1px solid #CA5A65;
color: #fff; color: #fff;
background-color: #de636f;
border-bottom: 1px solid #ca5a65;
} }
.noty_theme__mint.noty_type__info, .noty_theme__mint.noty_type__information { .noty_theme__mint.noty_type__info,
background-color: #7F7EFF; .noty_theme__mint.noty_type__information {
border-bottom: 1px solid #7473E8;
color: #fff; color: #fff;
background-color: #7f7eff;
border-bottom: 1px solid #7473e8;
} }
.noty_theme__mint.noty_type__success { .noty_theme__mint.noty_type__success {
background-color: #AFC765;
border-bottom: 1px solid #A0B55C;
color: #fff; color: #fff;
background-color: #afc765;
border-bottom: 1px solid #a0b55c;
} }
.el-table+.pagination-bar { .el-table + .pagination-bar {
margin-top: 15px; margin-top: 15px;
} }
@@ -83,7 +85,7 @@ For a copy, see <https://opensource.org/licenses/MIT>.
padding: 20px; padding: 20px;
} }
.el-dialog__footer>.el-button+.el-button { .el-dialog__footer > .el-button + .el-button {
margin-left: 5px; margin-left: 5px;
} }
@@ -102,8 +104,12 @@ For a copy, see <https://opensource.org/licenses/MIT>.
border-radius: 16px; border-radius: 16px;
} }
body, input, textarea, select, button { body,
font-family: 'Noto Sans JP', 'Noto Sans KR', 'Meiryo UI', 'Malgun Gothic', 'Segoe UI', sans-serif; input,
textarea,
select,
button {
font-family: "Noto Sans JP", "Noto Sans KR", "Meiryo UI", "Malgun Gothic", "Segoe UI", sans-serif;
line-height: normal; line-height: normal;
} }
@@ -126,29 +132,29 @@ a {
} }
.x-app { .x-app {
display: flex;
position: absolute; position: absolute;
display: flex;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden auto; overflow: hidden auto;
} }
.x-container { .x-container {
position: relative;
flex: 1; flex: 1;
padding: 10px; padding: 10px;
overflow: hidden auto; overflow: hidden auto;
background: #fff; background: #fff;
position: relative;
} }
.x-login-container { .x-login-container {
display: flex;
position: absolute; position: absolute;
// modal 시작이 2000이라서
z-index: 1999;
display: flex;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #fff; background: #fff;
/* modal 시작이 2000이라서 */
z-index: 1999;
} }
.x-menu-container { .x-menu-container {
@@ -157,90 +163,90 @@ a {
background: #383838; background: #383838;
} }
.x-menu-container>.el-menu { .x-menu-container > .el-menu {
background: 0; background: 0;
border: 0; border: 0;
} }
.el-menu-item.is-active::before { .el-menu-item.is-active::before {
position: absolute; position: absolute;
content: '';
left: 1px;
top: 4px; top: 4px;
left: 1px;
width: 2px; width: 2px;
height: 48px; height: 48px;
background: #DCDFE6; content: "";
background: #dcdfe6;
} }
.el-menu-item.notify::after { .el-menu-item.notify::after {
position: absolute; position: absolute;
content: '';
right: 4px;
top: 4px; top: 4px;
right: 4px;
width: 4px; width: 4px;
height: 4px; height: 4px;
background: #EBEEF5; content: "";
border-radius: 50% background: #ebeef5;
border-radius: 50%;
} }
.x-aside-container { .x-aside-container {
flex: none;
width: 236px;
display: flex; display: flex;
flex: none;
flex-direction: column; flex-direction: column;
width: 236px;
background: #f8f8f8; background: #f8f8f8;
} }
.el-popper.x-quick-search { .el-popper.x-quick-search {
min-width: 0 !important;
width: 225px; width: 225px;
min-width: 0 !important;
} }
.el-popper.x-quick-search .el-select-dropdown__item { .el-popper.x-quick-search .el-select-dropdown__item {
padding: 0 10px;
width: 100%; width: 100%;
height: auto; height: auto;
padding: 0 10px;
font-size: 12px; font-size: 12px;
line-height: normal; line-height: normal;
} }
.x-friend-list { .x-friend-list {
overflow: hidden auto;
padding: 0 10px; padding: 0 10px;
overflow: hidden auto;
} }
.x-friend-group>.el-icon-arrow-right { .x-friend-group > .el-icon-arrow-right {
transition: transform .3s; transition: transform 0.3s;
} }
.x-friend-group>.el-icon-arrow-right.rotate { .x-friend-group > .el-icon-arrow-right.rotate {
transform: rotate(90deg); transform: rotate(90deg);
} }
.x-aside-container>.x-friend-list { .x-aside-container > .x-friend-list {
flex: 1; flex: 1;
} }
.x-dialog .x-friend-list { .x-dialog .x-friend-list {
display: flex; display: flex;
align-items: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
align-items: flex-start;
max-height: 150px; max-height: 150px;
} }
.x-friend-list>.x-friend-group { .x-friend-list > .x-friend-group {
padding: 20px 0 5px; padding: 20px 0 5px;
font-weight: bold;
font-size: 12px; font-size: 12px;
font-weight: bold;
} }
.x-friend-item { .x-friend-item {
box-sizing: border-box;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 5px; padding: 5px;
cursor: pointer;
font-size: 12px; font-size: 12px;
box-sizing: border-box; cursor: pointer;
} }
.x-friend-item:hover { .x-friend-item:hover {
@@ -248,7 +254,7 @@ a {
border-radius: 2px; border-radius: 2px;
} }
.x-aside-container>.x-friend-list>.x-friend-item:hover { .x-aside-container > .x-friend-list > .x-friend-item:hover {
background: #fff; background: #fff;
border-radius: 2px; border-radius: 2px;
} }
@@ -262,231 +268,239 @@ a {
width: 175px; width: 175px;
} }
.x-friend-item>.avatar { .x-friend-item > .avatar {
position: relative;
display: inline-block;
flex: none; flex: none;
width: 40px; width: 40px;
height: 40px; height: 40px;
margin-right: 8px; margin-right: 8px;
display: inline-block;
position: relative;
} }
.x-friend-item>img.avatar { .x-friend-item > img.avatar {
width: 50px; width: 50px;
height: 37.5px; height: 37.5px;
margin-left: 5px;
margin-right: 0; margin-right: 0;
margin-left: 5px;
border-radius: 2px; border-radius: 2px;
} }
.x-friend-item>.avatar>img { .x-friend-item > .avatar > img {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 40%; border-radius: 40%;
object-fit: cover; object-fit: cover;
} }
.x-friend-item>.avatar.offline>img { .x-friend-item > .avatar.offline > img {
filter: grayscale(1); filter: grayscale(1);
} }
.x-friend-item:hover>.avatar.offline>img { .x-friend-item:hover > .avatar.offline > img {
filter: none; filter: none;
} }
.x-friend-item>.avatar.active::after, .x-friend-item>.avatar.joinme::after, .x-friend-item>.avatar.askme::after, .x-friend-item>.avatar.busy::after { .x-friend-item > .avatar.active::after,
content: ''; .x-friend-item > .avatar.joinme::after,
.x-friend-item > .avatar.askme::after,
.x-friend-item > .avatar.busy::after {
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 0; bottom: 0;
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: 50%; content: "";
border: 2px solid #fff;
background: #909399; background: #909399;
border: 2px solid #fff;
border-radius: 50%;
} }
.x-friend-item>.avatar.active::after { .x-friend-item > .avatar.active::after {
background: #67C23A; background: #67c23a;
} }
.x-friend-item>.avatar.joinme::after { .x-friend-item > .avatar.joinme::after {
background: #409EFF; background: #409eff;
} }
.x-friend-item>.avatar.askme::after { .x-friend-item > .avatar.askme::after {
background: #FD9200; background: #fd9200;
} }
.x-friend-item>.avatar.busy::after { .x-friend-item > .avatar.busy::after {
background: #F56C6C; background: #f56c6c;
} }
.x-friend-item.offline>.avatar::after { .x-friend-item.offline > .avatar::after {
display: none; display: none;
} }
.x-friend-item>.detail { .x-friend-item > .detail {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
} }
.x-friend-item>.detail>.name, .x-friend-item>.detail>.extra { .x-friend-item > .detail > .name,
.x-friend-item > .detail > .extra {
display: block; display: block;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.x-friend-item>.detail>.name { .x-friend-item > .detail > .name {
color: #303133;
font-weight: bold; font-weight: bold;
color: #303133;
} }
.x-friend-item>.detail>.extra { .x-friend-item > .detail > .extra {
color: #606266;
font-weight: normal; font-weight: normal;
color: #606266;
} }
.x-dialog>.el-dialog { .x-dialog > .el-dialog {
margin-bottom: 10px;
max-width: 100%; max-width: 100%;
margin-bottom: 10px;
} }
.x-user-dialog>.el-dialog>.el-dialog__header, .x-world-dialog>.el-dialog>.el-dialog__header, .x-avatar-dialog>.el-dialog>.el-dialog__header { .x-user-dialog > .el-dialog > .el-dialog__header,
padding: 0; .x-world-dialog > .el-dialog > .el-dialog__header,
.x-avatar-dialog > .el-dialog > .el-dialog__header {
display: none; display: none;
padding: 0;
} }
.x-user-dialog>.el-dialog>.el-dialog__body, .x-world-dialog>.el-dialog>.el-dialog__body, .x-avatar-dialog>.el-dialog>.el-dialog__body { .x-user-dialog > .el-dialog > .el-dialog__body,
.x-world-dialog > .el-dialog > .el-dialog__body,
.x-avatar-dialog > .el-dialog > .el-dialog__body {
padding: 20px; padding: 20px;
} }
.el-popper.hex { .el-popper.hex {
font-family: monospace;
text-align: center;
min-width: auto; min-width: auto;
padding: 10px; padding: 10px;
font-family: monospace;
text-align: center;
} }
i.x-user-status { i.x-user-status {
display: inline-block; display: inline-block;
width: 10px; width: 10px;
height: 10px; height: 10px;
background: #808080;
border-radius: 50%; border-radius: 50%;
background: gray;
} }
i.x-user-status.active { i.x-user-status.active {
background: #67C23A; background: #67c23a;
} }
i.x-user-status.joinme { i.x-user-status.joinme {
background: #409EFF; background: #409eff;
} }
i.x-user-status.askme { i.x-user-status.askme {
background: #FD9200; background: #fd9200;
} }
i.x-user-status.busy { i.x-user-status.busy {
background: #F56C6C; background: #f56c6c;
} }
.x-friend-item>.detail>.name.x-tag-untrusted { .x-friend-item > .detail > .name.x-tag-untrusted {
color: rgb(204, 204, 204); color: rgb(204, 204, 204);
} }
.el-tag.x-tag-untrusted { .el-tag.x-tag-untrusted {
border-color: rgb(204, 204, 204);
color: rgb(204, 204, 204); color: rgb(204, 204, 204);
border-color: rgb(204, 204, 204);
} }
.x-friend-item>.detail>.name.x-tag-basic { .x-friend-item > .detail > .name.x-tag-basic {
color: rgb(23, 120, 255); color: rgb(23, 120, 255);
} }
.el-tag.x-tag-basic { .el-tag.x-tag-basic {
border-color: rgb(23, 120, 255);
color: rgb(23, 120, 255); color: rgb(23, 120, 255);
border-color: rgb(23, 120, 255);
} }
.x-friend-item>.detail>.name.x-tag-known { .x-friend-item > .detail > .name.x-tag-known {
color: rgb(43, 207, 92); color: rgb(43, 207, 92);
} }
.el-tag.x-tag-known { .el-tag.x-tag-known {
border-color: rgb(43, 207, 92);
color: rgb(43, 207, 92); color: rgb(43, 207, 92);
border-color: rgb(43, 207, 92);
} }
.x-friend-item>.detail>.name.x-tag-trusted { .x-friend-item > .detail > .name.x-tag-trusted {
color: rgb(255, 123, 66); color: rgb(255, 123, 66);
} }
.el-tag.x-tag-trusted { .el-tag.x-tag-trusted {
border-color: rgb(255, 123, 66);
color: rgb(255, 123, 66); color: rgb(255, 123, 66);
border-color: rgb(255, 123, 66);
} }
.x-friend-item>.detail>.name.x-tag-veteran { .x-friend-item > .detail > .name.x-tag-veteran {
color: rgb(129, 67, 230); color: rgb(129, 67, 230);
} }
.el-tag.x-tag-veteran { .el-tag.x-tag-veteran {
border-color: rgb(129, 67, 230);
color: rgb(129, 67, 230); color: rgb(129, 67, 230);
border-color: rgb(129, 67, 230);
} }
.x-friend-item>.detail>.name.x-tag-legend { .x-friend-item > .detail > .name.x-tag-legend {
/*color: rgb(255, 255, 0);*/ // color: rgb(255, 255, 0);
color: rgb(255, 208, 0); color: rgb(255, 208, 0);
} }
.el-tag.x-tag-legend { .el-tag.x-tag-legend {
/*border-color: rgb(255, 255, 0); // border-color: rgb(255, 255, 0);
color: rgb(255, 255, 0);*/ // color: rgb(255, 255, 0);
border-color: rgb(255, 208, 0);
color: rgb(255, 208, 0); color: rgb(255, 208, 0);
border-color: rgb(255, 208, 0);
} }
.x-friend-item>.detail>.name.x-tag-legendary { .x-friend-item > .detail > .name.x-tag-legendary {
color: rgb(0, 0, 0); color: rgb(0, 0, 0);
} }
.el-tag.x-tag-legendary { .el-tag.x-tag-legendary {
border-color: rgb(0, 0, 0);
color: rgb(0, 0, 0); color: rgb(0, 0, 0);
border-color: rgb(0, 0, 0);
} }
.x-friend-item>.detail>.name.x-tag-vip { .x-friend-item > .detail > .name.x-tag-vip {
color: rgb(181, 38, 38); color: rgb(181, 38, 38);
} }
.el-tag.x-tag-vip { .el-tag.x-tag-vip {
border-color: rgb(181, 38, 38);
color: rgb(181, 38, 38); color: rgb(181, 38, 38);
border-color: rgb(181, 38, 38);
} }
.x-friend-item>.detail>.name.x-tag-troll { .x-friend-item > .detail > .name.x-tag-troll {
color: rgb(120, 47, 47); color: rgb(120, 47, 47);
} }
.el-tag.x-tag-troll { .el-tag.x-tag-troll {
border-color: rgb(120, 47, 47);
color: rgb(120, 47, 47); color: rgb(120, 47, 47);
border-color: rgb(120, 47, 47);
} }
.x-friend-item>.detail>.name.x-tag-friend { .x-friend-item > .detail > .name.x-tag-friend {
/*color: rgb(255, 255, 0);*/ // color: rgb(255, 255, 0);
color: rgb(255, 208, 0); color: rgb(255, 208, 0);
} }
.el-tag.x-tag-friend { .el-tag.x-tag-friend {
/*border-color: rgb(255, 255, 0); // border-color: rgb(255, 255, 0);
color: rgb(255, 255, 0);*/ // color: rgb(255, 255, 0);
border-color: rgb(255, 208, 0);
color: rgb(255, 208, 0); color: rgb(255, 208, 0);
border-color: rgb(255, 208, 0);
} }
.el-tree-node { .el-tree-node {
@@ -498,8 +512,8 @@ i.x-user-status.busy {
} }
.x-user-dialog .el-textarea__inner { .x-user-dialog .el-textarea__inner {
padding: 0;
background: none; background: none;
border: 0; border: 0;
border-radius: 2px; border-radius: 2px;
padding: 0;
} }
html/src/vr.scss
+58 -48
View File
@@ -1,15 +1,17 @@
@charset "utf-8"; @charset "utf-8";
/*
Copyright(c) 2019 pypy. All rights reserved.
This work is licensed under the terms of the MIT license. //
For a copy, see <https://opensource.org/licenses/MIT>. // Copyright(c) 2019-2020 pypy and individual contributors.
*/ // All rights reserved.
//
// This work is licensed under the terms of the MIT license.
// For a copy, see <https://opensource.org/licenses/MIT>.
//
@import '~normalize.css/normalize.css'; @import "~normalize.css/normalize.css";
@import '~animate.css/animate.min.css'; @import "~animate.css/animate.min.css";
@import '~noty/lib/noty.css'; @import "~noty/lib/noty.css";
@import '~element-ui/lib/theme-chalk/index.css'; @import "~element-ui/lib/theme-chalk/index.css";
/* /*
마지노선인듯 마지노선인듯
@@ -25,15 +27,15 @@ For a copy, see <https://opensource.org/licenses/MIT>.
} }
.noty_layout { .noty_layout {
max-width: none;
width: 80% !important; width: 80% !important;
max-width: none;
} }
.noty_theme__relax.noty_bar { .noty_theme__relax.noty_bar {
position: relative;
margin: 4px 0; margin: 4px 0;
overflow: hidden; overflow: hidden;
border-radius: 2px; border-radius: 2px;
position: relative;
} }
.noty_theme__relax.noty_bar .noty_body { .noty_theme__relax.noty_bar .noty_body {
@@ -43,20 +45,21 @@ For a copy, see <https://opensource.org/licenses/MIT>.
} }
.noty_theme__relax.noty_bar .noty_buttons { .noty_theme__relax.noty_bar .noty_buttons {
border-top: 1px solid #e7e7e7;
padding: 5px 10px; padding: 5px 10px;
border-top: 1px solid #e7e7e7;
} }
.noty_theme__relax.noty_type__alert, .noty_theme__relax.noty_type__notification { .noty_theme__relax.noty_type__alert,
.noty_theme__relax.noty_type__notification {
color: #444;
background-color: #fff; background-color: #fff;
border: 1px solid #dedede; border: 1px solid #dedede;
color: #444;
} }
.noty_theme__relax.noty_type__warning { .noty_theme__relax.noty_type__warning {
background-color: #FFEAA8;
border: 1px solid #FFC237;
color: #826200; color: #826200;
background-color: #ffeaa8;
border: 1px solid #ffc237;
} }
.noty_theme__relax.noty_type__warning .noty_buttons { .noty_theme__relax.noty_type__warning .noty_buttons {
@@ -64,33 +67,35 @@ For a copy, see <https://opensource.org/licenses/MIT>.
} }
.noty_theme__relax.noty_type__error { .noty_theme__relax.noty_type__error {
background-color: #FF8181; color: #fff;
background-color: #ff8181;
border: 1px solid #e25353; border: 1px solid #e25353;
color: #FFF;
} }
.noty_theme__relax.noty_type__error .noty_buttons { .noty_theme__relax.noty_type__error .noty_buttons {
border-color: darkred; border-color: #8b0000;
} }
.noty_theme__relax.noty_type__info, .noty_theme__relax.noty_type__information { .noty_theme__relax.noty_type__info,
background-color: #78C5E7; .noty_theme__relax.noty_type__information {
color: #fff;
background-color: #78c5e7;
border: 1px solid #3badd6; border: 1px solid #3badd6;
color: #FFF;
} }
.noty_theme__relax.noty_type__info .noty_buttons, .noty_theme__relax.noty_type__information .noty_buttons { .noty_theme__relax.noty_type__info .noty_buttons,
border-color: #0B90C4; .noty_theme__relax.noty_type__information .noty_buttons {
border-color: #0b90c4;
} }
.noty_theme__relax.noty_type__success { .noty_theme__relax.noty_type__success {
background-color: #BCF5BC; color: #006400;
background-color: #bcf5bc;
border: 1px solid #7cdd77; border: 1px solid #7cdd77;
color: darkgreen;
} }
.noty_theme__relax.noty_type__success .noty_buttons { .noty_theme__relax.noty_type__success .noty_buttons {
border-color: #50C24E; border-color: #50c24e;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
@@ -108,42 +113,46 @@ For a copy, see <https://opensource.org/licenses/MIT>.
border-radius: 16px; border-radius: 16px;
} }
body, input, textarea, select, button { body,
font-family: 'Noto Sans JP', 'Noto Sans KR', 'Meiryo UI', 'Malgun Gothic', 'Segoe UI', sans-serif; input,
textarea,
select,
button {
font-family: "Noto Sans JP", "Noto Sans KR", "Meiryo UI", "Malgun Gothic", "Segoe UI", sans-serif;
line-height: normal; line-height: normal;
} }
.x-app { .x-app {
position: absolute;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
} }
.x-app-type { .x-app-type {
background: #1f1f1f;
color: #fff; color: #fff;
background: #1f1f1f;
} }
.x-container { .x-container {
position: relative;
flex: none; flex: none;
padding: 10px; padding: 10px;
overflow: hidden auto; overflow: hidden auto;
position: relative;
} }
.x-friend-list { .x-friend-list {
overflow: hidden auto;
padding: 0 10px; padding: 0 10px;
overflow: hidden auto;
} }
.x-friend-item { .x-friend-item {
box-sizing: border-box;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 18px; font-size: 18px;
box-sizing: border-box;
} }
.x-friend-item .time { .x-friend-item .time {
@@ -162,47 +171,48 @@ body, input, textarea, select, button {
color: #ff0; color: #ff0;
} }
.x-friend-item>.avatar { .x-friend-item > .avatar {
position: relative;
display: inline-block;
flex: none; flex: none;
width: 40px; width: 40px;
height: 40px; height: 40px;
margin-right: 8px; margin-right: 8px;
display: inline-block;
position: relative;
} }
.x-friend-item>img.avatar { .x-friend-item > img.avatar {
width: 50px; width: 50px;
height: 37.5px; height: 37.5px;
margin-left: 5px;
margin-right: 0; margin-right: 0;
margin-left: 5px;
border-radius: 2px; border-radius: 2px;
} }
.x-friend-item>.avatar>img { .x-friend-item > .avatar > img {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 40%; border-radius: 40%;
object-fit: cover; object-fit: cover;
} }
.x-friend-item>.detail { .x-friend-item > .detail {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
} }
.x-friend-item>.detail>.name, .x-friend-item>.detail>.extra { .x-friend-item > .detail > .name,
.x-friend-item > .detail > .extra {
display: block; display: block;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.x-friend-item>.detail>.name { .x-friend-item > .detail > .name {
font-weight: bold; font-weight: bold;
} }
.x-friend-item>.detail>.extra { .x-friend-item > .detail > .extra {
font-weight: normal; font-weight: normal;
} }
@@ -210,18 +220,18 @@ i.x-user-status {
display: inline-block; display: inline-block;
width: 14px; width: 14px;
height: 14px; height: 14px;
background: #808080;
border-radius: 50%; border-radius: 50%;
background: gray;
} }
i.x-user-status.active { i.x-user-status.active {
background: #67C23A; background: #67c23a;
} }
i.x-user-status.joinme { i.x-user-status.joinme {
background: #409EFF; background: #409eff;
} }
i.x-user-status.busy { i.x-user-status.busy {
background: #F56C6C; background: #f56c6c;
} }