From 5ff2f89afb71fd2976c487692ec73085241e09c7 Mon Sep 17 00:00:00 2001 From: Haishan Date: Sun, 6 Jun 2021 00:32:24 +0800 Subject: Stop use postcss-nested postcss-extend-rule --- src/components/APIConfig.module.css | 51 ------ src/components/APIConfig.module.scss | 51 ++++++ src/components/APIConfig.tsx | 2 +- src/components/APIDiscovery.module.css | 26 ---- src/components/APIDiscovery.module.scss | 26 ++++ src/components/APIDiscovery.tsx | 2 +- src/components/BackendList.module.css | 99 ------------ src/components/BackendList.module.scss | 99 ++++++++++++ src/components/BackendList.tsx | 2 +- src/components/Button.module.css | 64 -------- src/components/Button.module.scss | 64 ++++++++ src/components/Button.tsx | 2 +- src/components/CollapsibleSectionHeader.module.css | 39 ----- .../CollapsibleSectionHeader.module.scss | 39 +++++ src/components/CollapsibleSectionHeader.tsx | 2 +- src/components/ConnectionTable.module.css | 51 ------ src/components/ConnectionTable.module.scss | 51 ++++++ src/components/ConnectionTable.tsx | 2 +- src/components/Connections.module.css | 44 ------ src/components/Connections.module.scss | 44 ++++++ src/components/Connections.tsx | 2 +- src/components/ContentHeader.module.css | 16 -- src/components/ContentHeader.module.scss | 16 ++ src/components/ContentHeader.tsx | 2 +- src/components/ErrorBoundaryFallback.module.css | 37 ----- src/components/ErrorBoundaryFallback.module.scss | 37 +++++ src/components/ErrorBoundaryFallback.tsx | 2 +- src/components/Field.module.css | 43 ------ src/components/Field.module.scss | 43 ++++++ src/components/Field.tsx | 2 +- src/components/Home.module.css | 6 - src/components/Home.module.scss | 6 + src/components/Home.tsx | 2 +- src/components/Input.module.css | 25 --- src/components/Input.module.scss | 25 +++ src/components/Input.tsx | 2 +- src/components/Loading.module.css | 28 ---- src/components/Loading.module.scss | 28 ++++ src/components/Loading.tsx | 2 +- src/components/Loading2.module.css | 8 - src/components/Loading2.module.scss | 8 + src/components/Loading2.tsx | 2 +- src/components/Logs.module.css | 75 --------- src/components/Logs.module.scss | 75 +++++++++ src/components/Logs.tsx | 2 +- src/components/Modal.module.css | 21 --- src/components/Modal.module.scss | 21 +++ src/components/Modal.tsx | 2 +- src/components/ModalCloseAllConnections.module.css | 23 --- .../ModalCloseAllConnections.module.scss | 23 +++ src/components/ModalCloseAllConnections.tsx | 4 +- src/components/Root.css | 172 --------------------- src/components/Root.module.css | 37 ----- src/components/Root.module.scss | 37 +++++ src/components/Root.scss | 172 +++++++++++++++++++++ src/components/Root.tsx | 4 +- src/components/Rule.module.css | 35 ----- src/components/Rule.module.scss | 35 +++++ src/components/Rule.tsx | 2 +- src/components/Rules.module.css | 21 --- src/components/Rules.module.scss | 21 +++ src/components/Rules.tsx | 7 +- src/components/Search.module.css | 40 ----- src/components/Search.module.scss | 40 +++++ src/components/Search.tsx | 2 +- src/components/Selection.module.css | 23 --- src/components/Selection.module.scss | 23 +++ src/components/Selection.tsx | 2 +- src/components/SideBar.module.css | 112 -------------- src/components/SideBar.module.scss | 112 ++++++++++++++ src/components/SideBar.tsx | 2 +- src/components/SvgYacd.module.css | 14 -- src/components/SvgYacd.module.scss | 14 ++ src/components/SvgYacd.tsx | 2 +- src/components/ToggleSwitch.module.css | 39 ----- src/components/ToggleSwitch.module.scss | 39 +++++ src/components/ToggleSwitch.tsx | 2 +- src/components/about/About.module.css | 18 --- src/components/about/About.module.scss | 18 +++ src/components/about/About.tsx | 2 +- src/components/proxies/Proxies.module.css | 36 ----- src/components/proxies/Proxies.module.scss | 36 +++++ src/components/proxies/Proxies.tsx | 7 +- src/components/proxies/Proxy.module.css | 83 ---------- src/components/proxies/Proxy.module.scss | 83 ++++++++++ src/components/proxies/Proxy.tsx | 2 +- src/components/proxies/ProxyGroup.module.css | 11 -- src/components/proxies/ProxyGroup.module.scss | 11 ++ src/components/proxies/ProxyGroup.tsx | 2 +- src/components/proxies/ProxyLatency.module.css | 8 - src/components/proxies/ProxyLatency.module.scss | 8 + src/components/proxies/ProxyLatency.tsx | 2 +- src/components/proxies/ProxyList.module.css | 13 -- src/components/proxies/ProxyList.module.scss | 13 ++ src/components/proxies/ProxyList.tsx | 2 +- src/components/proxies/ProxyProvider.module.css | 30 ---- src/components/proxies/ProxyProvider.module.scss | 30 ++++ src/components/proxies/ProxyProvider.tsx | 2 +- src/components/proxies/Settings.module.css | 17 -- src/components/proxies/Settings.module.scss | 17 ++ src/components/proxies/Settings.tsx | 2 +- src/components/proxies/TextFilter.tsx | 17 -- src/components/rules/RuleProviderItem.module.css | 33 ---- src/components/rules/RuleProviderItem.module.scss | 33 ++++ src/components/rules/RuleProviderItem.tsx | 2 +- src/components/rules/TextFilter.tsx | 18 --- src/components/shared.module.css | 19 --- src/components/shared/BaseModal.module.css | 17 -- src/components/shared/BaseModal.module.scss | 17 ++ src/components/shared/BaseModal.tsx | 4 +- src/components/shared/Basic.module.css | 116 -------------- src/components/shared/Basic.module.scss | 116 ++++++++++++++ src/components/shared/Basic.tsx | 2 +- src/components/shared/Fab.module.css | 33 ---- src/components/shared/Fab.module.scss | 33 ++++ src/components/shared/Fab.tsx | 2 +- src/components/shared/RotateIcon.module.css | 16 -- src/components/shared/RotateIcon.module.scss | 16 ++ src/components/shared/RotateIcon.tsx | 2 +- src/components/shared/Select.module.css | 30 ---- src/components/shared/Select.module.scss | 30 ++++ src/components/shared/Select.tsx | 2 +- src/components/shared/Styled.module.css | 5 - src/components/shared/Styled.module.scss | 5 + src/components/shared/Styled.tsx | 2 +- src/components/shared/TextFitler.module.scss | 19 +++ src/components/shared/TextFitler.tsx | 21 +++ 127 files changed, 1704 insertions(+), 1716 deletions(-) delete mode 100644 src/components/APIConfig.module.css create mode 100644 src/components/APIConfig.module.scss delete mode 100644 src/components/APIDiscovery.module.css create mode 100644 src/components/APIDiscovery.module.scss delete mode 100644 src/components/BackendList.module.css create mode 100644 src/components/BackendList.module.scss delete mode 100644 src/components/Button.module.css create mode 100644 src/components/Button.module.scss delete mode 100644 src/components/CollapsibleSectionHeader.module.css create mode 100644 src/components/CollapsibleSectionHeader.module.scss delete mode 100644 src/components/ConnectionTable.module.css create mode 100644 src/components/ConnectionTable.module.scss delete mode 100644 src/components/Connections.module.css create mode 100644 src/components/Connections.module.scss delete mode 100644 src/components/ContentHeader.module.css create mode 100644 src/components/ContentHeader.module.scss delete mode 100644 src/components/ErrorBoundaryFallback.module.css create mode 100644 src/components/ErrorBoundaryFallback.module.scss delete mode 100644 src/components/Field.module.css create mode 100644 src/components/Field.module.scss delete mode 100644 src/components/Home.module.css create mode 100644 src/components/Home.module.scss delete mode 100644 src/components/Input.module.css create mode 100644 src/components/Input.module.scss delete mode 100644 src/components/Loading.module.css create mode 100644 src/components/Loading.module.scss delete mode 100644 src/components/Loading2.module.css create mode 100644 src/components/Loading2.module.scss delete mode 100644 src/components/Logs.module.css create mode 100644 src/components/Logs.module.scss delete mode 100644 src/components/Modal.module.css create mode 100644 src/components/Modal.module.scss delete mode 100644 src/components/ModalCloseAllConnections.module.css create mode 100644 src/components/ModalCloseAllConnections.module.scss delete mode 100644 src/components/Root.css delete mode 100644 src/components/Root.module.css create mode 100644 src/components/Root.module.scss create mode 100644 src/components/Root.scss delete mode 100644 src/components/Rule.module.css create mode 100644 src/components/Rule.module.scss delete mode 100644 src/components/Rules.module.css create mode 100644 src/components/Rules.module.scss delete mode 100644 src/components/Search.module.css create mode 100644 src/components/Search.module.scss delete mode 100644 src/components/Selection.module.css create mode 100644 src/components/Selection.module.scss delete mode 100644 src/components/SideBar.module.css create mode 100644 src/components/SideBar.module.scss delete mode 100644 src/components/SvgYacd.module.css create mode 100644 src/components/SvgYacd.module.scss delete mode 100644 src/components/ToggleSwitch.module.css create mode 100644 src/components/ToggleSwitch.module.scss delete mode 100644 src/components/about/About.module.css create mode 100644 src/components/about/About.module.scss delete mode 100644 src/components/proxies/Proxies.module.css create mode 100644 src/components/proxies/Proxies.module.scss delete mode 100644 src/components/proxies/Proxy.module.css create mode 100644 src/components/proxies/Proxy.module.scss delete mode 100644 src/components/proxies/ProxyGroup.module.css create mode 100644 src/components/proxies/ProxyGroup.module.scss delete mode 100644 src/components/proxies/ProxyLatency.module.css create mode 100644 src/components/proxies/ProxyLatency.module.scss delete mode 100644 src/components/proxies/ProxyList.module.css create mode 100644 src/components/proxies/ProxyList.module.scss delete mode 100644 src/components/proxies/ProxyProvider.module.css create mode 100644 src/components/proxies/ProxyProvider.module.scss delete mode 100644 src/components/proxies/Settings.module.css create mode 100644 src/components/proxies/Settings.module.scss delete mode 100644 src/components/proxies/TextFilter.tsx delete mode 100644 src/components/rules/RuleProviderItem.module.css create mode 100644 src/components/rules/RuleProviderItem.module.scss delete mode 100644 src/components/rules/TextFilter.tsx delete mode 100644 src/components/shared.module.css delete mode 100644 src/components/shared/BaseModal.module.css create mode 100644 src/components/shared/BaseModal.module.scss delete mode 100644 src/components/shared/Basic.module.css create mode 100644 src/components/shared/Basic.module.scss delete mode 100644 src/components/shared/Fab.module.css create mode 100644 src/components/shared/Fab.module.scss delete mode 100644 src/components/shared/RotateIcon.module.css create mode 100644 src/components/shared/RotateIcon.module.scss delete mode 100644 src/components/shared/Select.module.css create mode 100644 src/components/shared/Select.module.scss delete mode 100644 src/components/shared/Styled.module.css create mode 100644 src/components/shared/Styled.module.scss create mode 100644 src/components/shared/TextFitler.module.scss create mode 100644 src/components/shared/TextFitler.tsx (limited to 'src/components') diff --git a/src/components/APIConfig.module.css b/src/components/APIConfig.module.css deleted file mode 100644 index afc2d53..0000000 --- a/src/components/APIConfig.module.css +++ /dev/null @@ -1,51 +0,0 @@ -.root { - &:focus { - outline: none; - } -} - -.header { - display: flex; - justify-content: center; - align-items: center; - - .icon { - color: #2d2d30; - opacity: 0.4; - transition: opacity 400ms; - &:hover { - opacity: 0.7; - } - } -} - -.body { - padding: 15px 0 0; -} - -.hostnamePort { - display: flex; - - div { - flex: 1 1 auto; - } - - div:nth-child(2) { - flex-grow: 0; - flex-basis: 120px; - margin-left: 10px; - } -} - -.error { - height: 20px; - font-size: 0.8em; - color: #ff8b8b; -} - -.footer { - padding: 5px 0 10px; - display: flex; - justify-content: flex-end; - align-items: center; -} diff --git a/src/components/APIConfig.module.scss b/src/components/APIConfig.module.scss new file mode 100644 index 0000000..afc2d53 --- /dev/null +++ b/src/components/APIConfig.module.scss @@ -0,0 +1,51 @@ +.root { + &:focus { + outline: none; + } +} + +.header { + display: flex; + justify-content: center; + align-items: center; + + .icon { + color: #2d2d30; + opacity: 0.4; + transition: opacity 400ms; + &:hover { + opacity: 0.7; + } + } +} + +.body { + padding: 15px 0 0; +} + +.hostnamePort { + display: flex; + + div { + flex: 1 1 auto; + } + + div:nth-child(2) { + flex-grow: 0; + flex-basis: 120px; + margin-left: 10px; + } +} + +.error { + height: 20px; + font-size: 0.8em; + color: #ff8b8b; +} + +.footer { + padding: 5px 0 10px; + display: flex; + justify-content: flex-end; + align-items: center; +} diff --git a/src/components/APIConfig.tsx b/src/components/APIConfig.tsx index 54e6e58..9b2e7e9 100644 --- a/src/components/APIConfig.tsx +++ b/src/components/APIConfig.tsx @@ -4,7 +4,7 @@ import { BackendList } from 'src/components/BackendList'; import { ClashAPIConfig } from 'src/types'; import { addClashAPIConfig, getClashAPIConfig } from '../store/app'; -import s0 from './APIConfig.module.css'; +import s0 from './APIConfig.module.scss'; import Button from './Button'; import Field from './Field'; import { connect } from './StateProvider'; diff --git a/src/components/APIDiscovery.module.css b/src/components/APIDiscovery.module.css deleted file mode 100644 index 6c1295a..0000000 --- a/src/components/APIDiscovery.module.css +++ /dev/null @@ -1,26 +0,0 @@ -.content.content { - background: none; - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; - - transform: none; - padding: 0; - border-radius: 0; - - display: flex; - justify-content: center; - overflow-y: auto; -} - -.container { - position: relative; - margin-left: 20px; - margin-right: 20px; -} - -.overlay.overlay { - background: #222; -} diff --git a/src/components/APIDiscovery.module.scss b/src/components/APIDiscovery.module.scss new file mode 100644 index 0000000..6c1295a --- /dev/null +++ b/src/components/APIDiscovery.module.scss @@ -0,0 +1,26 @@ +.content.content { + background: none; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + + transform: none; + padding: 0; + border-radius: 0; + + display: flex; + justify-content: center; + overflow-y: auto; +} + +.container { + position: relative; + margin-left: 20px; + margin-right: 20px; +} + +.overlay.overlay { + background: #222; +} diff --git a/src/components/APIDiscovery.tsx b/src/components/APIDiscovery.tsx index 97f3538..82ffbbf 100644 --- a/src/components/APIDiscovery.tsx +++ b/src/components/APIDiscovery.tsx @@ -5,7 +5,7 @@ import { getClashAPIConfig } from '../store/app'; import { fetchConfigs } from '../store/configs'; import { closeModal } from '../store/modals'; import APIConfig from './APIConfig'; -import s0 from './APIDiscovery.module.css'; +import s0 from './APIDiscovery.module.scss'; import Modal from './Modal'; import { connect } from './StateProvider'; diff --git a/src/components/BackendList.module.css b/src/components/BackendList.module.css deleted file mode 100644 index 1de1972..0000000 --- a/src/components/BackendList.module.css +++ /dev/null @@ -1,99 +0,0 @@ -.ul { - position: relative; - margin: 0; - padding: 0; - list-style: none; - line-height: 1.8; - - --width-max-content: 230px; -} - -.li { - position: relative; - margin: 5px 0; - padding: 10px 0; - border-radius: 10px; - display: grid; - place-content: center; - grid-template-columns: 40px 1fr 40px; - grid-template-rows: 30px; - grid-template-areas: 'close url .'; - column-gap: 10px; -} - -.li:hover { - background-color: var(--bg-near-transparent); -} - -.close { - opacity: 0; - grid-area: close; - place-self: center; -} - -.li:hover .close, -.li:hover .eye { - opacity: 1; -} -.close:focus, -.eye:focus { - opacity: 1; -} - -.hasSecret { - grid-template-rows: repeat(2, 30px); - grid-template-areas: - 'close url .' - 'close secret eye'; -} - -.url { - grid-area: url; -} -.secret { - grid-area: secret; -} -.eye { - grid-area: eye; - opacity: 0; - place-self: center; - cursor: pointer; -} - -.url, -.secret { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.btn { - outline: none; - appearance: none; - border: 1px solid transparent; - background-color: transparent; - color: inherit; - display: flex; - align-items: center; - padding: 5px; - border-radius: 100px; -} -.btn:focus { - border-color: var(--color-focus-blue); -} -.btn:hover:enabled { - background-color: var(--color-focus-blue); -} -.btn:active:enabled { - transform: scale(0.97); -} -.btn:disabled { - color: var(--color-text-secondary); -} - -.url { - cursor: pointer; -} -.url:hover { - color: var(--color-text-highlight); -} diff --git a/src/components/BackendList.module.scss b/src/components/BackendList.module.scss new file mode 100644 index 0000000..1de1972 --- /dev/null +++ b/src/components/BackendList.module.scss @@ -0,0 +1,99 @@ +.ul { + position: relative; + margin: 0; + padding: 0; + list-style: none; + line-height: 1.8; + + --width-max-content: 230px; +} + +.li { + position: relative; + margin: 5px 0; + padding: 10px 0; + border-radius: 10px; + display: grid; + place-content: center; + grid-template-columns: 40px 1fr 40px; + grid-template-rows: 30px; + grid-template-areas: 'close url .'; + column-gap: 10px; +} + +.li:hover { + background-color: var(--bg-near-transparent); +} + +.close { + opacity: 0; + grid-area: close; + place-self: center; +} + +.li:hover .close, +.li:hover .eye { + opacity: 1; +} +.close:focus, +.eye:focus { + opacity: 1; +} + +.hasSecret { + grid-template-rows: repeat(2, 30px); + grid-template-areas: + 'close url .' + 'close secret eye'; +} + +.url { + grid-area: url; +} +.secret { + grid-area: secret; +} +.eye { + grid-area: eye; + opacity: 0; + place-self: center; + cursor: pointer; +} + +.url, +.secret { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.btn { + outline: none; + appearance: none; + border: 1px solid transparent; + background-color: transparent; + color: inherit; + display: flex; + align-items: center; + padding: 5px; + border-radius: 100px; +} +.btn:focus { + border-color: var(--color-focus-blue); +} +.btn:hover:enabled { + background-color: var(--color-focus-blue); +} +.btn:active:enabled { + transform: scale(0.97); +} +.btn:disabled { + color: var(--color-text-secondary); +} + +.url { + cursor: pointer; +} +.url:hover { + color: var(--color-text-highlight); +} diff --git a/src/components/BackendList.tsx b/src/components/BackendList.tsx index 4bfb64c..8e0d906 100644 --- a/src/components/BackendList.tsx +++ b/src/components/BackendList.tsx @@ -8,7 +8,7 @@ import { } from 'src/store/app'; import { ClashAPIConfig } from 'src/types'; -import s from './BackendList.module.css'; +import s from './BackendList.module.scss'; import { connect, useStoreActions } from './StateProvider'; type Config = ClashAPIConfig & { addedAt: number }; diff --git a/src/components/Button.module.css b/src/components/Button.module.css deleted file mode 100644 index 3046d0c..0000000 --- a/src/components/Button.module.css +++ /dev/null @@ -1,64 +0,0 @@ -.btn { - -webkit-appearance: none; - outline: none; - user-select: none; - position: relative; - cursor: pointer; - display: inline-flex; - align-items: center; - justify-content: center; - color: var(--color-btn-fg); - background: var(--color-btn-bg); - border: 1px solid #555; - border-radius: 100px; - &:focus { - border-color: var(--color-focus-blue); - } - &:hover { - background: #387cec; - border: 1px solid #387cec; - color: #fff; - } - &:active { - transform: scale(0.97); - } - - font-size: 0.85em; - padding: 4px 7px; - @media (--breakpoint-not-small) { - font-size: 1em; - padding: 6px 12px; - } - - &.minimal { - border-color: transparent; - background: none; - &:focus { - border-color: var(--color-focus-blue); - } - &:hover { - color: #fff; - background: #387cec; - border: 1px solid #387cec; - } - } -} - -.btn:disabled { - opacity: 0.5; -} - -.btnStart { - margin-right: 5px; - display: inline-flex; - align-items: center; - justify-content: center; -} - -.loadingContainer { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - display: inline-flex; -} diff --git a/src/components/Button.module.scss b/src/components/Button.module.scss new file mode 100644 index 0000000..3046d0c --- /dev/null +++ b/src/components/Button.module.scss @@ -0,0 +1,64 @@ +.btn { + -webkit-appearance: none; + outline: none; + user-select: none; + position: relative; + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + color: var(--color-btn-fg); + background: var(--color-btn-bg); + border: 1px solid #555; + border-radius: 100px; + &:focus { + border-color: var(--color-focus-blue); + } + &:hover { + background: #387cec; + border: 1px solid #387cec; + color: #fff; + } + &:active { + transform: scale(0.97); + } + + font-size: 0.85em; + padding: 4px 7px; + @media (--breakpoint-not-small) { + font-size: 1em; + padding: 6px 12px; + } + + &.minimal { + border-color: transparent; + background: none; + &:focus { + border-color: var(--color-focus-blue); + } + &:hover { + color: #fff; + background: #387cec; + border: 1px solid #387cec; + } + } +} + +.btn:disabled { + opacity: 0.5; +} + +.btnStart { + margin-right: 5px; + display: inline-flex; + align-items: center; + justify-content: center; +} + +.loadingContainer { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + display: inline-flex; +} diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 97bb141..1725d1b 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -1,7 +1,7 @@ import cx from 'clsx'; import * as React from 'react'; -import s0 from './Button.module.css'; +import s0 from './Button.module.scss'; import { LoadingDot } from './shared/Basic'; const { forwardRef, useCallback } = React; diff --git a/src/components/CollapsibleSectionHeader.module.css b/src/components/CollapsibleSectionHeader.module.css deleted file mode 100644 index b654f35..0000000 --- a/src/components/CollapsibleSectionHeader.module.css +++ /dev/null @@ -1,39 +0,0 @@ -.header { - display: flex; - align-items: center; - - &:focus { - outline: none; - } - - .arrow { - display: inline-flex; - transform: rotate(0deg); - transition: transform 0.3s; - - &.isOpen { - transform: rotate(180deg); - } - - &:focus { - outline: var(--color-focus-blue) solid 1px; - } - } -} - -.btn { - margin-left: 5px; -} - -/* TODO duplicate with connQty in Connections.module.css */ -.qty { - font-family: var(--font-normal); - font-size: 0.75em; - margin-left: 3px; - padding: 2px 7px; - display: inline-flex; - justify-content: center; - align-items: center; - background-color: var(--bg-near-transparent); - border-radius: 30px; -} diff --git a/src/components/CollapsibleSectionHeader.module.scss b/src/components/CollapsibleSectionHeader.module.scss new file mode 100644 index 0000000..b654f35 --- /dev/null +++ b/src/components/CollapsibleSectionHeader.module.scss @@ -0,0 +1,39 @@ +.header { + display: flex; + align-items: center; + + &:focus { + outline: none; + } + + .arrow { + display: inline-flex; + transform: rotate(0deg); + transition: transform 0.3s; + + &.isOpen { + transform: rotate(180deg); + } + + &:focus { + outline: var(--color-focus-blue) solid 1px; + } + } +} + +.btn { + margin-left: 5px; +} + +/* TODO duplicate with connQty in Connections.module.css */ +.qty { + font-family: var(--font-normal); + font-size: 0.75em; + margin-left: 3px; + padding: 2px 7px; + display: inline-flex; + justify-content: center; + align-items: center; + background-color: var(--bg-near-transparent); + border-radius: 30px; +} diff --git a/src/components/CollapsibleSectionHeader.tsx b/src/components/CollapsibleSectionHeader.tsx index bc47ad7..2d5ecd1 100644 --- a/src/components/CollapsibleSectionHeader.tsx +++ b/src/components/CollapsibleSectionHeader.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { ChevronDown } from 'react-feather'; import Button from './Button'; -import s from './CollapsibleSectionHeader.module.css'; +import s from './CollapsibleSectionHeader.module.scss'; import { SectionNameType } from './shared/Basic'; type Props = { diff --git a/src/components/ConnectionTable.module.css b/src/components/ConnectionTable.module.css deleted file mode 100644 index 80a8432..0000000 --- a/src/components/ConnectionTable.module.css +++ /dev/null @@ -1,51 +0,0 @@ -.tr { - display: grid; - /* grid-template-columns: repeat(11, minmax(max-content, 1fr)); */ - grid-template-columns: repeat(11, minmax(max-content, auto)); -} - -.th { - padding: 8px 10px; - height: 50px; - background: var(--color-background); - position: sticky; - top: 0; - font-size: 0.8em; - text-align: center; - user-select: none; - - display: flex; - align-items: center; - justify-content: space-between; - - &:hover { - color: var(--color-text-highlight); - } -} - -.td { - padding: 8px 13px; - font-size: 0.9em; - - font-family: var(--font-normal); -} - -.td.odd { - background: var(--color-row-odd); -} - -/* download upload td cells */ -.du { - text-align: right; -} - -.sortIconContainer { - display: inline-flex; - margin-left: 10px; - width: 16px; - height: 16px; -} - -.rotate180 { - transform: rotate(180deg); -} diff --git a/src/components/ConnectionTable.module.scss b/src/components/ConnectionTable.module.scss new file mode 100644 index 0000000..80a8432 --- /dev/null +++ b/src/components/ConnectionTable.module.scss @@ -0,0 +1,51 @@ +.tr { + display: grid; + /* grid-template-columns: repeat(11, minmax(max-content, 1fr)); */ + grid-template-columns: repeat(11, minmax(max-content, auto)); +} + +.th { + padding: 8px 10px; + height: 50px; + background: var(--color-background); + position: sticky; + top: 0; + font-size: 0.8em; + text-align: center; + user-select: none; + + display: flex; + align-items: center; + justify-content: space-between; + + &:hover { + color: var(--color-text-highlight); + } +} + +.td { + padding: 8px 13px; + font-size: 0.9em; + + font-family: var(--font-normal); +} + +.td.odd { + background: var(--color-row-odd); +} + +/* download upload td cells */ +.du { + text-align: right; +} + +.sortIconContainer { + display: inline-flex; + margin-left: 10px; + width: 16px; + height: 16px; +} + +.rotate180 { + transform: rotate(180deg); +} diff --git a/src/components/ConnectionTable.tsx b/src/components/ConnectionTable.tsx index cc9695a..2323e2e 100644 --- a/src/components/ConnectionTable.tsx +++ b/src/components/ConnectionTable.tsx @@ -5,7 +5,7 @@ import { ChevronDown } from 'react-feather'; import { useSortBy, useTable } from 'react-table'; import prettyBytes from '../misc/pretty-bytes'; -import s from './ConnectionTable.module.css'; +import s from './ConnectionTable.module.scss'; const sortDescFirst = true; diff --git a/src/components/Connections.module.css b/src/components/Connections.module.css deleted file mode 100644 index 7afaa8a..0000000 --- a/src/components/Connections.module.css +++ /dev/null @@ -1,44 +0,0 @@ -.placeHolder { - height: 100%; - display: flex; - align-items: center; - justify-content: center; - color: var(--color-background); - opacity: 0.1; -} - -.connQty { - font-family: var(--font-normal); - font-size: 0.75em; - margin-left: 3px; - padding: 2px 7px; - display: inline-flex; - justify-content: center; - align-items: center; - background-color: var(--bg-near-transparent); - border-radius: 30px; -} - -.inputWrapper { - margin: 0 30px; - width: 100%; - max-width: 350px; - justify-self: flex-end; -} - -.input { - -webkit-appearance: none; - background-color: var(--color-input-bg); - background-image: none; - border-radius: 18px; - border: 1px solid var(--color-input-border); - box-sizing: border-box; - color: #c1c1c1; - display: inline-block; - font-size: inherit; - height: 36px; - outline: none; - padding: 0 15px; - transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); - width: 100%; -} diff --git a/src/components/Connections.module.scss b/src/components/Connections.module.scss new file mode 100644 index 0000000..7afaa8a --- /dev/null +++ b/src/components/Connections.module.scss @@ -0,0 +1,44 @@ +.placeHolder { + height: 100%; + display: flex; + align-items: center; + justify-content: center; + color: var(--color-background); + opacity: 0.1; +} + +.connQty { + font-family: var(--font-normal); + font-size: 0.75em; + margin-left: 3px; + padding: 2px 7px; + display: inline-flex; + justify-content: center; + align-items: center; + background-color: var(--bg-near-transparent); + border-radius: 30px; +} + +.inputWrapper { + margin: 0 30px; + width: 100%; + max-width: 350px; + justify-self: flex-end; +} + +.input { + -webkit-appearance: none; + background-color: var(--color-input-bg); + background-image: none; + border-radius: 18px; + border: 1px solid var(--color-input-border); + box-sizing: border-box; + color: #c1c1c1; + display: inline-block; + font-size: inherit; + height: 36px; + outline: none; + padding: 0 15px; + transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); + width: 100%; +} diff --git a/src/components/Connections.tsx b/src/components/Connections.tsx index 1b63cf8..c9dffc5 100644 --- a/src/components/Connections.tsx +++ b/src/components/Connections.tsx @@ -10,7 +10,7 @@ import { State } from 'src/store/types'; import * as connAPI from '../api/connections'; import useRemainingViewPortHeight from '../hooks/useRemainingViewPortHeight'; import { getClashAPIConfig } from '../store/app'; -import s from './Connections.module.css'; +import s from './Connections.module.scss'; import ConnectionTable from './ConnectionTable'; import ContentHeader from './ContentHeader'; import ModalCloseAllConnections from './ModalCloseAllConnections'; diff --git a/src/components/ContentHeader.module.css b/src/components/ContentHeader.module.css deleted file mode 100644 index 0768fbb..0000000 --- a/src/components/ContentHeader.module.css +++ /dev/null @@ -1,16 +0,0 @@ -.root { - height: 76px; - display: flex; - align-items: center; -} - -.h1 { - padding: 0 15px; - font-size: 1.7em; - @media (--breakpoint-not-small) { - padding: 0 40px; - font-size: 2em; - } - text-align: left; - margin: 0; -} diff --git a/src/components/ContentHeader.module.scss b/src/components/ContentHeader.module.scss new file mode 100644 index 0000000..0768fbb --- /dev/null +++ b/src/components/ContentHeader.module.scss @@ -0,0 +1,16 @@ +.root { + height: 76px; + display: flex; + align-items: center; +} + +.h1 { + padding: 0 15px; + font-size: 1.7em; + @media (--breakpoint-not-small) { + padding: 0 40px; + font-size: 2em; + } + text-align: left; + margin: 0; +} diff --git a/src/components/ContentHeader.tsx b/src/components/ContentHeader.tsx index f786240..473cd4c 100644 --- a/src/components/ContentHeader.tsx +++ b/src/components/ContentHeader.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import s0 from './ContentHeader.module.css'; +import s0 from './ContentHeader.module.scss'; type Props = { title: string; diff --git a/src/components/ErrorBoundaryFallback.module.css b/src/components/ErrorBoundaryFallback.module.css deleted file mode 100644 index 6133568..0000000 --- a/src/components/ErrorBoundaryFallback.module.css +++ /dev/null @@ -1,37 +0,0 @@ -.root { - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; - overflow: hidden; - - padding: 20px; - background: var(--color-background); - color: var(--color-text); - text-align: center; -} - -.yacd { - color: #2a477a; - opacity: 0.6; - display: flex; - justify-content: center; - align-items: center; - padding: 40px; -} - -.link { - display: inline-flex; - align-items: center; - - color: var(--color-text-secondary); - &:hover, - &:active { - color: #387cec; - } - - svg { - margin-right: 5px; - } -} diff --git a/src/components/ErrorBoundaryFallback.module.scss b/src/components/ErrorBoundaryFallback.module.scss new file mode 100644 index 0000000..6133568 --- /dev/null +++ b/src/components/ErrorBoundaryFallback.module.scss @@ -0,0 +1,37 @@ +.root { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + overflow: hidden; + + padding: 20px; + background: var(--color-background); + color: var(--color-text); + text-align: center; +} + +.yacd { + color: #2a477a; + opacity: 0.6; + display: flex; + justify-content: center; + align-items: center; + padding: 40px; +} + +.link { + display: inline-flex; + align-items: center; + + color: var(--color-text-secondary); + &:hover, + &:active { + color: #387cec; + } + + svg { + margin-right: 5px; + } +} diff --git a/src/components/ErrorBoundaryFallback.tsx b/src/components/ErrorBoundaryFallback.tsx index bbaf2d7..7ab7d06 100644 --- a/src/components/ErrorBoundaryFallback.tsx +++ b/src/components/ErrorBoundaryFallback.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import s0 from './ErrorBoundaryFallback.module.css'; +import s0 from './ErrorBoundaryFallback.module.scss'; import SvgGithub from './SvgGithub'; import SvgYacd from './SvgYacd'; const yacdRepoIssueUrl = 'https://github.com/haishanh/yacd/issues'; diff --git a/src/components/Field.module.css b/src/components/Field.module.css deleted file mode 100644 index 9a5f1e4..0000000 --- a/src/components/Field.module.css +++ /dev/null @@ -1,43 +0,0 @@ -.root { - position: relative; - padding: 10px 0; - input { - -webkit-appearance: none; - background-color: transparent; - background-image: none; - border: none; - border-radius: 0; - border-bottom: 1px solid var(--color-input-border); - box-sizing: border-box; - color: #c1c1c1; - display: inline-block; - font-size: inherit; - height: 40px; - outline: none; - padding: 0 4px; - transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); - width: 100%; - &:focus { - border-color: var(--color-focus-blue); - } - } - - label { - position: absolute; - left: 5px; - bottom: 22px; - transition: transform 150ms ease-in-out; - transform-origin: 0 0; - font-size: 0.9em; - &.floatAbove { - transform: scale(0.75) translateY(-25px); - } - } - - input { - &:focus + label { - color: var(--color-focus-blue); - transform: scale(0.75) translateY(-25px); - } - } -} diff --git a/src/components/Field.module.scss b/src/components/Field.module.scss new file mode 100644 index 0000000..9a5f1e4 --- /dev/null +++ b/src/components/Field.module.scss @@ -0,0 +1,43 @@ +.root { + position: relative; + padding: 10px 0; + input { + -webkit-appearance: none; + background-color: transparent; + background-image: none; + border: none; + border-radius: 0; + border-bottom: 1px solid var(--color-input-border); + box-sizing: border-box; + color: #c1c1c1; + display: inline-block; + font-size: inherit; + height: 40px; + outline: none; + padding: 0 4px; + transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); + width: 100%; + &:focus { + border-color: var(--color-focus-blue); + } + } + + label { + position: absolute; + left: 5px; + bottom: 22px; + transition: transform 150ms ease-in-out; + transform-origin: 0 0; + font-size: 0.9em; + &.floatAbove { + transform: scale(0.75) translateY(-25px); + } + } + + input { + &:focus + label { + color: var(--color-focus-blue); + transform: scale(0.75) translateY(-25px); + } + } +} diff --git a/src/components/Field.tsx b/src/components/Field.tsx index c0b3ae5..4134d3e 100644 --- a/src/components/Field.tsx +++ b/src/components/Field.tsx @@ -1,7 +1,7 @@ import cx from 'clsx'; import React from 'react'; -import s from './Field.module.css'; +import s from './Field.module.scss'; const { useCallback } = React; diff --git a/src/components/Home.module.css b/src/components/Home.module.css deleted file mode 100644 index f15c80f..0000000 --- a/src/components/Home.module.css +++ /dev/null @@ -1,6 +0,0 @@ -.root { - padding: 6px 15px; - @media (--breakpoint-not-small) { - padding: 10px 40px; - } -} diff --git a/src/components/Home.module.scss b/src/components/Home.module.scss new file mode 100644 index 0000000..f15c80f --- /dev/null +++ b/src/components/Home.module.scss @@ -0,0 +1,6 @@ +.root { + padding: 6px 15px; + @media (--breakpoint-not-small) { + padding: 10px 40px; + } +} diff --git a/src/components/Home.tsx b/src/components/Home.tsx index a6df373..d7ddbab 100644 --- a/src/components/Home.tsx +++ b/src/components/Home.tsx @@ -2,7 +2,7 @@ import React, { Suspense } from 'react'; import { useTranslation } from 'react-i18next'; import ContentHeader from './ContentHeader'; -import s0 from './Home.module.css'; +import s0 from './Home.module.scss'; import Loading from './Loading'; import TrafficChart from './TrafficChart'; import TrafficNow from './TrafficNow'; diff --git a/src/components/Input.module.css b/src/components/Input.module.css deleted file mode 100644 index 4ca42fa..0000000 --- a/src/components/Input.module.css +++ /dev/null @@ -1,25 +0,0 @@ -.input { - -webkit-appearance: none; - background-color: var(--color-input-bg); - background-image: none; - border-radius: 4px; - border: 1px solid var(--color-input-border); - box-sizing: border-box; - color: inherit; - display: inline-block; - font-size: inherit; - height: 40px; - outline: none; - padding: 0 15px; - width: 100%; -} - -.input:focus { - box-shadow: rgba(66, 153, 225, 0.6) 0px 0px 0px 3px; -} - -input::-webkit-outer-spin-button, -input::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; -} diff --git a/src/components/Input.module.scss b/src/components/Input.module.scss new file mode 100644 index 0000000..4ca42fa --- /dev/null +++ b/src/components/Input.module.scss @@ -0,0 +1,25 @@ +.input { + -webkit-appearance: none; + background-color: var(--color-input-bg); + background-image: none; + border-radius: 4px; + border: 1px solid var(--color-input-border); + box-sizing: border-box; + color: inherit; + display: inline-block; + font-size: inherit; + height: 40px; + outline: none; + padding: 0 15px; + width: 100%; +} + +.input:focus { + box-shadow: rgba(66, 153, 225, 0.6) 0px 0px 0px 3px; +} + +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} diff --git a/src/components/Input.tsx b/src/components/Input.tsx index 6cfc50e..c132a3b 100644 --- a/src/components/Input.tsx +++ b/src/components/Input.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import s0 from './Input.module.css'; +import s0 from './Input.module.scss'; const { useState, useRef, useEffect, useCallback } = React; diff --git a/src/components/Loading.module.css b/src/components/Loading.module.css deleted file mode 100644 index a59b7dd..0000000 --- a/src/components/Loading.module.css +++ /dev/null @@ -1,28 +0,0 @@ -.loading { - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; -} - -.spinner { - width: 20px; - height: 20px; - display: inline-block; - vertical-align: middle; - animation: rotate 1s steps(12, end) infinite; - background: transparent - url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E9E9E9' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23989697' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%239B999A' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23A3A1A2' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ABA9AA' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23B2B2B2' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23BAB8B9' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23C2C0C1' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23CBCBCB' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23D2D2D2' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23DADADA' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E2E2E2' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E") - no-repeat; - background-size: 100%; -} - -@keyframes rotate { - 0% { - transform: rotate3d(0, 0, 1, 0deg); - } - 100% { - transform: rotate3d(0, 0, 1, 360deg); - } -} diff --git a/src/components/Loading.module.scss b/src/components/Loading.module.scss new file mode 100644 index 0000000..a59b7dd --- /dev/null +++ b/src/components/Loading.module.scss @@ -0,0 +1,28 @@ +.loading { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.spinner { + width: 20px; + height: 20px; + display: inline-block; + vertical-align: middle; + animation: rotate 1s steps(12, end) infinite; + background: transparent + url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E9E9E9' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23989697' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%239B999A' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23A3A1A2' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ABA9AA' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23B2B2B2' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23BAB8B9' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23C2C0C1' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23CBCBCB' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23D2D2D2' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23DADADA' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E2E2E2' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E") + no-repeat; + background-size: 100%; +} + +@keyframes rotate { + 0% { + transform: rotate3d(0, 0, 1, 0deg); + } + 100% { + transform: rotate3d(0, 0, 1, 360deg); + } +} diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx index 208c4af..12ced75 100644 --- a/src/components/Loading.tsx +++ b/src/components/Loading.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import s from './Loading.module.css'; +import s from './Loading.module.scss'; type Props = { height?: string; diff --git a/src/components/Loading2.module.css b/src/components/Loading2.module.css deleted file mode 100644 index 067281e..0000000 --- a/src/components/Loading2.module.css +++ /dev/null @@ -1,8 +0,0 @@ -.lo { - opacity: 0.5; - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; -} diff --git a/src/components/Loading2.module.scss b/src/components/Loading2.module.scss new file mode 100644 index 0000000..067281e --- /dev/null +++ b/src/components/Loading2.module.scss @@ -0,0 +1,8 @@ +.lo { + opacity: 0.5; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} diff --git a/src/components/Loading2.tsx b/src/components/Loading2.tsx index edb2656..b847eb4 100644 --- a/src/components/Loading2.tsx +++ b/src/components/Loading2.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import s0 from './Loading2.module.css'; +import s0 from './Loading2.module.scss'; import SvgYacd from './SvgYacd'; function Loading() { diff --git a/src/components/Logs.module.css b/src/components/Logs.module.css deleted file mode 100644 index 508e9c6..0000000 --- a/src/components/Logs.module.css +++ /dev/null @@ -1,75 +0,0 @@ -.logMeta { - display: flex; - align-items: center; - flex-wrap: wrap; - font-size: 0.9em; -} - -.logType { - color: #eee; - flex-shrink: 0; - text-align: center; - width: 66px; - border-radius: 100px; - padding: 3px 5px; - margin: 0 8px; -} - -.logTime { - flex-shrink: 0; - color: #999; - font-size: 14px; -} - -.logText { - flex-shrink: 0; - display: flex; - font-family: 'Roboto Mono', Menlo, monospace; - align-items: center; - padding: 8px 0; - /* force wrap */ - width: 100%; - white-space: pre; - overflow: auto; -} - -/*******************/ - -.logsWrapper { - margin: 0; - padding: 0; - color: var(--color-text); - - :global { - li { - background: var(--color-background); - } - li.even { - background: var(--color-background); - } - } -} - -.log { - padding: 10px 40px; -} - -/*******************/ - -.logPlaceholder { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - color: #2d2d30; - - div:nth-child(2) { - color: var(--color-text-secondary); - font-size: 1.4em; - opacity: 0.6; - } -} - -.logPlaceholderIcon { - opacity: 0.3; -} diff --git a/src/components/Logs.module.scss b/src/components/Logs.module.scss new file mode 100644 index 0000000..508e9c6 --- /dev/null +++ b/src/components/Logs.module.scss @@ -0,0 +1,75 @@ +.logMeta { + display: flex; + align-items: center; + flex-wrap: wrap; + font-size: 0.9em; +} + +.logType { + color: #eee; + flex-shrink: 0; + text-align: center; + width: 66px; + border-radius: 100px; + padding: 3px 5px; + margin: 0 8px; +} + +.logTime { + flex-shrink: 0; + color: #999; + font-size: 14px; +} + +.logText { + flex-shrink: 0; + display: flex; + font-family: 'Roboto Mono', Menlo, monospace; + align-items: center; + padding: 8px 0; + /* force wrap */ + width: 100%; + white-space: pre; + overflow: auto; +} + +/*******************/ + +.logsWrapper { + margin: 0; + padding: 0; + color: var(--color-text); + + :global { + li { + background: var(--color-background); + } + li.even { + background: var(--color-background); + } + } +} + +.log { + padding: 10px 40px; +} + +/*******************/ + +.logPlaceholder { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: #2d2d30; + + div:nth-child(2) { + color: var(--color-text-secondary); + font-size: 1.4em; + opacity: 0.6; + } +} + +.logPlaceholderIcon { + opacity: 0.3; +} diff --git a/src/components/Logs.tsx b/src/components/Logs.tsx index 2b002d3..019edd5 100644 --- a/src/components/Logs.tsx +++ b/src/components/Logs.tsx @@ -17,7 +17,7 @@ import { getLogLevel } from 'src/store/configs'; import { appendLog, getLogsForDisplay } from 'src/store/logs'; import { Log, State } from 'src/store/types'; -import s from './Logs.module.css'; +import s from './Logs.module.scss'; const { useCallback, memo, useEffect } = React; diff --git a/src/components/Modal.module.css b/src/components/Modal.module.css deleted file mode 100644 index 6192a1f..0000000 --- a/src/components/Modal.module.css +++ /dev/null @@ -1,21 +0,0 @@ -.overlay { - position: fixed; - top: 0; - right: 0; - left: 0; - bottom: 0; - background: #444; - z-index: 1024; -} - -.content { - outline: none; - position: relative; - color: #ddd; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background: #444; - padding: 20px; - border-radius: 10px; -} diff --git a/src/components/Modal.module.scss b/src/components/Modal.module.scss new file mode 100644 index 0000000..6192a1f --- /dev/null +++ b/src/components/Modal.module.scss @@ -0,0 +1,21 @@ +.overlay { + position: fixed; + top: 0; + right: 0; + left: 0; + bottom: 0; + background: #444; + z-index: 1024; +} + +.content { + outline: none; + position: relative; + color: #ddd; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: #444; + padding: 20px; + border-radius: 10px; +} diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index cb5fea3..fda3263 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -2,7 +2,7 @@ import cx from 'clsx'; import React from 'react'; import Modal from 'react-modal'; -import s0 from './Modal.module.css'; +import s0 from './Modal.module.scss'; type Props = { isOpen: boolean; diff --git a/src/components/ModalCloseAllConnections.module.css b/src/components/ModalCloseAllConnections.module.css deleted file mode 100644 index 9bb7c6a..0000000 --- a/src/components/ModalCloseAllConnections.module.css +++ /dev/null @@ -1,23 +0,0 @@ -.overlay { - background-color: rgba(0, 0, 0, 0.6); -} -.cnt { - background-color: var(--bg-modal); - color: var(--color-text); - max-width: 300px; - line-height: 1.4; - transform: translate(-50%, -50%) scale(1.2); - opacity: 0.6; - transition: all 0.3s ease; -} -.afterOpen { - opacity: 1; - transform: translate(-50%, -50%) scale(1); -} - -.btngrp { - display: flex; - align-items: center; - justify-content: center; - margin-top: 30px; -} diff --git a/src/components/ModalCloseAllConnections.module.scss b/src/components/ModalCloseAllConnections.module.scss new file mode 100644 index 0000000..9bb7c6a --- /dev/null +++ b/src/components/ModalCloseAllConnections.module.scss @@ -0,0 +1,23 @@ +.overlay { + background-color: rgba(0, 0, 0, 0.6); +} +.cnt { + background-color: var(--bg-modal); + color: var(--color-text); + max-width: 300px; + line-height: 1.4; + transform: translate(-50%, -50%) scale(1.2); + opacity: 0.6; + transition: all 0.3s ease; +} +.afterOpen { + opacity: 1; + transform: translate(-50%, -50%) scale(1); +} + +.btngrp { + display: flex; + align-items: center; + justify-content: center; + margin-top: 30px; +} diff --git a/src/components/ModalCloseAllConnections.tsx b/src/components/ModalCloseAllConnections.tsx index ce567b8..a2c4303 100644 --- a/src/components/ModalCloseAllConnections.tsx +++ b/src/components/ModalCloseAllConnections.tsx @@ -3,8 +3,8 @@ import React from 'react'; import Modal from 'react-modal'; import Button from './Button'; -import modalStyle from './Modal.module.css'; -import s from './ModalCloseAllConnections.module.css'; +import modalStyle from './Modal.module.scss'; +import s from './ModalCloseAllConnections.module.scss'; const { useRef, useCallback, useMemo } = React; diff --git a/src/components/Root.css b/src/components/Root.css deleted file mode 100644 index 83d4171..0000000 --- a/src/components/Root.css +++ /dev/null @@ -1,172 +0,0 @@ -.relative { - position: relative; -} - -.border-left, -.border-top, -.border-bottom { - position: relative; -} - -%border { - position: absolute; - content: ''; - height: 1px; - width: 100%; - transform: scaleY(0.5) translateZ(0); - left: 0; - right: 0; - background: #555; -} - -%border1 { - position: absolute; - content: ''; - height: 100%; - width: 1px; - transform: scaleX(0.5) translateZ(0); - top: 0; - bottom: 0; - background: #555; -} - -.border-top::before { - @extend %border; - top: 0; -} - -.border-bottom::after { - @extend %border; - bottom: 0; -} - -.border-left::before { - @extend %border1; - left: 0; -} - -*, -*:before, -*:after { - box-sizing: border-box; -} - -:root { - --font-mono: 'Roboto Mono', Menlo, monospace; - --font-normal: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, - Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, - 'PingFang SC', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; - --color-focus-blue: #1a73e8; - --btn-bg: #387cec; -} - -body { - font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, - Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, - Segoe UI Symbol, 'PingFang SC', 'Microsoft YaHei', '微软雅黑', Arial, - sans-serif; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-text-size-adjust: 100%; - -webkit-font-smoothing: antialiased; - margin: 0; - padding: 0; -} - -body, -body.dark { - --color-background: #202020; - --color-background2: rgba(32, 32, 32, 0.3); - --color-bg-card: #2d2d2d; - --color-text: #ddd; - --color-text-secondary: #ccc; - --color-text-highlight: #fff; - --color-bg-sidebar: #2d2d30; - --color-sb-active-row-bg: #494b4e; - --color-input-bg: #2d2d30; - --color-input-border: #3f3f3f; - --color-toggle-bg: #353535; - --color-toggle-selected: #181818; - --color-icon: #c7c7c7; - --color-separator: #333; - --color-btn-bg: #232323; - --color-btn-fg: #bebebe; - --color-bg-proxy: #303030; - --color-row-odd: #282828; - --bg-log-info-tag: #454545; - --bg-modal: #1f1f20; - --bg-near-transparent: rgba(255, 255, 255, 0.1); - --bg-tooltip: #111; - --bc-tooltip: #555; - --select-border-color: #040404; - --select-bg-hover: url(data:image/svg+xml,%0A%20%20%20%20%3Csvg%20width%3D%228%22%20height%3D%2224%22%20viewBox%3D%220%200%208%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%207L7%2011H1L4%207Z%22%20fill%3D%22%23ffffff%22%20%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%2017L1%2013L7%2013L4%2017Z%22%20fill%3D%22%23ffffff%22%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20); -} - -body.light { - --color-background: #eee; - --color-background2: rgba(240, 240, 240, 0.3); - --color-bg-card: #fafafa; - --color-text: #222; - --color-text-secondary: #646464; - --color-text-highlight: #040404; - --color-bg-sidebar: #f8f8f8; - --color-sb-active-row-bg: #d8d8d8; - --color-input-bg: #f0f0f0; - --color-input-border: #c0c0c0; - --color-toggle-bg: #ffffff; - --color-toggle-selected: #d7d7d7; - --color-icon: #5b5b5b; - --color-separator: #ccc; - --color-btn-bg: #f4f4f4; - --color-btn-fg: #101010; - --color-bg-proxy: #fafafa; - --color-row-odd: #f5f5f5; - --bg-log-info-tag: #888; - --bg-modal: #fbfbfb; - --bg-near-transparent: rgba(0, 0, 0, 0.1); - --bg-tooltip: #f0f0f0; - --bc-tooltip: #ccc; - --select-border-color: #999999; - --select-bg-hover: url(data:image/svg+xml,%0A%20%20%20%20%3Csvg%20width%3D%228%22%20height%3D%2224%22%20viewBox%3D%220%200%208%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%207L7%2011H1L4%207Z%22%20fill%3D%22%23222222%22%20%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%2017L1%2013L7%2013L4%2017Z%22%20fill%3D%22%23222222%22%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20); -} - -.flexCenter { - display: flex; - align-items: center; - justify-content: center; -} - -.fabgrp { - position: fixed; - z-index: 3; - right: 20px; - bottom: 20px; -} - -.visually-hidden { - position: absolute; - overflow: hidden; - clip: rect(0 0 0 0); - width: 1px; - height: 1px; - margin: -1px; - border: 0; - padding: 0; -} - -/**** @reach/tooltip/styles.css ****/ -:root { - --reach-tooltip: 1; -} -[data-reach-tooltip] { - z-index: 1; - pointer-events: none; - position: absolute; - padding: 0.25em 0.5em; - box-shadow: 2px 2px 10px hsla(0, 0%, 0%, 0.1); - white-space: nowrap; - font-size: 85%; - background: var(--bg-tooltip); - color: var(--color-text); - border: solid 1px var(--bc-tooltip); - border-radius: 4px; -} diff --git a/src/components/Root.module.css b/src/components/Root.module.css deleted file mode 100644 index 6538b75..0000000 --- a/src/components/Root.module.css +++ /dev/null @@ -1,37 +0,0 @@ -.app { - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; - - display: flex; - - background: var(--color-background); - color: var(--color-text); - - @media (max-width: 768px) { - flex-direction: column; - } -} - -.content { - flex-grow: 1; - overflow: auto; - - /* - - $w: 7px; - &::-webkit-scrollbar { - width: $w; - } - &::-webkit-scrollbar-thumb { - border-radius: 20px; - background-color: rgba(221, 221, 221, 0.7); - } - &::-webkit-scrollbar-corner { - background: transparent; - } - - */ -} diff --git a/src/components/Root.module.scss b/src/components/Root.module.scss new file mode 100644 index 0000000..6538b75 --- /dev/null +++ b/src/components/Root.module.scss @@ -0,0 +1,37 @@ +.app { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + + display: flex; + + background: var(--color-background); + color: var(--color-text); + + @media (max-width: 768px) { + flex-direction: column; + } +} + +.content { + flex-grow: 1; + overflow: auto; + + /* + + $w: 7px; + &::-webkit-scrollbar { + width: $w; + } + &::-webkit-scrollbar-thumb { + border-radius: 20px; + background-color: rgba(221, 221, 221, 0.7); + } + &::-webkit-scrollbar-corner { + background: transparent; + } + + */ +} diff --git a/src/components/Root.scss b/src/components/Root.scss new file mode 100644 index 0000000..83d4171 --- /dev/null +++ b/src/components/Root.scss @@ -0,0 +1,172 @@ +.relative { + position: relative; +} + +.border-left, +.border-top, +.border-bottom { + position: relative; +} + +%border { + position: absolute; + content: ''; + height: 1px; + width: 100%; + transform: scaleY(0.5) translateZ(0); + left: 0; + right: 0; + background: #555; +} + +%border1 { + position: absolute; + content: ''; + height: 100%; + width: 1px; + transform: scaleX(0.5) translateZ(0); + top: 0; + bottom: 0; + background: #555; +} + +.border-top::before { + @extend %border; + top: 0; +} + +.border-bottom::after { + @extend %border; + bottom: 0; +} + +.border-left::before { + @extend %border1; + left: 0; +} + +*, +*:before, +*:after { + box-sizing: border-box; +} + +:root { + --font-mono: 'Roboto Mono', Menlo, monospace; + --font-normal: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, + Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, + 'PingFang SC', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; + --color-focus-blue: #1a73e8; + --btn-bg: #387cec; +} + +body { + font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, + Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, + Segoe UI Symbol, 'PingFang SC', 'Microsoft YaHei', '微软雅黑', Arial, + sans-serif; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-text-size-adjust: 100%; + -webkit-font-smoothing: antialiased; + margin: 0; + padding: 0; +} + +body, +body.dark { + --color-background: #202020; + --color-background2: rgba(32, 32, 32, 0.3); + --color-bg-card: #2d2d2d; + --color-text: #ddd; + --color-text-secondary: #ccc; + --color-text-highlight: #fff; + --color-bg-sidebar: #2d2d30; + --color-sb-active-row-bg: #494b4e; + --color-input-bg: #2d2d30; + --color-input-border: #3f3f3f; + --color-toggle-bg: #353535; + --color-toggle-selected: #181818; + --color-icon: #c7c7c7; + --color-separator: #333; + --color-btn-bg: #232323; + --color-btn-fg: #bebebe; + --color-bg-proxy: #303030; + --color-row-odd: #282828; + --bg-log-info-tag: #454545; + --bg-modal: #1f1f20; + --bg-near-transparent: rgba(255, 255, 255, 0.1); + --bg-tooltip: #111; + --bc-tooltip: #555; + --select-border-color: #040404; + --select-bg-hover: url(data:image/svg+xml,%0A%20%20%20%20%3Csvg%20width%3D%228%22%20height%3D%2224%22%20viewBox%3D%220%200%208%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%207L7%2011H1L4%207Z%22%20fill%3D%22%23ffffff%22%20%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%2017L1%2013L7%2013L4%2017Z%22%20fill%3D%22%23ffffff%22%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20); +} + +body.light { + --color-background: #eee; + --color-background2: rgba(240, 240, 240, 0.3); + --color-bg-card: #fafafa; + --color-text: #222; + --color-text-secondary: #646464; + --color-text-highlight: #040404; + --color-bg-sidebar: #f8f8f8; + --color-sb-active-row-bg: #d8d8d8; + --color-input-bg: #f0f0f0; + --color-input-border: #c0c0c0; + --color-toggle-bg: #ffffff; + --color-toggle-selected: #d7d7d7; + --color-icon: #5b5b5b; + --color-separator: #ccc; + --color-btn-bg: #f4f4f4; + --color-btn-fg: #101010; + --color-bg-proxy: #fafafa; + --color-row-odd: #f5f5f5; + --bg-log-info-tag: #888; + --bg-modal: #fbfbfb; + --bg-near-transparent: rgba(0, 0, 0, 0.1); + --bg-tooltip: #f0f0f0; + --bc-tooltip: #ccc; + --select-border-color: #999999; + --select-bg-hover: url(data:image/svg+xml,%0A%20%20%20%20%3Csvg%20width%3D%228%22%20height%3D%2224%22%20viewBox%3D%220%200%208%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%207L7%2011H1L4%207Z%22%20fill%3D%22%23222222%22%20%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%2017L1%2013L7%2013L4%2017Z%22%20fill%3D%22%23222222%22%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20); +} + +.flexCenter { + display: flex; + align-items: center; + justify-content: center; +} + +.fabgrp { + position: fixed; + z-index: 3; + right: 20px; + bottom: 20px; +} + +.visually-hidden { + position: absolute; + overflow: hidden; + clip: rect(0 0 0 0); + width: 1px; + height: 1px; + margin: -1px; + border: 0; + padding: 0; +} + +/**** @reach/tooltip/styles.css ****/ +:root { + --reach-tooltip: 1; +} +[data-reach-tooltip] { + z-index: 1; + pointer-events: none; + position: absolute; + padding: 0.25em 0.5em; + box-shadow: 2px 2px 10px hsla(0, 0%, 0%, 0.1); + white-space: nowrap; + font-size: 85%; + background: var(--bg-tooltip); + color: var(--color-text); + border: solid 1px var(--bc-tooltip); + border-radius: 4px; +} diff --git a/src/components/Root.tsx b/src/components/Root.tsx index 7046156..f94d2a2 100644 --- a/src/components/Root.tsx +++ b/src/components/Root.tsx @@ -1,4 +1,4 @@ -import './Root.css'; +import './Root.scss'; import '@fontsource/roboto-mono/latin-400.css'; import '@fontsource/open-sans/latin-400.css'; import '@fontsource/open-sans/latin-700.css'; @@ -19,7 +19,7 @@ import APIDiscovery from './APIDiscovery'; import ErrorBoundary from './ErrorBoundary'; import Home from './Home'; import Loading2 from './Loading2'; -import s0 from './Root.module.css'; +import s0 from './Root.module.scss'; import SideBar from './SideBar'; import StateProvider from './StateProvider'; import StyleGuide from './StyleGuide'; diff --git a/src/components/Rule.module.css b/src/components/Rule.module.css deleted file mode 100644 index 14da5d9..0000000 --- a/src/components/Rule.module.css +++ /dev/null @@ -1,35 +0,0 @@ -.rule { - display: flex; - align-items: center; - padding: 6px 15px; - @media (--breakpoint-not-small) { - padding: 10px 40px; - } -} - -.left { - width: 40px; - padding-right: 15px; - color: var(--color-text-secondary); - opacity: 0.4; -} - -.a { - display: flex; - align-items: center; - font-size: 12px; - opacity: 0.8; -} - -.b { - padding: 10px 0; - font-family: 'Roboto Mono', Menlo, monospace; - font-size: 16px; - @media (--breakpoint-not-small) { - font-size: 19px; - } -} - -.type { - width: 110px; -} diff --git a/src/components/Rule.module.scss b/src/components/Rule.module.scss new file mode 100644 index 0000000..14da5d9 --- /dev/null +++ b/src/components/Rule.module.scss @@ -0,0 +1,35 @@ +.rule { + display: flex; + align-items: center; + padding: 6px 15px; + @media (--breakpoint-not-small) { + padding: 10px 40px; + } +} + +.left { + width: 40px; + padding-right: 15px; + color: var(--color-text-secondary); + opacity: 0.4; +} + +.a { + display: flex; + align-items: center; + font-size: 12px; + opacity: 0.8; +} + +.b { + padding: 10px 0; + font-family: 'Roboto Mono', Menlo, monospace; + font-size: 16px; + @media (--breakpoint-not-small) { + font-size: 19px; + } +} + +.type { + width: 110px; +} diff --git a/src/components/Rule.tsx b/src/components/Rule.tsx index 0960660..b8ff70f 100644 --- a/src/components/Rule.tsx +++ b/src/components/Rule.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import s0 from './Rule.module.css'; +import s0 from './Rule.module.scss'; const colorMap = { _default: '#59caf9', diff --git a/src/components/Rules.module.css b/src/components/Rules.module.css deleted file mode 100644 index 6459e17..0000000 --- a/src/components/Rules.module.css +++ /dev/null @@ -1,21 +0,0 @@ -.header { - display: grid; - grid-template-columns: 1fr minmax(auto, 330px); - align-items: center; - - /* - * the content header has some padding - * we need to apply some right padding to this container then - */ - padding-right: 15px; - @media (--breakpoint-not-small) { - padding-right: 40px; - } -} - -.RuleProviderItemWrapper { - padding: 6px 15px; - @media (--breakpoint-not-small) { - padding: 10px 40px; - } -} diff --git a/src/components/Rules.module.scss b/src/components/Rules.module.scss new file mode 100644 index 0000000..6459e17 --- /dev/null +++ b/src/components/Rules.module.scss @@ -0,0 +1,21 @@ +.header { + display: grid; + grid-template-columns: 1fr minmax(auto, 330px); + align-items: center; + + /* + * the content header has some padding + * we need to apply some right padding to this container then + */ + padding-right: 15px; + @media (--breakpoint-not-small) { + padding-right: 40px; + } +} + +.RuleProviderItemWrapper { + padding: 6px 15px; + @media (--breakpoint-not-small) { + padding: 10px 40px; + } +} diff --git a/src/components/Rules.tsx b/src/components/Rules.tsx index 83f72b8..9019fab 100644 --- a/src/components/Rules.tsx +++ b/src/components/Rules.tsx @@ -4,7 +4,8 @@ import { areEqual, VariableSizeList } from 'react-window'; import { RuleProviderItem } from 'src/components/rules/RuleProviderItem'; import { useRuleAndProvider } from 'src/components/rules/rules.hooks'; import { RulesPageFab } from 'src/components/rules/RulesPageFab'; -import { TextFilter } from 'src/components/rules/TextFilter'; +import { TextFilter } from 'src/components/shared/TextFitler'; +import { ruleFilterText } from 'src/store/rules'; import { State } from 'src/store/types'; import { ClashAPIConfig } from 'src/types'; @@ -12,7 +13,7 @@ import useRemainingViewPortHeight from '../hooks/useRemainingViewPortHeight'; import { getClashAPIConfig } from '../store/app'; import ContentHeader from './ContentHeader'; import Rule from './Rule'; -import s from './Rules.module.css'; +import s from './Rules.module.scss'; import { connect } from './StateProvider'; const { memo } = React; @@ -85,7 +86,7 @@ function Rules({ apiConfig }: RulesProps) {
- +
{/* @ts-expect-error ts-migrate(2322) FIXME: Type 'number | MutableRefObject' is not assig... Remove this comment to see the full error message */}
diff --git a/src/components/Search.module.css b/src/components/Search.module.css deleted file mode 100644 index 657c741..0000000 --- a/src/components/Search.module.css +++ /dev/null @@ -1,40 +0,0 @@ -.RuleSearch { - padding: 0 40px 5px; -} - -.RuleSearchContainer { - position: relative; - height: 40px; -} - -.inputWrapper { - position: absolute; - top: 50%; - transform: translateY(-50%); - left: 0; - width: 100%; -} - -.input { - -webkit-appearance: none; - background-color: var(--color-input-bg); - background-image: none; - border-radius: 20px; - border: 1px solid var(--color-input-border); - box-sizing: border-box; - color: #c1c1c1; - display: inline-block; - font-size: inherit; - height: 40px; - outline: none; - padding: 0 15px 0 35px; - transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); - width: 100%; -} - -.iconWrapper { - position: absolute; - top: 50%; - transform: translateY(-50%); - left: 10px; -} diff --git a/src/components/Search.module.scss b/src/components/Search.module.scss new file mode 100644 index 0000000..657c741 --- /dev/null +++ b/src/components/Search.module.scss @@ -0,0 +1,40 @@ +.RuleSearch { + padding: 0 40px 5px; +} + +.RuleSearchContainer { + position: relative; + height: 40px; +} + +.inputWrapper { + position: absolute; + top: 50%; + transform: translateY(-50%); + left: 0; + width: 100%; +} + +.input { + -webkit-appearance: none; + background-color: var(--color-input-bg); + background-image: none; + border-radius: 20px; + border: 1px solid var(--color-input-border); + box-sizing: border-box; + color: #c1c1c1; + display: inline-block; + font-size: inherit; + height: 40px; + outline: none; + padding: 0 15px 0 35px; + transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); + width: 100%; +} + +.iconWrapper { + position: absolute; + top: 50%; + transform: translateY(-50%); + left: 10px; +} diff --git a/src/components/Search.tsx b/src/components/Search.tsx index 2d8c754..6edc4a5 100644 --- a/src/components/Search.tsx +++ b/src/components/Search.tsx @@ -2,7 +2,7 @@ import debounce from 'lodash-es/debounce'; import React, { useCallback, useMemo, useState } from 'react'; import { Search as SearchIcon } from 'react-feather'; -import s0 from './Search.module.css'; +import s0 from './Search.module.scss'; function RuleSearch({ dispatch, searchText, updateSearchText }) { const [text, setText] = useState(searchText); diff --git a/src/components/Selection.module.css b/src/components/Selection.module.css deleted file mode 100644 index ba47089..0000000 --- a/src/components/Selection.module.css +++ /dev/null @@ -1,23 +0,0 @@ -.fieldset { - margin: 0; - padding: 0; - border: 0; - display: flex; - flex-wrap: wrap; -} - -.input + .cnt { - border: 1px solid transparent; - border-radius: 8px; - cursor: pointer; - margin-right: 5px; - margin-bottom: 5px; -} - -.input:focus + .cnt { - border-color: #387cec; -} - -.input:checked + .cnt { - border-color: #387cec; -} diff --git a/src/components/Selection.module.scss b/src/components/Selection.module.scss new file mode 100644 index 0000000..ba47089 --- /dev/null +++ b/src/components/Selection.module.scss @@ -0,0 +1,23 @@ +.fieldset { + margin: 0; + padding: 0; + border: 0; + display: flex; + flex-wrap: wrap; +} + +.input + .cnt { + border: 1px solid transparent; + border-radius: 8px; + cursor: pointer; + margin-right: 5px; + margin-bottom: 5px; +} + +.input:focus + .cnt { + border-color: #387cec; +} + +.input:checked + .cnt { + border-color: #387cec; +} diff --git a/src/components/Selection.tsx b/src/components/Selection.tsx index f0b6080..1b1f50e 100644 --- a/src/components/Selection.tsx +++ b/src/components/Selection.tsx @@ -1,7 +1,7 @@ import cx from 'clsx'; import React from 'react'; -import s from './Selection.module.css'; +import s from './Selection.module.scss'; type SelectionProps = { OptionComponent?: (...args: any[]) => any; diff --git a/src/components/SideBar.module.css b/src/components/SideBar.module.css deleted file mode 100644 index 744d29d..0000000 --- a/src/components/SideBar.module.css +++ /dev/null @@ -1,112 +0,0 @@ -.root { - background: var(--color-bg-sidebar); - min-width: 150px; - position: relative; -} - -.logoPlaceholder { - height: 15px; - @media (max-width: 768px) { - display: none; - } -} - -.rows { - @media (max-width: 768px) { - display: flex; - justify-content: space-between; - overflow: scroll; - } -} - -/* a router link */ -.row { - color: var(--color-text); - text-decoration: none; - - display: flex; - align-items: center; - padding: 6px 16px; - @media (--breakpoint-not-small) { - padding: 8px 20px; - } - - @media (max-width: 768px) { - flex-direction: column; - } - - svg { - color: var(--color-icon); - width: 22px; - height: 22px; - - @media (--breakpoint-not-small) { - width: 24px; - height: 24px; - } - } -} - -.rowActive { - background: var(--color-sb-active-row-bg); - - @media (max-width: 768px) { - background: none; - border-bottom: 2px solid #387cec; - } -} - -.label { - padding-left: 14px; - font-size: 0.75em; - @media (max-width: 768px) { - padding-left: 0; - padding-top: 5px; - } - - @media (--breakpoint-not-small) { - font-size: 1em; - } -} - -.footer { - position: absolute; - bottom: 10px; - left: 50%; - transform: translateX(-50%); -} - -@media (max-width: 768px) { - .footer { - display: none; - } -} - -.iconWrapper { - --sz: 40px; - - width: var(--sz); - height: var(--sz); - display: flex; - justify-content: center; - align-items: center; - - outline: none; - padding: 5px; - color: var(--color-text); - border-radius: 100%; - border: 1px solid transparent; -} -.iconWrapper:hover { - opacity: 0.6; -} -.iconWrapper:focus { - border-color: var(--color-focus-blue); -} - -.themeSwitchContainer { - appearance: none; - user-select: none; - background: none; - cursor: pointer; -} diff --git a/src/components/SideBar.module.scss b/src/components/SideBar.module.scss new file mode 100644 index 0000000..744d29d --- /dev/null +++ b/src/components/SideBar.module.scss @@ -0,0 +1,112 @@ +.root { + background: var(--color-bg-sidebar); + min-width: 150px; + position: relative; +} + +.logoPlaceholder { + height: 15px; + @media (max-width: 768px) { + display: none; + } +} + +.rows { + @media (max-width: 768px) { + display: flex; + justify-content: space-between; + overflow: scroll; + } +} + +/* a router link */ +.row { + color: var(--color-text); + text-decoration: none; + + display: flex; + align-items: center; + padding: 6px 16px; + @media (--breakpoint-not-small) { + padding: 8px 20px; + } + + @media (max-width: 768px) { + flex-direction: column; + } + + svg { + color: var(--color-icon); + width: 22px; + height: 22px; + + @media (--breakpoint-not-small) { + width: 24px; + height: 24px; + } + } +} + +.rowActive { + background: var(--color-sb-active-row-bg); + + @media (max-width: 768px) { + background: none; + border-bottom: 2px solid #387cec; + } +} + +.label { + padding-left: 14px; + font-size: 0.75em; + @media (max-width: 768px) { + padding-left: 0; + padding-top: 5px; + } + + @media (--breakpoint-not-small) { + font-size: 1em; + } +} + +.footer { + position: absolute; + bottom: 10px; + left: 50%; + transform: translateX(-50%); +} + +@media (max-width: 768px) { + .footer { + display: none; + } +} + +.iconWrapper { + --sz: 40px; + + width: var(--sz); + height: var(--sz); + display: flex; + justify-content: center; + align-items: center; + + outline: none; + padding: 5px; + color: var(--color-text); + border-radius: 100%; + border: 1px solid transparent; +} +.iconWrapper:hover { + opacity: 0.6; +} +.iconWrapper:focus { + border-color: var(--color-focus-blue); +} + +.themeSwitchContainer { + appearance: none; + user-select: none; + background: none; + cursor: pointer; +} diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx index 973f003..8a6429a 100644 --- a/src/components/SideBar.tsx +++ b/src/components/SideBar.tsx @@ -15,7 +15,7 @@ import { Link, useLocation } from 'react-router-dom'; import { framerMotionResouce } from '../misc/motion'; import { getTheme, switchTheme } from '../store/app'; -import s from './SideBar.module.css'; +import s from './SideBar.module.scss'; import { connect } from './StateProvider'; const { useCallback } = React; diff --git a/src/components/SvgYacd.module.css b/src/components/SvgYacd.module.css deleted file mode 100644 index f668137..0000000 --- a/src/components/SvgYacd.module.css +++ /dev/null @@ -1,14 +0,0 @@ -.path { - stroke-dasharray: 890; - stroke-dashoffset: 890; - animation: dash 3s ease-in-out forwards normal infinite; -} - -@keyframes dash { - from { - stroke-dashoffset: 890; - } - to { - stroke-dashoffset: 0; - } -} diff --git a/src/components/SvgYacd.module.scss b/src/components/SvgYacd.module.scss new file mode 100644 index 0000000..f668137 --- /dev/null +++ b/src/components/SvgYacd.module.scss @@ -0,0 +1,14 @@ +.path { + stroke-dasharray: 890; + stroke-dashoffset: 890; + animation: dash 3s ease-in-out forwards normal infinite; +} + +@keyframes dash { + from { + stroke-dashoffset: 890; + } + to { + stroke-dashoffset: 0; + } +} diff --git a/src/components/SvgYacd.tsx b/src/components/SvgYacd.tsx index 2aa5cc1..90ad7e2 100644 --- a/src/components/SvgYacd.tsx +++ b/src/components/SvgYacd.tsx @@ -1,7 +1,7 @@ import cx from 'clsx'; import React from 'react'; -import s from './SvgYacd.module.css'; +import s from './SvgYacd.module.scss'; type Props = { width?: number; diff --git a/src/components/ToggleSwitch.module.css b/src/components/ToggleSwitch.module.css deleted file mode 100644 index 4b1388c..0000000 --- a/src/components/ToggleSwitch.module.css +++ /dev/null @@ -1,39 +0,0 @@ -.ToggleSwitch { - user-select: none; - border-radius: 4px; - border: 1px solid #525252; - color: var(--color-text); - background: var(--color-toggle-bg); - display: flex; - position: relative; - outline: none; - - &:focus { - border-color: var(--color-focus-blue); - } - - input { - position: absolute; - left: 0; - opacity: 0; - } - - label { - z-index: 2; - display: flex; - align-items: center; - justify-content: center; - padding: 10px 0; - cursor: pointer; - } -} - -.slider { - z-index: 1; - position: absolute; - display: block; - left: 0; - height: 100%; - transition: left 0.2s ease-out; - background: var(--color-toggle-selected); -} diff --git a/src/components/ToggleSwitch.module.scss b/src/components/ToggleSwitch.module.scss new file mode 100644 index 0000000..4b1388c --- /dev/null +++ b/src/components/ToggleSwitch.module.scss @@ -0,0 +1,39 @@ +.ToggleSwitch { + user-select: none; + border-radius: 4px; + border: 1px solid #525252; + color: var(--color-text); + background: var(--color-toggle-bg); + display: flex; + position: relative; + outline: none; + + &:focus { + border-color: var(--color-focus-blue); + } + + input { + position: absolute; + left: 0; + opacity: 0; + } + + label { + z-index: 2; + display: flex; + align-items: center; + justify-content: center; + padding: 10px 0; + cursor: pointer; + } +} + +.slider { + z-index: 1; + position: absolute; + display: block; + left: 0; + height: 100%; + transition: left 0.2s ease-out; + background: var(--color-toggle-selected); +} diff --git a/src/components/ToggleSwitch.tsx b/src/components/ToggleSwitch.tsx index a7d8947..0c84059 100644 --- a/src/components/ToggleSwitch.tsx +++ b/src/components/ToggleSwitch.tsx @@ -1,6 +1,6 @@ import React, { useCallback, useMemo } from 'react'; -import s0 from './ToggleSwitch.module.css'; +import s0 from './ToggleSwitch.module.scss'; type Props = { options?: any[]; diff --git a/src/components/about/About.module.css b/src/components/about/About.module.css deleted file mode 100644 index 632b3ee..0000000 --- a/src/components/about/About.module.css +++ /dev/null @@ -1,18 +0,0 @@ -.root { - padding: 6px 15px; - @media (--breakpoint-not-small) { - padding: 10px 40px; - } -} - -.mono { - font-family: var(--font-mono); -} - -.link { - color: var(--color-text-secondary); - display: inline-flex; -} -.link:hover { - color: var(--color-text-highlight); -} diff --git a/src/components/about/About.module.scss b/src/components/about/About.module.scss new file mode 100644 index 0000000..632b3ee --- /dev/null +++ b/src/components/about/About.module.scss @@ -0,0 +1,18 @@ +.root { + padding: 6px 15px; + @media (--breakpoint-not-small) { + padding: 10px 40px; + } +} + +.mono { + font-family: var(--font-mono); +} + +.link { + color: var(--color-text-secondary); + display: inline-flex; +} +.link:hover { + color: var(--color-text-highlight); +} diff --git a/src/components/about/About.tsx b/src/components/about/About.tsx index 4a60141..6ed01ad 100644 --- a/src/components/about/About.tsx +++ b/src/components/about/About.tsx @@ -7,7 +7,7 @@ import { connect } from 'src/components/StateProvider'; import { getClashAPIConfig } from 'src/store/app'; import { ClashAPIConfig } from 'src/types'; -import s from './About.module.css'; +import s from './About.module.scss'; type Props = { apiConfig: ClashAPIConfig }; diff --git a/src/components/proxies/Proxies.module.css b/src/components/proxies/Proxies.module.css deleted file mode 100644 index c0aed39..0000000 --- a/src/components/proxies/Proxies.module.css +++ /dev/null @@ -1,36 +0,0 @@ -.topBar { - position: sticky; - top: 0; - - display: flex; - align-items: center; - justify-content: space-between; - flex-wrap: wrap; - z-index: 1; - background-color: var(--color-background2); - backdrop-filter: blur(36px); -} - -.topBarRight { - display: flex; - align-items: center; - flex-wrap: wrap; - flex: 1; - justify-content: flex-end; - - margin-right: 20px; -} - -.textFilterContainer { - max-width: 350px; - min-width: 150px; - flex: 1; - margin-right: 8px; -} - -.group { - padding: 10px 15px; - @media (--breakpoint-not-small) { - padding: 10px 40px; - } -} diff --git a/src/components/proxies/Proxies.module.scss b/src/components/proxies/Proxies.module.scss new file mode 100644 index 0000000..c0aed39 --- /dev/null +++ b/src/components/proxies/Proxies.module.scss @@ -0,0 +1,36 @@ +.topBar { + position: sticky; + top: 0; + + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + z-index: 1; + background-color: var(--color-background2); + backdrop-filter: blur(36px); +} + +.topBarRight { + display: flex; + align-items: center; + flex-wrap: wrap; + flex: 1; + justify-content: flex-end; + + margin-right: 20px; +} + +.textFilterContainer { + max-width: 350px; + min-width: 150px; + flex: 1; + margin-right: 8px; +} + +.group { + padding: 10px 15px; + @media (--breakpoint-not-small) { + padding: 10px 40px; + } +} diff --git a/src/components/proxies/Proxies.tsx b/src/components/proxies/Proxies.tsx index e162a17..c1606dd 100644 --- a/src/components/proxies/Proxies.tsx +++ b/src/components/proxies/Proxies.tsx @@ -8,11 +8,12 @@ import { ProxyGroup } from 'src/components/proxies/ProxyGroup'; import { ProxyPageFab } from 'src/components/proxies/ProxyPageFab'; import { ProxyProviderList } from 'src/components/proxies/ProxyProviderList'; import Settings from 'src/components/proxies/Settings'; -import { TextFilter } from 'src/components/proxies/TextFilter'; import BaseModal from 'src/components/shared/BaseModal'; +import { TextFilter } from 'src/components/shared/TextFitler'; import { connect, useStoreActions } from 'src/components/StateProvider'; import Equalizer from 'src/components/svg/Equalizer'; import { getClashAPIConfig } from 'src/store/app'; +import { proxyFilterText } from 'src/store/proxies'; import { fetchProxies, getDelay, @@ -22,7 +23,7 @@ import { } from 'src/store/proxies'; import type { State } from 'src/store/types'; -import s0 from './Proxies.module.css'; +import s0 from './Proxies.module.scss'; const { useState, useEffect, useCallback, useRef } = React; @@ -84,7 +85,7 @@ function Proxies({
- +