├── .gitignore
├── LICENSE
├── README.md
├── package-lock.json
├── package.json
├── prettier.config.js
├── rollup.config.js
├── src
├── background
│ ├── background.js
│ ├── css
│ │ ├── chrome_shared.css
│ │ └── widgets.css
│ ├── icon.png
│ ├── icon_128.png
│ ├── icon_gray.png
│ ├── manifest.json
│ ├── options.html
│ ├── options.js
│ ├── twitter_button.js
│ └── twitter_widgets.js
├── content
│ ├── index.ts
│ ├── lib
│ │ ├── extract.ts
│ │ ├── iframe.ts
│ │ ├── readable.ts
│ │ └── scroll.ts
│ ├── style
│ │ ├── toast.css
│ │ └── toc.css
│ ├── toc.ts
│ ├── types.ts
│ ├── ui
│ │ ├── handle.ts
│ │ ├── index.ts
│ │ └── toc_content.ts
│ └── util
│ │ ├── assert.ts
│ │ ├── debug.ts
│ │ ├── decorator.ts
│ │ ├── dom
│ │ ├── css.ts
│ │ ├── depth.ts
│ │ ├── px.ts
│ │ └── to_array.ts
│ │ ├── env.ts
│ │ ├── event.ts
│ │ ├── logger.ts
│ │ ├── math
│ │ └── between.ts
│ │ ├── stream.ts
│ │ └── toast.ts
└── types
│ └── modules.d.ts
├── test
└── list.md
├── tsconfig.json
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | dist
4 | *.log
5 | *.zip
6 | .rpt2_cache
7 | /chrome
8 | /firefox
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Apache License
2 | Version 2.0, January 2004
3 | http://www.apache.org/licenses/
4 |
5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
6 |
7 | 1. Definitions.
8 |
9 | "License" shall mean the terms and conditions for use, reproduction,
10 | and distribution as defined by Sections 1 through 9 of this document.
11 |
12 | "Licensor" shall mean the copyright owner or entity authorized by
13 | the copyright owner that is granting the License.
14 |
15 | "Legal Entity" shall mean the union of the acting entity and all
16 | other entities that control, are controlled by, or are under common
17 | control with that entity. For the purposes of this definition,
18 | "control" means (i) the power, direct or indirect, to cause the
19 | direction or management of such entity, whether by contract or
20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the
21 | outstanding shares, or (iii) beneficial ownership of such entity.
22 |
23 | "You" (or "Your") shall mean an individual or Legal Entity
24 | exercising permissions granted by this License.
25 |
26 | "Source" form shall mean the preferred form for making modifications,
27 | including but not limited to software source code, documentation
28 | source, and configuration files.
29 |
30 | "Object" form shall mean any form resulting from mechanical
31 | transformation or translation of a Source form, including but
32 | not limited to compiled object code, generated documentation,
33 | and conversions to other media types.
34 |
35 | "Work" shall mean the work of authorship, whether in Source or
36 | Object form, made available under the License, as indicated by a
37 | copyright notice that is included in or attached to the work
38 | (an example is provided in the Appendix below).
39 |
40 | "Derivative Works" shall mean any work, whether in Source or Object
41 | form, that is based on (or derived from) the Work and for which the
42 | editorial revisions, annotations, elaborations, or other modifications
43 | represent, as a whole, an original work of authorship. For the purposes
44 | of this License, Derivative Works shall not include works that remain
45 | separable from, or merely link (or bind by name) to the interfaces of,
46 | the Work and Derivative Works thereof.
47 |
48 | "Contribution" shall mean any work of authorship, including
49 | the original version of the Work and any modifications or additions
50 | to that Work or Derivative Works thereof, that is intentionally
51 | submitted to Licensor for inclusion in the Work by the copyright owner
52 | or by an individual or Legal Entity authorized to submit on behalf of
53 | the copyright owner. For the purposes of this definition, "submitted"
54 | means any form of electronic, verbal, or written communication sent
55 | to the Licensor or its representatives, including but not limited to
56 | communication on electronic mailing lists, source code control systems,
57 | and issue tracking systems that are managed by, or on behalf of, the
58 | Licensor for the purpose of discussing and improving the Work, but
59 | excluding communication that is conspicuously marked or otherwise
60 | designated in writing by the copyright owner as "Not a Contribution."
61 |
62 | "Contributor" shall mean Licensor and any individual or Legal Entity
63 | on behalf of whom a Contribution has been received by Licensor and
64 | subsequently incorporated within the Work.
65 |
66 | 2. Grant of Copyright License. Subject to the terms and conditions of
67 | this License, each Contributor hereby grants to You a perpetual,
68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
69 | copyright license to reproduce, prepare Derivative Works of,
70 | publicly display, publicly perform, sublicense, and distribute the
71 | Work and such Derivative Works in Source or Object form.
72 |
73 | 3. Grant of Patent License. Subject to the terms and conditions of
74 | this License, each Contributor hereby grants to You a perpetual,
75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
76 | (except as stated in this section) patent license to make, have made,
77 | use, offer to sell, sell, import, and otherwise transfer the Work,
78 | where such license applies only to those patent claims licensable
79 | by such Contributor that are necessarily infringed by their
80 | Contribution(s) alone or by combination of their Contribution(s)
81 | with the Work to which such Contribution(s) was submitted. If You
82 | institute patent litigation against any entity (including a
83 | cross-claim or counterclaim in a lawsuit) alleging that the Work
84 | or a Contribution incorporated within the Work constitutes direct
85 | or contributory patent infringement, then any patent licenses
86 | granted to You under this License for that Work shall terminate
87 | as of the date such litigation is filed.
88 |
89 | 4. Redistribution. You may reproduce and distribute copies of the
90 | Work or Derivative Works thereof in any medium, with or without
91 | modifications, and in Source or Object form, provided that You
92 | meet the following conditions:
93 |
94 | (a) You must give any other recipients of the Work or
95 | Derivative Works a copy of this License; and
96 |
97 | (b) You must cause any modified files to carry prominent notices
98 | stating that You changed the files; and
99 |
100 | (c) You must retain, in the Source form of any Derivative Works
101 | that You distribute, all copyright, patent, trademark, and
102 | attribution notices from the Source form of the Work,
103 | excluding those notices that do not pertain to any part of
104 | the Derivative Works; and
105 |
106 | (d) If the Work includes a "NOTICE" text file as part of its
107 | distribution, then any Derivative Works that You distribute must
108 | include a readable copy of the attribution notices contained
109 | within such NOTICE file, excluding those notices that do not
110 | pertain to any part of the Derivative Works, in at least one
111 | of the following places: within a NOTICE text file distributed
112 | as part of the Derivative Works; within the Source form or
113 | documentation, if provided along with the Derivative Works; or,
114 | within a display generated by the Derivative Works, if and
115 | wherever such third-party notices normally appear. The contents
116 | of the NOTICE file are for informational purposes only and
117 | do not modify the License. You may add Your own attribution
118 | notices within Derivative Works that You distribute, alongside
119 | or as an addendum to the NOTICE text from the Work, provided
120 | that such additional attribution notices cannot be construed
121 | as modifying the License.
122 |
123 | You may add Your own copyright statement to Your modifications and
124 | may provide additional or different license terms and conditions
125 | for use, reproduction, or distribution of Your modifications, or
126 | for any such Derivative Works as a whole, provided Your use,
127 | reproduction, and distribution of the Work otherwise complies with
128 | the conditions stated in this License.
129 |
130 | 5. Submission of Contributions. Unless You explicitly state otherwise,
131 | any Contribution intentionally submitted for inclusion in the Work
132 | by You to the Licensor shall be under the terms and conditions of
133 | this License, without any additional terms or conditions.
134 | Notwithstanding the above, nothing herein shall supersede or modify
135 | the terms of any separate license agreement you may have executed
136 | with Licensor regarding such Contributions.
137 |
138 | 6. Trademarks. This License does not grant permission to use the trade
139 | names, trademarks, service marks, or product names of the Licensor,
140 | except as required for reasonable and customary use in describing the
141 | origin of the Work and reproducing the content of the NOTICE file.
142 |
143 | 7. Disclaimer of Warranty. Unless required by applicable law or
144 | agreed to in writing, Licensor provides the Work (and each
145 | Contributor provides its Contributions) on an "AS IS" BASIS,
146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 | implied, including, without limitation, any warranties or conditions
148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 | PARTICULAR PURPOSE. You are solely responsible for determining the
150 | appropriateness of using or redistributing the Work and assume any
151 | risks associated with Your exercise of permissions under this License.
152 |
153 | 8. Limitation of Liability. In no event and under no legal theory,
154 | whether in tort (including negligence), contract, or otherwise,
155 | unless required by applicable law (such as deliberate and grossly
156 | negligent acts) or agreed to in writing, shall any Contributor be
157 | liable to You for damages, including any direct, indirect, special,
158 | incidental, or consequential damages of any character arising as a
159 | result of this License or out of the use or inability to use the
160 | Work (including but not limited to damages for loss of goodwill,
161 | work stoppage, computer failure or malfunction, or any and all
162 | other commercial damages or losses), even if such Contributor
163 | has been advised of the possibility of such damages.
164 |
165 | 9. Accepting Warranty or Additional Liability. While redistributing
166 | the Work or Derivative Works thereof, You may choose to offer,
167 | and charge a fee for, acceptance of support, warranty, indemnity,
168 | or other liability obligations and/or rights consistent with this
169 | License. However, in accepting such obligations, You may act only
170 | on Your own behalf and on Your sole responsibility, not on behalf
171 | of any other Contributor, and only if You agree to indemnify,
172 | defend, and hold each Contributor harmless for any liability
173 | incurred by, or claims asserted against, such Contributor by reason
174 | of your accepting any such warranty or additional liability.
175 |
176 | END OF TERMS AND CONDITIONS
177 |
178 | APPENDIX: How to apply the Apache License to your work.
179 |
180 | To apply the Apache License to your work, attach the following
181 | boilerplate notice, with the fields enclosed by brackets "{}"
182 | replaced with your own identifying information. (Don't include
183 | the brackets!) The text should be enclosed in the appropriate
184 | comment syntax for the file format. We also recommend that a
185 | file or class name and description of purpose be included on the
186 | same "printed page" as the copyright notice for easier
187 | identification within third-party archives.
188 |
189 | Copyright {yyyy} {name of copyright owner}
190 |
191 | Licensed under the Apache License, Version 2.0 (the "License");
192 | you may not use this file except in compliance with the License.
193 | You may obtain a copy of the License at
194 |
195 | http://www.apache.org/licenses/LICENSE-2.0
196 |
197 | Unless required by applicable law or agreed to in writing, software
198 | distributed under the License is distributed on an "AS IS" BASIS,
199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 | See the License for the specific language governing permissions and
201 | limitations under the License.
202 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Simple Outliner / 智能网页大纲 (for Chrome), 💥 Support Inoreader and Feedly
2 |
3 | > Simple Outliner / 自动生成网页大纲、目录，Support Inoreader and Feedly。
4 |
5 | ## Download
6 |
7 | - Chrome extension: [Simple Outliner / 智能网页大纲](https://chrome.google.com/webstore/detail/smart-toc-%E6%99%BA%E8%83%BD%E7%BD%91%E9%A1%B5%E5%A4%A7%E7%BA%B2/ppdjhggfcaenclmimmdigbcglfoklgaf)
8 |
9 | ## Build
10 |
11 | Requires `node.js` and `yarn`
12 |
13 | ```bash
14 | # install dependencies
15 | yarn
16 |
17 | # build and bundle the extension as `.zip` for release
18 | yarn run build
19 |
20 | # build/watch the extension for local development (please use Chrome's `Load unpacked extension` to load `/dist` folder)
21 | yarn run start
22 | ```
23 |
24 | Thank you for using the extension. Any suggestions/issues/problems are welcomed!
25 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "smart-toc",
3 | "version": "0.0.1",
4 | "description": "an chrome extension that generates a table of content for webpage",
5 | "main": "src/js/index.js",
6 | "scripts": {
7 | "clean": "rm -rf dist/* firefox/* chrome/*",
8 | "start": "export ENV=development && yarn run build:background && rollup --config rollup.config.js --watch",
9 | "lint:watch": "tsc --watch",
10 | "build": "export ENV=production && yarn run clean; yarn run build:content && yarn run build:background && yarn run build:chrome && yarn run build:firefox",
11 | "build:content": "rollup --config rollup.config.js",
12 | "build:background": "mkdir -p dist && cp -R src/background/* dist/",
13 | "build:chrome": "mkdir -p chrome && zip -r chrome/smart-toc.zip dist",
14 | "build:firefox": "yarn run build:firefox:package && yarn run build:firefox:source",
15 | "build:firefox:package": "web-ext build --overwrite-dest --artifacts-dir ./firefox --source-dir ./dist/ ",
16 | "build:firefox:source": "zip -r ./firefox/smart-toc_source.zip src package.json README.md tsconfig.json rollup.config.js yarn.lock"
17 | },
18 | "repository": {
19 | "type": "git",
20 | "url": "git+https://github.com/FallenMax/smart-toc.git"
21 | },
22 | "keywords": [
23 | "chrome",
24 | "extension",
25 | "table-of-content",
26 | "toc",
27 | "outline",
28 | "outliner"
29 | ],
30 | "author": "FallenMax@gmail.com",
31 | "license": "ISC",
32 | "bugs": {
33 | "url": "https://github.com/FallenMax/smart-toc/issues"
34 | },
35 | "homepage": "https://github.com/FallenMax/smart-toc#readme",
36 | "devDependencies": {
37 | "@types/chrome": "^0.0.154",
38 | "@types/mithril": "^2.0.8",
39 | "rollup": "2.56.0",
40 | "rollup-plugin-commonjs": "^10.1.0",
41 | "rollup-plugin-node-resolve": "^5.2.0",
42 | "rollup-plugin-replace": "2.2.0",
43 | "rollup-plugin-string": "^3.0.0",
44 | "rollup-plugin-typescript": "^1.0.1",
45 | "rollup-plugin-typescript2": "^0.30.0",
46 | "typescript": "^4.3.5",
47 | "web-ext": "^6.2.0"
48 | },
49 | "dependencies": {
50 | "mithril": "^2.0.4",
51 | "pcf-start": "^1.6.5",
52 | "tslib": "^2.3.0"
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | semi: false,
3 | singleQuote: true,
4 | trailingComma: 'all',
5 | arrowParens: 'always',
6 | }
7 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import replace from 'rollup-plugin-replace'
2 | import { string } from 'rollup-plugin-string'
3 | import nodeResolve from 'rollup-plugin-node-resolve'
4 | import commonjs from 'rollup-plugin-commonjs'
5 | import ts from 'rollup-plugin-typescript2'
6 |
7 | export default {
8 | input: 'src/content/index.ts',
9 | output: {
10 | format: 'iife',
11 | file: 'dist/toc.js',
12 | name: 'smarttoc',
13 | },
14 | plugins: [
15 | replace({
16 | 'process.env': JSON.stringify({
17 | ENV: process.env.ENV,
18 | }),
19 | }),
20 | ts(),
21 | nodeResolve({ main: true, browser: true }),
22 | commonjs(),
23 | string({ include: '**/*.css' }),
24 | ],
25 | }
26 |
--------------------------------------------------------------------------------
/src/background/background.js:
--------------------------------------------------------------------------------
1 | const getCurrentTab = (cb) => {
2 | chrome.tabs.query({ active: true, currentWindow: true }, ([activeTab]) => {
3 | cb(activeTab)
4 | })
5 | }
6 |
7 | const execOnCurrentTab = (command) => {
8 | getCurrentTab((tab) => {
9 | if (tab && tab.url.indexOf("chrome") !== 0) {
10 | chrome.tabs.sendMessage(tab.id, command, {}, (response) => {
11 | if (!chrome.runtime.lastError) {
12 | // console.log({response})
13 | // content_script 正常加载
14 | } else {
15 | if (command === 'toggle' && response === undefined) {
16 | chrome.scripting.executeScript({
17 | target: {tabId: tab.id, allFrames: true},
18 | files: ['toc.js']
19 | },()=>{
20 | chrome.tabs.sendMessage(tab.id, command, {}, (response) => { }) // load then send again
21 | })
22 | }
23 | }
24 | })
25 | }
26 | })
27 | }
28 |
29 | chrome.action.onClicked.addListener(() => execOnCurrentTab('toggle'))
30 | chrome.commands.onCommand.addListener((command) => execOnCurrentTab(command))
31 |
32 | chrome.runtime.onInstalled.addListener(async () => {
33 | chrome.contextMenus.create({
34 | id: "position_menu",
35 | title: "Reset TOC Position",
36 | type: 'normal',
37 | contexts: ["all"],
38 | });
39 | let url = chrome.runtime.getURL("options.html");
40 | await chrome.tabs.create({ url });
41 | });
42 |
43 | chrome.contextMenus.onClicked.addListener(function (item, tab) {
44 | if (item.menuItemId === 'position_menu') {
45 | if (chrome.storage) {
46 | chrome.storage.local.set({ "smarttoc_offset": { x: 0, y: 0 } });
47 | execOnCurrentTab('refresh')
48 | }
49 | }
50 | });
51 |
52 | chrome.action.setIcon({
53 | path: "icon_gray.png"
54 | });
55 |
56 | chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
57 | getCurrentTab(tab=>{
58 | if (tab) {
59 | if(request == 'unload'){
60 | chrome.action.setIcon({
61 | tabId : tab.id,
62 | path: "icon_gray.png"
63 | });
64 | }
65 | else if(request === 'load'){
66 | chrome.action.setIcon({
67 | tabId : tab.id,
68 | path: "icon.png"
69 | });
70 | }
71 | }
72 | });
73 | sendResponse(true)
74 | });
--------------------------------------------------------------------------------
/src/background/css/chrome_shared.css:
--------------------------------------------------------------------------------
1 | /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
2 | * Use of this source code is governed by a BSD-style license that can be
3 | * found in the LICENSE file. */
4 |
5 | /* CSS has been written by The Chromium Authors but modified and
6 | * enhanced by Ram Swaroop. */
7 |
8 | /* This file holds CSS that should be shared, in theory, by all user-visible
9 | * chrome:// pages. */
10 |
11 | @import url("widgets.css");
12 |
13 |
14 | /* Prevent CSS from overriding the hidden property. */
15 | [hidden] {
16 | display: none !important;
17 | }
18 |
19 | html.loading * {
20 | -webkit-transition-delay: 0 !important;
21 | -webkit-transition-duration: 0 !important;
22 | }
23 |
24 | body {
25 | cursor: default;
26 | margin: 0;
27 | font-family:'Segoe UI', Tahoma, sans-serif;
28 | font-size: 75%;
29 | color:rgb(48, 57, 66)
30 | }
31 |
32 | p {
33 | line-height: 1.8em;
34 | }
35 |
36 | h1,
37 | h2,
38 | h3 {
39 | -webkit-user-select: none;
40 | font-weight: normal;
41 | /* Makes the vertical size of the text the same for all fonts. */
42 | line-height: 1;
43 | }
44 |
45 | h1 {
46 | font-size: 1.5em;
47 | }
48 |
49 | h2 {
50 | font-size: 1.3em;
51 | margin-bottom: 0.4em;
52 | }
53 |
54 | h3 {
55 | font-size: 1.2em;
56 | margin-bottom: 0.8em;
57 | }
58 |
59 | a {
60 | color: rgb(17, 85, 204);
61 | text-decoration: underline;
62 | }
63 |
64 | a:active {
65 | color: rgb(5, 37, 119);
66 | }
67 |
68 | /* Elements that need to be LTR even in an RTL context, but should align
69 | * right. (Namely, URLs, search engine names, etc.)
70 | */
71 | html[dir='rtl'] .weakrtl {
72 | direction: ltr;
73 | text-align: right;
74 | }
75 |
76 | /* Input fields in search engine table need to be weak-rtl. Since those input
77 | * fields are generated for all cr.ListItem elements (and we only want weakrtl
78 | * on some), the class needs to be on the enclosing div.
79 | */
80 | html[dir='rtl'] div.weakrtl input {
81 | direction: ltr;
82 | text-align: right;
83 | }
84 |
85 | html[dir='rtl'] .favicon-cell.weakrtl {
86 | -webkit-padding-end: 22px;
87 | -webkit-padding-start: 0;
88 | }
89 |
90 | /* weakrtl for selection drop downs needs to account for the fact that
91 | * Webkit does not honor the text-align attribute for the select element.
92 | * (See Webkit bug #40216)
93 | */
94 | html[dir='rtl'] select.weakrtl {
95 | direction: rtl;
96 | }
97 |
98 | html[dir='rtl'] select.weakrtl option {
99 | direction: ltr;
100 | }
101 |
102 | /* WebKit does not honor alignment for text specified via placeholder attribute.
103 | * This CSS is a workaround. Please remove once WebKit bug is fixed.
104 | * https://bugs.webkit.org/show_bug.cgi?id=63367
105 | */
106 | html[dir='rtl'] input.weakrtl::-webkit-input-placeholder,
107 | html[dir='rtl'] .weakrtl input::-webkit-input-placeholder {
108 | direction: rtl;
109 | }
110 |
111 | /* Horizontal line */
112 | hr{
113 | border:0;
114 | height:0;
115 | border-top:1px solid rgba(0, 0, 0, 0.1);
116 | border-bottom:1px solid rgba(255, 255, 255, 0.1)
117 | }
118 | /* Different sizes */
119 | .small{
120 | font-size:11px
121 | }
122 | .large{
123 | font-size:18px
124 | }
125 | .x-large{
126 | font-size:24px
127 | }
128 | .xx-large{
129 | font-size:30px
130 | }
--------------------------------------------------------------------------------
/src/background/css/widgets.css:
--------------------------------------------------------------------------------
1 | /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
2 | * Use of this source code is governed by a BSD-style license that can be
3 | * found in the LICENSE file. */
4 |
5 | /* CSS has been written by The Chromium Authors but modified and
6 | * enhanced by Ram Swaroop. */
7 |
8 | /* This file defines styles for form controls. The order of rule blocks is
9 | * important as there are some rules with equal specificity that rely on order
10 | * as a tiebreaker. These are marked with OVERRIDE. */
11 |
12 | /* Default state **************************************************************/
13 |
14 | :-webkit-any(button,
15 | input[type='button'],
16 | input[type='reset'],
17 | input[type='submit']):not(.custom-appearance):not(.link-button),
18 | select,
19 | input[type='checkbox'],
20 | input[type='radio'] {
21 | -webkit-appearance: none;
22 | -webkit-user-select: none;
23 | background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
24 | border: 1px solid rgba(0, 0, 0, 0.25);
25 | border-radius: 2px;
26 | box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
27 | inset 0 1px 2px rgba(255, 255, 255, 0.75);
28 | color: #444;
29 | font: inherit;
30 | margin: 0 1px 0 0;
31 | text-shadow: 0 1px 0 rgb(240, 240, 240);
32 | }
33 |
34 | :-webkit-any(button,
35 | input[type='button'],
36 | input[type='reset'],
37 | input[type='submit']):not(.custom-appearance):not(.link-button),
38 | select {
39 | min-height: 2em;
40 | min-width: 4em;
41 | /* The following platform-specific rule is necessary to get adjacent
42 | * buttons, text inputs, and so forth to align on their borders while also
43 | * aligning on the text's baselines. */
44 | padding-bottom: 1px;
45 | }
46 |
47 | :-webkit-any(button,
48 | input[type='button'],
49 | input[type='reset'],
50 | input[type='submit']):not(.custom-appearance):not(.link-button) {
51 | -webkit-padding-end: 10px;
52 | -webkit-padding-start: 10px;
53 | }
54 |
55 | select {
56 | -webkit-appearance: none;
57 | -webkit-padding-end: 20px;
58 | -webkit-padding-start: 6px;
59 | /* OVERRIDE */
60 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAYAAAAbQcSUAAAAaUlEQVQoz2P4//8/A7UwdkEGhiggTsODo4g2LBEImJmZvwE1/UfHIHGQPNGGAbHCggULFrKxsf1ENgjEB4mD5EnxJoaByAZB5Yk3DNlAPj6+L8gGkWUYzMC3b982IRtEtmFQjaxYxDAwAGi4TwMYKNLfAAAAAElFTkSuQmCC'),
61 | -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
62 | background-position: right center;
63 | background-repeat: no-repeat;
64 | }
65 |
66 | html[dir='rtl'] select {
67 | background-position: center left;
68 | }
69 |
70 | input[type='checkbox'] {
71 | bottom: 2px;
72 | height: 13px;
73 | position: relative;
74 | vertical-align: middle;
75 | width: 13px;
76 | }
77 |
78 | input[type='radio'] {
79 | /* OVERRIDE */
80 | border-radius: 100%;
81 | bottom: 3px;
82 | height: 15px;
83 | position: relative;
84 | vertical-align: middle;
85 | width: 15px;
86 | }
87 |
88 | /* TODO(estade): add more types here? */
89 | input[type='number'],
90 | input[type='password'],
91 | input[type='search'],
92 | input[type='text'],
93 | input[type='url'],
94 | input:not([type]),
95 | textarea {
96 | border: 1px solid #bfbfbf;
97 | border-radius: 2px;
98 | box-sizing: border-box;
99 | color: #444;
100 | font: inherit;
101 | margin: 0;
102 | /* Use min-height to accommodate addditional padding for touch as needed. */
103 | min-height: 2em;
104 | padding: 3px;
105 | /* For better alignment between adjacent buttons and inputs. */
106 | padding-bottom: 4px;
107 | }
108 |
109 | input[type='search'] {
110 | -webkit-appearance: textfield;
111 | /* NOTE: Keep a relatively high min-width for this so we don't obscure the end
112 | * of the default text in relatively spacious languages (i.e. German). */
113 | min-width: 160px;
114 | }
115 |
116 | /* Remove when https://bugs.webkit.org/show_bug.cgi?id=51499 is fixed.
117 | * TODO(dbeam): are there more types that would benefit from this? */
118 | input[type='search']::-webkit-textfield-decoration-container {
119 | direction: inherit;
120 | }
121 |
122 | /* Checked ********************************************************************/
123 |
124 | input[type='checkbox']:checked::before {
125 | -webkit-user-select: none;
126 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAcklEQVQY02NgwA/YoJgoEA/Es4DYgJBCJSBeD8SboRinBiYg7kZS2IosyQ/Eakh8LySFq4FYHFlxGRBvBOJYqMRqJMU+yApNkSRAeC0Sux3dfSCTetE0wKyXxOWhMKhTYIr9CAUXyJMzgLgBagBBgDPGAI2LGdNt0T1AAAAAAElFTkSuQmCC');
127 | background-size: 100% 100%;
128 | content: '';
129 | display: block;
130 | height: 100%;
131 | width: 100%;
132 | }
133 |
134 | input[type='radio']:checked::before {
135 | background-color: #666;
136 | border-radius: 100%;
137 | bottom: 3px;
138 | content: '';
139 | display: block;
140 | left: 3px;
141 | position: absolute;
142 | right: 3px;
143 | top: 3px;
144 | }
145 |
146 | /* Hover **********************************************************************/
147 |
148 | :enabled:hover:-webkit-any(
149 | select,
150 | input[type='checkbox'],
151 | input[type='radio'],
152 | :-webkit-any(
153 | button,
154 | input[type='button'],
155 | input[type='reset'],
156 | input[type='submit']):not(.custom-appearance):not(.link-button)) {
157 | background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
158 | border-color: rgba(0, 0, 0, 0.3);
159 | box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12),
160 | inset 0 1px 2px rgba(255, 255, 255, 0.95);
161 | color: black;
162 | }
163 |
164 | :enabled:hover:-webkit-any(select) {
165 | /* OVERRIDE */
166 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAYAAAAbQcSUAAAAaUlEQVQoz2P4//8/A7UwdkEGhiggTsODo4g2LBEImJmZvwE1/UfHIHGQPNGGAbHCggULFrKxsf1ENgjEB4mD5EnxJoaByAZB5Yk3DNlAPj6+L8gGkWUYzMC3b982IRtEtmFQjaxYxDAwAGi4TwMYKNLfAAAAAElFTkSuQmCC'),
167 | -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
168 | }
169 |
170 | /* Active *********************************************************************/
171 |
172 | :enabled:active:-webkit-any(
173 | select,
174 | input[type='checkbox'],
175 | input[type='radio'],
176 | :-webkit-any(
177 | button,
178 | input[type='button'],
179 | input[type='reset'],
180 | input[type='submit']):not(.custom-appearance):not(.link-button)) {
181 | background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
182 | box-shadow: none;
183 | text-shadow: none;
184 | }
185 |
186 | :enabled:active:-webkit-any(select) {
187 | /* OVERRIDE */
188 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAYAAAAbQcSUAAAAaUlEQVQoz2P4//8/A7UwdkEGhiggTsODo4g2LBEImJmZvwE1/UfHIHGQPNGGAbHCggULFrKxsf1ENgjEB4mD5EnxJoaByAZB5Yk3DNlAPj6+L8gGkWUYzMC3b982IRtEtmFQjaxYxDAwAGi4TwMYKNLfAAAAAElFTkSuQmCC'),
189 | -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
190 | }
191 |
192 | /* Disabled *******************************************************************/
193 |
194 | :disabled:-webkit-any(
195 | button,
196 | input[type='button'],
197 | input[type='reset'],
198 | input[type='submit']):not(.custom-appearance):not(.link-button),
199 | select:disabled {
200 | background-image: -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6);
201 | border-color: rgba(80, 80, 80, 0.2);
202 | box-shadow: 0 1px 0 rgba(80, 80, 80, 0.08),
203 | inset 0 1px 2px rgba(255, 255, 255, 0.75);
204 | color: #aaa;
205 | }
206 |
207 | select:disabled {
208 | /* OVERRIDE */
209 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAYAAAAbQcSUAAAAWklEQVQoz2P4//8/A7UwdkEGhiggTsODo4g2LBEIGhoa/uPCIHmiDQNihQULFizEZhBIHCRPijexGggzCCpPvGHoBiIbRJZhMAPfvn3bhGwQ2YZBNbJiEcPAAIgGZrTRc1ZLAAAAAElFTkSuQmCC'),
210 | -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6);
211 | }
212 |
213 | input:disabled:-webkit-any([type='checkbox'],
214 | [type='radio']) {
215 | opacity: .75;
216 | }
217 |
218 | input:disabled:-webkit-any([type='password'],
219 | [type='search'],
220 | [type='text'],
221 | [type='url'],
222 | :not([type])) {
223 | color: #999;
224 | }
225 |
226 | /* Focus **********************************************************************/
227 |
228 | :enabled:focus:-webkit-any(
229 | select,
230 | input[type='checkbox'],
231 | input[type='number'],
232 | input[type='password'],
233 | input[type='radio'],
234 | input[type='search'],
235 | input[type='text'],
236 | input[type='url'],
237 | input:not([type]),
238 | :-webkit-any(
239 | button,
240 | input[type='button'],
241 | input[type='reset'],
242 | input[type='submit']):not(.custom-appearance):not(.link-button)) {
243 | /* OVERRIDE */
244 | -webkit-transition: border-color 200ms;
245 | /* We use border color because it follows the border radius (unlike outline).
246 | * This is particularly noticeable on mac. */
247 | border-color: rgb(77, 144, 254);
248 | outline: none;
249 | }
250 |
251 | /* Link buttons ***************************************************************/
252 |
253 | .link-button {
254 | -webkit-box-shadow: none;
255 | background: transparent none;
256 | border: none;
257 | color: rgb(17, 85, 204);
258 | cursor: pointer;
259 | /* Input elements have -webkit-small-control which can override the body font.
260 | * Resolve this by using 'inherit'. */
261 | font: inherit;
262 | margin: 0;
263 | padding: 0 4px;
264 | }
265 |
266 | .link-button:hover {
267 | text-decoration: underline;
268 | }
269 |
270 | .link-button:active {
271 | color: rgb(5, 37, 119);
272 | text-decoration: underline;
273 | }
274 |
275 | .link-button[disabled] {
276 | color: #999;
277 | cursor: default;
278 | text-decoration: none;
279 | }
280 |
281 | /* Checkbox/radio helpers ******************************************************
282 | *
283 | * .checkbox and .radio classes wrap labels. Checkboxes and radios should use
284 | * these classes with the markup structure:
285 | *
286 | *