www/ouya-game.css

   1 html {
   2     height: 100%;
   3 }
   4 body {
   5     min-height: 100%;
   6     background-color: #333;
   7     background-image: url("bg_details.jpg");
   8     background-size: cover;
   9     background-attachment: fixed;
  10     color: #CCC;
  11     font-family: sans;
  12     margin: 0;
  13     padding: 0;
  14     padding-top: 10ex;
  15     padding-left: 5ex;
  16
  17     display: grid;
  18     grid-template-columns: 45vw 45vw;
  19     grid-gap: 1.5vw;
  20 }
  21
  22 header {
  23     position: fixed;
  24     top: 0;
  25     left: 0;
  26     display: block;
  27     width: 100%;
  28     padding-left: 3ex;
  29 }
  30 .ouyalogo {
  31     height: 3rem;
  32     width: auto;
  33     position: fixed;
  34     top: 2ex;
  35     right: 6vw;
  36 }
  37
  38 section.media {
  39     grid-column: 1;
  40     grid-row: 1;
  41 }
  42 section.text {
  43     grid-column: 2;
  44     grid-row: 1;
  45 }
  46
  47 section.buttons {
  48     grid-column: 1 / 3;
  49     grid-row: 2;
  50 }
  51 nav {
  52     grid-column: 1 / 3;
  53     grid-row: 3;
  54 }
  55
  56 .media img, .media video {
  57     max-width: 100%;
  58     flex-basis: 100%;
  59     flex-shrink: 0;
  60 }
  61
  62
  63 .media h2 {
  64     display: none;
  65 }
  66 .media .content {
  67     overflow-x: auto;
  68     display: flex;
  69     flex-direction: row;
  70     scroll-snap-type: x mandatory;
  71 }
  72 .media .content img, .media .content video {
  73     scroll-snap-align: start;
  74 }
  75
  76
  77 .text h1 {
  78     font-weight: normal;
  79     margin-top: 0;
  80 }
  81 .text dt {
  82     display: none;
  83 }
  84 .text dd {
  85     display: inline;
  86     margin: 0;
  87     font-weight: bold;
  88 }
  89 .text dd ~ dd:before {
  90     content: "|";
  91     font-weight: normal;
  92 }
  93 .text a {
  94     color: #CCC;
  95 }
  96
  97 .description {
  98     overflow-y: auto;
  99     max-height: 50vh;
 100 }
 101 .description .blocked {
 102     color: red;
 103 }
 104
 105 .buttons h2 {
 106     display: none;
 107 }
 108 .buttons {
 109     display: flex;
 110     justify-content: space-between;
 111 }
 112 .buttons a {
 113     font-size: 1.5rem;
 114     color: #CCC;
 115 }
 116 button.push-to-my-ouya {
 117     cursor: pointer;
 118     border: none;
 119     padding: 0;
 120     background-color: transparent;
 121 }
 122
 123 nav {
 124     text-align: center;
 125 }
 126 nav a {
 127     color: white;
 128     margin-left: 1ex;
 129     margin-right: 1ex;
 130 }
 131
 132
 133 /* rating stars */
 134 .average {
 135     visibility: hidden;
 136     font-size: 0;
 137 }
 138 .average:before {
 139     visibility: visible;
 140     font-size: 1rem;
 141     color: orange;
 142 }
 143 .average:after {
 144     visibility: visible;
 145     font-size: 1rem;
 146 }
 147 .average-0:after {
 148     content: "★★★★★";
 149 }
 150 .average-1:before {
 151     content: "★";
 152 }
 153 .average-1:after {
 154     content: "★★★★";
 155 }
 156 .average-2:before {
 157     content: "★★";
 158 }
 159 .average-2:after {
 160     content: "★★★";
 161 }
 162 .average-3:before {
 163     content: "★★★";
 164 }
 165 .average-3:after {
 166     content: "★★";
 167 }
 168 .average-4:before {
 169     content: "★★★★";
 170 }
 171 .average-4:after {
 172     content: "★";
 173 }
 174 .average-5:before {
 175     content: "★★★★★";
 176 }
 177
 178
 179 .popup {
 180     position: fixed;
 181     top: 1.5rem;
 182     right: 1.5rem;
 183     width: 20rem;
 184     padding: 1rem;
 185     background-color: black;
 186     border: 1px solid #AAA;
 187     border-radius: 0.5rem;
 188 }
 189 .popup a.close {
 190     color: white;
 191     font-size: 2rem;
 192     text-decoration: none;
 193     position: absolute;
 194     top: 0;
 195     right: 0.5rem;
 196 }
 197 .popup a.close:hover {
 198     color: #fc4422;
 199 }
 200 .popup strong {
 201     display: block;
 202     color: #fc4422;
 203     margin-bottom: 0.5rem;
 204 }