git.maemo.org Git - buliscores/blob - www/floating_cards/style.css

   1 body {
   2         background-color: #111;
   3         color: #888;
   4         margin: 0;
   5         font-family: sans-serif;
   6 }
   7
   8 a {
   9         color: #ccc;
  10         text-decoration: none;
  11 }
  12
  13 a:hover {
  14         color: #fff;
  15 }
  16
  17 img {
  18         border: 0;
  19         padding: 0;
  20         margin: 0;
  21 }
  22
  23 /*********************************************************/
  24 /* back and forward picture selection tabs on page edges */
  25
  26 div.select {
  27         padding: 0 0 0 0;
  28         margin: 0 0 0 0;
  29         background-color: #444;
  30         background-repeat: no-repeat;
  31         background-position: center;
  32         position: fixed;
  33         width: 0px;
  34         height: 33%;
  35         top: 33%;
  36 }
  37
  38 div.select:hover {
  39         width: auto;
  40         max-width: 80%;
  41 }
  42
  43 div.select.back {
  44         left: 0px;
  45         background-image: url('back.png');
  46         background-position: left;
  47         padding-left: 20px;
  48 }
  49 div.select.forward {
  50         right: 0px;
  51         background-image: url('forward.png');
  52         background-position: right;
  53         padding-right: 20px;
  54 }
  55
  56
  57 div.select ul {
  58         padding: 0 0 0 0;
  59         margin: 0 0 0 0;
  60         display:none;
  61         height: 100%;
  62 }
  63
  64 div.select.back ul {
  65         float: left;
  66 }
  67 div.select.forward ul {
  68         float: right;
  69 }
  70
  71 div.select:hover ul {
  72         display: inline-block;
  73 }
  74
  75
  76 div.select ul li {
  77         margin-top: 16px;
  78         margin-bottom: 10000px;         /* hack; prevent other than the first line of cards from showing */
  79         margin-left: 2px;
  80         margin-right: 2px;
  81         vertical-align: text-top;
  82         border-bottom-color: #666;
  83 }
  84
  85 div.select ul li a {
  86         border-color: #666;
  87 }
  88
  89 div.select ul li a:hover {
  90         border-color: #fff;
  91 }
  92
  93
  94 div.select.back ul li {
  95         float: right;
  96         margin-right: 16px;
  97 }
  98 div.select.forward ul li {
  99         float: left;
 100         margin-left: 16px;
 101 }
 102
 103
 104 /*********************************************************/
 105 /* header and navigation buttons at top of page          */
 106
 107
 108 h1,h2 {
 109         padding: 0 0 0 0;
 110         margin: 0 125px 0 125px;        /* clear the (fixed-size) div.nav buttons in the corners */
 111         font-size: 80%;
 112         text-align: center;
 113 }
 114
 115 h1 {
 116         padding-top: 0.3em;
 117         padding-bottom: 0.3em;
 118 }
 119
 120 h2 {
 121         min-height: 1em;                /* 1em here tries to approximate the font height to prevent the picture from moving up when the description is not present */
 122         font-weight: normal;
 123 }
 124
 125 div.nav {
 126         position: fixed;
 127         top: 0;
 128 }
 129
 130 div.nav.left {
 131         left: 0;
 132 }
 133
 134 div.nav.right {
 135         right: 0;
 136 }
 137
 138 div.nav a {
 139         padding-left: 20px;
 140         padding-right: 20px;
 141         background-color: #444;
 142 }
 143
 144
 145 div.nav a:hover {
 146         background-color: #666;
 147 }
 148
 149
 150 div.nav.right a {
 151         margin-left: 5px;
 152         float: right;
 153 }
 154
 155 div.nav.left a {
 156         margin-right: 5px;
 157         float: left;
 158 }
 159
 160
 161 div.nav img {
 162         margin-left: 5px;
 163         margin-right: 5px;
 164         margin-top: 3px;
 165         margin-bottom: 3px;
 166         vertical-align: middle;
 167 }
 168
 169 /*********************************************************/
 170 /* cards with descriptions                               */
 171 /* used by: collection, collection list, back/forward    */
 172
 173 li {
 174         margin: 24px;
 175         float: left;
 176         list-style: none;
 177         overflow: hidden;
 178
 179         /* when not hovered, bottom border of the li is shown */
 180         border-bottom-style: solid;
 181         border-bottom-width: 1px;
 182         border-bottom-color: #444;
 183
 184 }
 185
 186 li:hover {
 187         /* allow the overflow to overlap other cards */
 188         position: relative;
 189         overflow: visible;
 190 }
 191
 192 li a {
 193
 194         background-color: #000;
 195
 196         display: block;
 197         padding: 9px;
 198
 199         text-align: center;
 200         font-size: 10px;
 201         margin: 0px;
 202
 203         border-style: solid;
 204         border-width: 1px;
 205         border-color: #444;
 206
 207
 208 }
 209
 210 li a:hover {
 211         border-color: #fff;
 212 }
 213
 214
 215 /*********************************************************/
 216 /* image page                                            */
 217
 218 div.image {
 219         padding-top: 0.5em;
 220         margin: 0 auto;
 221         width: 95%;
 222         text-align: center;
 223 }
 224
 225
 226 div.image img {
 227         padding: 20px;
 228         background-color: #000;
 229         border: 1px solid #444;
 230 }
 231
 232
 233 /*********************************************************/
 234 /* very dark and non-disturbing footer                   */
 235
 236 p.footer {
 237         clear: both;
 238         border-top: 1px solid #333;
 239         font-size: 70%;
 240         text-align: right;
 241         color: #333;
 242 }
 243
 244 p.footer a {
 245         color: #444;
 246 }
 247
 248 p.footer a:hover {
 249         color: #666;
 250 }