From cf21b9a1436cb5e5efdf0b006fa07c63d8c9de60 Mon Sep 17 00:00:00 2001 From: Antonio De Lucreziis Date: Wed, 22 Dec 2021 23:32:04 +0100 Subject: [PATCH] Migliorati bottoni per pagina di login --- public/style.css | 122 ++++++++++++++++++++++-------------------- public/theme-dark.css | 32 ++++++++++- views/home.html | 4 +- views/login.html | 9 ++-- 4 files changed, 103 insertions(+), 64 deletions(-) diff --git a/public/style.css b/public/style.css index d829b83..baaebe2 100644 --- a/public/style.css +++ b/public/style.css @@ -7,7 +7,9 @@ --bg-dark: hsl(220, 5%, 93%); --bg-darker: hsl(220, 5%, 90%); - --bg-darker-2: #dadada; + --bg-darker-2: #d5d5d5; + --bg-darker-2-1: #c8c8c8; + --bg-darker-3: #c0c0c0; --accent-1: #278542; --accent-1-fg: #154d24; @@ -22,6 +24,14 @@ --font-weight-bold: 700; --shadow-1: 0 0 16px 0 #00000018; + + --text-input-bg: #fff; + + --bg-darker-2-1: #c8c8c8; + --accent-2-lighter: #5cc969; + --accent-2: #4eaa59; + --accent-2-darker: #2e974c; + --accent-2-darkest: #002d0d; } * { @@ -352,49 +362,43 @@ a:hover { /* Buttons */ button, .button { - font-family: var(--font-sf); - font-weight: var(--font-weight-medium); - font-size: 17px; - - background: #278542; - border: none; - height: 2rem; - padding: 0 1rem; - - border-right: 5px solid #ecc333; - position: relative; - - z-index: 2; - color: #111; - transition: all 100ms ease-in-out; - box-shadow: 0 0 0 0 transparent; - cursor: pointer; -} - -button::before, .button::before { - position: absolute; - content: ""; - top: -5px; - bottom: -5px; - background: #278542; - width: 100%; - left: 0; - z-index: -1; - border-radius: 2px; - transition: all 100ms ease-in-out; - -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 5px, black 6px), radial-gradient(circle at top right, transparent 0, transparent 5px, black 6px), radial-gradient(circle at bottom left, transparent 0, transparent 5px, black 6px), radial-gradient(circle at bottom right, transparent 0, transparent 5px, black 6px); - -webkit-mask-position: top left, top right, bottom left, bottom right; - -webkit-mask-repeat: no-repeat; - -webkit-mask-size: 50% 50%; - mask-image: radial-gradient(circle at top left, transparent 0, transparent 5px, black 6px), radial-gradient(circle at top right, transparent 0, transparent 5px, black 6px), radial-gradient(circle at bottom left, transparent 0, transparent 5px, black 6px), radial-gradient(circle at bottom right, transparent 0, transparent 5px, black 6px); - mask-position: top left, top right, bottom left, bottom right; - mask-repeat: no-repeat; - mask-size: 50% 50%; -} - -button:hover, input[type=submit]:hover, .button:hover { - color: #f22; - box-shadow: 0 4px 13px 0 #00000044; + font-family: var(--font-sf); + font-weight: var(--font-weight-medium); + font-size: 17px; + + /* gray variant #b3b3b3 */ + border: 1px solid var(--bg-darker-3); + /* gray variant #bfbfbf */ + background: var(--bg-darker-2); + /* gray variant #333333 */ + color: var(--fg); + + height: 2rem; + + border-radius: 4px; + + padding: 0 1rem; + + transition: all 100ms ease-in-out; + + box-shadow: 0 4px 8px 0 #00000022; + + cursor: pointer; +} + +button:hover, .button:hover { + background: var(--bg-darker-2-1); + box-shadow: 0 4px 8px 0 #00000033; +} + +button.primary { + border: 1px solid var(--accent-2-darker); + background: var(--accent-2); + color: var(--accent-2-darkest); +} + +button.primary:hover { + background: var(--accent-2-lighter); } /* Text Fields */ @@ -408,7 +412,9 @@ input[type=text], input[type=password] { font-size: 17px; - background: #fff; + background: var(--text-input-bg); + color: var(--fg); + border-radius: 4px; border: 1px solid var(--bg-darker-2); box-shadow: 0 0 8px 0 #00000020; @@ -424,30 +430,32 @@ input[type=password] { /* Forms */ -.field-set { +form .field { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +form .field-set { display: grid; - grid-template-columns: 1fr 2fr; + grid-template-columns: auto 1fr; grid-auto-rows: auto; - gap: 0.5rem; + gap: 0.5rem 1rem; padding: 1rem; } -.field-set label { +form .field-set label { grid-column: 1 / 2; + align-self: center; + justify-self: end; } -.field-set input { +form .field-set input { grid-column: 2 / 3; } -.field-set .alone { - grid-column: 1 / 3; - place-self: center; - - margin-top: 1rem; -} - /* Pages */ .page-home { diff --git a/public/theme-dark.css b/public/theme-dark.css index aa36c1e..7a5f3bc 100644 --- a/public/theme-dark.css +++ b/public/theme-dark.css @@ -1,11 +1,13 @@ body.dark-mode { --bg: #282828; - --fg: #6eac4d; + --fg: #a6cc92; + /* --fg: #6eac4d; */ --bg-dark: hsl(10, 10%, 20%); --bg-darker: hsl(10, 10%, 17%); --bg-darker-2: #1d2021; + --bg-darker-3: #101111; --accent-1: #154d24; --accent-1-fg: #278542; @@ -20,6 +22,34 @@ body.dark-mode { --font-weight-bold: 700; --shadow-1: 0 0 16px 0 #16182077; + + --text-input-bg: var(--bg-darker); + + --bg-darker-2-1: #c8c8c8; + --accent-2-lighter: #5cc969; + --accent-2: #4eaa59; + --accent-2-darker: #2e974c; + --accent-2-darkest: #002d0d; +} + +.dark-mode button { + border: 1px solid var(--bg-darker-2); + background: var(--bg-darker); + color: #afafaf; +} + +.dark-mode button:hover { + background: var(--bg-dark); +} + +.dark-mode button.primary { + border: 1px solid #113a1c; + background: #1e6732; + color: #b7e3c3; +} + +.dark-mode button.primary:hover { + background: #23773a; } .dark-mode nav .nav-logo img { diff --git a/views/home.html b/views/home.html index 6f67e32..3ec6635 100644 --- a/views/home.html +++ b/views/home.html @@ -8,7 +8,7 @@
- phc-logo + phc-logo

@@ -98,5 +98,5 @@

- + {{end}} \ No newline at end of file diff --git a/views/login.html b/views/login.html index d3fb2ea..57571b3 100644 --- a/views/login.html +++ b/views/login.html @@ -20,9 +20,10 @@ - - - + + +
+
@@ -35,7 +36,7 @@ email all'indirizzo {{ .Config.Email }}.

- * In realtà ancora non esiste il modulo + *In realtà il modulo ancora non esiste