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

File diff suppressed because one or more lines are too long

View File

@ -30,7 +30,7 @@
"color-no-hex": true,
"function-url-quotes": "always",
"max-nesting-depth": [
3,
4,
{
"ignoreAtRules": ["each", "media", "supports", "include"],
"severity": "warning"
@ -69,7 +69,7 @@
"scss/selector-no-redundant-nesting-selector": null,
"selector-class-pattern": null,
"selector-max-compound-selectors": [
3,
4,
{
"severity": "warning"
}
@ -83,12 +83,17 @@
"scss/dollar-variable-empty-line-before": null,
"scss/dollar-variable-pattern": "[a-z-]",
"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,
"alpha-value-notation": null,
"at-rule-no-unknown": null,
"property-no-unknown": null,
"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,
"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
}
}

View File

@ -8,6 +8,9 @@
"name": "mmrecomp-ui-scss",
"version": "1.0.0",
"license": "ISC",
"dependencies": {
"sass": "^1.75.0"
},
"devDependencies": {
"postcss-scss": "^4.0.9",
"stylelint": "^15.11.0",
@ -225,6 +228,18 @@
"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": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@ -264,6 +279,17 @@
"integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==",
"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": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@ -284,7 +310,6 @@
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
"dev": true,
"dependencies": {
"fill-range": "^7.0.1"
},
@ -345,6 +370,29 @@
"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": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@ -593,7 +641,6 @@
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
"dev": true,
"dependencies": {
"to-regex-range": "^5.0.1"
},
@ -643,6 +690,19 @@
"integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
"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": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@ -676,7 +736,6 @@
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
"dev": true,
"dependencies": {
"is-glob": "^4.0.1"
},
@ -799,6 +858,11 @@
"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": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@ -882,6 +946,17 @@
"integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
"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": {
"version": "2.13.1",
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
@ -898,7 +973,6 @@
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
"dev": true,
"engines": {
"node": ">=0.10.0"
}
@ -916,7 +990,6 @@
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
"dev": true,
"dependencies": {
"is-extglob": "^2.1.1"
},
@ -928,7 +1001,6 @@
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
"dev": true,
"engines": {
"node": ">=0.12.0"
}
@ -1210,7 +1282,6 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
"dev": true,
"engines": {
"node": ">=0.10.0"
}
@ -1321,7 +1392,6 @@
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
"dev": true,
"engines": {
"node": ">=8.6"
},
@ -1515,6 +1585,17 @@
"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": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/redent/-/redent-4.0.0.tgz",
@ -1597,6 +1678,22 @@
"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": {
"version": "7.5.4",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
@ -1687,7 +1784,6 @@
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
"integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
"dev": true,
"engines": {
"node": ">=0.10.0"
}
@ -2047,7 +2143,6 @@
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
"dev": true,
"dependencies": {
"is-number": "^7.0.0"
},

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,7 +1,7 @@
@use 'sass:math';
// Probably will need to adjust for other langs...
$mapping-min-width: 80*8;
$mapping-min-width: 80 * 8;
$visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width;
.input-config {
@ -18,8 +18,8 @@ $visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width
.input-config__mappings {
display: block;
flex: 1 1 auto;
height: 100%;
min-width: space($mapping-min-width);
height: 100%;
}
.input-config__mappings-scroll {
@ -35,30 +35,30 @@ $visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width
.input-config__visual-wrapper {
display: block;
flex: 1 1 100%;
width: auto;
height: auto;
max-width: space($visual-max-width);
height: auto;
max-height: space(math.div($visual-max-width, 4) * 3);
margin: auto 0;
flex: 1 1 100%;
}
.input-config__visual-aspect {
position: relative;
width: 100%;
margin: auto 0;
padding-bottom: 75%;
background-color: $color-bg-shadow;
margin: auto 0;
}
.input-config__visual {
display: flex;
flex-direction: column;
position: absolute;
top: space(16);
right: space(16);
bottom: space(16);
left: space(16);
flex-direction: column;
border-radius: space(108);
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 {
display: flex;
position: relative;
flex-direction: row;
flex: 1 1 100%;
flex-direction: row;
padding: 6%;
&--bottom {
@ -79,9 +79,9 @@ $visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width
.input-config__visual-quarter-left {
display: flex;
flex: 1 1 50%;
width: auto;
align-items: flex-start;
justify-content: flex-start;
width: auto;
}
.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 {
display: flex;
position: absolute;
align-items: center;
justify-content: center;
top: 0;
right: 0;
bottom: 0;
left: 0;
align-items: center;
justify-content: center;
}
.input-viz {
@include trans-colors-opa;
position: relative;
display: flex;
position: relative;
align-items: center;
justify-content: center;
@ -113,8 +113,8 @@ $visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
left: 0;
}
&__mappings div {
@ -122,8 +122,7 @@ $visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width
}
}
$all-inputs:
A,
$all-inputs: A,
B,
Z,
START,
@ -206,6 +205,7 @@ $all-inputs:
}
$dpad-size: 192;
.input-viz.input-viz__dpad {
@include set-svgs-color($color-text);
@include set-sizes($dpad-size);
@ -213,6 +213,7 @@ $dpad-size: 192;
}
$stick-size: 200;
.input-config__visual-stick {
display: flex;
position: relative;
@ -246,9 +247,9 @@ $stick-size: 200;
> div {
display: flex;
flex: 1 1 100%;
flex-direction: row;
align-items: center;
justify-content: center;
flex-direction: row;
}
}
@ -263,10 +264,10 @@ $stick-size: 200;
}
.input-viz__dpad-arrow {
$edge-dist: space(4);
position: absolute;
width: space(60);
height: space(60);
$edge-dist: space(4);
&--up {
top: $edge-dist;
@ -304,16 +305,16 @@ $stick-size: 200;
.input-config__c-buttons {
position: relative;
width: space(76+76+56);
height: space(76+56);
width: space(76 + 76 + 56);
height: space(76 + 56);
&-lr, &-du {
display: flex;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
left: 0;
}
&-lr {
@ -337,10 +338,10 @@ $stick-size: 200;
.input-config__main-buttons {
display: flex;
position: relative;
flex-direction: row;
justify-content: space-between;
width: space(268);
height: space(128);
position: relative;
margin-right: space(10);
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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