Home | History | Annotate | Download | only in docs 
      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