From 1141cd6d78be18971bced6158bec4a018b29386b Mon Sep 17 00:00:00 2001 From: Renaud Bidou <34469789+rbidou@users.noreply.github.com> Date: Tue, 9 Jul 2024 14:18:51 +0200 Subject: [PATCH] v1.0 --- README.md | 0 css/forms.css | 238 ++++++++++++++++++++ css/main.css | 62 +++++ css/variables.css | 133 +++++++++++ html/ztaa.html | 34 +++ img/icon128-inactive.png | Bin 0 -> 2399 bytes img/icon128.png | Bin 0 -> 2402 bytes img/icon16-inactive.png | Bin 0 -> 478 bytes img/icon16.png | Bin 0 -> 478 bytes img/icon48-inactive.png | Bin 0 -> 1177 bytes img/icon48.png | Bin 0 -> 1180 bytes js/background.js | 8 + js/functions.js | 473 +++++++++++++++++++++++++++++++++++++++ js/ztaa.js | 47 ++++ manifest.json | 31 +++ 15 files changed, 1026 insertions(+) create mode 100644 README.md create mode 100644 css/forms.css create mode 100644 css/main.css create mode 100644 css/variables.css create mode 100644 html/ztaa.html create mode 100644 img/icon128-inactive.png create mode 100644 img/icon128.png create mode 100644 img/icon16-inactive.png create mode 100644 img/icon16.png create mode 100644 img/icon48-inactive.png create mode 100644 img/icon48.png create mode 100644 js/background.js create mode 100644 js/functions.js create mode 100644 js/ztaa.js create mode 100644 manifest.json diff --git a/README.md b/README.md new file mode 100644 index 0000000..e69de29 diff --git a/css/forms.css b/css/forms.css new file mode 100644 index 0000000..e230ced --- /dev/null +++ b/css/forms.css @@ -0,0 +1,238 @@ +/******************************************* + FORMS +*******************************************/ + +/** INPUTS **/ + +input { + font-family: var(--default-fonts); + border: solid 2px var(--form-border-color); + border-radius: .25rem; + color: var(--form-text-color); + background-color: var(--form-bg-color); + padding-top: .5rem; + padding-bottom: .5rem; + padding-left: 10px; + width: 300px; + font-size: medium; + font-family: var(--default-fonts); +} + +input:disabled { + border: none; +} + +textarea { + font-family: var(--default-fonts); + border: solid 2px var(--form-border-color); + border-radius: .25rem; + color: var(--form-text-color); + background-color: var(--form-bg-color); + padding-top: .5rem; + padding-bottom: .5rem; + padding-left: 10px; + width: 300px; + font-size: medium; + font-family: var(--default-fonts); +} + +textarea:disabled { + border: none; +} + +input[type="select"], select { + background-color: none; + height: 41px; +} + +input[type="select"]:disabled, select:disabled { + border:none; +} + +/** BUTTONS **/ + +.buttons-row-container { + display: flex; + flex-direction: row; +} + +input[type="button"], +input[type="submit"] { + padding-left: 0px; + padding-right: 0px; + width: 315px; + cursor: pointer; + margin-top: .2rem; +} + +.span-button { + padding: var(--default-vertical-padding) var(--default-horizontal-padding); + width: auto; + cursor: pointer; + margin-top: .2rem; + border-radius: var(--default-border-radius); + border: solid 2px var(--main-border-color); +} + +input[type="button"]:hover:not([disabled]), +input[type="submit"]:hover:not([disabled]), +.span-button:hover:not([disabled]) { + background-color: var(--button-hover-color); + color: var(--alt-text-color); + font-weight: bold; +} + +input[type="button"]:disabled, +input[type="submit"]:disabled, +.span-button:disabled { + color: var(--inactive-color); + border: solid 2px var(--inactive-color); + cursor: initial; +} + +/** CHECKBOX **/ +input[type="checkbox"] { + /* Reset system appearance */ + -webkit-appearance: none; + appearance: none; + margin: 0; + padding: 0 .25em 0 .25em; + + /* Box appearance */ + font: inherit; + border: solid 1px currentColor; + border-radius: 0 !important; + color: var(--form-text-color); + background-color: var(--form-bg-color); + width: 1.15em; + height: 1.15em; + + /* Cursor */ + cursor: pointer; + + /* Set display */ + display: grid; + place-content: center; +} + +input[type="checkbox"]::before { + content: ""; + width: 0.65em; + height: 0.65em; + /*clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);*/ + transform: scale(0); + transition: 120ms transform ease-in-out; + box-shadow: inset 1em 1em var(--main-text-color); +} + +input[type="checkbox"]:checked::before { + transform: scale(1); +} + +input[type="checkbox"]:disabled, +input[type="checkbox"]:checked:disabled::before { + color: var(--inactive-color); + cursor: initial; + border-width: 1px; + box-shadow: inset 1em 1em var(--inactive-color); +} + +.checkbox-static { + cursor: initial; + pointer-events: none; +} + +.checkbox-form { + display: flex; + gap: var(--default-horizontal-padding); + align-items: baseline; +} + +.input-small { + width: 200px !important; +} + +.error-form { + border-color: red !important; +} + +/** SELECT LABEL **/ +.header-list-label { + font-size: large; + margin-right: var(--large-horizontal-margin); +} + +/** PLACEHOLDER **/ + +::placeholder /* Chrome, Firefox, Opera, Safari 10.1+ */ +{ + color: var(--light-grey); + font-style: italic; + opacity: 1; /* Firefox */ +} + +:-ms-input-placeholder /* Internet Explorer 10-11 */ +{ + color: var(--light-grey); + font-style: italic; + opacity: 1; /* Firefox */ +} + +::-ms-input-placeholder /* Microsoft Edge */ +{ + color: var(--light-grey); + font-style: italic; + opacity: 1; /* Firefox */ +} + +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus, +input:-webkit-autofill:active { + -webkit-box-shadow: 0 0 0 30px var(--main-bg-color) inset !important; + -webkit-text-fill-color: var(--form-text-color) !important; +} + +/** SELECT **/ +select { + font-family: var(--default-fonts); + border: solid 2px var(--form-border-color); + border-radius: .25rem; + color: var(--form-text-color); + background-color: var(--form-bg-color); + padding-top: .5rem; + padding-bottom: .5rem; + padding-left: 10px; + width: 316px; + font-size: medium; +} + + +option:hover { + background-color: var(--highlight-color); + color: var(--highlight-text-color); + font-weight: bold; +} + +/** DATE **/ +input[type='date'] { + color: var(--light-grey) !important; + font-style: italic; + background:var(--main-bg-color) url(/img/icons/calendar.svg) 97% 50% no-repeat ; + color: white; + padding-right: var(--default-horizontal-padding); + cursor: pointer !important; +} + +input[type='date']::-webkit-calendar-picker-indicator { + opacity: 0; +} + +input[type="date"]::before{ + content: attr(placeholder)": "; + white-space: pre; + } + + input[type="date"]:focus::before { + content:""!important; + } \ No newline at end of file diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..63e2510 --- /dev/null +++ b/css/main.css @@ -0,0 +1,62 @@ +body { + width: 250px; +} + +.extension-main { + display: flex; + flex-direction: column; + width: 100%; +} + +.extension-title { + display: flex; + justify-content: center; + font-family: "Russo One"; + font-size: 1.1rem; + color: var(--pcb-blue); + width:100%; + margin-bottom: var(--default-vertical-margin); + margin-top: var(--default-vertical-margin); +} + +.extension-form { + display: flex; + flex-direction: column; + align-items: center; +} + +.extension-buttons { + display: flex; + flex-direction: column; + align-items: center; + width:100%; + margin-top: var(--default-vertical-margin); +} + +.extension-button { + padding: var(--default-padding); + color: var(--main-text-color); + background-color: var(--pcb-blue); + width: 200px; + text-align: center; + cursor: pointer; + font-size: medium; +} + +.extension-button:hover { + background-color: var(--highlight-color); +} + +input { + font-family: var(--default-fonts); + border: solid 2px var(--form-border-color); + border-radius: .25rem; + color: var(--form-text-color); + background-color: var(--form-bg-color); + padding-top: .5rem; + padding-bottom: .5rem; + padding-left: 10px; + width: 200px; + font-size: medium; + font-family: var(--default-fonts); +} \ No newline at end of file diff --git a/css/variables.css b/css/variables.css new file mode 100644 index 0000000..a5985bd --- /dev/null +++ b/css/variables.css @@ -0,0 +1,133 @@ +:root { + + /********************************** + * COLORS + **********************************/ + + /* Values */ + --pcb-blue: rgb(28, 65, 123); + --dark-blue: rgb(7, 16, 29); + --dark-red: rgb(179, 14, 14); + --green: rgb(14, 163, 14); + --dark-green: rgb(0, 94, 0); + --light-grey: rgb(170, 170, 170); + --light-grey-transparent: rgba(170,170,170, 0.4); + --dark-grey: #666; + --light-blue: #69ccfd; + --pink: #d8659f; + --light-green: #389277; + --light-yellow: #c4c082; + --light-red: rgb(255, 50, 50); + --orange: rgb(255, 136, 0); + + /* Low opacity */ + --pcb-blue-low: rgba(28, 65, 123, 0.4); + --dark-red-low: rgba(179, 14, 14, 0.6); + --green-low: rgba(14, 163, 14, 0.6); + --orange-low: rgba(255, 136, 0, 0.6); + + + /* Main Aliases */ + --main-bg-color: var(--dark-blue); + --main-text-color: white; + --main-border-color: white; + --highlight-color: var(--light-blue); + --highlight-text-color: var(--light-blue); + --highlight-icon-color: var(--light-blue); + --highlight-border-color: var(--light-blue); + --alt-bg-color: white; + --alt-text-color: var(--dark-blue); + --inactive-color: var(--dark-grey); + --shadow-color: var(--light-grey); + --active-color: var(--light-blue); + --success-color: var(--green); + --fail-color: var(--dark-red); + --warning-color: var(--orange); + --info-color: var(--pcb-blue); + + /** Terminal **/ + --terminal-bg: black; + --terminal-border: var(--light-grey); + --terminal-text: white; + --terminal-error: var(--light-red); + --terminal-success: var(--green); + --terminal-warning: var(--light-yellow); + --terminal-info: var(--light-blue); + + /* Status Aliases */ + --error-color: var(--dark-red); + --success-color: var(--green); + + /* Form Aliases */ + --form-bg-color: var(--main-bg-color); + --form-text-color: var(--main-text-color); + --form-border-color: var(--main-border-color); + --input-highlight-color: var(--pcb-blue); + --button-hover-color: var(--highlight-color); + + /********************************** + * SPACING + **********************************/ + --default-padding: .5rem; + --default-margin: .5rem; + --default-horizontal-margin: .5rem; + --default-horizontal-padding: .5rem; + --default-vertical-margin: 1rem; + --default-vertical-padding: .5rem; + --default-spacing: 1rem; + + --small-padding: .2rem; + --small-margin: .5rem; + --xsmall-margin: .2rem; + --large-padding: 1rem; + --xlarge-padding: 2rem; + --xxlarge-padding: 3rem; + --large-horizontal-margin: 1rem; + --xlarge-horizontal-margin: 2rem; + --large-vertical-margin: 2rem; + --xlarge-vertical-margin: 4rem; + --large-spacing: 2rem; + + --menu-padding: 1rem 2rem; + --inner-padding: 3rem 2rem 1rem 3rem; + + /********************************** + * SHAPES + **********************************/ + + --default-border-radius: .25rem; + --large-border-radius: .5rem; + --xlarge-border-radius: 1rem; + --default-box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; + + /********************************** + * FONTS + **********************************/ + + --default-fonts: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; + --pcb-font: "Russo One"; + --font-weight-light: 100; + --font-weight-bold: 500; + --terminal-font: "Source Code Pro", monospace; + --font-small: 0.9rem; + --fint-xsmall: 0.8rem; + --font-large: 1.1rem; + --font-xlarge: 1.2rem; + + + /********************************** + * JSON + **********************************/ + --json-key-color: var(--light-blue); + --json-string-color: var(--green); + --json-number-color: white; + --json-boolean-color: var(--orange); + --json-payload-color: red; + + /********************************** + * SIZES + **********************************/ + --navbar-height: 6vh; + --module-menu-height: 5rem; + +} \ No newline at end of file diff --git a/html/ztaa.html b/html/ztaa.html new file mode 100644 index 0000000..97ec5e6 --- /dev/null +++ b/html/ztaa.html @@ -0,0 +1,34 @@ + + +
+ + + + + + + + + + + + + +>>0?1:0);T=m.low=T+J;m.high=fa+W+(T>>>0