From c993d2e56b99a3abe429e5f4ff768733825ff30c Mon Sep 17 00:00:00 2001 From: pa Date: Thu, 25 Dec 2025 19:01:19 +0900 Subject: [PATCH] transfer scss to css --- src/App.vue | 2 +- src/{app.scss => app.css} | 248 ++---------------- ...animated-emoji.scss => animated-emoji.css} | 0 src/assets/scss/{flags.scss => flags.css} | 7 +- src/vr/Vr.vue | 2 +- src/vr/{vr.scss => vr.css} | 38 ++- 6 files changed, 50 insertions(+), 247 deletions(-) rename src/{app.scss => app.css} (76%) rename src/assets/scss/{animated-emoji.scss => animated-emoji.css} (100%) rename src/assets/scss/{flags.scss => flags.css} (97%) rename src/vr/{vr.scss => vr.css} (92%) diff --git a/src/App.vue b/src/App.vue index d62bf29c..ccc9df02 100644 --- a/src/App.vue +++ b/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}`); diff --git a/src/app.scss b/src/app.css similarity index 76% rename from src/app.scss rename to src/app.css index c09dbc81..c828fb2e 100644 --- a/src/app.scss +++ b/src/app.css @@ -1,30 +1,28 @@ -@charset "utf-8"; +/* +Copyright(c) 2019-2025 pypy and individual contributors. +All rights reserved. -// -// 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 . -// +This work is licensed under the terms of the MIT license. +For a copy, see . +*/ -@use '@fontsource/noto-sans-kr/korean.css'; -@use '@fontsource/noto-sans-jp/japanese.css'; -@use '@fontsource/noto-sans-sc/chinese-simplified.css'; -@use '@fontsource/noto-sans-tc/chinese-traditional.css'; -@use '@fontsource/noto-sans-kr'; -@use '@fontsource/noto-sans-jp'; -@use '@fontsource/noto-sans-sc'; -@use '@fontsource/noto-sans-tc'; +@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'; -@use './assets/scss/flags.scss'; -@use './assets/scss/animated-emoji.scss'; -@use 'element-plus/theme-chalk/src/index.scss' as *; +@import 'element-plus/dist/index.css'; -@use 'element-plus/theme-chalk/src/dark/css-vars.scss'; -@use 'animate.css/animate.min.css'; -@use 'noty/lib/noty.css'; -@use 'remixicon/fonts/remixicon.css'; +@import './assets/scss/flags.css'; +@import './assets/scss/animated-emoji.css'; +@import 'element-plus/theme-chalk/dark/css-vars.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 { diff --git a/src/assets/scss/animated-emoji.scss b/src/assets/scss/animated-emoji.css similarity index 100% rename from src/assets/scss/animated-emoji.scss rename to src/assets/scss/animated-emoji.css diff --git a/src/assets/scss/flags.scss b/src/assets/scss/flags.css similarity index 97% rename from src/assets/scss/flags.scss rename to src/assets/scss/flags.css index 73379260..30bfe4fb 100644 --- a/src/assets/scss/flags.scss +++ b/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); - transform: translateY(2px); /* move flag down */ + height: calc(var(--offx) / 72 * 52); + 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; diff --git a/src/vr/Vr.vue b/src/vr/Vr.vue index 4aaacee7..113a6b81 100644 --- a/src/vr/Vr.vue +++ b/src/vr/Vr.vue @@ -1423,7 +1423,7 @@ import * as workerTimers from 'worker-timers'; - import './vr.scss'; + import './vr.css'; defineOptions({ name: 'vr' diff --git a/src/vr/vr.scss b/src/vr/vr.css similarity index 92% rename from src/vr/vr.scss rename to src/vr/vr.css index 627a0d40..af38264b 100644 --- a/src/vr/vr.scss +++ b/src/vr/vr.css @@ -1,27 +1,25 @@ -@charset "utf-8"; +/* +Copyright(c) 2019-2025 pypy and individual contributors. +All rights reserved. -// -// 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 . -// +This work is licensed under the terms of the MIT license. +For a copy, see . +*/ -@use '@fontsource/noto-sans-kr/korean.css'; -@use '@fontsource/noto-sans-jp/japanese.css'; -@use '@fontsource/noto-sans-sc/chinese-simplified.css'; -@use '@fontsource/noto-sans-tc/chinese-traditional.css'; -@use '@fontsource/noto-sans-kr'; -@use '@fontsource/noto-sans-jp'; -@use '@fontsource/noto-sans-sc'; -@use '@fontsource/noto-sans-tc'; +@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'; -@use '../assets/scss/flags.scss'; +@import '../assets/scss/flags.css'; -@use 'animate.css/animate.min.css'; -@use 'noty/lib/noty.css'; -@use 'remixicon/fonts/remixicon.css'; +@import 'animate.css/animate.min.css'; +@import 'noty/lib/noty.css'; +@import 'remixicon/fonts/remixicon.css'; /* 마지노선인듯