apps/wiki/static--wiki--editor--node_modules--grunt-contrib-less--node_modules--less--test/css/media.css

   1 @media print {
   2   .class {
   3     color: blue;
   4   }
   5   .class .sub {
   6     width: 42;
   7   }
   8   .top,
   9   header > h1 {
  10     color: #444444;
  11   }
  12 }
  13 @media screen {
  14   body {
  15     max-width: 480;
  16   }
  17 }
  18 @media all and (device-aspect-ratio: 16 / 9) {
  19   body {
  20     max-width: 800px;
  21   }
  22 }
  23 @media all and (orientation: portrait) {
  24   aside {
  25     float: none;
  26   }
  27 }
  28 @media handheld and (min-width: 42), screen and (min-width: 20em) {
  29   body {
  30     max-width: 480px;
  31   }
  32 }
  33 @media print {
  34   body {
  35     padding: 20px;
  36   }
  37   body header {
  38     background-color: red;
  39   }
  40 }
  41 @media print and (orientation: landscape) {
  42   body {
  43     margin-left: 20px;
  44   }
  45 }
  46 @media screen {
  47   .sidebar {
  48     width: 300px;
  49   }
  50 }
  51 @media screen and (orientation: landscape) {
  52   .sidebar {
  53     width: 500px;
  54   }
  55 }
  56 @media a and b {
  57   .first .second .third {
  58     width: 300px;
  59   }
  60   .first .second .fourth {
  61     width: 3;
  62   }
  63 }
  64 @media a and b and c {
  65   .first .second .third {
  66     width: 500px;
  67   }
  68 }
  69 @media a, b and c {
  70   body {
  71     width: 95%;
  72   }
  73 }
  74 @media a and x, b and c and x, a and y, b and c and y {
  75   body {
  76     width: 100%;
  77   }
  78 }
  79 .a {
  80   background: black;
  81 }
  82 @media handheld {
  83   .a {
  84     background: white;
  85   }
  86 }
  87 @media handheld and (max-width: 100px) {
  88   .a {
  89     background: red;
  90   }
  91 }
  92 .b {
  93   background: black;
  94 }
  95 @media handheld {
  96   .b {
  97     background: white;
  98   }
  99 }
 100 @media handheld and (max-width: 200px) {
 101   .b {
 102     background: red;
 103   }
 104 }
 105 @media only screen and (max-width: 200px) {
 106   body {
 107     width: 480px;
 108   }
 109 }
 110 @media print {
 111   @page :left {
 112     margin: 0.5cm;
 113   }
 114   @page :right {
 115     margin: 0.5cm;
 116   }
 117   @page Test:first {
 118     margin: 1cm;
 119   }
 120   @page :first {
 121     size: 8.5in 11in;
 122
 123     @top-left {
 124       margin: 1cm;
 125     }
 126     @top-left-corner {
 127       margin: 1cm;
 128     }
 129     @top-center {
 130       margin: 1cm;
 131     }
 132     @top-right {
 133       margin: 1cm;
 134     }
 135     @top-right-corner {
 136       margin: 1cm;
 137     }
 138     @bottom-left {
 139       margin: 1cm;
 140     }
 141     @bottom-left-corner {
 142       margin: 1cm;
 143     }
 144     @bottom-center {
 145       margin: 1cm;
 146     }
 147     @bottom-right {
 148       margin: 1cm;
 149     }
 150     @bottom-right-corner {
 151       margin: 1cm;
 152     }
 153     @left-top {
 154       margin: 1cm;
 155     }
 156     @left-middle {
 157       margin: 1cm;
 158     }
 159     @left-bottom {
 160       margin: 1cm;
 161     }
 162     @right-top {
 163       margin: 1cm;
 164     }
 165     @right-middle {
 166       content: "Page " counter(page);
 167     }
 168     @right-bottom {
 169       margin: 1cm;
 170     }
 171   }
 172 }
 173 @media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-resolution: 2dppx), (min-resolution: 128dpcm) {
 174   .b {
 175     background: red;
 176   }
 177 }
 178 body {
 179   background: red;
 180 }
 181 @media (max-width: 500px) {
 182   body {
 183     background: green;
 184   }
 185 }
 186 @media (max-width: 1000px) {
 187   body {
 188     background: red;
 189     background: blue;
 190   }
 191 }
 192 @media (max-width: 1000px) and (max-width: 500px) {
 193   body {
 194     background: green;
 195   }
 196 }
 197 @media (max-width: 1200px) {
 198   /* a comment */
 199 }
 200 @media (max-width: 1200px) and (max-width: 900px) {
 201   body {
 202     font-size: 11px;
 203   }
 204 }
 205 @media (min-width: 480px) {
 206   .nav-justified > li {
 207     display: table-cell;
 208   }
 209 }
 210 @media (min-width: 768px) and (min-width: 480px) {
 211   .menu > li {
 212     display: table-cell;
 213   }
 214 }
 215 @media all and tv {
 216   .all-and-tv-variables {
 217     var: all-and-tv;
 218   }
 219 }