Source of “photos.css”.
411 lines, 8.8 KBytes.   Last modified 4:34 pm, 12th April 2016 PDT.
1 /* Emacs settings: -*- mode: Fundamental; tab-width: 4; -*- 2 3 //////////////////////////////////////////////////////////////////////////// 4 // // 5 // Andrew's Album Application: photos.css // 6 // // 7 // Copyright (c) 2004-2016, Andrew Birrell // 8 // // 9 //////////////////////////////////////////////////////////////////////////// 10 11 */ 12 13 14 /* ************ Global settings */ 15 16 A:link {color: #ffffff} 17 A:active {color: #ff0000} 18 A:visited {color: #ffffff} 19 .noTouch A:hover {color: #00ff00} 20 21 body { 22 margin: 0px; 23 padding: 0px; 24 color: #ffffff; 25 background-color: #808080; 26 font-family: arial,verdana,sans-serif; 27 font-size: 12px; 28 -webkit-text-size-adjust: 100%; 29 -moz-text-size-adjust: 100%; 30 -ms-text-size-adjust: 100%; 31 overflow: hidden; 32 } 33 .touch body { 34 background-color: #000000; 35 } 36 img { 37 border-width: 0px; 38 margin: 0px; 39 padding: 0px; 40 } 41 .linePad { /* force container's line-height to its height */ 42 display: inline-block; 43 height: 100%; 44 vertical-align: middle; 45 } 46 47 48 /* ************ Button bars */ 49 50 #topStuff, #bottomStuff { 51 position: absolute; 52 z-index: 3; 53 width: 100%; 54 white-space: nowrap; 55 overflow: hidden; 56 font-size: 1.25em; 57 line-height: 1.67em; 58 background-color: #606060; 59 } 60 #topStuff { /* top button bar */ 61 border-bottom: #cccccc 2px ridge; 62 top: 0px; 63 } 64 #bottomStuff { /* bottom button bar, title and commentary */ 65 border-top: #cccccc 2px ridge; 66 bottom: 0px; 67 } 68 .btnGroup, #title { 69 padding-left: 0.6em; 70 } 71 .btn, #title { 72 padding-right: 0.6em; 73 } 74 .btn, .mini, .miniTitle, .dlgLink { /* enabled button or internal link */ 75 cursor: pointer; 76 text-decoration: underline; 77 } 78 .noTouch .btn:hover, .noTouch .miniTitle:hover, .noTouch .dlgLink:hover { 79 color: #00ff00; 80 } 81 .disabled { /* disabled button */ 82 opacity: 0.5; 83 cursor: default; 84 text-decoration: none !important; 85 } 86 .disabled:hover { 87 color: inherit !important; 88 } 89 #parentBtns { /* buttons for going to parents */ 90 padding-right: 0px; 91 overflow: hidden; 92 visibility: hidden; 93 } 94 #navigationBtns { /* buttons for play, stop, etc. */ 95 float: right; 96 visibility: hidden; 97 } 98 .magGlass { /* magnifying glass image */ 99 vertical-align: middle; 100 padding-right: 3px; 101 } 102 #privBtns { /* buttons for edit, etc., BL */ 103 float: left; 104 visibility: hidden; 105 } 106 #title { /* title area */ 107 position: absolute; 108 left: 20%; 109 right: 20%; 110 z-index: 4; 111 color: #000000; 112 background-color: #bbbbbb; 113 text-align: center; 114 overflow: hidden; 115 cursor: pointer; 116 } 117 #commentary { /* F-stop, date, etc. */ 118 padding-top: 0.39em; 119 padding-right: 1em; 120 float: right; 121 width: 20%; /* so that the tool-tip appears in the entire area */ 122 height: 2.38em; /* ditto */ 123 text-align: right; 124 font-size: 0.6em; 125 line-height: 1em; 126 } 127 #topStuff, #bottomStuff, #title { 128 transition: 750ms; 129 } 130 .arrow { 131 position: absolute; 132 z-index: 3; 133 margin: 12px; 134 opacity: 0; 135 cursor: pointer; 136 } 137 .touch .arrow { 138 display: none; 139 } 140 .noTouch .arrow:hover { 141 opacity: 0.67; 142 } 143 #arrowT { 144 left: 50px; 145 right: 50px; 146 text-align: center; 147 } 148 #arrowL { 149 left: 0px; 150 } 151 #arrowR { 152 right: 0px; 153 } 154 .arrow img { 155 vertical-align: middle; 156 } 157 #arrowT img { 158 width: 100px; 159 height: 50px; 160 } 161 #arrowL img, #arrowR img { 162 width: 50px; 163 height: 100px; 164 } 165 166 167 /* ************ Main contents */ 168 169 /* The contents are three DIVs with class "contents", each acting as 170 a scrollable container. The three are managed by the swiper machinery 171 on touch screens; otherwise only one is used. Each contains a 172 DIV.mainPhoto, or a DIV.listing, or a DIV.preloadServer. */ 173 174 .contents { /* the three swiper screens */ 175 position: absolute; 176 z-index: 2; 177 top: 27px; /* semi-arbitrary default, avoids a glitch at start-up */ 178 bottom: 27px; 179 width: 100%; 180 overflow: auto; 181 -webkit-overflow-scrolling: touch; 182 display: none; 183 } 184 .btnGroup, .contents { 185 user-select: none; /* for shift clicks or rapid (double) clicks */ 186 -moz-user-select: none; 187 -ms-user-select: none; 188 -webkit-user-select: none; 189 } 190 #contents1 { /* initial swiper.cur */ 191 display: block; 192 } 193 .preloadServer { /* substitute for .mainPhoto when preloading */ 194 padding-top: 10em; 195 text-align: center; 196 } 197 .mainPhoto { /* main photograph div */ 198 height: 100%; 199 text-align: center; 200 white-space: nowrap; 201 cursor: pointer; 202 } 203 .mainPhoto img { /* the photo, scaled with fixed aspect ratio */ 204 vertical-align: middle; 205 visibility: hidden; /* fixed up by onload */ 206 } 207 .listing { /* list of sub-folders and photo thumbnails */ 208 margin-bottom: 12px; 209 text-align: center; 210 } 211 .listing img { /* thumbnails within .listing */ 212 vertical-align: middle; 213 } 214 .folderList { /* DIV containing sub-folder listings */ 215 margin-top: 12px; 216 margin-left: auto; 217 margin-right: auto; 218 text-align: left; 219 column-width: 300px; 220 -moz-column-width: 300px; 221 -webkit-column-width: 300px; 222 column-gap: 8px; 223 column-rule: 1px solid #ffffff; 224 -moz-column-rule: 1px solid #ffffff; 225 -webkit-column-rule: 1px solid #ffffff; 226 } 227 .folderList1 { /* force one-column */ 228 max-width: 300px; 229 } 230 .folderList2 { /* force two-column maximum */ 231 max-width: 612px; /* sized for Firefox; 608px works in Safari */ 232 } 233 .folderList3 { /* force three-column maximum */ 234 max-width: 924px; /* sized for Firefox; 916px works in Safari */ 235 } 236 .folderList4 { /* force four-column maximum */ 237 max-width: 1236px; /* sized for Firefox; 1224px works in Safari */ 238 } 239 .subFolder { /* a single sub-folder */ 240 white-space: nowrap; 241 } 242 .mini { /* sub-folder thumbnail container */ 243 display: inline-block; 244 width: 96px; 245 height: 48px; 246 margin: 4px; 247 text-align: center; 248 } 249 .mini img { /* sub-folder thumbnail image */ 250 max-width: 100%; 251 max-height: 100%; 252 } 253 .miniTitle { /* sub-folder title */ 254 display: inline-block; 255 vertical-align: middle; 256 width: 200px; /* column-width of .folderList minus width of .mini */ 257 font-size: 1.25em; 258 white-space: normal; 259 } 260 .photoList { /* container for photo thumbnail list */ 261 margin-left: auto; 262 margin-right: auto; 263 } 264 .listingPhoto { /* container for photo thumbnail plus padders */ 265 display: inline-block; 266 margin-top: 12px; 267 font-size: 0.75em; 268 line-height: 1.2em; 269 white-space: nowrap; 270 cursor: pointer; 271 } 272 /* A DIV.listingPhoto contains a DIV.dropTargetL, then an IMG, then a 273 DIV.dropTargetR. The script adds padding in the drop targets to adjust 274 for varying widths of IMG. The margins provided here, if non-zero, 275 provide separation between the visible drop target highlight and the 276 adjacent photos. DIV.listingPad elements are added at the end of a 277 DIV.photoList to left-align the last few photos. */ 278 .dropTargetL, .dropTargetR, .dropTargetHighlightL, .dropTargetHighlightR, 279 .listingPad { 280 display: inline-block; 281 height: 100%; 282 vertical-align: middle; 283 border: 0px solid transparent; 284 } 285 .dropTargetL, .dropTargetHighlightL, .listingPad { 286 border-right-width: 6px; 287 margin-right: 0px; 288 } 289 .dropTargetR, .dropTargetHighlightR, .listingPad { 290 border-left-width: 6px; 291 margin-left: 0px; 292 } 293 .dropTargetHighlightL, .dropTargetHighlightR { 294 background-color: #000000; 295 } 296 297 298 /* ************ Pop-up dialogs */ 299 300 div.dlog { 301 position: absolute; 302 top: 6em; 303 left: 0px; 304 right: 0px; 305 z-index: 5; 306 display: none; 307 max-width: 48em; 308 min-width: 25em; 309 border: #cccccc 2px ridge; 310 margin-left: auto; 311 margin-right: auto; 312 background-color: #666666; 313 text-align: left; 314 } 315 #reading { 316 min-width: 100px; 317 width: 100px; 318 padding: 6px; 319 text-align: center; 320 } 321 #scaling { 322 width: auto; 323 padding: 6px; 324 text-align: center; 325 } 326 .dlogHeader, .dragging { 327 background-color: #bbbbbb; 328 color: #000000; 329 padding-left: 0.67em; 330 line-height: 1.5em; 331 cursor: move; 332 } 333 .dragging { 334 background-color: #dddddd !important; 335 } 336 .dlogBody { 337 border-top: #cccccc 2px ridge; 338 padding: 0.67em; 339 } 340 input.close { 341 float: right; 342 margin-left: 1em; 343 } 344 #editForm { 345 width: 30em; 346 } 347 #editForm .dlogBody { 348 line-height: 2.5em; /* enough for input boxes on Firefox */ 349 } 350 #writing { 351 position: absolute; 352 display: none; 353 margin-top: 2.5em; 354 width: 100%; 355 text-align: center; 356 } 357 #editThumbnail { 358 position: absolute; 359 right: 0px; 360 max-width: 5em; 361 max-height: 7.5em; 362 padding-right: 0.67em; 363 } 364 .formPrompt { 365 display: inline-block; 366 width: 5em; 367 text-align: right; 368 } 369 .formInput { 370 display: inline-block; 371 white-space: nowrap; 372 } 373 form { 374 margin: 0px; 375 } 376 #readingProgress { 377 background-color: #bbbbbb; 378 margin-top: 0.75em; 379 border: #bbbbbb 1px inset; 380 text-align: left; 381 } 382 #readingWidget { 383 background-color: #00ff00; 384 position: relative; 385 border: #bbbbbb 1px outset; 386 font-size: 0.5em; 387 } 388 389 390 /* ************ Modified layout for small screens */ 391 392 @media screen and (max-width: 640px) { 393 #upTo, #prevAndNext { 394 display: none; 395 } 396 #title { 397 left: 0px; 398 right: 0px; 399 background-color: inherit; 400 color: inherit; 401 } 402 .folderList { 403 max-width: 300px; 404 } 405 #editForm { 406 width: 26em; 407 } 408 #editThumbnail { 409 max-width: 3.5em; 410 } 411 }
End of listing