├── LICENSE ├── README.md ├── local_ntp.css ├── local_ntp.html └── local_ntp.js /LICENSE: -------------------------------------------------------------------------------- 1 | Attribution-NonCommercial-ShareAlike 4.0 International 2 | 3 | ======================================================================= 4 | 5 | Creative Commons Corporation ("Creative Commons") is not a law firm and 6 | does not provide legal services or legal advice. Distribution of 7 | Creative Commons public licenses does not create a lawyer-client or 8 | other relationship. Creative Commons makes its licenses and related 9 | information available on an "as-is" basis. Creative Commons gives no 10 | warranties regarding its licenses, any material licensed under their 11 | terms and conditions, or any related information. Creative Commons 12 | disclaims all liability for damages resulting from their use to the 13 | fullest extent possible. 14 | 15 | Using Creative Commons Public Licenses 16 | 17 | Creative Commons public licenses provide a standard set of terms and 18 | conditions that creators and other rights holders may use to share 19 | original works of authorship and other material subject to copyright 20 | and certain other rights specified in the public license below. The 21 | following considerations are for informational purposes only, are not 22 | exhaustive, and do not form part of our licenses. 23 | 24 | Considerations for licensors: Our public licenses are 25 | intended for use by those authorized to give the public 26 | permission to use material in ways otherwise restricted by 27 | copyright and certain other rights. Our licenses are 28 | irrevocable. Licensors should read and understand the terms 29 | and conditions of the license they choose before applying it. 30 | Licensors should also secure all rights necessary before 31 | applying our licenses so that the public can reuse the 32 | material as expected. Licensors should clearly mark any 33 | material not subject to the license. This includes other CC- 34 | licensed material, or material used under an exception or 35 | limitation to copyright. More considerations for licensors: 36 | wiki.creativecommons.org/Considerations_for_licensors 37 | 38 | Considerations for the public: By using one of our public 39 | licenses, a licensor grants the public permission to use the 40 | licensed material under specified terms and conditions. If 41 | the licensor's permission is not necessary for any reason--for 42 | example, because of any applicable exception or limitation to 43 | copyright--then that use is not regulated by the license. Our 44 | licenses grant only permissions under copyright and certain 45 | other rights that a licensor has authority to grant. Use of 46 | the licensed material may still be restricted for other 47 | reasons, including because others have copyright or other 48 | rights in the material. A licensor may make special requests, 49 | such as asking that all changes be marked or described. 50 | Although not required by our licenses, you are encouraged to 51 | respect those requests where reasonable. More considerations 52 | for the public: 53 | wiki.creativecommons.org/Considerations_for_licensees 54 | 55 | ======================================================================= 56 | 57 | Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International 58 | Public License 59 | 60 | By exercising the Licensed Rights (defined below), You accept and agree 61 | to be bound by the terms and conditions of this Creative Commons 62 | Attribution-NonCommercial-ShareAlike 4.0 International Public License 63 | ("Public License"). To the extent this Public License may be 64 | interpreted as a contract, You are granted the Licensed Rights in 65 | consideration of Your acceptance of these terms and conditions, and the 66 | Licensor grants You such rights in consideration of benefits the 67 | Licensor receives from making the Licensed Material available under 68 | these terms and conditions. 69 | 70 | 71 | Section 1 -- Definitions. 72 | 73 | a. Adapted Material means material subject to Copyright and Similar 74 | Rights that is derived from or based upon the Licensed Material 75 | and in which the Licensed Material is translated, altered, 76 | arranged, transformed, or otherwise modified in a manner requiring 77 | permission under the Copyright and Similar Rights held by the 78 | Licensor. For purposes of this Public License, where the Licensed 79 | Material is a musical work, performance, or sound recording, 80 | Adapted Material is always produced where the Licensed Material is 81 | synched in timed relation with a moving image. 82 | 83 | b. Adapter's License means the license You apply to Your Copyright 84 | and Similar Rights in Your contributions to Adapted Material in 85 | accordance with the terms and conditions of this Public License. 86 | 87 | c. BY-NC-SA Compatible License means a license listed at 88 | creativecommons.org/compatiblelicenses, approved by Creative 89 | Commons as essentially the equivalent of this Public License. 90 | 91 | d. Copyright and Similar Rights means copyright and/or similar rights 92 | closely related to copyright including, without limitation, 93 | performance, broadcast, sound recording, and Sui Generis Database 94 | Rights, without regard to how the rights are labeled or 95 | categorized. For purposes of this Public License, the rights 96 | specified in Section 2(b)(1)-(2) are not Copyright and Similar 97 | Rights. 98 | 99 | e. Effective Technological Measures means those measures that, in the 100 | absence of proper authority, may not be circumvented under laws 101 | fulfilling obligations under Article 11 of the WIPO Copyright 102 | Treaty adopted on December 20, 1996, and/or similar international 103 | agreements. 104 | 105 | f. Exceptions and Limitations means fair use, fair dealing, and/or 106 | any other exception or limitation to Copyright and Similar Rights 107 | that applies to Your use of the Licensed Material. 108 | 109 | g. License Elements means the license attributes listed in the name 110 | of a Creative Commons Public License. The License Elements of this 111 | Public License are Attribution, NonCommercial, and ShareAlike. 112 | 113 | h. Licensed Material means the artistic or literary work, database, 114 | or other material to which the Licensor applied this Public 115 | License. 116 | 117 | i. Licensed Rights means the rights granted to You subject to the 118 | terms and conditions of this Public License, which are limited to 119 | all Copyright and Similar Rights that apply to Your use of the 120 | Licensed Material and that the Licensor has authority to license. 121 | 122 | j. Licensor means the individual(s) or entity(ies) granting rights 123 | under this Public License. 124 | 125 | k. NonCommercial means not primarily intended for or directed towards 126 | commercial advantage or monetary compensation. For purposes of 127 | this Public License, the exchange of the Licensed Material for 128 | other material subject to Copyright and Similar Rights by digital 129 | file-sharing or similar means is NonCommercial provided there is 130 | no payment of monetary compensation in connection with the 131 | exchange. 132 | 133 | l. Share means to provide material to the public by any means or 134 | process that requires permission under the Licensed Rights, such 135 | as reproduction, public display, public performance, distribution, 136 | dissemination, communication, or importation, and to make material 137 | available to the public including in ways that members of the 138 | public may access the material from a place and at a time 139 | individually chosen by them. 140 | 141 | m. Sui Generis Database Rights means rights other than copyright 142 | resulting from Directive 96/9/EC of the European Parliament and of 143 | the Council of 11 March 1996 on the legal protection of databases, 144 | as amended and/or succeeded, as well as other essentially 145 | equivalent rights anywhere in the world. 146 | 147 | n. You means the individual or entity exercising the Licensed Rights 148 | under this Public License. Your has a corresponding meaning. 149 | 150 | 151 | Section 2 -- Scope. 152 | 153 | a. License grant. 154 | 155 | 1. Subject to the terms and conditions of this Public License, 156 | the Licensor hereby grants You a worldwide, royalty-free, 157 | non-sublicensable, non-exclusive, irrevocable license to 158 | exercise the Licensed Rights in the Licensed Material to: 159 | 160 | a. reproduce and Share the Licensed Material, in whole or 161 | in part, for NonCommercial purposes only; and 162 | 163 | b. produce, reproduce, and Share Adapted Material for 164 | NonCommercial purposes only. 165 | 166 | 2. Exceptions and Limitations. For the avoidance of doubt, where 167 | Exceptions and Limitations apply to Your use, this Public 168 | License does not apply, and You do not need to comply with 169 | its terms and conditions. 170 | 171 | 3. Term. The term of this Public License is specified in Section 172 | 6(a). 173 | 174 | 4. Media and formats; technical modifications allowed. The 175 | Licensor authorizes You to exercise the Licensed Rights in 176 | all media and formats whether now known or hereafter created, 177 | and to make technical modifications necessary to do so. The 178 | Licensor waives and/or agrees not to assert any right or 179 | authority to forbid You from making technical modifications 180 | necessary to exercise the Licensed Rights, including 181 | technical modifications necessary to circumvent Effective 182 | Technological Measures. For purposes of this Public License, 183 | simply making modifications authorized by this Section 2(a) 184 | (4) never produces Adapted Material. 185 | 186 | 5. Downstream recipients. 187 | 188 | a. Offer from the Licensor -- Licensed Material. Every 189 | recipient of the Licensed Material automatically 190 | receives an offer from the Licensor to exercise the 191 | Licensed Rights under the terms and conditions of this 192 | Public License. 193 | 194 | b. Additional offer from the Licensor -- Adapted Material. 195 | Every recipient of Adapted Material from You 196 | automatically receives an offer from the Licensor to 197 | exercise the Licensed Rights in the Adapted Material 198 | under the conditions of the Adapter's License You apply. 199 | 200 | c. No downstream restrictions. You may not offer or impose 201 | any additional or different terms or conditions on, or 202 | apply any Effective Technological Measures to, the 203 | Licensed Material if doing so restricts exercise of the 204 | Licensed Rights by any recipient of the Licensed 205 | Material. 206 | 207 | 6. No endorsement. Nothing in this Public License constitutes or 208 | may be construed as permission to assert or imply that You 209 | are, or that Your use of the Licensed Material is, connected 210 | with, or sponsored, endorsed, or granted official status by, 211 | the Licensor or others designated to receive attribution as 212 | provided in Section 3(a)(1)(A)(i). 213 | 214 | b. Other rights. 215 | 216 | 1. Moral rights, such as the right of integrity, are not 217 | licensed under this Public License, nor are publicity, 218 | privacy, and/or other similar personality rights; however, to 219 | the extent possible, the Licensor waives and/or agrees not to 220 | assert any such rights held by the Licensor to the limited 221 | extent necessary to allow You to exercise the Licensed 222 | Rights, but not otherwise. 223 | 224 | 2. Patent and trademark rights are not licensed under this 225 | Public License. 226 | 227 | 3. To the extent possible, the Licensor waives any right to 228 | collect royalties from You for the exercise of the Licensed 229 | Rights, whether directly or through a collecting society 230 | under any voluntary or waivable statutory or compulsory 231 | licensing scheme. In all other cases the Licensor expressly 232 | reserves any right to collect such royalties, including when 233 | the Licensed Material is used other than for NonCommercial 234 | purposes. 235 | 236 | 237 | Section 3 -- License Conditions. 238 | 239 | Your exercise of the Licensed Rights is expressly made subject to the 240 | following conditions. 241 | 242 | a. Attribution. 243 | 244 | 1. If You Share the Licensed Material (including in modified 245 | form), You must: 246 | 247 | a. retain the following if it is supplied by the Licensor 248 | with the Licensed Material: 249 | 250 | i. identification of the creator(s) of the Licensed 251 | Material and any others designated to receive 252 | attribution, in any reasonable manner requested by 253 | the Licensor (including by pseudonym if 254 | designated); 255 | 256 | ii. a copyright notice; 257 | 258 | iii. a notice that refers to this Public License; 259 | 260 | iv. a notice that refers to the disclaimer of 261 | warranties; 262 | 263 | v. a URI or hyperlink to the Licensed Material to the 264 | extent reasonably practicable; 265 | 266 | b. indicate if You modified the Licensed Material and 267 | retain an indication of any previous modifications; and 268 | 269 | c. indicate the Licensed Material is licensed under this 270 | Public License, and include the text of, or the URI or 271 | hyperlink to, this Public License. 272 | 273 | 2. You may satisfy the conditions in Section 3(a)(1) in any 274 | reasonable manner based on the medium, means, and context in 275 | which You Share the Licensed Material. For example, it may be 276 | reasonable to satisfy the conditions by providing a URI or 277 | hyperlink to a resource that includes the required 278 | information. 279 | 3. If requested by the Licensor, You must remove any of the 280 | information required by Section 3(a)(1)(A) to the extent 281 | reasonably practicable. 282 | 283 | b. ShareAlike. 284 | 285 | In addition to the conditions in Section 3(a), if You Share 286 | Adapted Material You produce, the following conditions also apply. 287 | 288 | 1. The Adapter's License You apply must be a Creative Commons 289 | license with the same License Elements, this version or 290 | later, or a BY-NC-SA Compatible License. 291 | 292 | 2. You must include the text of, or the URI or hyperlink to, the 293 | Adapter's License You apply. You may satisfy this condition 294 | in any reasonable manner based on the medium, means, and 295 | context in which You Share Adapted Material. 296 | 297 | 3. You may not offer or impose any additional or different terms 298 | or conditions on, or apply any Effective Technological 299 | Measures to, Adapted Material that restrict exercise of the 300 | rights granted under the Adapter's License You apply. 301 | 302 | 303 | Section 4 -- Sui Generis Database Rights. 304 | 305 | Where the Licensed Rights include Sui Generis Database Rights that 306 | apply to Your use of the Licensed Material: 307 | 308 | a. for the avoidance of doubt, Section 2(a)(1) grants You the right 309 | to extract, reuse, reproduce, and Share all or a substantial 310 | portion of the contents of the database for NonCommercial purposes 311 | only; 312 | 313 | b. if You include all or a substantial portion of the database 314 | contents in a database in which You have Sui Generis Database 315 | Rights, then the database in which You have Sui Generis Database 316 | Rights (but not its individual contents) is Adapted Material, 317 | including for purposes of Section 3(b); and 318 | 319 | c. You must comply with the conditions in Section 3(a) if You Share 320 | all or a substantial portion of the contents of the database. 321 | 322 | For the avoidance of doubt, this Section 4 supplements and does not 323 | replace Your obligations under this Public License where the Licensed 324 | Rights include other Copyright and Similar Rights. 325 | 326 | 327 | Section 5 -- Disclaimer of Warranties and Limitation of Liability. 328 | 329 | a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE 330 | EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS 331 | AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF 332 | ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS, 333 | IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION, 334 | WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR 335 | PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS, 336 | ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT 337 | KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT 338 | ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU. 339 | 340 | b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE 341 | TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION, 342 | NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT, 343 | INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES, 344 | COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR 345 | USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN 346 | ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR 347 | DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR 348 | IN PART, THIS LIMITATION MAY NOT APPLY TO YOU. 349 | 350 | c. The disclaimer of warranties and limitation of liability provided 351 | above shall be interpreted in a manner that, to the extent 352 | possible, most closely approximates an absolute disclaimer and 353 | waiver of all liability. 354 | 355 | 356 | Section 6 -- Term and Termination. 357 | 358 | a. This Public License applies for the term of the Copyright and 359 | Similar Rights licensed here. However, if You fail to comply with 360 | this Public License, then Your rights under this Public License 361 | terminate automatically. 362 | 363 | b. Where Your right to use the Licensed Material has terminated under 364 | Section 6(a), it reinstates: 365 | 366 | 1. automatically as of the date the violation is cured, provided 367 | it is cured within 30 days of Your discovery of the 368 | violation; or 369 | 370 | 2. upon express reinstatement by the Licensor. 371 | 372 | For the avoidance of doubt, this Section 6(b) does not affect any 373 | right the Licensor may have to seek remedies for Your violations 374 | of this Public License. 375 | 376 | c. For the avoidance of doubt, the Licensor may also offer the 377 | Licensed Material under separate terms or conditions or stop 378 | distributing the Licensed Material at any time; however, doing so 379 | will not terminate this Public License. 380 | 381 | d. Sections 1, 5, 6, 7, and 8 survive termination of this Public 382 | License. 383 | 384 | 385 | Section 7 -- Other Terms and Conditions. 386 | 387 | a. The Licensor shall not be bound by any additional or different 388 | terms or conditions communicated by You unless expressly agreed. 389 | 390 | b. Any arrangements, understandings, or agreements regarding the 391 | Licensed Material not stated herein are separate from and 392 | independent of the terms and conditions of this Public License. 393 | 394 | 395 | Section 8 -- Interpretation. 396 | 397 | a. For the avoidance of doubt, this Public License does not, and 398 | shall not be interpreted to, reduce, limit, restrict, or impose 399 | conditions on any use of the Licensed Material that could lawfully 400 | be made without permission under this Public License. 401 | 402 | b. To the extent possible, if any provision of this Public License is 403 | deemed unenforceable, it shall be automatically reformed to the 404 | minimum extent necessary to make it enforceable. If the provision 405 | cannot be reformed, it shall be severed from this Public License 406 | without affecting the enforceability of the remaining terms and 407 | conditions. 408 | 409 | c. No term or condition of this Public License will be waived and no 410 | failure to comply consented to unless expressly agreed to by the 411 | Licensor. 412 | 413 | d. Nothing in this Public License constitutes or may be interpreted 414 | as a limitation upon, or waiver of, any privileges and immunities 415 | that apply to the Licensor or You, including from the legal 416 | processes of any jurisdiction or authority. 417 | 418 | ======================================================================= 419 | 420 | Creative Commons is not a party to its public 421 | licenses. Notwithstanding, Creative Commons may elect to apply one of 422 | its public licenses to material it publishes and in those instances 423 | will be considered the “Licensor.” The text of the Creative Commons 424 | public licenses is dedicated to the public domain under the CC0 Public 425 | Domain Dedication. Except for the limited purpose of indicating that 426 | material is shared under a Creative Commons public license or as 427 | otherwise permitted by the Creative Commons policies published at 428 | creativecommons.org/policies, Creative Commons does not authorize the 429 | use of the trademark "Creative Commons" or any other trademark or logo 430 | of Creative Commons without its prior written consent including, 431 | without limitation, in connection with any unauthorized modifications 432 | to any of its public licenses or any other arrangements, 433 | understandings, or agreements concerning use of licensed material. For 434 | the avoidance of doubt, this paragraph does not form part of the 435 | public licenses. 436 | 437 | Creative Commons may be contacted at creativecommons.org. 438 | 439 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Copyright 2019 Geometry OU / Kiwi Browser 2 | 3 | Licensed under https://creativecommons.org/licenses/by-nc-sa/4.0/ 4 | 5 | 6 | This is the New Tab Page of Kiwi Browser, open-source and free to use in non-commercial projects. 7 | 8 | 9 | The New Tab Page is in two parts: 10 | - A list of most visited websites, ordered on a grid of tiles 11 | - A list of recent news 12 | 13 | 14 | The main concept behind this New Tab Page is that a tile grid of the most visited websites is displayed on screen. 15 | The resulting HTML is stored in a local cache (localStorage.cachedGrid). 16 | 17 | Once the page is loaded, the pre-rendered version of the tile grid (localStorage.cachedGrid) is instantly displayed on screen (fake-bookmarks-grid) and then swapped with a dynamic / customizable grid rendered in JS (that supports drag and drop). 18 | 19 | 20 | The list of tiles to be displayed is provided by an internal API: chrome.embeddedSearch.newTabPage.mostVisited (the most visited websites by the user). 21 | 22 | If the user has manually added a website (or moved one of the tile), the list is provided by localStorage.storedItems instead of newTabPage.mostVisited. 23 | 24 | If you need favicons, you can grab them from: 25 | - local: chrome-search://favicon or chrome-search://ntpicon/size/24@2x/https://cnn.com (local favicons) 26 | or 27 | - from Google's server (https://s2.googleusercontent.com/s2/favicons?domain_url=cnn.com&alt=404&sz=32 - T&C of Google applies) 28 | or 29 | - from Kiwi Browser's server (https://logos.kiwibrowser.com/cnn.com - No analytics, no logs, no identifier to send). 30 | 31 | For security reasons, the new tab page should only establish connection to HTTPS servers. 32 | CORS (loading requests from remote servers), XHR and CSP policies can be adapted if you need, feel free to ask on Discord (or open an issue). 33 | 34 | You can directly test and develop the new tab page online by going with your favorite browser (Chrome or Kiwi Browser) on https://kiwibrowser.github.io/ntp/local_ntp.html (or on your own copy, by forking the repository or self-hosting the html file). 35 | 36 | Have fun, 37 | Arnaud. 38 | -------------------------------------------------------------------------------- /local_ntp.css: -------------------------------------------------------------------------------- 1 | html { 2 | /* Material Design constants */ 3 | --md-tile-height: 104px; 4 | --md-tile-margin: 8px; 5 | 6 | /* This will be overridden based on the viewport width, see below. */ 7 | --column-count: 2; 8 | 9 | --content-width: calc( 10 | (var(--column-count) * (var(--tile-width) + var(--tile-margin))) 11 | /* We add an extra pixel because rounding errors on different zooms can 12 | * make the width shorter than it should be. */ 13 | + 1px); 14 | 15 | --logo-height: 200px; /* Normal height of a doodle. */ 16 | --logo-margin-top: 56px; /* Expected OGB height, so logo doesn't overlap. */ 17 | --logo-margin-bottom: 29px; /* Between logo and fakebox. */ 18 | 19 | /* Initial height determines the margin between the logo and the fakebox. If 20 | * the iframe height exceeds the normal --logo-height, the difference is 21 | * subtracted from the margin. The actual --logo-iframe-{width,height} can be 22 | * changed later, but the initial height, and therefore the margin, remains 23 | * the same. 24 | */ 25 | --logo-iframe-initial-height: var(--logo-height); 26 | --logo-iframe-height: var(--logo-height); 27 | --logo-iframe-resize-duration: 150ms; 28 | --logo-iframe-width: 500px; 29 | --tile-height: 128px; 30 | --tile-margin: 16px; 31 | --tile-width: 154px; 32 | 33 | --mv-notice-time: 10s; 34 | 35 | /* These can be overridden by themes. */ 36 | --text-color: #000; 37 | --text-color-light: #fff; 38 | --text-color-link: rgb(17, 85, 204); 39 | 40 | height: 100%; 41 | } 42 | 43 | /* width >= (3 cols * (16px + 154px) - 16px + 200px) */ 44 | @media (min-width: 694px) { 45 | html { 46 | --column-count: 3; 47 | } 48 | } 49 | 50 | /* width >= (4 cols * (16px + 154px) - 16px + 200px) */ 51 | @media (min-width: 864px) { 52 | html { 53 | --column-count: 4; 54 | } 55 | } 56 | 57 | /* TODO: Need to discuss with NTP folks before we remove font-family from the 58 | * body tag. */ 59 | body { 60 | background-attachment: fixed !important; 61 | cursor: default; 62 | font-family: arial, sans-serif; 63 | font-size: small; 64 | margin: 0; 65 | min-height: 100%; 66 | overflow-x: hidden; 67 | } 68 | 69 | body.inited { 70 | display: block; 71 | } 72 | 73 | /* Button defaults vary by platform. Reset CSS so that the NTP can use buttons 74 | * as a kind of clickable div. */ 75 | button { 76 | background: transparent; 77 | border: 0; 78 | margin: 0; 79 | padding: 0; 80 | } 81 | 82 | #ntp-contents { 83 | height: 100%; 84 | position: relative; 85 | z-index: 1; 86 | width: 98%; 87 | } 88 | 89 | #logo, 90 | #fakebox-container { 91 | flex-shrink: 0; 92 | } 93 | 94 | a:-webkit-any-link { 95 | text-decoration: none !important; 96 | } 97 | 98 | a:link { 99 | text-decoration: none !important; 100 | } 101 | 102 | .non-google-page #ntp-contents { 103 | left: calc(50% - var(--content-width)/2); 104 | position: absolute; 105 | top: calc(50% - 155px); 106 | } 107 | 108 | body.hide-fakebox-logo #logo, 109 | body.hide-fakebox-logo #fakebox { 110 | opacity: 0; 111 | } 112 | 113 | #logo { 114 | height: calc(var(--logo-height) + var(--logo-margin-bottom)); 115 | margin-top: var(--logo-margin-top); 116 | min-height: fit-content; 117 | position: relative; 118 | } 119 | 120 | .non-google-page #logo { 121 | display: none; 122 | } 123 | 124 | #logo-default, 125 | #logo-doodle { 126 | opacity: 0; 127 | visibility: hidden; 128 | } 129 | 130 | #logo-default.show-logo, 131 | #logo-doodle.show-logo { 132 | opacity: 1; 133 | visibility: visible; 134 | } 135 | 136 | #logo-doodle-button, 137 | #logo-doodle-iframe { 138 | display: none; 139 | } 140 | 141 | #logo-doodle-button.show-logo, 142 | #logo-doodle-iframe.show-logo { 143 | display: block; 144 | } 145 | 146 | #logo-default.fade, 147 | #logo-doodle.fade { 148 | transition: opacity 130ms, visibility 130ms; 149 | } 150 | 151 | #logo-default, 152 | #logo-non-white { 153 | background-image: url(../../../../ui/webui/resources/images/google_logo.svg); 154 | background-repeat: no-repeat; 155 | bottom: var(--logo-margin-bottom); 156 | height: 92px; 157 | left: calc(50% - 272px/2); 158 | position: absolute; 159 | width: 272px; 160 | } 161 | 162 | body.alternate-logo #logo-default, 163 | body.alternate-logo #logo-non-white { 164 | -webkit-mask-image: 165 | url(../../../../ui/webui/resources/images/google_logo.svg); 166 | -webkit-mask-repeat: no-repeat; 167 | -webkit-mask-size: 100%; 168 | background: #eee; 169 | } 170 | 171 | #logo-default, 172 | .non-white-bg #logo-non-white { 173 | display: block; 174 | } 175 | #logo-non-white, 176 | .non-white-bg #logo-default { 177 | display: none; 178 | } 179 | 180 | #logo-doodle-button { 181 | /* An image logo is allowed to spill into the margin below, so it's not a 182 | * real bottom margin. If the image extends further than that margin, it 183 | * is cropped. */ 184 | margin: 0 auto; 185 | max-height: calc(var(--logo-height) + var(--logo-margin-bottom)); 186 | overflow: hidden; 187 | } 188 | 189 | .non-white-bg #logo-doodle-button, 190 | .non-white-bg #logo-doodle-iframe { 191 | display: none; 192 | } 193 | 194 | #logo-doodle-iframe { 195 | border: 0; 196 | height: var(--logo-iframe-height); 197 | margin: 0 auto calc(var(--logo-height) + var(--logo-margin-bottom) 198 | - var(--logo-iframe-initial-height)) auto; 199 | transition: width var(--logo-iframe-resize-duration), 200 | height var(--logo-iframe-resize-duration); 201 | width: var(--logo-iframe-width); 202 | } 203 | 204 | #logo-doodle-notifier { 205 | display: none; 206 | } 207 | .non-white-bg #logo-doodle-notifier { 208 | background: transparent; 209 | border: 0; 210 | cursor: pointer; 211 | display: inline-block; 212 | height: 24px; 213 | left: calc(50% + 148px); 214 | padding: 0; 215 | position: absolute; 216 | top: 100px; 217 | width: 24px; 218 | } 219 | @keyframes anim-pos { 220 | 0% { transform: translate(-98%, 0); } 221 | 100% { transform: translate(98%, 0); } 222 | } 223 | @keyframes anim-z-order { 224 | 0% { z-index: 100; } 225 | 100% { z-index: 1; } 226 | } 227 | .non-white-bg #logo-doodle-notifier .outer { 228 | animation: anim-z-order 3520ms linear infinite; 229 | height: 37.5%; 230 | left: 50%; 231 | margin-left: -18.75%; 232 | margin-top: -18.75%; 233 | position: absolute; 234 | top: 50%; 235 | width: 37.5%; 236 | } 237 | .non-white-bg #logo-doodle-notifier .inner { 238 | animation: anim-pos 880ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 239 | infinite alternate; 240 | border-radius: 50%; 241 | height: 100%; 242 | position: absolute; 243 | transform: rotate(90deg); 244 | width: 100%; 245 | } 246 | .non-white-bg #logo-doodle-notifier .ball0 { 247 | animation-delay: 2640ms; 248 | transform: rotate(45deg); 249 | } 250 | .non-white-bg #logo-doodle-notifier .ball1 { 251 | animation-delay: 1760ms; 252 | transform: rotate(135deg); 253 | } 254 | .non-white-bg #logo-doodle-notifier .ball2 { 255 | transform: rotate(225deg); 256 | } 257 | .non-white-bg #logo-doodle-notifier .ball3 { 258 | animation-delay: 880ms; 259 | transform: rotate(315deg); 260 | } 261 | .non-white-bg #logo-doodle-notifier .ball0 .inner { 262 | background: linear-gradient( 263 | 315deg, rgb(0, 85, 221), rgb(0, 119, 255), rgb(0, 119, 255)); 264 | } 265 | .non-white-bg #logo-doodle-notifier .ball1 .inner { 266 | background: linear-gradient( 267 | 225deg, rgb(221, 0, 0), rgb(238, 51, 51), rgb(255, 119, 85)); 268 | } 269 | .non-white-bg #logo-doodle-notifier .ball2 .inner { 270 | background: linear-gradient( 271 | 90deg, rgb(0, 119, 68), rgb(0, 153, 68), rgb(85, 187, 85)); 272 | } 273 | .non-white-bg #logo-doodle-notifier .ball3 .inner { 274 | background: linear-gradient( 275 | 0deg, rgb(255, 170, 51), rgb(255, 204, 0), rgb(255, 221, 102)); 276 | } 277 | 278 | #fakebox-container { 279 | margin: 0 auto 8px auto; 280 | width: var(--content-width); 281 | } 282 | 283 | #fakebox { 284 | background-color: #fff; 285 | border-radius: 2px; 286 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08); 287 | cursor: text; 288 | font-size: 18px; 289 | height: 44px; 290 | line-height: 36px; 291 | margin: 0 calc(var(--tile-margin) / 2 + 1px) 0 calc(var(--tile-margin) / 2); 292 | outline: none; 293 | position: relative; 294 | transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1); 295 | } 296 | 297 | .md #fakebox { 298 | background-color: rgb(241, 243, 244); 299 | border-radius: 22px; 300 | box-shadow: none; 301 | margin: 0 auto; 302 | max-width: 560px; 303 | } 304 | 305 | .non-google-page #fakebox-container { 306 | display: none; 307 | } 308 | 309 | #fakebox:hover, 310 | body.fakebox-focused #fakebox { 311 | box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.08); 312 | } 313 | 314 | .md #fakebox:hover, 315 | body.md.fakebox-focused #fakebox { 316 | box-shadow: none; 317 | } 318 | 319 | #fakebox > input { 320 | bottom: 0; 321 | box-sizing: border-box; 322 | left: 0; 323 | margin: 0; 324 | opacity: 0; 325 | padding-left: 8px; 326 | position: absolute; 327 | top: 0; 328 | width: 100%; 329 | } 330 | 331 | .md #fakebox > input { 332 | padding-left: 20px; 333 | } 334 | 335 | html[dir=rtl] #fakebox > input { 336 | padding-left: 0; 337 | padding-right: 8px; 338 | right: 0; 339 | } 340 | 341 | .md html[dir=rtl] #fakebox > input { 342 | padding-right: 20px; 343 | } 344 | 345 | #fakebox-text { 346 | bottom: 4px; 347 | color: rgba(0, 0, 0, 0.42); 348 | font-family: arial, sans-serif; 349 | font-size: 16px; 350 | left: 13px; 351 | margin-top: 1px; 352 | overflow: hidden; 353 | position: absolute; 354 | right: 13px; 355 | text-align: initial; 356 | text-overflow: ellipsis; 357 | top: 4px; 358 | vertical-align: middle; 359 | visibility: inherit; 360 | white-space: nowrap; 361 | } 362 | 363 | .md #fakebox-text { 364 | color: rgb(128, 134, 139); 365 | font-family: 'Roboto', arial, sans-serif; 366 | font-size: 14px; 367 | left: 0; 368 | padding-left: 20px; 369 | } 370 | 371 | html[dir=rtl] #fakebox-text { 372 | left: auto; 373 | right: 13px; 374 | } 375 | 376 | #fakebox-cursor { 377 | background: #333; 378 | bottom: 12px; 379 | left: 13px; 380 | position: absolute; 381 | top: 12px; 382 | visibility: hidden; 383 | width: 1px; 384 | } 385 | 386 | .md #fakebox-cursor { 387 | left: 20px; 388 | } 389 | 390 | html[dir=rtl] #fakebox-cursor { 391 | left: auto; 392 | right: 13px; 393 | } 394 | 395 | .md html[dir=rtl] #fakebox-cursor { 396 | right: 20px; 397 | } 398 | 399 | #fakebox-microphone { 400 | background: url(googlemic_clr_24px.svg) no-repeat center; 401 | background-size: 24px 24px; 402 | bottom: 0; 403 | cursor: pointer; 404 | padding: 22px 12px 0; 405 | position: absolute; 406 | right: 0; 407 | top: 0; 408 | width: 41px; 409 | } 410 | 411 | .md #fakebox-microphone { 412 | background-size: 16px 16px; 413 | margin-right: 12px; 414 | width: 28px; 415 | } 416 | 417 | html[dir=rtl] #fakebox-microphone { 418 | left: 0; 419 | right: auto; 420 | } 421 | 422 | @keyframes blink { 423 | 0% { 424 | opacity: 1; 425 | } 426 | 61.55% { 427 | opacity: 0; 428 | } 429 | } 430 | 431 | body.fakebox-drag-focused #fakebox-text, 432 | body.fakebox-focused #fakebox-text { 433 | visibility: hidden; 434 | } 435 | 436 | body.fakebox-drag-focused #fakebox-cursor { 437 | visibility: inherit; 438 | } 439 | 440 | body.fakebox-focused #fakebox-cursor { 441 | animation: blink 1.3s step-end infinite; 442 | visibility: inherit; 443 | } 444 | 445 | #most-visited { 446 | margin-top: 56px; 447 | text-align: -webkit-center; 448 | user-select: none; 449 | } 450 | 451 | .md-icons #most-visited { 452 | margin-top: 30px; 453 | } 454 | 455 | /* Non-Google pages have no Fakebox, so don't need top margin. */ 456 | .non-google-page #most-visited { 457 | margin-top: 0; 458 | } 459 | 460 | #mv-tiles { 461 | /* Two rows of tiles of 128px each, 16px of spacing between the rows, and 462 | * 4px/8px of margin on top and bottom respectively. If you change this, also 463 | * change the corresponding values in most_visited_single.css. */ 464 | height: calc(4*var(--tile-height) + var(--tile-margin) + 4px + 8px + 30px); 465 | margin: 0; 466 | position: relative; 467 | text-align: -webkit-auto; 468 | width: var(--content-width); 469 | } 470 | 471 | .md-icons #mv-tiles { 472 | /* Two rows of tiles of 104px each, 8px of spacing after each row, and 10px of 473 | * margin on top and bottom. If you change this, also change the corresponding 474 | * values in most_visited_single.css. */ 475 | height: calc(8*(var(--md-tile-height) + var(--md-tile-margin)) + 8*10px); 476 | } 477 | 478 | #mv-notice-x { 479 | -webkit-mask-image: -webkit-image-set( 480 | url(chrome-search://local-ntp/images/close_3_mask.png) 1x, 481 | url(chrome-search://local-ntp/images/close_3_mask.png@2x) 2x); 482 | -webkit-mask-position: 3px 3px; 483 | -webkit-mask-repeat: no-repeat; 484 | -webkit-mask-size: 10px 10px; 485 | background-color: rgba(90,90,90,0.7); 486 | cursor: pointer; 487 | display: inline-block; 488 | filter: var(--theme-filter, 'none'); 489 | height: 16px; 490 | margin-left: 20px; 491 | outline: none; 492 | vertical-align: middle; 493 | width: 16px; 494 | } 495 | 496 | html[dir=rtl] #mv-notice-x { 497 | margin-left: 0; 498 | margin-right: 20px; 499 | } 500 | 501 | #mv-notice-x:hover { 502 | background-color: rgba(90,90,90,1.0); 503 | } 504 | 505 | #mv-notice-x:active { 506 | background-color: rgb(66,133,244); 507 | } 508 | 509 | .md-icons #mv-notice-x { 510 | display: none; 511 | } 512 | 513 | #mv-notice-container { 514 | width: 100%; 515 | } 516 | 517 | .md-icons #mv-notice-container { 518 | bottom: -50px; 519 | margin-bottom: 16px; 520 | position: fixed; 521 | transition: bottom 400ms; 522 | } 523 | 524 | .md-icons #mv-notice-container.float-up { 525 | bottom: 0; 526 | } 527 | 528 | .md-icons #mv-notice-container.mv-notice-hide { 529 | display: none; 530 | } 531 | 532 | /* The notification shown when a tile is blacklisted. */ 533 | #mv-notice { 534 | font-size: 12px; 535 | font-weight: bold; 536 | opacity: 1; 537 | padding: 10px 0; 538 | } 539 | 540 | .md-icons #mv-notice { 541 | background-color: white; 542 | border: 1px solid rgb(218, 220, 224); 543 | /* Necessary for a "pill" shape. Using 50% creates an oval. */ 544 | border-radius: 500px; 545 | font-family: 'Roboto'; 546 | font-weight: normal; 547 | height: 32px; 548 | margin: 0 auto; 549 | padding: 0; 550 | width: fit-content; 551 | } 552 | 553 | #mv-notice span { 554 | cursor: default; 555 | display: inline-block; 556 | height: 16px; 557 | line-height: 16px; 558 | vertical-align: top; 559 | } 560 | 561 | .md-icons #mv-notice span { 562 | color: rgb(95,99,104); 563 | height: auto; 564 | line-height: 32px; 565 | vertical-align: unset; 566 | } 567 | 568 | /* Links in the notification. */ 569 | #mv-notice-links span { 570 | -webkit-margin-start: 6px; 571 | color: var(--text-color-link); 572 | cursor: pointer; 573 | outline: none; 574 | padding: 0 4px; 575 | } 576 | 577 | .md-icons #mv-notice-links span { 578 | -webkit-margin-start: 0; 579 | /* Necessary for a "pill" shape. Using 50% creates an oval. */ 580 | border-radius: 500px; 581 | color: rgb(26,115,232); 582 | padding: 0 16px; 583 | } 584 | 585 | #mv-notice-links span:hover, 586 | #mv-notice-links span:focus { 587 | text-decoration: underline; 588 | } 589 | 590 | .md-icons #mv-notice-links span:hover, 591 | .md-icons #mv-notice-links span:active { 592 | background-color: rgba(26,115,232, 0.1); 593 | text-decoration: none; 594 | transition: background-color 200ms; 595 | } 596 | 597 | #mv-msg { 598 | color: var(--text-color); 599 | } 600 | 601 | .md-icons #mv-msg { 602 | padding: 0 16px; 603 | } 604 | 605 | .default-theme.dark #mv-msg { 606 | color: #fff; 607 | } 608 | 609 | .default-theme.dark #mv-notice-links span { 610 | color: #fff; 611 | } 612 | 613 | #mv-notice.mv-notice-delayed-hide:not(:focus-within) { 614 | opacity: 0; 615 | transition-delay: var(--mv-notice-time); 616 | transition-property: opacity; 617 | } 618 | 619 | #mv-notice.mv-notice-hide { 620 | display: none; 621 | } 622 | 623 | #attribution { 624 | bottom: 0; 625 | color: var(--text-color-light); 626 | cursor: default; 627 | display: inline-block; 628 | font-size: 13px; 629 | left: auto; 630 | position: fixed; 631 | right: 8px; 632 | text-align: left; 633 | user-select: none; 634 | z-index: -1; 635 | } 636 | 637 | html[dir=rtl] #attribution, 638 | #attribution.left-align-attribution { 639 | left: 8px; 640 | right: auto; 641 | text-align: right; 642 | } 643 | 644 | #mv-single { 645 | border: none; 646 | height: 100%; 647 | width: 100%; 648 | } 649 | 650 | #one-google { 651 | position: absolute; 652 | right: 0; 653 | top: 0; 654 | transition: opacity 130ms; 655 | } 656 | 657 | #one-google.hidden { 658 | opacity: 0; 659 | } 660 | 661 | .ripple-container { 662 | height: 0; 663 | left: 0; 664 | overflow: hidden; 665 | pointer-events: none; 666 | position: absolute; 667 | top: 0; 668 | width: 0; 669 | z-index: 100; 670 | } 671 | 672 | .ripple-effect { 673 | background-color: rgba(26, 115, 232, 0.1); 674 | border-radius: 50%; 675 | height: 1px; 676 | pointer-events: none; 677 | transition: width, height, margin, background-color 400ms 250ms; 678 | transition-duration: 400ms; 679 | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 680 | width: 1px; 681 | } 682 | 683 | /* The box containing the slider */ 684 | .switch { 685 | background-color: #fff; 686 | border-radius: 8px; 687 | display: inline-block; 688 | height: 12px; 689 | left: 3px; 690 | position: absolute; 691 | top: 2px; 692 | transition: background-color linear 80ms; 693 | width: 28px; 694 | z-index: 0; 695 | } 696 | 697 | /* Hide default checkbox */ 698 | .switch input { 699 | display: none; 700 | } 701 | 702 | /* Rounded background element for the toggle */ 703 | .toggle { 704 | background-color: #ccc; 705 | border-radius: 34px; 706 | bottom: 0; 707 | cursor: pointer; 708 | display: block; 709 | left: 0; 710 | position: absolute; 711 | right: 0; 712 | top: 0; 713 | transition: transform linear 80ms, background-color linear 80ms; 714 | } 715 | 716 | .toggle::before { 717 | background-color: #fff; 718 | border-radius: 50%; 719 | bottom: -2px; 720 | box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4); 721 | content: ''; 722 | display: block; 723 | height: 16px; 724 | left: -6px; 725 | position: absolute; 726 | transition: transform linear 80ms, background-color linear 80ms; 727 | width: 16px; 728 | } 729 | 730 | input:checked + .toggle { 731 | background-color: rgba(26, 115, 232, .5); 732 | box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4); 733 | } 734 | 735 | input:focus + .toggle { 736 | box-shadow: 0 0 1px rgb(33, 150, 243); 737 | } 738 | 739 | input:checked + .toggle::before { 740 | -webkit-transform: translateX(26px); 741 | background-color: rgb(26, 115, 232); 742 | transform: translateX(26px); 743 | } 744 | 745 | #bookmarks-grid, #fake-bookmarks-grid { 746 | margin: 2%; 747 | position: relative; 748 | } 749 | 750 | #fake-bookmarks-grid { 751 | z-index: -99999; 752 | } 753 | 754 | .grid-item { 755 | float: left; 756 | width: 64px; 757 | font-size: 10px; 758 | overflow: hidden; 759 | background: #fff; 760 | margin: 10px; 761 | color: #3c3c3c; 762 | text-align: center; 763 | z-index: 999999; 764 | } 765 | 766 | .grid-item a { 767 | text-decoration: none; 768 | color: #555; 769 | } 770 | 771 | .grid-image { 772 | height: 64px; 773 | width: 64px; 774 | object-fit: contain; 775 | } 776 | 777 | .plus-item a { 778 | text-decoration: none; 779 | } 780 | 781 | .plus-item { 782 | float: left; 783 | width: 25px !important; 784 | height: 28px !important; 785 | line-height: 30px; 786 | overflow: hidden; 787 | margin: 0px; 788 | color: #3c3c3c; 789 | font-size: 25px; 790 | text-align: center; 791 | z-index: 999999; 792 | color: #777; 793 | } 794 | 795 | .configure-item a { 796 | text-decoration: none; 797 | } 798 | 799 | .configure-item { 800 | font-size: 21px; 801 | font-weight: 450; 802 | z-index: 999999; 803 | color: #777; 804 | float: left; 805 | padding-left: 12px; 806 | } 807 | 808 | .close-item a { 809 | text-decoration: none; 810 | } 811 | 812 | .close-item { 813 | font-size: 21px; 814 | font-weight: 450; 815 | z-index: 999999; 816 | color: #777; 817 | position: absolute; 818 | right: 10px; 819 | } 820 | 821 | .newsImage { 822 | width: 128px; 823 | height: 128px; 824 | object-fit: cover; 825 | z-index: 9999999; 826 | border-radius: 6px; 827 | } 828 | 829 | .newsItem { 830 | margin: 5px; 831 | border-radius: 5px; 832 | border-bottom: 1px solid #efefef; 833 | padding-bottom: 15px !important; 834 | font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif; 835 | margin-top: 15px; 836 | } 837 | 838 | .newsItem a { 839 | text-decoration: none; 840 | } 841 | 842 | .newsTitle { 843 | color: #222; 844 | padding-right: 148px; 845 | padding-top: 5px; 846 | } 847 | 848 | .newsAttribution, .newsTime { 849 | color: #555; 850 | font-size: 70%; 851 | } 852 | 853 | .newsTime { 854 | position: relative; 855 | top: 10px; 856 | } 857 | 858 | #locale { 859 | font-size: 12px; 860 | position: relative; 861 | top: -2px; 862 | padding-right: 6px; 863 | } 864 | 865 | .arrow-down { 866 | width: 0; 867 | height: 0; 868 | border-left: 10px solid transparent; 869 | border-right: 10px solid transparent; 870 | border-top: 10px solid #ccc; 871 | position: relative; 872 | top: 7px; 873 | } 874 | 875 | .show {display: block !important;} 876 | 877 | .dropbtn { 878 | cursor: pointer; 879 | } 880 | 881 | .dropdown { 882 | position: relative; 883 | display: inline-block; 884 | } 885 | 886 | .dropdown-content { 887 | display: none; 888 | position: absolute; 889 | background-color: #f1f1f1; 890 | min-width: 160px; 891 | overflow: auto; 892 | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 893 | z-index: 1; 894 | margin-top: 15px; 895 | margin-left: 11px; 896 | height: 300px; 897 | } 898 | 899 | .dropdown-content a { 900 | color: black; 901 | padding: 3px 1px; 902 | text-decoration: none; 903 | display: block; 904 | font-size: 14px; 905 | } 906 | 907 | .dropdown a:hover {background-color: #ddd;} 908 | 909 | .localesList { line-height: 28px; } 910 | .localesListUnselected { list-style-type: circle; } 911 | 912 | .lds-dual-ring { 913 | display: inline-block; 914 | width: 64px; 915 | height: 64px; 916 | } 917 | .lds-dual-ring:after { 918 | content: " "; 919 | display: block; 920 | width: 46px; 921 | height: 46px; 922 | margin: 1px; 923 | border-radius: 50%; 924 | border: 5px solid #aaa; 925 | border-color: #aaa transparent #aaa transparent; 926 | animation: lds-dual-ring 1.2s linear infinite; 927 | } 928 | @keyframes lds-dual-ring { 929 | 0% { 930 | transform: rotate(0deg); 931 | } 932 | 100% { 933 | transform: rotate(360deg); 934 | } 935 | } 936 | 937 | -------------------------------------------------------------------------------- /local_ntp.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 29 | 31 | 32 | 33 | 34 | 36 | 37 | 65 | 80 |