MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-28 19:23:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor css

Browse Source
This commit is contained in:
pa
2026-03-08 21:32:16 +09:00
parent 2b2dbc898e
commit ddee396376
15 changed files with 335 additions and 411 deletions
Download Patch File Download Diff File Expand all files Collapse all files

299
src/app.css
View File

@@ -35,309 +35,10 @@ html.dark .x-container {
background: var(--sidebar);
}
.x-friend-list {
padding: 0 10px;
overflow: hidden auto;
}
.x-friend-group > .rotation-transition {
transition: transform 0.3s;
}
.x-dialog .x-friend-list {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
max-height: 300px;
}
.x-friend-list > .x-friend-group {
padding: 16px 0 5px;
font-size: 12px;
}
.x-friend-item {
box-sizing: border-box;
display: flex;
align-items: center;
padding: 6px;
font-size: 13px;
cursor: pointer;
}
.x-friend-item > .avatar {
position: relative;
display: inline-block;
flex: none;
width: 36px;
height: 36px;
margin-right: 10px;
background-color: transparent;
}
.x-friend-item > img.avatar,
img.friends-list-avatar {
width: unset;
height: 22.5px;
margin-right: 0;
margin-left: 5px;
border-radius: 2px;
}
.x-friend-item > .avatar > img,
.x-friend-item > .avatar > .avatar > img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
background-color: transparent;
}
.x-friend-item .active img,
.x-friend-item .offline img {
filter: grayscale(1);
}
.x-friend-item:hover .active img,
.x-friend-item:hover .offline img {
filter: none;
}
.x-friend-item .status-icon.mobile img {
mask-image: url(/images/masks/usercutoutmobile.svg);
}
.x-friend-item .status-icon.mobile::after {
position: absolute;
right: -2px;
bottom: -0.5px;
width: 14px;
height: 14px;
content: '';
border-radius: 0px;
mask-image: url(/images/masks/phone.svg) !important;
}
.x-friend-item .status-icon img {
mask-image: url(/images/masks/usercutout.svg);
}
.x-friend-item .status-icon::after {
position: absolute;
right: 0.75px;
bottom: 0.75px;
width: 9px;
height: 9px;
content: '';
background: var(--status-offline);
border-radius: 50%;
}
.x-friend-item .status-icon.active::after {
background: var(--status-active);
}
.x-friend-item .status-icon.online::after {
background: var(--status-online);
}
.x-friend-item .status-icon.joinme::after {
background: var(--status-joinme);
mask-image: url(/images/masks/joinme.svg);
}
.x-friend-item .status-icon.askme::after {
background: var(--status-askme);
mask-image: url(/images/masks/askme.svg);
}
.x-friend-item .status-icon.busy::after {
background: var(--status-busy);
mask-image: url(/images/masks/busy.svg);
}
.x-friend-item .status-icon.offline::after {
background: var(--status-offline);
}
.x-friend-item > .detail {
flex: 1;
overflow: hidden;
}
.x-friend-item > .detail > .name,
.x-friend-item > .detail > .extra {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.x-friend-item > .detail > .name {
font-weight: 500;
line-height: 18px;
}
.x-friend-item > .detail > .extra {
font-size: 12px;
}
.x-friend-item > .detail > .extra > span > span:first-child {
scale: 0.9;
margin-right: 2px;
}
.x-friend-item:hover {
border-radius: 8px;
}
.x-friend-item-no-hover:hover {
background: unset !important;
}
.x-friend-item-border:hover {
border-top-left-radius: 25px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 25px;
}
.x-dialog .x-friend-item {
width: 167px;
}
i.x-user-status,
i.x-status-icon {
display: inline-block;
width: 10px;
height: 10px;
background: var(--status-offline-alt);
border-radius: 50%;
}
i.x-user-status.active {
background: var(--status-active);
}
i.x-user-status.online {
background: var(--status-online);
}
i.x-user-status.joinme {
background: var(--status-joinme);
mask-image: url(/images/masks/joinme.svg);
}
i.x-user-status.askme {
background: var(--status-askme);
mask-image: url(/images/masks/askme.svg);
}
i.x-user-status.busy {
background: var(--status-busy);
mask-image: url(/images/masks/busy.svg);
}
i.x-status-icon.green {
background: var(--status-online);
}
i.x-status-icon.blue {
background: var(--status-joinme);
}
i.x-status-icon.orange {
background: var(--status-askme);
}
i.x-status-icon.red {
background: var(--status-busy);
}
.x-tag-platform-pc {
color: var(--platform-pc);
border-color: var(--platform-pc) !important;
}
.x-tag-platform-quest {
color: var(--platform-quest);
border-color: var(--platform-quest) !important;
}
.x-tag-friend {
color: var(--color-amber-400);
border-color: var(--color-amber-400) !important;
}
.x-tag-age-verification {
color: #3b82f6;
border-color: #3b82f6 !important;
}
.x-tag-discord {
color: #7289da;
border-color: #7289da !important;
}
.x-tag-border-left {
border-left: 0.8px solid;
margin-left: 5px;
padding-left: 5px;
padding-bottom: 0.5px;
}
.options-container {
margin-top: 30px;
padding: 0 10px 10px 10px;
}
.options-container .header-bar {
display: flex;
align-items: center;
}
.options-container .header {
font-weight: bold;
font-size: 20px;
}
.options-container .sub-header {
font-weight: bold;
font-size: 15px;
}
.options-container-item {
font-size: 12px;
margin-top: 5px;
display: flex;
align-items: center;
}
.options-container-item .name {
display: inline-block;
width: 235px;
}
.x-app > .x-container {
padding-top: 15px;
}
/* Bio diff */
.x-text-removed {
text-decoration: line-through;
color: #ff0000;
background-color: rgba(255, 0, 0, 0.2);
padding: 2px 2px;
border-radius: 4px;
}
.x-text-added {
color: rgb(35, 188, 35);
background-color: rgba(76, 255, 80, 0.2);
padding: 2px 2px;
border-radius: 4px;
}
/*FIXME: this is a nasty temporary hack*/
.force-pointer-on-hover a,
.force-pointer-on-hover button,