aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--src/pages/options/index.js6
-rw-r--r--src/pages/options/widgets/general.pug24
-rw-r--r--src/pages/options/widgets/services.pug60
-rw-r--r--src/pages/popup/popup.pug30
-rw-r--r--src/pages/popup/style.css44
-rw-r--r--src/pages/popup/switches.pug6
-rw-r--r--src/pages/stylesheets/styles.css151
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")
|&nbsp;
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")
|&nbsp;
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")
|&nbsp;&nbsp;
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")
|&nbsp;
@@ -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 {
generated by cgit v1.3.1 (git 2.54.0) at 2026-06-05 20:33:44 +0000