]> git.p6c8.net - jirafeau.git/blobdiff - media/elegantish/elegantish.css
[BUGFIX] Prevent bouncing fileupload field
[jirafeau.git] / media / elegantish / elegantish.css
index 4a552559878e08d0adb2bd9ffbc9c4ebce9afe90..14ebfc1039c2a30847b2f3df556a4319a25fc335 100644 (file)
-/* ==========================================================================\r
-   Elegantish Template for Jirafeau V1.1\r
-   Based on the standard Courgette template, re-styled by JordyV\r
-   JordyValentine.Com\r
-   ---\r
-\r
-   Css moved from 'style.css.php', This makes editing things a little nicer, because the Atom editor's sytax highlighting works\r
-   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.\r
-\r
-   Images moved to a seperate 'img' directory, this is also personal preference.\r
-   ---\r
-\r
-   Provided under the same licence as Jirafeau, as this is originally the 'Courgette' stylesheet, just edited.\r
-   ========================================================================== */\r
-\r
-\r
-/* ==========================================================================\r
-   Summary\r
-\r
-   1 = Basic Style\r
-   2 = Copyright\r
-   3 = Options\r
-   4 = Upload\r
-   5 = Terms of service\r
-   6 = Install\r
-   7 = Admin\r
-   8 = Download page\r
-\r
-   ========================================================================== */\r
-\r
-/* ==========================================================================\r
-   1 = Basic Style\r
-   ========================================================================== */\r
-\r
-/* Call Google Fonts */\r
-  @import url(https://fonts.googleapis.com/css?family=Open+Sans|Lobster);\r
-\r
-body {\r
-  background: ##050505;\r
-  background-image: url("bg1.png"), url("bg2.png");\r
-  background-repeat: repeat-x, repeat;\r
-  font-family: 'Lobster', cursive;\r
-  color: #ffffff;\r
-  margin: 0;\r
-  line-height: 1.5;\r
-}\r
-\r
-h1 a {\r
-  font-family: 'Lobster', cursive;\r
-  font-weight: 200;\r
-  display: block;\r
-  background: url(logo.png) no-repeat;\r
-  background-size: 100% 100%;\r
-  text-indent: -9999px;\r
-  width: 194px;\r
-  height: 185px;\r
-  margin: 1em auto;\r
-  position: relative;\r
-  left: 0.4em;\r
-}\r
-\r
-h2 {\r
-  font-family: 'Lobster', cursive;\r
-  text-align: center;\r
-  color: #ffffff;\r
-}\r
-\r
-fieldset {\r
-  border: 0;\r
-  padding: 1.5em;\r
-  margin: 0 auto;\r
-  border-radius: 8px;\r
-  width: 20em;\r
-  border: 7px dashed rgba(255, 255, 255, 0.7);\r
-  min-height: 15em;\r
-  min-width: 30em;\r
-  position: relative;\r
-}\r
-\r
-legend {\r
-  padding: 0.5em 1em;\r
-  background: #ffffff;\r
-  color: #040404;\r
-  font-size: 1.2em;\r
-  display: block;\r
-  min-width: 8em;\r
-  text-align: center;\r
-}\r
-\r
-table a {\r
-  color: #000;\r
-}\r
-\r
-table a:hover,\r
-table a:focus {\r
-  text-decoration: none;\r
-}\r
-\r
-input[type="submit"] {\r
-  font-family: 'Lobster', cursive;\r
-  background: #157EFB;\r
-  border: 0;\r
-  padding: 0.4em 2.2em;\r
-  font-size: 1.1em;\r
-  color: #FFF;\r
-  border-bottom: 5px solid #085B69;\r
-  cursor: pointer;\r
-  margin: 10px;\r
-}\r
-\r
-select,\r
-input[type="text"],\r
-input[type="password"] {\r
-  font-family: 'Lobster', cursive;\r
-  border: 1;\r
-  padding: 5px 5px;\r
-  font-size: 1em;\r
-}\r
-\r
-select { width: 100%; }\r
-\r
-input[type="submit"]:hover,\r
-input[type="submit"]:focus {\r
-  font-family: 'Lobster', cursive;\r
-  border: 0;\r
-  position: relative;\r
-  top: 5px;\r
-  margin-bottom: 15px;\r
-}\r
-\r
-.inner {\r
-  margin-top: 3em;\r
-}\r
-\r
-#upload fieldset {\r
-  background: url(upload.png) no-repeat center;\r
-  -webkit-transition: all 0.5s ease;\r
-     -moz-transition: all 0.5s ease;\r
-      -ms-transition: all 0.5s ease;\r
-       -o-transition: all 0.5s ease;\r
-          transition: all 0.5s ease;\r
-}\r
-\r
-#upload fieldset:hover {\r
-  border-color: #ffffff;\r
-}\r
-\r
-#upload > form {\r
-  text-align: center;\r
-}\r
-\r
-#file_select {\r
-  position: absolute;\r
-  top: 0;\r
-  left: 0;\r
-  width: 100%;\r
-  height: 100%;\r
-  cursor: pointer;\r
-  opacity: 0;\r
-}\r
-\r
-\r
-\r
-/* ==========================================================================\r
-   2 = Copyright\r
-   ========================================================================== */\r
-\r
-#copyright {\r
-  font-family: 'Open Sans', sans-serif;\r
-  text-align: center;\r
-  font-size: 0.7em;\r
-  color: #ffffff;\r
-  padding-left: 3em;\r
-}\r
-\r
-#copyright a {\r
-  font-family: 'Open Sans', sans-serif;\r
-  color: #ffffff;\r
-  text-decoration: none;\r
-}\r
-\r
-#copyright a:hover,\r
-#copyright a:focus {\r
-  text-decoration: underline;\r
-}\r
-\r
-/* ==========================================================================\r
-   3 = Options\r
-   ========================================================================== */\r
-\r
-#options {\r
-  position: relative;\r
-  z-index: 10;\r
-  background: transparent;\r
-  width: 100%;\r
-  height: 90%;\r
-}\r
-\r
-#options tr { height: 2.7em; }\r
-\r
-#option_table tr:first-child {\r
-  width: 100%;\r
-  height: 100%;\r
-}\r
-\r
-#option_table td:first-child {\r
-}\r
-\r
-#options input[type="submit"] {\r
-  position: relative;\r
-  left: 11.2em;\r
-}\r
-\r
-/* ==========================================================================\r
-   4 = Upload\r
-   ========================================================================== */\r
-\r
-#upload_finished,\r
-#uploading,\r
-.message,\r
-.info,\r
-.error {\r
-  font-family: 'Lobster', cursive;\r
-  text-align: center;\r
-  color: #ffffff;\r
-  padding-left: 3em;\r
-}\r
-\r
-#upload_finished > p:nth-child(1) {\r
-  font-family: 'Lobster', cursive;\r
-  color: #157EFB;\r
-  font-weight: bold;\r
-}\r
-\r
-#upload_finished div p:nth-child(1) {\r
-  font-family: 'Lobster', cursive;\r
-  font-weight: bold;\r
-}\r
-\r
-#upload_finished a {\r
-  font-family: 'Lobster', cursive;\r
-  text-decoration: none;\r
-  color: #ffffff;\r
-}\r
-\r
-#uploading a {\r
-  font-family: 'Lobster', cursive;\r
-  font-weight: bold;\r
-  text-decoration: none;\r
-  color: #ffffff;\r
-}\r
-\r
-#uploaded_percentage {\r
-  font-family: 'Lobster', cursive;\r
-  font-size: 2em;\r
-  font-weight: bold;\r
-}\r
-\r
-#upload_finished a:hover,\r
-#uploading a:hover,\r
-#upload_finished a:focus,\r
-#uploading a:focus {\r
-  font-family: 'Lobster', cursive;\r
-  text-decoration: underline;\r
-}\r
-\r
-.message,\r
-.error {\r
-  font-family: 'Lobster', cursive;\r
-  color: #f27a00;\r
-  font-style: italic;\r
-  font-weight: bold;\r
-}\r
-\r
-#upload_image_email {\r
-  padding-left: 20px;\r
-  margin-left: 10px;\r
-  background: url(email.png) no-repeat;\r
-}\r
-\r
-/* ==========================================================================\r
-   5 = Terms of service\r
-   ========================================================================== */\r
-\r
-textarea[readonly="readonly"] {\r
-  border: 0;\r
-  color: #ffffff;\r
-  font-family: 'Open Sans', sans-serif;\r
-  background: none;\r
-  margin: auto;\r
-  display: block;\r
-}\r
-\r
-textarea[readonly="readonly"] + p,\r
-textarea[readonly="readonly"] + p + p {\r
-  font-family: 'Open Sans', sans-serif;\r
-  text-align: center;\r
-  color: #ffffff;\r
-}\r
-\r
-textarea[readonly="readonly"] + p a,\r
-textarea[readonly="readonly"] + p + p a {\r
-  font-family: 'Open Sans', sans-serif;\r
-  font-weight: bold;\r
-  text-decoration: none;\r
-  color: #ffffff;\r
-}\r
-\r
-textarea[readonly="readonly"] + p a:hover,\r
-textarea[readonly="readonly"] + p + p a:hover,\r
-textarea[readonly="readonly"] + p a:focus,\r
-textarea[readonly="readonly"] + p + p a:focus {\r
-  font-family: 'Open Sans', sans-serif;\r
-  text-decoration: underline;\r
-}\r
-\r
-/* ==========================================================================\r
-   6 = Install\r
-   ========================================================================== */\r
-\r
-#install fieldset,\r
-#install + fieldset {\r
-  width: auto;\r
-  max-width: 50em;\r
-  border: 7px dashed #bcaaa4;\r
-}\r
-\r
-#install table,\r
-#install + fieldset table {\r
-  width: 100%;\r
-  border-collapse: collapse;\r
-}\r
-\r
-#install td,\r
-#install + fieldset td {\r
-  padding: 0.5em 1em;\r
-  border-bottom: 0;\r
-}\r
-\r
-#install td:empty {\r
-  width: 13.1em;\r
-}\r
-\r
-#install table form:nth-child(odd),\r
-#install + fieldset tr:nth-child(odd) {\r
-  background: #bcaaa4;\r
-}\r
-\r
-#install fieldset > form {\r
-  margin-top: 2em;\r
-  text-align: center;\r
-}\r
-\r
-#install form {\r
-  display: table;\r
-  width: 100%;\r
-}\r
-\r
-#install td:last-child { text-align: left; }\r
-\r
-#install .info { width: 19em; }\r
-\r
-#install input[type="submit"] {\r
-  min-width: 10.5em;\r
-}\r
-\r
-#install + fieldset table {\r
-  font-size: 0.9em;\r
-}\r
-\r
-#install + fieldset td:first-child input[type="submit"] {\r
-  background: none;\r
-  padding: 0;\r
-  color: #000;\r
-  font-weight: bold;\r
-  border-bottom: 0;\r
-}\r
-\r
-#install + fieldset td:first-child input[type="submit"]:hover,\r
-#install + fieldset td:first-child input[type="submit"]:focus {\r
-  text-decoration: underline;\r
-}\r
-\r
-/* ==========================================================================\r
-   7 = Admin\r
-   ========================================================================== */\r
-\r
-#admin fieldset,\r
-#admin + fieldset {\r
-  width: auto;\r
-  max-width: 50em;\r
-  border: 7px dashed #ffffff;\r
-}\r
-\r
-#admin table,\r
-#admin + fieldset table {\r
-  width: 100%;\r
-  border-collapse: collapse;\r
-  border-bottom: 2px solid #FFF;\r
-}\r
-\r
-#admin td,\r
-#admin + fieldset td {\r
-  padding: 0.5em 1em;\r
-  border: 0px solid #FFF;\r
-  border-bottom: 2px solid #FFF;\r
-}\r
-\r
-#admin td:empty {\r
-  width: 13.1em;\r
-}\r
-\r
-#admin table form:nth-child(odd),\r
-#admin + fieldset tr:nth-child(odd) {\r
-  background: transparent;\r
-}\r
-\r
-#admin fieldset > form {\r
-  margin-top: 2em;\r
-  text-align: center;\r
-}\r
-\r
-#admin form {\r
-  display: table;\r
-  width: 100%;\r
-}\r
-\r
-#admin td:last-child { text-align: left; }\r
-\r
-#admin .info { width: 19em; }\r
-\r
-#admin input[type="submit"] {\r
-  font-family: 'Lobster', cursive;\r
-  min-width: 10.5em;\r
-}\r
-\r
-#admin + fieldset table {\r
-  font-size: 0.9em;\r
-}\r
-\r
-#admin + fieldset td:first-child input[type="submit"] {\r
-  font-family: 'Lobster', cursive;\r
-  background: none;\r
-  padding: 0;\r
-  color: #000;\r
-  font-weight: bold;\r
-  border-bottom: 0;\r
-}\r
-\r
-#admin + fieldset td:first-child input[type="submit"]:hover,\r
-#admin + fieldset td:first-child input[type="submit"]:focus {\r
-  font-family: 'Lobster', cursive;\r
-  text-decoration: underline;\r
-}\r
-\r
-/* ==========================================================================\r
-   8 = Download page\r
-   ========================================================================== */\r
-\r
-#self_destruct {\r
-  font-family: 'Lobster', cursive;\r
-  font-weight: bold;\r
-  color: red;\r
-  background-image: url('pixel_bomb.png');\r
-  background-size: 40px 40px;\r
-  background-repeat: no-repeat;\r
-  padding-left: 40px;\r
-  padding-top: 10px;\r
-  padding-bottom: 10px;\r
-}\r
+/* ==========================================================================
+   Elegantish Template for Jirafeau V1.1
+   Based on the standard Courgette template, re-styled by JordyV
+   JordyValentine.Com
+   ---
+
+   Css moved from 'style.css.php', This makes editing things a little nicer, because the Atom editor's sytax highlighting works
+   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.
+
+   Images moved to a seperate 'img' directory, this is also personal preference.
+   ---
+
+   Provided under the same licence as Jirafeau, as this is originally the 'Courgette' stylesheet, just edited.
+   ========================================================================== */
+
+
+/* ==========================================================================
+   Summary
+
+   1 = Basic Style
+   2 = Copyright
+   3 = Options
+   4 = Upload
+   5 = Terms of service
+   6 = Install
+   7 = Admin
+   8 = Download page
+
+   ========================================================================== */
+
+/* ==========================================================================
+   1 = Basic Style
+   ========================================================================== */
+
+/* Call Google Fonts */
+  @import url(https://fonts.googleapis.com/css?family=Open+Sans|Lobster);
+
+body {
+  background: ##050505;
+  background-image: url("bg1.png"), url("bg2.png");
+  background-repeat: repeat-x, repeat;
+  font-family: 'Lobster', cursive;
+  color: #ffffff;
+  margin: 0;
+  line-height: 1.5;
+}
+
+h1 a {
+  font-family: 'Lobster', cursive;
+  font-weight: 200;
+  display: block;
+  background: url(logo.png) no-repeat;
+  background-size: 100% 100%;
+  text-indent: -9999px;
+  width: 194px;
+  height: 185px;
+  margin: 1em auto;
+  position: relative;
+  left: 0.4em;
+}
+
+h2 {
+  font-family: 'Lobster', cursive;
+  text-align: center;
+  color: #ffffff;
+}
+
+fieldset {
+  border: 0;
+  padding: 1.5em;
+  margin: 0 auto;
+  border-radius: 8px;
+  width: 20em;
+  border: 7px dashed rgba(255, 255, 255, 0.7);
+  min-height: 15em;
+  min-width: 30em;
+  position: relative;
+}
+
+legend {
+  padding: 0.5em 1em;
+  background: #ffffff;
+  color: #040404;
+  font-size: 1.2em;
+  display: block;
+  min-width: 8em;
+  text-align: center;
+}
+
+table a {
+  color: #000;
+}
+
+table a:hover,
+table a:focus {
+  text-decoration: none;
+}
+
+input[type="submit"] {
+  font-family: 'Lobster', cursive;
+  background: #157EFB;
+  border: 0;
+  padding: 0.4em 2.2em;
+  font-size: 1.1em;
+  color: #FFF;
+  border-bottom: 5px solid #085B69;
+  cursor: pointer;
+  margin: 10px;
+}
+
+select,
+input[type="text"],
+input[type="password"] {
+  font-family: 'Lobster', cursive;
+  border: 1;
+  padding: 5px 5px;
+  font-size: 1em;
+}
+
+select { width: 100%; }
+
+input[type="submit"]:hover,
+input[type="submit"]:focus {
+  font-family: 'Lobster', cursive;
+  border: 0;
+  position: relative;
+  top: 5px;
+  margin-bottom: 15px;
+}
+
+.inner {
+  margin-top: 3em;
+}
+
+#upload fieldset {
+  background: url(upload.png) no-repeat center;
+  -webkit-transition: all 0.5s ease;
+     -moz-transition: all 0.5s ease;
+      -ms-transition: all 0.5s ease;
+       -o-transition: all 0.5s ease;
+          transition: all 0.5s ease;
+}
+
+#upload fieldset:hover {
+  border-color: #ffffff;
+}
+
+#upload > form {
+  text-align: center;
+}
+
+#file_select {
+  position: relative;
+  width: 100%;
+  height: 16em;
+  cursor: pointer;
+  opacity: 0;
+}
+#upload.file-selected #file_select {
+  opacity: 1;
+  height: 2em;
+}
+#upload.file-selected fieldset {
+  background-image: none;
+}
+
+/* ==========================================================================
+   2 = Copyright
+   ========================================================================== */
+
+#copyright {
+  font-family: 'Open Sans', sans-serif;
+  text-align: center;
+  font-size: 0.7em;
+  color: #ffffff;
+  padding-left: 3em;
+}
+
+#copyright a {
+  font-family: 'Open Sans', sans-serif;
+  color: #ffffff;
+  text-decoration: none;
+}
+
+#copyright a:hover,
+#copyright a:focus {
+  text-decoration: underline;
+}
+
+/* ==========================================================================
+   3 = Options
+   ========================================================================== */
+
+#options {
+  position: relative;
+  z-index: 10;
+  background: transparent;
+  width: 100%;
+  height: 90%;
+}
+
+#options tr { height: 2.7em; }
+
+#option_table tr:first-child {
+  width: 100%;
+  height: 100%;
+}
+
+#option_table td:first-child {
+}
+
+#options input[type="submit"] {
+  position: relative;
+  left: 11.2em;
+}
+
+/* ==========================================================================
+   4 = Upload
+   ========================================================================== */
+
+#upload_finished,
+#uploading,
+.message,
+.info,
+.error {
+  font-family: 'Lobster', cursive;
+  text-align: center;
+  color: #ffffff;
+  padding-left: 3em;
+}
+
+#upload_finished > p:nth-child(1) {
+  font-family: 'Lobster', cursive;
+  color: #157EFB;
+  font-weight: bold;
+}
+
+#upload_finished div p:nth-child(1) {
+  font-family: 'Lobster', cursive;
+  font-weight: bold;
+}
+
+#upload_finished a {
+  font-family: 'Lobster', cursive;
+  text-decoration: none;
+  color: #ffffff;
+}
+
+#uploading a {
+  font-family: 'Lobster', cursive;
+  font-weight: bold;
+  text-decoration: none;
+  color: #ffffff;
+}
+
+#uploaded_percentage {
+  font-family: 'Lobster', cursive;
+  font-size: 2em;
+  font-weight: bold;
+}
+
+#upload_finished a:hover,
+#uploading a:hover,
+#upload_finished a:focus,
+#uploading a:focus {
+  font-family: 'Lobster', cursive;
+  text-decoration: underline;
+}
+
+.message,
+.error {
+  font-family: 'Lobster', cursive;
+  color: #f27a00;
+  font-style: italic;
+  font-weight: bold;
+}
+
+#upload_image_email {
+  padding-left: 20px;
+  margin-left: 10px;
+  background: url(email.png) no-repeat;
+}
+
+/* ==========================================================================
+   5 = Terms of service
+   ========================================================================== */
+
+textarea[readonly="readonly"] {
+  border: 0;
+  color: #ffffff;
+  font-family: 'Open Sans', sans-serif;
+  background: none;
+  margin: auto;
+  display: block;
+}
+
+textarea[readonly="readonly"] + p,
+textarea[readonly="readonly"] + p + p {
+  font-family: 'Open Sans', sans-serif;
+  text-align: center;
+  color: #ffffff;
+}
+
+textarea[readonly="readonly"] + p a,
+textarea[readonly="readonly"] + p + p a {
+  font-family: 'Open Sans', sans-serif;
+  font-weight: bold;
+  text-decoration: none;
+  color: #ffffff;
+}
+
+textarea[readonly="readonly"] + p a:hover,
+textarea[readonly="readonly"] + p + p a:hover,
+textarea[readonly="readonly"] + p a:focus,
+textarea[readonly="readonly"] + p + p a:focus {
+  font-family: 'Open Sans', sans-serif;
+  text-decoration: underline;
+}
+
+/* ==========================================================================
+   6 = Install
+   ========================================================================== */
+
+#install fieldset,
+#install + fieldset {
+  width: auto;
+  max-width: 50em;
+  border: 7px dashed #bcaaa4;
+}
+
+#install table,
+#install + fieldset table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+#install td,
+#install + fieldset td {
+  padding: 0.5em 1em;
+  border-bottom: 0;
+}
+
+#install td:empty {
+  width: 13.1em;
+}
+
+#install table form:nth-child(odd),
+#install + fieldset tr:nth-child(odd) {
+  background: #bcaaa4;
+}
+
+#install fieldset > form {
+  margin-top: 2em;
+  text-align: center;
+}
+
+#install form {
+  display: table;
+  width: 100%;
+}
+
+#install td:last-child { text-align: left; }
+
+#install .info { width: 19em; }
+
+#install input[type="submit"] {
+  min-width: 10.5em;
+}
+
+#install + fieldset table {
+  font-size: 0.9em;
+}
+
+#install + fieldset td:first-child input[type="submit"] {
+  background: none;
+  padding: 0;
+  color: #000;
+  font-weight: bold;
+  border-bottom: 0;
+}
+
+#install + fieldset td:first-child input[type="submit"]:hover,
+#install + fieldset td:first-child input[type="submit"]:focus {
+  text-decoration: underline;
+}
+
+/* ==========================================================================
+   7 = Admin
+   ========================================================================== */
+
+#admin fieldset,
+#admin + fieldset {
+  width: auto;
+  max-width: 50em;
+  border: 7px dashed #ffffff;
+}
+
+#admin table,
+#admin + fieldset table {
+  width: 100%;
+  border-collapse: collapse;
+  border-bottom: 2px solid #FFF;
+}
+
+#admin td,
+#admin + fieldset td {
+  padding: 0.5em 1em;
+  border: 0px solid #FFF;
+  border-bottom: 2px solid #FFF;
+}
+
+#admin td:empty {
+  width: 13.1em;
+}
+
+#admin table form:nth-child(odd),
+#admin + fieldset tr:nth-child(odd) {
+  background: transparent;
+}
+
+#admin fieldset > form {
+  margin-top: 2em;
+  text-align: center;
+}
+
+#admin form {
+  display: table;
+  width: 100%;
+}
+
+#admin td:last-child { text-align: left; }
+
+#admin .info { width: 19em; }
+
+#admin input[type="submit"] {
+  font-family: 'Lobster', cursive;
+  min-width: 10.5em;
+}
+
+#admin + fieldset table {
+  font-size: 0.9em;
+}
+
+#admin + fieldset td:first-child input[type="submit"] {
+  font-family: 'Lobster', cursive;
+  background: none;
+  padding: 0;
+  color: #000;
+  font-weight: bold;
+  border-bottom: 0;
+}
+
+#admin + fieldset td:first-child input[type="submit"]:hover,
+#admin + fieldset td:first-child input[type="submit"]:focus {
+  font-family: 'Lobster', cursive;
+  text-decoration: underline;
+}
+
+/* ==========================================================================
+   8 = Download page
+   ========================================================================== */
+
+#self_destruct {
+  font-family: 'Lobster', cursive;
+  font-weight: bold;
+  color: red;
+  background-image: url('pixel_bomb.png');
+  background-size: 40px 40px;
+  background-repeat: no-repeat;
+  padding-left: 40px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}

patrick-canterino.de