diff options
Diffstat (limited to 'src/pages')
| -rw-r--r-- | src/pages/options/index.js | 6 | ||||
| -rw-r--r-- | src/pages/options/widgets/general.pug | 24 | ||||
| -rw-r--r-- | src/pages/options/widgets/services.pug | 60 | ||||
| -rw-r--r-- | src/pages/popup/popup.pug | 30 | ||||
| -rw-r--r-- | src/pages/popup/style.css | 44 | ||||
| -rw-r--r-- | src/pages/popup/switches.pug | 6 | ||||
| -rw-r--r-- | src/pages/stylesheets/styles.css | 151 |
7 files changed, 94 insertions, 227 deletions
diff --git a/src/pages/options/index.js b/src/pages/options/index.js index 1fba923a..2861203a 100644 --- a/src/pages/options/index.js +++ b/src/pages/options/index.js @@ -249,7 +249,7 @@ async function createList(frontend, networks, document, redirects, blacklist) { .getElementsByClassName("checklist")[0] if (!redirects[frontend]) { - checklist.innerHTML = '<div class="some-block option-block">No instances found.</div>' + checklist.innerHTML = '<div class="block block-option">No instances found.</div>' break } @@ -287,8 +287,8 @@ async function createList(frontend, networks, document, redirects, blacklist) { }) checklist.innerHTML = [ - `<div class="some-block option-block"> - <h4>${utils.camelCase(network)}</h4> + `<div class="block block-option"> + <label>${utils.camelCase(network)}</label> </div>`, ...content, "<br>" diff --git a/src/pages/options/widgets/general.pug b/src/pages/options/widgets/general.pug index 5ee6a2e3..15cbf8cd 100644 --- a/src/pages/options/widgets/general.pug +++ b/src/pages/options/widgets/general.pug @@ -1,28 +1,28 @@ -section(class="option-block" id="general_page") - div(class="some-block option-block") +section(class="block-option" id="general_page") + div(class="block block-option") h1(data-localise="__MSG_general__") General hr - div(class="some-block option-block") - h4(data-localise="__MSG_theme__") Theme + div(class="block block-option") + label(data-localise="__MSG_theme__") Theme select(id="theme" aria-label="select theme") option(value="detect" data-localise="__MSG_auto__") Auto option(value="light" data-localise="__MSG_light__") Light option(value="dark" data-localise="__MSG_dark__") Dark - div(class="some-block option-block") - h4(data-localise="__MSG_fetchPublicInstances__") Fetch public instances + div(class="block block-option") + label(data-localise="__MSG_fetchPublicInstances__") Fetch public instances select(id="fetch-instances" aria-label="Select fetch public instances") option(value="github") GitHub option(value="codeberg") Codeberg option(value="disable" data-localise="__MSG_disable__") Disable - div(class="some-block option-block") - h4(data-localise="__MSG_excludeFromRedirecting__") Excluded from redirecting + div(class="block block-option") + label(data-localise="__MSG_excludeFromRedirecting__") Excluded from redirecting form(id="custom-exceptions-instance-form") - div(class="some-block option-block") - div(class="some-block" style="padding: 0") + div(class="block block-option") + div(class="block" style="padding: 0") input(id="exceptions-custom-instance" placeholder="https://www.google.com" type="url" aria-label="Add url exception input") | select(id="exceptions-custom-instance-type") @@ -37,13 +37,13 @@ section(class="option-block" id="general_page") div(class="checklist" id="exceptions-custom-checklist") - div(class="buttons buttons-inline") + div(class="buttons") label(class="button button-inline" id="import_settings_text" for="import-settings") svg(xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor") path(d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z") | x(data-localise="__MSG_importSettings__") Import Settings - input(class="button button-inline" id="import-settings" type="file" style="display: none") + input(id="import-settings" type="file" style="display: none") | diff --git a/src/pages/options/widgets/services.pug b/src/pages/options/widgets/services.pug index d2bb5ffd..a93a6902 100644 --- a/src/pages/options/widgets/services.pug +++ b/src/pages/options/widgets/services.pug @@ -1,67 +1,67 @@ each val, service in services - section(class="option-block" id=service+"_page") - div(class="some-block option-block") + section(class="block-option" id=service+"_page") + div(class="block block-option") h1 a(target="_blank" href=services[service].url)=services[service].name hr - div(class="some-block option-block") - h4(data-localise="__MSG_enable__") Enable + div(class="block block-option") + label(data-localise="__MSG_enable__") Enable input(id=`${service}-enabled` type="checkbox" aria-label="Enable checkbox") - div(class="some-block option-block") - h4(data-localise="__MSG_showInPopup__") Show in popup + div(class="block block-option") + label(for=service data-localise="__MSG_showInPopup__") Show in popup input(id=service type="checkbox" aria-label="Show in popup toggle") div(id=service+"-opacity") - div(class="some-block option-block") - h4 + div(class="block block-option") + label(for=`${service}-frontend`) a(class="frontend_name" target="_blank" data-localise="__MSG_frontend__") Frontend - select(id=service+"-frontend" aria-label="Select frontend") + select(id=`${service}-frontend`) each val, frontend in services[service].frontends option(value=frontend)=services[service].frontends[frontend].name - div(class="some-block option-block" id=service+"-instance-div") - h4 Instance Type - select(id=service+"-instance" aria-label="Select Instance type") + div(class="block block-option" id=service+"-instance-div") + label(for=`${service}-instance`) Instance Type + select(id=`${service}-instance`) option(value="localhost") localhost option(value="public") public instances - div(class="some-block option-block") - h4(data-localise="__MSG_redirectType__") Redirect Type - select(id=service+"-redirectType" aria-label="Select redirect type") + div(class="block block-option") + label(for=`${service}-redirectType` data-localise="__MSG_redirectType__") Redirect Type + select(id=`${service}-redirectType`) - - div(id=service+"-embedFrontend-div" class="some-block option-block") - h4(data-localise="__MSG_embedFrontend__") Embed Frontend - select(id=service+"-embedFrontend" aria-label="Select embed frontend") + + div(id=`${service}-embedFrontend-div` class="block block-option") + label(for=`${service}-embedFrontend` data-localise="__MSG_embedFrontend__") Embed Frontend + select(id=`${service}-embedFrontend`) each val, frontend in services[service].frontends if services[service].frontends[frontend].embeddable && services[service].frontends[frontend].instanceList option(value=frontend)=services[service].frontends[frontend].name - div(class="some-block option-block") - h4(data-localise="__MSG_unsupportedIframesHandling__") Unsupported iframes handling - select(id=service+"-unsupportedUrls" aria-label="Select Unsupported iframes handling") + div(class="block block-option") + label(for=`${service}-unsupportedUrls` data-localise="__MSG_unsupportedIframesHandling__") Unsupported iframes handling + select(id=`${service}-unsupportedUrls`) option(value="bypass") bypass option(value="block") block if (service == 'search') - div(class="some-block option-block") - h4 Set LibRedirect as Default Search Engine + div(class="block block-option") + label Set LibRedirect as Default Search Engine. For how to do in chromium browsers, click <a href="https://libredirect.github.io/docs.html#search_engine_chromium">here</a>. each val, frontend in services[service].frontends if services[service].frontends[frontend].instanceList div(id=frontend dir="ltr") hr - div(dir="auto" class="some-block option-block") - h4(data-localise="__MSG_addYourFavoriteInstances__") Add your favorite instances + div(dir="auto" class="block block-option") + label(data-localise="__MSG_addYourFavoriteInstances__") Add your favorite instances form(class="custom-instance-form") - div(class="some-block option-block") + div(class="block block-option") input(class="custom-instance" type="url" placeholder="https://instance.com" aria-label="Add instance input") button(class="add add-instance" type="submit" aria-label="Add the instance") svg(xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor") @@ -69,8 +69,8 @@ each val, service in services div(class="checklist custom-checklist") - div(class="ping some-block") - a(class="button button-inline" id=`ping-${frontend}`) + div(class="ping block") + button(class="button button-inline" id=`ping-${frontend}`) svg(xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor") path(d="M10.45 15.5q.6.6 1.55.587.95-.012 1.4-.687L19 7l-8.4 5.6q-.675.45-.712 1.375-.038.925.562 1.525ZM12 4q1.475 0 2.838.412Q16.2 4.825 17.4 5.65l-1.9 1.2q-.825-.425-1.712-.637Q12.9 6 12 6 8.675 6 6.338 8.337 4 10.675 4 14q0 1.05.287 2.075Q4.575 17.1 5.1 18h13.8q.575-.95.838-1.975Q20 15 20 13.9q0-.9-.212-1.75-.213-.85-.638-1.65l1.2-1.9q.75 1.175 1.188 2.5.437 1.325.462 2.75.025 1.425-.325 2.725-.35 1.3-1.025 2.475-.275.45-.75.7-.475.25-1 .25H5.1q-.525 0-1-.25t-.75-.7q-.65-1.125-1-2.387Q2 15.4 2 14q0-2.075.788-3.888.787-1.812 2.15-3.175Q6.3 5.575 8.125 4.787 9.95 4 12 4Zm.175 7.825Z") | @@ -80,4 +80,4 @@ each val, service in services div(class=network) div(class="checklist") if (network == 'clearnet') - div(class="some-block option-block loading") Loading... \ No newline at end of file + div(class="block block-option loading") Loading... \ No newline at end of file diff --git a/src/pages/popup/popup.pug b/src/pages/popup/popup.pug index d74e1d16..f5ee0618 100644 --- a/src/pages/popup/popup.pug +++ b/src/pages/popup/popup.pug @@ -16,33 +16,33 @@ html(lang="en") hr - div(class="some-block" id="change_instance_div" style="display: none") - a(class="title button prevent" id="change_instance") - h4(data-localise="__MSG_switchInstance__") Switch Instance + div(class="block" id="change_instance_div" style="display: none") + button(class="title button prevent" id="change_instance") + label(data-localise="__MSG_switchInstance__") Switch Instance svg(xmlns="http://www.w3.org/2000/svg" height="26px" width="26px" fill="currentColor") path(d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z") - div(class="some-block" id="copy_original_div" title="Copy the original redirected link" style="display: none") - a(class="title button prevent" id="copy_original") - h4() Copy Original + div(class="block" id="copy_original_div" title="Copy the original redirected link" style="display: none") + button(class="title button prevent" id="copy_original") + label() Copy Origin svg(xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="currentColor") path(d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z") - div(class="some-block" id="redirect_div" style="display: none") - a(class="title button prevent" id="redirect") - h4 Redirect + div(class="block" id="redirect_div" style="display: none") + button(class="title button prevent" id="redirect") + label Redirect svg(xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="currentColor") path(d="M7 20v-9q0-.825.588-1.413Q8.175 9 9 9h8.2l-1.6-1.6L17 6l4 4-4 4-1.4-1.4 1.6-1.6H9v9Z") - div(class="some-block" id="redirect_to_original_div" style="display: none") - a(class="title button prevent" id="redirect_to_original") - h4 Redirect To Original + div(class="block" id="redirect_to_original_div" style="display: none") + button(class="title button prevent" id="redirect_to_original") + label Redirect To Origin svg(xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="currentColor") path(d="M 17,20 V 11 Q 17,10.175 16.412,9.587 15.825,9 15,9 H 6.8 L 8.4,7.4 7,6 3,10 7,14 8.4,12.6 6.8,11 H 15 v 9 z" id="path2") - div(class="some-block") - a(class="title button prevent" id="more-options") - h4(data-localise="__MSG_settings__") Settings + div(class="block") + button(class="title button prevent" id="more-options") + label(data-localise="__MSG_settings__") Settings svg(xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="26px" width="26px" fill="currentColor") path(d="m9.25 22-.4-3.2q-.325-.125-.612-.3-.288-.175-.563-.375L4.7 19.375l-2.75-4.75 2.575-1.95Q4.5 12.5 4.5 12.337v-.675q0-.162.025-.337L1.95 9.375l2.75-4.75 2.975 1.25q.275-.2.575-.375.3-.175.6-.3l.4-3.2h5.5l.4 3.2q.325.125.613.3.287.175.562.375l2.975-1.25 2.75 4.75-2.575 1.95q.025.175.025.337v.675q0 .163-.05.338l2.575 1.95-2.75 4.75-2.95-1.25q-.275.2-.575.375-.3.175-.6.3l-.4 3.2Zm2.8-6.5q1.45 0 2.475-1.025Q15.55 13.45 15.55 12q0-1.45-1.025-2.475Q13.5 8.5 12.05 8.5q-1.475 0-2.488 1.025Q8.55 10.55 8.55 12q0 1.45 1.012 2.475Q10.575 15.5 12.05 15.5Z") diff --git a/src/pages/popup/style.css b/src/pages/popup/style.css index ff96b9ad..82adfded 100644 --- a/src/pages/popup/style.css +++ b/src/pages/popup/style.css @@ -28,42 +28,14 @@ input { width: 46px; } -.button h4 { - font-size: 16px; - max-width: 160px; -} -#instance { - max-width: 110px; - max-height: 22px; - overflow-x: scroll; - white-space: nowrap; - scrollbar-width: none; - -ms-overflow-style: none; -} - -#instance::-webkit-scrollbar { - display: none; -} - -#instance::before { - background-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); - position: absolute; - width: 5px; - height: 22px; - content: ""; - display: block; - pointer-events: none; +div.block label { + margin: 0; + font-size: 18px; + font-weight: bold; + max-width: 160px; } -#end::before { - background-image: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); - position: absolute; - width: 5px; - height: 22px; - content: ""; - display: block; - pointer-events: none; - top: 14px; - left: 156px; -} +div.block label:hover { + cursor: pointer; +} \ No newline at end of file diff --git a/src/pages/popup/switches.pug b/src/pages/popup/switches.pug index 91fbe72e..5037bac2 100644 --- a/src/pages/popup/switches.pug +++ b/src/pages/popup/switches.pug @@ -1,10 +1,10 @@ each _, service in services - div(class=service + " some-block hide") + div(class=`${service} block hide`) a(class="title" href=services[service].url) if services[service].imageType == 'svgMono' img(class='dark' src=`/assets/images/${service}-icon.svg`) img(class='light' src=`/assets/images/${service}-icon-light.svg`) else img(src=`/assets/images/${service}-icon.${services[service].imageType}`) - h4=services[service].name - input(class=service + "-enabled" type="checkbox" aria-label=`${services[service].name} toggle`) \ No newline at end of file + label=services[service].name + input(class=`${service}-enabled` type="checkbox" aria-label=`${services[service].name} toggle`) \ No newline at end of file diff --git a/src/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css index 836a4007..5ae8f71d 100644 --- a/src/pages/stylesheets/styles.css +++ b/src/pages/stylesheets/styles.css @@ -3,10 +3,7 @@ body { --bg-main: #121212; --bg-secondary: #202020; --active: #fbc117; - --space: 5px; --danger: #f04141; - --danger-light: #f9d0d5; - --dark-grey: #767676; --light-grey: #c3c3c3; } @@ -33,12 +30,19 @@ body { color: var(--text); } +body * { + font-family: "Inter"; +} + body.rtl { font-family: "Vazirmatn"; - /* line-height: 1; */ } -div.some-block input[type="checkbox"] { +body.rtl * { + font-family: "Vazirmatn"; +} + +div.block input[type="checkbox"] { appearance: none; -moz-appearance: none; -webkit-appearance: none; @@ -100,7 +104,6 @@ input[type="text"] { input:invalid { color: var(--danger); - border-color: var(--danger); } .button svg { @@ -108,12 +111,12 @@ input:invalid { width: 18px; } -section.option-block { +section.block-option { width: 750px; margin: 0 50px; } -section.option-block h2 { +section.block-option h2 { margin: 0; } @@ -128,7 +131,7 @@ section.links { flex-wrap: wrap; flex-direction: column; width: 300px; - max-height: 880px; + max-height: 800px; } section.links div { @@ -169,9 +172,6 @@ section.links .selected a { opacity: 0.7; } - -/* \25BE */ - hr { height: 2px; margin: 0 15px; @@ -179,7 +179,7 @@ hr { border: none; } -div.some-block { +div.block { padding: 0 15px; justify-content: space-between; display: flex; @@ -188,37 +188,28 @@ div.some-block { margin-bottom: 10px; } -div.option-block { +div.block-option { margin: 30px 0; } -h4 { - margin: 10px 0; - font-size: 18px; -} - -div.some-block h4 { - margin: 0; -} - -div.option-block h4 { +div.block-option label { margin-right: 5px; width: 80%; min-width: 150px; font-size: 18px; } -div.option-block h1 { +div.block-option h1 { margin: 0; font-size: 28px; color: var(--text); } -div.option-block div { +div.block-option div { text-align: center; } -div.some-block input[type="checkbox"] { +div.block input[type="checkbox"] { width: 46px; height: 24px; background-color: var(--light-grey); @@ -227,11 +218,11 @@ div.some-block input[type="checkbox"] { cursor: pointer; } -div.some-block input[type="checkbox"]:checked { +div.block input[type="checkbox"]:checked { background-color: var(--active); } -div.some-block input[type="checkbox"]::before { +div.block input[type="checkbox"]::before { content: ""; display: inline-block; width: 18px; @@ -245,16 +236,16 @@ div.some-block input[type="checkbox"]::before { transition: 0.3s; } -body.rtl div.some-block input[type="checkbox"]::before { +body.rtl div.block input[type="checkbox"]::before { left: auto; right: 4px; } -div.some-block input[type="checkbox"]:checked::before { +div.block input[type="checkbox"]:checked::before { left: 24px; } -body.rtl div.some-block input[type="checkbox"]:checked::before { +body.rtl div.block input[type="checkbox"]:checked::before { left: auto; right: 24px; } @@ -266,15 +257,7 @@ div.buttons { margin-top: 15px; flex-wrap: wrap; align-items: center; -} - -div.buttons-popup { - border-radius: 5px; - display: flex; - flex-wrap: wrap; - margin: 0 10px 7px 10px; justify-content: start; - align-items: center; } .button { @@ -301,12 +284,6 @@ div.buttons-popup { color: var(--active); } -div.buttons-inline { - display: flex; - justify-content: start; - /* padding: 0 15px; */ -} - .button-inline { display: inline-flex; align-items: center; @@ -320,22 +297,6 @@ div.buttons-inline { transform: translateY(1px); } -button.default { - margin-left: 30px; - background-color: transparent; - border: none; - color: white; - padding: 5px; - width: 34px; - height: 34px; - text-align: center; - text-decoration: none; - display: inline-block; - font-size: 16px; - margin: 4px 2px; - cursor: pointer; -} - button svg { color: var(--text); } @@ -357,19 +318,6 @@ div.checklist a:hover { text-decoration: underline; } -div.checklist-popup div { - justify-content: space-between; - margin: 5px 15px; - padding: 5px 0; - max-width: 200px; - display: flex; - align-items: center; -} - -div.checklist-popup div div { - margin: 0; -} - div.custom-checklist x a { color: var(--active); } @@ -384,20 +332,6 @@ button.add { cursor: pointer; } -div.disabled { - background-color: rgb(39, 39, 39); - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - -.light-theme.popup, -.light-theme .popup { - background-color: var(--bg-secondary); -} - body.light-theme { --text: black; --bg-main: white; @@ -409,15 +343,6 @@ body.light-theme select { border: 1px solid black; } -body.light-theme textarea { - color: black; - border: 1px solid #767676; -} - -body.light-theme textarea:focus { - outline: none; -} - body.light-theme a { color: black; } @@ -426,27 +351,10 @@ body.light-theme a:hover { color: var(--active) } -section.general { - display: flex; - flex-wrap: wrap; - margin-right: 0; - width: 100%; - justify-content: space-between; -} - -section.general div { - margin-right: 20px; -} - -#customize-popup { - width: 250px; -} - button { background-color: transparent; color: var(--text); border: none; - padding: 10px 5px; text-decoration: none; display: inline-block; cursor: pointer; @@ -457,15 +365,6 @@ body div section { display: none; } -div.about>div { - justify-content: start; - width: 520px; -} - -div.about h4 { - width: auto; -} - select:disabled { opacity: 0.6; cursor: not-allowed; @@ -476,10 +375,6 @@ input:disabled { cursor: not-allowed; } -div.about a { - width: 500px; - display: inline-block; -} @media (max-width: 1250px) { body.option { |