From 7dac1d44c7b13184e4a1cbdb4113df2bb8db9d7e Mon Sep 17 00:00:00 2001 From: Haishan Date: Sun, 14 Apr 2019 22:56:14 +0800 Subject: refactor: replace sass with postcss --- src/components/APIConfig.js | 2 +- src/components/APIConfig.module.css | 45 ++++++++++ src/components/APIConfig.module.scss | 45 ---------- src/components/APIDiscovery.js | 2 +- src/components/APIDiscovery.module.css | 25 ++++++ src/components/APIDiscovery.module.scss | 25 ------ src/components/Button.js | 2 +- src/components/Button.module.css | 22 +++++ src/components/Button.module.scss | 22 ----- src/components/Config.js | 2 +- src/components/Config.module.css | 11 +++ src/components/Config.module.scss | 11 --- src/components/ContentHeader.js | 2 +- src/components/ContentHeader.module.css | 11 +++ src/components/ContentHeader.module.scss | 11 --- src/components/ErrorBoundaryFallback.js | 2 +- src/components/ErrorBoundaryFallback.module.css | 30 +++++++ src/components/ErrorBoundaryFallback.module.scss | 30 ------- src/components/Field.js | 2 +- src/components/Field.module.css | 43 ++++++++++ src/components/Field.module.scss | 43 ---------- src/components/Home.js | 2 +- src/components/Home.module.css | 6 ++ src/components/Home.module.scss | 6 -- src/components/Input.js | 2 +- src/components/Input.module.css | 25 ++++++ src/components/Input.module.scss | 25 ------ src/components/Loading.js | 2 +- src/components/Loading.module.css | 29 +++++++ src/components/Loading.module.scss | 31 ------- src/components/Logs.js | 2 +- src/components/Logs.module.css | 77 +++++++++++++++++ src/components/Logs.module.scss | 80 ----------------- src/components/Modal.js | 2 +- src/components/Modal.module.css | 20 +++++ src/components/Modal.module.scss | 23 ----- src/components/Proxies.js | 2 +- src/components/Proxies.module.css | 12 +++ src/components/Proxies.module.scss | 12 --- src/components/Proxy.js | 2 +- src/components/Proxy.module.css | 32 +++++++ src/components/Proxy.module.scss | 32 ------- src/components/ProxyGroup.js | 2 +- src/components/ProxyGroup.module.css | 29 +++++++ src/components/ProxyGroup.module.scss | 30 ------- src/components/ProxyLatency.js | 2 +- src/components/ProxyLatency.module.css | 6 ++ src/components/ProxyLatency.module.scss | 8 -- src/components/Root.css | 101 ++++++++++++++++++++++ src/components/Root.js | 4 +- src/components/Root.module.css | 33 +++++++ src/components/Root.module.scss | 30 ------- src/components/Root.scss | 102 ---------------------- src/components/Rule.js | 6 +- src/components/Rule.module.css | 29 +++++++ src/components/Rule.module.scss | 38 -------- src/components/Rules.js | 2 +- src/components/Rules.module.css | 5 ++ src/components/Rules.module.scss | 5 -- src/components/Search.js | 2 +- src/components/Search.module.css | 40 +++++++++ src/components/Search.module.scss | 44 ---------- src/components/SideBar.js | 2 +- src/components/SideBar.module.css | 104 ++++++++++++++++++++++ src/components/SideBar.module.scss | 105 ----------------------- src/components/Switch.js | 2 +- src/components/Switch.module.css | 49 +++++++++++ src/components/Switch.module.scss | 50 ----------- src/components/ToggleSwitch.js | 2 +- src/components/ToggleSwitch.module.css | 34 ++++++++ src/components/ToggleSwitch.module.scss | 34 -------- src/components/TrafficNow.js | 29 +++---- src/components/TrafficNow.module.css | 26 ++++++ src/components/TrafficNow.module.scss | 26 ------ 74 files changed, 882 insertions(+), 911 deletions(-) create mode 100644 src/components/APIConfig.module.css delete mode 100644 src/components/APIConfig.module.scss create mode 100644 src/components/APIDiscovery.module.css delete mode 100644 src/components/APIDiscovery.module.scss create mode 100644 src/components/Button.module.css delete mode 100644 src/components/Button.module.scss create mode 100644 src/components/Config.module.css delete mode 100644 src/components/Config.module.scss create mode 100644 src/components/ContentHeader.module.css delete mode 100644 src/components/ContentHeader.module.scss create mode 100644 src/components/ErrorBoundaryFallback.module.css delete mode 100644 src/components/ErrorBoundaryFallback.module.scss create mode 100644 src/components/Field.module.css delete mode 100644 src/components/Field.module.scss create mode 100644 src/components/Home.module.css delete mode 100644 src/components/Home.module.scss create mode 100644 src/components/Input.module.css delete mode 100644 src/components/Input.module.scss create mode 100644 src/components/Loading.module.css delete mode 100644 src/components/Loading.module.scss create mode 100644 src/components/Logs.module.css delete mode 100644 src/components/Logs.module.scss create mode 100644 src/components/Modal.module.css delete mode 100644 src/components/Modal.module.scss create mode 100644 src/components/Proxies.module.css delete mode 100644 src/components/Proxies.module.scss create mode 100644 src/components/Proxy.module.css delete mode 100644 src/components/Proxy.module.scss create mode 100644 src/components/ProxyGroup.module.css delete mode 100644 src/components/ProxyGroup.module.scss create mode 100644 src/components/ProxyLatency.module.css delete mode 100644 src/components/ProxyLatency.module.scss create mode 100644 src/components/Root.css create mode 100644 src/components/Root.module.css delete mode 100644 src/components/Root.module.scss delete mode 100644 src/components/Root.scss create mode 100644 src/components/Rule.module.css delete mode 100644 src/components/Rule.module.scss create mode 100644 src/components/Rules.module.css delete mode 100644 src/components/Rules.module.scss create mode 100644 src/components/Search.module.css delete mode 100644 src/components/Search.module.scss create mode 100644 src/components/SideBar.module.css delete mode 100644 src/components/SideBar.module.scss create mode 100644 src/components/Switch.module.css delete mode 100644 src/components/Switch.module.scss create mode 100644 src/components/ToggleSwitch.module.css delete mode 100644 src/components/ToggleSwitch.module.scss create mode 100644 src/components/TrafficNow.module.css delete mode 100644 src/components/TrafficNow.module.scss (limited to 'src/components') diff --git a/src/components/APIConfig.js b/src/components/APIConfig.js index 36c551a..3c5d62d 100644 --- a/src/components/APIConfig.js +++ b/src/components/APIConfig.js @@ -5,7 +5,7 @@ import Field from 'c/Field'; import Button from 'c/Button'; import SvgYacd from './SvgYacd'; -import s0 from './APIConfig.module.scss'; +import s0 from './APIConfig.module.css'; import { getClashAPIConfig, updateClashAPIConfig } from 'd/app'; diff --git a/src/components/APIConfig.module.css b/src/components/APIConfig.module.css new file mode 100644 index 0000000..f6f41f8 --- /dev/null +++ b/src/components/APIConfig.module.css @@ -0,0 +1,45 @@ +.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: 30px 0 10px; +} + +.hostnamePort { + display: flex; + + div { + flex: 1 1 auto; + } + + div:nth-child(2) { + flex-grow: 0; + flex-basis: 120px; + margin-left: 10px; + } +} + +.footer { + padding: 30px 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 deleted file mode 100644 index f6f41f8..0000000 --- a/src/components/APIConfig.module.scss +++ /dev/null @@ -1,45 +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: 30px 0 10px; -} - -.hostnamePort { - display: flex; - - div { - flex: 1 1 auto; - } - - div:nth-child(2) { - flex-grow: 0; - flex-basis: 120px; - margin-left: 10px; - } -} - -.footer { - padding: 30px 0 10px; - display: flex; - justify-content: flex-end; - align-items: center; -} diff --git a/src/components/APIDiscovery.js b/src/components/APIDiscovery.js index 12e92c9..08ecd57 100644 --- a/src/components/APIDiscovery.js +++ b/src/components/APIDiscovery.js @@ -7,7 +7,7 @@ import APIConfig from 'c/APIConfig'; import { closeModal } from 'd/modals'; import { fetchConfigs } from 'd/configs'; -import s0 from './APIDiscovery.module.scss'; +import s0 from './APIDiscovery.module.css'; const mapStateToProps = s => ({ modals: s.modals diff --git a/src/components/APIDiscovery.module.css b/src/components/APIDiscovery.module.css new file mode 100644 index 0000000..87357ce --- /dev/null +++ b/src/components/APIDiscovery.module.css @@ -0,0 +1,25 @@ +.content { + background: none; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + + transform: none; + padding: 0; + border-radius: 0; +} + +.container { + position: absolute; + top: 10%; + left: 50%; + transform: translate(-50%, 0); + max-width: 376px; + margin: 0 auto; +} + +.overlay { + background: #222; +} diff --git a/src/components/APIDiscovery.module.scss b/src/components/APIDiscovery.module.scss deleted file mode 100644 index 87357ce..0000000 --- a/src/components/APIDiscovery.module.scss +++ /dev/null @@ -1,25 +0,0 @@ -.content { - background: none; - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; - - transform: none; - padding: 0; - border-radius: 0; -} - -.container { - position: absolute; - top: 10%; - left: 50%; - transform: translate(-50%, 0); - max-width: 376px; - margin: 0 auto; -} - -.overlay { - background: #222; -} diff --git a/src/components/Button.js b/src/components/Button.js index eb50ffd..d7928c7 100644 --- a/src/components/Button.js +++ b/src/components/Button.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import s0 from 'c/Button.module.scss'; +import s0 from 'c/Button.module.css'; const noop = () => {}; const Button = React.memo(function Button({ label, onClick = noop }) { diff --git a/src/components/Button.module.css b/src/components/Button.module.css new file mode 100644 index 0000000..f0ab4e1 --- /dev/null +++ b/src/components/Button.module.css @@ -0,0 +1,22 @@ +.btn { + -webkit-appearance: none; + outline: none; + color: var(--color-btn-fg); + background: var(--color-btn-bg); + border: 1px solid #555; + border-radius: 100px; + padding: 6px 12px; + user-select: none; + &:focus { + border-color: var(--color-focus-blue); + } + &:hover { + background: #387cec; + border: 1px solid #387cec; + color: #fff; + /* background: darken(#555, 3%); */ + } + &:active { + transform: scale(0.97); + } +} diff --git a/src/components/Button.module.scss b/src/components/Button.module.scss deleted file mode 100644 index e60f902..0000000 --- a/src/components/Button.module.scss +++ /dev/null @@ -1,22 +0,0 @@ -.btn { - -webkit-appearance: none; - outline: none; - color: var(--color-btn-fg); - background: var(--color-btn-bg); - border: 1px solid #555; - border-radius: 100px; - padding: 6px 12px; - user-select: none; - &:focus { - border-color: var(--color-focus-blue); - } - &:hover { - background: #387cec; - border: 1px solid #387cec; - color: #fff; - // background: darken(#555, 3%); - } - &:active { - transform: scale(0.97); - } -} diff --git a/src/components/Config.js b/src/components/Config.js index 6656ad7..6f4c336 100644 --- a/src/components/Config.js +++ b/src/components/Config.js @@ -8,7 +8,7 @@ import ContentHeader from 'c/ContentHeader'; import Switch from 'c/Switch'; import ToggleSwitch from 'c/ToggleSwitch'; import Input from 'c/Input'; -import s0 from 'c/Config.module.scss'; +import s0 from 'c/Config.module.css'; const optionsRule = [ { diff --git a/src/components/Config.module.css b/src/components/Config.module.css new file mode 100644 index 0000000..1d747b4 --- /dev/null +++ b/src/components/Config.module.css @@ -0,0 +1,11 @@ +.root { + padding: 10px 40px 40px; + + > div { + width: 360px; + } +} + +.label { + padding: 16px 0; +} diff --git a/src/components/Config.module.scss b/src/components/Config.module.scss deleted file mode 100644 index 1d747b4..0000000 --- a/src/components/Config.module.scss +++ /dev/null @@ -1,11 +0,0 @@ -.root { - padding: 10px 40px 40px; - - > div { - width: 360px; - } -} - -.label { - padding: 16px 0; -} diff --git a/src/components/ContentHeader.js b/src/components/ContentHeader.js index 24d887b..b34d5df 100644 --- a/src/components/ContentHeader.js +++ b/src/components/ContentHeader.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import s0 from './ContentHeader.module.scss'; +import s0 from './ContentHeader.module.css'; function ContentHeader({ title }) { return ( diff --git a/src/components/ContentHeader.module.css b/src/components/ContentHeader.module.css new file mode 100644 index 0000000..54e4c99 --- /dev/null +++ b/src/components/ContentHeader.module.css @@ -0,0 +1,11 @@ +.root { + height: 76px; + display: flex; + align-items: center; +} + +.h1 { + padding: 0 40px; + text-align: left; + margin: 0; +} diff --git a/src/components/ContentHeader.module.scss b/src/components/ContentHeader.module.scss deleted file mode 100644 index 54e4c99..0000000 --- a/src/components/ContentHeader.module.scss +++ /dev/null @@ -1,11 +0,0 @@ -.root { - height: 76px; - display: flex; - align-items: center; -} - -.h1 { - padding: 0 40px; - text-align: left; - margin: 0; -} diff --git a/src/components/ErrorBoundaryFallback.js b/src/components/ErrorBoundaryFallback.js index 295d458..5d5698a 100644 --- a/src/components/ErrorBoundaryFallback.js +++ b/src/components/ErrorBoundaryFallback.js @@ -3,7 +3,7 @@ import Icon from 'c/Icon'; import SvgYacd from './SvgYacd'; import github from 's/github.svg'; -import s0 from './ErrorBoundaryFallback.module.scss'; +import s0 from './ErrorBoundaryFallback.module.css'; const yacdRepoIssueUrl = 'https://github.com/haishanh/yacd/issues'; function ErrorBoundaryFallback() { diff --git a/src/components/ErrorBoundaryFallback.module.css b/src/components/ErrorBoundaryFallback.module.css new file mode 100644 index 0000000..5deae74 --- /dev/null +++ b/src/components/ErrorBoundaryFallback.module.css @@ -0,0 +1,30 @@ +.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 { + color: var(--color-text-secondary); + &:hover, + &:active { + color: #387cec; + } +} diff --git a/src/components/ErrorBoundaryFallback.module.scss b/src/components/ErrorBoundaryFallback.module.scss deleted file mode 100644 index 5deae74..0000000 --- a/src/components/ErrorBoundaryFallback.module.scss +++ /dev/null @@ -1,30 +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 { - color: var(--color-text-secondary); - &:hover, - &:active { - color: #387cec; - } -} diff --git a/src/components/Field.js b/src/components/Field.js index aa7aec5..8041a3b 100644 --- a/src/components/Field.js +++ b/src/components/Field.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import cx from 'classnames'; -import s from './Field.module.scss'; +import s from './Field.module.css'; const { useCallback } = React; diff --git a/src/components/Field.module.css b/src/components/Field.module.css new file mode 100644 index 0000000..ec0b306 --- /dev/null +++ b/src/components/Field.module.css @@ -0,0 +1,43 @@ +.root { + position: relative; + padding: 10px 0; + input { + -webkit-appearance: none; + background-color: transparent; + /* background-color: var(--color-input-bg); */ + 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 8px; + 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: 8px; + bottom: 22px; + transition: transform 150ms ease-in-out; + transform-origin: 0 0; + &.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 deleted file mode 100644 index 2c61d08..0000000 --- a/src/components/Field.module.scss +++ /dev/null @@ -1,43 +0,0 @@ -.root { - position: relative; - padding: 10px 0; - input { - -webkit-appearance: none; - background-color: transparent; - // background-color: var(--color-input-bg); - 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 8px; - 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: 8px; - bottom: 22px; - transition: transform 150ms ease-in-out; - transform-origin: 0 0; - &.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/Home.js b/src/components/Home.js index 57f6c6f..e2dcc6a 100644 --- a/src/components/Home.js +++ b/src/components/Home.js @@ -4,7 +4,7 @@ import ContentHeader from 'c/ContentHeader'; import TrafficChart from 'c/TrafficChart'; import TrafficNow from 'c/TrafficNow'; import Loading from 'c/Loading'; -import s0 from 'c/Home.module.scss'; +import s0 from 'c/Home.module.css'; export default function Home() { return ( diff --git a/src/components/Home.module.css b/src/components/Home.module.css new file mode 100644 index 0000000..464f40f --- /dev/null +++ b/src/components/Home.module.css @@ -0,0 +1,6 @@ +.root { + padding: 10px 40px; +} + +.chart { +} diff --git a/src/components/Home.module.scss b/src/components/Home.module.scss deleted file mode 100644 index 464f40f..0000000 --- a/src/components/Home.module.scss +++ /dev/null @@ -1,6 +0,0 @@ -.root { - padding: 10px 40px; -} - -.chart { -} diff --git a/src/components/Input.js b/src/components/Input.js index f621b43..c7bfbbe 100644 --- a/src/components/Input.js +++ b/src/components/Input.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import s0 from './Input.module.scss'; +import s0 from './Input.module.css'; export default function Input(props) { return ; diff --git a/src/components/Input.module.css b/src/components/Input.module.css new file mode 100644 index 0000000..a39c064 --- /dev/null +++ b/src/components/Input.module.css @@ -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: #c1c1c1; + display: inline-block; + font-size: inherit; + height: 40px; + outline: none; + padding: 0 15px; + transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); + width: 100%; + &:focus { + border-color: var(--color-focus-blue); + } +} + +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 deleted file mode 100644 index a39c064..0000000 --- a/src/components/Input.module.scss +++ /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: #c1c1c1; - display: inline-block; - font-size: inherit; - height: 40px; - outline: none; - padding: 0 15px; - transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); - width: 100%; - &:focus { - border-color: var(--color-focus-blue); - } -} - -input::-webkit-outer-spin-button, -input::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; -} diff --git a/src/components/Loading.js b/src/components/Loading.js index 7949a4b..37fcef5 100644 --- a/src/components/Loading.js +++ b/src/components/Loading.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import s0 from './Loading.module.scss'; +import s0 from './Loading.module.css'; const Loading = ({ height }) => { const style = height ? { height } : {}; diff --git a/src/components/Loading.module.css b/src/components/Loading.module.css new file mode 100644 index 0000000..11d3297 --- /dev/null +++ b/src/components/Loading.module.css @@ -0,0 +1,29 @@ + +.loading { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.pulse { + --color1: #dddddd; + --size: 40px; + width: var(--size); + height: var(--size); + margin: 10px; + background-color: var(--color1); + border-radius: 100%; + animation: pulseScaleOut 1s infinite ease-in-out; +} + +@keyframes pulseScaleOut { + 0% { + transform: scale(0); + } + 100% { + transform: scale(1); + opacity: 0; + } +} diff --git a/src/components/Loading.module.scss b/src/components/Loading.module.scss deleted file mode 100644 index 05f8f3f..0000000 --- a/src/components/Loading.module.scss +++ /dev/null @@ -1,31 +0,0 @@ -// $color1: #2a477a; -$color1: #dddddd; - -$size: 40px; - -.loading { - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; -} - -.pulse { - width: $size; - height: $size; - margin: 10px; - background-color: $color1; - border-radius: 100%; - animation: pulseScaleOut 1s infinite ease-in-out; -} - -@keyframes pulseScaleOut { - 0% { - transform: scale(0); - } - 100% { - transform: scale(1); - opacity: 0; - } -} diff --git a/src/components/Logs.js b/src/components/Logs.js index 8fba941..60b7e43 100644 --- a/src/components/Logs.js +++ b/src/components/Logs.js @@ -13,7 +13,7 @@ import { fetchLogs } from '../api/logs'; import LogSearch from './LogSearch'; import { getLogsForDisplay, appendLog } from 'd/logs'; -import s0 from 'c/Logs.module.scss'; +import s0 from 'c/Logs.module.css'; const paddingBottom = 30; const colors = { debug: 'none', diff --git a/src/components/Logs.module.css b/src/components/Logs.module.css new file mode 100644 index 0000000..5113afc --- /dev/null +++ b/src/components/Logs.module.css @@ -0,0 +1,77 @@ +.logMeta { + display: flex; + align-items: center; + flex-wrap: wrap; + font-size: 0.9em; + padding: 10px; +} + +.logType { + color: #eee; + flex-shrink: 0; + text-align: center; + width: 66px; + background: green; + border-radius: 5px; + 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 deleted file mode 100644 index 7b32633..0000000 --- a/src/components/Logs.module.scss +++ /dev/null @@ -1,80 +0,0 @@ -$colorf: #eee; -$heightHeader: 76px; - -.logMeta { - display: flex; - align-items: center; - flex-wrap: wrap; - font-size: 0.9em; - padding: 10px; -} - -.logType { - color: $colorf; - flex-shrink: 0; - text-align: center; - width: 66px; - background: green; - border-radius: 5px; - 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/Modal.js b/src/components/Modal.js index a9b1951..6cf476d 100644 --- a/src/components/Modal.js +++ b/src/components/Modal.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import Modal from 'react-modal'; import cx from 'classnames'; -import s0 from './Modal.module.scss'; +import s0 from './Modal.module.css'; function ModalAPIConfig({ isOpen, diff --git a/src/components/Modal.module.css b/src/components/Modal.module.css new file mode 100644 index 0000000..0df0030 --- /dev/null +++ b/src/components/Modal.module.css @@ -0,0 +1,20 @@ +.overlay { + position: fixed; + top: 0; + right: 0; + left: 0; + bottom: 0; + background: #444; +} + +.content { + outline: none; + position: absolute; + 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 deleted file mode 100644 index 935c6a7..0000000 --- a/src/components/Modal.module.scss +++ /dev/null @@ -1,23 +0,0 @@ -.overlay { - position: fixed; - // z-index: 1000; - top: 0; - right: 0; - left: 0; - bottom: 0; - // background: rgba(255, 255, 255, 0.5); - background: #444; -} - -.content { - outline: none; - position: absolute; - color: #ddd; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background: #444; - padding: 20px; - // border: 1px solid #ccc; - border-radius: 10px; -} diff --git a/src/components/Proxies.js b/src/components/Proxies.js index b3286b8..45e8252 100644 --- a/src/components/Proxies.js +++ b/src/components/Proxies.js @@ -5,7 +5,7 @@ import ContentHeader from 'c/ContentHeader'; import ProxyGroup from 'c/ProxyGroup'; import Button from 'c/Button'; -import s0 from 'c/Proxies.module.scss'; +import s0 from 'c/Proxies.module.css'; import { getProxies, diff --git a/src/components/Proxies.module.css b/src/components/Proxies.module.css new file mode 100644 index 0000000..8be48ce --- /dev/null +++ b/src/components/Proxies.module.css @@ -0,0 +1,12 @@ +.root { +} + +.group { + padding: 10px 40px; +} + +.fabgrp { + position: fixed; + right: 20px; + bottom: 20px; +} diff --git a/src/components/Proxies.module.scss b/src/components/Proxies.module.scss deleted file mode 100644 index 8be48ce..0000000 --- a/src/components/Proxies.module.scss +++ /dev/null @@ -1,12 +0,0 @@ -.root { -} - -.group { - padding: 10px 40px; -} - -.fabgrp { - position: fixed; - right: 20px; - bottom: 20px; -} diff --git a/src/components/Proxy.js b/src/components/Proxy.js index 3d22ade..57f3657 100644 --- a/src/components/Proxy.js +++ b/src/components/Proxy.js @@ -14,7 +14,7 @@ import direct from 's/direct.svg'; import http from 's/http.svg'; import group from 's/group.svg'; -import s0 from './Proxy.module.scss'; +import s0 from './Proxy.module.css'; import { getDelay, getProxies } from 'd/proxies'; diff --git a/src/components/Proxy.module.css b/src/components/Proxy.module.css new file mode 100644 index 0000000..df6fcae --- /dev/null +++ b/src/components/Proxy.module.css @@ -0,0 +1,32 @@ +.proxy { + position: relative; + height: 90px; +} + +.iconWrapper { + position: absolute; + bottom: 0; + left: 20%; + + display: flex; + align-items: center; + justify-content: center; +} + +.proxyDetail { + position: absolute; + top: 0; + left: 0; + + width: 100%; + height: 100%; +} + +.proxyName { + width: 100%; + padding-right: 20px; + overflow: hidden; + text-overflow: ellipsis; + margin: 10px 0; + font-size: 1.1em; +} diff --git a/src/components/Proxy.module.scss b/src/components/Proxy.module.scss deleted file mode 100644 index df6fcae..0000000 --- a/src/components/Proxy.module.scss +++ /dev/null @@ -1,32 +0,0 @@ -.proxy { - position: relative; - height: 90px; -} - -.iconWrapper { - position: absolute; - bottom: 0; - left: 20%; - - display: flex; - align-items: center; - justify-content: center; -} - -.proxyDetail { - position: absolute; - top: 0; - left: 0; - - width: 100%; - height: 100%; -} - -.proxyName { - width: 100%; - padding-right: 20px; - overflow: hidden; - text-overflow: ellipsis; - margin: 10px 0; - font-size: 1.1em; -} diff --git a/src/components/ProxyGroup.js b/src/components/ProxyGroup.js index 61b9185..a0d6da9 100644 --- a/src/components/ProxyGroup.js +++ b/src/components/ProxyGroup.js @@ -5,7 +5,7 @@ import { useActions, useStoreState } from 'm/store'; import Proxy from 'c/Proxy'; -import s0 from './ProxyGroup.module.scss'; +import s0 from './ProxyGroup.module.css'; import { getProxies, switchProxy } from 'd/proxies'; diff --git a/src/components/ProxyGroup.module.css b/src/components/ProxyGroup.module.css new file mode 100644 index 0000000..ec52279 --- /dev/null +++ b/src/components/ProxyGroup.module.css @@ -0,0 +1,29 @@ +.header { + > h2 { + margin-top: 0; + + span:nth-child(2) { + font-size: 12px; + color: #777; + font-weight: normal; + margin: 0 0.3em; + } + } +} + +.list { + display: flex; + flex-wrap: wrap; +} + +.proxy { + width: 300px; + padding: 10px 5px; + transition: transform 0.2s ease-in-out; + &.proxySelectable { + cursor: pointer; + &:hover { + transform: scale(1.1); + } + } +} diff --git a/src/components/ProxyGroup.module.scss b/src/components/ProxyGroup.module.scss deleted file mode 100644 index f5218ea..0000000 --- a/src/components/ProxyGroup.module.scss +++ /dev/null @@ -1,30 +0,0 @@ -.header { - > h2 { - margin-top: 0; - - span:nth-child(2) { - font-size: 12px; - color: #777; - font-weight: normal; - margin: 0 0.3em; - } - } -} - -.list { - display: flex; - flex-wrap: wrap; -} - -.proxy { - width: 300px; - padding: 10px 5px; - transition: transform 0.2s ease-in-out; - // transition: transform 0.4s ease, color 0.4s ease; - &.proxySelectable { - cursor: pointer; - &:hover { - transform: scale(1.1); - } - } -} diff --git a/src/components/ProxyLatency.js b/src/components/ProxyLatency.js index 96dd26f..33a94f5 100644 --- a/src/components/ProxyLatency.js +++ b/src/components/ProxyLatency.js @@ -1,7 +1,7 @@ import React, { useMemo } from 'react'; import PropTypes from 'prop-types'; -import s0 from './ProxyLatency.module.scss'; +import s0 from './ProxyLatency.module.css'; const colorMap = { good: '#67C23A', diff --git a/src/components/ProxyLatency.module.css b/src/components/ProxyLatency.module.css new file mode 100644 index 0000000..aee0864 --- /dev/null +++ b/src/components/ProxyLatency.module.css @@ -0,0 +1,6 @@ +.proxyLatency { + border-radius: 20px; + margin: 10px 0; + padding: 3px 0; + color: #eee; +} diff --git a/src/components/ProxyLatency.module.scss b/src/components/ProxyLatency.module.scss deleted file mode 100644 index 61485bd..0000000 --- a/src/components/ProxyLatency.module.scss +++ /dev/null @@ -1,8 +0,0 @@ -.proxyLatency { - border-radius: 20px; - margin: 10px 0; - // padding: 3px 5px; - padding: 3px 0; - color: #eee; - // background: #ccc; -} diff --git a/src/components/Root.css b/src/components/Root.css new file mode 100644 index 0000000..0397507 --- /dev/null +++ b/src/components/Root.css @@ -0,0 +1,101 @@ +@font-face { + font-family: 'Roboto Mono'; + font-style: normal; + font-weight: 400; + src: local('Roboto Mono'), local('RobotoMono-Regular'), + url('https://cdn.jsdelivr.net/npm/@hsjs/fonts@0.0.1/robotomono/v5/L0x5DF4xlVMF-BfR8bXMIjhLq3-cXbKD.woff2') + format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, + U+FEFF, U+FFFD; +} + +.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; +} + +body { + font-family: -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; + margin: 0; + padding: 0; + + --color-focus-blue: #1a73e8; +} + +body, +body.dark { + --color-background: #202020; + --color-text: #ddd; + --color-text-secondary: #ccc; + --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-btn-bg: #232323; + --color-btn-fg: #bebebe; +} + +body.light { + --color-background: #fbfbfb; + --color-text: #222; + --color-text-secondary: #646464; + --color-bg-sidebar: #e7e7e7; + --color-sb-active-row-bg: #d0d0d0; + --color-input-bg: #ffffff; + --color-input-border: #c0c0c0; + --color-toggle-bg: #ffffff; + --color-toggle-selected: #d7d7d7; + --color-icon: #5b5b5b; + --color-btn-bg: #f4f4f4; + --color-btn-fg: #101010; +} diff --git a/src/components/Root.js b/src/components/Root.js index b8e3b20..6f18b22 100644 --- a/src/components/Root.js +++ b/src/components/Root.js @@ -10,8 +10,8 @@ import Logs from 'c/Logs'; import Config from 'c/Config'; import APIDiscovery from 'c/APIDiscovery'; import { store } from '../store/configureStore'; -import './Root.scss'; -import s0 from './Root.module.scss'; +import './Root.css'; +import s0 from './Root.module.css'; const Proxies = React.lazy(() => import(/* webpackChunkName: "proxies" */ diff --git a/src/components/Root.module.css b/src/components/Root.module.css new file mode 100644 index 0000000..c35c4cb --- /dev/null +++ b/src/components/Root.module.css @@ -0,0 +1,33 @@ +.app { + display: flex; + + background: var(--color-background); + color: var(--color-text); + min-height: 300px; + height: 100vh; + + @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 deleted file mode 100644 index 4c3653b..0000000 --- a/src/components/Root.module.scss +++ /dev/null @@ -1,30 +0,0 @@ -.app { - display: flex; - - background: var(--color-background); - color: var(--color-text); - min-height: 300px; - height: 100vh; - - @media (max-width: 768px) { - flex-direction: column; - } -} - -.content { - flex-grow: 1; - overflow: auto; - // background: #202020; - - // $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 deleted file mode 100644 index 696dcbf..0000000 --- a/src/components/Root.scss +++ /dev/null @@ -1,102 +0,0 @@ -// this font-family only covers latin -@font-face { - font-family: 'Roboto Mono'; - font-style: normal; - font-weight: 400; - src: local('Roboto Mono'), local('RobotoMono-Regular'), - url('https://cdn.jsdelivr.net/npm/@hsjs/fonts@0.0.1/robotomono/v5/L0x5DF4xlVMF-BfR8bXMIjhLq3-cXbKD.woff2') - format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, - U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, - U+FEFF, U+FFFD; -} - -.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; -} - -body { - font-family: -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; - margin: 0; - padding: 0; - - --color-focus-blue: #1a73e8; -} - -body, -body.dark { - --color-background: #202020; - --color-text: #ddd; - --color-text-secondary: #ccc; - --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-btn-bg: #232323; - --color-btn-fg: #bebebe; -} - -body.light { - --color-background: #fbfbfb; - --color-text: #222; - --color-text-secondary: #646464; - --color-bg-sidebar: #e7e7e7; - --color-sb-active-row-bg: #d0d0d0; - --color-input-bg: #ffffff; - --color-input-border: #c0c0c0; - --color-toggle-bg: #ffffff; - --color-toggle-selected: #d7d7d7; - --color-icon: #5b5b5b; - --color-btn-bg: #f4f4f4; - --color-btn-fg: #101010; -} diff --git a/src/components/Rule.js b/src/components/Rule.js index 3468d17..db6652d 100644 --- a/src/components/Rule.js +++ b/src/components/Rule.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import s0 from './Rule.module.scss'; +import s0 from './Rule.module.css'; const colorMap = { _default: '#59caf9', @@ -26,9 +26,7 @@ function Rule({ type, payload, proxy, id }) {
{payload}
{type}
-
- {proxy} -
+
{proxy}
diff --git a/src/components/Rule.module.css b/src/components/Rule.module.css new file mode 100644 index 0000000..6505aa6 --- /dev/null +++ b/src/components/Rule.module.css @@ -0,0 +1,29 @@ +.rule { + display: flex; + align-items: center; + 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: 19px; +} + +.type { + width: 110px; +} diff --git a/src/components/Rule.module.scss b/src/components/Rule.module.scss deleted file mode 100644 index bffac93..0000000 --- a/src/components/Rule.module.scss +++ /dev/null @@ -1,38 +0,0 @@ -.rule { - display: flex; - align-items: center; - 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: 19px; -} - -.type { - width: 110px; -} - -.proxy { - // background: #f5bc41; - // background: #eee; - // color: #eee; - // padding: 5px; - // border-radius: 5px; -} diff --git a/src/components/Rules.js b/src/components/Rules.js index ad652e4..f37e1b0 100644 --- a/src/components/Rules.js +++ b/src/components/Rules.js @@ -10,7 +10,7 @@ import useRemainingViewPortHeight from '../hooks/useRemainingViewPortHeight'; import { getRules, fetchRules, fetchRulesOnce } from 'd/rules'; -import s0 from './Rules.module.scss'; +import s0 from './Rules.module.css'; const paddingBottom = 30; const mapStateToProps = s => ({ diff --git a/src/components/Rules.module.css b/src/components/Rules.module.css new file mode 100644 index 0000000..1fb94eb --- /dev/null +++ b/src/components/Rules.module.css @@ -0,0 +1,5 @@ +.fabgrp { + position: fixed; + right: 20px; + bottom: 20px; +} diff --git a/src/components/Rules.module.scss b/src/components/Rules.module.scss deleted file mode 100644 index 1fb94eb..0000000 --- a/src/components/Rules.module.scss +++ /dev/null @@ -1,5 +0,0 @@ -.fabgrp { - position: fixed; - right: 20px; - bottom: 20px; -} diff --git a/src/components/Search.js b/src/components/Search.js index 88c6b44..b93d429 100644 --- a/src/components/Search.js +++ b/src/components/Search.js @@ -6,7 +6,7 @@ import { useActions, useStoreState } from 'm/store'; import debounce from 'lodash-es/debounce'; -import s0 from './Search.module.scss'; +import s0 from './Search.module.css'; function getSerachComponent({ mapStateToProps, actions }) { return memo(function RuleSearch() { diff --git a/src/components/Search.module.css b/src/components/Search.module.css new file mode 100644 index 0000000..657c741 --- /dev/null +++ b/src/components/Search.module.css @@ -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.module.scss b/src/components/Search.module.scss deleted file mode 100644 index 31e6e36..0000000 --- a/src/components/Search.module.scss +++ /dev/null @@ -1,44 +0,0 @@ -.RuleSearch { - // width: 100%; - // padding: 0 40px; - // height: 40px; - padding: 0 40px 5px; - // height: 40px; -} - -.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/SideBar.js b/src/components/SideBar.js index 2da6c1e..c78d6a9 100644 --- a/src/components/SideBar.js +++ b/src/components/SideBar.js @@ -17,7 +17,7 @@ import SvgCommand from './SvgCommand'; import SvgSettings from './SvgSettings'; import SvgFile from './SvgFile'; -import s from 'c/SideBar.module.scss'; +import s from 'c/SideBar.module.css'; const icons = { activity: SvgActivity, diff --git a/src/components/SideBar.module.css b/src/components/SideBar.module.css new file mode 100644 index 0000000..b78d731 --- /dev/null +++ b/src/components/SideBar.module.css @@ -0,0 +1,104 @@ +.root { + background: var(--color-bg-sidebar); + position: relative; +} + +.logoLink { + display: block; +} + +.logo { + display: flex; + align-items: center; + justify-content: center; + padding: 25px 0 15px; + @media (max-width: 768px) { + padding: 0; + } + color: #2a477a; + transition: color 0.3s ease-in-out; + + &:hover { + animation: pulse 0.3s ease-in-out 0s infinite alternate; + } + + img { + width: 80px; + height: 80px; + } +} + +@keyframes pulse { + 0% { + color: #2a477a; + } + 100% { + color: #1f52ac; + } +} + +.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: 8px 20px; + + @media (max-width: 768px) { + flex-direction: column; + } + + svg { + color: var(--color-icon); + } +} + +.rowActive { + background: var(--color-sb-active-row-bg); + + @media (max-width: 768px) { + background: none; + border-bottom: 2px solid #387cec; + } +} + +.label { + padding-left: 14px; + @media (max-width: 768px) { + padding-left: 0; + padding-top: 5px; + } +} + +.themeSwitchContainer { + --sz: 50px; + + @media (max-width: 768px) { + display: none; + } + + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: var(--sz); + height: var(--sz); + padding: 20px 0; + display: flex; + justify-content: center; + align-items: center; + svg { + display: block; + color: var(--color-icon); + } +} diff --git a/src/components/SideBar.module.scss b/src/components/SideBar.module.scss deleted file mode 100644 index a8fe68e..0000000 --- a/src/components/SideBar.module.scss +++ /dev/null @@ -1,105 +0,0 @@ -.root { - background: var(--color-bg-sidebar); - position: relative; -} - -.logoLink { - display: block; -} - -.logo { - display: flex; - align-items: center; - justify-content: center; - padding: 25px 0 15px; - @media (max-width: 768px) { - padding: 0; - } - color: #2a477a; - transition: color 0.3s ease-in-out; - - &:hover { - animation: pulse 0.3s ease-in-out 0s infinite alternate; - } - - img { - width: 80px; - height: 80px; - } -} - -@keyframes pulse { - 0% { - color: #2a477a; - } - 100% { - color: #1f52ac; - } -} - -.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: 8px 20px; - - @media (max-width: 768px) { - flex-direction: column; - // display: flex; - } - - svg { - color: var(--color-icon); - } -} - -.rowActive { - background: var(--color-sb-active-row-bg); - - @media (max-width: 768px) { - background: none; - border-bottom: 2px solid #387cec; - } -} - -.label { - padding-left: 14px; - @media (max-width: 768px) { - padding-left: 0; - padding-top: 5px; - } -} - -.themeSwitchContainer { - $sz: 50px; - - @media (max-width: 768px) { - display: none; - } - - position: absolute; - bottom: 0; - left: 50%; - transform: translateX(-50%); - width: $sz; - height: $sz; - padding: 20px 0; - display: flex; - justify-content: center; - align-items: center; - svg { - display: block; - color: var(--color-icon); - } -} diff --git a/src/components/Switch.js b/src/components/Switch.js index f956b6d..8062af2 100644 --- a/src/components/Switch.js +++ b/src/components/Switch.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import s0 from 'c/Switch.module.scss'; +import s0 from 'c/Switch.module.css'; const noop = () => {}; function Switch({ checked = false, onChange = noop, name = '' }) { diff --git a/src/components/Switch.module.css b/src/components/Switch.module.css new file mode 100644 index 0000000..2199c74 --- /dev/null +++ b/src/components/Switch.module.css @@ -0,0 +1,49 @@ +/* steal from https://codepen.io/joshnh/pen/hjbuH */ + +input.switch[type='checkbox'] { + --white: #fff; + --grey: #d3d3d3; + --color-theme: #047aff; + + appearance: none; + outline: none; + background-color: darken(var(--white), 2%); + border: 1px solid var(--grey); + border-radius: 26px; + box-shadow: inset 0 0 0 1px var(--grey); + cursor: pointer; + height: 28px; + position: relative; + transition: border 0.25s 0.15s, box-shadow 0.25s 0.3s, padding 0.25s; + width: 44px; + vertical-align: top; + + &:after { + background-color: var(--white); + border: 1px solid var(--grey); + border-radius: 24px; + box-shadow: inset 0 -3px 3px hsla(0, 0%, 0%, 0.025), + 0 1px 4px hsla(0, 0%, 0%, 0.15), 0 4px 4px hsla(0, 0%, 0%, 0.1); + content: ''; + display: block; + height: 26px; + left: 0; + position: absolute; + right: 16px; + top: 0; + transition: border 0.25s 0.15s, left 0.25s 0.1s, right 0.15s 0.175s; + } + &:checked { + border-color: var(--color-theme); + box-shadow: inset 0 0 0 13px var(--color-theme); + padding-left: 18px; + transition: border 0.25s, box-shadow 0.25s, padding 0.25s 0.15s; + + &:after { + border-color: var(--color-theme); + left: 16px; + right: 0; + transition: border 0.25s, left 0.15s 0.25s, right 0.25s 0.175s; + } + } +} diff --git a/src/components/Switch.module.scss b/src/components/Switch.module.scss deleted file mode 100644 index 835de87..0000000 --- a/src/components/Switch.module.scss +++ /dev/null @@ -1,50 +0,0 @@ -// steal from https://codepen.io/joshnh/pen/hjbuH - -$white: #fff; -// $green: #53d76a; -$grey: #d3d3d3; -$color-theme: #047aff; - -input.switch[type='checkbox'] { - appearance: none; - outline: none; - background-color: darken($white, 2%); - border: 1px solid $grey; - border-radius: 26px; - box-shadow: inset 0 0 0 1px $grey; - cursor: pointer; - height: 28px; - position: relative; - transition: border 0.25s 0.15s, box-shadow 0.25s 0.3s, padding 0.25s; - width: 44px; - vertical-align: top; - - &:after { - background-color: $white; - border: 1px solid $grey; - border-radius: 24px; - box-shadow: inset 0 -3px 3px hsla(0, 0%, 0%, 0.025), - 0 1px 4px hsla(0, 0%, 0%, 0.15), 0 4px 4px hsla(0, 0%, 0%, 0.1); - content: ''; - display: block; - height: 26px; - left: 0; - position: absolute; - right: 16px; - top: 0; - transition: border 0.25s 0.15s, left 0.25s 0.1s, right 0.15s 0.175s; - } - &:checked { - border-color: $color-theme; - box-shadow: inset 0 0 0 13px $color-theme; - padding-left: 18px; - transition: border 0.25s, box-shadow 0.25s, padding 0.25s 0.15s; - - &:after { - border-color: $color-theme; - left: 16px; - right: 0; - transition: border 0.25s, left 0.15s 0.25s, right 0.25s 0.175s; - } - } -} diff --git a/src/components/ToggleSwitch.js b/src/components/ToggleSwitch.js index 59323c4..7d6431c 100644 --- a/src/components/ToggleSwitch.js +++ b/src/components/ToggleSwitch.js @@ -1,7 +1,7 @@ import React, { useMemo } from 'react'; import PropTypes from 'prop-types'; -import s0 from 'c/ToggleSwitch.module.scss'; +import s0 from 'c/ToggleSwitch.module.css'; function ToggleSwitch({ options, value, name, onChange }) { const idxSelected = useMemo(() => options.map(o => o.value).indexOf(value), [ diff --git a/src/components/ToggleSwitch.module.css b/src/components/ToggleSwitch.module.css new file mode 100644 index 0000000..78a2b41 --- /dev/null +++ b/src/components/ToggleSwitch.module.css @@ -0,0 +1,34 @@ +.ToggleSwitch { + user-select: none; + border: 1px solid #525252; + color: var(--color-text); + background: var(--color-toggle-bg); + display: flex; + position: relative; + + input { + position: absolute; + left: 0; + opacity: 0; + } + + label { + flex: 1; + 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 deleted file mode 100644 index 78a2b41..0000000 --- a/src/components/ToggleSwitch.module.scss +++ /dev/null @@ -1,34 +0,0 @@ -.ToggleSwitch { - user-select: none; - border: 1px solid #525252; - color: var(--color-text); - background: var(--color-toggle-bg); - display: flex; - position: relative; - - input { - position: absolute; - left: 0; - opacity: 0; - } - - label { - flex: 1; - 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/TrafficNow.js b/src/components/TrafficNow.js index c24abc1..bcdd58a 100644 --- a/src/components/TrafficNow.js +++ b/src/components/TrafficNow.js @@ -5,7 +5,7 @@ import { useStoreState } from 'm/store'; import { getClashAPIConfig } from 'd/app'; import { fetchData } from '../api/traffic'; -import s0 from 'c/TrafficNow.module.scss'; +import s0 from 'c/TrafficNow.module.css'; export default function TrafficNow() { const { upStr, downStr } = useSpeed(); @@ -26,20 +26,17 @@ export default function TrafficNow() { function useSpeed() { const [speed, setSpeed] = useState({ upStr: '0 B/s', downStr: '0 B/s' }); const { hostname, port, secret } = useStoreState(getClashAPIConfig); - useEffect( - () => { - return fetchData({ - hostname, - port, - secret - }).subscribe(o => - setSpeed({ - upStr: prettyBytes(o.up) + '/s', - downStr: prettyBytes(o.down) + '/s' - }) - ); - }, - [hostname, port, secret] - ); + useEffect(() => { + return fetchData({ + hostname, + port, + secret + }).subscribe(o => + setSpeed({ + upStr: prettyBytes(o.up) + '/s', + downStr: prettyBytes(o.down) + '/s' + }) + ); + }, [hostname, port, secret]); return speed; } diff --git a/src/components/TrafficNow.module.css b/src/components/TrafficNow.module.css new file mode 100644 index 0000000..7c3aee7 --- /dev/null +++ b/src/components/TrafficNow.module.css @@ -0,0 +1,26 @@ +.TrafficNow { + color: var(--color-text); + display: flex; + align-items: center; +} + +.up, +.down { + padding-top: 10px; + padding-bottom: 10px; + width: 200px; + + div:nth-child(1) { + color: var(--color-text-secondary); + } + div:nth-child(2) { + padding: 10px 0 0; + font-size: 2em; + } +} +.up { + padding-right: 20px; +} +.down { + padding-left: 20px; +} diff --git a/src/components/TrafficNow.module.scss b/src/components/TrafficNow.module.scss deleted file mode 100644 index 7c3aee7..0000000 --- a/src/components/TrafficNow.module.scss +++ /dev/null @@ -1,26 +0,0 @@ -.TrafficNow { - color: var(--color-text); - display: flex; - align-items: center; -} - -.up, -.down { - padding-top: 10px; - padding-bottom: 10px; - width: 200px; - - div:nth-child(1) { - color: var(--color-text-secondary); - } - div:nth-child(2) { - padding: 10px 0 0; - font-size: 2em; - } -} -.up { - padding-right: 20px; -} -.down { - padding-left: 20px; -} -- cgit v1.3.1