mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-12 19:33:50 +02:00
437 lines
7.4 KiB
SCSS
437 lines
7.4 KiB
SCSS
@charset "utf-8";
|
|
|
|
//
|
|
// Copyright(c) 2019-2021 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 '~animate.css/animate.min.css';
|
|
@import '~noty/lib/noty.css';
|
|
@import '~element-ui/lib/theme-chalk/index.css';
|
|
|
|
/*
|
|
마지노선인듯
|
|
화면 24px -> 나나 32
|
|
손등 18px -> 나나 24
|
|
*/
|
|
|
|
.noty_body {
|
|
display: block;
|
|
}
|
|
|
|
.noty_layout {
|
|
width: 80% !important;
|
|
max-width: none;
|
|
}
|
|
|
|
.noty_theme__relax.noty_bar,
|
|
.noty_theme__sunset.noty_bar {
|
|
height: 84px;
|
|
position: relative;
|
|
margin: 8px 0;
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.noty_theme__relax.noty_bar .noty_body,
|
|
.noty_theme__sunset.noty_bar .noty_body {
|
|
font-size: 30px;
|
|
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.noty_theme__relax.noty_bar .noty_buttons,
|
|
.noty_theme__sunset.noty_bar .noty_buttons {
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
.noty_theme__relax.noty_type__alert,
|
|
.noty_theme__relax.noty_type__notification {
|
|
color: #444;
|
|
background-color: #fff;
|
|
border: 2px solid #dedede;
|
|
}
|
|
|
|
.noty_theme__relax.noty_type__warning {
|
|
color: #826200;
|
|
background-color: #ffeaa8;
|
|
border: 2px solid #ffc237;
|
|
}
|
|
|
|
.noty_theme__relax.noty_type__warning .noty_buttons {
|
|
border-color: #dfaa30;
|
|
}
|
|
|
|
.noty_theme__relax.noty_type__error {
|
|
color: #fff;
|
|
background-color: #ff8181;
|
|
border: 2px solid #e25353;
|
|
}
|
|
|
|
.noty_theme__relax.noty_type__error .noty_buttons {
|
|
border-color: #8b0000;
|
|
}
|
|
|
|
.noty_theme__relax.noty_type__info,
|
|
.noty_theme__relax.noty_type__information {
|
|
color: #fff;
|
|
background-color: #78c5e7;
|
|
border: 2px solid #3badd6;
|
|
}
|
|
|
|
.noty_theme__relax.noty_type__info .noty_buttons,
|
|
.noty_theme__relax.noty_type__information .noty_buttons {
|
|
border-color: #0b90c4;
|
|
}
|
|
|
|
.noty_theme__relax.noty_type__success {
|
|
color: #006400;
|
|
background-color: #bcf5bc;
|
|
border: 2px solid #7cdd77;
|
|
}
|
|
|
|
.noty_theme__relax.noty_type__success .noty_buttons {
|
|
border-color: #50c24e;
|
|
}
|
|
|
|
.noty_theme__sunset.noty_type__alert,
|
|
.noty_theme__sunset.noty_type__notification {
|
|
color: #fff;
|
|
background-color: #073b4c;
|
|
}
|
|
|
|
.noty_theme__sunset.noty_type__alert .noty_progressbar,
|
|
.noty_theme__sunset.noty_type__notification .noty_progressbar {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.noty_theme__sunset.noty_type__warning {
|
|
color: #fff;
|
|
background-color: #ffd166;
|
|
}
|
|
|
|
.noty_theme__sunset.noty_type__error {
|
|
color: #fff;
|
|
background-color: #ef476f;
|
|
}
|
|
|
|
.noty_theme__sunset.noty_type__info,
|
|
.noty_theme__sunset.noty_type__information {
|
|
color: #fff;
|
|
background-color: #118ab2;
|
|
}
|
|
|
|
.noty_theme__sunset.noty_type__success {
|
|
color: #fff;
|
|
background-color: #06d6a0;
|
|
}
|
|
|
|
.noty_theme__sunset.noty_type__error .noty_progressbar {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.noty_theme__sunset.noty_type__info .noty_progressbar,
|
|
.noty_theme__sunset.noty_type__information .noty_progressbar {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.noty_has_timeout.noty_has_progressbar .noty_progressbar {
|
|
height: 6px;
|
|
}
|
|
|
|
.noty-text {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
padding: 16px 16px 0 22px;
|
|
}
|
|
|
|
.noty-img {
|
|
height: 84px;
|
|
float: left;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: rgba(0, 0, 0, 0.1);
|
|
border-radius: 16px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(0, 0, 0, 0.25);
|
|
border-radius: 16px;
|
|
}
|
|
|
|
body,
|
|
input,
|
|
textarea,
|
|
select,
|
|
button {
|
|
font-family: 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans TC', 'Noto Sans SC',
|
|
'Meiryo UI', 'Malgun Gothic', 'Segoe UI', sans-serif;
|
|
line-height: normal;
|
|
text-shadow:
|
|
#000 0px 0px 3px,
|
|
#000 0px 0px 3px,
|
|
#000 0px 0px 3px,
|
|
#000 0px 0px 3px,
|
|
#000 0px 0px 3px,
|
|
#000 0px 0px 3px;
|
|
}
|
|
|
|
.x-app {
|
|
position: absolute;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.x-app-type {
|
|
color: #fff;
|
|
}
|
|
|
|
.background {
|
|
background: #1f1f1f;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.x-container {
|
|
position: relative;
|
|
flex: none;
|
|
padding: 2px 10px 0 10px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.x-containerbottom {
|
|
padding: 0px 10px;
|
|
overflow: hidden;
|
|
font-size: 20px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.x-containerbottom span {
|
|
display: block;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.np-progress-bar {
|
|
width: 0%;
|
|
height: 2px;
|
|
background-color: white;
|
|
}
|
|
|
|
.np-progress-circle {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 120px;
|
|
height: 120px;
|
|
transform: rotate(270deg);
|
|
}
|
|
|
|
.np-progress-circle-stroke {
|
|
opacity: 0;
|
|
stroke-dasharray: 189;
|
|
stroke-dashoffset: 189;
|
|
}
|
|
|
|
.x-friend-item {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.x-friend-item .time {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.x-friend-item .name {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.item .name {
|
|
color: #c5c5c5;
|
|
}
|
|
|
|
.friend .name {
|
|
color: #fff;
|
|
}
|
|
|
|
.favorite .name {
|
|
color: #ff0;
|
|
}
|
|
|
|
.x-friend-item > .avatar {
|
|
position: relative;
|
|
display: inline-block;
|
|
flex: none;
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.x-friend-item > img.avatar {
|
|
width: 50px;
|
|
margin-right: 0;
|
|
margin-left: 5px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.x-friend-item > .avatar > img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 40%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.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: bold;
|
|
}
|
|
|
|
.x-friend-item > .detail > .extra {
|
|
font-weight: normal;
|
|
}
|
|
|
|
i.x-user-status {
|
|
display: inline-block;
|
|
width: 14px;
|
|
height: 14px;
|
|
background: #808080;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
i.x-user-status.active {
|
|
background: #f4e05e;
|
|
}
|
|
|
|
i.x-user-status.online {
|
|
background: #67c23a;
|
|
}
|
|
|
|
i.x-user-status.joinme {
|
|
background: #409eff;
|
|
}
|
|
|
|
i.x-user-status.askme {
|
|
background: #ff9500;
|
|
}
|
|
|
|
i.x-user-status.busy {
|
|
background: #ff2c2c;
|
|
}
|
|
|
|
.spin {
|
|
animation: rotation 2.5s infinite linear;
|
|
position: absolute;
|
|
width: 14px;
|
|
height: 28px;
|
|
}
|
|
|
|
@keyframes rotation {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(359deg);
|
|
}
|
|
}
|
|
|
|
.hud-feed {
|
|
position: absolute;
|
|
right: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.hud-feed .item,
|
|
.hud-timeout .item {
|
|
margin: 0;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hud-feed .item {
|
|
font-size: 32px;
|
|
}
|
|
|
|
.hud-feed .combo {
|
|
color: #aaa;
|
|
}
|
|
|
|
.hud-timeout .item {
|
|
font-size: 40px;
|
|
}
|
|
|
|
.hud-timeout {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.hud-timeout-feed {
|
|
position: absolute;
|
|
bottom: 150px;
|
|
right: 0;
|
|
color: #ed1b24;
|
|
}
|
|
|
|
.hud-timeout svg {
|
|
position: absolute;
|
|
right: -160px;
|
|
bottom: 0;
|
|
}
|
|
|
|
.tracker-container {
|
|
flex: 1 1 auto;
|
|
text-align: center;
|
|
line-height: 18px;
|
|
width: 55px;
|
|
}
|
|
|
|
.tracker-device img {
|
|
width: 32px;
|
|
height: 32px;
|
|
transition: all 0.25s linear;
|
|
}
|
|
|
|
.tracker-warning {
|
|
color: #fcfb00;
|
|
}
|
|
|
|
.tracker-warning img {
|
|
filter: saturate(250%) brightness(151%) hue-rotate(221deg);
|
|
}
|
|
|
|
.tracker-error {
|
|
color: #fd4444;
|
|
}
|
|
|
|
.tracker-error img {
|
|
filter: saturate(160%) brightness(88%) hue-rotate(161deg);
|
|
}
|