├── .gitignore ├── README.md ├── build.js ├── build.sh ├── eslint.config.mjs ├── license.txt ├── package.json └── src ├── _locales ├── ar │ └── messages.json ├── bg │ └── messages.json ├── ca │ └── messages.json ├── cs │ └── messages.json ├── da │ └── messages.json ├── de │ └── messages.json ├── el │ └── messages.json ├── en │ └── messages.json ├── en_US │ └── messages.json ├── es │ └── messages.json ├── et │ └── messages.json ├── fa │ └── messages.json ├── fi │ └── messages.json ├── fr │ └── messages.json ├── he │ └── messages.json ├── hr │ └── messages.json ├── hu │ └── messages.json ├── id │ └── messages.json ├── it │ └── messages.json ├── ja │ └── messages.json ├── ko │ └── messages.json ├── lt │ └── messages.json ├── lv │ └── messages.json ├── nl │ └── messages.json ├── no │ └── messages.json ├── pl │ └── messages.json ├── pt_BR │ └── messages.json ├── pt_PT │ └── messages.json ├── ro │ └── messages.json ├── ru │ └── messages.json ├── sk │ └── messages.json ├── sl │ └── messages.json ├── sr │ └── messages.json ├── sv │ └── messages.json ├── th │ └── messages.json ├── tr │ └── messages.json ├── uk │ └── messages.json ├── vi │ └── messages.json ├── zh_CN │ └── messages.json └── zh_TW │ └── messages.json ├── html ├── intro.html ├── newtab.html ├── settings.html ├── sidepanel.html └── template │ ├── dialog.html │ ├── indicator.html │ └── sidebar.html ├── img ├── icon-add.svg ├── icon-arrow-sketch.svg ├── icon-arrow-up.svg ├── icon-bookmark.svg ├── icon-broken.svg ├── icon-check.svg ├── icon-checkbox-inactive.svg ├── icon-checkbox.svg ├── icon-close.svg ├── icon-copy.svg ├── icon-currentTab.svg ├── icon-delete.svg ├── icon-demo.svg ├── icon-dir-1.svg ├── icon-dir-2.svg ├── icon-dir-3.svg ├── icon-duplicate.svg ├── icon-edit.svg ├── icon-experimental.svg ├── icon-hide.svg ├── icon-history.svg ├── icon-incognito.svg ├── icon-info.svg ├── icon-keyboard.svg ├── icon-lock.svg ├── icon-menu.svg ├── icon-newTab.svg ├── icon-newWindow.svg ├── icon-pin.svg ├── icon-premium.svg ├── icon-radio-inactive.svg ├── icon-radio.svg ├── icon-reorder.svg ├── icon-search.svg ├── icon-select.svg ├── icon-separator.svg ├── icon-settings.svg ├── icon-show.svg ├── icon-showInDir.svg ├── icon-sort.svg ├── icon-speech.svg ├── icon-star.svg ├── icon-unlock.svg ├── icon-unpin.svg ├── icon-update-2.svg ├── icon-update.svg ├── icon-web.svg ├── icon │ ├── 128x128.png │ ├── 256x256.png │ ├── 48x48.png │ ├── dev │ │ ├── 128x128.png │ │ ├── 256x256.png │ │ └── 48x48.png │ └── icon.png ├── onboarding │ └── icon-cursor.svg └── settings │ ├── alpha.svg │ ├── icon-appearance.svg │ ├── icon-dark.svg │ ├── icon-dashboard.svg │ ├── icon-feedback.svg │ ├── icon-github.svg │ ├── icon-heart.svg │ ├── icon-help.svg │ ├── icon-importExport.svg │ ├── icon-light.svg │ ├── icon-newtab.svg │ ├── icon-privacy.svg │ ├── icon-quote.svg │ ├── icon-screenshot.svg │ ├── icon-support.svg │ ├── icon-theme.svg │ ├── icon-translate.svg │ ├── mockup-left.png │ ├── mockup-middle.png │ ├── mockup-right.png │ └── support.svg ├── js ├── background-prepare.js ├── background.js ├── background │ ├── analytics.js │ ├── bookmarks.js │ ├── browserAction.js │ ├── cache.js │ ├── icon.js │ ├── language.js │ ├── linkchecker.js │ ├── main.js │ ├── message.js │ ├── model.js │ ├── newtab.js │ ├── upgrade.js │ ├── utility.js │ └── viewAmount.js ├── extension.js ├── helper │ ├── bookmark.js │ ├── checkbox.js │ ├── contextmenu.js │ ├── dragndrop.js │ ├── entry.js │ ├── font.js │ ├── i18n.js │ ├── keyboard.js │ ├── linkchecker.js │ ├── list.js │ ├── model.js │ ├── overlay.js │ ├── scroll.js │ ├── search.js │ ├── selection.js │ ├── sidebarEvents.js │ ├── stylesheet.js │ ├── template.js │ ├── toggle.js │ ├── tooltip.js │ └── utility.js ├── lib │ ├── README.md │ ├── colorpicker.js │ └── jsu.js ├── newtab-preflight.js ├── newtab.js ├── newtab │ ├── edit.js │ ├── fallback.js │ ├── gridLinks.js │ ├── overlay.js │ ├── search.js │ └── topLinks.js ├── onboarding.js ├── opts.js ├── settings.js ├── settings │ ├── appearance.js │ ├── dashboard.js │ ├── expert.js │ ├── form.js │ ├── importExport.js │ ├── infos.js │ ├── menu.js │ ├── newtab.js │ ├── premium.js │ ├── sidebar.js │ ├── support.js │ └── translation.js ├── sidepanel.js └── webcomponents-bundle.js ├── manifest.chrome.json ├── manifest.firefox.json ├── res ├── 1280x640.png ├── 1400x560.png ├── 440x280.png ├── 920x680.png ├── screenshot_0.png ├── screenshot_1.png ├── screenshot_2.png ├── screenshot_3.png └── screenshot_4.png └── scss ├── content.scss ├── contentBase.scss ├── dark ├── _newtab.scss ├── _overlay.scss ├── _sidebar.scss └── include │ ├── _bookmarkEntry.scss │ ├── _checkbox.scss │ ├── _contextmenu.scss │ ├── _linkchecker.scss │ ├── _loading.scss │ ├── _scrollBox.scss │ ├── _tooltip.scss │ └── newtab │ ├── _edit.scss │ ├── _fallback.scss │ ├── _gridLinks.scss │ ├── _overlay.scss │ ├── _search.scss │ └── _topLinks.scss ├── highContrast ├── _overlay.scss ├── _sidebar.scss └── include │ ├── _checkbox.scss │ ├── _contextmenu.scss │ ├── _linkchecker.scss │ ├── _loading.scss │ └── newtab │ ├── _fallback.scss │ └── _overlay.scss ├── include ├── _bookmarkEntry.scss ├── _checkbox.scss ├── _contextmenu.scss ├── _generals.scss ├── _linkchecker.scss ├── _loading.scss ├── _mixins.scss ├── _scrollBox.scss ├── _settingsMixins.scss ├── _tooltip.scss ├── _vars.scss ├── newtab │ ├── _edit.scss │ ├── _fallback.scss │ ├── _gridLinks.scss │ ├── _overlay.scss │ ├── _search.scss │ └── _topLinks.scss └── settings │ ├── _advanced.scss │ ├── _appearance.scss │ ├── _colorpicker.scss │ ├── _content.scss │ ├── _dashboard.scss │ ├── _expert.scss │ ├── _form.scss │ ├── _header.scss │ ├── _importExport.scss │ ├── _infos.scss │ ├── _menu.scss │ ├── _newtab.scss │ ├── _premium.scss │ ├── _sidebar.scss │ ├── _support.scss │ ├── _tooltip.scss │ └── _translation.scss ├── newtab.scss ├── onboarding.scss ├── overlay.scss ├── rtl ├── _onboarding.scss ├── _overlay.scss ├── _settings.scss ├── _sidebar.scss └── include │ ├── _bookmarkEntry.scss │ ├── _checkbox.scss │ ├── _contextmenu.scss │ ├── _linkchecker.scss │ ├── newtab │ ├── _edit.scss │ ├── _fallback.scss │ ├── _gridLinks.scss │ ├── _overlay.scss │ ├── _search.scss │ └── _topLinks.scss │ └── settings │ ├── _advanced.scss │ ├── _appearance.scss │ ├── _colorpicker.scss │ ├── _content.scss │ ├── _dashboard.scss │ ├── _expert.scss │ ├── _form.scss │ ├── _header.scss │ ├── _importExport.scss │ ├── _infos.scss │ ├── _menu.scss │ ├── _newtab.scss │ ├── _premium.scss │ ├── _sidebar.scss │ ├── _support.scss │ └── _translation.scss ├── settings.scss ├── sidebar.scss └── themes ├── focus ├── content.scss ├── dark │ ├── _overlay.scss │ └── _sidebar.scss ├── overlay.scss ├── rtl │ └── _sidebar.scss └── sidebar.scss └── glass ├── content.scss ├── dark ├── _overlay.scss └── _sidebar.scss ├── overlay.scss ├── rtl ├── _overlay.scss └── _sidebar.scss └── sidebar.scss /.gitignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | dist/ 3 | node_modules/ 4 | package-lock.json 5 | .DS_Store 6 | *.zip -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Bookmark Sidebar 2 | 3 | [![GitHub release](https://img.shields.io/badge/dynamic/json?label=Version&color=6494f4&cacheSeconds=86400&query=%24.version&url=https%3A%2F%2Fextensions.redeviation.com%2Fajax%2Finfo%2Fbs)](https://github.com/Kiuryy/Bookmark_Sidebar/releases) 4 | [![Chrome Web Store](https://img.shields.io/badge/dynamic/json?label=Users&color=ff8aaf&cacheSeconds=86400&query=%24.users&url=https%3A%2F%2Fextensions.redeviation.com%2Fajax%2Finfo%2Fbs)](https://chrome.google.com/webstore/detail/bookmark-sidebar/jdbnofccmhefkmjbkkdkfiicjkgofkdh) 5 | [![Chrome Web Store](https://img.shields.io/badge/dynamic/json?label=Rating&color=37d102&cacheSeconds=86400&query=%24.rating_avg&url=https%3A%2F%2Fextensions.redeviation.com%2Fajax%2Finfo%2Fbs)](https://chrome.google.com/webstore/detail/bookmark-sidebar/jdbnofccmhefkmjbkkdkfiicjkgofkdh) 6 | [![License: MS-RSL](https://img.shields.io/badge/License-MS--RSL-lightgray.svg)](https://referencesource.microsoft.com/license.html) 7 | 8 | --- 9 | 10 | Bookmark Sidebar is a browser extension, which adds a toggleable sidebar with all your bookmarks on the left or right side of your screen. You can sort, edit, delete or rearrange your bookmarks easily from within the sidebar. There are many configuration options, and the appearance is fully customizable. 11 | 12 |   13 | 14 | 15 | The extension should work with all Chromium-based browsers, while officially only Chrome and Edge are fully supported. 16 | 17 | If you want to help to translate the extension, feel free to contribute by submitting some translations. Currently, 40 different languages are available. 18 | 19 | You have questions, problems or ideas? ... Please do not hesitate to contact me by submitting the feedback form. I'm reading all messages and trying to get back to you as soon as possible. 20 | 21 | 22 | 23 | ### Release History 24 | See the [Release History](https://github.com/Kiuryy/Bookmark_Sidebar/releases) for an overview about all versions. There is also a compact [Changelog](https://extensions.redeviation.com/changelog/bs) you can take a look at. 25 | 26 | ### License 27 | This project is licensed under the Microsoft Reference Source License (MS-RSL) - see the [license file](license.txt) for details. Any copyright infringement will be legally pursued. 28 | -------------------------------------------------------------------------------- /eslint.config.mjs: -------------------------------------------------------------------------------- 1 | import globals from "globals"; 2 | import path from "node:path"; 3 | import { fileURLToPath } from "node:url"; 4 | import js from "@eslint/js"; 5 | import { FlatCompat } from "@eslint/eslintrc"; 6 | 7 | const __filename = fileURLToPath(import.meta.url); 8 | const __dirname = path.dirname(__filename); 9 | const compat = new FlatCompat({ 10 | baseDirectory: __dirname, 11 | recommendedConfig: js.configs.recommended, 12 | allConfig: js.configs.all 13 | }); 14 | 15 | export default [...compat.extends("eslint:recommended"), { 16 | languageOptions: { 17 | globals: { 18 | ...globals.browser, 19 | ...globals.node, 20 | chrome: true, 21 | jsu: true, 22 | }, 23 | 24 | ecmaVersion: "latest", 25 | sourceType: "commonjs", 26 | 27 | parserOptions: { 28 | impliedStrict: true, 29 | }, 30 | }, 31 | 32 | rules: { 33 | indent: ["warn", 4, { 34 | SwitchCase: 1, 35 | }], 36 | 37 | "no-console": ["error", { 38 | allow: ["error"], 39 | }], 40 | 41 | "dot-notation": ["error", { 42 | allowKeywords: false, 43 | }], 44 | 45 | "prefer-const": "error", 46 | "prefer-arrow-callback": "error", 47 | "no-var": "error", 48 | "no-multi-spaces": "warn", 49 | "no-useless-escape": "off", 50 | "no-unused-vars": "off", 51 | "space-infix-ops": "warn", 52 | "arrow-spacing": "warn", 53 | "func-call-spacing": "error", 54 | "space-in-parens": "warn", 55 | "array-bracket-spacing": "warn", 56 | "object-curly-spacing": "warn", 57 | "computed-property-spacing": "warn", 58 | "keyword-spacing": "warn", 59 | "comma-spacing": "warn", 60 | quotes: "warn", 61 | semi: "warn", 62 | }, 63 | }]; -------------------------------------------------------------------------------- /license.txt: -------------------------------------------------------------------------------- 1 | Microsoft Reference Source License (Ms-RSL) 2 | =========================================== 3 | 4 | This license governs use of the accompanying software. If you use the software, 5 | you accept this license. If you do not accept the license, do not use the 6 | software. 7 | 8 | 1. Definitions 9 | -------------- 10 | 11 | The terms "reproduce", "reproduction" and "distribution" have the same meaning 12 | here as under U.S. copyright law. 13 | 14 | "You" means the licensee of the software. 15 | 16 | "Your company" means the company you worked for when you downloaded the 17 | software. 18 | 19 | "Reference use" means use of the software within your company as a reference, in 20 | read only form, for the sole purposes of debugging your products, maintaining 21 | your products, or enhancing the interoperability of your products with the 22 | software, and specifically excludes the right to distribute the software outside 23 | of your company. 24 | 25 | Licensed patents" means any Licensor patent claims which read directly on the 26 | software as distributed by the Licensor under this license. 27 | 28 | 2. Grant of Rights 29 | ------------------ 30 | 31 | (A) Copyright Grant - Subject to the terms of this license, the Licensor grants 32 | you a non-transferable, non-exclusive, worldwide, royalty-free copyright license 33 | to reproduce the software for reference use. 34 | 35 | (B) Patent Grant - Subject to the terms of this license, the Licensor grants you 36 | a non-transferable, non-exclusive, worldwide, royalty-free patent license under 37 | licensed patents for reference use. 38 | 39 | 3. Limitations 40 | -------------- 41 | 42 | (A) No Trademark License - This license does not grant you any rights to use the 43 | Licensor's name, logo, or trademarks. 44 | 45 | (B) If you begin patent litigation against the Licensor over patents that you 46 | think may apply to the software (including a cross-claim or counterclaim in a 47 | lawsuit), your license to the software ends automatically. 48 | 49 | (C) The software is licensed "as-is." You bear the risk of using it. The 50 | Licensor gives no express warranties, guarantees or conditions. You may have 51 | additional consumer rights under your local laws which this license cannot 52 | change. To the extent permitted under your local laws, the Licensor excludes the 53 | implied warranties of merchantability, fitness for a particular purpose and 54 | non-infringement. -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bookmark_sidebar", 3 | "version": "2.4.0", 4 | "license": "MS-RSL", 5 | "author": "Philipp Koenig", 6 | "homepage": "https://extensions.redeviation.com/", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/Kiuryy/Bookmark_Sidebar" 10 | }, 11 | "scripts": { 12 | "init": "npm install && npm install -g npm-check-updates && npm rebuild node-sass", 13 | "update": "ncu -u --packageFile package.json && npm install", 14 | "build:chrome": "./build.sh --mode=build --target=chrome", 15 | "build:firefox": "./build.sh --mode=build --target=firefox", 16 | "release": "./build.sh --mode=release --target=chrome,firefox" 17 | }, 18 | "devDependencies": { 19 | "eslint": "^9.22.0", 20 | "html-minifier-terser": "^7.2.0", 21 | "sass": "^1.85.1", 22 | "npm-check-updates": "^17.1.15", 23 | "terser": "^5.39.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/html/intro.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 11 | 12 | 13 | 14 | 15 |
16 |

17 |
18 | 19 |
20 |

21 | 22 |
23 |
24 | 25 | 28 | 29 |
30 |
31 | 32 | 35 | 36 |
37 |
38 |
39 | 40 |
41 |

42 | 43 |
44 | 45 | 48 |
49 | 50 |
51 | 52 | 53 | 54 | 55 |
56 | 57 |

58 | 59 | 60 |
61 | 62 |
63 |

64 |
65 | 66 | 67 |
68 |
69 | 70 |
71 |

72 |

73 |
74 | 75 | 76 |

77 | 78 |

79 |
80 |
81 | 82 |
83 |

84 |
85 | 88 |
89 |

90 |
91 | 92 |
93 |
94 | 95 |
96 |

97 | 98 | 99 |
100 | 101 | 125 | 126 | 127 | 128 | -------------------------------------------------------------------------------- /src/html/newtab.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 22 | 23 | 24 | 25 |
26 | 27 | 28 |
29 | 34 | 35 |
36 |
37 |
38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/html/sidepanel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/html/template/dialog.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

4 | 5 |
6 | 7 | https://example.com/ 8 | 18 |
-------------------------------------------------------------------------------- /src/html/template/indicator.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |
-------------------------------------------------------------------------------- /src/img/icon-add.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-arrow-sketch.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-arrow-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-bookmark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-broken.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/img/icon-check.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-checkbox-inactive.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-checkbox.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-close.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-copy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-currentTab.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-delete.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-demo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-dir-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-dir-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-dir-3.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-duplicate.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/img/icon-edit.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-experimental.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-hide.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-history.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-incognito.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-info.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-keyboard.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-lock.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-newTab.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-newWindow.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-pin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-premium.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-radio-inactive.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-radio.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-reorder.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-search.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-select.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-separator.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-settings.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-show.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-showInDir.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-sort.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-speech.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-star.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-unlock.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-unpin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-update-2.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/img/icon-update.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon-web.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/icon/128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kiuryy/Bookmark_Sidebar/ee71ce1d6095789abc659f1e8b5edc5157b7fd5d/src/img/icon/128x128.png -------------------------------------------------------------------------------- /src/img/icon/256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kiuryy/Bookmark_Sidebar/ee71ce1d6095789abc659f1e8b5edc5157b7fd5d/src/img/icon/256x256.png -------------------------------------------------------------------------------- /src/img/icon/48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kiuryy/Bookmark_Sidebar/ee71ce1d6095789abc659f1e8b5edc5157b7fd5d/src/img/icon/48x48.png -------------------------------------------------------------------------------- /src/img/icon/dev/128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kiuryy/Bookmark_Sidebar/ee71ce1d6095789abc659f1e8b5edc5157b7fd5d/src/img/icon/dev/128x128.png -------------------------------------------------------------------------------- /src/img/icon/dev/256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kiuryy/Bookmark_Sidebar/ee71ce1d6095789abc659f1e8b5edc5157b7fd5d/src/img/icon/dev/256x256.png -------------------------------------------------------------------------------- /src/img/icon/dev/48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kiuryy/Bookmark_Sidebar/ee71ce1d6095789abc659f1e8b5edc5157b7fd5d/src/img/icon/dev/48x48.png -------------------------------------------------------------------------------- /src/img/icon/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kiuryy/Bookmark_Sidebar/ee71ce1d6095789abc659f1e8b5edc5157b7fd5d/src/img/icon/icon.png -------------------------------------------------------------------------------- /src/img/onboarding/icon-cursor.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/settings/alpha.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/settings/icon-appearance.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/settings/icon-dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/settings/icon-dashboard.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/settings/icon-feedback.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/settings/icon-github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/settings/icon-heart.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/settings/icon-help.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/settings/icon-importExport.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/settings/icon-light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/settings/icon-newtab.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/settings/icon-privacy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/settings/icon-quote.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/settings/icon-screenshot.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/img/settings/icon-support.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/settings/icon-theme.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/settings/icon-translate.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/settings/mockup-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kiuryy/Bookmark_Sidebar/ee71ce1d6095789abc659f1e8b5edc5157b7fd5d/src/img/settings/mockup-left.png -------------------------------------------------------------------------------- /src/img/settings/mockup-middle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kiuryy/Bookmark_Sidebar/ee71ce1d6095789abc659f1e8b5edc5157b7fd5d/src/img/settings/mockup-middle.png -------------------------------------------------------------------------------- /src/img/settings/mockup-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kiuryy/Bookmark_Sidebar/ee71ce1d6095789abc659f1e8b5edc5157b7fd5d/src/img/settings/mockup-right.png -------------------------------------------------------------------------------- /src/img/settings/support.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/js/background-prepare.js: -------------------------------------------------------------------------------- 1 | if (!self.window) { // required for jsu 2 | self.window = self; 3 | } 4 | if (!self.document) { 5 | self.document = {}; 6 | } -------------------------------------------------------------------------------- /src/js/background.js: -------------------------------------------------------------------------------- 1 | try { 2 | new jsu.Background().run(); 3 | } catch (e) { 4 | console.error("Failed to load service worker"); 5 | console.error(e); 6 | } -------------------------------------------------------------------------------- /src/js/background/cache.js: -------------------------------------------------------------------------------- 1 | ($ => { 2 | "use strict"; 3 | 4 | $.CacheHelper = function (b) { 5 | 6 | /** 7 | * Caches the given value under the given name in the local storage 8 | * 9 | * @param {object} opts 10 | * @returns {Promise} 11 | */ 12 | this.set = async (opts) => { 13 | try { 14 | await $.api.storage.local.set({["cache_" + opts.name]: opts.val}); 15 | } catch (e) { 16 | // can fail (e.g. MAX_WRITE_OPERATIONS_PER_MINUTE exceeded) 17 | } 18 | }; 19 | 20 | /** 21 | * Returns the cached value with the given name 22 | * 23 | * @param {object} opts 24 | * @returns {Promise} 25 | */ 26 | this.get = async (opts) => { 27 | const result = await $.api.storage.local.get(["cache_" + opts.name]); 28 | return {val: result["cache_" + opts.name]}; 29 | }; 30 | 31 | /** 32 | * Removes the cached value for the given name 33 | * 34 | * @param {object} opts 35 | * @returns {Promise} 36 | */ 37 | this.remove = async (opts) => { 38 | if (!b.importRunning) { // don't remove cache while import in running 39 | await $.api.storage.local.remove(["cache_" + opts.name]); 40 | } 41 | }; 42 | }; 43 | 44 | })(jsu); -------------------------------------------------------------------------------- /src/js/background/message.js: -------------------------------------------------------------------------------- 1 | ($ => { 2 | "use strict"; 3 | 4 | $.MessageHelper = function (b) { 5 | 6 | this.init = async () => { 7 | let c = 0; 8 | 9 | const mapping = { 10 | checkUrl: b.helper.linkchecker.check, 11 | bookmarks: b.helper.bookmarks.getById, 12 | searchBookmarks: b.helper.bookmarks.getBySearchVal, 13 | moveBookmark: b.helper.bookmarks.move, 14 | updateBookmark: b.helper.bookmarks.update, 15 | createBookmark: b.helper.bookmarks.create, 16 | deleteBookmark: b.helper.bookmarks.remove, 17 | openWebsite: b.openWebsite, 18 | reload: b.reload, 19 | reinitialize: b.reinitialize, 20 | systemColorChanged: b.helper.model.systemColorChanged, 21 | updateShareInfo: b.helper.model.setShareInfo, 22 | infoToDisplay: b.helper.model.getInfoToDisplay, 23 | languageInfos: b.helper.language.getAvailableLanguages, 24 | langvars: b.helper.language.getLangVars, 25 | rtlLangs: b.helper.language.getRtlLanguages, 26 | favicon: b.helper.bookmarks.getFavicon, 27 | openLink: b.helper.utility.openLink, 28 | userType: b.helper.model.getUserType, 29 | activatePremium: b.helper.utility.activatePremium, 30 | deactivatePremium: b.helper.utility.removePremiumState, 31 | licenseKey: b.helper.model.getLicenseKey, 32 | getCache: b.helper.cache.get, 33 | setCache: b.helper.cache.set, 34 | removeCache: b.helper.cache.remove, 35 | websiteStatus: b.helper.utility.checkWebsiteStatus, 36 | track: b.helper.analytics.track, 37 | iconImageData: b.helper.icon.getImageData, 38 | updateIcon: b.helper.icon.setExtensionIcon, 39 | reloadIcon: b.helper.icon.init, 40 | reloadBrowserAction: b.helper.browserAction.init, 41 | clearNotWorkingTimeout: b.helper.browserAction.clearTimeout, 42 | setNotWorkingReason: b.helper.browserAction.setReason, 43 | increaseViewCounter: b.helper.viewAmount.increaseByUrl, 44 | viewAmounts: b.helper.viewAmount.getAll, 45 | searchHistory: b.helper.utility.getHistoryBySearchVal, 46 | parsedUrl: async (opts) => b.helper.utility.getParsedUrl(opts.href), 47 | lastUpdateDate: async () => b.helper.model.getData("lastUpdateDate") 48 | }; 49 | 50 | $.api.runtime.onMessage.addListener((message, sender, callback) => { 51 | if (mapping[message.type]) { // function for message type exists 52 | c++; 53 | if (c === 50) { // check whether the userdata should be shared for today from time to time 54 | b.helper.analytics.trackUserData(); 55 | c = 0; 56 | } 57 | 58 | message.tabId = sender.tab ? sender.tab.id : null; 59 | mapping[message.type](message).then((result) => { 60 | callback(result); 61 | })["catch"]((error) => { 62 | console.error(error); 63 | callback(); 64 | }); 65 | } else { 66 | console.error("Unknown message type:", message.type); 67 | callback(); 68 | } 69 | return true; 70 | }); 71 | }; 72 | }; 73 | 74 | })(jsu); -------------------------------------------------------------------------------- /src/js/background/viewAmount.js: -------------------------------------------------------------------------------- 1 | ($ => { 2 | "use strict"; 3 | 4 | $.ViewAmountHelper = function (b) { 5 | 6 | /** 7 | * Returns the view amounts of all bookmarks 8 | * 9 | * @returns {Promise} 10 | */ 11 | this.getAll = async () => { 12 | const clickCounter = await getClickCounter(); 13 | return { 14 | viewAmounts: clickCounter, 15 | counterStartDate: b.helper.model.getData("installationDate") 16 | }; 17 | }; 18 | 19 | /** 20 | * Determines whether a bookmark to the given url exists and if so increases the view counter, 21 | * only if the tab was not previously opened or changed from the extension (these clicks are counted already) 22 | * 23 | * @param {object} opts 24 | * @returns {Promise} 25 | */ 26 | this.increaseByUrl = async (opts) => { 27 | const openedByExtension = b.helper.model.getData("openedByExtension"); 28 | 29 | if (openedByExtension === null) { // page was not opened by extension -> view was not counted yet 30 | const result = await b.helper.bookmarks.getBySearchVal({searchVal: {url: opts.url}}); 31 | if (result && result.bookmarks) { 32 | for (const bookmark of result.bookmarks) { 33 | if (bookmark.url === opts.url) { 34 | await this.increaseById(bookmark.id); 35 | break; 36 | } 37 | } 38 | } 39 | } 40 | 41 | await b.helper.model.setData("openedByExtension", null); 42 | }; 43 | 44 | /** 45 | * Increases the Click Counter of the given bookmark 46 | * 47 | * @param {string} bookmarkId 48 | * @param {number} increment 49 | */ 50 | this.increaseById = async (bookmarkId, increment = 1) => { 51 | bookmarkId = "" + bookmarkId; 52 | if (bookmarkId) { 53 | const clickCounter = await getClickCounter(); 54 | if (typeof clickCounter[bookmarkId] === "undefined" || typeof clickCounter[bookmarkId] !== "object") { 55 | clickCounter[bookmarkId] = {c: 0}; 56 | } 57 | 58 | clickCounter[bookmarkId].c += increment; 59 | clickCounter[bookmarkId].d = +new Date(); 60 | 61 | await $.api.storage.local.set({ 62 | clickCounter: clickCounter 63 | }); 64 | } 65 | }; 66 | 67 | /** 68 | * Retrieves infos about the views of the bookmarks 69 | * 70 | * @returns {Promise} 71 | */ 72 | const getClickCounter = async () => { 73 | const obj = await $.api.storage.local.get(["clickCounter"]); 74 | let ret = {}; 75 | 76 | if (typeof obj.clickCounter !== "undefined") { // data available 77 | ret = obj.clickCounter; 78 | } 79 | 80 | return ret; 81 | }; 82 | }; 83 | 84 | })(jsu); -------------------------------------------------------------------------------- /src/js/helper/font.js: -------------------------------------------------------------------------------- 1 | ($ => { 2 | "use strict"; 3 | 4 | /** 5 | * @param {object} ext 6 | * @constructor 7 | */ 8 | $.FontHelper = function (ext) { 9 | 10 | const fontWeights = { 11 | general: { 12 | Thin: 100, 13 | ExtraLight: 100, 14 | Light: 100, 15 | Normal: 300, 16 | Medium: 400, 17 | SemiBold: 400, 18 | Bold: 500, 19 | ExtraBold: 500, 20 | Black: 500 21 | }, 22 | fa: { 23 | Thin: 100, 24 | ExtraLight: 100, 25 | Light: 100, 26 | Normal: 300, 27 | Medium: 400, 28 | SemiBold: 500, 29 | Bold: 600, 30 | ExtraBold: 600, 31 | Black: 600 32 | }, 33 | ar: { 34 | Thin: 100, 35 | ExtraLight: 100, 36 | Light: 100, 37 | Normal: 300, 38 | Medium: 400, 39 | SemiBold: 500, 40 | Bold: 600, 41 | ExtraBold: 600, 42 | Black: 600 43 | }, 44 | he: { 45 | Thin: 100, 46 | ExtraLight: 100, 47 | Light: 100, 48 | Normal: 300, 49 | Medium: 400, 50 | SemiBold: 500, 51 | Bold: 600, 52 | ExtraBold: 600, 53 | Black: 600 54 | }, 55 | ja: { 56 | Thin: 100, 57 | ExtraLight: 100, 58 | Light: 100, 59 | Normal: 200, 60 | Medium: 300, 61 | SemiBold: 400, 62 | Bold: 500, 63 | ExtraBold: 500, 64 | Black: 500 65 | }, 66 | "zh_CN": { 67 | Thin: 100, 68 | ExtraLight: 100, 69 | Light: 100, 70 | Normal: 300, 71 | Medium: 400, 72 | SemiBold: 400, 73 | Bold: 400, 74 | ExtraBold: 500, 75 | Black: 500 76 | }, 77 | "zh_TW": { 78 | Thin: 100, 79 | ExtraLight: 100, 80 | Light: 100, 81 | Normal: 300, 82 | Medium: 400, 83 | SemiBold: 400, 84 | Bold: 400, 85 | ExtraBold: 500, 86 | Black: 500 87 | } 88 | }; 89 | 90 | /** 91 | * Returns the font-weights of the current language 92 | * 93 | * @returns {object} 94 | */ 95 | this.getFontWeights = () => { 96 | const lang = ext.helper.i18n.getLanguage(); 97 | let weights = {...fontWeights.general}; 98 | 99 | if (fontWeights[lang]) { 100 | weights = {...fontWeights[lang]}; 101 | } 102 | 103 | const ret = {}; 104 | for (const key in weights) { 105 | ret["fontWeight" + key] = weights[key]; 106 | } 107 | 108 | return ret; 109 | }; 110 | }; 111 | 112 | })(jsu); -------------------------------------------------------------------------------- /src/js/helper/template.js: -------------------------------------------------------------------------------- 1 | ($ => { 2 | "use strict"; 3 | 4 | /** 5 | * @param {object} ext 6 | * @constructor 7 | */ 8 | $.TemplateHelper = function (ext) { 9 | 10 | /** 11 | * Returns the html for the loading indicator 12 | * 13 | * @returns {jsu} 14 | */ 15 | this.loading = () => { 16 | return $("" + 17 | "" + 18 | "" + 19 | ""); 20 | }; 21 | 22 | /** 23 | * Creates a new overlay and returns the html elements 24 | * 25 | * @param {string} type 26 | * @param {string} title 27 | * @returns {jsu} 28 | */ 29 | this.overlay = (type, title) => { 30 | const ret = {}; 31 | const config = ext.helper.model.getData(["a/theme", "b/animations", "a/surface", "a/highContrast"]); 32 | 33 | ret.overlay = $("") 34 | .attr("id", $.opts.ids.page.overlay) 35 | .addClass("notranslate") // 'notranslate' prevents Google translator from translating the content of the overlay 36 | .attr($.attr.theme, config.theme) 37 | .appendTo("body"); 38 | 39 | ext.helper.stylesheet.addStylesheets(["overlay"], ret.overlay); 40 | 41 | const iframeBody = ret.overlay.find("body"); 42 | 43 | iframeBody.attr($.attr.theme, config.theme); 44 | 45 | iframeBody.parent("html").attr("dir", ext.helper.i18n.isRtl() ? "rtl" : "ltr"); 46 | 47 | ret.modal = $("
") 48 | .attr($.attr.type, type) 49 | .addClass($.cl.overlay.modal) 50 | .appendTo(iframeBody); 51 | 52 | if (config.animations === false) { 53 | ret.overlay.addClass($.cl.page.noAnimations); 54 | } 55 | 56 | if (ext.helper.utility.getPageType() === "sidepanel") { 57 | ret.modal.addClass($.cl.sidebar.sidepanel); 58 | ret.overlay.addClass($.cl.sidebar.sidepanel); 59 | } 60 | 61 | if (config.surface === "dark" || (config.surface === "auto" && ext.helper.stylesheet.getSystemSurface() === "dark")) { 62 | iframeBody.addClass($.cl.page.dark); 63 | } else if (config.highContrast) { 64 | iframeBody.addClass($.cl.page.highContrast); 65 | } 66 | 67 | const header = $("
").appendTo(ret.modal); 68 | $("

").text(title).appendTo(header); 69 | $("").addClass($.cl.close).appendTo(header); 70 | 71 | ret.buttonWrapper = $("").addClass($.cl.overlay.buttonWrapper).appendTo(ret.modal); 72 | $("") 73 | .addClass($.cl.close) 74 | .appendTo(ret.buttonWrapper); 75 | 76 | ret.overlay[0].focus(); 77 | 78 | $.delay(100).then(() => { 79 | ret.modal.addClass($.cl.visible); 80 | ret.overlay.addClass($.cl.page.visible); 81 | }); 82 | 83 | return ret; 84 | }; 85 | }; 86 | 87 | })(jsu); -------------------------------------------------------------------------------- /src/js/lib/README.md: -------------------------------------------------------------------------------- 1 | # JS library 2 | You can find the repositories for the lib files in the list below: 3 | - [View Colorpicker](https://github.com/Kiuryy/Colorpicker) 4 | - [View jsu](https://github.com/Kiuryy/jsu) 5 | -------------------------------------------------------------------------------- /src/js/newtab-preflight.js: -------------------------------------------------------------------------------- 1 | window.cachedKeys = []; 2 | document.addEventListener("keypress", (e) => { 3 | window.cachedKeys.push(e.key); 4 | }); -------------------------------------------------------------------------------- /src/js/newtab/fallback.js: -------------------------------------------------------------------------------- 1 | ($ => { 2 | "use strict"; 3 | 4 | $.FallbackHelper = function (n) { 5 | 6 | /** 7 | * 8 | * @returns {Promise} 9 | */ 10 | this.init = async () => { 11 | const url = new URL(location.href); 12 | const typeParam = url.searchParams.get("type"); 13 | 14 | if (typeParam !== null) { 15 | n.elm.gridLinks.addClass($.cl.hidden); 16 | n.elm.fallbackInfo.addClass($.cl.active); 17 | 18 | initDescription(typeParam); 19 | initEvents(typeParam); 20 | 21 | if ((typeParam === "new_tab" || typeParam === "fallback") && n.helper.model.getData("n/override") === false) { 22 | initSetAsDefaultSwitch(); 23 | } 24 | } 25 | }; 26 | 27 | /** 28 | * Initialises the eventhandlers 29 | * 30 | * @param {string} type 31 | */ 32 | const initEvents = (type) => { 33 | n.elm.fallbackInfo.children("a").on("click", (e) => { 34 | e.preventDefault(); 35 | let suggestionType = "general"; 36 | 37 | switch (type) { 38 | case "notWhitelisted": 39 | case "blacklisted": 40 | suggestionType = "filter"; 41 | break; 42 | } 43 | 44 | $.api.tabs.create({url: $.api.runtime.getURL("html/settings.html#support_error_" + suggestionType)}); 45 | }); 46 | }; 47 | 48 | /** 49 | * Initialises the switch for setting the new tab page as default 50 | */ 51 | const initSetAsDefaultSwitch = () => { 52 | const wrapper = $("
").appendTo(n.elm.fallbackInfo); 53 | const checkbox = n.helper.checkbox.get(n.elm.body, {}, "checkbox", "switch").appendTo(wrapper); 54 | $("").html(n.helper.i18n.get("newtab_fallback_set_as_new_tab")).insertAfter(checkbox); 55 | 56 | checkbox.children("input[type='checkbox']").on("change", (e) => { 57 | if (e.currentTarget.checked) { 58 | $.api.permissions.request({ // request additional permissions in order to override the new tab page 59 | permissions: ["tabs", "topSites", "history"] 60 | }, (granted) => { 61 | if (granted) { 62 | setAsNewtab(true); 63 | } else { // not granted -> no overriding 64 | checkbox.trigger("click"); 65 | } 66 | }); 67 | } else { 68 | setAsNewtab(false); 69 | } 70 | }); 71 | }; 72 | 73 | /** 74 | * Enables or disables the new tab overriding 75 | * 76 | * @param {boolean} val 77 | */ 78 | const setAsNewtab = (val) => { 79 | $.api.storage.sync.get(["newtab"], (obj) => { 80 | const config = obj.newtab || {}; 81 | config.override = val; 82 | $.api.storage.sync.set({newtab: config}, () => { 83 | n.enabledSetAsNewtab = true; 84 | n.helper.model.call("reinitialize"); 85 | }); 86 | }); 87 | }; 88 | 89 | /** 90 | * Initialises the description texts 91 | * 92 | * @param {string} type 93 | */ 94 | const initDescription = (type) => { 95 | const texts = { 96 | headline: "newtab_fallback_headline_general", 97 | desc: "newtab_fallback_desc", 98 | link: "more_link" 99 | }; 100 | 101 | switch (type) { 102 | case "new_tab": 103 | case "system": 104 | case "extension_page": 105 | case "webstore": 106 | texts.headline = "newtab_fallback_headline_" + type; 107 | break; 108 | case "notWhitelisted": 109 | case "blacklisted": 110 | texts.headline = "newtab_fallback_headline_url_filter"; 111 | break; 112 | } 113 | 114 | $("

").text(n.helper.i18n.get(texts.headline)).appendTo(n.elm.fallbackInfo); 115 | $("

").text(n.helper.i18n.get(texts.desc)).appendTo(n.elm.fallbackInfo); 116 | $("").text(n.helper.i18n.get(texts.link)).appendTo(n.elm.fallbackInfo); 117 | }; 118 | 119 | }; 120 | 121 | })(jsu); -------------------------------------------------------------------------------- /src/js/newtab/topLinks.js: -------------------------------------------------------------------------------- 1 | ($ => { 2 | "use strict"; 3 | 4 | $.TopLinksHelper = function (n) { 5 | 6 | /** 7 | * 8 | * @returns {Promise} 9 | */ 10 | this.init = async () => { 11 | this.refreshEntries(); 12 | initEvents(); 13 | }; 14 | 15 | /** 16 | * Initialises the entries for the menu 17 | */ 18 | this.refreshEntries = () => { 19 | const entries = n.helper.model.getData("n/topLinks"); 20 | const position = n.helper.model.getData("n/topLinksPosition"); 21 | 22 | n.elm.topLinks.attr($.attr.position, position); 23 | n.elm.topLinks.children("ul").remove(); 24 | const list = $("").appendTo(n.elm.topLinks); 25 | 26 | if (entries && entries.length > 0) { 27 | entries.forEach((entry) => { 28 | const elm = $("
  • ").appendTo(list); 29 | const link = $("").text(entry.title).appendTo(elm); 30 | link.data("href", entry.url).attr("href", entry.url); 31 | }); 32 | } 33 | }; 34 | 35 | /** 36 | * Initialises the eventhandler 37 | */ 38 | const initEvents = () => { 39 | n.elm.topLinks.on("click auxclick", "> ul > li > a", (e) => { // handle chrome urls -> regular clicking will be blocked 40 | 41 | if (n.elm.body.hasClass($.cl.newtab.edit)) { // disable event in edit mode 42 | return; 43 | } 44 | 45 | e.preventDefault(); 46 | if (e.button === 0 || e.button === 1) { 47 | n.helper.model.call("openLink", { 48 | href: $(e.currentTarget).data("href"), 49 | newTab: e.type === "auxclick", 50 | position: n.helper.model.getData("b/newTabPosition"), 51 | active: e.type !== "auxclick" 52 | }); 53 | } 54 | }); 55 | }; 56 | }; 57 | 58 | })(jsu); -------------------------------------------------------------------------------- /src/js/settings/infos.js: -------------------------------------------------------------------------------- 1 | ($ => { 2 | "use strict"; 3 | 4 | $.InfosHelper = function (s) { 5 | 6 | /** 7 | * Initialises the information tab 8 | * 9 | * @returns {Promise} 10 | */ 11 | this.init = async () => { 12 | return new Promise((resolve) => { 13 | Promise.all([ 14 | initPermissionList(), 15 | initEvents() 16 | ]).then(resolve); 17 | }); 18 | }; 19 | 20 | /** 21 | * Initialises the labels of the required permissions by fetching the permission warnings 22 | * 23 | * @returns {Promise} 24 | */ 25 | const initPermissionList = () => { 26 | return new Promise((resolve) => { 27 | $.api.management.getPermissionWarningsByManifest(JSON.stringify($.opts.manifest), (obj) => { // returns the warnings of the required permissions in the browser language 28 | const permissions = {}; 29 | [permissions.contentscript, permissions.bookmarks] = obj; 30 | 31 | Object.entries(permissions).forEach(([key, text]) => { 32 | s.elm.infos.permissionsWrapper.find("h3[" + $.attr.name + "='" + key + "']").text(text); 33 | }); 34 | 35 | resolve(); 36 | }); 37 | }); 38 | }; 39 | 40 | /** 41 | * Initialises the eventhandlers 42 | * 43 | * @returns {Promise} 44 | */ 45 | const initEvents = async () => { 46 | $.api.storage.sync.get(["shareInfo"], (obj) => { 47 | if (obj.shareInfo) { 48 | if (obj.shareInfo.config) { 49 | s.elm.checkbox.shareConfig.trigger("click"); 50 | } 51 | 52 | if (obj.shareInfo.activity) { 53 | s.elm.checkbox.shareActivity.trigger("click"); 54 | } 55 | } 56 | 57 | s.elm.infos.shareInfoWrapper.find("input[type='checkbox']").on("change", () => { 58 | s.helper.model.call("updateShareInfo", { 59 | config: s.helper.checkbox.isChecked(s.elm.checkbox.shareConfig), 60 | activity: s.helper.checkbox.isChecked(s.elm.checkbox.shareActivity) 61 | }).then(() => { 62 | s.showSuccessMessage("saved_share_userdata"); 63 | }); 64 | }); 65 | }); 66 | }; 67 | }; 68 | 69 | })(jsu); -------------------------------------------------------------------------------- /src/js/sidepanel.js: -------------------------------------------------------------------------------- 1 | ($ => { 2 | "use strict"; 3 | 4 | const Sidepanel = function () { 5 | 6 | /** 7 | * Constructor 8 | */ 9 | this.run = async () => { 10 | loadSidebar(); 11 | }; 12 | 13 | /** 14 | * Injects the scripts and stylesheets to load the sidebar 15 | * 16 | * @returns {Promise} 17 | */ 18 | const loadSidebar = () => { 19 | return new Promise((resolve) => { 20 | $("[" + $.attr.type + "='script_sidebar']").remove(); 21 | 22 | $.opts.manifest.content_scripts[0].css.forEach((css) => { 23 | $("").attr({ 24 | href: $.api.runtime.getURL(css), 25 | type: "text/css", 26 | rel: "stylesheet", 27 | [$.attr.type]: "script_sidebar" 28 | }).appendTo("head"); 29 | }); 30 | 31 | const loadJs = (i = 0) => { 32 | let js = $.opts.manifest.content_scripts[0].js[i]; 33 | 34 | if (typeof js !== "undefined") { 35 | const script = document.createElement("script"); 36 | document.head.appendChild(script); 37 | script.onload = () => loadJs(i + 1); // load one after another 38 | if (!js.includes("://")) { 39 | js = "/" + js; 40 | } 41 | script.src = js; 42 | $(script).attr($.attr.type, "script_sidebar"); 43 | } else { 44 | resolve(); 45 | } 46 | }; 47 | 48 | loadJs(); 49 | }); 50 | }; 51 | }; 52 | 53 | new Sidepanel().run(); 54 | })(jsu); -------------------------------------------------------------------------------- /src/manifest.chrome.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 3, 3 | "name": "__MSG_extension_name__", 4 | "short_name": "__MSG_extension_name_short__", 5 | "description": "__MSG_extension_desc__", 6 | "default_locale": "en", 7 | "homepage_url": "https://extensions.redeviation.com/", 8 | "background": { 9 | "service_worker": "js/background.js" 10 | }, 11 | "content_scripts": [ 12 | { 13 | "css": [ 14 | "css/contentBase.css" 15 | ], 16 | "js": [ 17 | "js/extension.js" 18 | ], 19 | "matches": [ 20 | "" 21 | ], 22 | "run_at": "document_end" 23 | } 24 | ], 25 | "action": { 26 | "default_icon": "img/icon/dev/128x128.png" 27 | }, 28 | "commands": { 29 | "_execute_action": { 30 | "description": "Toggle the sidebar" 31 | } 32 | }, 33 | "web_accessible_resources": [ 34 | { 35 | "resources": [ 36 | "_favicon", 37 | "css/sidebar.css", 38 | "css/overlay.css", 39 | "css/content.css", 40 | "css/themes/*", 41 | "img/*" 42 | ], 43 | "matches": [ 44 | "" 45 | ] 46 | } 47 | ], 48 | "incognito": "split", 49 | "options_ui": { 50 | "page": "html/settings.html", 51 | "open_in_tab": true 52 | }, 53 | "icons": { 54 | "256": "img/icon/dev/256x256.png", 55 | "128": "img/icon/dev/128x128.png", 56 | "48": "img/icon/dev/48x48.png" 57 | }, 58 | "host_permissions": [ 59 | "" 60 | ], 61 | "side_panel": { 62 | "default_path": "html/sidepanel.html" 63 | }, 64 | "permissions": [ 65 | "bookmarks", 66 | "storage", 67 | "favicon", 68 | "contextMenus", 69 | "scripting", 70 | "unlimitedStorage", 71 | "fontSettings", 72 | "sidePanel" 73 | ], 74 | "optional_permissions": [ 75 | "tabs", 76 | "history", 77 | "topSites" 78 | ] 79 | } -------------------------------------------------------------------------------- /src/manifest.firefox.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 3, 3 | "name": "__MSG_extension_name__", 4 | "short_name": "__MSG_extension_name_short__", 5 | "description": "__MSG_extension_desc__", 6 | "default_locale": "en", 7 | "homepage_url": "https://extensions.redeviation.com/", 8 | "browser_specific_settings": { 9 | "gecko": { 10 | "id": "bookmark_sidebar@redeviation.com" 11 | } 12 | }, 13 | "background": { 14 | "scripts": [ 15 | "js/background.js" 16 | ] 17 | }, 18 | "content_scripts": [ 19 | { 20 | "css": [ 21 | "css/contentBase.css" 22 | ], 23 | "js": [ 24 | "js/extension.js" 25 | ], 26 | "matches": [ 27 | "" 28 | ], 29 | "run_at": "document_end" 30 | } 31 | ], 32 | "action": { 33 | "default_icon": "img/icon/dev/128x128.png" 34 | }, 35 | "commands": { 36 | "_execute_action": { 37 | "description": "Toggle the sidebar" 38 | } 39 | }, 40 | "web_accessible_resources": [ 41 | { 42 | "resources": [ 43 | "_favicon", 44 | "css/sidebar.css", 45 | "css/overlay.css", 46 | "css/content.css", 47 | "css/themes/*", 48 | "img/*" 49 | ], 50 | "matches": [ 51 | "" 52 | ] 53 | } 54 | ], 55 | "incognito": "split", 56 | "options_ui": { 57 | "page": "html/settings.html", 58 | "open_in_tab": true 59 | }, 60 | "icons": { 61 | "256": "img/icon/dev/256x256.png", 62 | "128": "img/icon/dev/128x128.png", 63 | "48": "img/icon/dev/48x48.png" 64 | }, 65 | "host_permissions": [ 66 | "" 67 | ], 68 | "side_panel": { 69 | "default_path": "html/sidepanel.html" 70 | }, 71 | "permissions": [ 72 | "bookmarks", 73 | "storage", 74 | "favicon", 75 | "contextMenus", 76 | "scripting", 77 | "unlimitedStorage", 78 | "fontSettings", 79 | "sidePanel" 80 | ], 81 | "optional_permissions": [ 82 | "tabs", 83 | "history", 84 | "topSites" 85 | ] 86 | } -------------------------------------------------------------------------------- /src/res/1280x640.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kiuryy/Bookmark_Sidebar/ee71ce1d6095789abc659f1e8b5edc5157b7fd5d/src/res/1280x640.png -------------------------------------------------------------------------------- /src/res/1400x560.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kiuryy/Bookmark_Sidebar/ee71ce1d6095789abc659f1e8b5edc5157b7fd5d/src/res/1400x560.png -------------------------------------------------------------------------------- /src/res/440x280.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kiuryy/Bookmark_Sidebar/ee71ce1d6095789abc659f1e8b5edc5157b7fd5d/src/res/440x280.png -------------------------------------------------------------------------------- /src/res/920x680.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kiuryy/Bookmark_Sidebar/ee71ce1d6095789abc659f1e8b5edc5157b7fd5d/src/res/920x680.png -------------------------------------------------------------------------------- /src/res/screenshot_0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kiuryy/Bookmark_Sidebar/ee71ce1d6095789abc659f1e8b5edc5157b7fd5d/src/res/screenshot_0.png -------------------------------------------------------------------------------- /src/res/screenshot_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kiuryy/Bookmark_Sidebar/ee71ce1d6095789abc659f1e8b5edc5157b7fd5d/src/res/screenshot_1.png -------------------------------------------------------------------------------- /src/res/screenshot_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kiuryy/Bookmark_Sidebar/ee71ce1d6095789abc659f1e8b5edc5157b7fd5d/src/res/screenshot_2.png -------------------------------------------------------------------------------- /src/res/screenshot_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kiuryy/Bookmark_Sidebar/ee71ce1d6095789abc659f1e8b5edc5157b7fd5d/src/res/screenshot_3.png -------------------------------------------------------------------------------- /src/res/screenshot_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kiuryy/Bookmark_Sidebar/ee71ce1d6095789abc659f1e8b5edc5157b7fd5d/src/res/screenshot_4.png -------------------------------------------------------------------------------- /src/scss/content.scss: -------------------------------------------------------------------------------- 1 | @import "include/vars"; 2 | @import "include/mixins"; 3 | 4 | // Scroll prevention 5 | body.redeviation-bs-noscroll { 6 | overflow: hidden !important; 7 | } 8 | 9 | // Indicator 10 | body > div#redeviation-bs-indicator { 11 | 12 | > div { 13 | position: absolute; 14 | transform: translate3d(-$__indicatorWidth, 0, 0); 15 | top: 0; 16 | left: 0; 17 | width: $__indicatorWidth !important; 18 | height: 100%; 19 | background: $__indicatorColor; 20 | border-radius: 0 10px 10px 0; 21 | transition: opacity 0.3s, transform 0.3s; 22 | z-index: 2; 23 | @extend %hidden; 24 | 25 | > span { 26 | -webkit-mask: no-repeat center / $__indicatorIconSize; 27 | @include maskImage('icon-bookmark'); 28 | background-color: $__indicatorIconColor; 29 | position: absolute; 30 | display: block; 31 | top: 0; 32 | left: 0; 33 | width: 100%; 34 | height: 100%; 35 | } 36 | } 37 | 38 | &[data-pos='right'] { 39 | left: auto; 40 | right: 0; 41 | 42 | > div { 43 | transform: translate3d($__indicatorWidth, 0, 0); 44 | left: auto; 45 | right: 0; 46 | border-radius: 10px 0 0 10px; 47 | } 48 | } 49 | 50 | &.redeviation-bs-fullHeight { 51 | 52 | > div { 53 | border-radius: 0; 54 | } 55 | } 56 | 57 | &.redeviation-bs-hover { 58 | 59 | > div { 60 | transform: translate3d(0, 0, 0); 61 | opacity: 1; 62 | } 63 | } 64 | 65 | &[data-pos='left'].redeviation-bs-has-lsb { 66 | height: 100% !important; 67 | top: 0 !important; 68 | 69 | > div { 70 | background: transparent; 71 | 72 | > span { 73 | -webkit-mask-position-y: 20px; 74 | } 75 | } 76 | } 77 | } 78 | 79 | // Sidebar 80 | body > #redeviation-bs-sidebar { 81 | width: $__sidebarWidth; 82 | max-width: none; 83 | height: 0; 84 | z-index: #{2147483647 - 1}; 85 | background-color: $__sidebarMaskColor !important; 86 | color-scheme: auto !important; 87 | speak: none; 88 | border: none; 89 | display: block !important; 90 | transform: translate3d(-$__sidebarWidth, 0, 0); 91 | transition: width 0s 0.3s, height 0s 0.3s, opacity 0.3s, transform 0.3s; 92 | 93 | &[data-pos='right'] { 94 | left: auto; 95 | right: 0; 96 | transform: translate3d($__sidebarWidth, 0, 0); 97 | } 98 | 99 | &.redeviation-bs-visible { 100 | @extend %visible; 101 | width: calc(100% + #{$__sidebarWidth}); 102 | height: 100%; 103 | transform: translate3d(0, 0, 0); 104 | transition: opacity 0.3s, transform 0.3s; 105 | } 106 | 107 | &.sidepanel { 108 | width: 100% !important; 109 | } 110 | 111 | &.redeviation-bs-hideMask { 112 | background: none !important; 113 | 114 | &:not(.redeviation-bs-hover) { 115 | width: calc(#{$__sidebarWidth} + 50px); 116 | } 117 | } 118 | } 119 | 120 | // Overlay 121 | body > #redeviation-bs-overlay { 122 | width: 100%; 123 | max-width: none; 124 | height: 100%; 125 | z-index: 2147483647; 126 | border: none; 127 | speak: none; 128 | background: $__overlayMaskColor !important; 129 | color-scheme: auto !important; 130 | transition: opacity 0.3s; 131 | 132 | &.redeviation-bs-visible { 133 | @extend %visible; 134 | } 135 | } -------------------------------------------------------------------------------- /src/scss/contentBase.scss: -------------------------------------------------------------------------------- 1 | @import "include/vars"; 2 | @import "include/mixins"; 3 | 4 | // Indicator 5 | body > div#redeviation-bs-indicator { 6 | display: none; 7 | position: fixed; 8 | top: 0; 9 | left: 0; 10 | width: 1px; 11 | height: 100%; 12 | margin: 0; 13 | padding: 0; 14 | z-index: #{2147483647 - 2}; 15 | 16 | &.redeviation-bs-visible { 17 | display: block; 18 | } 19 | } 20 | 21 | // Sidebar 22 | body > #redeviation-bs-sidebar { 23 | position: fixed; 24 | top: 0; 25 | left: 0; 26 | @extend %hidden; 27 | } 28 | 29 | // Overlay 30 | body > #redeviation-bs-overlay { 31 | position: fixed; 32 | top: 0; 33 | left: 0; 34 | display: block; 35 | @extend %hidden; 36 | } 37 | 38 | // No Animations 39 | body > div#redeviation-bs-indicator.noAnimations, 40 | body > #redeviation-bs-sidebar.noAnimations, 41 | body > #redeviation-bs-overlay.noAnimations { 42 | 43 | &, &::before, &::after, > * { 44 | transition: none !important; 45 | } 46 | } 47 | 48 | // Print 49 | @media print { 50 | [id^='redeviation-bs-'] { 51 | display: none !important; 52 | } 53 | } -------------------------------------------------------------------------------- /src/scss/dark/_newtab.scss: -------------------------------------------------------------------------------- 1 | body.dark { 2 | background-color: $darkContentBackground; 3 | 4 | &::before { 5 | background: $darkContentBackground; 6 | } 7 | 8 | &.loading::before { 9 | background: rgba(0, 0, 0, 0.8); 10 | } 11 | } -------------------------------------------------------------------------------- /src/scss/dark/_overlay.scss: -------------------------------------------------------------------------------- 1 | 2 | body.dark div.modal { 3 | background: $darkContentBackground; 4 | 5 | > a.preview, > span.preview { 6 | background: rgba(255, 255, 255, 0.05); 7 | } 8 | 9 | > div.info { 10 | border-color: rgba(255, 255, 255, 0.1); 11 | } 12 | 13 | p.premium { 14 | 15 | > a { 16 | color: $__textColor; 17 | } 18 | } 19 | 20 | &[data-type='edit'], &[data-type='add'] { 21 | 22 | > ul > li { 23 | 24 | &.info { 25 | border-color: rgba(255, 255, 255, 0.1); 26 | } 27 | 28 | > input, > textarea, > select { 29 | border-color: rgba(255, 255, 255, 0.1); 30 | 31 | > option { 32 | background: $darkContentBackground2; 33 | } 34 | 35 | &.error { 36 | border-color: rgba($colorError, 0.5); 37 | } 38 | 39 | &:focus { 40 | border-color: rgba(255, 255, 255, 0.25); 41 | } 42 | } 43 | } 44 | } 45 | 46 | &[data-type='add'] { 47 | 48 | > menu:not(.buttons) { 49 | 50 | > a { 51 | background-color: $darkContentBackground2; 52 | 53 | &::before, &::after { 54 | opacity: 0.5; 55 | transition: opacity 0.5s; 56 | } 57 | 58 | &:hover { 59 | 60 | &::before { 61 | opacity: 1; 62 | background-color: $__textColor; 63 | } 64 | 65 | &::after { 66 | opacity: 1; 67 | color: $__textColor; 68 | } 69 | } 70 | } 71 | } 72 | 73 | > menu.buttons > a.action { 74 | display: none; 75 | 76 | &.visible { 77 | display: inline-block; 78 | } 79 | } 80 | } 81 | 82 | &[data-type='infos'] { 83 | 84 | > header::before { 85 | @include maskImage('icon-info'); 86 | } 87 | 88 | > ul.breadcrumb { 89 | 90 | &::before { 91 | background: linear-gradient(to right, $darkContentBackground 0%, transparent 100%); 92 | } 93 | 94 | > li { 95 | background: rgba(255, 255, 255, 0.08); 96 | 97 | &::before { 98 | border-left-color: $darkContentBackground; 99 | } 100 | 101 | &::after { 102 | border-left-color: rgba(255, 255, 255, 0.08); 103 | } 104 | } 105 | } 106 | 107 | > ul:not(.breadcrumb) { 108 | border-color: rgba(255, 255, 255, 0.1); 109 | 110 | > li > ul { 111 | background: $darkTooltipBackground; 112 | color: $darkTooltipTextColor; 113 | 114 | &::before { 115 | border-bottom-color: $darkTooltipBackground; 116 | } 117 | } 118 | } 119 | } 120 | 121 | &[data-type='keyboardShortcuts'] { 122 | 123 | &::after { 124 | background: $darkContentBackground2; 125 | } 126 | 127 | > div.scrollBox > div { 128 | 129 | > a { 130 | color: $__textColor; 131 | 132 | &::before { 133 | border-color: $__textColor; 134 | } 135 | } 136 | 137 | > ul { 138 | border-color: rgba(255, 255, 255, 0.1); 139 | 140 | > li > strong > i { 141 | display: inline-block; 142 | border: 1px solid rgba(255, 255, 255, 0.05); 143 | background: rgba(255, 255, 255, 0.05); 144 | } 145 | } 146 | } 147 | } 148 | 149 | > menu.buttons > a { 150 | color: $__textColor; 151 | 152 | &::before { 153 | background: $__textColor; 154 | } 155 | } 156 | } -------------------------------------------------------------------------------- /src/scss/dark/_sidebar.scss: -------------------------------------------------------------------------------- 1 | body.dark { 2 | 3 | section#sidebar { 4 | background: $darkContentBackground; 5 | 6 | &.permanent { 7 | border-color: rgba(255, 255, 255, 0.1); 8 | } 9 | 10 | > div.filter { 11 | background: $darkContentBackground2; 12 | } 13 | 14 | > span.drag { 15 | 16 | &:hover, &.isDragged { 17 | background: rgba(0, 0, 0, 0.2); 18 | } 19 | } 20 | 21 | > a.lockPinned { 22 | background: $darkContentBackground; 23 | box-shadow: 1px 1px 11px rgba(0, 0, 0, 0.2); 24 | } 25 | 26 | > div.scrollBox { 27 | 28 | > div.pinned { 29 | background-color: $darkContentBackground; 30 | 31 | &::after { 32 | background: $darkSeparatorColor; 33 | } 34 | } 35 | 36 | > ul, > div.pinned > ul { 37 | 38 | a { 39 | @include darkBookmarkEntry; 40 | 41 | > span.drag { 42 | 43 | &::before { 44 | background-color: $darkReorderIconColor; 45 | } 46 | 47 | &:hover { 48 | background-color: rgba(255, 255, 255, 0.1); 49 | 50 | &::before { 51 | background-color: $darkReorderIconColorActive; 52 | } 53 | } 54 | } 55 | } 56 | 57 | li { 58 | 59 | &.isDragged { 60 | width: calc(100% - 5px); 61 | border-color: rgba(255, 255, 255, 0.2); 62 | } 63 | 64 | &.dragHover { 65 | 66 | &::before { 67 | border-color: rgba(255, 255, 255, 0.2); 68 | } 69 | } 70 | } 71 | } 72 | } 73 | 74 | ~ a.dragHelper { 75 | @include darkBookmarkEntry; 76 | background: $darkContentBackground !important; 77 | } 78 | } 79 | 80 | div#infoBox { 81 | background: $darkContentBackground2; 82 | 83 | > a { 84 | color: $__textColor; 85 | 86 | &::before { 87 | background: $__textColor; 88 | } 89 | } 90 | } 91 | } -------------------------------------------------------------------------------- /src/scss/dark/include/_bookmarkEntry.scss: -------------------------------------------------------------------------------- 1 | @mixin darkBookmarkEntry { 2 | 3 | &.separator > span.label { 4 | 5 | &::after { 6 | background: $darkSeparatorColor; 7 | } 8 | 9 | &[data-name]::before { 10 | background: $darkContentBackground; 11 | box-shadow: 0 0 0 10px $darkContentBackground; 12 | } 13 | } 14 | 15 | > span.removeMask { 16 | background: $darkRemovedBackground; 17 | } 18 | 19 | > span.drag, > span.add { 20 | background-color: rgba(255, 255, 255, 0.1); 21 | 22 | &::before { 23 | background-color: $darkReorderIconColor; 24 | } 25 | 26 | &:hover { 27 | background-color: rgba(255, 255, 255, 0.25) !important; 28 | 29 | &::before { 30 | background-color: $darkReorderIconColorActive; 31 | } 32 | } 33 | } 34 | 35 | &.snap { 36 | background: $darkContentBackground; 37 | } 38 | } -------------------------------------------------------------------------------- /src/scss/dark/include/_checkbox.scss: -------------------------------------------------------------------------------- 1 | 2 | body.dark div.checkbox { 3 | 4 | &[data-style="default"] { 5 | 6 | &::after { 7 | box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); 8 | } 9 | 10 | &.focus::after, &.clicked::after { 11 | background: rgba(255, 255, 255, 0.5); 12 | box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.5); 13 | } 14 | 15 | &.active { 16 | 17 | &::before { 18 | background-color: $__textColor; 19 | } 20 | 21 | &::after { 22 | box-shadow: 0 0 0 0 $__textColor; 23 | } 24 | 25 | &.focus::after, &.clicked::after { 26 | background: $__textColor; 27 | box-shadow: 0 0 0 20px $__textColor; 28 | } 29 | } 30 | } 31 | 32 | &[data-style="switch"] { 33 | 34 | &::before { 35 | background: rgba(255, 255, 255, 0.15); 36 | } 37 | 38 | &::after { 39 | background-color: $textColorLight; 40 | } 41 | 42 | &.active { 43 | 44 | &::before, &::after { 45 | background-color: $textColorInverted; 46 | } 47 | } 48 | } 49 | } -------------------------------------------------------------------------------- /src/scss/dark/include/_contextmenu.scss: -------------------------------------------------------------------------------- 1 | body.dark div.contextmenu { 2 | background: $darkContentBackground2; 3 | box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); 4 | 5 | > ul.list > li > a { 6 | transition: opacity 0.3s; 7 | opacity: 0.7; 8 | 9 | &::before { 10 | background-color: $darkContextMenuIconColor; 11 | } 12 | 13 | &.hover { 14 | color: $__textColor; 15 | opacity: 1; 16 | 17 | &::before { 18 | background-color: $__textColor; 19 | opacity: 0.8; 20 | } 21 | } 22 | } 23 | 24 | > ul.icons { 25 | background: lighten($darkContentBackground2, 3%); 26 | 27 | > li { 28 | 29 | > a { 30 | 31 | &::before { 32 | background-color: $darkContextMenuIconColor; 33 | } 34 | 35 | &.hover { 36 | background-color: lighten($darkContentBackground2, 8%); 37 | } 38 | } 39 | 40 | > ul { 41 | background: $darkContentBackground; 42 | box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); 43 | 44 | &::before { 45 | border-bottom-color: $darkContentBackground; 46 | } 47 | 48 | > li { 49 | 50 | > a::before { 51 | background-color: $darkContextMenuIconColor; 52 | } 53 | } 54 | } 55 | } 56 | } 57 | } -------------------------------------------------------------------------------- /src/scss/dark/include/_linkchecker.scss: -------------------------------------------------------------------------------- 1 | 2 | body.dark div.modal { 3 | 4 | &[data-type='checkBookmarks'] { 5 | 6 | > menu.categories { 7 | border-color: $darkSeparatorColor; 8 | 9 | > li.active { 10 | background: $darkContentBackground2; 11 | 12 | &::after { 13 | border-color: $darkSeparatorColor; 14 | background: $darkContentBackground; 15 | } 16 | } 17 | } 18 | 19 | > div[id^='results_'] { 20 | 21 | > p, > ul { 22 | background: $darkContentBackground; 23 | } 24 | 25 | > ul > li { 26 | border-bottom-color: $darkSeparatorColor; 27 | 28 | a.urlCheckAction, a.urlCheckHide { 29 | 30 | &:hover { 31 | background-color: $darkContentBackground2; 32 | } 33 | } 34 | } 35 | } 36 | 37 | > div.progressBar { 38 | background: rgba(255, 255, 255, 0.1); 39 | 40 | > div { 41 | background: $__textColor; 42 | } 43 | } 44 | 45 | &.urlCheckResults { 46 | 47 | &::after { 48 | background: $darkContentBackground2; 49 | } 50 | } 51 | } 52 | } -------------------------------------------------------------------------------- /src/scss/dark/include/_loading.scss: -------------------------------------------------------------------------------- 1 | 2 | body.dark svg.loading > circle { 3 | stroke: $__textColor; 4 | } -------------------------------------------------------------------------------- /src/scss/dark/include/_scrollBox.scss: -------------------------------------------------------------------------------- 1 | 2 | body.dark .scrollBox { 3 | background-color: $darkScrollBarBackground; 4 | } 5 | -------------------------------------------------------------------------------- /src/scss/dark/include/_tooltip.scss: -------------------------------------------------------------------------------- 1 | 2 | body.dark { 3 | 4 | div.tooltip { 5 | color: $darkTooltipTextColor; 6 | background: $darkTooltipBackground; 7 | 8 | &::before { 9 | border-right-color: $darkTooltipBackground; 10 | } 11 | } 12 | 13 | section#sidebar[data-pos='right'] ~ div.tooltip::before { 14 | border-left-color: $darkTooltipBackground; 15 | } 16 | 17 | section#sidebar.sidepanel ~ div.tooltip::before { 18 | border-color: transparent; 19 | border-bottom-color: $darkTooltipBackground; 20 | } 21 | } -------------------------------------------------------------------------------- /src/scss/dark/include/newtab/_edit.scss: -------------------------------------------------------------------------------- 1 | body.dark { 2 | 3 | menu.infoBar { 4 | background: $darkContentBackground2; 5 | 6 | > a.save { 7 | color: $darkContentBackground2; 8 | } 9 | 10 | > div.upload { 11 | 12 | > a.remove { 13 | background: $darkContentBackground2; 14 | } 15 | 16 | > div { 17 | background: $darkContentBackground2; 18 | } 19 | 20 | > span.premium { 21 | background: $darkContentBackground2; 22 | 23 | &::after { 24 | border-left-color: $darkContentBackground2; 25 | } 26 | } 27 | } 28 | } 29 | 30 | > a.edit { 31 | 32 | &:hover { 33 | background: $darkContentBackground2; 34 | } 35 | } 36 | 37 | div.editLinkTooltip { 38 | background: $darkContentBackground2; 39 | filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.2)); 40 | transform: translate3d(0, 3px, 0); 41 | 42 | &::before { 43 | border-bottom-color: $darkContentBackground2; 44 | } 45 | 46 | > input[type='text'] { 47 | border-color: rgba(255, 255, 255, 0.2); 48 | 49 | &:focus { 50 | border-color: rgba(255, 255, 255, 0.4); 51 | } 52 | } 53 | 54 | > button[type='submit'] { 55 | color: $textColorLight; 56 | 57 | &[data-type="delete"] { 58 | color: rgba($textColorLight, 0.6); 59 | } 60 | } 61 | } 62 | 63 | &.edit { 64 | 65 | section#content > nav { 66 | 67 | select.edit { 68 | background: lighten($darkContentBackground2, 5%); 69 | } 70 | 71 | a.add { 72 | background: $darkContentBackground; 73 | 74 | &:hover { 75 | background: $darkContentBackground2; 76 | } 77 | } 78 | 79 | > ul > li { 80 | 81 | } 82 | } 83 | 84 | form#search { 85 | 86 | > select { 87 | background: lighten($darkContentBackground2, 5%); 88 | 89 | &.edit { 90 | background: lighten($darkContentBackground2, 5%); 91 | } 92 | } 93 | 94 | > a.edit:hover { 95 | background: lighten($darkContentBackground2, 5%); 96 | } 97 | } 98 | 99 | div#gridLinks { 100 | 101 | select { 102 | background: lighten($darkContentBackground2, 5%); 103 | } 104 | 105 | > div[data-type='gridsize'] > span.premium { 106 | background: $darkContentBackground2; 107 | 108 | &::after { 109 | border-left-color: $darkContentBackground2; 110 | } 111 | } 112 | } 113 | } 114 | 115 | &.customBackground { 116 | 117 | > a.edit { 118 | background-color: rgba($darkContentBackground, 0.7); 119 | 120 | &::before { 121 | background-color: $textColorLight; 122 | } 123 | } 124 | 125 | &.edit { 126 | 127 | form#search > select.edit { 128 | background: rgba($darkContentBackground, 0.7); 129 | } 130 | 131 | div#gridLinks { 132 | 133 | > select { 134 | background: rgba($darkContentBackground, 0.7); 135 | } 136 | 137 | > div[data-type='gridsize'] { 138 | background: rgba($darkContentBackground, 0.7); 139 | } 140 | 141 | &[data-type="custom"] > ul > li > a { 142 | 143 | > div { 144 | background: rgba($darkContentBackground, 0.7); 145 | box-shadow: 0 0 0 3px rgba($darkContentBackground, 0.7); 146 | } 147 | 148 | &:hover > div { 149 | background: rgba($darkContentBackground, 0.7); 150 | } 151 | 152 | &.dragHover { 153 | border-color: $__textColor; 154 | } 155 | } 156 | } 157 | 158 | section#content > nav { 159 | 160 | > ul > li > a { 161 | background: rgba($darkContentBackground, 0.7); 162 | box-shadow: 0 0 0 3px rgba($darkContentBackground, 0.7); 163 | 164 | &:hover { 165 | background: rgba($darkContentBackground, 0.7); 166 | } 167 | } 168 | } 169 | } 170 | } 171 | 172 | &[data-pos='right'] { 173 | 174 | menu.infoBar { 175 | 176 | > div.upload { 177 | 178 | > span.premium { 179 | 180 | &::after { 181 | border-left-color: transparent; 182 | border-right-color: $darkContentBackground2; 183 | } 184 | } 185 | } 186 | } 187 | } 188 | } -------------------------------------------------------------------------------- /src/scss/dark/include/newtab/_fallback.scss: -------------------------------------------------------------------------------- 1 | 2 | body.dark { 3 | 4 | div#fallbackInfo { 5 | 6 | > a { 7 | color: $__textColor; 8 | } 9 | } 10 | 11 | &.customBackground div#fallbackInfo { 12 | background: rgba($darkContentBackground, 0.7); 13 | } 14 | } -------------------------------------------------------------------------------- /src/scss/dark/include/newtab/_gridLinks.scss: -------------------------------------------------------------------------------- 1 | 2 | body.dark { 3 | 4 | div#gridLinks { 5 | 6 | > ul > li > a { 7 | 8 | > div { 9 | background: $darkContentBackground2; 10 | } 11 | 12 | &:hover { 13 | background: rgba($darkContentBackground2, 0.5); 14 | 15 | > div { 16 | border-color: rgba(255, 255, 255, 0.03); 17 | box-shadow: 0 3px 20px rgba(0, 0, 0, 0.3); 18 | } 19 | } 20 | } 21 | } 22 | 23 | &.customBackground div#gridLinks { 24 | 25 | > ul > li { 26 | 27 | > a { 28 | 29 | &:hover { 30 | background: rgba($darkContentBackground2, 0.4); 31 | } 32 | 33 | > div { 34 | background: rgba($darkContentBackground, 0.7); 35 | } 36 | 37 | > span { 38 | color: $__textColor; 39 | text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8); 40 | } 41 | } 42 | } 43 | } 44 | } -------------------------------------------------------------------------------- /src/scss/dark/include/newtab/_overlay.scss: -------------------------------------------------------------------------------- 1 | body.dark { 2 | 3 | div.modal[data-type='searchEngine'] { 4 | 5 | &::after { 6 | background: $darkContentBackground2; 7 | } 8 | 9 | > div.scrollBox { 10 | 11 | > ul { 12 | 13 | > li > a:hover { 14 | color: $__textColor; 15 | } 16 | 17 | &[data-type='custom'] > li > input { 18 | border-color: rgba(255, 255, 255, 0.1); 19 | 20 | &:focus { 21 | border-color: rgba(255, 255, 255, 0.25); 22 | } 23 | } 24 | } 25 | } 26 | } 27 | } -------------------------------------------------------------------------------- /src/scss/dark/include/newtab/_search.scss: -------------------------------------------------------------------------------- 1 | 2 | body.dark { 3 | 4 | form#search { 5 | 6 | > input[type='text'] { 7 | background: $darkContentBackground2; 8 | } 9 | 10 | > button[type="submit"]:hover, > a.speechSearch:hover { 11 | background: lighten($darkContentBackground2, 5%); 12 | } 13 | 14 | > ul.suggestions { 15 | filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.1)); 16 | 17 | > li { 18 | background: $darkContentBackground2; 19 | 20 | &::after { 21 | background: $darkContentBackground2; 22 | } 23 | } 24 | } 25 | } 26 | 27 | &.customBackground form#search { 28 | 29 | > input[type='text'] { 30 | background: rgba($darkContentBackground, 0.7); 31 | } 32 | 33 | > button[type="submit"]::before, > a.speechSearch::before { 34 | background: $textColorLight; 35 | } 36 | } 37 | } -------------------------------------------------------------------------------- /src/scss/dark/include/newtab/_topLinks.scss: -------------------------------------------------------------------------------- 1 | 2 | body.dark { 3 | 4 | section#content { 5 | 6 | > nav > ul > li > a { 7 | 8 | &:hover { 9 | background: $darkContentBackground2; 10 | } 11 | } 12 | } 13 | 14 | &.customBackground section#content > nav > ul > li > a { 15 | background: rgba($darkContentBackground,0.7); 16 | } 17 | } -------------------------------------------------------------------------------- /src/scss/highContrast/_overlay.scss: -------------------------------------------------------------------------------- 1 | 2 | body.highContrast:not(.dark) div.modal { 3 | 4 | > header { 5 | 6 | > a.close:hover { 7 | background-color: rgba(0, 0, 0, 0.07); 8 | } 9 | } 10 | 11 | p.premium { 12 | 13 | > a { 14 | color: $__textColor; 15 | } 16 | } 17 | 18 | &[data-type='add'] { 19 | 20 | > menu[data-name='select'] { 21 | 22 | > a { 23 | 24 | &.hover { 25 | 26 | &::before { 27 | background-color: $__textColor; 28 | } 29 | 30 | &::after { 31 | color: $__textColor; 32 | } 33 | } 34 | } 35 | } 36 | 37 | > menu.buttons > a.action { 38 | display: none; 39 | 40 | &.visible { 41 | display: inline-block; 42 | } 43 | } 44 | } 45 | 46 | &[data-type='keyboardShortcuts'] { 47 | 48 | > div.scrollBox > div > a { 49 | color: $__textColor; 50 | 51 | &::before { 52 | border-color: $__textColor; 53 | } 54 | } 55 | } 56 | 57 | > menu.buttons { 58 | 59 | > a { 60 | color: $__textColor; 61 | 62 | &::before { 63 | background: $__textColor; 64 | } 65 | } 66 | } 67 | } -------------------------------------------------------------------------------- /src/scss/highContrast/_sidebar.scss: -------------------------------------------------------------------------------- 1 | body.highContrast:not(.dark) { 2 | 3 | section#sidebar { 4 | 5 | > header { 6 | 7 | > a { 8 | 9 | &:hover, &.active { 10 | background-color: rgba(0, 0, 0, 0.07); 11 | } 12 | } 13 | 14 | > div.searchBox { 15 | background-color: rgba(0, 0, 0, 0.07); 16 | 17 | > a.searchClose:hover { 18 | background-color: rgba(0, 0, 0, 0.07); 19 | } 20 | } 21 | } 22 | } 23 | 24 | div#infoBox { 25 | 26 | > a { 27 | color: $__textColor; 28 | 29 | &::before { 30 | background: $__textColor; 31 | } 32 | } 33 | } 34 | } -------------------------------------------------------------------------------- /src/scss/highContrast/include/_checkbox.scss: -------------------------------------------------------------------------------- 1 | 2 | body.highContrast:not(.dark) div.checkbox { 3 | 4 | &[data-style="default"] { 5 | 6 | &.active { 7 | 8 | &::before { 9 | background-color: $__textColor; 10 | } 11 | 12 | &::after { 13 | box-shadow: 0 0 0 0 $__textColor; 14 | } 15 | 16 | &.focus::after, &.clicked::after { 17 | background: $__textColor; 18 | box-shadow: 0 0 0 20px $__textColor; 19 | } 20 | } 21 | } 22 | 23 | &[data-style="switch"] { 24 | 25 | &.active { 26 | 27 | &::before, &::after { 28 | background-color: $__textColor; 29 | } 30 | } 31 | } 32 | } -------------------------------------------------------------------------------- /src/scss/highContrast/include/_contextmenu.scss: -------------------------------------------------------------------------------- 1 | body.highContrast:not(.dark) div.contextmenu { 2 | 3 | > ul.list > li > a { 4 | transition: opacity 0.3s; 5 | 6 | &.hover { 7 | color: $__textColor; 8 | opacity: 1; 9 | 10 | &::before { 11 | background-color: $__textColor; 12 | opacity: 0.8; 13 | } 14 | } 15 | } 16 | } -------------------------------------------------------------------------------- /src/scss/highContrast/include/_linkchecker.scss: -------------------------------------------------------------------------------- 1 | body.highContrast:not(.dark) div.modal { 2 | 3 | &[data-type='checkBookmarks'] { 4 | 5 | > div.progressBar { 6 | 7 | > div { 8 | background: $__textColor; 9 | } 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/scss/highContrast/include/_loading.scss: -------------------------------------------------------------------------------- 1 | 2 | body.highContrast:not(.dark) svg.loading > circle { 3 | stroke: $__textColor; 4 | } -------------------------------------------------------------------------------- /src/scss/highContrast/include/newtab/_fallback.scss: -------------------------------------------------------------------------------- 1 | 2 | body.highContrast:not(.dark) div#fallbackInfo { 3 | 4 | > a { 5 | color: $__textColor; 6 | } 7 | } -------------------------------------------------------------------------------- /src/scss/highContrast/include/newtab/_overlay.scss: -------------------------------------------------------------------------------- 1 | body.highContrast:not(.dark) div.modal[data-type='searchEngine'] { 2 | 3 | > div.scrollBox > ul > li > a:hover { 4 | color: $__textColor; 5 | } 6 | } -------------------------------------------------------------------------------- /src/scss/include/_checkbox.scss: -------------------------------------------------------------------------------- 1 | 2 | div.checkbox { 3 | position: relative; 4 | cursor: pointer; 5 | 6 | > input[type='checkbox'] { 7 | display: none; 8 | } 9 | 10 | &[data-style="default"] { 11 | @include mask(null, $__textColor, 22px); 12 | width: 20px; 13 | height: 20px; 14 | 15 | &::before { 16 | transition: -webkit-mask 0.3s, background-color 0.3s; 17 | } 18 | 19 | &[data-type='checkbox']::before { 20 | @include maskImage('icon-checkbox-inactive'); 21 | } 22 | 23 | &[data-type='radio']::before { 24 | @include maskImage('icon-radio-inactive'); 25 | } 26 | 27 | &::after { 28 | content: ""; 29 | position: absolute; 30 | top: calc(50% - 10px); 31 | left: calc(50% - 10px); 32 | width: 20px; 33 | height: 20px; 34 | border-radius: 50%; 35 | pointer-events: none; 36 | box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5); 37 | transition: background 0.2s, box-shadow 0.2s, opacity 0.5s; 38 | opacity: 0.2; 39 | } 40 | 41 | &.focus::after, &.clicked::after { 42 | background: rgba(0, 0, 0, 0.5); 43 | box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.5); 44 | } 45 | 46 | &.clicked::after { 47 | opacity: 0; 48 | } 49 | 50 | &.active { 51 | 52 | &::before { 53 | background-color: $__colorScheme; 54 | } 55 | 56 | &[data-type='checkbox']::before { 57 | @include maskImage('icon-checkbox'); 58 | } 59 | 60 | &[data-type='radio']::before { 61 | @include maskImage('icon-radio'); 62 | } 63 | 64 | &::after { 65 | box-shadow: 0 0 0 0 $__colorScheme; 66 | } 67 | 68 | &.focus::after, &.clicked::after { 69 | background: $__colorScheme; 70 | box-shadow: 0 0 0 10px $__colorScheme; 71 | } 72 | } 73 | } 74 | 75 | &[data-style="switch"] { 76 | width: 32px; 77 | height: 14px; 78 | transition: padding-left 0.2s, opacity 0.2s; 79 | 80 | &::before { 81 | content: ""; 82 | position: absolute; 83 | top: 0; 84 | left: 0; 85 | width: 100%; 86 | height: 100%; 87 | border-radius: 14px; 88 | background: rgba(0, 0, 0, 0.2); 89 | transition: background 0.2s, opacity 0.2s; 90 | } 91 | 92 | &::after { 93 | content: ""; 94 | position: relative; 95 | display: block; 96 | top: -3px; 97 | left: -3px; 98 | width: 20px; 99 | height: 20px; 100 | background-color: $textColorInverted; 101 | transition: background-color 0.2s; 102 | box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.4); 103 | border-radius: 50%; 104 | } 105 | 106 | &.active { 107 | padding-left: 18px; 108 | 109 | &::before { 110 | opacity: 0.4; 111 | } 112 | 113 | &::before, &::after { 114 | background-color: $__colorScheme; 115 | } 116 | } 117 | } 118 | } 119 | 120 | @import "../rtl/include/checkbox"; 121 | @import "../highContrast/include/checkbox"; 122 | @import "../dark/include/checkbox"; -------------------------------------------------------------------------------- /src/scss/include/_generals.scss: -------------------------------------------------------------------------------- 1 | 2 | *, *::after, *::before { 3 | padding: 0; 4 | margin: 0; 5 | box-sizing: border-box; 6 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 7 | } 8 | 9 | body, input, textarea, select, button { 10 | font-size: $baseFontSize; 11 | font-family: $__fontFamily, sans-serif; 12 | color: $textColor; 13 | font-weight: $__fontWeightNormal; 14 | } 15 | 16 | ul, menu { 17 | list-style: none; 18 | } 19 | 20 | strong { 21 | font-weight: $__fontWeightBold; 22 | } 23 | 24 | a { 25 | color: $textColor; 26 | text-decoration: none; 27 | } -------------------------------------------------------------------------------- /src/scss/include/_loading.scss: -------------------------------------------------------------------------------- 1 | $size: 36px; 2 | $offset: 2 * 3.14159265359 * 16; 3 | $duration: 1.5s; 4 | 5 | @keyframes rotator { 6 | 0% { 7 | transform: rotate(0deg); 8 | } 9 | 100% { 10 | transform: rotate(270deg); 11 | } 12 | } 13 | 14 | @keyframes dash { 15 | 0% { 16 | stroke-dashoffset: $offset; 17 | } 18 | 50% { 19 | stroke-dashoffset: calc($offset / 4); 20 | transform: rotate(135deg); 21 | } 22 | 100% { 23 | stroke-dashoffset: $offset; 24 | transform: rotate(450deg); 25 | } 26 | } 27 | 28 | svg.loading { 29 | position: relative; 30 | display: block; 31 | width: $size; 32 | height: $size; 33 | animation: rotator $duration linear infinite; 34 | 35 | > circle { 36 | stroke-dasharray: $offset; 37 | stroke-dashoffset: 0; 38 | transform-origin: center; 39 | stroke: $__colorScheme; 40 | animation: dash $duration ease-in-out infinite; 41 | } 42 | } 43 | 44 | @import "../dark/include/loading"; 45 | @import "../highContrast/include/loading"; -------------------------------------------------------------------------------- /src/scss/include/_mixins.scss: -------------------------------------------------------------------------------- 1 | 2 | %hidden { 3 | opacity: 0; 4 | pointer-events: none; 5 | } 6 | 7 | %visible { 8 | opacity: 1; 9 | pointer-events: auto; 10 | } 11 | 12 | %modalFooterBackground { 13 | 14 | &::after { 15 | content: ""; 16 | position: absolute; 17 | bottom: 0; 18 | left: 0; 19 | width: 100%; 20 | height: 57px; 21 | z-index: 2; 22 | background: $contentBackground2; 23 | } 24 | } 25 | 26 | @mixin maskImage($icon) { 27 | -webkit-mask-image: url(chrome-extension://__MSG_@@extension_id__/img/#{$icon}.svg); 28 | } 29 | 30 | @mixin mask($icon,$color,$size) { 31 | &::before { 32 | content: ""; 33 | position: absolute; 34 | top: 0; 35 | left: 0; 36 | width: 100%; 37 | height: 100%; 38 | -webkit-mask: no-repeat center / $size; 39 | @if ($icon) { 40 | @include maskImage($icon); 41 | } 42 | background-color: $color; 43 | } 44 | } 45 | 46 | @function img($path) { 47 | @return url(chrome-extension://__MSG_@@extension_id__/img/#{$path}); 48 | } -------------------------------------------------------------------------------- /src/scss/include/_scrollBox.scss: -------------------------------------------------------------------------------- 1 | .scrollBox { 2 | position: relative; 3 | overflow-y: scroll; 4 | overflow-x: hidden; 5 | outline: none; 6 | background-color: $scrollBarBackground; 7 | -webkit-background-clip: text; 8 | transition: background-color 0.3s; 9 | 10 | &::-webkit-scrollbar { 11 | width: $__scrollBarWidth; 12 | background: transparent; 13 | } 14 | 15 | &::-webkit-scrollbar-thumb { 16 | border-radius: 20px; 17 | border: 3px solid transparent; 18 | background-clip: content-box; 19 | background-color: inherit; 20 | } 21 | 22 | &::-webkit-scrollbar-track { 23 | background: transparent; 24 | border-radius: 20px; 25 | } 26 | 27 | &.hideScrollbar { 28 | background-color: transparent !important; 29 | } 30 | } 31 | 32 | @import "../dark/include/scrollBox"; 33 | -------------------------------------------------------------------------------- /src/scss/include/_settingsMixins.scss: -------------------------------------------------------------------------------- 1 | 2 | @mixin bubble { 3 | position: relative; 4 | margin-top: 2px; 5 | background: $bodyBackground; 6 | padding: 10px 12px; 7 | border-radius: 10px; 8 | 9 | &::before { 10 | content: ""; 11 | position: absolute; 12 | top: -14px; 13 | left: 30px; 14 | border: 7px solid transparent; 15 | border-bottom-color: $bodyBackground; 16 | } 17 | 18 | p + p { 19 | margin-top: 10px; 20 | } 21 | } 22 | 23 | @mixin bubbleRtl { 24 | 25 | &::before { 26 | right: 20px; 27 | left: unset; 28 | } 29 | } 30 | 31 | %button { 32 | position: relative; 33 | overflow: hidden; 34 | display: inline-block; 35 | border: 0; 36 | outline: 0; 37 | cursor: pointer; 38 | background: $textColor; 39 | color: $textColorInverted; 40 | padding: 6px 12px; 41 | font-weight: $__fontWeightMedium; 42 | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); 43 | font-size: 100%; 44 | border-radius: 20px; 45 | } 46 | 47 | %highlightButton { 48 | @extend %button; 49 | background: $mainColor2; 50 | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); 51 | } -------------------------------------------------------------------------------- /src/scss/include/_tooltip.scss: -------------------------------------------------------------------------------- 1 | 2 | div.tooltip { 3 | position: absolute; 4 | background: $tooltipBackground; 5 | border-radius: 2px; 6 | color: $tooltipTextColor; 7 | padding: 2px 4px 3px; 8 | max-width: 300px; 9 | font-size: $__tooltipFontSize; 10 | z-index: 2; 11 | transform: translate3d(-5px, 0, 0); 12 | transition: opacity 0.3s, transform 0.3s; 13 | @extend %hidden; 14 | 15 | &.visible { 16 | opacity: 1; 17 | transform: translate3d(0, 0, 0) !important; 18 | } 19 | 20 | > h3[data-num]::after { // for appearance preview 21 | content: " " attr(data-num); 22 | } 23 | 24 | &::before { 25 | content: ""; 26 | position: absolute; 27 | top: calc(50% - 6px); 28 | left: -12px; 29 | border: 6px solid transparent; 30 | border-right-color: $tooltipBackground; 31 | } 32 | 33 | > h3 { 34 | font-weight: $__fontWeightNormal; 35 | } 36 | 37 | > span { 38 | opacity: 0.7; 39 | word-wrap: break-word; 40 | } 41 | 42 | > p { 43 | margin-top: 5px; 44 | padding-top: 3px; 45 | border-top: 1px solid rgba($tooltipTextColor, 0.7); 46 | } 47 | 48 | > ul.breadcrumb { 49 | margin-top: 4px; 50 | padding: 2px 0; 51 | border-top: 1px solid rgba($tooltipTextColor, 0.7); 52 | 53 | > li { 54 | display: inline-block; 55 | 56 | &:not(:last-child)::after { 57 | content: ">"; 58 | margin: 0 4px; 59 | opacity: 0.7; 60 | } 61 | } 62 | } 63 | } 64 | 65 | section#sidebar[data-pos='right'] ~ div.tooltip { 66 | transform: translate3d(5px, 0, 0); 67 | 68 | &::before { 69 | left: auto; 70 | right: -12px; 71 | border-right-color: transparent; 72 | border-left-color: $tooltipBackground; 73 | } 74 | } 75 | 76 | section#sidebar.sidepanel ~ div.tooltip { 77 | transform: translate3d(0, -5px, 0); 78 | 79 | &::before { 80 | top: -12px; 81 | width: 0; 82 | left: 0; 83 | right: 0; 84 | margin: auto; 85 | border-color: transparent; 86 | border-bottom-color: $tooltipBackground; 87 | } 88 | } 89 | 90 | @import "../dark/include/tooltip"; 91 | -------------------------------------------------------------------------------- /src/scss/include/_vars.scss: -------------------------------------------------------------------------------- 1 | // General 2 | $baseFontSize: 14px; 3 | 4 | $mainColor1: #8741ed; 5 | $mainColor2: #6494f4; 6 | $mainColor3: #00e5fd; 7 | 8 | $gradient: linear-gradient(45deg, $mainColor1 0%, $mainColor3 100%); 9 | $gradientRtl: linear-gradient(-45deg, $mainColor1 0%, $mainColor3 100%); 10 | 11 | $textColor: #666; 12 | $textColorLight: #aaa; 13 | $textColorLight2: #ccc; 14 | $textColorInverted: #fff; 15 | $contentBackground: #fff; 16 | $bodyBackground: #f2f2f2; 17 | 18 | $colorSuccess: #5eba7d; 19 | $colorNotice: #f5c525; 20 | $colorError: #f99; 21 | 22 | // Settings 23 | $settingsHeaderHeight: 50px; 24 | $settingsMenuWidth: 250px; 25 | $settingsMenuBackground: #322e2f; 26 | $settingsMenuHoverBackground: rgba(255, 255, 255, 0.07); 27 | 28 | // New tab 29 | $newTabSearchWidth: 630px; 30 | $newTabSearchHeight: 54px; 31 | 32 | // Sidebar 33 | $contentBackground2: #f5f5f5; 34 | $scrollBarBackground: #ccc; 35 | $contextMenuIconColor: #ccc; 36 | $reorderIconColor: #aaa; 37 | $reorderIconColorActive: #888; 38 | $removedBackground: #ddd; 39 | $tooltipTextColor: #fff; 40 | $tooltipBackground: #444; 41 | $separatorColor: rgba(0, 0, 0, 0.15); 42 | 43 | $darkContentBackground: #3d3d3d; 44 | $darkContentBackground2: #4d4d4d; 45 | $darkScrollBarBackground: #999; 46 | $darkContextMenuIconColor: #999; 47 | $darkReorderIconColor: #bbb; 48 | $darkReorderIconColorActive: #eee; 49 | $darkRemovedBackground: #666; 50 | $darkTooltipTextColor: #eee; 51 | $darkTooltipBackground: #222; 52 | $darkSeparatorColor: rgba(255, 255, 255, 0.15); 53 | 54 | $demoColors: #37bf99 #d737d5 #3e6bf2 #f4572f #f74b58 #f5a2bf #1a90ba #b4bd0e #fdde32 #8ccbce; 55 | 56 | // Dynamic 57 | $__colorScheme: "%colorScheme"; 58 | $__foregroundColor: "%foregroundColor"; 59 | $__textColor: "%textColor"; 60 | $__hoverColor: "%hoverColor"; 61 | $__sidebarWidth: "%sidebarWidth"; 62 | $__sidebarHeaderHeight: "%sidebarHeaderHeight"; 63 | $__overlayHeaderHeight: "%overlayHeaderHeight"; 64 | $__sidebarMaskColor: "%sidebarMaskColor"; 65 | $__bookmarksFontSize: "%bookmarksFontSize"; 66 | $__bookmarksIconSize: "%bookmarksIconSize"; 67 | $__directoriesIconSize: "%directoriesIconSize"; 68 | $__bookmarksLineHeight: "%bookmarksLineHeight"; 69 | $__bookmarksDirIcon: "%bookmarksDirIcon"; 70 | $__bookmarksDirColor: "%bookmarksDirColor"; 71 | $__bookmarksDirIndentation: "%bookmarksDirIndentation"; 72 | $__bookmarksHorizontalPadding: "%bookmarksHorizontalPadding"; 73 | $__tooltipFontSize: "%tooltipFontSize"; 74 | $__scrollBarWidth: "%scrollBarWidth"; 75 | $__indicatorWidth: "%indicatorWidth"; 76 | $__indicatorIconSize: "%indicatorIconSize"; 77 | $__indicatorIconColor: "%indicatorIconColor"; 78 | $__indicatorColor: "%indicatorColor"; 79 | $__overlayMaskColor: "%overlayMaskColor"; 80 | 81 | $__backgroundTransparency: "%backgroundTransparency"; 82 | $__backgroundBlur: "%backgroundBlur"; 83 | 84 | $__fontFamily: "%fontFamily"; 85 | $__fontWeightThin: "%fontWeightThin"; // 100 86 | $__fontWeightExtraLight: "%fontWeightExtraLight"; // 200 87 | $__fontWeightLight: "%fontWeightLight"; // 300 88 | $__fontWeightNormal: "%fontWeightNormal"; // 400 89 | $__fontWeightMedium: "%fontWeightMedium"; // 500 90 | $__fontWeightSemiBold: "%fontWeightSemiBold"; // 600 91 | $__fontWeightBold: "%fontWeightBold"; // 700 92 | $__fontWeightExtraBold: "%fontWeightExtraBold"; // 800 93 | $__fontWeightBlack: "%fontWeightBlack"; // 900 -------------------------------------------------------------------------------- /src/scss/include/newtab/_fallback.scss: -------------------------------------------------------------------------------- 1 | 2 | div#fallbackInfo { 3 | @include mask('icon-info', $textColorLight, 24px); 4 | position: relative; 5 | width: 100%; 6 | max-width: 650px; 7 | padding: 15px 40px; 8 | margin: 25px 0 20px 0; 9 | display: none; 10 | 11 | &::before { 12 | top: 15px; 13 | left: 10px; 14 | width: 24px; 15 | height: 24px; 16 | } 17 | 18 | &.active { 19 | display: block; 20 | } 21 | 22 | > h2 { 23 | font-weight: $__fontWeightNormal; 24 | font-size: 140%; 25 | } 26 | 27 | > p { 28 | font-weight: $__fontWeightNormal; 29 | color: $textColorLight; 30 | font-size: 120%; 31 | margin: 7px 0 25px 0; 32 | } 33 | 34 | > a { 35 | font-weight: $__fontWeightMedium; 36 | cursor: pointer; 37 | color: $__colorScheme; 38 | font-size: 110%; 39 | } 40 | 41 | > div { 42 | margin-top: 30px; 43 | padding-top: 30px; 44 | border-top: 1px solid rgba(0, 0, 0, 0.1); 45 | 46 | > div.checkbox { 47 | display: inline-block; 48 | 49 | + span { 50 | display: inline-block; 51 | vertical-align: top; 52 | margin: -1px 0 0 15px; 53 | } 54 | } 55 | } 56 | } 57 | 58 | body.customBackground div#fallbackInfo { 59 | background: rgba($contentBackground, 0.8); 60 | } 61 | 62 | @import "../../rtl/include/newtab/fallback"; 63 | @import "../../highContrast/include/newtab/fallback"; 64 | @import "../../dark/include/newtab/fallback"; -------------------------------------------------------------------------------- /src/scss/include/newtab/_gridLinks.scss: -------------------------------------------------------------------------------- 1 | div#gridLinks { 2 | margin: 50px auto 0; 3 | text-align: center; 4 | 5 | &.hidden { 6 | display: none; 7 | } 8 | 9 | > ul { 10 | display: grid; 11 | grid-template-columns: 1fr 1fr 1fr 1fr; 12 | text-align: left; 13 | width: min-content; 14 | margin: auto; 15 | transition: opacity 0.2s; 16 | @extend %hidden; 17 | 18 | &.visible { 19 | @extend %visible; 20 | } 21 | 22 | > li { 23 | position: relative; 24 | display: block; 25 | font-size: 90%; 26 | font-weight: $__fontWeightMedium; 27 | padding: 17px 0; 28 | 29 | &.hidden { 30 | display: none; 31 | } 32 | 33 | > a { 34 | display: block; 35 | margin: 0 auto; 36 | padding: 5px 0 0 0; 37 | width: 145px; 38 | text-align: center; 39 | border-radius: 5px; 40 | transition: background 0.3s; 41 | 42 | &[data-value="empty"] { 43 | visibility: hidden; 44 | } 45 | 46 | > div { 47 | position: relative; 48 | width: 52px; 49 | height: 52px; 50 | padding: 15px; 51 | margin: 0 auto 5px; 52 | background: $contentBackground; 53 | box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1); 54 | border: 1px solid rgba(0, 0, 0, 0.1); 55 | border-radius: 50%; 56 | transition: border-color 0.3s, box-shadow 0.3s; 57 | 58 | > img { 59 | display: block; 60 | width: 100%; 61 | } 62 | } 63 | 64 | > span { 65 | display: block; 66 | padding: 5px 7px; 67 | white-space: nowrap; 68 | text-overflow: ellipsis; 69 | overflow: hidden; 70 | } 71 | 72 | &:hover { 73 | background: darken($bodyBackground, 5%); 74 | 75 | > div { 76 | border-color: rgba(0, 0, 0, 0.2); 77 | box-shadow: 0 3px 20px rgba(0, 0, 0, 0.15); 78 | } 79 | } 80 | } 81 | } 82 | } 83 | } 84 | 85 | form#search.hidden ~ div#gridLinks { 86 | margin-top: 0; 87 | } 88 | 89 | body.customBackground div#gridLinks { 90 | 91 | > ul > li > a { 92 | 93 | &:hover { 94 | background: rgba($contentBackground, 0.3); 95 | } 96 | 97 | > div { 98 | background: rgba($contentBackground, 0.8); 99 | } 100 | 101 | > span { 102 | color: $textColorInverted; 103 | text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7); 104 | } 105 | } 106 | } 107 | 108 | @import "../../rtl/include/newtab/gridLinks"; 109 | @import "../../dark/include/newtab/gridLinks"; -------------------------------------------------------------------------------- /src/scss/include/newtab/_overlay.scss: -------------------------------------------------------------------------------- 1 | 2 | div.modal[data-type='searchEngine'] { 3 | @extend %modalFooterBackground; 4 | width: 600px; 5 | height: 550px; 6 | max-height: 100%; 7 | 8 | > header::before { 9 | @include maskImage('icon-search'); 10 | } 11 | 12 | > div.scrollBox { 13 | 14 | > ul { 15 | margin: 30px 30px 0 30px; 16 | 17 | > li { 18 | position: relative; 19 | padding: 0 5px 0 32px; 20 | 21 | > div.checkbox { 22 | position: absolute; 23 | z-index: 2; 24 | top: 0; 25 | bottom: 0; 26 | margin: auto; 27 | left: 0; 28 | } 29 | 30 | > a { 31 | display: inline-block; 32 | line-height: 39px; 33 | font-weight: $__fontWeightMedium; 34 | cursor: pointer; 35 | transition: color 0.3s; 36 | 37 | &:hover { 38 | color: $__colorScheme; 39 | } 40 | 41 | > img { 42 | display: inline-block; 43 | width: 18px; 44 | height: 18px; 45 | margin-right: 8px; 46 | vertical-align: middle; 47 | } 48 | } 49 | } 50 | 51 | &[data-type='custom'] { 52 | margin-top: 0; 53 | margin-bottom: 20px; 54 | padding: 0 30px; 55 | display: none; 56 | 57 | &.visible { 58 | display: block; 59 | } 60 | 61 | > li { 62 | margin: 0 0 12px 0; 63 | padding: 2px; 64 | 65 | > label { 66 | display: block; 67 | font-size: 100%; 68 | font-weight: $__fontWeightMedium; 69 | } 70 | 71 | > input { 72 | width: 100%; 73 | max-width: 400px; 74 | background: transparent; 75 | font-size: 120%; 76 | padding: 5px 8px; 77 | margin-top: 5px; 78 | border-radius: 5px; 79 | outline: none; 80 | box-shadow: none; 81 | transition: border-color 0.5s; 82 | border: 1px solid rgba(0, 0, 0, 0.15); 83 | 84 | &:focus { 85 | border-color: rgba(0, 0, 0, 0.3); 86 | } 87 | } 88 | } 89 | } 90 | } 91 | } 92 | } 93 | 94 | @import "../../rtl/include/newtab/overlay"; 95 | @import "../../dark/include/newtab/overlay"; 96 | @import "../../highContrast/include/newtab/overlay"; -------------------------------------------------------------------------------- /src/scss/include/newtab/_search.scss: -------------------------------------------------------------------------------- 1 | 2 | form#search { 3 | position: relative; 4 | display: block; 5 | margin: 0 auto; 6 | width: 100%; 7 | max-width: 650px; 8 | padding: 0 10px; 9 | height: $newTabSearchHeight; 10 | 11 | &.hidden { 12 | display: none; 13 | } 14 | 15 | > input[type='text'] { 16 | width: 100%; 17 | height: 100%; 18 | border-radius: calc($newTabSearchHeight / 2); 19 | padding: 0 90px 0 30px; 20 | border: none; 21 | outline: none; 22 | font-size: 125%; 23 | background: $contentBackground; 24 | box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); 25 | 26 | &::-webkit-input-placeholder { 27 | color: $__textColor; 28 | opacity: 0.7; 29 | } 30 | 31 | &::-moz-placeholder { 32 | color: $__textColor; 33 | opacity: 0.7; 34 | } 35 | } 36 | 37 | > button, > a { 38 | position: absolute; 39 | top: 0; 40 | bottom: 0; 41 | margin: auto; 42 | outline: none; 43 | border: none; 44 | background: none; 45 | border-radius: 50%; 46 | cursor: pointer; 47 | transition: background 0.3s; 48 | 49 | &:hover { 50 | background: $bodyBackground; 51 | } 52 | } 53 | 54 | > button[type="submit"] { 55 | @include mask('icon-search', $textColorLight, 26px); 56 | right: 15px; 57 | width: calc(#{$newTabSearchHeight} - 8px); 58 | height: calc(#{$newTabSearchHeight} - 8px); 59 | } 60 | 61 | > a.speechSearch { 62 | @include mask('icon-speech', $textColorLight, 20px); 63 | right: 60px; 64 | width: calc(#{$newTabSearchHeight} - 20px); 65 | height: calc(#{$newTabSearchHeight} - 20px); 66 | } 67 | 68 | > ul.suggestions { 69 | position: absolute; 70 | width: calc(100% - 20px); 71 | padding: #{$newTabSearchHeight + 1px} 20px 0; 72 | pointer-events: none; 73 | filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.1)); 74 | z-index: 2; 75 | 76 | > li { 77 | @include mask(null, $textColorLight, 16px); 78 | position: relative; 79 | background: $contentBackground; 80 | white-space: nowrap; 81 | text-overflow: ellipsis; 82 | overflow: hidden; 83 | pointer-events: auto; 84 | font-size: 110%; 85 | padding: 6px 10px 6px 30px; 86 | transition: background 0.1s; 87 | 88 | &::after { // workaround to handle semitransparent hoverColors with a mask behind the suggestion entry 89 | content: ""; 90 | position: absolute; 91 | top: 0; 92 | left: 0; 93 | width: 100%; 94 | height: 100%; 95 | background: $contentBackground; 96 | z-index: -1; 97 | } 98 | 99 | > span { 100 | display: block; 101 | margin: 3px 0 0 0; 102 | font-size: 70%; 103 | color: $textColorLight; 104 | white-space: nowrap; 105 | text-overflow: ellipsis; 106 | overflow: hidden; 107 | } 108 | 109 | &.active { 110 | cursor: pointer; 111 | background: $__hoverColor !important; 112 | } 113 | 114 | &::before { 115 | width: 16px; 116 | height: 16px; 117 | left: 7px; 118 | top: 7px; 119 | } 120 | 121 | &[data-type='url']::before { 122 | @include maskImage('icon-web'); 123 | } 124 | 125 | &[data-type='bookmark']::before { 126 | @include maskImage('icon-bookmark'); 127 | } 128 | 129 | &[data-type='history']::before { 130 | @include maskImage('icon-history'); 131 | -webkit-mask-size: 18px; 132 | } 133 | 134 | &[data-type='word']::before { 135 | @include maskImage('icon-search'); 136 | } 137 | } 138 | } 139 | 140 | &.listening { 141 | 142 | > input[type='text'] { 143 | pointer-events: none; 144 | font-style: italic; 145 | color: transparent; 146 | text-shadow: 0 0 0 gray; 147 | } 148 | 149 | > a.speechSearch { 150 | @include mask('icon-close', $textColorLight, 20px); 151 | right: 20px; 152 | } 153 | 154 | > ul.suggestions, > button[type="submit"] { 155 | display: none; 156 | } 157 | } 158 | } 159 | 160 | body.customBackground form#search { 161 | 162 | > input[type='text'] { 163 | background: rgba($contentBackground, 0.8); 164 | } 165 | 166 | > button[type="submit"]::before, > a.speechSearch::before { 167 | background-color: darken($textColorLight, 15%); 168 | } 169 | } 170 | 171 | @import "../../rtl/include/newtab/search"; 172 | @import "../../dark/include/newtab/search"; -------------------------------------------------------------------------------- /src/scss/include/newtab/_topLinks.scss: -------------------------------------------------------------------------------- 1 | 2 | section#content { 3 | 4 | > nav { 5 | position: absolute; 6 | top: 10px; 7 | right: 20px; 8 | padding-left: 32px; 9 | 10 | > ul { 11 | display: flex; 12 | flex-flow: row wrap; 13 | 14 | > li { 15 | position: relative; 16 | display: inline-block; 17 | text-align: center; 18 | margin-bottom: 5px; 19 | 20 | > a { 21 | position: relative; 22 | color: $__textColor; 23 | display: block; 24 | cursor: pointer; 25 | padding: 7px 10px; 26 | border-radius: 20px; 27 | white-space: nowrap; 28 | transition: background 0.3s; 29 | 30 | &:hover { 31 | background: darken($bodyBackground, 5%); 32 | } 33 | } 34 | } 35 | } 36 | 37 | &[data-pos='left'] { 38 | left: 20px; 39 | right: unset; 40 | padding-left: 0; 41 | padding-right: 32px; 42 | 43 | > ul { 44 | flex-direction: row-reverse; 45 | } 46 | } 47 | } 48 | } 49 | 50 | body.customBackground section#content > nav { 51 | 52 | > ul > li { 53 | margin: 0 2px 5px; 54 | 55 | > a { 56 | background: rgba($bodyBackground, 0.8); 57 | } 58 | } 59 | } 60 | 61 | @import "../../rtl/include/newtab/topLinks"; 62 | @import "../../dark/include/newtab/topLinks"; -------------------------------------------------------------------------------- /src/scss/include/settings/_advanced.scss: -------------------------------------------------------------------------------- 1 | 2 | body > section#wrapper div.advanced { 3 | position: relative; 4 | margin: 20px 0; 5 | max-width: 1024px; 6 | background: $bodyBackground; 7 | padding: 16px 0; 8 | 9 | > h3 { 10 | @include mask('icon-add', $textColor, 18px); 11 | position: relative; 12 | display: inline-block; 13 | color: $textColor; 14 | font-weight: $__fontWeightMedium; 15 | padding: 3px 5px 3px 22px; 16 | font-size: 100%; 17 | cursor: pointer; 18 | 19 | &::before { 20 | -webkit-mask-position-x: left; 21 | } 22 | } 23 | 24 | > div { 25 | transform: translate3d(0, -10px, 0); 26 | opacity: 0; 27 | margin-top: 20px; 28 | transition: opacity 0.3s, transform 0.3s; 29 | 30 | &.visible { 31 | opacity: 1; 32 | transform: translate3d(0, 0, 0); 33 | } 34 | 35 | div.sub.rememberOpenStatesSubDirectories { 36 | margin-top: 10px; 37 | 38 | &.hidden { 39 | display: none; 40 | } 41 | } 42 | 43 | textarea[data-name='customCss'] { 44 | background: rgba(0, 0, 0, 0.05); 45 | font-family: Consolas, sans-serif; 46 | font-size: 90%; 47 | height: 200px; 48 | min-height: 200px; 49 | 50 | &.inactive { 51 | display: none; 52 | } 53 | 54 | ~ span { 55 | display: block; 56 | margin-top: 10px; 57 | opacity: 0; 58 | color: $colorError; 59 | transition: opacity 0.5s; 60 | } 61 | 62 | &:focus { 63 | 64 | ~ span { 65 | opacity: 1; 66 | } 67 | } 68 | } 69 | } 70 | } 71 | 72 | @import "../../rtl/include/settings/advanced"; -------------------------------------------------------------------------------- /src/scss/include/settings/_colorpicker.scss: -------------------------------------------------------------------------------- 1 | 2 | div.color-picker { 3 | position: absolute; 4 | z-index: 9; 5 | width: 225px; 6 | background: $contentBackground; 7 | box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.3); 8 | margin: 0; 9 | display: none; 10 | user-select: none; 11 | margin-left: -10px; 12 | padding: 7px; 13 | border-radius: 3px; 14 | 15 | $leftColWidth: 160px; 16 | 17 | &[data-pos='bottom-right'], &[data-pos='top-right'] { 18 | margin-left: 10px; 19 | } 20 | 21 | &.visible { 22 | display: block; 23 | } 24 | 25 | > div.picking-area { 26 | position: relative; 27 | background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); 28 | width: $leftColWidth; 29 | height: $leftColWidth; 30 | 31 | > div { 32 | width: 10px; 33 | height: 10px; 34 | border-radius: 50%; 35 | border: 1px solid #fff; 36 | position: absolute; 37 | top: 45%; 38 | left: 45%; 39 | 40 | &::before { 41 | width: 8px; 42 | height: 8px; 43 | content: ""; 44 | position: absolute; 45 | border: 1px solid #666; 46 | border-radius: 50%; 47 | } 48 | } 49 | } 50 | 51 | > div.alpha, > div.hue { 52 | position: relative; 53 | width: $leftColWidth; 54 | height: 14px; 55 | margin: 10px 0; 56 | border: 1px solid #ddd; 57 | border-radius: 2px; 58 | 59 | div.slider-picker { 60 | width: 4px; 61 | height: calc(100% + 4px); 62 | background-color: #fff; 63 | position: absolute; 64 | top: -2px; 65 | border: 1px solid #666; 66 | border-radius: 3px; 67 | } 68 | } 69 | 70 | > div.alpha { 71 | background-image: img('settings/alpha.svg'); 72 | background-size: 12px; 73 | 74 | > div { 75 | width: 100%; 76 | height: 100%; 77 | border-radius: inherit; 78 | } 79 | } 80 | 81 | > div.hue { 82 | background: linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); 83 | } 84 | 85 | > div.input-r, > div.input-g, > div.input-b, > div.input-a { 86 | position: absolute; 87 | top: 7px; 88 | right: 7px; 89 | width: 45px; 90 | padding: 0 5px; 91 | background: $bodyBackground; 92 | border-radius: 18px; 93 | display: flex; 94 | 95 | > span { 96 | display: inline-block; 97 | color: $textColor; 98 | line-height: 18px; 99 | font-size: 80%; 100 | font-weight: $__fontWeightBold; 101 | text-transform: capitalize; 102 | } 103 | 104 | > input { 105 | display: inline-block; 106 | margin: 0 0 0 3px; 107 | padding: 0; 108 | height: 18px; 109 | line-height: 18px; 110 | border: none; 111 | color: $textColor; 112 | background: transparent; 113 | text-align: right; 114 | font-size: 80%; 115 | } 116 | } 117 | 118 | > div.input-g { 119 | top: 30px; 120 | } 121 | 122 | > div.input-b { 123 | top: 53px; 124 | } 125 | 126 | > div.input-a { 127 | top: 76px; 128 | } 129 | 130 | > div.input-color { 131 | 132 | > span { 133 | display: none; 134 | } 135 | 136 | > input { 137 | width: $leftColWidth; 138 | margin: 0; 139 | padding: 0 10px; 140 | height: 18px; 141 | line-height: 18px; 142 | border-radius: 18px; 143 | border: none; 144 | color: $textColor; 145 | background: $bodyBackground; 146 | font-size: 80%; 147 | } 148 | } 149 | } 150 | 151 | @import "../../rtl/include/settings/colorpicker"; -------------------------------------------------------------------------------- /src/scss/include/settings/_content.scss: -------------------------------------------------------------------------------- 1 | %loadingTab { 2 | 3 | &.loading { 4 | 5 | > svg.loading { 6 | position: absolute; 7 | top: 30%; 8 | left: calc(50% - 18px); 9 | } 10 | 11 | > div { 12 | visibility: hidden; 13 | } 14 | } 15 | } 16 | 17 | p.desc { 18 | color: $textColorLight; 19 | margin-top: 10px; 20 | line-height: 150%; 21 | } 22 | 23 | body > section#wrapper { 24 | position: relative; 25 | display: flex; 26 | flex-flow: row; 27 | 28 | > main { 29 | position: relative; 30 | flex: 1; 31 | height: calc(100vh - #{$settingsHeaderHeight} - 10px); 32 | overflow-y: scroll; 33 | margin-top: 10px; 34 | padding: 35px 30px 20px 70px; 35 | 36 | @media (max-width: 1400px) { 37 | padding-left: 50px; 38 | padding-right: 20px; 39 | } 40 | 41 | > div.tab { 42 | display: none; 43 | 44 | &.active { 45 | display: block; 46 | } 47 | 48 | @extend %loadingTab; 49 | 50 | > div[data-name] { 51 | display: none; 52 | 53 | &.active { 54 | display: block; 55 | } 56 | 57 | @extend %loadingTab; 58 | } 59 | } 60 | 61 | div.contentBox { 62 | position: relative; 63 | background: $contentBackground; 64 | padding: 16px 20px; 65 | box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); 66 | max-width: 1024px; 67 | margin: 0 0 20px; 68 | border-radius: 10px; 69 | line-height: 140%; 70 | 71 | &.hidden { 72 | display: none !important; 73 | } 74 | 75 | > div.info { 76 | @include mask("icon-info", $textColorLight, 32px); 77 | position: relative; 78 | 79 | &::before { 80 | top: 18px; 81 | left: 0; 82 | width: 32px; 83 | height: 32px; 84 | } 85 | 86 | > a { 87 | margin: 10px 0 0 40px; 88 | } 89 | 90 | > p { 91 | padding: 3px 0 3px 40px; 92 | line-height: 150%; 93 | } 94 | } 95 | } 96 | 97 | div.boxWrapper { 98 | position: relative; 99 | display: flex; 100 | flex-flow: row wrap; 101 | align-items: stretch; 102 | justify-content: space-between; 103 | max-width: 1024px; 104 | 105 | @media (max-width: 1100px) { 106 | display: block; 107 | } 108 | 109 | &.hidden { 110 | display: none; 111 | } 112 | 113 | > div.box { 114 | position: relative; 115 | width: calc(50% - 10px); 116 | max-width: 520px; 117 | margin-bottom: 20px; 118 | background: $contentBackground; 119 | padding: 16px 20px; 120 | box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); 121 | border-radius: 10px; 122 | 123 | @media (max-width: 1100px) { 124 | width: 100%; 125 | } 126 | 127 | &.hidden { 128 | display: none; 129 | } 130 | 131 | > label { 132 | margin: 0 0 20px 0; 133 | } 134 | 135 | p.info { 136 | margin: 20px 0 10px; 137 | line-height: 150%; 138 | } 139 | } 140 | 141 | &.noCol { 142 | flex-flow: column; 143 | 144 | > div.box { 145 | width: 100%; 146 | } 147 | } 148 | } 149 | } 150 | } 151 | 152 | @import "../../rtl/include/settings/content"; -------------------------------------------------------------------------------- /src/scss/include/settings/_expert.scss: -------------------------------------------------------------------------------- 1 | div.tab[data-name='expert'] { 2 | 3 | input.search { 4 | max-width: 250px; 5 | margin-top: 25px; 6 | } 7 | 8 | p + p { 9 | margin-top: 15px; 10 | } 11 | 12 | p.premium { 13 | margin-top: 30px; 14 | } 15 | 16 | > div[data-type] { 17 | 18 | > ul { 19 | 20 | li { 21 | display: flex; 22 | flex-flow: row wrap; 23 | align-items: flex-start; 24 | padding: 0 5px; 25 | 26 | &:hover { 27 | background: rgba(0, 0, 0, 0.04); 28 | } 29 | 30 | > label { 31 | position: relative; 32 | padding-right: 12px; 33 | margin-right: 7px; 34 | line-height: 28px; 35 | 36 | &::after { 37 | content: ""; 38 | position: absolute; 39 | top: 0; 40 | bottom: 0; 41 | right: 0; 42 | width: 6px; 43 | height: 6px; 44 | margin: auto; 45 | border-top: 2px solid rgba(0, 0, 0, 0.2); 46 | border-right: 2px solid rgba(0, 0, 0, 0.2); 47 | transform: rotateZ(45deg); 48 | } 49 | 50 | > div.info { 51 | @include mask("icon-info", $textColorLight, 16px); 52 | position: relative; 53 | display: inline-block; 54 | width: 20px; 55 | height: 20px; 56 | font-weight: normal; 57 | vertical-align: middle; 58 | margin: -3px 0 0 5px; 59 | cursor: help; 60 | 61 | > span { 62 | position: absolute; 63 | width: 200px; 64 | background: rgba(0, 0, 0, 0.8); 65 | top: 28px; 66 | left: calc(-100px + 10px); 67 | color: $textColorInverted; 68 | font-size: 80%; 69 | line-height: normal; 70 | padding: 5px; 71 | border-radius: 5px; 72 | transform: translate3d(0, -5px, 0); 73 | opacity: 0; 74 | pointer-events: none; 75 | transition: opacity 0.3s, transform 0.3s; 76 | z-index: 9; 77 | 78 | &::before { 79 | content: ""; 80 | position: absolute; 81 | top: -14px; 82 | left: 0; 83 | right: 0; 84 | width: 0; 85 | height: 0; 86 | margin: auto; 87 | border: 7px solid transparent; 88 | border-bottom-color: $tooltipBackground; 89 | } 90 | } 91 | 92 | &:hover > span { 93 | transform: translate3d(0, 0, 0); 94 | opacity: 1; 95 | } 96 | } 97 | } 98 | 99 | > input[type='text'] { 100 | width: auto; 101 | flex: 1; 102 | margin: 0; 103 | background: none; 104 | font-size: 90%; 105 | transition: box-shadow 0.5s; 106 | 107 | &:focus { 108 | background: rgba(0, 0, 0, 0.04); 109 | } 110 | 111 | &.error { 112 | box-shadow: 0 0 3px $colorError; 113 | } 114 | } 115 | } 116 | 117 | ul { 118 | flex: 1; 119 | margin-top: 24px; 120 | } 121 | } 122 | } 123 | } 124 | 125 | @import "../../rtl/include/settings/expert"; -------------------------------------------------------------------------------- /src/scss/include/settings/_importExport.scss: -------------------------------------------------------------------------------- 1 | div.tab[data-name='export'] { 2 | 3 | p.premium { 4 | margin-top: 30px; 5 | } 6 | 7 | a.import, a.export { 8 | @extend %button; 9 | margin: 30px 15px 0 0; 10 | 11 | &.inactive { 12 | pointer-events: none; 13 | background: $contentBackground2; 14 | color: $textColorLight; 15 | box-shadow: none; 16 | } 17 | } 18 | 19 | a.import > input[type='file'] { 20 | cursor: pointer; 21 | position: absolute; 22 | top: 0; 23 | left: -400%; 24 | width: 500%; 25 | height: 100%; 26 | outline: none; 27 | opacity: 0; 28 | z-index: 2; 29 | } 30 | 31 | [data-value='exportBookmarks'] > a { 32 | position: relative; 33 | border: 1px solid rgba(0, 0, 0, 0.2); 34 | border-radius: 20px; 35 | padding: 10px 20px 10px 42px; 36 | margin-top: 24px; 37 | 38 | > span { 39 | @include mask('settings/icon-help', $textColorLight, 24px); 40 | position: absolute; 41 | top: 0; 42 | bottom: 0; 43 | left: 7px; 44 | margin: auto; 45 | width: 30px; 46 | height: 30px; 47 | } 48 | } 49 | } 50 | 51 | @import "../../rtl/include/settings/importExport"; -------------------------------------------------------------------------------- /src/scss/include/settings/_infos.scss: -------------------------------------------------------------------------------- 1 | body > section#wrapper { 2 | 3 | div[data-name="aboutme"] { 4 | 5 | > div { 6 | position: relative; 7 | max-width: 1024px; 8 | margin: 20px 0 40px; 9 | display: flex; 10 | 11 | > div.desc { 12 | @include mask('settings/icon-quote', $textColorLight, 36px); 13 | position: relative; 14 | padding: 17px 50px 0 50px; 15 | text-align: justify; 16 | flex: 1; 17 | 18 | > p { 19 | font-size: 110%; 20 | line-height: 200%; 21 | margin-bottom: 20px; 22 | 23 | + p { 24 | margin: 0; 25 | } 26 | 27 | &.highlight { 28 | @include mask('settings/icon-heart', $colorError, 34px); 29 | position: relative; 30 | font-size: 150%; 31 | padding: 0 0 0 44px; 32 | margin-top: 50px; 33 | 34 | &::before { 35 | -webkit-mask-position-x: 0; 36 | } 37 | } 38 | } 39 | 40 | &::before { 41 | width: 36px; 42 | height: 36px; 43 | left: -5px; 44 | top: 20px; 45 | } 46 | } 47 | 48 | > div.preview { 49 | position: relative; 50 | width: 310px; 51 | height: 310px; 52 | border-radius: 15px; 53 | box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2); 54 | background: rgba($mainColor2,0.2); 55 | overflow: hidden; 56 | 57 | > img { 58 | display: block; 59 | width: 100%; 60 | } 61 | 62 | > a { 63 | position: absolute; 64 | bottom: 10px; 65 | margin: auto; 66 | display: block; 67 | width: 42px; 68 | height: 42px; 69 | border-radius: 50%; 70 | background: rgba($textColorInverted, 0.8); 71 | transition: background 0.3s; 72 | 73 | &.github { 74 | @include mask('settings/icon-github', $textColor, 24px); 75 | left: 10px; 76 | } 77 | 78 | &.website { 79 | @include mask('icon-web', $textColor, 24px); 80 | left: 60px; 81 | } 82 | 83 | &::before { 84 | background: $gradient; 85 | } 86 | 87 | &:hover { 88 | background: $textColorInverted; 89 | } 90 | } 91 | } 92 | } 93 | } 94 | 95 | div[data-name='permissions'] { 96 | 97 | div.permissions { 98 | 99 | h3 { 100 | display: inline-block; 101 | font-size: 120%; 102 | font-weight: $__fontWeightMedium; 103 | line-height: 150%; 104 | padding: 5px 0; 105 | margin: 20px 0 0 0; 106 | } 107 | 108 | div.details { 109 | @include bubble; 110 | 111 | > a.github { 112 | @include mask('settings/icon-github', $textColorInverted, 18px); 113 | padding-left: 34px; 114 | margin: 15px 0 0 0; 115 | 116 | &::before { 117 | -webkit-mask-position-x: 7px; 118 | } 119 | } 120 | } 121 | } 122 | 123 | div.shareInformation { 124 | 125 | p { 126 | line-height: 150%; 127 | 128 | + p { 129 | margin-top: 10px; 130 | } 131 | } 132 | 133 | ul.bulletList { 134 | line-height: 150%; 135 | margin: 10px 0; 136 | } 137 | 138 | label { 139 | display: inline-block; 140 | margin: 15px 20px 7px 0 !important; 141 | } 142 | 143 | div.checkbox { 144 | display: inline-block; 145 | vertical-align: top; 146 | margin: 16px 0 0 0; 147 | } 148 | } 149 | } 150 | } 151 | 152 | @import "../../rtl/include/settings/infos"; -------------------------------------------------------------------------------- /src/scss/include/settings/_newtab.scss: -------------------------------------------------------------------------------- 1 | 2 | body[data-type^='newtab'] { 3 | 4 | > section#wrapper > main { 5 | 6 | p.buttons { 7 | 8 | &.hidden { 9 | display: none; 10 | } 11 | 12 | > a.button { 13 | background: $mainColor2; 14 | padding: 10px 15px 10px 38px; 15 | margin: 20px 0 0 0; 16 | 17 | + a.button { 18 | margin-left: 10px; 19 | } 20 | 21 | &[data-name='preview'] { 22 | @include mask('icon-search', $textColorInverted, 22px); 23 | 24 | &::before { 25 | left: 2px; 26 | width: 36px; 27 | } 28 | } 29 | 30 | &[data-name='styling'] { 31 | @include mask('settings/icon-theme', $textColorInverted, 18px); 32 | 33 | &::before { 34 | left: 5px; 35 | width: 36px; 36 | } 37 | } 38 | } 39 | } 40 | 41 | div.contentBox.faviconOptions { 42 | display: grid; 43 | grid-template-columns: auto 1fr; 44 | 45 | @media (max-width: 1280px) { 46 | grid-template-columns: 1fr; 47 | } 48 | 49 | > h2 { 50 | grid-column: 1/-1; 51 | } 52 | 53 | > div { 54 | 55 | > div.iconShapeWrapper { 56 | 57 | > ul { 58 | display: grid; 59 | grid-template-columns: 1fr 1fr; 60 | grid-gap: 10px 20px; 61 | } 62 | 63 | ~ div { 64 | margin-top: 12px; 65 | } 66 | } 67 | } 68 | 69 | > aside { 70 | position: relative; 71 | justify-self: right; 72 | width: 100%; 73 | max-width: 600px; 74 | height: 80px; 75 | background-image: img('settings/mockup-left.png'), img('settings/mockup-right.png'), img('settings/mockup-middle.png'); 76 | background-repeat: no-repeat, no-repeat, repeat-x; 77 | background-position: left 0, right 0, left 0; 78 | background-size: auto 80px; 79 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 80 | 81 | @media (max-width: 1280px) { 82 | justify-self: left; 83 | grid-row: 2; 84 | margin-bottom: 20px; 85 | } 86 | 87 | > canvas { 88 | position: absolute; 89 | top: 12px; 90 | left: 95px; 91 | width: 20px; 92 | height: 20px; 93 | } 94 | 95 | > span { 96 | position: absolute; 97 | top: 13px; 98 | left: 126px; 99 | } 100 | } 101 | } 102 | } 103 | } 104 | 105 | @import "../../rtl/include/settings/newtab"; -------------------------------------------------------------------------------- /src/scss/include/settings/_tooltip.scss: -------------------------------------------------------------------------------- 1 | 2 | div.tab[data-name='sidebar'] > div[data-name='tooltip'] { 3 | 4 | div.sub.additionalInfo { 5 | margin-top: 10px; 6 | } 7 | } 8 | 9 | // @import "../../rtl/include/settings/tooltip"; -------------------------------------------------------------------------------- /src/scss/newtab.scss: -------------------------------------------------------------------------------- 1 | @import "include/vars"; 2 | @import "include/mixins"; 3 | // 4 | @import "include/loading"; 5 | @import "include/checkbox"; 6 | 7 | $textColor: $__textColor; 8 | @import "include/generals"; 9 | @import "include/newtab/gridLinks"; 10 | @import "include/newtab/topLinks"; 11 | @import "include/newtab/search"; 12 | @import "include/newtab/fallback"; 13 | @import "include/newtab/edit"; 14 | 15 | body { 16 | width: 100vw; 17 | height: 100vh; 18 | background-color: $bodyBackground; 19 | background-repeat: no-repeat; 20 | background-position: center; 21 | background-size: cover; 22 | overflow: hidden; 23 | 24 | &::before { 25 | content: ""; 26 | position: fixed; 27 | top: 0; 28 | left: 0; 29 | width: 100%; 30 | height: 100%; 31 | background: $bodyBackground; 32 | transition: opacity 0.3s; 33 | z-index: 98; 34 | @extend %hidden; 35 | } 36 | 37 | &.initLoading { 38 | 39 | &::before { 40 | @extend %visible; 41 | } 42 | } 43 | 44 | &.loading { 45 | 46 | &::before { 47 | background: rgba(255, 255, 255, 0.9); 48 | @extend %visible; 49 | } 50 | } 51 | 52 | > svg.loading { 53 | position: fixed; 54 | display: block !important; 55 | top: calc(50% - 18px); 56 | left: calc(50% - 18px); 57 | z-index: 99; 58 | } 59 | } 60 | 61 | section#content { 62 | position: absolute; 63 | top: 0; 64 | left: 0; 65 | width: 100vw; 66 | height: 100vh; 67 | transition: height 0.5s; 68 | 69 | &.small { 70 | width: calc(100vw - #{$__sidebarWidth}); 71 | margin-left: $__sidebarWidth; 72 | 73 | ~ iframe#redeviation-bs-sidebar:not(.redeviation-bs-hover) { 74 | width: $__sidebarWidth; 75 | } 76 | } 77 | 78 | > section.mid { 79 | position: relative; 80 | width: 100%; 81 | height: 100%; 82 | margin: 0 auto; 83 | display: flex; 84 | flex-direction: column; 85 | justify-content: center; 86 | align-items: center; 87 | pointer-events: none; 88 | 89 | > * { 90 | pointer-events: auto; 91 | } 92 | } 93 | } 94 | 95 | body[data-pos='right'] { 96 | 97 | section#content.small { 98 | margin-left: 0; 99 | } 100 | } 101 | 102 | @import "dark/newtab"; -------------------------------------------------------------------------------- /src/scss/rtl/_onboarding.scss: -------------------------------------------------------------------------------- 1 | html[dir='rtl'] { 2 | 3 | section.slide { 4 | 5 | &[data-name='intro-2'] { 6 | > div.videos > div.video { 7 | > span.setup.finished { 8 | padding-left: 20px; 9 | padding-right: 40px; 10 | 11 | &::before { 12 | -webkit-mask-position-x: right; 13 | right: 12px; 14 | } 15 | } 16 | } 17 | } 18 | 19 | &[data-name='position'] { 20 | 21 | > div { 22 | flex-direction: row-reverse; 23 | } 24 | } 25 | 26 | &[data-name='openAction'] { 27 | 28 | > a.cancel { 29 | padding-left: 0; 30 | padding-right: 26px; 31 | 32 | &::before { 33 | -webkit-mask-position-x: right; 34 | } 35 | } 36 | } 37 | 38 | &[data-name='surface'] { 39 | 40 | p.wrap { 41 | 42 | a[data-value="auto"]::before { 43 | transform: skewX(20deg); 44 | } 45 | } 46 | } 47 | } 48 | 49 | // Sidebar placeholder 50 | div#sidebar { 51 | padding-right: 80px; 52 | padding-left: 30px; 53 | 54 | > p::before { 55 | right: -50px; 56 | left: unset; 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/scss/rtl/_overlay.scss: -------------------------------------------------------------------------------- 1 | 2 | html[dir='rtl'] { 3 | 4 | div.modal { 5 | 6 | > header { 7 | padding: 0 52px 0 75px; 8 | 9 | &::before { 10 | left: unset; 11 | right: 5px; 12 | } 13 | 14 | > a.close { 15 | right: unset; 16 | left: 15px; 17 | } 18 | } 19 | 20 | > a.preview, > span.preview { 21 | 22 | > img, > span.icon { 23 | margin: 0 0 0 20px; 24 | } 25 | } 26 | 27 | &[data-type='openChildren'], &[data-type='openSelected'] { 28 | 29 | > header::before, { 30 | transform: scaleX(-1); 31 | } 32 | } 33 | 34 | &[data-type='infos'] { 35 | 36 | > ul.breadcrumb { 37 | float: left; 38 | 39 | &::before { 40 | left: unset; 41 | right: 0; 42 | transform: scaleX(-1); 43 | } 44 | 45 | > li { 46 | padding-right: 8px; 47 | padding-left: 5px; 48 | 49 | + li { 50 | padding-left: 5px; 51 | padding-right: 25px; 52 | } 53 | 54 | &:last-child { 55 | margin-right: 0; 56 | margin-left: 12px; 57 | } 58 | 59 | &::before { 60 | right: unset; 61 | left: -36px; 62 | transform: scaleX(-1); 63 | } 64 | 65 | &::after { 66 | top: 0; 67 | right: unset; 68 | left: -24px; 69 | transform: scaleX(-1); 70 | } 71 | } 72 | } 73 | 74 | > ul:not(.breadcrumb) { 75 | 76 | > li { 77 | 78 | &.tooltip { 79 | padding-right: 0; 80 | padding-left: 18px; 81 | 82 | &::before { 83 | -webkit-mask-position-x: left; 84 | } 85 | } 86 | 87 | > ul { 88 | right: unset; 89 | left: -10px; 90 | 91 | &::before { 92 | left: 10px; 93 | right: unset; 94 | } 95 | } 96 | } 97 | } 98 | } 99 | 100 | &[data-type='keyboardShortcuts'] { 101 | 102 | > div.scrollBox > div > a { 103 | padding-left: 0; 104 | padding-right: 16px; 105 | 106 | &::before { 107 | left: unset; 108 | right: 0; 109 | transform: scaleX(-1) rotateZ(45deg); 110 | } 111 | } 112 | } 113 | 114 | > menu.buttons { 115 | right: unset; 116 | left: 20px; 117 | } 118 | } 119 | } -------------------------------------------------------------------------------- /src/scss/rtl/_settings.scss: -------------------------------------------------------------------------------- 1 | 2 | html[dir='rtl'] { 3 | 4 | div.noticeBox { 5 | 6 | &::before { 7 | left: unset; 8 | right: 15px; 9 | } 10 | 11 | > p, > h2 { 12 | padding-left: 0; 13 | padding-right: 40px; 14 | } 15 | } 16 | 17 | ul.bulletList { 18 | 19 | > li { 20 | padding-left: unset; 21 | padding-right: 10px; 22 | 23 | &::before { 24 | left: unset; 25 | right: 0; 26 | } 27 | } 28 | } 29 | 30 | p.premium { 31 | padding-left: 0; 32 | padding-right: 50px; 33 | 34 | &::before { 35 | transform: scaleX(-1); 36 | } 37 | } 38 | } -------------------------------------------------------------------------------- /src/scss/rtl/_sidebar.scss: -------------------------------------------------------------------------------- 1 | 2 | html[dir='rtl'] { 3 | 4 | a.dragHelper { 5 | @include bookmarkEntryRtl; 6 | padding-right: $__bookmarksHorizontalPadding; 7 | padding-left: 46px; 8 | 9 | > span.selected { 10 | left: unset; 11 | right: -7px; 12 | } 13 | } 14 | 15 | // 16 | section#sidebar { 17 | 18 | > header { 19 | 20 | > h1 { 21 | margin-left: auto; 22 | margin-right: unset; 23 | } 24 | 25 | > a { 26 | 27 | &:not(.search)::before { 28 | transform: scaleX(-1); 29 | } 30 | 31 | &.cancel:not([data-type='compact']) { 32 | margin: 0 20px 0 5px; 33 | 34 | &::after { 35 | left: unset; 36 | right: -10px; 37 | } 38 | } 39 | } 40 | 41 | > div.searchBox { 42 | left: unset; 43 | right: 12px; 44 | 45 | > input[type='text'] { 46 | padding-right: 12px; 47 | padding-left: 5px; 48 | } 49 | } 50 | 51 | &.searchVisible { 52 | 53 | > h1 { 54 | transform: translate3d(200%, 0, 0); 55 | } 56 | } 57 | } 58 | 59 | > a.lockPinned { 60 | 61 | > span::before { 62 | transform: scaleX(-1); 63 | } 64 | } 65 | 66 | > div.filter { 67 | left: unset; 68 | right: 11px; 69 | 70 | > a[data-direction] { 71 | margin-left: 10px; 72 | margin-right: 0; 73 | padding-left: 0; 74 | padding-right: 18px; 75 | 76 | &::before { 77 | left: unset; 78 | right: 0; 79 | } 80 | } 81 | 82 | > ul { 83 | 84 | > li { 85 | 86 | > div.checkbox { 87 | left: unset; 88 | right: 0; 89 | 90 | + a { 91 | padding-left: unset; 92 | padding-right: 22px; 93 | } 94 | } 95 | } 96 | } 97 | } 98 | 99 | > div.scrollBox { 100 | 101 | > ul, > div.pinned > ul { 102 | 103 | a { 104 | @include bookmarkEntryRtl; 105 | 106 | + ul { 107 | padding-left: unset; 108 | padding-right: $__bookmarksDirIndentation; 109 | } 110 | } 111 | 112 | &.hideRoot { 113 | 114 | > li { 115 | 116 | > ul { 117 | padding-left: 0; 118 | padding-right: 0; 119 | } 120 | } 121 | } 122 | } 123 | } 124 | 125 | &:not([data-sort$='-flat']) { 126 | 127 | > div#bookmarkBox { 128 | 129 | a:hover { 130 | padding-right: $__bookmarksHorizontalPadding; 131 | padding-left: 46px; 132 | } 133 | 134 | > ul > li > a > span.add { 135 | right: unset; 136 | left: 15px 137 | } 138 | } 139 | } 140 | 141 | &:not([data-sort='custom']) > div#bookmarkBox > div.pinned a { 142 | 143 | &:hover { 144 | padding-left: $__bookmarksHorizontalPadding; 145 | } 146 | } 147 | 148 | &.selectionMode { 149 | 150 | > div.scrollBox > ul a > img, > span.icon { 151 | left: unset; 152 | right: calc(#{$__bookmarksHorizontalPadding} + 11px); 153 | } 154 | } 155 | } 156 | } -------------------------------------------------------------------------------- /src/scss/rtl/include/_bookmarkEntry.scss: -------------------------------------------------------------------------------- 1 | @mixin bookmarkEntryRtl { 2 | 3 | &.dir { 4 | 5 | &.has-arrow { 6 | padding-left: $__bookmarksHorizontalPadding; 7 | padding-right: 15px !important; 8 | 9 | &::before { 10 | right: 5px; 11 | left: unset; 12 | border-left-color: transparent; 13 | border-right-color: $__textColor; 14 | transform-origin: 75% 50%; 15 | } 16 | 17 | &.opened:not(.animated), &.animated:not(.opened) { 18 | 19 | &::before { 20 | transform: rotateZ(-90deg); 21 | } 22 | } 23 | } 24 | } 25 | 26 | > span.copied { 27 | left: unset; 28 | right: calc(#{$__bookmarksIconSize} + #{$__bookmarksHorizontalPadding} + 10px); 29 | } 30 | 31 | > img, > span.icon { 32 | margin: 0 0 0 $__bookmarksHorizontalPadding; 33 | } 34 | 35 | > div.checkbox { 36 | margin: 0 0 0 $__bookmarksHorizontalPadding; 37 | } 38 | 39 | > span.removeMask { 40 | transform: translateX(-100%); 41 | 42 | > span { 43 | float: left; 44 | } 45 | } 46 | 47 | > span.drag { 48 | right: unset; 49 | left: 15px; 50 | } 51 | 52 | > span.add { 53 | right: unset; 54 | left: 42px; 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/scss/rtl/include/_checkbox.scss: -------------------------------------------------------------------------------- 1 | html[dir='rtl'] { 2 | 3 | div.checkbox { 4 | 5 | &[data-style="switch"] { 6 | transition: padding-right 0.2s, opacity 0.2s; 7 | 8 | &::after { 9 | left: unset; 10 | right: -3px; 11 | box-shadow: -1px 1px 7px rgba(0, 0, 0, 0.4); 12 | } 13 | 14 | &.active { 15 | padding-left: unset; 16 | padding-right: 18px; 17 | } 18 | } 19 | } 20 | } -------------------------------------------------------------------------------- /src/scss/rtl/include/_contextmenu.scss: -------------------------------------------------------------------------------- 1 | html[dir='rtl'] { 2 | 3 | div.contextmenu { 4 | 5 | &[data-type='list'], &[data-type='separator'] { 6 | margin: 0 10px 0 0; 7 | } 8 | 9 | &[data-type='menu'], &[data-type='sort'] { 10 | left: 0; 11 | right: unset !important; 12 | } 13 | 14 | > ul.icons { 15 | 16 | > li { 17 | 18 | &.right { 19 | float: left; 20 | } 21 | } 22 | } 23 | 24 | > ul.list { 25 | 26 | > li { 27 | 28 | > div.checkbox { 29 | left: unset; 30 | right: 9px; 31 | 32 | + a { 33 | padding-left: 0; 34 | padding-right: 38px; 35 | } 36 | } 37 | 38 | > a { 39 | padding: 0 38px 0 10px; 40 | 41 | > span { 42 | margin: 0 3px 0 0; 43 | } 44 | 45 | &::before { 46 | transform: scaleX(-1); 47 | left: unset; 48 | right: 0; 49 | } 50 | 51 | &[data-name='reload']::before, 52 | &[data-name='select']::before { 53 | transform: scaleX(1); 54 | } 55 | } 56 | } 57 | } 58 | } 59 | 60 | section#sidebar { 61 | 62 | &[data-pos='right']:not(.sidepanel) { 63 | 64 | div.contextmenu { 65 | 66 | &[data-type='menu'] { 67 | right: unset; 68 | left: -93px; 69 | } 70 | 71 | &[data-type='sort'] { 72 | right: unset; 73 | left: -57px; 74 | } 75 | } 76 | } 77 | } 78 | } -------------------------------------------------------------------------------- /src/scss/rtl/include/_linkchecker.scss: -------------------------------------------------------------------------------- 1 | html[dir='rtl'] { 2 | 3 | div.modal { 4 | 5 | &[data-type='checkBookmarks'] { 6 | 7 | > div.progressBar { 8 | 9 | > div { 10 | left: unset; 11 | right: 0; 12 | } 13 | } 14 | 15 | > menu.categories { 16 | left: unset; 17 | right: 0; 18 | border-left-width: 1px; 19 | border-left-style: solid; 20 | border-right: none; 21 | 22 | > li { 23 | 24 | &::before { 25 | left: unset; 26 | right: 10px; 27 | -webkit-mask-position-x: right; 28 | } 29 | 30 | &.active::after { 31 | left: -9px; 32 | right: unset; 33 | } 34 | 35 | > a { 36 | padding-right: 40px; 37 | padding-left: 0; 38 | 39 | > span { 40 | margin-right: 5px; 41 | margin-left: 0; 42 | } 43 | } 44 | } 45 | } 46 | 47 | > div[id^='results_'] { 48 | margin-right: 210px; 49 | margin-left: 0; 50 | 51 | > p { 52 | 53 | > span { 54 | padding-right: 40px; 55 | padding-left: 0; 56 | 57 | &::before { 58 | -webkit-mask-position-x: right; 59 | } 60 | } 61 | } 62 | 63 | > ul { 64 | 65 | > li { 66 | 67 | > div.checkbox { 68 | margin-left: 14px; 69 | margin-right: 0; 70 | } 71 | 72 | > img { 73 | margin-left: 14px; 74 | margin-right: 0; 75 | } 76 | 77 | a.urlCheckAction { 78 | left: 10px; 79 | right: unset; 80 | } 81 | 82 | a.urlCheckHide { 83 | left: 50px; 84 | right: unset; 85 | } 86 | 87 | > ul.breadcrumb { 88 | 89 | > li:not(:last-child) { 90 | padding-left: 16px; 91 | padding-right: 0; 92 | 93 | &::after { 94 | left: 1px; 95 | right: unset; 96 | transform: scaleX(-1); 97 | } 98 | } 99 | } 100 | 101 | > ul[data-type='urls'] { 102 | margin-left: 90px; 103 | margin-right: 65px; 104 | } 105 | 106 | > ul[data-type='duplicates'] { 107 | margin-right: 22px; 108 | margin-left: 0; 109 | 110 | > li { 111 | padding-right: 32px; 112 | padding-left: 0; 113 | 114 | > a.urlCheckAction { 115 | right: 0; 116 | left: unset; 117 | } 118 | 119 | > ul.breadcrumb { 120 | 121 | > li:not(:last-child) { 122 | padding-left: 14px; 123 | padding-right: 0; 124 | 125 | &::after { 126 | left: 1px; 127 | right: unset; 128 | transform: scaleX(-1); 129 | } 130 | } 131 | } 132 | } 133 | 134 | ~ a.urlCheckHide { 135 | left: 10px; 136 | right: unset; 137 | } 138 | } 139 | } 140 | } 141 | } 142 | } 143 | 144 | &.sidepanel { 145 | 146 | > div[id^='results_'] { 147 | margin-right: 0; 148 | } 149 | } 150 | } 151 | } -------------------------------------------------------------------------------- /src/scss/rtl/include/newtab/_edit.scss: -------------------------------------------------------------------------------- 1 | html[dir='rtl'] { 2 | 3 | menu.infoBar { 4 | justify-content: flex-start; 5 | 6 | > a { 7 | 8 | &.save { 9 | order: 1; 10 | } 11 | 12 | &.cancel { 13 | order: 2; 14 | } 15 | } 16 | 17 | > div.upload { 18 | 19 | > a.remove { 20 | float: left; 21 | } 22 | 23 | > div { 24 | 25 | > span { 26 | padding-right: 28px; 27 | padding-left: 3px; 28 | 29 | &::before { 30 | transform: scaleX(-1); 31 | } 32 | } 33 | 34 | > input[type='file'] { 35 | left: unset; 36 | right: -900%; 37 | } 38 | } 39 | 40 | > span.premium { 41 | float: left; 42 | padding-right: 22px; 43 | padding-left: 4px; 44 | 45 | &::before { 46 | transform: scaleX(-1); 47 | } 48 | } 49 | } 50 | } 51 | 52 | div.editLinkTooltip { 53 | text-align: right; 54 | 55 | > button[type='submit'] { 56 | float: left; 57 | 58 | &[data-type="delete"] { 59 | float: right; 60 | } 61 | } 62 | } 63 | 64 | body[data-pos='right'] { 65 | 66 | menu.infoBar { 67 | justify-content: flex-end; 68 | 69 | > a { 70 | 71 | &.save { 72 | order: 2; 73 | } 74 | 75 | &.cancel { 76 | order: 1; 77 | } 78 | } 79 | 80 | > div.upload { 81 | 82 | > a.remove { 83 | float: right; 84 | } 85 | 86 | > span.premium { 87 | float: right; 88 | } 89 | } 90 | } 91 | } 92 | 93 | body.edit { 94 | 95 | form#search { 96 | 97 | > input[type='text'] { 98 | padding-right: 30px; 99 | padding-left: 125px; 100 | } 101 | 102 | > div[data-name='searchSuggest'] { 103 | 104 | > div.checkbox { 105 | 106 | + span { 107 | margin-right: 5px; 108 | margin-left: 20px; 109 | } 110 | } 111 | } 112 | 113 | > a.edit { 114 | left: 20px; 115 | right: unset; 116 | } 117 | } 118 | 119 | div#gridLinks { 120 | 121 | > div[data-type='gridsize'] { 122 | 123 | > strong { 124 | margin-left: 5px; 125 | margin-right: 0; 126 | } 127 | 128 | > span.premium { 129 | margin-left: 0; 130 | margin-right: 14px; 131 | 132 | &::after { 133 | transform: none; 134 | left: unset; 135 | right: -16px; 136 | } 137 | } 138 | } 139 | } 140 | 141 | select.edit { 142 | box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.1); 143 | } 144 | 145 | &.customBackground { 146 | 147 | div#gridLinks > div[data-type='gridsize'] { 148 | padding-right: 10px; 149 | padding-left: 8px; 150 | } 151 | } 152 | } 153 | } -------------------------------------------------------------------------------- /src/scss/rtl/include/newtab/_fallback.scss: -------------------------------------------------------------------------------- 1 | html[dir='rtl'] { 2 | 3 | div#fallbackInfo { 4 | 5 | &::before { 6 | right: 10px; 7 | left: unset; 8 | } 9 | 10 | > div { 11 | 12 | > div.checkbox + span { 13 | margin-right: 15px; 14 | margin-left: 0; 15 | } 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /src/scss/rtl/include/newtab/_gridLinks.scss: -------------------------------------------------------------------------------- 1 | html[dir='rtl'] { 2 | 3 | div#gridLinks { 4 | 5 | > ul { 6 | text-align: right; 7 | } 8 | } 9 | } -------------------------------------------------------------------------------- /src/scss/rtl/include/newtab/_overlay.scss: -------------------------------------------------------------------------------- 1 | 2 | html[dir='rtl'] div.modal[data-type='searchEngine'] { 3 | 4 | > div.scrollBox { 5 | 6 | > ul { 7 | 8 | > li { 9 | padding: 0 32px 0 5px; 10 | 11 | > div.checkbox { 12 | left: unset; 13 | right: 0; 14 | } 15 | 16 | > a > img { 17 | margin-left: 8px; 18 | margin-right: 0; 19 | } 20 | } 21 | 22 | &[data-type='custom'] { 23 | 24 | > li { 25 | padding: 2px; 26 | 27 | > input { 28 | direction: ltr; 29 | } 30 | } 31 | } 32 | } 33 | } 34 | } -------------------------------------------------------------------------------- /src/scss/rtl/include/newtab/_search.scss: -------------------------------------------------------------------------------- 1 | html[dir='rtl'] { 2 | 3 | form#search { 4 | 5 | > input[type='text'] { 6 | padding: 0 30px 0 55px; 7 | box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.2); 8 | } 9 | 10 | > button[type="submit"] { 11 | left: 15px; 12 | right: unset; 13 | } 14 | 15 | > a.speechSearch { 16 | left: 60px; 17 | right: unset; 18 | } 19 | 20 | > ul.suggestions { 21 | 22 | > li { 23 | padding-right: 30px; 24 | padding-left: 10px; 25 | 26 | &::before { 27 | left: unset; 28 | right: 7px; 29 | } 30 | } 31 | } 32 | 33 | &.listening { 34 | 35 | > a.speechSearch { 36 | left: 20px; 37 | right: unset; 38 | } 39 | } 40 | } 41 | } -------------------------------------------------------------------------------- /src/scss/rtl/include/newtab/_topLinks.scss: -------------------------------------------------------------------------------- 1 | html[dir='rtl'] { 2 | 3 | section#content { 4 | 5 | > nav { 6 | 7 | > ul { 8 | flex-direction: row-reverse; 9 | } 10 | 11 | &[data-pos='left'] { 12 | 13 | > ul { 14 | flex-direction: row; 15 | } 16 | } 17 | } 18 | } 19 | } -------------------------------------------------------------------------------- /src/scss/rtl/include/settings/_advanced.scss: -------------------------------------------------------------------------------- 1 | 2 | html[dir='rtl'] { 3 | 4 | body > section#wrapper div.advanced { 5 | 6 | > h3 { 7 | padding-right: 22px; 8 | padding-left: 5px; 9 | 10 | &::before { 11 | -webkit-mask-position-x: right; 12 | } 13 | } 14 | } 15 | } -------------------------------------------------------------------------------- /src/scss/rtl/include/settings/_appearance.scss: -------------------------------------------------------------------------------- 1 | 2 | html[dir='rtl'] { 3 | 4 | body[data-type^='appearance'] { 5 | 6 | > section#wrapper > main { 7 | 8 | div.boxWrapper { 9 | 10 | > div.box { 11 | 12 | a.revert { 13 | left: 16px; 14 | right: unset; 15 | } 16 | 17 | &.surface { 18 | 19 | > div.checkbox { 20 | background: linear-gradient(to left, #fec171 0%, #ff6c69 100%); 21 | 22 | &::before { 23 | -webkit-mask-position-x: 6px; 24 | } 25 | 26 | &::after { 27 | right: 3px; 28 | left: unset; 29 | } 30 | 31 | &.active { 32 | background: linear-gradient(to left, #3c5fe1 0%, #3a2b96 100%); 33 | 34 | &::before { 35 | -webkit-mask-position-x: 32px; 36 | } 37 | 38 | &::after { 39 | transform: translate3d(-30px, 0, 0); 40 | } 41 | } 42 | } 43 | } 44 | } 45 | } 46 | 47 | div.selectedTheme { 48 | 49 | > span { 50 | padding-right: 42px; 51 | padding-left: 14px; 52 | } 53 | 54 | &::after { 55 | left: unset; 56 | right: -5px; 57 | } 58 | 59 | &::before { 60 | left: unset; 61 | transform: scaleX(-1); 62 | } 63 | 64 | &:hover { 65 | 66 | > span { 67 | padding-right: 14px; 68 | margin-right: 40px; 69 | margin-left: 0; 70 | } 71 | } 72 | } 73 | 74 | a.showThemes { 75 | padding-right: 22px; 76 | padding-left: 5px; 77 | 78 | &::before { 79 | -webkit-mask-position-x: right; 80 | } 81 | } 82 | 83 | div.themeList { 84 | 85 | &::before { 86 | right: unset; 87 | left: 32px; 88 | transform: scaleX(-1); 89 | } 90 | 91 | &::after { 92 | left: unset; 93 | right: 35px; 94 | } 95 | } 96 | 97 | div.presets { 98 | 99 | > a { 100 | margin-right: 0; 101 | margin-left: 7px; 102 | } 103 | } 104 | 105 | div[data-name='sidebar'] ul.radioWrapper > li { 106 | 107 | + li { 108 | margin-right: 30px; 109 | margin-left: unset; 110 | } 111 | } 112 | 113 | div.iconColorWrapper { 114 | 115 | ~ p.note { 116 | padding-right: 40px; 117 | padding-left: unset; 118 | 119 | &::before { 120 | right: 0; 121 | left: unset; 122 | } 123 | } 124 | } 125 | } 126 | } 127 | 128 | iframe[data-appearance] { 129 | right: unset; 130 | left: 0; 131 | } 132 | } -------------------------------------------------------------------------------- /src/scss/rtl/include/settings/_colorpicker.scss: -------------------------------------------------------------------------------- 1 | html[dir='rtl'] { 2 | 3 | div.color-picker { 4 | box-shadow: -1px 1px 20px rgba(0, 0, 0, 0.3); 5 | 6 | > div.input-r, > div.input-g, > div.input-b, > div.input-a { 7 | right: unset; 8 | left: 7px; 9 | 10 | > input { 11 | margin-right: 3px; 12 | margin-left: unset; 13 | text-align: left; 14 | } 15 | } 16 | 17 | > div.input-color { 18 | 19 | > span { 20 | display: none; 21 | } 22 | } 23 | } 24 | } -------------------------------------------------------------------------------- /src/scss/rtl/include/settings/_content.scss: -------------------------------------------------------------------------------- 1 | 2 | html[dir='rtl'] { 3 | 4 | body > section#wrapper { 5 | 6 | > main { 7 | padding-right: 70px; 8 | padding-left: 30px; 9 | 10 | @media (max-width: 1400px) { 11 | padding-right: 50px; 12 | padding-left: 20px; 13 | } 14 | 15 | div.contentBox { 16 | > div.info { 17 | &::before { 18 | left:unset; 19 | right: 0; 20 | } 21 | 22 | > a { 23 | margin-left: 0; 24 | margin-right: 40px; 25 | } 26 | 27 | > p { 28 | margin-left: 0; 29 | margin-right: 40px; 30 | } 31 | } 32 | } 33 | } 34 | } 35 | } -------------------------------------------------------------------------------- /src/scss/rtl/include/settings/_dashboard.scss: -------------------------------------------------------------------------------- 1 | html[dir='rtl'] body > section#wrapper > main div.tab[data-name='dashboard'] { 2 | 3 | > div.boxWrapper { 4 | 5 | > div.tipsTricks { 6 | 7 | > button { 8 | padding-right: 25px; 9 | padding-left: 34px; 10 | 11 | &::before { 12 | left: 14px; 13 | right: unset; 14 | border-left-color: transparent; 15 | border-right-color: $textColorInverted; 16 | } 17 | } 18 | } 19 | 20 | > div.links { 21 | 22 | > ul { 23 | 24 | > li { 25 | 26 | @media (max-width: 1600px) { 27 | 28 | + li { 29 | margin-left: 0; 30 | margin-right: 10px; 31 | } 32 | } 33 | 34 | > a { 35 | padding-right: 50px; 36 | padding-left: 10px; 37 | 38 | &::before { 39 | left: unset; 40 | right: 10px; 41 | } 42 | 43 | &[data-name="support"]::before { 44 | transform: scaleX(-1); 45 | } 46 | } 47 | } 48 | } 49 | } 50 | } 51 | 52 | > footer { 53 | 54 | > div { 55 | 56 | > span.lastUpdate { 57 | margin-left: 0; 58 | margin-right: 5px; 59 | } 60 | } 61 | } 62 | } -------------------------------------------------------------------------------- /src/scss/rtl/include/settings/_expert.scss: -------------------------------------------------------------------------------- 1 | html[dir='rtl'] { 2 | 3 | div.tab[data-name='expert'] > div[data-type] { 4 | direction: ltr; 5 | 6 | > ul li > label > div.info { 7 | direction: rtl; 8 | text-align: right; 9 | } 10 | } 11 | } -------------------------------------------------------------------------------- /src/scss/rtl/include/settings/_form.scss: -------------------------------------------------------------------------------- 1 | html[dir='rtl'] { 2 | 3 | div.checkbox { 4 | margin: 10px 0 10px 1px; 5 | } 6 | 7 | input.color { 8 | display: inline-block; 9 | width: 32px; 10 | height: 32px; 11 | vertical-align: top; 12 | cursor: pointer; 13 | opacity: 0; 14 | 15 | + span { 16 | margin-right: -32px; 17 | margin-left: unset; 18 | box-shadow: -1px 1px 10px rgba(0, 0, 0, 0.1); 19 | } 20 | 21 | ~ span.suggestion { 22 | margin-right: 10px; 23 | margin-left: unset; 24 | } 25 | } 26 | 27 | ul.radioWrapper { 28 | 29 | > li { 30 | 31 | > div.checkbox { 32 | margin-left: 10px; 33 | margin-right: 0; 34 | } 35 | } 36 | } 37 | 38 | div.iconShapeWrapper ul.radioWrapper { 39 | 40 | span.base64-icon, span[class^='icon-'] { 41 | margin-right: 3px; 42 | margin-left: 0; 43 | } 44 | } 45 | 46 | input[type='range'] { 47 | background-image: linear-gradient(to left, $mainColor2 0%, $mainColor2 -1px, rgba(0, 0, 0, 0.2) -1px, rgba(0, 0, 0, 0.2) 100%); 48 | 49 | + span { 50 | margin-right: 6px; 51 | margin-left: 0; 52 | 53 | &::before { 54 | right: -8px; 55 | left: unset; 56 | border-right-color: transparent; 57 | border-left-color: rgba(0, 0, 0, 0.1); 58 | 59 | @media (max-width: 1000px) and (min-width: 900px) { 60 | right: 4px; 61 | left: unset; 62 | } 63 | } 64 | } 65 | } 66 | 67 | div.sub div.checkbox { 68 | margin: 0 0 0 7px; 69 | 70 | + label { 71 | margin-left: unset; 72 | } 73 | } 74 | } -------------------------------------------------------------------------------- /src/scss/rtl/include/settings/_header.scss: -------------------------------------------------------------------------------- 1 | 2 | html[dir='rtl'] { 3 | 4 | body > header { 5 | 6 | div#logo { 7 | right: 24px; 8 | left: unset; 9 | 10 | &::before { 11 | background: $gradientRtl; 12 | } 13 | } 14 | 15 | > h1 { 16 | padding-left: 30px; 17 | padding-right: calc(#{$settingsMenuWidth} + 55px); 18 | border-bottom-right-radius: 0; 19 | border-bottom-left-radius: 20px; 20 | 21 | &::before { 22 | -webkit-mask-position-x: calc(100% - #{$settingsMenuWidth} - 15px); 23 | } 24 | 25 | > span { 26 | 27 | + span { 28 | margin-right: 24px; 29 | margin-left: 0; 30 | 31 | &::before { 32 | left: unset; 33 | right: -14px; 34 | border-right-color: $textColorLight; 35 | border-left-color: transparent; 36 | } 37 | } 38 | } 39 | 40 | &::after { 41 | left: unset; 42 | right: calc(#{$settingsMenuWidth} - 10px); 43 | transform: rotateZ(45deg); 44 | } 45 | 46 | } 47 | 48 | &[data-type='newtab'] > h1::before, &[data-type='support'] > h1::before { 49 | transform: scaleX(-1); 50 | -webkit-mask-position-x: calc(#{$settingsMenuWidth} + 15px) !important; 51 | } 52 | 53 | > menu { 54 | margin-left: 0; 55 | margin-right: 40px; 56 | 57 | > li { 58 | 59 | > button { 60 | 61 | &.restore { 62 | margin-right: 10px; 63 | margin-left: 0; 64 | } 65 | 66 | &.save { 67 | 68 | &::before { 69 | transform: scaleX(-1); 70 | } 71 | 72 | &.info { 73 | padding-left: 12px; 74 | padding-right: 34px; 75 | } 76 | } 77 | } 78 | } 79 | } 80 | } 81 | 82 | body > div.dialog { 83 | 84 | > a { 85 | padding-right: 15px; 86 | padding-left: 5px; 87 | 88 | &::before { 89 | right: 0; 90 | left: unset; 91 | transform: rotateZ(-45deg); 92 | } 93 | } 94 | 95 | > span { 96 | padding-right: 30px; 97 | padding-left: 10px; 98 | 99 | &::before { 100 | right: 8px; 101 | left: unset; 102 | } 103 | } 104 | } 105 | } -------------------------------------------------------------------------------- /src/scss/rtl/include/settings/_importExport.scss: -------------------------------------------------------------------------------- 1 | html[dir='rtl'] { 2 | 3 | div.tab[data-name='export'] { 4 | 5 | a.import, a.export { 6 | margin-left: 15px; 7 | margin-right: unset; 8 | } 9 | 10 | [data-value='exportBookmarks'] > a { 11 | position: relative; 12 | padding-right: 42px; 13 | padding-left: 20px; 14 | 15 | > span { 16 | transform: scaleX(-1); 17 | right: 7px; 18 | left: unset; 19 | } 20 | } 21 | } 22 | } -------------------------------------------------------------------------------- /src/scss/rtl/include/settings/_infos.scss: -------------------------------------------------------------------------------- 1 | 2 | html[dir='rtl'] body > section#wrapper { 3 | 4 | div[data-name="aboutme"] { 5 | 6 | > div { 7 | 8 | > div.desc { 9 | 10 | &::before { 11 | left: unset; 12 | right: -5px; 13 | } 14 | 15 | > p.highlight { 16 | padding-right: 44px; 17 | padding-left: 0; 18 | 19 | &::before { 20 | -webkit-mask-position-x: right; 21 | } 22 | } 23 | } 24 | } 25 | } 26 | 27 | div[data-name='permissions'] { 28 | 29 | div.permissions { 30 | 31 | div.details { 32 | @include bubbleRtl; 33 | 34 | > a.github { 35 | padding-left: 12px; 36 | padding-right: 34px; 37 | 38 | &::before { 39 | transform: scaleX(-1); 40 | } 41 | } 42 | } 43 | } 44 | 45 | div.shareInformation { 46 | 47 | label { 48 | margin-right: 0 !important; 49 | margin-left: 20px !important; 50 | } 51 | } 52 | } 53 | } -------------------------------------------------------------------------------- /src/scss/rtl/include/settings/_menu.scss: -------------------------------------------------------------------------------- 1 | html[dir='rtl'] { 2 | 3 | body > section#wrapper { 4 | 5 | &::before { 6 | right: 0; 7 | left: unset; 8 | } 9 | 10 | > aside { 11 | 12 | > nav { 13 | 14 | > ul { 15 | 16 | > li { 17 | 18 | &[data-name='language'] { 19 | 20 | &.incomplete > a > span { 21 | margin-right: 5px; 22 | margin-left: unset; 23 | } 24 | } 25 | 26 | &[data-name='premium'].inactive > a::after { 27 | left: unset; 28 | right: 15px; 29 | } 30 | 31 | &[data-name='newtab'] > a::before, &[data-name='support'] > a::before { 32 | transform: scaleX(-1); 33 | -webkit-mask-position-x: left !important; 34 | } 35 | 36 | &[data-name='expert'] > a { 37 | padding-left: 10px; 38 | padding-right: 32px; 39 | 40 | &::after { 41 | right: 10px; 42 | left: unset; 43 | transform: rotateZ(-135deg); 44 | } 45 | } 46 | 47 | &.active { 48 | 49 | &::after { 50 | left: 0; 51 | right: unset; 52 | transform: scaleX(-1); 53 | } 54 | } 55 | } 56 | } 57 | 58 | ul { 59 | 60 | > li { 61 | 62 | > a { 63 | padding-right: 52px; 64 | padding-left: 10px; 65 | 66 | &::before { 67 | left: unset !important; 68 | right: 22px !important; 69 | -webkit-mask-position: right center !important; 70 | } 71 | } 72 | 73 | > ul { 74 | margin-left: unset; 75 | margin-right: 30px; 76 | 77 | > li { 78 | 79 | > a { 80 | padding-right: 22px; 81 | padding-left: 10px; 82 | 83 | &::before { 84 | right: 12px !important; 85 | left: unset; 86 | } 87 | } 88 | } 89 | } 90 | } 91 | } 92 | } 93 | } 94 | } 95 | } 96 | 97 | -------------------------------------------------------------------------------- /src/scss/rtl/include/settings/_newtab.scss: -------------------------------------------------------------------------------- 1 | 2 | html[dir='rtl'] { 3 | 4 | body[data-type^='newtab'] { 5 | 6 | > section#wrapper > main { 7 | 8 | p.buttons { 9 | 10 | > a.button { 11 | padding-right: 38px; 12 | padding-left: 15px; 13 | 14 | + a.button { 15 | margin-right: 10px; 16 | margin-left: unset; 17 | } 18 | 19 | &[data-name='preview']::before { 20 | right: 2px; 21 | left: unset; 22 | } 23 | 24 | &[data-name='styling']::before { 25 | right: 5px; 26 | left: unset; 27 | transform: scaleX(-1); 28 | } 29 | } 30 | } 31 | 32 | div.faviconOptions { 33 | 34 | > aside { 35 | justify-self: left; 36 | 37 | @media (max-width: 1280px) { 38 | justify-self: right; 39 | } 40 | } 41 | } 42 | } 43 | } 44 | } -------------------------------------------------------------------------------- /src/scss/rtl/include/settings/_premium.scss: -------------------------------------------------------------------------------- 1 | html[dir='rtl'] { 2 | 3 | div.tab[data-name='premium'] { 4 | 5 | > section { 6 | box-shadow: -2px -2px 10px rgba(0, 0, 0, 0.1); 7 | 8 | &[data-type='intro'] { 9 | padding-right: 100px; 10 | padding-left: 20px; 11 | 12 | &::before { 13 | left: unset; 14 | right: 0; 15 | } 16 | 17 | > a { 18 | 19 | &[data-type="activate"] { 20 | margin-left: 0; 21 | margin-right: 10px; 22 | } 23 | } 24 | 25 | > span[data-type='activated'] { 26 | padding-right: 54px; 27 | padding-left: 15px; 28 | 29 | &::before { 30 | left: unset; 31 | right: 0; 32 | width: 50px; 33 | } 34 | } 35 | } 36 | } 37 | } 38 | } 39 | 40 | -------------------------------------------------------------------------------- /src/scss/rtl/include/settings/_sidebar.scss: -------------------------------------------------------------------------------- 1 | html[dir='rtl'] body > section#wrapper > main div.tab[data-name='sidebar'] { 2 | 3 | a.keyboardShortcut { 4 | padding-left: 12px; 5 | padding-right: 40px; 6 | 7 | &::before { 8 | transform: scaleX(-1); 9 | } 10 | } 11 | } -------------------------------------------------------------------------------- /src/scss/rtl/include/settings/_support.scss: -------------------------------------------------------------------------------- 1 | 2 | html[dir='rtl'] { 3 | 4 | div.tab[data-name='support'] { 5 | 6 | div.upload { 7 | 8 | > span { 9 | padding-right: 28px; 10 | padding-left: 3px; 11 | 12 | &::before { 13 | transform: scaleX(-1); 14 | } 15 | } 16 | 17 | > input[type='file'] { 18 | left: unset; 19 | right: -900%; 20 | } 21 | } 22 | 23 | ul.uploadedFiles { 24 | 25 | > li { 26 | 27 | > span { 28 | margin-right: 10px; 29 | margin-left: 0; 30 | } 31 | 32 | > a.close { 33 | left: 0; 34 | right: unset; 35 | } 36 | } 37 | } 38 | 39 | div.faq { 40 | direction: ltr; 41 | } 42 | 43 | div.suggestedAnswers { 44 | 45 | > span.icon { 46 | left: 12px; 47 | right: unset; 48 | box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.2); 49 | } 50 | 51 | > a { 52 | right: 17px; 53 | left: unset; 54 | padding-right: 22px; 55 | padding-left: 0; 56 | 57 | &::before { 58 | transform: scaleX(-1); 59 | } 60 | } 61 | 62 | > div.suggestion { 63 | direction: ltr; 64 | 65 | &:last-of-type::before { 66 | left: 20px; 67 | right: unset; 68 | } 69 | 70 | > p { 71 | text-align: left; 72 | 73 | > a[href] { 74 | float: right; 75 | } 76 | } 77 | } 78 | } 79 | } 80 | } -------------------------------------------------------------------------------- /src/scss/rtl/include/settings/_translation.scss: -------------------------------------------------------------------------------- 1 | 2 | html[dir='rtl'] { 3 | 4 | div.tab[data-name='language'] > div[data-name='translate'] { 5 | 6 | div.translationInfo { 7 | 8 | > hr { 9 | margin-right: 40px; 10 | margin-left: 0; 11 | } 12 | 13 | > div { 14 | padding-right: 40px; 15 | padding-left: 0; 16 | 17 | > div.checkbox { 18 | margin-left: 10px; 19 | margin-right: 0; 20 | } 21 | } 22 | } 23 | 24 | > div.overview { 25 | 26 | div.box { 27 | 28 | > div.progress { 29 | 30 | > div { 31 | right: 0; 32 | left: unset; 33 | } 34 | 35 | &::before { 36 | left: -50px; 37 | right: unset; 38 | padding-right: 5px; 39 | padding-left: 0; 40 | } 41 | } 42 | 43 | > span { 44 | left: 20px; 45 | right: unset; 46 | } 47 | } 48 | } 49 | 50 | > div.langvars { 51 | 52 | div.box { 53 | 54 | > span.amountInfo { 55 | float: left; 56 | direction: ltr; 57 | } 58 | 59 | > span.requiredInfo { 60 | margin-right: 10px; 61 | margin-left: 0; 62 | } 63 | } 64 | } 65 | 66 | > div.category { 67 | 68 | > header { 69 | 70 | > span.amountInfo { 71 | float: left; 72 | margin-right: unset; 73 | margin-left: 15px; 74 | direction: ltr; 75 | } 76 | 77 | > a { 78 | 79 | &.back { 80 | padding-right: 17px; 81 | padding-left: 5px; 82 | 83 | &::before { 84 | left: unset; 85 | right: 0; 86 | transform: rotateZ(135deg); 87 | } 88 | } 89 | 90 | &.goto { 91 | float: left; 92 | margin-right: 3px; 93 | margin-left: 0; 94 | } 95 | } 96 | } 97 | 98 | > ul { 99 | 100 | > li { 101 | 102 | > div { 103 | 104 | &:first-of-type { 105 | direction: ltr; 106 | text-align: left; 107 | 108 | &::after { 109 | right: unset; 110 | left: -4px; 111 | transform: scaleX(-1) rotateZ(45deg); 112 | } 113 | } 114 | } 115 | } 116 | } 117 | } 118 | 119 | > div.thanks { 120 | 121 | blockquote { 122 | padding-right: 36px; 123 | padding-left: 0; 124 | 125 | &::before { 126 | -webkit-mask-position-x: right; 127 | } 128 | 129 | > footer::before { 130 | margin-right: 0; 131 | margin-left: 4px; 132 | } 133 | } 134 | 135 | p.submitWrapper { 136 | 137 | > a { 138 | 139 | &.close { 140 | margin-right: 12px; 141 | margin-left: 0; 142 | } 143 | 144 | &.loading { 145 | padding-right: 12px; 146 | padding-left: 40px; 147 | 148 | > svg.loading { 149 | left: 10px; 150 | right: unset; 151 | } 152 | } 153 | } 154 | } 155 | } 156 | } 157 | } -------------------------------------------------------------------------------- /src/scss/settings.scss: -------------------------------------------------------------------------------- 1 | @import "include/vars"; 2 | @import "include/mixins"; 3 | @import "include/settingsMixins"; 4 | // 5 | $__colorScheme: $mainColor2; 6 | $__textColor: $textColor; 7 | @import "include/loading"; 8 | @import "include/checkbox"; 9 | // 10 | @import "include/generals"; 11 | // 12 | $__scrollBarWidth: 14px; 13 | @import "include/scrollBox"; 14 | @import "include/settings/header"; 15 | @import "include/settings/content"; 16 | @import "include/settings/dashboard"; 17 | @import "include/settings/advanced"; 18 | @import "include/settings/infos"; 19 | @import "include/settings/sidebar"; 20 | @import "include/settings/appearance"; 21 | @import "include/settings/newtab"; 22 | @import "include/settings/support"; 23 | @import "include/settings/premium"; 24 | @import "include/settings/form"; 25 | @import "include/settings/translation"; 26 | @import "include/settings/importExport"; 27 | @import "include/settings/menu"; 28 | @import "include/settings/tooltip"; 29 | @import "include/settings/expert"; 30 | @import "include/settings/colorpicker"; 31 | 32 | body { 33 | background: $bodyBackground; 34 | position: absolute; 35 | top: 0; 36 | left: 0; 37 | width: 100%; 38 | min-width: 1024px; 39 | height: 100%; 40 | user-select: none; 41 | overflow: hidden; 42 | 43 | @media (max-width: 800px) { 44 | overflow: auto; 45 | } 46 | 47 | &::before, &::after { 48 | position: fixed; 49 | @extend %hidden; 50 | } 51 | 52 | &::after { 53 | content: attr(data-successtext); 54 | top: 70px; 55 | left: 0; 56 | right: 0; 57 | margin: auto; 58 | width: 600px; 59 | padding: 40px; 60 | text-align: center; 61 | font-size: 140%; 62 | color: $textColorInverted; 63 | background: $colorSuccess; 64 | transform: translate3d(0, -50px, 0); 65 | transition: opacity 0.5s, transform 0.5s; 66 | z-index: 99; 67 | } 68 | 69 | &::before { 70 | content: ""; 71 | top: 0; 72 | left: 0; 73 | width: 100%; 74 | height: 100%; 75 | background: rgba(255, 255, 255, 0.8); 76 | transition: opacity 0.3s; 77 | z-index: 98; 78 | } 79 | 80 | &.success { 81 | 82 | &::before, &::after { 83 | @extend %visible; 84 | } 85 | 86 | &::after { 87 | transform: translate3d(0, 0, 0); 88 | } 89 | } 90 | 91 | &.initLoading { 92 | 93 | &::before { 94 | @extend %visible; 95 | background: $bodyBackground; 96 | } 97 | } 98 | 99 | &.loading { 100 | 101 | &::before { 102 | @extend %visible; 103 | } 104 | } 105 | 106 | > svg.loading { 107 | position: fixed; 108 | display: block !important; 109 | top: calc(50% - 18px); 110 | left: calc(50% - 18px); 111 | z-index: 99; 112 | } 113 | } 114 | 115 | // Headlines 116 | h2 { 117 | font-size: 150%; 118 | font-weight: $__fontWeightNormal; 119 | color: $mainColor2; 120 | margin: 0 0 15px 0; 121 | } 122 | 123 | // Notice 124 | div.noticeBox { 125 | @include mask('icon-info', $textColorLight, 32px); 126 | 127 | &::before { 128 | top: 0; 129 | bottom: 0; 130 | left: 15px; 131 | width: 32px; 132 | height: 32px; 133 | margin: auto; 134 | } 135 | 136 | > p { 137 | line-height: 150%; 138 | padding: 3px 0 3px 40px; 139 | } 140 | 141 | > h2 { 142 | padding: 0 0 0 40px; 143 | margin-bottom: 5px; 144 | } 145 | } 146 | 147 | // List 148 | ul.bulletList { 149 | 150 | > li { 151 | position: relative; 152 | padding-left: 10px; 153 | 154 | &::before { 155 | content: "-"; 156 | position: absolute; 157 | left: 0; 158 | } 159 | } 160 | } 161 | 162 | // Separator 163 | hr { 164 | border: none; 165 | height: 1px; 166 | background: rgba(0, 0, 0, 0.1); 167 | margin: 15px 0; 168 | } 169 | 170 | // Button 171 | main button[type='submit'], a.button { 172 | @extend %button; 173 | margin: 10px 0; 174 | } 175 | 176 | // Image 177 | img[loading='lazy'] { 178 | transition: opacity 0.5s; 179 | opacity: 0; 180 | 181 | &.lazyloaded { 182 | opacity: 1; 183 | } 184 | } 185 | 186 | // Premium Text 187 | p.premium { 188 | @include mask('icon-premium', $__textColor, 32px); 189 | position: relative; 190 | margin: 20px 0; 191 | padding: 0 0 0 50px; 192 | font-size: 120%; 193 | 194 | &::before { 195 | -webkit-mask-position-x: 0; 196 | pointer-events: none; 197 | } 198 | 199 | > span { 200 | display: block; 201 | margin-bottom: 3px; 202 | } 203 | 204 | > a { 205 | font-weight: $__fontWeightMedium; 206 | cursor: pointer; 207 | color: $mainColor2; 208 | font-size: 80%; 209 | } 210 | } 211 | 212 | // External link 213 | a.externalLink { 214 | display: inline-block; 215 | font-weight: $__fontWeightMedium; 216 | color: $mainColor2; 217 | font-size: 90%; 218 | margin-top: 15px; 219 | 220 | &::before { 221 | content: attr(href); 222 | } 223 | } 224 | 225 | @import "rtl/settings"; -------------------------------------------------------------------------------- /src/scss/themes/focus/content.scss: -------------------------------------------------------------------------------- 1 | @import "../../include/vars"; 2 | @import "../../include/mixins"; 3 | 4 | 5 | // Indicator 6 | body > div#redeviation-bs-indicator[data-theme='focus'] { 7 | 8 | > div { 9 | transition: opacity 0.1s, transform 0.1s; 10 | } 11 | } 12 | 13 | // Sidebar 14 | body > iframe#redeviation-bs-sidebar[data-theme='focus'] { 15 | transition: none; 16 | } 17 | 18 | // Overlay 19 | body > iframe#redeviation-bs-overlay[data-theme='focus'] { 20 | transition: none; 21 | } -------------------------------------------------------------------------------- /src/scss/themes/focus/dark/_overlay.scss: -------------------------------------------------------------------------------- 1 | .dark[data-theme='focus'] div.modal { 2 | 3 | > header { 4 | border-bottom-color: rgba(255, 255, 255, 0.15); 5 | } 6 | } -------------------------------------------------------------------------------- /src/scss/themes/focus/dark/_sidebar.scss: -------------------------------------------------------------------------------- 1 | .dark[data-theme='focus'] { 2 | 3 | div.contextmenu { 4 | box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); 5 | border: 1px solid rgba(255, 255, 255, 0.1); 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/scss/themes/focus/overlay.scss: -------------------------------------------------------------------------------- 1 | @import "../../include/vars"; 2 | @import "../../include/mixins"; 3 | 4 | [data-theme='focus'] { 5 | 6 | div.modal { 7 | transition: none; 8 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 9 | 10 | > header { 11 | color: $__textColor; 12 | box-shadow: none; 13 | background: none; 14 | border-bottom: 1px solid rgba(0, 0, 0, 0.2); 15 | 16 | &::before { 17 | background: $__textColor; 18 | } 19 | 20 | > h1 { 21 | font-size: 140%; 22 | } 23 | 24 | > a.close { 25 | transition: none; 26 | 27 | &::before { 28 | background: $__textColor; 29 | } 30 | 31 | &:hover { 32 | background-color: $__hoverColor; 33 | } 34 | } 35 | } 36 | 37 | > a.preview, > span.preview { 38 | transition: none; 39 | margin: 20px 30px 10px; 40 | padding: 10px 12px; 41 | 42 | + a.previewUrl { 43 | margin-top: -6px; 44 | } 45 | } 46 | 47 | &.sidepanel { 48 | > a.preview, > span.preview { 49 | margin: 10px 15px 10px; 50 | } 51 | } 52 | 53 | > menu.buttons > a::before { 54 | transition: none; 55 | } 56 | 57 | &[data-type='edit'] > ul > li.info > span { 58 | transition: none; 59 | } 60 | 61 | &[data-type='add'] { 62 | > menu[data-name='select'] { 63 | transition: none; 64 | } 65 | 66 | > ul { 67 | transition: none; 68 | } 69 | } 70 | } 71 | } 72 | 73 | @import "dark/overlay"; -------------------------------------------------------------------------------- /src/scss/themes/focus/rtl/_sidebar.scss: -------------------------------------------------------------------------------- 1 | html[dir='rtl'] [data-theme='focus'] section#sidebar { 2 | 3 | > header { 4 | right: unset; 5 | left: 20px; 6 | 7 | > div.searchBox { 8 | left: unset; 9 | right: 0; 10 | border-radius: 0 0 3px 0; 11 | 12 | > input[type='text'] { 13 | padding: 0 7px 0 5px; 14 | } 15 | } 16 | } 17 | 18 | > div.scrollBox { 19 | 20 | > ul a, > div.pinned > ul a { 21 | 22 | > span.label { 23 | margin-left: 0; 24 | margin-right: -5px; 25 | } 26 | } 27 | } 28 | } 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /src/scss/themes/glass/content.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kiuryy/Bookmark_Sidebar/ee71ce1d6095789abc659f1e8b5edc5157b7fd5d/src/scss/themes/glass/content.scss -------------------------------------------------------------------------------- /src/scss/themes/glass/dark/_overlay.scss: -------------------------------------------------------------------------------- 1 | .dark[data-theme='glass'] div.modal { 2 | background: #{"rgba(0, 0, 0, #{$__backgroundTransparency})"}; 3 | 4 | &[data-type='keyboardShortcuts']::after, 5 | &.urlCheckResults[data-type='checkBookmarks']::after, 6 | &[data-type='searchEngine']::after { 7 | background: rgba(255, 255, 255, 0.1); 8 | } 9 | 10 | &[data-type='edit'], &[data-type='add'] { 11 | 12 | > ul { 13 | 14 | > li { 15 | 16 | > input, > textarea, > select { 17 | border-color: rgba(255, 255, 255, 0.15); 18 | } 19 | } 20 | } 21 | } 22 | 23 | > a.preview, > span.preview { 24 | background: rgba(255, 255, 255, 0.1) 25 | } 26 | } -------------------------------------------------------------------------------- /src/scss/themes/glass/dark/_sidebar.scss: -------------------------------------------------------------------------------- 1 | .dark[data-theme='glass'] { 2 | 3 | section#sidebar { 4 | background: #{"rgba(0, 0, 0, #{$__backgroundTransparency})"}; 5 | 6 | > header { 7 | 8 | &.searchVisible > div.searchBox { 9 | background-color: rgba(255, 255, 255, 0.1); 10 | 11 | > a.searchClose { 12 | 13 | &::before { 14 | background-color: $__textColor; 15 | } 16 | 17 | &:hover { 18 | background-color: rgba(255, 255, 255, 0.1); 19 | } 20 | } 21 | } 22 | } 23 | 24 | > div.filter { 25 | background: $__textColor; 26 | 27 | a { 28 | color: $darkContentBackground2; 29 | 30 | &[data-direction]::before { 31 | background-color: $darkContentBackground2; 32 | } 33 | } 34 | 35 | > ul > li > div.checkbox::before { 36 | background-color: $darkContentBackground2; 37 | } 38 | } 39 | 40 | > div.scrollBox { 41 | 42 | > div.pinned { 43 | background: transparent; 44 | 45 | &.fixed { 46 | background: $darkContentBackground; 47 | border-color: rgba(255, 255, 255, 0.2); 48 | } 49 | } 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/scss/themes/glass/overlay.scss: -------------------------------------------------------------------------------- 1 | @import "../../include/vars"; 2 | @import "../../include/mixins"; 3 | 4 | [data-theme='glass'] { 5 | backdrop-filter: blur($__backgroundBlur); 6 | 7 | div.modal { 8 | background: #{"rgba(255, 255, 255, #{$__backgroundTransparency})"}; 9 | backdrop-filter: blur($__backgroundBlur); 10 | transition: transform 0.15s; 11 | 12 | &:not(.visible) { 13 | transform: scale(0.9); 14 | } 15 | 16 | > header { 17 | color: $__textColor; 18 | box-shadow: none; 19 | background: none; 20 | 21 | &::before { 22 | background: $__textColor; 23 | } 24 | 25 | > h1 { 26 | font-size: 140%; 27 | } 28 | 29 | > a.close { 30 | 31 | &::before { 32 | background: $__textColor; 33 | } 34 | 35 | &:hover { 36 | background-color: $__hoverColor; 37 | } 38 | } 39 | } 40 | 41 | > div.scrollBox { 42 | height: calc(100% - #{$__overlayHeaderHeight} - 57px); 43 | } 44 | 45 | &[data-type='keyboardShortcuts']::after, 46 | &.urlCheckResults[data-type='checkBookmarks']::after, 47 | &[data-type='searchEngine']::after { 48 | background: rgba(0, 0, 0, 0.03); 49 | } 50 | 51 | &[data-type='checkBookmarks'] { 52 | 53 | > menu.categories > li.active { 54 | background-color: $__hoverColor; 55 | 56 | &::after { 57 | right: -4px; 58 | width: 10px; 59 | height: 10px; 60 | border: none; 61 | border-top: 3px solid $__textColor; 62 | border-right: 3px solid $__textColor; 63 | background: none; 64 | } 65 | } 66 | 67 | > div[id^='results_'] { 68 | 69 | > p, > ul { 70 | background: transparent; 71 | } 72 | 73 | > ul > li a.urlCheckAction:hover { 74 | background-color: $__hoverColor; 75 | } 76 | } 77 | } 78 | 79 | &[data-type='infos'] { 80 | 81 | > ul.breadcrumb { 82 | 83 | &::before { 84 | display: none; 85 | } 86 | 87 | > li { 88 | 89 | + li { 90 | padding-left: 18px; 91 | } 92 | 93 | &::after { 94 | display: none; 95 | } 96 | 97 | &:last-child { 98 | margin-right: 0; 99 | 100 | &::before { 101 | display: none; 102 | } 103 | } 104 | 105 | &:not(:last-child)::before { 106 | top: 0; 107 | bottom: 0; 108 | margin: auto; 109 | width: 0; 110 | height: 0; 111 | right: -12px; 112 | border: 4px solid transparent; 113 | border-left-color: $__textColor; 114 | } 115 | } 116 | } 117 | } 118 | } 119 | } 120 | 121 | 122 | @import "rtl/overlay"; 123 | @import "dark/overlay"; -------------------------------------------------------------------------------- /src/scss/themes/glass/rtl/_overlay.scss: -------------------------------------------------------------------------------- 1 | html[dir='rtl'] [data-theme='glass'] div.modal { 2 | 3 | &[data-type='checkBookmarks'] { 4 | 5 | > menu.categories > li.active { 6 | 7 | &::after { 8 | right: unset; 9 | left: -4px; 10 | border: none; 11 | border-left: 3px solid $__textColor; 12 | border-bottom: 3px solid $__textColor; 13 | } 14 | } 15 | } 16 | 17 | &[data-type='infos'] { 18 | 19 | > ul.breadcrumb { 20 | 21 | > li { 22 | 23 | + li { 24 | padding-right: 18px; 25 | } 26 | 27 | &:last-child { 28 | margin-left: 0; 29 | } 30 | 31 | &:not(:last-child)::before { 32 | right: unset; 33 | left: -12px; 34 | } 35 | } 36 | } 37 | } 38 | } -------------------------------------------------------------------------------- /src/scss/themes/glass/rtl/_sidebar.scss: -------------------------------------------------------------------------------- 1 | html[dir='rtl'] [data-theme='glass'] section#sidebar { 2 | 3 | > div.scrollBox { 4 | 5 | > div.pinned { 6 | 7 | &.fixed { 8 | margin: 0 10px 0 0; 9 | } 10 | } 11 | } 12 | } 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/scss/themes/glass/sidebar.scss: -------------------------------------------------------------------------------- 1 | @import "../../include/vars"; 2 | @import "../../include/mixins"; 3 | 4 | [data-theme='glass'] { 5 | 6 | section#sidebar { 7 | background: #{"rgba(255, 255, 255, #{$__backgroundTransparency})"}; 8 | backdrop-filter: blur($__backgroundBlur); 9 | 10 | > header { 11 | background: none; 12 | box-shadow: none; 13 | color: $__textColor; 14 | 15 | > h1 { 16 | color: $__textColor; 17 | } 18 | 19 | > a { 20 | 21 | &::before { 22 | background-color: $__textColor; 23 | } 24 | 25 | &:hover, &.active { 26 | background-color: $__hoverColor; 27 | } 28 | 29 | &.cancel:not([data-type='compact']) { 30 | color: $__textColor; 31 | 32 | &::after { 33 | background: $__textColor; 34 | opacity: 0.4; 35 | } 36 | } 37 | } 38 | 39 | &.searchVisible > div.searchBox { 40 | background-color: rgba(0, 0, 0, 0.07); 41 | 42 | > input[type='text'] { 43 | color: $__textColor; 44 | 45 | &::-webkit-input-placeholder { 46 | color: $__textColor; 47 | opacity: 0.7; 48 | } 49 | } 50 | 51 | > a.searchClose { 52 | 53 | &::before { 54 | background-color: $__textColor; 55 | } 56 | 57 | &:hover { 58 | background-color: rgba(0, 0, 0, 0.07); 59 | } 60 | } 61 | } 62 | } 63 | 64 | > div.filter { 65 | background: $__textColor; 66 | border-radius: 5px; 67 | transition: opacity 0.3s, transform 0.3s, box-shadow 0.3s; 68 | 69 | a { 70 | color: $__foregroundColor; 71 | 72 | &[data-direction]::before { 73 | background-color: $__foregroundColor; 74 | } 75 | } 76 | 77 | > ul > li > div.checkbox::before { 78 | background-color: $__foregroundColor; 79 | } 80 | } 81 | 82 | > div.scrollBox { 83 | 84 | > div.pinned { 85 | background: transparent; 86 | 87 | &.fixed { 88 | border: 2px solid rgba(0, 0, 0, 0.2); 89 | background: $contentBackground; 90 | border-radius: 5px; 91 | padding: 3px 0; 92 | margin: 0 0 0 10px; 93 | 94 | &::after { 95 | display: none; 96 | } 97 | } 98 | } 99 | 100 | &.scrolled:not([data-direction='up']) ~ div.filter { 101 | opacity: 0; 102 | transform: translate3d(0, -20px, 0); 103 | } 104 | } 105 | } 106 | } 107 | 108 | @import "rtl/sidebar"; 109 | @import "dark/sidebar"; --------------------------------------------------------------------------------