transfer scss to css

src/App.vue

@@ -41,7 +41,7 @@
     import MacOSTitleBar from './components/MacOSTitleBar.vue';
     import VRCXUpdateDialog from './components/dialogs/VRCXUpdateDialog.vue';
 
-    import './app.scss';
+    import './app.css';
 
     console.log(`isLinux: ${LINUX}`);
 

src/app.css

@@ -1,30 +1,28 @@
-@charset "utf-8";
+/*
+Copyright(c) 2019-2025 pypy and individual contributors.
+All rights reserved.
 
-//
+This work is licensed under the terms of the MIT license.
-// Copyright(c) 2019-2025 pypy and individual contributors.
+For a copy, see <https://opensource.org/licenses/MIT>. 
-// All rights reserved.
+*/
-//
-// This work is licensed under the terms of the MIT license.
-// For a copy, see <https://opensource.org/licenses/MIT>.
-//
 
-@use '@fontsource/noto-sans-kr/korean.css';
+@import '@fontsource/noto-sans-kr/korean.css';
-@use '@fontsource/noto-sans-jp/japanese.css';
+@import '@fontsource/noto-sans-jp/japanese.css';
-@use '@fontsource/noto-sans-sc/chinese-simplified.css';
+@import '@fontsource/noto-sans-sc/chinese-simplified.css';
-@use '@fontsource/noto-sans-tc/chinese-traditional.css';
+@import '@fontsource/noto-sans-tc/chinese-traditional.css';
-@use '@fontsource/noto-sans-kr';
+@import '@fontsource/noto-sans-kr';
-@use '@fontsource/noto-sans-jp';
+@import '@fontsource/noto-sans-jp';
-@use '@fontsource/noto-sans-sc';
+@import '@fontsource/noto-sans-sc';
-@use '@fontsource/noto-sans-tc';
+@import '@fontsource/noto-sans-tc';
 
-@use './assets/scss/flags.scss';
+@import 'element-plus/dist/index.css';
-@use './assets/scss/animated-emoji.scss';
-@use 'element-plus/theme-chalk/src/index.scss' as *;
 
-@use 'element-plus/theme-chalk/src/dark/css-vars.scss';
+@import './assets/scss/flags.css';
-@use 'animate.css/animate.min.css';
+@import './assets/scss/animated-emoji.css';
-@use 'noty/lib/noty.css';
+@import 'element-plus/theme-chalk/dark/css-vars.css';
-@use 'remixicon/fonts/remixicon.css';
+@import 'animate.css/animate.min.css';
+@import 'noty/lib/noty.css';
+@import 'remixicon/fonts/remixicon.css';
 
 :root {
     text-autospace: normal;
@@ -166,47 +164,15 @@ a {
     border-bottom: 1px solid #a0b55c;
 }
 
-// .el-table + .pagination-bar {
-//     margin-top: 15px;
-// }
-
 .el-table__expanded-cell[class*='cell'] {
     padding: 20px 30px;
 }
 
 .el-table--small .cell {
-    // fix expand arrow position
+    /* fix expand arrow position */
     padding: 0px;
 }
 
-// .el-table--mini .el-table__cell {
-//     padding: 5px 0;
-// }
-
-// .el-table .cell {
-//     display: -webkit-box;
-//     -webkit-box-orient: vertical;
-//     -webkit-line-clamp: 1;
-// }
-
-// .el-table__row:hover .el-table__cell .cell {
-//     display: revert;
-//     -webkit-line-clamp: unset;
-// }
-
-// .el-table th.is-sortable .cell {
-//     display: flex;
-//     align-items: center;
-// }
-
-// .el-table .caret-wrapper {
-//     margin-top: 4.5px;
-// }
-
-// .notification-table .el-table .cell {
-//     -webkit-line-clamp: 2;
-// }
-
 .el-dialog__body {
     padding: 20px;
     word-break: break-word;
@@ -251,7 +217,7 @@ a {
 
 .x-login-container {
     position: absolute;
-    // modal 시작이 2000이라서
+    /* modal 시작이 2000이라서 */
     z-index: 1999;
     display: flex;
     align-items: center;
@@ -370,12 +336,6 @@ hr.x-vertical-divider {
     box-sizing: border-box;
 }
 
-// .el-popper.x-quick-search {
-//     width: 225px;
-//     min-width: 0 !important;
-//     border: none;
-// }
-
 .el-popper.x-quick-search .el-select-dropdown__item {
     width: 100%;
     height: auto;
@@ -444,11 +404,6 @@ hr.x-vertical-divider {
     border-radius: 2px;
 }
 
-// .el-select-dropdown__item .x-friend-item:hover {
-//     background: none;
-//     border-radius: 0;
-// }
-
 .x-dialog .x-friend-item {
     width: 167px;
 }
@@ -626,16 +581,6 @@ img.friends-list-avatar {
     border-radius: 2px;
 }
 
-// .x-change-image-item > img,
-// .x-change-image-item > .el-popover__reference-wrapper > img {
-//     width: 240px;
-//     height: 180px;
-// }
-
-// .x-dialog {
-//     max-width: 100%;
-// }
-
 .x-user-dialog > .el-dialog__header,
 .x-world-dialog > .el-dialog__header,
 .x-avatar-dialog > .el-dialog__header,
@@ -644,20 +589,6 @@ img.friends-list-avatar {
     padding: 0;
 }
 
-// .x-user-dialog > .el-dialog__body,
-// .x-world-dialog > .el-dialog__body,
-// .x-avatar-dialog > .el-dialog__body,
-// .x-group-dialog > .el-dialog__body {
-//     padding: 20px;
-// }
-
-// .el-popper.hex {
-//     min-width: auto;
-//     padding: 10px;
-//     font-family: monospace;
-//     text-align: center;
-// }
-
 i.x-user-status,
 i.x-status-icon {
     display: inline-block;
@@ -761,30 +692,6 @@ i.x-status-icon.red {
     border-color: var(--el-color-primary) !important;
 }
 
-// .el-tree-node {
-//     white-space: normal;
-// }
-
-// .el-tree-node__content {
-//     height: auto;
-// }
-
-// .el-progress-bar {
-//     padding-right: 80px;
-//     margin-right: -85px;
-// }
-
-// .el-progress__text {
-//     color: #c8c8c8;
-// }
-
-// .x-user-dialog .el-textarea__inner {
-//     padding: 0;
-//     background: none;
-//     border: 0;
-//     border-radius: 2px;
-// }
-
 .options-container {
     margin-top: 30px;
     padding: 0px 10px 10px 10px;
@@ -839,14 +746,6 @@ i.x-status-icon.red {
     vertical-align: top;
 }
 
-// .el-color-picker__trigger {
-//     border: unset;
-// }
-
-// .el-color-picker__color {
-//     border: 0.5px solid #999;
-// }
-
 .x-dialog .el-button--success {
     background-color: #67c23a !important;
     border-color: #67c23a !important;
@@ -883,15 +782,6 @@ i.x-status-icon.red {
     color: #f56c6c;
 }
 
-// .el-form-item {
-//     margin-bottom: 4px;
-// }
-
-// .photon-event-table .el-table--mini .el-table__cell,
-// .current-instance-table .el-table--mini .el-table__cell {
-//     padding: 0;
-// }
-
 .photon-event-table {
     margin-top: 20px;
 }
@@ -906,25 +796,12 @@ i.x-status-icon.red {
     margin-bottom: -1px;
 }
 
-// .el-pagination .el-select .el-input .el-input__inner,
-// .el-input--mini .el-input__icon {
-//     height: 22px;
-// }
-
-// .el-pagination .btn-next {
-//     margin-right: 10px;
-// }
-
 .el-dialog,
 .el-message-box {
     border-radius: 28px;
     word-break: break-word;
 }
 
-// .el-tabs__nav-wrap::after {
-//     background-color: #e4e7ed14;
-// }
-
 .dialog-title {
     font-weight: bold;
 }
@@ -934,18 +811,7 @@ i.x-status-icon.red {
     top: 0 !important;
 }
 
-// .vrc-instance-queue-message .el-message__content {
-//     margin-right: 20px;
-// }
-
-// .el-tabs {
-//     display: flex;
-//     flex-direction: column;
-// }
-
 .el-tabs__content {
-    // flex: 1;
-    // max-height: 100%;
     overflow-y: auto;
 }
 
@@ -956,53 +822,6 @@ i.x-status-icon.red {
     font-size: 13px;
 }
 
-// .el-tabs__header {
-//     padding: 0 1px;
-// }
-
-// .zero-margin-tabs .el-tabs__header {
-//     margin-bottom: 0;
-// }
-
-// .x-friend-item .el-checkbox__inner,
-// .el-table__row .el-checkbox__inner {
-//     width: 28px;
-//     height: 28px;
-//     border-radius: 4px;
-// }
-
-// .x-friend-item .el-checkbox__inner::after,
-// .el-table__row .el-checkbox__inner::after {
-//     width: 8px;
-//     height: 14px;
-//     left: 8px;
-//     top: 2px;
-// }
-
-// .el-pagination .el-input .el-input__icon {
-//     line-height: 22px;
-// }
-
-// .el-dialog__body .el-tag--mini {
-//     line-height: 17px;
-// }
-
-// .el-table__expanded-cell .el-tag--mini {
-//     line-height: 18px;
-// }
-
-// .x-friend-item:hover .el-input__count {
-//     background: #f0f0f0;
-// }
-
-.x-app > .x-container {
-    padding-top: 15px;
-}
-
-// .el-collapse-item .el-tag--mini {
-//     line-height: 17px;
-// }
-
 .x-text-removed {
     text-decoration: line-through;
     color: #ff0000;
@@ -1018,7 +837,7 @@ i.x-status-icon.red {
     border-radius: 4px;
 }
 
-// expand table cell on hover, TODO: replace with a better solution
+/* expand table cell on hover, TODO: replace with a better solution */
 .el-table .cell {
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -1031,26 +850,11 @@ i.x-status-icon.red {
 }
 
 .el-carousel__mask {
-    // looks bad
     display: none;
 }
 
-// FIXME
-// Something changed the CSS of element-ui
-// The other parts are the same
-// It feels like can't fundamentally modify it
-// And can only fix it bit by bit by overriding
-// .el-switch__core:after {
-//     top: 1.5px;
-// }
-
-// .el-popover {
-//     text-align: left;
-//     word-break: break-word;
-// }
-
 .el-dropdown-menu__item:not(.is-disabled):focus {
-    // dropdown item focus blue background looks bad
+    /* dropdown item focus blue background looks bad */
     background-color: unset;
 }
 
@@ -1058,7 +862,7 @@ i.x-status-icon.red {
     --el-overlay-color-lighter: rgba(0, 0, 0, 0.15);
 }
 
-// fix fullscreen image viewer colors in dark mode
+/* fix fullscreen image viewer colors in dark mode */
 .toolbar-icon,
 .el-image-viewer__actions,
 .el-image-viewer__close {

src/assets/scss/flags.css

@@ -1,14 +1,15 @@
 :root {
     --offx: 20px; /* flag size */
-    --offy: calc(var(--offx) / 72 * 52);
+    --offy: 14.5px;
 }
 .flags {
     background: url('../images/flags.png') no-repeat;
     background-size: calc(var(--offx) * 6);
     width: var(--offx);
-    height: var(--offy);
+    height: calc(var(--offx) / 72 * 52);
-    transform: translateY(2px); /* move flag down */
+    flex-shrink: 0;
     background-position: calc(var(--offx) * -5) calc(var(--offy) * -4);
+    filter: grayscale(0.05);
 }
 span[class='flags'] {
     background-position: calc(var(--offx) * 1) 0;

src/vr/Vr.vue

@@ -1423,7 +1423,7 @@
 
     import * as workerTimers from 'worker-timers';
 
-    import './vr.scss';
+    import './vr.css';
 
     defineOptions({
         name: 'vr'

src/vr/vr.css

@@ -1,27 +1,25 @@
-@charset "utf-8";
+/*
+Copyright(c) 2019-2025 pypy and individual contributors.
+All rights reserved.
 
-//
+This work is licensed under the terms of the MIT license.
-// Copyright(c) 2019-2025 pypy and individual contributors.
+For a copy, see <https://opensource.org/licenses/MIT>. 
-// All rights reserved.
+*/
-//
-// This work is licensed under the terms of the MIT license.
-// For a copy, see <https://opensource.org/licenses/MIT>.
-//
 
-@use '@fontsource/noto-sans-kr/korean.css';
+@import '@fontsource/noto-sans-kr/korean.css';
-@use '@fontsource/noto-sans-jp/japanese.css';
+@import '@fontsource/noto-sans-jp/japanese.css';
-@use '@fontsource/noto-sans-sc/chinese-simplified.css';
+@import '@fontsource/noto-sans-sc/chinese-simplified.css';
-@use '@fontsource/noto-sans-tc/chinese-traditional.css';
+@import '@fontsource/noto-sans-tc/chinese-traditional.css';
-@use '@fontsource/noto-sans-kr';
+@import '@fontsource/noto-sans-kr';
-@use '@fontsource/noto-sans-jp';
+@import '@fontsource/noto-sans-jp';
-@use '@fontsource/noto-sans-sc';
+@import '@fontsource/noto-sans-sc';
-@use '@fontsource/noto-sans-tc';
+@import '@fontsource/noto-sans-tc';
 
-@use '../assets/scss/flags.scss';
+@import '../assets/scss/flags.css';
 
-@use 'animate.css/animate.min.css';
+@import 'animate.css/animate.min.css';
-@use 'noty/lib/noty.css';
+@import 'noty/lib/noty.css';
-@use 'remixicon/fonts/remixicon.css';
+@import 'remixicon/fonts/remixicon.css';
 
 /*
     마지노선인듯