mirror of https://github.com/mue/mue.git
chore: improve lint, run prettier, alex added fade-in thing on navbar
This commit is contained in:
David Ralph
parent
510dc1c023
commit
f5d9ad11a5
|
|
@ -1,4 +1,4 @@
|
|||
module.exports = {
|
||||
extends: 'react-app',
|
||||
parser: '@babel/eslint-parser',
|
||||
extends: ['react-app', 'prettier'],
|
||||
ignorePatterns: ['node_modules/', 'build/', 'coverage/', '*.scss', '*.css', '*.json'],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,3 +1,10 @@
|
|||
{
|
||||
"extends": ["stylelint-config-standard-scss", "stylelint-config-prettier-scss"]
|
||||
"extends": ["stylelint-config-standard-scss", "stylelint-config-prettier-scss"],
|
||||
"formatter": "stylelint-checkstyle-formatter",
|
||||
"plugins": ["stylelint-scss"],
|
||||
"customSyntax": "postcss-scss",
|
||||
"rules": {
|
||||
"selector-class-pattern": null,
|
||||
"no-descending-specificity": null
|
||||
}
|
||||
}
|
||||
|
|
|
|||
27
package.json
27
package.json
|
|
@ -38,34 +38,29 @@
|
|||
"@eartharoid/deep-merge": "^0.0.2",
|
||||
"@vitejs/plugin-react": "3.1.0",
|
||||
"eslint": "^8.36.0",
|
||||
"eslint-config-prettier": "^8.7.0",
|
||||
"eslint-config-react-app": "^7.0.1",
|
||||
"husky": "^8.0.3",
|
||||
"postcss-scss": "^4.0.6",
|
||||
"prettier": "^2.8.4",
|
||||
"sass": "^1.59.2",
|
||||
"stylelint": "^15.2.0",
|
||||
"stylelint-checkstyle-formatter": "^0.1.2",
|
||||
"stylelint-config-prettier-scss": "^0.0.1",
|
||||
"stylelint-config-standard-scss": "^7.0.1",
|
||||
"stylelint-scss": "^4.4.0",
|
||||
"vite": "4.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"updatetranslations": "cd scripts && node updatetranslations.js",
|
||||
"dev:host": "vite --host",
|
||||
"translations": "cd scripts && node updatetranslations.js",
|
||||
"build": "vite build",
|
||||
"chrome": "cp manifest/chrome.json dist/manifest.json && cp -r manifest/_locales dist/_locales && cp manifest/background-chrome.js dist/background-chrome.js",
|
||||
"firefox": "rm -rf dist/_locales && cp manifest/firefox.json dist/manifest.json",
|
||||
"pretty": "prettier --write \"./**/*.{js,jsx,json,scss}\"",
|
||||
"stylelint": "npx stylelint \"**/*.scss\"",
|
||||
"prepare:chrome": "cp manifest/chrome.json dist/manifest.json && cp -r manifest/_locales dist/_locales && cp manifest/background-chrome.js dist/background-chrome.js",
|
||||
"prepare:firefox": "rm -rf dist/_locales && cp manifest/firefox.json dist/manifest.json",
|
||||
"pretty": "prettier --write \"./**/*.{js,jsx,json,scss,css}\"",
|
||||
"lint": "eslint --ext .js,.jsx src/** && stylelint \"**/*.scss\"",
|
||||
"lint:fix": "eslint --ext .js,.jsx src/** --fix && stylelint \"**/*.scss\" --fix",
|
||||
"postinstall": "husky install"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
1233
pnpm-lock.yaml
1233
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
.suggestions {
|
||||
@extend %basic;
|
||||
|
||||
text-align: left;
|
||||
border-top-width: 0;
|
||||
list-style: none;
|
||||
|
|
@ -16,7 +17,7 @@
|
|||
font-size: 0.6em;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
background-color: rgb(255 255 255 / 80%);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
@ -29,16 +30,16 @@
|
|||
}
|
||||
|
||||
.dark .suggestions {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
background: rgb(0 0 0 / 70%);
|
||||
color: white;
|
||||
|
||||
li {
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
background: rgb(0 0 0 / 70%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.micActive {
|
||||
box-shadow: 0px 0px 50px 1px #e74c3c !important;
|
||||
box-shadow: 0 0 50px 1px #e74c3c !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,21 +7,23 @@
|
|||
.carousel_viewport {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
|
||||
&.is-draggable {
|
||||
cursor: move;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
&.is-dragging {
|
||||
cursor: grabbing;
|
||||
}
|
||||
border-radius: 15px !important;
|
||||
|
||||
border-radius: 15px !important;
|
||||
}
|
||||
|
||||
.carousel_container {
|
||||
display: flex;
|
||||
user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
-khtml-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
|
@ -30,6 +32,7 @@
|
|||
position: relative;
|
||||
min-width: 100%;
|
||||
padding-left: 10px;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
display: block;
|
||||
|
|
@ -65,13 +68,16 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
|
||||
&:disabled {
|
||||
cursor: default;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
&.prev {
|
||||
left: 27px;
|
||||
}
|
||||
|
||||
&.next {
|
||||
right: 27px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
.preview-mode {
|
||||
@extend %basic;
|
||||
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
right: 1rem;
|
||||
|
|
@ -17,6 +18,7 @@
|
|||
|
||||
button {
|
||||
@include basicIconButton(10px, 14px, ui);
|
||||
|
||||
gap: 20px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,7 +55,9 @@ function ShareModal({ modalClose, data }) {
|
|||
<Tooltip title="Facebook">
|
||||
<button
|
||||
onClick={() =>
|
||||
window.open(`https://www.facebook.com/sharer/sharer.php?u=${data.url}`, '_blank').focus()
|
||||
window
|
||||
.open(`https://www.facebook.com/sharer/sharer.php?u=${data.url}`, '_blank')
|
||||
.focus()
|
||||
}
|
||||
>
|
||||
<FaFacebookF />
|
||||
|
|
|
|||
|
|
@ -2,52 +2,62 @@
|
|||
|
||||
.smallModal {
|
||||
@extend %tabText;
|
||||
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 15px;
|
||||
padding: 15px;
|
||||
width: 320px;
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background: t($modal-secondaryColour);
|
||||
}
|
||||
|
||||
.resetFooter {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: flex-end;
|
||||
gap: 20px;
|
||||
|
||||
button {
|
||||
gap: 20px;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
}
|
||||
}
|
||||
|
||||
.textButton {
|
||||
@include basicIconButton(11px, 1.3rem, modal-text);
|
||||
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.tooltipTitle {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background: t($modal-sidebar);
|
||||
box-shadow: 0 0 0 1px t($modal-sidebarActive);
|
||||
color: t($color);
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
button {
|
||||
place-items: center;
|
||||
display: grid;
|
||||
@include basicIconButton(11px, 1.3rem, modal);
|
||||
}
|
||||
|
||||
.copy {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
gap: 15px;
|
||||
|
||||
input[type='text'] {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background: t($modal-sidebar);
|
||||
border-radius: t($borderRadius);
|
||||
box-shadow: 0 0 0 1px t($modal-sidebarActive);
|
||||
|
|
@ -55,12 +65,14 @@
|
|||
flex: 1;
|
||||
color: t($color);
|
||||
}
|
||||
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
input[type='text'] {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background: t($modal-sidebar);
|
||||
border-radius: t($borderRadius);
|
||||
box-shadow: 0 0 0 1px t($modal-sidebarActive);
|
||||
|
|
@ -68,16 +80,19 @@
|
|||
flex: 1;
|
||||
color: t($color);
|
||||
}
|
||||
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.close {
|
||||
padding: 15px;
|
||||
place-items: center;
|
||||
display: grid;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background: t($modal-sidebar);
|
||||
border-radius: t($borderRadius);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,22 +12,24 @@
|
|||
}
|
||||
|
||||
100% {
|
||||
transform: translate(0, -0px);
|
||||
transform: translate(0, -0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltipTitle {
|
||||
@extend %basic;
|
||||
|
||||
text-align: center;
|
||||
font-size: 0.6rem;
|
||||
padding: 5px 10px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
/*top: 100%;
|
||||
|
||||
/* top: 100%;
|
||||
left: 50%;
|
||||
margin-top: 15px;
|
||||
margin-left: -30px;*/
|
||||
margin-left: -30px; */
|
||||
cursor: initial;
|
||||
user-select: none;
|
||||
opacity: 1;
|
||||
|
|
@ -38,7 +40,7 @@
|
|||
|
||||
#modal {
|
||||
.tooltipTitle {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background: t($modal-sidebar);
|
||||
box-shadow: 0 0 0 1px t($modal-sidebarActive);
|
||||
color: t($color);
|
||||
|
|
@ -52,20 +54,23 @@
|
|||
}
|
||||
}
|
||||
|
||||
.tooltipTitle:before {
|
||||
.tooltipTitle::before {
|
||||
transform: scale3d(0.2, 0.2, 1);
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
.tooltipTitle:after {
|
||||
|
||||
.tooltipTitle::after {
|
||||
transform: translate3d(0, 6px, 0);
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
.tooltipTitle:hover:before,
|
||||
.tooltipTitle:hover:after {
|
||||
|
||||
.tooltipTitle:hover::before,
|
||||
.tooltipTitle:hover::after {
|
||||
opacity: 1;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
.tooltipTitle:hover:after {
|
||||
|
||||
.tooltipTitle:hover::after {
|
||||
transition: all 0.2s 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
|
|
@ -80,10 +85,12 @@
|
|||
.infoTooltip {
|
||||
position: relative;
|
||||
display: grid;
|
||||
|
||||
svg {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($color);
|
||||
}
|
||||
}
|
||||
|
|
@ -92,7 +99,6 @@
|
|||
|
||||
.infoTooltipTitle {
|
||||
min-width: 200px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
cursor: initial;
|
||||
|
|
@ -104,30 +110,34 @@
|
|||
justify-content: center;
|
||||
flex-flow: column;
|
||||
gap: 10px;
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background-color: t($modal-background);
|
||||
border-radius: t($borderRadius);
|
||||
box-shadow: 0 0 0 1px t($modal-sidebarActive);
|
||||
}
|
||||
|
||||
.tooltipHeader {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.link {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.close {
|
||||
font-size: 20px;
|
||||
padding: 15px;
|
||||
place-items: center;
|
||||
display: grid;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background: t($modal-sidebar);
|
||||
border-radius: t($borderRadius);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -164,12 +164,14 @@ export default class Item extends PureComponent {
|
|||
<th>{variables.getMessage('modals.main.marketplace.product.setting')}</th>
|
||||
<th>{variables.getMessage('modals.main.marketplace.product.value')}</th>
|
||||
</tr>
|
||||
{Object.entries(this.props.data.data.settings).slice(0, this.state.count).map(([key, value]) => (
|
||||
<tr key={key}>
|
||||
<td>{key}</td>
|
||||
<td>{value}</td>
|
||||
</tr>
|
||||
))}
|
||||
{Object.entries(this.props.data.data.settings)
|
||||
.slice(0, this.state.count)
|
||||
.map(([key, value]) => (
|
||||
<tr key={key}>
|
||||
<td>{key}</td>
|
||||
<td>{value}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="showMoreItems">
|
||||
|
|
@ -270,7 +272,14 @@ export default class Item extends PureComponent {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="itemInfo" style={{ backgroundImage: `url("${variables.constants.DDG_IMAGE_PROXY + this.props.data.data.icon_url}")` }}>
|
||||
<div
|
||||
className="itemInfo"
|
||||
style={{
|
||||
backgroundImage: `url("${
|
||||
variables.constants.DDG_IMAGE_PROXY + this.props.data.data.icon_url
|
||||
}")`,
|
||||
}}
|
||||
>
|
||||
<div className="front">
|
||||
<img
|
||||
className="icon"
|
||||
|
|
@ -293,7 +302,7 @@ export default class Item extends PureComponent {
|
|||
onClick={() =>
|
||||
window.open(
|
||||
variables.constants.REPORT_ITEM +
|
||||
this.props.data.display_name.split(' ').join('+'),
|
||||
this.props.data.display_name.split(' ').join('+'),
|
||||
'_blank',
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -77,17 +77,20 @@ function Items({
|
|||
/>
|
||||
<div className="card-details">
|
||||
<span className="card-title">{item.display_name || item.name}</span>
|
||||
<span className="card-subtitle">{variables.getMessage('modals.main.marketplace.by', { author: item.author })}</span>
|
||||
{
|
||||
type === 'all' && !onCollection
|
||||
? <span className="card-type">
|
||||
{variables.getMessage(`modals.main.addons.create.types.${item.type.split('_')[0] === "preset"
|
||||
? "settings"
|
||||
<span className="card-subtitle">
|
||||
{variables.getMessage('modals.main.marketplace.by', { author: item.author })}
|
||||
</span>
|
||||
{type === 'all' && !onCollection ? (
|
||||
<span className="card-type">
|
||||
{variables.getMessage(
|
||||
`modals.main.addons.create.types.${
|
||||
item.type.split('_')[0] === 'preset'
|
||||
? 'settings'
|
||||
: item.type.split('_')[0] + 's'
|
||||
}`)}
|
||||
</span>
|
||||
: null
|
||||
}
|
||||
}`,
|
||||
)}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -24,16 +24,16 @@
|
|||
}
|
||||
|
||||
.Modal {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($color);
|
||||
}
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
|
||||
|
||||
box-shadow: 0 0 20px rgb(0 0 0 / 30%);
|
||||
opacity: 1;
|
||||
z-index: -2;
|
||||
transition-timing-function: ease-in;
|
||||
border-radius: map-get($modal, 'border-radius');
|
||||
user-select: none;
|
||||
|
||||
overflow-y: auto;
|
||||
transform: scale(0);
|
||||
transition: all 0.3s cubic-bezier(0.47, 1.64, 0.41, 0.8);
|
||||
|
|
@ -55,11 +55,13 @@
|
|||
padding: 0.5em;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(121, 121, 121, 0.226);
|
||||
background: rgb(121 121 121 / 22.6%);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -82,7 +84,7 @@
|
|||
#modal {
|
||||
height: 80vh;
|
||||
width: clamp(60vw, 1200px, 90vw);
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background-color: t($modal-background);
|
||||
}
|
||||
}
|
||||
|
|
@ -118,23 +120,23 @@ h5 {
|
|||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
@include themed() {
|
||||
@include themed {
|
||||
border: 3px solid t($modal-sidebar);
|
||||
border-radius: 50%;
|
||||
border-top-color: t($modal-sidebarActive);
|
||||
}
|
||||
|
||||
animation: spin 1s ease-in-out infinite;
|
||||
-webkit-animation: spin 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes spin {
|
||||
@keyframes spin {
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -143,14 +145,17 @@ h5 {
|
|||
flex-flow: column;
|
||||
gap: -1px;
|
||||
padding: 10px 0;
|
||||
|
||||
div:nth-child(1) {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
form {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.link {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
|
|
@ -169,20 +174,24 @@ h5 {
|
|||
|
||||
.languageSettings {
|
||||
margin-bottom: 15px;
|
||||
|
||||
.MuiFormGroup-root {
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.MuiFormControl-root {
|
||||
width: 100% !important;
|
||||
gap: 15px;
|
||||
|
||||
.MuiFormControlLabel-root {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-between;
|
||||
padding: 5px 5px 5px 20px;
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background: t($modal-sidebar);
|
||||
border-radius: t($borderRadius);
|
||||
|
||||
&:hover {
|
||||
background: t($modal-sidebarActive);
|
||||
}
|
||||
|
|
@ -195,7 +204,8 @@ h5 {
|
|||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 15px 0 15px 0;
|
||||
padding: 15px 0;
|
||||
|
||||
.link {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
|
|
@ -212,27 +222,32 @@ h5 {
|
|||
padding: 25px;
|
||||
margin-top: 20px;
|
||||
transition: 0.5s;
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background: t($modal-sidebar);
|
||||
border-radius: t($borderRadius);
|
||||
box-shadow: 0 0 0 1px t($modal-sidebarActive);
|
||||
|
||||
&:hover {
|
||||
background: t($modal-sidebarActive);
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.action {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
|
|
@ -248,20 +263,24 @@ h5 {
|
|||
bottom: 0;
|
||||
padding: 15px;
|
||||
gap: 15px;
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background-color: t($modal-secondaryColour);
|
||||
border-radius: t($borderRadius);
|
||||
border: 1px solid t($modal-sidebarActive);
|
||||
}
|
||||
|
||||
button {
|
||||
@include basicIconButton(5px, 5px, modal);
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
|
||||
svg {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
|
@ -274,38 +293,43 @@ h5 {
|
|||
flex-flow: column;
|
||||
gap: 5px;
|
||||
align-items: center;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
}
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.skeletonAuthor {
|
||||
font-size: smaller;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
gap: 25px;
|
||||
padding: 0 20px 0 5px;
|
||||
|
||||
svg {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background-color: t($modal-sidebar);
|
||||
padding: 10px;
|
||||
border-radius: t($borderRadius);
|
||||
place-items: center;
|
||||
}
|
||||
}
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background-color: t($modal-sidebarActive);
|
||||
border-radius: t($borderRadius);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: medium !important;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: smaller !important;
|
||||
}
|
||||
|
|
@ -317,6 +341,7 @@ h5 {
|
|||
display: flex;
|
||||
flex-flow: row;
|
||||
gap: 5px;
|
||||
|
||||
div {
|
||||
margin-top: 10px;
|
||||
padding: 3px;
|
||||
|
|
@ -325,7 +350,7 @@ h5 {
|
|||
border-radius: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background-color: t($modal-sidebarActive);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,7 +45,6 @@
|
|||
}
|
||||
|
||||
.item-back {
|
||||
filter: blur(60px) saturate(180%) brightness(90%);
|
||||
filter: blur(60px) saturate(180%) brightness(90%);
|
||||
position: absolute;
|
||||
object-fit: cover !important;
|
||||
|
|
@ -149,7 +148,6 @@
|
|||
box-sizing: border-box !important;
|
||||
border-radius: 12px 12px 0 0;
|
||||
backdrop-filter: blur(40px) saturate(150%) brightness(75%);
|
||||
backdrop-filter: blur(40px) saturate(150%) brightness(75%);
|
||||
@include themed {
|
||||
background-image: linear-gradient(to bottom, transparent, t($modal-background));
|
||||
}
|
||||
|
|
@ -335,9 +333,11 @@ p.author {
|
|||
.flexTopMarketplace {
|
||||
display: flex;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.tooltip {
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
.mainTitle {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
|
@ -422,7 +422,6 @@ p.author {
|
|||
border-radius: 150px;
|
||||
padding: 1px 12px;
|
||||
backdrop-filter: blur(16px) saturate(180%);
|
||||
backdrop-filter: blur(16px) saturate(180%);
|
||||
background-color: rgb(255 255 255 / 10%);
|
||||
border: 1px solid rgb(209 213 219 / 30%);
|
||||
color: #fff;
|
||||
|
|
@ -451,13 +450,11 @@ p.author {
|
|||
gap: 15px;
|
||||
padding: 1px 12px;
|
||||
backdrop-filter: blur(16px) saturate(180%) !important;
|
||||
backdrop-filter: blur(16px) saturate(180%) !important;
|
||||
background-color: rgb(255 255 255 / 10%) !important;
|
||||
border: 1px solid rgb(209 213 219 / 30%) !important;
|
||||
color: #fff !important;
|
||||
|
||||
&:hover {
|
||||
backdrop-filter: blur(16px) saturate(180%) !important;
|
||||
backdrop-filter: blur(16px) saturate(180%) !important;
|
||||
background-color: rgb(17 25 40 / 20%) !important;
|
||||
border: 1px solid rgb(255 255 255 / 12.5%) !important;
|
||||
|
|
@ -507,13 +504,11 @@ p.author {
|
|||
gap: 15px;
|
||||
padding: 1px 12px;
|
||||
backdrop-filter: blur(16px) saturate(180%);
|
||||
backdrop-filter: blur(16px) saturate(180%);
|
||||
background-color: rgb(255 255 255 / 10%);
|
||||
border: 1px solid rgb(209 213 219 / 30%);
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
backdrop-filter: blur(16px) saturate(180%);
|
||||
backdrop-filter: blur(16px) saturate(180%);
|
||||
background-color: rgb(17 25 40 / 20%);
|
||||
border: 1px solid rgb(255 255 255 / 12.5%);
|
||||
|
|
|
|||
|
|
@ -28,9 +28,9 @@ p.description {
|
|||
flex: 1 0 40% !important;
|
||||
}
|
||||
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background: t($modal-sidebar);
|
||||
box-shadow: t(boxShadow);
|
||||
box-shadow: t(boxshadow);
|
||||
border-radius: t($borderRadius);
|
||||
padding: 15px;
|
||||
|
||||
|
|
@ -67,7 +67,7 @@ p.description {
|
|||
font-size: 38px;
|
||||
font-weight: 600;
|
||||
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($color);
|
||||
}
|
||||
}
|
||||
|
|
@ -85,7 +85,7 @@ p.description {
|
|||
transition: 0.5s;
|
||||
cursor: pointer;
|
||||
|
||||
@include themed() {
|
||||
@include themed {
|
||||
&:hover {
|
||||
color: t($subColor);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,17 @@
|
|||
.navbar-item {
|
||||
flex-flow: row !important;
|
||||
padding: 0 15px 0 15px;
|
||||
@include themed() {
|
||||
padding: 0 15px;
|
||||
@include themed {
|
||||
background: t($modal-secondaryColour) !important;
|
||||
border-radius: t($borderRadius) !important;
|
||||
box-shadow: t($boxShadow) !important;
|
||||
border: 0px !important;
|
||||
border: 0 !important;
|
||||
|
||||
&:hover {
|
||||
background: t($modal-sidebarActive) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
background: var(--tab-active);
|
||||
|
|
@ -50,7 +52,7 @@
|
|||
}
|
||||
|
||||
.navbar-item-active {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background: t($modal-sidebarActive) !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,14 +4,15 @@
|
|||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 12px;
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background: t($modal-sidebar);
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background: t($modal-sidebarActive);
|
||||
}
|
||||
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import '../.../../../../../././../scss/variables';
|
||||
|
||||
.sidebar {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: sticky;
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
hr {
|
||||
height: 1px;
|
||||
background: #ccc;
|
||||
margin: 0 1.75rem 0 1.75rem;
|
||||
margin: 0 1.75rem;
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,24 +4,27 @@
|
|||
button {
|
||||
@include modal-button(standard);
|
||||
}
|
||||
@include themed() {
|
||||
padding: 1rem 3rem 3rem 3rem;
|
||||
@include themed {
|
||||
padding: 1rem 3rem 3rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
background: t($modal-background);
|
||||
@extend %tabText;
|
||||
|
||||
hr {
|
||||
width: 100%;
|
||||
background: rgba(196, 196, 196, 0.74);
|
||||
background: rgb(196 196 196 / 74%);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.settingsRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 100px;
|
||||
justify-content: space-between;
|
||||
/*border-top: 1px solid #ccc;*/
|
||||
|
||||
/* border-top: 1px solid #ccc; */
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
|
|
@ -29,16 +32,19 @@
|
|||
&.settingsNoBorder {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.action {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: flex-end;
|
||||
width: 300px;
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
width: 283px;
|
||||
|
|
@ -49,12 +55,10 @@
|
|||
}
|
||||
|
||||
.activityButtons {
|
||||
flex-wrap: wrap !important;
|
||||
justify-content: space-between !important;
|
||||
align-items: flex-end !important;
|
||||
align-content: space-between !important;
|
||||
flex-wrap: wrap !important;
|
||||
flex-direction: row !important;
|
||||
flex-flow: row wrap !important;
|
||||
|
||||
button:not(:first-child) {
|
||||
width: 40% !important;
|
||||
|
|
@ -69,18 +73,22 @@
|
|||
|
||||
table {
|
||||
border-collapse: separate;
|
||||
@include themed() {
|
||||
@include themed {
|
||||
border-radius: t($borderRadius);
|
||||
margin-top: 20px;
|
||||
|
||||
tr:first-child {
|
||||
background: t($modal-sidebarActive);
|
||||
|
||||
th {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
tr {
|
||||
th:last-child {
|
||||
display: grid;
|
||||
|
|
@ -94,6 +102,7 @@ table {
|
|||
|
||||
tr:not(:first-child) {
|
||||
background: t($modal-sidebar);
|
||||
|
||||
textarea {
|
||||
width: 90%;
|
||||
margin: 10px;
|
||||
|
|
@ -105,9 +114,11 @@ table {
|
|||
|
||||
.donateButton {
|
||||
@include modal-button(standard);
|
||||
|
||||
flex-flow: row !important;
|
||||
text-decoration: none;
|
||||
height: auto !important;
|
||||
|
||||
svg {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
|
|
@ -116,6 +127,7 @@ table {
|
|||
.flexGrow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.messageMap {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
|
|
@ -123,42 +135,48 @@ table {
|
|||
gap: 25px;
|
||||
padding: 25px;
|
||||
justify-content: space-between;
|
||||
|
||||
div:nth-child(1) {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
gap: 25px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
border-radius: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 15px;
|
||||
font-size: 25px;
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background: t($modal-sidebarActive);
|
||||
}
|
||||
}
|
||||
|
||||
.messageText {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex-grow: 3;
|
||||
|
||||
textarea {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($color);
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($subColor);
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.messageAction {
|
||||
float: right;
|
||||
}
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background: t($modal-sidebar);
|
||||
border-radius: t($borderRadius);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,10 +14,10 @@ input {
|
|||
width: 30px;
|
||||
border: none;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
vertical-align: middle;
|
||||
background: none;
|
||||
@include themed() {
|
||||
@include themed {
|
||||
border: t($modal-sidebarActive) 1px solid;
|
||||
}
|
||||
|
||||
|
|
@ -38,7 +38,7 @@ input {
|
|||
width: 30px;
|
||||
border: none;
|
||||
outline: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
vertical-align: middle;
|
||||
background: none;
|
||||
|
||||
|
|
@ -55,11 +55,12 @@ input {
|
|||
/* date picker */
|
||||
&[type='date'] {
|
||||
width: 260px;
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background: t($modal-sidebar);
|
||||
border: 3px solid t($modal-sidebarActive);
|
||||
color: t($color);
|
||||
}
|
||||
|
||||
padding: 15px 20px;
|
||||
border-radius: 4px;
|
||||
display: flex !important;
|
||||
|
|
@ -86,8 +87,9 @@ h4 {
|
|||
height: 400px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
|
||||
button {
|
||||
padding: 0 20px 0 20px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -97,29 +99,34 @@ h4 {
|
|||
flex-flow: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
div:nth-child(1) {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
|
||||
svg {
|
||||
font-size: 30px;
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($subColor);
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
}
|
||||
|
||||
.topbarbuttons {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0 20px 0 20px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -130,17 +137,21 @@ h4 {
|
|||
column-gap: 45px;
|
||||
row-gap: 100px;
|
||||
padding-top: 45px;
|
||||
|
||||
.leftPanel {
|
||||
grid-area: 1 / 1 / 3 / 3;
|
||||
}
|
||||
|
||||
.rightPanel {
|
||||
grid-area: 1 / 3 / 4 / 4;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 10px;
|
||||
|
||||
.subtitle {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
|
@ -162,10 +173,12 @@ h4 {
|
|||
svg {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(121, 121, 121, 0.226);
|
||||
background: rgb(121 121 121 / 22.6%);
|
||||
}
|
||||
}
|
||||
|
||||
.returnButton {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
|
|
@ -174,11 +187,13 @@ h4 {
|
|||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
margin-right: 25px;
|
||||
|
||||
svg {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(121, 121, 121, 0.226);
|
||||
background: rgb(121 121 121 / 22.6%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -191,20 +206,21 @@ h4 {
|
|||
}
|
||||
|
||||
.achievement {
|
||||
padding: 20px 10px 20px 10px;
|
||||
padding: 20px 10px;
|
||||
display: flex;
|
||||
flex-flow: row !important;
|
||||
align-items: center;
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background: t($modal-sidebarActive);
|
||||
border-radius: t($borderRadius);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
svg {
|
||||
font-size: 20px !important;
|
||||
padding: 15px;
|
||||
border-radius: 100%;
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background: t($modal-sidebar);
|
||||
}
|
||||
}
|
||||
|
|
@ -212,10 +228,11 @@ h4 {
|
|||
|
||||
.statSection.rightPanel {
|
||||
padding: 25px;
|
||||
@include themed() {
|
||||
@include themed {
|
||||
border-radius: t($borderRadius);
|
||||
background: t($modal-sidebar);
|
||||
box-shadow: 0 0 0 4px t($modal-sidebarActive);
|
||||
|
||||
svg {
|
||||
font-size: 50px;
|
||||
color: t($subColor);
|
||||
|
|
@ -226,6 +243,7 @@ h4 {
|
|||
.achievementContent {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
||||
span {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
|
@ -233,4 +251,4 @@ h4 {
|
|||
|
||||
.customcss {
|
||||
color: orange !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
.aboutLink,
|
||||
.MuiSlider-colorPrimary,
|
||||
legend {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($color) !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -22,19 +22,19 @@ legend {
|
|||
}
|
||||
|
||||
.MuiSwitch-colorPrimary.Mui-checked + .MuiSwitch-track {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background-color: t($subColor) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.MuiSwitch-track {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background-color: t($subColor) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.MuiIconButton-label > svg.MuiSvgIcon-root {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($color) !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -48,7 +48,7 @@ legend {
|
|||
}
|
||||
|
||||
.checkbox svg {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
fill: t($color) !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -68,13 +68,13 @@ legend {
|
|||
}
|
||||
|
||||
.MuiOutlinedInput-notchedOutline {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
border-color: t($color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.MuiFormLabel-root-MuiInputLabel-root {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($color) !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -87,20 +87,20 @@ legend {
|
|||
.Mui-focused,
|
||||
legend,
|
||||
.MuiOutlinedInput-input {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.MuiMenu-list {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background-color: t($modal-background);
|
||||
color: t($color);
|
||||
}
|
||||
}
|
||||
|
||||
.Mui-selected {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background-color: t($modal-sidebarActive) !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -121,13 +121,13 @@ legend,
|
|||
}
|
||||
|
||||
.MuiPaper-root {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background-color: t($modal-background) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.MuiSlider-valueLabel {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background-color: t($modal-sidebarActive) !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -145,14 +145,16 @@ legend,
|
|||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.MuiFormControlLabel-root {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.css-6od3lo-MuiChip-label {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($color) !important;
|
||||
}
|
||||
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
flex-flow: row;
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
|
||||
a {
|
||||
@include basicIconButton(11px, 1.2rem, modal);
|
||||
}
|
||||
|
|
@ -24,10 +25,11 @@
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
|
||||
img {
|
||||
width: 75px;
|
||||
height: auto;
|
||||
@include themed() {
|
||||
@include themed {
|
||||
border-radius: t($borderRadius);
|
||||
}
|
||||
}
|
||||
|
|
@ -35,10 +37,11 @@
|
|||
|
||||
.subtitle-photographers {
|
||||
font-size: 16px;
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($color);
|
||||
|
||||
span {
|
||||
color: t($subColor)
|
||||
color: t($subColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import '../../../../../../../scss/variables';
|
||||
|
||||
.sortableItem {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
padding: 15px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 1.325rem;
|
||||
|
|
@ -12,7 +12,6 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
background: t($modal-secondaryColour);
|
||||
border-radius: t($borderRadius);
|
||||
box-shadow: t($boxShadow);
|
||||
|
|
@ -49,9 +48,10 @@
|
|||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
padding: 20px;
|
||||
grid-gap: 20px;
|
||||
@include themed() {
|
||||
@include themed {
|
||||
div {
|
||||
border-radius: t($borderRadius);
|
||||
|
||||
// border: 5px t($modal-sidebar) solid;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -59,26 +59,31 @@
|
|||
flex-flow: column;
|
||||
gap: 5px;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
border-radius: t($borderRadius);
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0 30px 0 30px;
|
||||
padding: 0 30px;
|
||||
background: t($modal-background);
|
||||
border: none !important;
|
||||
|
||||
&:hover {
|
||||
background: t($modal-sidebarActive);
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: absolute !important;
|
||||
top: 5px !important;
|
||||
right: 5px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.iconButton {
|
||||
width: calc(100% - 22px);
|
||||
margin-top: 10px;
|
||||
|
|
@ -100,7 +105,7 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 16px;
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background: t($modal-secondaryColour);
|
||||
border-radius: t($borderRadius);
|
||||
box-shadow: t($boxShadow);
|
||||
|
|
@ -113,13 +118,14 @@
|
|||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
|
||||
.quotediv .quote {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.quotediv .author-holder .author .author-content .title {
|
||||
font-size: 1em !important;
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($color) !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -131,20 +137,23 @@
|
|||
flex-flow: column;
|
||||
margin-top: 16px;
|
||||
padding: 25px;
|
||||
|
||||
.title {
|
||||
font-size: 36px !important;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 12px !important;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 20px 20px 0;
|
||||
}
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background: t($modal-secondaryColour);
|
||||
border-radius: t($borderRadius);
|
||||
box-shadow: t($boxShadow);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@import 'scss/variables';
|
||||
|
||||
// The following CSS is to work around some assumptions made by the react-color-gradient-picker
|
||||
* {
|
||||
// workaround for https://github.com/arthay/react-color-gradient-picker/issues/11
|
||||
|
|
@ -12,7 +13,7 @@ div.color-preview-area > div > div:nth-child(5) {
|
|||
|
||||
.ui-color-picker {
|
||||
padding: 10px;
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background: t($modal-secondaryColour);
|
||||
border-radius: t($borderRadius);
|
||||
box-shadow: t($boxShadow);
|
||||
|
|
@ -39,7 +40,7 @@ div.color-preview-area > div > div:nth-child(5) {
|
|||
|
||||
.text-input,
|
||||
.number-input {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background-color: t($modal-secondaryColour) !important;
|
||||
color: t($color) !important;
|
||||
}
|
||||
|
|
@ -51,6 +52,7 @@ div.color-preview-area > div > div:nth-child(5) {
|
|||
align-items: center;
|
||||
flex-flow: row-reverse;
|
||||
}
|
||||
|
||||
.gradient-controls {
|
||||
margin-bottom: 10px !important;
|
||||
width: auto !important;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import { useState, memo } from 'react';
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import Box from '@mui/material/Box';
|
||||
import OutlinedInput from '@mui/material/OutlinedInput';
|
||||
import InputLabel from '@mui/material/InputLabel';
|
||||
|
|
|
|||
|
|
@ -349,14 +349,16 @@ export default class About extends PureComponent {
|
|||
<span className="title">
|
||||
{variables.getMessage('modals.main.settings.sections.about.photographers')}
|
||||
</span>
|
||||
{!!this.state.loading ? <p>{this.state.loading}</p> : <></> }
|
||||
{!!this.state.loading ? <p>{this.state.loading}</p> : <></>}
|
||||
<ul>
|
||||
{this.state.photographers.map(({ name, count }) => <>
|
||||
<li className="subtitle-photographers">
|
||||
{name}
|
||||
<span> ({count} images)</span>
|
||||
</li>
|
||||
</>)}
|
||||
{this.state.photographers.map(({ name, count }) => (
|
||||
<>
|
||||
<li className="subtitle-photographers">
|
||||
{name}
|
||||
<span> ({count} images)</span>
|
||||
</li>
|
||||
</>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@ export default class AdvancedSettings extends PureComponent {
|
|||
'modals.main.settings.sections.advanced.custom_css_subtitle',
|
||||
)}
|
||||
>
|
||||
<Text name="customcss" textarea={true} category="other" />
|
||||
<Text name="customcss" textarea={true} category="other" />
|
||||
</SettingsItem>
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.sections.experimental.title')}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,11 @@ export default class DateSettings extends PureComponent {
|
|||
render() {
|
||||
const longSettings = (
|
||||
<>
|
||||
<Dropdown label={variables.getMessage('modals.main.settings.sections.date.long_format')} name="longFormat" category="date">
|
||||
<Dropdown
|
||||
label={variables.getMessage('modals.main.settings.sections.date.long_format')}
|
||||
name="longFormat"
|
||||
category="date"
|
||||
>
|
||||
<option value="DMY">DMY</option>
|
||||
<option value="MDY">MDY</option>
|
||||
<option value="YMD">YMD</option>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,9 @@ export default class LanguageSettings extends PureComponent {
|
|||
|
||||
const quoteLanguages = data.map((language) => {
|
||||
return {
|
||||
name: languages.find((l) => l.value === language.name) ? languages.find((l) => l.value === language.name).name : 'English',
|
||||
name: languages.find((l) => l.value === language.name)
|
||||
? languages.find((l) => l.value === language.name).name
|
||||
: 'English',
|
||||
value: language,
|
||||
};
|
||||
});
|
||||
|
|
@ -77,7 +79,9 @@ export default class LanguageSettings extends PureComponent {
|
|||
<div className="languageSettings">
|
||||
<Radio
|
||||
name="quoteLanguage"
|
||||
options={this.state.quoteLanguages.map((language) => { return { name: language.name, value: language.value.name }; })}
|
||||
options={this.state.quoteLanguages.map((language) => {
|
||||
return { name: language.name, value: language.value.name };
|
||||
})}
|
||||
defaultValue={this.state.quoteLanguages[0].name}
|
||||
category="quote"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -111,7 +111,7 @@ export default class SearchSettings extends PureComponent {
|
|||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.search.search_engine_subtitle',
|
||||
)}
|
||||
final={ this.state.customDisplay === 'none' ? true : false}
|
||||
final={this.state.customDisplay === 'none' ? true : false}
|
||||
>
|
||||
<Dropdown
|
||||
name="searchEngine"
|
||||
|
|
@ -129,7 +129,10 @@ export default class SearchSettings extends PureComponent {
|
|||
</Dropdown>
|
||||
</SettingsItem>
|
||||
<div style={{ display: this.state.customDisplay }}>
|
||||
<SettingsItem title={variables.getMessage('modals.main.settings.sections.search.custom')} final={true}>
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.sections.search.custom')}
|
||||
final={true}
|
||||
>
|
||||
<TextField
|
||||
label={variables.getMessage('modals.main.settings.sections.search.custom')}
|
||||
value={this.state.customValue}
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ export default class BackgroundSettings extends PureComponent {
|
|||
}
|
||||
|
||||
render() {
|
||||
const interval = (
|
||||
/* const interval = (
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.sections.background.interval.title')}
|
||||
subtitle={variables.getMessage(
|
||||
|
|
@ -101,7 +101,7 @@ export default class BackgroundSettings extends PureComponent {
|
|||
</option>
|
||||
</Dropdown>
|
||||
</SettingsItem>
|
||||
);
|
||||
);*/
|
||||
|
||||
const APISettings = (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -384,7 +384,9 @@ export default class WelcomeSections extends PureComponent {
|
|||
<div className="toggle" onClick={() => this.props.switchTab(3)}>
|
||||
<span>
|
||||
{variables.getMessage('modals.main.settings.sections.appearance.theme.title')}:{' '}
|
||||
{variables.getMessage('modals.main.settings.sections.appearance.theme.' + localStorage.getItem('theme'))}
|
||||
{variables.getMessage(
|
||||
'modals.main.settings.sections.appearance.theme.' + localStorage.getItem('theme'),
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
{this.state.importedSettings.length !== 0 ? (
|
||||
|
|
|
|||
|
|
@ -1,42 +1,44 @@
|
|||
@import '../main/scss/index.scss';
|
||||
@import '../main/scss/index';
|
||||
@import 'scss/variables';
|
||||
|
||||
.welcomemodal {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background-color: t($modal-background);
|
||||
}
|
||||
}
|
||||
|
||||
.welcomeContent {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background-color: t($modal-background);
|
||||
}
|
||||
|
||||
.MuiFormControlLabel-root {
|
||||
margin-right: 0;
|
||||
}
|
||||
@extend %tabText;
|
||||
|
||||
height: 80vh;
|
||||
width: clamp(60vw, 1200px, 90vw);
|
||||
display: grid;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(1, 1fr);
|
||||
grid-column-gap: 0px;
|
||||
grid-row-gap: 0px;
|
||||
grid-gap: 0;
|
||||
|
||||
section:nth-child(1) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background-color: t($modal-sidebar);
|
||||
}
|
||||
}
|
||||
|
||||
section:nth-child(2) {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: space-between;
|
||||
overflow-y: auto;
|
||||
|
||||
.buttons {
|
||||
z-index: 999;
|
||||
backdrop-filter: blur(2px);
|
||||
|
|
@ -45,11 +47,14 @@
|
|||
padding: 25px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
button {
|
||||
@include modal-button(standard);
|
||||
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
|
@ -84,7 +89,7 @@
|
|||
}
|
||||
|
||||
.themesToggleArea {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
.active {
|
||||
background: t($modal-sidebarActive);
|
||||
}
|
||||
|
|
@ -96,13 +101,11 @@
|
|||
padding: 20px;
|
||||
border: 3px solid t($modal-sidebarActive);
|
||||
transition: 0.33s;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -160,11 +163,12 @@
|
|||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background: t($modal-sidebar);
|
||||
color: t($color);
|
||||
cursor: pointer;
|
||||
border: 3px solid t($modal-sidebarActive);
|
||||
|
||||
&:hover {
|
||||
background: t($modal-sidebarActive);
|
||||
}
|
||||
|
|
@ -192,7 +196,7 @@ a.privacy {
|
|||
.examples {
|
||||
img {
|
||||
width: 60%;
|
||||
@include themed() {
|
||||
@include themed {
|
||||
border-radius: t($borderRadius);
|
||||
}
|
||||
}
|
||||
|
|
@ -203,6 +207,7 @@ a.privacy {
|
|||
flex-flow: row;
|
||||
justify-content: space-between;
|
||||
margin-top: 15px;
|
||||
|
||||
button {
|
||||
width: 150px;
|
||||
height: 40px;
|
||||
|
|
@ -212,21 +217,22 @@ a.privacy {
|
|||
.showcaseimg {
|
||||
width: 350px;
|
||||
height: auto;
|
||||
/*animation-name: float-in;
|
||||
|
||||
/* animation-name: float-in;
|
||||
animation-duration: 1.2s;
|
||||
animation-timing-function: ease-in;*/
|
||||
animation-timing-function: ease-in; */
|
||||
}
|
||||
|
||||
.welcomeContent {
|
||||
.light {
|
||||
.toggle.lightTheme {
|
||||
background-color: rgba(219, 219, 219, 0.72);
|
||||
background-color: rgb(219 219 219 / 72%);
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
.toggle.darkTheme {
|
||||
background-color: rgba(65, 71, 84, 0.9);
|
||||
background-color: rgb(65 71 84 / 90%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -238,14 +244,16 @@ a.privacy {
|
|||
padding: 25px;
|
||||
align-items: center;
|
||||
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background-color: t($modal-sidebar);
|
||||
border-radius: t($borderRadius);
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background-color: t($modal-sidebarActive);
|
||||
}
|
||||
|
||||
height: 50px !important;
|
||||
width: 50px !important;
|
||||
border-radius: 100%;
|
||||
|
|
@ -254,10 +262,12 @@ a.privacy {
|
|||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
margin-left: auto;
|
||||
|
|
@ -267,7 +277,7 @@ a.privacy {
|
|||
}
|
||||
|
||||
.toggle.active {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background-color: t($modal-sidebarActive) !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@ export default class Background extends PureComponent {
|
|||
break;
|
||||
}
|
||||
|
||||
const accept = 'application/json, ' + (await supportsAVIF() ? 'image/avif' : 'image/webp');
|
||||
const accept = 'application/json, ' + ((await supportsAVIF()) ? 'image/avif' : 'image/webp');
|
||||
try {
|
||||
data = await (await fetch(requestURL, { headers: { accept } })).json();
|
||||
} catch (e) {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ function ExcludeModal({ modalClose, info }) {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="smallModal">
|
||||
<div className="smallModal">
|
||||
<div className="shareHeader">
|
||||
<span className="title">
|
||||
{variables.getMessage('modals.main.settings.sections.advanced.reset_modal.title')}
|
||||
|
|
@ -29,8 +29,7 @@ function ExcludeModal({ modalClose, info }) {
|
|||
</Tooltip>
|
||||
</div>
|
||||
<span className="subtitle">
|
||||
{ variables.getMessage('widgets.background.exclude_confirm', { category: info.category })}
|
||||
|
||||
{variables.getMessage('widgets.background.exclude_confirm', { category: info.category })}
|
||||
</span>
|
||||
<div className="resetFooter">
|
||||
<button className="textButton" onClick={modalClose}>
|
||||
|
|
@ -43,7 +42,7 @@ function ExcludeModal({ modalClose, info }) {
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(ExcludeModal);
|
||||
|
|
|
|||
|
|
@ -362,7 +362,12 @@ function PhotoInformation({ info, url, api }) {
|
|||
key="favourite"
|
||||
placement="top"
|
||||
>
|
||||
<Favourite pun={info.pun} offline={info.offline} credit={info.credit} photoURL={info.url} />
|
||||
<Favourite
|
||||
pun={info.pun}
|
||||
offline={info.offline}
|
||||
credit={info.credit}
|
||||
photoURL={info.url}
|
||||
/>
|
||||
</Tooltip>
|
||||
{!info.offline ? (
|
||||
<Tooltip
|
||||
|
|
|
|||
|
|
@ -6,54 +6,64 @@
|
|||
left: 1rem;
|
||||
flex-flow: column-reverse;
|
||||
display: flex;
|
||||
|
||||
&:hover {
|
||||
.photoInformation {
|
||||
height: auto;
|
||||
align-items: flex-start;
|
||||
flex-flow: column;
|
||||
|
||||
.concept-buttons {
|
||||
padding: 30px 0 0 0;
|
||||
padding: 30px 0 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.extra-content {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 10px;
|
||||
transition: 0.8s;
|
||||
}
|
||||
|
||||
.concept-stats {
|
||||
display: flex;
|
||||
padding-top: 5px;
|
||||
gap: 20px;
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($subColor);
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
flex-direction: row;
|
||||
gap: 5px;
|
||||
|
||||
svg {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.concept-copyright {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
gap: 10px;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($subColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.photoInformation-content {
|
||||
padding: 20px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.map-concept {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -68,11 +78,13 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
flex-shrink: 0;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -80,7 +92,7 @@
|
|||
|
||||
.photoInformation-legacy {
|
||||
font-size: 1.36em;
|
||||
text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||||
text-shadow: 0 0 10px rgb(0 0 0 / 30%);
|
||||
color: #fff;
|
||||
z-index: 99;
|
||||
user-select: none;
|
||||
|
|
@ -116,7 +128,7 @@
|
|||
.infoCard {
|
||||
display: none;
|
||||
background: var(--background);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 0 10px rgb(0 0 0 / 30%);
|
||||
color: var(--modal-text);
|
||||
position: fixed;
|
||||
bottom: 2.9rem;
|
||||
|
|
@ -199,6 +211,7 @@
|
|||
|
||||
.photoInformation {
|
||||
@extend %basic;
|
||||
|
||||
animation: fadeIn 2s;
|
||||
min-width: 300px;
|
||||
font-size: 0.8em;
|
||||
|
|
@ -208,70 +221,85 @@
|
|||
flex-flow: row;
|
||||
align-items: center;
|
||||
transition: 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
|
||||
// width: 300px;
|
||||
padding: 10px;
|
||||
|
||||
.link {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($link);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
padding: 20px;
|
||||
height: auto;
|
||||
align-items: flex-start;
|
||||
flex-flow: column;
|
||||
|
||||
.concept-buttons {
|
||||
padding: 30px 0 0 0;
|
||||
padding: 30px 0 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.extra-content {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 10px;
|
||||
transition: 0.8s;
|
||||
}
|
||||
|
||||
.concept-stats {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($subColor);
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
|
||||
svg {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.concept-copyright {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
gap: 10px;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($subColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.photoInformation-content {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.map-concept {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.map-concept {
|
||||
@extend %basic;
|
||||
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border-radius: 12px;
|
||||
|
|
@ -279,9 +307,11 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none !important;
|
||||
|
||||
svg {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -291,18 +321,22 @@
|
|||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.concept-location {
|
||||
font-size: 1.9em;
|
||||
}
|
||||
|
||||
.concept-credit {
|
||||
font-size: 1.4em;
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($subColor);
|
||||
}
|
||||
|
||||
a {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($subColor);
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
color: var(--modal-link);
|
||||
}
|
||||
|
|
@ -316,11 +350,14 @@
|
|||
display: flex;
|
||||
flex-flow: column;
|
||||
padding-left: 20px;
|
||||
|
||||
a {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($link);
|
||||
}
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
|
@ -332,12 +369,14 @@
|
|||
flex-flow: column;
|
||||
width: 100%;
|
||||
transition: 1s;
|
||||
|
||||
.concept-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
|
||||
svg {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($subColor);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
|
@ -358,6 +397,7 @@
|
|||
gap: 20px;
|
||||
padding: 20px 20px 0 0;
|
||||
display: none;
|
||||
|
||||
svg {
|
||||
@include basicIconButton(11px, 1.3rem, ui);
|
||||
}
|
||||
|
|
@ -367,6 +407,7 @@
|
|||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -377,6 +418,7 @@
|
|||
height: 50px !important;
|
||||
width: 50px !important;
|
||||
}
|
||||
|
||||
a {
|
||||
height: 50px;
|
||||
}
|
||||
|
|
@ -385,12 +427,14 @@
|
|||
.photoInformation:hover {
|
||||
.photoMap {
|
||||
height: auto !important;
|
||||
|
||||
img {
|
||||
height: auto !important;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
a {
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,9 +12,7 @@
|
|||
|
||||
.backgroundTransform {
|
||||
@include animation('fadein2 2s');
|
||||
-webkit-transition: background 2s;
|
||||
-mov-transition: background 2s;
|
||||
-o-transition: background 2s;
|
||||
|
||||
transition: background 2s;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -201,7 +201,7 @@ class Todo extends PureComponent {
|
|||
readOnly={this.state.todo[index].done}
|
||||
/>
|
||||
<MdDelete onClick={() => this.updateTodo('remove', index)} />
|
||||
<SortableHandle/>
|
||||
<SortableHandle />
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -25,20 +25,22 @@
|
|||
|
||||
.notesContainer {
|
||||
@extend %basic;
|
||||
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
border-radius: 12px;
|
||||
position: absolute;
|
||||
font-size: 1rem !important;
|
||||
/*top: 100%;
|
||||
|
||||
/* top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -130px;*/
|
||||
margin-left: -130px; */
|
||||
|
||||
.notes-buttons {
|
||||
button {
|
||||
@include basicIconButton(11px, 1.3rem, ui);
|
||||
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background: t($btn-background) !important;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -65,6 +67,7 @@
|
|||
max-height: 65vh !important;
|
||||
overflow-y: visible !important;
|
||||
@extend %basic;
|
||||
|
||||
border: none;
|
||||
padding: 15px;
|
||||
border-radius: 12px;
|
||||
|
|
@ -86,10 +89,10 @@ textarea {
|
|||
|
||||
.topBarNotes {
|
||||
@extend %basic;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-flow: row;
|
||||
height: 50px;
|
||||
border-radius: 12px;
|
||||
flex-flow: row;
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
gap: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.todosEmpty {
|
||||
height: 200px;
|
||||
display: grid;
|
||||
|
|
@ -23,17 +24,18 @@
|
|||
|
||||
.todoRow {
|
||||
@include basicIconButton(1px, 16px, ui);
|
||||
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
margin: 15px 5px 15px 5px;
|
||||
@include themed() {
|
||||
margin: 15px 5px;
|
||||
@include themed {
|
||||
color: t($color) !important;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 120px;
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($color) !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -44,12 +46,12 @@
|
|||
display: grid;
|
||||
cursor: pointer;
|
||||
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($color) !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background: t($modal-sidebar);
|
||||
border-radius: t($borderRadius);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,10 +7,13 @@
|
|||
flex-flow: row;
|
||||
gap: 10px;
|
||||
animation: fadeIn 2s;
|
||||
|
||||
button {
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
/*filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));*/
|
||||
|
||||
/* filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3)); */
|
||||
cursor: pointer;
|
||||
|
||||
// transition: 0.2s ease;
|
||||
margin-top: 0;
|
||||
|
||||
|
|
@ -18,6 +21,7 @@
|
|||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -27,7 +31,7 @@
|
|||
color: map-get($theme-colours, 'main-text-color');
|
||||
transform: translateZ(0);
|
||||
transform: scale(1.3);
|
||||
}*/
|
||||
} */
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -37,10 +41,12 @@
|
|||
@include basicIconButton(12px, 1.2rem, legacy);
|
||||
}
|
||||
}
|
||||
|
||||
.first {
|
||||
@include basicIconButton(12px, 1.2rem, legacy);
|
||||
}
|
||||
}
|
||||
|
||||
.new {
|
||||
button {
|
||||
@include basicIconButton(12px, 1.2rem, ui);
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
.quicklinks {
|
||||
@include basicIconButton(10px, 14px, ui);
|
||||
|
||||
outline: none;
|
||||
border: none;
|
||||
box-shadow: 0 0 0 1px #484848;
|
||||
|
|
@ -11,7 +12,7 @@
|
|||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
font-size: 0.5em;
|
||||
padding: 10px 40px 10px 40px;
|
||||
padding: 10px 40px;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
|
|
@ -25,6 +26,7 @@
|
|||
|
||||
textarea {
|
||||
@extend %basic;
|
||||
|
||||
border: none;
|
||||
padding: 15px;
|
||||
border-radius: 12px;
|
||||
|
|
@ -53,7 +55,7 @@
|
|||
font-size: 16px;
|
||||
cursor: initial;
|
||||
user-select: none;
|
||||
color: rgba(255, 71, 87, 1);
|
||||
color: rgb(255 71 87 / 100%);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -90,10 +92,11 @@
|
|||
}
|
||||
|
||||
/* background-color: var(--background);
|
||||
color: var(--modal-text);*/
|
||||
color: var(--modal-text); */
|
||||
|
||||
.quicklinksdropdown {
|
||||
@extend %basic;
|
||||
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
display: none;
|
||||
|
|
@ -115,13 +118,14 @@
|
|||
.dropdown-subtitle {
|
||||
font-size: 0.4em;
|
||||
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($subColor);
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
@include basicIconButton(10px, 0.9rem, ui);
|
||||
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
outline: none;
|
||||
|
|
@ -149,18 +153,20 @@ button.quicklinks {
|
|||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 5px;
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
gap: 20px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.dropdown-error {
|
||||
font-size: 13px;
|
||||
padding-left: 5px;
|
||||
color: #e74c3c;
|
||||
}
|
||||
@include themed() {
|
||||
@include themed {
|
||||
textarea {
|
||||
background: t($modal-sidebar);
|
||||
border: 1px solid t($modal-sidebarActive);
|
||||
|
|
@ -185,22 +191,24 @@ button.quicklinks {
|
|||
|
||||
.quickLinksMetro {
|
||||
@extend %basic;
|
||||
|
||||
text-decoration: none;
|
||||
gap: 10px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
min-width: 100px;
|
||||
background-image: linear-gradient(to left, rgb(0, 0, 0), transparent, rgb(0, 0, 0)),
|
||||
background-image: linear-gradient(to left, rgb(0 0 0), transparent, rgb(0 0 0)),
|
||||
url('https://media.cntraveller.com/photos/615ee85…/16:9/w_2580,c_limit/Best%20Cities%20in%20the%20World%20-%20Grid.jpg');
|
||||
transition: 0.8s;
|
||||
text-align: left;
|
||||
padding: 20px 40px;
|
||||
@include themed() {
|
||||
@include themed {
|
||||
&:hover {
|
||||
background: t($btn-backgroundHover);
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: auto;
|
||||
align-self: center;
|
||||
|
|
@ -210,7 +218,7 @@ button.quicklinks {
|
|||
.quicklinknostyle {
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($subColor);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,10 +2,12 @@
|
|||
|
||||
.quote {
|
||||
font-size: 0.8em;
|
||||
text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||||
text-shadow: 0 0 10px rgb(0 0 0 / 30%);
|
||||
cursor: initial;
|
||||
user-select: none;
|
||||
|
||||
--shadow-shift: 0.125rem;
|
||||
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
width: 40vw;
|
||||
|
|
@ -20,7 +22,7 @@
|
|||
|
||||
svg {
|
||||
margin-left: 10px;
|
||||
filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
|
||||
filter: drop-shadow(0 0 6px rgb(0 0 0 / 30%));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -37,6 +39,7 @@ h1.quoteauthor {
|
|||
|
||||
.author {
|
||||
@extend %basic;
|
||||
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
height: 70px;
|
||||
|
|
@ -50,14 +53,14 @@ h1.quoteauthor {
|
|||
|
||||
.author-knownfor {
|
||||
font-size: clamp(13px, 2.5vw, 0.4em);
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($subColor);
|
||||
}
|
||||
}
|
||||
|
||||
.author-license {
|
||||
font-size: clamp(8px, 2.5vw, 0.1em);
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($subColor);
|
||||
}
|
||||
}
|
||||
|
|
@ -70,6 +73,7 @@ h1.quoteauthor {
|
|||
|
||||
.author-img {
|
||||
@extend %basic;
|
||||
|
||||
height: 100%;
|
||||
width: 70px;
|
||||
border-radius: 12px 0 0 12px;
|
||||
|
|
@ -102,6 +106,7 @@ h1.quoteauthor {
|
|||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -116,6 +121,7 @@ h1.quoteauthor {
|
|||
a {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
a {
|
||||
@include basicIconButton(11px, 1.3rem, ui);
|
||||
}
|
||||
|
|
@ -127,6 +133,7 @@ h1.quoteauthor {
|
|||
flex-direction: column;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
|
||||
button {
|
||||
@include basicIconButton(11px, 1.3rem, ui);
|
||||
}
|
||||
|
|
@ -135,17 +142,20 @@ h1.quoteauthor {
|
|||
.deleteButton {
|
||||
height: auto !important;
|
||||
@include basicIconButton(11px, 1.3rem, modal);
|
||||
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.author-content.whileLoading {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
gap: 5px;
|
||||
|
||||
.title {
|
||||
color: transparent;
|
||||
width: 100px;
|
||||
background: t($modal-sidebar);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: transparent;
|
||||
width: 50px;
|
||||
|
|
|
|||
|
|
@ -234,7 +234,10 @@ export default class Search extends PureComponent {
|
|||
{searchEngines.map(({ name }, key) => {
|
||||
return (
|
||||
<span
|
||||
className={"searchDropdownList" + (this.state.currentSearch === name ? " searchDropdownListActive" : "")}
|
||||
className={
|
||||
'searchDropdownList' +
|
||||
(this.state.currentSearch === name ? ' searchDropdownListActive' : '')
|
||||
}
|
||||
onClick={() => this.setSearch(name)}
|
||||
key={key}
|
||||
>
|
||||
|
|
@ -242,12 +245,15 @@ export default class Search extends PureComponent {
|
|||
</span>
|
||||
);
|
||||
})}
|
||||
<span
|
||||
className={"searchDropdownList" + (this.state.currentSearch === customText ? " searchDropdownListActive" : "")}
|
||||
onClick={() => this.setSearch(customText, 'custom')}
|
||||
>
|
||||
{customText}
|
||||
</span>
|
||||
<span
|
||||
className={
|
||||
'searchDropdownList' +
|
||||
(this.state.currentSearch === customText ? ' searchDropdownListActive' : '')
|
||||
}
|
||||
onClick={() => this.setSearch(customText, 'custom')}
|
||||
>
|
||||
{customText}
|
||||
</span>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,13 +8,14 @@
|
|||
|
||||
input[type='text'] {
|
||||
@extend %basic;
|
||||
|
||||
outline: none;
|
||||
border: none;
|
||||
font-size: 1.2rem;
|
||||
padding: 10px 0 10px 20px;
|
||||
|
||||
&::placeholder {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($color);
|
||||
}
|
||||
}
|
||||
|
|
@ -46,6 +47,7 @@
|
|||
|
||||
.searchDropdown {
|
||||
@extend %basic;
|
||||
|
||||
margin-top: 5px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
|
@ -61,7 +63,7 @@
|
|||
border-radius: 12px;
|
||||
|
||||
&:hover {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background: t($btn-backgroundHover);
|
||||
}
|
||||
}
|
||||
|
|
@ -69,7 +71,7 @@
|
|||
}
|
||||
|
||||
.searchDropdownListActive {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background: t($btn-backgroundHover);
|
||||
}
|
||||
}
|
||||
|
|
@ -77,4 +79,15 @@
|
|||
.searchMain {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
animation: fadeIn 2s;
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
cursor: initial;
|
||||
user-select: none;
|
||||
font-weight: 600;
|
||||
|
||||
--shadow-shift: 0.4rem;
|
||||
}
|
||||
|
||||
|
|
@ -17,10 +18,11 @@
|
|||
.react-clock__face {
|
||||
margin: 0 auto;
|
||||
border-radius: 100%;
|
||||
/*box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3);*/
|
||||
|
||||
/* box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3); */
|
||||
border: none !important;
|
||||
|
||||
@include themed() {
|
||||
@include themed {
|
||||
border: 1px solid t($color) !important;
|
||||
}
|
||||
|
||||
|
|
@ -30,14 +32,16 @@
|
|||
|
||||
.react-clock__hand__body,
|
||||
.react-clock__mark__body {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background: t($color) !important;
|
||||
}
|
||||
/*box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);*/
|
||||
|
||||
/* box-shadow: 0 0 25px rgba(0, 0, 0, 0.3); */
|
||||
}
|
||||
|
||||
.clockBackground {
|
||||
@extend %basic;
|
||||
|
||||
padding: 1rem;
|
||||
|
||||
&.round {
|
||||
|
|
@ -47,6 +51,7 @@
|
|||
|
||||
.new-clock {
|
||||
line-height: 100%;
|
||||
|
||||
.seconds {
|
||||
font-size: 0.2em;
|
||||
line-height: 0%;
|
||||
|
|
|
|||
|
|
@ -2,12 +2,12 @@
|
|||
|
||||
.weather {
|
||||
@extend %basic;
|
||||
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
right: 1rem;
|
||||
cursor: initial;
|
||||
user-select: none;
|
||||
padding: 20px;
|
||||
transition: 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
width: auto;
|
||||
display: grid;
|
||||
|
|
@ -25,9 +25,11 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
.tooltip {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tooltipTitle {
|
||||
max-height: 12px;
|
||||
}
|
||||
|
|
@ -38,7 +40,7 @@
|
|||
font-size: 18px;
|
||||
gap: 40px;
|
||||
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($weather);
|
||||
}
|
||||
}
|
||||
|
|
@ -98,7 +100,7 @@
|
|||
gap: 20px;
|
||||
}
|
||||
|
||||
@include themed() {
|
||||
@include themed {
|
||||
svg {
|
||||
color: t($subColor);
|
||||
}
|
||||
|
|
@ -108,6 +110,7 @@
|
|||
display: grid;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.materialWeatherIcon {
|
||||
font-size: 18px !important;
|
||||
padding: 2px;
|
||||
|
|
@ -122,7 +125,7 @@
|
|||
gap: 10px;
|
||||
|
||||
div {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
border-radius: t($borderRadius);
|
||||
border: 1px solid t($btn-backgroundHover);
|
||||
padding: 5px;
|
||||
|
|
|
|||
|
|
@ -8,4 +8,4 @@ export const supportsAVIF = () => {
|
|||
image.onload = () => resolve(true);
|
||||
image.onerror = () => resolve(false);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -11,17 +11,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
-webkit-animation: $animations;
|
||||
-moz-animation: $animations;
|
||||
animation: $animations;
|
||||
}
|
||||
|
||||
@mixin keyframes($animationName) {
|
||||
@-webkit-keyframes #{$animationName} {
|
||||
@keyframes #{$animationName} {
|
||||
@content;
|
||||
}
|
||||
|
||||
@-moz-keyframes #{$animationName} {
|
||||
@keyframes #{$animationName} {
|
||||
@content;
|
||||
}
|
||||
|
||||
|
|
@ -44,6 +42,7 @@
|
|||
) !global;
|
||||
}
|
||||
@content;
|
||||
|
||||
$theme-map: null !global;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,67 +17,62 @@ $modal-sidebarActive: 'modal-sidebarActive';
|
|||
$link: 'link';
|
||||
$weather: 'weather';
|
||||
$modal-secondaryColour: 'modal-secondaryColour';
|
||||
|
||||
$theme-colours: (
|
||||
'gradient': linear-gradient(90deg, #ffb032 0%, #dd3b67 100%),
|
||||
'main': rgba(242, 243, 244, 1),
|
||||
'secondary': rgba(0, 0, 0, 1),
|
||||
'main-text-color': rgba(242, 243, 244, 1),
|
||||
'main': rgb(242 243 244 / 100%),
|
||||
'secondary': rgb(0 0 0 / 100%),
|
||||
'main-text-color': rgb(242 243 244 / 100%),
|
||||
'photo-info': #2d3436,
|
||||
'photo-info-dark': #ffff,
|
||||
);
|
||||
|
||||
$modal: (
|
||||
'background': #fff,
|
||||
'background-dark': #2f3542,
|
||||
'text': rgba(0, 0, 0, 1),
|
||||
'tab-underline': rgba(204, 204, 204, 1),
|
||||
'tab-underline-active': rgba(0, 0, 0, 1),
|
||||
'text': rgb(0 0 0 / 100%),
|
||||
'tab-underline': rgb(204 204 204 / 100%),
|
||||
'tab-underline-active': rgb(0 0 0 / 100%),
|
||||
'border-radius': 12px,
|
||||
'sidebar': rgb(240, 240, 240),
|
||||
'tab-active': rgba(219, 219, 219, 0.72),
|
||||
'sidebar-dark': rgb(53, 59, 72),
|
||||
'tab-active-dark': rgba(65, 71, 84, 0.9),
|
||||
'sidebar': rgb(240 240 240),
|
||||
'tab-active': rgb(219 219 219 / 72%),
|
||||
'sidebar-dark': rgb(53 59 72),
|
||||
'tab-active-dark': rgb(65 71 84 / 90%),
|
||||
'modal-link': #5352ed,
|
||||
'modal-link-dark': #3498db,
|
||||
);
|
||||
|
||||
$button-colours: (
|
||||
'confirm': rgba(46, 213, 115, 1),
|
||||
'reset': rgba(255, 71, 87, 1),
|
||||
'other': rgba(83, 82, 237, 1),
|
||||
'confirm': rgb(46 213 115 / 100%),
|
||||
'reset': rgb(255 71 87 / 100%),
|
||||
'other': rgb(83 82 237 / 100%),
|
||||
);
|
||||
|
||||
$ui-elements: (
|
||||
'background': rgba(0, 0, 0, 0.7),
|
||||
'background': rgb(0 0 0 / 70%),
|
||||
'backgroundBlur': 15px,
|
||||
'color': rgb(255, 255, 255),
|
||||
'color': rgb(255 255 255),
|
||||
'borderRadius': 12px,
|
||||
'boxShadow': 0 0 0 1px #484848,
|
||||
);
|
||||
|
||||
$themes: (
|
||||
light: (
|
||||
'weather': #333333,
|
||||
'background': rgba(255, 255, 255, 0.7),
|
||||
'weather': #333,
|
||||
'background': rgb(255 255 255 / 70%),
|
||||
'backgroundBlur': 15px,
|
||||
'color': rgb(0, 0, 0),
|
||||
'subColor': #333333,
|
||||
'color': rgb(0 0 0),
|
||||
'subColor': #333,
|
||||
'borderRadius': 12px,
|
||||
'boxShadow': 0 0 0 1px #e7e3e9,
|
||||
'btn-background': #fff,
|
||||
'btn-backgroundHover': rgba(247, 250, 252, 0.9),
|
||||
'btn-backgroundHover': rgb(247 250 252 / 90%),
|
||||
'modal-background': #fff,
|
||||
'modal-sidebar': rgba(240, 240, 240, 1),
|
||||
'modal-sidebarActive': rgba(219, 219, 219, 0.72),
|
||||
'modal-sidebar': rgb(240 240 240 / 100%),
|
||||
'modal-sidebarActive': rgb(219 219 219 / 72%),
|
||||
'modal-secondaryColour': #fafafa,
|
||||
'link': rgba(83, 82, 237, 1),
|
||||
'link': rgb(83 82 237 / 100%),
|
||||
),
|
||||
dark: (
|
||||
'weather': #e7e7e7,
|
||||
'background': rgba(0, 0, 0, 0.7),
|
||||
'background': rgb(0 0 0 / 70%),
|
||||
'backgroundBlur': 15px,
|
||||
'color': rgb(255, 255, 255),
|
||||
'color': rgb(255 255 255),
|
||||
'subColor': #c2c2c2,
|
||||
'borderRadius': 12px,
|
||||
'boxShadow': 0 0 0 1px #484848,
|
||||
|
|
@ -87,12 +82,12 @@ $themes: (
|
|||
'modal-sidebar': #0e1013,
|
||||
'modal-sidebarActive': #333,
|
||||
'modal-secondaryColour': #111,
|
||||
'link': rgb(115, 115, 255),
|
||||
'link': rgb(115 115 255),
|
||||
),
|
||||
);
|
||||
|
||||
%basic {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background: t($background);
|
||||
border-radius: t($borderRadius);
|
||||
color: t($color);
|
||||
|
|
@ -104,7 +99,7 @@ $themes: (
|
|||
.title {
|
||||
font-size: 18px;
|
||||
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($color);
|
||||
}
|
||||
}
|
||||
|
|
@ -112,7 +107,7 @@ $themes: (
|
|||
.subtitle {
|
||||
font-size: 14px;
|
||||
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($subColor);
|
||||
}
|
||||
}
|
||||
|
|
@ -126,14 +121,15 @@ $themes: (
|
|||
font-weight: 600;
|
||||
margin-bottom: 15px;
|
||||
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($color);
|
||||
}
|
||||
|
||||
.backTitle {
|
||||
cursor: pointer;
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($subColor);
|
||||
|
||||
&:hover {
|
||||
color: t($color);
|
||||
}
|
||||
|
|
@ -145,7 +141,7 @@ $themes: (
|
|||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($color);
|
||||
}
|
||||
}
|
||||
|
|
@ -153,7 +149,7 @@ $themes: (
|
|||
.subtitle {
|
||||
font-size: 16px;
|
||||
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($subColor);
|
||||
}
|
||||
}
|
||||
|
|
@ -163,7 +159,7 @@ $themes: (
|
|||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($link);
|
||||
}
|
||||
|
||||
|
|
@ -174,7 +170,7 @@ $themes: (
|
|||
}
|
||||
|
||||
@mixin modal-button($type) {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
@if $type == 'standard' {
|
||||
background: t($modal-sidebar);
|
||||
box-shadow: t($boxShadow);
|
||||
|
|
@ -219,7 +215,7 @@ $themes: (
|
|||
}
|
||||
|
||||
@mixin basicIconButton($padding, $font-size, $type) {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
@if $type == 'ui' {
|
||||
background: t($btn-background);
|
||||
color: t($color);
|
||||
|
|
@ -307,12 +303,12 @@ $themes: (
|
|||
}
|
||||
|
||||
@mixin legacyIconButton($padding, $font-size) {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
background: t($btn-background);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ body {
|
|||
}
|
||||
|
||||
* {
|
||||
font-family: 'Lexend Deca', 'Montserrat', sans-serif !important;
|
||||
font-family: 'Lexend Deca', Montserrat, sans-serif !important;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
outline: none;
|
||||
|
|
@ -22,7 +22,7 @@ body {
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
|
||||
text-shadow: 0 0 25px rgb(0 0 0 / 30%);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
margin: 0;
|
||||
|
|
@ -46,9 +46,10 @@ body {
|
|||
}
|
||||
|
||||
::placeholder {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($color);
|
||||
}
|
||||
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
|
@ -57,7 +58,7 @@ body {
|
|||
}
|
||||
|
||||
#root {
|
||||
@include themed() {
|
||||
@include themed {
|
||||
color: t($color);
|
||||
}
|
||||
}
|
||||
|
|
@ -110,7 +111,7 @@ body {
|
|||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-family: Montserrat;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-weight: 400;
|
||||
|
|
|
|||
Loading…
Reference in New Issue