X-Git-Url: https://git.p6c8.net/jirafeau.git/blobdiff_plain/1fe78102806121e5b8006a07147c1a6a9034715e..0ebffccac2f5632b3ad31b801519cc0c186f3006:/media/elegantish/elegantish.css?ds=sidebyside diff --git a/media/elegantish/elegantish.css b/media/elegantish/elegantish.css index 4a55255..ddfd896 100644 --- a/media/elegantish/elegantish.css +++ b/media/elegantish/elegantish.css @@ -1,470 +1,477 @@ -/* ========================================================================== - 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: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - cursor: pointer; - opacity: 0; -} - - - -/* ========================================================================== - 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; -} +/* ========================================================================== + 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_link_email { + margin-left: 10px; +} + +#upload_image_email { + padding-bottom: 15px; + padding-left: 20px; + 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; +}