mycoolsite.com
- -example.com
+MetamorPOV replacements are disabled for this website
+diff --git a/.gitignore b/.gitignore index ed332b2..4a50196 100644 --- a/.gitignore +++ b/.gitignore @@ -2,4 +2,4 @@ *-update/* *.DS_Store node_modules -src/replace-words-and-verbs.js +src/content-script.js diff --git a/src/content-script.js b/src/content-script.js deleted file mode 100644 index cd8580f..0000000 --- a/src/content-script.js +++ /dev/null @@ -1,680 +0,0 @@ -'use strict'; - -function getDefaultExportFromCjs (x) { - return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x; -} - -var replaceWords$1 = {}; - -var dist = {}; - -var hasRequiredDist; - -function requireDist () { - if (hasRequiredDist) return dist; - hasRequiredDist = 1; - /** - * @license - * Copyright 2019 Ludan Stoecklé - * SPDX-License-Identifier: Apache-2.0 - */ - Object.defineProperty(dist, "__esModule", { value: true }); - dist.getConjugation = dist.getVerbInfo = dist.getIngPart = dist.mergeVerbsData = void 0; - const tenses = [ - // SIMPLE - 'SIMPLE_PAST', - 'PAST', - 'SIMPLE_PRESENT', - 'PRESENT', - 'SIMPLE_FUTURE', - 'FUTURE', - // PROGRESSIVE - 'PROGRESSIVE_PAST', - 'PROGRESSIVE_PRESENT', - 'PROGRESSIVE_FUTURE', - // PERFECT - 'PERFECT_PAST', - 'PERFECT_PRESENT', - 'PERFECT_FUTURE', - // PERFECT PROGRESSIVE - 'PERFECT_PROGRESSIVE_PAST', - 'PERFECT_PROGRESSIVE_PRESENT', - 'PERFECT_PROGRESSIVE_FUTURE', - // PARTICIPLE - 'PARTICIPLE_PRESENT', - 'PARTICIPLE_PAST', - ]; - const modals = ['can', 'could', 'may', 'might', 'must', 'shall', 'should', 'will', 'would', 'ought']; - // helpers - function mergeVerbsData(irregularsInfo, gerundsInfo) { - const res = {}; - // gerunds - if (gerundsInfo) { - const gerundKeys = Object.keys(gerundsInfo); - for (const gerundKey of gerundKeys) { - const gerundVal = gerundsInfo[gerundKey]; - res[gerundKey] = [null, null, gerundVal]; - } - } - // irregulars - if (irregularsInfo) { - const irregularKeys = Object.keys(irregularsInfo); - for (const irregularKey of irregularKeys) { - const irregularVal = irregularsInfo[irregularKey]; - if (!res[irregularKey]) { - res[irregularKey] = [irregularVal[0][0], irregularVal[0][1], null]; - } - else { - res[irregularKey] = [irregularVal[0][0], irregularVal[0][1], res[irregularKey][2]]; - } - } - } - return res; - } - dist.mergeVerbsData = mergeVerbsData; - function getIrregularHelper(verbsInfo, verb, index) { - const verbInfo = getVerbInfo(verbsInfo, verb); - if (verbInfo && verbInfo.length != 0) { - return verbInfo[index]; - } - else { - return null; - } - } - function getCommonEdPart(verb) { - if (verb.endsWith('ie') || verb.endsWith('ee')) { - return verb + 'd'; - } - else if (yWithVowel(verb)) { - // vowel + y: play -> played - return verb + 'ed'; - } - else if (verb.endsWith('y')) { - // no vowel + y: cry -> cried - return verb.substring(0, verb.length - 1) + 'ied'; - } - else if (verb.endsWith('e')) { - return verb + 'd'; - } - else { - return verb + 'ed'; - } - } - function getPastPart(verbsInfo, verb) { - if (verb === 'be') { - return 'been'; - } - else { - const irregular = getIrregularHelper(verbsInfo, verb, 1); - if (irregular) { - return irregular; - } - else { - return getCommonEdPart(verb); - } - } - } - function getPreteritPart(verbsInfo, verb, person) { - let irregular; - if (verb === 'be') { - if (person === 0 || person === 2) { - return 'was'; - } - else { - return 'were'; - } - } - else if ((irregular = getIrregularHelper(verbsInfo, verb, 0))) { - return irregular; - } - else { - return getCommonEdPart(verb); - } - } - function getIngPart(verbsInfo, verb) { - const consonants = 'bcdfghjklmnpqrstvxzw'; - const irregular = getIrregularHelper(verbsInfo, verb, 2); - if (irregular) { - return irregular; - } - else if (verb.match(new RegExp(`[${consonants}]e$`, 'g')) && verb != 'be' && verb != 'singe') { - // If the infinitive ends with a consonant followed by an –e, - // you have to take off the –e to form your present participle. - // this is not in the english-verbs-gerunds list - // hum and unless it is 'to be'! which becomes being, not bing. - return verb.substring(0, verb.length - 1) + 'ing'; - } - else { - return verb + 'ing'; - } - } - dist.getIngPart = getIngPart; - /* does not throw an exception: - most verb conjugation is rule based, thus not finding it in the resource is not a problem */ - function getVerbInfo(verbsInfo, verb) { - return verbsInfo ? verbsInfo[verb] : null; - } - dist.getVerbInfo = getVerbInfo; - // 1 per tense - function getSimplePast(verbsInfo, verb, person) { - return getPreteritPart(verbsInfo, verb, person); - } - function yWithVowel(verb) { - return verb.match(/[aeiouy]y$/) !== null; - } - function getSimplePresentHeShe(verb) { - if (modals.indexOf(verb) > -1) { - return verb; - } - else if (verb === 'have') { - return 'has'; - } - else if (verb === 'be') { - return 'is'; - } - else if (verb === 'do') { - return 'does'; - } - else if (verb === 'go') { - return 'goes'; - } - else if (yWithVowel(verb)) { - // vowel + y: play -> plays - return verb + 's'; - } - else if (verb.endsWith('y')) { - // no vowel + y: fly -> flies - return verb.substring(0, verb.length - 1) + 'ies'; - } - else if (verb.endsWith('ss') || verb.endsWith('x') || verb.endsWith('sh') || verb.endsWith('ch')) { - return verb + 'es'; - } - else { - // default - return verb + 's'; - } - } - function getSimplePresent(verb, person) { - if (person != 2) { - if (verb === 'be') { - if (person === 0) { - return 'am'; - } - else { - return 'are'; - } - } - else { - return verb; - } - } - else { - return getSimplePresentHeShe(verb); - } - } - function getSimpleFuture(verb, person, isGoingTo, negative) { - if (isGoingTo) { - return getSimplePresent('be', person) + ' ' + getNegative(negative) + 'going to ' + verb; - } - else { - return 'will ' + getNegative(negative) + verb; - } - } - function getNegative(negative) { - return negative ? 'not ' : ''; - } - function getProgressivePast(verbsInfo, verb, person, negative) { - return getPreteritPart(verbsInfo, 'be', person) + ' ' + getNegative(negative) + getIngPart(verbsInfo, verb); - } - function getProgressivePresent(verbsInfo, verb, person, negative) { - return getSimplePresent('be', person) + ' ' + getNegative(negative) + getIngPart(verbsInfo, verb); - } - function getProgressiveFuture(verbsInfo, verb, negative) { - return 'will ' + getNegative(negative) + 'be ' + getIngPart(verbsInfo, verb); - } - function getPerfectPast(verbsInfo, verb, negative) { - return 'had ' + getNegative(negative) + getPastPart(verbsInfo, verb); - } - function getPerfectPresent(verbsInfo, verb, person, negative) { - return getSimplePresent('have', person) + ' ' + getNegative(negative) + getPastPart(verbsInfo, verb); - } - function getPerfectFuture(verbsInfo, verb, negative) { - return 'will ' + getNegative(negative) + 'have ' + getPastPart(verbsInfo, verb); - } - function getPerfectProgressivePast(verbsInfo, verb, negative) { - return 'had ' + getNegative(negative) + 'been ' + getIngPart(verbsInfo, verb); - } - function getPerfectProgressivePresent(verbsInfo, verb, person, negative) { - return getSimplePresent('have', person) + ' ' + getNegative(negative) + 'been ' + getIngPart(verbsInfo, verb); - } - function getPerfectProgressiveFuture(verbsInfo, verb, negative) { - return 'will ' + getNegative(negative) + 'have been ' + getIngPart(verbsInfo, verb); - } - function doContract(original) { - const contractions = [ - // present - ['does not', "doesn't"], - ['do not', "don't"], - ['is not', "isn't"], - ['are not', "aren't"], - ['has not', "hasn't"], - ['have not', "haven't"], - ['can not', "can't"], - ['could not', "couldn't"], - ['may not', "mayn't"], - ['might not', "mightn't"], - ['will not', "won't"], - ['shall not', "shan't"], - ['would not', "wouldn't"], - ['should not', "shouldn't"], - ['must not', "mustn't"], - ['ought not', "oughtn't"], - // past - ['did not', "didn't"], - ['was not', "wasn't"], - ['were not', "weren't"], - ['had not', "hadn't"], - ]; - for (const contraction of contractions) { - const replaced = original.replace(contraction[0], contraction[1]); - if (replaced !== original) { - // finding one in fine, then we stop - return replaced; - } - } - // istanbul ignore next - return original; - } - function getConjugatedVerb(verbsInfo, verb, tense, person, isNegative, isHaveNoDo, isGoingTo) { - switch (tense) { - case 'PAST': - case 'SIMPLE_PAST': - if (isNegative) { - if (verb === 'be' || verb === 'do' || modals.indexOf(verb) > -1 || isHaveNoDo) { - return getSimplePast(verbsInfo, verb, person) + ' not'; - } - else { - // 'do ...' form - return getSimplePast(verbsInfo, 'do', person) + ' not ' + verb; - } - } - else { - return getSimplePast(verbsInfo, verb, person); - } - case 'PRESENT': - case 'SIMPLE_PRESENT': - if (isNegative) { - if (verb === 'be' || verb === 'do' || modals.indexOf(verb) > -1 || isHaveNoDo) { - return getSimplePresent(verb, person) + ' not'; - } - else { - // 'do ...' form - return getSimplePresent('do', person) + ' not ' + verb; - } - } - else { - return getSimplePresent(verb, person); - } - case 'FUTURE': - case 'SIMPLE_FUTURE': - return getSimpleFuture(verb, person, isGoingTo, isNegative); - case 'PROGRESSIVE_PAST': - return getProgressivePast(verbsInfo, verb, person, isNegative); - case 'PROGRESSIVE_PRESENT': - return getProgressivePresent(verbsInfo, verb, person, isNegative); - case 'PROGRESSIVE_FUTURE': - return getProgressiveFuture(verbsInfo, verb, isNegative); - case 'PERFECT_PAST': - return getPerfectPast(verbsInfo, verb, isNegative); - case 'PERFECT_PRESENT': - return getPerfectPresent(verbsInfo, verb, person, isNegative); - case 'PERFECT_FUTURE': - return getPerfectFuture(verbsInfo, verb, isNegative); - case 'PERFECT_PROGRESSIVE_PAST': - return getPerfectProgressivePast(verbsInfo, verb, isNegative); - case 'PERFECT_PROGRESSIVE_PRESENT': - return getPerfectProgressivePresent(verbsInfo, verb, person, isNegative); - case 'PERFECT_PROGRESSIVE_FUTURE': - return getPerfectProgressiveFuture(verbsInfo, verb, isNegative); - case 'PARTICIPLE_PRESENT': - return (isNegative ? 'not ' : '') + getIngPart(verbsInfo, verb); - case 'PARTICIPLE_PAST': - return (isNegative ? 'not ' : '') + getPastPart(verbsInfo, verb); - } - } - function getConjugation(verbsInfo, verb, tense, person, extraParams) { - if (!verb) { - const err = new Error(); - err.name = 'TypeError'; - err.message = 'verb must not be null'; - throw err; - } - if (tenses.indexOf(tense) == -1) { - const err = new Error(); - err.name = 'TypeError'; - err.message = `invalid tense: ${tense}`; - throw err; - } - if ([0, 1, 2, 3, 4, 5].indexOf(person) === -1) { - const err = new Error(); - err.name = 'TypeError'; - err.message = 'person must be 0 1 2 3 4 or 5'; - throw err; - } - const isGoingTo = extraParams && extraParams.GOING_TO ? true : false; - const isNegative = extraParams && extraParams.NEGATIVE ? true : false; - const isHaveNoDo = isNegative && verb === 'have' && extraParams.NO_DO ? true : false; - const conjugated = getConjugatedVerb(verbsInfo, verb, tense, person, isNegative, isHaveNoDo, isGoingTo); - if (isNegative && (extraParams.CONTRACT || isHaveNoDo)) { - // Note that in the form without the auxiliary verb DO, the verb HAVE is always contracted with the adverb not. - return doContract(conjugated); - } - else { - return conjugated; - } - } - dist.getConjugation = getConjugation; - - return dist; -} - -var hasRequiredReplaceWords; - -function requireReplaceWords () { - if (hasRequiredReplaceWords) return replaceWords$1; - hasRequiredReplaceWords = 1; - //PAUSED_KEY = 'pause-this-domain-pls-interactive-fics-yalla-bina'; - - const verbsHelper = requireDist(); - - browser.runtime.onMessage.addListener((message, sender, sendResponse) => { - if ('input_word' in message){ - escapeAndReplace(message.input_word, message.replace_value, message.case_sensitive); - } else { - replaceAll(); - } - }); - - function replaceAll() { - browser.storage.local.get(null, replaceAllInStorage); // TODO this is bad - } - - function replaceAllInStorage(options) { - //const hostname = window.location.hostname - //const is_paused = options[PAUSED_KEY] && options[PAUSED_KEY].indexOf(hostname) !== -1 - { // change paused later to only care about hostname - replaceVerbs(options); - replaceName(options); - replacePronouns(options); - replacePov(options); - replacePlv(options); - replaceAlso(options); - } - } - - function replaceName(options) { - const regexp = /\by\/n\b|\(y\/n\)|\[y\/n\]/ig; - walk(document.body, regexp, options["name"], directMethod); - } - - function replaceVerbs(options) { - if (getPronouns(options.preset, options.other).plurality == "plural") { - const regexp = /([Pp])(?:rn|ov)\/S [Vv]rb\/([\w\s]+)\/([\w\s]+)\/|[Vv]rb\/([\w\s]+)\/([\w\s]+)\/ ([Pp])(?:rn|ov)\/S/; - walk(document.body, regexp, options, pluralThirdVerbMethod); - } - - const regexp = /vrb\/([\w\s]+)\/([\w\s]+)\//; - walk(document.body, regexp, options, verbMethod); - } - - // TODO case sensitivity, premade regexp - function replacePronouns(options) { - if (options.preset == "") { return; } - let pronouns = getPronouns(options.preset, options.other); - replacePronounSet("Prn/s", "prn/s", pronouns["subjective"]); - replacePronounSet("Prn/o", "prn/o", pronouns["objective"]); - replacePronounSet("Prn/p", "prn/p", pronouns["possessive"]); - replacePronounSet("Prn/a", "prn/a", pronouns["adjective"]); - replacePronounSet("Prn/r", "prn/r", pronouns["reflexive"]); - replacePronounSet("Prn/H", "prn/H", pronouns["honorific-abbr"]); - replacePronounSet("Prn/h", "prn/h", pronouns["honorific"]); - replacePronounSet("Prn/N", "prn/N", pronouns["noun-adult"]); - replacePronounSet("Prn/n", "prn/n", pronouns["noun-child"]); - } - - function getPronouns(key, other) { - switch (key) { - case "she": - return { - "subjective": "she", - "objective": "her", - "possessive": "her", - "adjective": "hers", - "reflexive": "herself", - "honorific-abbr": "Ms.", - "honorific": "miss", - "noun-adult": "woman", - "noun-child": "girl", - "plurality": "singular" - }; - case "he": - return { - "subjective": "he", - "objective": "him", - "possessive": "his", - "adjective": "his", - "reflexive": "himself", - "honorific-abbr": "Mr.", - "honorific": "mister", - "noun-adult": "man", - "noun-child": "boy", - "plurality": "singular" - }; - case "they": - return { - "subjective": "they", - "objective": "them", - "possessive": "their", - "adjective": "theirs", - "reflexive": "themself", - "honorific-abbr": "Mx.", - "honorific": "mix", - "noun-adult": "person", - "noun-child": "kid", - "plurality": "plural" - }; - case "first": - return { - "subjective": "I", - "objective": "me", - "possessive": "my", - "adjective": "mine", - "reflexive": "myself" - }; - case "second": - return { - "subjective": "you", - "objective": "you", - "possessive": "your", - "adjective": "yours", - "reflexive": "yourself" - }; - case "first-plural": - return { - "subjective": "we", - "objective": "us", - "possessive": "our", - "adjective": "ours", - "reflexive": "ourselves" - }; - case "second-plural": - return { - "subjective": "you", - "objective": "you", - "possessive": "your", - "adjective": "yours", - "reflexive": "yourselves" - }; - case "third-plural": - return { - "subjective": "they", - "objective": "them", - "possessive": "their", - "adjective": "theirs", - "reflexive": "themselves" - }; - case "other": - return other; - } - } - - function replacePronounSet(keyCapital, key, pronoun) { - if (pronoun === undefined) { return; } - escapeAndReplace(keyCapital, capitalize(pronoun), true); - escapeAndReplace(key, pronoun, true); - } - - function replacePov(options) { - let pronouns; - switch (options.pov) { - case "": - return; - case "third": - pronouns = getPronouns(options.preset, options.other); - replacePronounSet("Pov/S", "pov/S", options.name); - replacePronounSet("Pov/O", "pov/O", options.name); - replacePronounSet("Pov/P", "pov/P", options.name + "'s"); - replacePronounSet("Pov/A", "pov/A", options.name + "'s"); - replacePronounSet("Pov/R", "pov/R", options.name + "'s self"); - break; - default: - pronouns = getPronouns(options.pov, null); - replacePronounSet("Pov/S", "pov/S", pronouns["subjective"]); - replacePronounSet("Pov/O", "pov/O", pronouns["objective"]); - replacePronounSet("Pov/P", "pov/P", pronouns["possessive"]); - replacePronounSet("Pov/A", "pov/A", pronouns["adjective"]); - replacePronounSet("Pov/R", "pov/R", pronouns["reflexive"]); - } - replacePronounSet("Pov/s", "pov/s", pronouns["subjective"]); - replacePronounSet("Pov/o", "pov/o", pronouns["objective"]); - replacePronounSet("Pov/p", "pov/p", pronouns["possessive"]); - replacePronounSet("Pov/a", "pov/a", pronouns["adjective"]); - replacePronounSet("Pov/r", "pov/r", pronouns["reflexive"]); - } - - function replacePlv(options) { - if (options.pov == "") { return; } - let pronouns = getPronouns(options.pov + "-plural", null); - replacePronounSet("Plv/s", "plv/s", pronouns["subjective"]); - replacePronounSet("Plv/o", "plv/o", pronouns["objective"]); - replacePronounSet("Plv/p", "plv/p", pronouns["possessive"]); - replacePronounSet("Plv/a", "plv/a", pronouns["adjective"]); - replacePronounSet("Plv/r", "plv/r", pronouns["reflexive"]); - } - - function replaceAlso(options) { - Object.entries(options.also).forEach(([key, value]) => { - escapeAndReplace(key, value, true); - }); - } - - function escapeAndReplace(input_word, replace_value, case_sensitive) { - let input_word_escaped = input_word.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"); - const flags = case_sensitive ? "g" : "ig"; - if (input_word_escaped[0].match(/[a-z]/i)) { - input_word_escaped = `\\b${input_word_escaped}`; - } - if (input_word_escaped[input_word_escaped.length - 1].match((/[a-z]/i))) { - input_word_escaped = `${input_word_escaped}\\b`; - } - const regexp_input_word = new RegExp(input_word_escaped, flags); - walk(document.body, regexp_input_word, replace_value, directMethod); - } - - function walk(node, input_word, replace_value, replaceMethod) { - if (node.contentEditable == "true" || node.type == "textarea" || node.type == "input") { return; } - let child, next; - switch (node.nodeType) { - case 1: /* ELEMENT_NODE */ - case 9: /* DOCUMENT_NODE */ - case 11: /* DOCUMENT_FRAGMENT_NODE */ - child = node.firstChild; - while (child) { - next = child.nextSibling; - walk(child, input_word, replace_value, replaceMethod); - child = next; - } - break; - case 3: /* TEXT_NODE */ - replaceMethod(node, input_word, replace_value); - } - } - - function directMethod(node, input_word, replace_value) { - node.nodeValue = node.nodeValue.replace(input_word, replace_value); // TODO might replaceall work better here?; - } - - // TODO do something about options being not input_word - function verbMethod(node, regexp, options) { - let match = node.nodeValue.match(regexp); - if (match == null) { return; } - const verb = match[1]; - const tense = match[2].toUpperCase().replaceAll(" ", "_"); - const replace_value = verbsHelper.getConjugation(null, verb, tense, getPovIndex(options)); - node.nodeValue = node.nodeValue.replace(regexp, replace_value); - verbMethod(node, regexp, options); - } - - function pluralThirdVerbMethod(node, regexp, options) { - let match = node.nodeValue.match(regexp); - if (match == null) { return } const before = match[1]; - match[4]; - const wasBefore = !(before === undefined); - let verb, tense; - if (wasBefore) { - verb = match[2]; - tense = match[3]; - } else { - verb = match[5]; - tense = match[6]; - } - tense = tense.toUpperCase().replaceAll(" ", "_"); - const replace_verb = verbsHelper.getConjugation(null, verb, tense, 2); - let replace_value; - if (wasBefore) { - replace_value = options["name"] + " " + replace_verb; - } else { - replace_value = replace_verb + " " + options["name"]; - } - node.nodeValue = node.nodeValue.replace(regexp, replace_value); - pluralThirdVerbMethod(node, regexp, options); - } - - function capitalize(word) { - return word.charAt(0).toUpperCase() + word.slice(1); - } - - // TODO figure out plv for this - function getPovIndex(options) { - switch (options.pov) { - case "first": - return 0; - case "second": - return 1; - case "third": - if (getPronouns(options.preset, options.other).plurality == "singular") { - return 2; - } else { /* Plurality is plural, "they go" */ - return 5; - } - } - } - - replaceAll(); - return replaceWords$1; -} - -var replaceWordsExports = requireReplaceWords(); -var replaceWords = /*@__PURE__*/getDefaultExportFromCjs(replaceWordsExports); - -module.exports = replaceWords; diff --git a/src/popup.css b/src/popup.css index 1a1df13..3d606b0 100644 --- a/src/popup.css +++ b/src/popup.css @@ -22,6 +22,20 @@ --color-l-gray-140: hsla(33, 54%, 17%, 1); --color-l-alpha-gray: hsla(34, 37%, 70%, 0.15); + /* Green */ + --color-l-green-10: hsla(148, 30%, 65%, 1); + --color-l-green-20: hsla(148, 48%, 47%, 1); + --color-l-green-30: hsla(149, 50%, 39%, 1); + --color-l-green-40: hsla(153, 65%, 29%, 1); + --color-l-alpha-green: hsla(74, 69%, 44%, 0.2); + + /* Red */ + --color-l-red-10: hsla(4, 59%, 64%, 1); + --color-l-red-20: hsla(4, 72%, 55%, 1); + --color-l-red-30: hsla(4, 56%, 48%, 1); + --color-l-red-40: hsla(4, 72%, 35%, 1); + --color-l-alpha-red: hsla(350, 84%, 63%, 0.2); + --text-color: var(--color-l-gray-120); --desc-color: var(--color-l-gray-100); --placeholder-color: var(--color-l-gray-70); @@ -96,15 +110,16 @@ input:focus { select { padding: 6px; + padding-right: 26px; box-shadow: var(--shadow); + appearance: none; + background: url("data:image/svg+xml,") no-repeat; + background-position-x: calc(100% - 2px); + background-position-y: calc(50% - 2px); } -select:active { - transition: 0.1s; - box-shadow: var(--shadow-active); -} - -select:focus { +select:active, select:focus { + outline: none; box-shadow: var(--shadow-focus); } @@ -192,6 +207,11 @@ html { scrollbar-color: var(--scrollbar-color) transparent; } +h1 { + font-size: var(--large-text); + font-weight: 600; +} + ul { list-style: none; padding-left: 0; @@ -207,55 +227,59 @@ ul { margin-bottom: 20px; } -#button-grid > button { +button:not(.delete) { display: flex; justify-content: center; align-items: center; font-weight: 600; border: 1px solid var(--border-color); - border-radius: .5em; - width: 100%; font-size: var(--large-text); padding: 6px; + cursor: pointer; + box-shadow: var(--shadow); + background-color: var(--color-l-gray-20); + color: var(--text-color); +} + +#button-grid > button { + border-radius: .5em; + width: 100%; margin-top: 6px; margin-bottom: 6px; gap: 8px; text-align: center; - cursor: pointer; - box-shadow: var(--shadow); } -#button-grid > button > svg { - width: 24px; - height: 24px; - transform: translateY(-10%); +button > svg { + transform: translateY(-.15em); } #button-grid > button > p { margin: 0; font-family: 'Inter', sans-serif; font-feature-settings: var(--font-features); - transform: translateY(-10%); + transform: translateY(-.15em); } -#button-grid > button:hover { +button:not(.delete):hover { transition-duration: 0.3s; box-shadow: var(--shadow-hover); + background-color: var(--color-l-gray-10); } -#button-grid > button:active { +button:not(.delete):active { transition: 0.3s; box-shadow: var(--shadow-active); } #button-grid > button:active > p { transition: 0.3s; - transform: translateY(0%); + transform: translateY(0); } -#button-grid > button:active > svg { -transition: 0.3s; -transform: translateY(0%); +button:not(.delete):active > svg { + transition: 0.3s; + transform: translateY(0); } /* Save button */ @@ -272,20 +296,6 @@ transform: translateY(0%); background-color: var(--color-l-gray-90); } -/* Restore button */ -#restore { - background-color: var(--color-l-gray-20); - color: var(--text-color); -} - -#restore:hover { - background-color: var(--color-l-gray-10); -} - -#restore:active { - background-color: var(--color-l-gray-20); -} - .visually-hidden { @@ -303,25 +313,53 @@ transform: translateY(0%); /* Site enabled section */ #site-enabled { - display: none; /* TODO Actually do this section! */ - grid-template-columns: 2fr 1fr; + display: flex; + justify-content: space-between; background-color: var(--color-l-gray-10); padding: 10px; - border: 0; + border: 1px solid var(--border-color); border-radius: .5em; + margin-top: var(--small-text); } -#hostname { - font-size: var(--large-text); - font-weight: 400; - text-align: center; +#state { + color: var(--color-l-red-20); + transition: .3s; } -#site-enabled svg { - width: 50%; - justify-self: center; +#state.is-on { + color: var(--color-l-green-20); + transition: .3s; +} + +#toggle { + border-radius: 3em; + padding: 12px; align-self: center; - cursor: pointer; + margin-right: 5px; + background-color: var(--color-l-red-20); + color: var(--color-l-gray-10); +} + +#toggle:hover { +background-color: var(--color-l-red-10); +} + +#toggle:active { +background-color: var(--color-l-red-20); +} + +#toggle.is-on { + background-color: var(--color-l-green-20); + color: var(--color-l-gray-10); +} + +#toggle.is-on:hover { + background-color: var(--color-l-green-10); +} + +#toggle.is-on:active { + background-color: var(--color-l-green-20); } @@ -331,7 +369,7 @@ transform: translateY(0%); #configuration { background-color: var(--color-l-gray-10); padding: 10px; - border: 0; + border: 1px solid var(--border-color); border-radius: .5em; margin-top: var(--small-text); } @@ -418,7 +456,6 @@ label { a { color: var(--link-color); text-decoration: underline; - text-underline-offset: 2px; transition-duration: 0.3s; } diff --git a/src/popup.html b/src/popup.html index 0577dd2..f2c8756 100644 --- a/src/popup.html +++ b/src/popup.html @@ -9,9 +9,13 @@
MetamorPOV replacements are disabled for this website
+