├── .eslintrc ├── .jshintrc ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── Roboto-Bold.woff2 ├── Roboto-BoldItalic.woff2 ├── Roboto-Italic.woff2 ├── Roboto-Regular.woff2 ├── _locales ├── en │ └── messages.json ├── ru │ └── messages.json └── zh_TW │ └── messages.json ├── background.js ├── content.css ├── content.js ├── dialog.css ├── dialog.html ├── dialog.js ├── icons ├── archive.svg ├── article.svg ├── attention.svg ├── bing.svg ├── bookmarks.svg ├── both.svg ├── close.svg ├── closeAll.svg ├── default.svg ├── delete.svg ├── domain.svg ├── downloads.svg ├── duckduckgo.svg ├── duplicate.svg ├── edit.svg ├── facebook.svg ├── fav.svg ├── folder-folded.svg ├── folder-open-hover.svg ├── folder-open.svg ├── folder.svg ├── folderArchive.svg ├── folderDelete.svg ├── folderNew.svg ├── ftp.svg ├── google.svg ├── helpTranslate.svg ├── hideReaded.svg ├── hideReadedAll.svg ├── history.svg ├── home.svg ├── importExport.svg ├── left.svg ├── leftBarHide.svg ├── leftBarShow.svg ├── loader.svg ├── logout.svg ├── markReaded.svg ├── markReadedAll.svg ├── markReadedAllFeeds.svg ├── move.svg ├── narrow.svg ├── new.svg ├── none.svg ├── openAll.svg ├── options.svg ├── pause.svg ├── pdf.svg ├── picture.svg ├── pin.svg ├── plain.svg ├── pocket.svg ├── reload.svg ├── reloadAll.svg ├── resume.svg ├── right.svg ├── rightBarHide.svg ├── rightBarShow.svg ├── rss.svg ├── search.svg ├── share.svg ├── showReaded.svg ├── showReadedAll.svg ├── sidebar-icon-32.png ├── sidebar-icon-64.png ├── sidebarActions.svg ├── startpage.svg ├── stop.svg ├── tabs.svg ├── telegram.svg ├── tree.svg ├── triangle-arrow.svg ├── twitter.svg ├── type.svg ├── unarchive.svg ├── undo.svg ├── unfav.svg ├── unpin.svg ├── user.svg ├── video.svg ├── vkontakte.svg ├── wide.svg ├── wikipedia.svg ├── window.svg ├── wrench.svg ├── yahoo.svg └── yandex.svg ├── manifest.json ├── options.css ├── options.html ├── options.js ├── popup.css ├── popup.html ├── popup.js ├── sidebar-bookmarks.css ├── sidebar-common.css ├── sidebar-downloads.css ├── sidebar-history.css ├── sidebar-pocket.css ├── sidebar-rss.css ├── sidebar-search.css ├── sidebar-tabs.css ├── sidebar.html ├── sidebar.js ├── startpage.css ├── startpage.html └── startpage.js /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "webextensions": true, 5 | "es6": true 6 | }, 7 | "extends": "eslint:recommended", 8 | "rules": { 9 | "linebreak-style": [ 10 | "error", 11 | "unix" 12 | ], 13 | "quotes": [ 14 | "error", 15 | "single" 16 | ], 17 | "semi": [ 18 | "error", 19 | "always" 20 | ], 21 | "no-unused-vars" : [ 22 | "error", 23 | { 24 | "vars": "all", 25 | "args": "none", 26 | "ignoreRestSiblings": false 27 | } 28 | ] 29 | } 30 | } -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "browser" : true, 3 | "devel" : true, 4 | "esversion" : 6, 5 | "strict" : true, 6 | "predef" : ["chrome", "browser", "opr"] 7 | } -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Translation 2 | 3 | - Create folder with locale name inside _locales 4 | - Copy messages.json from "en" or "ru" folder 5 | - Translate it 6 | - Make pull request 7 | 8 | Or if you don't familiar with git just send me translation via email pochtayopt%gmail.com -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Sidebar+ 2 | 3 | WebExtension that imprement Sidebar into browser. 4 | 5 | ### Install from source 6 | 7 | **Chrome & Opera:** 8 | - Open chrome://extensions/ 9 | - Check "Developer mode" 10 | - Click "Install unpacked extension" button 11 | 12 | **Firefox:** 13 | - Open about:debugging 14 | - Click "Load Temporary Add-on" 15 | 16 | ### Install from store 17 | 18 | **Chrome:** 19 | Removed by Google 20 | 21 | **Firefox:** 22 | [download](https://addons.mozilla.org/en-US/firefox/addon/sidebar_plus/) 23 | 24 | **Opera:** 25 | none yet 26 | 27 | ### Remove tabs 28 | 29 | **Chrome and Opera** 30 | no idea 31 | 32 | **Firefox** 33 | - Create "chrome" folder inside your profile folder 34 | - Create file "userChrome.css" inside "chrome" folder 35 | - Copypaste "#TabsToolbar {visibility: collapse;}" info "userChrome.css" 36 | - Restart Firefox 37 | 38 | more tricks with "userChrome.css" [here](https://github.com/Timvde/UserChrome-Tweaks) -------------------------------------------------------------------------------- /Roboto-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zluca/Sidebar/9ece8d1f9222d4e67424e9b13d20fa981a25cba6/Roboto-Bold.woff2 -------------------------------------------------------------------------------- /Roboto-BoldItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zluca/Sidebar/9ece8d1f9222d4e67424e9b13d20fa981a25cba6/Roboto-BoldItalic.woff2 -------------------------------------------------------------------------------- /Roboto-Italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zluca/Sidebar/9ece8d1f9222d4e67424e9b13d20fa981a25cba6/Roboto-Italic.woff2 -------------------------------------------------------------------------------- /Roboto-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zluca/Sidebar/9ece8d1f9222d4e67424e9b13d20fa981a25cba6/Roboto-Regular.woff2 -------------------------------------------------------------------------------- /content.css: -------------------------------------------------------------------------------- 1 | .sbp-sidebar { 2 | contain: strict!important; 3 | border: unset!important; 4 | position: fixed!important; 5 | top: 0!important; 6 | margin: 0!important; 7 | padding: 0!important; 8 | height: 100vh!important; 9 | box-sizing: border-box!important; 10 | overflow: hidden!important; 11 | z-index: 2147483644!important; 12 | cursor: default!important; 13 | min-width: 0!important; 14 | display: grid!important; 15 | grid-template-rows: 100%!important; 16 | grid-template-columns: max-content 1fr; 17 | } 18 | #sbp-rightBar { 19 | right: 0!important; 20 | left: unset!important; 21 | } 22 | #sbp-leftBar { 23 | left: 0!important; 24 | right: unset!important; 25 | direction: rtl!important; 26 | } 27 | .sbp-sidebar>div { 28 | height: 100%!important; 29 | background-color: var(--sbp-border-color)!important; 30 | } 31 | .sbp-sidebar>div:hover { 32 | background-color: var(--sbp-border-color-active)!important; 33 | } 34 | .sbp-sidebar>iframe { 35 | border: unset!important; 36 | padding: 0!important; 37 | margin: 0!important; 38 | width: 100%!important; 39 | height: 100%!important; 40 | } 41 | 42 | #mask { 43 | contain: strict!important; 44 | width: 100vw!important; 45 | height: 100vh!important; 46 | z-index: 2147483645!important; 47 | display: none!important; 48 | position:fixed!important; 49 | left: 0!important; 50 | top: 0!important; 51 | } 52 | #mask.active { 53 | display: block!important; 54 | } 55 | 56 | #sbp-dialog { 57 | contain: strict!important; 58 | width: 100%!important; 59 | max-width: none!important; 60 | height: 100vh!important; 61 | top: 0!important; 62 | left: 0!important; 63 | border: none!important; 64 | position: fixed!important; 65 | z-index: 2147483646!important; 66 | } 67 | -------------------------------------------------------------------------------- /dialog.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-size: 'medium'; 3 | line-height: 1.2rem; 4 | --font-color: #444; 5 | --font-color-active: #000; 6 | --font-color-inactive: #999; 7 | --border-color: #eee; 8 | --border-color-active: #ccc; 9 | --background-color: #fcfcfc; 10 | --background-color-active: #e3ecf1; 11 | } 12 | @font-face { 13 | font-family: "Roboto"; 14 | src: url(./Roboto-Regular.woff2); 15 | font-style: normal; 16 | font-weight: normal; 17 | } 18 | @font-face { 19 | font-family: "Roboto"; 20 | src: url(./Roboto-Italic.woff2); 21 | font-style: italic; 22 | font-weight: normal; 23 | } 24 | @font-face { 25 | font-family: "Roboto"; 26 | src: url(./Roboto-Bold.woff2); 27 | font-style: normal; 28 | font-weight: bold; 29 | } 30 | @font-face { 31 | font-family: "Roboto"; 32 | src: url(./Roboto-BoldItalic.woff2); 33 | font-style: italic; 34 | font-weight: bold; 35 | } 36 | body { 37 | width: 100%; 38 | height: 100vh; 39 | box-sizing: border-box; 40 | overflow: visible; 41 | margin: 0; 42 | font-family: “Roboto”; 43 | } 44 | #sbp-dialog { 45 | color: var(--font-color); 46 | display: block; 47 | font-family: "DejaVu Sans", Arial, sans-serif; 48 | overflow: hidden; 49 | z-index: 9999; 50 | background-color: var(--background-color); 51 | padding: 1.5rem 1rem; 52 | margin-left: auto; 53 | margin-right: auto; 54 | user-select: none; 55 | moz-user-select: none; 56 | word-wrap: break-word; 57 | border-style: solid; 58 | border-width: .1rem; 59 | border-color: var(--border-color); 60 | box-shadow: 0 0 .1rem .1rem var(--border-color-active); 61 | } 62 | header { 63 | white-space: nowrap; 64 | text-align: center; 65 | font-size: 1.6rem; 66 | } 67 | main { 68 | margin: 1rem 0 2rem 0; 69 | display: grid; 70 | grid-template-columns: min-content auto; 71 | grid-row-gap: 1rem; 72 | grid-column-gap: 0.8rem; 73 | align-items: center; 74 | font-size: 1rem; 75 | } 76 | main>p { 77 | grid-column-start: 1; 78 | grid-column-end: 3; 79 | margin: 0.5rem 0; 80 | display: inline-block; 81 | } 82 | main>label { 83 | padding: 0.3rem; 84 | font-size: 1.2rem; 85 | } 86 | main>label { 87 | text-align: right; 88 | } 89 | main>label.reverse { 90 | text-align: left; 91 | } 92 | main>input { 93 | padding: 0; 94 | margin: 0; 95 | font-size: 1.2rem; 96 | border: solid 0.05rem var(--border-color); 97 | padding: 0.1rem 0.3rem; 98 | background-color: var(--background-color); 99 | } 100 | main>textarea { 101 | font-size: 1rem; 102 | min-height: 4rem; 103 | min-width: 5rem; 104 | padding: 0.1rem 0.3rem; 105 | max-lines: 6; 106 | background-color: var(--background-color); 107 | color: var(--font-color-active); 108 | } 109 | main>textarea::placeholder { 110 | color: var(--font-color-inactive); 111 | } 112 | main>input[type="text"] { 113 | color: var(--font-color-active); 114 | min-width: 5rem; 115 | } 116 | main>input[type="text"]::placeholder { 117 | color: var(--font-color-inactive); 118 | } 119 | .options-section { 120 | padding: .3rem 0; 121 | border-style: solid; 122 | border-width: .05rem 0; 123 | border-color: transparent; 124 | } 125 | .options-section.active { 126 | border-color: var(--border-color-active); 127 | } 128 | label.icon { 129 | cursor: pointer; 130 | text-align: left; 131 | white-space: nowrap; 132 | padding: .73rem .5rem .73rem .5rem; 133 | background-repeat: no-repeat; 134 | background-size: 2rem 2rem; 135 | background-position: 0 .3rem; 136 | font-size: 1.4rem; 137 | } 138 | .option { 139 | cursor: pointer; 140 | display: inline-block; 141 | width: 1.6rem; 142 | height: 1.6rem; 143 | background-size: 1.2rem 1.2rem; 144 | background-repeat: no-repeat; 145 | background-position: .2rem .2rem; 146 | margin: 0 .5rem .3rem .5rem; 147 | -webkit-mask-repeat: no-repeat; 148 | -webkit-mask-size: 100% 100%; 149 | -webkit-mask-position: center; 150 | -webkit-mask-mode: alpha; 151 | mask-repeat: no-repeat; 152 | mask-size: 100% 100%; 153 | mask-position: center; 154 | mask-mode: alpha; 155 | } 156 | .option:hover { 157 | background-size: 1.4rem 1.4rem; 158 | background-position: .1rem .1rem; 159 | } 160 | .selected.option { 161 | background-color: var(--background-color-active); 162 | } 163 | div.options-section>label { 164 | display: block; 165 | margin-bottom: .5rem; 166 | } 167 | select { 168 | font-size: 1rem; 169 | display: block; 170 | border-width: .1rem; 171 | } 172 | 173 | footer { 174 | font-size: 1rem; 175 | display: grid; 176 | grid-template-columns: 1fr auto; 177 | } 178 | footer>div:first-child { 179 | display: flex; 180 | flex-flow: row; 181 | align-items: center; 182 | white-space: nowrap; 183 | } 184 | footer>div>span { 185 | margin: 0.5rem 0 0.5rem 1rem; 186 | padding: 0.3rem 1rem; 187 | min-width: 5rem; 188 | border-style: solid; 189 | border-color: var(--border-color); 190 | border-width: 0.05rem; 191 | cursor: pointer; 192 | } 193 | footer>div>span:hover { 194 | color: var(--font-color-active); 195 | border-color: var(--border-color-active); 196 | } 197 | 198 | #completer { 199 | display: none; 200 | position: fixed; 201 | overflow: hidden; 202 | font-size: 1.2rem; 203 | border-width: 0.05rem; 204 | border-style: solid; 205 | border-color: var(--border-color); 206 | background-color: var(--background-color); 207 | } 208 | #completer>p { 209 | display: block; 210 | color: var(--font-color); 211 | width: 100%; 212 | margin: 0; 213 | padding: 0.1rem 0.5rem 0.1rem 1.6rem; 214 | border-style: solid; 215 | border-color: transparent; 216 | border-width: 0.1rem 0; 217 | background-repeat: no-repeat; 218 | background-size: 1.2rem 1.2rem; 219 | background-position: 0 0.2rem; 220 | text-overflow: ellipsis; 221 | white-space: nowrap; 222 | } 223 | #completer>p:hover { 224 | color: var(--font-color-active); 225 | background-color: var(--background-color-active); 226 | border-color: var(--border-color); 227 | cursor: default; 228 | } -------------------------------------------------------------------------------- /dialog.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/archive.svg: -------------------------------------------------------------------------------- 1 | 2 | 17 | 19 | 20 | 22 | image/svg+xml 23 | 25 | 26 | 27 | 28 | 30 | 50 | 54 | 58 | 62 | 66 | 67 | -------------------------------------------------------------------------------- /icons/article.svg: -------------------------------------------------------------------------------- 1 | 2 | 19 | 21 | 22 | 24 | image/svg+xml 25 | 27 | 28 | 29 | 30 | 32 | 52 | 56 | 60 | 64 | 68 | 72 | 73 | -------------------------------------------------------------------------------- /icons/attention.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | image/svg+xml -------------------------------------------------------------------------------- /icons/bing.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/bookmarks.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/both.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /icons/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 41 | 43 | 44 | 46 | image/svg+xml 47 | 49 | 50 | 51 | 52 | 53 | 58 | 63 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /icons/closeAll.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 41 | 43 | 44 | 46 | image/svg+xml 47 | 49 | 50 | 51 | 52 | 53 | 58 | 63 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /icons/default.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | -------------------------------------------------------------------------------- /icons/delete.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/domain.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/downloads.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/duckduckgo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /icons/duplicate.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 12 | 13 | 14 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /icons/edit.svg: -------------------------------------------------------------------------------- 1 | 2 | 19 | 21 | 22 | 24 | image/svg+xml 25 | 27 | 28 | 29 | 30 | 31 | 33 | 53 | 59 | 60 | -------------------------------------------------------------------------------- /icons/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | image/svg+xml 43 | 48 | 49 | -------------------------------------------------------------------------------- /icons/fav.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/folder-folded.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /icons/folder-open-hover.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /icons/folder-open.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /icons/folder.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/folderArchive.svg: -------------------------------------------------------------------------------- 1 | 2 | 17 | 19 | 20 | 22 | image/svg+xml 23 | 25 | 26 | 27 | 28 | 30 | 50 | 54 | 58 | 62 | 66 | 67 | -------------------------------------------------------------------------------- /icons/folderDelete.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/folderNew.svg: -------------------------------------------------------------------------------- 1 | 2 | 19 | 21 | 22 | 24 | image/svg+xml 25 | 27 | 28 | 29 | 30 | 31 | 33 | 53 | 58 | 63 | 64 | -------------------------------------------------------------------------------- /icons/ftp.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | image/svg+xml 45 | 48 | 50 | 51 | 55 | 59 | 63 | 67 | 68 | 69 | 72 | 73 | 76 | 77 | 80 | 81 | 84 | 85 | 88 | 89 | 92 | 93 | 96 | 97 | 100 | 101 | 104 | 105 | 108 | 109 | 112 | 113 | 116 | 117 | 120 | 121 | 124 | 125 | 128 | 129 | -------------------------------------------------------------------------------- /icons/google.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /icons/helpTranslate.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 40 | 42 | 43 | 45 | image/svg+xml 46 | 48 | 49 | 50 | 51 | 52 | 57 | 话 79 | 80 | 81 | -------------------------------------------------------------------------------- /icons/hideReaded.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | image/svg+xml -------------------------------------------------------------------------------- /icons/hideReadedAll.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | image/svg+xml -------------------------------------------------------------------------------- /icons/history.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/home.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 8 | 9 | -------------------------------------------------------------------------------- /icons/importExport.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 40 | 42 | 43 | 45 | image/svg+xml 46 | 48 | 49 | 50 | 51 | 52 | 57 | 62 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /icons/left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/leftBarHide.svg: -------------------------------------------------------------------------------- 1 | 2 | image/svg+xml 43 | 48 | -------------------------------------------------------------------------------- /icons/leftBarShow.svg: -------------------------------------------------------------------------------- 1 | 2 | image/svg+xml 43 | 48 | -------------------------------------------------------------------------------- /icons/loader.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | image/svg+xml 46 | 47 | 88 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /icons/logout.svg: -------------------------------------------------------------------------------- 1 | 2 | 15 | 17 | 18 | 20 | image/svg+xml 21 | 23 | 24 | 25 | 26 | 28 | 48 | 53 | 58 | 59 | -------------------------------------------------------------------------------- /icons/markReaded.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 41 | 43 | 44 | 46 | image/svg+xml 47 | 49 | 50 | 51 | 52 | 53 | 58 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /icons/markReadedAll.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 41 | 43 | 44 | 46 | image/svg+xml 47 | 49 | 50 | 51 | 52 | 53 | 58 | 63 | 70 | 77 | 84 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /icons/markReadedAllFeeds.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 41 | 43 | 44 | 46 | image/svg+xml 47 | 49 | 50 | 51 | 52 | 53 | 58 | 63 | 70 | 77 | 84 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /icons/move.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 40 | 42 | 43 | 45 | image/svg+xml 46 | 48 | 49 | 50 | 51 | 52 | 57 | 62 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /icons/narrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 17 | 19 | 20 | 22 | image/svg+xml 23 | 25 | 26 | 27 | 28 | 30 | 50 | 55 | 60 | 65 | 66 | -------------------------------------------------------------------------------- /icons/new.svg: -------------------------------------------------------------------------------- 1 | 2 | 17 | 19 | 20 | 22 | image/svg+xml 23 | 25 | 26 | 27 | 28 | 30 | 50 | 55 | 60 | 61 | -------------------------------------------------------------------------------- /icons/none.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /icons/openAll.svg: -------------------------------------------------------------------------------- 1 | 2 | 17 | 19 | 20 | 22 | image/svg+xml 23 | 25 | 26 | 27 | 28 | 29 | 31 | 51 | 56 | 61 | 66 | 71 | 76 | 81 | 82 | -------------------------------------------------------------------------------- /icons/options.svg: -------------------------------------------------------------------------------- 1 | 2 | 19 | 21 | 22 | 24 | image/svg+xml 25 | 27 | 28 | 29 | 30 | 31 | 33 | 53 | 59 | 60 | -------------------------------------------------------------------------------- /icons/pause.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/pdf.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | image/svg+xml 46 | 48 | 50 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /icons/picture.svg: -------------------------------------------------------------------------------- 1 | 2 | 17 | 19 | 20 | 22 | image/svg+xml 23 | 25 | 26 | 27 | 28 | 30 | 50 | 55 | 60 | 65 | 66 | -------------------------------------------------------------------------------- /icons/pin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/plain.svg: -------------------------------------------------------------------------------- 1 | 2 | 17 | 19 | 20 | 22 | image/svg+xml 23 | 25 | 26 | 27 | 28 | 29 | 31 | 51 | 56 | 61 | 66 | 71 | 76 | 81 | 82 | -------------------------------------------------------------------------------- /icons/pocket.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /icons/reload.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | image/svg+xml -------------------------------------------------------------------------------- /icons/reloadAll.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | image/svg+xml -------------------------------------------------------------------------------- /icons/resume.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/rightBarHide.svg: -------------------------------------------------------------------------------- 1 | 2 | image/svg+xml 43 | 48 | -------------------------------------------------------------------------------- /icons/rightBarShow.svg: -------------------------------------------------------------------------------- 1 | 2 | image/svg+xml 43 | 48 | -------------------------------------------------------------------------------- /icons/rss.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/search.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/share.svg: -------------------------------------------------------------------------------- 1 | 2 | image/svg+xml 43 | 48 | 49 | -------------------------------------------------------------------------------- /icons/showReaded.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | image/svg+xml -------------------------------------------------------------------------------- /icons/showReadedAll.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | image/svg+xml -------------------------------------------------------------------------------- /icons/sidebar-icon-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zluca/Sidebar/9ece8d1f9222d4e67424e9b13d20fa981a25cba6/icons/sidebar-icon-32.png -------------------------------------------------------------------------------- /icons/sidebar-icon-64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zluca/Sidebar/9ece8d1f9222d4e67424e9b13d20fa981a25cba6/icons/sidebar-icon-64.png -------------------------------------------------------------------------------- /icons/sidebarActions.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 40 | 42 | 43 | 45 | image/svg+xml 46 | 48 | 49 | 50 | 51 | 52 | 57 | 63 | 69 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /icons/stop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/tabs.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/telegram.svg: -------------------------------------------------------------------------------- 1 | 2 | image/svg+xml 42 | 44 | 52 | 57 | 58 | -------------------------------------------------------------------------------- /icons/tree.svg: -------------------------------------------------------------------------------- 1 | 2 | 17 | 19 | 20 | 22 | image/svg+xml 23 | 25 | 26 | 27 | 28 | 29 | 31 | 51 | 56 | 61 | 66 | 71 | 76 | 81 | 82 | -------------------------------------------------------------------------------- /icons/triangle-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /icons/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | image/svg+xml 43 | 48 | 49 | -------------------------------------------------------------------------------- /icons/type.svg: -------------------------------------------------------------------------------- 1 | 2 | 17 | 19 | 20 | 22 | image/svg+xml 23 | 25 | 26 | 27 | 28 | 29 | 31 | 51 | 56 | 61 | 66 | 71 | 76 | 81 | 82 | -------------------------------------------------------------------------------- /icons/unarchive.svg: -------------------------------------------------------------------------------- 1 | 2 | 17 | 19 | 20 | 22 | image/svg+xml 23 | 25 | 26 | 27 | 28 | 29 | 31 | 51 | 55 | 59 | 63 | 67 | 72 | 77 | 78 | -------------------------------------------------------------------------------- /icons/undo.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /icons/unfav.svg: -------------------------------------------------------------------------------- 1 | 2 | 17 | 19 | 20 | 22 | image/svg+xml 23 | 25 | 26 | 27 | 28 | 30 | 50 | 56 | 57 | -------------------------------------------------------------------------------- /icons/unpin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/user.svg: -------------------------------------------------------------------------------- 1 | 2 | 19 | 21 | 22 | 24 | image/svg+xml 25 | 27 | 28 | 29 | 30 | 31 | 33 | 53 | 58 | 59 | -------------------------------------------------------------------------------- /icons/video.svg: -------------------------------------------------------------------------------- 1 | 2 | image/svg+xml -------------------------------------------------------------------------------- /icons/vkontakte.svg: -------------------------------------------------------------------------------- 1 | 2 | image/svg+xml 43 | 48 | 49 | -------------------------------------------------------------------------------- /icons/wide.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/wikipedia.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | -------------------------------------------------------------------------------- /icons/window.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /icons/wrench.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | image/svg+xml -------------------------------------------------------------------------------- /icons/yahoo.svg: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | -------------------------------------------------------------------------------- /icons/yandex.svg: -------------------------------------------------------------------------------- 1 | 2 | 9 | 10 | -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version" : 2, 3 | "name" : "__MSG_extName__", 4 | "version" : "0.6.14", 5 | "description" : "__MSG_extDescription__", 6 | "author" : "zluka", 7 | "developer" : { 8 | "name" : "zluka", 9 | "url" : "https://github.com/zluca/Sidebar" 10 | }, 11 | "homepage_url" : "https://github.com/zluca/", 12 | "default_locale" : "en", 13 | "icons": { 14 | "32": "icons/sidebar-icon-32.png", 15 | "64": "icons/sidebar-icon-64.png" 16 | }, 17 | "chrome_url_overrides" : { 18 | "newtab": "startpage.html" 19 | }, 20 | "permissions": [ 21 | "", 22 | "alarms", 23 | "bookmarks", 24 | "downloads", 25 | "downloads.open", 26 | "history", 27 | "notifications", 28 | "storage", 29 | "tabs", 30 | "topSites", 31 | "unlimitedStorage", 32 | "webRequest" 33 | ], 34 | "content_scripts": [ 35 | { 36 | "run_at" : "document_start", 37 | "matches" : [""], 38 | "js" : ["content.js"], 39 | "css" : ["content.css"] 40 | } 41 | ], 42 | "web_accessible_resources": [ 43 | "sidebar.html", 44 | "dialog.html", 45 | "Roboto-BoldItalic.woff2", 46 | "Roboto-Bold.woff2", 47 | "Roboto-Italic.woff2", 48 | "Roboto-Regular.woff2" 49 | ], 50 | "sidebar_action": { 51 | "default_icon" : "icons/sidebar-icon-64.png", 52 | "default_title" : "Sidebar+", 53 | "default_panel" : "sidebar.html#leftBar-native" 54 | }, 55 | "background": { 56 | "scripts": ["background.js"] 57 | }, 58 | "browser_action": { 59 | "default_icon" : "icons/sidebar-icon-64.png", 60 | "default_title" : "__MSG_extTitle__", 61 | "default_popup" : "popup.html", 62 | "browser_style" : true 63 | }, 64 | "options_ui": { 65 | "page" : "options.html#services" 66 | }, 67 | "commands": { 68 | "_execute_sidebar_action": { 69 | "suggested_key": { 70 | "default": "F8" 71 | } 72 | } 73 | } 74 | } 75 | 76 | -------------------------------------------------------------------------------- /options.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-size: 10px; 3 | --font-color: #444; 4 | --font-color-active: #000; 5 | --font-color-inactive: #999; 6 | --border-color: #eee; 7 | --border-color-active: #ccc; 8 | --background-color : #fcfcfc; 9 | --background-color-active: #e3ecf1; 10 | background-color: var(--background-color); 11 | } 12 | * { 13 | margin: 0; 14 | padding: 0; 15 | } 16 | 17 | @font-face { 18 | font-family: "Roboto"; 19 | src: url(./Roboto-Regular.woff2); 20 | font-style: normal; 21 | font-weight: normal; 22 | } 23 | @font-face { 24 | font-family: "Roboto"; 25 | src: url(./Roboto-Italic.woff2); 26 | font-style: italic; 27 | font-weight: normal; 28 | } 29 | @font-face { 30 | font-family: "Roboto"; 31 | src: url(./Roboto-Bold.woff2); 32 | font-style: normal; 33 | font-weight: bold; 34 | } 35 | @font-face { 36 | font-family: "Roboto"; 37 | src: url(./Roboto-BoldItalic.woff2); 38 | font-style: italic; 39 | font-weight: bold; 40 | } 41 | 42 | body { 43 | margin: 0; 44 | font-family: "Roboto"; 45 | overflow-y: scroll; 46 | overflow-x: hidden; 47 | background-color: var(--background-color); 48 | border-width: 0.05rem; 49 | border-style: solid; 50 | border-color: var(--border-color); 51 | padding: 1.5rem 1rem; 52 | user-select: none; 53 | word-wrap: break-word; 54 | max-width: 50rem; 55 | } 56 | 57 | header { 58 | font-size: 2.4rem; 59 | text-align: center; 60 | } 61 | 62 | nav { 63 | display: flex; 64 | flex-flow: row; 65 | flex-wrap: wrap; 66 | width: auto; 67 | margin: 1rem 0; 68 | } 69 | nav>span { 70 | color: var(--font-color-inactive); 71 | font-size: 1.6rem; 72 | text-align: center; 73 | min-width: 3rem; 74 | padding: 0.2rem 0.4rem; 75 | white-space: nowrap; 76 | } 77 | nav>span:hover { 78 | color: var(--font-color-active); 79 | cursor: pointer; 80 | } 81 | .misc #misc-button, 82 | .theme #theme-button, 83 | .services #services-button, 84 | .warnings #warnings-button, 85 | .startPage #startPage-button { 86 | color: var(--font-color); 87 | cursor: normal; 88 | } 89 | 90 | section { 91 | margin: 1rem 0 2rem 0; 92 | display: none; 93 | grid-template-columns: min-content auto; 94 | grid-row-gap: 1rem; 95 | grid-column-gap: 0.8rem; 96 | align-items: center; 97 | font-size: 1.8rem; 98 | } 99 | .leftBar #leftBar-section, 100 | .rightBar #rightBar-section, 101 | .misc #misc-section, 102 | .theme #theme-section, 103 | .services #services-section, 104 | .warnings #warnings-section, 105 | .startpage #startpage-section { 106 | display: grid; 107 | } 108 | form { 109 | grid-column-start: 1; 110 | grid-column-end: 3; 111 | display: grid; 112 | grid-template-columns: min-content auto; 113 | grid-row-gap: 1rem; 114 | grid-column-gap: 0.8rem; 115 | align-items: center; 116 | margin-left: 2rem; 117 | } 118 | p { 119 | grid-column-start: 1; 120 | grid-column-end: 3; 121 | margin: 1rem 0 0 0; 122 | } 123 | label { 124 | justify-self: left; 125 | } 126 | input.text { 127 | width: 3rem; 128 | height: 1.6rem; 129 | padding: 0; 130 | margin: 0; 131 | border-color: transparent; 132 | } 133 | input[type="number"] { 134 | width: 5rem; 135 | height: 1.6rem; 136 | padding: 0; 137 | margin: 0; 138 | border-color: transparent; 139 | } 140 | input { 141 | justify-self: right; 142 | text-align: right; 143 | } 144 | input[type="file"] { 145 | display: none; 146 | } 147 | 148 | footer { 149 | font-size: 1.6rem; 150 | text-align: right; 151 | } 152 | footer>span { 153 | margin: 0.5rem 0 0.5rem 1rem; 154 | padding: 0.1rem 1rem; 155 | min-width: 4rem; 156 | border-style: solid; 157 | border-color: var(--border-color); 158 | border-width: 0.05rem; 159 | color: var(--font-color); 160 | cursor: pointer; 161 | text-align: center; 162 | } 163 | footer>span:hover { 164 | color: var(--font-color-active); 165 | border-color: var(--border-color-active); 166 | } -------------------------------------------------------------------------------- /options.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /popup.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-size : 'medium'; 3 | line-height : 1.2rem; 4 | } 5 | 6 | @font-face { 7 | font-family: "Roboto"; 8 | src: url(./Roboto-Regular.woff2); 9 | font-style: normal; 10 | font-weight: normal; 11 | } 12 | @font-face { 13 | font-family: "Roboto"; 14 | src: url(./Roboto-Italic.woff2); 15 | font-style: italic; 16 | font-weight: normal; 17 | } 18 | @font-face { 19 | font-family: "Roboto"; 20 | src: url(./Roboto-Bold.woff2); 21 | font-style: normal; 22 | font-weight: bold; 23 | } 24 | @font-face { 25 | font-family: "Roboto"; 26 | src: url(./Roboto-BoldItalic.woff2); 27 | font-style: italic; 28 | font-weight: bold; 29 | } 30 | 31 | body { 32 | margin: 0; 33 | padding: 1rem; 34 | user-select: none; 35 | moz-user-select: none; 36 | } 37 | main { 38 | color: #444; 39 | display: grid; 40 | grid-template-columns: auto auto; 41 | grid-row-gap: .5rem; 42 | font-size: 1.6rem; 43 | user-select: none; 44 | moz-user-select: none; 45 | } 46 | form { 47 | display: grid; 48 | width: auto; 49 | grid-template-columns: min-content auto; 50 | grid-row-gap: .5rem; 51 | grid-column-gap: .5rem; 52 | align-items: center; 53 | padding: .2rem 1rem; 54 | } 55 | input { 56 | margin: 0; 57 | font-size: 1rem; 58 | border-image-width: 0.1rem; 59 | } 60 | label { 61 | user-select: none; 62 | moz-user-select: none; 63 | } 64 | input[disabled]+label { 65 | color: #999; 66 | } 67 | p { 68 | margin: 0; 69 | padding: 0 1rem; 70 | grid-column-start: 1; 71 | grid-column-end: 3; 72 | text-align: right; 73 | user-select: none; 74 | moz-user-select: none; 75 | } 76 | main>p>span { 77 | display: inline-block; 78 | width: 1.8rem; 79 | height: 1.8rem; 80 | padding: 0; 81 | margin: 0 .8rem 0 0; 82 | border: none; 83 | background-size: 100% 100%; 84 | background-repeat: no-repeat; 85 | cursor: pointer; 86 | user-select: none; 87 | moz-user-select: none; 88 | } 89 | #share { 90 | background-image: url(/icons/share.svg); 91 | } 92 | #options { 93 | background-image: url(/icons/options.svg); 94 | } 95 | #home { 96 | background-image: url(/icons/home.svg); 97 | } 98 | #rate { 99 | background-image: url(/icons/fav.svg); 100 | } 101 | #translate { 102 | background-image: url(/icons/helpTranslate.svg); 103 | } 104 | #facebook { 105 | display: none; 106 | background-image: url(/icons/facebook.svg); 107 | } 108 | #vkontakte { 109 | display: none; 110 | background-image: url(/icons/vkontakte.svg); 111 | } 112 | #twitter { 113 | display: none; 114 | background-image: url(/icons/twitter.svg); 115 | } 116 | #telegram { 117 | display: none; 118 | background-image: url(/icons/telegram.svg); 119 | } 120 | .share>#options, 121 | .share>#translate, 122 | .share>#home, 123 | .share>#rate { 124 | display: none; 125 | } 126 | .share>#facebook, 127 | .share>#vkontakte, 128 | .share>#twitter, 129 | .share>#telegram { 130 | display: inline-block; 131 | } 132 | -------------------------------------------------------------------------------- /popup.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /popup.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | 3 | 'use strict'; 4 | 5 | const firefox = typeof InstallTrigger !== 'undefined'; 6 | const opera = window.hasOwnProperty('opr'); 7 | const brauzer = firefox ? browser : chrome; 8 | 9 | brauzer.runtime.sendMessage({target: 'background', subject: 'request', action: 'popup', data: {needResponse: true}}, response => { 10 | 11 | const fontSize = parseInt(window.getComputedStyle(document.documentElement).getPropertyValue('font-size')); 12 | document.documentElement.style.fontSize = `${fontSize / response.zoom}px`; 13 | document.documentElement.style.lineHeight = `${fontSize * 1.2 / response.zoom}px`; 14 | 15 | const status = { 16 | leftBar : response.leftBar.value, 17 | rightBar : response.rightBar.value 18 | }; 19 | 20 | const extensionUrl = firefox ? 'https://addons.mozilla.org/en-US/firefox/addon/sidebar_plus/' : 'https://chrome.google.com/webstore/detail/sidebar%20/dnafkfkoknddnkdajibiigkopoelnhei?hl=en'; 21 | 22 | const getI18n = (message, subs) => { 23 | return brauzer.i18n.getMessage(message, subs); 24 | }; 25 | 26 | const send = (target, subject, action, data = {}) => { 27 | brauzer.runtime.sendMessage({'target': target, 'subject': subject, 'action': action, 'data': data}); 28 | }; 29 | 30 | const createInputRow = (form, side, method) => { 31 | const input = document.createElement('input'); 32 | input.name = side; 33 | input.type = 'radio'; 34 | input.dataset.method = method; 35 | const label = document.createElement('label'); 36 | label.textContent = getI18n(`popupLabelText${method}`); 37 | input.checked = (response[side].value === method); 38 | if (response[side].values.indexOf('native') !== -1) 39 | if (response[side].value === 'native') { 40 | if (opera) 41 | if (method !== 'native') { 42 | input.disabled = true; 43 | label.classList.add('disabled'); 44 | } 45 | } 46 | else if (response.status.nativeSbPosition.value !== side || opera) 47 | if (method === 'native') { 48 | input.disabled = true; 49 | label.classList.add('disabled'); 50 | } 51 | form.appendChild(input); 52 | form.appendChild(label); 53 | }; 54 | 55 | const createForm = side => { 56 | const form = document.createElement('form'); 57 | form.name = side; 58 | const p = document.createElement('p'); 59 | p.textContent = getI18n(`popupFormText${side}`); 60 | form.appendChild(p); 61 | for (let i = response[side].values.length - 1; i >= 0; i--) 62 | createInputRow(form, side, response[side].values[i]); 63 | container.appendChild(form); 64 | }; 65 | 66 | const buttonEvents = { 67 | share : event => { 68 | p.classList.toggle('share'); 69 | }, 70 | options : event => { 71 | brauzer.runtime.openOptionsPage(); 72 | }, 73 | home : event => { 74 | send('background', 'tabs', 'new', {'url': 'https://github.com/zluca/Sidebar'}); 75 | }, 76 | translate : event => { 77 | send('background', 'tabs', 'new', {'url': 'https://github.com/zluca/Sidebar/blob/master/CONTRIBUTING.md'}); 78 | }, 79 | rate : event => { 80 | send('background', 'tabs', 'new', {'url': extensionUrl}); 81 | }, 82 | facebook : event => { 83 | send('background', 'tabs', 'new', {'url': `https://www.facebook.com/sharer/sharer.php?u=${extensionUrl}`, 'newWindow': false}); 84 | }, 85 | vkontakte : event => { 86 | send('background', 'tabs', 'new', {'url': `http://vk.com/share.php?url=${extensionUrl}&title=${getI18n('extDescription')}`, 'newWindow': false}); 87 | }, 88 | twitter : event => { 89 | send('background', 'tabs', 'new', {'url': `https://twitter.com/share?url=${extensionUrl}&text=${getI18n('extDescription')}`, 'newWindow': false}); 90 | }, 91 | telegram: event => { 92 | send('background', 'tabs', 'new', {'url': `https://telegram.me/share/url?url=${extensionUrl}&text=${getI18n('extDescription')}`, 'newWindow': false}); 93 | } 94 | }; 95 | 96 | const createButton = name => { 97 | const button = document.createElement('span'); 98 | button.id = name; 99 | button.title = getI18n(`popupButton${name}Title`); 100 | button.addEventListener('click', buttonEvents[name]); 101 | p.appendChild(button); 102 | }; 103 | 104 | const container = document.createElement('main'); 105 | const p = document.createElement('p'); 106 | container.id = 'container'; 107 | createForm('leftBar'); 108 | createForm('rightBar'); 109 | createButton('rate'); 110 | createButton('translate'); 111 | createButton('home'); 112 | createButton('options'); 113 | createButton('facebook'); 114 | createButton('vkontakte'); 115 | createButton('twitter'); 116 | createButton('telegram'); 117 | createButton('share'); 118 | container.appendChild(p); 119 | document.body.appendChild(container); 120 | 121 | container.addEventListener('click', event => { 122 | event.stopPropagation(); 123 | if (event.target.nodeName === 'LABEL') 124 | event.target.previousElementSibling.click(); 125 | }); 126 | container.addEventListener('change', event => { 127 | event.stopPropagation(); 128 | const target = event.target; 129 | const section = target.name; 130 | const value = target.dataset.method; 131 | if (firefox) { 132 | if (status[section] === 'native' && value !== 'native') 133 | brauzer.sidebarAction.close(); 134 | else if (status[section] !== 'native' && value === 'native') 135 | brauzer.sidebarAction.open(); 136 | status[section] = value; 137 | } 138 | brauzer.runtime.sendMessage({target: 'background', subject: 'options', action: 'handler', data: {'section': section, 'option': 'method', 'value': value}}); 139 | }); 140 | }); 141 | 142 | })(); -------------------------------------------------------------------------------- /sidebar-bookmarks.css: -------------------------------------------------------------------------------- 1 | .item #bookmarks-delete, 2 | .item #bookmarks-move, 3 | .folder-name #bookmarks-folderDelete, 4 | .folder-name #bookmarks-openAll, 5 | #bookmarks-move, 6 | #bookmarks-edit { 7 | display: inline-block; 8 | } 9 | #root-folder>div>.folder>.folder-name>.controls { 10 | display: none; 11 | } 12 | .domain-bookmarks { 13 | background-image: url(icons/bookmarks.svg); 14 | } 15 | @media (min-width: 2.01rem) { 16 | .domain-bookmarks { 17 | background-image: none; 18 | padding-left: 0.4rem; 19 | } 20 | } -------------------------------------------------------------------------------- /sidebar-downloads.css: -------------------------------------------------------------------------------- 1 | .download { 2 | position: relative; 3 | } 4 | .download.complete:hover { 5 | cursor: pointer; 6 | } 7 | .download:hover, 8 | .download.deleted:hover { 9 | cursor: default; 10 | } 11 | .download.in_progress { 12 | padding-bottom: 1.4rem; 13 | } 14 | .download::before { 15 | content: ''; 16 | width: .9rem; 17 | height: .9rem; 18 | position: absolute; 19 | left: 0; 20 | top: 0.05rem; 21 | background-size: 100% 100%; 22 | background-color: var(--font-color); 23 | -webkit-mask-repeat: no-repeat; 24 | -webkit-mask-size: 100% 100%; 25 | -webkit-mask-mode: alpha; 26 | mask-repeat: no-repeat; 27 | mask-size: 100% 100%; 28 | mask-mode: alpha; 29 | } 30 | .download.in_progress::before { 31 | top: .9rem; 32 | } 33 | .download.complete::before { 34 | -webkit-mask-image: url(icons/folder.svg); 35 | mask-image: url(icons/folder.svg); 36 | } 37 | .download.deleted::before { 38 | -webkit-mask-image: url("icons/close.svg"); 39 | mask-image: url("icons/close.svg"); 40 | } 41 | .download.in_progress::before { 42 | -webkit-mask-image: url("icons/resume.svg"); 43 | mask-image: url("icons/resume.svg"); 44 | } 45 | .download.interrupted::before { 46 | -webkit-mask-image: url("icons/attention.svg"); 47 | mask-image: url("icons/attention.svg"); 48 | } 49 | .download.in_progress.paused::before { 50 | -webkit-mask-image: url("icons/pause.svg"); 51 | mask-image: url("icons/pause.svg"); 52 | } 53 | .download.deleted, 54 | .download.interrupted { 55 | text-decoration: line-through; 56 | } 57 | .download>.status { 58 | display: none; 59 | } 60 | .download.in_progress>.status { 61 | display: block; 62 | } 63 | .download>.status>.progress-bar { 64 | position: absolute; 65 | width: 100%; 66 | height: .2rem; 67 | border-width: .1rem; 68 | border-color: var(--border-color); 69 | border-style: solid; 70 | display: none; 71 | margin: 0 .2rem; 72 | bottom: .8rem; 73 | left: 0; 74 | margin-left: 1.4rem; 75 | } 76 | .download.in_progress>.status>.progress-bar, 77 | .download.in_progress>.status>.recived, 78 | .download.interrupted>.status>.progress-bar, 79 | .download.interrupted>.status>.recived { 80 | display: block; 81 | } 82 | .download>.status>.progress-bar>span { 83 | display: block; 84 | height: 100%; 85 | background-color: green; 86 | } 87 | .download.interrupted>.status>.progress-bar>span { 88 | background-color: red; 89 | } 90 | .download>.status>.recived { 91 | display: none; 92 | width: 100%; 93 | overflow: hidden; 94 | font-size: .7rem; 95 | margin: 0 .2rem; 96 | position: absolute; 97 | left: 0; 98 | bottom: 0rem; 99 | padding-left: 1.4rem; 100 | } 101 | .download>.status>.file-size { 102 | display: none; 103 | padding-top: .4rem; 104 | overflow: hidden; 105 | } 106 | .download.complete>.status>.file-size { 107 | display: block; 108 | } 109 | 110 | #downloads-delete, 111 | .download.interrupted #downloads-reload, 112 | .download.complete #downloads-reload, 113 | .download.in_progress #downloads-pause, 114 | .download.in_progress #downloads-cancel, 115 | .download.in_progress.paused #downloads-resume { 116 | display: inline-block; 117 | } 118 | .download.in_progress.paused #downloads-pause { 119 | display: none; 120 | } 121 | -------------------------------------------------------------------------------- /sidebar-history.css: -------------------------------------------------------------------------------- 1 | .item #history-delete, 2 | .folder-name #history-folderDelete { 3 | display: inline-block; 4 | } -------------------------------------------------------------------------------- /sidebar-pocket.css: -------------------------------------------------------------------------------- 1 | .logout #root-folder, 2 | .logout #pocket-logout, 3 | .logout #controls-bottom, 4 | .logout #controls-button, 5 | .logout #pocket-username, 6 | .logout #pocket-username::before, 7 | #pocket-login, 8 | .type .domain-view, 9 | .domain .type-view { 10 | display: none; 11 | } 12 | .logout #pocket-login { 13 | display: block; 14 | } 15 | .logout #controls-user { 16 | justify-content: center; 17 | } 18 | #pocket-username { 19 | padding-left: 1.5rem; 20 | position: relative; 21 | } 22 | #pocket-username::before { 23 | content: ''; 24 | display: inline-block; 25 | position: absolute; 26 | left: .2rem; 27 | -webkit-mask-image: url(/icons/user.svg); 28 | -webkit-mask-repeat: no-repeat; 29 | -webkit-mask-size: 100% 100%; 30 | -webkit-mask-position: center; 31 | -webkit-mask-mode: alpha; 32 | mask-image: url(/icons/user.svg); 33 | mask-repeat: no-repeat; 34 | mask-size: 100% 100%; 35 | mask-position: center; 36 | mask-mode: alpha; 37 | background-color: var(--font-color); 38 | width: 1rem; 39 | height: 1rem; 40 | } 41 | #pocket-logout { 42 | display: inline-flex; 43 | margin-left: .4rem; 44 | } 45 | 46 | .item #pocket-edit, 47 | .item #pocket-delete, 48 | .domain .folder-name #pocket-folderDelete, 49 | .item #pocket-fav, 50 | .item #pocket-archive, 51 | .domain .folder-name #pocket-folderArchive, 52 | .type-archives.item #pocket-unarchive, 53 | .type .folder-name #pocket-move, 54 | .domain .folder-name #pocket-move { 55 | display: inline-flex; 56 | } 57 | .domain-articles { 58 | background-image: url(icons/article.svg); 59 | } 60 | .domain-pictures { 61 | background-image: url(icons/picture.svg); 62 | } 63 | .domain-videos { 64 | background-image: url(icons/video.svg); 65 | } 66 | .domain-other { 67 | background-image: url(icons/default.svg); 68 | } 69 | .domain-archives { 70 | background-image: url(icons/archive.svg); 71 | } 72 | .favorite { 73 | background-color: var(--background-color-active); 74 | } 75 | .favorite #pocket-fav, 76 | .type-archives #pocket-archive { 77 | display: none; 78 | } 79 | .favorite #pocket-unfav { 80 | display: inline-block; 81 | } 82 | .type-archives { 83 | text-decoration: line-through; 84 | } 85 | .plain .type-archives, 86 | .domain .type-archives { 87 | display: none; 88 | } -------------------------------------------------------------------------------- /sidebar-rss.css: -------------------------------------------------------------------------------- 1 | .hide-readed>.folder-name #rss-showReaded, 2 | .unreaded>.folder-name #rss-markReadedAll, 3 | .item.rss-item.unreaded #rss-markReaded, 4 | .item #rss-delete, 5 | .folder-name #rss-hideReaded, 6 | .hide-readed.folder-name #rss-showReaded, 7 | .folder-name #rss-options, 8 | .plain.hide-readed #rss-showReadedAll, 9 | .plain.show-readed #rss-hideReadedAll, 10 | .plain #rss-markRealAll, 11 | .domain .folder-name #rss-move, 12 | #rss-reloadAll, 13 | .folder-name #rss-reload { 14 | display: inline-block; 15 | } 16 | #rss-showReadedAll.button, 17 | #rss-hideReadedAll.button { 18 | display: none; 19 | } 20 | 21 | .item.unreaded { 22 | font-weight: bold; 23 | } 24 | .hide-readed.folder .item, 25 | .hide-readed.plain .item, 26 | .hide-readed.folder #rss-hideReaded, 27 | .folder #rss-showReaded, 28 | .folder.hide-readed .controls .button, 29 | .show-readed .bottom-bar #rss-showReadedAll, 30 | .hide-readed .bottom-bar #rss-hideReadedAll { 31 | display: none; 32 | } 33 | .hide-readed.folder .unreaded, 34 | .hide-readed.plain .unreaded, 35 | .folder.hide-readed .folder-name { 36 | display: block; 37 | } 38 | .unreaded>.folder-name { 39 | font-weight: bold; 40 | color: var(--font-color-active); 41 | } 42 | .loading.folder-name::before { 43 | top: .65rem; 44 | } -------------------------------------------------------------------------------- /sidebar-search.css: -------------------------------------------------------------------------------- 1 | .folder-name #search-move { 2 | display: inline-block; 3 | } 4 | 5 | .viewed { 6 | text-decoration: line-through; 7 | } 8 | 9 | .domain-duckduckgo { 10 | background-image: url("icons/duckduckgo.svg"); 11 | } 12 | .domain-google { 13 | background-image: url("icons/google.svg"); 14 | } 15 | .domain-yandex { 16 | background-image: url("icons/yandex.svg"); 17 | } 18 | .domain-bing { 19 | background-image: url("icons/bing.svg"); 20 | } 21 | .domain-yahoo { 22 | background-image: url("icons/yahoo.svg"); 23 | } 24 | .domain-wikipedia { 25 | background-image: url("icons/wikipedia.svg"); 26 | } 27 | .domain-loading { 28 | background-image: url("icons/loader.svg"); 29 | } 30 | .domain-noResults { 31 | background-image: url("icons/close.svg"); 32 | } 33 | .domain-networkError { 34 | background-image: url("icons/close.svg"); 35 | } 36 | 37 | .search-folder { 38 | display: table-cell; 39 | } 40 | .search-folder.wikipedia>a { 41 | background-image: none; 42 | padding-left: .1rem; 43 | } 44 | #search-folder-wikipedia>div>a { 45 | background-image: none; 46 | padding-left: .3rem; 47 | } -------------------------------------------------------------------------------- /sidebar-tabs.css: -------------------------------------------------------------------------------- 1 | .domain .folder.domain-view { 2 | margin-bottom: .5rem; 3 | } 4 | .folder-name.active { 5 | font-weight: bold; 6 | font-size: 1rem; 7 | line-height: 1rem; 8 | background-size: 1rem 1rem; 9 | background-color: var(--background-color-active); 10 | } 11 | .item.active { 12 | font-weight: bold; 13 | font-size: 1rem; 14 | line-height: 1rem; 15 | padding-top: .2rem; 16 | padding-bottom: .2rem; 17 | background-color: var(--background-color-active); 18 | background-size: 1rem 1rem; 19 | background-position-y: .2rem; 20 | } 21 | .item.active:hover { 22 | background-color: var(--border-color-active); 23 | } 24 | .item.active>.controls { 25 | margin-top: .15rem; 26 | } 27 | .item.pinned { 28 | background-color: var(--background-color-active); 29 | } 30 | 31 | .plain .item #tabs-pin { 32 | display: inline-block; 33 | } 34 | .item.pinned #tabs-pin { 35 | display: none; 36 | } 37 | 38 | .item.tab-unreaded { 39 | font-style: italic; 40 | } 41 | 42 | #tabs-undo { 43 | cursor: default; 44 | } 45 | #tabs-undo.undo-active { 46 | cursor: pointer; 47 | } 48 | #tabs-undo>span { 49 | background-color: var(--font-color-inactive)!important; 50 | } 51 | #tabs-undo.undo-active>span { 52 | background-color: var(--font-color-active)!important; 53 | } 54 | 55 | #search-container { 56 | display: none; 57 | } 58 | .search-active #search-container, 59 | .search-show-input #search-container { 60 | display: block; 61 | } 62 | .search-show-input #controls-bottom #tabs-new, 63 | .search-show-input #tabs-plain, 64 | .search-show-input #tabs-domain, 65 | .search-show-input #tabs-tree, 66 | .search-show-input #tabs-search { 67 | display: none!important; 68 | } 69 | .search-show-input .clear-search { 70 | display: inline-block!important; 71 | } 72 | 73 | .plain .item.pinned #tabs-unpin, 74 | .plain .item #tabs-move, 75 | .domain .item #tabs-move, 76 | .domain .folder-name #tabs-move, 77 | .tree #root-folder>div>.folder>.folder-content>a>.controls #tabs-move, 78 | .item #tabs-fav, 79 | .item #tabs-reload, 80 | .item #tabs-duplicate, 81 | .item #tabs-close, 82 | .folder-name #tabs-closeAll { 83 | display: inline-block; 84 | } 85 | 86 | .domain-default { 87 | background-image: url(icons/default.svg); 88 | } 89 | .domain-pdf { 90 | background-image: url(icons/pdf.svg); 91 | } 92 | .domain-file { 93 | background-image: url(icons/folder.svg); 94 | } 95 | .domain-ftp { 96 | background-image: url(icons/ftp.svg); 97 | } 98 | .domain-startpage { 99 | background-image: url(icons/startpage.svg); 100 | } 101 | .domain-system { 102 | background-image: url(icons/wrench.svg); 103 | } 104 | .domain-extension { 105 | background-image: url(icons/default.svg); 106 | } 107 | .domain-windows { 108 | background-image: url(icons/window.svg); 109 | } -------------------------------------------------------------------------------- /sidebar.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /startpage.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --font-color: #444; 3 | --font-color-active: #000; 4 | --font-color-inactive: #999; 5 | --border-color: #eee; 6 | --border-color-active: #ccc; 7 | --background-color : #fcfcfc; 8 | --background-color-active: #e3ecf1; 9 | --padding: 60px; 10 | --marginH: 30px; 11 | --marginV: 60px; 12 | --rows: 5; 13 | --columns: 3; 14 | --search-columns: 5; 15 | --search-columns-width: 19; 16 | --bigFont1: 120px; 17 | --bigFont2: calc(var(--bigFont1) / 2); 18 | --bigFont3: calc(var(--bigFont1) / 3); 19 | --bigFont4: calc(var(--bigFont1) / 4); 20 | --bigFont5: calc(var(--bigFont1) / 5); 21 | --bigFont6: calc(var(--bigFont1) / 6); 22 | background-color: var(--background-color); 23 | font-size: 10px; 24 | } 25 | 26 | @font-face { 27 | font-family: "Roboto"; 28 | src: url(./Roboto-Regular.woff2); 29 | font-style: normal; 30 | font-weight: normal; 31 | } 32 | @font-face { 33 | font-family: "Roboto"; 34 | src: url(./Roboto-Italic.woff2); 35 | font-style: italic; 36 | font-weight: normal; 37 | } 38 | @font-face { 39 | font-family: "Roboto"; 40 | src: url(./Roboto-Bold.woff2); 41 | font-style: normal; 42 | font-weight: bold; 43 | } 44 | @font-face { 45 | font-family: "Roboto"; 46 | src: url(./Roboto-BoldItalic.woff2); 47 | font-style: italic; 48 | font-weight: bold; 49 | } 50 | 51 | body { 52 | background-clip: border-box; 53 | padding: var(--padding); 54 | width: auto; 55 | min-height: 100vh; 56 | overflow-x: hidden; 57 | overflow-y: scroll; 58 | box-sizing: border-box; 59 | margin: 0; 60 | display: grid; 61 | grid-template-rows: auto 1fr; 62 | grid-template-columns: 100%; 63 | font-family: "Roboto"; 64 | } 65 | :focus { 66 | outline: none; 67 | } 68 | 69 | .hidden { 70 | display: none!important; 71 | } 72 | 73 | p { 74 | margin: 0; 75 | } 76 | 77 | main { 78 | display: none; 79 | } 80 | .search #search-container { 81 | display: table; 82 | table-layout: fixed; 83 | height: auto; 84 | margin-bottom: var(--marginV); 85 | width: 100%; 86 | margin: 0 auto; 87 | } 88 | #search-results { 89 | display: table-row; 90 | width: auto; 91 | overflow-y: scroll; 92 | overflow-x: hidden; 93 | } 94 | .search-folder { 95 | display: table-cell; 96 | margin: 0; 97 | padding: 0 .5rem; 98 | } 99 | .search-folder>a { 100 | display: block; 101 | text-decoration: none; 102 | white-space: nowrap; 103 | color: var(--font-color); 104 | font-size: .9rem; 105 | line-height: .9rem; 106 | overflow: hidden; 107 | height: auto; 108 | padding: .05rem .1rem .1rem 1.25rem; 109 | margin: .1rem; 110 | position: relative; 111 | background-repeat: no-repeat; 112 | background-size: .9rem .9rem; 113 | background-position-y: .1rem; 114 | user-select: none; 115 | border-color: transparent; 116 | border-width: .05rem 0 .05rem 0; 117 | border-style: solid; 118 | } 119 | a.viewed { 120 | text-decoration: line-through; 121 | } 122 | .search-folder>a:hover { 123 | border-color: var(--border-color-active); 124 | color: var(--font-color-active); 125 | font-weight: bold; 126 | background-color: var(--background-color-active); 127 | } 128 | #search-container>nav { 129 | width: 100%; 130 | height: 3rem; 131 | display: table-row; 132 | } 133 | h2 { 134 | display: table-cell; 135 | text-align: center; 136 | padding: 1rem 0; 137 | } 138 | h2>a { 139 | white-space: nowrap; 140 | color: var(--font-color); 141 | text-decoration: none; 142 | position: relative; 143 | background-size: 1.2rem 1.2rem; 144 | background-position: 0 .4rem; 145 | background-repeat: no-repeat; 146 | padding-left: 1.6rem; 147 | font-size: 1.5rem; 148 | } 149 | .sites #site-container, 150 | .sites-with-search #site-container { 151 | display: grid; 152 | width: auto; 153 | grid-template-columns: repeat(var(--columns), 1fr); 154 | grid-template-rows: repeat(var(--rows), 1fr); 155 | grid-gap: var(--marginV) var(--marginH); 156 | } 157 | section { 158 | position: relative; 159 | overflow: hidden; 160 | font-family: 'DejaVu Sans'; 161 | white-space: pre; 162 | user-select: none; 163 | moz-user-select: none; 164 | cursor: pointer; 165 | } 166 | section:hover { 167 | box-shadow: 0 0 .8rem .05rem var(--font-color); 168 | } 169 | .site { 170 | background-clip: content-box; 171 | color: var(--background-color); 172 | } 173 | .lines-1 { 174 | font-size: var(--bigFont1); 175 | line-height: var(--bigFont1); 176 | } 177 | .lines-2 { 178 | font-size: var(--bigFont2); 179 | line-height: var(--bigFont2); 180 | } 181 | .lines-3 { 182 | font-size: var(--bigFont3); 183 | line-height: var(--bigFont3); 184 | } 185 | .lines-4 { 186 | font-size: var(--bigFont4); 187 | line-height: var(--bigFont4); 188 | } 189 | .lines-5 { 190 | font-size: var(--bigFont5); 191 | line-height: var(--bigFont5); 192 | } 193 | .lines-6 { 194 | font-size: var(--bigFont6); 195 | line-height: var(--bigFont6); 196 | } 197 | .site.draggable { 198 | position: fixed; 199 | z-index: 99; 200 | } 201 | .add-new { 202 | color: transparent; 203 | text-align: center; 204 | } 205 | .add-new:hover, 206 | .add-new.draggable { 207 | color: var(--font-color); 208 | text-shadow: 0 0 .1rem var(--background-color); 209 | } 210 | section>a { 211 | display: block; 212 | height: 100%; 213 | width: 100%; 214 | text-decoration: none; 215 | color: inherit; 216 | } 217 | section>a:hover { 218 | color: inherit; 219 | } 220 | #edit-button { 221 | background-position: .5rem 1.9rem; 222 | background-origin: content-box; 223 | background-color: var(--background-color); 224 | opacity: .7; 225 | border-radius: 50%; 226 | padding: 0; 227 | display: none; 228 | width: 3.2rem; 229 | height: 3.2rem; 230 | z-index: 99; 231 | position: absolute; 232 | top: -1.8rem; 233 | right: -1.8rem; 234 | } 235 | .site:hover>#edit-button { 236 | display: block; 237 | } 238 | 239 | #placeholder { 240 | display: none; 241 | } 242 | #placeholder.active { 243 | display: inline-block; 244 | } 245 | 246 | #search { 247 | display: none; 248 | position: relative; 249 | grid-template-columns: 1.9rem auto 1.9rem; 250 | width: 50%; 251 | margin: 0 auto; 252 | border-width: .05rem; 253 | border-style: solid; 254 | border-color: var(--border-color); 255 | background-color: var(--background-color-active); 256 | } 257 | .sites #search { 258 | margin-bottom: var(--padding); 259 | grid-template-columns: 1.9rem auto 1.9rem; 260 | } 261 | .sites-with-search #search { 262 | margin-bottom: var(--padding); 263 | grid-template-columns: 1.9rem auto 1.9rem 1.9rem; 264 | } 265 | .search #search { 266 | grid-template-columns: 1.9rem auto 1.9rem 1.9rem 1.9rem; 267 | } 268 | .search-options { 269 | display: inline-block; 270 | width: 1.2rem; 271 | height: 1.2rem; 272 | position: absolute; 273 | z-index: 99; 274 | left: .55rem; 275 | top: .6rem; 276 | } 277 | .search-options>span { 278 | width: 1.2rem; 279 | height: 1.2rem; 280 | margin-left: .1rem; 281 | background-color: var(--font-color-inactive); 282 | display: inline-block; 283 | -webkit-mask-repeat: no-repeat; 284 | -webkit-mask-size: 100% 100%; 285 | -webkit-mask-position: center; 286 | -webkit-mask-mode: alpha; 287 | mask-repeat: no-repeat; 288 | mask-size: 100% 100%; 289 | mask-position: center; 290 | mask-mode: alpha; 291 | -webkit-mask-image: url('icons/options.svg'); 292 | mask-image: url('icons/options.svg'); 293 | } 294 | #lets-search, 295 | #clear-search, 296 | #search-options, 297 | #mode-sites { 298 | display: inline-block; 299 | cursor: pointer; 300 | height: 100%; 301 | width: 1.9rem; 302 | align-self: stretch; 303 | } 304 | .sites #clear-search, 305 | .sites #mode-sites, 306 | .sites-with-search #mode-sites { 307 | display: none; 308 | } 309 | #search-field { 310 | height: 1.6rem; 311 | width: auto; 312 | min-width: 0; 313 | border: none; 314 | font-size: 1.2rem; 315 | line-height: 1.5rem; 316 | color: var(--font-color); 317 | background-color: var(--background-color-active); 318 | } 319 | #search-field::placeholder { 320 | color: var(--font-color-inactive); 321 | } 322 | 323 | #edit-button>span, 324 | #clear-search>span, 325 | #lets-search>span, 326 | #search-options>span, 327 | #mode-sites>span { 328 | background-color: var(--font-color-inactive); 329 | display: inline-block; 330 | -webkit-mask-repeat: no-repeat; 331 | -webkit-mask-size: 100% 100%; 332 | -webkit-mask-position: center; 333 | -webkit-mask-mode: alpha; 334 | mask-repeat: no-repeat; 335 | mask-size: 100% 100%; 336 | mask-position: center; 337 | mask-mode: alpha; 338 | } 339 | #edit-button:hover>span, 340 | #search-options:hover>span, 341 | #clear-search:hover>span, 342 | #lets-search:hover>span, 343 | #mode-sites:hover>span { 344 | background-color: var(--font-color); 345 | } 346 | #clear-search>span, 347 | #lets-search>span, 348 | #mode-sites>span { 349 | width: 1.2rem; 350 | height: 1.2rem; 351 | margin-top: .2rem; 352 | margin-left: .32rem; 353 | } 354 | #search-options>span { 355 | -webkit-mask-image: url(icons/options.svg); 356 | mask-image: url(icons/options.svg); 357 | } 358 | #lets-search>span { 359 | -webkit-mask-image: url(icons/search.svg); 360 | mask-image: url(icons/search.svg); 361 | } 362 | #clear-search>span { 363 | -webkit-mask-image: url(icons/close.svg); 364 | mask-image: url(icons/close.svg); 365 | } 366 | #mode-sites>span { 367 | -webkit-mask-image: url(icons/startpage.svg); 368 | mask-image: url(icons/startpage.svg); 369 | } 370 | #edit-button>span { 371 | position: absolute; 372 | bottom: .44rem; 373 | left: .44rem; 374 | width: .8rem; 375 | height: .8rem; 376 | -webkit-mask-image: url(icons/options.svg); 377 | mask-image: url(icons/options.svg); 378 | } 379 | #search-options>span { 380 | width: 1.2rem; 381 | height: 1.2rem; 382 | margin-top: .2rem; 383 | margin-left: .32rem; 384 | } 385 | -------------------------------------------------------------------------------- /startpage.html: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------