Mercurial > hg > mgallery
annotate basic.css @ 3:c85f630a4198
Improve bread crumb navigation by making the current album a link as well.
| author | Matti Hamalainen <ccr@tnsp.org> |
|---|---|
| date | Fri, 15 May 2015 06:53:30 +0300 |
| parents | ac688606ec4b |
| children | 8c1599a30120 |
| rev | line source |
|---|---|
| 0 | 1 body { |
| 2 color: #ded; | |
| 3 background: #121; | |
| 4 font-family: Verdana, Arial, helvetica, sans-serif; | |
| 5 font-size: 10pt; | |
| 6 } | |
| 7 | |
| 8 a { | |
| 9 color: white; | |
| 10 } | |
| 11 | |
| 12 a:hover { | |
| 13 text-decoration: none; | |
| 14 color: yellow; | |
| 15 text-shadow: 1px 1px 2px #000; | |
| 16 } | |
| 17 | |
| 18 | |
| 19 #contents { | |
| 20 background: #565; | |
| 21 border-radius: 0.5em; | |
| 22 padding: 0.5em; | |
| 23 } | |
| 24 | |
| 25 #contents h1 { | |
| 26 font-size: 24pt; | |
| 27 font-family: helvetica; | |
| 28 margin-top: 0; | |
| 29 margin-bottom: 0.1em; | |
| 30 background: #343; | |
| 31 padding: 5pt; | |
| 32 color: white; | |
| 33 text-shadow: 2px 2px 2px #000; | |
| 34 | |
| 35 border-radius: 8px; | |
| 36 } | |
| 37 | |
| 38 h2,h3 { | |
| 39 padding: 5pt; | |
| 40 border-radius: 8px; | |
| 41 background: #343; | |
| 42 color: white; | |
| 43 text-shadow: 2px 2px 2px #000; | |
| 44 } | |
| 45 | |
| 46 | |
| 47 div.pageInfoFooter { | |
| 48 margin-top: 0.5em; | |
| 49 padding: 0.25em; | |
| 50 text-align: right; | |
| 51 font-size: 0.75em; | |
| 52 text-shadow: 1px 1px 1px black; | |
| 53 color: white; | |
| 54 } | |
| 55 | |
| 56 | |
| 57 /* | |
| 58 * Albums | |
| 59 */ | |
| 60 div.albumHeaderText { | |
| 61 padding: 0.5em; | |
| 62 font-size: 1.25em; | |
| 63 } | |
| 64 | |
| 65 table { | |
| 66 width: 100%; | |
| 67 } | |
| 68 | |
| 69 td { | |
| 70 width: 15%; | |
| 71 padding: 0.5em; | |
| 72 text-align: center; | |
| 73 } | |
| 74 | |
| 75 table.albumTable { | |
| 76 background: #454; | |
| 77 border-radius: 0.5em; | |
| 78 border-top: 1px solid #343; | |
| 79 border-left: 1px solid #343; | |
| 80 border-bottom: 1px solid #787; | |
| 81 border-right: 1px solid #787; | |
| 82 } | |
| 83 | |
| 84 table.imageTable td { | |
| 85 } | |
| 86 | |
| 87 | |
| 88 table a, table a:visited { | |
| 89 text-decoration: none; | |
| 90 color: white; | |
| 91 outline: 0; | |
| 92 } | |
| 93 | |
| 94 table a:hover, table a:active, table a:focus { | |
| 95 text-shadow: 1px 1px 2px #000; | |
| 96 text-decoration: underline; | |
| 97 color: #f00; | |
| 98 } | |
| 99 | |
| 100 | |
| 101 | |
| 102 /* | |
| 103 * | |
| 104 */ | |
| 105 div.imageBox, div.imageFilename { | |
| 106 text-align: center; | |
| 107 } | |
| 108 | |
| 109 div.imageBox img, div.imageCtrl img { | |
| 110 border: 0.2em solid black; | |
| 111 border-radius: 0.3em; | |
| 112 box-shadow: 4px 4px 4px black; | |
| 113 } | |
| 114 | |
| 115 div.imageCtrl { | |
| 116 width: 15%; | |
| 117 } | |
| 118 | |
| 119 div.imageBox a:hover img, div.imageBox a:active img, div.imageBox a:focus img, | |
| 120 div.imageCtrl a:hover img, div.imageCtrl a:active img, div.imageCtrl a:focus img { | |
| 121 border: 0.2em solid white; | |
| 122 } | |
| 123 | |
| 124 a:hover img.albumIcon, a:active img.albumIcon, a:focus img.albumIcon { | |
| 125 box-shadow: 0px 0px 4px black; | |
| 126 background: black; | |
| 127 transition: 0.15s; | |
| 128 } | |
| 129 | |
| 130 div.imageCBox { | |
| 131 text-align: center; | |
| 132 } | |
| 133 | |
| 134 div.imageCtrl, div.imageCBox div.imageBox { | |
| 135 display: inline-block; | |
| 136 vertical-align: middle; | |
| 137 } | |
| 138 | |
| 139 div.imageCtrl.next { | |
| 140 left: 0; | |
| 141 } | |
| 142 | |
| 143 div.imageCaption { | |
| 144 text-align: center; | |
| 145 font-size: 1.5em; | |
| 146 text-shadow: 1px 1px 2px black; | |
| 147 padding: 0.5em; | |
| 148 } | |
| 149 | |
| 150 td div.imageCaption { | |
| 151 text-align: center; | |
| 152 font-size: 1em; | |
| 153 text-shadow: 1px 1px 2px black; | |
| 154 padding: 0.5em; | |
| 155 } | |
| 156 | |
| 157 | |
| 158 div.infoBox { | |
| 159 text-align: center; | |
| 160 margin: 0.5em; | |
| 161 padding: 0.5em; | |
| 162 border: 0.2em solid white; | |
| 163 border-radius: 0.5em; | |
| 164 } | |
| 165 | |
| 166 span.infoDateTime { | |
| 167 display: block; | |
| 168 color: white; | |
| 169 font-weight: bold; | |
| 170 text-shadow: 1px 1px 2px black; | |
| 171 } | |
| 172 | |
| 173 /* | |
| 174 * | |
| 175 */ | |
| 176 div.naviControls { | |
| 177 font-size: 1.5em; | |
| 178 text-align: center; | |
| 179 margin: 0.5em; | |
| 180 } | |
| 181 | |
|
3
c85f630a4198
Improve bread crumb navigation by making the current album a link as well.
Matti Hamalainen <ccr@tnsp.org>
parents:
0
diff
changeset
|
182 .naviBreadCrumbItem { |
|
c85f630a4198
Improve bread crumb navigation by making the current album a link as well.
Matti Hamalainen <ccr@tnsp.org>
parents:
0
diff
changeset
|
183 } |
|
c85f630a4198
Improve bread crumb navigation by making the current album a link as well.
Matti Hamalainen <ccr@tnsp.org>
parents:
0
diff
changeset
|
184 |
|
c85f630a4198
Improve bread crumb navigation by making the current album a link as well.
Matti Hamalainen <ccr@tnsp.org>
parents:
0
diff
changeset
|
185 .naviBreadCrumbCurr { |
| 0 | 186 color: red; |
| 187 } | |
| 188 | |
|
3
c85f630a4198
Improve bread crumb navigation by making the current album a link as well.
Matti Hamalainen <ccr@tnsp.org>
parents:
0
diff
changeset
|
189 .naviBreadCrumbSep:before { |
| 0 | 190 content: " → "; |
| 191 color: #0f0; | |
| 192 font-weight: bold; | |
| 193 font-size: 1.5em; | |
| 194 } | |
| 195 | |
| 196 div.naviBreadCrumbs { | |
| 197 text-shadow: 1px 1px 1px black; | |
| 198 padding: 0.5em; | |
| 199 padding-top: 0; | |
| 200 border-radius: 0.3em; | |
| 201 font-size: 1.2em; | |
| 202 | |
| 203 background: #454; | |
| 204 border-top: 1px solid #343; | |
| 205 border-left: 1px solid #343; | |
| 206 border-bottom: 1px solid #787; | |
| 207 border-right: 1px solid #787; | |
| 208 } |