WIP: RTL layout with RTLCSS
Isaiah Odhner
parent
709c63cbcf
commit
d21b37404f
28
index.html
28
index.html
|
|
@ -5,9 +5,9 @@
|
|||
<title>JS Paint</title>
|
||||
|
||||
<link href="styles/normalize.css" rel="stylesheet" type="text/css">
|
||||
<link href="styles/layout.css" rel="stylesheet" type="text/css">
|
||||
<link href="styles/layout.css" class="flippable-layout-stylesheet" rel="stylesheet" type="text/css">
|
||||
<link href="styles/print.css" rel="stylesheet" type="text/css" media="print">
|
||||
<link href="lib/os-gui/layout.css" rel="stylesheet" type="text/css">
|
||||
<link href="lib/os-gui/layout.css" class="flippable-layout-stylesheet" rel="stylesheet" type="text/css">
|
||||
<!-- <link href="lib/os-gui/windows-98.css" rel="stylesheet" type="text/css"> -->
|
||||
<!-- <link href="lib/os-gui/windows-default.css" rel="stylesheet" type="text/css" title="Windows Default"> -->
|
||||
<!-- <link href="lib/os-gui/peggys-pastels.css" rel="alternate stylesheet" type="text/css" title="Peggy's Pastels"> -->
|
||||
|
|
@ -525,6 +525,30 @@
|
|||
}
|
||||
function load_language(language) {
|
||||
const prev_language = current_language;
|
||||
|
||||
const stylesheets = [...document.querySelectorAll(".flippable-layout-stylesheet")];
|
||||
for (const stylesheet of stylesheets) {
|
||||
let href = stylesheet.getAttribute("href");
|
||||
if (language.match(/^(ar|dv|fa|ha|he|ks|ku|ms|pa|ps|sd|ug|yi)\b/i)) {
|
||||
if (href.indexOf(".rtl.css") === -1) {
|
||||
href = href.replace(/\.css/, ".rtl.css");
|
||||
}
|
||||
} else {
|
||||
if (href.indexOf(".rtl.css") > -1) {
|
||||
href = href.replace(/\.rtl\.css/, ".css");
|
||||
}
|
||||
}
|
||||
stylesheet.setAttribute("href", href);
|
||||
// hack to wait for stylesheet to load
|
||||
const img = document.createElement("img");
|
||||
img.onerror = ()=> {
|
||||
$(()=> {
|
||||
$G.triggerHandler("theme-load"); // signal layout change
|
||||
});
|
||||
};
|
||||
img.src = href;
|
||||
}
|
||||
|
||||
if (language === base_language) {
|
||||
localizations = {};
|
||||
current_language = base_language;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@
|
|||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
user-select: none;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.os-window .window-titlebar,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,82 @@
|
|||
.menus,
|
||||
.menu-popup,
|
||||
.os-window,
|
||||
.os-window .window-titlebar,
|
||||
.os-window .window-title {
|
||||
cursor: default;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.os-window .window-titlebar,
|
||||
body > .window-titlebar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.os-window .window-title-area {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.os-window .window-titlebar .icon {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
/* Fix dragging things (like windows) over iframes */
|
||||
.dragging iframe {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.menus {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.menu-container {
|
||||
position: relative;
|
||||
}
|
||||
.menu-popup {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
z-index: 400000; /* so sub-menu-popups can be visible over the window */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.menu-popup-table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.menu-item {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.menu-hr {
|
||||
display: block !important;
|
||||
height: 0;
|
||||
width: auto;
|
||||
}
|
||||
.menu-hotkey {
|
||||
display: inline !important;
|
||||
}
|
||||
.menu-item-checkbox-area,
|
||||
.menu-item-submenu-area {
|
||||
min-width: 16px;
|
||||
}
|
||||
.menu-item-checkbox-area,
|
||||
.menu-item-submenu-area {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* .window-content .button-group {
|
||||
width: 85px;
|
||||
}
|
||||
.window-content .button-group > button {
|
||||
width: 95%;
|
||||
padding: 3px 5px;
|
||||
} */
|
||||
|
||||
::before,
|
||||
::after {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -2070,6 +2070,11 @@
|
|||
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
|
||||
"dev": true
|
||||
},
|
||||
"colorette": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.1.tgz",
|
||||
"integrity": "sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw=="
|
||||
},
|
||||
"colors": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
|
||||
|
|
@ -6698,6 +6703,11 @@
|
|||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"nanoid": {
|
||||
"version": "3.1.20",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.20.tgz",
|
||||
"integrity": "sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw=="
|
||||
},
|
||||
"nanomatch": {
|
||||
"version": "1.2.13",
|
||||
"resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
|
||||
|
|
@ -7312,6 +7322,16 @@
|
|||
"integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=",
|
||||
"dev": true
|
||||
},
|
||||
"postcss": {
|
||||
"version": "8.2.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.1.tgz",
|
||||
"integrity": "sha512-RhsqOOAQzTgh1UB/IZdca7F9WDb7SUCR2Vnv1x7DbvuuggQIpoDwjK+q0rzoPffhYvWNKX5JSwS4so4K3UC6vA==",
|
||||
"requires": {
|
||||
"colorette": "^1.2.1",
|
||||
"nanoid": "^3.1.20",
|
||||
"source-map": "^0.6.1"
|
||||
}
|
||||
},
|
||||
"prelude-ls": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
|
||||
|
|
@ -7732,6 +7752,111 @@
|
|||
"glob": "^7.0.5"
|
||||
}
|
||||
},
|
||||
"rtlcss": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-3.0.0.tgz",
|
||||
"integrity": "sha512-loscJGYHzENxRo6ZT9q9bmHw2P0c8LcC4J4GQitWX2AJFii5il+qfnEWLXy7RkWez7yBOrAsnbD7frBsjnaZJw==",
|
||||
"requires": {
|
||||
"chalk": "^4.1.0",
|
||||
"find-up": "^5.0.0",
|
||||
"mkdirp": "^1.0.4",
|
||||
"postcss": "^8.2.1",
|
||||
"strip-json-comments": "^3.1.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-styles": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||
"requires": {
|
||||
"color-convert": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"chalk": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
|
||||
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
|
||||
"requires": {
|
||||
"ansi-styles": "^4.1.0",
|
||||
"supports-color": "^7.1.0"
|
||||
}
|
||||
},
|
||||
"color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||
"requires": {
|
||||
"color-name": "~1.1.4"
|
||||
}
|
||||
},
|
||||
"color-name": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
|
||||
},
|
||||
"find-up": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
|
||||
"integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
|
||||
"requires": {
|
||||
"locate-path": "^6.0.0",
|
||||
"path-exists": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"has-flag": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
|
||||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
|
||||
},
|
||||
"locate-path": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
|
||||
"integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
|
||||
"requires": {
|
||||
"p-locate": "^5.0.0"
|
||||
}
|
||||
},
|
||||
"mkdirp": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
|
||||
"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw=="
|
||||
},
|
||||
"p-limit": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
|
||||
"integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
|
||||
"requires": {
|
||||
"yocto-queue": "^0.1.0"
|
||||
}
|
||||
},
|
||||
"p-locate": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
|
||||
"integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
|
||||
"requires": {
|
||||
"p-limit": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"path-exists": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
|
||||
"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="
|
||||
},
|
||||
"strip-json-comments": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
|
||||
"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
|
||||
"requires": {
|
||||
"has-flag": "^4.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"run-async": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/run-async/-/run-async-2.3.0.tgz",
|
||||
|
|
@ -8143,8 +8268,7 @@
|
|||
"source-map": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||
"dev": true
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
|
||||
},
|
||||
"source-map-resolve": {
|
||||
"version": "0.5.2",
|
||||
|
|
@ -9436,6 +9560,11 @@
|
|||
"requires": {
|
||||
"fd-slicer": "~1.0.1"
|
||||
}
|
||||
},
|
||||
"yocto-queue": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
|
||||
"integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -56,6 +56,7 @@
|
|||
"electron-is-dev": "^1.1.0",
|
||||
"electron-squirrel-startup": "^1.0.0",
|
||||
"glob": "^7.1.6",
|
||||
"rtlcss": "^3.0.0",
|
||||
"wallpaper": "4.4.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
@ -85,6 +86,7 @@
|
|||
"lint": "eslint src/",
|
||||
"lint-cat": "concat-glob-cli --files \"src/**/!(electron*).js\" --output concatenated-source.js && eslint --rule \"no-undef: error\" --rule \"no-unused-vars: error\" concatenated-source.js",
|
||||
"lint-cat:NOTE": "Disable the eslint comment that disables ThisExpression to use this.",
|
||||
"build-css": "rtlcss styles/layout.css styles/layout.rtl.css && rtlcss lib/os-gui/layout.css lib/os-gui/layout.rtl.css",
|
||||
"update-localization": "node ./localization/preprocess.js",
|
||||
"dev": "live-server --ignorePattern=\"(node_modules|cypress|out)[/\\\\\\\\]|package\\.json|cypress\\.json\"",
|
||||
"dev:NOTE": "@XXX: the octuple backlash ends up meaning a single backslash on Linux, two backslashes on Windows. In this case it's fine because it's in a regexp character class so the extra is redundant and doesn't cause an error.",
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
:root {
|
||||
--layout-stylesheet-loaded: "layout.css"/*rtl:"layout.rtl.css"*/;
|
||||
--layout-loaded: "ltr"/*rtl:"rtl"*/;
|
||||
}
|
||||
|
||||
html, body, .jspaint {
|
||||
width: 100%;
|
||||
|
|
@ -7,6 +11,9 @@ html, body, .jspaint {
|
|||
border: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.jspaint {
|
||||
direction: ltr;
|
||||
}
|
||||
.chooser-option {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -83,6 +90,10 @@ html, body, .jspaint {
|
|||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.tool-window .window-titlebar {
|
||||
direction: ltr;
|
||||
text-align: start;
|
||||
}
|
||||
.status-area,
|
||||
.component-area {
|
||||
flex: 0 0 auto;
|
||||
|
|
@ -413,7 +424,7 @@ html, body, .jspaint {
|
|||
grid-template-columns: repeat(8, 16px);
|
||||
grid-gap: 5px 9px;
|
||||
user-select: none;
|
||||
margin-left: 8px;
|
||||
margin-left: 8px/*rtl:ignore*/;
|
||||
}
|
||||
.edit-colors-window .swatch {
|
||||
width: 16px;
|
||||
|
|
@ -456,7 +467,7 @@ html, body, .jspaint {
|
|||
width: 218px;
|
||||
position: relative;
|
||||
padding-top: 7px;
|
||||
padding-left: 10px;
|
||||
padding-left: 10px/*rtl:ignore*/;
|
||||
}
|
||||
.edit-colors-window .window-content .button-group {
|
||||
display: flex;
|
||||
|
|
@ -468,13 +479,13 @@ html, body, .jspaint {
|
|||
}
|
||||
.edit-colors-window .window-content .define-custom-colors-button,
|
||||
.edit-colors-window .window-content .button-group button:first-of-type {
|
||||
margin-left: 5px;
|
||||
margin-left: 5px/*rtl:ignore*/;
|
||||
}
|
||||
.edit-colors-window .window-content button {
|
||||
height: 23px;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin-left: 3px;
|
||||
margin-left: 3px/*rtl:ignore*/;
|
||||
}
|
||||
.edit-colors-window .window-content .define-custom-colors-button {
|
||||
margin-top: 13px;
|
||||
|
|
@ -483,21 +494,21 @@ html, body, .jspaint {
|
|||
.edit-colors-window .window-content .add-to-custom-colors-button {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
right: 5px/*rtl:ignore*/;
|
||||
width: 213px;
|
||||
}
|
||||
.edit-colors-window .left-side label {
|
||||
display: block;
|
||||
margin-top: 7px;
|
||||
margin-bottom: 5px;
|
||||
margin-left: 5px;
|
||||
margin-left: 5px/*rtl:ignore*/;
|
||||
}
|
||||
.edit-colors-window .left-side label:nth-of-type(2) {
|
||||
margin-top: 18px;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
.edit-colors-window .luminosity-canvas {
|
||||
margin-left: 16px;
|
||||
margin-left: 16px/*rtl:ignore*/;
|
||||
}
|
||||
.edit-colors-window .result-color-canvas {
|
||||
margin-top: 4px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,836 @@
|
|||
:root {
|
||||
--layout-stylesheet-loaded: "layout.rtl.css";
|
||||
--layout-loaded: "rtl";
|
||||
}
|
||||
|
||||
html, body, .jspaint {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.jspaint {
|
||||
direction: rtl;
|
||||
}
|
||||
.chooser-option {
|
||||
display: flex;
|
||||
}
|
||||
.choose-shape-style {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
.choose-eraser,
|
||||
.choose-magnification,
|
||||
.choose-stroke-size,
|
||||
.choose-transparent-mode {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.choose-brush,
|
||||
.choose-airbrush-size {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-around;
|
||||
align-content: space-around;
|
||||
}
|
||||
.tool-options canvas {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.component-window .window-content,
|
||||
.component-window .window-content :not(table):not(tbody):not(tr):not(td) {
|
||||
display: flex;
|
||||
}
|
||||
.jspaint {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex: 1;
|
||||
}
|
||||
.horizontal {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
flex: 1 1 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.vertical {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex: 1;
|
||||
}
|
||||
.jspaint > .vertical {
|
||||
height: 100%;
|
||||
}
|
||||
@media (max-width: 200px) {
|
||||
.horizontal > .component-area {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-height: 340px) {
|
||||
.vertical > .component-area {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-height: 359px) {
|
||||
.vertical > .status-area {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
.window,
|
||||
.window-content {
|
||||
max-width: 100vw;
|
||||
max-height: 100vh;
|
||||
}
|
||||
.component-area,
|
||||
.tool-window .window-titlebar {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.tool-window .window-titlebar {
|
||||
direction: rtl;
|
||||
text-align: start;
|
||||
}
|
||||
.status-area,
|
||||
.component-area {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.selection,
|
||||
.textbox,
|
||||
.helper-layer {
|
||||
z-index: 3;
|
||||
}
|
||||
.selection,
|
||||
.textbox {
|
||||
display: block !important; /* @TODO: reduce overzealous display: flex; */
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
}
|
||||
|
||||
.textbox > img,
|
||||
.textbox > canvas,
|
||||
.selection > img,
|
||||
.selection > canvas {
|
||||
/* @TODO: maybe don't include the canvas in the DOM (is it helpful to inspect it tho? it's not critical...) */
|
||||
opacity: 0;
|
||||
}
|
||||
.selection > img,
|
||||
.selection > canvas,
|
||||
.helper-layer > canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.resize-ghost,
|
||||
.component-ghost {
|
||||
pointer-events: none;
|
||||
}
|
||||
.resize-ghost {
|
||||
z-index: 4;
|
||||
}
|
||||
.component-ghost {
|
||||
z-index: 5001; /* 50-5000 reserved for subwindows, which dynamically increase z-index */
|
||||
}
|
||||
.textbox-editor {
|
||||
color: transparent !important;
|
||||
background: transparent !important;
|
||||
caret-color: black;
|
||||
z-index: 4; /* go above handles and .main-canvas */
|
||||
outline: none;
|
||||
}
|
||||
/* debug */
|
||||
/*.textbox-editor:hover {
|
||||
color: rgba(255, 0, 255, 0.5) !important;
|
||||
}*/
|
||||
|
||||
.menu-container {
|
||||
position: relative;
|
||||
}
|
||||
.menu-popup {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
z-index: 5002; /* 50-5000 reserved for subwindows, which dynamically increase z-index */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.menu-popup-table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.menu-item {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.menu-hr {
|
||||
display: block !important;
|
||||
height: 0;
|
||||
width: auto;
|
||||
}
|
||||
.menu-hotkey {
|
||||
display: inline !important;
|
||||
}
|
||||
.menu-item-checkbox-area,
|
||||
.menu-item-submenu-area {
|
||||
min-width: 16px;
|
||||
}
|
||||
.menu-item-checkbox-area,
|
||||
.menu-item-submenu-area {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.status-area {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
cursor: default;
|
||||
height: 1.25em;
|
||||
}
|
||||
.status-text {
|
||||
flex-basis: auto;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
padding-left: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.status-coordinates {
|
||||
flex: 0 0 114px;
|
||||
min-width: 0px;
|
||||
padding-right: 3px;
|
||||
border-right: 1px solid #7b7b7b;
|
||||
}
|
||||
|
||||
.hover-halo {
|
||||
pointer-events: none;
|
||||
z-index: 1000000;
|
||||
box-shadow: 0 0 10px yellow, 0 0 3px yellow;
|
||||
}
|
||||
.dwell-indicator {
|
||||
position: fixed;
|
||||
pointer-events: none;
|
||||
z-index: 1000000;
|
||||
}
|
||||
.dwell-indicator::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
background: red;
|
||||
right: 2px;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
bottom: 2px;
|
||||
}
|
||||
.dwell-indicator:not(.for-release) {
|
||||
background: yellow;
|
||||
}
|
||||
.dwell-indicator.for-release {
|
||||
background: white;
|
||||
}
|
||||
.dwell-indicator:not(.for-release),
|
||||
.dwell-indicator:not(.for-release)::after {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.dwell-indicator.for-release,
|
||||
.dwell-indicator.for-release::after {
|
||||
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
|
||||
}
|
||||
.eye-gaze-mode .color-button {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
.eye-gaze-mode .colors-component.tall {
|
||||
width: 50px;
|
||||
}
|
||||
.eye-gaze-mode .colors-component.tall .color-box {
|
||||
width: 100%;
|
||||
}
|
||||
.eye-gaze-mode .colors-component.tall .current-colors {
|
||||
width: 100%;
|
||||
}
|
||||
.eye-gaze-mode .colors-component.tall .foreground-color {
|
||||
right: 12px;
|
||||
}
|
||||
.eye-gaze-mode .colors-component.tall .background-color {
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.eye-gaze-mode .os-window .window-titlebar,
|
||||
.eye-gaze-mode .tool-window .window-titlebar {
|
||||
font-size: 2rem;
|
||||
line-height: 1.2;
|
||||
height: 2.8rem;
|
||||
}
|
||||
.eye-gaze-mode .os-window .window-title-area,
|
||||
.eye-gaze-mode .tool-window .window-title-area {
|
||||
height: 100%;
|
||||
}
|
||||
.eye-gaze-mode .os-window .window-titlebar button,
|
||||
.eye-gaze-mode .tool-window .window-titlebar button {
|
||||
transform: scale(3);
|
||||
margin-left: 32px;
|
||||
}
|
||||
.eye-gaze-mode .tool-window .window-titlebar button {
|
||||
transform-origin: 100% 0;
|
||||
}
|
||||
|
||||
.eye-gaze-mode .menu-button {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.eye-gaze-mode .menu-button {
|
||||
height: 3rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
.eye-gaze-mode .menu-button,
|
||||
.eye-gaze-mode .menu-button * {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.eye-gaze-mode .menu-item * {
|
||||
font-size: 2rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.eye-gaze-mode .status-area {
|
||||
padding-right: 170px;
|
||||
}
|
||||
|
||||
.component-area {
|
||||
/* for measuring offsetTop/offsetLeft of component elements */
|
||||
/* (makes it relative to this element) */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tools-component {
|
||||
height: 273px;
|
||||
align-items: center;
|
||||
padding-right: 4px;
|
||||
padding-left: 2px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
.tool-options {
|
||||
display: flex;
|
||||
margin-top: 3px;
|
||||
width: 41px;
|
||||
height: 66px;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
}
|
||||
.tool-options > div {
|
||||
flex: 1;
|
||||
}
|
||||
.tools {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
.tool {
|
||||
display: block !important;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.component-area {
|
||||
display: flex;
|
||||
}
|
||||
.horizontal .component-area {
|
||||
flex-direction: column;
|
||||
}
|
||||
.component {
|
||||
display: flex;
|
||||
}
|
||||
.colors-component {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.colors-component.wide {
|
||||
height: 47px;
|
||||
}
|
||||
.colors-component.tall {
|
||||
width: 47px;
|
||||
}
|
||||
.palette {
|
||||
display: flex;
|
||||
}
|
||||
.colors-component.wide .palette {
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
.colors-component.tall .palette {
|
||||
flex-flow: column wrap;
|
||||
}
|
||||
.colors-component.wide .color-box,
|
||||
.colors-component.wide .palette {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 32px;
|
||||
}
|
||||
.colors-component.tall .color-box,
|
||||
.colors-component.tall .palette {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 32px;
|
||||
}
|
||||
.colors-component.wide .current-colors {
|
||||
width: 30px;
|
||||
height: 31px;
|
||||
}
|
||||
.colors-component.tall .current-colors {
|
||||
width: 31px;
|
||||
height: 32px;
|
||||
}
|
||||
.current-colors,
|
||||
.color-button {
|
||||
position: relative;
|
||||
}
|
||||
.foreground-color {
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 4px;
|
||||
}
|
||||
.background-color {
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
}
|
||||
.colors-component.tall .foreground-color {
|
||||
right: 4px;
|
||||
top: 3px;
|
||||
}
|
||||
.colors-component.tall .background-color {
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
}
|
||||
|
||||
.colors-component.wide .color-button,
|
||||
.colors-component.wide .color-selection {
|
||||
margin-right: 1px;
|
||||
}
|
||||
.colors-component.tall .color-button,
|
||||
.colors-component.tall .color-selection {
|
||||
margin-top: 1px;
|
||||
}
|
||||
.color-button,
|
||||
.color-selection {
|
||||
display: flex;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.edit-colors-window .color-grid {
|
||||
width: 222px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, 16px);
|
||||
grid-gap: 5px 9px;
|
||||
user-select: none;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.edit-colors-window .swatch {
|
||||
width: 16px;
|
||||
height: 13px;
|
||||
display: flex;
|
||||
}
|
||||
.edit-colors-window .window-content {
|
||||
font-family: Tahoma, sans-serif;
|
||||
font-size: 12px;
|
||||
}
|
||||
.edit-colors-window .swatch {
|
||||
outline: none; /* we'll provide a new focus indicator below */
|
||||
}
|
||||
.edit-colors-window .swatch.selected {
|
||||
outline: 1px solid black;
|
||||
outline-offset: 0px;
|
||||
}
|
||||
.edit-colors-window .swatch:focus::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
outline: 1px dotted black;
|
||||
outline-offset: 5px;
|
||||
}
|
||||
.edit-colors-window .window-content .left-right-split {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
}
|
||||
.edit-colors-window .window-content .left-side {
|
||||
/* display: flex;
|
||||
flex-flow: column; */
|
||||
width: 217px;
|
||||
height: 298px;
|
||||
}
|
||||
.edit-colors-window .window-content .right-side {
|
||||
width: 218px;
|
||||
position: relative;
|
||||
padding-top: 7px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.edit-colors-window .window-content .button-group {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
}
|
||||
.edit-colors-window .window-content .button-group button {
|
||||
min-width: 66px;
|
||||
margin: 3px;
|
||||
}
|
||||
.edit-colors-window .window-content .define-custom-colors-button,
|
||||
.edit-colors-window .window-content .button-group button:first-of-type {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.edit-colors-window .window-content button {
|
||||
height: 23px;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin-left: 3px;
|
||||
}
|
||||
.edit-colors-window .window-content .define-custom-colors-button {
|
||||
margin-top: 13px;
|
||||
width: 210px;
|
||||
}
|
||||
.edit-colors-window .window-content .add-to-custom-colors-button {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
width: 213px;
|
||||
}
|
||||
.edit-colors-window .left-side label {
|
||||
display: block;
|
||||
margin-top: 7px;
|
||||
margin-bottom: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.edit-colors-window .left-side label:nth-of-type(2) {
|
||||
margin-top: 18px;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
.edit-colors-window .luminosity-canvas {
|
||||
margin-left: 16px;
|
||||
}
|
||||
.edit-colors-window .result-color-canvas {
|
||||
margin-top: 4px;
|
||||
}
|
||||
@media (max-width: 450px) {
|
||||
.edit-colors-window {
|
||||
overflow: hidden;
|
||||
}
|
||||
.edit-colors-window.defining-custom-colors .left-side {
|
||||
/* display: none !important; */
|
||||
/* this element is determining the height */
|
||||
width: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
.edit-colors-window:not(.defining-custom-colors) .right-side {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.canvas-area {
|
||||
flex: 1;
|
||||
display: block !important;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
padding: 3px;
|
||||
}
|
||||
.main-canvas {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
.handle {
|
||||
position: absolute;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
z-index: 1;
|
||||
}
|
||||
.handle::after {
|
||||
/* make handles way easier to grab */
|
||||
content: "";
|
||||
pointer-events: all; /* @TODO: maybe don't have a blanket pointer-events: none; on pseudo elements */
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 50%;
|
||||
top: 50%;
|
||||
transform: translate(50%, -50%);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
max-width: inherit;
|
||||
max-height: inherit;
|
||||
/*background: rgba(255, 255, 0, 0.5);*/ /* debug */
|
||||
}
|
||||
.textbox::before {
|
||||
/* allow dragging textbox */
|
||||
/* In mspaint the border drawn around selections and textboxes extends out from them,
|
||||
centered on the pixels bordering the contents,
|
||||
which makes it more reasonable to have the border be a draggable thing.
|
||||
I'm making the draggable area outside the border for now. */
|
||||
content: "";
|
||||
pointer-events: all; /* @TODO: maybe don't have a blanket pointer-events: none; on pseudo elements */
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
left: -10px;
|
||||
top: -10px;
|
||||
bottom: -10px;
|
||||
/*background: orange;*/ /* debug */
|
||||
}
|
||||
|
||||
|
||||
.tool-window .window-title {
|
||||
display: inline-block !important;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: default;
|
||||
}
|
||||
.tool-window .window-close-button {
|
||||
display: block !important;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.window-content .button-group {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
flex-flow: column;
|
||||
}
|
||||
.window-content .button-group > button {
|
||||
min-width: 80px;
|
||||
padding: 3px 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.window-content > form {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
}
|
||||
.dialogue-window .window-content > form {
|
||||
flex-flow: column;
|
||||
}
|
||||
.dialogue-window .window-content > form > .button-group {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.dialogue-window .window-content > form > div:first-child {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.flip-and-rotate fieldset {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
/* @TODO: part of os-gui */
|
||||
.os-window {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
/* @TODO: part of os-gui */
|
||||
.os-window .window-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.help-window .window-content {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
.help-window .main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
}
|
||||
.help-window .toolbar button {
|
||||
width: 55px;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
line-height: 60px;
|
||||
}
|
||||
.help-window .toolbar button {
|
||||
position: relative;
|
||||
}
|
||||
.help-window .toolbar button .icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.help-window .toolbar button .icon {
|
||||
background-image: url("../images/help-viewer-toolbar-icons-grayscale.png");
|
||||
}
|
||||
.help-window .toolbar button:not([disabled]):hover .icon {
|
||||
background-image: url("../images/help-viewer-toolbar-icons.png");
|
||||
}
|
||||
.help-window .toolbar button[disabled] .icon {
|
||||
filter: saturate(0%) opacity(50%); /* fallback */
|
||||
filter: url("#disabled-inset-filter");
|
||||
}
|
||||
.help-window .contents {
|
||||
background: white;
|
||||
background: var(--Window);
|
||||
color: var(--WindowText);
|
||||
flex-basis: 300px; /* normally the default is 200px, but that leaves a scrollbar and we don't have rollover viewing of longer titles (@TODO) */
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.help-window ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.help-window li {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.help-window .item {
|
||||
display: inline-block;
|
||||
}
|
||||
.help-window .folder:not(.expanded) ul {
|
||||
display: none;
|
||||
}
|
||||
.help-window iframe {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
}
|
||||
.help-window li ul {
|
||||
padding-right: 16px;
|
||||
}
|
||||
.help-window li:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-position: 100% 0;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.help-window .folder.expanded:before {
|
||||
background-position: -16px 0;
|
||||
}
|
||||
.help-window .page:before {
|
||||
background-position: -32px 0;
|
||||
}
|
||||
|
||||
.dragging iframe {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.storage-manager table {
|
||||
max-height: 400px;
|
||||
overflow: auto;
|
||||
display: block;
|
||||
}
|
||||
.storage-manager .thumbnail-container {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.storage-manager .thumbnail-container > img {
|
||||
max-width: 64px;
|
||||
max-height: 64px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.storage-manager .thumbnail-container,
|
||||
.storage-manager p {
|
||||
margin: 5px;
|
||||
}
|
||||
.storage-manager .remove-button {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.history-view {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
max-width: calc(100vw - 10px);
|
||||
max-height: calc(100vh - 100px);
|
||||
overflow: auto;
|
||||
}
|
||||
.history-entry {
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
}
|
||||
.history-entry-icon-area {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
.history-entry.current {
|
||||
font-weight: bold;
|
||||
}
|
||||
.history-entry:not(.current):not(.ancestor-of-current) {
|
||||
color: gray;
|
||||
}
|
||||
.history-entry:hover:hover:hover { /* specificity hack vs :not()s */
|
||||
color: #0000ff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
::before, ::after {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.cursor-bully * {
|
||||
cursor: inherit !important;
|
||||
}
|
||||
|
||||
#about-paint-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 0;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#jspaint-project-name {
|
||||
margin-right: 10px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
#jspaint-version {
|
||||
/* @TODO: separate into a shared.css? (not really layout!) */
|
||||
font-size: 0.6em;
|
||||
color: #7b7b7b;
|
||||
}
|
||||
#maybe-outdated-line {
|
||||
font-style: italic;
|
||||
height: 2em;
|
||||
}
|
||||
#view-project-news {
|
||||
margin: auto;
|
||||
margin-left: 40px;
|
||||
width: 150px;
|
||||
height: 2.2em;
|
||||
}
|
||||
|
||||
#news {
|
||||
max-height: 500px;
|
||||
overflow: auto;
|
||||
}
|
||||
@media (max-height: 550px) {
|
||||
#news {
|
||||
max-height: calc(100vh - 50px);
|
||||
}
|
||||
}
|
||||
|
||||
.news-indicator {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
.news-indicator > img {
|
||||
margin-left: 5px;
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
.news-indicator > img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.news-indicator .not-the-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
[touch-action="none"] {
|
||||
touch-action: none;
|
||||
}
|
||||
Loading…
Reference in New Issue