1 /* 2 * Copyright 2012 The Android Open Source Project 3 * 4 * Licensed under the Apache License, Version 2.0 (the "License"); 5 * you may not use this file except in compliance with the License. 6 * You may obtain a copy of the License at 7 * 8 * http://www.apache.org/licenses/LICENSE-2.0 9 * 10 * Unless required by applicable law or agreed to in writing, software 11 * distributed under the License is distributed on an "AS IS" BASIS, 12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 * See the License for the specific language governing permissions and 14 * limitations under the License. 15 */ 16 17 /* Page stylesheet */ 18 19 html { 20 font-family: Roboto, sans-serif; 21 color: #333; 22 -webkit-font-smoothing: antialiased; 23 } 24 25 pre { 26 font-family: Inconsolata, monospace; 27 border: 0; 28 padding: 0; 29 } 30 31 code { 32 font-family: Inconsolata, monospace; 33 color: #060; 34 } 35 36 #page-content { 37 margin: 48px 64px 48px 320px; 38 } 39 40 a { 41 color: #33b5e5; 42 text-decoration: none; 43 border-bottom: 1px solid #33b5e5; 44 } 45 46 a:hover { 47 border-bottom: 2px solid #33b5e5; 48 } 49 50 a:visited { 51 color: #09c; 52 } 53 54 a:active, a:focus { 55 color: #fff; 56 background-color: #09c; 57 border-radius: 2px; 58 padding: 2px 0; 59 border: 0; 60 } 61 62 a:active *, a:focus * { 63 color: #fff; 64 } 65 66 nav { 67 position: fixed; 68 left: 0; 69 top: 0; 70 box-sizing: border-box; 71 width: 256px; 72 bottom: 0; 73 margin: 32px 0; 74 padding: 16px 0 16px 32px; 75 overflow-y: scroll; 76 font-size: 14px; 77 line-height: 16px; 78 border-top: 2px solid #eee; 79 border-bottom: 2px solid #eee; 80 border-right: 2px solid #eee; 81 } 82 83 nav span { 84 cursor: pointer; 85 display: block; 86 padding-left: 16px; 87 padding-top: 4px; 88 padding-bottom: 4px; 89 } 90 91 nav span:hover { 92 color: #09c; 93 } 94 95 nav .selected > span { 96 background-color: #eee; 97 border-right: 2px solid #333; 98 } 99 100 nav > .item > span { 101 font-weight: 600; 102 } 103 104 nav .children { 105 margin-left: 16px; 106 } 107 108 h2, h3, h4.includetoc { 109 color: #000; 110 cursor: pointer; 111 position: relative; 112 } 113 114 h2:hover:before, h3:hover:before, h4.includetoc:hover:before { 115 content: ''; 116 opacity: 0.3; 117 position: absolute; 118 left: -32px; 119 bottom: 0; 120 width: 24px; 121 height: 24px; 122 /* "Link" symbol by David Waschbsch, from The Noun Project (thenounproject.com) */ 123 background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjcwLjg2NnB4IiBoZWlnaHQ9IjcwLjg2NnB4IiB2aWV3Qm94PSItNTkuNDE4IDE0LjU2NyA3MC44NjYgNzAuODY2IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IC01OS40MTggMTQuNTY3IDcwLjg2NiA3MC44NjYiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0tMjguNTUyLDYxLjQ4NWMtMC4wMTcsMC4wMTYtMC4wMjksMC4wMzUtMC4wNDYsMC4wNTNsLTUuODI1LDUuNzI1Yy0wLjk1MiwwLjkzOC0yLjIxNCwxLjQ0NS0zLjU0OSwxLjQzNCAgICBzLTIuNTg2LTAuNTQzLTMuNTIyLTEuNDk0Yy0xLjkzMS0xLjk2Ny0xLjkwMy01LjEzOSwwLjA2My03LjA3Mmw1LjgyNi01LjcyNWMwLjAxNy0wLjAxNywwLjAzOC0wLjAyOCwwLjA1Ny0wLjA0Nmw2LjkyNS02LjgwNiAgICBjLTEuMDc2LTAuMzYyLTIuMjExLTAuNTcxLTMuMzgyLTAuNTgyYy0yLjkzOC0wLjAyNi01LjcwOSwxLjA5NS03LjgwNCwzLjE1MmwtNS44MjcsNS43MjcgICAgYy00LjMyNiw0LjI0OC00LjM4OCwxMS4yMjctMC4xMzcsMTUuNTU1YzIuMDU4LDIuMDk2LDQuODEzLDMuMjY2LDcuNzUsMy4yOTFzNS43MTEtMS4wOTQsNy44MDYtMy4xNTJsNS44MjUtNS43MjcgICAgYzIuMDk2LTIuMDU5LDMuMjY1LTQuODEzLDMuMjkyLTcuNzQ4YzAuMDA5LTEuMTcyLTAuMTgxLTIuMzA3LTAuNTIzLTMuMzkzTC0yOC41NTIsNjEuNDg1eiIvPgoJCTxwYXRoIGQ9Ik0tMi4yMDIsMjguNTk0Yy0yLjA2Mi0yLjA5Ni00LjgxMy0zLjI2NC03Ljc1LTMuMjljLTIuOTQtMC4wMjYtNS43MSwxLjA5NC03LjgwNywzLjE1NGwtNS44MjUsNS43MjMgICAgYy0zLjA0NCwyLjk5MS0zLjk2Niw3LjMyNy0yLjc3MSwxMS4xNDVsNi45MjItNi44MDFjMC4wMi0wLjAyMSwwLjAzMy0wLjA0NSwwLjA1My0wLjA2NGw1LjgyNi01LjcyNCAgICBjMC45NTQtMC45MzYsMi4yMTItMS40NDUsMy41NDktMS40MzNjMS4zMzUsMC4wMTEsMi41ODUsMC41NDMsMy41MjIsMS40OTVjMC45MzYsMC45NTIsMS40NDUsMi4yMTIsMS40MzQsMy41NDggICAgYy0wLjAxMywxLjMzNS0wLjU0NCwyLjU4Ny0xLjQ5NSwzLjUyM2wtNS44MjYsNS43MjNjLTAuMDE2LDAuMDE2LTAuMDM0LDAuMDI1LTAuMDUsMC4wNDFsLTYuOTMxLDYuODEgICAgYzEuMDc3LDAuMzYxLDIuMjEsMC41NzEsMy4zOCwwLjU4MmMyLjkzOCwwLjAyNCw1LjcxLTEuMDk1LDcuODA1LTMuMTU0bDUuODI3LTUuNzIzYzIuMDk1LTIuMDU5LDMuMjY0LTQuODEyLDMuMjktNy43NDkgICAgQzAuOTc2LDMzLjQ2MS0wLjE0NCwzMC42ODgtMi4yMDIsMjguNTk0eiIvPgoJPC9nPgoJPHBhdGggZD0iTS0xMy40MSwzOS42MDRjMS4xODMsMS4yMDMsMS4wMDEsMy4yOTktMC40MDUsNC42OEwtMjkuODgsNjAuMDY5Yy0xLjQwNSwxLjM4MS0zLjUwNSwxLjUyNy00LjY4OCwwLjMyNGwwLDAgICBjLTEuMTgtMS4yMDMtMC45OTgtMy4yOTcsMC40MDgtNC42OGwxNi4wNjUtMTUuNzg0Qy0xNi42ODgsMzguNTQ4LTE0LjU5MiwzOC40MDItMTMuNDEsMzkuNjA0TC0xMy40MSwzOS42MDR6Ii8+CjwvZz4KPC9zdmc+); 124 background-size: 24px 24px; 125 } 126 127 strong { 128 font-weight: 600; 129 } 130 131 em { 132 font-style: italic; 133 } 134 135 h1 { 136 font-size: 48px; 137 line-height: 48px; 138 font-weight: 100; 139 margin-bottom: 6px; 140 } 141 142 h2 { 143 font-weight: 600; 144 font-size: 24px; 145 line-height: 24px; 146 margin-top: 64px; 147 margin-bottom: 12px; 148 border-top: 2px solid #eee; 149 padding-top: 48px; 150 } 151 152 h3 { 153 font-size: 24px; 154 line-height: 24px; 155 font-weight: 300; 156 margin-bottom: 12px; 157 padding-top: 48px; 158 margin-top: -16px; 159 } 160 161 p, h4, ol, ul, dl { 162 font-size: 16px; 163 line-height: 24px; 164 } 165 166 p, ol, ul, dl { 167 font-weight: 400; 168 margin-bottom: 16px; 169 } 170 171 ol ol, ul ul { 172 margin-bottom: 0; 173 } 174 175 .note { 176 border-left: 4px solid #09c; 177 padding-left: 16px; 178 } 179 180 .note + .note { 181 margin-top: -16px; 182 } 183 184 .dim { 185 opacity: 0.33; 186 } 187 188 ol li { 189 list-style-type: decimal; 190 list-style-position: outside; 191 margin-left: 32px; 192 } 193 194 ul li { 195 list-style: square; 196 list-style-position: outside; 197 margin-left: 32px; 198 } 199 200 dl { 201 margin-left: 16px; 202 } 203 204 dl dt { 205 float: left; 206 display: inline-block; 207 vertical-align: top; 208 width: 120px; 209 clear: both; 210 } 211 212 dl dd { 213 margin-left: 120px; 214 margin-bottom: 8px; 215 } 216 217 dl dt code { 218 color: inherit; 219 } 220 221 h4 { 222 font-weight: 600; 223 margin-top: 24px; 224 margin-bottom: 0; 225 color: #000; 226 } 227 228 pre { 229 background-color: #fcfcfc; 230 border-radius: 4px; 231 box-shadow: inset 0 2px 8px rgba(0,0,0,0.1); 232 border: 1px solid #ddd; 233 padding: 24px; 234 margin-bottom: 16px; 235 } 236 237 .deprecated, 238 .deprecated h4, 239 .deprecated pre, 240 .deprecated code { 241 color: #a77 !important; 242 } 243 244 .deprecated h4 { 245 } 246 247 .deprecated h4:after { 248 border-radius: 2px; 249 text-decoration: none; 250 background-color: #a77; 251 padding: 4px 6px; 252 margin-left: 10px; 253 color: #fff; 254 font-size: 12px; 255 content: 'DEPRECATED'; 256 } 257 258 /* print */ 259 260 @media print { 261 nav { 262 display: none; 263 } 264 265 #page-content { 266 margin-left: 64px; 267 } 268 } 269