From 34aa72191b7b06401425a9d6c270c7ad786fc293 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Mon, 19 Apr 2021 14:13:47 +0100 Subject: [PATCH] perf: css cleanup --- README.md | 2 +- src/components/modals/main/scss/index.scss | 28 +----- .../modals/main/scss/settings/_buttons.scss | 24 +---- .../modals/main/scss/settings/_main.scss | 99 +++++++++---------- .../modals/main/settings/FileUpload.jsx | 2 +- 5 files changed, 51 insertions(+), 104 deletions(-) diff --git a/README.md b/README.md index a38a4e27..eb854411 100644 --- a/README.md +++ b/README.md @@ -42,7 +42,7 @@ Mue is a fast, open and free-to-use browser extension that gives a new, fresh an * Widgets such as searchbar, weather, quick links, clock, date, quote, greeting * Settings - enable/disable various features and customise parts of Mue * Navbar with copy button, favourite background, notes feature etc -* Marketplace - download custom photo packs made by the community! +* Marketplace - download custom photo packs made by the community ### Planned Features Please see our [roadmap](https://github.com/mue/mue/projects) diff --git a/src/components/modals/main/scss/index.scss b/src/components/modals/main/scss/index.scss index d6f172f8..6654eb9d 100644 --- a/src/components/modals/main/scss/index.scss +++ b/src/components/modals/main/scss/index.scss @@ -18,8 +18,6 @@ padding: 25px; transition-timing-function: ease-in; border-radius: map-get($modal, 'border-radius'); - -moz-user-select: none; - -webkit-user-select: none; user-select: none; scrollbar-width: thin; scrollbar-color: #34495e #bdc3c7; @@ -161,6 +159,7 @@ li { width: 90% !important; } } + @media only screen and (min-width: 1310px) { #modal { width: 60%; @@ -177,9 +176,7 @@ li { display: none; } } -} -@media only screen and (max-width: 1200px) { ul.sidebar { h1 { display: none; @@ -222,14 +219,7 @@ li { } } -@media only screen and (max-width: 1400px) { - .tab-content { - left: 350px; - top: 75px; - } -} - -@media only screen and (min-width: 1400px) { +@media only screen and (max-width: 1400px), (min-width: 1400px) { .tab-content { left: 350px; top: 75px; @@ -290,12 +280,6 @@ li { } } -@media only screen and (max-width: 1200px) { - .tabContent { - left: 20px; - } -} - @media only screen and (min-width: 1200px) { ul.sidebar { width: 310px; @@ -364,19 +348,11 @@ li { background-color: rgba(0, 0, 0, 0.5); } -.welcomeLink { - color: var(--modal-text) !important; -} - .aboutIcon { color: var(--modal-text) !important; padding-right: 10px; } -.MuiIconButton-root { - color: var(--modal-text) !important; -} - .MuiFormControl-root { margin-top: 10px !important; } diff --git a/src/components/modals/main/scss/settings/_buttons.scss b/src/components/modals/main/scss/settings/_buttons.scss index 3f9f03b5..ce55f5d7 100644 --- a/src/components/modals/main/scss/settings/_buttons.scss +++ b/src/components/modals/main/scss/settings/_buttons.scss @@ -1,22 +1,4 @@ -%settingsButton { - transition: ease 0.33s; - color: map-get($theme-colours, 'main'); - cursor: pointer; - padding: 10px 30px; - font-size: 20px; - border-radius: 24px; - box-shadow: 0 5px 15px rgba(128, 161, 144, 0.4); - - &:hover, - &:active { - outline: none; - background: none; - } -} - -.dark %settingsButton { - box-shadow: none; -} +@import '../../../../../scss/modules/buttons'; .refresh { @extend %settingsButton; @@ -163,10 +145,6 @@ input[type=number]::-webkit-outer-spin-button { color: var(--modal-text) !important; } -legend { - color: var(--modal-text) !important; -} - .sortableitem { background: var(--sidebar) !important; padding: 10px 80px; diff --git a/src/components/modals/main/scss/settings/_main.scss b/src/components/modals/main/scss/settings/_main.scss index ddd6062b..615457da 100644 --- a/src/components/modals/main/scss/settings/_main.scss +++ b/src/components/modals/main/scss/settings/_main.scss @@ -1,7 +1,3 @@ -.hidden { - display: none; -} - input { &[type=text] { width: 200px; @@ -11,6 +7,46 @@ input { padding: 10px 10px; border-radius: 5px; } + + &[type=color] { + border-radius: 100%; + height: 30px; + width: 30px; + border: none; + outline: none; + -webkit-appearance: none; + vertical-align: middle; + background: none; + + &::-webkit-color-swatch-wrapper { + padding: 0; + } + + &::-webkit-color-swatch { + border: none; + border-radius: 100%; + } + } + + &[type=color]::-moz-color-swatch { + border-radius: 100%; + height: 30px; + width: 30px; + border: none; + outline: none; + -moz-appearance: none; + vertical-align: middle; + background: none; + + &::-moz-color-swatch-wrapper { + padding: 0; + } + + &::-moz-color-swatch { + border: none; + border-radius: 100%; + } + } } h4 { @@ -55,46 +91,6 @@ ul { } } -input[type=color] { - border-radius: 100%; - height: 30px; - width: 30px; - border: none; - outline: none; - -webkit-appearance: none; - vertical-align: middle; - background: none; - - &::-webkit-color-swatch-wrapper { - padding: 0; - } - - &::-webkit-color-swatch { - border: none; - border-radius: 100%; - } -} - -input[type=color]::-moz-color-swatch { - border-radius: 100%; - height: 30px; - width: 30px; - border: none; - outline: none; - -moz-appearance: none; - vertical-align: middle; - background: none; - - &::-moz-color-swatch-wrapper { - padding: 0; - } - - &::-moz-color-swatch { - border: none; - border-radius: 100%; - } -} - .newFeature { color: #ff4757; font-size: 12px; @@ -114,14 +110,15 @@ input[type=color]::-moz-color-swatch { .MuIconButton-colorPrimary.Mui-checked, .MuiSwitch-thumb, .MuiRadio-colorSecondary.Mui-checked, -.PrivateSwitchBase-input-4 { +.PrivateSwitchBase-input-4, +.MuiRadio-root, +.aboutLink, +.MuiIconButton-root, +.welcomeLink, +legend { color: var(--modal-text) !important; } -.MuiRadio-root { - color: var(--modal-text); -} - .MuiFormControlLabel-labelPlacementStart { margin-left: 0px !important; } @@ -171,7 +168,3 @@ input[type=color]::-moz-color-swatch { margin-left: 20px; } } - -.aboutLink { - color: var(--modal-text) !important; -} \ No newline at end of file diff --git a/src/components/modals/main/settings/FileUpload.jsx b/src/components/modals/main/settings/FileUpload.jsx index fe3b03c0..340345a7 100644 --- a/src/components/modals/main/settings/FileUpload.jsx +++ b/src/components/modals/main/settings/FileUpload.jsx @@ -24,6 +24,6 @@ export default class FileUpload extends React.PureComponent { } render() { - return ; + return ; } }