BetterSEQTA/BetterSEQTA-Plus
1
0
Fork 0
mirror of https://github.com/BetterSEQTA/BetterSEQTA-Plus.git synced 2026-06-05 19:24:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix code styling

Browse Source
This commit is contained in:
SethBurkart123
2023-08-30 14:46:23 +10:00
parent fc9edbf1c4
commit 75026bdc51
24 changed files with 3610 additions and 1778 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintrc.json
+17
View File
@@ -0,0 +1,17 @@
{
"env": {
"browser": true,
"commonjs": true,
"es2021": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": "latest"
},
"rules": {
"indent": ["error", 2],
"linebreak-style": ["error", "unix"],
"quotes": ["error", "double"],
"semi": ["error", "always"]
}
}
.gitignore
+1 -1
View File
@@ -4,4 +4,4 @@ package-lock.json
build/
.DS_Store
.DS_Store/
.prettierignore
+1
View File
@@ -0,0 +1 @@
build
README.md
+14 -8
View File
@@ -2,28 +2,29 @@
![Logo](https://raw.githubusercontent.com/SethBurkart123/BetterThanBetterSeqta/c96edd5956fc11571408310aea98cf7222d6876f/src/icons/betterseqta-dark-full.png#gh-light-mode-only)
# Even BetterSEQTA
Forking the BetterSEQTA project to add extra functionality
Looking for contributors!
## Table of contents
- [Features](#features)
- [Getting Started](#getting-started)
- [Contributing](#contributing)
## Features
* Dark mode
- Dark mode
- Custom Background
* Improved Styling/CSS
- Improved Styling/CSS
- Improved look for SEQTA Learn
* Custom Home Page including:
- Custom Home Page including:
- Daily Lessons
- Shortcuts
- Easier Access Notices
* Options to remove certain items from the side menu
* Notification for next lesson (sent 5 minutes prior to lesson end)
* Browser Support
- Options to remove certain items from the side menu
- Notification for next lesson (sent 5 minutes prior to lesson end)
- Browser Support
- Chrome Supported
- Edge Supported
- Brave Supported
@@ -32,14 +33,19 @@ Looking for contributors!
## Getting started
1. Clone the repository
```
git clone https://github.com/SethBurkart123/EvenBetterSEQTA
```
2. Install dependencies
```
npm install
```
3. Run the dev script (it updates as you save files)
```
npm run dev
```
@@ -60,4 +66,4 @@ If you would like to contribute to this project, please read the [contributing g
## Credits
This extension was initially developed by [Nulkem](https://github.com/Nulkem/betterseqta), was ported to manifest V3 by [OG-RandomTechChannel](https://github.com/OG-RandomTechChannel) and is currently under active development by [SethBurkart](https://github.com/SethBurkart123)
This extension was initially developed by [Nulkem](https://github.com/Nulkem/betterseqta), was ported to manifest V3 by [OG-RandomTechChannel](https://github.com/OG-RandomTechChannel) and is currently under active development by [SethBurkart](https://github.com/SethBurkart123)
contributing.md
+1 -1
View File
@@ -1,7 +1,7 @@
# Contributing
When contributing to this repository, please first discuss the change you wish to make via issue,
email, or any other method with the owners of this repository before making a change.
email, or any other method with the owners of this repository before making a change.
## Pull Request Process
package.json
+4
View File
@@ -13,8 +13,12 @@
"devDependencies": {
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.8.1",
"eslint": "^8.48.0",
"eslint-config-prettier": "^9.0.0",
"eslint-webpack-plugin": "^4.0.1",
"file-loader": "^6.2.0",
"mini-css-extract-plugin": "^2.7.6",
"prettier": "3.0.2",
"sass": "^1.65.1",
"sass-loader": "^13.3.2",
"style-loader": "^3.3.3",
public/manifest.json
+43 -73
View File
@@ -1,78 +1,48 @@
{
"manifest_version": 3,
"name": "Even BetterSEQTA",
"version": "3.0.0",
"description": "An extension that makes the SEQTA experience customizable and unique to you!",
"icons": {
"48": "icons/icon-48.png"
"manifest_version": 3,
"name": "Even BetterSEQTA",
"version": "3.0.0",
"description": "An extension that makes the SEQTA experience customizable and unique to you!",
"icons": {
"48": "icons/icon-48.png"
},
"action": {
"browser_style": true,
"default_popup": "popup/info.html",
"default_icon": {
"32": "icons/icon-32.png",
"64": "icons/icon-64.png"
}
},
"permissions": ["tabs", "notifications", "storage"],
"host_permissions": ["https://newsapi.org/", "*://*/*"],
"background": {
"service_worker": "background.js"
},
"optional_permissions": ["declarativeContent"],
"content_scripts": [
{
"matches": ["https://*.edu.au/*"],
"js": ["purify.min.js", "SEQTA.js"],
"run_at": "document_start"
}
],
"web_accessible_resources": [
{
"resources": ["icons/*"],
"matches": ["*://*/*"]
},
"action": {
"browser_style": true,
"default_popup": "popup/info.html",
"default_icon": {
"32": "icons/icon-32.png",
"64": "icons/icon-64.png"
}
{
"resources": ["images/*"],
"matches": ["*://*/*"]
},
"permissions": [
"tabs",
"notifications",
"storage"
],
"host_permissions": [
"https://newsapi.org/",
"*://*/*"
],
"background": {
"service_worker": "background.js"
{
"resources": ["inject/*"],
"matches": ["*://*/*"]
},
"optional_permissions": [
"declarativeContent"
],
"content_scripts": [
{
"matches": [
"https://*.edu.au/*"
],
"js": [
"purify.min.js",
"SEQTA.js"
],
"run_at": "document_start"
}
],
"web_accessible_resources": [
{
"resources": [
"icons/*"
],
"matches": [
"*://*/*"
]
},
{
"resources": [
"images/*"
],
"matches": [
"*://*/*"
]
},
{
"resources": [
"inject/*"
],
"matches": [
"*://*/*"
]
},
{
"resources": [
"popup/*"
],
"matches": [
"*://*/*"
]
}
]
{
"resources": ["popup/*"],
"matches": ["*://*/*"]
}
]
}
public/popup/coloris.css
+69 -21
View File
@@ -7,7 +7,9 @@
border-radius: 10px;
background-color: #fff;
justify-content: space-between;
box-shadow: 0 0 5px rgba(0,0,0,.05), 0 5px 20px rgba(0,0,0,.1);
box-shadow:
0 0 5px rgba(0, 0, 0, 0.05),
0 5px 20px rgba(0, 0, 0, 0.1);
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
@@ -23,7 +25,8 @@
height: 100px;
margin-bottom: 15px;
border-radius: 3px 3px 0 0;
background-image: linear-gradient(rgba(0,0,0,0), #000), linear-gradient(90deg, #fff, currentColor);
background-image: linear-gradient(rgba(0, 0, 0, 0), #000),
linear-gradient(90deg, #fff, currentColor);
cursor: pointer;
}
@@ -62,7 +65,16 @@
}
.clr-hue {
background-image: linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);
background-image: linear-gradient(
to right,
#f00 0%,
#ff0 16.66%,
#0f0 33.33%,
#0ff 50%,
#00f 66.66%,
#f0f 83.33%,
#f00 100%
);
}
.clr-hue,
@@ -79,7 +91,7 @@
height: 100%;
width: 100%;
border-radius: inherit;
background-image: linear-gradient(90deg, rgba(0,0,0,0), currentColor);
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), currentColor);
}
.clr-hue input,
@@ -114,7 +126,7 @@
}
.clr-alpha div:before {
content: '';
content: "";
position: absolute;
height: 100%;
width: 100%;
@@ -206,7 +218,7 @@
}
.clr-swatches button:after {
content: '';
content: "";
display: block;
position: absolute;
width: 100%;
@@ -215,7 +227,7 @@
top: 0;
border-radius: inherit;
background-color: currentColor;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}
input.clr-color {
@@ -268,7 +280,7 @@ input.clr-color:focus {
.clr-preview:before,
.clr-preview:after {
content: '';
content: "";
position: absolute;
height: 100%;
width: 100%;
@@ -281,7 +293,7 @@ input.clr-color:focus {
.clr-preview:after {
border: 0;
background-color: currentColor;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.clr-marker,
@@ -313,7 +325,7 @@ input.clr-color:focus {
}
.clr-field button:after {
content: '';
content: "";
display: block;
position: absolute;
width: 100%;
@@ -322,7 +334,7 @@ input.clr-color:focus {
top: 0;
border-radius: inherit;
background-color: currentColor;
box-shadow: inset 0 0 1px rgba(0,0,0,.5);
box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
}
.clr-alpha,
@@ -330,8 +342,25 @@ input.clr-color:focus {
.clr-swatches button,
.clr-preview:before,
.clr-field button {
background-image: repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa);
background-position: 0 0, 4px 4px;
background-image: repeating-linear-gradient(
45deg,
#aaa 25%,
transparent 25%,
transparent 75%,
#aaa 75%,
#aaa
),
repeating-linear-gradient(
45deg,
#aaa 25%,
#fff 25%,
#fff 75%,
#aaa 75%,
#aaa
);
background-position:
0 0,
4px 4px;
background-size: 8px 8px;
}
@@ -344,7 +373,9 @@ input.clr-color:focus {
.clr-keyboard-nav .clr-alpha input:focus + div,
.clr-keyboard-nav .clr-segmented input:focus + label {
outline: none;
box-shadow: 0 0 0 2px #1e90ff, 0 0 2px 2px #fff;
box-shadow:
0 0 0 2px #1e90ff,
0 0 2px 2px #fff;
}
.clr-picker[data-alpha="false"] .clr-alpha {
@@ -374,7 +405,7 @@ input.clr-color:focus {
}
.clr-dark .clr-swatches button:after {
box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.clr-dark input.clr-color {
@@ -388,25 +419,42 @@ input.clr-color:focus {
}
.clr-dark .clr-preview:after {
box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.clr-dark .clr-alpha,
.clr-dark .clr-alpha div,
.clr-dark .clr-swatches button,
.clr-dark .clr-preview:before {
background-image: repeating-linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #888 75%, #888), repeating-linear-gradient(45deg, #888 25%, #444 25%, #444 75%, #888 75%, #888);
background-image: repeating-linear-gradient(
45deg,
#666 25%,
transparent 25%,
transparent 75%,
#888 75%,
#888
),
repeating-linear-gradient(
45deg,
#888 25%,
#444 25%,
#444 75%,
#888 75%,
#888
);
}
/** Polaroid theme **/
.clr-picker.clr-polaroid {
border-radius: 6px;
box-shadow: 0 0 5px rgba(0,0,0,.1), 0 5px 30px rgba(0,0,0,.2);
box-shadow:
0 0 5px rgba(0, 0, 0, 0.1),
0 5px 30px rgba(0, 0, 0, 0.2);
}
.clr-picker.clr-polaroid:before {
content: '';
content: "";
display: block;
position: absolute;
width: 16px;
@@ -418,7 +466,7 @@ input.clr-color:focus {
border-bottom-color: currentColor;
box-sizing: border-box;
color: #fff;
filter: drop-shadow(0 -4px 3px rgba(0,0,0,.1));
filter: drop-shadow(0 -4px 3px rgba(0, 0, 0, 0.1));
pointer-events: none;
}
@@ -454,7 +502,7 @@ input.clr-color:focus {
.clr-polaroid .clr-hue div,
.clr-polaroid .clr-alpha div {
box-shadow: 0 0 5px rgba(0,0,0,.2);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.clr-polaroid .clr-format {
public/popup/coloris.js
+246 -197
View File
@@ -5,20 +5,32 @@
*/
((window, document, Math) => {
const ctx = document.createElement('canvas').getContext('2d');
const ctx = document.createElement("canvas").getContext("2d");
const currentColor = { r: 0, g: 0, b: 0, h: 0, s: 0, v: 0, a: 1 };
let picker, colorArea, colorAreaDims, colorMarker, colorPreview, colorValue, clearButton,
hueSlider, hueMarker, alphaSlider, alphaMarker, currentEl, currentFormat, oldColor;
let picker,
colorArea,
colorAreaDims,
colorMarker,
colorPreview,
colorValue,
clearButton,
hueSlider,
hueMarker,
alphaSlider,
alphaMarker,
currentEl,
currentFormat,
oldColor;
// Default settings
const settings = {
el: '.coloris',
el: ".coloris",
parent: null,
theme: 'default',
themeMode: 'light',
theme: "default",
themeMode: "light",
wrap: true,
margin: 2,
format: 'hex',
format: "hex",
formatToggle: false,
swatches: [],
swatchesOnly: false,
@@ -27,19 +39,20 @@
autoClose: false,
clearButton: {
show: false,
label: 'Clear'
label: "Clear",
},
a11y: {
open: 'Open color picker',
close: 'Close color picker',
marker: 'Saturation: {s}. Brightness: {v}.',
hueSlider: 'Hue slider',
alphaSlider: 'Opacity slider',
input: 'Color value field',
format: 'Color format',
swatch: 'Color swatch',
instruction: 'Saturation and brightness selector. Use up, down, left and right arrow keys to select.'
}
open: "Open color picker",
close: "Close color picker",
marker: "Saturation: {s}. Brightness: {v}.",
hueSlider: "Hue slider",
alphaSlider: "Opacity slider",
input: "Color value field",
format: "Color format",
swatch: "Color swatch",
instruction:
"Saturation and brightness selector. Use up, down, left and right arrow keys to select.",
},
};
/**
@@ -47,81 +60,93 @@
* @param {object} options Configuration options.
*/
function configure(options) {
if (typeof options !== 'object') {
if (typeof options !== "object") {
return;
}
for (const key in options) {
switch (key) {
case 'el':
case "el":
bindFields(options.el);
if (options.wrap !== false) {
wrapFields(options.el);
}
break;
case 'parent':
case "parent":
settings.parent = document.querySelector(options.parent);
if (settings.parent) {
settings.parent.appendChild(picker);
}
break;
case 'themeMode':
case "themeMode":
settings.themeMode = options.themeMode;
if (options.themeMode === 'auto' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
settings.themeMode = 'dark';
if (
options.themeMode === "auto" &&
window.matchMedia &&
window.matchMedia("(prefers-color-scheme: dark)").matches
) {
settings.themeMode = "dark";
}
// The lack of a break statement is intentional
case 'theme':
case "theme":
if (options.theme) {
settings.theme = options.theme;
}
picker.className = `clr-picker clr-${settings.theme} clr-${settings.themeMode}`;
break;
case 'margin':
case "margin":
options.margin *= 1;
settings.margin = !isNaN(options.margin) ? options.margin : settings.margin;
settings.margin = !isNaN(options.margin)
? options.margin
: settings.margin;
break;
case 'wrap':
case "wrap":
if (options.el && options.wrap) {
wrapFields(options.el);
}
break;
case 'formatToggle':
getEl('clr-format').style.display = options.formatToggle ? 'block' : 'none';
case "formatToggle":
getEl("clr-format").style.display = options.formatToggle
? "block"
: "none";
if (options.formatToggle) {
settings.format = 'auto';
settings.format = "auto";
}
break;
case 'swatches':
case "swatches":
if (Array.isArray(options.swatches)) {
const swatches = [];
options.swatches.forEach((swatch, i) => {
swatches.push(`<button id="clr-swatch-${i}" aria-labelledby="clr-swatch-label clr-swatch-${i}" style="color: ${swatch};">${swatch}</button>`);
swatches.push(
`<button id="clr-swatch-${i}" aria-labelledby="clr-swatch-label clr-swatch-${i}" style="color: ${swatch};">${swatch}</button>`,
);
});
if (swatches.length) {
getEl('clr-swatches').innerHTML = `<div>${swatches.join('')}</div>`;
getEl("clr-swatches").innerHTML = `<div>${swatches.join(
"",
)}</div>`;
}
}
break;
case 'swatchesOnly':
case "swatchesOnly":
settings.swatchesOnly = !!options.swatchesOnly;
picker.setAttribute('data-minimal', settings.swatchesOnly);
picker.setAttribute("data-minimal", settings.swatchesOnly);
if (settings.swatchesOnly) {
settings.autoClose = true;
}
break;
case 'alpha':
case "alpha":
settings.alpha = !!options.alpha;
picker.setAttribute('data-alpha', settings.alpha);
picker.setAttribute("data-alpha", settings.alpha);
break;
case 'clearButton':
let display = 'none';
case "clearButton":
let display = "none";
if (options.clearButton.show) {
display = 'block';
display = "block";
}
if (options.clearButton.label) {
@@ -130,11 +155,11 @@
clearButton.style.display = display;
break;
case 'a11y':
case "a11y":
const labels = options.a11y;
let update = false;
if (typeof labels === 'object') {
if (typeof labels === "object") {
for (const label in labels) {
if (labels[label] && settings.a11y[label]) {
settings.a11y[label] = labels[label];
@@ -144,16 +169,16 @@
}
if (update) {
const openLabel = getEl('clr-open-label');
const swatchLabel = getEl('clr-swatch-label');
const openLabel = getEl("clr-open-label");
const swatchLabel = getEl("clr-swatch-label");
openLabel.innerHTML = settings.a11y.open;
swatchLabel.innerHTML = settings.a11y.swatch;
colorPreview.setAttribute('aria-label', settings.a11y.close);
hueSlider.setAttribute('aria-label', settings.a11y.hueSlider);
alphaSlider.setAttribute('aria-label', settings.a11y.alphaSlider);
colorValue.setAttribute('aria-label', settings.a11y.input);
colorArea.setAttribute('aria-label', settings.a11y.instruction);
colorPreview.setAttribute("aria-label", settings.a11y.close);
hueSlider.setAttribute("aria-label", settings.a11y.hueSlider);
alphaSlider.setAttribute("aria-label", settings.a11y.alphaSlider);
colorValue.setAttribute("aria-label", settings.a11y.input);
colorArea.setAttribute("aria-label", settings.a11y.instruction);
}
default:
settings[key] = options[key];
@@ -167,7 +192,7 @@
*/
function bindFields(selector) {
// Show the color picker on click on the input fields that match the selector
addListener(document, 'click', selector, event => {
addListener(document, "click", selector, (event) => {
const parent = settings.parent;
const coords = event.target.getBoundingClientRect();
const scrollY = window.scrollY;
@@ -179,7 +204,7 @@
currentEl = event.target;
oldColor = currentEl.value;
currentFormat = getColorFormatFromStr(oldColor);
picker.classList.add('clr-open');
picker.classList.add("clr-open");
const pickerWidth = picker.offsetWidth;
const pickerHeight = picker.offsetHeight;
@@ -215,21 +240,24 @@
reposition.left = true;
}
if (top + pickerHeight - scrollY > document.documentElement.clientHeight) {
if (
top + pickerHeight - scrollY >
document.documentElement.clientHeight
) {
top = scrollY + coords.y - pickerHeight - settings.margin;
reposition.top = true;
}
}
picker.classList.toggle('clr-left', reposition.left);
picker.classList.toggle('clr-top', reposition.top);
picker.classList.toggle("clr-left", reposition.left);
picker.classList.toggle("clr-top", reposition.top);
picker.style.left = `${left}px`;
picker.style.top = `${top}px`;
colorAreaDims = {
width: colorArea.offsetWidth,
height: colorArea.offsetHeight,
x: picker.offsetLeft + colorArea.offsetLeft + offset.x,
y: picker.offsetTop + colorArea.offsetTop + offset.y
y: picker.offsetTop + colorArea.offsetTop + offset.y,
};
setColorFromStr(oldColor);
@@ -240,11 +268,11 @@
});
// Update the color preview of the input fields that match the selector
addListener(document, 'input', selector, event => {
addListener(document, "input", selector, (event) => {
const parent = event.target.parentNode;
// Only update the preview if the field has been previously wrapped
if (parent.classList.contains('clr-field')) {
if (parent.classList.contains("clr-field")) {
parent.style.color = event.target.value;
}
});
@@ -255,15 +283,15 @@
* @param {string} selector One or more selectors pointing to input fields.
*/
function wrapFields(selector) {
document.querySelectorAll(selector).forEach(field => {
document.querySelectorAll(selector).forEach((field) => {
const parentNode = field.parentNode;
if (!parentNode.classList.contains('clr-field')) {
const wrapper = document.createElement('div');
if (!parentNode.classList.contains("clr-field")) {
const wrapper = document.createElement("div");
wrapper.innerHTML = `<button aria-labelledby="clr-open-label"></button>`;
parentNode.insertBefore(wrapper, field);
wrapper.setAttribute('class', 'clr-field');
wrapper.setAttribute("class", "clr-field");
wrapper.style.color = field.value;
wrapper.appendChild(field);
}
@@ -281,14 +309,14 @@
currentEl.value = oldColor;
// Trigger an "input" event to force update the thumbnail next to the input field
currentEl.dispatchEvent(new Event('input', { bubbles: true }));
currentEl.dispatchEvent(new Event("input", { bubbles: true }));
}
if (oldColor !== currentEl.value) {
currentEl.dispatchEvent(new Event('change', { bubbles: true }));
currentEl.dispatchEvent(new Event("change", { bubbles: true }));
}
picker.classList.remove('clr-open');
picker.classList.remove("clr-open");
if (settings.focusInput) {
currentEl.focus({ preventScroll: true });
@@ -312,10 +340,12 @@
// Update the UI
hueSlider.value = hsva.h;
picker.style.color = `hsl(${hsva.h}, 100%, 50%)`;
hueMarker.style.left = `${hsva.h / 360 * 100}%`;
hueMarker.style.left = `${(hsva.h / 360) * 100}%`;
colorMarker.style.left = `${colorAreaDims.width * hsva.s / 100}px`;
colorMarker.style.top = `${colorAreaDims.height - (colorAreaDims.height * hsva.v / 100)}px`;
colorMarker.style.left = `${(colorAreaDims.width * hsva.s) / 100}px`;
colorMarker.style.top = `${
colorAreaDims.height - (colorAreaDims.height * hsva.v) / 100
}px`;
alphaSlider.value = hsva.a * 100;
alphaMarker.style.left = `${hsva.a * 100}%`;
@@ -329,11 +359,11 @@
function getColorFormatFromStr(str) {
const format = str.substring(0, 3).toLowerCase();
if (format === 'rgb' || format === 'hsl') {
if (format === "rgb" || format === "hsl") {
return format;
}
return 'hex';
return "hex";
}
/**
@@ -343,7 +373,7 @@
function pickColor(color) {
if (currentEl) {
currentEl.value = color !== undefined ? color : colorValue.value;
currentEl.dispatchEvent(new Event('input', { bubbles: true }));
currentEl.dispatchEvent(new Event("input", { bubbles: true }));
}
}
@@ -355,9 +385,9 @@
function setColorAtPosition(x, y) {
const hsva = {
h: hueSlider.value * 1,
s: x / colorAreaDims.width * 100,
v: 100 - (y / colorAreaDims.height * 100),
a: alphaSlider.value / 100
s: (x / colorAreaDims.width) * 100,
v: 100 - (y / colorAreaDims.height) * 100,
a: alphaSlider.value / 100,
};
const rgba = HSVAtoRGBA(hsva);
@@ -376,9 +406,9 @@
saturation = saturation.toFixed(1) * 1;
value = value.toFixed(1) * 1;
label = label.replace('{s}', saturation);
label = label.replace('{v}', value);
colorMarker.setAttribute('aria-label', label);
label = label.replace("{s}", saturation);
label = label.replace("{v}", value);
colorMarker.setAttribute("aria-label", label);
}
//
@@ -390,7 +420,7 @@
function getPointerPosition(event) {
return {
pageX: event.changedTouches ? event.changedTouches[0].pageX : event.pageX,
pageY: event.changedTouches ? event.changedTouches[0].pageY : event.pageY
pageY: event.changedTouches ? event.changedTouches[0].pageY : event.pageY,
};
}
@@ -407,8 +437,8 @@
y += settings.parent.scrollTop;
}
x = (x < 0) ? 0 : (x > colorAreaDims.width) ? colorAreaDims.width : x;
y = (y < 0) ? 0 : (y > colorAreaDims.height) ? colorAreaDims.height : y;
x = x < 0 ? 0 : x > colorAreaDims.width ? colorAreaDims.width : x;
y = y < 0 ? 0 : y > colorAreaDims.height ? colorAreaDims.height : y;
colorMarker.style.left = `${x}px`;
colorMarker.style.top = `${y}px`;
@@ -426,8 +456,8 @@
* * @param {number} offsetY The vertical amount to move.
*/
function moveMarkerOnKeydown(offsetX, offsetY) {
const x = colorMarker.style.left.replace('px', '') * 1 + offsetX;
const y = colorMarker.style.top.replace('px', '') * 1 + offsetY;
const x = colorMarker.style.left.replace("px", "") * 1 + offsetX;
const y = colorMarker.style.top.replace("px", "") * 1 + offsetY;
colorMarker.style.left = `${x}px`;
colorMarker.style.top = `${y}px`;
@@ -460,27 +490,27 @@
colorPreview.style.color = hex;
// Force repaint the color and alpha gradients as a workaround for a Google Chrome bug
colorArea.style.display = 'none';
colorArea.style.display = "none";
colorArea.offsetHeight;
colorArea.style.display = '';
alphaMarker.nextElementSibling.style.display = 'none';
colorArea.style.display = "";
alphaMarker.nextElementSibling.style.display = "none";
alphaMarker.nextElementSibling.offsetHeight;
alphaMarker.nextElementSibling.style.display = '';
alphaMarker.nextElementSibling.style.display = "";
if (format === 'mixed') {
format = currentColor.a === 1 ? 'hex' : 'rgb';
} else if (format === 'auto') {
if (format === "mixed") {
format = currentColor.a === 1 ? "hex" : "rgb";
} else if (format === "auto") {
format = currentFormat;
}
switch (format) {
case 'hex':
case "hex":
colorValue.value = hex;
break;
case 'rgb':
case "rgb":
colorValue.value = RGBAToStr(currentColor);
break;
case 'hsl':
case "hsl":
colorValue.value = HSLAToStr(HSVAtoHSLA(currentColor));
break;
}
@@ -494,11 +524,11 @@
*/
function setHue() {
const hue = hueSlider.value * 1;
const x = colorMarker.style.left.replace('px', '') * 1;
const y = colorMarker.style.top.replace('px', '') * 1;
const x = colorMarker.style.left.replace("px", "") * 1;
const y = colorMarker.style.top.replace("px", "") * 1;
picker.style.color = `hsl(${hue}, 100%, 50%)`;
hueMarker.style.left = `${hue / 360 * 100}%`;
hueMarker.style.left = `${(hue / 360) * 100}%`;
setColorAtPosition(x, y);
}
@@ -524,11 +554,11 @@
const value = hsva.v / 100;
let chroma = saturation * value;
let hueBy60 = hsva.h / 60;
let x = chroma * (1 - Math.abs(hueBy60 % 2 - 1));
let x = chroma * (1 - Math.abs((hueBy60 % 2) - 1));
let m = value - chroma;
chroma = (chroma + m);
x = (x + m);
chroma = chroma + m;
x = x + m;
const index = Math.floor(hueBy60) % 6;
const red = [chroma, x, m, m, x, chroma][index];
@@ -539,7 +569,7 @@
r: Math.round(red * 255),
g: Math.round(green * 255),
b: Math.round(blue * 255),
a: hsva.a
a: hsva.a,
};
}
@@ -550,18 +580,20 @@
*/
function HSVAtoHSLA(hsva) {
const value = hsva.v / 100;
const lightness = value * (1 - (hsva.s / 100) / 2);
const lightness = value * (1 - hsva.s / 100 / 2);
let saturation;
if (lightness > 0 && lightness < 1) {
saturation = Math.round((value - lightness) / Math.min(lightness, 1 - lightness) * 100);
saturation = Math.round(
((value - lightness) / Math.min(lightness, 1 - lightness)) * 100,
);
}
return {
h: hsva.h,
s: saturation || 0,
l: Math.round(lightness * 100),
a: hsva.a
a: hsva.a,
};
}
@@ -582,10 +614,18 @@
let saturation = 0;
if (chroma) {
if (xmax === red) { hue = ((green - blue) / chroma); }
if (xmax === green) { hue = 2 + (blue - red) / chroma; }
if (xmax === blue) { hue = 4 + (red - green) / chroma; }
if (xmax) { saturation = chroma / xmax; }
if (xmax === red) {
hue = (green - blue) / chroma;
}
if (xmax === green) {
hue = 2 + (blue - red) / chroma;
}
if (xmax === blue) {
hue = 4 + (red - green) / chroma;
}
if (xmax) {
saturation = chroma / xmax;
}
}
hue = Math.floor(hue * 60);
@@ -594,7 +634,7 @@
h: hue < 0 ? hue + 360 : hue,
s: Math.round(saturation * 100),
v: Math.round(value * 100),
a: rgba.a
a: rgba.a,
};
}
@@ -604,11 +644,12 @@
* @return {object} Red, green, blue and alpha values.
*/
function strToRGBA(str) {
const regex = /^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i;
const regex =
/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i;
let match, rgba;
// Default to black for invalid color strings
ctx.fillStyle = '#000';
ctx.fillStyle = "#000";
// Use canvas to convert the string to a valid color string
ctx.fillStyle = str;
@@ -619,16 +660,18 @@
r: match[3] * 1,
g: match[4] * 1,
b: match[5] * 1,
a: match[6] * 1
a: match[6] * 1,
};
} else {
match = ctx.fillStyle.replace('#', '').match(/.{2}/g).map(h => parseInt(h, 16));
match = ctx.fillStyle
.replace("#", "")
.match(/.{2}/g)
.map((h) => parseInt(h, 16));
rgba = {
r: match[0],
g: match[1],
b: match[2],
a: 1
a: 1,
};
}
@@ -644,30 +687,30 @@
let R = rgba.r.toString(16);
let G = rgba.g.toString(16);
let B = rgba.b.toString(16);
let A = '';
let A = "";
if (rgba.r < 16) {
R = '0' + R;
R = "0" + R;
}
if (rgba.g < 16) {
G = '0' + G;
G = "0" + G;
}
if (rgba.b < 16) {
B = '0' + B;
B = "0" + B;
}
if (settings.alpha && rgba.a < 1) {
const alpha = rgba.a * 255 | 0;
const alpha = (rgba.a * 255) | 0;
A = alpha.toString(16);
if (alpha < 16) {
A = '0' + A;
A = "0" + A;
}
}
return '#' + R + G + B + A;
return "#" + R + G + B + A;
}
/**
@@ -701,23 +744,23 @@
*/
function init() {
// Render the UI
picker = document.createElement('div');
picker.setAttribute('id', 'clr-picker');
picker.className = 'clr-picker';
picker = document.createElement("div");
picker.setAttribute("id", "clr-picker");
picker.className = "clr-picker";
picker.innerHTML =
`<input id="clr-color-value" class="clr-color" type="text" value="" aria-label="${settings.a11y.input}">` +
`<div id="clr-color-area" class="clr-gradient" role="application" aria-label="${settings.a11y.instruction}">` +
'<div id="clr-color-marker" class="clr-marker" tabindex="0"></div>' +
'</div>' +
"</div>" +
'<div class="clr-hue">' +
`<input id="clr-hue-slider" type="range" min="0" max="360" step="1" aria-label="${settings.a11y.hueSlider}">` +
'<div id="clr-hue-marker"></div>' +
'</div>' +
"</div>" +
'<div class="clr-alpha">' +
`<input id="clr-alpha-slider" type="range" min="0" max="100" step="1" aria-label="${settings.a11y.alphaSlider}">` +
'<div id="clr-alpha-marker"></div>' +
'<span></span>' +
'</div>' +
"<span></span>" +
"</div>" +
'<div id="clr-format" class="clr-format">' +
'<fieldset class="clr-segmented">' +
`<legend>${settings.a11y.format}</legend>` +
@@ -727,9 +770,9 @@
'<label for="clr-f2">RGB</label>' +
'<input id="clr-f3" type="radio" name="clr-format" value="hsl">' +
'<label for="clr-f3">HSL</label>' +
'<span></span>' +
'</fieldset>' +
'</div>' +
"<span></span>" +
"</fieldset>" +
"</div>" +
'<div id="clr-swatches" class="clr-swatches"></div>' +
`<button id="clr-clear" class="clr-clear">${settings.clearButton.label}</button>` +
`<button id="clr-color-preview" class="clr-preview" aria-label="${settings.a11y.close}"></button>` +
@@ -740,63 +783,63 @@
document.body.appendChild(picker);
// Reference the UI elements
colorArea = getEl('clr-color-area');
colorMarker = getEl('clr-color-marker');
clearButton = getEl('clr-clear');
colorPreview = getEl('clr-color-preview');
colorValue = getEl('clr-color-value');
hueSlider = getEl('clr-hue-slider');
hueMarker = getEl('clr-hue-marker');
alphaSlider = getEl('clr-alpha-slider');
alphaMarker = getEl('clr-alpha-marker');
colorArea = getEl("clr-color-area");
colorMarker = getEl("clr-color-marker");
clearButton = getEl("clr-clear");
colorPreview = getEl("clr-color-preview");
colorValue = getEl("clr-color-value");
hueSlider = getEl("clr-hue-slider");
hueMarker = getEl("clr-hue-marker");
alphaSlider = getEl("clr-alpha-slider");
alphaMarker = getEl("clr-alpha-marker");
// Bind the picker to the default selector
bindFields(settings.el);
wrapFields(settings.el);
addListener(picker, 'mousedown', event => {
picker.classList.remove('clr-keyboard-nav');
addListener(picker, "mousedown", (event) => {
picker.classList.remove("clr-keyboard-nav");
event.stopPropagation();
});
addListener(colorArea, 'mousedown', event => {
addListener(document, 'mousemove', moveMarker);
addListener(colorArea, "mousedown", (event) => {
addListener(document, "mousemove", moveMarker);
});
addListener(colorArea, 'touchstart', event => {
document.addEventListener('touchmove', moveMarker, { passive: false });
addListener(colorArea, "touchstart", (event) => {
document.addEventListener("touchmove", moveMarker, { passive: false });
});
addListener(colorMarker, 'mousedown', event => {
addListener(document, 'mousemove', moveMarker);
addListener(colorMarker, "mousedown", (event) => {
addListener(document, "mousemove", moveMarker);
});
addListener(colorMarker, 'touchstart', event => {
document.addEventListener('touchmove', moveMarker, { passive: false });
addListener(colorMarker, "touchstart", (event) => {
document.addEventListener("touchmove", moveMarker, { passive: false });
});
addListener(colorValue, 'change', event => {
addListener(colorValue, "change", (event) => {
setColorFromStr(colorValue.value);
pickColor();
});
addListener(clearButton, 'click', event => {
pickColor('');
addListener(clearButton, "click", (event) => {
pickColor("");
closePicker();
});
addListener(colorPreview, 'click', event => {
addListener(colorPreview, "click", (event) => {
pickColor();
closePicker();
});
addListener(document, 'click', '.clr-format input', event => {
addListener(document, "click", ".clr-format input", (event) => {
currentFormat = event.target.value;
updateColor();
pickColor();
});
addListener(picker, 'click', '.clr-swatches button', event => {
addListener(picker, "click", ".clr-swatches button", (event) => {
setColorFromStr(event.target.textContent);
pickColor();
@@ -805,37 +848,39 @@
}
});
addListener(document, 'mouseup', event => {
document.removeEventListener('mousemove', moveMarker);
addListener(document, "mouseup", (event) => {
document.removeEventListener("mousemove", moveMarker);
});
addListener(document, 'touchend', event => {
document.removeEventListener('touchmove', moveMarker);
addListener(document, "touchend", (event) => {
document.removeEventListener("touchmove", moveMarker);
});
addListener(document, 'mousedown', event => {
picker.classList.remove('clr-keyboard-nav');
addListener(document, "mousedown", (event) => {
picker.classList.remove("clr-keyboard-nav");
closePicker();
});
addListener(document, 'keydown', event => {
if (event.key === 'Escape') {
addListener(document, "keydown", (event) => {
if (event.key === "Escape") {
closePicker(true);
} else if (event.key === 'Tab') {
picker.classList.add('clr-keyboard-nav');
} else if (event.key === "Tab") {
picker.classList.add("clr-keyboard-nav");
}
});
addListener(document, 'click', '.clr-field button', event => {
event.target.nextElementSibling.dispatchEvent(new Event('click', { bubbles: true }));
addListener(document, "click", ".clr-field button", (event) => {
event.target.nextElementSibling.dispatchEvent(
new Event("click", { bubbles: true }),
);
});
addListener(colorMarker, 'keydown', event => {
addListener(colorMarker, "keydown", (event) => {
const movements = {
ArrowUp: [0, -1],
ArrowDown: [0, 1],
ArrowLeft: [-1, 0],
ArrowRight: [1, 0]
ArrowRight: [1, 0],
};
if (Object.keys(movements).indexOf(event.key) !== -1) {
@@ -844,9 +889,9 @@
}
});
addListener(colorArea, 'click', moveMarker);
addListener(hueSlider, 'input', setHue);
addListener(alphaSlider, 'input', setAlpha);
addListener(colorArea, "click", moveMarker);
addListener(hueSlider, "input", setHue);
addListener(alphaSlider, "input", setAlpha);
}
/**
@@ -866,11 +911,12 @@
* @param {function} [fn] Event handler if delegation is used.
*/
function addListener(context, type, selector, fn) {
const matches = Element.prototype.matches || Element.prototype.msMatchesSelector;
const matches =
Element.prototype.matches || Element.prototype.msMatchesSelector;
// Delegate event to the target of the selector
if (typeof selector === 'string') {
context.addEventListener(type, event => {
if (typeof selector === "string") {
context.addEventListener(type, (event) => {
if (matches.call(event.target, selector)) {
fn.call(event.target, event);
}
@@ -892,17 +938,21 @@
function DOMReady(fn, args) {
args = args !== undefined ? args : [];
if (document.readyState !== 'loading') {
if (document.readyState !== "loading") {
fn(...args);
} else {
document.addEventListener('DOMContentLoaded', () => {
document.addEventListener("DOMContentLoaded", () => {
fn(...args);
});
}
}
// Polyfill for Nodelist.forEach
if (NodeList !== undefined && NodeList.prototype && !NodeList.prototype.forEach) {
if (
NodeList !== undefined &&
NodeList.prototype &&
!NodeList.prototype.forEach
) {
NodeList.prototype.forEach = Array.prototype.forEach;
}
@@ -911,13 +961,13 @@
const methods = {
set: configure,
wrap: wrapFields,
close: closePicker
close: closePicker,
};
function Coloris(options) {
DOMReady(() => {
if (options) {
if (typeof options === 'string') {
if (typeof options === "string") {
bindFields(options);
} else {
configure(options);
@@ -937,25 +987,24 @@
// Init the color picker when the DOM is ready
DOMReady(init);
})(window, document, Math);
Coloris({
el: '.coloris',
theme: 'large',
themeMode: 'dark',
format: 'hex',
el: ".coloris",
theme: "large",
themeMode: "dark",
format: "hex",
alpha: false,
swatches: [
'#471616',
'#1e4716',
'#16473f',
'#161c47',
'#371647',
'#47163f',
'#471627',
'#3a3a3a',
'#ffffff',
'#1a1a1a'
]
});
"#471616",
"#1e4716",
"#16473f",
"#161c47",
"#371647",
"#47163f",
"#471627",
"#3a3a3a",
"#ffffff",
"#1a1a1a",
],
});
public/popup/info.css
+46 -34
View File
@@ -11,7 +11,7 @@
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>. */
/* cyrillic-ext */
@import url('https://fonts.googleapis.com/css?family=Rubik:300,400,500,600');
@import url("https://fonts.googleapis.com/css?family=Rubik:300,400,500,600");
.outside-container {
width: 350px;
@@ -65,7 +65,8 @@
text-align: center;
text-shadow: 0px 0px 15px rgb(22, 22, 22);
}
.apply-changes h3, h5 {
.apply-changes h3,
h5 {
margin: 0;
}
.apply-changes h3 {
@@ -129,7 +130,7 @@ p {
justify-content: space-between;
margin-top: 10px;
font-size: 13px !important;
position:relative;
position: relative;
}
.clr-field input:hover {
cursor: pointer;
@@ -178,7 +179,8 @@ p {
.onoffswitch {
margin: 0 0 1ex;
position: relative; width: 42px;
position: relative;
width: 42px;
}
.onoffswitch-checkbox {
position: absolute;
@@ -195,33 +197,44 @@ p {
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
height: 16px; padding: 0; line-height: 16px;
border: 0px solid #FFFFFF; border-radius: 24px;
background-color: #9E9E9E;
display: block;
overflow: hidden;
cursor: pointer;
height: 16px;
padding: 0;
line-height: 16px;
border: 0px solid #ffffff;
border-radius: 24px;
background-color: #9e9e9e;
}
.onoffswitch-label:before {
content: "";
display: block; width: 24px; margin: -4px; height: 24px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
display: block;
width: 24px;
margin: -4px;
height: 24px;
background: #ffffff;
position: absolute;
top: 0;
bottom: 0;
right: 22px;
border-radius: 24px;
transition: 0.3s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label {
background-color: #20E060;
background-color: #20e060;
}
.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
border-color: #20E060;
.onoffswitch-checkbox:checked + .onoffswitch-label,
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
border-color: #20e060;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
transition: 0.3s;
right: 0px;
background-color: #86F078;
right: 0px;
background-color: #86f078;
box-shadow: 3px 6px 18px 0px rgba(0, 0, 0, 0.2);
}
@@ -272,14 +285,14 @@ p {
::-webkit-scrollbar {
width: 10px;
height: 10px;
transition: 1.0s;
transition: 1s;
}
::-webkit-scrollbar-thumb {
background-color: rgba(127, 127, 127, 0.6);
background-clip: padding-box;
border: 2px solid transparent;
transition: 1.0s;
transition: 1s;
}
::-webkit-scrollbar-thumb:vertical:hover,
@@ -291,23 +304,23 @@ p {
background-color: transparent;
}
::-webkit-scrollbar-thumb:vertical:active,
::-webkit-scrollbar-thumb:horizontal:active {
background: rgba(95, 91, 91, 1);
}
::-webkit-scrollbar-corner {
background: none;
}
:root, html, body, div, ol {
:root,
html,
body,
div,
ol {
scrollbar-width: thin !important;
scrollbar-color: #5e5e5f #161616 !important;
}
.topmenu {
display: flex;
width: 100%;
@@ -315,7 +328,6 @@ p {
color: white;
margin-top: 20px;
margin-bottom: 20px;
}
.navitem {
width: 33.34%;
@@ -329,7 +341,6 @@ p {
border-bottom: 2px solid #a5a5a5;
color: #a5a5a5;
transition: 0.3s;
}
.activenav {
border-bottom: 2px solid #ff5f5f;
@@ -358,7 +369,8 @@ p {
#applychanges {
margin-top: 0px;
}
.applychanges h5, h6 {
.applychanges h5,
h6 {
margin: 0;
font-weight: 400;
}
@@ -366,10 +378,10 @@ p {
list-style: none;
position: relative;
margin-left: 10px;
cursor:grab;
cursor: grab;
}
.draggable:active {
cursor:-moz-grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
.draggable::before {
@@ -401,18 +413,18 @@ p {
transition: 300ms;
}
.customshortcut-submit-valid {
.customshortcut-submit-valid {
background: #20de5f !important;
transition: 300ms;
}
.customshortcut-submit-valid:hover {
.customshortcut-submit-valid:hover {
background: #1cc956 !important;
transition: 300ms;
cursor: pointer;
}
.customshortcut-submit-valid:active {
.customshortcut-submit-valid:active {
background: #17aa48 !important;
transition: 300ms;
}
@@ -459,9 +471,9 @@ p {
}
.custom-shortcuts-field:focus {
outline: none;
outline: 1px solid rgb(60, 60, 60);
transition: 100ms;
outline: none;
outline: 1px solid rgb(60, 60, 60);
transition: 100ms;
}
.domain-container {
font-size: 9px;
public/popup/info.html
+386 -258
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<!-- // This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
@@ -12,287 +12,415 @@
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>. -->
<html>
<head>
<link rel="stylesheet" href="coloris.css" />
<script src="coloris.js"></script>
<meta charset="utf-8" />
<link rel="stylesheet" href="info.css" />
</head>
<head>
<link rel="stylesheet" href="coloris.css" />
<script src="coloris.js"></script>
<meta charset="utf-8">
<link rel="stylesheet" href="info.css" />
</head>
<body>
<style>
body {
width: 350px;
margin: 0;
background-color: #131313;
overflow: hidden;
}
</style>
<body>
<style>
body {
width: 350px;
margin: 0;
background-color: #131313;
overflow: hidden;
}
</style>
<div class="logo-container"><img src="/icons/betterseqta-light-full.png"></div>
<div class="main-page" id="mainpage">
<div class="topmenu">
<div class="navitem activenav" id="miscsection">Settings</div>
<div class="navitem" id="shortcutsection">Shortcuts</div>
<div class="navitem" id="aboutsection">About</div>
<div class="logo-container">
<img src="/icons/betterseqta-light-full.png" />
</div>
</div>
<div class="menu-page hiddenmenu" id="menupage">
<div class="selector-container" style="margin-bottom: 0;">
<div class="menu-item-selection">
<div class="aboutcontainer">
<div>
<h1 class="addonitem">About</h1>
<p class="item subitem">Created and developed and maintained by CK and AH</p>
<p class="item subitem">EvenBetterSEQTA is a revived or BetterSEQTA
which is no longer maintained.</p>
</div>
</div>
<div class="aboutcontainer">
<div>
<a class="aboutlinks"
href="https://chrome.google.com/webstore/detail/betterseqta/boikofabjaholheekefimfojfncpjfib"
target="_blank">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor"
d="M12,20L15.46,14H15.45C15.79,13.4 16,12.73 16,12C16,10.8 15.46,9.73 14.62,9H19.41C19.79,9.93 20,10.94 20,12A8,8 0 0,1 12,20M4,12C4,10.54 4.39,9.18 5.07,8L8.54,14H8.55C9.24,15.19 10.5,16 12,16C12.45,16 12.88,15.91 13.29,15.77L10.89,19.91C7,19.37 4,16.04 4,12M15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9A3,3 0 0,1 15,12M12,4C14.96,4 17.54,5.61 18.92,8H12C10.06,8 8.45,9.38 8.08,11.21L5.7,7.08C7.16,5.21 9.44,4 12,4M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
</svg>
Chrome Webstore
</a>
<a class="aboutlinks" href="https://addons.mozilla.org/en-US/firefox/addon/betterseqta/" target="_blank">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor"
d="M9.27 7.94C9.27 7.94 9.27 7.94 9.27 7.94M6.85 6.74C6.86 6.74 6.86 6.74 6.85 6.74M21.28 8.6C20.85 7.55 19.96 6.42 19.27 6.06C19.83 7.17 20.16 8.28 20.29 9.1L20.29 9.12C19.16 6.3 17.24 5.16 15.67 2.68C15.59 2.56 15.5 2.43 15.43 2.3C15.39 2.23 15.36 2.16 15.32 2.09C15.26 1.96 15.2 1.83 15.17 1.69C15.17 1.68 15.16 1.67 15.15 1.67H15.13L15.12 1.67L15.12 1.67L15.12 1.67C12.9 2.97 11.97 5.26 11.74 6.71C11.05 6.75 10.37 6.92 9.75 7.22C9.63 7.27 9.58 7.41 9.62 7.53C9.67 7.67 9.83 7.74 9.96 7.68C10.5 7.42 11.1 7.27 11.7 7.23L11.75 7.23C11.83 7.22 11.92 7.22 12 7.22C12.5 7.21 12.97 7.28 13.44 7.42L13.5 7.44C13.6 7.46 13.67 7.5 13.75 7.5C13.8 7.54 13.86 7.56 13.91 7.58L14.05 7.64C14.12 7.67 14.19 7.7 14.25 7.73C14.28 7.75 14.31 7.76 14.34 7.78C14.41 7.82 14.5 7.85 14.54 7.89C14.58 7.91 14.62 7.94 14.66 7.96C15.39 8.41 16 9.03 16.41 9.77C15.88 9.4 14.92 9.03 14 9.19C17.6 11 16.63 17.19 11.64 16.95C11.2 16.94 10.76 16.85 10.34 16.7C10.24 16.67 10.14 16.63 10.05 16.58C10 16.56 9.93 16.53 9.88 16.5C8.65 15.87 7.64 14.68 7.5 13.23C7.5 13.23 8 11.5 10.83 11.5C11.14 11.5 12 10.64 12.03 10.4C12.03 10.31 10.29 9.62 9.61 8.95C9.24 8.59 9.07 8.42 8.92 8.29C8.84 8.22 8.75 8.16 8.66 8.1C8.43 7.3 8.42 6.45 8.63 5.65C7.6 6.12 6.8 6.86 6.22 7.5H6.22C5.82 7 5.85 5.35 5.87 5C5.86 5 5.57 5.16 5.54 5.18C5.19 5.43 4.86 5.71 4.56 6C4.21 6.37 3.9 6.74 3.62 7.14C3 8.05 2.5 9.09 2.28 10.18C2.28 10.19 2.18 10.59 2.11 11.1L2.08 11.33C2.06 11.5 2.04 11.65 2 11.91L2 11.94L2 12.27L2 12.32C2 17.85 6.5 22.33 12 22.33C16.97 22.33 21.08 18.74 21.88 14C21.9 13.89 21.91 13.76 21.93 13.63C22.13 11.91 21.91 10.11 21.28 8.6Z" />
</svg>
Firefox Add-ons
</a>
</svg>
</a>
</div>
</div>
<div class="aboutcontainer" style="color: rgb(155, 155, 155); font-size: 14px; margin-top: 7px;">
<p>Contact: cacakaca@outlook.com</p>
</div>
<div class="main-page" id="mainpage">
<div class="topmenu">
<div class="navitem activenav" id="miscsection">Settings</div>
<div class="navitem" id="shortcutsection">Shortcuts</div>
<div class="navitem" id="aboutsection">About</div>
</div>
</div>
</div>
<div class="menu-page hiddenmenu" id="shortcutpage">
<div class="selector-container" style="margin-bottom: 0; max-height: 17em; overflow-y:hidden;">
<div>
<div class="custom-shortcuts-button custom-shortcuts-buttons">Create Custom Shortcut</div>
<div class="custom-shortcuts-container">
<label for="shortcutname" class="custom-shortcuts-label">Shortcut Name:</label>
<input type="text" id="shortcutname" name="shortcutname" class="custom-shortcuts-field" placeholder="e.g. Google" maxlength="20">
<label for="shortcuturl" class="custom-shortcuts-label">URL:</label>
<input type="text" id="shortcuturl" name="shortcuturl" class="custom-shortcuts-field" placeholder="e.g. https://www.google.com">
<div class="custom-shortcuts-submit custom-shortcuts-buttons">Create</div>
</div>
</div>
<div class="menu-item-selection menushortcut">
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">YouTube</h1>
<div class="menu-page hiddenmenu" id="menupage">
<div class="selector-container" style="margin-bottom: 0">
<div class="menu-item-selection">
<div class="aboutcontainer">
<div>
<h1 class="addonitem">About</h1>
<p class="item subitem">
Created and developed and maintained by CK and AH
</p>
<p class="item subitem">
EvenBetterSEQTA is a revived or BetterSEQTA which is no longer
maintained.
</p>
</div>
</div>
<div class="onoffswitch"><input class="onoffswitch-checkbox notification shortcutitem" type="checkbox"
id="youtube">
<label for="youtube" class="onoffswitch-label"></label>
<div class="aboutcontainer">
<div>
<a
class="aboutlinks"
href="https://chrome.google.com/webstore/detail/betterseqta/boikofabjaholheekefimfojfncpjfib"
target="_blank"
>
<svg style="width: 24px; height: 24px" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M12,20L15.46,14H15.45C15.79,13.4 16,12.73 16,12C16,10.8 15.46,9.73 14.62,9H19.41C19.79,9.93 20,10.94 20,12A8,8 0 0,1 12,20M4,12C4,10.54 4.39,9.18 5.07,8L8.54,14H8.55C9.24,15.19 10.5,16 12,16C12.45,16 12.88,15.91 13.29,15.77L10.89,19.91C7,19.37 4,16.04 4,12M15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9A3,3 0 0,1 15,12M12,4C14.96,4 17.54,5.61 18.92,8H12C10.06,8 8.45,9.38 8.08,11.21L5.7,7.08C7.16,5.21 9.44,4 12,4M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
/>
</svg>
Chrome Webstore
</a>
<a
class="aboutlinks"
href="https://addons.mozilla.org/en-US/firefox/addon/betterseqta/"
target="_blank"
>
<svg style="width: 24px; height: 24px" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M9.27 7.94C9.27 7.94 9.27 7.94 9.27 7.94M6.85 6.74C6.86 6.74 6.86 6.74 6.85 6.74M21.28 8.6C20.85 7.55 19.96 6.42 19.27 6.06C19.83 7.17 20.16 8.28 20.29 9.1L20.29 9.12C19.16 6.3 17.24 5.16 15.67 2.68C15.59 2.56 15.5 2.43 15.43 2.3C15.39 2.23 15.36 2.16 15.32 2.09C15.26 1.96 15.2 1.83 15.17 1.69C15.17 1.68 15.16 1.67 15.15 1.67H15.13L15.12 1.67L15.12 1.67L15.12 1.67C12.9 2.97 11.97 5.26 11.74 6.71C11.05 6.75 10.37 6.92 9.75 7.22C9.63 7.27 9.58 7.41 9.62 7.53C9.67 7.67 9.83 7.74 9.96 7.68C10.5 7.42 11.1 7.27 11.7 7.23L11.75 7.23C11.83 7.22 11.92 7.22 12 7.22C12.5 7.21 12.97 7.28 13.44 7.42L13.5 7.44C13.6 7.46 13.67 7.5 13.75 7.5C13.8 7.54 13.86 7.56 13.91 7.58L14.05 7.64C14.12 7.67 14.19 7.7 14.25 7.73C14.28 7.75 14.31 7.76 14.34 7.78C14.41 7.82 14.5 7.85 14.54 7.89C14.58 7.91 14.62 7.94 14.66 7.96C15.39 8.41 16 9.03 16.41 9.77C15.88 9.4 14.92 9.03 14 9.19C17.6 11 16.63 17.19 11.64 16.95C11.2 16.94 10.76 16.85 10.34 16.7C10.24 16.67 10.14 16.63 10.05 16.58C10 16.56 9.93 16.53 9.88 16.5C8.65 15.87 7.64 14.68 7.5 13.23C7.5 13.23 8 11.5 10.83 11.5C11.14 11.5 12 10.64 12.03 10.4C12.03 10.31 10.29 9.62 9.61 8.95C9.24 8.59 9.07 8.42 8.92 8.29C8.84 8.22 8.75 8.16 8.66 8.1C8.43 7.3 8.42 6.45 8.63 5.65C7.6 6.12 6.8 6.86 6.22 7.5H6.22C5.82 7 5.85 5.35 5.87 5C5.86 5 5.57 5.16 5.54 5.18C5.19 5.43 4.86 5.71 4.56 6C4.21 6.37 3.9 6.74 3.62 7.14C3 8.05 2.5 9.09 2.28 10.18C2.28 10.19 2.18 10.59 2.11 11.1L2.08 11.33C2.06 11.5 2.04 11.65 2 11.91L2 11.94L2 12.27L2 12.32C2 17.85 6.5 22.33 12 22.33C16.97 22.33 21.08 18.74 21.88 14C21.9 13.89 21.91 13.76 21.93 13.63C22.13 11.91 21.91 10.11 21.28 8.6Z"
/>
</svg>
Firefox Add-ons
</a>
</div>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">Outlook</h1>
</div>
<div class="onoffswitch"><input class="onoffswitch-checkbox notification shortcutitem" type="checkbox"
id="outlook">
<label for="outlook" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">Office</h1>
</div>
<div class="onoffswitch"><input class="onoffswitch-checkbox notification shortcutitem" type="checkbox"
id="office">
<label for="office" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">Spotify</h1>
</div>
<div class="onoffswitch"><input class="onoffswitch-checkbox notification shortcutitem" type="checkbox"
id="spotify">
<label for="spotify" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">Google</h1>
</div>
<div class="onoffswitch"><input class="onoffswitch-checkbox notification shortcutitem" type="checkbox"
id="google">
<label for="google" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">DuckDuckGo</h1>
</div>
<div class="onoffswitch"><input class="onoffswitch-checkbox notification shortcutitem" type="checkbox"
id="duckduckgo">
<label for="duckduckgo" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">Cool Math Games</h1>
</div>
<div class="onoffswitch"><input class="onoffswitch-checkbox notification shortcutitem" type="checkbox"
id="coolmathgames">
<label for="coolmathgames" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">SACE</h1>
</div>
<div class="onoffswitch"><input class="onoffswitch-checkbox notification shortcutitem" type="checkbox"
id="sace">
<label for="sace" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">Google Scholar</h1>
</div>
<div class="onoffswitch"><input class="onoffswitch-checkbox notification shortcutitem" type="checkbox"
id="googlescholar">
<label for="googlescholar" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">Gmail</h1>
</div>
<div class="onoffswitch"><input class="onoffswitch-checkbox notification shortcutitem" type="checkbox"
id="gmail">
<label for="gmail" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">Netflix</h1>
</div>
<div class="onoffswitch"><input class="onoffswitch-checkbox notification shortcutitem" type="checkbox"
id="netflix">
<label for="netflix" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">Education Perfect</h1>
</div>
<div class="onoffswitch"><input class="onoffswitch-checkbox notification shortcutitem" type="checkbox"
id="netflix">
<label for="educationperfect" class="onoffswitch-label"></label>
<div
class="aboutcontainer"
style="color: rgb(155, 155, 155); font-size: 14px; margin-top: 7px"
>
<p>Contact: cacakaca@outlook.com</p>
</div>
</div>
</div>
</div>
</div>
<div class="menu-page" id="miscpage">
<div class="selector-container" style="margin-bottom: 0;">
<div class="menu-item-selection">
<div class="item-container">
<div class="text-container">
<h1 class="addonitem">Notification Collector</h1>
<p class="item subitem">Shows the real number of notifications</p>
<div class="menu-page hiddenmenu" id="shortcutpage">
<div
class="selector-container"
style="margin-bottom: 0; max-height: 17em; overflow-y: hidden"
>
<div>
<div class="custom-shortcuts-button custom-shortcuts-buttons">
Create Custom Shortcut
</div>
<div class="onoffswitch"><input class="onoffswitch-checkbox notification" type="checkbox" id="notification">
<label for="notification" class="onoffswitch-label"></label>
<div class="custom-shortcuts-container">
<label for="shortcutname" class="custom-shortcuts-label"
>Shortcut Name:</label
>
<input
type="text"
id="shortcutname"
name="shortcutname"
class="custom-shortcuts-field"
placeholder="e.g. Google"
maxlength="20"
/>
<label for="shortcuturl" class="custom-shortcuts-label">URL:</label>
<input
type="text"
id="shortcuturl"
name="shortcuturl"
class="custom-shortcuts-field"
placeholder="e.g. https://www.google.com"
/>
<div class="custom-shortcuts-submit custom-shortcuts-buttons">
Create
</div>
</div>
</div>
<div class="item-container">
<div class="text-container">
<h1 class="addonitem">Lesson Alerts</h1>
<p class="item subitem">Sends a native browser notification ~5 minutes prior to lessons.</p>
<div class="menu-item-selection menushortcut">
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">YouTube</h1>
</div>
<div class="onoffswitch">
<input
class="onoffswitch-checkbox notification shortcutitem"
type="checkbox"
id="youtube"
/>
<label for="youtube" class="onoffswitch-label"></label>
</div>
</div>
<div class="onoffswitch"><input class="onoffswitch-checkbox notification" type="checkbox" id="lessonalert">
<label for="lessonalert" class="onoffswitch-label"></label>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">Outlook</h1>
</div>
<div class="onoffswitch">
<input
class="onoffswitch-checkbox notification shortcutitem"
type="checkbox"
id="outlook"
/>
<label for="outlook" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">Office</h1>
</div>
<div class="onoffswitch">
<input
class="onoffswitch-checkbox notification shortcutitem"
type="checkbox"
id="office"
/>
<label for="office" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">Spotify</h1>
</div>
<div class="onoffswitch">
<input
class="onoffswitch-checkbox notification shortcutitem"
type="checkbox"
id="spotify"
/>
<label for="spotify" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">Google</h1>
</div>
<div class="onoffswitch">
<input
class="onoffswitch-checkbox notification shortcutitem"
type="checkbox"
id="google"
/>
<label for="google" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">DuckDuckGo</h1>
</div>
<div class="onoffswitch">
<input
class="onoffswitch-checkbox notification shortcutitem"
type="checkbox"
id="duckduckgo"
/>
<label for="duckduckgo" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">Cool Math Games</h1>
</div>
<div class="onoffswitch">
<input
class="onoffswitch-checkbox notification shortcutitem"
type="checkbox"
id="coolmathgames"
/>
<label for="coolmathgames" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">SACE</h1>
</div>
<div class="onoffswitch">
<input
class="onoffswitch-checkbox notification shortcutitem"
type="checkbox"
id="sace"
/>
<label for="sace" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">Google Scholar</h1>
</div>
<div class="onoffswitch">
<input
class="onoffswitch-checkbox notification shortcutitem"
type="checkbox"
id="googlescholar"
/>
<label for="googlescholar" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">Gmail</h1>
</div>
<div class="onoffswitch">
<input
class="onoffswitch-checkbox notification shortcutitem"
type="checkbox"
id="gmail"
/>
<label for="gmail" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">Netflix</h1>
</div>
<div class="onoffswitch">
<input
class="onoffswitch-checkbox notification shortcutitem"
type="checkbox"
id="netflix"
/>
<label for="netflix" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container menushortcuts">
<div class="text-container">
<h1 class="addonitem">Education Perfect</h1>
</div>
<div class="onoffswitch">
<input
class="onoffswitch-checkbox notification shortcutitem"
type="checkbox"
id="netflix"
/>
<label for="educationperfect" class="onoffswitch-label"></label>
</div>
</div>
</div>
<div class="item-container">
<div class="text-container">
<h1 class="addonitem">Animated Background</h1>
<p class="item subitem">Adds an animated background to EvenBetterSEQTA.</p>
</div>
<div class="onoffswitch"><input class="onoffswitch-checkbox notification" type="checkbox" id="animatedbk">
<label for="animatedbk" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container">
<div class="text-container">
<h1 class="addonitem">Custom Theme Colour</h1>
<p class="item subitem">Customise the overall theme colour of SEQTA Learn.</p>
</div>
<div class="clr-field" style="justify-content: end; display: flex; margin: 5px;">
<button aria-labelledby="clr-open-label"
style="width: 51px; right: 0px; border: 1px solid white; border-radius: 3px;"></button>
<input type="text" id="colorpicker" class="coloris"
style="width: 48px; border-radius: 3px; padding: 6px 0;" />
</div>
</div>
<div class="item-container" style="height: 2em; margin-top: 0px;">
<div class="text-container">
<h1 class="addonitem">EvenBetterSEQTA</h1>
</div>
<div class="onoffswitch" style="margin-bottom: 0px;"><input class="onoffswitch-checkbox notification"
type="checkbox" id="onoff">
<label for="onoff" class="onoffswitch-label"></label>
</div>
</div>
</div>
<div class="domain-container">Not working on your SEQTA?<div class="domain-container-button" id="domain-button">Add Permissions for Newer Domains</div></div>
</div>
</div>
<div class="bottom-container">
<div class="applychanges" id="applychanges">
<div>
<h5>Unsaved Changes</h5>
<h6>Click to apply.</h6>
</div>
</div>
<div></div>
<div class="menu-page" id="miscpage">
<div class="selector-container" style="margin-bottom: 0">
<div class="menu-item-selection">
<div class="item-container">
<div class="text-container">
<h1 class="addonitem">Notification Collector</h1>
<p class="item subitem">Shows the real number of notifications</p>
</div>
<div class="onoffswitch">
<input
class="onoffswitch-checkbox notification"
type="checkbox"
id="notification"
/>
<label for="notification" class="onoffswitch-label"></label>
</div>
</div>
<div style="position: absolute; bottom: 15px; right: 50px; color: rgb(177, 177, 177); display: flex;">
<p style="margin: 0; margin-right: 5px; color: white;">Maintanied by SethBurkart123 </p>
<p style="margin: 0; margin-right: 5px;" id="version"></p>
</div><img src="/popup/github.svg" alt="" id="github">
</div>
<script src="info.js"></script>
<div class="item-container">
<div class="text-container">
<h1 class="addonitem">Lesson Alerts</h1>
<p class="item subitem">
Sends a native browser notification ~5 minutes prior to lessons.
</p>
</div>
<div class="onoffswitch">
<input
class="onoffswitch-checkbox notification"
type="checkbox"
id="lessonalert"
/>
<label for="lessonalert" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container">
<div class="text-container">
<h1 class="addonitem">Animated Background</h1>
<p class="item subitem">
Adds an animated background to EvenBetterSEQTA.
</p>
</div>
<div class="onoffswitch">
<input
class="onoffswitch-checkbox notification"
type="checkbox"
id="animatedbk"
/>
<label for="animatedbk" class="onoffswitch-label"></label>
</div>
</div>
<div class="item-container">
<div class="text-container">
<h1 class="addonitem">Custom Theme Colour</h1>
<p class="item subitem">
Customise the overall theme colour of SEQTA Learn.
</p>
</div>
<div
class="clr-field"
style="justify-content: end; display: flex; margin: 5px"
>
<button
aria-labelledby="clr-open-label"
style="
width: 51px;
right: 0px;
border: 1px solid white;
border-radius: 3px;
"
></button>
<input
type="text"
id="colorpicker"
class="coloris"
style="width: 48px; border-radius: 3px; padding: 6px 0"
/>
</div>
</div>
<div class="item-container" style="height: 2em; margin-top: 0px">
<div class="text-container">
<h1 class="addonitem">EvenBetterSEQTA</h1>
</div>
<div class="onoffswitch" style="margin-bottom: 0px">
<input
class="onoffswitch-checkbox notification"
type="checkbox"
id="onoff"
/>
<label for="onoff" class="onoffswitch-label"></label>
</div>
</div>
</div>
<div class="domain-container">
Not working on your SEQTA?
<div class="domain-container-button" id="domain-button">
Add Permissions for Newer Domains
</div>
</div>
</div>
</div>
<div class="bottom-container">
<div class="applychanges" id="applychanges">
<div>
<h5>Unsaved Changes</h5>
<h6>Click to apply.</h6>
</div>
</div>
<div></div>
<div
style="
position: absolute;
bottom: 15px;
right: 50px;
color: rgb(177, 177, 177);
display: flex;
"
>
<p style="margin: 0; margin-right: 5px; color: white">
Maintanied by SethBurkart123
</p>
<p style="margin: 0; margin-right: 5px" id="version"></p>
</div>
<img src="/popup/github.svg" alt="" id="github" />
</div>
<script src="info.js"></script>
</body>
</html>
public/popup/info.js
+111 -76
View File
@@ -16,49 +16,57 @@ const notificationcollector = document.querySelector("#notification");
const lessonalert = document.querySelector("#lessonalert");
const aboutsection = document.querySelector("#aboutsection");
const shortcutsection = document.querySelector("#shortcutsection");
const miscsection = document.querySelector('#miscsection');
const miscsection = document.querySelector("#miscsection");
const mainpage = document.querySelector("#mainpage");
const colorpicker = document.querySelector("#colorpicker");
const animatedbk = document.querySelector('#animatedbk');
const customshortcutbutton = document.getElementsByClassName('custom-shortcuts-button')[0];
const customshortcutdiv = document.getElementsByClassName('custom-shortcuts-container')[0];
const customshortcutsubmit = document.getElementsByClassName('custom-shortcuts-submit')[0];
const customshortcutinputname = document.querySelector('#shortcutname');
const customshortcutinputurl = document.querySelector('#shortcuturl');
const animatedbk = document.querySelector("#animatedbk");
const customshortcutbutton = document.getElementsByClassName(
"custom-shortcuts-button",
)[0];
const customshortcutdiv = document.getElementsByClassName(
"custom-shortcuts-container",
)[0];
const customshortcutsubmit = document.getElementsByClassName(
"custom-shortcuts-submit",
)[0];
const customshortcutinputname = document.querySelector("#shortcutname");
const customshortcutinputurl = document.querySelector("#shortcuturl");
const shortcutmenuitemselection = document.getElementsByClassName('menushortcut')[0];
const shortcutmenuitemselection =
document.getElementsByClassName("menushortcut")[0];
const applybutton = document.querySelector('#applychanges')
const applybutton = document.querySelector("#applychanges");
const navbuttons = document.getElementsByClassName("navitem");
const menupages = document.getElementsByClassName("menu-page")
const menupages = document.getElementsByClassName("menu-page");
const allinputs = document.getElementsByTagName('input');
const allinputs = document.getElementsByTagName("input");
const menupage = document.querySelector("#menupage");
const shortcutpage = document.querySelector("#shortcutpage");
const miscpage = document.querySelector('#miscpage');
const miscpage = document.querySelector("#miscpage");
var shortcutbuttons = document.getElementsByClassName("shortcutitem");
const github = document.getElementById("github");
const version = document.getElementById('version');
const domainbutton = document.getElementById('domain-button');
const version = document.getElementById("version");
const domainbutton = document.getElementById("domain-button");
var validURL = false;
var validName = false;
function openGithub() {
chrome.tabs.create({ url: "https://github.com/SethBurkart123/EvenBetterSEQTA" });
chrome.tabs.create({
url: "https://github.com/SethBurkart123/EvenBetterSEQTA",
});
}
function openPage(page) {
mainpage.style.left = "-350px";
page.style.right = '0px';
page.style.right = "0px";
}
function backToMainMenu() {
@@ -71,12 +79,11 @@ function backToMainMenu() {
function resetActive() {
for (let i = 0; i < navbuttons.length; i++) {
navbuttons[i].classList.remove('activenav');
navbuttons[i].classList.remove("activenav");
}
for (let i = 0; i < menupages.length; i++) {
menupages[i].classList.add('hiddenmenu');
menupages[i].classList.add("hiddenmenu");
}
}
function FindSEQTATab() {
@@ -98,13 +105,13 @@ function storeSettings() {
}
function storeNotificationSettings() {
chrome.storage.local.set(
{ notificationcollector: notificationcollector.checked });
chrome.storage.local.set({
notificationcollector: notificationcollector.checked,
});
chrome.storage.local.set({ lessonalert: lessonalert.checked });
chrome.storage.local.set({ animatedbk: animatedbk.checked });
}
function StoreAllSettings() {
chrome.storage.local.get(["shortcuts"], function (result) {
var shortcuts = Object.values(result)[0];
@@ -121,7 +128,7 @@ Update the options UI with the settings values retrieved from storage,
or the default settings if the stored settings are empty.
*/
function updateUI(restoredSettings) {
if (typeof restoredSettings.onoff == 'undefined') {
if (typeof restoredSettings.onoff == "undefined") {
chrome.runtime.sendMessage({ type: "setDefaultStorage" });
chrome.storage.local.get(null, function (result) {
@@ -149,7 +156,6 @@ var stringtoHTML = function (str) {
};
function CreateShortcutDiv(name) {
div = stringtoHTML(`
<div class="item-container menushortcuts" data-customshortcut="${name}">
<div class="text-container">
@@ -163,7 +169,7 @@ function CreateShortcutDiv(name) {
shortcutmenuitemselection.append(div);
const deletebutton = document.getElementById(`delete-${name}`);
deletebutton.addEventListener('click', function () {
deletebutton.addEventListener("click", function () {
DeleteCustomShortcut(name);
applybutton.style.left = "4px";
});
@@ -174,9 +180,7 @@ function AddCustomShortcuts() {
var customshortcuts = Object.values(result)[0];
for (let i = 0; i < customshortcuts.length; i++) {
const element = customshortcuts[i];
CreateShortcutDiv(
element.name,
)
CreateShortcutDiv(element.name);
}
});
}
@@ -193,40 +197,42 @@ function DeleteCustomShortcut(name) {
}
chrome.storage.local.set({ customshortcuts: customshortcuts });
});
}
function CustomShortcutMenu() {
customshortcutinputname.value = '';
customshortcutinputurl.value = '';
customshortcutinputname.value = "";
customshortcutinputurl.value = "";
validURL = false;
validName = false;
customshortcutsubmit.classList.remove("customshortcut-submit-valid");
if (customshortcutdiv.classList.contains('custom-shortcuts-container-shown')) {
customshortcutdiv.classList.remove('custom-shortcuts-container-shown')
if (
customshortcutdiv.classList.contains("custom-shortcuts-container-shown")
) {
customshortcutdiv.classList.remove("custom-shortcuts-container-shown");
} else {
customshortcutdiv.classList.add('custom-shortcuts-container-shown')
};
customshortcutdiv.classList.add("custom-shortcuts-container-shown");
}
}
function CreateCustomShortcut() {
const shortcutname = customshortcutinputname.value;
var shortcuturl = customshortcutinputurl.value;
if (!(shortcuturl.includes('http'))) {
if (!shortcuturl.includes("http")) {
shortcuturl = "https://" + shortcuturl;
}
chrome.storage.local.get(["customshortcuts"], function (result) {
var customshortcuts = Object.values(result)[0];
customshortcuts.push({ name: shortcutname, url: shortcuturl, icon: (shortcutname[0]).toUpperCase() });
customshortcuts.push({
name: shortcutname,
url: shortcuturl,
icon: shortcutname[0].toUpperCase(),
});
chrome.storage.local.set({ customshortcuts: customshortcuts });
});
CreateShortcutDiv(
shortcutname
);
CreateShortcutDiv(shortcutname);
}
function onError(e) {
@@ -236,7 +242,8 @@ function onError(e) {
On opening the options page, fetch stored settings and update the UI with them.
*/
chrome.storage.local.get(null, function (result) {
document.getElementsByClassName('clr-field')[0].style.color = result.selectedColor;
document.getElementsByClassName("clr-field")[0].style.color =
result.selectedColor;
colorpicker.value = result.selectedColor;
console.log(result);
updateUI(result);
@@ -249,18 +256,37 @@ document.addEventListener("DOMContentLoaded", function () {
version.innerHTML = `v${chrome.runtime.getManifest().version}`;
github.addEventListener("click", openGithub);
domainbutton.addEventListener('click', function (event) {
domainbutton.addEventListener("click", function (event) {
chrome.runtime.sendMessage({ type: "addPermissions" });
})
});
aboutsection.addEventListener("click", () => { resetActive(); aboutsection.classList.add('activenav'); menupage.classList.remove('hiddenmenu') });
aboutsection.addEventListener("click", () => {
resetActive();
aboutsection.classList.add("activenav");
menupage.classList.remove("hiddenmenu");
});
shortcutsection.addEventListener("click", () => { resetActive(); shortcutsection.classList.add('activenav'); shortcutpage.classList.remove('hiddenmenu') });
shortcutsection.addEventListener("click", () => {
resetActive();
shortcutsection.classList.add("activenav");
shortcutpage.classList.remove("hiddenmenu");
});
miscsection.addEventListener("click", () => { resetActive(); miscsection.classList.add('activenav'); miscpage.classList.remove('hiddenmenu') });
miscsection.addEventListener("click", () => {
resetActive();
miscsection.classList.add("activenav");
miscpage.classList.remove("hiddenmenu");
});
customshortcutbutton.addEventListener("click", () => { CustomShortcutMenu(); })
customshortcutsubmit.addEventListener("click", () => { if (validName && validURL) { CreateCustomShortcut(); CustomShortcutMenu() } });
customshortcutbutton.addEventListener("click", () => {
CustomShortcutMenu();
});
customshortcutsubmit.addEventListener("click", () => {
if (validName && validURL) {
CreateCustomShortcut();
CustomShortcutMenu();
}
});
var sameName = false;
customshortcutinputname.addEventListener("input", function () {
@@ -273,7 +299,11 @@ document.addEventListener("DOMContentLoaded", function () {
}
}
if (customshortcutinputname.value.length > 0 && customshortcutinputname.value.length < 22 && !sameName) {
if (
customshortcutinputname.value.length > 0 &&
customshortcutinputname.value.length < 22 &&
!sameName
) {
validName = true;
} else {
validName = false;
@@ -281,15 +311,17 @@ document.addEventListener("DOMContentLoaded", function () {
if (validName && validURL) {
customshortcutsubmit.classList.add("customshortcut-submit-valid");
}
else {
} else {
customshortcutsubmit.classList.remove("customshortcut-submit-valid");
}
});
});
customshortcutinputurl.addEventListener("input", function () {
if (customshortcutinputurl.value.length > 0 && customshortcutinputurl.value.includes('.')) {
if (
customshortcutinputurl.value.length > 0 &&
customshortcutinputurl.value.includes(".")
) {
validURL = true;
} else {
validURL = false;
@@ -297,46 +329,49 @@ document.addEventListener("DOMContentLoaded", function () {
if (validName && validURL) {
customshortcutsubmit.classList.add("customshortcut-submit-valid");
}
else {
} else {
customshortcutsubmit.classList.remove("customshortcut-submit-valid");
}
})
});
AddCustomShortcuts();
});
onoffselection.addEventListener("change", storeSettings);
notificationcollector.addEventListener(
"change",
storeNotificationSettings
);
lessonalert.addEventListener("change", storeNotificationSettings)
notificationcollector.addEventListener("change", storeNotificationSettings);
lessonalert.addEventListener("change", storeNotificationSettings);
animatedbk.addEventListener("change", storeNotificationSettings)
animatedbk.addEventListener("change", storeNotificationSettings);
for (let i = 0; i < allinputs.length; i++) {
if (allinputs[i].id != 'colorpicker' && allinputs[i].id != "shortcuturl" && allinputs[i].id != "shortcutname") {
allinputs[i].addEventListener("change", () => { applybutton.style.left = "4px" })
if (
allinputs[i].id != "colorpicker" &&
allinputs[i].id != "shortcuturl" &&
allinputs[i].id != "shortcutname"
) {
allinputs[i].addEventListener("change", () => {
applybutton.style.left = "4px";
});
}
}
applybutton.addEventListener('click', () => { StoreAllSettings(); applybutton.style.left = "-150px" })
applybutton.addEventListener("click", () => {
StoreAllSettings();
applybutton.style.left = "-150px";
});
colorpicker.addEventListener("input", function () {
var colorPreview = document.querySelector('#clr-color-preview')
var colorPreview = document.querySelector("#clr-color-preview");
if (colorPreview.style.color) {
var hex = colorPreview.style.color.split("(")[1].split(")")[0];
hex = hex.split(",");
var b = hex.map(function (x) { //For each array element
x = parseInt(x).toString(16); //Convert to a base16 string
return (x.length == 1) ? "0" + x : x; //Add zero if we get only one character
})
var b = hex.map(function (x) {
//For each array element
x = parseInt(x).toString(16); //Convert to a base16 string
return x.length == 1 ? "0" + x : x; //Add zero if we get only one character
});
b = "#" + b.join("");
chrome.storage.local.set({ selectedColor: b })
chrome.storage.local.set({ selectedColor: b });
}
})
});
public/purify.min.js
Vendored
+1387 -1
View File
File diff suppressed because one or more lines are too long
src/SEQTA.js
+959 -819
View File
File diff suppressed because it is too large Load Diff
src/background.js
+118 -111
View File
@@ -11,95 +11,105 @@ function ReloadSEQTAPages() {
chrome.runtime.onMessage.addListener(function (request, sender) {
if (request.type == "reloadTabs") {
ReloadSEQTAPages();
}
else if (request.type == "githubTab") {
chrome.tabs.create({ url: "github.com/SethBurkart123/BetterThanBetterSeqta" });
}
else if (request.type == "setDefaultStorage") {
console.log('setting default values')
SetStorageValue(DefaultValues);
}
else if (request.type == "addPermissions") {
if (typeof (chrome.declarativeContent) != 'undefined') {
chrome.declarativeContent.onPageChanged.removeRules(undefined, function () {
});
}
chrome.permissions.request({ permissions: ["declarativeContent"], origins: ["*://*/*"] }, function (granted) {
if (granted) {
rules = [
{
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { urlContains: 'site.seqta.com.au', schemes: ['https'] },
})
],
actions: [new chrome.declarativeContent.RequestContentScript({ js: ["SEQTA.js"] })]
},
{
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { urlContains: 'learn.', schemes: ['https'] },
})
],
actions: [new chrome.declarativeContent.RequestContentScript({ js: ["SEQTA.js"] })]
},
]
for (let i = 0; i < rules.length; i++) {
chrome.declarativeContent.onPageChanged.addRules([rules[i]]);
}
alert("Permissions granted. Reload SEQTA pages to see changes. If this workaround doesn't work, please contact the developer. It will be an easy fix");
}
} else if (request.type == "githubTab") {
chrome.tabs.create({
url: "github.com/SethBurkart123/BetterThanBetterSeqta",
});
} else if (request.type == "setDefaultStorage") {
console.log("setting default values");
SetStorageValue(DefaultValues);
} else if (request.type == "addPermissions") {
if (typeof chrome.declarativeContent != "undefined") {
chrome.declarativeContent.onPageChanged.removeRules(
undefined,
function () {},
);
}
chrome.permissions.request(
{ permissions: ["declarativeContent"], origins: ["*://*/*"] },
function (granted) {
if (granted) {
rules = [
{
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: {
urlContains: "site.seqta.com.au",
schemes: ["https"],
},
}),
],
actions: [
new chrome.declarativeContent.RequestContentScript({
js: ["SEQTA.js"],
}),
],
},
{
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { urlContains: "learn.", schemes: ["https"] },
}),
],
actions: [
new chrome.declarativeContent.RequestContentScript({
js: ["SEQTA.js"],
}),
],
},
];
for (let i = 0; i < rules.length; i++) {
chrome.declarativeContent.onPageChanged.addRules([rules[i]]);
}
alert(
"Permissions granted. Reload SEQTA pages to see changes. If this workaround doesn't work, please contact the developer. It will be an easy fix",
);
}
},
);
}
});
var NewsJSON = {};
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
if (request.type === "sendNews") {
// Gets the current date
const date = new Date();
// Formats the current date used send a request for timetable and notices later
var TodayFormatted =
date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
var from =
date.getFullYear() +
"-" +
(date.getMonth() + 1) +
"-" +
(date.getDate() - 1);
console.log(TodayFormatted);
console.log(from);
chrome.runtime.onMessage.addListener(
function (request, sender, sendResponse) {
if (request.type === "sendNews") {
// var url = `https://newsapi.org/v2/everything?sources=abc-news&from=${TodayFormatted}&sortBy=popularity&apiKey=17c0da766ba347c89d094449504e3080`;
var url = `https://newsapi.org/v2/everything?domains=abc.net.au&from=${from}&apiKey=17c0da766ba347c89d094449504e3080`;
// Gets the current date
const date = new Date();
// Formats the current date used send a request for timetable and notices later
var TodayFormatted =
date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
var from = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + (date.getDate() - 1);
console.log(TodayFormatted)
console.log(from)
// var url = `https://newsapi.org/v2/everything?sources=abc-news&from=${TodayFormatted}&sortBy=popularity&apiKey=17c0da766ba347c89d094449504e3080`;
var url = `https://newsapi.org/v2/everything?domains=abc.net.au&from=${from}&apiKey=17c0da766ba347c89d094449504e3080`
function GetNews() {
fetch(url)
.then((result) => result.json())
.then((response) => {
if (response.code == 'rateLimited') {
url += '%00';
GetNews();
}
else {
sendResponse({ news: response })
}
})
}
GetNews();
return true;
function GetNews() {
fetch(url)
.then((result) => result.json())
.then((response) => {
if (response.code == "rateLimited") {
url += "%00";
GetNews();
} else {
sendResponse({ news: response });
}
});
}
GetNews();
return true;
}
);
});
const DefaultValues = {
onoff: true,
@@ -110,94 +120,90 @@ const DefaultValues = {
menuitems: {},
menuorder: [],
subjectfilters: {},
selectedColor: '#1a1a1a',
selectedColor: "#1a1a1a",
DarkMode: true,
shortcuts: [
{
name: "YouTube",
enabled: false
enabled: false,
},
{
name: "Outlook",
enabled: true
enabled: true,
},
{
name: "Office",
enabled: true
enabled: true,
},
{
name: "Spotify",
enabled: false
enabled: false,
},
{
name: "Google",
enabled: true
enabled: true,
},
{
name: "DuckDuckGo",
enabled: false
enabled: false,
},
{
name: "Cool Math Games",
enabled: false
enabled: false,
},
{
name: "SACE",
enabled: false
enabled: false,
},
{
name: "Google Scholar",
enabled: false
enabled: false,
},
{
name: "Gmail",
enabled: false
enabled: false,
},
{
name: "Netflix",
enabled: false
enabled: false,
},
{
Name: "educationperfect",
enabled: true
}
enabled: true,
},
],
customshortcuts: []
}
customshortcuts: [],
};
function SetStorageValue(object) {
for (var i in object) {
chrome.storage.local.set({ [i]: object[i] })
chrome.storage.local.set({ [i]: object[i] });
}
}
function UpdateCurrentValues(details) {
console.log(details)
console.log(details);
chrome.storage.local.get(null, function (items) {
var CurrentValues = items;
const NewValue = Object.assign({}, DefaultValues, CurrentValues)
const NewValue = Object.assign({}, DefaultValues, CurrentValues);
function CheckInnerElement(element) {
for (let i in element) {
if (typeof element[i] === 'object') {
if (typeof DefaultValues[i].length == 'undefined') {
NewValue[i] = Object.assign({}, DefaultValues[i], CurrentValues[i])
}
else { // If the object is an array, turn it back after
if (typeof element[i] === "object") {
if (typeof DefaultValues[i].length == "undefined") {
NewValue[i] = Object.assign({}, DefaultValues[i], CurrentValues[i]);
} else {
// If the object is an array, turn it back after
length = DefaultValues[i].length;
NewValue[i] = Object.assign({}, DefaultValues[i], CurrentValues[i])
NewValue[i] = Object.assign({}, DefaultValues[i], CurrentValues[i]);
NewArray = [];
for (let j = 0; j < length; j++) {
NewArray.push(NewValue[i][j]);
}
NewValue[i] = NewArray;
}
}
}
}
@@ -208,15 +214,16 @@ function UpdateCurrentValues(details) {
}
SetStorageValue(NewValue);
})
});
}
chrome.runtime.onInstalled.addListener(function (event) {
chrome.storage.local.remove(["justupdated"]);
UpdateCurrentValues();
if (/*chrome.runtime.getManifest().version > event.previousVersion || */ event.reason == 'install') {
if (
/*chrome.runtime.getManifest().version > event.previousVersion || */ event.reason ==
"install"
) {
chrome.storage.local.set({ justupdated: true });
}
});
src/inject/documentload.js
+1 -1
View File
@@ -1 +1 @@
import './documentload.css';
import "./documentload.css";
src/inject/iframe.css
+8 -3
View File
@@ -11,9 +11,14 @@
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>. */
html, p, div, span {
html,
p,
div,
span {
color: white !important;
text-shadow: 1px 1px 2px #161616, 0 0 1em #161616;
text-shadow:
1px 1px 2px #161616,
0 0 1em #161616;
}
blockquote.forward > .preamble {
@@ -30,4 +35,4 @@ blockquote.forward > .preamble > .sender > .label {
}
table th {
background-color: #161616;
}
}
src/inject/iframe.js
+1 -1
View File
@@ -1 +1 @@
import './iframe.css';
import "./iframe.css";
src/inject/injected.css
+167 -146
View File
@@ -23,8 +23,8 @@
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>. */
@import url('https://fonts.googleapis.com/css?family=Rubik:300,400,500,600');
@import './injected/popup.css';
@import url("https://fonts.googleapis.com/css?family=Rubik:300,400,500,600");
@import "./injected/popup.css";
:root {
background-color: var(--better-main) !important;
@@ -59,7 +59,7 @@ html {
}
}
.connectedNotificationsWrapper>div>button>svg>g {
.connectedNotificationsWrapper > div > button > svg > g {
fill: var(--background-primary) !important;
}
@@ -94,31 +94,31 @@ html {
width: 35px !important;
}
#main>.dashboard {
#main > .dashboard {
background: unset;
}
#main>.dashboard>.dashlet {
#main > .dashboard > .dashlet {
background: var(--background-primary);
}
.dashlet-notes>ul {
.dashlet-notes > ul {
background: var(--background-primary);
}
.dashlet-notes>ul>li {
.dashlet-notes > ul > li {
color: var(--text-primary);
}
ul.magicDelete>li:hover {
ul.magicDelete > li:hover {
background: var(--better-sub);
}
.dashlet-notes>.editor {
.dashlet-notes > .editor {
background: unset;
}
ul.magicDelete>li.deleting {
ul.magicDelete > li.deleting {
background: unset;
}
@@ -155,7 +155,7 @@ ul.magicDelete>li.deleting {
white-space: nowrap;
}
#menu section>label {
#menu section > label {
align-items: center;
box-sizing: border-box;
cursor: inherit;
@@ -176,8 +176,8 @@ ul.magicDelete>li.deleting {
z-index: 11 !important;
}
#menu li>label>svg,
#menu section>label>svg {
#menu li > label > svg,
#menu section > label > svg {
margin: 0 10px 0 4px;
width: 28px !important;
height: 28px !important;
@@ -191,25 +191,25 @@ ul.magicDelete>li.deleting {
width: 85% !important;
}
#menu li.active>.sub>ul>.item {
#menu li.active > .sub > ul > .item {
box-shadow: inset 3px 0 var(--item-colour, transparent);
border-radius: 0px 8px 8px 0px;
transition: 100ms;
}
#menu li.active>.sub>ul>.item:hover {
#menu li.active > .sub > ul > .item:hover {
box-shadow: inset 6px 0 var(--item-colour, transparent);
transition: 100ms;
}
#menu li.active>.sub>ul>.active {
#menu li.active > .sub > ul > .active {
box-shadow: inset 6px 0 var(--item-colour, transparent);
transition: 100ms;
background: rgba(0, 0, 0, 0.3);
}
#menu li>label,
#menu section>label {
#menu li > label,
#menu section > label {
text-transform: none;
font-size: 16px;
}
@@ -244,9 +244,13 @@ ol:has(.MessageList__avatar___2wxyb svg) {
}
.wrapper .cke_contents::-webkit-scrollbar-thumb {
background-color: rgb(150, 150, 150) !important; /* color of the scroll thumb */
border-radius: 20px; /* roundness of the scroll thumb */
border: 3px solid orange; /* creates padding around scroll thumb */
background-color: rgb(
150,
150,
150
) !important; /* color of the scroll thumb */
border-radius: 20px; /* roundness of the scroll thumb */
border: 3px solid orange; /* creates padding around scroll thumb */
}
.content .footer {
@@ -288,13 +292,17 @@ ol:has(.MessageList__avatar___2wxyb svg) {
border-radius: 16px !important;
padding: 4px !important;
padding-left: 12px !important;
box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.2) !important;
box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.2) !important;
}
[style="--better-sub\:\ \#161616\;\ --better-alert-highlight\:\ \#c61851\;\ --background-primary\:\ \#ffffff\;\ --background-secondary\:\ \#e5e7eb\;\ --text-primary\:\ black\;\ --text-color\:\ white\;\ --betterseqta-logo\:\ url\(chrome-extension\:\/\/boikofabjaholheekefimfojfncpjfib\/icons\/betterseqta-light-full\.png\)\;\ --better-main\:\ \#1a1a1a\;\ --better-light\:\ \#333333\;"] .menuShown > :last-child {
[style="--better-sub\:\ \#161616\;\ --better-alert-highlight\:\ \#c61851\;\ --background-primary\:\ \#ffffff\;\ --background-secondary\:\ \#e5e7eb\;\ --text-primary\:\ black\;\ --text-color\:\ white\;\ --betterseqta-logo\:\ url\(chrome-extension\:\/\/boikofabjaholheekefimfojfncpjfib\/icons\/betterseqta-light-full\.png\)\;\ --better-main\:\ \#1a1a1a\;\ --better-light\:\ \#333333\;"]
.menuShown
> :last-child {
top: 14% !important;
}
[style="--better-sub\:\ \#161616\;\ --better-alert-highlight\:\ \#c61851\;\ --background-primary\:\ \#ffffff\;\ --background-secondary\:\ \#e5e7eb\;\ --text-primary\:\ black\;\ --text-color\:\ white\;\ --betterseqta-logo\:\ url\(chrome-extension\:\/\/boikofabjaholheekefimfojfncpjfib\/icons\/betterseqta-light-full\.png\)\;\ --better-main\:\ \#1a1a1a\;\ --better-light\:\ \#333333\;"] .menuShown > :last-child {
[style="--better-sub\:\ \#161616\;\ --better-alert-highlight\:\ \#c61851\;\ --background-primary\:\ \#ffffff\;\ --background-secondary\:\ \#e5e7eb\;\ --text-primary\:\ black\;\ --text-color\:\ white\;\ --betterseqta-logo\:\ url\(chrome-extension\:\/\/boikofabjaholheekefimfojfncpjfib\/icons\/betterseqta-light-full\.png\)\;\ --better-main\:\ \#1a1a1a\;\ --better-light\:\ \#333333\;"]
.menuShown
> :last-child {
top: 18% !important;
}
@@ -305,9 +313,13 @@ ol:has(.MessageList__avatar___2wxyb svg) {
}
.singleSelect::-webkit-scrollbar-thumb {
background-color: rgb(150, 150, 150) !important; /* color of the scroll thumb */
border-radius: 20px; /* roundness of the scroll thumb */
border: 3px solid orange; /* creates padding around scroll thumb */
background-color: rgb(
150,
150,
150
) !important; /* color of the scroll thumb */
border-radius: 20px; /* roundness of the scroll thumb */
border: 3px solid orange; /* creates padding around scroll thumb */
}
.uiFileHandler {
@@ -331,7 +343,6 @@ ol:has(.MessageList__avatar___2wxyb svg) {
}
#container #content #title {
margin-bottom: 40px;
-webkit-box-shadow: 0px 5px 16px 6px rgba(0, 0, 0, 0.2) !important;
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2) !important;
}
@@ -358,21 +369,19 @@ td.colourBar {
padding-left: 10px;
padding-right: 10px;
}
#main>.reports>.item>.report {
#main > .reports > .item > .report {
filter: brightness(1) !important;
border-radius: 16px !important;
border: 2px solid lightgray !important;
}
#main>.reports>.item {
#main > .reports > .item {
box-shadow: none !important;
}
ol > [data-message] {
padding-left: 4px !important;
padding-right: 4px !important;
margin-bottom: 4px;
border-radius: 8px !important;
}
ol > [data-label] {
@@ -395,7 +404,7 @@ div > ol:has(.uiFileHandlerWrapper) {
border-bottom-right-radius: 16px !important;
}
.assessments > div > div > div > div > div > div > div:has(ol) {
.assessments > div > div > div > div > div > div > div:has(ol) {
border-radius: 16px !important;
}
@@ -403,7 +412,7 @@ div > ol:has(.uiFileHandlerWrapper) {
min-height: 8rem !important;
}
.student #menu>ul::before {
.student #menu > ul::before {
background-image: var(--betterseqta-logo);
position: -webkit-sticky; /* Safari */
position: sticky;
@@ -419,7 +428,7 @@ div > ol:has(.uiFileHandlerWrapper) {
background: rgba(0, 0, 0, 0.15);
}
#main>.timetablepage>.container {
#main > .timetablepage > .container {
background-color: var(--background-primary);
}
@@ -454,7 +463,13 @@ div > ol:has(.uiFileHandlerWrapper) {
}
}
.welcome>.portalPageView>.powerPortalPage>.Body__body___3pGxr>.Container__container___33GlY>.Document__document___1KJCG>.Canvas__canvas___OBdCZ {
.welcome
> .portalPageView
> .powerPortalPage
> .Body__body___3pGxr
> .Container__container___33GlY
> .Document__document___1KJCG
> .Canvas__canvas___OBdCZ {
background-color: unset !important;
background-image: unset !important;
background-size: unset;
@@ -473,31 +488,35 @@ div > ol:has(.uiFileHandlerWrapper) {
color: var(--text-primary) !important;
}
.composer>.Body__body___3pGxr>.Container__container___33GlY>.Document__document___1KJCG>.Canvas__canvas___OBdCZ {
.composer
> .Body__body___3pGxr
> .Container__container___33GlY
> .Document__document___1KJCG
> .Canvas__canvas___OBdCZ {
background-color: unset !important;
background-image: unset !important;
background: var(--auto-background) !important;
color: white !important;
}
#main>.notices>.notice>.label,
#main>.notices>.notice>.staff,
#main>.notices>.notice>h2 {
#main > .notices > .notice > .label,
#main > .notices > .notice > .staff,
#main > .notices > .notice > h2 {
color: var(--text-primary);
color: var(--colour);
}
#main>.course>.content>.homework>.content,
#main>.course>.content>.resources>.content {
#main > .course > .content > .homework > .content,
#main > .course > .content > .resources > .content {
color: var(--text-primary);
opacity: 0.8;
}
#main>.notices>.notice>.contents {
#main > .notices > .notice > .contents {
background: var(--background-primary);
}
#main>.notices>.notice {
#main > .notices > .notice {
--colour: unset;
}
@@ -512,9 +531,11 @@ div > ol:has(.uiFileHandlerWrapper) {
.bg {
animation: slide 3s ease-in-out infinite alternate;
background-image: linear-gradient(-60deg,
var(--better-main) 50%,
var(--auto-background) 50%);
background-image: linear-gradient(
-60deg,
var(--better-main) 50%,
var(--auto-background) 50%
);
bottom: 0;
left: -50%;
opacity: 0.5;
@@ -738,7 +759,7 @@ div > ol:has(.uiFileHandlerWrapper) {
}
.customshortcut::after {
content: 'User Created Shortcut';
content: "User Created Shortcut";
position: absolute;
top: -4px;
right: -15px;
@@ -816,11 +837,11 @@ div > ol:has(.uiFileHandlerWrapper) {
transition: 200ms;
}
#main>.notices>.notice>.contents {
#main > .notices > .notice > .contents {
background: var(--background);
}
#main>.notices>.notice {
#main > .notices > .notice {
background: var(--background);
}
@@ -908,27 +929,29 @@ div > ol:has(.uiFileHandlerWrapper) {
cursor: pointer;
}
.connectedNotificationsWrapper>div>button {
.connectedNotificationsWrapper > div > button {
height: 45px;
width: 45px;
}
.notifications__notifications___3mmLY.notifications__hasItems___gXxzx>button {
.notifications__notifications___3mmLY.notifications__hasItems___gXxzx > button {
background: white;
color: var(--better-sub);
}
.notifications__notifications___3mmLY>button {
.notifications__notifications___3mmLY > button {
padding: 8px;
}
.legacy-root button>svg,
.legacy-root a>svg {
.legacy-root button > svg,
.legacy-root a > svg {
height: 25px;
width: 24px;
}
.notifications__notifications___3mmLY>button>.notifications__bubble___1EkSQ {
.notifications__notifications___3mmLY
> button
> .notifications__bubble___1EkSQ {
background: var(--better-alert-highlight);
width: 25px;
height: 25px;
@@ -942,7 +965,7 @@ div > ol:has(.uiFileHandlerWrapper) {
border-color: var(--better-sub);
}
.notifications__notifications___3mmLY.notifications__shown___1kPoT>button {
.notifications__notifications___3mmLY.notifications__shown___1kPoT > button {
background-color: #e6e6e6;
border-bottom-left-radius: 100%;
}
@@ -962,17 +985,17 @@ div > ol:has(.uiFileHandlerWrapper) {
background: var(--auto-background) !important;
}
.connectedNotificationsWrapper>div>button+div {
.connectedNotificationsWrapper > div > button + div {
color: var(--text-primary);
top: 80px;
right: 10px;
border-radius: 1rem;
box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.4);
box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.4);
}
#ExtensionPopup {
border-radius: 1rem;
box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.4);
box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.4);
}
#menu li.active {
@@ -994,13 +1017,13 @@ div > ol:has(.uiFileHandlerWrapper) {
flex-direction: column;
}
.notifications__item___2ErJN>.notifications__dismiss___zveKV {
.notifications__item___2ErJN > .notifications__dismiss___zveKV {
background: rgba(0, 0, 0, 0.1) !important;
color: var(--text-primary);
margin: auto 0;
}
#main>.messages {
#main > .messages {
color: var(--text-primary);
}
@@ -1009,24 +1032,24 @@ div > ol:has(.uiFileHandlerWrapper) {
color: var(--text-primary);
}
.LabelList__LabelList___2RJFf>li.LabelList__selected___3Egk7 {
.LabelList__LabelList___2RJFf > li.LabelList__selected___3Egk7 {
color: var(--text-primary);
}
.Viewer__sidebar___1Btu4>header {
.Viewer__sidebar___1Btu4 > header {
background: unset;
}
.MessageList__MessageList___3DxoC ::-webkit-scrollbar {
width: 0px;
background: none;
width: 0px;
background: none;
}
.MessageList__MessageList___3DxoC {
background: var(--background-primary);
}
.Input__Input___3RSTI>input {
.Input__Input___3RSTI > input {
color: var(--text-primary);
background: var(--better-main);
}
@@ -1035,7 +1058,7 @@ div > ol:has(.uiFileHandlerWrapper) {
--person-colour: var(--better-light);
}
.LabelList__LabelList___2RJFf>li.LabelList__selected___3Egk7 {
.LabelList__LabelList___2RJFf > li.LabelList__selected___3Egk7 {
background: var(--background-primary);
}
@@ -1053,34 +1076,36 @@ iframe.userHTML {
background: var(--background-primary);
}
.userHTML>div:first-of-type {
.userHTML > div:first-of-type {
color: var(--text-primary);
}
#main>.reports>.item>.report {
#main > .reports > .item > .report {
background: var(--background-primary);
filter: brightness(0.90);
filter: brightness(0.9);
}
#main>.reports {
#main > .reports {
background: var(--auto-background);
}
#main>.reports>.item>.report>.year {
#main > .reports > .item > .report > .year {
background: var(--better-light);
color: var(--text-color);
}
#main>.reports>.item>.report>.term {
#main > .reports > .item > .report > .term {
color: var(--text-color);
background: var(--better-main);
}
.Collapsible__Collapsible___3O8P3>.Collapsible__header___-Afvq {
.Collapsible__Collapsible___3O8P3 > .Collapsible__header___-Afvq {
background: var(--auto-background);
}
.AssessmentList__AssessmentList___1GdCl>.AssessmentList__searchFilter___3N70o+.AssessmentList__items___3LcmQ {
.AssessmentList__AssessmentList___1GdCl
> .AssessmentList__searchFilter___3N70o
+ .AssessmentList__items___3LcmQ {
color: var(--text-primary);
}
@@ -1094,47 +1119,47 @@ iframe.userHTML {
background: unset;
}
.programmeNavigator>.navigator,
.programmeNavigator>.navigator>li>ul {
.programmeNavigator > .navigator,
.programmeNavigator > .navigator > li > ul {
background: var(--background-primary);
color: var(--text-primary);
}
.programmeNavigator>.navigator>.week>.lessons>.lesson:hover {
.programmeNavigator > .navigator > .week > .lessons > .lesson:hover {
background: var(--auto-background);
}
.programmeNavigator>.navigator>.search {
.programmeNavigator > .navigator > .search {
background: var(--better-light);
}
.programmeNavigator>.navigator>.week>.lessons>.lesson.selected,
.programmeNavigator>.navigator>.cover.selected {
.programmeNavigator > .navigator > .week > .lessons > .lesson.selected,
.programmeNavigator > .navigator > .cover.selected {
background: var(--better-light);
color: var(--text-color) !important;
}
#main>.course>.content>h1 {
#main > .course > .content > h1 {
color: var(--text-primary);
}
#main>.course>.content>.outline>h2,
#main>.course>.content>.homework>h2,
#main>.course>.content>.resources>h2 {
#main > .course > .content > .outline > h2,
#main > .course > .content > .homework > h2,
#main > .course > .content > .resources > h2 {
color: var(--text-primary);
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
transition: 1.0s;
transition: 1s;
}
::-webkit-scrollbar-thumb {
background-color: var(--better-light);
background-clip: padding-box;
border: 2px solid transparent;
transition: 1.0s;
transition: 1s;
border-radius: 1rem !important;
}
@@ -1147,12 +1172,9 @@ iframe.userHTML {
background-color: transparent;
}
::-webkit-scrollbar-thumb:vertical:active,
::-webkit-scrollbar-thumb:horizontal:active {
background: var(--better-light);
}
::-webkit-scrollbar-corner {
@@ -1169,8 +1191,7 @@ ul {
scrollbar-color: var(--better-light) var(--better-sub) !important;
}
.connectedNotificationsWrapper>div>button {
.connectedNotificationsWrapper > div > button {
color: var(--text-primary) !important;
}
@@ -1179,7 +1200,7 @@ ul {
background: var(--background-primary);
}
#userActions>.details>.code {
#userActions > .details > .code {
text-transform: initial;
}
@@ -1187,7 +1208,7 @@ ul {
color: var(--text-primary);
}
.TabSet__TabSet___Vo-SZ>.TabSet__tabContainer___3iIRe {
.TabSet__TabSet___Vo-SZ > .TabSet__tabContainer___3iIRe {
background: unset;
}
@@ -1200,15 +1221,15 @@ ul {
margin: 8px 0px 0px 0px;
}
.dailycal>.header {
.dailycal > .header {
color: var(--text-primary);
}
#main>.timetablepage>.container>.dailycal {
#main > .timetablepage > .container > .dailycal {
color: var(--text-primary);
}
#main>.timetablepage>.note {
#main > .timetablepage > .note {
color: var(--text-primary);
}
@@ -1231,11 +1252,11 @@ ul {
color: var(--text-primary);
}
.Rubric__Rubric___2AAKS>.Rubric__line___JCC3Y {
.Rubric__Rubric___2AAKS > .Rubric__line___JCC3Y {
background: unset;
}
#main>.course>.content>.header>.coverImage.blurred {
#main > .course > .content > .header > .coverImage.blurred {
display: none;
background-image: unset !important;
height: 0px;
@@ -1256,7 +1277,7 @@ blurred {
cursor: pointer;
}
.uiSlidePane>.pane>.header {
.uiSlidePane > .pane > .header {
color: var(--text-color);
background-color: var(--better-main);
}
@@ -1276,14 +1297,14 @@ blurred {
box-shadow: inset 0px 10px 0 var(--item-colour, transparent) !important;
}
.formattedText>.wrapper>.cke>.cke_inner>.cke_contents {
.formattedText > .wrapper > .cke > .cke_inner > .cke_contents {
background: var(--background-primary);
border-radius: 1rem;
padding: 8px;
overflow-x: hidden;
}
.formattedText>.footer {
.formattedText > .footer {
background-color: var(--background-primary);
border-radius: 1rem;
margin-top: 0.5rem;
@@ -1299,15 +1320,17 @@ blurred {
background-color: rgba(0, 0, 0, 0);
}
.uiSlidePane.shown>.pane {
.uiSlidePane.shown > .pane {
transform: translatey(0%) !important;
}
.uiSlidePane>.pane {
.uiSlidePane > .pane {
color: var(--text-primary);
background-color: var(--auto-background);
transform: translateY(100%);
transition: transform 0.5s ease-in-out,-webkit-transform 0.5s ease-in-out;
transition:
transform 0.5s ease-in-out,
-webkit-transform 0.5s ease-in-out;
transition-delay: 0 !important;
border-radius: 1rem !important;
}
@@ -1329,8 +1352,8 @@ blurred {
background: #797979;
}
.cke_toolbox>.cke_toolbar .cke_combo_on>.cke_combo_button,
.cke_toolbox>.cke_toolbar .cke_button_on {
.cke_toolbox > .cke_toolbar .cke_combo_on > .cke_combo_button,
.cke_toolbox > .cke_toolbar .cke_button_on {
background-color: #797979 !important;
}
@@ -1364,7 +1387,7 @@ body {
overflow: hidden;
}
#main>.notices>.notice {
#main > .notices > .notice {
color: var(--text-primary);
}
@@ -1378,15 +1401,23 @@ body {
background-size: contain;
}
.forumView>.messages>.thread,
.forumView>.messages>.deletedPlaceholder,
.forumView>.addMessage,
.forumView > .messages > .thread,
.forumView > .messages > .deletedPlaceholder,
.forumView > .addMessage,
.forumView .greeting,
.forumView .assessment {
background: var(--better-main);
}
.dailycal>.content>.wrapper>.days>tbody>tr>td>.entriesWrapper>.entry {
.dailycal
> .content
> .wrapper
> .days
> tbody
> tr
> td
> .entriesWrapper
> .entry {
/* border-radius: 15px; */
padding: 3px;
/* width: 93% !important; */
@@ -1418,11 +1449,11 @@ body {
display: none;
}
.MessageList__MessageList___3DxoC>ol>li.MessageList__unread___3imtO {
.MessageList__MessageList___3DxoC > ol > li.MessageList__unread___3imtO {
box-shadow: inset 3px 0 rgb(255, 255, 255);
}
.connectedNotificationsWrapper>div>button {
.connectedNotificationsWrapper > div > button {
background: var(--text-primary) !important;
border-radius: 10px !important;
color: var(--background-primary) !important;
@@ -1434,7 +1465,7 @@ body {
z-index: 2;
}
#userActions>.details>.name::before {
#userActions > .details > .name::before {
content: "";
width: 14px;
height: 12px;
@@ -1447,7 +1478,7 @@ body {
vertical-align: top;
}
#userActions>.details {
#userActions > .details {
opacity: unset !important;
color: var(--text-color);
}
@@ -1491,7 +1522,6 @@ body {
transform: unset;
padding-top: unset;
opacity: unset;
}
#clr-color-preview {
@@ -1502,7 +1532,7 @@ body {
cursor: pointer;
}
.MessageList__MessageList___3DxoC>ol>li.MessageList__selected___1SJNz {
.MessageList__MessageList___3DxoC > ol > li.MessageList__selected___1SJNz {
background: var(--better-main);
color: var(--text-color);
}
@@ -1541,7 +1571,7 @@ body {
background: none;
}
.NewsArticle:hover>.ArticleText a {
.NewsArticle:hover > .ArticleText a {
text-decoration: underline;
}
@@ -1568,7 +1598,7 @@ body {
justify-content: center;
}
.editmenu svg:hover>path {
.editmenu svg:hover > path {
fill: #aaaaaa;
}
@@ -1683,7 +1713,7 @@ body {
bottom: 20px;
}
#userActions>.details>.code {
#userActions > .details > .code {
overflow: visible !important;
}
@@ -1745,7 +1775,7 @@ body {
margin: 0;
}
.notifications__actions___1UX7r>button {
.notifications__actions___1UX7r > button {
background: none !important;
border: 1px solid white;
}
@@ -1848,7 +1878,7 @@ body {
}
.upcoming-special-day {
font-size: 20px
font-size: 20px;
}
.upcoming-blank {
@@ -1889,7 +1919,6 @@ body {
overflow-y: hidden;
}
.upcoming-checkbox-container {
display: block;
position: relative;
@@ -1905,8 +1934,6 @@ body {
height: 20px;
align-items: center;
display: flex;
}
/* Hide the browser's default checkbox */
@@ -1932,12 +1959,12 @@ body {
}
/* On mouse-over, add a grey background color */
.upcoming-checkbox-container:hover input~.upcoming-checkmark {
.upcoming-checkbox-container:hover input ~ .upcoming-checkmark {
filter: brightness(0.8);
}
/* When the checkbox is checked, add a blue background */
.upcoming-checkbox-container input:checked~.upcoming-checkmark {
.upcoming-checkbox-container input:checked ~ .upcoming-checkmark {
background-color: var(--item-colour);
}
@@ -1949,7 +1976,7 @@ body {
}
/* Show the checkmark when checked */
.upcoming-checkbox-container input:checked~.upcoming-checkmark:after {
.upcoming-checkbox-container input:checked ~ .upcoming-checkmark:after {
display: block;
}
@@ -1970,11 +1997,11 @@ body {
color: #797979;
}
.calendarEventEditor>.tabset>.item {
.calendarEventEditor > .tabset > .item {
border-radius: 0 !important;
}
.MessageList__MessageList___3DxoC>header {
.MessageList__MessageList___3DxoC > header {
display: flex;
justify-content: space-between;
}
@@ -1995,8 +2022,6 @@ body {
cursor: pointer;
}
.day {
box-shadow: inset 0px 0px 10px 0.1px var(--better-sub);
width: 100%;
@@ -2028,11 +2053,11 @@ body {
transition: 200ms;
}
#main>.notices>.notice>.contents {
#main > .notices > .notice > .contents {
background: var(--background-primary);
}
#main>.notices>.notice {
#main > .notices > .notice {
background: var(--background-primary);
}
@@ -2185,7 +2210,7 @@ body {
}
.upcoming-special-day {
font-size: 20px
font-size: 20px;
}
.upcoming-blank {
@@ -2222,7 +2247,6 @@ body {
overflow-y: hidden;
}
.upcoming-checkbox-container {
display: block;
position: relative;
@@ -2238,8 +2262,6 @@ body {
height: 20px;
align-items: center;
display: flex;
}
/* Hide the browser's default checkbox */
@@ -2265,12 +2287,12 @@ body {
}
/* On mouse-over, add a grey background color */
.upcoming-checkbox-container:hover input~.upcoming-checkmark {
.upcoming-checkbox-container:hover input ~ .upcoming-checkmark {
filter: brightness(0.8);
}
/* When the checkbox is checked, add a blue background */
.upcoming-checkbox-container input:checked~.upcoming-checkmark {
.upcoming-checkbox-container input:checked ~ .upcoming-checkmark {
background-color: var(--item-colour);
}
@@ -2282,7 +2304,7 @@ body {
}
/* Show the checkmark when checked */
.upcoming-checkbox-container input:checked~.upcoming-checkmark:after {
.upcoming-checkbox-container input:checked ~ .upcoming-checkmark:after {
display: block;
}
@@ -2489,7 +2511,6 @@ body {
animation: zoomin 0.5s;
animation-fill-mode: forwards;
transform-origin: center center;
}
@keyframes zoomin {
@@ -2599,7 +2620,7 @@ body {
}
.whatsnewTextHeader::after {
content: '';
content: "";
width: 160%;
height: 2px;
background: #4dd868;
@@ -2642,4 +2663,4 @@ body {
.whatsnewzoomout {
animation: zoomout 0.7s;
}
}
src/inject/injected.js
+1 -1
View File
@@ -1 +1 @@
import './injected.css';
import "./injected.css";
src/inject/injected/popup.css
+1 -1
View File
@@ -4,4 +4,4 @@
.topmenu {
margin-top: 0;
}
}
src/seqta/content/MenuItemSVGKey.json
+1 -1
View File
@@ -9,4 +9,4 @@
"reports": "<svg style=\"width:24px;height:24px\" viewBox=\"0 0 24 24\">\n <path fill=\"currentColor\" d=\"M18 2H12V9L9.5 7.5L7 9V2H6A2 2 0 0 0 4 4V20A2 2 0 0 0 6 22H18A2 2 0 0 0 20 20V4A2 2 0 0 0 18 2M14 12A2 2 0 1 1 12 14A2 2 0 0 1 14 12M18 20H10V19C10 17.67 12.67 17 14 17S18 17.67 18 19Z\" />\n</svg>",
"settings": "<svg style=\"width:24px;height:24px\" viewBox=\"0 0 24 24\">\n <path fill=\"currentColor\" d=\"M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z\" />\n</svg>",
"timetable": "<svg style=\"width:24px;height:24px\" viewBox=\"0 0 24 24\">\n <path fill=\"currentColor\" d=\"M9,10V12H7V10H9M13,10V12H11V10H13M17,10V12H15V10H17M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H6V1H8V3H16V1H18V3H19M19,19V8H5V19H19M9,14V16H7V14H9M13,14V16H11V14H13M17,14V16H15V14H17Z\" />\n</svg>"
}
}
src/seqta/content/links.json
+1 -1
View File
@@ -54,4 +54,4 @@
"viewBox": "0 0 24 24",
"icon": "M6.5,2H10.5L13.44,10.83L13.5,2H17.5V22C16.25,21.78 14.87,21.64 13.41,21.58L10.5,13L10.43,21.59C9.03,21.65 7.7,21.79 6.5,22V2Z"
}
}
}
webpack.config.js
+26 -23
View File
@@ -1,6 +1,7 @@
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const ESLintPlugin = require("eslint-webpack-plugin");
module.exports = {
performance: {
@@ -8,51 +9,53 @@ module.exports = {
maxEntrypointSize: 512000,
maxAssetSize: 512000,
},
devtool: 'cheap-module-source-map',
devtool: "cheap-module-source-map",
entry: {
'SEQTA': './src/SEQTA.js',
'background': './src/background.js',
'inject-documentload': './src/inject/documentload.css', // Entry for CSS
'inject-iframe': './src/inject/iframe.css', // Entry for CSS
'inject-injected': './src/inject/injected.css', // Entry for CSS
SEQTA: "./src/SEQTA.js",
background: "./src/background.js",
"inject-documentload": "./src/inject/documentload.css", // Entry for CSS
"inject-iframe": "./src/inject/iframe.css", // Entry for CSS
"inject-injected": "./src/inject/injected.css", // Entry for CSS
},
output: {
filename: (pathData) => {
const name = pathData.chunk.name.replace('inject-', '');
return name.includes('inject') ? `inject/${name}.js` : `${name}.js`;
const name = pathData.chunk.name.replace("inject-", "");
return name.includes("inject") ? `inject/${name}.js` : `${name}.js`;
},
path: path.resolve(__dirname, 'build'),
// eslint-disable-next-line no-undef
path: path.resolve(__dirname, "build"),
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
],
include: path.resolve(__dirname, 'src'),
use: [MiniCssExtractPlugin.loader, "css-loader"],
// eslint-disable-next-line no-undef
include: path.resolve(__dirname, "src"),
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
type: "asset/resource",
generator: {
filename: 'src/[path][name][ext]',
filename: "src/[path][name][ext]",
},
},
],
},
plugins: [
new ESLintPlugin(),
new MiniCssExtractPlugin({
filename: (pathData) => {
const name = pathData.chunk.name.replace('inject-', '');
return name.includes('inject') ? `inject/${name}.css` : `inject/${name}.css`;
const name = pathData.chunk.name.replace("inject-", "");
return name.includes("inject")
? `inject/${name}.css`
: `inject/${name}.css`;
},
}),
new CopyWebpackPlugin({
patterns: [
{ from: 'public', to: '.' },
{ from: 'src/inject/preview', to: 'inject/preview' },
{ from: "public", to: "." },
{ from: "src/inject/preview", to: "inject/preview" },
],
}),
],