tweaked Cyborg alerts and form inputs
authorThomas Park <thomas@thomaspark.me>
Sat, 18 Feb 2012 17:22:56 +0000 (12:22 -0500)
committerThomas Park <thomas@thomaspark.me>
Sat, 18 Feb 2012 17:22:56 +0000 (12:22 -0500)
cyborg/bootstrap.css
cyborg/bootstrap.min.css
cyborg/bootswatch.less

index 8809d71..4dc84a8 100644 (file)
@@ -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;
+}
index 2226334..3492092 100644 (file)
@@ -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;}
index 6c50548..950daa9 100755 (executable)
@@ -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;
+}