From 1c2420f45752e9431be5c40153c9b8db496b688b Mon Sep 17 00:00:00 2001 From: Jesper Johansen Date: Mon, 15 Oct 2012 00:39:06 +0200 Subject: [PATCH] Forms part 2: Comment form styling --- less/forms.less | 128 ++++++++++++++++++++++------------------------ style.dev.css | 133 +++++++++++++++++++++++++----------------------- 2 files changed, 130 insertions(+), 131 deletions(-) diff --git a/less/forms.less b/less/forms.less index 67ae4dc..7bf5dfc 100644 --- a/less/forms.less +++ b/less/forms.less @@ -281,15 +281,67 @@ html { } } -// #respond p.form-email > label { -// padding-left: 18px; -// } +/* ============================================================================= + Layout: Comment form + ========================================================================== */ + +#respond { + background: #f2f7fc ~"url(images/content-orange-line.png)" repeat-x; + color: @gray; + margin: (@gutterWidth + 20px) 0 0; + padding: @smallGutterWidth; + + // Logged-in text + .log-in-out { + font-size: 18px; + text-align: center; + } +} + +#reply-title { + .orange-box; + font-size: 26px; + letter-spacing: -1px; + text-align: center; + margin: -40px 0 @smallGutterWidth; +} + +#cancel-comment-reply-link { + font-size: 18px; + font-style: italic; + font-weight: normal; + padding-left: 10px; +} + +/* Comment form fields */ +#commentform { + .form-author { + float: left; + width: 48%; + } + + .form-email { + float: right; + width: 48%; + } + + .form-url { + clear: both; + } + + input[type="text"], + input[type="email"], + input[type="url"], + textarea { + display: block; + width: 100%; + } +} + +#submit { + .buttonBackground(#08c, spin(#08c, 20%), @white, fade(@black, 40%)); +} -// span.required { -// color: #555; -// font: bold 16px sans-serif; -// display: none; /* Hides the required * star */ -// } // /** // * Search form @@ -407,63 +459,3 @@ html { // margin-left: 5px; // } - - -/* ============================================================================= - Layout: Comment form - ========================================================================== */ - -#respond { - background: #f2f7fc url(images/content-orange-line.png) repeat-x; - border-radius: 0 0 5px 5px; - color: #555; - margin: 25px 0 25px 0; - padding: 20px 20px 0 20px; - overflow: hidden; -} - - /* Logged-in text */ - #respond .log-in-out { - color: #777; - font-size: 14px; - } - - /* Cancel reply link */ - #reply-title small a { - font-size: 14px; - font-style: italic; - padding-left: 10px; - } - -/* Comment form paragraphs */ -#respond p.form-author { - float: left; - width: 50%; -} - -#respond p.form-email { - float: right; - width: 50%; -} - -#respond p.form-url { - clear: both; -} - -/* Comment form inputs and textarea elements */ -#respond input[type="text"], -#respond input[type="email"], -#respond input[type="url"], -#respond textarea { - display: block; - width: 98%; -} - -#respond p.form-author input[type="text"] { - width: 90%; -} - -#respond p.form-email input[type="email"] { - width: 90%; - float: right; -} diff --git a/style.dev.css b/style.dev.css index be1a8ea..2a5902e 100644 --- a/style.dev.css +++ b/style.dev.css @@ -1408,6 +1408,10 @@ table caption { padding-bottom: 25px; position: relative; } +.singular .hentry { + border-bottom: none; + padding-bottom: 0; +} .sticky { background: #ffffdf; padding: 25px; @@ -2516,64 +2520,91 @@ html .btn-inverse:hover { background: #d54e21; border-color: #a93e1a; } -@media screen and (min-width: 980px) { - #topbar .search { - background: #262626 url(less/less/images/topbar.png) repeat; - border: none; - box-shadow: none; - float: right; - margin-top: 12px; - padding: 0; - } -} /* ============================================================================= Layout: Comment form ========================================================================== */ #respond { - background: #f2f7fc url(less/less/images/content-orange-line.png) repeat-x; - border-radius: 0 0 5px 5px; - color: #555; - margin: 25px 0 25px 0; - padding: 20px 20px 0 20px; - overflow: hidden; + background: #f2f7fc url(images/content-orange-line.png) repeat-x; + color: #555555; + margin: 60px 0 0; + padding: 25px; } -/* Logged-in text */ #respond .log-in-out { - color: #777; - font-size: 14px; + font-size: 18px; + text-align: center; } -/* Cancel reply link */ -#reply-title small a { - font-size: 14px; +#reply-title { + background-color: #ffffdf; + border: double #eedbbb; + border-width: 4px 0; + margin: 0 0 40px; + padding: 10px 25px; + font-size: 26px; + letter-spacing: -1px; + text-align: center; + margin: -40px 0 25px; +} +#cancel-comment-reply-link { + font-size: 18px; font-style: italic; + font-weight: normal; padding-left: 10px; } -/* Comment form paragraphs */ -#respond p.form-author { +/* Comment form fields */ +#commentform .form-author { float: left; - width: 50%; + width: 48%; } -#respond p.form-email { +#commentform .form-email { float: right; - width: 50%; + width: 48%; } -#respond p.form-url { +#commentform .form-url { clear: both; } -/* Comment form inputs and textarea elements */ -#respond input[type="text"], -#respond input[type="email"], -#respond input[type="url"], -#respond textarea { +#commentform input[type="text"], +#commentform input[type="email"], +#commentform input[type="url"], +#commentform textarea { display: block; - width: 98%; + width: 100%; } -#respond p.form-author input[type="text"] { - width: 90%; +#submit { + background-color: #006dcc; + background-image: -moz-linear-gradient(top, #0088cc, #0044cc 100%); + background-image: -webkit-linear-gradient(top, #0088cc, #0044cc 100%); + background-image: -o-linear-gradient(top, #0088cc, #0044cc 100%); + background-image: linear-gradient(top, #0088cc, #0044cc 100%); + background-repeat: repeat-x; + border: 1px solid; + border-color: #0044cc #0044cc #002a80; + color: #ffffff; + text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); } -#respond p.form-email input[type="email"] { - width: 90%; - float: right; +#submit:hover { + background-color: #0063b9; + background-image: -moz-linear-gradient(top, #007ebd, #003bb3 100%); + background-image: -webkit-linear-gradient(top, #007ebd, #003bb3 100%); + background-image: -o-linear-gradient(top, #007ebd, #003bb3 100%); + background-image: linear-gradient(top, #007ebd, #003bb3 100%); + color: #ffffff; + -webkit-transition: background-position 100ms linear; + -moz-transition: background-position 100ms linear; + -o-transition: background-position 100ms linear; + transition: background-position 100ms linear; +} +#submit:active { + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); +} +@media screen and (min-width: 980px) { + #topbar .search { + background: #262626 url(less/less/images/topbar.png) repeat; + border: none; + box-shadow: none; + float: right; + margin-top: 12px; + padding: 0; + } } /* ============================================================================= Components: Message boxes @@ -2948,30 +2979,6 @@ html .btn-inverse:hover { width: 100% !important; float: none !important; } - /* Make the comment form better */ - #respond p.form-email, - #respond p.form-author { - float: none; - width: 100%; - } - #respond p.form-author input[type="text"], - #respond p.form-email input[type="text"] { - width: 98%; - } - #respond p.form-email input[type="text"] { - float: none; - } - #respond label { - font-size: 16px; - } - #respond p.form-email > label { - padding-left: 0; - } - #respond #submit { - font-size: 18px; - width: 100%; - padding: 25px; - } } /* ============================================================================= Print styles