diff options
Diffstat (limited to '')
| -rw-r--r-- | src/assets/images/instance-icon.svg | 3 | ||||
| -rw-r--r-- | src/assets/javascripts/services.js | 4 | ||||
| -rw-r--r-- | src/assets/javascripts/utils.js | 17 | ||||
| -rw-r--r-- | src/config/config.json | 192 | ||||
| -rw-r--r-- | src/pages/background/background.js | 1 | ||||
| -rw-r--r-- | src/pages/popup/popup.ejs | 6 | ||||
| -rw-r--r-- | src/pages/popup/popup.html | 12 | ||||
| -rw-r--r-- | src/pages/popup/popup.js | 31 | ||||
| -rw-r--r-- | src/pages/popup/style.css | 40 |
9 files changed, 252 insertions, 54 deletions
diff --git a/src/assets/images/instance-icon.svg b/src/assets/images/instance-icon.svg new file mode 100644 index 00000000..6b034c6f --- /dev/null +++ b/src/assets/images/instance-icon.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="26px" viewBox="0 0 24 24" width="26px" fill="currentColor"> + <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"></path> +</svg> diff --git a/src/assets/javascripts/services.js b/src/assets/javascripts/services.js index 80a1ac45..806624d7 100644 --- a/src/assets/javascripts/services.js +++ b/src/assets/javascripts/services.js @@ -422,7 +422,7 @@ function computeService(url, returnFrontend) { } else {
for (const frontend in config.services[service].frontends) {
if (all(service, frontend, options, config, redirects).includes(utils.protocolHost(url))) {
- if (returnFrontend) resolve([service, frontend, url.hostname])
+ if (returnFrontend) resolve([service, frontend, utils.protocolHost(url)])
else resolve(service)
return
}
@@ -520,7 +520,7 @@ function unifyPreferences(url, tabId) { const frontendObject = config.services[service].frontends[frontend]
if ("cookies" in frontendObject.preferences) {
for (const cookie of frontendObject.preferences.cookies) {
- utils.copyCookie(frontendObject, url, instancesList, cookie)
+ await utils.copyCookie(frontendObject, url, instancesList, cookie)
}
}
if ("localstorage" in frontendObject.preferences) {
diff --git a/src/assets/javascripts/utils.js b/src/assets/javascripts/utils.js index 9ae9123f..62041690 100644 --- a/src/assets/javascripts/utils.js +++ b/src/assets/javascripts/utils.js @@ -424,17 +424,20 @@ function latency(service, frontend, document, location) { latencyElement.addEventListener("click", async () => { let reloadWindow = () => location.reload() latencyElement.addEventListener("click", reloadWindow) - browser.storage.local.get(["redirects", "latency"], r => { + browser.storage.local.get("redirects", r => { let redirects = r.redirects - let latency = r.latency const oldHtml = latencyLabel.innerHTML latencyLabel.innerHTML = "..." testLatency(latencyLabel, redirects[frontend].clearnet, frontend).then(r => { - latency[frontend] = r - browser.storage.local.set({ latency }) - latencyLabel.innerHTML = oldHtml - processDefaultCustomInstances(service, frontend, "clearnet", document) - latencyElement.removeEventListener("click", reloadWindow) + const frontendLatency = r + browser.storage.local.get("latency", r => { + let latency = r.latency + latency[frontend] = frontendLatency + browser.storage.local.set({ latency }) + latencyLabel.innerHTML = oldHtml + processDefaultCustomInstances(service, frontend, "clearnet", document) + latencyElement.removeEventListener("click", reloadWindow) + }) }) }) }) diff --git a/src/config/config.json b/src/config/config.json index ff4a869f..8110748f 100644 --- a/src/config/config.json +++ b/src/config/config.json @@ -22,8 +22,12 @@ "frontends": {
"invidious": {
"preferences": {
- "cookies": ["PREFS"],
- "localstorage": ["dark_mode"]
+ "cookies": [
+ "PREFS"
+ ],
+ "localstorage": [
+ "dark_mode"
+ ]
},
"name": "Invidious",
"embeddable": true,
@@ -59,7 +63,9 @@ },
"pipedMaterial": {
"preferences": {
- "localstorage": ["PREFERENCES"]
+ "localstorage": [
+ "PREFERENCES"
+ ]
},
"name": "Piped-Material",
"embeddable": false,
@@ -109,7 +115,9 @@ "frontends": {
"beatbump": {
"preferences": {
- "localstorage": ["settings"],
+ "localstorage": [
+ "settings"
+ ],
"indexeddb": "beatbump"
},
"name": "Beatbump",
@@ -117,14 +125,26 @@ },
"hyperpipe": {
"preferences": {
- "localstorage": ["api", "authapi", "codec", "locale", "next", "pipedapi", "quality", "theme", "vol"],
+ "localstorage": [
+ "api",
+ "authapi",
+ "codec",
+ "locale",
+ "next",
+ "pipedapi",
+ "quality",
+ "theme",
+ "vol"
+ ],
"indexeddb": "hyperpipedb"
},
"name": "HyperPipe",
"instanceList": true
}
},
- "targets": ["^https?:\\/{2}music\\.youtube\\.com(\\/.*|$)"],
+ "targets": [
+ "^https?:\\/{2}music\\.youtube\\.com(\\/.*|$)"
+ ],
"name": "YT Music",
"options": {
"enabled": true,
@@ -139,24 +159,23 @@ "nitter": {
"preferences": {
"cookies": [
- "theme",
- "infiniteScroll",
- "stickyProfile",
+ "autoplayGifs",
"bidiSupport",
- "hideTweetStats",
"hideBanner",
"hidePins",
"hideReplies",
- "squareAvatars",
- "mp4Playback",
+ "hideTweetStats",
"hlsPlayback",
- "proxyVideos",
+ "infiniteScroll",
+ "mp4Playback",
"muteVideos",
- "autoplayGifs",
+ "proxyVideos",
"replaceInstagram",
"replaceReddit",
"replaceTwitter",
- "replaceYouTube"
+ "replaceYouTube",
+ "squareAvatars",
+ "theme"
]
},
"name": "Nitter",
@@ -164,7 +183,12 @@ "instanceList": true
}
},
- "targets": ["^https?:\\/{2}(www\\.|mobile\\.|)twitter\\.com", "^https?:\\/{2}(pbs\\.|video\\.|)twimg\\.com", "^https?:\\/{2}platform\\.twitter\\.com/embed", "^https?:\\/{2}t\\.co"],
+ "targets": [
+ "^https?:\\/{2}(www\\.|mobile\\.|)twitter\\.com",
+ "^https?:\\/{2}(pbs\\.|video\\.|)twimg\\.com",
+ "^https?:\\/{2}platform\\.twitter\\.com/embed",
+ "^https?:\\/{2}t\\.co"
+ ],
"name": "Twitter",
"options": {
"enabled": true,
@@ -186,7 +210,9 @@ "instanceList": true
}
},
- "targets": ["^https?:\\/{2}(www\\.)?instagram\\.com\\/p\\/"],
+ "targets": [
+ "^https?:\\/{2}(www\\.)?instagram\\.com\\/p\\/"
+ ],
"name": "Instagram",
"options": {
"enabled": true
@@ -199,13 +225,18 @@ "frontends": {
"proxiTok": {
"preferences": {
- "cookies": ["api-test_endpoints", "theme"]
+ "cookies": [
+ "api-test_endpoints",
+ "theme"
+ ]
},
"name": "ProxiTok",
"instanceList": true
}
},
- "targets": ["^https?:\\/{2}(www\\.|)tiktok\\.com.*"],
+ "targets": [
+ "^https?:\\/{2}(www\\.|)tiktok\\.com.*"
+ ],
"name": "TikTok",
"options": {
"enabled": true
@@ -218,7 +249,20 @@ "frontends": {
"libreddit": {
"preferences": {
- "cookies": ["theme", "front_page", "layout", "wide", "post_sort", "comment_sort", "show_nsfw", "autoplay_videos", "use_hls", "hide_hls_notification", "subscriptions", "filters"]
+ "cookies": [
+ "theme",
+ "front_page",
+ "layout",
+ "wide",
+ "post_sort",
+ "comment_sort",
+ "show_nsfw",
+ "autoplay_videos",
+ "use_hls",
+ "hide_hls_notification",
+ "subscriptions",
+ "filters"
+ ]
},
"name": "Libreddit",
"instanceList": true
@@ -248,7 +292,10 @@ "instanceList": true
}
},
- "targets": ["^https?:\\/{2}(www\\.|old\\.|np\\.|new\\.|amp\\.|)reddit\\.com", "^https?:\\/{2}(i\\.|preview\\.)redd\\.it"],
+ "targets": [
+ "^https?:\\/{2}(www\\.|old\\.|np\\.|new\\.|amp\\.|)reddit\\.com",
+ "^https?:\\/{2}(i\\.|preview\\.)redd\\.it"
+ ],
"name": "Reddit",
"options": {
"enabled": true,
@@ -266,7 +313,9 @@ "instanceList": true
}
},
- "targets": ["^https?:\\/{2}([im]\\.)?(stack\\.)?imgur\\.(com|io)(\\/|$)"],
+ "targets": [
+ "^https?:\\/{2}([im]\\.)?(stack\\.)?imgur\\.(com|io)(\\/|$)"
+ ],
"name": "Imgur",
"options": {
"enabled": true,
@@ -280,13 +329,18 @@ "frontends": {
"wikiless": {
"preferences": {
- "cookies": ["theme", "default_lang"]
+ "cookies": [
+ "theme",
+ "default_lang"
+ ]
},
"name": "Wikiless",
"instanceList": true
}
},
- "targets": ["^https?:\\/{2}(?:[a-z]+\\.)*wikipedia\\.org"],
+ "targets": [
+ "^https?:\\/{2}(?:[a-z]+\\.)*wikipedia\\.org"
+ ],
"name": "Wikipedia",
"options": {
"enabled": false
@@ -334,13 +388,17 @@ "frontends": {
"quetre": {
"preferences": {
- "localstorage": ["theme"]
+ "localstorage": [
+ "theme"
+ ]
},
"name": "Quetre",
"instanceList": true
}
},
- "targets": ["^https?:\\/{2}([a-z]+\\.)*quora\\.com.*"],
+ "targets": [
+ "^https?:\\/{2}([a-z]+\\.)*quora\\.com.*"
+ ],
"name": "Quora",
"options": {
"enabled": true
@@ -353,13 +411,17 @@ "frontends": {
"libremdb": {
"preferences": {
- "localstorage": ["theme"]
+ "localstorage": [
+ "theme"
+ ]
},
"name": "libremdb",
"instanceList": true
}
},
- "targets": ["^https?:\\/{2}(?:www\\.|)imdb\\.com\\/title"],
+ "targets": [
+ "^https?:\\/{2}(?:www\\.|)imdb\\.com\\/title"
+ ],
"name": "IMDb",
"options": {
"enabled": true
@@ -375,7 +437,9 @@ "instanceList": true
}
},
- "targets": ["^https?:\\/{2}(www\\.|)reuters\\.com.*"],
+ "targets": [
+ "^https?:\\/{2}(www\\.|)reuters\\.com.*"
+ ],
"name": "Reuters",
"options": {
"enabled": false
@@ -391,7 +455,9 @@ "instanceList": true
}
},
- "targets": ["^https?:\\/{2}(?:[a-zA-Z0-9]+\\.)?fandom\\.com(?=(?:\\/wiki)|(?:\\/?$))"],
+ "targets": [
+ "^https?:\\/{2}(?:[a-zA-Z0-9]+\\.)?fandom\\.com(?=(?:\\/wiki)|(?:\\/?$))"
+ ],
"name": "Fandom",
"options": {
"enabled": true
@@ -420,8 +486,18 @@ "frontends": {
"librarian": {
"preferences": {
- "cookies": ["nsfw", "theme"],
- "localstorage": ["autoplay", "autoplayNextVid", "collapseComments", "plyr", "sb_categories", "showRelated"]
+ "cookies": [
+ "nsfw",
+ "theme"
+ ],
+ "localstorage": [
+ "autoplay",
+ "autoplayNextVid",
+ "collapseComments",
+ "plyr",
+ "sb_categories",
+ "showRelated"
+ ]
},
"name": "Librarian",
"embeddable": true,
@@ -433,7 +509,10 @@ "instanceList": false
}
},
- "targets": ["^https?:\\/{2}odysee\\.com", "^https?:\\/{2}lbry\\.tv"],
+ "targets": [
+ "^https?:\\/{2}odysee\\.com",
+ "^https?:\\/{2}lbry\\.tv"
+ ],
"name": "LBRY",
"options": {
"enabled": true,
@@ -506,13 +585,26 @@ },
"librex": {
"preferences": {
- "cookies": ["bibliogram", "disable_frontends", " disable_special", "invidious", "libreddit", "nitter", "proxitok", "save", "theme", "wikiless"]
+ "cookies": [
+ "bibliogram",
+ "disable_frontends",
+ " disable_special",
+ "invidious",
+ "libreddit",
+ "nitter",
+ "proxitok",
+ "save",
+ "theme",
+ "wikiless"
+ ]
},
"name": "LibreX",
"instanceList": true
}
},
- "targets": ["^https?:\\/{2}search\\.libredirect\\.invalid"],
+ "targets": [
+ "^https?:\\/{2}search\\.libredirect\\.invalid"
+ ],
"name": "Search",
"options": {
"enabled": true,
@@ -526,14 +618,24 @@ "frontends": {
"simplyTranslate": {
"preferences": {
- "cookies": ["from_lang", "to_lang", "tts_enabled", "use_text_fields"]
+ "cookies": [
+ "from_lang",
+ "to_lang",
+ "tts_enabled",
+ "use_text_fields"
+ ]
},
"name": "SimplyTranslate",
"instanceList": true
},
"lingva": {
"preferences": {
- "localstorage": ["isauto", "source", "target", "chakra-ui-color-mode"]
+ "localstorage": [
+ "isauto",
+ "source",
+ "target",
+ "chakra-ui-color-mode"
+ ]
},
"name": "Lingva Translate",
"instanceList": true
@@ -543,7 +645,10 @@ "instanceList": true
}
},
- "targets": ["^https?:\\/{2}translate\\.google(\\.[a-z]{2,3}){1,2}\\/", "^https?:\\/{2}translate\\.libredirect\\.invalid"],
+ "targets": [
+ "^https?:\\/{2}translate\\.google(\\.[a-z]{2,3}){1,2}\\/",
+ "^https?:\\/{2}translate\\.libredirect\\.invalid"
+ ],
"name": "Translate",
"options": {
"enabled": true,
@@ -565,7 +670,10 @@ "singleInstance": "https://www.openstreetmap.org"
}
},
- "targets": ["^https?:\\/{2}maps\\.libredirect\\.invalid", "^https?:\\/{2}(((www|maps)\\.)?(google\\.).*(\\/maps)|maps\\.(google\\.).*)"],
+ "targets": [
+ "^https?:\\/{2}maps\\.libredirect\\.invalid",
+ "^https?:\\/{2}(((www|maps)\\.)?(google\\.).*(\\/maps)|maps\\.(google\\.).*)"
+ ],
"name": "Maps",
"options": {
"enabled": true,
@@ -582,7 +690,11 @@ "instanceList": "true"
}
},
- "targets": ["^https?:\\/{2}send\\.libredirect\\.invalid", "^https?:\\/{2}send\\.firefox\\.com\\/?$", "^https?:\\/{2}sendfiles\\.online\\/?$"],
+ "targets": [
+ "^https?:\\/{2}send\\.libredirect\\.invalid",
+ "^https?:\\/{2}send\\.firefox\\.com\\/?$",
+ "^https?:\\/{2}sendfiles\\.online\\/?$"
+ ],
"name": "Send Files",
"options": {
"enabled": true
diff --git a/src/pages/background/background.js b/src/pages/background/background.js index d252e580..dd8f1715 100644 --- a/src/pages/background/background.js +++ b/src/pages/background/background.js @@ -232,7 +232,6 @@ browser.contextMenus.onClicked.addListener((info, tab) => { } } case "redirectLink": - console.log(info.linkUrl) const tmpUrl = new URL(info.linkUrl) const newUrl = servicesHelper.redirect(tmpUrl, "main_frame", null, true) if (newUrl) browser.tabs.create({ url: newUrl }) diff --git a/src/pages/popup/popup.ejs b/src/pages/popup/popup.ejs index e862e0cb..e6cc6fca 100644 --- a/src/pages/popup/popup.ejs +++ b/src/pages/popup/popup.ejs @@ -8,6 +8,12 @@ </head> <body dir="auto"> <div class="current_site"> + <div class="some-block" id="instance-div"><a class="title prevent"> + <%- include('src/assets/images/instance-icon.svg', {services: services}) -%> + <h4 id="instance"></h4> + </a> + <span id="end"><input type="checkbox" id="instance-enabled"/></span> + </div> <%- include('src/pages/widgets/switches', {services: services}) -%> <div id="current_site_divider"> <hr> diff --git a/src/pages/popup/popup.html b/src/pages/popup/popup.html index 2dcc12bc..6dc48478 100644 --- a/src/pages/popup/popup.html +++ b/src/pages/popup/popup.html @@ -8,6 +8,14 @@ </head> <body dir="auto"> <div class="current_site"> + <div class="some-block" id="instance-div"><a class="title prevent"> + <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="26px" viewBox="0 0 24 24" width="26px" fill="currentColor"> + <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"></path> +</svg> + <h4 id="instance"></h4> + </a> + <span id="end"><input type="checkbox" id="instance-enabled"/></span> + </div> <div class="youtube some-block"><a class="title" href="https://youtube.com"> <img src="../../assets/images/youtube-icon.png"/> <h4 data-localise="__MSG_youtube__">Youtube</h4></a> @@ -78,7 +86,7 @@ <h4 data-localise="__MSG_fandom__">Fandom</h4></a> <input class="fandom-enabled" type="checkbox"/> </div> -<div class="peertube some-block"><a class="title" href="https://search.joinpeertube.org"> +<div class="peertube some-block"><a class="title" href="https://joinpeertube.org"> <img src="../../assets/images/peertube-icon.svg"/> <h4 data-localise="__MSG_peertube__">PeerTube</h4></a> <input class="peertube-enabled" type="checkbox"/> @@ -196,7 +204,7 @@ <h4 data-localise="__MSG_fandom__">Fandom</h4></a> <input class="fandom-enabled" type="checkbox"/> </div> -<div class="peertube some-block"><a class="title" href="https://search.joinpeertube.org"> +<div class="peertube some-block"><a class="title" href="https://joinpeertube.org"> <img src="../../assets/images/peertube-icon.svg"/> <h4 data-localise="__MSG_peertube__">PeerTube</h4></a> <input class="peertube-enabled" type="checkbox"/> diff --git a/src/pages/popup/popup.js b/src/pages/popup/popup.js index a4b73093..78e50004 100644 --- a/src/pages/popup/popup.js +++ b/src/pages/popup/popup.js @@ -2,7 +2,6 @@ window.browser = window.browser || window.chrome import utils from "../../assets/javascripts/utils.js" -// import generalHelper from "../../assets/javascripts/general.js" import serviceHelper from "../../assets/javascripts/services.js" let config, @@ -40,6 +39,7 @@ const currSite = document.getElementsByClassName("current_site")[0] function setDivs() { return new Promise(resolve => { + divs.instance = document.getElementById("instance") for (const service in config.services) { divs[service] = {} divs[service].toggle = {} @@ -56,8 +56,9 @@ await setDivs() const currentSiteIsFrontend = document.getElementById("current_site_divider") -browser.storage.local.get("options", r => { +browser.storage.local.get(["options", "redirects"], r => { browser.tabs.query({ active: true, currentWindow: true }, async tabs => { + document.getElementById("instance-div").classList.add("hide") for (const service in config.services) { if (!r.options.popupServices.includes(service)) allSites.getElementsByClassName(service)[0].classList.add("hide") else allSites.getElementsByClassName(service)[0].classList.remove("hide") @@ -80,10 +81,36 @@ browser.storage.local.get("options", r => { let service = await serviceHelper.computeService(url, true) let frontend + let instance if (service) { if (typeof service != "string") { + instance = service[2] frontend = service[1] service = service[0] + divs.instance.innerHTML = instance.replace(/https?:\/{2}/, "") + let tmp + let instanceNetwork + for (const network in config.networks) { + tmp = r.redirects[frontend][network].indexOf(instance) + if (tmp > -1) { + const instanceDiv = document.getElementById("instance-enabled") + tmp = r.options[frontend][network].enabled.indexOf(instance) + if (tmp > -1) instanceDiv.checked = true + else instanceDiv.checked = false + instanceNetwork = network + instanceDiv.addEventListener("change", () => { + browser.storage.local.get("options", r => { + // Although options would be avaliable in this context, it is fetched again to make sure it is up to date + let options = r.options + if (instanceDiv.checked) options[frontend][instanceNetwork].enabled.push(instance) + else options[frontend][instanceNetwork].enabled.splice(options[frontend][instanceNetwork].enabled.indexOf(instance), 1) + browser.storage.local.set({ options }) + }) + }) + break + } + } + document.getElementById("instance-div").classList.remove("hide") } divs[service].current.classList.remove("hide") divs[service].all.classList.add("hide") diff --git a/src/pages/popup/style.css b/src/pages/popup/style.css index 0cb27912..3b409be8 100644 --- a/src/pages/popup/style.css +++ b/src/pages/popup/style.css @@ -22,3 +22,43 @@ body { .space { height: 10px; } + +input { + height: 23px; + width: 46px; +} + +#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; +} + +#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: 13px; + left: 157.4px; +} |
