diff --git a/src/components/modals/main/scss/index.scss b/src/components/modals/main/scss/index.scss index 41bd0128..53f405b7 100644 --- a/src/components/modals/main/scss/index.scss +++ b/src/components/modals/main/scss/index.scss @@ -1,12 +1,15 @@ @import '../../../../scss/variables'; +@import 'modules/sidebar'; +@import 'modules/navbar'; +@import 'modules/tab-content'; +@import 'modules/links'; +@import 'modules/scrollbars'; + @import 'settings/main'; @import 'settings/buttons'; -@import 'settings/dropdown'; -@import 'settings/daypicker'; @import 'marketplace/main'; -@import 'marketplace/buttons'; .Modal { color: var(--modal-text); @@ -27,36 +30,6 @@ } } -.mainModal { - padding: 25px; -} - -.resetLink { - color: var(--modal-link); - cursor: pointer; - - &:hover { - opacity: 0.8; - } - - span { - font-size: 1.2rem; - color: var(--modal-link); - vertical-align: text-bottom; - margin-left: 5px; - } -} - -.modalLink { - color: var(--modal-link); - cursor: pointer; - margin-left: 5px; - - &:hover { - opacity: 0.8; - } -} - .closeModal { position: absolute; top: 1rem; @@ -93,11 +66,11 @@ overflow-y: auto; position: relative; - // animation transform: scale(0); transition: all 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8); } +/* modal transition */ .ReactModal__Content--after-open { opacity: 1; transform: scale(1); @@ -115,61 +88,9 @@ } } -ul.sidebar { - position: absolute; - top: 0; - left: 0; - margin: 0; - padding-left: 0; - background: var(--sidebar); - border-radius: 12px 0 0 12px; - text-align: left; - font-size: 24px; - min-height: 100vh; - - h1 { - text-align: center; - font-size: 1.8em; - } - - svg { - vertical-align: middle; - padding: 5px; - } - - hr { - height: 3px; - background: rgba(196, 196, 196, 0.74); - width: 75%; - outline: none; - border: none; - } -} - -@media (max-height: 999px) and (min-height: 920px) { - ul.sidebar { - min-height: 160vh; - } -} - -@media (max-height: 919px) and (min-height: 700px) { - ul.sidebar { - min-height: 200vh; - } -} - -@media (max-height: 699px) and (min-height: 400px) { - ul.sidebar { - min-height: 260vh; - } -} - -li { - list-style: none; - font-size: 24px; - padding: 5px 30px 5px 30px; - cursor: pointer; - margin-top: 2px; +/* main modal */ +.mainModal { + padding: 25px; } #modal { @@ -189,224 +110,7 @@ li { } } -.tab-list-active { - background: var(--tab-active); -} - -@media only screen and (max-width: 1200px) { - li.tab-list-item { - span { - display: none; - } - } - - ul.sidebar { - h1 { - display: none; - } - } -} - -.tab-list-item { - &:hover { - background: var(--tab-active); - } -} - -.tab-content { - position: absolute; - - h3 { - text-transform: uppercase; - } -} - -@media only screen and (min-width: 2300px) { - .tab-content { - left: 350px; - top: 7%; - } -} - -@media only screen and (max-width: 1920px) { - .tab-content { - left: 120px; - top: 50px; - } -} - -@media only screen and (min-width: 1920px) { - .tab-content { - left: 350px; - top: 7%; - } -} - -@media only screen and (max-width: 1400px), (min-width: 1400px) { - .tab-content { - left: 350px; - top: 75px; - } -} - -@media only screen and (max-width: 1200px) { - .tab-content { - left: 125px; - top: 75px; - } -} - -.navbar-item { - font-size: 22px; - font-weight: 500; - display: inline-flex; - - &:hover { - color: grey; - background: none; - } - - span, - svg { - font-size: 1.1em !important; - } - - svg { - font-size: 1.2em !important; - } -} - -@supports (-webkit-hyphens: none) { - .navbar-item { - display: inline-block !important; - } -} - -.modalNavbar { - position: absolute; - left: 20rem; - top: 1rem; - justify-content: center; - - svg { - margin-right: 0.5rem; - padding: 3px; - vertical-align: middle; - } -} - -@media only screen and (max-width: 1200px) { - .modalNavbar { - left: 6rem; - } -} - -@media only screen and (max-width: 800px) { - li.navbar-item { - span { - display: none; - } - } -} - -@media only screen and (min-width: 1200px) { - ul.sidebar { - width: 310px; - align-items: center; - } -} - -.navbar-item-active { - background: map-get($theme-colours, 'gradient'); - -webkit-background-clip: text; - background-clip: text; - color: transparent; - - svg { - color: orange; - } - - &:hover { - background: map-get($theme-colours, 'gradient'); - -webkit-background-clip: text; - background-clip: text; - color: transparent; - } -} - -::-webkit-scrollbar { - width: 6px; - height: 6px; - border-top-right-radius: map-get($modal, 'border-radius'); - border-bottom-right-radius: map-get($modal, 'border-radius'); -} - -::-webkit-scrollbar-thumb { - background: #636e72; - border-top-right-radius: map-get($modal, 'border-radius'); - border-bottom-right-radius: map-get($modal, 'border-radius'); -} - -.abouticon { - width: 96px; - height: auto; - border-radius: 50%; - padding-right: 5px; -} - -.resetmodal { - min-height: 300px !important; - max-width: 300px !important; - margin: auto; - font-size: 1rem; - - h4 { - cursor: initial; - font-size: 1.1rem; - } -} - -.resetfooter { - position: absolute; - bottom: 20px; - width: 300px; - justify-content: center; - display: flex; - - button.reset { - margin-right: 43px; - } -} - -.resetoverlay { - background-color: rgba(0, 0, 0, 0.5); -} - -.aboutIcon { - color: var(--modal-text) !important; - padding-right: 10px; - - &:hover { - opacity: 0.8; - } -} - -.aboutLink { - &:hover { - opacity: 0.8; - } -} - -.aboutLogo { - height: 100px; - width: auto; - margin-left: -15px; -} - -.MuiFormControl-root { - margin-top: 10px !important; -} - +/* fixes for font size on extension */ label, p, span.modalLink { @@ -424,7 +128,3 @@ h3 { h5 { font-size: 0.8rem; } - -.checkbox svg { - fill: var(--modal-text) !important; -} diff --git a/src/components/modals/main/scss/marketplace/_main.scss b/src/components/modals/main/scss/marketplace/_main.scss index 8d2f7e94..1ef49114 100644 --- a/src/components/modals/main/scss/marketplace/_main.scss +++ b/src/components/modals/main/scss/marketplace/_main.scss @@ -1,18 +1,7 @@ -#item a { - color: var(--modal-link); - cursor: pointer; - - &:hover { - opacity: 0.8; - } -} - -.emptyitems { - width: 25vw; - display: flex; - justify-content: center; - margin-top: 90px; -} +@import 'modules/item'; +@import 'modules/buttons'; +@import 'modules/featured'; +@import 'modules/lightbox'; .items { display: inline-grid; @@ -89,34 +78,11 @@ } } -p.author { - margin-top: -5px; -} - -#item { - h1 { - font-size: 40px; - line-height: 20px; - } - - img { - float: left; - } -} - -.side { - float: right; - margin-left: 20px; -} - -#item>h1, -#item>.MuiSvgIcon-root { - display: inline; -} - -p.description { - margin-top: 0px; - max-width: 800px; +.emptyitems { + width: 25vw; + display: flex; + justify-content: center; + margin-top: 90px; } .emptyMessage { @@ -138,43 +104,8 @@ p.description { } } -.backArrow { - cursor: pointer; - width: 2rem !important; - height: 2rem !important; - - &:hover { - color: grey; - } -} - -.informationContainer { - margin-top: 150px; - position: absolute; -} - -.productInformation { - padding: 10px; - background: var(--sidebar); - width: 350px; - border-radius: 12px; - - h4 { - cursor: initial !important; - } - - li { - margin-left: -4px; - list-style: none; - font-size: 16px; - cursor: initial !important; - - &.header { - text-transform: uppercase; - color: #787878; - margin-left: -5px; - } - } +p.author { + margin-top: -5px; } #item>img, @@ -185,50 +116,3 @@ p.description { width: auto; cursor: pointer; } - -.featured { - margin-top: 40px; - border-radius: 15px; - padding: 50px; - color: #fff; - box-shadow: 0 0 10px rgb(0 0 0 / 30%); - width: 85%; - - button { - float: left; - margin-top: -7px; - border: 2px solid map-get($theme-colours, 'main'); - color: map-get($theme-colours, 'main'); - - &:hover { - background: map-get($theme-colours, 'main'); - color: #2d3436; - } - } - - h1 { - margin-top: -20px; - font-size: 2rem; - } -} - -.lightboxmodal { - margin: auto; - max-width: 60%; - background: none !important; - box-shadow: none !important; - - img { - height: auto; - width: 100%; - } - - .closeModal { - color: #fff; - text-shadow: 0 0 20px rgb(0 0 0 / 30%); - } -} - -.overview { - font-size: 30px !important; -} diff --git a/src/components/modals/main/scss/marketplace/_buttons.scss b/src/components/modals/main/scss/marketplace/modules/_buttons.scss similarity index 100% rename from src/components/modals/main/scss/marketplace/_buttons.scss rename to src/components/modals/main/scss/marketplace/modules/_buttons.scss diff --git a/src/components/modals/main/scss/marketplace/modules/_featured.scss b/src/components/modals/main/scss/marketplace/modules/_featured.scss new file mode 100644 index 00000000..e2c62b56 --- /dev/null +++ b/src/components/modals/main/scss/marketplace/modules/_featured.scss @@ -0,0 +1,25 @@ +.featured { + margin-top: 40px; + border-radius: 15px; + padding: 50px; + color: #fff; + box-shadow: 0 0 10px rgb(0 0 0 / 30%); + width: 85%; + + button { + float: left; + margin-top: -7px; + border: 2px solid map-get($theme-colours, 'main'); + color: map-get($theme-colours, 'main'); + + &:hover { + background: map-get($theme-colours, 'main'); + color: #2d3436; + } + } + + h1 { + margin-top: -20px; + font-size: 2rem; + } +} diff --git a/src/components/modals/main/scss/marketplace/modules/_item.scss b/src/components/modals/main/scss/marketplace/modules/_item.scss new file mode 100644 index 00000000..62b40bae --- /dev/null +++ b/src/components/modals/main/scss/marketplace/modules/_item.scss @@ -0,0 +1,77 @@ +#item { + h1 { + font-size: 40px; + line-height: 20px; + } + + img { + float: left; + } + + a { + color: var(--modal-link); + cursor: pointer; + + &:hover { + opacity: 0.8; + } + } +} + +.side { + float: right; + margin-left: 20px; +} + +#item>h1, +#item>.MuiSvgIcon-root { + display: inline; +} + +p.description { + margin-top: 0px; + max-width: 800px; +} + +.backArrow { + cursor: pointer; + width: 2rem !important; + height: 2rem !important; + + &:hover { + color: grey; + } +} + +.informationContainer { + margin-top: 150px; + position: absolute; +} + +.productInformation { + padding: 10px; + background: var(--sidebar); + width: 350px; + border-radius: 12px; + + h4 { + cursor: initial !important; + } + + li { + margin-left: -4px; + list-style: none; + font-size: 16px; + cursor: initial !important; + + &.header { + text-transform: uppercase; + color: #787878; + margin-left: -5px; + } + } +} + +.overview { + font-size: 30px !important; +} diff --git a/src/components/modals/main/scss/marketplace/modules/_lightbox.scss b/src/components/modals/main/scss/marketplace/modules/_lightbox.scss new file mode 100644 index 00000000..92b059db --- /dev/null +++ b/src/components/modals/main/scss/marketplace/modules/_lightbox.scss @@ -0,0 +1,16 @@ +.lightboxmodal { + margin: auto; + max-width: 60%; + background: none !important; + box-shadow: none !important; + + img { + height: auto; + width: 100%; + } + + .closeModal { + color: #fff; + text-shadow: 0 0 20px rgb(0 0 0 / 30%); + } +} diff --git a/src/components/modals/main/scss/modules/_links.scss b/src/components/modals/main/scss/modules/_links.scss new file mode 100644 index 00000000..cee92031 --- /dev/null +++ b/src/components/modals/main/scss/modules/_links.scss @@ -0,0 +1,25 @@ +.resetLink { + color: var(--modal-link); + cursor: pointer; + + &:hover { + opacity: 0.8; + } + + span { + font-size: 1.2rem; + color: var(--modal-link); + vertical-align: text-bottom; + margin-left: 5px; + } +} + +.modalLink { + color: var(--modal-link); + cursor: pointer; + margin-left: 5px; + + &:hover { + opacity: 0.8; + } +} diff --git a/src/components/modals/main/scss/modules/_navbar.scss b/src/components/modals/main/scss/modules/_navbar.scss new file mode 100644 index 00000000..c0c6f5bd --- /dev/null +++ b/src/components/modals/main/scss/modules/_navbar.scss @@ -0,0 +1,71 @@ +.navbar-item { + font-size: 22px; + font-weight: 500; + display: inline-flex; + + &:hover { + color: grey; + background: none; + } + + span, + svg { + font-size: 1.1em !important; + } + + svg { + font-size: 1.2em !important; + } +} + +/* safari fix */ +@supports (-webkit-hyphens: none) { + .navbar-item { + display: inline-block !important; + } +} + +.modalNavbar { + position: absolute; + left: 20rem; + top: 1rem; + justify-content: center; + + svg { + margin-right: 0.5rem; + padding: 3px; + vertical-align: middle; + } +} + +@media only screen and (max-width: 1200px) { + .modalNavbar { + left: 6rem; + } +} + +@media only screen and (max-width: 800px) { + li.navbar-item { + span { + display: none; + } + } +} + +.navbar-item-active { + background: map-get($theme-colours, 'gradient'); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + + svg { + color: orange; + } + + &:hover { + background: map-get($theme-colours, 'gradient'); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + } +} diff --git a/src/components/modals/main/scss/modules/_scrollbars.scss b/src/components/modals/main/scss/modules/_scrollbars.scss new file mode 100644 index 00000000..b324add5 --- /dev/null +++ b/src/components/modals/main/scss/modules/_scrollbars.scss @@ -0,0 +1,12 @@ +::-webkit-scrollbar { + width: 6px; + height: 6px; + border-top-right-radius: map-get($modal, 'border-radius'); + border-bottom-right-radius: map-get($modal, 'border-radius'); +} + +::-webkit-scrollbar-thumb { + background: #636e72; + border-top-right-radius: map-get($modal, 'border-radius'); + border-bottom-right-radius: map-get($modal, 'border-radius'); +} diff --git a/src/components/modals/main/scss/modules/_sidebar.scss b/src/components/modals/main/scss/modules/_sidebar.scss new file mode 100644 index 00000000..55c35140 --- /dev/null +++ b/src/components/modals/main/scss/modules/_sidebar.scss @@ -0,0 +1,87 @@ +ul.sidebar { + position: absolute; + top: 0; + left: 0; + margin: 0; + padding-left: 0; + background: var(--sidebar); + border-radius: 12px 0 0 12px; + text-align: left; + font-size: 24px; + min-height: 100vh; + + h1 { + text-align: center; + font-size: 1.8em; + } + + svg { + vertical-align: middle; + padding: 5px; + } + + hr { + height: 3px; + background: rgba(196, 196, 196, 0.74); + width: 75%; + outline: none; + border: none; + } +} + +@media (max-height: 999px) and (min-height: 920px) { + ul.sidebar { + min-height: 160vh; + } +} + +@media (max-height: 919px) and (min-height: 700px) { + ul.sidebar { + min-height: 200vh; + } +} + +@media (max-height: 699px) and (min-height: 400px) { + ul.sidebar { + min-height: 260vh; + } +} + +@media only screen and (min-width: 1200px) { + ul.sidebar { + width: 310px; + align-items: center; + } +} + +li { + list-style: none; + font-size: 24px; + padding: 5px 30px 5px 30px; + cursor: pointer; + margin-top: 2px; +} + +.tab-list-active { + background: var(--tab-active); +} + +@media only screen and (max-width: 1200px) { + li.tab-list-item { + span { + display: none; + } + } + + ul.sidebar { + h1 { + display: none; + } + } +} + +.tab-list-item { + &:hover { + background: var(--tab-active); + } +} diff --git a/src/components/modals/main/scss/modules/_tab-content.scss b/src/components/modals/main/scss/modules/_tab-content.scss new file mode 100644 index 00000000..9047e1db --- /dev/null +++ b/src/components/modals/main/scss/modules/_tab-content.scss @@ -0,0 +1,43 @@ +.tab-content { + position: absolute; + + h3 { + text-transform: uppercase; + } +} + +@media only screen and (min-width: 2300px) { + .tab-content { + left: 350px; + top: 7%; + } +} + +@media only screen and (max-width: 1920px) { + .tab-content { + left: 120px; + top: 50px; + } +} + +@media only screen and (min-width: 1920px) { + .tab-content { + left: 350px; + top: 7%; + } +} + +@media only screen and (max-width: 1400px), +(min-width: 1400px) { + .tab-content { + left: 350px; + top: 75px; + } +} + +@media only screen and (max-width: 1200px) { + .tab-content { + left: 125px; + top: 75px; + } +} diff --git a/src/components/modals/main/scss/settings/_buttons.scss b/src/components/modals/main/scss/settings/_buttons.scss index c265f30b..65d54c53 100644 --- a/src/components/modals/main/scss/settings/_buttons.scss +++ b/src/components/modals/main/scss/settings/_buttons.scss @@ -24,7 +24,7 @@ } } -.add { +.add, .close { @extend %settingsButton; background-color: map-get($button-colours, 'other'); @@ -37,16 +37,7 @@ } .close { - @extend %settingsButton; - padding: 10px 50px 10px 50px; - background-color: map-get($button-colours, 'other'); - border: 2px solid map-get($button-colours, 'other'); - - &:hover { - color: map-get($button-colours, 'other'); - border: 2px solid map-get($button-colours, 'other'); - } } .export, @@ -68,33 +59,3 @@ .import { margin-left: 20px; } - -.MuiIconButton-label > svg.MuiSvgIcon-root { - color: var(--modal-text) !important; -} - -.sortableitem { - background: var(--sidebar) !important; - padding: 10px 80px; - padding-left: 10px; - border-radius: 15px; - margin-bottom: 10px; - font-size: 1.325rem; - color: var(--modal-text) !important; - cursor: move; - width: 150px; - z-index: 999 !important; - - svg { - font-size: 1.3rem; - } - - &:hover { - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.15); - transition: 0.3s; - } -} - -.MuiTouchRipple-root { - background: transparent; -} diff --git a/src/components/modals/main/scss/settings/_daypicker.scss b/src/components/modals/main/scss/settings/_daypicker.scss deleted file mode 100644 index a0c42de9..00000000 --- a/src/components/modals/main/scss/settings/_daypicker.scss +++ /dev/null @@ -1,26 +0,0 @@ -.DayPickerInput, -.input-container { - input { - width: 200px; - color: var(--modal-text) !important; - background: var(--sidebar); - border: none; - padding: 10px 10px; - border-radius: 5px; - } -} - -.DayPicker-Day--selected { - background-color: #ff4757 !important; - color: white; -} - -.DayPicker-Months, -.DayPickerInput-Overlay { - background-color: var(--background) !important; - color: var(--modal-text) !important; -} - -.DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover { - color: black !important; -} diff --git a/src/components/modals/main/scss/settings/_main.scss b/src/components/modals/main/scss/settings/_main.scss index 5b5af519..63320151 100644 --- a/src/components/modals/main/scss/settings/_main.scss +++ b/src/components/modals/main/scss/settings/_main.scss @@ -1,4 +1,16 @@ +@import 'modules/dropdown'; +@import 'modules/resetmodal'; +@import 'modules/material-ui'; +@import 'modules/slider'; +@import 'modules/reminder'; +@import 'modules/textarea'; + +@import 'modules/tabs/about'; +@import 'modules/tabs/changelog'; +@import 'modules/tabs/order'; + input { + /* text input */ &[type=text] { width: 200px; color: var(--modal-text); @@ -8,6 +20,7 @@ input { border-radius: 5px; } + /* colour picker */ &[type=color] { border-radius: 100%; height: 30px; @@ -28,6 +41,7 @@ input { } } + /* firefox fixes for colour picker (using "," didn't work) */ &[type=color]::-moz-color-swatch { border-radius: 100%; height: 30px; @@ -48,6 +62,7 @@ input { } } + /* date picker */ &[type=date] { width: 200px; color: var(--modal-text); @@ -58,6 +73,7 @@ input { } } +/* dark theme date picker fix */ .dark { ::-webkit-calendar-picker-indicator { filter: invert(1); @@ -67,176 +83,3 @@ input { h4 { cursor: pointer; } - -ul { - padding-left: 0px; - margin: 0; - - >label { - vertical-align: middle; - } -} - -.range { - -webkit-appearance: none; - width: 200px; - height: 12px; - border-radius: 12px; - outline: none; - background: var(--sidebar); - box-shadow: 0 0 100px rgba(0, 0, 0, 0.3); - - &::-webkit-slider-thumb { - -webkit-appearance: none; - appearance: none; - width: 20px; - height: 20px; - border-radius: 12px; - background: var(--modal-text); - cursor: pointer; - } - - &::-moz-range-thumb { - width: 20px; - height: 20px; - border-radius: 12px; - border: 0; - background: var(--modal-text); - cursor: pointer; - } -} - -.settingsTextarea { - font-family: Consolas !important; - padding: 15px; - border-radius: 15px; - background-color: var(--sidebar) !important; - border: none; - margin-left: 0; - width: 400px; - height: 200px; - max-width: 60%; -} - -.MuiCheckbox-colorPrimary.Mui-checked, -.MuiSwitch-colorPrimary.Mui-checked, -.MuIconButton-colorPrimary.Mui-checked, -.MuiSwitch-thumb, -.MuiRadio-colorSecondary.Mui-checked, -.PrivateSwitchBase-input-4, -.MuiRadio-root, -.aboutLink, -legend { - color: var(--modal-text) !important; -} - -.MuiFormControlLabel-labelPlacementStart { - margin-left: 0px !important; -} - -.MuiSwitch-colorPrimary.Mui-checked+.MuiSwitch-track { - background: darkgray !important; -} - -.reminder-info { - position: absolute; - bottom: 20px; - right: 20px; - padding: 15px; - color: var(--modal-text); - background: var(--sidebar); - max-width: 300px; - border-radius: 0.7em; - - h1 { - font-size: 1rem; - } -} - -.radio-title { - text-transform: uppercase; - font-weight: bold; - font-size: 1.17rem; -} - -.radio-title-small { - text-transform: uppercase; - font-weight: bold; - font-size: 1rem; -} - -.sortableitem { - color: var(--modal-text) !important; - cursor: move; -} - -.updatechangelog { - max-width: 75%; - - li { - cursor: initial; - font-size: 1rem; - list-style-type: disc; - padding: 0; - margin-left: 20px; - } - - a { - color: var(--modal-link); - - &:hover { - opacity: 0.8; - } - } -} - -.changelogtab { - h1 { - max-width: 85%; - font-size: 2rem; - margin-bottom: -10px !important; - } - - h5 { - line-height: 0px !important; - } - - img { - max-width: 95%; - } -} - -.sliderText { - color: var(--modal-text); - background: none; - border: none; - border-radius: 0; - font-size: 1rem; -} - -input::-webkit-outer-spin-button, -input::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; -} - -input[type=number] { - -moz-appearance: textfield; -} - -.resetArea { - h2 { - font-size: 2rem !important; - } - - h2, - span, - svg { - display: inline; - } - - svg { - vertical-align: sub; - font-size: 1.4rem; - } -} diff --git a/src/components/modals/main/scss/settings/_dropdown.scss b/src/components/modals/main/scss/settings/modules/_dropdown.scss similarity index 100% rename from src/components/modals/main/scss/settings/_dropdown.scss rename to src/components/modals/main/scss/settings/modules/_dropdown.scss diff --git a/src/components/modals/main/scss/settings/modules/_material-ui.scss b/src/components/modals/main/scss/settings/modules/_material-ui.scss new file mode 100644 index 00000000..cf9b7704 --- /dev/null +++ b/src/components/modals/main/scss/settings/modules/_material-ui.scss @@ -0,0 +1,48 @@ +/* these are overrides for the material ui default styles */ +.MuiCheckbox-colorPrimary.Mui-checked, +.MuiSwitch-colorPrimary.Mui-checked, +.MuIconButton-colorPrimary.Mui-checked, +.MuiSwitch-thumb, +.MuiRadio-colorSecondary.Mui-checked, +.PrivateSwitchBase-input-4, +.MuiRadio-root, +.aboutLink, +legend { + color: var(--modal-text) !important; +} + +.MuiFormControlLabel-labelPlacementStart { + margin-left: 0px !important; +} + +.MuiSwitch-colorPrimary.Mui-checked+.MuiSwitch-track { + background: darkgray !important; +} + +.MuiIconButton-label>svg.MuiSvgIcon-root { + color: var(--modal-text) !important; +} + +.MuiTouchRipple-root { + background: transparent; +} + +.MuiFormControl-root { + margin-top: 10px !important; +} + +.checkbox svg { + fill: var(--modal-text) !important; +} + +.radio-title { + text-transform: uppercase; + font-weight: bold; + font-size: 1.17rem; +} + +.radio-title-small { + text-transform: uppercase; + font-weight: bold; + font-size: 1rem; +} diff --git a/src/components/modals/main/scss/settings/modules/_reminder.scss b/src/components/modals/main/scss/settings/modules/_reminder.scss new file mode 100644 index 00000000..7be620a9 --- /dev/null +++ b/src/components/modals/main/scss/settings/modules/_reminder.scss @@ -0,0 +1,14 @@ +.reminder-info { + position: absolute; + bottom: 20px; + right: 20px; + padding: 15px; + color: var(--modal-text); + background: var(--sidebar); + max-width: 300px; + border-radius: 0.7em; + + h1 { + font-size: 1rem; + } +} diff --git a/src/components/modals/main/scss/settings/modules/_resetmodal.scss b/src/components/modals/main/scss/settings/modules/_resetmodal.scss new file mode 100644 index 00000000..1b489f78 --- /dev/null +++ b/src/components/modals/main/scss/settings/modules/_resetmodal.scss @@ -0,0 +1,27 @@ +.resetmodal { + min-height: 300px !important; + max-width: 300px !important; + margin: auto; + font-size: 1rem; + + h4 { + cursor: initial; + font-size: 1.1rem; + } +} + +.resetfooter { + position: absolute; + bottom: 20px; + width: 300px; + justify-content: center; + display: flex; + + button.reset { + margin-right: 43px; + } +} + +.resetoverlay { + background-color: rgba(0, 0, 0, 0.5); +} diff --git a/src/components/modals/main/scss/settings/modules/_slider.scss b/src/components/modals/main/scss/settings/modules/_slider.scss new file mode 100644 index 00000000..47805600 --- /dev/null +++ b/src/components/modals/main/scss/settings/modules/_slider.scss @@ -0,0 +1,46 @@ +.range { + -webkit-appearance: none; + width: 200px; + height: 12px; + border-radius: 12px; + outline: none; + background: var(--sidebar); + box-shadow: 0 0 100px rgba(0, 0, 0, 0.3); + + &::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 20px; + height: 20px; + border-radius: 12px; + background: var(--modal-text); + cursor: pointer; + } + + &::-moz-range-thumb { + width: 20px; + height: 20px; + border-radius: 12px; + border: 0; + background: var(--modal-text); + cursor: pointer; + } +} + +.sliderText { + color: var(--modal-text); + background: none; + border: none; + border-radius: 0; + font-size: 1rem; +} + +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +input[type=number] { + -moz-appearance: textfield; +} diff --git a/src/components/modals/main/scss/settings/modules/_textarea.scss b/src/components/modals/main/scss/settings/modules/_textarea.scss new file mode 100644 index 00000000..0b1717eb --- /dev/null +++ b/src/components/modals/main/scss/settings/modules/_textarea.scss @@ -0,0 +1,11 @@ +.settingsTextarea { + font-family: Consolas !important; + padding: 15px; + border-radius: 15px; + background-color: var(--sidebar) !important; + border: none; + margin-left: 0; + width: 400px; + height: 200px; + max-width: 60%; +} diff --git a/src/components/modals/main/scss/settings/modules/tabs/_about.scss b/src/components/modals/main/scss/settings/modules/tabs/_about.scss new file mode 100644 index 00000000..c1672a2d --- /dev/null +++ b/src/components/modals/main/scss/settings/modules/tabs/_about.scss @@ -0,0 +1,27 @@ +.aboutIcon { + color: var(--modal-text) !important; + padding-right: 10px; + + &:hover { + opacity: 0.8; + } +} + +.aboutLink { + &:hover { + opacity: 0.8; + } +} + +.aboutLogo { + height: 100px; + width: auto; + margin-left: -15px; +} + +.abouticon { + width: 96px; + height: auto; + border-radius: 50%; + padding-right: 5px; +} diff --git a/src/components/modals/main/scss/settings/modules/tabs/_changelog.scss b/src/components/modals/main/scss/settings/modules/tabs/_changelog.scss new file mode 100644 index 00000000..a04e0291 --- /dev/null +++ b/src/components/modals/main/scss/settings/modules/tabs/_changelog.scss @@ -0,0 +1,35 @@ +.updatechangelog { + max-width: 75%; + + li { + cursor: initial; + font-size: 1rem; + list-style-type: disc; + padding: 0; + margin-left: 20px; + } + + a { + color: var(--modal-link); + + &:hover { + opacity: 0.8; + } + } +} + +.changelogtab { + h1 { + max-width: 85%; + font-size: 2rem; + margin-bottom: -10px !important; + } + + h5 { + line-height: 0px !important; + } + + img { + max-width: 95%; + } +} diff --git a/src/components/modals/main/scss/settings/modules/tabs/_order.scss b/src/components/modals/main/scss/settings/modules/tabs/_order.scss new file mode 100644 index 00000000..1ed538c0 --- /dev/null +++ b/src/components/modals/main/scss/settings/modules/tabs/_order.scss @@ -0,0 +1,30 @@ +.sortableitem { + background: var(--sidebar) !important; + padding: 10px 80px; + padding-left: 10px; + border-radius: 15px; + margin-bottom: 10px; + font-size: 1.325rem; + color: var(--modal-text) !important; + cursor: move; + width: 150px; + z-index: 999 !important; + + svg { + font-size: 1.3rem; + } + + &:hover { + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.15); + transition: 0.3s; + } +} + +ul { + padding-left: 0px; + margin: 0; + + >label { + vertical-align: middle; + } +} diff --git a/src/components/modals/main/settings/KeybindInput.jsx b/src/components/modals/main/settings/KeybindInput.jsx index 0ced3175..19c9a38f 100644 --- a/src/components/modals/main/settings/KeybindInput.jsx +++ b/src/components/modals/main/settings/KeybindInput.jsx @@ -1,8 +1,8 @@ export default function KeybindInput(props) { const language = window.language.modals.main.settings; + const value = props.state[props.settingsName]; const getButton = () => { - const value = props.state[props.settingsName]; if (!value) { return null; } else if (value === language.sections.keybinds.recording) { @@ -15,7 +15,7 @@ export default function KeybindInput(props) { return ( <>

{props.name}

- props.set(props.settingsName)} value={props.state[props.settingsName] || language.sections.keybinds.click_to_record} readOnly/> + props.set(props.settingsName)} value={value || language.sections.keybinds.click_to_record} readOnly/> {getButton()} ); diff --git a/src/components/modals/main/tabs/backend/Tab.jsx b/src/components/modals/main/tabs/backend/Tab.jsx index e37e17ff..2ad2cd70 100644 --- a/src/components/modals/main/tabs/backend/Tab.jsx +++ b/src/components/modals/main/tabs/backend/Tab.jsx @@ -90,4 +90,4 @@ function Tab({ label, currentTab, onClick, navbarTab }) { ); } -export default memo(Tab); \ No newline at end of file +export default memo(Tab);