From 35042d141d726b8e22da200eff20a0c582c4b011 Mon Sep 17 00:00:00 2001 From: jorge-vitrubio Date: Thu, 3 Feb 2022 13:59:14 +0100 Subject: [PATCH] hangar styles first approach --- custom/favico.ico | Bin 0 -> 5336 bytes custom/hangar-logo-icon.svg | 72 ++++++++++++++++ custom/hangar-logo.svg | 58 +++++++++++++ custom/logo-jirafeau.svg | 159 ------------------------------------ custom/style.css.php | 102 +++++++++++++++-------- custom/upload.svg | 84 ++++++++++++++----- 6 files changed, 260 insertions(+), 215 deletions(-) create mode 100644 custom/favico.ico create mode 100644 custom/hangar-logo-icon.svg create mode 100644 custom/hangar-logo.svg delete mode 100644 custom/logo-jirafeau.svg diff --git a/custom/favico.ico b/custom/favico.ico new file mode 100644 index 0000000000000000000000000000000000000000..f533a755037c4a4dbe532b6156bcb40aa75ce67c GIT binary patch literal 5336 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 literal 0 HcmV?d00001 diff --git a/custom/hangar-logo-icon.svg b/custom/hangar-logo-icon.svg new file mode 100644 index 0000000..aebee82 --- /dev/null +++ b/custom/hangar-logo-icon.svg @@ -0,0 +1,72 @@ + + + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/custom/hangar-logo.svg b/custom/hangar-logo.svg new file mode 100644 index 0000000..fb77cf6 --- /dev/null +++ b/custom/hangar-logo.svg @@ -0,0 +1,58 @@ + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/custom/logo-jirafeau.svg b/custom/logo-jirafeau.svg deleted file mode 100644 index 1076fb2..0000000 --- a/custom/logo-jirafeau.svg +++ /dev/null @@ -1,159 +0,0 @@ - - -]> - - - - - - - - - - - - - diff --git a/custom/style.css.php b/custom/style.css.php index 183364c..6d8814f 100644 --- a/custom/style.css.php +++ b/custom/style.css.php @@ -30,7 +30,7 @@ header('Content-type: text/css'); /* ========================================================================== Summary - + 0 = CSS variables 1 = Basic Style 2 = Copyright 3 = Options @@ -42,15 +42,43 @@ header('Content-type: text/css'); ========================================================================== */ + +/* ========================================================================== + 0 = CSS variables + ========================================================================== */ + +:root{ + --color-hangar: rgb(0,0,255); + --color-body: rgb(20,20,20); + --color-secondary: rgb(90,90,90) ; + --color-background: rgb(250,250,250); + --color-body-invert: rgb(200,200,200); + --color-background-invert: rgb(10,10,10); + --color-black: rgb(0,0,0); + --color-white: rgb(255,255,255); + --color-grey-dark: rgb(110,110,110); + --color-grey-light: rgb(230,230,230); + --color-error: rgb(230,50,50); + --global-padding: 1rem; + --global-margin: 1rem; + --global-border: 0.05rem solid var(--color-grey-light); + --global-radius: 1rem; + --font-hangar: Helvetica-Rounded, arial rounded, helvetica, arial, sans-serif; + --logo-hangar: url('https://grafica.hangar.org/assets/img/hangar-logo.svg'); +} + + + /* ========================================================================== 1 = Basic Style ========================================================================== */ body { - background: #efebe9; - font-family: Arial, sans-serif; + background: var(--color-background); + font-family: var(--font-hangar); margin: 0; line-height: 1.5; + color: var(--color-body); } #content { @@ -59,8 +87,10 @@ body { h1 a { display: block; - background: url(logo-jirafeau.svg) no-repeat; - background-size: 100% 100%; + background-image: var(--logo-hangar); + background-repeat: no-repeat; + background-size: contain; + background-position:center; text-indent: -9999px; width: 194px; height: 185px; @@ -71,16 +101,16 @@ h1 a { h2 { text-align: center; - color: #795548; + color: --color-secondary; } fieldset { border: 0; padding: 1.5em; margin: 0 auto; - border-radius: 8px; + border-radius: var(--global-radius); width: 20em; - border: 7px dashed #bcaaa4; + border: var(--global-border); min-height: 15em; min-width: 30em; position: relative; @@ -88,8 +118,8 @@ fieldset { legend { padding: 0.5em 1em; - background: #efebe9; - color: #663D1C; + background: var(--color-background); + color: var(--color-hangar); font-size: 1.2em; display: block; min-width: 8em; @@ -97,7 +127,7 @@ legend { } table a { - color: #000; + color: var(--color-body); } table a:hover, @@ -106,12 +136,12 @@ table a:focus { } input[type="submit"] { - background: #0D9CB2; + background: var(--color-seondary); border: 0; padding: 0.4em 2.2em; font-size: 1.1em; - color: #FFF; - border-bottom: 5px solid #085B69; + color: var(--color-white); + border-bottom: var(--global-border); cursor: pointer; margin: 10px; } @@ -130,8 +160,8 @@ input[type="submit"]:hover, input[type="submit"]:focus { border: 0; position: relative; - background: #085B69; - border-bottom: 5px solid #0D9CB2; + background: var(--color-grey-light); + border-bottom: var(--global-border); margin-bottom: 15px; } @@ -149,7 +179,7 @@ input[type="submit"]:focus { } #upload fieldset:hover { - border-color: #663D1C; + border-color: var(--color-hangar); } #upload > form { @@ -183,12 +213,12 @@ input[type="submit"]:focus { #copyright { text-align: center; font-size: 0.8em; - color: #795548; + color: var(--color-hangar); margin: 3em auto; } #copyright a { - color: #795548; + color: var(--color-hangar); text-decoration: none; } @@ -233,12 +263,12 @@ input[type="submit"]:focus { .info, .error { text-align: center; - color: #795548; + color: var(--color-hangar); padding-left: 3em; } #upload_finished > p:nth-child(1) { - color: #0D9CB2; + color: var(--color-seondary); font-weight: bold; } @@ -248,13 +278,13 @@ input[type="submit"]:focus { #upload_finished a { text-decoration: none; - color: #795548; + color: var(--color-hangar); } #uploading a { font-weight: bold; text-decoration: none; - color: #795548; + color: var(--color-hangar); } #uploaded_percentage { @@ -271,7 +301,7 @@ input[type="submit"]:focus { .message, .error { - color: #d55548; + color: var(--color-error); font-style: italic; font-weight: bold; } @@ -283,7 +313,7 @@ input[type="submit"]:focus { #upload_image_email { padding-left: 20px; padding-bottom: 15px; - background: url(email.png) no-repeat; + background: url('email.png') no-repeat; } /* ========================================================================== @@ -292,7 +322,7 @@ input[type="submit"]:focus { textarea[readonly="readonly"] { border: 0; - color: #795548; + color: var(--color-hangar); font-family: Arial, sans-serif; background: none; margin: auto; @@ -302,14 +332,14 @@ textarea[readonly="readonly"] { textarea[readonly="readonly"] + p, textarea[readonly="readonly"] + p + p { text-align: center; - color: #795548; + color: var(--color-hangar); } textarea[readonly="readonly"] + p a, textarea[readonly="readonly"] + p + p a { font-weight: bold; text-decoration: none; - color: #795548; + color: var(--color-hangar); } textarea[readonly="readonly"] + p a:hover, @@ -327,7 +357,7 @@ textarea[readonly="readonly"] + p + p a:focus { #install + fieldset { width: auto; max-width: 50em; - border: 7px dashed #bcaaa4; + border: var(--global-border); } #install table, @@ -348,7 +378,7 @@ textarea[readonly="readonly"] + p + p a:focus { #install table form:nth-child(odd), #install + fieldset tr:nth-child(odd) { - background: #bcaaa4; + background: var(--color-grey-light); } #install fieldset > form { @@ -376,7 +406,7 @@ textarea[readonly="readonly"] + p + p a:focus { #install + fieldset td:first-child input[type="submit"] { background: none; padding: 0; - color: #000; + color: var(--color-body); font-weight: bold; border-bottom: 0; } @@ -394,20 +424,20 @@ textarea[readonly="readonly"] + p + p a:focus { #admin + fieldset { width: auto; max-width: 60em; - border: 7px dashed #bcaaa4; + border: var(--global-border); } #admin table, #admin + fieldset table { width: 100%; border-collapse: collapse; - border-bottom: 2px solid #FFF; + border-bottom: var(--global-border); } #admin td, #admin + fieldset td { padding: 0.5em 1em; - border: 2px solid #FFF; + border: var(--global-border); border-bottom: 0; } @@ -417,7 +447,7 @@ textarea[readonly="readonly"] + p + p a:focus { #admin table form:nth-child(odd), #admin + fieldset tr:nth-child(odd) { - background: #bcaaa4; + background: var(--color-grey-light); } #admin fieldset > form { @@ -445,7 +475,7 @@ textarea[readonly="readonly"] + p + p a:focus { #admin + fieldset td:first-child input[type="submit"] { background: none; padding: 0; - color: #000; + color: var(--color-body); font-weight: bold; border-bottom: 0; } diff --git a/custom/upload.svg b/custom/upload.svg index b4c4e19..56efb54 100644 --- a/custom/upload.svg +++ b/custom/upload.svg @@ -1,26 +1,70 @@ - - -]> - - - - + + + + + - - - + + + - - + +