media/elegantish/elegantish.css

   1 /* ==========================================================================
   2    Elegantish Template for Jirafeau V1.1
   3    Based on the standard Courgette template, re-styled by JordyV
   4    JordyValentine.Com
   5    ---
   6
   7    Css moved from 'style.css.php', This makes editing things a little nicer, because the Atom editor's sytax highlighting works
   8    better in a plain css file. This is a personal preference, you can move it back to 'style.css.php' and it will work fine.
   9
  10    Images moved to a seperate 'img' directory, this is also personal preference.
  11    ---
  12
  13    Provided under the same licence as Jirafeau, as this is originally the 'Courgette' stylesheet, just edited.
  14    ========================================================================== */
  15
  16
  17 /* ==========================================================================
  18    Summary
  19
  20    1 = Basic Style
  21    2 = Copyright
  22    3 = Options
  23    4 = Upload
  24    5 = Terms of service
  25    6 = Install
  26    7 = Admin
  27    8 = Download page
  28
  29    ========================================================================== */
  30
  31 /* ==========================================================================
  32    1 = Basic Style
  33    ========================================================================== */
  34
  35 /* Call Google Fonts */
  36   @import url(https://fonts.googleapis.com/css?family=Open+Sans|Lobster);
  37
  38 body {
  39   background: ##050505;
  40   background-image: url("bg1.png"), url("bg2.png");
  41   background-repeat: repeat-x, repeat;
  42   font-family: 'Lobster', cursive;
  43   color: #ffffff;
  44   margin: 0;
  45   line-height: 1.5;
  46 }
  47
  48 h1 a {
  49   font-family: 'Lobster', cursive;
  50   font-weight: 200;
  51   display: block;
  52   background: url(logo.png) no-repeat;
  53   background-size: 100% 100%;
  54   text-indent: -9999px;
  55   width: 194px;
  56   height: 185px;
  57   margin: 1em auto;
  58   position: relative;
  59   left: 0.4em;
  60 }
  61
  62 h2 {
  63   font-family: 'Lobster', cursive;
  64   text-align: center;
  65   color: #ffffff;
  66 }
  67
  68 fieldset {
  69   border: 0;
  70   padding: 1.5em;
  71   margin: 0 auto;
  72   border-radius: 8px;
  73   width: 20em;
  74   border: 7px dashed rgba(255, 255, 255, 0.7);
  75   min-height: 15em;
  76   min-width: 30em;
  77   position: relative;
  78 }
  79
  80 legend {
  81   padding: 0.5em 1em;
  82   background: #ffffff;
  83   color: #040404;
  84   font-size: 1.2em;
  85   display: block;
  86   min-width: 8em;
  87   text-align: center;
  88 }
  89
  90 table a {
  91   color: #000;
  92 }
  93
  94 table a:hover,
  95 table a:focus {
  96   text-decoration: none;
  97 }
  98
  99 input[type="submit"] {
 100   font-family: 'Lobster', cursive;
 101   background: #157EFB;
 102   border: 0;
 103   padding: 0.4em 2.2em;
 104   font-size: 1.1em;
 105   color: #FFF;
 106   border-bottom: 5px solid #085B69;
 107   cursor: pointer;
 108   margin: 10px;
 109 }
 110
 111 select,
 112 input[type="text"],
 113 input[type="password"] {
 114   font-family: 'Lobster', cursive;
 115   border: 1;
 116   padding: 5px 5px;
 117   font-size: 1em;
 118 }
 119
 120 select { width: 100%; }
 121
 122 input[type="submit"]:hover,
 123 input[type="submit"]:focus {
 124   font-family: 'Lobster', cursive;
 125   border: 0;
 126   position: relative;
 127   top: 5px;
 128   margin-bottom: 15px;
 129 }
 130
 131 .inner {
 132   margin-top: 3em;
 133 }
 134
 135 #upload fieldset {
 136   background: url(upload.png) no-repeat center;
 137   -webkit-transition: all 0.5s ease;
 138      -moz-transition: all 0.5s ease;
 139       -ms-transition: all 0.5s ease;
 140        -o-transition: all 0.5s ease;
 141           transition: all 0.5s ease;
 142 }
 143
 144 #upload fieldset:hover {
 145   border-color: #ffffff;
 146 }
 147
 148 #upload > form {
 149   text-align: center;
 150 }
 151
 152 #file_select {
 153   position: relative;
 154   width: 100%;
 155   height: 16em;
 156   cursor: pointer;
 157   opacity: 0;
 158 }
 159 #upload.file-selected #file_select {
 160   opacity: 1;
 161   height: 2em;
 162 }
 163 #upload.file-selected fieldset {
 164   background-image: none;
 165 }
 166
 167 /* ==========================================================================
 168    2 = Copyright
 169    ========================================================================== */
 170
 171 #copyright {
 172   font-family: 'Open Sans', sans-serif;
 173   text-align: center;
 174   font-size: 0.7em;
 175   color: #ffffff;
 176   padding-left: 3em;
 177 }
 178
 179 #copyright a {
 180   font-family: 'Open Sans', sans-serif;
 181   color: #ffffff;
 182   text-decoration: none;
 183 }
 184
 185 #copyright a:hover,
 186 #copyright a:focus {
 187   text-decoration: underline;
 188 }
 189
 190 /* ==========================================================================
 191    3 = Options
 192    ========================================================================== */
 193
 194 #options {
 195   position: relative;
 196   z-index: 10;
 197   background: transparent;
 198   width: 100%;
 199   height: 90%;
 200 }
 201
 202 #options tr { height: 2.7em; }
 203
 204 #option_table tr:first-child {
 205   width: 100%;
 206   height: 100%;
 207 }
 208
 209 #option_table td:first-child {
 210 }
 211
 212 #options input[type="submit"] {
 213   position: relative;
 214   left: 11.2em;
 215 }
 216
 217 /* ==========================================================================
 218    4 = Upload
 219    ========================================================================== */
 220
 221 #upload_finished,
 222 #uploading,
 223 .message,
 224 .info,
 225 .error {
 226   font-family: 'Lobster', cursive;
 227   text-align: center;
 228   color: #ffffff;
 229   padding-left: 3em;
 230 }
 231
 232 #upload_finished > p:nth-child(1) {
 233   font-family: 'Lobster', cursive;
 234   color: #157EFB;
 235   font-weight: bold;
 236 }
 237
 238 #upload_finished div p:nth-child(1) {
 239   font-family: 'Lobster', cursive;
 240   font-weight: bold;
 241 }
 242
 243 #upload_finished a {
 244   font-family: 'Lobster', cursive;
 245   text-decoration: none;
 246   color: #ffffff;
 247 }
 248
 249 #uploading a {
 250   font-family: 'Lobster', cursive;
 251   font-weight: bold;
 252   text-decoration: none;
 253   color: #ffffff;
 254 }
 255
 256 #uploaded_percentage {
 257   font-family: 'Lobster', cursive;
 258   font-size: 2em;
 259   font-weight: bold;
 260 }
 261
 262 #upload_finished a:hover,
 263 #uploading a:hover,
 264 #upload_finished a:focus,
 265 #uploading a:focus {
 266   font-family: 'Lobster', cursive;
 267   text-decoration: underline;
 268 }
 269
 270 .message,
 271 .error {
 272   font-family: 'Lobster', cursive;
 273   color: #f27a00;
 274   font-style: italic;
 275   font-weight: bold;
 276 }
 277
 278 #upload_image_email {
 279   padding-left: 20px;
 280   margin-left: 10px;
 281   background: url(email.png) no-repeat;
 282 }
 283
 284 /* ==========================================================================
 285    5 = Terms of service
 286    ========================================================================== */
 287
 288 textarea[readonly="readonly"] {
 289   border: 0;
 290   color: #ffffff;
 291   font-family: 'Open Sans', sans-serif;
 292   background: none;
 293   margin: auto;
 294   display: block;
 295 }
 296
 297 textarea[readonly="readonly"] + p,
 298 textarea[readonly="readonly"] + p + p {
 299   font-family: 'Open Sans', sans-serif;
 300   text-align: center;
 301   color: #ffffff;
 302 }
 303
 304 textarea[readonly="readonly"] + p a,
 305 textarea[readonly="readonly"] + p + p a {
 306   font-family: 'Open Sans', sans-serif;
 307   font-weight: bold;
 308   text-decoration: none;
 309   color: #ffffff;
 310 }
 311
 312 textarea[readonly="readonly"] + p a:hover,
 313 textarea[readonly="readonly"] + p + p a:hover,
 314 textarea[readonly="readonly"] + p a:focus,
 315 textarea[readonly="readonly"] + p + p a:focus {
 316   font-family: 'Open Sans', sans-serif;
 317   text-decoration: underline;
 318 }
 319
 320 /* ==========================================================================
 321    6 = Install
 322    ========================================================================== */
 323
 324 #install fieldset,
 325 #install + fieldset {
 326   width: auto;
 327   max-width: 50em;
 328   border: 7px dashed #bcaaa4;
 329 }
 330
 331 #install table,
 332 #install + fieldset table {
 333   width: 100%;
 334   border-collapse: collapse;
 335 }
 336
 337 #install td,
 338 #install + fieldset td {
 339   padding: 0.5em 1em;
 340   border-bottom: 0;
 341 }
 342
 343 #install td:empty {
 344   width: 13.1em;
 345 }
 346
 347 #install table form:nth-child(odd),
 348 #install + fieldset tr:nth-child(odd) {
 349   background: #bcaaa4;
 350 }
 351
 352 #install fieldset > form {
 353   margin-top: 2em;
 354   text-align: center;
 355 }
 356
 357 #install form {
 358   display: table;
 359   width: 100%;
 360 }
 361
 362 #install td:last-child { text-align: left; }
 363
 364 #install .info { width: 19em; }
 365
 366 #install input[type="submit"] {
 367   min-width: 10.5em;
 368 }
 369
 370 #install + fieldset table {
 371   font-size: 0.9em;
 372 }
 373
 374 #install + fieldset td:first-child input[type="submit"] {
 375   background: none;
 376   padding: 0;
 377   color: #000;
 378   font-weight: bold;
 379   border-bottom: 0;
 380 }
 381
 382 #install + fieldset td:first-child input[type="submit"]:hover,
 383 #install + fieldset td:first-child input[type="submit"]:focus {
 384   text-decoration: underline;
 385 }
 386
 387 /* ==========================================================================
 388    7 = Admin
 389    ========================================================================== */
 390
 391 #admin fieldset,
 392 #admin + fieldset {
 393   width: auto;
 394   max-width: 50em;
 395   border: 7px dashed #ffffff;
 396 }
 397
 398 #admin table,
 399 #admin + fieldset table {
 400   width: 100%;
 401   border-collapse: collapse;
 402   border-bottom: 2px solid #FFF;
 403 }
 404
 405 #admin td,
 406 #admin + fieldset td {
 407   padding: 0.5em 1em;
 408   border: 0px solid #FFF;
 409   border-bottom: 2px solid #FFF;
 410 }
 411
 412 #admin td:empty {
 413   width: 13.1em;
 414 }
 415
 416 #admin table form:nth-child(odd),
 417 #admin + fieldset tr:nth-child(odd) {
 418   background: transparent;
 419 }
 420
 421 #admin fieldset > form {
 422   margin-top: 2em;
 423   text-align: center;
 424 }
 425
 426 #admin form {
 427   display: table;
 428   width: 100%;
 429 }
 430
 431 #admin td:last-child { text-align: left; }
 432
 433 #admin .info { width: 19em; }
 434
 435 #admin input[type="submit"] {
 436   font-family: 'Lobster', cursive;
 437   min-width: 10.5em;
 438 }
 439
 440 #admin + fieldset table {
 441   font-size: 0.9em;
 442 }
 443
 444 #admin + fieldset td:first-child input[type="submit"] {
 445   font-family: 'Lobster', cursive;
 446   background: none;
 447   padding: 0;
 448   color: #000;
 449   font-weight: bold;
 450   border-bottom: 0;
 451 }
 452
 453 #admin + fieldset td:first-child input[type="submit"]:hover,
 454 #admin + fieldset td:first-child input[type="submit"]:focus {
 455   font-family: 'Lobster', cursive;
 456   text-decoration: underline;
 457 }
 458
 459 /* ==========================================================================
 460    8 = Download page
 461    ========================================================================== */
 462
 463 #self_destruct {
 464   font-family: 'Lobster', cursive;
 465   font-weight: bold;
 466   color: red;
 467   background-image: url('pixel_bomb.png');
 468   background-size: 40px 40px;
 469   background-repeat: no-repeat;
 470   padding-left: 40px;
 471   padding-top: 10px;
 472   padding-bottom: 10px;
 473 }