Shamusworld >> Repos - ardour-manual/blob - source/css/screen.css

   1 @font-face {
   2     font-family: 'junge-regular';
   3     src: url('junge-regular-webfont.woff2') format('woff2'),
   4          url('junge-regular-webfont.woff') format('woff'),
   5          url('junge-regular-webfont.ttf')  format('truetype');
   6     font-weight: normal;
   7     font-style: normal;
   8 }
   9
  10 body {
  11   font-family: 'junge-regular';
  12   font-size: 16px;
  13   line-height: 2ex;
  14 }
  15
  16 .clear {
  17   clear:both;
  18 }
  19
  20 #tree {
  21   background-color: #212A30;
  22   line-height: 1.8ex;
  23   height: 100%;
  24   overflow: scroll;
  25   position: fixed;
  26   top: 0;
  27   bottom: 0;
  28   left: 0;
  29   width: 20em;
  30   padding: 1em 1em 2em 1.5em;
  31 }
  32
  33 #tree h1 {
  34   font-size: 1.75em;
  35   margin-bottom: 1em;
  36   font-weight: normal;
  37 }
  38
  39 #tree ul {
  40   padding-left: 1em;
  41   list-style-type: none;
  42 }
  43
  44 #tree a {
  45   display: inline !important;
  46   font-size: 0.88em;
  47   line-height: 2em;
  48   color: #E4E4E4;
  49   border-bottom: 1px solid transparent;
  50 }
  51
  52 #tree a:hover {
  53   text-decoration: none;
  54   border-bottom: 1px solid #aaa;
  55 }
  56
  57 #tree .active > a {
  58   display: inline;
  59   color: #FF8080;
  60 }
  61
  62 #content {
  63   padding: 1em 2em 2ex 21em;
  64   margin-left: 0;
  65   line-height: 2em;
  66 }
  67
  68 #content h1,
  69 #content h2,
  70 #content h3,
  71 #content h4 {
  72   font-weight: normal;
  73   padding-bottom: .3ex;
  74 }
  75
  76 #content h1 {
  77   font-size: 1.8em;
  78   margin: 0 0 2ex 0;
  79   padding-bottom: .8ex;
  80   border-bottom: 2px solid #ccc;
  81 }
  82
  83 #content h2 {
  84   font-size: 1.3em;
  85   margin: 2ex 0 1ex 0;
  86   border-bottom: 2px solid #ddd;
  87 }
  88
  89 #content h3 {
  90   font-size: 1.2em;
  91   margin: 1.5ex 0 1ex 0;
  92   border-bottom: 1px solid #eee;
  93 }
  94
  95 #content h4 {
  96   font-size: 1.1em;
  97   margin: 1.5ex 0 .5ex 0;
  98   border-bottom: 1px solid #eee;
  99 }
 100
 101 #content table {
 102   width:100%;
 103   margin: 1em 0;
 104   padding: 0;
 105   font-weight: normal;
 106   text-align: left;
 107 }
 108
 109 #content table tr {
 110   border-bottom: 2px solid #eeeeee;
 111 }
 112
 113 #content table tr:nth-child(odd){
 114   background-color: white;
 115 }
 116
 117 #content table tr:nth-child(even){
 118   background-color: #f5f5f5;
 119 }
 120
 121 #content table tr:hover {
 122   background-color: #F2F9FF;
 123 }
 124
 125 #content table td,
 126 #content table th {
 127   margin: 0;
 128   padding: .5em;
 129 }
 130
 131 #content table th {
 132   font-weight: bold;
 133 }
 134
 135 #content table th.sub1 {
 136   padding-left: 2em;
 137 }
 138
 139 #content table th.sub2 {
 140   padding-left: 4em;
 141 }
 142
 143 #content table thead {
 144   font-weight:bold;
 145 }
 146
 147 #content table.dl th {
 148   /* dl class (definition list) is for 2-columns tables that describe properties:
 149   maximmizes the width of the 2nd (description) column */
 150   vertical-align: top;
 151   min-width: 20%;
 152   white-space:nowrap
 153 }
 154
 155 #content table.dl td {
 156   vertical-align: top;
 157   width: 100%;
 158 }
 159
 160 #content ul,
 161 #content ol {
 162         overflow: hidden;
 163 }
 164
 165 #content figure {
 166   display: table;
 167 }
 168
 169 #content figcaption {
 170         display: table-caption;
 171         caption-side: bottom;
 172         font-style: italic;
 173   padding-top: 0.5em;
 174   padding-bottom: 1em;
 175 }
 176
 177 #content figcaption.center {
 178         text-align: center;
 179 }
 180
 181 #content figcaption.titleover {
 182   text-align: center;
 183         caption-side: top ;
 184 }
 185
 186 #content figure.right {
 187   margin: 0 0 1em 1em;
 188   float: right;
 189   clear: right;
 190 }
 191
 192 #content figure.left {
 193   margin: 0 1em 1em 0;
 194   float: left;
 195   clear: left;
 196 }
 197
 198 #content figure.center {
 199   margin: 1em auto 1em auto;
 200   clear: both;
 201 }
 202
 203 #content img.mini {
 204   width: 200px;
 205 }
 206
 207 #content img.mini:hover {
 208   width: 100%;
 209 }
 210
 211 kbd {
 212   text-shadow: 0 0 2px rgb(255, 255, 255);
 213   box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
 214 }
 215
 216
 217 kbd.cmd {
 218   text-shadow: none;
 219   box-shadow: none;
 220 }
 221
 222 #content p.center {
 223         text-align:center;
 224 }
 225
 226 @media (max-width: 800px) {
 227   #tree {
 228     position: relative;
 229     height: 250px;
 230     width: 100%;
 231     margin-top: 20px;
 232   }
 233   #content {
 234     padding-left: 20px;
 235     margin-top: 0px;
 236   }
 237 }
 238
 239 /* for the TOC */
 240 #content p.chapter,
 241 #content p.subchapter,
 242 #content p.section,
 243 #content p.subsection {
 244   line-height:1em;
 245 }
 246 #content p.chapter { padding-top: 1em; padding-left: 1em; padding-bottom:1em; }
 247 #content p.subchapter { padding-left: 4em; }
 248 #content p.section { padding-left: 6em; }
 249 #content p.subsection { padding-left: 8em; }
 250
 251 /* for images sliced in divs, as in http://manual.ardour.org/ardours-interface/about/ */
 252 .hoverimg:hover{ z-index:100; box-shadow: 0 0 .2em .2em lightgreen; }