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   width: 224px;
     71   height: 100%;
     72   padding: 48px 0 48px 32px;
     73   font-size: 14px;
     74   line-height: 16px;
     75 }
     76 
     77 nav span {
     78   cursor: pointer;
     79   display: block;
     80   padding-left: 16px;
     81   padding-top: 4px;
     82   padding-bottom: 4px;
     83   border-right: 2px solid #eee;
     84 }
     85 
     86 nav span:hover {
     87   color: #09c;
     88 }
     89 
     90 nav .selected > span {
     91   background-color: rgba(51,181,229,0.05);
     92   border-right: 2px solid #33b5e5;
     93 }
     94 
     95 nav > .item > span {
     96   font-weight: 600;
     97 }
     98 
     99 nav .children {
    100   margin-left: 16px;
    101 }
    102 
    103 h2, h3, h4.includetoc {
    104   color: #000;
    105   cursor: pointer;
    106   position: relative;
    107 }
    108 
    109 h2:hover:before, h3:hover:before, h4.includetoc:hover:before {
    110   content: '';
    111   opacity: 0.3;
    112   position: absolute;
    113   left: -32px;
    114   bottom: 0;
    115   width: 24px;
    116   height: 24px;
    117   /* "Link" symbol by David Waschbsch, from The Noun Project (thenounproject.com) */
    118   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjcwLjg2NnB4IiBoZWlnaHQ9IjcwLjg2NnB4IiB2aWV3Qm94PSItNTkuNDE4IDE0LjU2NyA3MC44NjYgNzAuODY2IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IC01OS40MTggMTQuNTY3IDcwLjg2NiA3MC44NjYiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0tMjguNTUyLDYxLjQ4NWMtMC4wMTcsMC4wMTYtMC4wMjksMC4wMzUtMC4wNDYsMC4wNTNsLTUuODI1LDUuNzI1Yy0wLjk1MiwwLjkzOC0yLjIxNCwxLjQ0NS0zLjU0OSwxLjQzNCAgICBzLTIuNTg2LTAuNTQzLTMuNTIyLTEuNDk0Yy0xLjkzMS0xLjk2Ny0xLjkwMy01LjEzOSwwLjA2My03LjA3Mmw1LjgyNi01LjcyNWMwLjAxNy0wLjAxNywwLjAzOC0wLjAyOCwwLjA1Ny0wLjA0Nmw2LjkyNS02LjgwNiAgICBjLTEuMDc2LTAuMzYyLTIuMjExLTAuNTcxLTMuMzgyLTAuNTgyYy0yLjkzOC0wLjAyNi01LjcwOSwxLjA5NS03LjgwNCwzLjE1MmwtNS44MjcsNS43MjcgICAgYy00LjMyNiw0LjI0OC00LjM4OCwxMS4yMjctMC4xMzcsMTUuNTU1YzIuMDU4LDIuMDk2LDQuODEzLDMuMjY2LDcuNzUsMy4yOTFzNS43MTEtMS4wOTQsNy44MDYtMy4xNTJsNS44MjUtNS43MjcgICAgYzIuMDk2LTIuMDU5LDMuMjY1LTQuODEzLDMuMjkyLTcuNzQ4YzAuMDA5LTEuMTcyLTAuMTgxLTIuMzA3LTAuNTIzLTMuMzkzTC0yOC41NTIsNjEuNDg1eiIvPgoJCTxwYXRoIGQ9Ik0tMi4yMDIsMjguNTk0Yy0yLjA2Mi0yLjA5Ni00LjgxMy0zLjI2NC03Ljc1LTMuMjljLTIuOTQtMC4wMjYtNS43MSwxLjA5NC03LjgwNywzLjE1NGwtNS44MjUsNS43MjMgICAgYy0zLjA0NCwyLjk5MS0zLjk2Niw3LjMyNy0yLjc3MSwxMS4xNDVsNi45MjItNi44MDFjMC4wMi0wLjAyMSwwLjAzMy0wLjA0NSwwLjA1My0wLjA2NGw1LjgyNi01LjcyNCAgICBjMC45NTQtMC45MzYsMi4yMTItMS40NDUsMy41NDktMS40MzNjMS4zMzUsMC4wMTEsMi41ODUsMC41NDMsMy41MjIsMS40OTVjMC45MzYsMC45NTIsMS40NDUsMi4yMTIsMS40MzQsMy41NDggICAgYy0wLjAxMywxLjMzNS0wLjU0NCwyLjU4Ny0xLjQ5NSwzLjUyM2wtNS44MjYsNS43MjNjLTAuMDE2LDAuMDE2LTAuMDM0LDAuMDI1LTAuMDUsMC4wNDFsLTYuOTMxLDYuODEgICAgYzEuMDc3LDAuMzYxLDIuMjEsMC41NzEsMy4zOCwwLjU4MmMyLjkzOCwwLjAyNCw1LjcxLTEuMDk1LDcuODA1LTMuMTU0bDUuODI3LTUuNzIzYzIuMDk1LTIuMDU5LDMuMjY0LTQuODEyLDMuMjktNy43NDkgICAgQzAuOTc2LDMzLjQ2MS0wLjE0NCwzMC42ODgtMi4yMDIsMjguNTk0eiIvPgoJPC9nPgoJPHBhdGggZD0iTS0xMy40MSwzOS42MDRjMS4xODMsMS4yMDMsMS4wMDEsMy4yOTktMC40MDUsNC42OEwtMjkuODgsNjAuMDY5Yy0xLjQwNSwxLjM4MS0zLjUwNSwxLjUyNy00LjY4OCwwLjMyNGwwLDAgICBjLTEuMTgtMS4yMDMtMC45OTgtMy4yOTcsMC40MDgtNC42OGwxNi4wNjUtMTUuNzg0Qy0xNi42ODgsMzguNTQ4LTE0LjU5MiwzOC40MDItMTMuNDEsMzkuNjA0TC0xMy40MSwzOS42MDR6Ii8+CjwvZz4KPC9zdmc+);
    119   background-size: 24px 24px;
    120 }
    121 
    122 strong {
    123   font-weight: 600;
    124 }
    125 
    126 em {
    127   font-style: italic;
    128 }
    129 
    130 h1 {
    131   font-size: 48px;
    132   line-height: 48px;
    133   font-weight: 100;
    134   margin-bottom: 6px;
    135 }
    136 
    137 h2 {
    138   font-weight: 600;
    139   font-size: 24px;
    140   line-height: 24px;
    141   margin-top: 64px;
    142   margin-bottom: 12px;
    143   border-top: 2px solid #eee;
    144   padding-top: 48px;
    145 }
    146 
    147 h3 {
    148   font-size: 24px;
    149   line-height: 24px;
    150   font-weight: 300;
    151   margin-bottom: 12px;
    152   padding-top: 48px;
    153   margin-top: -16px;
    154 }
    155 
    156 p, h4, ol, ul, dl {
    157   font-size: 16px;
    158   line-height: 24px;
    159 }
    160 
    161 p, ol, ul, dl {
    162   font-weight: 400;
    163   margin-bottom: 16px;
    164 }
    165 
    166 ol ol, ul ul {
    167   margin-bottom: 0;
    168 }
    169 
    170 .note {
    171   border-left: 4px solid #09c;
    172   padding-left: 16px;
    173 }
    174 
    175 .note + .note {
    176   margin-top: -16px;
    177 }
    178 
    179 .dim {
    180   opacity: 0.33;
    181 }
    182 
    183 ol li {
    184   list-style-type: decimal;
    185   list-style-position: outside;
    186   margin-left: 32px;
    187 }
    188 
    189 ul li {
    190   list-style: square;
    191   list-style-position: outside;
    192   margin-left: 32px;
    193 }
    194 
    195 dl {
    196   margin-left: 16px;
    197 }
    198 
    199 dl dt {
    200   float: left;
    201   display: inline-block;
    202   vertical-align: top;
    203   width: 120px;
    204   clear: both;
    205 }
    206 
    207 dl dd {
    208   margin-left: 120px;
    209   margin-bottom: 8px;
    210 }
    211 
    212 dl dt code {
    213   color: inherit;
    214 }
    215 
    216 h4 {
    217   font-weight: 600;
    218   margin-top: 24px;
    219   margin-bottom: 0;
    220   color: #000;
    221 }
    222 
    223 pre {
    224   background-color: #fcfcfc;
    225   border-radius: 4px;
    226   box-shadow: inset 0 2px 8px rgba(0,0,0,0.1);
    227   border: 1px solid #ddd;
    228   padding: 24px;
    229   margin-bottom: 16px;
    230 }
    231 
    232 /* print */
    233 
    234 @media print {
    235   nav {
    236     display: none;
    237   }
    238 
    239   #page-content {
    240     margin-left: 64px;
    241   }
    242 }
    243