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_link_email {
 279   margin-left: 10px;
 280 }
 281
 282 #upload_image_email {
 283   padding-bottom: 15px;
 284   padding-left: 20px;
 285   background: url(email.png) no-repeat;
 286 }
 287
 288 /* ==========================================================================
 289    5 = Terms of service
 290    ========================================================================== */
 291
 292 textarea[readonly="readonly"] {
 293   border: 0;
 294   color: #ffffff;
 295   font-family: 'Open Sans', sans-serif;
 296   background: none;
 297   margin: auto;
 298   display: block;
 299 }
 300
 301 textarea[readonly="readonly"] + p,
 302 textarea[readonly="readonly"] + p + p {
 303   font-family: 'Open Sans', sans-serif;
 304   text-align: center;
 305   color: #ffffff;
 306 }
 307
 308 textarea[readonly="readonly"] + p a,
 309 textarea[readonly="readonly"] + p + p a {
 310   font-family: 'Open Sans', sans-serif;
 311   font-weight: bold;
 312   text-decoration: none;
 313   color: #ffffff;
 314 }
 315
 316 textarea[readonly="readonly"] + p a:hover,
 317 textarea[readonly="readonly"] + p + p a:hover,
 318 textarea[readonly="readonly"] + p a:focus,
 319 textarea[readonly="readonly"] + p + p a:focus {
 320   font-family: 'Open Sans', sans-serif;
 321   text-decoration: underline;
 322 }
 323
 324 /* ==========================================================================
 325    6 = Install
 326    ========================================================================== */
 327
 328 #install fieldset,
 329 #install + fieldset {
 330   width: auto;
 331   max-width: 50em;
 332   border: 7px dashed #bcaaa4;
 333 }
 334
 335 #install table,
 336 #install + fieldset table {
 337   width: 100%;
 338   border-collapse: collapse;
 339 }
 340
 341 #install td,
 342 #install + fieldset td {
 343   padding: 0.5em 1em;
 344   border-bottom: 0;
 345 }
 346
 347 #install td:empty {
 348   width: 13.1em;
 349 }
 350
 351 #install table form:nth-child(odd),
 352 #install + fieldset tr:nth-child(odd) {
 353   background: #bcaaa4;
 354 }
 355
 356 #install fieldset > form {
 357   margin-top: 2em;
 358   text-align: center;
 359 }
 360
 361 #install form {
 362   display: table;
 363   width: 100%;
 364 }
 365
 366 #install td:last-child { text-align: left; }
 367
 368 #install .info { width: 19em; }
 369
 370 #install input[type="submit"] {
 371   min-width: 10.5em;
 372 }
 373
 374 #install + fieldset table {
 375   font-size: 0.9em;
 376 }
 377
 378 #install + fieldset td:first-child input[type="submit"] {
 379   background: none;
 380   padding: 0;
 381   color: #000;
 382   font-weight: bold;
 383   border-bottom: 0;
 384 }
 385
 386 #install + fieldset td:first-child input[type="submit"]:hover,
 387 #install + fieldset td:first-child input[type="submit"]:focus {
 388   text-decoration: underline;
 389 }
 390
 391 /* ==========================================================================
 392    7 = Admin
 393    ========================================================================== */
 394
 395 #admin fieldset,
 396 #admin + fieldset {
 397   width: auto;
 398   max-width: 50em;
 399   border: 7px dashed #ffffff;
 400 }
 401
 402 #admin table,
 403 #admin + fieldset table {
 404   width: 100%;
 405   border-collapse: collapse;
 406   border-bottom: 2px solid #FFF;
 407 }
 408
 409 #admin td,
 410 #admin + fieldset td {
 411   padding: 0.5em 1em;
 412   border: 0px solid #FFF;
 413   border-bottom: 2px solid #FFF;
 414 }
 415
 416 #admin td:empty {
 417   width: 13.1em;
 418 }
 419
 420 #admin table form:nth-child(odd),
 421 #admin + fieldset tr:nth-child(odd) {
 422   background: transparent;
 423 }
 424
 425 #admin fieldset > form {
 426   margin-top: 2em;
 427   text-align: center;
 428 }
 429
 430 #admin form {
 431   display: table;
 432   width: 100%;
 433 }
 434
 435 #admin td:last-child { text-align: left; }
 436
 437 #admin .info { width: 19em; }
 438
 439 #admin input[type="submit"] {
 440   font-family: 'Lobster', cursive;
 441   min-width: 10.5em;
 442 }
 443
 444 #admin + fieldset table {
 445   font-size: 0.9em;
 446 }
 447
 448 #admin + fieldset td:first-child input[type="submit"] {
 449   font-family: 'Lobster', cursive;
 450   background: none;
 451   padding: 0;
 452   color: #000;
 453   font-weight: bold;
 454   border-bottom: 0;
 455 }
 456
 457 #admin + fieldset td:first-child input[type="submit"]:hover,
 458 #admin + fieldset td:first-child input[type="submit"]:focus {
 459   font-family: 'Lobster', cursive;
 460   text-decoration: underline;
 461 }
 462
 463 /* ==========================================================================
 464    8 = Download page
 465    ========================================================================== */
 466
 467 #self_destruct {
 468   font-family: 'Lobster', cursive;
 469   font-weight: bold;
 470   color: red;
 471   background-image: url('pixel_bomb.png');
 472   background-size: 40px 40px;
 473   background-repeat: no-repeat;
 474   padding-left: 40px;
 475   padding-top: 10px;
 476   padding-bottom: 10px;
 477 }