mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-18 14:23:51 +02:00
transfer scss to css
This commit is contained in:
pa
Natsumi
495
src/vr/vr.css
Normal file
495
src/vr/vr.css
Normal file
@@ -0,0 +1,495 @@
|
||||
/*
|
||||
Copyright(c) 2019-2025 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 '@fontsource/noto-sans-kr/korean.css';
|
||||
@import '@fontsource/noto-sans-jp/japanese.css';
|
||||
@import '@fontsource/noto-sans-sc/chinese-simplified.css';
|
||||
@import '@fontsource/noto-sans-tc/chinese-traditional.css';
|
||||
@import '@fontsource/noto-sans-kr';
|
||||
@import '@fontsource/noto-sans-jp';
|
||||
@import '@fontsource/noto-sans-sc';
|
||||
@import '@fontsource/noto-sans-tc';
|
||||
|
||||
@import '../assets/scss/flags.css';
|
||||
|
||||
@import 'animate.css/animate.min.css';
|
||||
@import 'noty/lib/noty.css';
|
||||
@import 'remixicon/fonts/remixicon.css';
|
||||
|
||||
/*
|
||||
마지노선인듯
|
||||
화면 24px -> 나나 32
|
||||
손등 18px -> 나나 24
|
||||
*/
|
||||
|
||||
.is-loading {
|
||||
animation: rotation 2s linear infinite;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html[lang='ja'] body,
|
||||
html[lang='ja'] * {
|
||||
font-family:
|
||||
'ellipsis-font', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans TC',
|
||||
'Noto Sans SC', 'Meiryo UI', 'Malgun Gothic', 'Segoe UI', system-ui,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
html[lang='ko'] body,
|
||||
html[lang='ko'] * {
|
||||
font-family:
|
||||
'ellipsis-font', 'Noto Sans KR', 'Noto Sans JP', 'Noto Sans TC',
|
||||
'Noto Sans SC', 'Meiryo UI', 'Malgun Gothic', 'Segoe UI', system-ui,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
html[lang='zh-CN'] body,
|
||||
html[lang='zh-CN'] * {
|
||||
font-family:
|
||||
'ellipsis-font', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans JP',
|
||||
'Noto Sans KR', 'Meiryo UI', 'Malgun Gothic', 'Segoe UI', system-ui,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
html[lang='zh-TW'] body,
|
||||
html[lang='zh-TW'] * {
|
||||
font-family:
|
||||
'ellipsis-font', 'Noto Sans TC', 'Noto Sans SC', 'Noto Sans JP',
|
||||
'Noto Sans KR', 'Meiryo UI', 'Malgun Gothic', 'Segoe UI', system-ui,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'ellipsis-font';
|
||||
src: local('Times New Roman');
|
||||
unicode-range: U+2026;
|
||||
}
|
||||
|
||||
body,
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
button {
|
||||
font-family:
|
||||
'ellipsis-font', '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;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.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: 13px;
|
||||
height: 13px;
|
||||
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;
|
||||
mask-image: url(../assets/images/masks/joinme.svg);
|
||||
}
|
||||
|
||||
i.x-user-status.askme {
|
||||
background: #ff9500;
|
||||
mask-image: url(../assets/images/masks/askme.svg);
|
||||
}
|
||||
|
||||
i.x-user-status.busy {
|
||||
background: #ff2c2c;
|
||||
mask-image: url(../assets/images/masks/busy.svg);
|
||||
}
|
||||
|
||||
.spin {
|
||||
animation: rotation 2.5s infinite linear;
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
@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 {
|
||||
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);
|
||||
}
|
||||
Reference in New Issue
Block a user