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