summaryrefslogtreecommitdiff
path: root/cyborg
diff options
context:
space:
mode:
authorThomas Park <thomas@thomaspark.me>2012-02-18 12:22:56 -0500
committerThomas Park <thomas@thomaspark.me>2012-02-18 12:22:56 -0500
commitc05d1fb37305fba16dd9fed123ecf667a18b9f8b (patch)
treef1f4083b95e0b3cc209b544c3d816292fad42aa5 /cyborg
parent4f86f04aeae7b6e52e60c28d16d138ed9137ac87 (diff)
tweaked Cyborg alerts and form inputs
Diffstat (limited to 'cyborg')
-rw-r--r--cyborg/bootstrap.css88
-rw-r--r--cyborg/bootstrap.min.css25
-rwxr-xr-xcyborg/bootswatch.less88
3 files changed, 172 insertions, 29 deletions
diff --git a/cyborg/bootstrap.css b/cyborg/bootstrap.css
index 8809d712..4dc84a84 100644
--- a/cyborg/bootstrap.css
+++ b/cyborg/bootstrap.css
@@ -3517,11 +3517,11 @@ textarea {
font-family: 'Droid Sans', sans-serif;
color: #999999;
}
-.navbar .search-query::-moz-placeholder {
+.navbar .search-query:-moz-placeholder {
font-family: 'Droid Sans', sans-serif;
color: #999999;
}
-.navbar .search-query:::-webkit-input-placeholder {
+.navbar .search-query::-webkit-input-placeholder {
font-family: 'Droid Sans', sans-serif;
}
blockquote {
@@ -3561,12 +3561,20 @@ body {
.navbar .brand {
padding: 12px 20px 8px;
}
-.navbar .search-query {
- background: #000000;
+.navbar .search-query, .navbar .search-query:focus, .navbar .search-query.focused {
+ color: #adafae;
+ text-shadow: none;
+ background-color: #222;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}
+.navbar .search-query :-moz-placeholder, .navbar .search-query:focus :-moz-placeholder, .navbar .search-query.focused :-moz-placeholder {
+ color: #999999;
+}
+.navbar .search-query::-webkit-input-placeholder, .navbar .search-query:focus::-webkit-input-placeholder, .navbar .search-query.focused::-webkit-input-placeholder {
+ color: #999999;
+}
.navbar .nav .active > a, .navbar .nav li > a:hover, .navbar .brand:hover {
border-bottom: 3px solid #33b5e5;
}
@@ -3944,13 +3952,55 @@ select,
.btn.disabled, .btn[disabled] {
background-color: #adafae;
}
-.form-actions {
- background: transparent;
+input, textarea, select {
+ background-color: #ccc;
+ border-color: #bbb;
+ border-width: 2px;
+}
+input :-moz-placeholder, textarea :-moz-placeholder, select :-moz-placeholder {
+ color: #999999;
+}
+input::-webkit-input-placeholder, textarea::-webkit-input-placeholder, select::-webkit-input-placeholder {
+ color: #999999;
}
legend, label {
color: #999999;
border-bottom: 0px solid #222;
}
+input[disabled],
+select[disabled],
+textarea[disabled],
+input[readonly],
+select[readonly],
+textarea[readonly],
+.uneditable-input {
+ background-color: #555;
+ border-color: #444;
+}
+input:focus,
+textarea:focus,
+input.focused,
+textarea.focused {
+ border-color: #52a8ec;
+ outline: 0;
+ outline: thin dotted \9;
+ /* IE6-9 */
+
+}
+input[type="file"]:focus,
+input[type="radio"]:focus,
+input[type="checkbox"]:focus,
+select:focus {
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ box-shadow: none;
+ outline: thin dotted #333;
+ outline: 5px auto -webkit-focus-ring-color;
+ outline-offset: -2px;
+}
+.form-actions {
+ background: transparent;
+}
.form-actions, footer.footer {
border-top: 1px solid #222;
}
@@ -3962,9 +4012,15 @@ legend, label {
border-radius: 0;
}
.label {
+ color: #eeeeee;
+}
+.label, .alert {
background-color: #666666;
}
-.label-important {
+.label:hover {
+ background-color: #4d4d4d;
+}
+.label-important, .alert-danger, .alert-error {
background-color: #cc0000;
}
.label-important:hover {
@@ -3976,15 +4032,29 @@ legend, label {
.label-warning:hover {
background-color: #995200;
}
-.label-success {
+.label-success, .alert-success {
background-color: #5c8a00;
}
.label-success:hover {
background-color: #3a5700;
}
-.label-info {
+.label-info, .alert-info {
background-color: #007399;
}
.label-info:hover {
background-color: #004d66;
}
+.alert,
+.alert .alert-heading,
+.alert-success,
+.alert-success .alert-heading,
+.alert-danger,
+.alert-error,
+.alert-danger .alert-heading,
+.alert-error .alert-heading,
+.alert-info,
+.alert-info .alert-heading {
+ color: #eeeeee;
+ text-shadow: none;
+ border: none;
+}
diff --git a/cyborg/bootstrap.min.css b/cyborg/bootstrap.min.css
index 2226334a..34920925 100644
--- a/cyborg/bootstrap.min.css
+++ b/cyborg/bootstrap.min.css
@@ -634,15 +634,16 @@ a.thumbnail:hover{border-color:#33b5e5;-webkit-box-shadow:0 1px 4px rgba(0, 105,
h1,h2,h3,h4,h5,.navbar .brand,.navbar .nav-collapse.collapse .nav li>a{color:#eeeeee;font-weight:normal;text-shadow:none;}
.navbar{font-size:16px;}
label,input,button,select,textarea{font-family:'Droid Sans',sans-serif;color:#999999;}
-.navbar .search-query::-moz-placeholder{font-family:'Droid Sans',sans-serif;color:#999999;}
-.navbar .search-query:::-webkit-input-placeholder{font-family:'Droid Sans',sans-serif;}
+.navbar .search-query:-moz-placeholder{font-family:'Droid Sans',sans-serif;color:#999999;}
+.navbar .search-query::-webkit-input-placeholder{font-family:'Droid Sans',sans-serif;}
blockquote{border-left:5px solid #33b5e5;}blockquote.pull-right{border-right:5px solid #33b5e5;}
body{background-color:#060606;background-color:#121417;background-image:-moz-linear-gradient(top, #060606, #252a30);background-image:-ms-linear-gradient(top, #060606, #252a30);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#060606), to(#252a30));background-image:-webkit-linear-gradient(top, #060606, #252a30);background-image:-o-linear-gradient(top, #060606, #252a30);background-image:linear-gradient(top, #060606, #252a30);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#060606', endColorstr='#252a30', GradientType=0);}
.page-header{border-bottom:2px solid #33b5e5;}
.navbar-inner{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;border-bottom:2px solid #33b5e5;}
.navbar .nav li>a{padding:13px 10px 8px;border-bottom:3px solid rgba(0, 0, 0, 0);}
.navbar .brand{padding:12px 20px 8px;}
-.navbar .search-query{background:#000000;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;}
+.navbar .search-query,.navbar .search-query:focus,.navbar .search-query.focused{color:#adafae;text-shadow:none;background-color:#222;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;}.navbar .search-query :-moz-placeholder,.navbar .search-query:focus :-moz-placeholder,.navbar .search-query.focused :-moz-placeholder{color:#999999;}
+.navbar .search-query::-webkit-input-placeholder,.navbar .search-query:focus::-webkit-input-placeholder,.navbar .search-query.focused::-webkit-input-placeholder{color:#999999;}
.navbar .nav .active>a,.navbar .nav li>a:hover,.navbar .brand:hover{border-bottom:3px solid #33b5e5;}
.navbar .nav>li>a{border-left:1px solid #222;}
.dropdown-menu{background-color:#191A1A;border-left:solid 1px rgba(256, 256, 256, 0.1);-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.8);-moz-box-shadow:0 2px 4px rgba(0, 0, 0, 0.8);box-shadow:0 2px 4px rgba(0, 0, 0, 0.8);}
@@ -698,16 +699,24 @@ input,textarea,select,.uneditable-input{color:#282828;}
.btn .caret{border-top:4px solid black;opacity:0.3;}
.btn-group>.dropdown-menu>li>a:hover{border-bottom:0;}
.btn.disabled,.btn[disabled]{background-color:#adafae;}
-.form-actions{background:transparent;}
+input,textarea,select{background-color:#ccc;border-color:#bbb;border-width:2px;}input :-moz-placeholder,textarea :-moz-placeholder,select :-moz-placeholder{color:#999999;}
+input::-webkit-input-placeholder,textarea::-webkit-input-placeholder,select::-webkit-input-placeholder{color:#999999;}
legend,label{color:#999999;border-bottom:0px solid #222;}
+input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly],.uneditable-input{background-color:#555;border-color:#444;}
+input:focus,textarea:focus,input.focused,textarea.focused{border-color:#52a8ec;outline:0;outline:thin dotted \9;}
+input[type="file"]:focus,input[type="radio"]:focus,input[type="checkbox"]:focus,select:focus{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}
+.form-actions{background:transparent;}
.form-actions,footer.footer{border-top:1px solid #222;}
.progress{background-color:#060606;background-image:none;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
-.label{background-color:#666666;}
-.label-important{background-color:#cc0000;}
+.label{color:#eeeeee;}
+.label,.alert{background-color:#666666;}
+.label:hover{background-color:#4d4d4d;}
+.label-important,.alert-danger,.alert-error{background-color:#cc0000;}
.label-important:hover{background-color:#990000;}
.label-warning{background-color:#cc6d00;}
.label-warning:hover{background-color:#995200;}
-.label-success{background-color:#5c8a00;}
+.label-success,.alert-success{background-color:#5c8a00;}
.label-success:hover{background-color:#3a5700;}
-.label-info{background-color:#007399;}
+.label-info,.alert-info{background-color:#007399;}
.label-info:hover{background-color:#004d66;}
+.alert,.alert .alert-heading,.alert-success,.alert-success .alert-heading,.alert-danger,.alert-error,.alert-danger .alert-heading,.alert-error .alert-heading,.alert-info,.alert-info .alert-heading{color:#eeeeee;text-shadow:none;border:none;}
diff --git a/cyborg/bootswatch.less b/cyborg/bootswatch.less
index 6c505489..950daa90 100755
--- a/cyborg/bootswatch.less
+++ b/cyborg/bootswatch.less
@@ -23,12 +23,12 @@ label, input, button, select, textarea {
color: @gray;
}
-.navbar .search-query&::-moz-placeholder {
+.navbar .search-query:-moz-placeholder {
font-family: 'Droid Sans', sans-serif;
color: @gray;
}
-.navbar .search-query&:::-webkit-input-placeholder {
+.navbar .search-query::-webkit-input-placeholder {
font-family: 'Droid Sans', sans-serif;
}
@@ -71,9 +71,14 @@ body {
padding: 12px 20px 8px;
}
-.navbar .search-query {
- background: @black;
+.navbar .search-query,
+.navbar .search-query:focus,
+.navbar .search-query.focused {
+ color: @grayLight;
+ text-shadow: none;
+ background-color: #222;
.border-radius(1px);
+ .placeholder(@gray);
}
.navbar .nav .active > a,
@@ -402,16 +407,44 @@ input, textarea, select, .uneditable-input {
// FORMS
// -----------------------------------------------------
-
-.form-actions {
- background: transparent;
-}
+input, textarea, select {
+ background-color: #ccc;
+ border-color: #bbb;
+ border-width: 2px;
+ .placeholder(@gray);
+}
legend, label {
color: @textColor;
border-bottom: 0px solid #222;
}
+input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly], .uneditable-input {
+ background-color: #555;
+ border-color: #444;
+}
+
+input:focus,
+textarea:focus,
+input.focused,
+textarea.focused {
+ border-color: rgba(82,168,236,1);
+ outline: 0;
+ outline: thin dotted \9; /* IE6-9 */
+}
+
+input[type="file"]:focus,
+input[type="radio"]:focus,
+input[type="checkbox"]:focus,
+select:focus {
+ .box-shadow(none); // override for file inputs
+ .tab-focus();
+}
+
+.form-actions {
+ background: transparent;
+}
+
.form-actions, footer.footer {
border-top: 1px solid #222;
}
@@ -427,12 +460,43 @@ legend, label {
.border-radius(0);
}
-.label { background-color: darken(@gray, 20%); }
-.label-important { background-color: @red; }
+.label {
+ color: @grayLighter;
+}
+
+.label, .alert { background-color: darken(@gray, 20%); }
+
+.label:hover { background-color: darken(@gray, 30%); }
+
+
+.label-important, .alert-danger,
+.alert-error { background-color: @red; }
+
.label-important:hover { background-color: darken(@red, 10%); }
+
.label-warning { background-color: darken(@orange, 10%); }
+
.label-warning:hover { background-color: darken(@orange, 20%); }
-.label-success { background-color: darken(@green, 3%); }
+
+.label-success, .alert-success { background-color: darken(@green, 3%); }
+
.label-success:hover { background-color: darken(@green, 13%); }
-.label-info { background-color: darken(@blueDark, 10%); }
+
+.label-info, .alert-info { background-color: darken(@blueDark, 10%); }
+
.label-info:hover { background-color: darken(@blueDark, 20%); }
+
+.alert,
+.alert .alert-heading,
+.alert-success,
+.alert-success .alert-heading,
+.alert-danger,
+.alert-error,
+.alert-danger .alert-heading,
+.alert-error .alert-heading,
+.alert-info,
+.alert-info .alert-heading {
+ color: @grayLighter;
+ text-shadow: none;
+ border: none;
+}