Forms styles

static/cranefly/css/cranefly.css

@@ -852,6 +852,7 @@ a.label:hover,a.label:focus,a.badge:hover,a.badge:focus{color:#ffffff;text-decor
 #wrap{min-height:100%;height:auto !important;height:100%;margin:0 auto -100px;}#wrap .container-primary{padding-top:20px;padding-bottom:120px;}
 footer{background-color:#eeeeee;border-top:1px solid #dadada;height:80px;padding:11px 19px;}footer hr{border-bottom:1px solid #dadada;margin:10px 0px;}
 footer .credits{color:#555555;font-size:90%;}footer .credits a:link,footer .credits a:active,footer .credits a:visited,footer .credits a:hover{color:#555555;}
+.header-primary{background-color:#e7e7e7;border-bottom:1px solid #d7d7d7;margin-top:0px;padding-top:10px;}.header-primary h1{font-size:29.75px;font-weight:normal;}
 .navbar .navbar-inner{background:none;background-color:#f3f3f3;border-bottom:1px solid #dfdfdf;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.navbar .navbar-inner .brand{text-shadow:none;}.navbar .navbar-inner .brand:link,.navbar .navbar-inner .brand:active,.navbar .navbar-inner .brand:visited,.navbar .navbar-inner .brand:hover{color:#0088cc;font-size:200%;}.navbar .navbar-inner .brand:link span,.navbar .navbar-inner .brand:active span,.navbar .navbar-inner .brand:visited span,.navbar .navbar-inner .brand:hover span{color:#c0c0c0;}
 .navbar .navbar-inner .navbar-search-form{background-color:#ffffff;border:1px solid #dfdfdf;border-radius:3px;margin-top:9px;color:#333333;}.navbar .navbar-inner .navbar-search-form input{border:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;margin:0px;}
 .navbar .navbar-inner .navbar-search-form button{margin:0px;opacity:0.3;filter:alpha(opacity=30);}.navbar .navbar-inner .navbar-search-form button:hover,.navbar .navbar-inner .navbar-search-form button:active{opacity:0.8;filter:alpha(opacity=80);}
@@ -875,13 +876,25 @@ footer .breadcrumb li.active{color:#555555;}
 .messages-list .alert-info{text-shadow:0px 1px 0px #0b516e;}
 .messages-list .alert-success{text-shadow:0px 1px 0px #2e572e;}
 .messages-list .alert-error{text-shadow:0px 1px 0px #742c23;}
+.form-container{background:#ffffff;border:1px solid #e7e7e7;border-radius:3px;margin:0px -21px;margin-bottom:20px;padding:20px;padding-top:-15px;}.form-container .form-header{border-bottom:1px solid #e7e7e7;margin-top:-20px;margin-bottom:20px;padding:10px 0px;}.form-container .form-header h1{margin:0px;padding:0px;font-size:17.5px;}
+.form-container form{margin:0px;}.form-container form fieldset{border-top:1px solid #e7e7e7;padding-top:10px;}.form-container form fieldset.first{border-top:none;padding-top:0px;}
+.form-container form .control-label{font-weight:bold;}
+.form-container .form-actions{border-radius:0px 0px 3px 3px;margin:-20px;margin-top:10px;}
+.btn{background:none;background-color:#fbfbfb;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;font-weight:bold;}.btn:hover,.btn:active{background-color:#ffffff;border-color:#a6a6a6;}
+.btn.btn-primary{background-color:#3c85a3;border-color:#357690;text-shadow:0px 1px 0px #27576b;}.btn.btn-primary:hover,.btn.btn-primary:active{background-color:#268eb9;border-color:#217ea4;}
+.btn.btn-info{background-color:#587987;border-color:#4e6b78;text-shadow:0px 1px 0px #3a5059;}.btn.btn-info:hover,.btn.btn-info:active{background-color:#478098;border-color:#3f7286;}
+.btn.btn-success{background-color:#589358;border-color:#4e834e;text-shadow:0px 1px 0px #2f6f2f;}.btn.btn-success:hover,.btn.btn-success:active{background-color:#46a546;border-color:#3e933e;}
+.btn.btn-warning{background-color:#e59119;border-color:#ce8217;text-shadow:0px 1px 0px #ad6704;}.btn.btn-warning:hover,.btn.btn-warning:active{background-color:#f89406;border-color:#df8505;}
+.btn.btn-danger{background-color:#cf402e;border-color:#ba3a29;text-shadow:0px 1px 0px #902d20;}.btn.btn-danger:hover,.btn.btn-danger:active{background-color:#e82c15;border-color:#d12813;}
+.btn.btn-inverse{background-color:#333333;border-color:#262626;text-shadow:0px 1px 0px #0d0d0d;}.btn.btn-inverse:hover,.btn.btn-inverse:active{background-color:#262626;border-color:#1a1a1a;}
+.btn.btn-link{opacity:0.6;filter:alpha(opacity=60);color:#333333;}.btn.btn-link:hover,.btn.btn-link:active{opacity:0.9;filter:alpha(opacity=90);}
 .error-page{text-align:center;}.error-page .error-color{color:#cf402e;}
 .error-page .error-ban-reason{border:1px solid #cf402e;border-radius:3px;background-color:#fbeeed;background-image:repeating-linear-gradient(45deg, transparent, transparent 5px, #fdf6f5 5px, #fdf6f5 10px);-webkit-box-shadow:0px 0px 0px 3px #e38b80;-moz-box-shadow:0px 0px 0px 3px #e38b80;box-shadow:0px 0px 0px 3px #e38b80;padding:11px 19px;text-align:left;}.error-page .error-ban-reason :last-child{margin-bottom:0px;padding-bottom:0px;}
 .error-page .error-ban-expires{color:#cf402e;font-weight:bold;}
 .error-page .error-protips{margin-top:40px;}.error-page .error-protips a:link,.error-page .error-protips a:visited{background-color:#333333;border:1px solid #000000;border-radius:5px;margin:2px 10px;opacity:0.7;filter:alpha(opacity=70);padding:11px 19px;color:#ffffff;font-weight:bold;text-decoration:none;}
 .error-page .error-protips a:hover,.error-page .error-protips a:active{opacity:1;filter:alpha(opacity=100);}
 .index-sidebar{position:relative;bottom:9px;}
-.index-category{background-color:#ffffff;border:1px solid #d5d5d5;border-radius:2px;-webkit-box-shadow:0px 0px 0px 3px #eeeeee;-moz-box-shadow:0px 0px 0px 3px #eeeeee;box-shadow:0px 0px 0px 3px #eeeeee;margin-bottom:20px;}.index-category table{margin:0px;}.index-category table caption{background-color:#3c85a3;border:1px solid #357691;border-radius:2px 2px 0px 0px;margin:-1px;padding:2px 10px;color:#ffffff;font-size:11.9px;font-weight:bold;text-align:left;text-shadow:0px 1px 0px #1a3946;}
+.index-category{background-color:#ffffff;border:1px solid #d5d5d5;border-radius:2px;-webkit-box-shadow:0px 0px 0px 3px #eeeeee;-moz-box-shadow:0px 0px 0px 3px #eeeeee;box-shadow:0px 0px 0px 3px #eeeeee;margin-bottom:20px;}.index-category table{margin:0px;}.index-category table caption{background-color:#3c85a3;border:1px solid #357690;border-radius:2px 2px 0px 0px;margin:-1px;padding:2px 10px;color:#ffffff;font-size:11.9px;font-weight:bold;text-align:left;text-shadow:0px 1px 0px #1a3946;}
 .index-category table .forum-icon{width:1%;}.index-category table .forum-icon .forum-icon-wrap{background-color:#8c8c8c;border:1px solid #737373;border-radius:3px;padding:3px 4px;}.index-category table .forum-icon .forum-icon-wrap.forum-icon-new{background-color:#0088cc;border:1px solid #006699;}
 .index-category table .forum-icon .forum-icon-wrap.forum-icon-redirect{background-color:#9466c6;border:1px solid #7a43b6;}
 .index-category table .forum-main h3{float:left;margin:0px;padding:0px;font-size:17.5px;line-height:20px;}.index-category table .forum-main h3 a:link,.index-category table .forum-main h3 a:visited{color:#8c8c8c;}

static/cranefly/css/cranefly.less

@@ -69,6 +69,8 @@
 @import "cranefly/navbar.less";
 @import "cranefly/breadcrumbs.less";
 @import "cranefly/messages.less";
+@import "cranefly/forms.less";
+@import "cranefly/buttons.less";
 @import "cranefly/error.less";
 @import "cranefly/index.less";
 

static/cranefly/css/cranefly/buttons.less

@@ -0,0 +1,98 @@
+// Buttons styles
+// -------------------------
+
+.btn {
+  background: none;
+  background-color: @bodyBackground;
+  .box-shadow(none);
+
+  font-weight: bold;
+
+
+  &:hover, &:active {
+    background-color: @white;
+    border-color: lighten(@grayLight, 5%);
+  }
+
+  &.btn-primary {
+    background-color: @bluePale;
+    border-color: darken(@bluePale, 5%);
+
+    text-shadow: 0px 1px 0px darken(@bluePale, 15%);
+
+    &:hover, &:active {
+      background-color: saturate(@bluePale, 20%);
+      border-color: darken(saturate(@bluePale, 20%), 5%);
+    }
+  }
+
+  &.btn-info {
+    background-color: desaturate(@bluePale, 25%);
+    border-color: darken(desaturate(@bluePale, 25%), 5%);
+
+    text-shadow: 0px 1px 0px darken(desaturate(@bluePale, 25%), 15%);
+
+    &:hover, &:active {
+      background-color: desaturate(@bluePale, 10%);
+      border-color: darken(desaturate(@bluePale, 10%), 5%);
+    }
+  }
+
+  &.btn-success {
+    background-color: desaturate(@green, 15%);
+    border-color: darken(desaturate(@green, 15%), 5%);
+
+    text-shadow: 0px 1px 0px darken(@green, 15%);
+
+    &:hover, &:active {
+      background-color: @green;
+      border-color: darken(@green, 5%);
+    }
+  }
+
+  &.btn-warning {
+    background-color: desaturate(@orange, 15%);
+    border-color: darken(desaturate(@orange, 15%), 5%);
+
+    text-shadow: 0px 1px 0px darken(@orange, 15%);
+
+    &:hover, &:active {
+      background-color: @orange;
+      border-color: darken(@orange, 5%);
+    }
+  }
+
+  &.btn-danger {
+    background-color: @red;
+    border-color: darken(@red, 5%);
+
+    text-shadow: 0px 1px 0px darken(@red, 15%);
+
+    &:hover, &:active {
+      background-color: saturate(@red, 20%);
+      border-color: darken(saturate(@red, 20%), 5%);
+    }
+  }
+
+  &.btn-inverse {
+    background-color: @textColor;
+    border-color: darken(@textColor, 5%);
+
+    text-shadow: 0px 1px 0px darken(@textColor, 15%);
+
+    &:hover, &:active {
+      background-color: darken(@textColor, 5%);
+      border-color: darken(@textColor, 10%);
+    }
+  }
+
+  &.btn-link {
+    .opacity(60);
+
+    color: @textColor;
+
+    &:hover, &:active {
+      .opacity(90);
+    }
+  }
+}

static/cranefly/css/cranefly/forms.less

@@ -0,0 +1,52 @@
+// Forms themes
+// -------------------------
+
+// Full-page form
+// -------------------------
+.form-container {
+  background: @white;
+  border: 1px solid darken(@bodyBackground, 8%);
+  border-radius: @baseBorderRadius;
+  margin: 0px ((@baseLineHeight * -1) - 1px);
+  margin-bottom: @baseLineHeight;
+  padding: @baseLineHeight;
+  padding-top: @baseLineHeight * -0.75;
+
+  .form-header {
+		border-bottom: 1px solid darken(@bodyBackground, 8%);
+		margin-top: @baseLineHeight * -1;
+		margin-bottom: @baseLineHeight;
+		padding: (@baseLineHeight / 2) 0px;
+
+		h1 {
+		  margin: 0px;
+		  padding: 0px;
+
+		  font-size: @fontSizeLarge;
+		}
+  }
+
+  form {
+	margin: 0px;
+
+	fieldset {
+	  border-top: 1px solid darken(@bodyBackground, 8%);
+	  padding-top: @baseLineHeight * 0.5;
+
+	  &.first {
+	  	border-top: none;
+	  	padding-top: 0px;
+	  }
+	}
+
+	.control-label {
+	  font-weight: bold;
+	}
+  }
+
+  .form-actions {
+	border-radius: 0px 0px @baseBorderRadius @baseBorderRadius;
+	margin: (@baseLineHeight * -1);
+	margin-top: @baseLineHeight * 0.5;
+  }
+}

static/cranefly/css/cranefly/scaffolding.less

@@ -38,4 +38,18 @@ footer {
       color: @gray;
     }
   }
+}
+
+// Primary header
+// -------------------------
+.header-primary {
+  background-color: @pageHeaderBackground;
+  border-bottom: 1px solid @pageHeaderBorder;
+  margin-top: 0px;
+  padding-top: @baseLineHeight / 2;
+
+  h1 {
+    font-size: @fontSizeLarge * 1.7;
+    font-weight: normal;
+  }
 }

static/cranefly/css/variables.less

@@ -21,6 +21,7 @@
 // Accent colors
 // -------------------------
 @blue:                  #049cdb;
+@bluePale:              #3c85a3;
 @blueDark:              #0064cd;
 @green:                 #46a546;
 @red:                   #cf402e;
@@ -74,6 +75,11 @@
 @borderRadiusLarge:     5px;
 @borderRadiusSmall:     2px;
 
+// Page header
+// -------------------------
+@pageHeaderBackground:              darken(@bodyBackground, 8%);
+@pageHeaderBorder:                  darken(@bodyBackground, 14%);
+
 // Items styles
 // -------------------------
 @itemOldColor:                      darken(@grayLight, 5%);
@@ -84,7 +90,7 @@
 // -------------------------
 @categoryBackground:                lighten(@bodyBackground, 5%);
 @categoryBorder:                    darken(@bodyBackground, 15%);
-@categoryHeader:                    desaturate(@blue, 50%);
+@categoryHeader:                    @bluePale;
 @categoryShadow:                    darken(@bodyBackground, 5%);
 
 @forumIconSize:                     4px;

templates/cranefly/register.html

@@ -9,18 +9,28 @@
 {% block content %}
 <div class="row">
   <div class="span8 offset2">
-    <div class="page-header">
-      <h1>{% trans %}Register new account{% endtrans %}</h1>
-    </div>
-    {% if message %}{{ macros.draw_message(message, 'alert-form') }}{% endif %}
-    <form action="{% url 'register' %}" method="post">
-      <div class="form-container">
-        {{ form_theme.form_widget(form, width=8) }}
+    <div class="form-container">
+
+      <div class="form-header">
+        <h1>{% trans %}Register new account{% endtrans %}</h1>
       </div>
-      <div class="form-actions">
-        <button type="submit" class="btn btn-primary">{% trans %}Register account{% endtrans %}</button>
+
+      {% if message %}
+      <div class="messages-list">
+        {{ macros.draw_message(message) }}
       </div>
-    </form>
+      {% endif %}
+
+      <form action="{% url 'register' %}" method="post">
+        <div class="form-fields">
+          {{ form_theme.form_widget(form, width=8) }}
+        </div>
+        <div class="form-actions">
+          <button type="submit" class="btn btn-primary">{% trans %}Register account{% endtrans %}</button>
+        </div>
+      </form>
+
+    </div>
   </div>
 </div>
 {% endblock %}