Mirrors
/
Zelda64Recomp
mirror of https://github.com/Mr-Wiseguy/Zelda64Recomp.git
0
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

use node modules sass + sass lint + allow color preset 'whitesmoke'

This commit is contained in:
thecozies 2024-04-21 10:54:48 -05:00
parent a215605b5d
commit 9a23d00a36
23 changed files with 336 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/recomp.rcss
View File

File diff suppressed because one or more lines are too long

13
assets/scss/.stylelintrc
View File

@ -30,7 +30,7 @@
"color-no-hex": true, "color-no-hex": true,
"function-url-quotes": "always", "function-url-quotes": "always",
"max-nesting-depth": [ "max-nesting-depth": [
3, 4,
{ {
"ignoreAtRules": ["each", "media", "supports", "include"], "ignoreAtRules": ["each", "media", "supports", "include"],
"severity": "warning" "severity": "warning"
@ -69,7 +69,7 @@
"scss/selector-no-redundant-nesting-selector": null, "scss/selector-no-redundant-nesting-selector": null,
"selector-class-pattern": null, "selector-class-pattern": null,
"selector-max-compound-selectors": [ "selector-max-compound-selectors": [
3, 4,
{ {
"severity": "warning" "severity": "warning"
} }
@ -83,12 +83,17 @@
"scss/dollar-variable-empty-line-before": null, "scss/dollar-variable-empty-line-before": null,
"scss/dollar-variable-pattern": "[a-z-]", "scss/dollar-variable-pattern": "[a-z-]",
"scss/at-import-partial-extension": null, "scss/at-import-partial-extension": null,
"declaration-block-no-redundant-longhand-properties": [true, { "severity": "warning" }], "declaration-block-no-redundant-longhand-properties": null,
"color-function-notation": null, "color-function-notation": null,
"alpha-value-notation": null, "alpha-value-notation": null,
"at-rule-no-unknown": null, "at-rule-no-unknown": null,
"property-no-unknown": null,
"scss/at-rule-no-unknown": true, "scss/at-rule-no-unknown": true,
"selector-pseudo-class-no-unknown": [true, { "ignorePseudoClasses": ["selected"] }],
"font-family-no-missing-generic-family-keyword": null,
"scss/no-global-function-names": null, "scss/no-global-function-names": null,
"unit-no-unknown": [true, { "ignoreUnits": ["dp"] }] "unit-no-unknown": [true, { "ignoreUnits": ["dp"] }],
"selector-type-no-unknown": [true, { "ignore": ["custom-elements", "default-namespace"] }],
"value-keyword-case": null
} }
} }

115
assets/scss/package-lock.json generated
View File

@ -8,6 +8,9 @@
"name": "mmrecomp-ui-scss", "name": "mmrecomp-ui-scss",
"version": "1.0.0", "version": "1.0.0",
"license": "ISC", "license": "ISC",
"dependencies": {
"sass": "^1.75.0"
},
"devDependencies": { "devDependencies": {
"postcss-scss": "^4.0.9", "postcss-scss": "^4.0.9",
"stylelint": "^15.11.0", "stylelint": "^15.11.0",
@ -225,6 +228,18 @@
"node": ">=4" "node": ">=4"
} }
}, },
"node_modules/anymatch": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
"integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
"dependencies": {
"normalize-path": "^3.0.0",
"picomatch": "^2.0.4"
},
"engines": {
"node": ">= 8"
}
},
"node_modules/argparse": { "node_modules/argparse": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@ -264,6 +279,17 @@
"integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==", "integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==",
"dev": true "dev": true
}, },
"node_modules/binary-extensions": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
"integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
"engines": {
"node": ">=8"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/brace-expansion": { "node_modules/brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@ -284,7 +310,6 @@
"version": "3.0.2", "version": "3.0.2",
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
"dev": true,
"dependencies": { "dependencies": {
"fill-range": "^7.0.1" "fill-range": "^7.0.1"
}, },
@ -345,6 +370,29 @@
"node": ">=4" "node": ">=4"
} }
}, },
"node_modules/chokidar": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
"integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
"dependencies": {
"anymatch": "~3.1.2",
"braces": "~3.0.2",
"glob-parent": "~5.1.2",
"is-binary-path": "~2.1.0",
"is-glob": "~4.0.1",
"normalize-path": "~3.0.0",
"readdirp": "~3.6.0"
},
"engines": {
"node": ">= 8.10.0"
},
"funding": {
"url": "https://paulmillr.com/funding/"
},
"optionalDependencies": {
"fsevents": "~2.3.2"
}
},
"node_modules/color-convert": { "node_modules/color-convert": {
"version": "1.9.3", "version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@ -593,7 +641,6 @@
"version": "7.0.1", "version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
"dev": true,
"dependencies": { "dependencies": {
"to-regex-range": "^5.0.1" "to-regex-range": "^5.0.1"
}, },
@ -643,6 +690,19 @@
"integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==", "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
"dev": true "dev": true
}, },
"node_modules/fsevents": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
"hasInstallScript": true,
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
}
},
"node_modules/function-bind": { "node_modules/function-bind": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@ -676,7 +736,6 @@
"version": "5.1.2", "version": "5.1.2",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
"dev": true,
"dependencies": { "dependencies": {
"is-glob": "^4.0.1" "is-glob": "^4.0.1"
}, },
@ -799,6 +858,11 @@
"node": ">= 4" "node": ">= 4"
} }
}, },
"node_modules/immutable": {
"version": "4.3.5",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz",
"integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw=="
},
"node_modules/import-fresh": { "node_modules/import-fresh": {
"version": "3.3.0", "version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@ -882,6 +946,17 @@
"integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==", "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
"dev": true "dev": true
}, },
"node_modules/is-binary-path": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
"dependencies": {
"binary-extensions": "^2.0.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/is-core-module": { "node_modules/is-core-module": {
"version": "2.13.1", "version": "2.13.1",
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
@ -898,7 +973,6 @@
"version": "2.1.1", "version": "2.1.1",
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
"dev": true,
"engines": { "engines": {
"node": ">=0.10.0" "node": ">=0.10.0"
} }
@ -916,7 +990,6 @@
"version": "4.0.3", "version": "4.0.3",
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
"dev": true,
"dependencies": { "dependencies": {
"is-extglob": "^2.1.1" "is-extglob": "^2.1.1"
}, },
@ -928,7 +1001,6 @@
"version": "7.0.0", "version": "7.0.0",
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
"dev": true,
"engines": { "engines": {
"node": ">=0.12.0" "node": ">=0.12.0"
} }
@ -1210,7 +1282,6 @@
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
"dev": true,
"engines": { "engines": {
"node": ">=0.10.0" "node": ">=0.10.0"
} }
@ -1321,7 +1392,6 @@
"version": "2.3.1", "version": "2.3.1",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
"dev": true,
"engines": { "engines": {
"node": ">=8.6" "node": ">=8.6"
}, },
@ -1515,6 +1585,17 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/readdirp": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
"dependencies": {
"picomatch": "^2.2.1"
},
"engines": {
"node": ">=8.10.0"
}
},
"node_modules/redent": { "node_modules/redent": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/redent/-/redent-4.0.0.tgz", "resolved": "https://registry.npmjs.org/redent/-/redent-4.0.0.tgz",
@ -1597,6 +1678,22 @@
"queue-microtask": "^1.2.2" "queue-microtask": "^1.2.2"
} }
}, },
"node_modules/sass": {
"version": "1.75.0",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.75.0.tgz",
"integrity": "sha512-ShMYi3WkrDWxExyxSZPst4/okE9ts46xZmJDSawJQrnte7M1V9fScVB+uNXOVKRBt0PggHOwoZcn8mYX4trnBw==",
"dependencies": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
"source-map-js": ">=0.6.2 <2.0.0"
},
"bin": {
"sass": "sass.js"
},
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/semver": { "node_modules/semver": {
"version": "7.5.4", "version": "7.5.4",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
@ -1687,7 +1784,6 @@
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
"integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
"dev": true,
"engines": { "engines": {
"node": ">=0.10.0" "node": ">=0.10.0"
} }
@ -2047,7 +2143,6 @@
"version": "5.0.1", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
"dev": true,
"dependencies": { "dependencies": {
"is-number": "^7.0.0" "is-number": "^7.0.0"
}, },

10
assets/scss/package.json
View File

@ -5,9 +5,10 @@
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"start": "npm run watch", "start": "npm run watch",
"watch": "sass --no-source-map --style=compressed main.scss ..\\recomp.rcss --watch", "watch": "sass --no-source-map --no-charset --style=compressed main.scss ..\\recomp.rcss --watch",
"watch-debug": "sass --no-source-map main.scss ..\\recomp.rcss --watch", "watch:debug": "sass --no-source-map --no-charset main.scss ..\\recomp.rcss --watch",
"build": "sass --no-source-map --style=compressed main.scss ..\\recomp.rcss", "build": "sass --no-source-map --no-charset --style=compressed main.scss ..\\recomp.rcss",
"build:debug": "sass --no-source-map --no-charset main.scss ..\\recomp.rcss",
"lint": "stylelint '.\\**\\*.scss'" "lint": "stylelint '.\\**\\*.scss'"
}, },
"author": "", "author": "",
@ -21,5 +22,8 @@
"stylelint-config-standard": "^34.0.0", "stylelint-config-standard": "^34.0.0",
"stylelint-config-standard-scss": "^11.1.0", "stylelint-config-standard-scss": "^11.1.0",
"stylelint-scss": "^5.3.1" "stylelint-scss": "^5.3.1"
},
"dependencies": {
"sass": "^1.75.0"
} }
} }

8
assets/scss/styles/components/BottomLeft.scss
View File

@ -2,13 +2,13 @@
.bottom-left { .bottom-left {
display: flex; display: flex;
flex-direction: row;
position: absolute; position: absolute;
bottom: space(4);
flex-direction: row;
align-items: flex-start; align-items: flex-start;
justify-content: flex-start; justify-content: flex-start;
height: auto;
bottom: space(4);
margin: 0 space(4);
width: 100%; width: 100%;
max-width: space($base-modal-max-width); max-width: space($base-modal-max-width);
height: auto;
margin: 0 space(4);
} }

14
assets/scss/styles/components/Button.scss
View File

@ -1,14 +1,14 @@
@use 'sass:color'; @use 'sass:color';
@mixin create-button-variation($base-col) { @mixin create-button-variation($base-col) {
border-color: rgba($base-col, 0.8);
background-color: rgba($base-col, 0.05); background-color: rgba($base-col, 0.05);
color: $color-text-dim; color: $color-text-dim;
border-color: rgba($base-col, 0.8);
&:focus, &:hover { &:focus, &:hover {
color: $color-text;
border-color: $base-col; border-color: $base-col;
background-color: rgba($base-col, 0.3); background-color: rgba($base-col, 0.3);
color: $color-text;
} }
&:disabled,&[disabled] { &:disabled,&[disabled] {
@ -28,13 +28,13 @@
@include trans-colors; @include trans-colors;
display: block; display: block;
// leave 1dp room for border expansion
padding: space(24 - 1);
border-radius: $border-radius-md;
border-width: $border-width-thickness;
width: auto; width: auto;
height: auto; height: auto;
// leave 1dp room for border expansion
padding: space(24 - 1);
border-width: $border-width-thickness;
border-radius: $border-radius-md;
// Setting it by default for convenience // Setting it by default for convenience
// &--primary { // &--primary {

24
assets/scss/styles/components/CenteredPage.scss
View File

@ -15,27 +15,27 @@
.centered-page__modal { .centered-page__modal {
@extend %nav-all; @extend %nav-all;
display: flex; display: flex;
flex-direction: column;
position: relative; position: relative;
margin: auto;
flex: 1 1 100%; flex: 1 1 100%;
max-width: space($base-modal-max-width); flex-direction: column;
width: 100%; width: 100%;
max-width: space($base-modal-max-width);
height: 100%; height: 100%;
background: $color-modal-overlay; margin: auto;
border-width: $border-width-thickness;
border-radius: $border-radius-modal; border-radius: $border-radius-modal;
border-color: $color-border; border-color: $color-border;
border-width: $border-width-thickness; background: $color-modal-overlay;
> .tabs { > .tabs {
display: flex; display: flex;
flex-direction: column;
position: relative; position: relative;
margin: auto;
flex: 1 1 100%; flex: 1 1 100%;
max-width: space($base-modal-max-width); flex-direction: column;
width: 100%; width: 100%;
max-width: space($base-modal-max-width);
height: 100%; height: 100%;
margin: auto;
} }
panels { panels {
@ -45,15 +45,15 @@
.centered-page__controls { .centered-page__controls {
display: flex; display: flex;
flex-direction: row;
position: absolute; position: absolute;
bottom: space(24);
flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: auto;
bottom: space(24);
margin: 0 auto;
width: 100%; width: 100%;
max-width: space($base-modal-max-width); max-width: space($base-modal-max-width);
height: auto;
margin: 0 auto;
> label { > label {
@extend %label-sm; @extend %label-sm;

61
assets/scss/styles/components/Config.scss
View File

@ -8,30 +8,29 @@
.config__form { .config__form {
@include border-top($color-border-soft); @include border-top($color-border-soft);
display: flex; display: flex;
flex: 1 1 100%;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
flex: 1 1 100%;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-bottom-left-radius: $border-radius-modal;
border-bottom-right-radius: $border-radius-modal; border-bottom-right-radius: $border-radius-modal;
border-bottom-left-radius: $border-radius-modal;
} }
.config__wrapper { .config__wrapper {
border-radius: 0dp;
flex: 1 1 100%; flex: 1 1 100%;
height: 100%;
padding: space(16);
text-align: left;
background-color: $color-bg-shadow;
width: auto; width: auto;
height: auto; height: auto;
padding: space(16);
border-radius: 0dp;
background-color: $color-bg-shadow;
text-align: left;
p { p {
@extend %body; @extend %body;
padding: space(16); padding: space(16);
white-space: pre-line;
line-height: space(28); line-height: space(28);
white-space: pre-line;
b { b {
color: $color-primary; color: $color-primary;
@ -41,18 +40,18 @@
.config__hz-wrapper { .config__hz-wrapper {
display: flex; display: flex;
flex-direction: row;
border-radius: 0dp;
flex: 1 1 100%; flex: 1 1 100%;
flex-direction: row;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 0dp;
text-align: left; text-align: left;
} }
.config__header, .config__footer { .config__header, .config__footer {
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
justify-content: space-between;
width: 100%; width: 100%;
background-color: $color-bg-shadow; background-color: $color-bg-shadow;
} }
@ -65,14 +64,14 @@
.config__footer { .config__footer {
@include border-top($color-border-soft); @include border-top($color-border-soft);
padding: space(20) space(20); padding: space(20) space(20);
border-bottom-left-radius: $border-radius-modal;
border-bottom-right-radius: $border-radius-modal; border-bottom-right-radius: $border-radius-modal;
border-bottom-left-radius: $border-radius-modal;
} }
.config__header-left { .config__header-left {
display: flex; display: flex;
flex-direction: row;
flex: 1 1 auto; flex: 1 1 auto;
flex-direction: row;
> :not(:first-child) { > :not(:first-child) {
margin-left: space(8); margin-left: space(8);
@ -86,8 +85,8 @@
.config-option { .config-option {
display: flex; display: flex;
flex-direction: column;
flex: 1; flex: 1;
flex-direction: column;
align-items: flex-start; align-items: flex-start;
justify-content: flex-start; justify-content: flex-start;
margin: space(16) space(0) space(24); margin: space(16) space(0) space(24);
@ -104,12 +103,12 @@
.config-option__list { .config-option__list {
display: flex; display: flex;
padding: 0;
flex-direction: row; flex-direction: row;
width: 100%;
height: auto;
align-items: flex-start; align-items: flex-start;
justify-content: flex-start; justify-content: flex-start;
width: 100%;
height: auto;
padding: 0;
input:first-of-type { input:first-of-type {
nav-left: none; nav-left: none;
@ -124,15 +123,15 @@
@include trans-colors-opa; @include trans-colors-opa;
display: block; display: block;
position: relative; position: relative;
padding: space(8) 0;
height: auto; height: auto;
margin: space(4) space(12) 0; margin: space(4) space(12) 0;
padding: space(8) 0;
color: $color-text-inactive; color: $color-text-inactive;
tab-index: none; tab-index: none;
&:hover { &:hover {
cursor: pointer;
color: $color-text; color: $color-text;
cursor: pointer;
} }
} }
@ -156,8 +155,8 @@
.rmlui-window:not([mouse-active]) &:focus + .config-option__tab-label { .rmlui-window:not([mouse-active]) &:focus + .config-option__tab-label {
animation: $focus-anim-border; animation: $focus-anim-border;
color: $color-secondary;
border-color: $color-secondary; border-color: $color-secondary;
color: $color-secondary;
} }
&:focus + .config-option__tab-label, &:focus + .config-option__tab-label,
@ -177,20 +176,20 @@
input.range slidertrack { input.range slidertrack {
@include trans-colors; @include trans-colors;
margin-top: 7dp;
height: 2dp; height: 2dp;
margin-top: 7dp;
background-color: $color-border; background-color: $color-border;
} }
input.range sliderbar { input.range sliderbar {
@include trans-colors; @include trans-colors;
margin-left: -8dp;
margin-right: -6dp;
width: space(16); width: space(16);
height: space(16); height: space(16);
background-color: $color-text-dim; margin-right: -6dp;
border-radius: 8dp; margin-left: -8dp;
transition: background-color $transition-quick; transition: background-color $transition-quick;
border-radius: 8dp;
background-color: $color-text-dim;
.rmlui-window:not([mouse-active]) &:focus { .rmlui-window:not([mouse-active]) &:focus {
@include border($color-a); @include border($color-a);
@ -198,8 +197,8 @@
} }
&:hover { &:hover {
cursor: pointer;
background-color: $color-text; background-color: $color-text;
cursor: pointer;
} }
} }
@ -216,24 +215,24 @@
.config-option__details { .config-option__details {
@extend %label-xs; @extend %label-xs;
color: $color-primary;
margin: space(14) space(12) 0;
height: space(18); height: space(18);
margin: space(14) space(12) 0;
color: $color-primary;
} }
.config-option__range-wrapper { .config-option__range-wrapper {
margin-top: space(4);
max-width: space(360); max-width: space(360);
margin-top: space(4);
} }
.config-option__range-label { .config-option__range-label {
@extend %label-sm; @extend %label-sm;
flex: 0 0 space(16);
display: block; display: block;
padding: 0; flex: 0 0 space(16);
margin: 0 12dp; margin: 0 12dp;
margin-right: space(16); margin-right: space(16);
padding: 0;
color: $color-text; color: $color-text;
tab-index: none; tab-index: none;
} }

32
assets/scss/styles/components/ControlOption.scss
View File

@ -59,10 +59,10 @@
.control-option__bindings { .control-option__bindings {
display: flex; display: flex;
position: relative; position: relative;
flex: 2 1 space(400);
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
flex: 2 1 space(400);
width: 100%; width: 100%;
height: space(56); height: space(56);
padding: 0 space(12) 0 space(4); padding: 0 space(12) 0 space(4);
@ -73,23 +73,23 @@
@include trans-colors-border; @include trans-colors-border;
display: flex; display: flex;
position: relative; position: relative;
align-items: center;
justify-content: center;
margin: 0 space(4);
flex: 1 1 100%; flex: 1 1 100%;
align-items: center;
justify-content: center;
width: 100%; width: 100%;
height: space(56); height: space(56);
margin: 0 space(4);
padding: space(8); padding: space(8);
background-color: $color-bg-overlay;
border-color: $color-bg-overlay;
border-width: $border-width-thickness; border-width: $border-width-thickness;
border-radius: $border-radius-sm; border-radius: $border-radius-sm;
border-color: $color-bg-overlay;
background-color: $color-bg-overlay;
&:focus, &:hover { &:focus, &:hover {
@include set-color($color-text); @include set-color($color-text);
background-color: $color-border-soft;
border-color: $color-text; border-color: $color-text;
background-color: $color-border-soft;
} }
&:active { &:active {
@ -116,24 +116,26 @@
0% { 0% {
transform: scale(1); transform: scale(1);
} }
50% { 50% {
transform: scale(0.85); transform: scale(0.85);
} }
to {
100% {
transform: scale(1); transform: scale(1);
} }
} }
.control-option__binding-recording { .control-option__binding-recording {
@include trans-colors-opa; @include trans-colors-opa;
position: absolute;
display: flex; display: flex;
align-items: center; position: absolute;
justify-content: center;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
align-items: center;
justify-content: center;
opacity: 0; opacity: 0;
.control-option__binding-circle { .control-option__binding-circle {
@ -141,9 +143,9 @@
width: space($rec-size); width: space($rec-size);
height: space($rec-size); height: space($rec-size);
background-color: $color-error;
border-radius: space($rec-size);
animation: 1.5s sine-in-out infinite control-option__binding-recording-scale; animation: 1.5s sine-in-out infinite control-option__binding-recording-scale;
border-radius: space($rec-size);
background-color: $color-error;
} }
.control-option__binding-edge { .control-option__binding-edge {
@ -152,13 +154,13 @@
position: absolute; position: absolute;
transform: translate(-50%, -50%);
top: 50%; top: 50%;
left: 50%; left: 50%;
width: space($edge-size); width: space($edge-size);
height: space($edge-size); height: space($edge-size);
transform: translate(-50%, -50%);
> svg.control-option__binding-edge-svg { > svg.control-option__binding-edge-svg {
width: space($edge-size); width: space($edge-size);
height: space($edge-size); height: space($edge-size);

18
assets/scss/styles/components/IconButton.scss
View File

@ -1,4 +1,5 @@
@use 'sass:color'; @use 'sass:color';
/* /*
<button <button
class="icon-button icon-button--danger" class="icon-button icon-button--danger"
@ -7,8 +8,8 @@
</button> </button>
*/ */
@mixin create-icon-button-variation($base-col) { @mixin create-icon-button-variation($base-col) {
background-color: rgba($base-col, 0.05);
border-color: rgba($base-col, 0.8); border-color: rgba($base-col, 0.8);
background-color: rgba($base-col, 0.05);
&:focus, &:hover { &:focus, &:hover {
border-color: $base-col; border-color: $base-col;
@ -29,17 +30,16 @@ $icon-button-size: 56 - ($border-width-thickness-num * 2);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: space($icon-button-size);
border-radius: space($icon-button-size * 0.5); min-width: space($icon-button-size);
max-width: space($icon-button-size);
height: space($icon-button-size);
min-height: space($icon-button-size);
max-height: space($icon-button-size);
border-width: $border-width-thickness; border-width: $border-width-thickness;
border-radius: space($icon-button-size * 0.5);
border-color: $color-transparent; border-color: $color-transparent;
background-color: $color-transparent; background-color: $color-transparent;
width: space($icon-button-size);
height: space($icon-button-size);
min-width: space($icon-button-size);
min-height: space($icon-button-size);
max-width: space($icon-button-size);
max-height: space($icon-button-size);
&:focus, &:hover { &:focus, &:hover {
@include set-color($color-text); @include set-color($color-text);

35
assets/scss/styles/components/InputConfig.scss
View File

@ -18,8 +18,8 @@ $visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width
.input-config__mappings { .input-config__mappings {
display: block; display: block;
flex: 1 1 auto; flex: 1 1 auto;
height: 100%;
min-width: space($mapping-min-width); min-width: space($mapping-min-width);
height: 100%;
} }
.input-config__mappings-scroll { .input-config__mappings-scroll {
@ -35,30 +35,30 @@ $visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width
.input-config__visual-wrapper { .input-config__visual-wrapper {
display: block; display: block;
flex: 1 1 100%;
width: auto; width: auto;
height: auto;
max-width: space($visual-max-width); max-width: space($visual-max-width);
height: auto;
max-height: space(math.div($visual-max-width, 4) * 3); max-height: space(math.div($visual-max-width, 4) * 3);
margin: auto 0; margin: auto 0;
flex: 1 1 100%;
} }
.input-config__visual-aspect { .input-config__visual-aspect {
position: relative; position: relative;
width: 100%; width: 100%;
margin: auto 0;
padding-bottom: 75%; padding-bottom: 75%;
background-color: $color-bg-shadow; background-color: $color-bg-shadow;
margin: auto 0;
} }
.input-config__visual { .input-config__visual {
display: flex; display: flex;
flex-direction: column;
position: absolute; position: absolute;
top: space(16); top: space(16);
right: space(16); right: space(16);
bottom: space(16); bottom: space(16);
left: space(16); left: space(16);
flex-direction: column;
border-radius: space(108); border-radius: space(108);
background-color: $color-white-a5; background-color: $color-white-a5;
} }
@ -66,8 +66,8 @@ $visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width
.input-config__visual-half { .input-config__visual-half {
display: flex; display: flex;
position: relative; position: relative;
flex-direction: row;
flex: 1 1 100%; flex: 1 1 100%;
flex-direction: row;
padding: 6%; padding: 6%;
&--bottom { &--bottom {
@ -79,9 +79,9 @@ $visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width
.input-config__visual-quarter-left { .input-config__visual-quarter-left {
display: flex; display: flex;
flex: 1 1 50%; flex: 1 1 50%;
width: auto;
align-items: flex-start; align-items: flex-start;
justify-content: flex-start; justify-content: flex-start;
width: auto;
} }
.input-config__visual-quarter-right { .input-config__visual-quarter-right {
@ -94,18 +94,18 @@ $visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width
.input-config__visual-stick-wrapper { .input-config__visual-stick-wrapper {
display: flex; display: flex;
position: absolute; position: absolute;
align-items: center;
justify-content: center;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
align-items: center;
justify-content: center;
} }
.input-viz { .input-viz {
@include trans-colors-opa; @include trans-colors-opa;
position: relative;
display: flex; display: flex;
position: relative;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -113,8 +113,8 @@ $visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
left: 0;
bottom: 0; bottom: 0;
left: 0;
} }
&__mappings div { &__mappings div {
@ -122,8 +122,7 @@ $visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width
} }
} }
$all-inputs: $all-inputs: A,
A,
B, B,
Z, Z,
START, START,
@ -206,6 +205,7 @@ $all-inputs:
} }
$dpad-size: 192; $dpad-size: 192;
.input-viz.input-viz__dpad { .input-viz.input-viz__dpad {
@include set-svgs-color($color-text); @include set-svgs-color($color-text);
@include set-sizes($dpad-size); @include set-sizes($dpad-size);
@ -213,6 +213,7 @@ $dpad-size: 192;
} }
$stick-size: 200; $stick-size: 200;
.input-config__visual-stick { .input-config__visual-stick {
display: flex; display: flex;
position: relative; position: relative;
@ -246,9 +247,9 @@ $stick-size: 200;
> div { > div {
display: flex; display: flex;
flex: 1 1 100%; flex: 1 1 100%;
flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: row;
} }
} }
@ -263,10 +264,10 @@ $stick-size: 200;
} }
.input-viz__dpad-arrow { .input-viz__dpad-arrow {
$edge-dist: space(4);
position: absolute; position: absolute;
width: space(60); width: space(60);
height: space(60); height: space(60);
$edge-dist: space(4);
&--up { &--up {
top: $edge-dist; top: $edge-dist;
@ -312,8 +313,8 @@ $stick-size: 200;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
left: 0;
bottom: 0; bottom: 0;
left: 0;
} }
&-lr { &-lr {
@ -337,10 +338,10 @@ $stick-size: 200;
.input-config__main-buttons { .input-config__main-buttons {
display: flex; display: flex;
position: relative;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
width: space(268); width: space(268);
height: space(128); height: space(128);
position: relative;
margin-right: space(10); margin-right: space(10);
} }

44
assets/scss/styles/components/Launcher.scss
View File

@ -11,31 +11,29 @@
.launcher { .launcher {
display: block; display: block;
position: relative;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: $color-background-1; background-color: $color-background-1;
// TODO: Affect all elements with launcher fade-in
// animation: 1.5s cubic-in-out 1 fade-launcher-in;
} }
.launcher__vertical-split { .launcher__vertical-split {
display: flex; display: flex;
position: absolute; position: absolute;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
top: 0; top: 0;
right: 50%; right: 50%;
bottom: 0; bottom: 0;
left: 0; left: 0;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
&--right { &--right {
align-items: flex-end;
right: 0; right: 0;
left: 50%; left: 50%;
align-items: flex-end;
} }
} }
@ -44,52 +42,52 @@
0% { 0% {
transform: translateX(space(100)); transform: translateX(space(100));
} }
to {
100% {
transform: translateX(space(0)); transform: translateX(space(0));
} }
} }
.launcher__background-wrapper { .launcher__background-wrapper {
display: flex; display: flex;
position: absolute;
top: -55vw;
right: -100%;
bottom: -50vw;
left: -70vw;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
position: absolute;
left: -70vw;
right: -100%;
top: -55vw;
bottom: -50vw;
transform: translateX(space(0)); transform: translateX(space(0));
animation: 25s cubic-out 1 slide-mm-bg-over; animation: 25s cubic-out 1 slide-mm-bg-over;
// height: auto;
} }
@keyframes fade-mm-in { @keyframes fade-mm-in {
0% { 0% {
opacity: 0; opacity: 0;
} }
to {
100% {
opacity: 0.1; opacity: 0.1;
} }
} }
.launcher__background-mm { .launcher__background-mm {
position: absolute; position: absolute;
left: 0;
top: 0; top: 0;
// top: -20%;
bottom: 0; bottom: 0;
height: 100%; left: 0;
width: auto; width: auto;
opacity: 0.1; height: 100%;
animation: 2.5s cubic-in-out 1 fade-mm-in; animation: 2.5s cubic-in-out 1 fade-mm-in;
opacity: 0.1;
} }
.launcher__title-quadrant { .launcher__title-quadrant {
flex: 1 1 auto; flex: 1 1 auto;
padding-top: space(96);
padding-left: space(96);
width: auto; width: auto;
height: auto; height: auto;
padding-top: space(96);
padding-left: space(96);
&--right { &--right {
padding-right: space(96); padding-right: space(96);
@ -100,11 +98,11 @@
.launcher__content-quadrant { .launcher__content-quadrant {
display: flex; display: flex;
position: relative; position: relative;
flex: 1 1 100%;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
justify-content: flex-end; justify-content: flex-end;
padding: space(32);
width: 100%; width: 100%;
height: auto; height: auto;
flex: 1 1 100%; padding: space(32);
} }

9
assets/scss/styles/components/MenuListItem.scss
View File

@ -25,12 +25,12 @@
cursor: pointer; cursor: pointer;
&--right { &--right {
align-content: flex-end;
flex-direction: row-reverse; flex-direction: row-reverse;
align-content: flex-end;
.menu-list-item__bullet { .menu-list-item__bullet {
opacity: 1;
margin-left: space(12); margin-left: space(12);
opacity: 1;
} }
&.menu-list-item:focus:not(:disabled, [disabled]), &.menu-list-item:focus:not(:disabled, [disabled]),
@ -60,11 +60,12 @@
} }
} }
.menu-list-item__label { .menu-list-item__label {
@extend .label-lg; @extend %label-lg;
} }
.menu-list-item__bullet { .menu-list-item__bullet {
opacity: 0;
margin-right: space(12); margin-right: space(12);
opacity: 0;
} }

27
assets/scss/styles/components/Prompt.scss
View File

@ -4,8 +4,8 @@ $prompt-space: 24;
.prompt { .prompt {
&__overlay { &__overlay {
pointer-events: none;
background-color: $color-bg-overlay; background-color: $color-bg-overlay;
pointer-events: none;
} }
&__overlay, &__overlay,
@ -18,33 +18,34 @@ $prompt-space: 24;
} }
&__content-wrapper { &__content-wrapper {
position: absolute;
display: flex; display: flex;
align-items: center; position: absolute;
justify-content: center;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
align-items: center;
justify-content: center;
} }
&__content { &__content {
display: flex; display: flex;
flex-direction: column;
position: relative; position: relative;
margin: auto;
flex: 1 1 100%; flex: 1 1 100%;
max-width: space(700); flex-direction: column;
width: 100%; width: 100%;
max-width: space(700);
height: auto; height: auto;
background: $color-modal-overlay; margin: auto;
border-width: $border-width-thickness;
border-radius: $border-radius-modal; border-radius: $border-radius-modal;
border-color: $color-border; border-color: $color-border;
border-width: $border-width-thickness; background: $color-modal-overlay;
h3, p { h3, p {
margin: space($prompt-space); margin: space($prompt-space);
} }
p { p {
margin-top: 0; margin-top: 0;
} }
@ -55,15 +56,15 @@ $prompt-space: 24;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
padding: space($prompt-space) space(math.div($prompt-space, 2)); padding: space($prompt-space) space(math.div($prompt-space, 2));
border-top-color: $color-border-soft;
border-top-width: $border-width-thickness; border-top-width: $border-width-thickness;
border-top-color: $color-border-soft;
.button { .button {
min-width: space(math.div(700, 3));
margin: 0 space(math.div($prompt-space, 2));
text-align: center;
nav-up: none; nav-up: none;
nav-down: none; nav-down: none;
margin: 0 space(math.div($prompt-space, 2));
min-width: space(math.div(700, 3));
text-align: center;
} }
} }
} }

12
assets/scss/styles/components/SubtitleTitle.scss
View File

@ -16,16 +16,16 @@
.subtitle-title { .subtitle-title {
display: block; display: block;
position: relative; position: relative;
flex-direction: column;
align-content: flex-start;
align-items: flex-start;
width: auto; width: auto;
height: auto; height: auto;
flex-direction: column; padding: 0;
align-items: flex-start;
align-content: flex-start;
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
color: $color-text-dim; color: $color-text-dim;
cursor: pointer;
text-align: left; text-align: left;
padding: 0; cursor: pointer;
&--right { &--right {
align-content: flex-end; align-content: flex-end;
@ -64,7 +64,7 @@
} }
&__disclaimer { &__disclaimer {
@extend .label-sm; @extend %label-sm;
margin-top: space(16); margin-top: space(16);
} }

12
assets/scss/styles/components/Tabs.scss
View File

@ -18,12 +18,12 @@
@extend %header-3; @extend %header-3;
display: block; display: block;
position: relative; position: relative;
padding: space(20) space(24);
background-color: rgba(0,0,0,0);
margin: 0; margin: 0;
color: $color-text-inactive; padding: space(20) space(24);
transition: color $transition-quick; transition: color $transition-quick;
opacity: 0.9; opacity: 0.9;
background-color: rgba(0,0,0,0);
color: $color-text-inactive;
&:selected { &:selected {
color: $color-text; color: $color-text;
@ -46,17 +46,17 @@
} }
&:focus, &:hover { &:focus, &:hover {
cursor: pointer;
color: $color-text;
opacity: 1; opacity: 1;
color: $color-text;
cursor: pointer;
} }
} }
.tab__indicator { .tab__indicator {
position: absolute; position: absolute;
background-color: rgba(0, 0, 0, 0);
right: 0; right: 0;
bottom: 2dp; bottom: 2dp;
left: 0; left: 0;
height: 2dp; height: 2dp;
background-color: rgba(0, 0, 0, 0);
} }

23
assets/scss/styles/components/Toggle.scss
View File

@ -12,25 +12,25 @@ $toggle-checked-left-offset: $toggle-width - $toggle-floater-margin - $toggle-fl
@extend %nav-all; @extend %nav-all;
@include trans-colors-opa; @include trans-colors-opa;
display: flex; display: flex;
position: relative;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
position: relative;
width: space($toggle-width); width: space($toggle-width);
height: space($toggle-height); height: space($toggle-height);
background: $color-transparent;
border-radius: space(math.div($toggle-height, 2)); border-radius: space(math.div($toggle-height, 2));
cursor: pointer;
opacity: 0.9; opacity: 0.9;
background: $color-transparent;
cursor: pointer;
&:hover, &:focus-visible, &:focus { &:hover, &:focus-visible, &:focus {
background-color: $color-secondary-a30;
opacity: 1; opacity: 1;
background-color: $color-secondary-a30;
} }
&:active { &:active {
background-color: $color-secondary-a5;
opacity: 1; opacity: 1;
background-color: $color-secondary-a5;
} }
.toggle__border { .toggle__border {
@ -40,10 +40,10 @@ $toggle-checked-left-offset: $toggle-width - $toggle-floater-margin - $toggle-fl
.toggle__floater { .toggle__floater {
position: absolute; position: absolute;
width: space($toggle-floater-width);
height: space($toggle-floater-height);
top: 50%; top: 50%;
left: space($toggle-floater-margin); left: space($toggle-floater-margin);
width: space($toggle-floater-width);
height: space($toggle-floater-height);
transform: translateY(-50%); transform: translateY(-50%);
border-radius: space(math.div($toggle-floater-height, 2)); border-radius: space(math.div($toggle-floater-height, 2));
background: $color-secondary-d; background: $color-secondary-d;
@ -56,12 +56,13 @@ $toggle-checked-left-offset: $toggle-width - $toggle-floater-margin - $toggle-fl
.toggle__icon { .toggle__icon {
&.toggle__icon--left { &.toggle__icon--left {
color: $color-secondary-l;
opacity: 0.9; opacity: 0.9;
color: $color-secondary-l;
} }
&.toggle__icon--right { &.toggle__icon--right {
color: $color-text;
opacity: 1.0; opacity: 1.0;
color: $color-text;
} }
} }
} }
@ -70,13 +71,13 @@ $toggle-checked-left-offset: $toggle-width - $toggle-floater-margin - $toggle-fl
.toggle__icons { .toggle__icons {
display: flex; display: flex;
position: absolute; position: absolute;
height: space(56);
top: 50%; top: 50%;
transform: translateY(-50%);
right: space(16); right: space(16);
left: space(16); left: space(16);
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
height: space(56);
transform: translateY(-50%);
} }
.toggle__icon { .toggle__icon {

23
assets/scss/styles/global.scss
View File

@ -25,18 +25,23 @@ body
pointer-events: none; pointer-events: none;
} }
} }
.nav-vert { .nav-vert {
@extend %nav-vert; @extend %nav-vert;
} }
.nav-horiz { .nav-horiz {
@extend %nav-horiz; @extend %nav-horiz;
} }
.nav-dir { .nav-dir {
@extend %nav-dir; @extend %nav-dir;
} }
.nav-foc { .nav-foc {
@extend %nav-foc; @extend %nav-foc;
} }
.nav-all { .nav-all {
@extend %nav-all; @extend %nav-all;
} }
@ -85,26 +90,30 @@ button {
0% { 0% {
color: $color-secondary; color: $color-secondary;
} }
50% { 50% {
color: $color-secondary-l; color: $color-secondary-l;
} }
to {
100% {
color: $color-secondary; color: $color-secondary;
} }
} }
@keyframes blue-pulse-with-border { @keyframes blue-pulse-with-border {
0% { 0% {
color: $color-secondary;
border-color: $color-secondary; border-color: $color-secondary;
color: $color-secondary;
} }
50% { 50% {
color: $color-secondary-l;
border-color: $color-secondary-l; border-color: $color-secondary-l;
color: $color-secondary-l;
} }
to {
color: $color-secondary; 100% {
border-color: $color-secondary; border-color: $color-secondary;
color: $color-secondary;
} }
} }
@ -112,10 +121,12 @@ button {
0% { 0% {
background-color: $color-secondary; background-color: $color-secondary;
} }
50% { 50% {
background-color: $color-secondary-l; background-color: $color-secondary-l;
} }
to {
100% {
background-color: $color-secondary; background-color: $color-secondary;
} }
} }

42
assets/scss/styles/globals/_old.scss
View File

@ -1,3 +1,5 @@
/* stylelint-disable color-no-hex */
/* stylelint-disable selector-max-id */
* { * {
box-sizing:border-box; box-sizing:border-box;
@ -5,16 +7,16 @@
hr { hr {
display:block; display:block;
background:black;
padding:1.5dp; padding:1.5dp;
background: $color-background-1;
} }
body { body {
color: #fff;
font-family: chiaro; font-family: chiaro;
font-weight: normal;
font-style: normal;
font-size: 20dp; font-size: 20dp;
color: #fff font-style: normal;
font-weight: normal
} }
/* div { /* div {
@ -24,11 +26,11 @@ body {
div#window { div#window {
position: relative; position: relative;
box-sizing: border-box;
width: 100%; width: 100%;
height: 100%; height: 100%;
box-sizing: border-box;
background-color: $color-background-2;
border-color: $color-border; border-color: $color-border;
background-color: $color-background-2;
} }
div#content { div#content {
@ -53,14 +55,14 @@ input.password {
box-sizing: border-box; box-sizing: border-box;
height: 31dp; height: 31dp;
padding: 11dp 10dp 0; padding: 11dp 10dp 0;
cursor: text; text-align: left;
text-align: left cursor: text
} }
textarea { textarea {
padding: 14dp 12dp 10dp; padding: 14dp 12dp 10dp;
cursor: text; text-align: left;
text-align: left cursor: text
} }
input.text, input.text,
@ -68,6 +70,7 @@ input.password,
select, select,
textarea { textarea {
/* color: #333; */ /* color: #333; */
/* font-size: 13dp */ /* font-size: 13dp */
height: auto; height: auto;
} }
@ -75,16 +78,19 @@ textarea {
table input.text { table input.text {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
height: auto;
/* height: 18dp; */ /* height: 18dp; */
margin: 0; margin: 0;
/* padding: 0 5dp; */
line-height: 1;
border-width: $border-width-thickness; border-width: $border-width-thickness;
border-color: #000; border-color: #000;
background-color: #fff; background-color: #fff;
font-size: 15dp; font-size: 15dp;
/* padding: 0 5dp; */
line-height: 1;
decorator: none; decorator: none;
height: auto;
/* vertical-align: center; */ /* vertical-align: center; */
} }
@ -186,11 +192,11 @@ select {
input.radio, input.radio,
input.checkbox { input.checkbox {
flex: 0; flex: 0;
width:0dp;
nav-up:auto;
nav-right:auto;
nav-down:auto;
nav-left:auto;
tab-index:auto; tab-index:auto;
focus:auto; focus:auto;
nav-up:auto;
nav-down:auto;
nav-right:auto;
nav-left:auto;
width:0dp;
} }

1
assets/scss/styles/mixins/_helpers.scss
View File

@ -29,6 +29,7 @@
image-color: $col; image-color: $col;
} }
} }
/* /*
@include set-color(COLOR); @include set-color(COLOR);
*/ */

6
assets/scss/styles/mixins/_typography.scss
View File

@ -60,24 +60,24 @@ $font-stack: chiaro;
%prompt-font-lg { %prompt-font-lg {
font-family: promptfont; font-family: promptfont;
font-size: space(56);
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: space(56);
line-height: space(56); line-height: space(56);
} }
%prompt-font { %prompt-font {
font-family: promptfont; font-family: promptfont;
font-size: space(40);
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: space(40);
line-height: space(40); line-height: space(40);
} }
%prompt-font-sm { %prompt-font-sm {
font-family: promptfont; font-family: promptfont;
font-size: space(32);
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: space(32);
line-height: space(32); line-height: space(32);
} }

6
assets/scss/styles/vars/_borders.scss
View File

@ -11,18 +11,18 @@ $border-width-thickness-num: 1.1;
$border-width-thickness: space($border-width-thickness-num); $border-width-thickness: space($border-width-thickness-num);
@mixin border($col: $color-border) { @mixin border($col: $color-border) {
border-color: $col;
border-width: $border-width-thickness; border-width: $border-width-thickness;
border-color: $col;
} }
@mixin border-top($col: $color-border) { @mixin border-top($col: $color-border) {
border-top-color: $col;
border-top-width: $border-width-thickness; border-top-width: $border-width-thickness;
border-top-color: $col;
} }
@mixin border-bottom($col: $color-border) { @mixin border-bottom($col: $color-border) {
border-bottom-color: $col;
border-bottom-width: $border-width-thickness; border-bottom-width: $border-width-thickness;
border-bottom-color: $col;
} }
@mixin inset-block($inset-amt) { @mixin inset-block($inset-amt) {

1
src/ui/ui_color_hack.cpp
View File

@ -36,6 +36,7 @@ namespace recomp {
html_colours["teal"] = Rml::Colourb(0, 128, 128); html_colours["teal"] = Rml::Colourb(0, 128, 128);
html_colours["aqua"] = Rml::Colourb(0, 255, 255); html_colours["aqua"] = Rml::Colourb(0, 255, 255);
html_colours["transparent"] = Rml::Colourb(0, 0, 0, 0); html_colours["transparent"] = Rml::Colourb(0, 0, 0, 0);
html_colours["whitesmoke"] = Rml::Colourb(245, 245, 245);
} }
PropertyParserColorHack::~PropertyParserColorHack() {} PropertyParserColorHack::~PropertyParserColorHack() {}