From f14cbcfae22f196e466983b9702ac7cceeb86aba Mon Sep 17 00:00:00 2001 From: ulrich <not disclosed> Date: Sat, 17 Dec 2016 10:01:32 +0000 Subject: [PATCH] Gestalungsversuche mit Skeleton-Stilen im Benutzerformular --- web/ui/user.jsp | 8 +- web/ui/stile.css | 123 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 128 insertions(+), 3 deletions(-) diff --git a/web/ui/stile.css b/web/ui/stile.css new file mode 100644 index 0000000..b9a4c6e --- /dev/null +++ b/web/ui/stile.css @@ -0,0 +1,123 @@ + + + + +/* Buttons +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.button, +button, +input[type="submit"], +input[type="reset"], +input[type="button"] { + display: inline-block; + height: 38px; + padding: 0 30px; + color: #555; + text-align: center; + font-size: 11px; + font-weight: 600; + line-height: 38px; + letter-spacing: .1rem; + text-transform: uppercase; + text-decoration: none; + white-space: nowrap; + background-color: transparent; + border-radius: 4px; + border: 1px solid #bbb; + cursor: pointer; + box-sizing: border-box; } +.button:hover, +button:hover, +input[type="submit"]:hover, +input[type="reset"]:hover, +input[type="button"]:hover, +.button:focus, +button:focus, +input[type="submit"]:focus, +input[type="reset"]:focus, +input[type="button"]:focus { + color: #333; + border-color: #888; + outline: 0; } +.button.button-primary, +button.button-primary, +input[type="submit"].button-primary, +input[type="reset"].button-primary, +input[type="button"].button-primary { + color: #FFF; + background-color: #33C3F0; + border-color: #33C3F0; } +.button.button-primary:hover, +button.button-primary:hover, +input[type="submit"].button-primary:hover, +input[type="reset"].button-primary:hover, +input[type="button"].button-primary:hover, +.button.button-primary:focus, +button.button-primary:focus, +input[type="submit"].button-primary:focus, +input[type="reset"].button-primary:focus, +input[type="button"].button-primary:focus { + color: #FFF; + background-color: #1EAEDB; + border-color: #1EAEDB; } + +/* Forms +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +input[type="email"], +input[type="number"], +input[type="search"], +input[type="text"], +input[type="tel"], +input[type="url"], +input[type="password"], +textarea, +select { + height: 38px; + padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ + background-color: #fff; + border: 1px solid #D1D1D1; + border-radius: 4px; + box-shadow: none; + box-sizing: border-box; } +/* Removes awkward default styles on some inputs for iOS */ +input[type="email"], +input[type="number"], +input[type="search"], +input[type="text"], +input[type="tel"], +input[type="url"], +input[type="password"], +textarea { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; } +textarea { + min-height: 65px; + padding-top: 6px; + padding-bottom: 6px; } +input[type="email"]:focus, +input[type="number"]:focus, +input[type="search"]:focus, +input[type="text"]:focus, +input[type="tel"]:focus, +input[type="url"]:focus, +input[type="password"]:focus, +textarea:focus, +select:focus { + border: 1px solid #33C3F0; + outline: 0; } +label, +legend { + display: block; + margin-bottom: .5rem; + font-weight: 600; } +fieldset { + padding: 0; + border-width: 0; } +input[type="checkbox"], +input[type="radio"] { + display: inline; } +label > .label-body { + display: inline-block; + margin-left: .5rem; + font-weight: normal; } \ No newline at end of file diff --git a/web/ui/user.jsp b/web/ui/user.jsp index ddf6a87..09a13bc 100644 --- a/web/ui/user.jsp +++ b/web/ui/user.jsp @@ -10,13 +10,15 @@ <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Benutzer</title> + <link rel="stylesheet" type="text/css" href="stile.css"> </head> <body> <h1>Benutzer</h1> <div> - <input type="text" size="20" maxlength="20" name="anmeldename" id="anmeldename"> - <input type="password" size="20" maxlength="20" name="kennwort" id="kennwort"> - <input type="password" size="20" maxlength="20" name="kennwortw" id="kennwortw"> + <input type="text" size="20" maxlength="20" placeholder="Anmeldename" name="anmeldename" id="anmeldename"> + <input type="password" size="20" maxlength="20" placeholder="Kennwort" name="kennwort" id="kennwort"> + <input type="password" size="20" maxlength="20" placeholder="Wiederholung" name="kennwortw" id="kennwortw"> + <button>OK</button> </div> </body> </html> -- Gitblit v1.9.3