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   background: #085B69;
 128   border-bottom: 5px solid #157EFB;
 129   margin-bottom: 15px;
 130 }
 131
 132 .inner {
 133   margin-top: 3em;
 134 }
 135
 136 #upload fieldset {
 137   background: url(upload.png) no-repeat center;
 138   -webkit-transition: all 0.5s ease;
 139      -moz-transition: all 0.5s ease;
 140       -ms-transition: all 0.5s ease;
 141        -o-transition: all 0.5s ease;
 142           transition: all 0.5s ease;
 143 }
 144
 145 #upload fieldset:hover {
 146   border-color: #ffffff;
 147 }
 148
 149 #upload > form {
 150   text-align: center;
 151 }
 152
 153 #file_select {
 154   position: relative;
 155   width: 100%;
 156   height: 16em;
 157   cursor: pointer;
 158   opacity: 0;
 159 }
 160 #upload.file-selected #file_select {
 161   opacity: 1;
 162   height: 2em;
 163 }
 164 #upload.file-selected fieldset {
 165   background-image: none;
 166 }
 167
 168 /* ==========================================================================
 169    2 = Copyright
 170    ========================================================================== */
 171
 172 #copyright {
 173   font-family: 'Open Sans', sans-serif;
 174   text-align: center;
 175   font-size: 0.7em;
 176   color: #ffffff;
 177   padding-left: 3em;
 178 }
 179
 180 #copyright a {
 181   font-family: 'Open Sans', sans-serif;
 182   color: #ffffff;
 183   text-decoration: none;
 184 }
 185
 186 #copyright a:hover,
 187 #copyright a:focus {
 188   text-decoration: underline;
 189 }
 190
 191 /* ==========================================================================
 192    3 = Options
 193    ========================================================================== */
 194
 195 #options {
 196   position: relative;
 197   z-index: 10;
 198   background: transparent;
 199   width: 100%;
 200   height: 90%;
 201 }
 202
 203 #options tr { height: 2.7em; }
 204
 205 #option_table tr:first-child {
 206   width: 100%;
 207   height: 100%;
 208 }
 209
 210 #option_table td:first-child {
 211 }
 212
 213 #options input[type="submit"] {
 214   position: relative;
 215   left: 11.2em;
 216 }
 217
 218 /* ==========================================================================
 219    4 = Upload
 220    ========================================================================== */
 221
 222 #upload_finished,
 223 #uploading,
 224 .message,
 225 .info,
 226 .error {
 227   font-family: 'Lobster', cursive;
 228   text-align: center;
 229   color: #ffffff;
 230   padding-left: 3em;
 231 }
 232
 233 #upload_finished > p:nth-child(1) {
 234   font-family: 'Lobster', cursive;
 235   color: #157EFB;
 236   font-weight: bold;
 237 }
 238
 239 #upload_finished div p:nth-child(1) {
 240   font-family: 'Lobster', cursive;
 241   font-weight: bold;
 242 }
 243
 244 #upload_finished a {
 245   font-family: 'Lobster', cursive;
 246   text-decoration: none;
 247   color: #ffffff;
 248 }
 249
 250 #uploading a {
 251   font-family: 'Lobster', cursive;
 252   font-weight: bold;
 253   text-decoration: none;
 254   color: #ffffff;
 255 }
 256
 257 #uploaded_percentage {
 258   font-family: 'Lobster', cursive;
 259   font-size: 2em;
 260   font-weight: bold;
 261 }
 262
 263 #upload_finished a:hover,
 264 #uploading a:hover,
 265 #upload_finished a:focus,
 266 #uploading a:focus {
 267   font-family: 'Lobster', cursive;
 268   text-decoration: underline;
 269 }
 270
 271 .message,
 272 .error {
 273   font-family: 'Lobster', cursive;
 274   color: #f27a00;
 275   font-style: italic;
 276   font-weight: bold;
 277 }
 278
 279 #upload_link_email {
 280   margin-left: 10px;
 281 }
 282
 283 #upload_image_email {
 284   padding-bottom: 15px;
 285   padding-left: 20px;
 286   background: url(email.png) no-repeat;
 287 }
 288
 289 /* ==========================================================================
 290    5 = Terms of service
 291    ========================================================================== */
 292
 293 textarea[readonly="readonly"] {
 294   border: 0;
 295   color: #ffffff;
 296   font-family: 'Open Sans', sans-serif;
 297   background: none;
 298   margin: auto;
 299   display: block;
 300 }
 301
 302 textarea[readonly="readonly"] + p,
 303 textarea[readonly="readonly"] + p + p {
 304   font-family: 'Open Sans', sans-serif;
 305   text-align: center;
 306   color: #ffffff;
 307 }
 308
 309 textarea[readonly="readonly"] + p a,
 310 textarea[readonly="readonly"] + p + p a {
 311   font-family: 'Open Sans', sans-serif;
 312   font-weight: bold;
 313   text-decoration: none;
 314   color: #ffffff;
 315 }
 316
 317 textarea[readonly="readonly"] + p a:hover,
 318 textarea[readonly="readonly"] + p + p a:hover,
 319 textarea[readonly="readonly"] + p a:focus,
 320 textarea[readonly="readonly"] + p + p a:focus {
 321   font-family: 'Open Sans', sans-serif;
 322   text-decoration: underline;
 323 }
 324
 325 /* ==========================================================================
 326    6 = Install
 327    ========================================================================== */
 328
 329 #install fieldset,
 330 #install + fieldset {
 331   width: auto;
 332   max-width: 50em;
 333   border: 7px dashed #bcaaa4;
 334 }
 335
 336 #install table,
 337 #install + fieldset table {
 338   width: 100%;
 339   border-collapse: collapse;
 340 }
 341
 342 #install td,
 343 #install + fieldset td {
 344   padding: 0.5em 1em;
 345   border-bottom: 0;
 346 }
 347
 348 #install td:empty {
 349   width: 13.1em;
 350 }
 351
 352 #install table form:nth-child(odd),
 353 #install + fieldset tr:nth-child(odd) {
 354   background: #bcaaa4;
 355 }
 356
 357 #install fieldset > form {
 358   margin-top: 2em;
 359   text-align: center;
 360 }
 361
 362 #install form {
 363   display: table;
 364   width: 100%;
 365 }
 366
 367 #install td:last-child { text-align: left; }
 368
 369 #install .info { width: 19em; }
 370
 371 #install input[type="submit"] {
 372   min-width: 10.5em;
 373 }
 374
 375 #install + fieldset table {
 376   font-size: 0.9em;
 377 }
 378
 379 #install + fieldset td:first-child input[type="submit"] {
 380   background: none;
 381   padding: 0;
 382   color: #000;
 383   font-weight: bold;
 384   border-bottom: 0;
 385 }
 386
 387 #install + fieldset td:first-child input[type="submit"]:hover,
 388 #install + fieldset td:first-child input[type="submit"]:focus {
 389   text-decoration: underline;
 390 }
 391
 392 /* ==========================================================================
 393    7 = Admin
 394    ========================================================================== */
 395
 396 #admin fieldset,
 397 #admin + fieldset {
 398   width: auto;
 399   max-width: 50em;
 400   border: 7px dashed #ffffff;
 401 }
 402
 403 #admin table,
 404 #admin + fieldset table {
 405   width: 100%;
 406   border-collapse: collapse;
 407   border-bottom: 2px solid #FFF;
 408 }
 409
 410 #admin td,
 411 #admin + fieldset td {
 412   padding: 0.5em 1em;
 413   border: 0px solid #FFF;
 414   border-bottom: 2px solid #FFF;
 415 }
 416
 417 #admin td:empty {
 418   width: 13.1em;
 419 }
 420
 421 #admin table form:nth-child(odd),
 422 #admin + fieldset tr:nth-child(odd) {
 423   background: transparent;
 424 }
 425
 426 #admin fieldset > form {
 427   margin-top: 2em;
 428   text-align: center;
 429 }
 430
 431 #admin form {
 432   display: table;
 433   width: 100%;
 434 }
 435
 436 #admin td:last-child { text-align: left; }
 437
 438 #admin .info { width: 19em; }
 439
 440 #admin input[type="submit"] {
 441   font-family: 'Lobster', cursive;
 442   min-width: 10.5em;
 443 }
 444
 445 #admin + fieldset table {
 446   font-size: 0.9em;
 447 }
 448
 449 #admin + fieldset td:first-child input[type="submit"] {
 450   font-family: 'Lobster', cursive;
 451   background: none;
 452   padding: 0;
 453   color: #000;
 454   font-weight: bold;
 455   border-bottom: 0;
 456 }
 457
 458 #admin + fieldset td:first-child input[type="submit"]:hover,
 459 #admin + fieldset td:first-child input[type="submit"]:focus {
 460   font-family: 'Lobster', cursive;
 461   text-decoration: underline;
 462 }
 463
 464 /* ==========================================================================
 465    8 = Download page
 466    ========================================================================== */
 467
 468 #self_destruct {
 469   font-family: 'Lobster', cursive;
 470   font-weight: bold;
 471   color: red;
 472   background-image: url('pixel_bomb.png');
 473   background-size: 40px 40px;
 474   background-repeat: no-repeat;
 475   padding-left: 40px;
 476   padding-top: 10px;
 477   padding-bottom: 10px;
 478 }